Use your browser as Notepad | Hacker News Reader

Use your browser as Notepad

fizerkhan.com

105 pointsfizerkhan28 comments

Sublime Text Flavor with Ace

  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>

This is just straight up magic to me.

The first part:

  data:text/html,

tells the browser to use the rest of the URL as the HTML content for a web page.

The rest of it is easier to follow if it's indented like normal code:

  <title>DoJS</title>
  
  <style>
      #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"
      charset="utf-8">
  </script>
  
  <script>
      var e = ace.edit("e");
      e.setTheme("ace/theme/monokai");
      e.getSession().setMode("ace/mode/javascript");
  </script>

So, this is just a normal HTML page with the <html>/<head>/<body> tags omitted. Browsers don't care if those are missing. In fact, you can save this text to a .html file and open it in Chrome and it will work the same as the "magic" URL.

The page creates a <div> and uses CSS to set its font size and make it fill the window. Then it loads the Ace Editor library [1] and initializes an editor instance in that <div>. Finally, it selects the Monokai theme and JavaScript syntax highlighting.

(I omitted the type="text/css" and type="text/javascript" because they aren't needed.)

[1] http://ace.ajax.org/

I love it. Data URL make editor possible in a single tweet.

You need to URL encode it for it to work in Firefox.

data:text/html, <style type%3D"text%2Fcss">%23e{position%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B}<%2Fstyle><div id%3D"e"><%2Fdiv><script src%3D"http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js" type%3D"text%2Fjavascript" charset%3D"utf-8"><%2Fscript><script>var e%3Dace.edit("e")%3Be.setTheme("ace%2Ftheme%2Fmonokai")%3Be.getSession().setMode("ace%2Fmode%2Fruby")%3B<%2Fscript>

Cool, thanks!

Or, you know, you could just use Notepad as Notepad. Or a real text editor, or something like Simplenote.

Snark aside, this would be a more interesting post if the author gave some reason why this was a good idea. As far as I can tell, it's strictly worse than a text editor. I mean, it is an interesting hack, but the post doesn't frame it at all.

If you use it as a text editor you are right, but with the Ace implementation this is a powerful tool, as a web developer I use it a lot

My feelings exactly: C-r n gets me straight to taking a note in Emacs (via org-mode), complete with link to what I was in when I took the note, timestamp, time tracking and all the other org-mode/Emacs goodness (tags, tables, links, etc). Maybe if you live in your browser the OP makes sense, but for those of us who live in Emacs (mainly for code), it makes more sense to use a real editor.

Org-mode looks great, new to me. I made my own much more primitive thing, I've been slowly evolving over a decade and a half, so yes, this is a knock on the head. Old outline mode never took with me.

Actually you can do much more with this trick, I made one free tool called Writability - http://www.vcarrer.com/2013/01/writability-write-in-your-bro...

You can also just use a textarea:

    data:text/html,<textarea>

A more polished version (100% width/height, nice margin/padding, auto focus):

    data:text/html,<html><head><title>Notepad</title><style>html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;}</style></head><body><textarea%20style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>

This fixes the issue that cutting (Cmd/Ctr + x) doesn't work in Firefox with contenteditable.

One advantage is that formatting shortcuts (Cmd/Ctr + B etc) work with content editable (at least in my browser, Safari 7)

Ace with Vim keybindings:

  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>

Base64 (works in Firefox):

  data:text/html;base64,PHRpdGxlPkRvSlM8L3RpdGxlPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+I2V7Zm9udC1zaXplOiAxNnB4OyBwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGlkPSJlIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXdnaXRodWIuY29tL2FqYXhvcmcvYWNlLWJ1aWxkcy9tYXN0ZXIvc3JjLW1pbi1ub2NvbmZsaWN0L2FjZS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3Z2l0aHViLmNvbS9hamF4b3JnL2FjZS1idWlsZHMvbWFzdGVyL3NyYy1taW4tbm9jb25mbGljdC9rZXliaW5kaW5nLXZpbS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdD52YXIgZT1hY2UuZWRpdCgiZSIpO2Uuc2V0VGhlbWUoImFjZS90aGVtZS9tb25va2FpIik7ZS5zZXRLZXlib2FyZEhhbmRsZXIoYWNlLnJlcXVpcmUoImFjZS9rZXlib2FyZC92aW0iKS5oYW5kbGVyKTtlLmdldFNlc3Npb24oKS5zZXRNb2RlKCJhY2UvbW9kZS9qYXZhc2NyaXB0Iik7PC9zY3JpcHQ+

Ace with Emacs keybindings:

  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-emacs.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/emacs").handler);e.getSession().setMode("ace/mode/javascript");</script>

Base64 (works in Firefox):

  data:text/html;base64,PHRpdGxlPkRvSlM8L3RpdGxlPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+I2V7Zm9udC1zaXplOiAxNnB4OyBwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGlkPSJlIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXdnaXRodWIuY29tL2FqYXhvcmcvYWNlLWJ1aWxkcy9tYXN0ZXIvc3JjLW1pbi1ub2NvbmZsaWN0L2FjZS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3Z2l0aHViLmNvbS9hamF4b3JnL2FjZS1idWlsZHMvbWFzdGVyL3NyYy1taW4tbm9jb25mbGljdC9rZXliaW5kaW5nLWVtYWNzLmpzIiB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIGNoYXJzZXQ9InV0Zi04Ij48L3NjcmlwdD48c2NyaXB0PnZhciBlPWFjZS5lZGl0KCJlIik7ZS5zZXRUaGVtZSgiYWNlL3RoZW1lL21vbm9rYWkiKTtlLnNldEtleWJvYXJkSGFuZGxlcihhY2UucmVxdWlyZSgiYWNlL2tleWJvYXJkL2VtYWNzIikuaGFuZGxlcik7ZS5nZXRTZXNzaW9uKCkuc2V0TW9kZSgiYWNlL21vZGUvamF2YXNjcmlwdCIpOzwvc2NyaXB0Pg==

EDIT: formatting

EDIT 2: Base64

This is so much cool!

If you want to get fancy, add a little bit of style. It goes a long way.

    data:text/html, <html contenteditable><style>body {color: #333; width: 960px; margin: 0 auto; display: block; height: 100%; font-size: 36px; padding: 20px;}</style></html>

"#" should be encoded in the URL. Here's my version:

    data:text/html,<html%20contenteditable><style>body{-moz-box-sizing:border-box;box-sizing:border-box;word-break:break-all;overflow-x:hidden;color:%23333;width:960px;margin:0%20auto;display:block;height:100%;font-size:20pt;font-family:monospace;padding:20pt;}</style></html>

Very Cool. People might make any language editor with syntax highlighting in data url.

Now all I need to do is memorize this string when I'm on the phone trying to write down a phone number!

Save it as a bookmarklet, drag to your bookmarks toolbar.

Or you could just write the phone number directly into the address bar, and copy it to the clipboard to keep it safe.

Or use paper and pen.

Now all it needs are Vim keybindings.

Oh, man this is amazing.

Ever since I first saw the aloha text editor I realised content-editable is going to have a massive impact - this was one that is totally obvious in hindsight but has completely floored me.

And it works in my iphone. Cannot actually save but still its nice to know.

Ultimate Ace notepad:

https://gist.github.com/jdkanani/4670615

I really like the design of this site.

It uses Cabin (https://github.com/colinwren/Cabin) static site generator. You can write your blog in markdown.

Awesome !!

Reply on news.ycombinator.com