Reflectie

Om te zien hoe ik de vakken van de minor heb toegepast tijdens de meesterproef ga ik mezelf hierop reflecteren. Ik zal per vak gaan kijken wat ik wel en niet heb toegepast. Ook zal ik gaan kijken waar ik mezelf voortaan in kan verbeteren.

Web Apps From Scratch

Rubric

Deficiency	Criterion	Improvement
	User Interface - you design, build and test the user interface by applying interface design principles
	Code structure - you write modular, consistent and efficient HTML, CSS and JavaScript code by applying structure and best practices. You manage state for the application and the UI
	Data management - you understand how you can work with an external API using asynchronous code. You can retrieve data, manipulate and dynamically convert it to structured html
	Project - your app is working and published on GitHub Pages. Your project is thoroughly documented in the README.md file in your repository.

Reflectie

Tijdens de meesterproef heb ik een interface ontworpen, gebouwd en getest. Ook heb ik geprobeerd verschillende states toe te passen. Het was binnen ons project naar mijn idee alleen niet mogelijk om een error state toe te voegen. We hadden uiteraard een error state kunnen toepassen voor als de API het niet doet. Wel hebben we een loading state toegepast. Ik heb de code verders goed modulair gemaakt en zo min mogelijk herhaling van code. Ook hebben we data uit een API gehaald en omgezet naar HTML. Wel hadden we deze data nog kunnen manipuleren.

CSS to the rescue

Rubric

• Je kunt experimenteren met (voor jou) nieuwe css-technieken - om de mogelijkheden op waarde te schatten en te gebruiken waar gepast.
• Je hebt begrip van de volle kracht en mogelijkheden van CSS. Je laat zien dat CSS meer kan dan allen web pages 'stylen'.
• Je hebt begrip van de interactie-technieken van CSS (en HTML). De UX is aangenaam bruikbaar binnen de gekozen context(en).
• Je hebt begrip hoe progressive enhancement elegant toe te passen. Je laat zien dat je cascade, inheritance en specificity kunt toepassen.

Reflectie

Ik heb tijdens de meesterproef wel degelijk gebruik maakt van de volle kracht van CSS. Zo heb ik het aapje, dat te zien is op de chatbot pagina, volledig gemaakt in CSS. Ook is de animatie van het aapje gedaan met CSS. Wel had ik minder gebruik kunnen maken van ID's en meer gebruik kunnen maken van de diverse CSS selectoren. Wel heb ik geëxperimenteerd met de CSS property text-overflow. Uiteindelijk heb ik dit niet hoeven te gebruiken, omdat we de volledige text wilden tonen.

Progressive Web Apps

Rubric

Deficiency	Criterion	Improvement
	Project Your app is published and can be accessed using the browser. Your project is thoroughly documented in the README.md file in your repository. Included are an explanation of client- server rendering, an activity diagram including the Service Worker and a list of enhancements to optimize the critical render path implemented your app.
	Serverside rendering You’ve implemented serverside rendering and have articulated how it works and why you should want it.
	Service Worker You’ve implemented a usefull Service Worker and show it’s working in an activity diagram.
	Critical render path You’ve enhanced the critical render path for a better runtime or perceived performance in multiple ways and have described how you managed to do this.

Reflectie

Tijdens de meesterproef heb ik de applicatie grotendeels serverside gerenderd. Aan de performance hebben we niet heel veel kunnen doen. Dit was ook niet heel hard nodig, gezien onze applicatie al een prestatie score van 99 heeft in lighthouse. Service worker zijn we niet aan toe gekomen door tijdsgebrek.

Browser technologies

Rubric

• Student kan de Core functionaliteit van een use case doorgronden
  • Student kan uitleggen wat Progressive Enhancement en Feature Detection is en hoe dit toe te passen in Web Development
  • De demo is opgebouwd in 3 lagen, volgens het principe van Progressive Enhancement
  • De user experience van de demo is goed
• Let op leesbaarheidsregels, contrast en kleuren
• Let op gebruiksvriendelijkheid, zoals affordance en feedback op interactieve elementen
• De meest 'enhanced' versie is super vet, gaaf en h-e-l-e-maal te leuk om te gebruiken

Reflectie

Ik heb tijdens de meesterproef de speechSynthesis API gebruikt, die niet op elke browser te gebruiken is. Als fallback hebben we ervoor gezorgd dat de tekst die gesproken wordt ook te zien is op het scherm. Gebruiker kan door de pagina gaan door middel van de tab, maar de focus state had wel wat beter gekund. Verders hebben ik wel gekeken naar contract en kleuren op de pagina. Ik had wel meer kunnen gaan kijken naar de gebruiksvriendelijkheid.

Real-time Web

Rubric

Deficiency	Criterion	Improvement
	Project Your app is working and published on Heroku. Your project is thoroughly documented in the README.md file in your repository. Included are a description of the data-lifecycle, real-time events and external data source used by your app.
	Complexity You’ve implemented enough real-time functionality for us to test your comprehension of the subject. A lot of functionality is self-written. You are able to manipulate online examples live.
	Client-server interaction By interacting with the app, a user can influence the data model of the server in real time by directly modifying data OR by influencing API requests between server and source. The student has set up the data manipulations.
	Data management The server maintains a data model and each client is continuously updated with the correct data.
	Multi-user support Multiple clients can connect to the server. Interaction works as expected and is not dependent on the number of clients. You can explain how your app approaches this.

Reflectie

In ons project hebben ik eigenlijk niks toegepast wat we hebben geleerd bij real-time web. Dit komt vooral omdat onze app geen real-time functionaliteiten heeft. Ik heb dus niet met sockets gewerkt. Wel hebben we de applicatie deployed op Heroku.

Human Centered Design

Rubric

Ontoereikend	Criteria	Verbetering
	Readme - In de beschrijving van het project staat de opdracht uitgelegd, is het probleem duidelijk beschreven en hoe het probleem is opgelost.
	Design Principles - Student laat zien hoe de Exclusive Design Principles zijn toegepast in het ontwerp. De principes study situation, prioritise identity, ignore conventions en add nonsense zijn goed uitgelegd. Aan de hand van de principes wordt duidelijk gemaakt hoe deze hebben bijgedragen aan het verbeteren van het ontwerp.
	User Needs - Er is een user scenario geschreven dat aansluit bij de identiteit van de test persoon. Er is een duidelijk en volledig user scenario geschreven dat antwoord geeft op de 4 w-vragen: Who? What? How? en Why?
	Testen - Er is minimaal drie keer getest. Er is een verslaglegging van de tests gedaan waarin de test-opzet wordt behandeld en er is een duidelijke conclusie beschreven met do's en dont's over hoe je goed kan testen.
	Testresultaten - Aan de hand van de tests wordt duidelijk gemaakt hoe deze hebben bijgedragen aan het verbeteren van het ontwerp of hoe dit een volgende keer beter of anders kan.

Reflectie

Voor de meesterproef heb ik niet echt exclusive design kunnen toepassen. Dit is omdat we voor een brede doelgroep moesten gaan ontwerpen. Deze doelgroep was kinderen van 6 jaar. Doordat dit een best specifieke doelgroep is hebben we wel onderzoek gedaan wat voor deze exacte doelgroep het beste is. Ook hebben we getest met de doelgroep. Dit hebben we alleen een keer gedaan en niet drie keer. Uit deze test hebben we wel conclusies kunnen trekken en aanpassingen kunnen maken in ons design.