185 comments

[ 4.0 ms ] story [ 208 ms ] thread
So "data:text/html, " is the new "about:" to do some inline html? Useful to know.
That's pretty handy. In Chrome ctrl+b and ctrl+i bold and italics the text respectively. If I can get bullets that could be a nice replacement for the text editor I currently use for notes.
At least on OS X, bullets are alt-8. Can't speak for any other OS. Looks like this: •
Anybody know if there are similar shortcuts in Firefox as well?
(comment deleted)
This is really useful. Thanks.
Thanks for this nice trick. I have Emacs bound to ctrl-alt-E so can pop that up whenever I need a scratch pad (Linux, obviously), but this is just cool. I've bookmarked it.
Vim for me, but same thing.

Actually, hotkey bindings: vim, terminal, root terminal, mail, web, and bc.

Now I just need some javascript to listen for Ctrl+S and save it as a text file in ~/Documents/scratchpads. Time to get crackin'
How do you save stuff in files from the browser?

I've googled around about this a couple times and not found anything good, so if anyone can point to some clear documentation I'd appreciate it.

I'm on mobile so I can write to much accompanying text, but start here:

http://www.html5rocks.com/en/tutorials/file/filesystem/

Thanks to both of you. I'll check it out.
I don’t think that’s going to work, since the data URI is inherently local (and only works on Chrome), and you can’t use the Chrome file-system API or even localStorage when you're viewing a local file, unless chrome was opened with `--allow-file-access-from-files`
Nifty trick. To build on this, if you use chrome, add it as a search engine with a special keyword so you can type in your URL bar something like "note + <ENTER> + <TAB>" then you're in typing mode.
Yeah this is nifty. For the lazy:

Name: note

Keyword: note

URL: data:text/html, <textarea style="font-size: 1em; width: 100%; height: 100%; border: none; outline: none" autofocus /> %s

Of course, you could change the style of the URL. That's just what I defaulted to.

for the really lazy, keyword: '..' ('//' doesn't work :)
hi, here is my final version i use

  name: note
  keyword: n

  URL: data:text/html, <html><head><script>function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } }</script><style> html{background-color:#CCCCCC;font-family: Monaco, Consolas, "Lucida Console", monospace;font-size:14px;color:#424242;line-height:1.4;max-width:60rem;margin:0 auto;}body{background-color:#F0F1F1;padding:100px;}</style></head><body contenteditable autofocus onload="placeCaretAtEnd(window.document.body);">we%20did%20this&nbsp;</body></html>
it uses the "paper" look and feed and sets the focus to the end of the document so that you can just continue writing
In fact, if you add the `%s` variable inside the HTML tag:

    data:text/html, <html contenteditable>%s
This way, you can enter:

    note [tab] "foo bar baz" [enter]
And whatever you enter as the search query ends up in the note to start with.

Edit: Just saw the other response to this comment saying basically the same thing. Nevermind.

data:text/html, <html contenteditable><h1>%s</h1>

More like it.

Beautiful...what other nifty things can you do except for making the element 'contenteditabe' ?
In unrelated news coderwall.com really needs good syntax highlighting. Is called CODERwall for God's sake.
(comment deleted)
Looks more like Notepad with font face attribute.

data:text/html, <html contenteditable style='font-family: monospace'>

Very cool.

I like this guys implementation too. https://gist.github.com/4666256

Perhaps an implementation with vim bindings support? :D

I just use a hot key that launches a gvim instance...
Personally I'm more interested in the concept of typing gibberish to clear your mind. What particular kind of gibberish? Doggerel verse? Blind keyboard mashing?
I often do an exercise that I've started referring to as a "brain dump". Sometimes when I feel overwhelmed, for whatever reason, it helps to just simply start typing. I start by just saying whatever is most present on my mind, and each new thought starts on a new line. More often than not I end up drilling down to some kind of inner conflict buried pretty deep in my mind.

What's really amazing is when seemingly unrelated stressful moments in your life are revealed to be from the same source.

The thought of doing that is kindof scary. Who knows what I might end up typing!?

Of course, this is probably a reason to do it.

I picked up on it from this site: http://750words.com/ It's rather cathartic, although you're right that letting your mind wander within a recorded stream sometimes means you write down some quite scary stuff, it's probably the same part of the brain that says "you could jump, you know" whenever you look over a high ledge
Apropos of nothing I believe this works because it frees up space in your brain. Sometimes, when I'm trying to get too much done at once, I'm stressed out by trying to keep to many things in the forefront of my thoughts at once. When I get stuck like that I create a scratch pad document with three 'zones'

   Doing:
      stuff I'm working on right now

   ToDo:
      Stuff that I know needs to get done

   Done: 
     Stuff that is now done.
Start by dumping everything I'm thinking of in 'Todo' and pick one and put it in Doing and while I'm in the middle of doing it when I think thoughts like "oh and this should really do x" I add that to the Todo pile and go back to doing. Each time I finish of the 'Doing' task I scan the todo list, move anything I need to into Done and pull one up for the Doing pane.

By externalizing the bookkeeping of all the things I'm trying to keep straight in my head I free up cycles to actually work on something.

The recently discussed http://mindmup.com works beautifully for me for this -- I just start lobbing the features and head noise into nodes and organize until some watershed where I realize I know what I need to do.
Just tried this, very relaxing, quite amazing how many different things you have spinning around your head at any one time...
I've found it is rare that I ever re-read my notes, no matter how much I might think I'll want to when I'm making them. This can be an idea or a long-term to-do list or the outline of a blog post, whatever. If I don't use it immediately after I'm done typing, it never gets read again.

As a result, I've started saving things less and less. However it's still useful to initially type them out. Helps me plan and form my thoughts and ideas. Currently this usually involves opening Textmate or Tumblr (and saving drafts) or email.

Hopefully this will be a solid replacement for all of the above. If I end up typing something I do want to use, then I'll copy and paste it elsewhere. The majority of the time I'll simply close the browser and not save it.

Very neat. Is there a way to only do plain text?
Try <textarea> instead of <html...
Thanks. Just expanded on that idea and did one of these: data:text/html, <textarea style="border: 0px; width: 100%; height: 100%; background-color: #F8F8F8">
For even more fun, turn your notepad into an interactive JavaScript environment:

  data:text/html, <html contenteditable onkeyup="eval(this.innerText)">
Then you can upgrade it by pasting in something like this:

  this.onkeyup = function () {
    this.style.backgroundColor = 'white';
    try {
      eval(this.innerText);
    } catch (e) {
     this.style.backgroundColor = '#FFAAAA';
    } 
  }
This is clearly awesome. First thing I did? Got into infinite loop. This is not exactly a good interactive console for JavaScript, but still very fun.
I think I like it because of how weirdly constrained it is. Especially when you're writing something that will overwrite the handler itself, it's easy to get yourself stuck in a loop or a strange dead end.
Typing `alert("hi")` was a bad choice.
It took me a few goes to figure out I could just click OK.
Thank you. Thank you so much.
Is there an equivalent to `this.onkeyup` for touch devices that don't generate onkeyup events? Trying to make this work on an iPad, but I only have surface knowledge of JS.
Hmm... I only have an iPad simulator with me, but it works just pasting in what I wrote above. Maybe something in your data URI is getting munged?

Keyup is used here rather than keypress (which fires only once for each down-up event) since backspace won't fire keypress events, which is a nice thing to have in a live environment. But I can't think of any environment which would implement keypress and not keyup, or how one might work around not having key events at all.

I did, however, discover that if you alert in mobile Safari (in simulation and on my iPhone) on a backspace keydown, the keyup never gets through and it will happily erase everything before the cursor.

You're right, it works fine with onkeyup. I tried pasting the URL directly instead of opening from "other devices" and it worked. Thanks.
Maybe this helps you, there is a W3 document about touch events: http://www.w3.org/TR/touch-events/

A list of TouchEvent types is here: http://www.w3.org/TR/touch-events/#list-of-touchevent-types

Here is a document from Apple about touch events:

http://developer.apple.com/library/safari/#documentation/app...

And a list of events supported by the Safari browser: http://developer.apple.com/library/safari/#documentation/app...

I don't have an iPad, but I would love to know, if you could successfully use one of these events in this context.

Edit: For example, orientationchange looks promising. Type something, then change orientation.

It's pretty brutal and stupid, but:

    window.setInterval(function(){eval(this.innerText)},1000);
This is a much easier way to customize its appearance:

    data:text/html, <html><style> body { font-family: sans-serif }</style><body contenteditable>
For me Firefox seems not to work with this.innerText . Instead you can use this.textContent to get it to work.
I use Workflowy for this. In the url bar, I type:

  w <enter>
Or, if you're a a super-organized shortcut-type,

  w <enter> <esc> "@misc"
Bonus points -- combine with ctrl+T and ctrl+W for command-line-fu-like syntax on whichever page you're currently browsing!
I use workflowy too, but I'm not sure what you're talking about. `w <enter>` is going to send you to the first site with w in the name (which in my case is 'wikipedia.com' - I have to type 'wor' for workflowy.com to be selected).

The `<esc> @misc` part also doesn't make sense. That just does a search for tags, it doesn't put you in a mode to just write, which is what the OP's solution does.

Last but not least, a little pro-tip for ya, since you like the command line (or keyboard shortcuts as they are also called:) : Command-L puts the cursor in the location bar. So you can do <cmd>+L w <enter>. Also, shift back to a previous tab with cmd+shift+[ and +].

I'm simply describing my workflow -- Workflowy is easily my #1 "w", so that's why this works for me. Probably not very helpful -- I just thought I'd illustrate the "exact" same steps I take to achieve the same effect.

Same goes for "@misc". When I want to brain-dump some gibberish, as in the OP's use case, the @misc tag contains a big dump of stuff that I generally refine or delete later.

I don't know why I don't use ctrl+l -- i usually use ctrl+e or ctrl+k and then backspace (why do these do the same thing in chrome?). But yeah, thanks for the advice.

I used to do WinKey+R whenever I needed to type or paste some plain text, when I was using windows.
Very clever!

I set this as the default URL for new tabs.. Now, everytime I open a new tab, I have a quick scratchpad for pasting/testing/etc.

That's a great idea, did you do it for Chrome? Seems like with Chrome it's non-trivial to set the page for new tabs...
I'm back to Firefox. I like Chrome, but I get bored of using the same browser for too long ;)

In FF, you can do it with about:config

Just set "browser.newtab.url" to the page mentioned in the original link.

You can set it as the homepage (enableable in Settings). It adds an extra step after opening a new page (either clicking on the home icon or shift-cmd-h) but I prefer that to replacing the default Chrome page (with its Most visited and Recently closed menus).
Forgive me for the shameless plug...but thought this might be useful for other HNers and related to OP.

I put together a little project that uses the browsers localstorage so you can jot notes down and come back to them, I find it useful as I'm always in the browser, hope you do too: http://a5.gg

I occasionally use a similar online tool, complementary to yours: http://notepad.cc. It stores each note online at its own URL, instead of per-computer at just the root URL. That lets you retrieve and edit notes across multiple computers. I mainly use notepad.cc if I’m using a someone else’s computer or a public computer and want to send some links or a note to myself.
FYI local storage is not reliable, so you may want to think about a fallback, or at least putting a disclaimer explaining that what you write will probably but nitndefinitely still be there when you come back.
Good call. I intend it's use to be temporary for that reason e.g. quickly scribble down a phone number/website/name etc to refer to asap.
Makes sense, and I like the simplicity of the design quite a bit. Maybe one way to augment it would be to add a button that throws the content into a gist/pastebin.something similar, so it could be more easily shared or preserved? Of course, it's a fine line between that and having social media buttons all over.
750 Words[1] is a great tool for clearing your mind.

1. http://750words.com/

Interesting concept, but Facebook login + my (unique) real name (yes, there's only one of me in the whole world) + unencrypted PRIVATE journal with subconscious gibberish + possibly my email address = privacy hell.

I'd rather install this thing on my private webserver.

The analysis that 750 words does is very unique and interesting. You don't have to connect it with Facebook or your real name. You may create an anonymous account. Personal computer are very prone to failure. You will have to save your information somewhere on the cloud. They all shady. It is a compromise that you have to make based on your best judgement.
Look, I wouldn't enter personal data anywhere on the internet. If I write 750 words a day, I write about personal things that could be clearly related to me (by name or by my company name). I can't take that risk. Not because the guy behind 750words is not trustable. I don't know him. But because I have no idea whether or not his webserver is secure enough, whether or not he stores his FTP password somewhere in plaintext on his mobile or his laptop.

It doesn't have to be him who is the weakest link in that security chain.

What I don't get from your posting is the second part. Personal computers aren't prone to failure at all. I never had a single HDD crash. I backup my data on a second HDD just in case. It's incredibly unlikely that my data is going to be lost and that the cloud is the only solution for that.

So, there's clearly no compromise for me. Rule is: No cloud, no internet service for private data. And heck, I don't even use any analytics software or other software on my company website that I cannot self-host.

I see your problem and I agree with you. I think it's a complex issue. I am afraid of not backing up. My hard drive or local server might fail and I would like to keep a copy local and a copy offsite. All offsite vendors are somewhat shady. At the end of the day, if you use computers connected to Internet, you make yourself vulnerable of serious attacks. It is far from providing your data yourself but point is security in a relative term. So, it comes down to how sensitive is your data and how much you valve it.
Works well on Mobile Safari.
Ah shoot. If Chrome allowed localStorage to be accessible from file:/// then we could add save (CTRL+S) and automatic load using this:

    data:text/html,<html><script>window.onload=function(){var a=document.body;a.innerText=localStorage.mydoc;a.addEventListener("keydown",function(b){b.ctrlKey&&83==b.which&&(localStorage.mydoc=a.innerHTML,b.preventDefault())},!1)};</script><body contenteditable></body></html>
Firefox will save it to localStorage but clear the local storage afterwards. Weird.

Oh well.

At least we can still turn our (Chrome) browsers into desktop calculators by pressing CTRL+SHIFT+J!

(If you want the un-minified version of the code I wrote: http://jsfiddle.net/d5sGq/)

If you can sacrifice the automatic load, simply hitting C-S will allow saving a hard file to disk.

What's particularly nice about this is that when re-opened, they are still editable.

Even the simple File - Save Page As and save as a txt file saves a lot of time for me. I know it adds more clutter but beats opening a new app just to type few things.
Firefox has Ctrl+Shift+K for its web console. It's not as polished as Chrome's, but at least allows running JavaScript in the current page.
That is so cool :). I just slapped together a (really) simple chrome ext for opening up a new tab in "contenteditable" mode. It saves the contents into localStorage, thats it for now :) Here it is if anyones interested https://github.com/jwaterfaucett/textpad
ok - and how do I retrieve the saved contents?
They are loaded when you re-open the extension by the looks of it.
Doesn't work for me - seems I am doing something wrong. I open a tab, write something, close the tab. I open a fresh tab - no text. I'd expect that the written text would show up.
Did you save it? (CTRL+S)
No, I didn't. Now it works, thanks!
Can anybody please give me quick install instructions? There is no readme and I'm unfamiliar with how to add a Chrome extension based on a Github repo.
In Chrome: 1. Tools -> Extensions 2. Enable "Developer Mode" 3. "Load Unpacked Extension" and select the directory you cloned into.
this is cool, just wondering is there an easy way to export the text ? save as and then renaming to .txt doesnt seem to grab the text, just the html.
I forked your code, added support so you can do (C-N) to open a new tab, click tab and start typing (the cursor will be at the end of the line), polished it up a bit (changed font to consolas, added a grey background with a tint of white text-shadow). I've sent a pull request.

https://github.com/AeonAxan/textpad

nice :) I just merged your modifications.
A pity Chrome basically gave up on file:///. A lot of cool things worked better with it (like TiddlyWiki).
You could use some JavaScript to change window.location.href to a new data uri containing the content of the page that you could then bookmark. There's a limit to the length of URLs so it would be an interesting trade off of save size vs features.

    data:text/html,<html><script>window.onload=function(){var a=document.body;a.addEventListener("keydown",    	function(b){if(b.ctrlKey&&83===b.which){document.location = 'data:text/html,' + document.childNodes[0].outerHTML;b.preventDefault();}},!1);document.title= document.body.innerText.replace(/\n[\s\S]+$/," - ")+new Date().toString();};</script><body contenteditable></body></html>
With this you can save using the URL!

Just press Ctrl+S and use the browser history to access it later! And this means it also haves a pseudo-version-control-system included! For easy access the first line in the text becomes the title.

In coderwall: https://coderwall.com/p/xh9u3w

This is what the scratch (EDIT: read scratch as * scratch * without the spaces--is there any way to escape that properly on HN?) buffer is for in Emacs, and I find it extremely useful. Also, unlike using a different tool, it allows me to use all the Emacs-specific features I usually rely on. (For example, I can easily type special characters like r₁ × r₂ ≈ r₃ using the TeX mode.)

If you want more than one scratch buffer--which happens to me once in a while--you can just create a new buffer with any name, and it will also do. New buffers are in a different mode by default, but you can set it up to work exactly the same way as scratch if you want.

As another commenter pointed out, you can use the browser to evaluate JavaScript. Emacs lets you do the same thing with elisp in the scratch buffer by default: try entering in an elisp expression and pressing C-j.

Just a fun alternative to this trick for the Emacs users around here :).

(comment deleted)
There's also a "scratch" plugin for vim that offers similar functionality: http://www.vim.org/scripts/script.php?script_id=664
Geany has a built-in scratch pane, as well (along with a Terminal and some other handy panes that come included).
For vim, I just open an unnamed buffer (:new). I think this is exactly the same as the scratch buffer in emacs.
The only differences being, when you close vim, the scratch buffer does not yield a save prompt, and also, if you open a scratch buffer, then close it, and then reopen it again with :Scratch during the same vim session, any leftover contents from before (but during that same vim session, of course) will be restored, which is neat/convenient. :)

edit: misread your comment, thought you were comparing :new and :Scratch (linked above), not emacs' scratch. Not sure about that one, but again, the 'reopen scratch -> find leftover contents' functionality is a neat thing.

:new | set buftype=nofile
I have a scratch.txt file that I've had around for years. Just shy of 10,000 lines now - it's full of workings and things to remember.

I keep it in textmate, been thinking about moving it to vim but I quite like having it in its own space.

(comment deleted)
I just work in a call center right now, but live in my scratch buffer all day long. Being able to go from note taking to evaluating elisp for quick calculations and never having to switch tools is great. Plus the main piece of software for taking orders is a horrendous java application, with all kinds of weird buggy behavior, so the more I can do with firefox + emacs the better.
(comment deleted)
(comment deleted)
The nicest thing about this is that you can CTRL+S save it as a .html file, and then you can also CTRL+O load the file and it's still editable, and save it again!
Really? What browser? I just tried it in Chrome and it didn't save what I'd typed.
Does not work in Opera. If you save as type: text, the text saves OK. But if you save as html, the file just contains " &lt;html contenteditable&gt;"

Also, HOW to open an existing file while retaining 'contenteditable' mode? Everything I try alters the URL field, so returning the browser to standard display-only mode.

Nice gimmicky hack but not so practical.

Just pin notepad/your favorite editor to the taskbar(win7+) and open it with win+shift+[whatever number that corresponds to the position you placed notepad on the taskbar].

Much faster and much more powerful.

It's another window which isn't tab-bound to the browser.
Oh, you're one of those Mac types.

You should still be able to navigate to that alternate app readily.

I find it easier to navigate to a clearly identifiable text editor session (Linux) than try to track to a specific tab somewhere within my multiple browser windows (on multiple workspaces ...).

Works on Safari, Chrome, Firefox, but not in IE