S12 W3
maandag 19 juni 2023
Vandaag kregen we nog een college over refactoring, het opschonen van de code, comments schrijven, testen en eventueel nog nieuwe features toevoegen.
Zo was ik begonnen met het maken een view-transition van de overzichtspagina naar de detailpagina. Dit is een nieuwe feature en enkel beschikbaar in een aantal browsers. Daarom had ik het ook verpakt in een supports media query.
/* View transition */
@supports (view-transition-name) {
picture {
view-transition-name: show-image;
contain: layout;
}
}
::view-transition-group(show-image) {
animation-duration: 10s;
}Het effect werkt alleen nog niet naar mijn mening.
Na vrijdag was het mij ook gelukt om een dynamische achtergrondkleur toe te voegen aan de detailpagina.
<body style="background-color: #<%= item.attributes.style.backgroundColor %>;">
Ik was van mening dat de overzichtspagina puur functioneel was. Hoe kon ik deze pagina nog beter decoreren. Toen had ik het antwoord: een LottieFiles animatie. Ik vond een esthetische visual en paste deze toe in een section boven de array van shows.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
src="https://assets9.lottiefiles.com/packages/lf20_JjpNLdaKYX.json"
background="transparent"
speed="1"
loop
autoplay
width="400"
height="400"
></lottie-player>
Op gegeven moment 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.
dinsdag 20 juni 2023
Vandaag heb ik gebouwd aan een enhancement om de links naar de detail- en overzichtspagina een geluidseffect toe te voegen om zo de User experience te verbeteren. Dit deed ik met behulp van client-side javascript.
De onderstaande code maakt het mogelijk dat alle links het geluidseffect afspelen die door verwijst naar de detailpagina. Dit maakte ik mogelijk met een array.
const interfaceSound = new Audio("./assets/interface-124464.mp3");
const interfaceClicks = document.querySelectorAll(".default-link");
interfaceClicks.forEach((interfaceClick) => {
interfaceClick.addEventListener("click", (event) => {
event.preventDefault(); // Voorkomt dat de standaard linkactie wordt uitgevoerd
interfaceSound.play();
setTimeout(() => {
window.location.href = event.target.href; // Doorsturen naar de volgende pagina
}, 800); // Wacht 0.8 seconden voordat de doorstuuring plaatsvindt
});
});
Deze onderstaande code paste een effect toe op de home link.
const interfaceBackSound = new Audio("../assets/interface-124476.mp3");
const interfaceBackClick = document.querySelector(".link-retro");
interfaceBackClick.addEventListener("click", (event) => {
interfaceBackSound.play();
setTimeout(() => {
window.location.href = event.target.href; // Doorsturen naar de volgende pagina
}, 600); // Wacht 0.6 seconden voordat de doorstuuring plaatsvindt
});
Neem een kijkje en probeer het zelf ook uit: https://stefan-de-correspondent-sprint-12.onrender.com/
Ik werd vanmiddag door Danique benaderd over een error dat een variabel gedefineerd kon worden.
Ik ontdekte dat cyclic de site niet werkte maar ook niet aangaf waar het aan lag. Welke regel het was werd niet duidelijk gemaakt.
Ik vroeg naar de link, alleen veel wijzer werd ik er niet van. Tot slot besloot ik er morgen fysiek naar mee te kijken. Dat is makkelijk dan via teams.
woensdag 21 juni 2023
Vandaag was ik verder gegaan met het inpakken van mijn project. Zo ging ik verder met documenteren en maakte ik nog een nieuwe feature:
Ik had van de animatie een frozen-frame gepakt en zette deze op de section. Ook maakte ik hiervoor een enhancement wanneer javascript uit staat hij de svg laat zien en zodra de client-side javascript wel geactiveerd is die de lottie-player toont.
Daarvoor gebruikte ik css om de stijling aan te geven:
lottie-player {
display: none;
}
.javascriptEnabled lottie-player {
display: block;
}
.javascriptEnabled .lottie-placeholder {
display: none;
}Client-side javascript gebruikte ik een regel die de .javascriptEnabled op het html element plaatst:
document.documentElement.classList.add("javascriptEnabled");
Vanmiddag ging ik bij Roelie langs om te kijken hoe haar project gaat. Het bleek dat ze aan het testen was en dat haar nieuwe [popover] niet overal op werkte. Ik raadde haar aan om gebruik te maken van de @supports query om zo de core-functionality in stand te houden.
donderdag 22 juni 2023
vrijdag 23 juni 2023