Html codes

CodePen Blog
Chris’ Corner: User Control

Like Miriam Suzanne says:

You’re allowed to have preferences. Set your preferences.

I like the idea of controlling my own experience when browsing and using the web. Bump up that default font size, you’re worth it.

Here’s another version of control. If you publish a truncated RSS feed on your site, but the site itself has more content, I reserve the right to go fetch that content and read it through a custom RSS feed. I feel like that’s essentially the same thing as if I had an elaborate user stylesheet that I applied just to that website that made it look how I wanted it to look. It would be weird to be anti user-stylesheet.

I probably don’t take enough control over my own experience on sites, really. Sometimes it’s just a time constraint where I don’t have the spoons to do a bunch of customization. But the spoon math changes when it has to do with doing my job better.

I was thinking about this when someone poked me that an article I published had a wrong link in it. As I was writing it in WordPress, somehow I linked the link to some internal admin screen URL instead of where I was trying to link to. Worse, I bet I’ve made that same mistake 10 times this year. I don’t know what the heck the problem is (some kinda fat finger issue, probably) but the same problem is happening too much.

What can help? User stylesheets can help! I love it when CSS helps me do my job in weird subtle ways better. I’ve applied this CSS now:

.editor-visual-editor a[href*="/wp-admin/"]::after {
  content: " DERP!";
  color: red;
}

That first class is just something to scope down the editor area in WordPress, then I select any links that have “wp-admin” in them, which I almost certainly do not want to be linking to, and show a visual warning. It’s a little silly, but it will literally work to stop this mistake I keep making.

I find it surprising that only Safari has entirely native support for a linking up your own user CSS, but there are ways to do it via extension or other features in all browsers.

Welp now that we’re talking about CSS I can’t help but share some of my favorite links in that area now.

Dave put his finger on an idea I’m wildly jealous of: CSS wants to be a system. Yes! It so does! CSS wants to be a system! Alone, it’s just selectors, key/value pairs, and a smattering of other features. It doesn’t tell you how to do it, it is lumber and hardware saying build me into a tower! And also: do it your way! And the people do. Some people’s personality is: I have made this system, follow me, disciples, and embrace me. Other people’s personality is: I have also made a system, it is mine, my own, my prec… please step back behind the rope.

Annnnnnd more.

* CSS Surprise Manga Lines from Alvaro are fun and weird and clever.
* Whirl: “CSS loading animations with minimal effort!” Jhey’s got 108 of them open sourced so far (like, 5 years ago, but I’m just seeing it.)
* Next-level frosted glass with backdrop-filter. Josh covers ideas (with credit all the way back to Jamie Gray) related to the “blur the stuff behind it” look. Yes, backdrop-filter does the heavy lifting, but there are SO MANY DETAILS to juice it up.
* Custom Top and Bottom CSS Container Masks from Andrew is a nice technique. I like the idea of a “safe” way to build non-rectangular containers where the content you put inside is actually placed safely.

105 views23:31