Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Useful patterns for building HTML tools

simonwillison.net

Post reply on HN
Print view View original

61–70 of 101 posts

Re: Useful patterns for building HTML tools

#61

Post by girvo »

btbuildem wrote: post #20
nels wrote: post #10

Really enjoyed this, interesting read as always! It reminded me of Google Labs’ recent GenTabs project [1], and also of a recent ACM paper on user-assembled LLM-mediated tools from web content [2]. Feels like similar concepts are emerging in multiple places, all centered around lightweight intent-driven tools rather than traditional apps, which I think makes a lot of sense. Curious how this will evolve! [1] https://l…

I think UIs will become more "generative" or "on demand". Not necessarily always generated anew, but assembled from pre-generated (reproducible) components, to suit a specific workflow. I think especially in context of software that is complex and takes a long time to master, this could be the next breakthrough. Instead of paths-to-goal being buried in sequences of menus and config panels, workflow pathways would be…

A lot of investment at some very large companies you know are trying to achieve this right now, and betting big on it. So far the lack of determinism when it is required gets in the way, but we’ll see: it feels surmountable.

Re: Useful patterns for building HTML tools

#62

Post by meistertigran »

I was also heavy on these single-file HTML tools. My problem was not being able to sync the localstorage data between PC and smartphone. I made a paid service which did that automatically. It didn't take off unfortunately, and I am keeping it on maintenance mode because it has some amount of free users that rely on it.

For anyone interested, to achieve synchronization I basically just use the https://github.com/google/diff-match-patch lib and save the patches in a db for each version with a version id. Then there's a generic JS file that I inject to uploaded HTML files that monkey patches the localstorage methods and optimistically updates the localstorage at the same time sending the diff to the server to save to the db.

Re: Useful patterns for building HTML tools

#63

Post by simonw »

mirekrusin wrote: post #58
simonw wrote: post #23

I just shipped a new one of these a few minutes ago (from my phone). I found out about a new Python HTML parsing library - https://github.com/EmilStenstrom/justhtml - and wanted to try it out but I'm out without my laptop. So I had Claude Code for web build me a playground interface for trying it out: https://tools.simonwillison.net/justhtml It loads the Python library using Pyodide and lets you try it out with a sim…

You can use react with jsx without any build step in single html file as well.

Yeah I used it for this one via Babel from a CDN but it felt pretty crufty: https://tools.simonwillison.net/box-shadow

Re: Useful patterns for building HTML tools

#66

Post by maegul »

i_love_retros wrote: post #64

Endlessly churning out tools with vibe coding sounds quite boring to me. The world went and changed I guess.

Indeed, likely a useful lens on the current moment I’d say.

For better/worse, and whether completely so or not, the time of the professional keyboard-driven mechanical logic problem solver may simply have just come and gone in ~4 generations (70 years?).

By 2050 it may be more or less as niche as it was in 1950??

Personally, I find the relative lack of awareness and attention on the human aspect of it all a bit disappointing. Being caught in the tides of history is a thing, and can be a tough experience, worthy of discourse. And causing and even forcing these tides isn’t necessarily a desirable thing, maybe?

Beyond that, mapping out the different spaces that are brought to light with such movements (eg, the various sets of values that may drive one and the various ways that may be applied to different realities) would also certainly be valuable.

But alas, “productivity” rules I guess.

Re: Useful patterns for building HTML tools

#67

Post by singpolyma3 »

blixt wrote: post #54

One thing I tend to do myself is use https://generator.jspm.io/ to produce an import map once for all base dependencies I need (there's also a CLI), then I can easily copy/paste this template and get a self-contained single-file app that still supports JSX, React, and everything else. Some people may think it's overkill, but for me it's much more productive than document.getElementById("...") everywhere. I don't have…

I wondered how you got JSX but it seems you don't quite and the true magic here is the htm library.

Re: Useful patterns for building HTML tools

#68

Post by naet »

i_love_retros wrote: post #64

Endlessly churning out tools with vibe coding sounds quite boring to me. The world went and changed I guess.

Building little toy projects like some of these is one of my favorite ways to learn and play. Sometimes the value isn't in the initial finished product but in the concepts it exposed and knowledge or inspiration gained from that.

I guess if what you really want is only the finished product and nothing else, churning it out as quickly as possible with AI and not caring about the implementation could work for you. But it would take the fun out of it for me.

Sadly my career may eventually head in that direction. At least I'll always have a hobby to enjoy.

Re: Useful patterns for building HTML tools

#69

Post by singpolyma3 »

eliben wrote: post #47
simonw wrote: post #31

Earlier quoted context omitted.

Running this now... Build transparent-png.html - a tool that lets you open any image and then click on colors within that image to make them transparent - showing a preview of the resulting PNG against a checkerboard pattern and optional against other selected background colors below, plus a download PNG option It should also accept pasted images Here's what I got (from Opus 4.5 in Claude Code for web via the Claude…

Nice, I'm proud I managed to nerd-snipe you :-) Thanks for taking the time. Seriously, though, I think this solves a nicely framed simpler problem. I was thinking about a more general tool, but that's genuinely hard (you'll need heavy CV algorithms or a special ML model to detect what is background what what isn't). To be honest, what you built here is probably sufficient anyway, because the models are better at obey…

The best thing to say to an image model IME is "use a colour/chroma key background" and then it gives you green or blue or whatever depending on colours used in the image.

Re: Useful patterns for building HTML tools

#70

Post by dansjots »

meistertigran wrote: post #62

I was also heavy on these single-file HTML tools. My problem was not being able to sync the localstorage data between PC and smartphone. I made a paid service which did that automatically. It didn't take off unfortunately, and I am keeping it on maintenance mode because it has some amount of free users that rely on it. For anyone interested, to achieve synchronization I basically just use the https://github.com/googl…

I wonder if you can hack a LocalStorage sync feature via ATProto PDS, since you can put arbitrary JSON records via /xrpc/com.atproto.repo.putRecord and not just Bluesky posts.

The only drawback I can think of is that all of your commits are broadcast on a megaphone to the network firehose, but encryption can alleviate that somewhat.

Post reply on HN