Yo Dawg, an open letter to a future front end developer

“Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime.”

What if you have to start today? What would you need to know in order to nail at front end development? This talk will explore with you the cornerstones of a craft that evolved in the last few years, but never left the basics behind and don’t give for granted you know them already, there are quite a few things that we are doing wrong: let’s forget what we know to start from scratch.

Transcript

1. Yo dawg
   

   View Slide

2. so you want to be a 

   Frontend developer
   

   View Slide

3. Basically
   Level i
   

   View Slide

4. My assumption is the
   mother of all mistakes.
   Lagwagon - Violins
   

   View Slide

5. cedmax
   Front end dev
   since able to
   grow a beard
   

   View Slide

6. Everything was different
   yep, I had
   to debug
   ie mac
   

   View Slide

7. and no, it wasn’t better
   http://www.webdesignerdepot.com/2009/07/30-handy-cheat-sheets-and-reference-guides-for-web-professionals/
   

   View Slide

8. the basics were the same
   

   View Slide

9. HTML
   

   View Slide

10. css
    

    View Slide

11. Javascript
    

    View Slide

12. CONTENT STYLE BEHAVIOUR
    how we build for the web
    https://www.flickr.com/photos/joaoramos/5795966713 https://www.flickr.com/photos/29310420@N02/6017055570 https://www.flickr.com/photos/85896427@N08/8887898076
    

    View Slide

13. Progressive enhancement
    http://www.lookfordiagnosis.com/mesh_info.php?term=Elevators+and+Escalators&lang=1 https://www.forms-surfaces.com/levele-107-elevator-interiors
    

    View Slide

14. It’s not for browsers
    http://www.aflac.com/agents/#/shirley-s
    

    View Slide

15. It’s for people
    http://www.gizmodo.co.uk/2011/11/ofcom-2011-infrastructure-report-shows-30-per-cent-of-uk-not-covered-by-3g/
    

    View Slide

16. Progressive enhancement in its basic
    form means not making assumptions
    but start with the most basic thing and
    check every step on the way if we are
    still OK to proceed.
    Christian Heilmann

    http://christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/
    

    View Slide

17. Defensive design
    

    View Slide

18. build
    for the web,

    not just
    on the web
    

    View Slide

19. Basically
    Step up
    http://www.chicagonow.com/world-series-dreaming/2013/11/challenge-
    accepted/
    

    View Slide

20. Starting a basic website in 2015

    1. Install Node
    2. Install Bower
    3. Pick CSS framework
    4. Pick responsive approach
    …

    47. Write some HTML

    @iamdevloper
    https://twitter.com/iamdevloper/status/517616294909464576

    

    View Slide

21. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    of course
    

    View Slide

22. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    as a natural 

    consequence
    

    View Slide

23. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    a generator…
    

    View Slide

24. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    …or start from
    scratch
    

    View Slide

25. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    maybe a
    dependency
    manager
    

    View Slide

26. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    pre-processors
    anyone?
    

    View Slide

27. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    pick a methodology
    

    View Slide

28. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    styleguide, maybe?
    

    View Slide

29. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    versioning 

    control system
    

    View Slide

30. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    continuous 

    integration
    

    View Slide

31. https://zapier.com/engineering/continuous-integration-jenkins-docker-github/ http://www.melin.me/
    https://www.behance.net/gallery/BEM/4394265
    deploy
    

    View Slide

32. And then of course…
    

    View Slide

33. We’ve fallen into the trap of talking
    about what “the browser” is capable of,
    as though it were indeed a single
    runtime environment.
    Jeremy Keith

    https://adactio.com/journal/8245
    

    View Slide

34. continuous
    FOrmation 

    is important
    

    View Slide

35. Frontend Gentrification
    http://www.neatorama.com/2013/10/26/Hipster-Riding-a-Camel/
    

    View Slide

36. t-shaped
    http://blog.lib.umn.edu/cil/myblog/2012/02/being-a-t-shaped-person-in-an-i-shaped-system.html
    

    View Slide

37. LEARN BY Doing
    http://seanwes.com/2013/doing-what-you-love/
    

    View Slide

38. Find a pet project
    https://www.flickr.com/photos/johnjoh/368511463
    

    View Slide

39. Be passionate
    https://xkcd.com/303/
    https://www.flickr.com/photos/magrolino/8009627509/
    

    View Slide

40. Study
    http://blog.codinghorror.com/learn-to-read-the-source-luke/ https://www.flickr.com/photos/magrolino/8009627509/
    

    View Slide

41. We are privileged, deserve it
    

    View Slide

42. Basically
    The wheel
    

    View Slide

43. Damian Wielgosik @ Front Trends
    

    View Slide

44. I’m active in a few online groups
    

    View Slide

45. Stupid questions?
    

    View Slide

46. how do I build {{whatever}}?
    whatever
    “a responsive 

    website”
    “a 2 column 

    layout”
    “a vertical 

    centered div”
    

    View Slide

47. Stupid answers are way
    worse than stupid
    questions*
    * there is no such thing
    

    View Slide

48. how do I build {{whatever}}?
    Let me google
    that for you
    

    View Slide

49. very funny the “let
    me google that for
    you” joke
    no one ever
    

    View Slide

50. but it goes worse than that
    

    View Slide

51. I’ve heard everything
    http://t3n.de/magazin/open-device-labs-webprojekte-nativ-
    testen-testlabor-furs-232793/
    http://blogs.which.co.uk/technology/computing-helpdesk/google-
    chrome-vs-internet-explorer-which-web-browser-is-best/
    “accessibility 

    is overrated”
    “in ie6 there are 

    no div, just tables”
    

    View Slide

52. And surely I produced my

    fair amount 

    of BS in my career.
    

    View Slide

53. no matter what
    

    View Slide

54. don’t be a bully
    Håkon Wium Lie
    Brendan Eich
    

    View Slide

55. but it goes worse than that
    

    View Slide

56. Software development is a
    learning process
    working code is a side effect

    Alberto Brandolini
    

    View Slide

57. What’s the best responsive
    approach?
    BOOTSTRAP!!!
    

    View Slide

58. Frameworks are awesome.
    If you
    master them
    

    View Slide

59. …mobile first, content first,
    security first, performance
    first, accessibility first…

    

    WTF first?
    

    View Slide

60. Learn first.
    

    View Slide

61. html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }
    Your framework
    

    View Slide

62. About the wheel…
    http://www.pixalo.com/community/monochrome-photography/interesting-
    old-wheel-43657.html http://www.toplista.it/i-10-pneumatici-piu-venduti-mondo/
    

    View Slide

63. Basically
    A final thought
    

    View Slide

64. No need for ninjas
    http://smg.photobucket.com/user/raskasbw/media/computer-ninja.gif.html
    

    View Slide

65. just curious, competent
    people, delivering value
    

    View Slide

66. aware of their
    responsibilities
    http://stock-clip.com/video-footage/dictionary/2
    

    View Slide

67. and loving their job
    https://www.pinterest.com/malagasmith/pins-of-pins-buttons-really/
    

    View Slide

68. or you can join me as a

    Pirate
    if you like funny labels
    

    View Slide

69. it’s not needed
    

    View Slide

70. but still better than ninjas
    http://www.urbandictionary.com/define.php?term=Pirate
    

    View Slide

71. way better, if you ask me
    http://roboworks.deviantart.com/art/Pirates-Vs-Ninjas-Annual-cover-89079359
    

    View Slide

72. marco@fromthefront.it
    http://cedmax.com
    @cedmax
    any question?
    

    View Slide