-
Notifications
You must be signed in to change notification settings - Fork 1
👀Sprint review
Net zoals sprint 2 en 3 is er een sprint review opgezet om even een momentje van reflectie te krijgen. Wij als studenten zijn natuurlijk nog geen professials op het gebied van frontend en design. Alle feedback die we krijgen kunnen wij weer integreren in onze website of het biedt als een reflectie op onszelf as beginnende frontenders. Tijdens deze sprint review zijn er verschillende onderwerpen aan bod gekomen. Zo stond toegankelijkheid en het testen van je website hoog op het lijstje.
Toegankelijkheid: We hebben een aantal positieve feedbackpunten teruggekregen van Lars vanuit onze opdrachtgever Funda. Zo vond hij het erg goed dat we veel de focus hadden gelegd op toegankelijkheid. Zo hadden we bijvoorbeeld nagedacht over hoe het kleurcontrast verbeterd kon worden in een nieuwe site. Wij waren er namelijk aan de hand van de toegankelijksheidstesten van de client website achter gekomen dat de kleuren binnen de site niet volledig toegankelijk waren. Zo had oranje bijvoorbeeld niet een goed contrast met wit en daarom hebben we deze kleur aangepast naar een secundaire kleur binnen het kleurpallet van de Funda living styleguide. Tijdens het presenteren kwamen we ineens op het onderwerp 'ouderen' en hoe bepaalde functies voor hen niet zo duidelijk zouden kunnen zijn. Zodoende hebben wij vanuit onszelf aangegeven dat het wellicht een goed idee is om een meer simplistisch design te bedenken, waarbij allerlei verschillende soorten mensen (denk hierbij bijvoorbeeld aan laaggeletterden, ouderen, zwakbegaafden, etc) kunnen navigeren op je website. Een manier om te testen of je website begaanbaar is, zou het wellicht een idee zijn om in je omgeving mensen je site te laten gebruiken (kwalitatief onderzoek). Doordat je het laat testen door echte mensen buiten het project vind je misschien bepaalde problemen die je zelf niet had herkend. Een goede afsluiter voor het kopje toegankelijkheid is dat Lars benadrukte dat je bij toegankelijk eigenlijk zo veel mogelijk naar de 100% wil gaan. Onderzoek dit dus goed. Ook belangrijk hierbij is dat je bijvoorbeeld kijkt naar hoe snel een pagina laadt. Dit omvat niet zozeer toegankelijkheid zelf, maar het is wel belangrijk om over na te denken. Om te onderzoeken hoelang het laden duurt kun je bij 'inspecteren' kijken bij prestaties.
Code: Lars gaf ook nog een paar algemene tips mee als het ging om code. Zo is het van belang dat je de code bijvoorbeeld zo kort mogelijk houdt (dry code). Dit is handig omdat je vervolgens beter en sneller in staat bent om fouten in je code te detecteren. Gebruik ook clean code en zorg dat je code gestructureerd is.
Algemene feedback: Een algemeen puntje vanuit Lars was dat hij het goed vond dat we de feedback van de vorige sprints hadden verwerkt in onze site. Ook vond hij het sterk van ons dat wij ons wilden differentieren van de daadwerkelijke Funda site. Hij zei dat we een eigen interpretatie hadden toegevoegd met betrekking tot het design. Het is goed om een creatief idee in te brengen, om zo nieuwe inzichten op te doen. Hij kreeg verder ook zelfs een klein kritiekpuntje van ons, namelijk dat een bepaalde logo van Funda niet de goede huisstijlkleuren bevat. Hier zal Lars naar gaan kijken voor de daadwerkelijke Funda site. Wij zijn er benieuwd naar hoe dit zal verlopen. Lars had tevens nog een vraag, namelijk: 'waarom zijn jullie begonnen met het schrijven van een volledig nieuwe code?' en wij gaven als antwoord dat we vanuit de opleiding aangespoord worden om steeds opnieuw te beginnen met coderen. Je leert namelijk steeds nieuwe dingen en inzichten en deze kun je dan implementeren in nieuwe, schone code.
Wij kregen de volgende vraag van een klasgenoot, namelijk: 'is er een stukje code waar je het meest trots op bent?' Dit is een erg interessante vraag, omdat je echt positief gaat nadenken over je code. In plaats van dat je misschien in een negatieve spiraal beland waarin je in gaat op de dingen die niet goed gaan. Wanneer je trots bent op iets wat je gemaakt hebt en je reflecteert hierop inspireer je jezelf misschien om weer verder te gaan op een positieve manier. Hieronder zal per persoon beschreven staan wat iedereen goed vond aan zijn of haar geschreven code.
Ik ben het meest trots op de code die ik gemaakt heb om een grid te maken. Uiteindelijk hebben we alles samengevoegd, maar deze code had ik wel gecommit. Ik vind een grid maken erg lastig en toen het lukte was ik erg tevreden.
display: grid;
grid-gap: .5rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
}
aside{
grid-area: aside;
background-color: black;
}
header{
grid-area: header;
}
main{
grid-area: main;
}
footer{
grid-area: footer;
}
Ik heb dus mijn eigen iteratie van de website gemaakt om een mockup te krijgen van mijn visie. Voor de styling en spacing.
Waar ik daarin het meest trots ben is de content section code, puur en alleen omdat ik het gebruik van custom properties dusdanig nu kan toepassen dat het genormaliseerd voor me is.
Code Snippet
:root {
--primary-color: #f7a100;
--text-color: #ffffff;
--background-color: #ffffff;
}
.content-section {
margin-top: 2em;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 50px 0;
background-color: var(--color);
color: var(--text-color);
}
Ik heb mijn eigen versie van de client website gemaakt , waarbij ik mijn eigen beeld even tot leven kon brengen. Hiervoor heb ik mezelf ook een uitdaging gegeven namelijk met javascript beginnen te werken. Hoewel ik nu al merk dat ik nog veel te leren heb ben ik wel trots op wat ik heb kunnen maken met de kennis die ik heb. Ik heb namelijk mijn eigen ''voeg toe'' en ''deel'' knop kunnen maken, wat ook een grote vraag was van onze opdrachtgever. Hier laat ik de code zien van de "voeg toe" knop:
function addFolder() {
var folderName = prompt("Enter folder name:");
if (folderName) {
var foldersContainer = document.getElementById('folders');
var newFolder = document.createElement('div');
newFolder.className = 'folder';
newFolder.textContent = folderName;
foldersContainer.appendChild(newFolder);
}
Wat een leuke vraag eigenlijk, zo heb ik er nog niet naar gekeken. Ik heb tijdens maken van deze site aan de header en de footer gewerkt en gekeken hoe ik deze op een goede manier toepas. Ikzelf vind het heel vet dat ik de header heb kunnen maken. Ik wil eigenlijk in de volgende sprint proberen een hamburger menu te maken door middel van Javascript. Hiervoor heb ik eigenlijk geen ervaring, maar ik sta er voor open om er meer van te leren. Ik vond het vooral lastig om de hyperlinks goed te plaatsen, maar na wat traantjes en moeite is dat eindelijk gelukt.
css .nav-list-right, .nav-list-left { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 2em; gap: 1.3em; }
.hamburger,
.nav-list-right,
.nav-list-left {
height: auto;
width: auto;
background: none;
color: var(--primairy-color-2);
text-align: center;
cursor: pointer;
font-size: 0.8em;
display: flex;
justify-content: center;
- misschien nog vragen of iemand issues kan geven??
Wat is onze persoonlijke ervaring van de sprint review? Wat haal je eruit voor jezelf (misschien feedback naar jezelf toe)?
Ik heb de sprint review erg positief ervaren. Wij hebben nieuwe elementen en onderwerpen gepresenteerd waarna we eigenlijk de conformatie kregen van Lars dat we op het goede pad zaten. Ik heb onder andere veel ingebracht met betrekking tot het design, dus om te horen dat wat ik heb gemaakt een goede interpretatie is van het maken van de nieuwe site is erg fijn. Ik weet dan dat wat ik maak redelijk goed is en zodoende kan ik verder werken.
Tijdens onze recente sprint review hebben we de resultaten van de laatste drie iteraties van zowel de website als onze living styleguide gepresenteerd.
-
Kleurcontrast en Design:
- Positieve reacties op de keuze voor een afwijkend kleurenschema (Bruin Blauw) in plaats van het standaard oranje-wit.
- Het gebruik van blauw in het logo bleek niet consistent over de hele website. Dit is geconstateerd door Riley en mijzelf. We hebben opgemerkt dat andere blauwtinten op de website niet overeenkomen. Hierover zal contact worden opgenomen met de opdrachtgevers om te bepalen of dit een bewuste keuze is.
-
Coherentie met Funda en Afwerking:
- De living styleguide bevat inhoudelijk vergelijkbare informatie als die van Funda.
- Echter, er is feedback gegeven dat het design van de living styleguide nog iets meer aandacht kan krijgen voor een betere afwerking.
In het algemeen ben ik positief ontvangen tijdens deze sprint review en ik blijf werken aan verbeteringen. Feedback wordt gewaardeerd en geïntegreerd om ons project naar een hoger niveau te tillen.
Ik vond de samenwerking over het algemeen zeer goed verlopen, er moest meer communicatie zijn op bepaalde vlakken, maar qua werk tempo en niveau ben ik zeer tevreden. We luisteren naar elkaar, we zijn niet bang om een mening te delen en ten slotte, wij streven altijd naar het beste.
We ontvingen positieve feedback, waarbij opviel dat de keuze voor het Bruin Blauw kleurcontrast in plaats van het standaard oranje wit goed ontvangen is. Het is prettig te constateren dat we voor een ander design zijn gegaan.
Desondanks kwamen ik en Jasper tot de ontdekking dat het blauw in het logo niet consistent wordt toegepast op de rest van de website. Er lijkt een verschil te zijn in de gebruikte blauwtinten.
We zullen dit nog met onze opdrachtgevers bespreken om te verifiëren of mijn observatie klopt. Hoewel de informatie in de living styleguide overeenkomt met die van funda, valt er nog te overwegen of het design nog verder verfijnd kan worden.
Ik ben blij met hoe de sprint review is verlopen. Ik had voor de gemakkelijkheid ook een miro bord gemaakt, zodat je al het werk kan zien wat we hebben gemaakt. Het is wel belangrijk bij de volgende sprint misschien meer feedback van buitenaf komt en er naar een gebruiker word gekeken die het kan hebben over de flow van de site. Daarnaast vind ik het goed als de issues van de vorige sprints word geanalyseerd.
- Meer feedback vragen van de omgeving
- Wat vind jij van de interface?
- Vind je dat de website egaal eruitziet?
- En natuurlijk om issues vragen, om zo een clean code te krijgen
- Neem alle feedback mee van alle sprints en kijk of deze van toepassing zijn voor je huidige code
- Zet het in je project board en geef ze een duidelijk label
- Wanneer nodig, omschrijf ze in je wiki
- Maak je eigen idee van de user stories, je hoeft niet te blijven hangen in de huidige interface.
- Verdiep meer in clean code en pas de dry methode goed toe
Gemaakt door: @Samarafelladina, @Saschavanvliet, @Naddybs, @rileyesther @Trep