Advent calendars

We are all in hell, or like Alex Russell dropped it: »Once code has left the datacenter, all a web developer can do is send thoughts and prayers.«1 Certainly, there’s a calendar for it: HTML Hell Advent Calendar. On the other hand this CSS Advent Calendar is very nice and good looking. We all love a good web performance so there’s a calendar for that too: the Web Performance Calendar.

If you like challenges: the Advent JS calendar presents you a code challenge every day. The Advent of Code however, delivers code challenges with a command line feeling.

Ici tu trouve un calendrier de l’Avent und hier einen in deutscher Sprache. Or build one yourself from this template?

And with this wonderfully designed Advent Calendar, you’ll get into the real christmas mood.


  1. Infrequently Noted: If Not React, Then What? 

Bookmarks (5)

(21) Are you also tired of writing @media (min-width: 48em) in your media queries? Even if not, the media query range syntax is a baseline 2023 feature and usable, so we can use @media (width >= 48em) instead, which is superior if you have large and complex queries. Read more at Matthias Zöchling’s CSSence: Superior Range Syntax. #css

(22) Discussions we always have about form features and accessibility, here is an evergreen by Adrian Roselli: Avoid Read-only Controls. #A11Y

(23) This was discussed and showcased on bluesky a lot in the last weeks: How To Add Border Images and Gradient Borders with Pure CSS. #CSS

(24) Here is a question I ask myself all the time: Design Systems WTF? #design systems

(25) Don’t cross the streams? Maybe. Combining light DOM and shadow DOM in a Web Component. #web components

Current color

Short tip: if you want to have items bordered in the same color as the text (i.e. a badge), use currentColor to set the border-color, instead of typing the color name or value twice. This comes in handy when long custom property names are used and removes a source of error…

.badge {
  border: 1px solid currentColor;
  border-radius: 3px;
  color: rebeccapurple;
  display: inline-block;
  padding: 3px 5px;
}

Continue reading Current color

Bookmarks (4)

(16) I’ve already collected 16 links, so it’s time to point out a few important rules of web development again: JavaScript dos and donts explains once again in detail all the cases where the use of Javascript makes sense.

(17) Speaking of Javascript! Does anyone still use jQuery? Well, yes, this blog, because I use a Classic template for ClassicPress and I haven’t gotten around to cleaning it up yet, but I can’t accept any other excuses: Why jQuery 4 is a good reminder to stop using jQuery.

(18) I like articles like this one: How do HTML event handlers work? It comes across as a beginner’s tutorial, but it deals with one of those topics where many people use something in the heat of the moment without really knowing anything about it.

(19) Just experienced this again in a discussion: should we sanitize HTML on the client side or the server side? Both! Sanitize Client-Side: Why Server-Side HTML Sanitization is Doomed to Fail.

(20) While the discussion about Web Components is still focused on the initial difficulties of use, we have already come a long way and are coming up with things like this: Server-first Web Components with DSD, HTMX, and Islands. We should all take a closer look at at least declarative shadow dom.

Bookmarks (3)

(11) I like to point out that I have been doing web development for around 100 years, but every now and then I come across people who have been doing it for a really long time. David Teller, for example, lists his impressive list of Programming Languages ​​That Blew My Mind here.

(12) The internet is already fairly full of instructions on how to build a blog, an editorial system or the user interface of the control station of a nuclear power plant with the static site generator 11ty. I always find basic tutorials refreshing: Building My Resume in HTML using Eleventy by Michael Engen.

(13) Speaking of control rooms for nuclear power plants, you could of course build them in Svelte today. You’ll probably need Sheepdog (Handling concurrency in Svelte) for that. But who knows.

(14) Sophisticated light and dark color schemes for websites are a challenge, so it’s good to hear that modern CSS now not only provides us with a default dark theme, but also a whole range of <system-color> variables to use. And if you think all the dark jokes have already been made: Come To The Light-dark() Side!

(15) Florian Buchberger programs in his blog Tic-Tac-Toe in HTML. Heard that right?

By eliminating duplicate positions with different histories – as mentioned earlier – we can further reduce the number of possible states. In the end, we are left with 443 possible game states – a totally reasonable number of HTML files.

Yes. This article is also relevant: Why HTML is a programming language.

Bookmarks (2)

(6) Heydon Pickering continues his gallery of HTML elements. On Halloween he philosophizes about the <body> element and sentences like:

Some even suggest removing the [<head> and <body>] tags to reduce document size. And I mean. Sure, go ahead, if you’ve already done literally everything else in your power to optimize your HTML payload (tip: ditch your utility class library).

… aren’t even the scariest part.

(7) Anyone who works with web components quickly comes across corners that seem strange. For example, listening to external events within a component… that can get scary. I remember recently saying to the team: “That can’t be the idea, there has to be something better!” I’m an optimist. Chris Ferdinandi not so much, he draws a completely different conclusion.

(8) OK, I don’t normally use my own reset CSS, but normalize.css. Jake Lazaroff’s is still very interesting. I think it’s nice, for example, how @layer is used here, where I’ve only just learned to use where().

(9) Oldie but goldie. A dear colleague likes to poke me with comments about TypeScript and Tailwind. I’m not a fan of the former and hate the latter. But I’m a passionate JSDoc lover. Today we learned: TypeScript types and JSDoc can be combined and that brings a lot if we use VSCode. Best of both worlds…

(10) In an incident recently, I was forced to read source code in Rust. I’ve been a programmer for a few years now, and somehow I understood the code, but not enough to tell someone else: you did something wrong… which would have led to a quicker solution. There’s really only one thing to do: Learn Rust.

Bookmarks (1)

(1) This long text by molily is worth thinking about: Something went wrong: Ways out of the JavaScript crisis. This is a detailed write-up of everything that is wrong with JavaScript.

(2) David Darnes writes, among other things, web components, such as this one: code-pen Web Component, with which code examples on a website can be opened as a code pen.

(3) Who hasn’t ever wanted to divide 100vw by 1px? Now possible with CSS. In the Safari Technology Preview. Or with the tan(atan2()) workaround by Jane Ori. Why do we need this? Scott Kellum writes about it in How unit division works in CSS, and how to use it today.

(4) The Information Architects are kind enough to share their Presentation Tips, which not only I, but honestly the entire western world could use.

(5) And finally a tool tip: I collect my links in my Obsidian instance. On the desktop I do this with Obsidian’s own Clipper plugin, but on mobile I use this little app: Bebop: Quick Notes.

Modernes CSS einführen… ist nicht leicht!

Die Ergebnisse des „State of CSS“ Surveys erscheinen bald und ich ahne jetzt schon mal, dass sich das seltsame Gefühl, das ich schon beim Ausfüllen hatte, noch verstärken wird. Ich finde ja die Antwortmöglichkeiten „Nie davon gehört“, „Kenne ich (habe es aber noch nicht verwendet)“ und „Habe ich verwendet“ wirklich treffend, hatte aber die ganze Zeit das schlechte Gefühl, zwar ein hochinformierter Entwickler zu sein („kenn’ ich, kenn’ ich, kenn’ ich, das auch und das sowieso“), mein Wissen aber viel zu selten einzusetzen. Oder zumindest nicht dazu komme, es einzusetzen. Das mag ja auch etwas mit dem Alter zu tun haben, als ich mit Mitte Zwanzig die Nächte durchgecodet habe und alles ausprobiert habe, was nicht bei drei wieder deprecated war, kannte ich zunächst wenig, habe aber alles ausprobiert und angewendet. Heute komme ich mit dem Set an CSS aus, das ich mir in den letzten Jahren (Jahrzehnten) erarbeitet habe. Altes CSS ist schneller geschrieben, als neues gelernt. Und dann ist ja auch immer die Browserunterstützung so wichtig!

Ich merke das an jungen Kollegen, die sich über jeden Fitzel an Information über neues Zeug erfreuen und ununterbrochen darüber reden wollen, was sie wieder geiles gestern Abend ausprobiert haben. Und ich frag man dann so, ob die keine Familie haben (natürlich nicht!).

Dabei ist das so schade! Viele der neuen Techniken sind hochinteressant und lösen meist Dinge elegant, die früher™ nicht gingen. Trotzdem habe ich, privat oder auf der Arbeit, viele Sachen noch nicht in den produktiven Einsatz gebracht, auch wenn sie schon breite Browserunterstützung haben, oder sogar baseline sind. Ein paar Beispiele: Container Queries, Subgrid, color(), den CIE LAB Farbraum, text-wrap: balance, @property, @layer, ich könnte noch Stunden so weiter machen, aber das ist schon so peinlich genug.

Aber mal ehrlich, was geht hier schief? Ganz einfach: das meiste funktioniert auch ohne diese Features. Es sind teilweise wirkliche Technologiesprünge, auf die wir ewig gewartet haben (bspw. Container Queries), aber sie wirken eben eher nach innen. Damals™, wir hatten ja nichts, als box-shadow eingeführt wurde, da kam uns das wie eine CSS-Mondlandung vor. Mit einer Zeile Code stundenlanges Grafikschnippeln und nächtelange Diskussionen mit renitenten Designer*innen auf einen Schlag aus der Welt geschafft, das war Fortschritt! Dagegen stinken Container Queries irgendwie ab, weil ging ja bisher auch ohne…

Zum Glück kann ich anderen Leuten sagen, sie sollen mal dies oder jenes ausprobieren. Denn wenn ich das (in meiner Position als Teamlead und Frontend-Graubart) mache, fühlen sich die jungen Leute legitimiert und haben noch mehr Spaß daran. Und hinterher können sie mir dann die Praxisbeispiele zeigen. ;) Alternativ könnte ich das natürlich auch so wie früher an meinen privaten Projekten ausprobieren, hier hätte ich ja noch eine Menge Raum dafür. Aber wie gesagt, ich hab ja Familie…

A case for „popover“

To my great surprise – the world has been turning a little faster lately – the popover attribute is already so widespread that we could use it. For all of you who have been living under a rock like me: with the popover attribute we can mark any element as a popover element, which is then initially display: none until it is called by a button or anchor that has entered its ID as popovertaget (or via JS HTMLElement.showPopover()). The element is then displayed similarly to a <dialog>, including a possible ::backdrop and everything. So like this:

<div id="mypopover" popover>Pop!</div>
<button popovertarget="mypopover">Let's pop!</button>

This is good because it is more flexible than the <dialog> element, which I usually use for such tasks. popover comes with its own Popover API. The behavior of <dialog> often had to be adapted and redirected (attention: focus!) for the things where we used it. With popover we now have an alternative. The most important thing about it is of course that we can drop complicated JavaScript for tooltips, coachmarks, menu overlays, etc.

Now the question naturally arises: what do we make into a popover and what remains dialog? And which problems that have previously been solved differently will be made easier with popover? A nice example of navigation can be found in this Codepen (via Jared White). Michelle Barker has a solution for tooltips that appear after a user action and which she therefore rightly calls Toggltips (via). The toggle tips show how progressive enhancement works without scripts: in Firefox, the necessary CSS Anchor Positioning is not yet implemented, there a click on a superscript number takes us to the bottom of the page (like a footnote), in Chrome, however, the toggle tip is then shown in all its beauty.

And what about accessibility? The relevant article on this was written by Hidde de Vries and Scott O’Hara, the good news: as long as a <button> is used to trigger the popover, the appropriate aria-expanded states are automatically included. However, since popover is only an attribute and not a separate element, we can quickly get into trouble with the role of the element, as the browser does not change it.

The popover attribute provides a starting point for building popover-like interactions on the web. Browsers don’t magically make your components accessible, that’s not a thing. But there are some specific keyboard behaviours included with popover […].

Svelte 5 is there

Since yesterday, Svelte 5 has reached stable status and can now be used productively or migrated. To be honest, I’m a little horrified by this, as a few projects have come together over the last few years. And as I now know, some of the most hated/loved constructs have been changed, which on the one hand made Svelte so special, but also got in the way from time to time.

And while the $: construct for reactively re-running statements is a neat trick, it turned out to be a footgun. It conflates two concepts (derived state and side-effects) that really should be kept separate, and because dependencies are determined when the statement is compiled (rather than when it runs), it resists refactoring and becomes a magnet for complexity.

So, happily pick up the Migration Guide and upgrade.

However, there is one thing I can’t stand about Svelte 5: the new fonts on the Svelte website! I’m such an Overpass fan!

Of course, the most salient difference is the typography. Previously, we used Overpass for everything except code — logo, headers, UI elements and body copy. It’s surprisingly versatile given its origins as an adaptation of Highway Gothic (the typeface used on road signs in the US since 1948, aside from a brief flirtation with Clearview), but it’s really not meant to be used for everything.