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

31–40 of 101 posts

Re: Useful patterns for building HTML tools

#31

Post by simonw »

eliben wrote: post #29

Great work, Simon -- thanks for sharing! One tool I'd really like to see in this format is a simple "turn the background of this PNG to transparent". Models still refuse to follow the instruction to create transparent backgrounds for logos they create, and I often have to look for other tools doing this as post-processing. It's possible that this is too complicated for the "few hundred lines of js" code envelope, tho…

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 iPhone app): https://tools.simonwillison.net/transparent-png

Re: Useful patterns for building HTML tools

#32

Post by dotancohen »

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…

Serious question. How do you "try out" a library if somebody else (or something else) is writing the code?

Thank you.

Re: Useful patterns for building HTML tools

#33

Post by simonw »

gaigalas wrote: post #28

Why not introduce a single shared CSS for style consistency? Not full CSS separation, each tool could still have its local CSS. Things like styling buttons, responsiveness, and so on are better solved once. A good rule of thumb is: if the shared CSS fails to load, page still fully works but it might be uglier (weird fonts, etc). That's a reasonable rule for proper isolation (tools remain simple to understand, code re…

Yeah, I've been thinking some kind of reusable styles or style guide might be a good idea at this point.

It's been fun collecting a bunch of inconsistent tool designs just to see how the different models behave, plus occasionally I go for something with a topical theme like https://tools.simonwillison.net/terminal-to-html or https://tools.simonwillison.net/new-yorker-style - but a little more consistency could be nice.

Re: Useful patterns for building HTML tools

#35

Post by simonw »

dotancohen wrote: post #32
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…

Serious question. How do you "try out" a library if somebody else (or something else) is writing the code? Thank you.

The thing that matters for me when considering a new library is what it can do. Once I know that I can decide if it's worth learning how to use it at a code level.

In the case of JustHTML I've now been able to try it against a few different HTML documents, seen it do good pretty-printing, played with its CSS selector implementation and got a feel for its event-based streaming parser. I'm very impressed! I think I'll be using it in the future next time I need an HTML parser.

Re: Useful patterns for building HTML tools

#37

Post by soared »

Surprised AI studio isn’t recommended here - you can go from prompt->preview->deploy in like a couple seconds.

They have a library of sample apps you can edit but I wish they included the prompts and history to build each since I generally can’t get large apps to work - after a while the I’ll just produces more bugs as complexity grows. But I’m also a bad vibe coder and never read the code so entirely my fault :)

Re: Useful patterns for building HTML tools

#38

Post by dotancohen »

simonw wrote: post #35
dotancohen wrote: post #32

Earlier quoted context omitted.

Serious question. How do you "try out" a library if somebody else (or something else) is writing the code? Thank you.

The thing that matters for me when considering a new library is what it can do . Once I know that I can decide if it's worth learning how to use it at a code level. In the case of JustHTML I've now been able to try it against a few different HTML documents, seen it do good pretty-printing, played with its CSS selector implementation and got a feel for its event-based streaming parser. I'm very impressed! I think I'll…

I see, thank you.

Until vibe coding came along, the ergonomics of a library were no less important than its functionality. But I understand how LLM assisted coding changes that perspective.

I'll go tend to my empty lawn now.

Re: Useful patterns for building HTML tools

#39

Post by simonw »

soared wrote: post #37

Surprised AI studio isn’t recommended here - you can go from prompt->preview->deploy in like a couple seconds. They have a library of sample apps you can edit but I wish they included the prompts and history to build each since I generally can’t get large apps to work - after a while the I’ll just produces more bugs as complexity grows. But I’m also a bad vibe coder and never read the code so entirely my fault :)

I don't trust it to give me share URLs that anyone can access without a Google account and that will work forever into the future.

It may well do that, but it's not earned my trust yet!

Re: Useful patterns for building HTML tools

#40

Post by indigodaddy »

simonw wrote: post #31
eliben wrote: post #29

Great work, Simon -- thanks for sharing! One tool I'd really like to see in this format is a simple "turn the background of this PNG to transparent". Models still refuse to follow the instruction to create transparent backgrounds for logos they create, and I often have to look for other tools doing this as post-processing. It's possible that this is too complicated for the "few hundred lines of js" code envelope, tho…

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…

Dude, you are amazing. Maybe you should make a suggestion box. Then while you are sleeping, the AI could evaluate the suggestions, and if they are good, it could prototype the tool, and then you could review the prototypes in your waking hours before clicking the tool to production. :)

(I’m not actually kidding)

Post reply on HN