My opening keynote for CSS Dev Conf

1. Knowing it all
Rachel Andrew | CSSDevConf 2016

2. Hello

3. CSS Grid, Variables, Communication,
Tools, Sass, SVG, Responsive,
Performance, Animation, Design
Patterns, UI Design, Components,
Accessibility, ARIA, Creativity,
Architecture, Typography, HTTP/2,
Testing, Container Queries, Data
Visualization.

4. What is CSS today?

5. What is it to be a front-
end developer today?

6. Burnout

7. We want to know what is
the right thing to do
We want absolute answers.

8. How would I get started
today?

9. It's 1989

12. Dancers do not need to use
computers

14. The web gave me a
community

16. “Knowing HTML” was a
marketable skill

17. Learning something one
day
Teaching it to someone else the next

18. The web gave me a new
career.

20. The web was accessible, and
had a culture of sharing
knowledge.

21. Font tags and nested tables

25. What does this do?
function MM_reloadPage(init) {
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

26. The “Netscape Resize Fix”
If the user resized their browser window positioned
elements lost their positioning values.
The “fix” was to reload the browser window on resize.

28. … basic support of existing W3C
standards has been sacrificed in
the name of such innovation,
needlessly fragmenting the Web
and helping no one.
1
http://archive.webstandards.org/mission.html

29. Our goal is to support these core
standards and encourage browser
makers to do the same, thereby
ensuring simple, affordable access
to Web technologies for all.
1
http://archive.webstandards.org/mission.html

31. Encouraging designers to
care about web standards

34. Front-end developer
2005?
Browser bugs expert

35. Thanks to the hard work of
countless WaSP members and
supporters (like you), Tim Berners-
Lee’s vision of the web as an open,
accessible, and universal community
is largely the reality.
1
http://www.webstandards.org/2013/03/01/our-work-here-is-done/

36. Browser vendors are
implementing standard
things in a standard way

37. Innovation happens
through the standards
process

39. Creating a better layout
system for the web
A story that begins in 1996

40. "Traditional page-layout authoring tools
for desktop publishing allow you to create
and move and resize document frames.
You can then view and alter properties of
these frames, e.g. the background color
and the style of borders if any."
- https://www.w3.org/TR/NOTE-
layout

41. "these policies cause an element to
define an invisible grid, in which
descendant element will be placed."
- https://www.w3.org/TR/
2005/WD-css3-
layout-20051215/

47. Show stopping browser
bugs when doing
straightforward things in
modern browsers are rare

48. The industry has grown up

49. Studies show that a todo list is
the most complex JavaScript app
you can create before a newer,
better framework is invented.
1
http://www.allenpike.com/2015/javascript-framework-fatigue/

50. We’re creating complexity
Hiding the simple languages of the web
behind tooling and process

52. How do I learn all this
stuff?!

53. You don't

54. Not every tool /
technique / "best" practice
is for you

55. Learn the skill of assessing
what is useful for you

56. Learn the core skills

57. Learn these first
4 HTML
4 CSS
4 JavaScript fundamentals
4 Accessibility fundamentals
4 Basics of HTTP

58. Understand the
foundations
and you'll find everything else much
easier

59. Learn how to Learn

60. Learn the key things
properly
Don't fall into the habit of skimming
the surface and copying & pasting

61. What problems do we have?

62. Does this address an actual
problem?

63. Is the person evangelizing
this working on projects
like ours?

64. Collect ideas
Learn enough so you will recognise
when you have the problem that they
solve

65. Collect experts
When you do need to learn they can
point you to real-world tested
experience

66. New is not always better
Beware shiny object syndrome

67. There is a lot of great work
being developed on very
simple stacks

68. We all end up with
4 HTML
4 CSS
4 JavaScript
... how you get there is just process.

69. That said ...
Leave a little space to play with cool
stuff
(because it's fun)

70. Knowing your core skills
brings opportunity to
contribute

71. Giving back

72. If you have been doing this
for a year, there is someone
6 months in who you are
ideally placed to help.

73. You will learn by teaching

74. Contribute to the
standards that make up the
web

75. The CSS Working Group

76. What do authors think?

77. Making a difference to a
CSS Specification
can be as straightforward as writing
about how you want to use it

78. Learn how the modern
standards process works

80. To make an impact on a
specification you need to do
so while it is still
experimental

81. Vendor Prefixes are going
away

82. The Path of Flexbox vs.
Grid Layout

83. Flexbox - developed using
Vendor Prefixes

84. Vendor prefixes don't know
an author from an end-user

85. Browsers implemented and
then the spec changed
and changed again

86. How do we create a flex container?
display: box
display: flexbox
display: flex
Flex shorthand for the flex items?
box-flex: 1
flex: 1

87. Defining a Grid the old way
#grid {
display: grid;
grid-definition-columns: 150px 1fr;
grid-definition-rows: 50px 1fr 50px
}
The new way
#grid {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 50px 1fr 50px
}

88. The problem with feature
flags

89. Developing behind flags
means authors need to be
proactive in testing

90. It's a feature not a bug

92. If authors do not offer
feedback
the final specification will reflect our
needs as understood by people who do
not build websites.

93. Contributing to the open
web platform
is like giving future you a gift

94. Contribute to CSS Specifications
4 Specifications are discussed on GitHub at https://
github.com/w3c/csswg-drafts

96. Contribute to
interoperability
Raise bugs with browsers

97. Learn to create a reduced
test case
This is a skill that will save time in
your own work and also in logging
issues with any project

98. Keep learning

99. Learning. Contributing
Excited about the future.

100. Your CSS Dev Conf Challenge
1. Find something directly relevant to a problem you
have today
2. Find something that just gets you excited about the
possibilities of CSS
3. Share and teach what you have learned.

101. Thank you!
Slides and links at
https://cssgrid.me/cssdevconf2016
@rachelandrew