WEEKLY NERD 4

Jeremy Keith

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.

Imperative Programming

Imperative programming werkt door het stapsgewijs geven van instructies, zoals in JavaScript:

Maak een Array van items;
const items = ['amsterdam', 'rotterdam', 'utrecht'];
Loop through each item
for (let i = 0; i < items.length; i++) { console.log(items[i]); }

Voorbeeld: Met JavaScript laat je een div zich gedragen als een button.

Imperative > JavaScript > div acts like a button

<div id="fakeButton" tabindex="0" role="button">Klik hier</div>

Jeremy Keith zei: "JavaScript should only do what JavaScript can do."

Met andere woorden: als iets al op een semantische en toegankelijke manier kan in HTML (zoals een <button> gebruiken), dan is dat meestal beter dan het helemaal in JavaScript nabouwen.

Als je iets helemaal zelf bouwt, heb je totale controle.

Declarative Programming

Declarative programming richt zich op het beschrijven van wat er moet gebeuren, zoals in HTML:

Declarative > HTML > button element

CSS tips voor makkelijk responsive design:

Met padding-inline-start wordt de padding links ingesteld, maar als de leesrichting van rechts naar links is, draait dit automatisch om — inclusief ondersteuning voor verschillende talen.

Voor responsive font sizes kun je bijvoorbeeld gebruiken:

font-size: calc(0.5rem + 0.666vw);
font-size: clamp(1rem, 0.5rem + 0.666vw, 1.5rem);

Utopia.fyi 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.

Utopia maakt gebruik van moderne CSS-functies die je veel flexibiliteit geven:

calc(): Hiermee kun je waarden combineren, bijvoorbeeld:
font-size: calc(1rem + 0.5vw); past lettergrootte aan op basis van viewportbreedte.
clamp(): Stelt een minimum-, voorkeurs- en maximumwaarde in. Voorbeeld:
font-size: clamp(1rem, 2vw, 2rem); zorgt dat tekst schaalt maar nooit te klein of te groot wordt.
min() en max(): Geeft respectievelijk de kleinste of grootste waarde terug tussen meerdere opties.
Bijvoorbeeld: width: min(100%, 600px); houdt het element maximaal 600px breed.
fit-content(): Laat een element zo groot worden als de inhoud vereist, tot een maximum.
min-content en max-content: Handig bij het bepalen van breedtes gebaseerd op inhoud.
repeat(): Wordt veel gebruikt in grid layouts, zoals
grid-template-columns: repeat(3, 1fr); voor drie gelijke kolommen.
minmax(): Combineert minimale en maximale grenzen voor flexibele grids.
Bijvoorbeeld: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Door deze functies slim te combineren maak je websites die mooi en leesbaar blijven op ieder schermformaat, zonder ingewikkelde media queries.

Is declarative beter dan imperative?

Wat is het verschil tussen declarative en imperative?

Bij imperative 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 declarative 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.

De belangrijkste verschillen zijn:

Imperative: Je bepaalt hoe je het doel bereikt.
Declarative: Je bepaalt wat je wilt bereiken.
Imperative: Je beheert alle stappen zelf.
Declarative: Het systeem beheert de uitvoering van de stappen.
Imperative: Je schrijft vaak meer code, omdat je alles stap voor stap moet beschrijven.
Imperative: Er is meer kans op fouten door de complexiteit.
Declarative: Minder kans op fouten, maar soms ook minder controle en flexibiliteit.

Welke aanpak beter is, hangt sterk af van de situatie en het doel dat je voor ogen hebt.

Mening:

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.

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!

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.

WEEKLY NERD 11

Pre-CSS day

Tijdens Pre-CSS Day gaven twee gastsprekers een presentatie over hun werk en visie. Daarnaast liet Sanne het werk van een aantal studenten zien, wat een mooi kijkje gaf in de creatieve en technische projecten die binnen de opleiding zijn ontwikkeld.

Nils Bilder

Er is een CSS-evolutie! > van vaste breedtes naar dynamische wrappers.


                                        .wrapper {
                                            max-width: 75rem;
                                            margin: 0 auto;
                                            padding: 0 1.5rem;
                                          }


                                            .wrapper {
                                              width: min(100% - 3rem, 75rem);
                                              margin-inline: auto;
                                            }

Nils Over de connectie van Figma met CSS

Nils deelde zijn voorkeur voor Figma, dat ongeveer zes jaar geleden werd geïntroduceerd, boven Photoshop. Volgens hem is Figma beter geschikt voor modern UI/UX-ontwerp omdat de tools beter aansluiten bij hoe ontwikkelaars denken, vooral omdat ze lijken op het schrijven van code. Dit maakt de overgang van ontwerp naar ontwikkeling veel soepeler en intuïtiever.

In Figma zijn de meest gebruikte eenheden pixels (px), percentages (%) en rems (rem). Deze eenheden komen nauw overeen met de eenheden die gebruikt worden in CSS, zoals px, %, rem, em, ch en ex, wat zorgt voor een consistente en efficiënte ontwerp-naar-code workflow. Vooral met het toenemende gebruik van viewport-gebaseerde eenheden en container queries in CSS, wordt deze afstemming nog waardevoller.

Mening:

Ik heb niet heel veel te zeggen over Pre CSS Day. Het was wel een leuke verrassing om mijn eigen werk op het grote scherm terug te zien — dat had ik echt niet verwacht. Niels hadden we eerder al gehad, dus dat voelde een beetje herhaling. Tijdens de tweede presentatie zat ik met tijdsdruk en raakte ik vaak afgeleid, waardoor ik er minder uit haalde. Het blijft uiteindelijk een presentatie, en hoewel het altijd inspirerend is om mensen met passie te zien spreken, bracht het deze keer weinig nieuws voor mij. Wel leuke sfeer en fijne mensen.

Kilian Valkhof

Kars Alfrink

Cassie Evans

Jeremy Keith

Julia Miocene

Rosa Schuurman

Niels Leenheer

Erik Kroes

iO Digital

Q42

Pre-CSS day

Marieke de Hoop