The complexities of front-end web development. A Pecha Kucha presentation for developers and architects that might not understand the problems.

1. This is why we can’t have nice things… The complexities of front-end web development

2. The developers Front-end is a specialisation Take pride in well engineered code Love a good design pattern Live by software engineering paradigms Perfectionists Sado-masochistic

3. What is “front-end”? Semantically marked-up content (HTML) Decoupled rules for presentation (CSS) Enhanced interaction and behaviour (JavaScript) XMLHttpRequest (aka XHR, AJAX, AJAJ, AJAH etc.) Templating So easy, even your cat could do it… right?

4. “An entirely hostile environment.” — Douglas Crockford

5. Multi user-agent Browsers Mozilla: Firefox, Camino WebKit: Safari, Chrome Trident: Internet Explorer Mobile Assistive devices Screen readers Web spiders GoogleBot

6. Web standards Standardised technology HTML CSS JavaScript, ActionScript (ECMAScript) XML JSON A development philosophy Semantic mark-up Separation of layers Unobtrusive JavaScript Not a complete solution to our problems!

7. When User Experience Attacks! Improving the users’ experience through technology

8. Web Accessibility Standards WCAG, WAI WAI-ARIA Legal precedents National Federation of the Blind vs. Target

9. Consideration Understand your users Physically disabled Blind Deaf Motor function Cognitive disabilities Autistic spectrum Difficulties with problem solving, focus, memory More common: short sightedness, colour blindness, dyslexia, dyspraxia Lazy, forgetful, pedantic, difficult… wait a minute… … that’s me! Wayfinding

10. SEO Semantic mark-up High quality content Links Google and the dreaded GoogleBot Headless browser Renders CSS Runs JavaScript (including events) Tests front-end performance Is learning well-used front-end widgets and methods

11. Technical understanding Pages not sites Framesets are confusing Understand the value of meta data Use HTTP properly

12. Performance Reduce download size Reduce HTTP requests Optimise static assets Minified CSS and JavaScript Well compressed images Remove image metadata Leverage caching Use GZip

13. “Java is to JavaScript asHam is to Hamster” The JavaScript renaissance

14. Ace language is ace Event-based execution Objectoriented Prototypal inheritance DOM Closures

15. Doing it right Graceful degradation Progressive enhancement

16. JavaScript Libraries JavaScript utility belt Even the cross-browser playing field Fix the stuff that’s missing Custom events Widget frameworks Not always a good thing

17. JavaScript Engines Know your enemy SpiderMonkey V8 JScript Inconsistent garbage collection Missing from the ECMAScript specification Memory leaks Not just IE; Firefox sucks too

18. Roads? Where we’re going, we don’t need roads… Future technologies are available today

19. Intertronz 3.0 HTML5 CSS3 Web sockets and web workers Access to standardised browser and OS APIs File system API, local storage, native drag and drop, improved browser history API Mobile Wicked awesome new interfaces You know… like in Minority Report … except without your arms getting tired

20. Tim Huegdon nefarioustim http://timhuegdon.com http://nefariousdesigns.co.uk Twitter: @nefarioustim http://github.com/nefarioustim