This was a presentation given today for my company, CMN.com (http://cmn.com/) intended to inform co-workers all what our web development teams need to know to be successful at their job in today's environment. Genesis WordPress can be found at: https://github.com/genesis/wordpress

1. WHAT IT TAKES TO BE A
WEB DEVELOPER
Then&Now

2. THIS IS CMN...
Say hello to your Tech Team
Eric C.
Jen G.
Danny G.
Antonin J.
Evan K.
Jill R.
Dave R.
Will S.
Jimmy W.
Eric R.
James L.

3. THIS IS CMN...
And these are your Front-End Developers
Eric C.
Jen G.
Danny G.
Antonin J.
Evan K.
Jill R.
Dave R.
Will S.
Jimmy W.
Eric R.
James L.

4. FOR NEARLY 10 YEARS, HTML
TECHNOLOGIES REMAINED
LARGELY UNCHANGED
Tables, Flash, iFrames, dominated the 1990's.
This is what we had to work with. This was Web 1.0.
1991
H
TM
L
1
1990
1992
1994
1995
1996
1998
1999
1stw
ebsiteby
Tim
Berners-Lee
<table>-based
designH
TM
L
2.0;W
3C
established
H
TM
L
3;Flash
&
JavaScriptintroduced
CSS
1;iFram
espopularized
H
TM
L
4.0;CSS
2;PH
P
3.0;Google
W
eb
1.0

5. IT SUCKED.

6. THE LANDSCAPE HIT MATURITY
IN MID 2000
Tools & technologies paved the way for
blogging, RSS, and social media.
Welcome to Web 2.0.
2002
dot-com
boom
peaks;PH
P
4.0
2000
2003
2005
2006
2007
2009
CSS2.1+W
eb
2.0;socialm
ediabegins
W
ordPressv0.7launched
(in
H
ouston!)
AJAX;Gitversion
controldeveloped;W
ordPress2.0
jQuery
launches;CM
S
system
sarethething
iPhonelaunches;SassCSS
Pre-processorappears;
localeditingtoolslikeM
AM
P
appear
H
TM
L5introduced;CSS3;
m
obilew
eb
isnow
athing;
GitH
ub
launches;LESS
(CSS)
U
nderscore.js(app
platform
)

7. DIY’ERS REJOICE.We can finally do something with our websites.

8. By the late 2000's, technology caused new problems that
needed new tools to solve them.
Mobile meets Responsive Web Design.
W
ordPress4.0
(Aug2014)
Grunt(task
runner);Bow
er(packagem
anager)
FTP
turns40,stillaprim
ary
tool
W
ordPress3.0
NEW PROBLEMS, NEW TOOLS
2010
2011
2012
2014
Gulp
(task
runner)
Vagrant(dev
environm
ent)
ResponsiveW
eb
Design
Backbone.js(app
platform
)
H
TM
L5adoption
rategrow
s
CSS
Fram
ew
orkspopularized
Yeom
an
(task
runner);Ansible(task
runner)
Linem
an
(task
runner)CM
N
developsGenesisW
ordPress
(nom
oreFTP
fordeploym
ent)
2013
Tw
itterBootstrap
hits#1on
GitH
ub
Tw
itterBoostrap
(CSS
Fram
ew
ork)
N
ode.js(app
platform
);Brunch
(task
runner)

9. New, revolutionary tools are being released on a weekly
basis. For free.
People find worthwhile projects. Anyone is welcome to
contribute to them. Adoption rate is at an all-time high.
NEW PROBLEMS, NEW TOOLS

10. LET’S GO TWEET ABOUT IT.But first, let me take a selfie.

11. Most of the tools we create with today
didn’t even exist 5 years ago.
GAME CHANGERS...
W
ordPress4.0
(Aug2014)
Grunt(task
runner);Bow
er(packagem
anager)
FTP
turns40,stillaprim
ary
tool
W
ordPress3.0
2010
2011
2012
2014
Gulp
(task
runner)
Vagrant(dev
environm
ent)
ResponsiveW
eb
Design
Backbone.js(app
platform
)
H
TM
L5adoption
rategrow
s
CSS
Fram
ew
orkspopularized
Tw
itterBoostrap
(CSS
Fram
ew
ork)
N
ode.js(app
platform
);Brunch
(task
runner)
Yeom
an
(task
runner);Ansible(task
runner)
Linem
an
(task
runner)CM
N
developsGenesisW
ordPress
(nom
oreFTP
fordeploym
ent)
2013
Tw
itterBootstrap
hits#1on
GitH
ub

12. I did. And it’s amazing.
WAIT A MINUTE! DID YOU JUST
MENTION GENESIS WORDPRESS?
W
ordPress4.0
(Aug2014)
Grunt(task
runner);Bow
er(packagem
anager)
FTP
turns40,stillaprim
ary
tool
W
ordPress3.0
2010
2011
2012
2014
Gulp
(task
runner)
Vagrant(dev
environm
ent)
ResponsiveW
eb
Design
Backbone.js(app
platform
)
H
TM
L5adoption
rategrow
s
CSS
Fram
ew
orkspopularized
Tw
itterBoostrap
(CSS
Fram
ew
ork)
N
ode.js(app
platform
);Brunch
(task
runner)
Yeom
an
(task
runner);Ansible(task
runner)
Linem
an
(task
runner)CM
N
developsGenesisW
ordPress
(nom
oreFTP
fordeploym
ent)
2013
Tw
itterBootstrap
hits#1on
GitH
ub

13. Genesis WordPress provides a platform where the Tech
Team can collaboratively work on any given site on their
local machine, sync the database, make file changes, and
safely deploy edits back to both staging and production
environments within minutes.
I FEEL AMAZED. TELL ME MORE.

14. It builds upon many
technologies previously
mentioned:
• Vagrant
• WordPress
• WordPress Themes
• NodeJS
• VirtualBox
• Capistrano
• Bundler
• Ansible
• Grunt
• Bower
• Yeoman
• SSH
• Apache
• PHP
• HTML
• CSS
• Sass
• Git + GitHub
• Varnish
I FEEL AMAZED. TELL ME MORE.

15. OUT OF 24 YEARS OF HTML
DEVELOPMENT, WHAT DO YOU
HAVE TO KNOW TO BE
SUCCESSFUL AT CMN?

16. ALL OF IT.Srsly.

17. OUT OF 24 YEARS OF HTML
DEVELOPMENT, WHAT DO YOU
HAVE TO KNOW TO BE
SUCCESSFUL AT CMN?
The challenges we face on a day-to-day basis rely on our
ability to adapt, adopt, and overcome.
Experience is everything.
Come to work, prepare to learn.

18. BUT WAIT, THERE’S MORE!
• [Web] Design
• User Experience (UX)
• User Interface (UI)
• Command Line Interface
• Database technologies
• Analytics
• A/B testing
• Search Engine Optimization
(SEO)
• Best Practices
(that kinda applies to a lot of things)
• Server Technologies
(configuration, .htaccess, SSH)
• Apps, apps, apps...

19. WE NEVER STOP LEARNING.Because we love what we do.