4 ms·

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, re

by gaigalas 11mo ago

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 remains reusable, etc). I love the idea of self-contained tools, but you're already using CDNs. Having a shared CSS wouldn't hurt and actually make the tools better. I would go as far as having a shared JS too (same idea, works if it doesn't load). That's essentially what I did in https://alganet.github.io/spiral/ https://alganet.github.io/spiral/ (also vibe coded). Each spiral is mostly independent. You can go ahead and delete the shared CSS from the <head>, they still work and don't break funcionality. However, by having the shared CSS I made them consistent, made them friendly to phone users and so on.

simonw 11mo ago
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 https://tools.simonwillison.net/terminal-to-html or https://tools.simonwillison.net/new-yorker-style https://tools.simonwillison.net/new-yorker-style - but a little more consistency could be nice.
- gaigalas 11mo ago
  Definitely! Not only for the user, but it makes sense for the process of making the tools as well. If I left the agent for itself, it often come up with outrageous styles and I need to prompt it for something more sober. --- You can do a lot with just CSS. I restored this 2009 project of mine just now: https://alganet.github.io/ghiaweb/ https://alganet.github.io/ghiaweb/ It still works (minor misalignments though), all HTML is pure (no class=, no css=, no <div>). The global CSS does everything: the forms, the drop-down menus, etc. Nowadays, we can do even better, no build step or anything like that.

simonw 11mo ago

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 https://tools.simonwillison.net/terminal-to-html or https://tools.simonwillison.net/new-yorker-style https://tools.simonwillison.net/new-yorker-style - but a little more consistency could be nice.

gaigalas 11mo ago
Definitely! Not only for the user, but it makes sense for the process of making the tools as well. If I left the agent for itself, it often come up with outrageous styles and I need to prompt it for something more sober. --- You can do a lot with just CSS. I restored this 2009 project of mine just now: https://alganet.github.io/ghiaweb/ https://alganet.github.io/ghiaweb/ It still works (minor misalignments though), all HTML is pure (no class=, no css=, no <div>). The global CSS does everything: the forms, the drop-down menus, etc. Nowadays, we can do even better, no build step or anything like that.