One line browser notepad

Posted 3 years ago     8207      browser html5

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='' 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);"#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



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

This is excellent :D


I use ~~~~~
data:text/html, <script src="" 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

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="" 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 →