Chromium 150 shipped support for the text-fit property about two weeks ago. There's not a lot of information in the “New in Chrome 150” post, and I can't find anything about it on MDN yet, so let's figure out what we can do with this, by using the Editor's Draft.
This week I came across an interesting little detail when using :active pseudo classes on <button> elements. I can't remember if I already knew this or read about this at some point, but it led me down another tiny rabbit hole.
Something I've been wanting to build for a while: a way to show code and have a live preview as well. Of course I could use something like CodePen for this, but self-hosting, and self-building is the theme here.
I've just built a little reading progress indicator. One of the ways for me to keep from burning out, is playing around in my own little garden here, and combining and trying out new things. Even though progress bars like these have been built thousands of times before, it's still a fun little exercise.
Trying out something new today. Let's see if I can live blog this conference, collecting links and notes. Maybe some links to extra resources I think are helpful. You can leave this page open, and it will auto-update.
Or, how to make LLMs read content you're not actually using anywhere on your site. By just using correct HTML. So those AI overviews Google is shoving down our throats will make even less sense! In this post I'm exploring some ways to sneak in shit content for our scraping overlords. To poison the well, obviously.
This afternoon, while writing my previous post on teaching HTML, I thought it would be cool to test out how interest invokers worked. Here's a quick post on how I built a first prototype, showing previews for internal links on my blog.
Two years ago, right after my last CSS Day, the FDND posse handed me a thank you gift, wrapped in brown paper, with a postcard attached to it. It showed the well-known “Will code HTML for food” meme, but they changed it with a little Post-it note, overwriting the word “code” with “teach”. I think about this a lot lately.
Recently, Jim Nielsen has been playing with simplifying interactions with HTML and view transitions. This made me think about doing this after <form> submissions as well. How would this work?
Yesterday I added some longer code blocks, which made me reconsider white-space: pre and white-space: pre-line for those. Since this is a user preference, I added a simple toggle button just now. Here's a quick post on how I built this with Progressive Enhancement in mind, using the new element-scoped view transitions and some other things I learned recently. Buzzword galore for your enjoyment. Or mine.
It sounds silly, but I spent some hours adding <img> tags to my blog, for my previous two posts. Let's write something about Open Graph metadata, alt attributes, lazy loading, async decoding, <picture> and AVIF.
Last year I attended CSS Day for the very first time. And next month will be my 12th edition!
Yesterday Sanne posted some valuable feedback on my lazy prototype, which made me think about commenting on comments a bit longer.
One of the things I wanted to do on my own site, is play around with code, and some of the newer stuff in browsers. I hadn't done anything with dark mode before (apart from telling students it's available), so that's a nice thing to start with. I learned some stuff along the way, so time for another short piece.
All surgical staples got removed from my knee today, so that's a win. You could say I got rid of some optional closing tags. So, sitting with my leg up again, time for a knee-jerk reaction on Vasilis' comment the other day, your source looks nice (except for the style block, with the hard to read one-liners
.
According to Wikipedia, In the early Internet, the View Source technique helped people learn by example to create their own web pages.
I think dinosaurs would've laughed their asses off about how we treat short-term evolution these days, but fine.
Just added some hidden metadata to my HTML: Open Graph data and some bits for Mastodon.
Interesting question today: What are you doing for spam filtering?
— thanks for giving me a reason to write something on my girlfriend’s birthday, Sander! :) Nothing fancy, actually, to answer your question.
Added some basic commenting functionality. Apparently a <form> element, HTTP and a POST method still work.
Just added an RSS feed (Atom) to this beautiful website, and I immediately have some questions already. Like, why am I writing XML by hand? It's 2026.
Because I reused some bits from the old Fronteers website I built in 2007. I sort of reached my goal for today already, but let's come up with a todo list for myself.
Right, so I'm sitting at home, recovering from a knee surgery, with not that much to do. Apart from reading RSS feeds and worrying about the world. Time to pick up my own website again. All hand-coded and hand-written, because part of the worrying comes from all the AI bullshit out there.
In 2024 I decided to quit the conference business by the end of that year. After being involved with 30 conferences, both voluntary and as an entrepeneur, it was about time to focus on other things. For the first time ever, sweating my ass off, I took the stage, for a speech I had prepared during the breaks that day. Later that year I'd still help out with performance.now() for the last time, but the CSS Day audience was my precious.
Op 4 april 2019 overleed mijn vader. Dit was de speech die ik gaf op zijn uitvaart.
Zeven jaar. Een kwart van mijn leven heeft zich afgespeeld sinds mijn vorige stukje op deze schijndode site. Wat is er zoal gebeurd?
"Dat kan beter." Zo dacht ik in 2004 ook toen ik het zoveelste op maat gemaakte BeheerDing in elkaar geknutseld had en ontevreden was met het resultaat.
Gebruik het tabindex attribuut om van de standaard tab-volgorde op formuliervelden af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van het formulier door toetsenbordgebruikers. (R-pd.13.2) Breng groepering van invoervelden aan door middel van het fieldset element. (R-pd.13.3)
Gebruik het label element om tekst expliciet met een invoerveld in een formulier te associëren. (R-pd.13.1)
Gebruik geen frames op websites. Dit geldt voor zowel reguliere frames binnen framesets, als zogenaamde iframes. (R-pd.12.1)
Even los van het feit dat ze natuurlijk de beste browser op aarde maken, zijn een aantal Noren begonnen met een offensief tegen Internet Explorer 6.
Bij het aanpassen van een bestaande website: gebruik CSS voor de presentatie en lay-out van webpagina’s en zie af van tabellen voor lay-out. (R-pd.11.8) Bij het gebruik van tabellen voor lay-out: gebruik niet meer dan één tabel en gebruik zoveel mogelijk CSS voor de vormgeving van deze tabel. (R-pd.11.9) Bij het gebruik van tabellen voor lay-out: pas geen toegankelijkheidsmarkup toe. (R-pd.11.10)
Precies 8 jaar geleden publiceerde Jeffrey Zeldman zijn artikel To Hell With Bad Browsers. In datzelfde jaar kwam Internet Explorer 6 uit. En ondertussen bedienen we deze browser nog steeds met hacks. Wanneer wordt het tijd om IE6 ook de vinger te geven?
Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie. (R-pd.11.2) Groepeer rijen met alleen th (table header) cellen met het thead (table head) element. Groepeer de rest van de tabel met het tbody (table body) element. (R-pd.11.3) Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of rijen. (R-pd.11.4) Gebruik het header [sic] en id element [sic] voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen. (R-pd.11.5) Geef afkortingen voor tabellabels (th cellen) via het abbr (abbreviation) attribuut wanneer de lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken. (R-pd.11.6) Gebruik het caption element of heading markup voor het geven van een koptekst boven een tabel. (R-pd.11.7)
Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out. (R-pd.11.1)
Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen. (R-pd.10.1) Wees consistent met kleurgebruik bij het geven van betekenis. (R-pd.10.2) Zorg voor voldoende helderheidscontrast tussen tekst- en achtergrondkleur. (R-pd.10.3)
CSS dient in gelinkte bestanden geplaatst te worden en niet gemengd te worden met de HTML broncode. (R-pd.9.1) Pagina's dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund wordt. (R-pd.9.2)
Bij het aanbieden van downloadbare bestanden, informeer de bezoeker over hoe deze te downloaden en vervolgens te gebruiken. (R-pd.8.20) Serveer bestanden met het correcte MIME type. (R-pd.8.21) Open links naar downloadbare bestanden niet in een automatisch nieuw venster. (R-pd.8.22) Serveer downloadbare bestanden niet met opzet een onbekend of incorrect MIME type om de browser tot een bepaald gedrag te dwingen. (R-pd.8.23)
Links naar e-mailadressen: het e-mailadres waaraan het te versturen bericht is gericht dient zichtbaar te zijn in de linktekst. (R-pd.8.16) Links naar e-mailadressen: de URL in het href attribuut van een link naar een e-mailadres, mag alleen het mailto protocol en een e-mailadres bevatten. (R-pd.8.17) Pas geen technische maatregelen toe op de website om een e-mailadres te verhullen voor spam robots. (R-pd.8.18) Ga uiterst voorzichtig om met het publiceren van e-mailadressen van bezoekers van de website. Informeer de bezoeker over welke gegevens worden gepubliceerd op de site, of publiceer het e-mailadres van de bezoeker niet. (R-pd.8.19)
Geef blinde bezoekers extra mogelijkheden om lange lijsten met links over te slaan. (R-pd.8.12) Geef boven aan pagina’s met veel onderwerpen een pagina-index met links om naar de verschillende onderwerpen te navigeren. (R-pd.8.13)
Ontzie het accesskey attribuut. Als toch besloten wordt dit attribuut toe te passen, gebruik het alleen op links die door de hele site onveranderd blijven (bijvoorbeeld hoofdnavigatie) en beperk de sneltoetscombinaties tot nummers. (R-pd.8.11)
Voorzie in een logische volgorde van de links op de pagina. Gebruik het tabindex attribuut om van de standaard tabvolgorde van links af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van de pagina door toetsenbordgebruikers. (R-pd.8.9) Maak het tabben naar links niet onmogelijk. Verwijder niet de focus rectangle rondom een link of de mogelijkheid tot focus op een link. (R-pd.8.10)
Links moeten duidelijk te onderscheiden zijn van andere tekst. (R-pd.8.8)
Bij het gebruik van client-side script in combinatie met een link: maak de scriptfunctionaliteit een uitbreiding op de basisfunctionaliteit van de link. (R-pd.8.5) Bij het gebruik van client-side script in combinatie met een link: indien de link nergens naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-side script dan niet met een niet-werkende link. (R-pd.8.6) Bij het gebruik van client-side script in combinatie met een link: indien noodzakelijk, gebruik client-side script als een uitbreiding op server-side functies. (R-pd.8.7)
Beschrijf niet het mechanisme achter het volgen van een link. (R-pd.8.1) Schrijf heldere, beschrijvende tekst voor links. (R-pd.8.2) Gebruik het minimum aan tekst dat nodig is om te begrijpen waar de link naartoe leidt. (R-pd.8.3) Geef voldoende informatie over de bestemming van een link om onaangename verrassingen voor de bezoeker te voorkomen. (R-pd.8.4)
Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden. (R-pd.7.6) Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden. (R-pd.7.7)
Gebruik geen d-links op overheidswebsites. Het gebruik van het longdesc (long description) attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding. (R-pd.7.3)
Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst. (R-pd.7.1) Gebruik geen alt attribuut voor het oproepen van tooltips. (R-pd.7.2) Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen. (R-pd.7.4) Geef bij het gebruik van image maps voor zowel het img element als ieder area element een effectieve alternatieve tekst aan via het alt attribuut. (R-pd.7.5)
Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid. (R-pd.6.2)
Elk HTML of XHTML document moet beginnen met een geldige DocType Declaratie. (R-pd.6.1)
Produceer unieke, onveranderende URL's (R-pd.4.1) Dynamisch gegenereerde URL's dienen nog steeds naar dezelfde inhoud te verwijzen als inhoud wordt gewijzigd of toegevoegd. (R-pd.4.2) Vermijd het gebruik van sessies in URL's. (R-pd.4.3) Zorg voor doorverwijzing naar de nieuwe locatie bij het verplaatsen van informatie. (R-pd.4.4) Automatische doorverwijzing dient, indien mogelijk, uitgevoerd te worden door de server. (R-pd.4.5) Gebruik vriendelijke URL's, die leesbaar en herkenbaar zijn. (R-pd.4.6) Zet een leesbare, uitbreidbare directory-structuur op. (R-pd.4.7)
Geef betekenisvolle namen aan id en class attributen. (R-pd.3.15)
Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten. (R-pd.3.13) Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities. (R-pd.3.14)
Gebruik het cite element voor referenties naar personen en titels. (R-pd.3.10) Vermijd het gebruik van het q (quotation) element. (R-pd.3.11) Gebruik het blockquote element voor het aangeven van (lange) citaten. (R-pd.3.12)
Gebruik het dfn (definition) element voor het aangeven van termen, elders gedefiniëerd in een definitielijst. (R-pd.3.7) Gebruik het ins (insertion) en del (deletion) element voor het aangeven van regelmatige wijzigingen in de inhoud van een pagina. (R-pd.3.8) Vermijd het gebruik van het sup (superscript) en sub (subscript) element waar mogelijk. (R-pd.3.9)
Gebruik het em (emphasis) en strong element voor het aangeven van nadruk. (R-pd.3.5)
Gebruik het p (paragraph) element voor het aangeven van paragrafen. Gebruik niet het br (linebreak) element voor het scheiden van paragrafen. (R-pd.3.4)
Schrijf zowel grammaticaal correcte, als beschrijvende markup. (R-pd.3.1) Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken. (R-pd.3.2) Sla in de markup geen niveaus in de hiërarchie van kopregels over. (R-pd.3.3)
Bouw een website volgens de richtlijnen van de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C. (R-pd.2.9)
Indien client-side script wordt gebruikt, gebruik ECMAScript volgens de specificatie. (R-pd.2.7) Indien men elementen in de HTML hiërarchie manipuleert, maak gebruik van de W3C DOM volgens de specificatie. (R-pd.2.8)
Gebruik CSS Level-2.1 volgens de W3C specificatie voor het vormgeven van overheidswebsites. (R-pd.2.6)
Bij de bouw van een nieuwe website: gebruik van HTML 4.01 of XHTML 1.0 de Strict variant. (R-pd.2.4) Gebruik geen frames op overheidswebsites. Gebruik daarom ook niet van HTML 4.01 of XHTML 1.0 de Frameset variant. (R-pd.2.5)
Gebruik HTML 4.01 of XHTML 1.0 volgens de W3C specificaties voor de markup van overheidswebsites. (R-pd.2.1)
Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt. (R-pd.1.3)
Deze week de tweede richtlijn: Bouw websites volgens het principe van gelaagd bouwen. (R-pd.1.2)
Zo, dat is alweer een tijd geleden. De afgelopen keer kon ik geen gaatje vinden om een stukje te schrijven. Het leven van een weinig studerende student heeft ook zo z'n drukke periodes.
Dat is het eerste gespreksonderwerp dat mij nu, zittend in een halfvolle trein van hartelijk Rotterdam richting huiselijk Almere, een avondje badminton tegemoet reizend, te binnen schiet. Eigenlijk is bardienst een betere verwoording, maar ik probeer natuurlijk consequent te blijven wat betreft de titels; een detail dat de doorgewinterde lezer, die op dit moment waarschijnlijk ingesneeuwd is, allang opgevallen was.
Dat was wat mij donderdag jl. in een grimmig Almeers bos overkwam. Verlaat door een uitgelopen telefoongesprek met mijn vader sprong ik op mijn roestig ros. Met nog 15 minuten op de klok om het traject Almere-Haven - Sporthal de Toekomstgroep af te leggen deed de adrenaline zijn werk en pompte mijn hart alsof het een inscriptie van Grundfos wilde ontvangen. Rond 20:50 uur kwam de satan der fietsenden om de hoek van het onaffe Almeerse kasteel kijken; een lekke band.
Lekker als een onderwerp zich precies op het goede moment aandient. Zoals natuurlijk altijd iedereen uiterst gezellig doet na de training bleven wij ook gisteren weer even zitten om onder het genot van een koud biertje de afgelopen dagen te bespreken. Opeens echter voelde ik me niet meer thuis in het voor de rest levendige gesprek; twee mannen hadden het over afvallen. En wel in die context dat ze er zelf relatief actief mee bezig waren.
Vrijdagavond was deze film op tv. Even lekker onderuitzakken en maar eens beoordelen of we hier te maken hebben met pulp. Niet dat de uitkomst van die beschouwing ook maar enigszins boeit. Het gaat om het bewegende beeld en de positie die je op de bank hebt ingenomen. Dat eerste was er genoeg en dat tweede bracht genoegdoening. De meest onwaarschijnlijke rampen kwamen voorbij. Sowieso natuurlijk natuurlijke, maar ook culturele, zoals een vliegtuigongeluk en zelfs het huwelijk.
Note to self: overdag minder vaak je kopje volgooien met dat zwarte spul. Je blijft er te lang te actief van. Nee, uitte het zich eigenlijk maar in actief zijn. Verschrikkelijk loom en ontiegelijk sloom; dat is een betere samenvatting van mijn huidige gemoedstoestand. En dat terwijl ik toch wel nuttige dingen heb gedaan vandaag. Vanochtend bijvoorbeeld lekker uitgeslapen. Toch geen reet te doen. Hooguit voor school, maar daar zijn ze toch niet zo snel. Niet alleen van begrip, maar ook qua begrip tonen. Werkelijk te idioot voor woorden wat daar allemaal gebeurt. Zo gek, dat ik er vast nog wel eens wat over ga zeggen binnenkort. Niet nu. Nu ben ik te moe en eigenlijk te futloos.
Welkom op mijn log, kronkels.net. Na een zestal columns te hebben geschreven, kwam ik erachter dat schrijven toch wel een prettige bezigheidstherapie is. Vandaar dus dat ik vanaf vandaag het web ga bestoken met mijn gedachtes, mijn kronkels.
Schrijven over kerst rond deze tijd van het jaar is natuurlijk volkomen onlogisch en waarschijnlijk had dan ook niemand dit verwacht. Heel goed, want verwachtingen, zowel negatieve als positieve, zijn de moeder der alle kwaad. Ga het maar eens na. Tegenwoordig wordt er bijvoorbeeld van je verwacht dat je een kerstkaart stuurt naar al je kennissen. Zelfs die paar die je nooit ziet en alleen tegenkomt in een stoffig adresboekje, dat je compleet doorworstelt om, ironisch genoeg, maar niemand te vergeten, want dat kun je natuurlijk niet maken. Althans, dat is de gang van zaken in huize K. Eentje waaraan ik niet deelneem.
Ben ik het voor u? Een bekende, iemand waarmee u regelmatig omgaat? De meeste badmintonners, die ik ken, weten ook wie deze column schrijft. Hopelijk is deze groep echter niet de enige die dit stukje leest, maar dat zullen we nooit weten. Misschien moet ik me eens wat meer verdiepen in de uitgebreide statistieken. Hoewel, "statistieken zijn als bikini's; wat ze tonen is suggestief, wat ze niet tonen is essentieel". Hoe dan ook, het relevante feit in dit geheel is dat mensen die je kennen anders communiceren dan diegenen die dat niet doen. Een reden temeer om anoniem te schrijven. Het blijven is een utopie. Ik heb het al vaker als verweermiddel gebruikt, maar bij deze nog een keer. Ik hoef niet per se leuke reacties, puur ter streling van het ego — in dit geval dat van mij. Een geforceerde mening vereist te veel inspanning om inhoud te hebben. Waar je iets mee kunt, is opbouwende kritiek, waarbij niet wordt gekeken naar de schrijver en naar de eventueel aanwezige persoonlijke verhouding, maar naar wat er geschreven staat. Daarom; geef een teken van leven, geef kritiek. Een goed voorbeeld hiervan is Cock, die op een wijze subtiele wijze aangaf dat een lezer zonder woordenboek deze column niet overleeft. Ik neem aan dat hij daarmee doelt op kennis?
Alweer zo'n heerlijke ondefinieerbare term. Als gewenning aan deze column u niet overgeslagen heeft, zou u denken dat ik het erom doe. Dat voorlaatste activum mag, maar bedaar daarmee niet uw waarschijnlijk verstrekkende gedachtegang en stel uzelf de vraag wat u onder karakter verstaat. Ziet u deze tekst als één aaneenschakeling van symbolen met een kenmerkende aard waardoor die zich onderscheidt? Misschien is karakterologie dan wel wat voor u en heeft u wellicht uw roeping misgelopen. Of denkt u bij dat woord aan Ferdinand Bordewijk, boekverslagen op een middelbare school of een film uit 1997? Over het laatste kan ik niet meepraten, maar over het eerste eigenlijk evenmin. Voor school verplicht literatuur gadeslaan, zonder enig hoger doel, past gewoonweg niet bij mijn karakter. En hier snapte u zonder uitleg of vragen over welke betekenis ik het had. Een interessant fenomeen, dat wel een uitweiding kan gebruiken.
Een teleurstelling vooraf; deze column is niet als retrograde geschreven. Naar mijn idee is het sowieso vrij onmogelijk om op die manier een column, die door iedereen wordt begrepen, te produceren. En dat is natuurlijk wel wat we willen. Op een gekunsteld verhaal, bestaande uit zinnen als "iets aparte tetra-pastei" of "mooie zeeman nam Anna mee, zei oom", zit waarschijnlijk niemand te wachten. Het schrijven van veelvuldige παλινδρομος (palin dromos; terug lopen) blijft voor mij een droomoord en laat ik dan ook graag over aan Battus.
Daar zitten we weer; u in een positie waarin u makkelijk leest, ondergetekende met vrij onregelmatig uitbrekend angstzweet op het voorhoofd. Waarover deze maand te schrijven? De hamvraag voor de komende twee uur. Plannen is nooit mijn sterkste punt geweest, maar dit keer zie ik het positief in. De vakantie, voor (c.q. door, zo u wilt) zowel school als badminton, is zo goed als begonnen. Twee maanden lang zullen we onze badmintoncapriolen op een andere plek gestalte moeten geven. Hetzij op een met zonlicht overgoten strand in Frankrijk, een met extra zand bestrooide arena in Spanje, een door regen ondergelopen plein in Engeland, een met bier geplaveide straat in Duitsland, een met zweet besprenkeld voetbalveld in Portugal, een met gras begroeide camping in Hongarije, of gewoon in een met barbecuelucht besmeurde achtertuin in Nederland. Hoe en waar dan ook; keep the badminton soul alive.
Om maar meteen door de virtuele brievenbus van de deur in huis te vallen; een column, wat is het en wat maakt dit fenomeen het lezen waard?