become a front-end developer

174
phone +48 696 185 029 mail [email protected] twitter @functionite become a front-end developer

Upload: functionite

Post on 15-Jan-2015

23.557 views

Category:

Technology


2 download

DESCRIPTION

How one can start his career as a front-end developer? Is a "front-end" term current when Open Web evolves towards server-side and mobile?

TRANSCRIPT

Page 1: Become a front-end developer

phone +48 696 185 029 mail [email protected] twitter @functionite

become a front-end developer

Page 2: Become a front-end developer

phone +48 696 185 029 mail [email protected] twitter @functionite

become a front-end developer

Page 3: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Functionite founder, 24y

Page 4: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

JavaScript programmer

Page 5: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

JavaScript programmer

Page 6: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

JavaScript programmer

Page 7: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

JavaScript programmer

Page 8: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

event organizer

Page 9: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

event organizer

Page 10: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

event organizer

Page 11: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

event organizer

Page 12: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Open Web activist

Page 13: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Open Web activist

Page 14: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Open Web activist

Page 15: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Open Web activist

Page 16: Become a front-end developer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Open Web activist

Page 17: Become a front-end developer

2005’s front-end?

Page 18: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 19: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 20: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 21: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 22: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 23: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 24: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 25: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 26: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 27: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 28: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 29: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 30: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 31: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 32: Become a front-end developer

2005’s front-end?

tables vs divs ajaxJS animationsdiscovering JavaScript animations

web standardsIE6 problem

xslt

Prototype accessibility usabilitymicroformatsdesign it! w3cPSD2HTML

Page 33: Become a front-end developer

2013’s front-end?

Page 34: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 35: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 36: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 37: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 38: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 39: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 40: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 41: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 42: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 43: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 44: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 45: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 46: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 47: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 48: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 49: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 50: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 51: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 52: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 53: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 54: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 55: Become a front-end developer

2013’s front-end?HTML5 JavaScript engineering

MV* frameworkssassCSS3 animations

single page web appsless node.js

web sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl

Page 56: Become a front-end developer

front-end developers are not “these HTML guys” anymore

Page 57: Become a front-end developer

there are so many challenges for front-end people

Page 58: Become a front-end developer

time to be a real engineer, motherf*cker!

Page 59: Become a front-end developer

we write MVC applications

Page 60: Become a front-end developer

we have client-side template systems

Page 61: Become a front-end developer

we code server-side apps (node.js)

Page 62: Become a front-end developer

we have pdf readers in JavaScript

Page 63: Become a front-end developer

we write mobile apps and don’t need to know Java or ObjC

Page 64: Become a front-end developer

but that’s boring...

Page 65: Become a front-end developer

we can have databases in JavaScript (CouchDB)

Page 66: Become a front-end developer

we can have databases in JavaScript (CouchDB)

Page 67: Become a front-end developer

we can fly

we can fly!

Page 68: Become a front-end developer

we can fly

we can compile C++ to JS

Page 69: Become a front-end developer

btw. 3D is not a problem

Page 70: Become a front-end developer

and there is an increasing demand for JavaScript devs

Page 71: Become a front-end developer

and there is an increasing demand for JavaScript devs

Page 72: Become a front-end developer
Page 73: Become a front-end developer
Page 74: Become a front-end developer

sure, but what am I supposed to do as a JavaScript dev?

Page 75: Become a front-end developer

JavaScript Jobs

Page 76: Become a front-end developer

JavaScript Jobs

Page 77: Become a front-end developer

JavaScript Jobs

Page 78: Become a front-end developer

JavaScript Jobs

Page 79: Become a front-end developer

JavaScript Jobs

Page 80: Become a front-end developer
Page 81: Become a front-end developer

front-end developer can be a

Page 82: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

Page 83: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPER

Page 84: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

Page 85: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

SERVER-SIDE GUY

Page 86: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

SERVER-SIDE GUYMOBILE DEVELOPER

Page 87: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

SERVER-SIDE GUYMOBILE DEVELOPER

COPTER DEVELOPER

Page 88: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

SERVER-SIDE GUYMOBILE DEVELOPER

COPTER DEVELOPERANIMATION SPECIALIST

Page 89: Become a front-end developer

front-end developer can be aUSABILITY SPECIALIST

JAVASCRIPT DEVELOPERGAME DEVELOPER

SERVER-SIDE GUYMOBILE DEVELOPER

COPTER DEVELOPERANIMATION SPECIALIST

IMAGINATION NINJA

Page 90: Become a front-end developer

all you need to know is 3 things...

Page 91: Become a front-end developer

all you need to know is 3 things...

CSS3

Page 92: Become a front-end developer

all you need to know is 3 things...

CSS3

JavaScript

Page 93: Become a front-end developer

all you need to know is 3 things...

CSS3

JavaScript

HTML5

Page 94: Become a front-end developer

they won’t have you buy things

Page 95: Become a front-end developer

they won’t have you buy things

technology is open and standarized

Page 96: Become a front-end developer

how can I start?

Page 97: Become a front-end developer

unfortunately universities suck at teaching web technologies

Page 98: Become a front-end developer

unfortunately universities suck at teaching web technologies

Page 99: Become a front-end developer

how many of you have been taught JAVA at Uni?

Page 100: Become a front-end developer

unfortunately universities suck at teaching web technologies

Page 101: Become a front-end developer

many of greatest minds I know in this industry never graduated...

Page 102: Become a front-end developer

however, many did...

Page 103: Become a front-end developer

university is just an optionit won’t make you happy, rich and creative

Page 104: Become a front-end developer

explore, make mistakes, learn

Page 105: Become a front-end developer

Read...

Page 106: Become a front-end developer

Read...html5doctor.com

Page 115: Become a front-end developer

Attend...

Page 116: Become a front-end developer

Attend...Front-Trends Conference (Warsaw, Poland)

Page 117: Become a front-end developer

Attend...Front-Trends Conference (Warsaw, Poland)

Falsy Values (Warsaw, Poland)

Page 118: Become a front-end developer

Attend...Front-Trends Conference (Warsaw, Poland)

Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)

Page 119: Become a front-end developer

Attend...Front-Trends Conference (Warsaw, Poland)

Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)

JSConf.EU (Berlin, Germany)

Page 120: Become a front-end developer

Attend...Front-Trends Conference (Warsaw, Poland)

Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)

JSConf.EU (Berlin, Germany)Fronteers (Amsterdam, Netherlands)

Page 121: Become a front-end developer

Front-Trends 2013

Page 122: Become a front-end developer

Front-Trends 2013

Page 123: Become a front-end developer

Front-Trends 2013

Page 124: Become a front-end developer

or go to the meetups

Page 125: Become a front-end developer

in 2011 I originated free front-end meetups in Polandhttp://meetjs.pl

Page 126: Become a front-end developer

we started in one town...

Page 127: Become a front-end developer

now it takes place in 5 different towns

Page 128: Become a front-end developer
Page 129: Become a front-end developer
Page 130: Become a front-end developer

POZNAN

Page 131: Become a front-end developer

WARSAWPOZNAN

Page 132: Become a front-end developer

WARSAWPOZNAN

CRACOW

Page 133: Become a front-end developer

WARSAWPOZNAN

CRACOW

WROCLAW

Page 134: Become a front-end developer

WARSAWPOZNAN

CRACOW

WROCLAW

GDANSK

Page 135: Become a front-end developer

we have organized a conference too

Cracow 2012

Page 136: Become a front-end developer

we organized a free a conference too...

Page 137: Become a front-end developer

meet.js summit 2012

Page 138: Become a front-end developer

we have awesome community

Page 139: Become a front-end developer

front-end community

@t

@chriscoyier

@zeldman@kurafire

@paulirish

@zbraniecki@janl

@codepo8

@getify@han @phae

@jaffathecake

@csswizardry

@LeaVerou

@slightlylate

@awbjs

@rwaldron

@brendaneich

@meyerweb

@ppk

@rem

@estellevw

Page 140: Become a front-end developer

@you?

@t

@chriscoyier

@zeldman@kurafire

@paulirish

@zbraniecki@janl

@codepo8

@getify@han @phae

@jaffathecake

@csswizardry

@LeaVerou

@slightlylate

@awbjs

@rwaldron

@brendaneich

@meyerweb

@ppk

@rem

@estellevw

Page 141: Become a front-end developer

yeah, but show me money

Page 142: Become a front-end developer

so, how you started?

Page 143: Become a front-end developer

I was curious.

Page 144: Become a front-end developer

try to turn ideas into code

Page 145: Become a front-end developer

this is how I started

Page 146: Become a front-end developer

it took me months to code Drawter.com

Page 147: Become a front-end developer

it took me months to code Drawter.com

Page 148: Become a front-end developer

I was making mistakes like that

Page 149: Become a front-end developer

var element = document.getElementById("doc");element.onclick = function() {};

Page 150: Become a front-end developer

and that...

Page 151: Become a front-end developer

var arr = new Array();

Page 152: Become a front-end developer

but the outcome was satisfying so the project went public

Page 153: Become a front-end developer

the buzz was huge

Page 154: Become a front-end developer

the buzz was huge

Page 155: Become a front-end developer

then I got a job at one of the best Polish front-end teams.Drawter played a huge role on my CV even later

Page 156: Become a front-end developer

your projects are importantmore than your education

Page 157: Become a front-end developer

publish your project on gihub

Page 158: Become a front-end developer

if you feel confidentsend a link to your project to the one of major front-end

websites

Page 159: Become a front-end developer

if you feel confidentsend a link to your project to the one of major front-end

websites

Page 160: Become a front-end developer

actually, never feel uncertain about things you are involved in

Page 161: Become a front-end developer

I never did.

Page 162: Become a front-end developer

@dalmaer waits for new shiny projects to share with others

Page 163: Become a front-end developer

dailyjs.com waits for it

Page 164: Become a front-end developer

shashingmagazine.com waits for it

Page 165: Become a front-end developer

everybody wants it!

Page 166: Become a front-end developer

the outcome is most importantdo not reschedule things that are ready to go

Page 167: Become a front-end developer

if you are willing to improveyou’ll eventually learn right tools to get your job done better

Page 168: Become a front-end developer

people fail, do not lose your confidence due to a single failure

Page 169: Become a front-end developer

interview guys are not gods,dream job might not be “it”

Page 170: Become a front-end developer

there are so many devices you can code forthere are so many powerful APIs you can mix together

Page 171: Become a front-end developer

HTML5, JavaScript, CSS3try it.

Page 172: Become a front-end developer

Workshops with Functionite.comLearn something new!

Page 173: Become a front-end developer

JS News groupJS News: Jobs group

on Facebook

Page 174: Become a front-end developer

phone +48 696 185 029 mail [email protected] twitter @functionite

thanks, Damian Wielgosik