-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1886 lines (1770 loc) · 127 KB
/
index.html
File metadata and controls
1886 lines (1770 loc) · 127 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='description' content='Annikas website voor WAFS'>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/doghamburger.jpg">
<title>Annika WAFS</title>
</head>
<body>
<header>
<ul>
<li>
<dialog id="myDialogHackaton" aria-label="hackaton reflectie">
<form class="dialog" id="Hackaton" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>Hackaton</h3>
</div>
<h2>Reflectie</h2>
<a href="#reflectie">geupdate Reflectie>>
</a>
<div>
<div>
<h5>Inzichten</h5>
<p>Dit is een Een week project van eigenlijk 4 dagen. Eigenlijk was ik de hele week best
ziek, maar ben twee dagen wel naar school gegaan en heb wel wat kunnen doen. Ik was
verantwoordelijk voor de carousel en heb me daarin verdiept. Met de Chrome <a
href="https://developer.chrome.com/blog/carousels-with-css"
target="_blank">Canary Carousels</a> Heb ik onze carousel dus gebouwd. Dit vak
moest ik herkansen, omdat ik de helft natuurlijk heb gemist. Mijn plan was om de
kaartjes beter te maken, omdat ik ze echt lelijk vind en de card 'ben jij de
volgende?'</p>
</div>
<div>
<h5>Reflectie</h5>
<p>Het is voor mij een beetje apart project. Ik heb namelijk de helft gemist, waardoor
ik niet goed weet hoe ik reflecteren. Team verband ging super goed en kwamen snel op
een idee en voerden we onze eigen taken die we hebben opgebouwd goed uit. Voor mij
vond ik de hackaton een beetje onnodig, want het is maar een week project en zo veel
krijg je er ook niet uit. Je werkt wel snel aangezien je weet dat het snel af moet
zijn. </p>
<p>Daarnaast heb ik geexperimenteerd met de CSS only carousels, dus we hebben wel wat
geleerd!!</p>
</div>
</div>
<p>*Nieuwe versie werkt nog niet met de Map</p>
<div class="img">
<img src="img/HackatonLelijkl.png" alt="oude versie van mijn hackaton carousel">
<img src="img/newVersion.png" alt="">
<img src="img/areyounext.png" alt="">
</div>
<div class="leerdoelen">
<h4>Leerdoelen:</h4>
<div>
<h5><a href="#toegankelijkheid">Toegankelijkheid</a></h5>
<p>Cmd heeft ons er op aan gedrukt dat toegankelijkheid heel belangrijk is. Daar ben
ik het zeker mee eens, alleen ik heb eigenlijk nooit veel aandacht aan besteed
en zoals de alt teksten in mijn img verwaarloosd. Ik wil meer aandacht besteden
aan de toegankelijkheid van mijn website. </p>
<h5><a href="#georganiseerd">georganiseerd werken</a></h5>
<p> Afgelopen weken heb ik gemerkt dat ik heel slordig werk en nog oude code heb
laten staan en dingen verkeerd heb genoemd, of CamelCase en Snake_case door
elkaar te gebruiken. Als ik dit zo door ga, dan heeft mijn groepje moeite om
mijn code te begrijpen en ik wil dat dus voorkomen.
Ik wil daarmee zeggen dat ik graag georganiseerd en gestructureerd wil gaan
werken voor goede overzicht. - dus ook betere documentatie.
</p>
<h5><a href="#experimenteren">experimenteren</a></h5>
<p>Omdat we vaak snel een idee moeten bedenken om het project te beginnen, kies ik
meestal een idee wat mij 'makkelijk' lijkt en zeker te behalen is en durf ik
niet dingen te doen wat ik nog niet ken. Ik heb een gevoel dat ik nog bij de
basis ben, maar dat ben ik niet en ik wil meer kunnen doen. Daar bedoel ik mee,
meer experimenteren met animaties, css shapes en javascript!</p>
</div>
<section class="progress">
<h2>Process</h2>
<h5 id="toegankelijkheid">Toegankelijkheid</h5>
<div>
<div>
<p>Ik heb me in deze periode vooral gericht op de toegankelijkheid, omdat dit in
deze wat vreemde vijf weken eigenlijk het meest haalbare onderdeel was om
aan te
werken. Mijn doel was om de tab-volgorde goed in te richten. Dat is
grotendeels
gelukt, met uitzondering van de filters, waar het wat lastiger bleek. Voor
de
rest van de pagina werkt het navigeren met het toetsenbord zoals bedoeld.
Bij de
filters liep ik echter vast; ik wist niet goed hoe ik daar efficiënt uit kon
komen, waardoor je nu verplicht alle filteropties moet doorlopen. Helaas
ontdekte ik dit pas laat, toen Lorenzo er ook al mee bezig was. Verder heb
ik
ervoor gezorgd dat elke focus state duidelijk zichtbaar is door een
<code>outline: 0.1em solid var(--color-darker);</code> toe te passen.
</p>
<img src="img/Focus-state.png" alt="">
</div>
<div>
<p>Ik zie hier in de foto dat het niet helemaal klopt, maar de
<code> role="button"</code> laat zien aan de
screenreader dat hij als button dus dient.
<code>aria-expanded="false"</code>
laat weten dat hij dichtgeklapt is.<code>aria-controls="filtersForm"</code>
zegt waar hij voor is, dus wel ID hij gekoppeld mee is, alleen wij hebben
geen
filtersForm het moet filters zijn. <code>tabindex="0"</code> gaat hij met de
screenreader er toch heen, ook al is het geen officiele link element, wat
super handig is.
</p>
<img src="img/LabelActsButton.png" alt="">
</div>
<div>
<p>
Ik heb ook andere dingetjes er in toegevoegd zoals
<code>class="visually-hidden"</code> waardoor de screenreader wel gaat lezen
waar de <code><button>'lees meer'</button></code> voor is en zo
kunnen ze sneller door.
Later zat ik er ook aan te denken om een knop te maken met 'ga naar
resultaten' om
maar helemaal uit me hoofd geschoten.
</p>
<img src="img/visually-hidden.png" alt="">
</div>
</div>
<h5 id="georganiseerd">Georganiseerd werken </h5>
<div>
<p>Als ik eerlijk ben, twijfel ik of ik tijdens dit project echt gestructureerd
genoeg heb gewerkt. Ik heb relatief weinig gebruik gemaakt van classes en IDs,
waardoor ik moeilijk kan inschatten hoe georganiseerd mijn code daadwerkelijk
was. Lorenzo en ik hebben onze CSS apart geschreven en later samengevoegd. Voor
mij was mijn deel duidelijk, maar ik merkte dat Lorenzo in het begin moeite had
om mijn code goed te begrijpen.
</p>
<p>
Doordat we de eerste drie weken vooral met onderzoek bezig waren en ik in die
periode nauwelijks heb gecodeerd, voelde het in week 4 alsof ik opnieuw moest
beginnen. Dat gaf me een gevoel van haast, ik dacht vooral: “we móeten dit
halen.” Die druk zorgde ervoor dat mijn aanpak chaotisch werd. Achteraf zie ik
in dat ik meer aandacht had moeten besteden aan structuur en documentatie.
</p>
<p>
Desondanks hebben we als groep goed overzicht weten te houden, onder andere door
de CSS te verdelen over meerdere bestanden. Dat werkte prettig en hielp ons om
het geheel beheersbaar te houden.
</p>
<p>Bij het schrijven van de <strong>Weekly Nerd blog</strong> heb ik bewust
geprobeerd om mijn code gestructureerd te houden.
Toch merkte ik tijdens het schrijven van mijn voortgang dat het slecht html
geschreven was. Ik liep constant tegen
foutmeldingen en errors aan, wat soms best frustrerend was. In plaats van alles
te verwijderen en opnieuw te beginnen,
heb ik ervoor gekozen om stap voor stap mijn code te herschrijven. Daarbij heb
ik de CSS beter georganiseerd door stijlen
logisch te nesten en overbodige elementen te verwijderen. Dat hielp niet alleen
om overzicht te creëren, maar gaf me ook meer controle over de structuur van
mijn werk.
</p>
<div>
<img src="img/wrapCSS.png" alt="">
<img src="img/CSSHas.png" alt="">
</div>
</div>
<h5 id="experimenteren">Experimenteren </h5>
<div>
<p>Omdat we de eerste drie weken vooral bezig waren met onderzoek, zijn we pas in
week vier echt begonnen met het bouwen van de website. Daardoor heb ik me eerst
gefocust op het opzetten van een sterke basis — de structuur, styling en visuele
opbouw van de site. Pas daarna wilde ik aan de slag met animaties.
</p>
<p>Een groot deel van mijn tijd ging op aan het werken met SVG-animaties. De
<code>svg</code>
werkte niet zoals verwacht, waardoor ik een hele dag kwijt was aan het
herschrijven van de SVG en het testen van verschillende animatietechnieken. Dat
kostte veel tijd, maar ik heb er veel van geleerd over hoe SVG’s opgebouwd zijn
en hoe ze reageren op animatiecommando’s.
</p>
<p>Daarnaast wilde ik graag gebruik maken van <code>CSS Subgrid</code> om complexere
layouts
mogelijk te maken. Aangezien Subgrid relatief nieuw voor me was, heb ik daar ook
een volledige dag in geïnvesteerd om het goed te begrijpen en toe te passen. Het
werkte uiteindelijk goed, maar vergde veel uitzoekwerk.</p>
<p>Door deze technische uitdagingen had ik helaas te weinig tijd over om ook de
geplande animaties tussen pagina’s uit te werken. Wel heb ik een hover-animatie
op de button toegevoegd, een opslaan-animatie gemaakt én een laadanimatie
ontwikkeld voor de chatbot. Die laatste geeft gebruikers direct visuele feedback
wanneer de chatbot aan het laden is, wat bijdraagt aan een betere
gebruikerservaring.</p>
<p>Hoewel niet alles af is zoals ik het voor ogen had, ben ik trots op wat ik heb
bereikt en wat ik onderweg geleerd heb — vooral op het gebied van SVG’s, CSS
Grid en het combineren van visuele feedback met functionaliteit.
</p>
<div>
<img src="img/subgrid.png" alt="code van subgrid">
<img src="img/waitingAni.png" alt="">
<img src="img/savedAni.png" alt="">
</div>
</div>
</section>
<section id="reflectie">
<h3>Reflectie</h3>
<div>
<section>
<h4>WAFs</h4>
<p>Dit was ons eerste project, maar persoonlijk vond ik het niet heel bijzonder.
Dat
lag deels aan mijn situatie op dat moment: ik kwam net terug uit Vietnam en
had
moeite om weer in een goed werkritme te komen. De overgang was lastig en het
kostte me moeite om me opnieuw te focussen op het coderen. Ondanks die
uitdagingen ben ik uiteindelijk wel tevreden met het eindresultaat van het
project.
</p>
</section>
<section>
<h4>CSS</h4>
<p>Dit vak vond ik verrassend interessant. Er was zoveel mogelijk, en ik heb
echt
veel geleerd over visuele opbouw, layouttechnieken en creatieve styling.
Toch
vond ik de beschikbare tijd eigenlijk maar twee weken te kort om echt de
diepte in te gaan. Met meer tijd had ik zeker meer aandacht kunnen besteden
aan
de afwerking en het verfijnen van de stijl. Ondanks dat kijk ik er met een
goed
gevoel op terug.</p>
</section>
<section>
<h4>API</h4>
<p>In het begin vond ik dit vak ontzettend lastig. Ik begreep weinig van de
theorie
en het hielp niet dat er weinig klassikale uitleg was. Wanneer ik hulp nodig
had, waren de docenten vaak bezet met andere studenten, waardoor mijn vragen
zich opstapelden. Dat zorgde voor veel frustratie. Gelukkig ben ik blijven
doorzetten en ben ik achteraf wél tevreden met het eindresultaat. Ik heb er
uiteindelijk veel van geleerd, vooral door zelf te zoeken en proberen.
</p>
</section>
<section>
<h4>BT (Browser Technologies)</h4>
<p>Het leren werken met formulieren was heel waardevol. Voorheen hadden we
nauwelijks met forms gewerkt, dus het was een goede introductie in het
structureren van data-invoer. Toch sprak het vak me minder aan; het boeide
me
gewoon niet zo erg. Hoewel het leerzaam was, bleef mijn betrokkenheid
beperkt
omdat het onderwerp me persoonlijk minder trok.</p>
</section>
<section>
<h4>HCD (Human-Centered Design)
</h4>
<p>Hoewel ik het idee achter dit vak interessant vond, een website bouwen voor
een
echte opdrachtgever, had ik er inhoudelijk niet veel aan. Ik was vooral
gefocust op het zo snel mogelijk opleveren van iets bruikbaars voor de
persoon
waarvoor we het maakten. Daardoor had ik weinig ruimte om echt stil te staan
bij
het leerproces of de technische uitvoering. Het eindresultaat werkte dan ook
niet helemaal zoals ik had gehoopt.
</p>
</section>
<section class="onderdeelTwee">
<h4>Meesterproef</h4>
<p>Dit project was tot nu toe het leukste. Je werkte echt in een team aan een
opdracht van een externe partij en leverde uiteindelijk iets op dat door een
echte opdrachtgever gebruikt kon worden. Het samenwerken vond ik leerzaam en
motiverend. Wat minder goed werkte voor mij was de nadruk op UX design. Daar
ligt mijn interesse minder, en ik had gehoopt meer te kunnen bijdragen aan
de
technische kant. Er was ook een apart UX-team, en het was fijner geweest als
hun
resultaten eerder beschikbaar waren geweest. Dan hadden wij daar meteen op
kunnen voortbouwen bij het bouwen van de website.
</p>
</div>
</section>
</section>
</div>
<p class="disclaimer">*_diclaimer: Ik heb voor het verbeteren van mijn zinnen, het niet uitkomen
van code
AI gebruikt. AI heeft mij geholpen met vloeiendere zinnen op te schrijven.</p>
</form>
</dialog>
<button onclick="document.getElementById('myDialogHackaton').showModal()">
Reflectie&Leerdoelen
</button>
</li>
<li>
<dialog id="Fotos" aria-label="Fotos uit vietnam">
<form class="dialog" id="FotosVietnam" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>Foto's uit Vietnam</h3>
</div>
<div id="photoContainer">
<!-- JS zal hier alle wrapper-divs met afbeeldingen injecteren -->
</div>
</form>
</dialog>
<button onclick="document.getElementById('Fotos').showModal()">
Images
</button>
</li>
<li><a href="#"><img src="img/More.svg" alt="9 dots"></a></li>
<li><img src="" alt=""></li>
</ul>
</header>
<main>
<h1>
</h1>
<form id="searchForm" onsubmit="searchFunction(event)">
<input type="text" placeholder="Zoek..." required>
<button type="submit" id="searchButton"></button>
</form>
<div>
<section>
<dialog id="myDialog1" aria-label="weekly nerd1">
<form class="dialog" id="dialog1" method="dialog">
<div>
<button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 1</h3>
</div>
<div>
<section>
<h1><a href="https://kilianvalkhof.com/about/" target="_blank">Kilian Valkhof</a></h1>
<p>Kilian Valkhof is een veelzijdige front-end developer en user experience designer,
met een brede interesse
in alles wat de gebruikerservaring beïnvloedt — van back-end tot devops. Hij
omschrijft zichzelf het liefst als een "user experience developer", maar werd ooit
treffend een "strange generalist" genoemd, wat ook goed bij hem past. Kilian bouwt
tools die ontwerpers en ontwikkelaars helpen effectiever en met meer plezier te
werken aan het web. Hij schrijft regelmatig over toegankelijkheid, design tools en
zijn visie op het web. Daarnaast is hij actief binnen het Electron governance team
en deelt hij zijn kennis graag via blogs en lezingen. Zijn professionele
uitvalsbasis is Firstversionist.</p>
</section>
<img src="img/kilian_valkhof.jpeg" alt="kilian_valkhof face">
</div>
<article>
<section>
<h2>Rule of least Power</h2>
<p>Van de drie webtalen is JavaScript het meest gevoelig voor fouten, gevolgd door CSS,
terwijl HTML doorgaans het meest stabiel en betrouwbaar is. Dit past goed bij het
principe van progressive enhancement, waarbij een website in de basis functioneel
blijft, zelfs als geavanceerde functies uitvallen. Het idee is dat je vanaf een
solide fundament werkt en geleidelijk extra lagen toevoegt. Er bestaat een treffend
gezegde: “Wat je eenmaal geleerd hebt, hoef je niet opnieuw te leren.” In
webontwikkeling betekent dat vaak dat wat je vandaag bouwt, morgen nog steeds werkt.
Toch verandert de technologie voortdurend. Wat nu de standaard is, kan morgen
verouderd zijn. Daarom loont het om steeds op zoek te gaan naar slimmere,
efficiëntere manieren om hetzelfde doel te bereiken.
</p>
</section>
<section>
<h2>custom switches</h2>
<p>
Custom switches kun je heel goed maken met een standaard
<code><inputtype="checkbox"></code>.
Door <code>appearance: none</code> toe te passen, haal je de standaard browserstijl
weg
en kun je de checkbox volledig zelf stijlen — bijvoorbeeld als een
aan/uit-schakelaar.
</p>
<p>
Het voordeel is dat de checkbox nog steeds werkt zoals bedoeld: hij is toegankelijk,
werkt in formulieren, en je kunt via <code>:checked</code> eenvoudig reageren met
CSS of JavaScript.
Zo combineer je flexibiliteit in design met goede gebruikerservaring en
functionaliteit.
</p>
</section>
</article>
<section>
<h2>overal:
</h2>
<p>
Begin bij het maken van webinterfaces altijd met HTML – de minst krachtige maar meest
robuuste taal. Vanuit daar kun je uitbreiden met CSS en eventueel JavaScript. Er zijn
veel handige technieken om het meeste uit HTML en CSS te halen.
</p>
<p>
Zo kun je bijvoorbeeld een checkbox gebruiken als basis voor een custom switch. Door
<code>appearance: none</code> toe te passen, haal je de standaard stijl weg en kun je
het element volledig zelf vormgeven als een aan/uit-schakelaar met animaties en
kleurveranderingen.
</p>
<p>
Met de <code>:checked</code>-selector kun je reageren op de status van een input, wat
heel krachtig is in combinatie met visuele veranderingen. Daarnaast kun je met
<code>accent-color</code> de standaardkleur van formulierelementen zoals checkboxes,
sliders en radio-buttons aanpassen.
</p>
<p>
Als je werkt met ankers en vaste headers, dan is <code>scroll-margin-top: 100px;</code>
erg handig. Hiermee voorkom je dat een doel-element tegen de bovenrand van het scherm
geplakt zit wanneer je er naartoe scrolt.
</p>
<p>
Wil je visueel aangeven waar iemand naartoe is gesprongen op een pagina? Dan kun je
gebruikmaken van <code>:target</code>, gecombineerd met een <code>outline</code> en een
<code>transition</code> voor een vloeiende overgang. Zo wordt het gelinkte element
tijdelijk geaccentueerd.
</p>
<p>
Voor geanimeerde elementen zoals een <code><dialog></code> kun je met
<code>@starting-style</code> bepalen hoe het element er uitziet vóór de animatie begint.
Dit geeft meer controle over het startpunt van transities, zoals bijvoorbeeld een lagere
opacity of een kleinere schaal.
</p>
<p>
Met de nieuwe <code>:has()</code>-selector kun je CSS logica toevoegen die vergelijkbaar
is met een "if-statement". Bijvoorbeeld: <code>form:has(input:checked)</code> geeft je
de mogelijkheid om stijlen toe te passen op een element, afhankelijk van de inhoud. Dit
opent veel nieuwe ontwerpopties zonder JavaScript.
</p>
<p>
Tot slot kun je met <code>::picker</code> en <code>appearance: base-select;</code> in
Chrome de dropdown van een <code><select></code> zelf stylen. Zo kun je afwijken
van de standaard verticale weergave en bijvoorbeeld een meer horizontale layout maken.
</p>
</section>
<aside class="Mening">
<img src="img/easeCodeWN1.jpeg" alt="code voor kassa bon">
<section>
<h4>Mening:</h4>
<p> Dit was de eerste weekly nerd die we hadden, en ik vond het in het begin saai omdat
we de code die we kregen allemaal al wisten eigenlijk. maar ook fijn dat we het weer
ff te horen krijgen, want ik heb een half jaar niet gecodeerd dus was een goede
opfrisser.</p>
<p>Uiteindelijk vond ik het ook echt handig, omdat er ook nieuwe dingen tussen zaten,
oals de scroll-margin-top en :has en eigenlijk bijna alles wat hier boven in de list
staat!. dit is super handig voor mijn vakken die ik deze mijn heb.
</p>
</section>
</aside>
</form>
</dialog>
<button class="button" onclick="document.getElementById('myDialog1').showModal()">
<img src="img/kilian_valkhof.jpeg" alt="ikzelf">
<h2>Kilian Valkhof</h2>
</button>
</section>
<section>
<dialog id="myDialog2" aria-label="interesses die ik heb">
<form class="dialog" id="dialog2" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 2</h3>
</div>
<div>
<section>
<h1><a href="https://www.tudelft.nl/io/over-io/personen/alfrink-cp" target="_blank">Kars
Alfrink</a></h1>
<p>Kars Alfrink is ontwerper en onderzoeker op het snijvlak van technologie, samenleving
en spel. Hij promoveerde aan de TU Delft op het thema contestable AI, waarbij hij
onderzoekt hoe kunstmatige intelligentie zó ontworpen kan worden dat burgers er
actief invloed op kunnen uitoefenen. Met een achtergrond in interaction design en
ervaring in zowel de creatieve industrie als de academische wereld, combineert
Alfrink praktijkgericht denken met kritisch onderzoek. Zijn werk richt zich op het
ontwikkelen van publieke, betwistbare technologie die sociale waarden centraal
stelt.</p>
</section>
<img src="img/Kars_Alfrink.webp" alt="Kars Alfrink face">
</div>
<div>
<section>
<h2>Onderdeel 1: Definiëren van Contestable AI</h2>
<p>
Contestable AI betekent het gebruik van data-analyse en verwerking, aangepast op
basis van feedback, om beleid in de publieke sector te ondersteunen, te
beargumenteren of te automatiseren.
</p>
<p>
Publieke AI-systemen hebben invloed op de autonomie van mensen. Hiervoor zijn twee
belangrijke voorwaarden:
</p>
<ul>
<li>Accurate overtuigingen (accurate beliefs)</li>
<li>De mogelijkheid om naar eigen plannen te handelen (act on your plans)</li>
</ul>
<p>Dit betekent dat er veel onderzoek en testen nodig zijn om betrouwbare systemen te
ontwikkelen.</p>
<p>
Contestable AI is tegenwoordig een belangrijk onderwerp. Het verwijst naar
AI-systemen die maatschappelijke, ethische of juridische discussies oproepen. Deze
systemen krijgen vaak kritiek vanwege vooringenomenheid, gebrek aan transparantie of
schending van privacy. Ook nemen ze soms beslissingen zonder duidelijke uitleg.
</p>
<img src="img/ContestableAI.jpeg" alt="ContestableAI">
</section>
<section class="onderdeelTwee">
<h2>Onderdeel 2: Ontwerpen van Contestable AI</h2>
<p>
Het doel is om Contestable AI-systemen te maken die betwistbaar zijn. Dit betekent
dat menselijke tussenkomst en bezwaar mogelijk zijn. Gebruikers kunnen beslissingen
van het systeem beter begrijpen en corrigeren wanneer dat nodig is.
</p>
<p>
Bijvoorbeeld: je krijgt een boete omdat een flitspaal registreert dat je je telefoon
aan het stuur had. In werkelijkheid zat de telefoon vastgeplakt aan je raam voor
navigatie. Met een contestable AI-systeem kun je deze fout aanvechten en corrigeren.
</p>
<h4>Belangrijke ontwerpprincipes</h4>
<ul>
<li>Interactieve controles: Meer controle voor gebruikers, omdat AI niet altijd het
volledige verhaal kent.</li>
<li>Verzoek tot interventie:
<ul>
<li>Een mens is het oneens met een AI-beslissing</li>
<li>Er zijn kanalen om de beslissing te heroverwegen</li>
<li>Een menselijke controller heroverweegt en moet reageren</li>
<li>Dialoog tussen controller en gebruiker als arena voor debat</li>
</ul>
</li>
<li>Monitoren en signaleren: Patronen herkennen en mensen waarschuwen voor mogelijke
heroverweging.</li>
</ul>
<h4>Instrumenten voor toezicht</h4>
<ul>
<li>Algoritmenregister</li>
<li>Derde partijen worden geïnformeerd over het AI-systeem</li>
</ul>
</section>
</div>
<div class="Mening">
<img src="img/contestabilityLoopsAI.jpeg" alt="code voor kassa bon">
<section>
<h4>Mening:</h4>
<p> Ik heb persoonlijk helemaal geen interesse in AI, wat ik eigenlijk moet ik die wel
hebben
omdat het wel onze toekomst is. Maar ik vond dit eigenlijk best wel interessant om
te horen!
Ik vind het ook echt belangrijk dat het contestable AI door moet worden gevoerd,
omdat je
ten eerste ook echt mensen nodig hebt als 'third party' en er zit altijd veel fouten
in de
contested AI, want er wordt nooit uitgelegd in hun conclusies. Dit kan
nare/negatieve
gevolgen hebben. </p>
</section>
</div>
</form>
</dialog>
<button class="button" onclick="document.getElementById('myDialog2').showModal()">
<img src="img/Kars_Alfrink.webp" alt="favoriete koffie tentje">
<h2>Kars Alfrink</h2>
</button>
</section>
<section>
<dialog id="myDialog3" aria-label="weeklynerd3">
<form class="dialog" id="dialog3" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 3</h3>
</div>
<div>
<section>
<h1><a href="https://www.cassie.codes/" target="_blank">Cassie Evans</a></h1>
<p>Cassie Evans is een creatieve ontwikkelaar en educator gespecialiseerd in webanimatie
en motion design. Ze werkt als Lead Bestower of Animation Superpowers bij GreenSock,
waar ze ontwikkelaars inspireert en onderwijst in het gebruik van animaties op het
web. Cassie is een ervaren spreker op internationale conferenties en organiseert
workshops om diversiteit en inclusiviteit in de techwereld te bevorderen. Met haar
werk richt ze zich op toegankelijke, speelse en functionele gebruikersinterfaces.
</p>
</section>
<img src="img/Cassie_Evans.jpeg" alt="Cassie Evans face">
</div>
<!-- <img src="img/BeyondTweeningCOde.jpeg" alt="gsap code"> -->
<p class="onderdeelTwee">
GSAP (GreenSock Animation Platform) is een krachtige JavaScript API waarmee je vrijwel alles
op een website kunt animeren. Tijdens de presentatie heeft Cassie Evans vooral met code
gewerkt om te laten zien hoe veelzijdig GSAP is. Hieronder vind je een overzicht van enkele
veelgebruikte functies en voorbeelden:
</p>
<section class="wrap">
<div>
<h4>Basisanimaties</h4>
<ul>
<li><code>gsap.to(".box", {duration: 1, x: 918})</code>: Animeren van een element
met de class <em>box</em> naar een horizontale positie van 918 pixels binnen 1
seconde.</li>
<li><code>let tl = gsap.timeline(); tl.to(".box", {duration: 1, x: 918});</code>:
Een timeline aanmaken waarin je meerdere animaties kunt combineren en achter
elkaar afspelen.</li>
</ul>
</div>
<div>
<h4>Utility functies</h4>
<ul>
<li><code>gsap.utils.random(-100, 100)</code>: Geeft een willekeurig getal tussen
-100 en 100.</li>
<li><code>gsap.utils.random(["red", "blue", "green"])</code>: Selecteert willekeurig
een kleur uit de lijst.</li>
<li><code>gsap.utils.mapRange(0, innerWidth, -50, 50)</code>: Zet een waarde van het
ene bereik (bijvoorbeeld 0 tot schermbreedte) om naar een ander bereik
(bijvoorbeeld -50 tot 50).</li>
<li><code>gsap.utils.wrap(["red", "green", "blue"])</code>: Zorgt ervoor dat je door
een array kunt bladeren, en bij het einde weer bij het begin begint.</li>
<li><code>gsap.utils.wrapYoyo()</code>: Vergelijkbaar met wrap, maar wisselt ook de
richting (zoals een 'pingpong'-effect).</li>
<li><code>gsap.utils.pipe()</code> en <code>gsap.utils.snap()</code>: Geavanceerde
functies om waarden te transformeren of naar dichtstbijzijnde 'snap'-punten te
brengen.</li>
</ul>
</div>
<div>
<h4>Media Queries</h4>
<ul>
<li><code>gsap.matchMedia()</code>: Hiermee kun je animaties aanpassen op basis van
schermgrootte of andere media queries, vergelijkbaar met CSS media queries maar
dan voor animaties.</li>
</ul>
</div>
<div>
<h4>Animatiebesturing</h4>
<ul>
<li><code>play()</code>: Start of hervat de animatie.</li>
<li><code>pause()</code>: Pauzeert de animatie.</li>
<li><code>resume()</code>: Zet de animatie voort na pauze.</li>
<li><code>reverse()</code>: Draait de animatie om.</li>
<li><code>restart()</code>: Start de animatie opnieuw vanaf het begin.</li>
</ul>
</section>
<aside class="Mening">
<img src="img/BeyondTweeningCOde.jpeg" alt="code voor kassa bon">
<section>
<h4>Mening:</h4>
<p>Deze weekly nerd vond ik de leukste weekly nerd tot nu toe! Er kwamen toffe dingen
voorbij en het was duidelijk uitgelegd. Alleen ben ik inmiddels wel weer bijna alles
vergeten , dus ik zal zelf nog even op de website moeten duiken om te checken wat er
allemaal kan.</p>
</section>
</aside>
</form>
</dialog>
<button class="button" onclick="document.getElementById('myDialog3').showModal()">
<img src="img/Cassie_Evans.jpeg" alt="university RMIT vietnam">
<h2>Cassie Evans</h2>
</button>
</section>
<section>
<dialog id="myDialog4" aria-label="weeklynerd4">
<form class="dialog" id="dialog4" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 4</h3>
</div>
<div>
<section>
<h1><a href="https://adactio.com/" target="_blank">Jeremy Keith</a></h1>
<p>Jeremy Keith is een webontwikkelaar, auteur, spreker en muzikant uit Brighton,
Engeland. Hij is mede-oprichter van het ontwerp- en ontwikkelbureau Clearleft,
opgericht in 2005. Daarnaast is hij bekend van zijn boeken, zoals HTML5 for Web
Designers, en zijn blog op Adactio.com, waar hij regelmatig schrijft over
webstandaarden, technologie en cultuur. Jeremy speelt ook traditionele Ierse muziek
op de mandoline en bouzouki in de indieband Salter Cane. Hij is actief in de
gemeenschap als coach bij Codebar Brighton en organisator van de Homebrew Website
Club in Brighton.
</p>
</section>
<img src="img/Jeremy_keith.jpeg" alt="jeremy keith face">
</div>
<div>
<section style="width: 40%;">
<h4>Imperative Programming</h4>
<p>Imperative programming werkt door het stapsgewijs geven van instructies, zoals in
JavaScript:</p>
<ul>
<li>Maak een Array van items;<br>
<code>const items = ['amsterdam', 'rotterdam', 'utrecht'];</code>
</li>
<li>Loop through each item <br><code>for (let i = 0; i < items.length; i++) {
console.log(items[i]);
}</code></li>
</ul>
<p>Voorbeeld: Met JavaScript laat je een div zich gedragen als een button.</p>
<p>Imperative > JavaScript > div acts like a button</p>
<pre><code><div id="fakeButton" tabindex="0" role="button">Klik hier</div></code></pre>
<p>Jeremy Keith zei: <em>"JavaScript should only do what JavaScript can do."</em></p>
<p>Met andere woorden: als iets al op een semantische en toegankelijke manier kan in
HTML (zoals een <code><button></code> gebruiken), dan is dat meestal beter dan
het helemaal in
JavaScript nabouwen.</p>
<p>Als je iets helemaal zelf bouwt, heb je totale controle.</p>
</section>
<section style="width: 60%;">
<h4>Declarative Programming</h4>
<p>Declarative programming richt zich op het beschrijven van wat er moet gebeuren, zoals
in HTML:</p>
<ul>
<li>Declarative > HTML > button element</li>
</ul>
<p>CSS tips voor makkelijk responsive design:</p>
<p>Met <code>padding-inline-start</code> wordt de padding links ingesteld, maar als de
leesrichting van rechts naar links is, draait dit automatisch om — inclusief
ondersteuning voor verschillende talen.</p>
<p>Voor responsive font sizes kun je bijvoorbeeld gebruiken:</p>
<ul>
<li><code>font-size: calc(0.5rem + 0.666vw);</code></li>
<li><code>font-size: clamp(1rem, 0.5rem + 0.666vw, 1.5rem);</code></li>
</ul>
<p>
<a href="https://utopia.fyi/" target="_blank">Utopia.fyi</a> is een handige tool
voor het maken van
schaalbare, responsive designs. Je kunt er typografieschalen, spacing en
lay-outsystemen genereren die zich
automatisch aanpassen aan de schermgrootte. Zo beweegt je ontwerp soepel mee van een
klein mobiel scherm
tot een groot desktopscherm, zonder harde breekpunten of onnatuurlijke sprongen.
</p>
<p>Utopia maakt gebruik van moderne CSS-functies die je veel flexibiliteit geven:</p>
<ul>
<li><code>calc()</code>: Hiermee kun je waarden combineren, bijvoorbeeld:
<br><code>font-size: calc(1rem + 0.5vw);</code> past lettergrootte aan op basis
van viewportbreedte.
</li>
<li><code>clamp()</code>: Stelt een minimum-, voorkeurs- en maximumwaarde in.
Voorbeeld:
<br><code>font-size: clamp(1rem, 2vw, 2rem);</code> zorgt dat tekst schaalt maar
nooit te klein of te groot wordt.
</li>
<li><code>min()</code> en <code>max()</code>: Geeft respectievelijk de kleinste of
grootste waarde terug tussen meerdere opties.
<br>Bijvoorbeeld: <code>width: min(100%, 600px);</code> houdt het element
maximaal 600px breed.
</li>
<li><code>fit-content()</code>: Laat een element zo groot worden als de inhoud
vereist, tot een maximum.
</li>
<li><code>min-content</code> en <code>max-content</code>: Handig bij het bepalen van
breedtes gebaseerd op inhoud.
</li>
<li><code>repeat()</code>: Wordt veel gebruikt in grid layouts, zoals
<br><code>grid-template-columns: repeat(3, 1fr);</code> voor drie gelijke
kolommen.
</li>
<li><code>minmax()</code>: Combineert minimale en maximale grenzen voor flexibele
grids.
<br>Bijvoorbeeld:
<code>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));</code>
</li>
</ul>
<p>Door deze functies slim te combineren maak je websites die mooi en leesbaar blijven
op ieder schermformaat, zonder ingewikkelde media queries.</p>
</section>
</div>
<div class="onderdeelTwee">
<h4>Is declarative beter dan imperative?</h4>
<h5>Wat is het verschil tussen declarative en imperative?</h5>
<p>Bij <em>imperative</em> programming leg je stap voor stap uit hoe je iets wilt laten
gebeuren. Je richt je op het proces en de manier waarop iets uitgevoerd wordt. Bij
<em>declarative</em> programming geef je juist aan wat je wilt bereiken, en laat je
het systeem bepalen hoe dat gedaan wordt. Je focust dus meer op het gewenste
resultaat.
</p>
<p>De belangrijkste verschillen zijn:</p>
<ul>
<li><strong>Imperative:</strong> Je bepaalt <em>hoe</em> je het doel bereikt. <br>
<strong>Declarative:</strong> Je bepaalt <em>wat</em> je wilt bereiken.
</li>
<li><strong>Imperative:</strong> Je beheert alle stappen zelf. <br>
<strong>Declarative:</strong> Het systeem beheert de uitvoering van de stappen.
</li>
<li><strong>Imperative:</strong> Je schrijft vaak meer code, omdat je alles stap
voor stap moet beschrijven.</li>
<li><strong>Imperative:</strong> Er is meer kans op fouten door de complexiteit.
<br>
<strong>Declarative:</strong> Minder kans op fouten, maar soms ook minder
controle en flexibiliteit.
</li>
</ul>
<p>Welke aanpak beter is, hangt sterk af van de situatie en het doel dat je voor ogen
hebt.</p>
</div>
<aside class="Mening">
<img src="img/Imperativevs.jpg" alt="gsap code">
<section>
<h4>Mening:</h4>
<p>Ik denk dat ik op dit moment meer Imperative ben, omdat ik het stap voor stap wil
uitleggen
en zo dat ik het dus begrijp. Ik wil wel liever naar de Declarative kant gaan, omdat
het wel
gewoon makkelijker is en sneller. </p>
<p>Daarnaast vond ik het ook wel interessant hoe er eigenlijk twee kanten zijn in het
schrijven
van code taal, ik heb daar namelijk nooit overnagedacht. Hoewel ik niet bewust ga
nadenken
over hoe ik het declarative of imperative moet gaan schrijven, vind ik het wel
'fijn' om het
in mijn achterhoofd te hebben als het toch ooit aan bod komt! </p>
<p>En als ik het over de presentatie mag gaan hebben, vond ik het heel saai, want hij
vertelde
het niet heel erg met emoties. ik zag wel dat hij er echt een passie voor had wat ik
leuk
vond om te zien. maar ik raak snel afgeleid en dat gebeurde hier ook helaas. </p>
<section>
</aside>
</form>
</dialog>
<button class="button" onclick="document.getElementById('myDialog4').showModal()">
<img src="img/Jeremy_keith.jpeg" alt="7/11 sign">
<h2>Jeremy Keith</h2>
</button>
</section>
<section>
<dialog id="myDialog5" aria-label="weeklynerd5">
<form class="dialog" id="dialog5" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 5</h3>
</div>
<div>
<section>
<h1><a href="https://miocene.io/" target="_blank">Julia Miocene</a></h1>
<p>Julia Miocene is een creatieve front-end developer en designer die zich specialiseert
in het verkennen van de grenzen van CSS. Ze combineert technische precisie met
artistieke expressie en maakt indrukwekkende visuele experimenten zonder gebruik van
afbeeldingen of JavaScript. Haar werk laat zien wat er mogelijk is met puur CSS en
dient als inspiratie voor webontwikkelaars en ontwerpers wereldwijd.
</p>
</section>
<img src="img/julia_miocene.jpeg" alt="Julia Miocene face">
</div>
<div id="CodePen">
<iframe height="500" style="width: 100%;" scrolling="no" title="Pure CSS 3D Girl"
src="https://codepen.io/miocene/embed/eYaRgVE??default-tab=result" frameborder="no"
loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/miocene/pen/eYaRgVE">
Pure CSS 3D Girl</a> by Julia Miocene (<a
href="https://codepen.io/miocene">@miocene</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<iframe height="500" style="width: 100%;" scrolling="no" title="Sunday CSS #12: CSS Noodle"
src="https://codepen.io/miocene/embed/eYbazKN??default-tab=result" frameborder="no"
loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/miocene/pen/eYbazKN">
Sunday CSS #12: CSS Noodle</a> by Julia Miocene (<a
href="https://codepen.io/miocene">@miocene</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<iframe height="500" style="width: 100%;" scrolling="no" title="Sunday CSS #8: Mosquito"
src="https://codepen.io/miocene/embed/zYMVVPW??default-tab=result" frameborder="no"
loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/miocene/pen/zYMVVPW">
Sunday CSS #8: Mosquito</a> by Julia Miocene (<a
href="https://codepen.io/miocene">@miocene</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
</div>
<section class="onderdeelTwee">
<h4>basic informatie over de weekly nerd presentatie:</h4>
<p>Tijdens haar presentatie liet ze vooral voorbeelden zien van haar werk, waarbij ze haar
code voor een indrukwekkende animatie deelde. Wat opvallend is, is dat ze alles met pure
CSS heeft gedaan, zonder gebruik te maken van JavaScript of andere technieken. Ze
gebruikt best wel zware CSS-technieken — zoals complexe keyframe-animaties,
3D-transformaties en misschien ook filters en geavanceerde selectors — die normaal
gesproken niet altijd worden aangeraden vanwege performance en onderhoudbaarheid.
Eigenlijk zou je dit soort zware CSS niet zo vaak moeten toepassen in een project, omdat
het de browser kan belasten en de laadtijd kan vertragen. Maar zij kiest er bewust voor
om het toch te doen, juist om te laten zien wat er mogelijk is met CSS alleen.
Door zo “out of the box” te denken en deze uitdagende technieken toe te passen, heeft ze
zichzelf gedwongen om echt diep in CSS te duiken. Inmiddels kent ze alle ins en outs van
CSS heel goed. Nu ze die moeilijke en zware technieken onder de knie heeft, kan ze ook
de “makkelijke” dingen heel goed en efficiënt toepassen. Haar kennis van CSS is daardoor
erg breed en ze kan creatief uitpakken met wat CSS kan doen.</p>
</section>
<div class="Mening">
<img src="img/JuliaMicone.jpg" alt="">
<section>
<h4>Mening:</h4>
<p> Ik had niet door dat dit een WeeklyNerd-presentatie was en ik was bovendien te laat,
waardoor ik het eerste deel heb gemist. Toen ik er eenmaal was, heb ik goed
geluisterd, maar
geen aantekeningen gemaakt of foto's genomen, omdat ik niet wist dat zij de
WeeklyNerd was.
Het werk dat ze liet zien vond ik erg indrukwekkend. Vooral het namaken van
bijvoorbeeld die
mug, waarbij elk onderdeel een aparte, vloeiende animatie krijgt, lijkt me
ontzettend veel
werk. Ik denk dat ik haar tips zeker kan gebruiken in mijn eigen projecten.
</p>
</section>
</div>
</form>
</dialog>
<button class="button" onclick="document.getElementById('myDialog5').showModal()">
<img src="img/julia_miocene.jpeg" alt="7/11 sign">
<h2>Julia Miocene</h2>
</button>
</section>
<section>
<dialog id="myDialog6" aria-label="weeklynerd6">
<form class="dialog" id="dialog6" method="dialog">
<div><button class="closeDialog">Terug</button>
<h3>WEEKLY NERD 6</h3>
</div>
<div>
<section>
<h1><a href="https://everythingweb.org/getinspired/" target="_blank">Rosa Schuurmans</a>
</h1>
<p></p>
</section>
<img src="img/rosa_schuurman.webp" alt="Rosa Schuurman face">
</div>
<div>
<section>
<h4>basic informatie over de weekly nerd presentatie:</h4>
<p>Een hacker is iemand die vaardig is in informatietechnologie en vaak creatieve en
efficiënte oplossingen zoekt voor technische problemen.</p>
<ul>
<li><strong>KISS (Keep It Simple, Stupid):</strong> Houd je code en oplossingen zo
eenvoudig mogelijk. Complexiteit maakt systemen moeilijker te begrijpen,
onderhouden en debuggen.</li>
<li><strong>Learn By Trying:</strong> De beste manier om te leren is door dingen
zelf uit te proberen. Experimenteren en fouten maken horen bij het leerproces
van elke hacker.</li>
<li><strong>Bash kan een uitdaging zijn:</strong> Werken met de command line en
shell scripting vereist oefening en geduld, maar het is een krachtig hulpmiddel
voor automatisering en probleemoplossing.</li>
<li><strong>YAGNI (You Aren't Gonna Need It):</strong> Bouw alleen wat je echt nodig
hebt, en voorkom onnodige functionaliteiten die je project ingewikkelder maken
zonder direct voordeel.</li>
<li><strong>DRY (Don't Repeat Yourself):</strong> Vermijd duplicatie van code of
logica. Dit maakt je codebase overzichtelijker, gemakkelijker te onderhouden en
minder foutgevoelig.</li>
</ul>
<div class="Mening" id="Mening">
<img src="img/hackers.jpeg" alt="presentatie hackwers rosa">
<section>
<h4>Mening:</h4>
<p>Helaas heb ik weinig kunnen meenemen uit deze WeeklyNerd-presentatie, omdat
het begin
met verschillende voorbeelden voor mij niet helemaal duidelijk was, waardoor
ik de
draad
kwijt raakte.</p>
<p>Daarnaast wilde ze een demonstratie geven met een apparaat dat geen prettig