Web Summer Camp Keynote


Published on

Some thoughts on what to do when it seems we need to "know it all" to be a web developer.

Published in: Technology

Web Summer Camp Keynote

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