Cadey is coffee
<Cadey> Hello! Thank you for visiting my website. You seem to be using an ad-blocker. I understand why you do this, but I'd really appreciate if it you would turn it off for my website. These ads help pay for running the website and are done by Ethical Ads. I do not receive detailed analytics on the ads and from what I understand neither does Ethical Ads. If you don't want to disable your ad blocker, please consider donating on Patreon or sending some extra cash to xeiaso.eth or 0xeA223Ca8968Ca59e0Bc79Ba331c2F6f636A3fB82. It helps fund the website's hosting bills and pay for the expensive technical editor that I use for my longer articles. Thanks and be well!

Site Update: CSS Fixes

Read time in minutes: 4

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!


This article was posted on M01 21 2023. Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Series: site-update

Tags: css xedn

This post was not WebMentioned yet. You could be the first!

The art for Mara was drawn by Selicre.

The art for Cadey was drawn by ArtZora Studios.

Some of the art for Aoi was drawn by @Sandra_Thomas01.