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

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