
Use your browser as Notepad - fizerkhan
http://www.fizerkhan.com/blog/posts/Use-your-browser-as-Notepad.html
======
thinkxl
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>

~~~
Offler
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>

~~~
thinkxl
Cool, thanks!

------
oddthink
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.

~~~
npsimons
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.

~~~
e3pi
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.

------
vladocar
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...](http://www.vcarrer.com/2013/01/writability-write-in-your-browser.html)

------
gitaarik
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.

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

------
tgkokk
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

~~~
thinkxl
This is so much cool!

------
bichiliad
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>

~~~
pestaa
"#" 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>

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

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

~~~
officemonkey
Or use paper and pen.

------
weavie
Now all it needs are Vim keybindings.

------
lifeisstillgood
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.

------
jdkanani
Ultimate Ace notepad:

[https://gist.github.com/jdkanani/4670615](https://gist.github.com/jdkanani/4670615)

------
JCordeiro
I really like the design of this site.

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

------
luxifer
Awesome !!

