Caution
THIS IS A SCHOOLPROJECT
Ik wil mij verder ontwikkelen in het maken van CSS-animaties, met een specifieke focus op het ontwerpen en ontwikkelen van micro-animaties. Hierin wil ik actief oefenen en experimenteren.
Ik kies dit leerdoel omdat ik hier een sterke interesse in heb en het mij leuk lijkt om me hierin te verdiepen. Daarnaast dragen micro-animaties bij aan duidelijkere interfaces en een betere user experience door middel van heldere feedback en feedforward voor de gebruiker.
Ik wil beter worden in het gebruik van tooling en het opzetten van een nette, overzichtelijke code-architectuur. Concreet wil ik mij verdiepen in het gebruik van Emmet en andere shortcuts om sneller en efficiënter te kunnen coderen.
Daarnaast wil ik functionele decompositie toepassen in mijn code en mezelf dit vanaf nu aanleren.
Bovendien wil ik werken met een duidelijke mappenstructuur, consistente syntax, het correct toepassen van camelCase en een vaste naamgeving voor variabelen en functies.
Ik werk aan dit leerdoel omdat het mij denk ik op de lange termijn tijd gaat besparen. En mijn code professioneler maakt wat zorgt voor beter overzicht. Door deze werkwijze nu al aan te leren, wordt het een vaste gewoonte.
Ik wil mij verbeteren in het itereren binnen het ontwerpproces. Als perfectionist heb ik de neiging om een concept te ver uit te werken voordat ik verderga naar de volgende stap. Ik wil leren om een concept meer als uitgangspunt te zien en dit later bij te schaven op basis van feedback en nieuwe inzichten.
Ik werk hieraan om mijn time management te verbeteren, omdat ik merk dat ik door perfectionisme niet altijd alles af krijg. Daarnaast wil ik voorkomen dat ik mij te vroeg vastzet in één concept, zodat ik meer ruimte houd om te experimenteren en verschillende iteraties te verkennen.
Dag 0
- 09:30–11:30 — Kick-off / hoorcollege
- 11:30–11:45 — Kopieën gemaakt van het erfbelastingformulier (voor mezelf en klasgenoten)
- 11:45–12:00 — GitHub-repo aangemaakt
- 12:00–12:40 — Papieren formulier doorgenomen, hierover overlegd met anderen, nagedacht over inputtypes en UX, en een lijst met soorten input opgesteld, zodat ik styling makkelijk kan hergebruiken straks
- 12:40–13:15 — Begonnen aan de HTML
- 13:15–13:45 — Pauze
- 13:45–14:20 — Klassikale uitleg
- 14:30–15:00 — Verder gewerkt aan het opzetten van de HTML,
- 15:00–15:45 — Weekly Geek artikel doorgelezen
- 15:45– — README opgezet
- Hoeveel werk er zit in een formulier robuust opzetten. Met semantische Html
- Dat er echt superveel attributen nodig zijn voor 1 input
- Icons en best practises en hoe apple dat echt ultiem hard heeft verkloot met de laatste opdracht
- Html die ik nu heb verbeteren
- Dat laat ik zien aan een docenten om het te controleren voordat ik verder ga met vraag 2
- alvast nadenken over hoe ik de disclosure ga doen en waar
- welke vragven ik substaniseel kan aanpassen of toevoegen -repo toevoegen aan files en deployen
- read me cleanen
Dag 1
- 09:30–10:15 — Weekly Geek
- 10:30–11:50 — Workshop HTML Forms
- 12:10–12:30 — Repository gedeployed en in Excel gezet (Dit had wat problemen dus medestudent om hulp gevraagd)
- 12:30–13:00 — Naamgeving in HTML toegepast (for-, name-attributen e.d.)
- 13:00–13:30 — Pauze
- 13:30–14:45 — Voor oude minor wat werkzaamheden gedaan
- 14:50–15:40 — Naamgeving waarmee ik was begonnen overal toegepast/afgemaakt
- 15:40–15:50 — Feedback gevraagd op naamgeving via ChatGPT en consistentie gecontroleerd
- 15:50–16:00 — README bijgewerkt
- 3 nieuwe shortcuts
- cmd + d/k | multiple smart selections (weet niet hoe ik dit moet beschrijven)
- shift + alt + f | format code neatly -alt + pijlje omhoog/omlaag | regel code 1 omhoog of omlaag
- Name en for enzo goed toepassen
- Naamgeving consistenter en duidelijker toepassen
- dataList element van html
- Feedback vragen aan docenten over mijn html en dan vooral de naamgeving die ik nu heb
- basis styling opzetten
- dan verder met de html verbeteren en een concept opzetten voor het hiden enzo van de niet relevante vragen
- alle notities centraal zetten in obsidian en doornemen
Ik heb denk ik al een stabiele html basis opgezet. Ik vind het jammer dat ik nog niet aan de styling ben toegekomen maar dat kwam ook omdat er nog iets van mijn oude minor tussen kwam deze week. Ik heb me erg veel bezig gehouden met de structuur en naamgeving van mijn html en kijk ernaar uit om daarop verder te werken en styling toe te gaan passen.
Nog niet van toepassing deze week. Ik wil wel proberen veel microanimaties toe te passen in mijn form
Hier ben ik deze week zeker mee bezig geweest. Ik heb veel nagedacht over nesten, groeperen en naamgeving en ik wil daar zeker mee door bij deze opdracht. Ik ben ik echt bezig met shortcuts aanleren en gaat dit tot nu toe best wel heel lekker.
Ook heb ik het concept prefixes geleerd van Vasilis en toegepast in mijn code.
Dit leerdoel is binnen dit project nog niet sterk van toepassing en speelt een minder grote rol. Toch wil ik hier bewust aandacht aan blijven besteden. Ik doe dit door open te staan voor ontwerpkeuzes die niet volledig vastliggen binnen de huisstijl van NS die we gebruiken. En die ik dus vrij kan invullen. Bijvoorbeeld microanimaties.
Daarnaast ben ik bezig met het ontwerpen van de opzet van het formulier. Dit ontwerp wil ik gaandeweg blijven verfijnen en verder uitbouwen. In plaats van in één keer een perfect ontwerp neer te zetten, focus ik mij op het verbeteren van het ontwerp door middel van bijschaving op basis van feedback en testen.
- /+ Opzich heb ik nu een mooie opzet voor mijn html, maar ik ben maybe wel een klein beetje doorgeslagen.
- /- Een legend heeft geen form nodig. Let ook op dat je juist met zo'n ingewikkeld pattern je wel consistent blijft.
- /! Denk alvast na over hoe je alles gaat oplossen met required omdat dit afhangt van antwoorden op vragen
- /! Begin zo snel mogelijk aan de javascript (het lastige), voordat je je gaat storten op de styling
- /! Je kan je verdiepen in password manager en dat je al data ophaalt voor de gebruiker
- /! Auto complete ^, kijk daarnaar
- /! Denk na over een max date -> je kan kijken naar voor wanneer dir formulier is
- /- Soms gebruik ik afkortingen en soms niet
- /- camelCase en kebab_case door elkaar
- Code voorleggen aan de docent en vragen om feedback omdat ik nog niet helemaal tevreden ben met de naamgeving
- Basis styling toepassen
- Vraag 1 verbeteren
- Vraag 2 maken
- Nadenken over de progressive disclosure
Dag 2
- 09:30–10:15 — Kick-off en uitleg over validatie met JavaScript
- 10:30–11:30 — Workshop validatie met CSS
- 11:35–11:50 — Dagplanning gemaakt en feedback doorgenomen/uit mijn fysieke schrift digitaal opgeschreven
- 11:50–12:00 — Feedback verwerkt: HTML consistenter gemaakt, afkortingen verwijderd, inconsistenties hersteld,
for-attributen bij legends weggehaald, kebab-case toegepast voor infixes en camelCase voor variabelen - 12:00–12:10 — Styling doorgenomen aan de hand van de NS-styleguides
- 12:10–13:00 — Pauze
- 13:00–13:15 — Uitleg Weekly Nerd
- 13:15–14:00 — Fonts opgehaald en
.gitignoreingesteld - 14:00–14:50 — Color tags in de root gezet
- 14:50–15:10 — Padding en border-radius in de root gezet
- 15:10–16:00 — Met Teun naar Obsidian gekeken en begonnen met al mijn notities daar centraal te verzamelen.
- 16:00–16:15 — Check-out
- na school - De bronnen doorgenomen voor de weekly geek en de rest van de notities in obsidian gezet
- Hoe ik forms kan valideren met css
- weer opgefriste hoe ik de gitignore moet toepassen
- styling verder toepassen (ik wil dit hier niet de lang aanzitten dus wil de basis toepassen om dan zo snel mogelijk verder te gaan met de rest)
- progressive enhancement uitwerken
- validatie in de meest basic vorm toepasse4n
- Een readme opzetten met uitleg van mijn code, zodat ik hiermee kan oefenen
Dag 3
- 09:30–10:30 — Weekly Geek
- 10:30–11:00 — Met Kerr gespart over de Rubiks kubus-opdracht en elkaar beter leren kennen
- 11:00–11:20 — Enkele dingen voor mijn werk moeten regelen
- 11:20–11:30 — Kleine planning voor mezelf gemaakt
- 11:30–12:00 — Styling tokens afgerond
- 12:00–12:30 — Begonnen met styling van typography en basiselementen voor form
- 12:30–13:20 — Pauze
- 13:20–14:30 — Verder met styling, met name form-elementen
- 14:30–15:00 — Koffiepauze
- 15:00–16:00 — Verder met styling van de elementen
- 16:00–16:15 — Daily check-out
- Mediaqueries weer opgehaald
- Vooral progressie gemaakt
- Nog niet heel veel nieuwe dingen gedaan of uitgezocht
- Layout van de styling doen
- progressive disclosure
- validation
kijken naar typografie met font weigth medirum en sizing
Vrijdag
- 14:30-14:45 — Gekregen feedback noteren
- 14:45-16:15 — Html attributen toepassen voor validatie (waarbij ik me ook iets meer heb verdiept in regex)
Ik heb de volgende bronnen gebruikt voor regex:
Ik heb me deze week vooral gefocusd op de styling van mijn form waar ik me echt heb verloren in de custom properties en dingen tot op de details doen, waardoor ik nu n0g niet tevreden ben met wat ik tot nu toe heb gedaan. Als ik ergens aan begin ga ik er altijd volledig voor en ik vind het lastig om dingen half te doen wat me soms wel eens tegen staat omdat ik moeite heb met taken prioriseren en ook ergens mee te stoppen als het te lang duurt en het verstandiger is om me ergens anders op te focussen. Ik wil hier daarom in de komende twee weken meer op letten en dit misschien ook de rest van de minor doen.
Nog niets mee gedaan en als ik me hier al mee bezig houdt wordt dit wss in de laatste week. Misschine kan ik dit een beetje verwerken maar ik ben dus bang dat ik hier meer tijd in ga steken dan in de echte opdracht.
Met de custom properties ben ik hier zeker veel mee bezig geweest. Ik denk wel dat ik dit leerdoel soms echter iets meer los moet laten omdat ik soms misschien te veel hiermee bezig ben waardoor ik niet hele grote stappen maak in mijn form. Ik heb de neiging om soms heel erg lang over een opzet van iets na te denken waarbij ik mezelf continue de vraag stel: "Is dit de beste manier?" Ik moet dit dus iets meer los laten ben ik bang omdat het me wel echt veel tijd kost. Ik wil me komende week weer wat meer verdiepen in shortcuts. Dat is er deze week niet echt van gekomen.
Ik denk dat ik hier iets meer aandacht aan kan gaan besteden. Ik heb nu de neiging om dingen die ik doe gelijk zo goed mogelijk te doen waardoor het vrij lang duurt. Ik kan ook denken ik maak nu een basis en itereer dat later verder op áls ik de tijd daarvoor heb. Alleen ben ik dan bang dat ik ook dingen dubbel of voor niks doe wat me nu denk ik tegen houdt. Ik wil dit wel gaan proberen de komende week.
- In mijn read me ook noteren welke ontwerp keuzes ik maak en waarom
- Kijk goed of je code kunt hergebruiken, probeer het dry te houden -> in praktijk hoeft het niet compleet dry als het de leesbaarheid vergroot.
- Kijk naar nesten van code eventueel
- Probeer de gebruiker zo veel mogelijk aan de hand mee te leiden en dingen voor te kauwen
- Gebruik in de inspector console crtl shift + p om js uit te zetten
- Probeer altijd dingen positief te benaderen -> variablen positief, niet :not(:has(blablabla)), etc
- denk na over of ik het wil weglaten of wil laten zien met progressive disclodure.
- misschein ga ik er tijd indicaties bij zetten
- alles opschrijven waar ik ove rna denk ook als heb ik geen tijd gehad om het te implementeren of te testen maar schrijf dingen op en welke afwegingen in maak
- link van jeppe kijken naar pattern
- maybe nog css opsplitsen maar nu nog geen prio
- beter prioriseren
- nu al best goede styling
- radiobuttons ja en nee buttons maken
- kijk eerst of je dingen kan doen met wat ik al heb, hoef nog niet gelijk div's toe te voegen maar mocht het nodig zijn dan is dat wel de beste oplossing
- Styling voor nu even laten zitten
- Kijken naar validatie
- Kijken naar twee patterns: Progressive disclosure en ?
- Laten we het voor nu daar maar even ophouden en kijken hoe dat gaat.
Dag 4
- 09:30–10:15 — Hoorcollege van Rijk
- 10:30–10:45 — README bijgewerkt en aantekeningen gemaakt over het hoorcollege van Rijk
- 10:45–11:10 — Gesprek met Rijk over de form en andere onderwerpen
- 11:15–11:30 — Bevindingen en meningen over de talk van Rijk opgeschreven
- 11:30–12:00 — Weekly check-out geschreven en README verder opgeschoond en bijgewerkt (vrijdag niet aan toegekomen)
- 12:00–12:30 — Begonnen aan validatie
- 12:30–13:30 — Pauze
- 13:30–14:25 — Begonnen aan progressive disclosure
- 14:40–15:00 — Verder gewerkt aan disclosure
- 15:00–15:20 — Weekly Nerd voorbereid
- 15:20–15:50 — Verder gewerkt aan selector voor progressive disclosure
- 15:50–16:00 — Selector werkend gekregen!!! (met wat hulp van Sanne: bleek dat ik de class op de label had gezet ipv de input)
- 16:00–16:15 — Check-out
- 17:15-16:15 - Styling "ja" en "nee" radiobuttons
!note: Naar aanleding van feedback en mijn eigen ervaringen breidt ik de daily checkout vanaf nu iets uit.
- client-side validation
- pdf erfbelasting
- subsequent-sibling combinator
- flexbox -voorbeeld ns formulier -voorbeeld ns vragenlijst
- Ik snap direct en subsequent selectors nu beter
- Verder met de styling van progressive disclosure
- Meer doen aan validatie
-
progessive disclosure pattern Ik heb al veel nagedacht over de progressive disclosure. Als ik naar ux kijk lijkt het mij namelijk erg hinderlijk als er de hele tijd vragen bijkomen op basis van wat ik invul. Ik kan dan geen goede inschatting maken van hoe lang iets duurt en er komt de hele tijd meer bij. Ik zat er daarom over na te denken om het andersom en eerst alles te laten zien en vragen weg te halen. Tijdens mijn reflectie heb ik hier feedback op gevraagd. Victor gaf toen aan dat hij het minder gebruikersvriendelijk vind omdat de gebruiker het hele formulier ziet en ook al middenin het formulier kan beginnen. Vandaag heb ik het er ook met Rijk over gehad. Daar ben ik op het idee gekomen om het toch te houden maar te disabelen zodat de gebruiker goede feedback heeft en beter snapt wat er gebeurt. Wel ga ik misschein de verschillende secties met progressive discloure doen maar hier moet ik nog goed over na denken.
-
progressive disclosure toepassen Ik heb het form doorgenomen en het pattern is bij vragen die van elkaar afhangen dat als je er op een nee doet je bij mij de rest van de fieldset kan overslaan. Dit ga ik gebruiken voor mijn benadering. Bij bijna alle vragen is de disclosure op basis van een nee. Echter ga ik toch een extra classs gebruiken want bij 7 vraag is dat niet zo, plus dan is het een meer responsive code (is dat de goede term?)
(bij nog een keer goed kijken kom ik er achter dat je mijn pattern sowieso niet kan gebruiken voor die vraag maar mijn code wordt er alsnog beter van denk ik)
Als ik terugkijk op wat ik vandaag heb gedaan ben ik niet onwijs tevreden. Ik merk dat taken me veel langer kosten dan dat ik inschat. Ik weet niet zo heel goed waardoor dat komt dus daar wil ik morgen op letten. Ik heb vandaag wel wat tijd besteed aan mijn notes schrijven en mijn readme aanvullen + beter mijn denkprocessen noteren dus misschien heeft het daarmee te maken. Ik hoop echt dat ik morgen wat slagen kan maken.
Dag 5
- 930 -1035 weekly geek
- 1045 verer met radiobutton styling
- 1100-1150 workshop toegankelijkheid error messages -1200-1320 pauze -1320 styling radiobutton afmaken 1340 1430 weer verdiept in de workshop van vanochtend met validatie en begonnen met uitdenken hoe ik het op mijn eigen website wil gaan doen. 1430 1500 werken aaan header styling met before en clamp uitgezocht 1510 begin gemaakt custom validation messages met javascript en de dingen die ik in de workshop heb geleerd toegepast
- Hoe je custom validation aanpakt in js
- Waar je op moet letten als je de validation toegangelijk wilt houden
- aria-live="polite" en aria-live="assertive"
- aria-describedby
- Kiezen welk ander pattern ik wil doen
- Styling van de progressive disclosure
- het formulier opslitsen in meerder pagina's
- styling radiobuttons Ik heb aan Victor gevraagd of heet oke was dat ik display none had gebruikt waarop hij aangav dat ik beter opacity en postion absolute kion gebruiken dus dat heb ik gedaan.
Vandaag ging op zich wel redelijk. Ik denk dat een van de dingen die mij veel tijd kosten het verwerken van de stof is. Ik wil iets eerst snappen voordat ik ermee ga werken. Dit kost mij vrij veel tijd omdat dat de manaier is waarop ik werk. Ik zou eventueel eerder kunnen proberen ergens mee te werken maar ik denk dat ik dan even lang bezig ben omdat wanneer iets niet werkt ik alsnog erachter moet komen waarom niet. Tenslotten ben ik hier om iets te leren. Wel moet ik dignen misschien minder perfect willen uitwerken en sneller aan de volgende stap beginnen en pas gaan itereren als ik tijd over heb. Ik heb nu bijvoorbeeld nog maar 1 pattern half en moet eigenlijk al begonnen zijn aan mijn tweede. Ik hoop dat ik door de minor heen beter kan inschatten wat ik in een bepaalde tijd voor elkaar kan krijgen.
- clean vormgeving
- ide kan met nummers eventueel even maandag vragen aaan victor
- error moet eigenlijk alleen in js en dan kan je wel progressive enhancement doen dat css aan gaat ofzo iets
- tweede pattern is infor niet genoeg
- dan ook nog progressbar erbij
- idk
Dag 5
- 950 - eisen opdracht dooegenomen 1000 - vragen aan victor over die errors 1030 alle p eruit halen in html en js aanpassen 1100 vragen aan victor hoe ik id's kan ophalen 1110 vraag toepassen en helemaal uitgewerkttt 1130 1140 checken bij victor 1150 onderzoek voor afbeelding 1200-1300 pauze 1400-1500 css 2050-21-30 basic pattern toegevoegd 1 van de drie 2130 styling progressive disclosure 2145 remove chosen data js
- https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option -https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
Ik ben matig trots op mijn werk. Wat ik heb ben ik trots op maar ik had nog heel veel meer willen doen. Ik heb me onderschat in hoeveel tijd dingen zouden duren en wist dat het kiele kiele zou worden maar had gehoopt dat alles op het einde samen zou komen, maar dat is helaas niet gelukt. Ik vind het jammer dat ik het vak niet met een goed gevoel af kan ronden. Maar ik ben wel trots op mezelf. Ik had de hele tijd het gevoel dat ik er niet lekker in zat maaar ben daar in de laatste week wat meer ingekomen. Hoewel dit wel vrij laat was.
Ik heb veel geleerd over naamgeving en solide html schrijven zodat de styling makkelijker is. Wel vind ik dat ik nog beter prioriteiten mag stellen. Ik heb de neiging me in details te verliezen wat nu ook is gebeurd. Ik wist het ook wel maar dacht dat het uiteindelijk allemaal wel goed zou komen. Ik wil hier meer aan werken deze minor zodat het niet nog een keer gebeurt.
- Styling nog meer verbetern -> legends en labels kloppen nu niet helemaal
- Meer vragen toevoegen omdat dat met de code die ik heb geschreven vrij makkelijk zou moeten gaan
- Het formulier meer responsive maken
- De numbers stylen zoals de ns dat ook doet
- het pattern toevoegen waar je meerdere verkrijgers kan toevoegen
- het formulier over meerdere paginas opsplitsen zodat je meerdere vragen hebt
- progressbar maken
Personal notes
- opdracht requirements doornemen
- opslaan knop
- ook met warning werken niet alleen error maybe
- read me schrijven voor de code maybe?
- validation per fieldset met pop up of iets dergelijks
- de box kan je stylen met js
- naar de patterns kijken die ik wil doen (progressive disclosure. string voor postcode enzo, toevoegen van verkrijgers, de tekst informatie van dat andere document.) wiskunde voor iets ik weet niet meer wat
- met js toevoegen dat er ook alleen maar letters kunnen worden getypt geen nummers
- elf proof en styling bsn
- kijken naar formatting aanpassen met shortcut of prettier
- nadenken over text of number en kijknennaar js daarvoor en dat er nullen voorkomen als er minder dingen zijn toegevoegdd
- for plaatsen zon datalist doen
- met js datum van vandaag doen en maybe bij datum wijziging testament doen dat je niet later kan doen dan datum overleiden van persoon
- Check validity knop? maybe
- Scroll en dan validation als je wegscrollt terug kan scrollen naaar het vak dat niet goed is nog
- report.validity in js
- blur in js en user-focus ofzo voor css
- custom validity (je bent er bijna en je moet hier iets invullen)
idee required en progressive enhancement in html wel alles required maken en dan ook al een value nee geven dat dan stylen alsof het nog niet ingevuld is zodat de gebruiker he tniet mist if you get what i mean maar voor nu nog niet wel opschrijven in progressverslag
Id nummer maken en dan kan ik met for each loop en index getal herbruikbare code schrijven
off
id geven aan input
- overledene = xx
- notaris = nt
- partner = pn
andere regels
- Class = isProgressive
- class = progressiveRequirement
-
text
- name
-
datums -verleden
-
radio button
- ja en nee
-
number (max amount character)
- max amount character
- bsn
- telefoon
-
landcode
-
plaats
- plaats
- adres
- postcoe
datalist voor plaats voor nu doe ik tekst