Week 2 - TygoWolven/Sprint7-Squadpage GitHub Wiki

Analyseren

Om dit project te starten, hebben we met de groep (Rukiya, Seijno en ik) een snelle analyse gedaan van wat er moet gebeuren. We hebben allemaal de instructies doorgelezen van de opdracht en op basis daarvan een planning gemaakt voor deze week op een whiteboard. De planning gaat als volgt:

Ontwerpen

Om wat ideeën te krijgen voor onze Squadpage heeft ieder teamlid 6 schetsen gemaakt. Mijn schetsen heb ik gemaakt in Figma, en zijn hier onder te zien. In mijn geval zijn het meer ideeën dan daadwerkelijk schetsen, omdat met deze stap nog niet duidelijk hoeft te zijn hoe de gehele pagina er uit hoeft te zien.

Uit deze 6 ideeën heb ik besloten geen keuze te maken, omdat mij inneens een veel beter idee te binnen schoot. Dit noem ik mijn bonus idee, de hele pagina is donker en je maakt gebruik van een zaklamp als cursor om te schijnen op de content die je wilt bekijken. Dit idee leek mij wel grappig omdat dit iets geheimzinnigs heeft, waardoor je wilt gaan onderzoeken. Dat sluit mooi aan op een Squadpage, omdat je op een Squadpage wilt onderzoeken wie er allemaal in de Squad zitten.

Bouwen

Nu ik mijn idee heb gekozen begin ik met het maken van de header, waar ik de filters in ga verwerken. Het idee is om een enkele knop te maken om te filteren, en zodra je op de knop klikt er een compleet filtermenu in je scherm komt.

Hierboven is het resultaat te zien van wat ik heb gemaakt. Ik zal hier van ook nog even de code laten zien, zodat het duidelijk is hoe ik dit heb gemaakt. Als eerste heb ik hier de CSS voor de button waarmee je de filters kunt openen. Deze heb ik gepositioneerd aan de hand van 'fixed' zodat deze altijd boven in het scherm blijft staan. Verder heb ik een aantal properties meegegeven om de knop mooi te maken. Denk hierbij aan een blur als achtergrond, met daarbij een border en een box-shadow.

#menu-button {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;

    margin: 0 auto;
    padding: 8px 16px;
    width: fit-content;
    z-index: 100;

    color: white;
    font-weight: 900;
    text-transform: uppercase;

    backdrop-filter: blur(12px);
    background: rgba(5, 5, 5, 0.4);
    border: var(--border) rgba(250, 250, 250, 0.2);
    box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.3);
    border-radius: var(--round);
}

Nu de basis van de pagina staat word het tijd om te beginnen met de pagina zelf. Zodra je op de site terecht komt, krijg je eerst een startscherm te zien. Hiermee moet je je lampje aan gaan zetten om de pagina te kunnen bekijken. De HTML-code van de startpagina is hier onder te vinden.

<div class="start-page">
  <h2 id="start-page-title">Hey! Ik zie niks!<br>Doe het licht aan!</h2>
  <div class="switch">
    <div class="button">
      <div class="button-before">
      </div>
    </div>
  </div>
</div>

In deze code is te zien dat ik gebruik maak van een div om de main-content te bedekken. Op deze div staat wat tekst en een button, zodra je op deze button klikt zal er een animatie volgen waarbij de div verdwijnt, en de main-content in beeld komt. Op de main-content is dan een lichtbron te zien. Dit is je cursor waarmee je kunt schijnen op alle beschikbare content, om deze beter te kunnen zien. In de onderstaande afbeeldingen is het resultaat.

Nu is deze versie van de pagina klaar. En als kers op de taart nog even een icoontje van de lichtknop bij de titel! ;)

Testen

De grootste tester van deze pagina ben ik zelf, tijdens het maken van deze versie ben ik na elke paar regels nieuwe code gaan testen of dit werkte, en of dit het gewenste resultaat had. Was dit niet zo? Dan ging ik nieuwe code schrijven en opnieuw testen... testen.. en nog eens testen.

Integreren

Om deze pagina zichtbaar te krijgen moet ik via de Terminal van Visual Studio Code een 'npm start' uitvoeren. Zo open ik lokaal een pagina waarop mijn werk te zien is. Deze moet ik refreshen na elke aanpassing in de code.

Code Review

Bij deze Code Review kreeg maar 1 teamlid feedback op zijn code. In dit geval was dat Seijno, omdat zijn gemaakte werk beter te bespreken was dan dat van mij. Omdat ik al een completere pagina had gemaakt vergeleken met de rest.

Feedback Seijno

De squadnamen wilden niet inrenderen op de pagina. Dit kwam vanwege een verkeerde root in het 'server.js' bestand. Deze heeft Seijno moeten gaan koppelen aan de hand van de 'squad.data', in plaats van de 'person.data'.

Zodra hij een squad wilt openen om alle leerlingen binnen deze squad te bekijken, verdwijnt alle styling van de pagina. Deze wilt hij graag includen over elke pagina, maar zodra hij dat probeert, breekt de pagina en werkt niks meer. Hier was op het moment geen oplossing voor gevonden, Justus zou later even komen kijken bij Seijno.