Progressive enhancement - Chelsey-bommer/Matching-wiki GitHub Wiki
Wat is progressive enhancement?
Progressive enhancement is een strategie in het ontwerpen van je website, waarbij je ervoor zorgt dat iedereen de basisfuncties van de componenten kan gebruiken en/of lezen, en wanneer mogelijk je de extra functies erbij krijgt. Hierdoor zorg je ervoor dat de gebruikers die bv. een oudere browser gebruiken nog steeds het basiselement kunnen gebruiken, en de gebruikers die wel up-to-date zijn alle extra trucjes kunnen gebruiken. De lagen hiervan zijn: eerst HTML, dan CSS en dan Javascript.
Wat is mijn idee om te maken?
De focus gaat komen op het maken van een voorkeuren(filter) component, voor het zoeken van een huis/appartement. Hierbij kan je voorkeuren instellen voor wat je zoekt in een kamer. Dit gaat dan om het budget en hoeveel kamers in het huis. Het idee is dat je deze invult in de app dan opslaat naar een database. Zo kunnen deze voorkeuren vergeleken worden met de database van de bestaande kamers op de app, en dan worden degene die met de voorkeuren overeenkomen laten zien in de app.
Met alle Javascript en CSS
Met alle functies werkend zou het er zo gaan uitzien:
- Kies uw budget: met meerdere budget opties, bijvoorbeeld 500-600 per maand etc. Dit komt dan in een lijst te staan waar je uit kan kiezen.
- Kies hoe veel kamers u wilt: Dit eigenlijk hetzelfde als hierboven, met opties van 1-5.
Zonder Javascript
Zonder de Javascript zou het er uitzien als gewoon velden waarin je je budget en hoeveel kamers invult. Het werkt nog steeds, maar is minder handig.
Zonder CSS
Zonder CSS is de werking nog het zelfde, maar ziet het er dus minder mooi uit.
Componenten van sites die ik gebruik waar dit op lijkt
Google agenda
Bij Google agenda heb je wanneer je een nieuwe afspraak wilt maken, altijd dat je een tijd kan neerzetten. Wanneer je de tijd klikt komt er een vaste lijst met tijden die je kan aanklikken. Je kunt deze ook nog zelf handmatig intypen. Zo wil ik dat mijn component ook gaat werken.
