Your SlideShare is downloading. ×
0
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
The State of Front End Web Development 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The State of Front End Web Development 2011

14,187

Published on

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

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

Published in: Technology, Business
7 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,187
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
164
Comments
7
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×