Readit News logoReadit News
neom · 2 years ago
I have a bookmark on my bookmark bar that just does

data:text/html, <html contenteditable>

It's great for quick notes between tabs or copy/pasting things together into a cohesive comment.

maxmcd · 2 years ago
My slight modification on this is:

    data:text/html,<html><head><title>Notepad</title><style>html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;}</style></head><body><textarea style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>

dannyphantom · 2 years ago
I love, love, love threads like this where people share their bookmarklets.

It's how I found kill-sticky[1] which I use religiously.

javascript:(function()%7Bdocument.querySelectorAll(%22body%20%22).forEach(function(node)%7Bif(%5B%22fixed%22%2C%22sticky%22%5D.includes(getComputedStyle(node).position))%7Bnode.parentNode.removeChild(node)%7D%7D)%3Bdocument.querySelectorAll(%22html%20%22).forEach(function(node)%7Bvar%20s%3DgetComputedStyle(node)%3Bif(%22hidden%22%3D%3D%3Ds%5B%22overflow%22%5D)%7Bnode.style%5B%22overflow%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-x%22%5D)%7Bnode.style%5B%22overflow-x%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-y%22%5D)%7Bnode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D%7D)%3Bvar%20htmlNode%3Ddocument.querySelector(%22html%22)%3BhtmlNode.style%5B%22overflow%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-x%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D)()%3B%0A

[1] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

consumer451 · 2 years ago
Thanks for this!

Here is my modification to yours. I added a data URI notepad favicon.

    data:text/html,<html><head><link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAERElEQVRYR+1XbUxbVRh+zm2hX7TlY4LOGF1GOnQuTv0x5twPdS5qlABlOHXJmNn8o+6Hy2ayKGMwkyWO+MsYt2Rios6MTo2bSoQNIpFgYYv7YMXxIRTaCrTQ0rLStdzje++kUtdAa5uYJZ6kufe8vc/7PPe873nfcxnijF1v1ZiYAoc4+CoG1q5QzL4bVKuDGQGxmjH2LANGRVGsPVZf17VzT00FE8TdjCOTXH1y9Ejtx/HwHx0+PBWPi3zFjp379xcIkcyLEMV8MDZB/+ZzoJMInGAop7kbnOeACbPg4vtkO0C2WYCF6WoAeD1dt4EjBt+nYxvbamoi/+S7RcCuvQfqyPgO5+KeY0fqPqD5cZpXyUCGn+BdvgkGx2YSd+amiQXFOawVOdwKJX4lAfdIds4Z4Wv+xotzZUfrD32zpIDX9lZ/S25fMJeWHMzLzp62O50PXr7Ss93hdAkmk+n0Y8Xr2hmxWq3dtT02m8qg1w+Xl5V+KDm29fZWku3RgD/AyktK3jNkG31DDldRx7Xx7V5m/DxU8Mjuxspc30IRMStwwTa0vuns2TNDw/bc55/ZjOV33Sk/ax8ZRVPLOawuWoUN69fJNs45Gj47gUxVJraay6BQKGR7W/vPuNY/gIX4OYphs0uLi17VBOFKLVvyOuZFRAW0tv6u1hfM9dtHHHdLZAK9ppKHUbXjVYQjEZxo/AqhUAihwDRerNyCO/Lzo2RiJIw195uw4fGNsI+S2OZYvERGIcLxQQM8IYVD5/cVNuxYQXkjhfCvYe0ZeEpgaJGmnV3duHSlB6NDg3h73z7odDo4XC782NIKv38aa4oK8cSTmzBLgr5raoZnchLhGR9ef+NN2Vs8vGRvH9egw62m9BGfPmleJnNFBXT1DlYwkTfOL6+l8SQEUmSuqIyG7ML587D+0omXX9kGg9Eo2z1uNyyWRhQXF+OhtQ9HwxMP3+VR4dyYVgpfJYVB5oorIMqY5pv/Bdw+KzATDGLK66dqSnsnxZGl1SLHqJe9JLwCw84/4J70pkh9E65Rq/BA4YrkBFCnw/XZUFoEqDIzkKFUJicgLcxxnCQcAqnOS+U3HUNJLVIqaEnlwIhrDOOeuOeHpDXpNGoUrbwvOQHTgRk5CVPfA4Bep0V+Xk5yApJ+zQQBCedAgv6SfixhAXIIpqgOpCEGWf8mBP95EqZ3GypoGwq3WRJKpThIpTjRFNDQwXT+ULpYZiachHZqRhNJNCOjXofCe+XPgUVHwgJmrlM79iXejo36LBiydEvxL96OrbaBcoHj1JJeUnjA6lGjdUwDEbziVEWezBU9lHZc+q1IlaG8Sn3ols+1FDhjoN87tbjsU/FIWFz99dZlthgB0qT76sAXdHkpXYQL/XhCAhrowyQM9qXFnBvliHnbvr4+lS8sHCRgFf0K0iHkhsjQ71eibVw7Nn1D+HRGl1P9w3Msetr5Exxr3z9q3s3kAAAAAElFTkSuQmCC"><title>Notepad</title><style>html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;}</style></head><body><textarea style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>

qhungg289 · 2 years ago
Add my own little twist to use the default Monospace font and change color scheme based on system theme:

data:text/html,<html><head><link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAERElEQVRYR+1XbUxbVRh+zm2hX7TlY4LOGF1GOnQuTv0x5twPdS5qlABlOHXJmNn8o+6Hy2ayKGMwkyWO+MsYt2Rios6MTo2bSoQNIpFgYYv7YMXxIRTaCrTQ0rLStdzje++kUtdAa5uYJZ6kufe8vc/7PPe873nfcxnijF1v1ZiYAoc4+CoG1q5QzL4bVKuDGQGxmjH2LANGRVGsPVZf17VzT00FE8TdjCOTXH1y9Ejtx/HwHx0+PBWPi3zFjp379xcIkcyLEMV8MDZB/+ZzoJMInGAop7kbnOeACbPg4vtkO0C2WYCF6WoAeD1dt4EjBt+nYxvbamoi/+S7RcCuvQfqyPgO5+KeY0fqPqD5cZpXyUCGn+BdvgkGx2YSd+amiQXFOawVOdwKJX4lAfdIds4Z4Wv+xotzZUfrD32zpIDX9lZ/S25fMJeWHMzLzp62O50PXr7Ss93hdAkmk+n0Y8Xr2hmxWq3dtT02m8qg1w+Xl5V+KDm29fZWku3RgD/AyktK3jNkG31DDldRx7Xx7V5m/DxU8Mjuxspc30IRMStwwTa0vuns2TNDw/bc55/ZjOV33Sk/ax8ZRVPLOawuWoUN69fJNs45Gj47gUxVJraay6BQKGR7W/vPuNY/gIX4OYphs0uLi17VBOFKLVvyOuZFRAW0tv6u1hfM9dtHHHdLZAK9ppKHUbXjVYQjEZxo/AqhUAihwDRerNyCO/Lzo2RiJIw195uw4fGNsI+S2OZYvERGIcLxQQM8IYVD5/cVNuxYQXkjhfCvYe0ZeEpgaJGmnV3duHSlB6NDg3h73z7odDo4XC782NIKv38aa4oK8cSTmzBLgr5raoZnchLhGR9ef+NN2Vs8vGRvH9egw62m9BGfPmleJnNFBXT1DlYwkTfOL6+l8SQEUmSuqIyG7ML587D+0omXX9kGg9Eo2z1uNyyWRhQXF+OhtQ9HwxMP3+VR4dyYVgpfJYVB5oorIMqY5pv/Bdw+KzATDGLK66dqSnsnxZGl1SLHqJe9JLwCw84/4J70pkh9E65Rq/BA4YrkBFCnw/XZUFoEqDIzkKFUJicgLcxxnCQcAqnOS+U3HUNJLVIqaEnlwIhrDOOeuOeHpDXpNGoUrbwvOQHTgRk5CVPfA4Bep0V+Xk5yApJ+zQQBCedAgv6SfixhAXIIpqgOpCEGWf8mBP95EqZ3GypoGwq3WRJKpThIpTjRFNDQwXT+ULpYZiachHZqRhNJNCOjXofCe+XPgUVHwgJmrlM79iXejo36LBiydEvxL96OrbaBcoHj1JJeUnjA6lGjdUwDEbziVEWezBU9lHZc+q1IlaG8Sn3ols+1FDhjoN87tbjsU/FIWFz99dZlthgB0qT76sAXdHkpXYQL/XhCAhrowyQM9qXFnBvliHnbvr4+lS8sHCRgFf0K0iHkhsjQ71eibVw7Nn1D+HRGl1P9w3Msetr5Exxr3z9q3s3kAAAAAElFTkSuQmCC"><title>Notepad</title><style>html,body{margin:0;padding:0;color-scheme:light dark;}textarea{padding:10px;font-family:Monospace;font-size:16px;height:100%;width:100%;border:none;outline:none;resize:none;}</style></head><body><textarea style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>

nbbaier · 2 years ago
This is great! Is there a way to persist the state across refreshes?
blisterpeanuts · 2 years ago
Thanks for this. Very clever and handy.

I've been wanting to make a simple web app with persistent notes, a homegrown Google Keep clone, to run on my shared host, just for privacy purposes.

But this is a neat little non-persistent solution for single-location use.

jddj · 2 years ago
If it's just for you (and in some cases even if not), you can also just save the innerhtml directly to a database to get the persistence.

Run it through a sanitizer before serving it back, but otherwise it'll work fine.

ajcp · 2 years ago
This truly delighted me to learn, thank you!

Deleted Comment

xwowsersx · 2 years ago
This is wonderfully clever and simple!
lakpan · 2 years ago
And then something happens and you lose it.

A million editors and you pick the least capable. My go-to is a sublime text window, even if ST is not my code editor.

buggy6257 · 2 years ago
At this point I have PyCharm as my IDE, Obsidian as my official "Notes" with a capital N, and about 40 open unsaved text documents in Sublime Text that i just use as scratchpads. Writing down things, acting as a poor man's extended clipboard, etc.

I absolutely love this flow and it works so well for me now.

theamk · 2 years ago
> The product is browser first and document history is stored locally

so.. for throwaway documents then?

browser storage is one of the worst data places imagineable. Hard to backup, very hard for user to access, impossible to sync or share. And very unreliable too: many troubleshooting procedures for web apps start with "reset browser profile" or "clear site data"

qingcharles · 2 years ago
I assumed it was letting you store it on the local filesystem, not in the browser storage, which I agree is a bad place to store anything. There is one site I use that stores my favorites in the browser store and I had to write two JS bookmarklets so I can import/export my settings on a regular basis because pretty much every time Chrome crashes you can be assured that all my cookies and storage data gets zero'd out.
RajT88 · 2 years ago
The new and improved Pastebin
willsmith72 · 2 years ago
"document history is stored locally" doesn't necessarily mean "document history is not stored in the cloud/elsewhere"
SahAssar · 2 years ago
It sort of does. Not in a strict semantic sense, but I don't think any user of a service that says it stores stuff "locally" expects it to upload that to somewhere else without explicit consent.

It sounds like your interpretation is like if I said "our data is stored on our servers" but that actually meant "our data is stored on our servers, but also on AWS, GCP, Azure, Alibaba and shared with FSB, CIA, CCP, and the public and other parties (including but not limited to the Royal Bhutan Police)".

That would be true, but misleading to the point of being meaningless or (hopefully) potentially criminal.

lewisjoe · 2 years ago
I tried using the product and out of curiosity inspected the editor. The editor is basically a CodeMirror plugin with all the tech heavy-lifting like realtime collaboration is enabled by CodeMirror itself.

It's clearly an overstretch to call this a Google Docs alternative, especially since Google docs is powered by insane levels of engineering. I know because I work on a competing word-processing product.

It's mildly surprising seeing such a shell product receiving millions of dollars in funding and even a published post in TechCrunch!

somenameforme · 2 years ago
I'll be swapping over. My usage for Google Docs is little more than pastebin + formating + access control. I suspect this is also probably a huge chunk of their overall use-case as well. In general, the least engineering amount possible to deliver what's actually needed is best IMO!
ilikehurdles · 2 years ago
There once was an incredibly nice product like this called hackpad. It even had a similar theme IIRC. It was a yc company, lovely polished product, and the folks I was founding a startup with loved it with zero effort spent on convincing them.

10 years ago Dropbox bought it and shut it down.

https://hn.algolia.com/?q=hackpad

Shank · 2 years ago
Hackpad still quasi-exists as Dropbox Paper, but it's definitely not the same. I really like this product because it reminds me a lot of Hackpad!
rigid · 2 years ago
I loved etherpad but it was a pain to host back then.

I'd love to have something similar that's lightweight and not serverside node.js

aedocw · 2 years ago
unspecified · 2 years ago
I just got hedgedoc (nee codimd, nee hackmd [1]) setup for my own purposes. It does have the advantage of splitscreen edit/preview, and it has the option to use vim/emacs keybinds in the editor, but if I'd had stashpad, I probably would not have bothered setting up a selfhost hedgedoc.

[1] https://hedgedoc.org/history/

rapnie · 2 years ago
+1 for hedgedoc. Only weird thing missing is an admin interface and easy way to check if no one is abusing any of those forgotten public pads that are hanging about.
sigmonsays · 2 years ago
It needs to support some table of contents concept, pretty limited tbh. This looks like a very basic app. Who do they know at TC?
xenodium · 2 years ago
I’m seeing scratch solutions shared, so here’s mine for iOS

https://apps.apple.com/gb/app/scratch/id1671420139

I tried to optimise for least number of taps to quickly write something down.

Here’s a blog post by a user https://irreal.org/blog/?p=11202

acheron · 2 years ago
But if there’s no login how do they track you for marketing purposes? This doesn’t sound like a web app at all.
ImPleadThe5th · 2 years ago
Instead they'll record all your keystrokes and feed that to their proprietary AI and sell it back to you