1. 📖Analyseren

Aanpak leertaak

Wat is nu de behoefte van Funda? Wat wordt er van ons verwacht? We gaan zoveel mogelijk informatie vergaren over hoe en wat.

Onze user-stories

Als gebruiker wil je graag verschillende dingen terugzien die de functie van een pagina juist naar voren brengen. In deze sprint werken we weer met dezelfde user-stories als de vorige sprints en we willen deze dus integreren in de nieuwe website.

• Je wilt als gebruiker graag al je opgeslagen huizen terugvinden en daarover een algemene indruk krijgen welke huizen je het meest gepast vindt.
• Je wilt duidelijk alle belangrijke details kunnen zien die bij het huis horen. Denk aan specificaties zoals de omtrek, aantal kamers, de prijs en meer.
• Als gebruiker wil jij je eigen waardering geven aan een huis om zo meer controle te hebben over de kwaliteit en waarde van het huis die persoonlijk meer waardering hebben.
• Je wilt als gebruiker eigen lijsten van huizen kunnen creëren en het kunnen delen met anderen om samen (asynchroon) huizen te kiezen die in de smaak vallen.

Wat valt er op aan deze user stories?

• Gebruikers moeten zich kunnen verdiepen in bepaalde informatie over een woning. denk aan:
  • Het vermogen
  • De straat
  • Het bouwjaar
  • Foto's van de woning
  • De makelaar die het allemaal regelt
  • De voorzieningen. Denk aan hoeveelheid kamer, of er een tuin is en of dieren zijn toegestaan.
• Gebruikers moeten een beoordeling kunnen geven. denk aan:
  • Het een rating geven
  • Notities kunnen invoegen voor eventuele opmerkingen
  • Een algemene indruk kunnen creeeren over de woning
• De gebruiker wil de huizen kunnen opslaan om zo een algemene impressie te krijgen van alle huizen
  • Er moet dus een lijst zijn die al deze huizen weergeeft.
  • Je moet ze makkelijk kunnen filteren en verwijderen.
• Een gebruiker wilt een lijst kunnen maken en deze kunnen delen met mensen. Daarnaast moet dit op asychone toon kunnen, dus je hoeft niet allemaal op hetzelfde moment actief hier mee bezig te zijn
  • Je wilt van de groep eigenlijk een algemene rating hebben van een woning om zo het goed af te kunnen stemmen
    • Dan kan je bijvoorbeeld denken aan een gemiddelde weergeven van de sterren die zijn gegeven van de gebruikers, om zo in een oog opslag te kunnen zien wat iedereen van de woning vindt.
  • Je wilt gemakkelijk een lijst kunnen delen met andere gebruikers
    • Denk bijvoorbeeld aan een link die gemakkelijk mensen toelaat. Denk bijvoorbeeld aan applicaties als google en onedrive, waar je gemakkelijk een link kan aanmaken om andere gebruikers uit te nodigen
    • Ook kan er gekeken worden naar Qr-codes, uitnodigings mail, etc.

Hoe gaan wij de user stories aanpakken?

Wij hebben vooral de focus gelegd op het integreren van pagina waarin het mogelijk is om samen lijsten aan te maken. Zo hoef je dus bepaalde huizen niet meer naar elkaar door te sturen, maar ze staan in een gezamenlijk 'mapje'. We willen dus eigenlijk een soort gelijk idee als Pinterest, waar alles gemakkelijk wordt opgeslagen in borden. Wij willen een soort gelijk idee creeeren waarbij je dus lijsten heb die je met andere gebruikers kan delen. Echter krijg je hier ook de optie om de woningen een (algemene) rating te geven.

Feedback van de vorige sprint

Op 12 oktober 2023 hebben we onze sprint review gehouden bij het Funda hoofdkantoor. We kregen een warm welkom met gratis croissantjes, fruit en drinken. Dit is natuurlijk al een fijne start. Het kantoor was goed te bereiken, want deze lag dicht bij het Centraal Station. Het was een erg mooie werkomgeving (we kregen op het einde ook nog een uitgebreide rondleiding) en er waren zelfs leerlingen die geinspireerd raakten om wellicht in de toekomst aan de slag te gaan bij Funda. Toen wij allemaal ons plekje hadden gevonden was het tijd voor de sprint review. Tijdens een sprint review kan je goed laten zien wat jij hebt gemaakt, maar het is ook een fijn moment om feedback te krijgen op je werk. Zo weet je een beetje of je op de goede weg zit. Voor onze eerste sprint review hebben wij een presentatie gemaakt waarin wij ons proces hebben laten zien, de website hebben getoond en tevens hebben we uitgelegd hoe we de opdracht hebben geinterpreteerd aan de hand van de gekozen user-stories. Hiervoor hebben wij waardevolle feedback ontvangen en de belangrijke punten staan hieronder.

Feedback opdrachtgever

• Pagina-titel: Het voorstel is om de pagina de naam "Bewaarde huizen" te geven, wat de meest prominente titel van de website zou moeten zijn, met gebruik van h1 of h2, in plaats van "Mijn Lijsten".

• Navigatie: Er is discussie geweest over de locatie van de navigatie, waarbij werd gesuggereerd om deze aan één kant te plaatsen, ofwel links of rechts, maar niet aan beide zijden.

• Iconen voor "Mijn Huis" en "Profiel": Er werd voorgesteld om pictogrammen toe te voegen voor "Mijn Huis" en "Profiel" en deze naast de bestaande 3-balk navigatielijst te plaatsen.

• Notificaties: Het idee van notificaties werd besproken, met name voor gebeurtenissen zoals het maken van huizen, het bereiken van de lijstlimiet en het verwijderen van huizen. Dit zou de gebruikerservaring kunnen verbeteren.

• Een maximaal aantal lijsten aanmaken: Er werd ook aan ons voorgesteld om goed na te denken over hoeveel huizen er per persoon aangemaakt kan worden. we moesten ons daarbij voorstellen dat stel iemand 100 lijsten aanmaakt dat dat heel zwaar en duur kan zijn voor de database.

• Breadcrums: in principe hebben we heel goed aangegeven op welke pagina de gebruiker is als je op de "bewaarde huizen" pagina zijn. Alleen wat nog niet duidelijk te zien is , is hoe de gebruiker daar is gekomen dat moeten we meer laten zien.

• Lijsten verwijderen: we hebben nog geen functie bedacht en gebouwd waarbij als mensen klaar zijn met hun laast hoe ze die dan kunnen verwijderen. daar moeten we nog wat op bedenken.

• Errors tijdens de lijst aanmaken: We moesten ook gaan nadenken over gevallen waarbij de gebruiker misschien wel de wifi connectie verliest tijden het aanmaken van een lijst. Wat gebeurd er dan met die lijst? Kan de gebruiker die terughalen? Daar moeten we ook aan denk.

• Manier van presenteren: Naast de code is er ook input gegeven op onze manier van presenteren. We kregen het advies om de volgende keer met 2 a 3 mensen een presentatie te geven. Aangezien niet iedereen aan het word is gekomen en het overbodig is om met een grote groep dit te verwoorden.

Dit zijn de belangrijkste punten die tijdens de sprint review naar voren kwamen en die we zullen overwegen voor verdere ontwikkeling en verbetering van de website.

Code review opdrachtgever

Wij hebben gevraagd aan de opdrachtgevers of zij ook feedback kunnen geven aan onze code. Hieronder kan je zien wat ze hebben gereageerd.

Geschreven door Lars Schuitema

Aanpak code review

Voor deze code review heb ik me uitsluitend gericht op de code en niet op de functionerende applicatie. Hierbij heb ik geen rekening gehouden met de specifieke user stories die in de briefing zijn vastgesteld. Het is belangrijk op te merken dat er mogelijk aspecten zoals toegankelijkheid (accessibility) zijn die momenteel niet de hoogste prioriteit hebben, maar die ik wel in deze review heb opgenomen. Het is aan jullie om de verschillende onderdelen te prioriteren, zodat eventuele feedback geen obstakel vormt voor het behalen van jullie deadlines. Voel je vrij om feedback die niet relevant is voor jullie situatie niet over te nemen.

HTML

• Het lijkt erop dat <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"> niet wordt toegepast, aangezien jullie de huisstijl-font ProximaNova gebruiken. Als deze niet wordt gebruikt, verwijder dan deze onnodige code.
• Zorg ervoor dat het alt attribuut van afbeeldingen relevante waarden bevat. funda_4 lijkt niet relevant. Voor het logo hebben jullie al een passend alt attribuut gebruikt: logo funda. Het alt attribuut biedt alternatieve tekst die wordt weergegeven wanneer de afbeelding van het <img> element niet wordt geladen. Bron
• Ik zie verschillende benaderingen voor het benoemen van class namen, zoals sec1, sidebarexit, ht2, en house-text. Overweeg om een CSS-conventie te kiezen, zoals BEM, om consistente en begrijpelijke classnamen toe te passen. BEM is een voorbeeld, maar op hun website worden ook andere methodologien toegelicht. Bron
• Het HTML-element <hr> is verouderd en zou niet moeten worden gebruikt in nieuwe websites. Bron
• Overweeg daadwerkelijke funda-links te gebruiken voor andere pagina's in plaats van # als de waarde van het href attribuut, zodat de applicatie een echtere gebruikerservaring biedt.

CSS

• Overweeg bij een :hover state, zoals bij de like-knop, ook :focus te implementeren. Dit is vooral belangrijk voor toegankelijkheid en hoewel dit wellicht in toekomstige lessen wordt behandeld, is het goed om je er nu al bewust van te zijn.
• Wees voorzichtig met het gebruik van 100vw en overweeg alternatieve oplossingen. Gebruik bijvoorbeeld width: 100%; indien nodig. In veel gevallen wordt dit automatisch afgehandeld bij gebruik van flexbox of andere opmaakmethoden.
• Verwijder ongebruikte selectors, zoals bijvoorbeeld #add.
• Er is nog steeds herhaalde code aanwezig. Overweeg welke elementen dezelfde CSS-properties kunnen delen en maak daarvoor een gemeenschappelijke class. Specifieke wijzigingen (zoals in het voorbeeld van hover hieronder) kunnen dan met een extra class of een andere selector/state worden overschreven.

Je kunt de grid-implementatie vereenvoudigen door repeat te gebruiken:

body {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

Denk erover om herhaalde code te vereenvoudigen. Dit zou de leesbaarheid en efficiëntie van je CSS kunnen verbeteren. Het is waarschijnlijk niet nodig om alle properties voor like:hover op te nemen:

.like {
  position: relative;
  justify-self: right;
  grid-area: like;
  background-color: lime;
  border-radius: 50%;
  right: 0;
  width: 1.5em;
  height: 1.5em;
  margin-right: 1em;
  margin-top: 1em;
}

.like:hover, .like:focus {
  background-color: red;
}

JavaScript

In een complexere app wil je ook de event listeners weer weggooien met removeEventListener i.v.m. memory management / performance.

Overweeg classList te gebruiken voor het togglen van de popup, zodat je geen dependency hebt op de CSS

popup.classList.add("active");

Vereenvoudig de JavaScript door minder te herhalen. Bijvoorbeeld:

const likeButtons = document.querySelectorAll(".like");
likeButtons.forEach((button) => {
  button.addEventListener("mouseover", showPopup);
  button.addEventListener("click", showPopup);
  button.addEventListener("mouseout", closePopup);
});

Assets

• Zorg voor consistente naamgeving in de folder structuur. Gebruik voor het gemak lowercase Fonts -> fonts
• Overweeg de Logo's folder te hernoemen naar images en verplaats de andere afbeeldingen in deze directory, zodat alle afbeeldingen op 1 logische plek worden opgeslagen
• Voorkom onnodig dubbele directories. Een voorbeeld is de Fonts directory die ook weer in /funda/fonts zit. Dit geldt voor alle directories, maar ook eventueel dubbele bestanden
• Verwijder bestanden die niet worden gebruikt in de icons folder om ruimte te besparen in het project
• Gebruik betere naamgeving voor de bestanden die worden gebruikt 01-funda-Orange.svg -> funda_logo.svg
• Voorkom namen met spaties, gebruik bijvoorbeeld de snake_case conventie om problemen te voorkomen brabant huis.jpg -> assets/brabant_huis.jpg

Wat willen we bereiken met deze feedback?

De feedback die we in de vorige sprint gekregen hebben is cruciaal voor het maken van een nieuwe site. We kunnen alle feedbackpunten namelijk automatisch aanpakken en anders doen wanneer we beginnen met het bouwen van de site. Vervolgens willen we ook de nadruk op toegankelijkheid vergroten door verschillende testen te doen, zoals de lighthouse test of handmatige testen om te kijken welke aspecten binnen de site minder toegankelijk is. Als wij hierachter komen, kunnen we deze info ook weer implementeren in de nieuwe site.