Index
Deze sprint begon ik eerst met het doorspitten van komende weken wat ik kond verwachten. Vervolgens kreeg ik een workshop over het inventariseren van de DLC. Dit deden we klassikaal in een Miro omgeving en benoemden we zoveel mogelijk principes en conventies die we al onder de knie hadden. Dit gaf voor mij weer een goed beeld van alle convensies die ik kan gebruiken per fase.
Voor de opdrachtgever heb ik ook een debriefing opgezet en opgestuurd via de mail. Van ons team hadden we individueel een debriefing opgesteld en de mijne had gewonnen, die hebben we ook opgestuurd.
Op dinsdag 6 juni ontving ik de bestanden voor de API. Omdat er geen API live staat, zal ik dit lokaal moeten opzetten. Ook kreeg ik een proefabonnement voor De Correspondent om onderzoek te doen naar de app. Ik fotografeerde de high fidelity flow van de app en zette dat in een Figma ontwerp.
Hierop had ik mijn eigen schets gemaakt:
De week daarop, maandag 12 juni kreeg ik een workshop over creative coding. We kregen deze workshop na aanleiding van het tweedaags congres CSS Day. Laten we websites weer cool maken was het idee. We kregen de opdracht om eerst collages te maken en daaruit diverse schetsen te maken.
De eerste schetsen waren bedoelt voor een horrific carousel die ook vrij psychidelisch eruit zou zien.
Het tweede concept was een cheesy loader die niet draaide maar leek te druipen.
Tot slot had ik een loading screen geschetst in een risograph-achtige stijl. Het grappige was dat ik een tussendoortje had boven m'n vel papier waarmee ik van de kruimels het ruis-effect maakte.
De website heb ik gebouwd met twee pagina's: de overzichtspagina en de detailpagina.
De overzichtspagina is verbonden met de algemene .json API die ik eerder heb geupload. Hierdoor kon ik in node een externe link toevoegen om de data op te halen. De variabel noemde ik collectionJson
const collectionsJson = "https://raw.githubusercontent.com/Stefan-Espant/de-correspondent-sprint-12-proof-of-concept/main/course/collections.json" Visueel heb ik met behulp van het article element alle podcasts weten in te laden.
Dit maakte ik mogelijk om er een array omheen te zetten.
<!-- Genereert alle shows -->
<% if (data && data.length) { %> <%
data.forEach(collection => { %>
<article>
[...]
</article>
<% }); %> <% } %>
Ook pastte ik een LottieFiles animatie toe om een goeie eerste indruk te krijgen en zo de zero state te optimaliseren.
Voor de browsers die geen lottie-player ondersteunen heb ik een stilstaand frame in een svg geplaatst om toch een beeld te kunnen tonen.
<div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player>
[...]
</lottie-player>
<svg>
</svg>
</div>
Op de detailpagina had ik een functie toegvoegd die een background-color dynamisch en afhankelijk van de show op de body plaatst.
<body style="background-color: #<%= item.attributes.style.backgroundColor %>;">Net als bij de overzichtspagina had ik hier ook een overzicht gebouwd van afleveringen in een array.
<section class="collection-episodes">
<div>
<h1>Alle afleveringen</h1>
</div>
<% if (itemData && itemData.data &&
itemData.data.length) { %>
<ul>
<% itemData.data.forEach(item => { %>
<li>
<span>
<h2><%= item.attributes.title %></h2>
</span>
<button type="button" title="afspelen">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-player-play"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
stroke="none"
d="M0 0h24v24H0z"
fill="none"
></path>
<path d="M7 4v16l13 -8z"></path>
</svg>
</button>
</li>
<% }) %>
</ul>
<% } %>
</section>
Voor het integreren heb ik gebruik gemaakt van render.com om mijn project live te zetten.
In de laatste week lukte het mij niet om te pushen naar Github. Ik had daarvoor had in ons Discord kanaal een vraag te sturen of sommige mensen een oplossing hadden.
Uiteindelijk heb ik de leertaak opnieuw moeten forken en de boel opnieuw moeten inrichten. Zo had ik de wiki en read.me overgebracht. Issues geplaatst en gekoppeld aan het projectboard. Het pushen werkten vanaf nu weer.
Ik kreeg in eerste instantie een kleine paniek van hoe nu verder. Ook vanwege het tijdsdruk en de radeloosheid had ik toen besloten, naar mijn mening wel een radicale beslissing, om de repository opnieuw te forken. Maar achteraf gezien sta ik wel achter mijn keuze en heb ik er geen spijt van. Mochten anderen hier in de toekomst tegenaan lopen heb ik de kennis hoe dit opgelost kan worden.
Voor het testen heb ik gebruik gemaakt van Pagespeed Insights. Als eerste testte ik de overzichtspagina. Daar kreeg ik de volgende resultaten uit:
Dit was het resultaat op mobiel. Uitstekende score over het algemeen. Wat ligt er dwars op de prestaties?
Desktop daarin tegen had op alle vlakken een goede score.
Ik had mijn site getest op een mobiel van de HvA. Deze bleef verrassend goed overeind.
Dit gold vooral voor de homepage, de detailpagina had zo z'n visuele afwijkingen.
Zo was de afbeelding te breed voor mobiel, maar dit loste ik makkelijk op om de width: 16em te maken.
Naast het testen op het low-key device, deed ik ook verschillende brillen op om te kijken hoe goed en hoe ver de site overeind bleef staan.
De bril met een omgekeerde Retinitis Pigmentosa:
De bril met een geel filter:
De bril met Macula degeneratie:
Overzicht van alle brillen die ik op heb gezet.
