Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Knowing it all
Rachel Andrew | CSSDevConf 2016
Hello
CSS Grid, Variables, Communication,
Tools, Sass, SVG, Responsive,
Performance, Animation, Design
Patterns, UI Design, Comp...
What is CSS today?
What is it to be a front-
end developer today?
Burnout
We want to know what is
the right thing to do
We want absolute answers.
How would I get started
today?
It's 1989
Dancers do not need to use
computers
The web gave me a
community
“Knowing HTML” was a
marketable skill
Learning something one
day
Teaching it to someone else the next
The web gave me a new
career.
The web was accessible, and
had a culture of sharing
knowledge.
Font tags and nested tables
What does this do?
function MM_reloadPage(init) {
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(a...
The “Netscape Resize Fix”
If the user resized their browser window positioned
elements lost their positioning values.
The ...
… basic support of existing W3C
standards has been sacrificed in
the name of such innovation,
needlessly fragmenting the W...
Our goal is to support these core
standards and encourage browser
makers to do the same, thereby
ensuring simple, affordab...
Encouraging designers to
care about web standards
Front-end developer
2005?
Browser bugs expert
Thanks to the hard work of
countless WaSP members and
supporters (like you), Tim Berners-
Lee’s vision of the web as an op...
Browser vendors are
implementing standard
things in a standard way
Innovation happens
through the standards
process
Creating a better layout
system for the web
A story that begins in 1996
"Traditional page-layout authoring tools
for desktop publishing allow you to create
and move and resize document frames.
Y...
"these policies cause an element to
define an invisible grid, in which
descendant element will be placed."
- https://www.w...
Show stopping browser
bugs when doing
straightforward things in
modern browsers are rare
The industry has grown up
Studies show that a todo list is
the most complex JavaScript app
you can create before a newer,
better framework is invent...
We’re creating complexity
Hiding the simple languages of the web
behind tooling and process
How do I learn all this
stuff?!
You don't
Not every tool /
technique / "best" practice
is for you
Learn the skill of assessing
what is useful for you
Learn the core skills
Learn these first
4 HTML
4 CSS
4 JavaScript fundamentals
4 Accessibility fundamentals
4 Basics of HTTP
Understand the
foundations
and you'll find everything else much
easier
Learn how to Learn
Learn the key things
properly
Don't fall into the habit of skimming
the surface and copying & pasting
What problems do we have?
Does this address an actual
problem?
Is the person evangelizing
this working on projects
like ours?
Collect ideas
Learn enough so you will recognise
when you have the problem that they
solve
Collect experts
When you do need to learn they can
point you to real-world tested
experience
New is not always better
Beware shiny object syndrome
There is a lot of great work
being developed on very
simple stacks
We all end up with
4 HTML
4 CSS
4 JavaScript
... how you get there is just process.
That said ...
Leave a little space to play with cool
stuff
(because it's fun)
Knowing your core skills
brings opportunity to
contribute
Giving back
If you have been doing this
for a year, there is someone
6 months in who you are
ideally placed to help.
You will learn by teaching
Contribute to the
standards that make up the
web
The CSS Working Group
What do authors think?
Making a difference to a
CSS Specification
can be as straightforward as writing
about how you want to use it
Learn how the modern
standards process works
To make an impact on a
specification you need to do
so while it is still
experimental
Vendor Prefixes are going
away
The Path of Flexbox vs.
Grid Layout
Flexbox - developed using
Vendor Prefixes
Vendor prefixes don't know
an author from an end-user
Browsers implemented and
then the spec changed
and changed again
How do we create a flex container?
display: box
display: flexbox
display: flex
Flex shorthand for the flex items?
box-flex...
Defining a Grid the old way
#grid {
display: grid;
grid-definition-columns: 150px 1fr;
grid-definition-rows: 50px 1fr 50px...
The problem with feature
flags
Developing behind flags
means authors need to be
proactive in testing
It's a feature not a bug
If authors do not offer
feedback
the final specification will reflect our
needs as understood by people who do
not build w...
Contributing to the open
web platform
is like giving future you a gift
Contribute to CSS Specifications
4 Specifications are discussed on GitHub at https://
github.com/w3c/csswg-drafts
Contribute to
interoperability
Raise bugs with browsers
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 a...
Keep learning
Learning. Contributing
Excited about the future.
Your CSS Dev Conf Challenge
1. Find something directly relevant to a problem you
have today
2. Find something that just ge...
Thank you!
Slides and links at
https://cssgrid.me/cssdevconf2016
@rachelandrew
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Knowing it all
Upcoming SlideShare
Loading in …5
×

Knowing it all

23,202 views

Published on

My opening keynote for CSS Dev Conf

Published in: Technology
  • Be the first to comment

Knowing it all

  1. 1. Knowing it all Rachel Andrew | CSSDevConf 2016
  2. 2. Hello
  3. 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. 4. What is CSS today?
  5. 5. What is it to be a front- end developer today?
  6. 6. Burnout
  7. 7. We want to know what is the right thing to do We want absolute answers.
  8. 8. How would I get started today?
  9. 9. It's 1989
  10. 10. Dancers do not need to use computers
  11. 11. The web gave me a community
  12. 12. “Knowing HTML” was a marketable skill
  13. 13. Learning something one day Teaching it to someone else the next
  14. 14. The web gave me a new career.
  15. 15. The web was accessible, and had a culture of sharing knowledge.
  16. 16. Font tags and nested tables
  17. 17. 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);
  18. 18. 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.
  19. 19. … 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
  20. 20. 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
  21. 21. Encouraging designers to care about web standards
  22. 22. Front-end developer 2005? Browser bugs expert
  23. 23. 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/
  24. 24. Browser vendors are implementing standard things in a standard way
  25. 25. Innovation happens through the standards process
  26. 26. Creating a better layout system for the web A story that begins in 1996
  27. 27. "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
  28. 28. "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/
  29. 29. Show stopping browser bugs when doing straightforward things in modern browsers are rare
  30. 30. The industry has grown up
  31. 31. 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/
  32. 32. We’re creating complexity Hiding the simple languages of the web behind tooling and process
  33. 33. How do I learn all this stuff?!
  34. 34. You don't
  35. 35. Not every tool / technique / "best" practice is for you
  36. 36. Learn the skill of assessing what is useful for you
  37. 37. Learn the core skills
  38. 38. Learn these first 4 HTML 4 CSS 4 JavaScript fundamentals 4 Accessibility fundamentals 4 Basics of HTTP
  39. 39. Understand the foundations and you'll find everything else much easier
  40. 40. Learn how to Learn
  41. 41. Learn the key things properly Don't fall into the habit of skimming the surface and copying & pasting
  42. 42. What problems do we have?
  43. 43. Does this address an actual problem?
  44. 44. Is the person evangelizing this working on projects like ours?
  45. 45. Collect ideas Learn enough so you will recognise when you have the problem that they solve
  46. 46. Collect experts When you do need to learn they can point you to real-world tested experience
  47. 47. New is not always better Beware shiny object syndrome
  48. 48. There is a lot of great work being developed on very simple stacks
  49. 49. We all end up with 4 HTML 4 CSS 4 JavaScript ... how you get there is just process.
  50. 50. That said ... Leave a little space to play with cool stuff (because it's fun)
  51. 51. Knowing your core skills brings opportunity to contribute
  52. 52. Giving back
  53. 53. If you have been doing this for a year, there is someone 6 months in who you are ideally placed to help.
  54. 54. You will learn by teaching
  55. 55. Contribute to the standards that make up the web
  56. 56. The CSS Working Group
  57. 57. What do authors think?
  58. 58. Making a difference to a CSS Specification can be as straightforward as writing about how you want to use it
  59. 59. Learn how the modern standards process works
  60. 60. To make an impact on a specification you need to do so while it is still experimental
  61. 61. Vendor Prefixes are going away
  62. 62. The Path of Flexbox vs. Grid Layout
  63. 63. Flexbox - developed using Vendor Prefixes
  64. 64. Vendor prefixes don't know an author from an end-user
  65. 65. Browsers implemented and then the spec changed and changed again
  66. 66. How do we create a flex container? display: box display: flexbox display: flex Flex shorthand for the flex items? box-flex: 1 flex: 1
  67. 67. 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 }
  68. 68. The problem with feature flags
  69. 69. Developing behind flags means authors need to be proactive in testing
  70. 70. It's a feature not a bug
  71. 71. If authors do not offer feedback the final specification will reflect our needs as understood by people who do not build websites.
  72. 72. Contributing to the open web platform is like giving future you a gift
  73. 73. Contribute to CSS Specifications 4 Specifications are discussed on GitHub at https:// github.com/w3c/csswg-drafts
  74. 74. Contribute to interoperability Raise bugs with browsers
  75. 75. 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
  76. 76. Keep learning
  77. 77. Learning. Contributing Excited about the future.
  78. 78. 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.
  79. 79. Thank you! Slides and links at https://cssgrid.me/cssdevconf2016 @rachelandrew

×