How to Troubleshoot Apps for the Modern Connected Worker
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
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
