4 ms·
For people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html so
by BoppreH 1y ago
For people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html source with the updated version.
Imagine clicking a checkbox, which adds the `checked` attribute to its element, then using Hyperclay to globally persist this version of `document.body.outerHTML`, so that it's there next time someone visits the page. There's automatic versioning and read/write permissioning.
It's a pretty cool project! I'll definitely try for my own personal tools.
Do note that, from my understanding, it's most useful when there's one developer who is also the only content editor. Otherwise you'll have editors overwriting each other's changes, and if there are multiple copies there's no easy for the developer to push a change to all copies.
- panphora 1y agoI added this word-for-word to the home page. Thank you! Note: we are working on a way for a developer to push "DOM-based schema migrations" to all forked apps.
- BoppreH 1y agoI'm flattered you liked my description so much! It's a really special project, thanks for sharing it.
- bzmrgonz 1y agoI love this, I think this brings "block editing" capabilities to the masses, which is a big selling point for WordPress. In recent months, I've been looking at micro-sites and I concluded that Carrd is king for this type of landing pages/microsites. So this looks very promising for this respect. Either of you care to share or dispel security concerns or describe attack surface? For the past 6 months I've been looking at HUGO sites and the simplest deployment approach I found was alpine/sqlite/hugo containers at 5-10mb in size. Is there a way to delegate control/editing of sections/pages? I think the world needs a simple platform to build sites and delegates sections to respective departments/units. The only platform which seems solid for this is drupal, but it's kind of overkill for SMB orgs.
- gr4vityWall 1y agoThanks for the description, I kept reading the webpage and didn't understand what the project was or how it worked. Yours is really succinct and clear.
- deafpolygon 1y agoI like it!
- okasaki 1y agoSo it's a wiki? I don't get it.
- nonethewiser 1y agoWiki has specific content you can add. New article, body of an article, etc. This lets you change all the html. With this, you could edit your wiki into a calculator.
- pier25 1y agoThe idea would work a lot better with something like Cloudflare Workers. You don’t really need it to run 24/7 and it would fall into the free tier.
- andai 1y agoThanks. Author mentioned TiddlyWiki as inspiration. But the whole point of TiddlyWiki was that it doesn't need a server right? So I'm trying to understand the difference, the payoff. I understand that local web APIs are ass and you very quickly run into the need for a server. But I'm wondering about the utility of combining the two approaches. It seems like a contradiction in terms. Here's a server to help you with your dev setup oriented around not needing a server. I guess the main win would be cross device access? You have it online and you can edit it easily. I'm editing my stuff on my phone in a text editor. And syncing it to my laptop with a sync app.
- paulirish 1y agoTurns out, the original TiddlyWiki used a java jar to handle the file persistence. (I remember it being so magically automatic, but recently investigated how it was done)
- tonyg 1y agoI don't think that's right - IIRC it used to be possible to write out a file, if loaded from a file:// URL, directly from JavaScript. Then that ability got nobbled because security (justifiable) without properly thinking through a good alternative (not justifiable). I mourn the loss of the ability, TiddlyWiki was in a class of its own and there should have been many more systems inspired by its design. Alas. ETA: Wikipedia has reminded me the feature was called UniversalXPConnect, and it was a Firefox thing and wasn't cross-browser. It still sucks that it was removed without sensible replacement.
- silicon5 1y agoI used TiddlyWiki a lot to manage my D&D 3.5 campaign back in the day. As I recall, it originally was a true stand-alone HTML document capable of overwriting itself, but once browsers dropped support for this capability, users had to begin using various workarounds, and this remains the status quo today. TiddlySaver.jar was one such workaround. A check in the Wayback Machine suggests that it was originally required only for Safari, Opera, and Chrome; IE and Firefox needed no such plugin. Nowadays, there are several workarounds, and setting up one is a mandatory installation step: standalone applications, browser extensions, servers, etc. Some are clunky (e.g. you have to keep your wiki in your Downloads directory or the browser can't write to it), and either way, TiddlyWiki is no longer truly a single stand-alone HTML file, at least not for writing purposes. It's still a very versatile tool, though.
- evbogue 1y agoHow does this differ from htmx?
- meistertigran 1y agoTo be completely honest, I don't see how this is more useful than adding a sync layer to localStorage. I did make a service that does that at htmlsync.io and am genuinely curious how this solution is better.
- conradev 1y agoJust like with https://tiddlywiki.com/ https://tiddlywiki.com/ Your notes are the HTML file! You can keep it in your documents folder, sync it via any service, track it in version control, etc. It’s for folks who know what the filesystem is, don’t know how to host a server (or don’t want to), but want a website-like experience. Works offline, too!
- meistertigran 1y agoSo like, Obsidian, but for HTML? The file itself provides both the dynamic functionality and data storage, but you need an engine (like obsidian) to make the data persistence and dynamic parts work together. I.e. if there is a button that adds a task to a todo app, your engine modifies the HTML file with the new content.
- Agraillo 1y agoI finally also recalled this project (tiddlywiki), but CMIIW, the statefulness of the hyperclay is only for developers, the end user will get the same conventional html. Without some kind of common solution/protocol/standard on the browser side that would allow persistence it's not so exciting. Theoretically there might be some kind of simple protocol that would save html file versions on the server based on the cookie, but there are so many ways this can go wrong
- calebm 1y agoI'm still confused - if it requires a NodeJS server, then it wouldn't be a fully self-contained HTML file would it?
- udave 1y ago[dead]
- rlue 1y agoIt technically doesn't say "self-contained", but it does say "portable" and "self-updating", which I must agree is misleading.
- outofpaper 1y agoIf you want something actually self contained play with this https://startr.style/modernism/ https://startr.style/modernism/
- abustamam 1y agoThat was cool! Thanks for sharing.
- outofpaper 1y agoYou're welcome!
- actinium226 1y agoThis thing comes across so pretentiously, but they have some really novel CSS ideas I might try. The idea of making selector based on [style*="--bgc:"] and using that to set background color like style="--bgc: red" is not something that I would have thought of.
- outofpaper 1y agoHappy you enjoyed it. Most of my creations just build on and with Startr.Style. It's a tight alternative to Tailwind's mess of classes. I especially love how directly it translates to pure styling yet allows us to have responsive design eg add the -md suffix to --bgc to specify background colors for tablets and up. When I work on Modernism or any of the other experimental pages on https://startr.style https://startr.style I don't do it with any pretension but out of a love and familiarity of code and what the web can be. As child I traded helping out at a local computer store for time exploring Gopher and then Mosaic's window to the web.
- curtisblaine 1y agoIf I need a server to run this then surely I can use sqlite and save different versions of the page without overwriting the html page every time.
- leptons 1y agoThis all sounds like something from 2001. I was doing pretty much exactly this around 2001, using contenteditable with an IIS/JScript back-end.
- BoppreH 1y agoI think contenteditable is more akin to a rich-text document, while Hyperclay goes a bit beyond by allowing JS to edit the DOM too. I think Smalltalk images and virtual machines are a closer comparison, but applied to the web. You download the image, with some running code, use it, and persist the whole application state.
- leptons 1y ago> while Hyperclay goes a bit beyond by allowing JS to edit the DOM too. So revolutionary!! How did they achieve this technical feat!?
- philote 1y agoYeah, sounds like Tiddly Wiki or similar except with the need for a backend component. Edit: actually it looks more like a library/framework to make such apps. And now I'm not sure if it needs a backend component or nodejs or not.