This is why we can't have nice things¡
?
2 likes?651 views
The complexities of front-end web development. A Pecha Kucha presentation for developers and architects that might not understand the problems.
This is why we can't have nice things¡
- 1. This is why we can¡¯t have nice things¡The complexities of front-end web development
- 2. The developersFront-end is a specialisationTake pride in well engineered codeLove a good design patternLive by software engineering paradigmsPerfectionistsSado-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.)TemplatingSo easy, even your cat could do it¡ right?
- 4. ¡°An entirely hostile environment.¡±¡ª Douglas Crockford
- 5. Multi user-agentBrowsersMozilla: Firefox, CaminoWebKit: Safari, ChromeTrident: Internet ExplorerMobileAssistive devicesScreen readersWeb spidersGoogleBot
- 6. Web standardsStandardised technologyHTMLCSSJavaScript, ActionScript (ECMAScript)XMLJSONA development philosophySemantic mark-upSeparation of layersUnobtrusive JavaScriptNot a complete solution to our problems!
- 7. When User Experience Attacks!Improving the users¡¯ experience through technology
- 8. Web AccessibilityStandardsWCAG, WAIWAI-ARIALegal precedentsNational Federation of the Blind vs. Target
- 9. ConsiderationUnderstand your usersPhysically disabledBlindDeafMotor functionCognitive disabilitiesAutistic spectrumDifficulties with problem solving, focus, memoryMore common: short sightedness, colour blindness, dyslexia, dyspraxiaLazy, forgetful, pedantic, difficult¡ wait a minute¡¡ that¡¯s me!Wayfinding
- 10. SEOSemantic mark-upHigh quality contentLinksGoogle and the dreaded GoogleBotHeadless browserRenders CSSRuns JavaScript (including events)Tests front-end performanceIs learning well-used front-end widgets and methods
- 11. Technical understandingPages not sitesFramesets are confusingUnderstand the value of meta dataUse HTTP properly
- 12. PerformanceReduce download sizeReduce HTTP requestsOptimise static assetsMinified CSS and JavaScriptWell compressed imagesRemove image metadataLeverage cachingUse GZip
- 13. ¡°Java is to JavaScript asHam is to Hamster¡±The JavaScript renaissance
- 14. Ace language is aceEvent-based executionObjectorientedPrototypal inheritanceDOMClosures
- 15. Doing it rightGraceful degradationProgressive enhancement
- 16. JavaScript LibrariesJavaScript utility beltEven the cross-browser playing fieldFix the stuff that¡¯s missingCustom eventsWidget frameworksNot always a good thing
- 17. JavaScript EnginesKnow your enemySpiderMonkeyV8JScriptInconsistent garbage collectionMissing from the ECMAScript specificationMemory leaksNot just IE; Firefox sucks too
- 18. Roads? Where we¡¯re going, we don¡¯t need roads¡Future technologies are available today
- 19. Intertronz 3.0HTML5CSS3Web sockets and web workersAccess to standardised browser and OS APIsFile system API, local storage, native drag and drop, improved browser history APIMobileWicked awesome new interfacesYou know¡ like in Minority Report¡ except without your arms getting tired
Editor's Notes
- #3: Often versed in several middle-tier languages
- #5: Douglas Crockford, JavaScript guru, creator of JSLint and popularised JSON. Member of the ECMAScript committee.
- #6: Text only browsers
- #9: 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.