5 ms·

Use your browser as Notepad

105 points by fizerkhan 13y ago

bichiliad 13y ago
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 13y ago
  "#" 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>
- fizerkhan 13y ago
  Very Cool. People might make any language editor with syntax highlighting in data url.
deleted 13y ago
[deleted]
vladocar 13y ago
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-browser.html http://www.vcarrer.com/2013/01/writability-write-in-your-bro...
weavie 13y ago
Now all it needs are Vim keybindings.
thinkxl 13y ago
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>
- modarts 13y ago
  This is just straight up magic to me.
  - Stratoscope 13y ago
    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/ http://ace.ajax.org/
- fizerkhan 13y ago
  I love it. Data URL make editor possible in a single tweet.
- Offler 13y ago
  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>
eruditely 13y ago
Now all I need to do is memorize this string when I'm on the phone trying to write down a phone number!
- robin_reala 13y ago
  Save it as a bookmarklet, drag to your bookmarks toolbar.
- roryokane 13y ago
  Or you could just write the phone number directly into the address bar, and copy it to the clipboard to keep it safe.
  - officemonkey 13y ago
    Or use paper and pen.
tgkokk 13y ago
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
gitaarik 13y ago
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 13y ago
  One advantage is that formatting shortcuts (Cmd/Ctr + B etc) work with content editable (at least in my browser, Safari 7)
JCordeiro 13y ago
I really like the design of this site.
- fizerkhan 13y ago
  It uses Cabin (https://github.com/colinwren/Cabin https://github.com/colinwren/Cabin) static site generator. You can write your blog in markdown.
lifeisstillgood 13y ago
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.
oddthink 13y ago
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.
- thinkxl 13y ago
  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
- npsimons 13y ago
  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 13y ago
    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.
jdkanani 13y ago
Ultimate Ace notepad: https://gist.github.com/jdkanani/4670615 https://gist.github.com/jdkanani/4670615
luxifer 13y ago
Awesome !!

105 points by fizerkhan 13y ago

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 13y ago
"#" 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>
fizerkhan 13y ago
Very Cool. People might make any language editor with syntax highlighting in data url.

deleted 13y ago

[deleted]

vladocar 13y ago

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

weavie 13y ago

Now all it needs are Vim keybindings.

thinkxl 13y ago

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>

modarts 13y ago
This is just straight up magic to me.
- Stratoscope 13y ago
  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/ http://ace.ajax.org/
fizerkhan 13y ago
I love it. Data URL make editor possible in a single tweet.
Offler 13y ago
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>

eruditely 13y ago

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

robin_reala 13y ago
Save it as a bookmarklet, drag to your bookmarks toolbar.
roryokane 13y ago
Or you could just write the phone number directly into the address bar, and copy it to the clipboard to keep it safe.
- officemonkey 13y ago
  Or use paper and pen.

tgkokk 13y ago

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

gitaarik 13y ago

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 13y ago
One advantage is that formatting shortcuts (Cmd/Ctr + B etc) work with content editable (at least in my browser, Safari 7)

JCordeiro 13y ago

I really like the design of this site.

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

lifeisstillgood 13y ago

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.

oddthink 13y ago

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.

thinkxl 13y ago
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
npsimons 13y ago
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 13y ago
  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.

jdkanani 13y ago

Ultimate Ace notepad: https://gist.github.com/jdkanani/4670615 https://gist.github.com/jdkanani/4670615

luxifer 13y ago

Awesome !!