Browser Notepad:
Sometimes we want to write quick notes, or something for a very short span of time that doesn’t need to be saved. Most of the time while surfing the giant internet, we find something amazing and might want to save it for a short time to have a look at it later. Sure we can bookmark the website and pile the bookmark manager up or open up a text editor, put in the data, then browse through the computer to find the perfect location and save it with a perfect name, or use a smart way to write down those notes in the browser itself. Yes, you can use a web browser to write down notes that need to survive for a short span. All you have to do is put one line of code in the address bar of the browser and you can turn that tab/window into a notepad. Call it a Quick-Edit Notepad, Browser Notepad or whatever, but this is really cool. Moreover, you can customise it in your own way if you know a little bit of HTML & CSS. You don’t need to install any extension, external software or anything.
Just put the following line of code in your browser’s address bar (URL bar):
data:text/html, <html contenteditable>
Hit Enter, and there you go! Now, you can type anything in the browser itself and doesn’t have to leave the browser to type anything. Also, you don’t even have to remember this line. Open it in a new tab once and bookmark it. So, whenever you need to type something again, just click the bookmark and start typing your ideas, notes, or whatever you want to.
If later you want to save it, you can do so by pressing Ctrl+S (or, ⌘+S in Mac) and it will save as a HTML file. This trick works on almost all modern browsers.
If you want to have some stylish or colorful browser notepads, then you can try these following codes instead of the code given above or can create your own:
data:text/html, <title>Flatpad</title><html style="font-family: 'Roboto', sans-serif;background: #1ABC9C;padding-top:50px;"><head><link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'></head><body contenteditable style="max-width:60rem;margin:0 auto;padding:4rem;background:#fff;border:#666 solid 1px;box-shadow: 1px 4px 8px -4px;min-height: 500px;"></body></html>
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">
data:text/html,<button onClick="SaveTextArea()">Save</button> <script language="javascript" type="text/javascript"> function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } </script> <textarea id="txtBody" style="font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> </textarea>
data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="Start Typing here..." />
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
If you have any troubles/query/suggestion, drop a comment down below. Also, If you have customised your own notepad, share it with us in the comments section below and we might share it with the world. Cheers.
Black Green Notepad is my favourite. Thanks for this post.