Live data from Hacker News

Turn your browser into a notepad with one line

coderwall.com

71–80 of 186 posts

Re: Turn your browser into a notepad with one line

#71
post #27

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

You could use this Chrome extension: https://github.com/jwaterfaucett/textpad

Re: Turn your browser into a notepad with one line

#72

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

Re: Turn your browser into a notepad with one line

#73
post #19

For even more fun, turn your notepad into an interactive JavaScript environment: data:text/html, 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'; } }

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.

Re: Turn your browser into a notepad with one line

#75
post #27

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.

Re: Turn your browser into a notepad with one line

#76
post #28

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

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.

Re: Turn your browser into a notepad with one line

#77
post #56

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,body{background:%23111;color:%23fff;font: normal 16px/24px "Helvetica Neue",helvetica,arial;}body{padding:24px 48px}document.body.focus();

Re: Turn your browser into a notepad with one line

#79

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, http://fonts.googleapis.com/css?family=Lato:100,200,300,400,... rel='stylesheet' type='text/css'> html { font-family: "Lato"; color:#e9e9e9; background-color:#222; } * { -webkit-transition: all linear 1s; }

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{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;}Poop.

Post reply on HN