Stop solving problems you don't yet have

Presentation for Fronteers meetup in Amsterdam, June 2012. The blog post that this is based on can be found at: http://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you-dont-yet-have/

Transcript

1. Stop solving problems you don’t yet have
2. Rachel Andrew http://edgeofmyseat.com http://grabaperch.com http://rachelandrew.co.uk @rachelandrew
3. a History Lesson
4. <script type="text/javascript"> <!-- 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); //--> </script>
6. Things used by people who understand the problems they solve are also used by those who do not understand those problems, or even if there is a problem.
7. This is an amazing time to be a web developer.
10. Frustration
11. The web is a work in progress. Your job? To deal with it.
12. Making things better
14. You now have two problems
16. The state of play in December 2011.
17. December 2011: greenbelt.org.uk
18. Understanding the technology your audience is using gives you a point of reference for your decisions.
19. Our approach: mobile first responsive design
20. <link rel="stylesheet" href="/assets/css/basic.css" /> <link rel="stylesheet" media="only screen and (min-width: 460px)" href="/ assets/css/460.css" /> <link rel="stylesheet" media="only screen and (min-width: 700px)" href="/ assets/css/700.css" /> <link rel="stylesheet" media="only screen and (min-width: 940px)" href="/ assets/css/940.css" /> <link rel="stylesheet" media="only screen and (min-width: 1180px)" href="/ assets/css/1180.css" />
22. Problem: no media query support in IE8 and below.
23. No media query support
24. Option 1: serve these users the mobile version of the site only
25. Option 2: Use respond.js to polyfill media query support
26. Option 3: Offer a fixed width version of the site to IE8 and below
28. Problem: lack of support for styling HTML5 semantic elements in older browsers.
29. No support for HTML5 semantic elements
30. Option 1: use the JavaScript polyfill html5.js to add support via JavaScript
31. Option 2: avoid using HTML5 semantic elements in the templates until IE8 usage declines
32. Replacing divs with semantic elements later is trivial due to our template based CMS.
33. We (edgeofmyseat.com) are retained to maintain & develop the site. We can make these changes when old browser usage reduces.
34. Your mileage (and situation) may vary.
35. Avoiding using the tag in your selectors means you can switch tags in your templates without changing your CSS.
36. Problem: lack of support for certain CSS3 Selectors in older browsers.
37. No support for nth-child
38. Option1: do nothing
39. Option 2: polyfill with Selectivizr
40. Option 3: fix each selector in your own JavaScript
41. My decision to fix the width for older browsers also made polyfilling CSS3 selectors much easier.
42. Problem: no clear solution for Responsive Images
43. Solution: put in place technology that will enable us to adopt a solution later
44. 1. What is the problem? My process 2. What are my constraints? 3. Is not supporting this feature an option? 4. What current solutions exist? 5. Use a polyfill or roll my own?
45. May 2012: grabaperch.com
46. How many users of the Perch website do not have support for the modern web technologies we want to use?
47. May 2012: grabaperch.com
48. I use more polyfills when I have fewer older browser users. The downsides are going to be an issue to a much smaller %
49. Why not just use a boilerplate?
51. Stop solving problems you don’t yet have
52. If you don’t know what it is doing. Why is it there?
53. What happens if any part does not load?
54. Do you know what is safe to delete?
55. Starting with the bare minimum and adding things forces you to consider the implications of each thing you add.
56. There’s no silver bullet to making a slow site fast. You must take a holistic approach. High performance runs the entire way through from the hardware it’s hosted on, through the app that builds the pages, to the server software that delivers the pages and the front end code that displays them in a browser. Drew McLellan - http://allinthehead.com/retro/361/how-to-make-your-website-fast
57. Web pages are getting larger and a lot of the size is down to JavaScript. http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/
58. Size Matters
59. Helping people to start well.
60. We are all learners and we are all teachers...
61. ... no matter how old we are, how long we have been doing this, and whether we write tutorials or speak at conferences or not.
62. Polyfills should not be a black box
63. Teach problem solving before polyfilling.
65. “Perch is removing my paragraphs”
66. We need to teach: HTML, CSS, JavaScript
67. We need to teach: Problem Solving skills
69. If we train people to just copy and paste, we stop them growing, learning and contributing.
70. Moving the web forward together
71. Make sure you know why you are using a solution and what your other options are.
72. Know and test for what happens if JavaScript doesn’t load.
73. When teaching or writing tutorials for others explain problems before handing out the solution. Explain why as well as how.
74. Thank you. Image credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrong