Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (14)
Similar to The State of Front End Web Development 2011
Similar to The State of Front End Web Development 2011 (20)
More from Pascal Rettig
Recently uploaded
Recently uploaded (20)
The State of Front End Web Development 2011
- 1. Pascal Rettig On twitter @cykod http://www.meetup.com/Boston-Frontend-Developers/ Saturday, May 28, 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 min Saturday, May 28, 2011
- 3. THE STATE OF FRONT END WEB DEVELOPMENT 2011 Saturday, May 28, 2011
- 4. IN THE WORDS OF MONK: Both a Gift and Curse Saturday, May 28, 2011
- 5. WE HAVE LO TS OF NEW TOYS TO PLAY WITH Saturday, May 28, 2011
- 6. BUT THE LEARNING CURVE IS STEEP AND CONTINUOUS Saturday, May 28, 2011
- 7. THAT’S (HOPEFULLY) WHY YOU’RE HERE. Saturday, May 28, 2011
- 8. BEST PRACTICES ...those keep changing too LIKE SEO RULE #1 Only 1 <h1> tag per page. Saturday, May 28, 2011
- 9. WHAT IS FRONT END DEVELOPMENT? Saturday, May 28, 2011
- 10. MY DEFINITION: Technical implementation and best practices for user facing page elements. Saturday, May 28, 2011
- 11. WHAT IS IT NOT? • Server side development • SEO from a content strategy standpoint • Marketing, SEM • Social-media douchbaggery Saturday, May 28, 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-data Saturday, May 28, 2011
- 13. Content Design Front-end Backend BSITE DEV ELOPMENT PLAYERS IN WE Saturday, May 28, 2011
- 14. IS FRONT-END DEVELOPMENT A CARE ER PATH? Saturday, May 28, 2011
- 15. YES! Not quite Java, Ruby or Python - but comparable to PHP, but... Saturday, May 28, 2011
- 16. “JAVASCRIPT” JO BS HAVE OVERTA KEN PHP Saturday, May 28, 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/jobtrends Saturday, May 28, 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/ Saturday, May 28, 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, Gizmodo Saturday, May 28, 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-devices Saturday, May 28, 2011
- 21. THE BASIC TOOLBOX HASN’T CHANGED • HTML • CSS • Javascript • (Flash, if you swing that way) Saturday, May 28, 2011
- 22. BUT IT’S GOTTEN A LOT MORE POWERFUL (And complicated) Saturday, May 28, 2011
- 23. HT ML5 • Semantic Chop, Sectioning • RDFa, open-graph • Microdata • Native Audio, Video • New Form elements • New attributes (autofocus, placeholder, aria) Saturday, May 28, 2011
- 24. CSS3 • Media-queries • Web typography via @font-face • Rounded corners, Shadows, Transforms, multiple backgrounds • Animation • New selectors • New layout options (columns, tables) Saturday, May 28, 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) • Geolocation Saturday, May 28, 2011
- 26. 5 TENETS OF MODERN FRONT END DEVELOPMENT Saturday, May 28, 2011
- 27. #1 SEMANTICS Give your code meaning and the Google will reward you. Saturday, May 28, 2011
- 28. #2PROGRESSIVE ENHANCEMENT Start with a workable baseline, add features as supported. http://dowebsitesneedtolookexactly thesameineverybrowser.com/ Saturday, May 28, 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. Saturday, May 28, 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. Saturday, May 28, 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% (Made up number) Saturday, May 28, 2011
- 32. THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykod Saturday, May 28, 2011