Sara Joy
sara
stuff
blog

Weaknote 2024-01-30

chevron pointing up

I’ve found some time from who knows where to make start some cool stuff!

No-class CSS:

I think it’s quite cool, but found it really hard not to get too opinionated. Especially around buttons. Then I started styling the range slider to try and keep consistency, and after that I stalled.

https://codepen.io/sarajw/pen/xxBGmRZ

I might revisit it another time, but try and keep it (even) simpler. Also as I was just playing, it’s full of somewhat inconsistent and pretty unneeded CSS nesting.

While I have been messing with it however, both Egor and Daniel completed and published their own, which are both excellent!

  • Egor bases his system.css on using CSS color-mix() and the browser-native System Colors.
  • Daniel’s Ssstyles is opinionated and striking with some optional extras.

An easier web:

fLaMEd and I had a great exchange on Mastodon after reading their article about helping people get a leg up with building their first websites, so I made a couple of things so that maybe some of the more adventurous non-devs could just give it a go.

Each page has a section where you can copy or download the code, ready to paste or upload to a free hosting service, just to try it out.

A simple (blog?) website: https://sarajoy.neocities.org
Codepen: https://codepen.io/sarajw/pen/oNVzvgg

An elegant linktree thing: https://linkfae.netlify.app
Codepen: https://codepen.io/sarajw/pen/rNRWgVv

I still need to make a sort of introduction website for them both, to wrap it up. I commented the code heavily, and as visually as possible, to show people where they can make their edits. There are quite a few inconsistencies.

RSS Joy!

I was reminiscing about how I used to like iGoogle for keeping up with RSS feeds. It was a portal with the Google search bar at the top, and lots of fun panels you could set up. I generally just picked RSS panels and would have them show a few of the latest posts from all my favourite blogs.

Welp, I decided to roll my own: https://rs.sjoy.lol

A nice sibling-subdomain for CSS Joy :) It doesn’t really have all my favourites, for now it’s just a sample.

I got lots of help from Darius who built the web-component for it! I’m slowly starting to piece together how those things work, but I still find them mysterious.

Because I was grabbing RSS feeds client-side, most of the domains I was calling them in from refused because of CORS. I ended up doing a workaround, that I briefly detail here: Bypassing CORS using Netlify _redirects

A blogroll:

First I asked whether it would be crass to use a roll of toilet paper as a blogroll icon, because that is what “bogroll” is British slang for!

I mean, I would probably have gone ahead with it anyway…

The icon can be seen at https://sarajoy.dev/#goblog if you scroll past all the posts. The page itself is at https://sarajoy.dev/blog/roll/ - it isn’t really populated yet.

Yeah, I let an AI image creator make that title image, the prompt was “A toilet roll with an water color image of a friendly-looking person’s head and shoulders on each sheet”. I think it’s cute. I carry a little bit of shame for using ‘AI art’, though.

That’s it!

Well, that’s plenty for now. Offline life has been happening too, as usual: We’ve enjoyed some more snow. We’ve had a very soggy yard after some drains blocked. All of us have been a bit under the weather. But we’re all OK :)

Finally, please welcome:

New CSS JOY webring members!

← back to notes index