This is why we can’t have nice things…<br />The complexities of front-end web development<br />
The developers<br />Front-end is a specialisation<br />Take pride in well engineered code<br />Love a good design pattern<...
What is “front-end”?<br />Semantically marked-up content (HTML)<br />Decoupled rules for presentation (CSS)<br />Enhanced ...
“An entirely hostile environment.”<br />— Douglas Crockford<br />
Multi user-agent<br />Browsers<br />Mozilla: Firefox, Camino<br />WebKit: Safari, Chrome<br />Trident: Internet Explorer<b...
Web standards<br />Standardised technology<br />HTML<br />CSS<br />JavaScript, ActionScript (ECMAScript)<br />XML<br />JSO...
When User Experience Attacks!<br />Improving the users’ experience through technology<br />
Web Accessibility<br />Standards<br />WCAG, WAI<br />WAI-ARIA<br />Legal precedents<br />National Federation of the Blind ...
Consideration<br />Understand your users<br />Physically disabled<br />Blind<br />Deaf<br />Motor function<br />Cognitive ...
SEO<br />Semantic mark-up<br />High quality content<br />Links<br />Google and the dreaded GoogleBot<br />Headless browser...
Technical understanding<br />Pages not sites<br />Framesets are confusing<br />Understand the value of meta data<br />Use ...
Performance<br />Reduce download size<br />Reduce HTTP requests<br />Optimise static assets<br />Minified CSS and JavaScri...
“Java is to JavaScript asHam is to Hamster”<br />The JavaScript renaissance<br />
Ace language is ace<br />Event-based execution<br />Objectoriented<br />Prototypal inheritance<br />DOM<br />Closures<br />
Doing it right<br />Graceful degradation<br />Progressive enhancement<br />
JavaScript Libraries<br />JavaScript utility belt<br />Even the cross-browser playing field<br />Fix the stuff that’s miss...
JavaScript Engines<br />Know your enemy<br />SpiderMonkey<br />V8<br />JScript<br />Inconsistent garbage collection<br />M...
Roads? Where we’re going, we don’t need roads…<br />Future technologies are available today<br />
Intertronz 3.0<br />HTML5<br />CSS3<br />Web sockets and web workers<br />Access to standardised browser and OS APIs<br />...
Tim Huegdon<br />nefarioustim<br />http://timhuegdon.com<br />http://nefariousdesigns.co.uk<br />Twitter: @nefarioustim<br...
Upcoming SlideShare
Loading in...5
×

This is why we can't have nice things…

677

Published on

The complexities of front-end web development.

A Pecha Kucha presentation for developers and architects that might not understand the problems.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
677
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Often versed in several middle-tier languages
  • Douglas Crockford, JavaScript guru, creator of JSLint and popularised JSON. Member of the ECMAScript committee.
  • Text only browsers
  • Legal: Aug 2008, USA. Establish a $6 million fund for settlement claims. Promised make site fully accessible to blind. Class action lawsuit took two and a half years.
  • This is why we can't have nice things…

    1. 1. This is why we can’t have nice things…<br />The complexities of front-end web development<br />
    2. 2. The developers<br />Front-end is a specialisation<br />Take pride in well engineered code<br />Love a good design pattern<br />Live by software engineering paradigms<br />Perfectionists<br />Sado-masochistic<br />
    3. 3. What is “front-end”?<br />Semantically marked-up content (HTML)<br />Decoupled rules for presentation (CSS)<br />Enhanced interaction and behaviour (JavaScript)<br />XMLHttpRequest (aka XHR, AJAX, AJAJ, AJAH etc.)<br />Templating<br />So easy, even your cat could do it… right?<br />
    4. 4. “An entirely hostile environment.”<br />— Douglas Crockford<br />
    5. 5. Multi user-agent<br />Browsers<br />Mozilla: Firefox, Camino<br />WebKit: Safari, Chrome<br />Trident: Internet Explorer<br />Mobile<br />Assistive devices<br />Screen readers<br />Web spiders<br />GoogleBot<br />
    6. 6. Web standards<br />Standardised technology<br />HTML<br />CSS<br />JavaScript, ActionScript (ECMAScript)<br />XML<br />JSON<br />A development philosophy<br />Semantic mark-up<br />Separation of layers<br />Unobtrusive JavaScript<br />Not a complete solution to our problems!<br />
    7. 7. When User Experience Attacks!<br />Improving the users’ experience through technology<br />
    8. 8. Web Accessibility<br />Standards<br />WCAG, WAI<br />WAI-ARIA<br />Legal precedents<br />National Federation of the Blind vs. Target<br />
    9. 9. Consideration<br />Understand your users<br />Physically disabled<br />Blind<br />Deaf<br />Motor function<br />Cognitive disabilities<br />Autistic spectrum<br />Difficulties with problem solving, focus, memory<br />More common: short sightedness, colour blindness, dyslexia, dyspraxia<br />Lazy, forgetful, pedantic, difficult… wait a minute…<br />… that’s me!<br />Wayfinding<br />
    10. 10. SEO<br />Semantic mark-up<br />High quality content<br />Links<br />Google and the dreaded GoogleBot<br />Headless browser<br />Renders CSS<br />Runs JavaScript (including events)<br />Tests front-end performance<br />Is learning well-used front-end widgets and methods<br />
    11. 11. Technical understanding<br />Pages not sites<br />Framesets are confusing<br />Understand the value of meta data<br />Use HTTP properly<br />
    12. 12. Performance<br />Reduce download size<br />Reduce HTTP requests<br />Optimise static assets<br />Minified CSS and JavaScript<br />Well compressed images<br />Remove image metadata<br />Leverage caching<br />Use GZip<br />
    13. 13. “Java is to JavaScript asHam is to Hamster”<br />The JavaScript renaissance<br />
    14. 14. Ace language is ace<br />Event-based execution<br />Objectoriented<br />Prototypal inheritance<br />DOM<br />Closures<br />
    15. 15. Doing it right<br />Graceful degradation<br />Progressive enhancement<br />
    16. 16. JavaScript Libraries<br />JavaScript utility belt<br />Even the cross-browser playing field<br />Fix the stuff that’s missing<br />Custom events<br />Widget frameworks<br />Not always a good thing<br />
    17. 17. JavaScript Engines<br />Know your enemy<br />SpiderMonkey<br />V8<br />JScript<br />Inconsistent garbage collection<br />Missing from the ECMAScript specification<br />Memory leaks<br />Not just IE; Firefox sucks too<br />
    18. 18. Roads? Where we’re going, we don’t need roads…<br />Future technologies are available today<br />
    19. 19. Intertronz 3.0<br />HTML5<br />CSS3<br />Web sockets and web workers<br />Access to standardised browser and OS APIs<br />File system API, local storage, native drag and drop, improved browser history API<br />Mobile<br />Wicked awesome new interfaces<br />You know… like in Minority Report<br />… except without your arms getting tired<br />
    20. 20. Tim Huegdon<br />nefarioustim<br />http://timhuegdon.com<br />http://nefariousdesigns.co.uk<br />Twitter: @nefarioustim<br />http://github.com/nefarioustim<br />

    ×