Do you ever find yourself needing to type up a few notes to keep handy for just a few minutes? Maybe you want to make a grocery list or a list of links, or jot down a temp username/password pair, or… whatever! I find myself in that situation about 20x per day.
Sure, you could pull up a notepad or maybe a blank email. But, for many years now, I’ve done something else instead. So, without further adieu, here’s a little trick that is so profoundly simple, yet (for me) useful on a daily basis.
Copy the following code and paste it directly into your browser’s address bar:
data:text/html, <html style="background:rgb(108, 108, 29); padding:15px;" contenteditable><title>NOTEPAD</title><body><div style="text-align:center;"><textarea style="font-size:20px;width:90%; height:99%;padding:20px;border: 10px solid black;border-radius:10px;">NOTEPAD....</textarea></div></body>
… and voila! You now have a workable notepad, as shown below. I recommend bookmarking it so that you can get there in one click from now on.
Keep in mind that this is a temporary thing. It’s not auto-saved in the same way that, say, a Gmail draft email might be. So, it’s not a great solution for super-important notes. (I’ve made the mistake a few times of keeping fairly important notes there, and then the computer shuts down or something … and boom, you’re out of luck!)
Pro tip: If you *do* happen to accidentally close a tab with your notes, and you still have other tabs open (meaning Chrome or Firefox is still open), you can usually get your notes back by using Control + Shift + T (which restores the latest closed tab).
Simpler version? You can also fool around with the HTML in that code, if you like. For example, if you need to print your notes a lot (which I do not), you may want to get rid of that green background and/or even the box border. For example, this code…
data:text/html, <html style="padding:15px;" contenteditable><title>NOTEPAD</title><body><div style="text-align:center;"><textarea style="font-size:20px;width:90%; height:99%;padding:20px;"></textarea></div></body>
… renders a simpler version, like so:
Or, if you really want to get minimalist, try …
data:text/html, <html contenteditable>
… which renders:
I know it seems kind of dumb, as it’s easy to open a notepad or a draft email. But, at least for me (as a web developer), I have tons of browser tabs open all day. So I find this easier and few seconds faster than anything else.
Not sure where I first learned this … possibly on this site, tough, which has tons of examples and alternate versions contributed in the comments! (Sorry for any Microsoft Edge users. This trick won’t work for you!)
✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various Medium.com publications. Find him at JPDbooks.com, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] ArrayWebDevelopment.com. His latest novel, CHROO, is available on Amazon.com. If you enjoy humorous literary tales, please grab a copy!