Professional Front End Development

1,792 views
1,606 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,792
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Professional Front End Development

  1. 1. Professional Front-End Development
  2. 2. Overview  Context  What  How
  3. 3. Context
  4. 4. Front-end is not simple  Performance  Mobile platforms  Usability  Maintainability  Accessibility  Browser bugs  Security  Debugging  Internationalisation  Testing  Localisation  Build processes  Scalability
  5. 5. “The most hostile software development environment imaginable” – Douglas Crockford on web browsers
  6. 6. Areas of concern  Knowledge areas ✕7  Dimensions ✕4  Platforms ✕3  Browsers ✕4  Rendering modes ✕2 672 Slide: Nate Koechley
  7. 7. What
  8. 8. A change of attitude  Recognition  Professionalism
  9. 9. Principles  Availability  Openness  Richness  Stability Slide: Nate Koechley
  10. 10. Principles  Availability Slide: Nate Koechley
  11. 11. Principles  Openness Slide: Nate Koechley
  12. 12. Principles  Richness Slide: Nate Koechley
  13. 13. Principles  Stability Slide: Nate Koechley
  14. 14. Principles  Availability  Openness  Richness  Stability Slide: Nate Koechley
  15. 15. Understand the medium  Respect user choice  Web layers: semantic, presentation, behaviour  Progressive enhancement
  16. 16. How
  17. 17. Semantic (X)HTML  It must have meaning  For users, machines, developers  Layer richness
  18. 18. Object-oriented CSS  Focus on the left  Encapsulate your objects  Cascade the look  Layer richness
  19. 19. Unobstructive Javascript  Separate layer  Provide enhanced behaviour  Mind your manners  Be paranoid  Layer richness
  20. 20. Do the right thing  Follow standards if impossible then  Follow conventions if impossible then  Do what it takes Slide: Nate Koechley
  21. 21. Thanks
  22. 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/

×