You can call this the easiest note-taking on Chrome. If you are on Chrome OS, well, this is the easiest. This will work on all modern web browsers, and not Chrome specific.
Here is How You Can Take Note on A New Tab
Open up a new tab and type this in the address bar.
data:text/html, <html contenteditable>
That tab is now your notepad. Try typing something in there (note the address bar). You will see what we are talking about.
Add a bookmark using the code as the URL, for easy access. This works on Chrome for Android too.
How Do I Save This?
As soon as I posted this one on Google Plus, Joe Nicholson commented to let me know that we can just press CTRL + S to save the note. It saves as “dataurl.mhtml” by default.
You don’t need to remember it. It’s not rocket science. We are using the Data URI’s format and telling the browser to render an html (try “javascript:alert(‘Bazinga’);”). The content of said html is a simple html line with the html5 attribute contenteditable. This works only on modern browsers that understand this attribute.
Advanced Code
If you use the following code, you will get a fancier note-making experience, better font and the background color of the tab will change as you type.
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;">
<!–
html { font-family: “Open Sans” } * { -webkit-transition: all linear 1s; }
–>//
Please share your tips in the comments section.
Leave a Reply