How to Stay Relevant

Transcript

1. 1.

   HOW TO STAY RELEVANT
   #FOWD 04/14

2. 2.

   PETER GASSTON
   @stopsatgreen
   broken-links.com

3. 3.

   TECHNOLOGIST & FRONT-END LEAD
   rehabstudio.com

4. 4.

   Desktop Tablet Mobile March 2008 March 2014

5. 5.

   THINK ABOUT THE FUTURE

6. 6.

   None
7. 7.

   “By anticipating what’s next, we can react to today’s concerns

   but also build long-term value for people and businesses.” //futurefriendlyweb.com/
8. 8.

   CSS LAYOUTS
   grid layouts

9. 9.

   GRID LAYOUT .parent { display: grid; grid-template-columns: 1fr 1fr 2fr;

   grid-template-rows: 10em auto 40px; }
10. 10.

    GRID LAYOUT .child { grid-column: 2; grid-row: 2; } 1

    2 3 4 2 3 4
11. 11.

    GRID LAYOUT a b 1 2 3 4 2 3

    4 .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
12. 12.

    GRID LAYOUT b a 1 2 3 4 2 3

    4 @media(foo) { .a, .b { grid-column: span 3; } .b { grid-row: 3; } }
13. 13.

    ?

14. 14.

    //bradfrostweb.com/blog/post/atomic-web-design/

15. 15.

    None
16. 16.

    OOCSS BEM Java Applets Dynamic Drive React Fruit Machine jQuery

    UI Bootstrap Web Components
17. 17.

    WEB COMPONENTS
    1. Custom Elements

18. 18.

    “Everything is an element.” //polymer-project.org/docs/start/everything.html

19. 19.

    <img src="foo.png"> <input type="range">

20. 20.

    <google-maps latitude="" longitude=""> <ajax-call url="" on-response=""> <video is="video-camera">

21. 21.

    <x-gif src="foo.gif"> //geelen.github.io/x-gif/

22. 22.

    <x-gif src="foo.gif" ping-pong>

23. 23.

    //coding.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/

24. 24.

    WEB COMPONENTS
    2. HTML Imports

25. 25.

    <link rel="import" href="foo.html"> <g id="circles" fill="#000000"> <circle id="n" cx="50" cy="18.4"

    r="18.4"/> <circle id="ne" cx="72.4" cy="27.6" r="18.4"/> <circle id="e" cx="81.6" cy="50" r="18.4"/> <circle id="se" cx="72.4" cy="72.4" r="18.4"/> <circle id="s" cx="50" cy="81.6" r="18.4"/>
26. 26.

    WEB COMPONENTS
    3. Shadow DOM

27. 27.

    <input type="range"> ! ! ! ! ! <div> <div id="track">

    <div id="thumb"></div> </div> </div> </input>
28. 28.

    WEB COMPONENTS <template> Mutation Observers Scoped Styles

29. 29.

    ? ?

30. 30.

    Platform / Polyfills Polymer Core Polymer Elements X-Tag Core Brick

    Polymer X-Tags //polymer-project.org/ //mozilla.github.io/brick/
31. 31.

    THE OUTCOME Meaningful Markup Reusable Elements Consistent UI?

32. 32.

    THE CHALLENGES Proliferation of crap Performance A11y & I18n

33. 33.

    “Web components are just a tool that will enable you

    to write better… front end code. They are not a silver bullet that automagically makes everything work.” //soledadpenades.com/2014/03/25/web-components-silver-bullet/
34. 34.

    REMEMBER THE BASICS

35. 35.

    THE BASICS
    accessibility

36. 36.

    None
37. 37.

    THE BASICS
    progressive enhancement

38. 38.

    “When an elevator fails, it’s useless. When an escalator fails,

    it becomes stairs. We should be building escalators, not elevators.” //jakearchibald.com/2013/progressive-enhancement-still-important/
39. 39.

    THE BASICS
    performance

40. 40.

    //moto.oakley.com

41. 41.

    “Oakley’s monster page of baubles.” //hawksworx.com/blog/oakleys-monster-page-of-baubles/

42. 42.

    471 HTTP requests 85.4MB page weight 2'45" DOMContentLoaded 4'10" Load

43. 43.

    47 percent expect a web page to load in two

    seconds or less. 40 percent abandon a website that takes longer than three seconds to load. //blog.kissmetrics.com/loading-time/
44. 44.

    79 percent of shoppers dissatisfied with performance are less likely

    to visit again. 52 percent say that page load performance is important to their site loyalty. //blog.kissmetrics.com/loading-time/
45. 45.

    “Performance is of course a hugely important measure in this

    age of the mobile web, but performance for performance’s sake trivialises what we do.” //threechords.org/blog/the-web-less-engine-more-gas/
46. 46.

    None
47. 47.

    AUTOMATE

48. 48.

    “We shape our tools and then our tools shape us”

    - Marshall McLuhan (attr.) //vimeo.com/11697990
49. 49.

    //twitter.com/SlexAxton/status/426939308998549505

50. 50.

    None
51. 51.

    Bower Git Grunt Require Sass B G G R S

52. 52.

    //twitter.com/mattpointblank/status/356899458384019456

53. 53.

    WORKFLOW
    responsive workflow

54. 54.

    //www.slideshare.net/stephenhay/uie-28445621

55. 55.

    //www.slideshare.net/stephenhay/uie-28445621

56. 56.

    //twitter.com/jmspool/status/425981610488770560

57. 57.

    “Technical skills still matter, but today making digital services that

    meet users’ needs also depends on our ability to collaborate across many types of boundaries.” //alistapart.com/article/people-skills-for-web-workers
58. 58.

    HAVE EMPATHY

59. 59.

    //youtube.com/watch?v=BKorP55Aqvg

60. 60.

    //twitter.com/Cennydd/status/448131750099951616

61. 61.

    //twitter.com/jensimmons/status/423495392001814529

62. 62.

    //tabcloseddidntread.com/post/80169170722/get-the-latest-bullshit-delivered-fresh-to-your

63. 63.

    //tinyurl.com/ptch4u7

64. 64.

    OPEN YOUR MIND

65. 65.

    None
66. 66.

    None
67. 67.

    “If you are only skeptical, then no new ideas make

    it through to you. You never learn anything new.” //www.positiveatheism.org/writ/saganbur.htm
68. 68.

    Pilkunnussija Comma f***er ,

69. 69.

    Miereneuker Ant f***er

70. 70.

    None
71. 71.

    //twitter.com/thomasfuchs/status/447358565867859968

72. 72.

    //www.youtube.com/watch?v=ijtQP9nwrQA

73. 73.

    THE FUTURE THE BASICS AUTOMATE HAVE EMPATHY OPEN YOUR MIND

74. 74.

    PETER GASSTON
    @stopsatgreen
    broken-links.com