The CDN approach works, but I don't love depending on some third-party service just so your app continues working. Instead, I like using vite with vite-plugin-singlefile. This lets you package your JS and CSS into a single HTML: https://www.npmjs.com/package/vite-plugin-singlefile
Useful patterns for building HTML tools
71–80 of 101 posts
Re: Useful patterns for building HTML tools
#72Earlier quoted context omitted.
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
The idea is interesting, shame there is nothing for full stack like this, something like opinionated fossil-scm setup - which already has project management built in (for llm to use for its dev progress); together with backend and runtime state squashed inside single sqlite so you can create/delete them independently without a fuss.
Re: Useful patterns for building HTML tools
#73Endlessly 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…
Same here! That's why I'm having so much fun building nearly 100 of them in a year.
The difference here is that I didn't have to type out all of the code by hand.
Re: Useful patterns for building HTML tools
#74I have a Vue3 started template I host at https://http://vue-template.spaghet.me/ and all I have to do is curl and I'm ready to go.
Showcase:
https://timer.spaghet.me/ https://colors.spaghet.me/ https://box.spaghet.me/ https://talk.spaghet.me/ https://farming.ope.cool https://stitch.ope.cool https://draw.ope.cool https://walz.ope.cool
Re: Useful patterns for building HTML tools
#75Re: Useful patterns for building HTML tools
#76I 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…
That's what remoteStorage is for.
https://remotestorage.org/>
Re: Useful patterns for building HTML tools
#77Re: Useful patterns for building HTML tools
#78- Shell scripts, AppleScripts, etc. that I trigger from Alfred
- Obsidian plugins
- The occasional Emacs Lisp function
They serve a similar purpose for me as OP's HTML Tools, in the sense that they let me automate a small part of my workflow that I wouldn't otherwise have automated. If I have to choose between writing AppleScript and just doing something manually, I'll pick doing something manually 100% of the time. But if I can just ask an LLM to write the automation for me and then test it in a bunch of different scenarios, the choice becomes much easier.
After reading this post, I really want to try moving some of my automations to the web. Using HTML/JS/CSS for some of these tools will let me solve a whole different set of problems. E.g. I could more easily build automations for the non-techy folks in my family instead of just keeping them to myself.
Re: Useful patterns for building HTML tools
#79I love this idea! I've also been using LLMs to build tiny utilities and automations for myself, but instead of using HTML, I'm building them as: - Shell scripts, AppleScripts, etc. that I trigger from Alfred - Obsidian plugins - The occasional Emacs Lisp function They serve a similar purpose for me as OP's HTML Tools, in the sense that they let me automate a small part of my workflow that I wouldn't otherwise have au…
Re: Useful patterns for building HTML tools
#80I love this idea! I've also been using LLMs to build tiny utilities and automations for myself, but instead of using HTML, I'm building them as: - Shell scripts, AppleScripts, etc. that I trigger from Alfred - Obsidian plugins - The occasional Emacs Lisp function They serve a similar purpose for me as OP's HTML Tools, in the sense that they let me automate a small part of my workflow that I wouldn't otherwise have au…
AppleScript’s human readable language lulls you in this false sense of security that you can wing it and everything will just work out. This is simply not the case, it is a very quirky language and it helps to read a book to get the right mental model.
The second thing that helped was getting AppleScript debugger from Late Night Software. They recently decided to no longer develop it and release it for free on their site. It’s worth getting if you haven’t done so already.