Skip to content

Instantly share code, notes, and snippets.

@booyaa
Last active December 19, 2015 13:49
Show Gist options
  • Save booyaa/5964569 to your computer and use it in GitHub Desktop.
Save booyaa/5964569 to your computer and use it in GitHub Desktop.
data uri + contenteditable = crazy delicious

borrowed from http://www.fizerkhan.com/blog/posts/Use-your-browser-as-Notepad.html

paste into your browser's address bar (won't work on ie and may need base64ing on ffx)

hello world: data:text/html, <html contenteditable>

bad acid: 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;">

bit of js flair: data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>

more from this hn (see it is useful for something): https://news.ycombinator.com/item?id=6005295

vim keybinding: data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="https://rawgithub.com/ajaxorg/ace-builds/master/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="https://rawgithub.com/ajaxorg/ace-builds/master/src-min-noconflict/keybinding-vim.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.setKeyboardHandler(ace.require("ace/keyboard/vim").handler);e.getSession().setMode("ace/mode/javascript");</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment