<div id="editor" contenteditable="true">The other 90% was all the backend code we had to write to properly synchronize edits across different browsers, each with their own bizarre suite of bugs in their contenteditable implementations :-)
I believe that a lot of problems can be converted into synchronization problems in browsers.
Are there any general synchronization libraries / applications that you suggest within browser / outside browser?
Thanks in advance.
[0]: https://yjs.dev/ [1]: https://automerge.org/
[1]: https://loro.dev/
What features does Loro have that others lack?
This ends up feeling rather magical to the clients, because they don't need to go to an editing page to make changes before seeing what it will look like. They just literally edit the content in place on the page, and hit save to deploy it live.
Most of these sites are still in operation after 5-10 years and require almost zero maintenance on my end.
Under the hood it was about as shit as every other enterprise CMS of the era, but our users fucking loved it.
Most small site owners, such as remain these days - restuarants, small companies selling furniture, lawyers, whatever - they already have their third party sales platforms. They just want to be able to edit their own web content from time to time, without any learning curve.
I never tried to commercialize my CMS, it wouldn't even make sense to do so, since it's geared toward people who want to pay $200/year for hosting once their site is up and running. (I did charge them well for building, though). But the whole thing is maybe literally 5000 lines of PHP code and a few hundred lines of Javascript and CSS. It's just structured very cleverly to read/write pages in mysql, and it has a few bells and whistles like drag/drop photo uploading in place. Barely competent PHP coders could (and have) adapted it to their own needs after I left clients. One really doesn't need the bloated structure of WP to do this stuff, just a very skeletal frame.
A couple remaining examples of my CMS in action: https://thebarkerlounge.com https://vickmanassociates.com
Turns out that it creates two representations of the PDF content - one is text, which has 0 opacity and another is prerendered image of the same layered on top of it. The latter is what's displayed. So while you can enable contenteditable and get the editing cursor, no changes you make will be shown. Oh, well.
ContentEditable first introduced in ie 5.5 in 2000, available in all major browsers in 2007.
I actually also really like the idea of building simple/local web apps in a single HTML page. A while ago my child and I visited a science museum and played with a simple stop motion animator. I decided to make a web app just like it and built it as a single HTML page, copied it to her laptop and she can use it without internet. I built it using React and a bundler though, because I'm too lazy to write vanilla js. It just bundles into a single HTML file. Maybe I'll post a Show HN some time.
plain, vanilla js and some decent skills will do nearly almost everything in a cleaner and more maintainable way.
after decades of maintaining other people's stuff, dumb design by smart people beats all the other combinations.
Consider changing the behavior so that when the page is opened in the browser from the local disk, then it opens edit mode automatically, but when it's published to someone's website and accessed on the open web (check if the address is http/https), then it's a normal, read-only view expected from most pages.
Of course:
1. there should be a way to override this (a query string param or magic URL fragment) so you can look at it in edit mode, too
2. there should be a blanket exception for certain domains/URL prefixes—defaulting to keepworking.github.io (or <https://keepworking.github.io/nash/>)—so it activates edit mode on that site, too, which means that you personally don't have to do anything special to make the demo work (best if this exception is user-modifiable, so e.g. someone else can get the same behavior if they want without using the trick from #1)
I think those two services are more appropriate for the name "Note".
For my project, I should have used Page or Document for the project name.
I know that some people code in an HTML page rendered in Electron, that would be Atom and VS Code and family, but that's far enough from the majority of people that declaring "our code editor" is disingenuous.
According to: https://survey.stackoverflow.co/2024/technology#most-popular...
It seems that the order of most used technologies on SO is JS, SQL, HTML, CSS, and only then Python. We skip back to TypeScript and then Bash before finally getting to Java, C#, and C++.
I daresay that self-selected people who read, and sign up for, and fill out a survey at Stack Overflow does not represent the industry as a whole.
> Call me a neckbeard, but 3/4 of devs are not representative of
> Call me a neckbeard, but 3/4 of devs responding to Stack Overflow surveys are not representative ofMy Code editor is NeoVim or it's IntelliJ
But there is no HTML page involved at all.
What I want to hint at: You're extrapolating the usage of VSCode.
Anyway, I find it remarkable that a piece of software that I don't even use can trigger such a reaction in me, from a perfectly benign and innocent statement about the prevalence of HTML.
That said, I'm genuinely interested in understanding why you felt that way, is using VSCode considered something to be ashamed of or something, is it because it's a Microsoft product?
PS: I have a strong positive bias towards VSCode due to personal history, so just trying to understand the developer perspective :)
I know, and it's nothing that needs an apology from you. Sometimes people (like me) feel offended over nothing, and it's more interesting for them to question why that is, instead of blamig the other party. That's not to say the reverse can't be true, just that it's tempting and too easy to project one's own offendedness if one isn't careful.
But back to the interesting question of what's up with vscode.
It's a very subjective thing for me, which probably explains the emotional reaction. I'm aware that vscode must be a very solid and practical tool for so many people to use it. But it gives me a negative gut feeling, mostly for the following reasons:
Using what is essentially a browser to edit text feels wrong and bloaty, not unlike going on a cruise ship just so you can eat at a restaurant.
It's made by Microsoft. I'm old enough to remember when they were not ashamed of being openly nasty, how they tried to lock us all into their own walled garden, and the glimpse Internet Explorer gave us into what that would look like. It's hard to trust this company, even if they have taken on a more benign appearance.
So, it just feels very wrong to use a weirdly bloaty browser-editor that a company with a track record of being a Big Bad Influence gives away for free. (I have similar misgivings about Chrome, which does not help vscode.)
Therefore, I prefer dedicated editors and IDEs made by people whose main goal is to make just such tools, and who I can pay for (as a purchase or donation). In summary: vscode works well, but using it makes me feel icky, and there are similar or better alternatives available to me that don't give me such a feeling.
So if there is a public statement that can be read to imply that I'm somehow happily using vscode feels a little like getting mud thrown at me, if that makes any sense, and there's a strong urge to clean up the record and, by extension, myself.
Yeah, I also think it's weird how that works. It's things like this that make me understand better the secret inner workings of people interacting with other people. :)
I got the courage to ask because I felt that you sounded open for a bit of self-introspection. Thanks for taking the time to describe something that's difficult to describe!
When I joined Microsoft in 2007, Visual Studio was at a state that it didn't even have syntax highlighting for Javascript. Many years later, I got so excited when Microsoft hired Erich Gamma from IBM's Eclipse IDE project (long story) because I knew what was coming. VSCode was originally called Monaco editor, built on top of WinJS library, and was just a little web component. Over the years, it changed significantly to become what it is today.
From your perspective of VSCode being a "Microsoft product", I totally get what you're saying, but VSCode has been one of the few exceptions for me for the reasons explained, and more.
The 'nasty' MS hasn't gone away. However their negative actions tend to be swept under the rug as somewhat confined to big biz and govt. Look at their headlines from the last five years for details.
Pressing the letter keys for anything other than typing feels so weird to me. My brain might still be thinking of the SHIFT key as a physical modifier that literally shifts the typewriter letters from uppercase to lowercase position.
I admire fast vim users, it's a joy to watch them code.
Then I decided to really give it a try and let go of everything I had learned. Now I'm a daily neovim user. kickstart.nvim is really what made it possible to use as a daily coding tool.
Also, extrapolating usage of vscode seems pretty fair since they said "most"
What blows my mind is that people use frameworks where they include stuff that's not even JS in their HTML, stuff that needs external JS to attach to it or hydrate it. That feels like the worst of both worlds.
I definitely come from an opposite place where JS is king and I don't have any files with an ".html" extension exept for "index.html". And I don't have any HTML in my JS, either. Anything that's a partial template is ".htm" and gets hydrated before it gets added to the DOM.
I have been working on a free markdown editor that works entirely in the browser and can edit local files through the new filesystem access api (available in chromium only browsers).
This is probably the simplest method, put straight in the address bar:
data:text/html, <html contenteditable>
You'll need a bit longer URI in order to support unicode.
Related Hacker News discussions:
Nash appears to simplify my job, thanks!
* plus this for an easy TOC https://codepen.io/cgurski/pen/qBrNrPo
I just tested your note on it, and it works nicely.
Here’s what I did: I copied the HTML of Nash, went to https://my.webstrates.net, created a new blank webstrate, opened Developer Tools, and replaced the entire DOM with the Nash HTML. Now the content persists across reloads.
To enable real-time collaboration, run this in the console:
webstrate.addSyncServer('sync.webstrates.net')
Then share the URL: https://my.webstrates.net/?s/<document-hash>@sync.webstrates...
Now it’s live-editable with others!
Webstrates works by storing and syncing changes to the DOM.
With the chance of killing my sync server, here's a Nash note on MyWebstrates: https://my.webstrates.net/?s/41W5owzLg94wDQAin4yJXGnFyKWN@sy...
I should remember it later and study more.
I think this focuses much more on the standalone HTML part of it.
In the same vein, one could also distribute P2P apps via a standalone HTML file by hooking it up via WebTorrent and using their STUN servers. Or at least, I know that it's possible in the past. Just an example, standalone HTML files can be fully fledged apps is my point.
Share uses Navigator.share (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/s...), which should invoke the browser’s “share” menu if it has one.
It would be nice to have a reasonably nice text editor for notes and whatnot everytime I open a new tab.
All it was missing was a self-contained WYSIWYG editor for it.
UX suggestion. You don't need the "as read only" save options if when you do a normal save the page tells you if it has been changed. That'll get you down to 2 menu options and make me think less.
The UI of this is a lot better though, for markup-style tasks.
here in case anyone wants to check it out
edit: yup it does. Can use Ctrl + S to save via browser too instead of the save icon. Nice work.
I wanted to make/have something like this [1] and got claude to get something close as a PoC.
1) I’ve been getting sick of Jekyll and using it to write, because I find all the work of managing images tedious.
2) my first name is Nash, so this feels like it was made for me. :)
Very fun. Nice and lightweight. I like it.
I may submit a PR for you - I have some ideas about how I could make this more personally useful. Saving off files as Markdown is one idea I had. Would solve my “no pretty markdown editor” woes, and also allow me to chuck output from this directly into my existing GitHub Pages blog.
It's pretty cool how quickly and easily I can generate little static apps like this for ad hoc use cases. I have made a weight tracker, expense tracker, prototypes for work, cards for my wife, slides for work, etc.
For example, this slide show app: https://domsy.io/share/644305ab-d36b-40a9-80e7-f0b52abaa18b
I import it in domsy.io and give AI a text dump of everything I need, it uses the js in that html to convert to slides that I can download to pdf.
https://developer.mozilla.org/en-US/docs/Web/API/File_System...
This is one that Firefox refuses to implement (a personal gripe for me)
Great work.
The problem I had: when people copy/paste HTML from external sources, after a few edits, a few months later, you see that the HTML is just a horrible mix of various mixed up tags, the structure is lost, you have
<div><div><div><div><p><div>
OP, did you find a satisfying solution to this problem? A good compromise for sanitizing of copy/paste content? TL;DR: not remove the images, but clean the
<table class="cf gJ" cellpadding="0"><tbody><tr class="acZ"><td class="gF gK"><table class="cf ix" cellpadding="0"><tbody><tr><td class="c2"><h3 class="iw gFxsud"><span class="qu" role="gridcell" tabindex="-1">
I wanted the document to be edited without a separate editor.
If you send html to Telegram, the preview will not run js when the recipient opens it. I think Android and IOS work differently.
How is this useful? For quick writing and sharing of HTML files, but not the links, but the files themselves.
Very interesting,thank you.
When I opened html on the file app on my iPhone, js didn't run, so I could only see it
I don't think it's perfect in many ways.
So, this is my bug report. I'm not going to explain more, because this is a minimalist bug report.
I would like to understand more how this works -- where the data is stored esp if I were to self host it.
There's a lot of value in these kinds of things to manage your own bookmarks if you choose to without having to expose them to Google and a Google doc or something. Of course you risk losing your file.