Skip to content

Progressive enhancement

Ine edited this page Mar 18, 2022 · 3 revisions

Progressive enhancement

Wat is progressive enhancement?

Progressive enhancement is een principe die word gebruikt bij het maken van websites en webapplicaties die moderne technologieën gebruiken, zodat deze moderne technologieën toch zullen werken in browsers die deze functies niet ondersteunen. Dit is ook handig voor mensen met een functiebeperking die websites gebruiken terwijl ze bijvoorbeeld JavaScript hebben uitgezet, daarnaast is het ook handig voor mensen met een trage internet verbinding. Bij deze mensen word de basisversie van de website of webapplicatie die volledig werkt laten zien.

Waarom progressive enhancement toevoegen?

Wanneer je progressive enhancement toevoegt aan je website word je website beter accessibele, omdat iedereen de content van je website kan zien. Daarnaast kan het ook zorgen voor betere cross-browser en cross-device support.

Look for inspiration, what components do you see in the wild that will fit your matching application?

Instagram.com - Sign up en login Instagram signup

Bol.com - Kies een categorie Bol.com kies categorie

Bol.com - Filteren op taal Bol.com kies taal in filter

Bol.com - Inloggen Bol.com inloggen

What will be done server-side, what will be done client-side?

Wanneer je als gebruiker een account aan het aanmaken bent, word er wanneer je alles hebt ingevuld aan de client side een request gestuurd naar de server side. De server side checkt dan of alles wat is ingevuld goed is of niet en stuurt dan een response naar de client dat bijvoorbeeld het e-mailadres niet goed is ingevuld omdat er geen @ is gebruikt of dat het wachtwoord bepaalde tekens mist. De response van de server side kan ook goed zijn en dat dan het account is aangemaakt of de gebruiker is ingelogd. Als de gebruiker een account aan het aanmaken is en alles wat is ingevuld is goed is word dit in de database opgeslagen aan de server side.

Are you going to use web API's on the client to enhance the user experience?

  • Wat is een API?
    • Een API is een boodschapper die verzoeken op neemt en het systeem vertelt wat jij wilt doen en geeft dan antwoord.
    • Een web API is een API die via het internet reist. Je hebt de client die de API op roept en de server die daarop reageert.
    • Een voorbeeld is: als je met het vliegtuig bijvoorbeeld op vakantie wilt ga je bij een service online vliegtickets boeken. De gegevens van de vliegtickets die worden laten zien op basis van de data, aantal personen en plaats waarvan en naar toe wilt die je hebt ingevuld worden uit een API van vliegtuigmaatschappijen gehaald.

Ik weet nog niet precies wat voor web API handig is om te gaan gebruiken voor Bookbuddy. Ik heb wel twee web APIs gevonden die misschien handig kunnen zijn:

  • Een API om ervoor te zorgen dat wanneer de gebruiker een formulier invult of aan het chatten is altijd op dezelfde plek blijft ook wanneer hij/zij de schermgrootte veranderd of van portrait naar landscape gaat. Dit kan ik doen met de Resize Observer API.
  • Of misschien is Geolocation, wanneer de gebruiker op locatie iemand zoekt om ook daadwerkelijk mee af te kunnen spreken om samen te gaan lezen.

Third party API: Ja, dit lijkt mij handig als ik verder ben met Bookbuddy om toe te passen, zodat de gebruikers van de app boeken kunnen zoeken in de app en deze kunnen toevoegen aan hun favorieten en aan recent gelezen. Op deze manier kunnen andere zien wat hij/zij laatst heeft gelezen of wat hem/haar favoriet is.

Kijk voor de gekozen API op de pagina Component. Daar staat ook wat die doet.

What will happen if JavaScript is disabled? Will it degrade gracefully to HTML & CSS?

Wanneer de JavaScript word uitgezet kan de gebruiker gewoon nog blijven inloggen, er komen alleen dan geen fout meldingen meer wat er fout gaat. Dit word dan nog wel gedaan wanneer de velden op required staan in de HTML. Hierdoor kan het voor de gebruiker minder duidelijk zijn wat er fout gaat en dus meer tijd kosten om in te loggen. Wanneer de JavaScript wel aan staat kan de gebruiker makkelijker zien wat er fout is aan de berichten die worden gegeven.