ArtLung: 110 Hours of CSS Battle ~ 06 May 2025

Preamble

In Summer 2014 I installed it and started playing Clash of Clans. To keep in touch with my godson, which kind of worked.

In January 2024 I quit. At the time I said:

I stopped playing regularly a few months ago. I look periodically but I’ve lost the habit. Probably I’ve replaced it with CSS Battle.

And thus, CSSBattle

CSS Battle is “code golf.” Write the shortest possible code to accomplish a goal. In the case of CSS Battle the goal is a target image. Some patterns and colors and shapes. The challenge is to make those shapes, and to make them perfectly align with the target image within the 400 by 300 “browser” output.

There are 3 kinds of CSS Battle:

Daily Targets, which roll out 1 per day when the day ticks over. When the next day ticks over, top solutions become public
Battles, which are periodic, timed challenges. They have 8 targets which roll out over 4 weeks, 2 per week.
Versus Challenges, which are one on one battles with a timed limit.

I love the Daily Targets. I love the Battles. I have played Versus Challenges once.

You may at this point have more questions about CSS Battle, and I would direct you to cssbattle dot dev

Why CSS Battle?

I found out about this game from YouTube, possibly because Kevin Powell did a video about it. But I don’t remember exactly. I remember being surprised that I didn’t hear about it from a blog, or LinkedIn, or Twitter/X, or even Mastodon. It’s one of the examples where a YouTube recommendation was not terrible. I mentioned that during a discussion about social norms in the IndieWeb.

Al Abut suggested, around that time, to interview me while I did one of these puzzles, which we did, on Zoom. That video never made it out into the world. I showed CSS Battle to fellow IndieWeb people. I did a puzzle with my screen shared with them. The expressed surprise, mild awe at my coding.

In October 2024 I started recording

I decided to record myself doing the Daily Target on video. I would talk as I did it. A “vlog”–video weblog.

And I went along and did that when the day ticked over. And I uploaded them to YouTube.

And then I decided, well, with my “Plus” membership I can also access old Daily Targets. There were 492 daily targets in the backlog, dating back to June of 2023.

And then I decided to record those, too.

Screenshot from February 24, 2025 CSS Battle Video

6640½ Minutes of Video

I have now recorded 372 videos for the 682 Daily Targets CSS Battle has ever put out. If you had very bad decision-making skills you could queue up all these videos and watch me write HTML and CSS for 4 days, 14 hours, 40 minutes, 31 seconds straight.

That amount of video would increase by about 9 minutes 44 seconds each day when the date ticked over. I take about that time to do the average target.

Why On Earth Would You Do this, Joe?

I don’t have a good answer. It seemed like a good idea at the time. I started, and I kind of liked the result. I liked seeing my mistakes. I liked seeing myself encounter some new novel puzzle, and beat it. I think it helped me be more concise at writing CSS. I usually–but not always–succeed in getting to a “100% match.”

One answer to “why?” could be something I wrote to Mastodon and Blues:

I was recently asked why I do what I do:

“I like to put things on the web that need to be on the web. Why things strike me as “needing” to exist is still somewhat mysterious to me.”

I just quoted myself, quoting myself, talking about myself. This site is nothing if not introspective.

No, Really, Why?

Here in 2025, most kids one meets express a desire or at least esteem for video influencers. I vaguely wanted to engage with that thing. 17-year old me took courses on Radio & TV Production at San Diego City College. Doing recordings like this, on a schedule, is me designing my own coursework.

I wanted to get better at CSS. And HTML.

I really do enjoy writing HTML and CSS. Along with JavaScript, they are the most widely distributed programming languages Planet Earth has ever produced.

And I wanted to do some rudimentary video. I have avoided making video, recording video, editing video, deploying video for 20 years. I used to encode RealPlayer streams and export mov and avi files for work. It’s a pain. It’s error-prone. The files are big. The software inevitably crashes. Computers hard drives fill up. Lost work takes so much time the heartbreak is awful. I wanted to see if it was better.

And so those are my answers, and also–final answer–I do this for fun.

What Lessons Do I Have?

On Recording Video

OBS and OpenShot Video Editor are free and somehow also really good
Taking time to record video requires real effort
Murphy’s Law applies.
Make sure your sound is working
Make sure the right video input is being recorded
Make sure when you turn on the recording session you are actually turning on the recording
Sometimes the recording is just bad and it’s not clear why
If you live with other people–or a dog–and you record, they will end up on the recording
If you live in apartment complex and record, gardening or construction noise will end up in the recording
Once, my entire audio track was just Camper Van Beethoven’s Good Guys and Bad Guys
It is very disappointing to lose work
Apple Photos is not a good tool to trim video of long duration with because of the filesize limit
I dislike iMovie
Close every program you can when you’re recording
Recording video fills a hard drive fast

OBS

Highly recommended software
Even after my whole machine crashed, my settings remained stored
If you have multiple monitors and load a certain window into OBS, if you have to stop, and step away, sometimes a tracked window will set to some other window and it’s not clear why
When in doubt, quit and restart OBS
It’s free. It’s good.

OpenShot Video Editor

Terrific solution for clipping off part of a video (trim and keep only what’s to the left is so great)
Terrific solution for patching multiple videos together (Much easier than futzing with ffmpeg command line)
I mentioned it’s free and good

YouTube Lessons

There’s a reason it’s the most popular site for video on the planet and it’s not just that a monopolist owns it. It’s reliable software.
I considered, and rejected, hosting these videos myself, or elsewhere. I dislike that there’s not a great alternative.
With every upload I decide to affirm whether the video is for kids
With every upload I am obliged to warn viewers whether it includes sponsored content.
With every upload I am obliged to warn users if I used AI to make that upload. (I do not).
With every upload I must choose a license (Creative Commons vs YouTube Standard License)
Comment moderation seems to work okay. For me, and my very small number of views. I had a run of weird series of crypto spam comments which has stopped.
YouTube still produces RSS, and that RSS is reliable enough to program against

`yt-dlp` Lessons

yt-dlp is incredible
I use it to get JSON data about videos

CSS Battle.dev Lessons

Puzzle code solutions are matched against a headless Chromium browser on the backend
I prefer to use Safari
If I preferred Firefox this game might not have worked on me, some techniques I use fall flat in that browser
Sometimes when the UTC date ticks over the new puzzle doesn’t deploy properly (sympathy to the developers, timed unattended deployment or publishing is fraught)
Some puzzles are incredibly hard to get past 99.9% match, usually those with curves and angles not divisible by 90
The play field body is 400 pixels by 300 pixels
Targets on the backend are 800 by 600, so sometimes one needs to use a value like 23.5px
CSS Battle runs a Discord
I would love a mode where the challenge was to write code that would be judged not just for today’s browser, but for tomorrow’s. So the score could change over time.
The creator of CSS Battle watched one video, using my plugins, and updated the UI for plugins to be more compact.

CSS Lessons

Sometimes it’s surprising which approach results in less code
CSS rendering is a moving target because browsers are a moving target
There are dozens of different kinds of CSS unit.
q and % are the shortest I use
Any HTML tag can be contorted into any shape on any web page
The fewer margins on fewer elements the better
Default margins on the body are 8px
flex is less verbose than grid
grid is more declarative
grid-template-areas are awesome
transparent is longer to write than #0000
rotate: 45deg is shorter to write than transform: rotate(45deg)
box-shadow: inset works great
clip-path: shape() is great but still not in Firefox great, but soon I hope
CSS is awesome

Programming Lessons

Manual data entry should be mistrusted. Sometimes one types out MARCH 12, 13, 41
Write scripts to check and examine data and double and triple-check it
Use source control
Write unit tests to keep you sane when managing hundreds of items
Test driven development to turn my titles into dates was very satisfying
Don’t fear the command line: yt-dlp, shot-scraper, composer
Turn frequently encountered tasks into short commands
A “code golf” ethos – “minimum code to get a certain effect” – is an excellent way to approach web layout. I think back to the times I tried to alter CSS by adding more and more CSS: z-index and more margins and padding on more elements, is usually worse.
Remove all the code and build it back up to match your goal, then test again
For a short task, throwing everything away and starting again is often best
“Do the hard part first” is usually the best first step
“Calling your shot” – the billiards rule to express an intent before doing an action – is often useful. It’s also how a lot of Agile software development works: commit to what you’re going to create, then go for it, and see how far you get.

A Note About Performance

Recording video is indeed a performance. I’m some version of my authentic self, but the recorded person is a facet. It can’t possibly be the whole truth. I was listening to a podcast with an actor recently and he mentioned being on a podcast with podcasters who claimed that what they do is not a performance. They’re just like, being themselves, man. I think any blog, any creative output one shares with the world, is part performance. Hell, I felt sometimes when doing certain customer service or working as a respiratory therapist. I was obliged to be the Super-Me. And here’s where I have an excuse to quote one of my favorite films: Topsy Turvy:

Gilbert

Every theatrical performance is a contrivance by its very nature.

Sullivan

Yes, but this piece consists entirely of an artificial and implausible situation.

Gilbert

If you wish to write a Grand Opera about a prostitute, dying of consumption in a garret, I suggest you contact Mr Ibsen in Oslo.

Lessons About Myself

My favorite kind of gradient is the conic-gradient()
I love a clip-path
I love a weird challenge
My superpower might be constancy.
I don’t like not getting to 100%
My competitiveness is strong, but secondary
I like being a top 100 player (As I type this, I’m the number 30 player among all 400,000 players)
If I fall lower in the stats I won’t feel too bad, but I will feel a little bad
When narrating what I’m coding I will sometimes say one thing and type another: my brain and mouth and hands writing code are inconsistently in sync
I can’t talk at all when I’m thinking hard
I love to talk
I feel lucky not to rely on video for my livelihood.
It it fun to have a small challenge to look forward to every day.
I miss mob coding and pair programming, but I get a bit of that in IndieWeb sessions, which I enjoy
I don’t think I want to be a streamer, but I could stream a little, which I think means I don’t want to be
I am no longer afraid of looking at the abbreviated CSS background: syntax
I love learning new CSS features
Nested CSS still looks wrong to me, I mistrust it
I can write clip-path polygon() code in my head, but only one point at a time, in sequence, any other way I get lost. (I never played with a LOGO Turtle but I think I know I could have)
I can write clip-path shape() code the same way but I’ve got more to learn
I love telling people to go make a web page
I share my code with an intent to educate but know it’s unlikely to reach too many ears. That’s fine by me