Bouwen - Jason2426/connect-your-tribe-squad-page GitHub Wiki

In de bouwfase werken alle teamleden een ander idee uit met Node en JSON.

Ik wil graag een aantal nieuwe technieken, animaties en nog meer leuke dingen zoals een Custom Dot Cursor, Text Animaties en Scroll Driven Animations toepassen als ik daar aan toe kom. Ik zal beginnen met het maken van de memberspage waar ieder squadlid op komt te staan en ik de filter functie zal implementeren. Mobile first altijd..

Waar ik op zal letten tijdens het bouwen van dit project is het geven van vaste waardes (widths, heights of paddings) aan elementen dit heb ik de vorige projecten alleen maar gedaan maar het is veel beter als ik dit niet doe of zo weinig mogelijk zodat de layout niet inflexibel word en ik veel breakpoints & styling moet gaan toevoegen om de layout weer netjes te krijgen.

Aan de hand van de browser inspector heb ik de one col layout (Mobiel) als eerst gemaakt en dit is de laatste tijd een gewoonte geworden. Daarna heb ik het scherm steeds wat breder gemaakt in de browser inspector en styling toegevoegd wanneer nodig aan de hand van breakpoints met de @media (min-width) query. Ik heb geprobeerd om zo weinig mogelijk vaste waardes zoals px's en em's te gebruiken in de plaats daarvan heb ik geprobeerd percentages als waarde te geven zodat de layout flexibel en toegankelijk blijft.

Data ophalen, filter allen de mensen van squad 4 en sorteer op naam A-Z.

// Maak een GET route voor de index
app.get('/', function (request, response) {
  // Haal alle personen uit de WHOIS API op
  fetchJson(apiUrl + '/person/?filter={"squad_id":"4"}&sort=name').then((apiData) => {
    // apiData bevat gegevens van alle personen uit SQUAD 4 en gesorteerd op naam
    // Je zou dat hier kunnen filteren, sorteren, of zelfs aanpassen, voordat je het doorgeeft aan de view

    // Render index.ejs uit de views map en geef de opgehaalde data mee als variabele, genaamd persons
    response.render('index', {persons: apiData.data, squads: squadData.data})
  })
})

Gefilterde en gesoorteerde data op het scherm laten zien met EJS

 <section class="students">
    <% persons.forEach(person=> { %>
      <article class="student">
        <img src="<% if (person.avatar) { %>
                <%= person.avatar %>
              <% } else { %>
                /images/profile-img.jpeg
          <% } %>" alt="Avatar of student" class="img-student">
        <p>
          <%= person.name %>
        <p>
      </article>
    <% }) %>
  </section>

Ik wilde voorgaande projecten deze nieuwe techniek al toepassen maar dat was mij toen helaas niet gelukt en dit project wel. Het is een simpele animatie zodat de tekst te voorschijn komt vanaf de linkerkant buiten het scherm, dit is natuurlijk niet de moeilijkste animatie om te maken maar ik vind het een goed begin. Ik begrijp het principe van Scroll Driven Animations nu veel beter als voorheen en hopelijk kan ik hier de volgende projecten meer vette dingen mee maken.

    animation: slide-in linear both;
    animation-timeline: view();
    animation-range: 0% 50%;

    @keyframes slide-in {

    0% {
        transform: translateX(-100%);
        /* Start position outside of the screen on the left */
        opacity: 0.1;
    }
    25% {
        transform: translateX(-75%);
        opacity: 0.25;
    }
    50% {
        transform: translateX(-50%);
        opacity: 0.5;
    }
    75% {
        transform: translateX(-25%);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

Binding, Functions and Control Flow Article

Custom properties in JS

CodePen - Scroll Driven Animation Example

Filter Rules

CSS layers