5 ms·

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 toge

by neom 3y 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.

ajcp 3y ago
This truly delighted me to learn, thank you!
- deleted 3y ago
  [deleted]
blisterpeanuts 3y 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 3y 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.
maxmcd 3y 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>
- nbbaier 3y ago
  This is great! Is there a way to persist the state across refreshes?
- dannyphantom 3y 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&query=kill-sticky&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
  - hattmall 3y ago
    Wat do?
    - celadin 3y ago
      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-sticky-headers https://daringfireball.net/linked/2017/06/27/mcdiarmid-stick...
  - sublinear 3y ago
    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/MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...
xwowsersx 3y ago
This is wonderfully clever and simple!
lakpan 3y 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 3y 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.
  - joshstrange 3y ago
    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.

by neom 3y 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.

ajcp 3y ago

This truly delighted me to learn, thank you!

deleted 3y ago
[deleted]

blisterpeanuts 3y 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 3y 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.

maxmcd 3y 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>

nbbaier 3y ago
This is great! Is there a way to persist the state across refreshes?
dannyphantom 3y 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&query=kill-sticky&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
- hattmall 3y ago
  Wat do?
  - celadin 3y ago
    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-sticky-headers https://daringfireball.net/linked/2017/06/27/mcdiarmid-stick...
- sublinear 3y ago
  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/MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...

xwowsersx 3y ago

This is wonderfully clever and simple!

lakpan 3y 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 3y 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.
- joshstrange 3y ago
  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.