Slide 1

Slide 1 text

Yo dawg

Slide 2

Slide 2 text

so you want to be a 
 Frontend developer

Slide 3

Slide 3 text

Basically Level i

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

cedmax Front end dev since able to grow a beard

Slide 6

Slide 6 text

Everything was different yep, I had to debug ie mac

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

the basics were the same

Slide 9

Slide 9 text

HTML

Slide 10

Slide 10 text

css

Slide 11

Slide 11 text

Javascript

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

Defensive design

Slide 18

Slide 18 text

build for the web,
 not just on the web

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

And then of course…

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

continuous FOrmation 
 is important

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

We are privileged, deserve it

Slide 42

Slide 42 text

Basically The wheel

Slide 43

Slide 43 text

Damian Wielgosik @ Front Trends

Slide 44

Slide 44 text

I’m active in a few online groups

Slide 45

Slide 45 text

Stupid questions?

Slide 46

Slide 46 text

how do I build {{whatever}}? whatever “a responsive 
 website” “a 2 column 
 layout” “a vertical 
 centered div”

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

but it goes worse than that

Slide 51

Slide 51 text

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”

Slide 52

Slide 52 text

And surely I produced my
 fair amount 
 of BS in my career.

Slide 53

Slide 53 text

no matter what

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

but it goes worse than that

Slide 56

Slide 56 text

Software development is a learning process working code is a side effect
 Alberto Brandolini

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Frameworks are awesome. If you master them

Slide 59

Slide 59 text

…mobile first, content first, security first, performance first, accessibility first…
 
 WTF first?

Slide 60

Slide 60 text

Learn first.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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/

Slide 63

Slide 63 text

Basically A final thought

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

just curious, competent people, delivering value

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

or you can join me as a
 Pirate if you like funny labels

Slide 69

Slide 69 text

it’s not needed

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

[email protected] http://cedmax.com @cedmax any question?