Site Update: CSS Fixes

Published on , 563 words, 3 minutes to read

So yesterday my blog was on the front page of Hacker News. Twice. The comments were brutal, however some people politely pointed out some issues that I've brushed off in the past because it's difficult to interpret comments like "ur website is gay furry trash because I can't tell what is a conversation snippet lol" in a positive enough light to want to act on it.

I decided to just fix the problem on stream and now hopefully people should complain about this less.

Numa is delet
<Numa> >implying.

Either way, things are fixed now. Here's what I fixed.

Styling of conversation snippets

I've never spelled this out anywhere on the blog, but those interjections with characters are called "conversation snippets". I want them to feel a bit like IRC, Telegram, or Discord conversations to use the Socratic method as a teaching aid.

In the past, these snippets didn't have any solid delineation between them and the rest of the post, which apparently is confusing. I have changed this and now there is more of a border:

Aoi is cheer
<Aoi>

Like this!

When a conversation has mutiple parts, they will get smaller and look like this:

Numa is delet
<Numa>

Have you ever been far even as decided to use even go want to do look more like?

Aoi is coffee
<Aoi>

What.

Cadey is enby
<Cadey>

You've got to be kidding me. I've been further even more decided to use even go need to do look more as anyone can. Can you really be far even as decided half as much to use go wish for that? My guess is that when one really been far even as decided once to use even go want, it is then that he has really been far even as decided to use even go want to do look more like. It's just common sense.

Aoi is coffee
<Aoi>

Is that supposed to be English????

As you can see, this is a lot more clear and easy to understand. The "standalone" snippets are a bit bigger so that the character is emphasized.

Reader mode fixes

One of the complaints I've gotten for years from people using the site in "reader mode" and when using an RSS feed reader is that the stickers take up the entire screen. This is because I was serving the raw assets that I got from the artists (recompressed with webp and avif to save bandwidth).

This has been a problem because reader mode and RSS feed readers don't let me control how things are displayed for understandable reasons. After thinking about the problem, I came to the conclusion that the only way I could get this to work would be to have XeDN resize the stickers on-demand.

This will cache the resized assets so that the expensive resizing doesn't have to be done on every request. It's done lazily by the CDN itself.


Mara is hacker
<Mara>

If you want to see these things written live, give a follow on Twitch!


Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: css, xedn