Hacker News Reader

Hacker News

Comment by neom | Hacker News Reader

Full thread

neom

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.

View on HN

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>

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...

Wat do?

It kills dickbars (aka sticky hover-over UI elements on websites), which term was coined by Mr Gruber of Daring Fireball fame.

https://daringfireball.net/linked/2017/06/27/mcdiarmid-stick...

Haha this is funny. Does this even work for pages that are written with frontend frameworks? Needs a remix for 2024.

Virtual DOM refreshes might bring back the original style if not the elements themselves.

As insane as it sounds what probably makes more sense is to query for and remove the elements, generate a PNG of the page, delete everything in the body, and make sure the only child element of the body tag is your new img tag.

Also since you cannot unload or make undefined all the other js already running you may want to add some defensive event handlers on the body tag with MutationObserver.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...

If you have uBlock Origin - and who doesn't - you can use the 'element zapper' to do targeted killing of such annoying elements. It does wonders for those sticky headers, grey-out overlays and similar nuisances. Bind it to a key - I use CTRL-ALT-Z for 'zap' - and you don't need to leave the keyboard to go on a killing spree.

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>

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>

This is great! Is there a way to persist the state across refreshes?

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.

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.

This truly delighted me to learn, thank you!

This is wonderfully clever and simple!

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.

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.

I recommend you check out “Scratches” in PyCharm (or any IntelliJ IDE). Cmd+Shift+N I think? I type it reflexively, it lets you create a scratch pad of any “type” (Python, PHP, plain text, shell, everything IntelliJ supports) and write code with syntax highlighting and all the bells and whistles you are used to.

They are all saved in a folder on your computer and easily accessible from the “Scratches” section at the bottom of the file explorer.

It’s my go-to for any text manipulation and I think you can even configure it up to run your snippets of code if you want (I’m stuck using CodeRunner cause I’m too lazy to look more into “running” Scratches).

I also use it to paste in information as I’m debugging a problem. Then I can use multiple cursors or regex find/replace to take information and turn it into commands to run. Yes, I know about CLI tools built in to most systems and I use them to create one-liners but sometimes I want a little more direct control and/or I want to build a script from the commands.

Reply on news.ycombinator.com