What it takes to be a Web Developer: Then & Now

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

Transcript

1. WHAT IT TAKES TO BE A WEB DEVELOPER T hen & N ow
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 1st w ebsite by Tim Berners-Lee <table>-based design H TM L 2.0; W 3C established H TM L 3; Flash & JavaScript introduced CSS 1; iFram es popularized 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; social m edia begins W ordPress v0.7 launched (in H ouston!) AJAX; Git version control developed; W ordPress 2.0 jQuery launches; CM S system s are the thing iPhone launches; Sass CSS Pre-processor appears; local editing tools like M AM P appear H TM L5 introduced; CSS3; m obile w eb is now a thing; 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 ordPress 4.0 (Aug 2014) Grunt (task runner); Bow er (package m anager) FTP turns 40, still a prim ary tool W ordPress 3.0 NEW PROBLEMS, NEW TOOLS 2010 2011 2012 2014 Gulp (task runner) Vagrant (dev environm ent) Responsive W eb Design Backbone.js (app platform ) H TM L5 adoption rate grow s CSS Fram ew orks popularized Yeom an (task runner); Ansible (task runner) Linem an (task runner) CM N develops Genesis W ordPress (no m ore FTP for deploym ent) 2013 Tw itter Bootstrap hits #1 on GitH ub Tw itter Boostrap (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 ordPress 4.0 (Aug 2014) Grunt (task runner); Bow er (package m anager) FTP turns 40, still a prim ary tool W ordPress 3.0 2010 2011 2012 2014 Gulp (task runner) Vagrant (dev environm ent) Responsive W eb Design Backbone.js (app platform ) H TM L5 adoption rate grow s CSS Fram ew orks popularized Tw itter Boostrap (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 develops Genesis W ordPress (no m ore FTP for deploym ent) 2013 Tw itter Bootstrap hits #1 on GitH ub
12. I did. And it’s amazing. WAIT A MINUTE! DID YOU JUST MENTION GENESIS WORDPRESS? W ordPress 4.0 (Aug 2014) Grunt (task runner); Bow er (package m anager) FTP turns 40, still a prim ary tool W ordPress 3.0 2010 2011 2012 2014 Gulp (task runner) Vagrant (dev environm ent) Responsive W eb Design Backbone.js (app platform ) H TM L5 adoption rate grow s CSS Fram ew orks popularized Tw itter Boostrap (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 develops Genesis W ordPress (no m ore FTP for deploym ent) 2013 Tw itter Bootstrap hits #1 on 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.