.innerHTML() can take you a loooong way, but there’s a breaking point where it just becomes too tedious to use, too annoying to
deal with event handlers or escaping security. So when you want to generate HTML with JS, most use a framework. But you might not need one. Sometimes it is very fine to organize to your own desires and let uhtml handle rendering + producing the HTML. And the new v5 version has (finally?) made the API less confusing, and in my experience just works.
Here’s a quick example from https://github.com/WebReflection/uhtml:
<!doctype html>
<script type="module">
import { html } from 'https://esm.run/uhtml';
document.body.prepend(
html`<h1>Hello DOM !</h1>`
);
</script>
What feels like two decades ago I was busy making masonry-style layouts for different agency & portfolio websites. Funny to see the masonry layout slowly but surely reaching the web platform as a standard.
Here’s an excerpt of the proposed (!) syntax:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
item-flow: row collapse;
gap: 1rem;
}
Bots have been scraping the open web since a long time. Since the AI robots entered the game, people have become more aware. Especially when it quadruples your hosting bill… Websites are blocking the wrong AI scrapers because AI companies keep making new ones.
If you’re curious about blocking bots, check Dark Visitors’ robots.txt documentation, and if your site is on Cloudflare they offer tools too, on the network.
For another idea I needed a drawer UI like you know from mobile UI.
If you’re using React, Vaul seems good. But I’m not using React.
I prototyped a new custom element: <rough-drawer>, but quickly learned that this pattern is commonly called a “sheet”. And since all my web components are prefixed with my last name… welcome - your new drawer sheet ui element.
It’s not done, but try dragging on https://sheet.0sk.ar/ and view source.
Observable is a friendly tool, and it’s more aligned with the web with their new version.
When it comes to standard web UI, Radix is a good place to start.
SVG is wild, and this is a great intro:
uhtml is (was?) my library of choice for rendering HTML when I don’t have a framework. It was always a very confusing API to me, but the new version seems to unify things under one module, which is relieving.
And a shout out to Ink & Switch, who continues to inspire more thinking
Also, pondering whether to post these as single posts with a bit more context, or keep it a collection whenever I have a few to share.
We’ve had the copy/pasting era of the LLMs, we have AI assistants inside our editors and now we also have them as CLI programs. Having them side-by-side with your local files and letting it loose is a sight to behold. The UI is interesting, too. Slash commands, auto-complete and a text input with many shortcuts, vim-bindings and so on. Pretty fun way to interact with your files.
claude just works really well.
gemini (Google’s AI) released their CLI tool and made it open source. It was interesting to read their system prompt.
cursor-agent
jules
Framework components are not necessarily custom elements.
Here are a few more or less related articles on the topic:
Certain pieces of music stick with you through life. This one did for many growing up in Denmark as I did.
More than a sample, it’s Lee Konitz and Hal Galper.
Play
Here’s the instrumental:
Play
And finally the full track by Malk de Koijn
Play ooooh soon we can render HTML+CSS text inside <canvas>
I’ve been using git via the terminal since many years and I’m quite comfortable in that workflow using git add -p. HOWEVER, once in a while having a GUI to quickly get an overview of the diff really helps. When that is, Sublime Merge is my prefered tool. It’s cross-platform, it’s not an editor. It just works.
Except if you’re using WSL and try to install it on Windows. Don’t do that. TIL you can install it directly inside Ubuntu (WSL) and use wslg to launch.
https://github.com/microsoft/wslg
https://www.sublimemerge.com/
