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