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