Reflectie - ROEL2407/cmda-smoelenboek Wiki

Bij mijn reflectie zal ik gaan kijken naar de rubrics van de vakken van de minor die u hier kunt vinden. Deze vakken kwamen voor deze eindopdracht en hier heb ik veel uit geleerd. Met deze reflectie wil ik dus kijken of ik die dingen wel toegepast heb.

CSS To The Rescue

Experimenteren met nieuwe CSS-technieken Ik heb een beetje geëxperimenteerd met voor mij nieuwe CSS-technieken. Ik heb namelijk gewerkt pointer events, iets waar ik wel de naam van wist maar geen idee wat dit deed. Ik heb dit gebruikt om door de wrapper van het toetsenbord te klikken, zodat deze kon sluiten.

#keyboardWrapper {
  position: fixed;
  width: 100vw;
  bottom: 4em;
  z-index: 11;
  pointer-events: none;
}

#keyboard {
  max-width: 33%;
  margin: 0em 5em;
  pointer-events: initial;
  color: black;
}

Je resultaat is 1 geheel Naar mijn mening klopt dit, dit komt misschien alleen minder door mij en meer de huisstijl van CMD die we aan moesten houden. Waar kleine aanpassingen nodig waren, heb ik ook de huisstijl meegenomen in het idee.

laten zien dat je de mogelijkheden en kracht van CSS begrijpt Ik denk dat ik dit goed gedaan heb. Er waren niet hele speciale HTML tags die ik heb moeten gebruiken maar qua CSS zijn hier zeker wel punten in zoals display grid gebruiken op het overzicht en dan in de pop-up weer display flex.

Je gebruikt alleen vanilla CSS en HTML In mijn ogen valt dit doel een beetje buiten de scope van het huidige product. Ik heb niet overbodig JavaScript gebruikt maar alleen vanilla CSS en HTML is nu niet van toepassing.

Web App From Scratch

User Interface - you design, build and test the user interface by applying interface design principles Dit ging naar mijn mening redelijk. Door middel van het testen kwamen er best veel bugs uit en niet elke keer gelijk. Het builden ging dus niet helemaal goed.

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 Ik heb, naar mijn mening, redelijk schone en consistente code geschreven. De states hadden we helaas niet heel veel tijd voor maar er zitten wel sommige in zoals de empty state.

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 Dit ging goed, mede doordat ik al vaker binnen en buiten de minor gewerkt heb met API's. Voor de pop-up heb ik bijvoorbeeld de volgende code gebruikt om de data op het scherm te krijgen:

          <div class="pop-up hidden">
            <h2>
              <%- ctx.prismicH.asText(teacher.data.naam) %> <%-
              ctx.prismicH.asText(teacher.data.achternaam) %>
            </h2>
            <div class="popupWrapper">
              <img
                class="teacher"
                alt="foto van <%- ctx.prismicH.asText(teacher.data.naam) %> <%-
                ctx.prismicH.asText(teacher.data.achternaam) %>"
                <% if(!teacher.data.foto.url){%>
                  src="/images/no-img.jpg" 
                <% } else { %>
                  src="<%- teacher.data.foto.url %>"
                <% } %>  
              />
              <div id="info">
                <% if(teacher.data.email.length > 0){ %>
                <h3>Email</h3>
                <p><%- teacher.data.email[0].text -%><% } %></p>

                <% if(teacher.data.telefoon_nummer.length > 0){ %>
                <h3>Beschrijving</h3>
                <p><%- teacher.data.telefoon_nummer[0].text -%><% } %></p>

                <% if(teacher.data.dagen_aanwezig.length > 0){ %>
                <h3>Beschikbaar op</h3>
                <p><%- teacher.data.dagen_aanwezig[0].text -%><% } %></p>

                <% if(teacher.id){ %>
                <a class="moreInfo" href="/detail/<%- teacher.id -%>"
                  >Meer info<% } %></a
                >
              </div>
            </div>
            <button class="close">
              <div></div>
              <div></div>
              <p>Sluiten</p>
            </button>
          </div>

Progresssive Web Apps

Serverside rendering De data in het prototype wordt server side gerenderd. Daarom dat ik denk dat dit ook goed is gegaan en zie ik hier geen problemen. Het enige dat nog iets anders is, is als een docent geen afbeelding ingevoerd heeft. Dit wordt gecheckt in de view.

Service Worker Ik heb geen service worker geimplementeerd in het prototype. Dit had kunnen gebeuren bij de create pagina maar door problemen met het CMS is die ook niet gemaakt en was er geen andere optie voor een service worker in mijn ogen.

Critical render path Voor het critical render path hebben wij nog de frames van de docenten geminified. Dit zodat de grid pagina/ home pagina sneller laadde. Dit was niet heel moeilijk en zo gedaan. Ook hebben is de scroll via de omhoog/omlaag buttons zo gecodeerd dat deze smooth scrollt.

Browser Technologies

Student kan de core functionaliteit van een use case doorgronden Naar mijn mening ging dit ook goed, een use case is alleen niet perfect uitgewerkt en dat is een docent die zijn of haar account aan kan maken. Dit kan wel maar moet in Prismic zelf.

Toegankelijkheid: De user experience is goed Ik denk dat hier ook goed rekening mee is gehouden. Wij hebben erg gekeken naar mensen in een rolstoel of kleinere mensen die niet bij de bovenkant van het scherm kunnen.

Feature detection Omdat het prototype alleen op een groot scherm gaat draaien in de medialounge, heb ik mij niet bezig gehouden met feature detection.

Real time web

Ik heb eigenlijk alles in de rubric van real time web niet toegepast. Dit prototype zal op 1 scherm gaan draaien en niet meerdere. Daarnaast vallen sockets niet binnen deze use case.

Human Centered Design

Design Principles

Ik denk zelf dat dit wel redelijk ging, we hebben conventions zoals de searchbar bovenin genegeerd en echt gekeken naar wat een kleiner persoon nodig had. Ook hebben we rekening gehouden met blinde mensen.

Testen Er is minstens elke week getest met de opdrachtgever. Daarnaast hebben we ook een paar testen uitgevoerd met studenten en om hun mening gevraagd voor validatie. Dit had eigenlijk eerder al gemoeten om een beeld van de doelgroep te krijgen.

⚠️ **GitHub.com Fallback** ⚠️