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

23,514 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

×