enhancement
Door progressive enhancement toe te passen verzekert een developer dat zijn feature door zo veel mogelijk gebruikers gebruikt kan worden. De developer moet namelijk volgens deze methode verzekeren dan zijn feature werkt zonder CSS en client side JavaScript. Hij doet dit door te beginnen met het schrijven van de semantisch correcte HTML. Wanneer zijn feature zonder CSS en client side JavaScript nog steeds werkt kan hij door vrijwel alle users gebruikt worden.
Een pagina moet dus in deze drie stappen worden gemaakt:
- Semantisch correcte HTML,
- CSS,
- Client Side JavaScript.
Op deze manier verzekert de developer dat zijn feature door iedereen gebruikt kan worden, terwijl hij tegelijkertijd voor gebruikers met nieuwere browsers een zo goed mogelijk ervaring kan geven.
In de metafoor van deze taarten is hier de eerste taart de pagina met de semantisch correcte HTML, zonder CSS en client side JavaScript. Hoewel dat deze taart niet helemaal aangekleed is, vervult hij nog wel zijn functie als een taart. Hij kan nog steeds gewoon opgegeten worden, ondanks dat hij niet heel hoog zal scoren op een aflevering van Heel Holland Bakt.
De tweede taart staat voor de pagina met zowel de semantisch correcte HTML en CSS. Deze taart functioneert nog steeds hetzelfde als de eerste taart. Hij is immers hetzelfde als de eerste taart, min een laagje glazuur. Deze pagina is dus wat makkelijker op het oog en is in zijn algehele ervaring wat beter.
De derde taart staat voor de pagina met zowel de semantische correcte HTML, CSS en client side JavaScript. Deze taart functioneert wederom hetzelfde als zijn voorganger, maar is op het gebied van ervaring en uitstraling nog beter. Dit wordt hier weergegeven met de toevoeging van de kaarsjes op de taart.
Het punt van progressive enhancement is dus dat je verzekert dat iemand zoals Pietje, die de derde taart niet kan betalen (i.e. hij heeft een verouderde smartphone met een crappy browser), nog steeds een goed werkende ervaring heeft met de tweede taart.
Hoe ik progressive enhancement ga toepassen in mijn feature is op mijn codeplan pagina te vinden.
- Progressive enhancement - MDN web docs glossary: Definitions of web-related terms | MDN. (2020, 15 september). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
- Dwyer, S. D. (2009, 22 april). Progressive enhancement: What it is, and how to use it? Smashing Magazine. https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
- Tse, T. (2017, 15 februari). What is progressive enhancement and why should you care? Shopify. https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care