CSS Boost

The blog you are now looking at is looking a little different (better I think), especially on mobile devices, because the CSS has been improved. I have a report on the details, and unexpected lessons.

What launched me into action was the acquisition of a Pixel 7, on which this blog’s text was unreadably tiny. I’m not sure what changed, but I got complaints from a couple of other people at the same time that I noticed it myself, so maybe it’s Android’s fault? Anyhow, couldn’t ignore that problem. On top of which, I had a list of minor gripes that had been on the to-do list for way too long.

Lesson: Falling behind · The first thing I had to do was face the fact that I’m years behind on CSS, which is a long time given that technology‘s history of rapid accretive enrichment. To be brutally honest, I had no idea where to start. Yes, I’d glanced at a few blogs about CSS Grids and so on, but it became obvious I’d have to put days and days into getting the basics, and I just never did.

This is a bit painful because, heretofore, everything about ongoing had been hand-built solo by me, from first principles based on my knowledge of the Web, overwhelmingly acquired via the View Source path. And the fact today is that a high proportion of us can’t view CSS source and come away with anything useful. So it goes.

I will however eagerly scrutinize the new CSS and who knows, maybe I’ll come to understand it.

Lesson: Fediverse recruiting · Time was, if I needed this kind of help I’d look for it on Twitter. Those days are gone. So I advertised on the Fediverse.

And within an hour or two, I had several high-quality responses that took the trouble to respond in the form I asked, and I pointed them at a public Google Doc that read like this:

Currently my blog https://www.tbray.org/ongoing relies on a single static CSS file at https://www.tbray.org/ongoing/serif.css (Many years ago I used to offer serif and sans-serif variants of the blog). The blog is written in raw XML and the publishing system turns it into XHTML with reasonably good semantic markup. If it would facilitate fixing the CSS I could update the publishing system to fine-tune the markup. The CSS is entirely hand-constructed by myself and is not good. The blog mostly looks OK but I would like to achieve the following:

1. Have the text be readable on as wide a variety as possible of different screen sizes and shapes. Something seems to have broken recently, the text is unreadably tiny on Android.

2. If I put in an image that is too tall-and-narrow (I can supply an example) the text tries to wrap around it, I want images strictly in-line with the main column.

3. I’d like images to extend out to the left, to the edge of the screen if they’re wide enough.

4. If I have a header and then drop into an ol or ul without having a paragraph after the header, the first list item gets a deformed font.

5. The text comes too close to the top of images (OK, I could fix that one).

6. I’d like anything that is hideously wrong in my current CSS replaced with something modern and good.

I got a couple of plausible offers and picked the first decent-looking one that came in, which was from Matt Slack of Collective Idea. You see the eventual results. Lesson: The Fediverse is a plausible place to look to hire talent.

What happened · Matt set up a GitHub repo to work in. It took a half-dozen back-and-forths, but now ongoing works better on plenty of platforms and (this warms my heart) my pictures present themselves better.

It turned out that my Perl-from-2002-generated markup was broken in a couple of places and Matt was extremely gentle and polite in pointing out my shortcomings. Fixed now.

I asked Matt if he wanted to write a couple of paragraphs about what he did; here they are:

The first thing I did (after Daniel voluntold me to work on this, but before we’d actually contacted Tim) was open an inspector and see how far adding the viewport meta would get us. That normalized our font-sizes reasonably well. Next removing the second column made things feel very readable, and not run off the screen, which seemed like enough progress to make a boastful pitch off of.

Once I started working with the actual CSS in an editor the first order of business was fixing any syntax errors, and make sure it weren’t using a mix of tabs and spaces. Next I added some media queries to use a single column until the screen was side enough to support two. Additionally, I used grid layout to make our columns instead of absolute positioning. A few small spacing tweaks an that was enough to see how Tim felt.

The CSS originally did not use a lot of advanced features, and that’s cool. For the type of site it is, I really didn’t want to overcomplicate things. So in the first pass, other than using grid (which I spent so many years waiting for it’s hard to believe it’s been supported in all the major browsers for six years now) I didn’t add any new functionality.

In the second pass, I focused on how wide images were presented, which was a good opportunity to start using custom properties. I love custom properties in general, but I find them particularly useful for putting in long calc functions.

calc(((100vw / 2) + (var(--body-half-width) - (var(--side-col) + var(--grid-gap)))) - var(--gutter))

Gives you a lot better idea what’s going on than

calc(((100vw / 2) + 400px - (240px + 17px)) - 5vw)

The last major bit was figuring out the header. Once the screen was narrow the text overlapped with the search box and felt very crowded. We tied a few options, but eventually ended up making the text a lot smaller.

It was a nice quick project. If I were working on it longer I’m sure I’d find more to tweak and be more pedantic about, but I think it’s in a good spot for Tim to maintain for the next few years.

Thanks, Matt!

Lesson: Own your home · Since I first set up this joint in February 2002, it has reliably and consistently boosted my understanding of what’s going on, and, well, my life in general.

The lesson is that, for those of us who live online, having a simple static-site home on the range, on your own domain name, under your own control, has one of the highest returns on investment of anything you can do.

---

---

Contributions

---