SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Professional Front-End
    Development
Overview
   Context
   What
   How
Context
Front-end is not simple
   Performance               Mobile platforms
   Usability                 Maintainability
   Accessibility             Browser bugs
   Security                  Debugging
   Internationalisation      Testing
   Localisation              Build processes
   Scalability
“The most hostile software development
              environment imaginable”

  – Douglas Crockford on web browsers
Areas of concern
   Knowledge areas      ✕7
   Dimensions           ✕4
   Platforms            ✕3
   Browsers             ✕4
   Rendering modes      ✕2



                         672
                                  Slide: Nate Koechley
What
A change of attitude
   Recognition
   Professionalism
Principles
   Availability
   Openness
   Richness
   Stability




                                Slide: Nate Koechley
Principles
   Availability




                                Slide: Nate Koechley
Principles

   Openness




                            Slide: Nate Koechley
Principles



   Richness




                            Slide: Nate Koechley
Principles




   Stability




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




                                Slide: Nate Koechley
Understand the medium
   Respect user choice
   Web layers: semantic, presentation, behaviour
   Progressive enhancement
How
Semantic (X)HTML
   It must have meaning
   For users, machines, developers
   Layer richness
Object-oriented CSS
   Focus on the left
   Encapsulate your objects
   Cascade the look
   Layer richness
Unobstructive Javascript
   Separate layer
   Provide enhanced behaviour
   Mind your manners
   Be paranoid
   Layer richness
Do the right thing
   Follow standards

        if impossible then


   Follow conventions

        if impossible then


   Do what it takes
                                 Slide: Nate Koechley
Thanks
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/

Contenu connexe

En vedette

Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Prasid Pathak
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 

En vedette (20)

Front-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info SessionFront-end Web Dev (HK) Info Session
Front-end Web Dev (HK) Info Session
 
Basic concepts for python web development
Basic concepts for python web developmentBasic concepts for python web development
Basic concepts for python web development
 
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
 
Sinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo MalangSinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo Malang
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Front end Tips Tricks & Tools
Front end Tips Tricks & ToolsFront end Tips Tricks & Tools
Front end Tips Tricks & Tools
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
Frontend automation and stability
Frontend automation and stabilityFrontend automation and stability
Frontend automation and stability
 
User eXperience & Front End Development
User eXperience & Front End DevelopmentUser eXperience & Front End Development
User eXperience & Front End Development
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your Frontend
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
How to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJSHow to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJS
 
Frontend technologies
Frontend technologiesFrontend technologies
Frontend technologies
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realities
 
Frontend at Scale - The Tumblr Story
Frontend at Scale - The Tumblr StoryFrontend at Scale - The Tumblr Story
Frontend at Scale - The Tumblr Story
 
Modern Frontend Technology
Modern Frontend TechnologyModern Frontend Technology
Modern Frontend Technology
 

Similaire à Professional Front End Development

Conole Lams
Conole LamsConole Lams
Conole Lams
grainne
 
Conole Ascilite Paper
Conole Ascilite PaperConole Ascilite Paper
Conole Ascilite Paper
grainne
 
Seasprint2012ploneconferencereportout
Seasprint2012ploneconferencereportoutSeasprint2012ploneconferencereportout
Seasprint2012ploneconferencereportout
ableeb
 

Similaire à Professional Front End Development (20)

Understanding Research 2.0 from a Socio-technical Perspective
Understanding Research 2.0 from a Socio-technical PerspectiveUnderstanding Research 2.0 from a Socio-technical Perspective
Understanding Research 2.0 from a Socio-technical Perspective
 
Wonderful World of Wiki Wiki Teaching
Wonderful World of Wiki Wiki TeachingWonderful World of Wiki Wiki Teaching
Wonderful World of Wiki Wiki Teaching
 
OaaS:Open as a Strategy
OaaS:Open as a StrategyOaaS:Open as a Strategy
OaaS:Open as a Strategy
 
European Open Science Cloud update webinar
European Open Science Cloud update webinarEuropean Open Science Cloud update webinar
European Open Science Cloud update webinar
 
Genomics data insights
Genomics data insightsGenomics data insights
Genomics data insights
 
Conole Lams
Conole LamsConole Lams
Conole Lams
 
Common Core in the Cloud
Common Core in the CloudCommon Core in the Cloud
Common Core in the Cloud
 
Double diamond-nodes
Double diamond-nodesDouble diamond-nodes
Double diamond-nodes
 
Semantic Web research anno 2006:main streams, popular falacies, current statu...
Semantic Web research anno 2006:main streams, popular falacies, current statu...Semantic Web research anno 2006:main streams, popular falacies, current statu...
Semantic Web research anno 2006:main streams, popular falacies, current statu...
 
Test-Driven Design (Joshua Seiden)
Test-Driven Design (Joshua Seiden)Test-Driven Design (Joshua Seiden)
Test-Driven Design (Joshua Seiden)
 
HackYale 0-60 in Startup Tech
HackYale 0-60 in Startup TechHackYale 0-60 in Startup Tech
HackYale 0-60 in Startup Tech
 
Open, De Jure, De Facto and Proprietary: Standards and Microsoft
Open, De Jure, De Facto and Proprietary: Standards and MicrosoftOpen, De Jure, De Facto and Proprietary: Standards and Microsoft
Open, De Jure, De Facto and Proprietary: Standards and Microsoft
 
Conole Ascilite Paper
Conole Ascilite PaperConole Ascilite Paper
Conole Ascilite Paper
 
Business Value of CI, CD, & DevOps(Sec)
Business Value of CI, CD, & DevOps(Sec)Business Value of CI, CD, & DevOps(Sec)
Business Value of CI, CD, & DevOps(Sec)
 
DevoxxUK 2016: "DevOps: Microservices, containers, platforms, tooling... Oh y...
DevoxxUK 2016: "DevOps: Microservices, containers, platforms, tooling... Oh y...DevoxxUK 2016: "DevOps: Microservices, containers, platforms, tooling... Oh y...
DevoxxUK 2016: "DevOps: Microservices, containers, platforms, tooling... Oh y...
 
After Agile, DevOps, and Lean IT: Modern Methodology in the Age of Disruption
After Agile, DevOps, and Lean IT: Modern Methodology in the Age of DisruptionAfter Agile, DevOps, and Lean IT: Modern Methodology in the Age of Disruption
After Agile, DevOps, and Lean IT: Modern Methodology in the Age of Disruption
 
Splunk September 2023 User Group PDX.pdf
Splunk September 2023 User Group PDX.pdfSplunk September 2023 User Group PDX.pdf
Splunk September 2023 User Group PDX.pdf
 
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages  NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
 
Connected Educator Challenge
Connected Educator ChallengeConnected Educator Challenge
Connected Educator Challenge
 
Seasprint2012ploneconferencereportout
Seasprint2012ploneconferencereportoutSeasprint2012ploneconferencereportout
Seasprint2012ploneconferencereportout
 

Dernier

Dernier (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Professional Front End Development

  • 2. Overview  Context  What  How
  • 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
  • 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
  • 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/