Dan Q – Dan Q

For anyone who :has :not yet seen the magic of modern CSS

Modern CSS is freakin’ amazing. Widespread support for nesting, variables, :has, and :not has unlocked so much potential. But I don’t yet see it used widely enough.

Suppose I have a form where I’m expecting, but not requiring, a user to choose an option from each of several drop-downs. I want to make it more visually-obvious which drop-downs haven’t yet had an option selected. Something like this:

<select name="guess[69427976b65e3]">
  <option></option>
  <option value="1">First answer</option>
  <option value="2">Second answer</option>
  <option value="3">Third answer</option>
</select>

This is close to an actual example generated as part of a Christmas quiz game I made the other year, and dusted off recently.

Suppose I want to style that <select> when the first, default, “empty” option is selected.

That could be as simple as this:

select:has(option:not([value]):checked) {
  outline: 6px dotted red;
}

It’s a slightly gnarly selector, but thanks to nesting you could choose to break it into multiple blocks if you preferred.

What that’s saying is:

a <select>
- that contains an <option>
  - where that <option> does not have a value="..."
  - and that <option> is currently selected
gains a dotted red outline around it

Or in short: if the default option is selected, highlight it so the user knows they haven’t chosen a value yet. Sweet!

Animation showing a select box which receives a dotted red border each time its 'blank' first value is selected. — Obviously you could expand this to have different effects for *every* value, if you wanted.

I can’t understate how valuable it is that we can do this in CSS, nowadays. Compared to doing it in JavaScript… CSS gives better performance and reliability and is much easier to implement in a progressively-enhanced manner.

Here’s another example, this time using a fun “dress-up Dan” feature I from a redesign of my blog theme that I’m hoping to launch in the New Year:

If you’ve ever wanted to know what I’d look like if I were an elderly Tom Scott, my new design will answer that question!

Every single bit of interactivity shown in the video above… from the “waving” Dan to the popup menu to the emoji-styled checkboxes to the changes to t-shirt and hair colours… is implemented in CSS.

The underlying HTML is all semantic, e.g. the drop-down menu is a <details>/<summary> pair (with thanks to Eevee for the inspiration); its contents are checkbox and radiobutton <input>es; the images are SVGs that use CSS variables (another killer feature these years!) to specify colours (among other things), and virtually everything else… is CSS.

Consider this:

:root {
  /* Default values for Dan's t-shirt, hair, and beard colours used throughout the site: */
  --dan-tshirt: #c3d4d7;
  --dan-hair: #3b6f8f;
  --dan-beard: #896a51;

  /* ...more variables... */
}

/* When the page contains a "checked" checkbox, update some variables: */
:root:has(#dan-tshirt-color-white:checked)  { --dan-tshirt: #c3d4d7; }
:root:has(#dan-tshirt-color-purple:checked) { --dan-tshirt: #7429a8; }
/* ... */
:root:has(#dan-hair-color-natural:checked)  {   --dan-hair: #896a51; }
:root:has(#dan-hair-color-blue:checked)     {   --dan-hair: #3b6f8f; }

/* When "dye beard" is checked, copy the hair colour: */
:root:has(#dan-dye-beard-toggle:checked)    {  --dan-beard: var(--dan-hair); }

The ability to set :root CSS variables, based on the status of user-controlled elements like checkboxes within the document, unlocks amazing options for interactivity. It also works in smaller scopes like HTML Web Components, of course, for encapsulated functionality.

If you’re still using JavaScript for things like this, perhaps it’s time you looked at how much CSS has grown up this last decade or so. CSS gives you performance benefits, less fragility, and makes it easier for you to meet your accessibility and usability goals.

You can still enrich what you create with JavaScript if you like (I’ve got a few lines of JS that save those checkbox states to localStorage so they persist through page loads, for example).

But a CSS-based approach moves more of your functionality from the “nice to have” to “core” column. And that’s something we can all get behind, right?

Ideal Conditions Calculator

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Greg Sadetsky, in Ideal Conditions Calculator

Waiting for the ideal time to finally do that thing you’ve been procrastinating on? Greg’s clever new micro-site will help you decide the perfect time to do it (and no, it doesn’t necessarily just say “now!”).

Duck shunning

I’m not sure which of our children was last in this bath, but the configuration in which they’ve left their toys makes me feel as though I’m the subject of some kind of waterfowl-related shunning.

Perhaps they finally got wind or my heretical opinions on the God of Ducks (may he throw us bread) and they’ve collectively decided to disassociate from me?

Note #27761

A few pockets of the morning’s freezing fog still cling to the hedgerows as the dog and I set out on a chilly West Oxfordshire morning walk.

Note #27758

Obviously I wasn’t planning on going to the US anytime soon, but if I did… they might struggle with my visa application when I put every “email address I’ve used for the last 10 years” on, because I actively use a variety of catch-all domains/subdomains.

I’ve probably missed some addresses (e.g. to which I’ve only ever received spam that’s since been deleted), but a conservative estimate of the number of personal email addresses which I’ve sent mail from or to would be… 7,669 email addresses. 🤣

CSS Lightbox with Alt Text Viewer

Rather I show you than tell you? Here’s a demo page.

Right now, my blog uses a CSS-based approach using anchors and the <dialog> element to make “lightbox” images work, but I plan to replace this soon with a similar approach that uses the <details> and <summary> elements to provide a more semantically-sound and accessible approach¹.

An additional thing I wanted to implement – again, for the next version of my blog’s theme – was an “alt text viewer”. Mastodon has one, and it’s excellent². Mastodon’s viewer requires JavaScript, but I was inspired when I saw James come up with a CSS-based version that used a re-styled checkbox.

But I wanted to do one better. Displaying alt text, too, seems like an example of what would semantically be best-represented by a <details>/<summary> pair.

Clicking on the image shows a larger version in a lightbox; clicking on the ‘alt’ button shows the alt text… all in semantic HTML and vanilla CSS.³

My first attempt tried to put the alt-text widget inside the <summary> of the original image, but that’s an accessibility no-no, so instead I wrap both <details> blocks (the lightbox, and the alt-text revealer) inside a container and then reposition the latter over the former. The rest is all the same kinds of tricks I demonstrated previously, to ensure that you can click in-and-out of both in an intuitive way and that keyboard navigation works as you’d expect.

I can’t use it on my blog yet (because if I do, it’ll probably break horribly when I add the functionality to my entire theme, later!), but I’ve put together a demonstration page that showcases the technique, plus a GitHub repo with all of the code (which is all public domain/unlicensed). Go have a play and tell me what you think!

Footnotes

¹ As a secondary goal, using <details>/<summary> means that it’ll behave better when CSS is disabled or unavailable, which’ll make it easier to celebrate Naked CSS Day!

² Why would I, a sighted person, need an alt text viewer, you ask? All kinds of reasons. Good alt text is for everybody, and can help by providing context, e.g. “explaining” the joke or identifying the probably-well-known-but-I-didn’t-recognise-them subject of a photo. Here’s some more reasons.

³ If you love owls and you love accessibility, this is the kind of example you should give a hoot about.

Free Deed Poll questions

Since I relaunched freedeedpoll.org.uk three months ago (with new features) and made an explanatory demo video, the volume and kinds of questions I’ve been emailed has… become larger and more diverse.

I still get questions about childrens’ names and citizenship and gender recognition certificates and things.

But now I also get questions like “how do I print multiple copies of the PDF?” and “why does my homemade deed poll not have a serial number?” 😂

Minimalist Trees

Not sure I’m a fan of these new ultra-minimalist Christmas trees.

BBC Sports News (without the crap)

For the last few years I’ve been running a proxy of the BBC News RSS feeds (https://bbc-feeds.danq.dev) that strips out duplicate content, non-news content, and (optionally) sports news.

This weekend, for the first time, somebody asked if it could produce an edition that included only the sports content. Which turned out to be slightly more difficult, because it’s the kind of scope-creep that my “uninterested-in-sports-news” brain couldn’t conceive that anybody would want! But I got there in the end.

If anybody’s looking for their fill of “BBC News Feeds… But Better!”, give it a look.

Woodcraft Folk statement on the exclusion of trans children from Girlguiding

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Woodcraft Folk stands in solidarity with every trans child, young person and volunteer who faces exclusion from Girlguiding UK following the announcement on Trans inclusion.

We recognise that Girlguiding UK have taken this decision in the context of intense political pressure and legal uncertainty. However, this does not make the outcome acceptable. Young people should never bear the consequences of political disputes. All children and young people deserve respect, safety and inclusion in their youth organisations.

…

Woodcraft Folk, in Woodcraft Folk statement on the exclusion of trans children from Girlguiding

Excellent statement from Woodcraft Folk.

I was saddened to hear the news that Girlguiding will no longer accept trans girls as members. It seems to me that it would have been perfectly reasonable for them to change their articles in response to the Supreme Court silliness: instead of declaring themselves as being for the benefit of “girls and women” they could have become for the benefit of “girls, women, trans girls, and trans women”.

Yes, obviously it’s horrible that the Supreme Court’s othering decision means that people have to spell out that “by women, we mean all women, including trans women”. But that’s a thing that a charity can do. It’s perfectly reasonable for a charity to be for the benefit of multiple groups.

But no, they took the easy option.

So it’s great to see youth-supporting organisations like Woodcraft Folk make a statement like this that trans kids continue to be welcome with them. Okay, this was easier for them than for Girlguiding because Woodcraft’s articles didn’t contain any gendered language in the first place. And it’s fine that Girlguiding’s does use gendered language – it’s okay for charities to be gender-specific! – but it’s a shame that they didn’t… pardon the pun… have the balls to stand up for what’s right for all women and girls, in spite of the UK’s growing transphobia. Ugh.

Anyway: nice work, Woodcraft Folk.

Please Insert Dog

We got our dog a Christmas jumper.
My favourite thing about it is that its coat hanger contains instructions for use:
“Please insert dog” 🤣

Chinese Domain Name Scam

I find a lot of these “this company is tried to usurp your brand with Chinese domain name purchases” emails in my spam folder, corresponding to my (many) domains. They’re a scam, of course: the scammer is trying to goad me into saying “No, please help protect my brand identity, I’ll pay you over the odds for these .cn domains!”

But I’ve always wondered – what happens if you reply and say “Yes, Baokang Ltd DO represent my business interests in China, please go ahead and let them register these domains.” I’d know that was a lie, and the scammer would know that was a lie (the company, if it even exists, is under their control in the first place)… but they can’t admit that they know that.

Anybody tried baiting this kind of scammer in that way before? (With the usual scambaiting precautions, of course!)

Dithering – Part 1

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Damar Berlari, in Dithering – Part 1

I already understand how using a threshold map to perform dithering works and have even implemented dithering algorithms, and I still appreciated this amazing visual explainer which helped put it in a light I’d never considered before. A highly-recommended read, and I’ve subscribed to Damar’s RSS feed so I get to see Part 2 when it happens.

(I also enjoyed playing with the dithering experiment on his CodePen, because it turns out that the technology behind this interactive demo is as interesting as the topic being described!)

Trams Rights

Fellow folks at the interest-intersection of “public transport” and “queer activism” (I know you’re out there!): I had an idea for a t-shirt.

Do I print it? Or give up on graphic design and go back to backend programming where I belong?

HTTP is not simple

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…

HTTP/1 may appear simple because of several reasons: it is readable text, the most simple use case is not overly complicated and existing tools like curl and browsers help making HTTP easy to play with.

The HTTP idea and concept can perhaps still be considered simple and even somewhat ingenious, but the actual machinery is not.

[goes on to describe several specific characteristics of HTTP that make it un-simple, under the headings:

newlines

whitespace

end of body

parsing numbers

folding headers

never-implemented

so many headers

not all methods are alike

not all headers are alike

spineless browsers

size of the specs

]

Daniel Stenberg, in HTTP is not simple

I discovered this post late, while catching up on posts in the comp.infosystems.gemini newsgroup, but I’m glad I did because it’s excellent. Daniel Stenberg is, of course, the creator of cURL and so probably knows more about the intricacies of HTTP than virtually anybody (including, most-likely, some of the earliest contributors to its standards), and in this post he does a fantastic job of dissecting the oft-made argument that HTTP/1 is a “simple” protocol; based usually upon the argument that “if a human can speak it over telnet/netcat/etc., it’s simple”.

This argument, of course, glosses over the facts that (a) humans are not simple, and the things that we find “easy”… like reading a string of ASCII representations of digits and converting it into a representation of a number… are not necessarily easy for computers, and (b) the ways in which a human might use HTTP 0.9 through 1.1 are rarely representative of the complexities inherent in more-realistic “real world” use.

Obviously Daniel’s written about Gemini, too, and I agree with some of his points there (especially the fact that the specification intermingles the transfer protocol and the recommended markup language; ick!). There’s a reasonable rebuttal here (although it has its faults too, like how it conflates the volume of data involved in the encryption handshake with the processing overhead of repeated handshakes). But now we’re going way down the rabbithole and you didn’t come here to listen to me dissect arguments and counter-arguments about the complexities of Internet specifications that you might never use, right? (Although maybe you should: you could have been reading this blog post via Gemini, for instance…)

But if you’ve ever telnet’ted into a HTTP server and been surprised at how “simple” it was, or just have an interest in the HTTP specifications, Daniel’s post is worth a read.