Visie op semantiek, techniek, structuur en werkwijze anno 2012. Hoe schrijf je toegankelijke en herbruikbare HTML, CSS en Javascript? Wat is Modular CSS? Deze workshop geeft je de argumenten.

1. 2012 Frontend Guidelines
visie op semantiek, techniek
structuur en werkwijze

2. Frontend Guidelines
@mathijsdejong – Frontend Purist
nl.linkedin.com/in/dejongmathijs
twitter.com/#!/mathijsdejong
onbeperktmedia.nl
“ Zeg wat je bedoelt, doe wat je zegt
”

3. Frontend Guidelines
Wat te verwachten?
• Handrijkingen: ontwikkel ZELF een visie
• Pakket argumenten en best practices anno 2012
• Update omtrent ontwikkelingen HTML5, CSS3
• “Footprint”  Uniformiteit
Doel:
Vind balans tussen guidelines (regels) en pragmatisch denken

4. Frontend Guidelines
Workshop topics
Is: Is niet:
• Semantiek en HTML5, DOM • Handleiding HTML
• CSS3 in 2012 • Handleiding Javascript OOP
• Progressive Enhancement • Hapklare brokken
• Modulair / Scalable / Re-Usable
• Responsive vs Adaptive – Mobile First
• Native Javascript vs jQuery
• Performance
• Styleguides
• Frontend Standards Guidelines Document
• Tools en Resources
• Follow @people twitter

5. Frontend Guidelines
2012 Frontend Developer “Tasks”
• HTML(5)
• CSS
• Images (GIF, JPEG, PNG, SVG, Scalable)
• Canvas
• Video / Audio
• Webfonts
• Javascript
• DOM API‟s
• WebGL
• Devices
2002 HTML‟er Tasks:
• HTML
• CSS
• Images (GIF,JPEG)
• Javascript (low level)
• Browsers

6. Frontend Guidelines
Stelling
• Visual Design moet pixel-perfect zijn in elke browser

7. Frontend Guidelines
Semantiek
Wat is semantiek?

8. Frontend Guidelines
Semantiek is niet belangrijk
“Het werkt toch wel”
“Browsers zijn net mensen – ze interpreteren”

9. Frontend Guidelines
Semantiek is niet belangrijk

10. Frontend Guidelines
Communicatie
Een afspraak om met elkaar te kunnen praten
(mens-mens, mens-machine, machine-machine)
Semantiek = Betekenisvolle en duidelijke inhoud

11. Frontend Guidelines
MVC Frontend
Model View Controller interpretatie
HTML: Model
CSS: View
Javascript: “Controller”
HTML vertegenwoordigt data model
Markup Language
“Aanbrengen van structuur in complexe documenten”
Scheiding Inhoud, Opmaak en Gedrag
HTML: Inhoud
CSS: Opmaak, Animaties, Visueel Gedrag
Javascript: Inhoud, (Rijke) Opmaak, (Rijke) Animaties, Visueel
Gedrag, Logica

12. Frontend Guidelines
HTML elementen zonder betekenis
div
span
table
canvas (HTML5)
Geef betekenis door:
class attribute
Beschrijf inhoud, niet vorm
Maar…
Class = “”
• CSS
• Javascript
• State

13. Frontend Guidelines
Class of ID
<div id=“” />
Meestal gegenereerd vanuit een backend taal (maar ook XSLT)
Unieke identifier voor een element
dus: komt 1x voor
Dynamische elementen
“Instantie van”  class
“Speficiek component”  id

14. Frontend Guidelines
HTML5 DocType + Elementen
HTML5: “semantic web”
(X)HTML 1.1 “visual web”
* 2001
† 2010
HTML5 blijft voortdurend „under construction‟
• “The best closest thing”
• Browsers volgen de Recommendation
• Gebouwd op de blijvende ontwikkeling van het web

15. Frontend Guidelines
HTML5: What have we done

16. Frontend Guidelines
HTML5: What have we done
Thx, MS
Word…

17. Frontend Guidelines
HTML5 Nieuwe “semantische” elementen
• article
• section
• header
• footer
• mark
• aside
• meter
• audio
• nav
• canvas
• output
• details
• progress
• figcaption
• figure
• summary
• time
• video
• hgroup

18. Frontend Guidelines
HTML5 Tags vernieuwd
• <u> - unarticulated
• <i> - alternate voice or mood
• <b> - extra attention without extra importance
• <em> - emphasis
• <strong> - importance
• Betekenis Headings (h1…h6):
• Geen meerdere H1‟s
• article h1, article h1, section h3
• Content Level dependent headings
• Geen “page” headings

19. Frontend Guidelines
Best Practices HTML(5) „Model‟
• Class: omschrijf inhoud, niet vorm
• ARIA roles (WAI-ARIA)
• INPUT types (email, color, date, range, …)
• Content = King: relevant content first (nav / header?)
• “divitis” / “classitis”
• div‟s niet toevoegen voor design
• niet voor alle elems een className
• Progressive Enhancement: pure HTML fallback (AJAX)
• Inline documentatie

20. Frontend Guidelines
Stelling
Formulieren: Horizontale groepen velden als UL LI is beter dan DIV's

21. Frontend Guidelines
CSS3 in 2012
• Property Support?
• caniuse.com/#cats=CSS
• css3test.com
• lea.verou.me 
• Webkit (Chrome) eats CSS3! (experimental)
• Animaties, animaties, animaties
• Vermijd „vendor prefixes‟ (webkit- / mox- )
• CSS3 is niet stable
• check altijd de Specification W3.org/TR/CSS/#css3
• Kortom:
• Gebruik verstandig: only implemented features
Altijd „fallback‟ (PNG/SVG/Javascript) voor IEx/FF/Mobile

22. Frontend Guidelines
Best Practices CSS
• Structuur:
• Reset / Normalize
• Blueprint
• Typografie
• Globale elementen (common)
• Componenten
• Media queries?
• IE - fixes
• Inline documentatie
• Reset vs Normalize CSS
• Reset: 0‟ing (remove ALL default styling)
• Normalize: Level out (consistent) default styling
•  Geen standaard design? Reset
• Inhoudsopgave (grote) CSS files
• Shorthand CSS properties (margin/padding: TRouBLe)
• 0 appels, 0 peren, 0 px === 0 dus: geen units
• „Hack free‟ (IE x specific CSS files)
• Propery volgorde: box-model-convention (?)
• Eigen inzicht: logica

23. Frontend Guidelines
Progressive Enhancement
“Focus op Content”
Zet Javascript, CSS, Images, etc uit. Is je toepassing nog steeds bruikbaar?

24. Frontend Guidelines
Progressive Enhancement praktisch:
• AJAX fallback:
Link naar „isolated‟ content pagina
• Denk in Layers
• Basis layer (content) ook stylen en toegankelijk bouwen
• Complexe UI elementen gebouwd met Javascript hebben altijd een
„basic‟ equivalent
• “Beloon” de user met een “rijkere ervaring”
Dus:
HTML
HTML + Images
HTML + Images + CSS (2.1)
HTML + Images + CSS (2.1) + Javascript
HTML + Images + CSS (2.1) + Javascript + CSS3
HTML + Images + CSS (2.1) + Javascript + CSS3 + HTML5 „features‟

25. Frontend Guidelines
Modular / Scalable / Re-Usable HTML+CSS
• Bouw componenten op basis van inhoud
• Vermijd Presentational Class names
• Denk in “states” (modus varianten van een component)
• Generated / iteratief (houd je .Net developer te vriend!)
• class=“module article-list” of “component article-list”
• “module + module-name + content-variant / state”
• Denk aan CSS inheritance en specificity
• SHTML / server side includes (Apache/IIS) binnen templates
• Onderhoudbare CSS met Frameworks:
• SMACSS
• Compass CSS
• Blueprint CSS
• OOCSS
• “Skinnable” / “Theming”
• Base Skin
• Theme Skins
• Theme varianten (“theme-1” (semantic?)

26. Frontend Guidelines
Modular / Scalable / Re-Usable HTML+CSS
Blokken en Grids
• Columns / Rows / Gridmaten (units)
• .col.size1of4”  niet heel flexibel (vast stramien)
• .col.single / .col.double / .col.triple  flexibel, vast stramien
• .col.size1 / .col.sizeX -> flexibel, dynamisch grid
• Responsive Layouts: fluid grids
• Nested Columns: inheritance / over-ruling
• Float VS inline-block
• CSS Grid Frameworks (960 / Yui CSS Grid Builder / Blueprint)

27. Frontend Guidelines
Modular / Scalable / Re-Usable HTML+CSS
Re-Usable CSS
• Verzamel alle veelgebruikte CSS (+fixes) in een (eigen) Framework
• Bouw je „Styleguide‟ met deze CSS, specifieke aanpassingen opnemen
• Documenteer globale én specifieke blokken CSS
• Duidelijke CSS Selectors (specificity) & nested componenten
• Eenduidige stijl classNames en notatie
• Laat niet zien dat er 3 developers code hebben geschreven
• Single line selectors / multiline / cascading
• Orphan Components
• Niet afhankelijk van parent of layout
• Uitzonderingen mogelijk als specifieke rules
• Als een „los‟ component  outer layout breekt niet (overflow:
hidden!)
• Vermijd _vendor-prefixes (toekomstig support)

28. Frontend Guidelines
Responsive VS Adaptive

29. Frontend Guidelines
Stelling
• Responsive Design moet je altijd implementeren

30. Frontend Guidelines
Responsive: CSS3 Media Queries
• CSS Render Engine:
• width / height (browser window object)
• device width / height
• orientation (landscape/portrait (iOS !== Android)
• resolution (dpi) (retina “the New iPad”)
• Semi-fluid design
• fluid grids (= minder queries)
• Detecteer “devices” Desktop + Tablet + Mobile
• Werkwijze:
• Mobile First (beter: Structured Content First)
• query „min-width / max-width‟ specifieke styles
• Globale selectors
• “One size fits all –fix” : Complexe designs vereisen oa JS / Conditional
CSS
• Gebruikers „dwingen‟ je om enige vorm van Responsive te

31. Frontend Guidelines
Javascript: jQuery VS Native
• Feiten:
• jQuery file size: (1.7 .min.js) = 91kB
• jQuery hosted (Google/MSN/…) vaker gecached
• Moderne browsers kunnen meer „native‟
• Waarom is jQuery (e.a.) ontstaan?
• CSS DOM Selectors support
• Browser verschillen uitvlakken (AJAX/DOM/Styles/Manipulatie)
• Makkelijk Methods / Properties (“Write Less, Do More”)
• JS Animaties + easing
• Plugins / Community
• Native Javascript
• 2012: Minder browser verschillen in HTML5/ EScript implementatie
• jQuery Nadelen:
• Expensive jQuery {Object}
• Geen OO Design Patterns (zie plugin authoring)
• Trager dan Native JS

32. Frontend Guidelines
Javascript: jQuery VS Native
• $(DOMElem) CSdocument.querySelectorAll(DOMElem)
• Support: Moderne browsers (incl IE8 (CSS2.1))
• Native For loops VS $.each()
• OOP Design Patterns wél te combineren met jQuery
• “Is het gewicht van jQuery {} het resultaat waard?”
http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
$('#container').find('li');

33. Frontend Guidelines
Stelling
• Native Javascript / HTML5 API's zijn sneller dan jQuery

34. Frontend Guidelines
Performance
HTML
• Minimum aantal HTML elementen
• Scheiding Inhoud, Opmaak, Gedrag
• Verwijder <!– comments --> in Production HTML
• CSS includes boven in <head>
CSS
• Snelheid in CSS Rendering:
• #id Selectors
• elem.className (CSS DOM Traversing)
• Minify / Combineer CSS files (Production)
• Voorkom „dubbele declaraties‟ (optimize Base + Skin)
Javascript
• Script includes onder in <body>
• Laadt Hosted Libraries (Google/MSND)
• Deferred / Lazy loading (a-synchroon, non-blocking)
• Minify / Compress JS files
• Geen DOM / Style modifcaties bij DOM Traversing
• Null‟ing / Deleting Objects (Garbage Cleaning)

35. Frontend Guidelines
Performance
CSS / Images
• Spriten in PNG
• SVG voor Scalable / Gradients
• Compress JPEG / PNG / GIF
• Webfont Glyphs voor Scalable Iconen
• Cache Control
• Moderne Browsers: CSS3 / Fallback ONLY: Images
• Gebruik de Network / Timeline in Firebug / Dev Toolbar
• Gebruik timeOuts voor AJAX calls (jsonP is problematisch)
• YSlow (Yahoo)
• Google Page Speed

36. Frontend Guidelines
Stelling
• CSS Image Sprites: Automatisch of Handwerk?

37. Frontend Guidelines
Web Styleguides
Kwaliteitscontrole / Onderhoudbaarheid
Proof of Concept:
• Layout
• Grids
• Pagina Typen
• Componenten + States
• “Real World” Content
• AJAX? Dummy content of jQuery Mockjax Plugin (mocking requests)
Inspiratie
• github
• Starbucks
• https://gimmebar.com/loves/maban/collection/front-end-styleguides

38. Frontend Guidelines
Web Styleguides

39. Frontend Guidelines
Standards Guidelines Document
Interne brede development standaarden vastgelegd
• Javascript Frameworks: API documentatie
• Coding Conventions
• HTML / CSS Structuren
• Proof of Concepts
• Visie
• Kennisoverdracht
Inspiratie
• BBC
• Mozilla
• Opera
• GitHub
• Isobar

40. Frontend Guidelines
Tools & Resources
http://bit.ly/HeMmiI “Let me Google That for You”
Achtergrond artikelen:
• AlistApart
• Smashing Magazine
• Fronteers
• Mozilla / Opera / MSDN Developer Docs
• DiveInToHTML5.info
• .Net Magazine / Web Designer (NL/EN)
Specifieke issues
• StackOverflow
• HTML5Doctor.com
• Fronteers Conf (download slides)