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.
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
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
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?)
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)
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');