The State of Front End Web Development 2011

Pascal Rettig On twitter @cykodWednesday, May 25, 2011

AGENDA • Pizza & Beer • The State of Front-End Web Development 2011 ~20 min • Break ~10 min • A Semantic Chop 101 ~30 min • Announcements ~10 minWednesday, May 25, 2011

THE STATE OF FRONT END WEB DEVELOPMENT 2011Wednesday, May 25, 2011

IN THE WORDS OF MONK: Both a Gift and CurseWednesday, May 25, 2011

WE HAVE LO TS OF NEW TOYS TO PLAY WITHWednesday, May 25, 2011

BUT THE LEARNING CURVE IS STEEP AND CONTINUOUSWednesday, May 25, 2011

THAT’S (HOPEFULLY) WHY YOU’RE HERE.Wednesday, May 25, 2011

BEST PRACTICES ...those keep changing too LIKE SEO RULE #1 Only 1 <h1> tag per page.Wednesday, May 25, 2011

WHAT IS FRONT END DEVELOPMENT?Wednesday, May 25, 2011

MY DEFINITION: Technical implementation and best practices for user facing page elements.Wednesday, May 25, 2011

WHAT IS IT NOT? • Server side development • SEO from a content strategy sandpoint • Marketing, SEM • Social-media douchbaggeryWednesday, May 25, 2011

BUT IT IS.... • Interacting with server side code and writing server side views. • SEO from a technical practices standpoint • Landing page best practices. • Implementing social widgets and required meta-dataWednesday, May 25, 2011

Content Design Front-end Backend BSITE DEV ELOPMENT PLAYERS IN WEWednesday, May 25, 2011

IS FRONT-END DEVELOPMENT A CARE ER PATH?Wednesday, May 25, 2011

YES! Not quite Java, Ruby or Python - but comparable to PHP, but...Wednesday, May 25, 2011

“JAVASCRIPT” JO BS HAVE OVERTA KEN PHPWednesday, May 25, 2011

TOP TEN JOB TRENDS 1. HTML5 6. Facebook 2. Mobile app 7. Social Media 3. Android 8. iPhone 4. Twitter 9. Cloud Computing 5. jQuery 10.Virtualization source: http://www.indeed.com/jobtrendsWednesday, May 25, 2011

WE AR E ENTER ING THE “JAVASCR IPT AGE” • I. 1991-1999: The HTML Age. • II. 2000-2009: The LAMP Age. • III. 2010-??: The Javascript Age. • The Javascript age is about event streams. Modern web pages are not pages, they are event-driven applications through which information moves. • “The Javascript age brings us closer to a web that is not a global digital library, but a global digital nervous system, whose implications we are only beginning to apprehend.” • -http://metamarketsgroup.com/blog/node-js-and-the-javascript- age/Wednesday, May 25, 2011

AS A FRONT-END DEVELOPER... • It’s no longer static • It’s not just writing views and CSS • More is being pushed onto your plate. • It’s pulling data dynamically, and redrawing the pieces of the page as necessary. • E.g.: New twitter, GizmodoWednesday, May 25, 2011

(WE’RE NOT DONE) • It’s not longer a single format • It’s not longer limited to the desktop browser. • Mobile (Almost tripled for 3 years running) • Tablets • Other Internet-connected-devicesWednesday, May 25, 2011

THE BASIC TOOLBOX HASN’T CHANGED • HTML • CSS • Javascript • (Flash, if you swing that way)Wednesday, May 25, 2011

BUT IT’S GOTTEN A LOT MORE POWERFUL (And complicated)Wednesday, May 25, 2011

HT ML5 • Semantic Chop, Sectioning • RDFa, open-graph • Microdata • Native Audio, Video • New Form elements • New attributes (autofocus, placeholder, aria)Wednesday, May 25, 2011

CSS3 • Media-queries • Web typography via @font-face • Rounded corners, Shadows, Transforms, multiple backgrounds • Animation • New selectors • New layout options (columns, tables)Wednesday, May 25, 2011

JAVASC RIPT • jQuery has become the defacto-standard • 1001 jQuery plugins • Canvas 2D + WebGL • WebSockets • Local Storage • Oﬄine Storage • SVG • New Events (touch, orientation, accel) • GeolocationWednesday, May 25, 2011

5 TENENTS OF MODERN FRONT END DEVELOPMENTWednesday, May 25, 2011

#1 SEMANTICS Give your code meaning and the Google will reward you.Wednesday, May 25, 2011

#2PROGRESSIVE ENHANCEMENT Start with a workable baseline, add features as supported. http://dowebsitesneedtolookexactly thesameineverybrowser.com/Wednesday, May 25, 2011

#3IN JQUERY WE TRUST (This kills me, but...) Learn jQuery ﬁrst, then Javascript. Understand your selectors and how to use plugins and you can fake it for a long time.Wednesday, May 25, 2011

#4CAPABILITIES, NOT BROWSERS Don’t look at the user agent, this stuﬀ changes way too quickly. Use modernizr or the like and make decisions base on capabilities.Wednesday, May 25, 2011

#5 IT’S NO LONGER JUST THE DESKTOP Mobile and Tablet browsers are taking over. This year double digits, in a couple years 50%Wednesday, May 25, 2011

THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykodWednesday, May 25, 2011

http://cykod.com	1381
http://www.thegosspel.com	162
url_unknown	9
http://drizzlin.com	2
http://elsy-usodelastics.blogspot.com	2
http://webcache.googleusercontent.com	1
http://test.cykod.com	1
http://www.webcihoca.com	1
http://207.46.192.232	1
http://www.newsblur.com	1
http://infoeducatie.ro	1
http://www.medinfo.bg	1
http://www.slideshare.net	1
http://valerio-in.zabibu.com:8000	1
http://localhost:8082	1
http://paper.li	1
http://www.mongodb.org	1
http://perfectphoneim.blogspot.com	1
http://twitter.com	1
http://www.cykod.com	1

The State of Front End Web Development 2011

by Pascal Rettig on May 25, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,571

Statistics

The State of Front End Web Development 2011 — Presentation Transcript