Pushing the Boundaries without Breaking the Web

The version of this talk that I gave at Frontend Conference in Zurich. For links to the video and some reference material see: http://www.rachelandrew.co.uk/presentations/frontend-conference-zurich

Transcript

1. Pushing the boundaries
   without
   Breaking the Web
   

   View Slide

2. Rachel Andrew
   http://edgeofmyseat.com
   http://grabaperch.com
   http://rachelandrew.co.uk
   @rachelandrew
   

   View Slide

3. a History Lesson
   

   View Slide

4. <br/><!--<br/>function MM_reloadPage(init) {<br/>if (init==true) with (navigator) {if<br/>((appName=="Netscape")&&(parseInt(appVersion)==4)) {<br/>document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;<br/>onresize=MM_reloadPage; }}<br/>else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)<br/>location.reload();<br/>}<br/>MM_reloadPage(true);<br/>//--><br/>
   

   View Slide

5. View Slide

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.
   

   View Slide

7. This is an amazing time
   to be a web developer.
   

   View Slide

8. View Slide

9. View Slide

10. Frustration
    

    View Slide

11. The web is a
    work in progress.
    Your job?
    To deal with it.
    

    View Slide

12. Making things better
    

    View Slide

13. View Slide

14. You now have
    two problems
    

    View Slide

15. View Slide

16. The state of play in December 2011.
    

    View Slide

17. December 2011: greenbelt.org.uk
    

    View Slide

18. December 2011: greenbelt.org.uk
    

    View Slide

19. December 2011: greenbelt.org.uk
    

    View Slide

20. December 2011: greenbelt.org.uk
    

    View Slide

21. December 2011: greenbelt.org.uk
    

    View Slide

22. December 2011: greenbelt.org.uk
    

    View Slide

23. December 2011: greenbelt.org.uk
    

    View Slide

24. December 2011: greenbelt.org.uk
    

    View Slide

25. December 2011: greenbelt.org.uk
    

    View Slide

26. December 2011: greenbelt.org.uk
    

    View Slide

27. December 2011: greenbelt.org.uk
    

    View Slide

28. Understanding the technology your
    audience is using gives you a point of
    reference for your decisions.
    

    View Slide

29. Our approach: mobile first responsive
    design
    

    View Slide

30. 
    
    
    
    
    

    View Slide

31. View Slide

32. Problem: no media query support in IE8
    and below.
    

    View Slide

33. No media query support
    

    View Slide

34. No media query support
    

    View Slide

35. No media query support
    

    View Slide

36. Option 1: serve these users the mobile
    version of the site only
    

    View Slide

37. Option 2: Use respond.js to polyfill media
    query support
    

    View Slide

38. Option 3: Offer a fixed width version of the
    site to IE8 and below
    

    View Slide

39. View Slide

40. Problem: lack of support for styling HTML5
    semantic elements in older browsers.
    

    View Slide

41. No support for HTML5 semantic elements
    

    View Slide

42. No support for HTML5 semantic elements
    

    View Slide

43. No support for HTML5 semantic elements
    

    View Slide

44. Option 1: use the JavaScript polyfill
    html5.js to add support via JavaScript
    

    View Slide

45. Option 2: avoid using HTML5 semantic
    elements in the templates until IE8 usage
    declines
    

    View Slide

46. Replacing divs with semantic elements
    later is trivial due to our template based
    CMS.
    

    View Slide

47. We (edgeofmyseat.com) are retained to
    maintain & develop the site. We can make
    these changes when old browser usage
    reduces.
    

    View Slide

48. Your mileage (and situation) may vary.
    

    View Slide

49. Avoiding using the tag in your selectors
    means you can switch tags in your
    templates without changing your CSS.
    

    View Slide

50. Problem: lack of support for certain CSS3
    Selectors in older browsers.
    

    View Slide

51. No support for nth-child
    

    View Slide

52. Option1: do nothing
    

    View Slide

53. Option 2: polyfill with Selectivizr
    

    View Slide

54. Option 3: fix each selector in your own
    JavaScript
    

    View Slide

55. My decision to fix the width for older
    browsers also made polyfilling CSS3
    selectors much easier.
    

    View Slide

56. Problem: no clear solution for Responsive
    Images
    

    View Slide

57. Solution: put in place technology that will
    enable us to adopt a solution later
    

    View Slide

58. My process
    

    View Slide

59. 1. What is the problem?
    My process
    

    View Slide

60. 1. What is the problem?
    My process
    2. What are my constraints?
    

    View Slide

61. 1. What is the problem?
    My process
    2. What are my constraints?
    3. Is not supporting this feature an option?
    

    View Slide

62. 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?
    

    View Slide

63. 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?
    

    View Slide

64. May 2012: grabaperch.com
    

    View Slide

65. May 2012: grabaperch.com
    

    View Slide

66. May 2012: grabaperch.com
    

    View Slide

67. May 2012: grabaperch.com
    

    View Slide

68. May 2012: grabaperch.com
    

    View Slide

69. May 2012: grabaperch.com
    

    View Slide

70. May 2012: grabaperch.com
    

    View Slide

71. May 2012: grabaperch.com
    

    View Slide

72. May 2012: grabaperch.com
    

    View Slide

73. How many users of the Perch website do
    not have support for the modern web
    technologies we want to use?
    

    View Slide

74. May 2012: grabaperch.com
    

    View Slide

75. May 2012: grabaperch.com
    

    View Slide

76. May 2012: grabaperch.com
    

    View Slide

77. View Slide

78. I use more polyfills when I have fewer
    older browser users. The downsides are
    going to be an issue to a much smaller %
    

    View Slide

79. Why not just use a
    boilerplate?
    

    View Slide

80. View Slide

81. Stop solving problems
    you don’t yet have
    

    View Slide

82. If you don’t know
    what it is doing.
    Why is it there?
    

    View Slide

83. What happens if any
    part does not load?
    

    View Slide

84. Do you know what
    is safe to delete?
    

    View Slide

85. Starting with the bare minimum and
    adding things forces you to consider the
    implications of each thing you add.
    

    View Slide

86. 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
    

    View Slide

87. 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/
    

    View Slide

88. Size Matters
    

    View Slide

89. Helping people to
    start well.
    

    View Slide

90. We are all learners and we are all
    teachers...
    

    View Slide

91. ... no matter how old we are, how long we
    have been doing this, and whether we
    write tutorials or speak at conferences or
    not.
    

    View Slide

92. Polyfills should
    not be a black box
    

    View Slide

93. Teach problem solving
    before polyfilling.
    

    View Slide

94. View Slide

95. “Perch is removing my
    paragraphs”
    

    View Slide

96. We need to teach:
    HTML, CSS, JavaScript
    

    View Slide

97. We need to teach:
    Problem Solving skills
    

    View Slide

98. View Slide

99. If we train people to just copy and paste,
    we stop them growing, learning and
    contributing.
    

    View Slide

100. Moving the web forward
     together
     

     View Slide

101. Make sure you know why you are using a
     solution and what your other options are.
     

     View Slide

102. Know and test for what happens if
     JavaScript doesn’t load.
     

     View Slide

103. When teaching or writing tutorials for
     others explain problems before handing
     out the solution.
     Explain why as well as how.
     

     View Slide

104. Thank you.
     Image credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrong
     

     View Slide