This document discusses the challenges of professional front-end development. It notes the many factors that must be considered, such as performance, usability, accessibility and more. Front-end development is described as "the most hostile software development environment imaginable". The document advocates for recognizing front-end development as a profession that requires principles like availability, openness, richness and stability. It recommends approaches like semantic HTML, object-oriented CSS, and unobstructive JavaScript to implement these principles.

1. Professional Front-End
Development

2. Overview
 Context
 What
 How

3. Context

4. Front-end is not simple
 Performance  Mobile platforms
 Usability  Maintainability
 Accessibility  Browser bugs
 Security  Debugging
 Internationalisation  Testing
 Localisation  Build processes
 Scalability

5. “The most hostile software development
environment imaginable”
– Douglas Crockford on web browsers

6. Areas of concern
 Knowledge areas ✕7
 Dimensions ✕4
 Platforms ✕3
 Browsers ✕4
 Rendering modes ✕2
672
Slide: Nate Koechley

7. What

8. A change of attitude
 Recognition
 Professionalism

9. Principles
 Availability
 Openness
 Richness
 Stability
Slide: Nate Koechley

10. Principles
 Availability
Slide: Nate Koechley

11. Principles
 Openness
Slide: Nate Koechley

12. Principles
 Richness
Slide: Nate Koechley

13. Principles
 Stability
Slide: Nate Koechley

14. Principles
 Availability
 Openness
 Richness
 Stability
Slide: Nate Koechley

15. Understand the medium
 Respect user choice
 Web layers: semantic, presentation, behaviour
 Progressive enhancement

16. How

17. Semantic (X)HTML
 It must have meaning
 For users, machines, developers
 Layer richness

18. Object-oriented CSS
 Focus on the left
 Encapsulate your objects
 Cascade the look
 Layer richness

19. Unobstructive Javascript
 Separate layer
 Provide enhanced behaviour
 Mind your manners
 Be paranoid
 Layer richness

20. Do the right thing
 Follow standards
if impossible then
 Follow conventions
if impossible then
 Do what it takes
Slide: Nate Koechley

21. Thanks

22. Links
 Blog: http://fittopage.org
 Twitter: nelsonmenezes
 OOCSS: http://oocss.org/
 Thanks to Nate Koechley:
 http://nate.koechley.com/blog/
 http://www.yuiblog.com/blog/2009/03/18/video-koechley-prof2e/