It is also the public training, test, and evaluation set for an AI benchmarking competition, and frontier models have been doing abysmally at it. (hat-tip to Half as Interesting). Evaluating AI agents using games is not exactly new; many have tried benchmarking them via the game Baba Is You, and just today a new benchmark was published suggesting that the most advanced models can finally 100% the game... 's two intro levels. And more than 4 times more slowly than an arbitrary human solver. And just a few hours ago, Impossible Research self-reported their new Schema Harness was able to solve virtually all of ARC-AGI-3's public set.
When I was building this site, I was keeping it lean but perhaps a bit messy. It’s not a big complex site and I didn’t need to write CSS to maintain a big complex site. As such, I even wondered if I’d stick to any kind of naming convention.
Old habits are hard to break and I found anytime I tried to get away with just element selectors for something, it was clunky as I continued to iterate. Sure enough, the more I worked on the site, the more I moved back to my modular ways. But ultimately, that’s neither here nor there. For a site like mine—written and maintained by one person—what kind of naming convention I use is nearly irrelevant. (I say nearly because I don’t want to be obtuse just for the sake of it!)
With my projects over the last few years, I’ve used a few different newer CSS features and have enjoyed what they can do. Here’s a few of the things I put into this site...
Clamp
I originally used clamp on The Snook Nook for the site title at the top of the page. I wanted it to feel balanced regardless of screen width. I adjust both the font size and letter spacing in this case, so that the title always looked proportional.
For Snook.ca, I wanted something that was big and bold on a large screen but wouldn’t fill up an entire phone screen. Again, clamp came in clutch.
font-size: clamp(2em, 4vw, 4em)
Clamp takes three values: the minimum, the preferred value, and the maximum. In this case, I wanted the font-size to be related to the screen width, which is where the vw units come in. The largest I wanted to go was 4em. This was eye-balled. There’s no special math here. Likewise, 2em still seemed reasonable on the bottom end and looked good for me.
Balanced Headings
I remember reading about this awhile back and it was a nice little thing to add to the site: text-wrap: balance. I just have it on the page title to avoid orphaned words and make them look a little more, well, balanced.
On the old site, I never loved how my headings looked over multiple lines because of the pencil lines I had on headings. As a result, I kept the titles shorter, on purpose. With this version, I wanted to get more creative with page titles, going longer if I needed to without it looking weird.
Grid
When Grid first came out, I was using it for larger, dynamic layouts like the restaurant grid on my Fifty site. Now, I find myself also using it for smaller elements. The article meta is a great example of this.
.meta {
display: grid;
justify-items: center;
}
Boom. All the items are center aligned and stacked. I probably would've defaulted to trying to use display: flex here but that would've required an extra declaration to adjust the flex-direction to column. (And using align-items instead of justify-items.)
.meta-before:before {
content: "";
display:block;
width:50px;
padding-bottom: 5px;
border-top: 2px solid var(--green);
}
The horizontal line is a pseudo-element that gets added into the grid stack before everything else. That border declaration leads me to the next thing.
CSS Custom Properties
The CSS isn’t large or anything but it was nice to use custom properties for easy colour management. I declared them on the root element. I could’ve probably just declared this on the html element itself just as easily.
:root {
--yellow: #FFCA00;
--green: #668800;
--white: #EFEFE6;
--black: #3C3C3C;
color-scheme: light dark;
}
Again, I didn’t need multiple levels of abstraction. I just wanted something that made it easier to remember these hex codes and spit them out where I need them.
Dark Mode
That last line in the previous example declares that my design supports light and dark mode and lets me use the light-dark function to easily declare colour options like this declaration for the body text.
color: light-dark(var(--black), var(--white));
Link Underlines
I’ve always just either toggled underlines on hover or toggled text colour. I don’t know when all the text-decoration options were added but I liked being able to do so.
a {
color: currentcolor;
text-decoration-thickness:2px;
text-decoration-color: var(--green);
}
a:hover { text-decoration-color: var(--yellow); }
I was able to adjust the thickness and then change the colour on hover. I haven’t used the ol’ LVHA format in years but I might come back to it to give more useful visual clues for visited and active links.
The link colour just picks up whatever the light-dark colour is currently set.
CSS has come a long way
I was really delighted by how easy it was to use all of these features and not have to be too concerned about cross browser issues. Looking through MDN was fun to discover what features I had missed over the years and could now implement reliably. Can I Use also continues to be a fantastic resource for verifying browser support.
Read more of this story at Slashdot.
"Build history as you grow: Once you have enough history, we'll automatically unlock features." Apparently my 14+ year old youtube channel has not yet reached 2 months of active use, according to the vibe-coded math of Google's robots.
Since, as you know, arguing with robots is something of a hobby of mine, I uploaded my traditional driver's license. You can't just "upload" it, of course, they require you to scan a QR code with a phone and take a photo from within the browser, for maximal tracking. So I used one of my burner phones for that. They say their response takes 24 hours, so presumably some dollar-a-day call-center gig worker in India is going to put eyeballs on it, so we'll see how that goes.
In case you're wondering what stupidity I'm up to this time:
Bonnie Tyler died last week, and so the glorious "Total Eclipse of the Heart, Literal Version" by Persephone Maewyn and dascottjr was making the rounds again, dodging takedowns. (This video is a textbook case of fair use, since not only is it a parody song, but the lyrics are direct commentary on the video itself, I mean come on.) Anyway all extant copies of it are shit quality, so I reconstructed it from the official HD video plus the "literal" audio, and re-built the subtitles by hand. Immediate takedown. I appealed. A week later, some intern or chatbot at BMG said "fuck you no". Now I'm trying to counter-claim.
Anyway, maybe someday you'll get to see this higher quality version of the video. It's still pretty funny. You can go request it on the DNA Pizza music video stream I guess.