The State of Front End Web Development 2011

18,677 views

Published on

The state of Front End Web Development presented at the first monthly Boston Front End Web Development meetup.

Published in: Technology, Business
7 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
18,677
On SlideShare
0
From Embeds
0
Number of Embeds
5,485
Actions
Shares
0
Downloads
175
Comments
7
Likes
23
Embeds 0
No embeds

No notes for slide

The State of Front End Web Development 2011

  1. Pascal Rettig On twitter @cykodWednesday, May 25, 2011
  2. 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
  3. THE STATE OF FRONT END WEB DEVELOPMENT 2011Wednesday, May 25, 2011
  4. IN THE WORDS OF MONK: Both a Gift and CurseWednesday, May 25, 2011
  5. WE HAVE LO TS OF NEW TOYS TO PLAY WITHWednesday, May 25, 2011
  6. BUT THE LEARNING CURVE IS STEEP AND CONTINUOUSWednesday, May 25, 2011
  7. THAT’S (HOPEFULLY) WHY YOU’RE HERE.Wednesday, May 25, 2011
  8. BEST PRACTICES ...those keep changing too LIKE SEO RULE #1 Only 1 <h1> tag per page.Wednesday, May 25, 2011
  9. WHAT IS FRONT END DEVELOPMENT?Wednesday, May 25, 2011
  10. MY DEFINITION: Technical implementation and best practices for user facing page elements.Wednesday, May 25, 2011
  11. WHAT IS IT NOT? • Server side development • SEO from a content strategy sandpoint • Marketing, SEM • Social-media douchbaggeryWednesday, May 25, 2011
  12. 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
  13. Content Design Front-end Backend BSITE DEV ELOPMENT PLAYERS IN WEWednesday, May 25, 2011
  14. IS FRONT-END DEVELOPMENT A CARE ER PATH?Wednesday, May 25, 2011
  15. YES! Not quite Java, Ruby or Python - but comparable to PHP, but...Wednesday, May 25, 2011
  16. “JAVASCRIPT” JO BS HAVE OVERTA KEN PHPWednesday, May 25, 2011
  17. 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
  18. 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
  19. 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
  20. (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
  21. THE BASIC TOOLBOX HASN’T CHANGED • HTML • CSS • Javascript • (Flash, if you swing that way)Wednesday, May 25, 2011
  22. BUT IT’S GOTTEN A LOT MORE POWERFUL (And complicated)Wednesday, May 25, 2011
  23. HT ML5 • Semantic Chop, Sectioning • RDFa, open-graph • Microdata • Native Audio, Video • New Form elements • New attributes (autofocus, placeholder, aria)Wednesday, May 25, 2011
  24. 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
  25. JAVASC RIPT • jQuery has become the defacto-standard • 1001 jQuery plugins • Canvas 2D + WebGL • WebSockets • Local Storage • Offline Storage • SVG • New Events (touch, orientation, accel) • GeolocationWednesday, May 25, 2011
  26. 5 TENENTS OF MODERN FRONT END DEVELOPMENTWednesday, May 25, 2011
  27. #1 SEMANTICS Give your code meaning and the Google will reward you.Wednesday, May 25, 2011
  28. #2PROGRESSIVE ENHANCEMENT Start with a workable baseline, add features as supported. http://dowebsitesneedtolookexactly thesameineverybrowser.com/Wednesday, May 25, 2011
  29. #3IN JQUERY WE TRUST (This kills me, but...) Learn jQuery first, then Javascript. Understand your selectors and how to use plugins and you can fake it for a long time.Wednesday, May 25, 2011
  30. #4CAPABILITIES, NOT BROWSERS Don’t look at the user agent, this stuff changes way too quickly. Use modernizr or the like and make decisions base on capabilities.Wednesday, May 25, 2011
  31. #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
  32. THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykodWednesday, May 25, 2011

×