In het vak Browser Technologies gaan we onderzoeken wat Progressive Enhancement is en hoe je dit kan toepassen om goede, robuuste, toegankelijke websites te maken. Voor iedereen. Het web is voor iedereen, in dit vak leer je hoe je daarvoor kan zorgen.

• je leert wat Progressive enhancement is en hoe je dit kan toepassen.
• je leert Browser Technologies te onderzoeken, testen en implementeren als enhancement.
• je leert hoe je Feature Detection doet en wat je kan doen als een 'feature' niet werkt of wordt ondersteund.

clone browser-technologies-2122 with git

#navigate to directory you want to save in
cd someDirectory/inA/dir
git clone https://github.com/bommezijn/browser-technologies-2122.git
cd browser-technologies-2122

Install the project with npm or your preferred package manager

  npm install my-project
  # To start developing run dev
  npm run dev

Om Browser Technologies te snappen hebben wij theorie moeten leren en begrijpen

• Opdracht 1: Wat is progressive Enhancement Het zoeken van metaforen voor progressive enhancement. Browser Technologies - team 2
• Opdracht 2: Break the web Letterlijk het web breken aannames die jij maakt valideren en in te leven in de eindgebruiker. Aantal features onderzoeken. zie wiki.

Progressive enhancement (PE), het van de grond op een website (of webapplicatie) bouwen dat voor iedere gebruiker werkt. Het zal werken in iedere context. Hoe meer de context toe laat hoe beter de website zal werken.
PE wordt toegepast door middel van progressief het web te bouwen, als het fundament sterk is, zal de rest ook van zelf sterker zijn. Dus de basis; HTML moet als eerste functioneel zijn. Dan maak je dit vervolgens prettig om te gebruiken, je kijkt niet meer alleen naar HTML, maar het is prettig om naar te kijken. Vervolgens maak je het enhanced, met JavaScript voeg je features toe die het de gebruiker alleen maar makkelijker maakt.

In een lopende verhaal heb ik net eigenlijk de drie lagen benoemd:

1. Functional (HTML)
2. Usable (HTML + CSS)
3. Pleasurable (HTML + CSS + JS)

Om te controleren als dit op de juiste manier wordt gedaan is feature detection ook van belang, het controleren als iets wel wordt ondersteund door de browser, dit kan zowel in JavaScript als in CSS.

Deployed via Heroku, please be patient

Backup demo

Basis van de wireflow en de logica van de applicatie. Het doel van de applicatie is om een formulier door de gebruiker in te laten vullen, maar ook om te definieëren wat de verschillende lagen zijn.

Functional Layer Functionele laag van de enquete, hier zie je de barebone HTML van de webapplicatie.

Usable Layer De usable layer, de laag waar het visueel aantrekkelijker wordt voor de gebruiker, zodat deze gebruiker de enquete eerder neigt in te vullen.

Pleasurable layer De laag waar alles bij elkaar komt, de pleasurable layer, hier zal bovenop de vorige twee lagen, een laag JavaScript overheen gaan, dit zou het voor de gebruiker nog prettiger moeten maken.

Welke features / browser technologies zijn er gebruikt in de demo? op basis van the web platform

CSS features

• color: currentColor Het herbruiken van een kleur
• @supports controleren als een feature wel werkt
• display: flex positionerings model voor een dimensionale layout
• selectors, psuedo classes en meer Usable layer; deze features worden alleen gebruikt in de usable layer voor de styling zodat het prettig is voor de gebruiker maar ook om te controleren als iets wel wordt ondersteund.

storage technologies

• localStorage, het opslaan van data in de browser voor bijvoorbeeld later hergebruiken pleasurable layer; Voor de case is het belangrijk dat de gebruiker later verder kan gaan. Data wordt tussentijds opgeslagen zodat de gebruiker ieder moment de enquete kan voortzetten.

HTML bonus features

• classList Methode om makkelijk classes te manipuleren
• data-* attributen voor attributen die niet de juiste attributen heeft voor de content
• defer scripting, het afwachten wanneer de script moet worden ingeladen
• aria-* semantische informatie van een element voor accessibility Functional/Usable layer; Deze features worden toegepast om de HTML toegankelijker te maken voor mensen met bv. een screenreader. Daarnaast worden enkele features ook gebruikt om custom error meldingen te tonen wanneer er iets verkeerd gaat.

Voor het testen van de webapplicatie is er gekeken naar de volgende apparaten

Test verslag dat mijn onderzoek zwart op wit plaatst over hoe en wat ik heb lopen testen op de apparaten.

De feature-lijst die ik heb gebruikt in de applicatie zijn groot en deels 'widely covered' wat inhoudt dat het door de meeste browsers (deels) wordt ondersteund. Hoewel dit vooral browser features zijn, zijn er ook enkele features geschreven om de ervaring van de gebruiker te verbeteren.

Het gebruik van localStorage; Dit zorgt ervoor dat de gebruiker zijn of haar progressie bij kan houden door de enquete heen. Dit is ook één van de requirements van de opdracht. Deze feature werkt echter wel alleen wanneer JavaScript beschikbaar is. Hiervoor is een feature detection check geschreven in de clientside, dit is deels door mijzelf maar ook door Mozilla geschreven.

Het gebruik van variabelen en andere nieuwere technieken in CSS; dit is op een soort gelijke manier opgevangen als JavaScript, alleen dan met CSS. Door middel van gebruik te maken van de @supports selector kan ik een feature detection uitvoeren waar ik kijk als een bepaalde techniek wel beschikbaar is, is dit niet dan zorg ik ervoor met CSS dat dit wordt afgevangen. Een goed voorbeeld hiervan zijn de CSS variabelen.

Op basis van de devices waarmee ik heb kunnen testen werken alle functionaliteiten zoals toebehoren, maar dat is maar een klein deel van de gebruikbaarheid. Hierom heb ik voor iedere functionaliteit caniuse geraadpleegd.

op iOS heb ik onder settings > Safari de opties voor JavaScript / CSS en meer aan en uit gezet, daarnaast heb ik onder advanced gekeken welke technologieen aan staan en gekeken welke uitstaan. Dit kon worden getest via de inspector tool voor iOS Safari.

Ook is er gekeken naar hoe de website zich gedraagt een resource niet geladen kan worden, hiermee kun je bedenken dat bijvoorbeeld de CSS bestand(en) of JavaScript bestand(en) foutief zijn ingeladen. Door middel van progressive enhancement blijft de webapplicatie zich voortdoen zoals verwacht. Je kan de formulier blijven invullen zonder CSS of JavaScript, maar dan wordt de progressie niet opgeslagen.

Qua features binnen JavaScript heb ik de code geschreven met zo min mogelijk nieuwe functionaliteiten die zijn geintroduceerd sinds 2015. Toch zijn er enkele doorheen geslipt;

• const, let Om variabelen specifiek te houden voor hun block scope heb ik gebruik gemaakt van deze var alternatieven. De bruikbaarheid volgens caniuse is 98.01% en 95.61% respectief. De browsers waar hier een fout zal ontstaan zullen een versie hebben van voor 2015. De fout specifiek in kwestie is dat de variabel declaratie niet als block scope wordt gedefineerd.
• Een enkele arrow function, Voor compatibility redenen heb ik de meeste functies of callbacks geschreven met function(){ } maar het mocht toch zijn dat ik hier en daar een arrow function heb gebruikt. Met name in de serverside heb ik dit gedaan. Alhoewel de support voor arrow functions wel op 94.85% staat, zijn het reeds weer de oudere browsers tot medio 2016 dit niet altijd ondersteunen.

Als ik deze webapplicatie zou uitbreiden naar een volledig product / concept zou meer tijd hebben besteed aan de volgende punten;

• Verbetering in het controleren als een feature wordt ondersteund. Op het moment wordt feature detection toegepast waar ik denk dat een feature niet volledig wordt ondersteund, als dit op meerdere plekken voorkomt schrijf ik dit nog maals, dit volgt het principe DRY niet.
• Meer tijd besteden aan validatie, validatie werkt niet volledig zoals verwacht, dit heeft waarschijnlijk te maken met het herschrijven van functionaliteit. Een van de bugs die hier aanwezig zijn is dat de serverside variant de problemen voordoet maar de statische variant dit probleem niet voordoet.
• Als toevoeging zou ik de backend willen uitbreiden om resultaten op een externe locatie op te slaan, zoals een database. Met deze toevoeging zou ik vervolgens een beheerdersomgeving kunnen bouwen waar de beheerder de resultaten kan inzien.