Hacker News new | past | comments | ask | show | jobs | submit login
Turn your browser into a notepad with one line (coderwall.com)
956 points by bitsweet on Jan 29, 2013 | hide | past | favorite | 178 comments



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 :).


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.


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.


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


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/)


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


Made it a chrome extension for an easier install.

https://chrome.google.com/webstore/detail/textpad/edopaieiod...


Thanks, works like a charm.


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.


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!


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.


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.


Thanks!


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.


A pity Chrome basically gave up on file:///. A lot of cool things worked better with it (like TiddlyWiki).


If you don't mind loading jquery I made a version which saves to OpenKeyVal. Just set your secret key..

https://gist.github.com/4672169


I forked yours and made it a JavaScript editor. You can use ctrl+j to execute what's in the buffer.

https://gist.github.com/4673043


There's a simple pure frontend editor web app at http://litewrite.net - since it uses AppCache and localStorage you can also use it anywhere. Even sync with remotestorage.

Source is open at http://github.com/litewrite/litewrite


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.


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.


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.


    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


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';
    } 
  }


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.


That's exactly what I did.


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.


This is a much easier way to customize its appearance:

    data:text/html, <html><style> body { font-family: sans-serif }</style><body contenteditable>


I forked minikomi's gist above that does something like this, except you use ctrl+j to execute what's in the buffer:

https://gist.github.com/4673043


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.


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.


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.


It's pretty brutal and stupid, but:

    window.setInterval(function(){eval(this.innerText)},1000);


For me Firefox seems not to work with this.innerText . Instead you can use this.textContent to get it to work.


After some mix-and-matching of the awesome code snippets posted in the comments, I came up with something easy on the eyes (with a nice little color transition (for webkit-enabled browsers):

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,... rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Lato"; color:#e9e9e9; background-color:#222; } * { -webkit-transition: all linear 1s; }</style></head><body contenteditable style="font-size:2.2em;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">


Thank you. I've tweaked it to my preferences. I've gotten in the habit of writing with a black on light grey monospaced font. Removing the web font dependency (and the transition, again matter of taste) made the page snappier.

data:text/html, <html><head><style type="text/css"> 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>Poop.</body></html>


Love this version. It's like writing on nice paper.


It's perfect! Thank you!!


Here's a version that can be copy/pasted:

  data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,400italic,700italic rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Lato"; color:#e9e9e9; background-color:#222; } * { -webkit-transition: all linear 1s; }</style></head><body contenteditable style="font-size:2.2em;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">


Nice, i've added a few divs and borders for my version.

  data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,400italic,700italic rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Lato"; color:#e9e9e9; background-color:#222; } * { -webkit-transition: all linear 1s; }</style></head><body style="font-size:2.2em;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"><div style="border-bottom: 2px white solid"><center><h3 contenteditable>Notes</center></h3></div><br /><br /><div style="height:600px; border: 2px white solid" contenteditable></div>


Thank you! I loved it, but couldn't really disable the 'Currently' extension to make this my new tab. Now I'm using 'Web Shortcuts'[1] extension with a GitHub page[2] for the shortcut 'TODO'. Super fast and very useful! :)

[1] https://chrome.google.com/webstore/detail/web-shortcuts/ipno... [2] http://todotab.github.com/ Pull requests welcome :)


Woha! Not bad.


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.


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.


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.


Did you mean: http://en.wikipedia.org/wiki/Kanban_board ?


Nice! I hadn't actually seen that but that is exactly what I mean. Although rather than help the team be more productive it's to let me be more productive :-)


http://www.trello.com ?


Yes, Trello does this pretty well. Not "switch to the buffer in vim" well :-) but its a great tool. An iPad version would be cool.


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


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


I know it's not the point of the post, but you can also use http://throwww.com


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


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


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 could use this Chrome extension: https://github.com/jwaterfaucett/textpad


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.


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


for the really lazy, keyword: '..' ('//' doesn't work :)


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.


> Sometimes I just need to type garbage. Just to clear out my mind. Using editors to type such gibberish annoys me because it clutters my project workspace (I'm picky, I know).

This is a hack and a workaround. The bug is clearly using an editor restricted to editting files in a "Project Workspace". Yikes.

Everyone has their own workflow, and they're all insane (for myself, I have an emacsclient wrapper that when called without a file will create a unique name under ~/.emacsclient-scratch and edit that -- so I never lose anything I know I was typing at one point). Still... this just seems like a really bad solution. You get an "editor everywhere" but it's the default editor in your browser. Ick. It's cute though.


That's a really good idea, thanks. I have `e` aliased to `emacsclient -nt` but there's no reason why it couldn't make scratch files if not given an argument.


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?


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`


I found this very helpful: http://www.html5rocks.com/en/tutorials/file/filesystem/


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


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


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.


It's cute, but I can't help observing that we're what, 70 years into the computer age, and there's still no ubiquitous, small, fast, clean text editor present by default on all personal computers. (DO NOT speak to me of Notepad.exe)

So discovering that 'by accident' web browsers can act as a simple (but huge, bloated and feature-starved) text editor seems like a big deal.

Personally I keep a simple, tiny, old freeware editor called Editpad 3.4, on every PC I use, accessed via desktop shortcut and 'right-click send-to'.


"all" is tricky, there isn't a standard command on all computers to list the contents of a file, let alone edit. But even my WRT54G has vi installed on it, and you can expect to find emacs and vim on almost any *nix.


First thing I do on a new Windows machine is install Notepad2[1]. I highly recommend it, it greatly improves on Notepad.exe while keeping the spirit (simple, lightweight no bullshit editing). It can be configured to replace Notepad.exe automatically. [1]http://www.flos-freeware.ch/notepad2.html


I think the best part is how short and elegant it is.

I assume a lot of people won’t realize you can bookmark that URL since it looks so weird. Also, once you’re bookmarking, you can cheat and put more logic into the page. I made a slightly improved one with a dark background and larger font (hard to post the link on HN, so on a separate page):

http://mrcoles.com/one-line-browser-notepad-bookmark/


The second scratch+ doesn't work (Firefox 18.0.1).

This one works (# is breaking it really):

    data:text/html, <html><head><style>html,body{background:%23111;color:%23fff;font: normal 16px/24px "Helvetica Neue",helvetica,arial;}body{padding:24px 48px}</style></head><body contenteditable><script>document.body.focus();</script></body></html>


You know what's the most amazing about this? The amount of community collaboration its driven. I saw this post when it was on the "new" page and had no comments. Coming back a couple hours later, I can see tons of people doing some tinkering on their own and sharing their finds back here.

I dunno, just something I noticed which I think is completely awesome and indicative of the benefits of open-source and open-knowledge.


Bookmark this text editor I just made:

* Dark background * Tabs work as they suppose to!

<pre> data:text/html, <style>*{padding:0; margin:0}</style><textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none; background: #111; color: #eee; padding: 10px;" autofocus onkeydown="if(event.which==9){ this.value += ' '; return false;}" /> </pre>


I like that.

Possible to add a button that brings up the save dialog in a particular directory (as opposed to cmd-s and choose directory?) Or just the button (just happen to prefer to cmd key myself)?


Looks more like Notepad with font face attribute.

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


Beautiful...what other nifty things can you do except for making the element 'contenteditabe' ?


I do this 2 ways:

1) I have a constant editor opened with a Notes.txt file, so I can save it.

2) I use Sublime Text 2 which maintains the state regardless of whether I've saved the file or not, and is extremely cross platform.


http://dontpad.com can help you guys! :)

Minimal and disposable browser notepad with friendly URLs being used to save/password protect files.


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!


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.


Really? What browser? I just tried it in Chrome and it didn't save what I'd typed.


It's about 10 years since I did any software development, and I only bother with surface tracking of web-languages progress. So a lot of this is news to me. Also maybe some of the posted 'improved versions' provide what I'd like with this 'contenteditable' thing. It'll take a while to try them all.

Anyway...

So far I don't see one crucial feature: the ability to load an existing file, and edit it. Am I stupidly missing something 'obvious'?

Being able to edit text and save, but not load existing documents and edit them makes this a useless novelty.

I did notice one suggestion to load a doc then use a short js command to switch to contenteditable. But that's not quite there.

Ideally, a browser could be made to work like this:

* Multiple ways to get it started: bookmark, desktop shortcut icon, url to public or private html page containing the config script. Once working like an editor it should stay that way, for multiple file load/saves and multiple tabs open.

* An 'open file' for any existing plaintext or html file, loaded from local filesystem (via file selector popup or bookmark) or the web (type known url or use bookmark).

* Ability to switch back and forth between three modes on the same document: raw plain ascii (no formatting), minimal formatting (B, I, U, bullets), and full html formated display.

* A document 'save as' as plain text (formatting stripped) or html, to the local filesystem, OR (best feature yet) anywhere with write enabled on a public or private web server.

* Nice if also handles encrypted load/save, so the doc is never in plaintext except on the local machine.

With that, the big name 'cloud' services can go take a leap. I could use my own server(s), or ones I happened to trust. There is flatly no way I would ever trust large enterprise cloud services.

Also, a tool like that which would allow editing on ANY machine with web access and local file r/w enabled for the browser, would be very useful for... things.

It always astonished me that browsers did not provide the capability to natively edit the html they displayed. Such an obvious need, and you'd think so simple to implement, that I'd concluded the absence of this ability had to be a deliberate industry-wide agreed policy of capability avoidance. Which means, for political reasons.


The File API is still kind of poorly supported, but you could add that depending on your browser (though you'd want to use an extension, since it'd be a bit more code).

As for live-editing HTML, that's usually been considered out of scope for a web browser, and been pushed to authoring or debugging programs. Chrome ships with their developer console integrated, but IIRC Firefox still relies on extensions.


Firefox now comes with a console, DOM inspector and JavaScript debugger out of the box.


Slightly slower but I use this etherpad clone:

piratepad.net/[gibberishstring]

It's totally public though and there is no way to delete pads, so use with caution.


Interestingly, NoScript addon for Firefox brings up the following message on attempting the URL:

"javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks. Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference."


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.


This + Ruby syntax highlighting.

https://gist.github.com/4666256


Thanks for this. Adding ace is a great idea!


https://gist.github.com/4670615

with support for Firefox 18 as well, and It comes with many languages and themes.


I'm actually surprised this link got this much traction, I actually thought this was a thing that most developers were aware of. Shows you that you ought to reconsider when disseminating information that you as a learned developer think is "too basic" to bother writing about.


To be fair, I knew nothing about contentEditable until I sat down and tried to design my own RTE. It's actually very cool how little it takes to develop one that works, and FontAwesome makes it even easier. I would definitely consider it obscure.

As an aside, it's really interesting to look at the source for Ace[1]. It doesn't use contentEditable, but certainly represents the sort of complexity we'd need without contentEditable available.

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


I do this in terminals:

  cat > /dev/null
Type whatever you want, then control-D to end.


That is a UUOC. This...

    > /dev/null
...does the same thing.


No, it doesn't. It just drops you to another shell prompt.


Not in zsh it doesn't. (tip: it's a zsh thing.)


oh, well, unspecified shell snippets are usually assumed to be some bourne derivative, in which case the cat is necessary.


Agreed, just adding the caveat.


My bad.


Awesome command. Now in Windows I won't have to do Start Key + R, then type "notepad"...

The browser is the new OS!


I just hit F4 and click on my notepad. (opera) What's the advantage of this guys way?


It's not an advantage, it's catching up.


So "data:text/html, " is the new "about:" to do some inline html? Useful to know.


The contenteditable element is neat for quickly turning HTML elements into a notepad, but scripting custom functionality into it (creating a header after pressing enter twice, etc.) was a huge pain in my experience.


In the summer of 2011 an infinite textarea was posted to HN. You'd be in replace mode per default, and you could share it by URL. It would automatically save. I'd be delighted if someone knows its name.


I used to use a similar oneliner:

  data:text/html,<textarea style="height:99%;width:100%;" autofocus onfocus="this.value=localStorage['txt']" onchange="localStorage['txt']=this.value;">


Now I just need to code up a quick "send to Gist" bookmarklet and I'm set.


Nifty code. Nice to know trick. Personally the usefulness ends there. Folks are adding in just about every little css,js goodies. Internet is an awesome place to throw a stone and see it gather mass.


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.


But... Why? I know he tried to justify it in his post, but to me, having a save option FAR outweighs the "benefit" of having your notes in a browser.


It's almost like it's completely pointless... no?

Coming soon, find out what happens when you 20 GOTO 10!!!


That's a very clever hack! I've also been using this http://pencil.asleepysamurai.com/


i didn't know of contenteditable before, so 1000+1 thx. in my job i need to scribble above existing pages like crazy, so i mashed together this https://news.ycombinator.com/item?id=5140200 - a one liner / one unicode icon bookmarklet to liveedit any page.


There's a similar hack floating around:

javascript:document.body.contentEditable='true';document.designMode='on';void 0

(lets you edit currently loaded page.)


if you want something more like this, chrome notepad [1] seems like a good app that lets you sync notes across multiple devices using google account sync

1]https://chrome.google.com/webstore/detail/chrome-notepad/ffb...


Extremely useful! I'm getting tired of opening Sublime, TextMate, or even worse, Notes.app or Stickies.app.


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


We just need to port all Sublime 2 features( 3 maybe) to JS and add as onload and I am set.

:D


data:text/html, <html contenteditable><script>var t=prompt("what shall we name this file?","new");document.title=t;</script>

^ you can now hit ctrl+s to save the file with a real name


polished version you can use https://github.com/tholman/zenpen

http://zenpen.io/


This is the best post since Al Gore invented the internet!


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


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


any ideas how to smartly send the written things to evernote? the webclipper doesn't work.


Why don't you just log in to evernote and take a note there?


Does anyone else feel wary of typing any data: URIs into their browser? It might seem safe, but how can you know?


data:text/html, <html contenteditable>ATARI COMPUTER - MEMO PAD</html>

Ah, much better.


Yes :)

I have added some color:

data:text/html, <html contenteditable><body style='background-color:rgb(0,81,129); color:rgb(93,180,227);font-family:monospace;font-weight:bold'>ATARI COMPUTER - MEMO PAD</body></html>


This is really useful. Thanks.


Works well on Mobile Safari.


Very cool!


i bookmarked it as 'notes'


In unrelated news coderwall.com really needs good syntax highlighting. Is called CODERwall for God's sake.


S.I.T. = Shit Is Tight




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: