One line browser notepad

Posted 3 years ago     8128      browser html5
58

Sometimes when I'm on the phone or something, I need to quickly jot something down. Using editors to type such gibberish annoys me because it clutters my project workspace (I'm picky, I know).

So I just open my browser, open a new tab and type in the url tab.

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;">

This is a little bit of a tweak from the original one below. But both are super useful for quickness!

data:text/html, <html contenteditable>

Credit: Jose Jesus Perez Aguinaga

Comments


Awesome!



I know! You can change the JavaScript and css easily as you want too.



This is excellent :D



Neat!



I use ~~~~~
data:text/html, <script src="http://ajaxorg.github.io/ace-builds/src-min/ace.js" data-ace-base="src" charset="utf-8" type="text/javascript"></script> <div id="ed" style="position:absolute;top:0;left:0;right:0;bottom:0"></div> <script>ed=ace.edit("ed");</script>
~~~~~ for a code editor in the browser -- it's pretty nice!



Woah that's awesome! Never thought about using that. +1 seiyria



For Technical Specification refer this

http://html5demos.com/contenteditable



This is great, thanks for sharing



This be cool



The fading background needs to be subtler imo. Really nice otherwise!



Expanding on seiyria's editor here is one specialised for javascript using the popular monokai theme.

data:text/html, <style>#editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }</style><div id="editor"> function foo(items) { var x = "All this is syntax highlighted"; return x; } </div> <script src="http://ajaxorg.github.io/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); editor.getSession().setUseWorker(false); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript"); </script>


And you can create a bookmark to these, and have a 1 click editor!



You need to be logged in to post comments.



Welcome to Snippet Repo!

Discover, share and save useful code snippets.

Join our community over over 2,000 members! Currently a 48% acceptance rate. Apply for membership →