Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Marco Cedaro

May 14, 2015
Tweet

More Decks by Marco Cedaro

Other Decks in Technology

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/[email protected]/6017055570 https://www.flickr.com/photos/[email protected]/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. [email protected]
    http://cedmax.com
    @cedmax
    any question?

    View Slide