Learning Journal

Inhoudsopgave

sprint 19

sprint 20

Week 1

3 februari

introductie/algemeen

Eerste dag in de Fdnd Agency waarbij een uitleg is gegeven over hoe de komende periode eruit gaat zien en wat wij allemaal gaan doen.

conventies binnen de agency

Voor dat we volledig aan de slag konden gaan moesten we wel on houden aan de conventies van de fdnd agency die vind je bij deze link:

Code Conventies

Mijn opdracht

Ik heb als opdracht gever Oncollaboration. Oncollaboration is een ontwerp voor een online platform voor samenwerking en kennisdeling tussen Indoneschische en Nederlandse radiotherapeuten.

Mij is het de taak om de website verder te af te maken.

1ste stap

Ben begonnen met het lezen van de contribution, handover en technische documentatie te lezen, zodat ik weet waar ik rekening mee moet houden en wat er gedaan nog moest worden. Het eerste wat mij opviel is dat ze de profiel pagina niet af hebben gekregen dus ik wilde daar een start aan gaan maken.

breakdown schets en code doornemen

Wat ik als eerst heb gedaan is de code doornemen. Kwam veel nieuwe dingen tegen die ik wel eens eerder heb gebruikt in het vorige semester sind ik weinig heb gewerkt met data zoals hoe de slug ongeveer werkt, post binnen svelte kit en de actions die erbij horen.

wat is een slug

Dit is een heel belangrijk iets voor mij sinds ik nooit echt met slugs heb gewerkt. Een slug is het unieke identificerende deel van een webadres, meestal aan het einde van de URL.

mdn slug definition

Het word bij Oncollaboration meestal als detail pagina gebruikt zoals in /webinars.

4 februari

mobiele versie bouwen

Voordat ik de mobiele versie maakte was het mij opgevallen dat de webinars en contourings section er het zelfde uitzag als in de home. Dat scheeld tijd dus heb de layout overgenomen en hem in mijn profiel page.svelte gezet.

De enige s truggle was de Profile img met daarbij de profile info op zijn plek te krijgen, maar dat kosste niet veel moeite

5 februari

mobiele versie afmaken en start maken aan de desktop

De layout was zowat klaar en ben van start gegaan aan het responsive maken van de page. 1 belangrijk ding wat mij opviel is dat De andere pages vooral bij de @media een min width van 500px, 600px en 1080px gebruiken.

nieuwe color palette toepassen

Volgens het nieuwe ontwerp word er nu ook gebruik gemaakt van een nieuwe kleuren paletten. Heb de hex waardes gepakt en ze overgezet naar hsl en heb dus uiteindelijk de oude kleuren vervangen met de nieuwe

before

   --primary-color: hsl(217, 44%, 23%) 

   --background-color: hsl(34, 41%, 93%) 

   --background-color-alt: hsl(0, 0%, 100%) 
  
   --background-category-color: hsl(170, 23%, 79%) 
  
   --hover-state-color: hsl(216, 37%, 38%) 
  
   --accent-color-1: hsl(161, 48%, 24%)

after

   --primary-color: hsl(339, 100%, 21%); 
  
   --background-color: hsl(338, 27%, 92%) 
  
   --background-color-alt: hsl(0, 0%, 100%) 
  
   --background-category-color: hsl(339, 26%, 76%); 
  
   --hover-state-color: hsl(339, 26%, 80%) 
  
   --accent-color-1: hsl(340, 100%, 15%);

6 februari

profile section anders stylen

Met wat hulp van de opdrachgever heb ik nu zowat bijna mijn hele profile page af qua styling en layout.

waar liep ik tegen aan

De profile section had veel te veel wit ruimte en had uberhaupt nog geen ontwerp van hoe deze section op desktop eruit moest zien. Daarom kwam Sergio (mijn opdracht gever) met het idee om de layout over te nemen van de speakers page.

wat nu?

De layout komt overeen met die van de speakres page, maar ik loop nog steeds met het probleem dat er veel wit ruimte is. Daarom heb ik als idee om onder de user info een bio section te zetten

7 februari

code en design review

Eerst code en design review vandaag waarbij ik mijn styling en layout pagina presenteer aan mede studenten en een docent. Bij het presenteren van de profiel pagina werd er vooral natuurlijk gekeken naar code.

Week 2

10 februari

erd schets voor data

Vandaag zijn er plannen gemaakt voor de data in richting van het toevoegen van favoriete webinars aan de favorite list

Ben met hulp van een software developer student van start gegaan aan het maken van een Erd Diagram op de website van lucidapp Belangrijke bewijslast voor 3.1.2 voor standaarden

empty state

Wilde ook alvast een empty state schetsen voor als er in een bepaalde section leeg is in de profiel page**

component & static en dynamic schets

De static en dynamic schets heeft beeld gegeven voor wat statisch geschreven moet worden en wat data is.

Component schets voor eventueel welke content in een los bestand moet en wat niet

morphological chart voor de favorite button

Heb voor de favoriete button per categorie wat ideeën verzameld voordat ik het ga bouwen

11 februari

code refactoren van pull request 7feb

De feedback was vooral gebaseerd op nette code dus daar had ik vandaag geen moeite mee

keuzes maken en feedback krijgen

Uiteindelijk heb ik beslissingen gemaakt met hoe ik de fav button eruit wil laten zien. In de morphological chart markeer ik alles met een rode border per categorie om aan te geven dat ik dat wil gebruiken bij de bouw fase.

12 februari

handover

Vandaag ben ik bezig met de overdracht, omdat er kans is dat ik binnenkort stage ga lopen. Hieronder is een lijstje met wat er gedaan moet worden voor de overdracht.

feedback

  • feature branch conventies (titel gebaseerd op waar je aan werkt)

  • alleen engels

  • label cards by feature for webinars & webinars (label per feature or pages)

  • create main issue for each page & a general issue where you can place subissues for every page

  • branches opruimen ✓

  • check pull request from febuary the 7th ✓

  • Remove useless content (from comments etc. (directus)) ✓

  • desk research: when to use issues / subissues, when to use milestones and how to combine them. Turn this to a fdnd convention ✓

Week 3

26 februari

Tijdje terug dat ik hier wat voor het latst heb geschreven, maar hier ben ik weer.

Fields in a fetch endpoint

Als eerst wil ik zeggen dat het mij gelukt is om een feature te maken dat elke user zijn eigen favoriete webinars lijst kan bekijken. Ik struggelde veel mee en kreeg daarbij ook natuurlijk een beetje hulp

Je vind wat meer informatie over fields hier => :Directus fields

Code voorbeeld

in mijn eerste fetch die ik uitprobeerde wilde ik dus alles van de user ophalen. Wat het probleem was is dat De favourites nested data bevat die van een andere tabel komt.

Om ervoor te zorgen dat ik de nested data pak is om dus fields te gebruiken hier is hoe mijn endpoints er nu uitzien

    const userResponse = await fetchJson(
      `${baseURL}avl_users/4?fields=id,fullname,email,profile_picture,entitle`
    );

Week 6

13 maart

Heb een sprint review vandaag gehadhier is een kort lijstje met de feedback die ik heb gekregen

  • nav bar 2de logo ziekenhuis indonesie er naast zet voor nieuwe nav bar versie

  • hoofdstukken in video

  • duidelijkere uitleg over recources

  • telefoon weg halen

wat heb ik allmaal gepresenteerd

Ik heb het volgende latenzien

  • verteld over de speaker page
    • Nieuwe ideeën laten zien over de featured webinar section
    • PE van de page
  • Profile page
    • design laten zien.
    • verteld over de favorite webinars.
    • de emptystate laten zien.
  • overige dingen
    • nieuwe color pallete toegepast
    • omdraaien van de comments zodat de nieuwste altijd boven aan staat.

Wat vond de opdracht gever ervan?

Ze was heel tevreden. Zeker over het idee om van het het component die de Featured webinars laat zien op desktop. Later zal ik ook een Fallback ervoor maken dat als je uitstaat er iets anders voor komt dat je nogsteeds de webinars kan zien.

Naast dat vond ze het heel fijn hoe ik bijvoorbeeld rekening hou voor mensen die bijvoorbeeld geen javascript aan hebben en natuurlijk aandacht hou op andere kleine details.

nieuwe opdracht voor mij en 1ste jaars

Joost was ook kort bij de sprint review en kwam tijdens het gesprek met het idee dat we 2 taken verdelen tussen mij en de 1e jaars

  • Naast de feedback die ik kreeg zal ik werken aan een chapter functie voor elke webinar
  • eerste jaars gaan naast hun project ook onderzoek doen naar de huisstijl van het ziekenhuis in indonesië en zullen uiteindelijk met een nieuwe kleuren pallette komen die zowel past bij zowel het nederlandse ziekenhuis als het indonesische ziekenhuis

week 7

17 maart

Aan de hand van de sprint review heb ik het vandaag gehad over de feedback die de eerste jaars hebben gekregen besproken met Halima (1ste jaars die ook werkt aan oncollaboration).

wat viel mij op?

Tijdens de sprint review hadden we het gehad over de navigatie. De opdracht gever vond het een leuk idee om een hamburger menu te maken voor alle linkjes. Het probleem was dat als javascript uit staat de hamburger menu het niet meer doet waardoor je extra code moet schrijven om de nav menu toegankelijk te maken ook als staat js uit staat.

mijn versie

Mijn versie van de nav menu is altijd zichtbaar en staat onderaan op de pagina

  • het heeft position fixed dus je kan er altijd bij wanneer je scrolled
  • linkjes zijn duidelijk en makkelijk op te klikken
  • en heeft geen javascript nodig dus dat scheeld ook veel code

zie mijn live site op mobiel live site

Week 1

14 april

wat is nieuw

Eerste dag van de final sprint waarbij er nieuwe studenten van het cmd schakel programma erbij zijn gekomen.

Voor vandaag werden de teams ingedeeld wie met wie samen gaan werken waarbij er eerst voor de klas per project een presentatie werd gehouden over elk project.

In zo'n project moet de student die er in de vorige sprint mee bezig was uitlegeen wat het project is en wat er allemaal gedaan moet worden.

wie is bij oncollaboration bij gekomen?

Jason Wong is mijn nieuwe team genoot. De samenwerking begon met een herhaling van de presentatie. Daarna samen de code base doorgenomen en vervolgens plannen maken met hoe we onze samen werking gaan aanpakken

aanpak

Wij werken samen door daily standups te doen zie onze documentatie in deze issue

Andere dingen wat we hebben besproken is als eerst het project over te zetten naar svelte 5

16 april

Vandaag Hebben we een start gemaakt aan het overzetten van ons project van svelte 4 naar 5.

We hebben hier een atiekel gevonden over de migratie van de ene versie naar de andere.

Sveltedocs

hulp van anderen

Had wel wat struggles tijdens de migratie. Het blijkt dus dat Svelte 5 gebruik maakt van runes. Omdat leesbaar te maken voor Mijn code moest er in de root.svelte iets toegevoegd worden om runes mode te enabelen. Dankzij een script van christopher is dat gelukt. issue over de migratie.

Week 2

23 april

design review met eerste jaars

Omdat Jason van Joost de opdracht kreeg om samen met mij een redesign te maken van de volledige website heeft hij de eerste jaars die ook aan dit project werken uitgenodigt voor een design review. Bij deze design review was Lesley ook bij ons groepje bij gekomen en hebben we met ze alle gekeken naar de designs van de eerste jaars.

Feedback naar de eerste jaars vind je hier

24 april

Cmd studenten bij de agency

Vandaag hebben weer versterking gekregen van de cmd studenten die bij de agency zich hebben aangesloten.

Om het kort te houden heb ik dus basically ons project uitgelegd aan de cmd student die ons komt versterken en een korte taak verdeling met wie wat gaat doen. Quincy(de cmd student) is een begin gaan maken met een ontwerp te maken van de home pagina.

wat heb ik gedaan?

Hij had een bepaalde sectie van de eerste jaars gebruikt als inspiratie voor de 8meet our doctors* section. Ik heb daarvan alvast een prototype van te maken in een test branch.

25 april

presenteren voor de tribe

Bij deze terugkom dag was het de bedoeling dat ieder tafel dat uit ongeveer 4 man bestond aan elkaar ging presenteren met waar ze de afgelopen periode mee bezig zijn geweest. Nadat idereen gepresenteerd heeft werd de best gekozen en die gaat vervolgens voor de klas presenteren.

Vervolgens heb ik dus voor de klas gepresenteerd aan de hand van deze issues:

Week 6

22 mei

Speciale cmd pilot workshop van Lauria

Vandaag heb ik een speciale korte workshop gevolgd van Lauria. Designer en eigenaar van Lauría Communication + Design

In haar les heeft ze het gehad over The four foundational design principles

  • Contrast: combinatie met kleuren
  • Repetition: herhaling van bepaalde key details
  • Alignment: correct positioneren van dingen
  • Proximity: het groeperen van gerelateerde content. Of te wel met een bepaalde stylings kenmerk laten zien dat bepaalde dingen bij elkaar horen

Meer erover vind je hier

Tijdens workshop waren er een paar mini opdrachten die we deden bijvoorbeeld of er iets van die 4 principes terug komen in ons design, maar daarnaast stelde we ook wat vragen over ons design om eventuele feedback te krijgen. Korte feedback die we hebben gekregen van de docenten die aanwezig waren vind je hier

Week 7

28 mei

Deze dag is waarschijnlijk de laatste of 1 van de laatse keren zijn dat we contact hebben met Judi (opdracht gever Oncollaboration). We zijn bij haar langs gekomen voor een design review met de eerste jaars.

Tijdens het design review zijn we als eerst bij elkaar komen zitten om te bespreken over hoe het is gegaan de afgelope periodes en hoe we ervoor staan.

Daarna Was het de bedoeling dat we Dat idereen liet zien wat ze hebben gemaakt. Ik en Quincy hebben en vragen lijst gemaakt waarbij we een aantal vragen hadden over wat ze over ons design vond. Omdat Judi geen technische achtergrond heeft probeerde we zoveel mogelijk door te vragen over wat ze vind van onze redesign zodat we zo duidelijk mogelijke feedback in return krijgen.

Hier Is waar je onze vragen lijst vind over het design waar we van te voren wat vragen hebben geschreven, maar ook tijdens het presenteren