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.

3ca63d4e2f2be0ef47b841e63b564d18?s=128

Marco Cedaro

May 14, 2015
Tweet

Transcript

  1. Yo dawg

  2. so you want to be a 
 Frontend developer

  3. Basically Level i

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

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

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

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

  8. the basics were the same

  9. HTML

  10. css

  11. Javascript

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

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

  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/

  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/
  17. Defensive design

  18. build for the web,
 not just on the web

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

  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

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

  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

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

  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

  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

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

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

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

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

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

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

  32. And then of course…

  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
  34. continuous FOrmation 
 is important

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

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

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

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

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

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

  41. We are privileged, deserve it

  42. Basically The wheel

  43. Damian Wielgosik @ Front Trends

  44. I’m active in a few online groups

  45. Stupid questions?

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

    “a 2 column 
 layout” “a vertical 
 centered div”
  47. Stupid answers are way worse than stupid questions* * there

    is no such thing
  48. how do I build {{whatever}}? Let me google that for

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

    no one ever
  50. but it goes worse than that

  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”
  52. And surely I produced my
 fair amount 
 of BS

    in my career.
  53. no matter what

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

  55. but it goes worse than that

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

    side effect
 Alberto Brandolini
  57. What’s the best responsive approach? BOOTSTRAP!!!

  58. Frameworks are awesome. If you master them

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


    
 WTF first?
  60. Learn first.

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

    inherit; } Your framework
  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/

  63. Basically A final thought

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

  65. just curious, competent people, delivering value

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

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

  68. or you can join me as a
 Pirate if you

    like funny labels
  69. it’s not needed

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

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

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