Week 3
We zijn vandaag begonnen met een standup. Daarin hebben we ons werk laten zien en besproken wat we gaan doen deze komende dagen. Bij de 'own-playlist' section hadden we besproken dat de header-styling aangepast moet worden om het meer pleasurable te maken.
De 'own-playlist' header had ik de styling veranderd naar neon-styling ook heb ik om het meer pleasurable te maken bij de bedienknoppen een hover/click interactie toegevoegd. De achtergrond wordt donkerder als je clickt/hovered, hierdoor is het voor de gebruiker duidelijk dat ze gebruik maken van de hover.
Ik heb het carousel gebouwd via de principes van hierachy of users delight, ik ben begonnen door het eerst functioneel te maken, dit heb ik gedaan door in de eerste laag en 2e laag (html) de buttons op hidden te zetten in html en het reliable te maken. Ik heb het usable gemaakt door de buttons, hierdoor kan je het bedienen door op de buttons te klikken. Om het pleasurable te maken heb ik scrollbehavior op smooth gezet en heb ik de buttons een hover gegeven zodat het duidelijk is voor de gebruiker dat ze de buttons gebruiken.
In de JS heb ik gezorgd dat buttons bedienbaar zijn, ook heb ik een click interactie (achtergrond kleur veranderd) op de buttons toegevoegd zodat het duidelijk voor de gebruiker is dat ze de button gebruiken.
prevBTN.addEventListener('mousedown', () => {
prevBTN.classList.add('button-background');
});
prevBTN.addEventListener('mouseup', () => {
setTimeout(() => {
prevBTN.classList.remove('active');
}, delay);
});
prevBTN.addEventListener('mouseleave', () => {
// This ensures the class is removed if the mouse leaves the button while it's pressed
setTimeout(() => {
prevBTN.classList.remove('button-background');
}, delay);
});
// hover & click event button
nextBTN.addEventListener('mousedown', () => {
nextBTN.classList.add('button-background');
});
nextBTN.addEventListener('mouseup', () => {
setTimeout(() => {
nextBTN.classList.remove('active');
}, delay);
});
nextBTN.addEventListener('mouseleave', () => {
// This ensures the class is removed if the mouse leaves the button while it's pressed
setTimeout(() => {
nextBTN.classList.remove('button-background');
}, delay);
});
Op woensdag heb ik een aantal kleine aanpassingen gemaakt aan het carousel en heb ik de main-branch live-gezet.
https://github.com/lisavanmansom/pleasurable-ui/blob/main/README.md
Omdat we via branches werken hebben we op woensdag al ons werk gemerged. We hebben uiteindelijk gekozen voor de homepage van mij met daarin de muis die Hadil heeft geanimeerd, ook heeft Hadil een pleasurable achtergrond (kleur veranderd per 12uur) in de homepage gemerged. Verder heb ik de 'own playlist' section geredesign en gemerged.
https://github.com/lisavanmansom/pleasurable-ui/pulls?q=is%3Apr+is%3Aclosed
https://github.com/lisavanmansom/pleasurable-ui/branches
Op donderdag heb ik de site getest op toegankelijkheid en performance. De score van de performance test is 37, we hebben deze sprint geen rekening gehouden met de performance en verschillende interacties toegevoegd, dit is te zien in de score van de site. Door een aantal aanpassingen is de toegankelijkheid ook daarbeneden gegaan sinds de laatste test, op dit moment is de score 84.
Wat wilden jullie opleveren?
We wilden een werkende responsive website met een pleasurable homepage en een pleasurable lessons-page met een clientside fetch. Verder wilden we ook PE als default zodat de website voor iedereen toegankelijk is. Daarnaast hadden we besproken in de laatste week dat we 'all-playlist'-page wilden opleveren.
Hoe ver zijn jullie gekomen?
We hebben een pleasurable homepage met een animatie en een achtergrond die per 12 uur veranderd. Op de lessons-page hebben we een overzicht voor 'own playlist' waar je ook je eigen playlist kan toevoegen, verder is er ook overzicht voor de 'stories' en kan je suggested- & liked playlist. Als laatste hadden we 2 pagina's gemaakt 'all-stories' en 'all-playlist', op deze pagina's kan je een duidelijk overzicht zien van de playlist/stories
Wat moet er nog worden gedaan?
In de site zijn verschillende stijlen waardoor het niet consistent is, hier moeten nog een aantal veranderingen in worden gemaakt zodat het 1 geheel is. Verder kan het meer pleasurable en gebruiksvriendelijk (performance) worden gemaakt.
Hoe ging de samenwerking? Wat ging goed? Wat kon beter?
De samenwerking tussen mij en Hadil ging goed, we hadden duidelijke communicatie en we konden goed feedback aan elkaar geven. Met Misah en Patrick ging de samenwerking minder, dit kwam omdat de communicatie erg stroef ging. Omdat ze vaker afwezig waren was het lastig om samen te werken en te volgen waar ze mee bezig waren. Ik had bij hun het idee dat ze niet heel veel toevoeging aan het team gaven door de stroeve communicatie. Verder hebben we ook niet heel veel feedback aan elkaar kunnen geven.
Naar mijn mening kon de communicatie veel beter, omdat het vaak erg onduidelijk ging. Ook hadden we afspraken gemaakt om een standup te doen op maandag, woensdag en vrijdag, maar door de afwezigheid had dat niet heel veel waarde.