Tag: web development
-
Here's a neat trick. I've got a web page with many HTML popovers, styled as modals to create a no-JS gallery/lightbox. But LCP suffers because the browser tries to reserve space for the images within (even though they're within not-yet-shown popovers).
This CSS one-liner saved the day. It basically says "skip over not-yet open popovers on initial page render" -
[popover]:not(:popover-open) {
content-visibility: hidden;
}I appreciate that Lighthouse isn't the last word in performance metrics, of course. But this change alone bumped an affected page's score from 76 to 100, so it's not nothing either!
-
Your 'App' Could Have Been a Webpage (so I fixed it for you...)
I was asked to install a mobile app to get access to the itinerary of a trip to Disneyland I'm taking with the kids. Fuck that noise: couldn't it have just been a Web page? An hour of reverse-engineering later, it is, and it's superior in virtually every way to the "app" that it replaces.
-
Setting the width of selects to the width of the selected option
Sometimes a new CSS feature comes along and I immediately "get it". Like: that's a cool new feature, I can already see how it'll save me time, or make things simpler, or improve accessibility, or allow me to do something new. Other times...
-
A Selfhosted Static Site Editor
Inspired by the way that Nekoweb's editor 'Nekode' works, I came up with a low-effort way to let my eldest get started with HTML and CSS editing, right from her browser, with the results selfhosted directly from the household NAS.
-
CSS or BS
Keith Cirkel's made a game where you have to identify if something is a CSS property or a convincing fake. How's your CSS knowledge?
-
Dynamically-Deployed Static Site Subdomains on Caddy
Continuing my effort to find a way to serve my various static sites that meets my need for ease-of-use and low-maintenance, I configured a wildcard Caddy server with webhook-based monitoring of a GitHub repository. Here's how it works...
-
gradient.horse
Michail Rybakov's gradient.horse might be the second most-amusing use of a .horse domain name I've yet seen. Draw a horse and let it run wild and free with its friends in the gradient plains of your browser window!
-
88x31 Button Creator
Dan of ritual.sh has produced an absolutely epic 88×31 button generator; well worth playing with if you're into that kind of thing.
-
Death to the shadow DOM!
I usually agree with Chris Ferdinandi, but he and I aren't entirely in accord about the Shadow DOM. He thinks it's useless. But I think it's MOSTLY useless.
-
For anyone who :has :not yet seen the magic of modern CSS
CSS is all grown-up, and the combination of nested selectors, variables, :not, and :has unlocks a wealth of potential for interactivity and customisation without resorting to (the slower and brittler approach of) JavaScript. Let me show you two examples from my recent editor history.
-
CSS Lightbox with Alt Text Viewer
Off the back of my details/summary-based semantic HTML+CSS lightbox, I've come up with a way to add Mastodon-like 'show alt text' widgets in the same way, and I'll be applying both to images on my blog's new theme, in the New Year.
-
DOCTYPE
I received my copy of DOCTYPE magazine, a genuine 'type this program in and run it'-style programming magazine but for a modern world, and enjoyed writing, debugging, playing, and then considering refining Stuart Langridge's puzzle The Nine Pyramids.
-
I guess I'm never paying DreamHost back
About 17 years ago, I stopped using DreamHost. They later decided I owed them money. I disagreed, but enjoyed watching them incredibly-slowly claw it back via the 'refer and earn' program, from all the people I ever recommended them to. But now, only a few months from the (alleged) debt being settled... they've killed the program, depriving me of the opportunity for... a more-humorous blog post, I guess?
-
Beige Buttons
When was the last time you saw a computer with a reset AND a turbo button? Bet it's been a while. But now, thanks to a stupid web component I made, you can see one on my website... or your own. What does it do? Nobody knows!
-
Layitout! Terra is a CSS-only implementation of a customisable Transport Tycoon-like terrain generator, and it's left me impressed and confused!