Voortgangslogboek - JalalToufik/Bieb-In-Bloei GitHub Wiki

Stand-ups

  • Frequentie: Elke maandag, donderdag en vrijdag

Inleiding Ons project "Bieb in Bloei" is een samenwerking met Duneya en Ivar om een website te ontwikkelen voor Mariska, die zich richt op groene buurtprojecten. Mariska waardeerde het vorige ontwerp van de website, maar zag mogelijkheden voor verbeteringen om het beter af te stemmen op nieuwe projecten. Hieronder volgt een overzicht van onze voortgang en de taken die we hebben uitgevoerd.

  • 15 april: Projectstart: Indeling werkzaamheden ontvangen en besloten om samen te werken aan de "plant swap" functionaliteit. Team canvas ingevuld voor heldere samenwerking.

  • 18 april: Code refactor om componenten herbruikbaar te maken. Briefing met Mariska (gedocumenteerd in mijn wiki).

  • 19 april: Projectboard aangemaakt en taken verdeeld. Eerste schetsen voor de homepage gemaakt en sitemap opgezet.

  • 20 april: Website design in Figma: Mobile-first ontwerp, kleurentesten en afstemming op Mariska's wensen.

  • 21 april: Design review met Mariska: Kleine aanpassingen (gedocumenteerd in mijn wiki).

  • 22 april: Design review met Cyd en Berat (gedetailleerd gedocumenteerd in mijn wiki).

  • 26 april: Repository gekloond en eerste code geschreven.

  • 6 mei: Hero headers (behalve homepage) gemaakt en content toegevoegd aan de API.

  • 13 mei: Mobile-first ontwikkeling: Semantisch HTML, alt-teksten en lazy loading voor afbeeldingen.

  • 16 mei: Pull-request aangemaakt en besproken met Jalal. Ivar is ons team komen versterken.

  • 17 mei: Start overzichtspagina en componenten in Hygraph, data toegevoegd aan de API.

  • 23 mei: Overzichtspagina voor stekjes en zaden voltooid en pull-request ingediend.

  • 24 mei: Bugfixing - Afbeeldingsproblemen opgelost met hulp van klasgenoten.

  • 27 mei: Start content toevoegen aan Hygraph voor details pagina.

  • 30 mei: Details pagina coderen: Complexiteit van de [slug] aangepakt.

  • 31 mei: Details pagina afgerond en pull-request ingediend.

Algemene feedback en aanpassingen:

Vergadering met Mariska: Voortgang besproken en feedback verwerkt. Mariska was zeer tevreden met de vergelijking tussen oude en nieuwe ontwerpen.

Feedback Cyd en Berat: Headers aantrekkelijker gemaakt, knopformaten aangepast en achtergrondkleur bij partners-sectie verwijderd. Sitemap en homepage presentatie: Mariska en Rosa waren zeer tevreden. Rosa bood aan om een logo te ontwerpen.

Workshops

Workshop van Cyd

Wat je hebt geleerd van Cyd's verhaal:

  • Animaties kunnen beter: Veel animaties zijn saai en kunnen verbeterd worden door de Disney design principes toe te passen.
  • Styleguide is belangrijk: Bij het maken van animaties is het handig om een styleguide te hebben en drie vragen te stellen: Is het herkenbaar? Is het bruikbaar? Is het mooi/fijn?
  • Overleg met de klant: Bij het ontvangen van een opdracht is het belangrijk om met de klant te overleggen en eventueel aanpassingen te doen.
  • Tips voor animaties: Oefening baart kunst, bij twijfel kies ease out, less is more, wees consistent, niet repetitief.
  • Tools: Cyd werkt vooral met Wordpress, 3js en Gsap.

Workshop van Jad

Wat je hebt geleerd over View Transitions API:

  • Wat het is: Een manier om twee staten van de DOM (Document Object Model) gemakkelijk in elkaar over te laten lopen door snapshots te maken en deze te animeren.
  • Hoe het werkt: De browser maakt screenshots en met de View Transition API kun je deze in elkaar laten overvloeien.
  • Mogelijkheden: Je kunt animaties maken met kaarten, dark/light mode wijzigingen, en overgangen tussen pagina's met cirkels die groter worden.
  • Toepassingen: De API is flexibel en kan worden gebruikt voor CSS grids, back button navigatie, en in de toekomst mogelijk ook voor multi-page apps.

Talk van Joost

Wat ik heb geleerd over het maken van progressive enhanced formulieren:

  • Gebruik use:enhance: Deze SvelteKit-functie zorgt voor goede progressive enhancement in formulieren.
  • Constraint validation: Gebruik constraint validation voor het stylen van foutmeldingen in formulieren.
  • Form states (progressive disclosure): Een formulier dat meer uitklapt naarmate je meer informatie invult, kan de gebruikerservaring verbeteren.