
Show HN: ~200 byte in-browser, no JS, private notepad - janneklouman
https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/
======
janneklouman
I wanted a place where I could write down my thoughts without them being
stored in the cloud or connected to an account (notes, onenote, evernote,
docs, paper, gist, etc). I don't really like terminal text editors, notepad,
or IDEs for writing, so I made this very simple notepad. It's a <body> html
tag with the contenteditable attribute making it editable, and some <style>.

To save a note just store it on disk (cmd/ctrl+s). To add images, drag and
drop them onto the text area. Remove the contenteditable attribute from
<body>, save, and voila, you now have a static lightweight blog post ready to
be published! Formatting can be a bit wonky but should work in some browsers
(cmd/ctrl+b/i/u). Copy+pasting formatted text can potentially break things a
bit.

The two colors are from Solarized. Feel free to download the file and update
style/markup to your preference.

Some ideas/variations:

Dark theme: [https://jjjjjjjjjjjjjjjjjjjj.github.io/new-
note/dark.html](https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/dark.html)

Serif: [https://jjjjjjjjjjjjjjjjjjjj.github.io/new-
note/serif.html](https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/serif.html)

HN theme: [https://jjjjjjjjjjjjjjjjjjjj.github.io/new-
note/hn.html](https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/hn.html)

With heading: [https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/with-
heading...](https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/with-heading.html)

~~~
mrec
> _To save a note just store it on disk (cmd /ctrl+s)._

What's this supposed to do? On Firefox/Win it just saves the initial blank
page as you'd expect, which is not very useful. Removing the `contenteditable`
attribute before saving makes no difference.

I'm not aware that there is a simple portable way to save dynamically-modified
webpages; projects like TiddlyWiki have been banging their collective heads
against this problem since forever.

~~~
stephengillie
> _I 'm not aware that there is a simple portable way to save dynamically-
> modified webpages; projects like TiddlyWiki have been banging their
> collective heads against this problem since forever._

You might be interested in a new way to create websites I'm creating. Websites
are stored as JSON, and a small Javascript engine file writes these directly
to the DOM.

This makes the site very easy to dynamically modify and save, which is the
basis for this as a hosting service - the site itself contains a site editor
that outputs the site as JSON, and uploads itself to S3.

[https://www.sparational.com](https://www.sparational.com)

(It's in late alpha, and will hopefully move to beta before the end of the
month.)

~~~
mrec
I'm not sure how that helps with the problem we're talking about. The value
proposition of something like TiddlyWiki is that _your site is just a file_.
For local use you don't even need a webserver.

Making Node or similar a prerequisite kills that value proposition stone dead,
never mind piling on things like S3 as backends.

~~~
stephengillie
> _your site is just a file._ For local use you don't even need a webserver.

This is true for this new system as well. The browser engine is only needed to
write JSON to the DOM, since browsers don't natively read JSON. You could host
both on your SSD and point a webpage at them. (XHR caching is a to-do item.)

S3 is used because it's relatively common and trusted. Node (or any server) is
just used to facilitate writing to S3. Node specifically is used because it's
simpler to develop everything in one language, and that's the only language
that runs in browsers.

------
napsterbr
You can always type `data:text/html, <html contenteditable>` on your browser
:)

~~~
antoineMoPa
Wow, I did not know that we could create tiny "serverless" pages like that.

I created this self referencing URL:

`data:text/html, <html><head><title>SO META</title></head><body><h1>This
link's url is</h1><script>p = document.createElement("p");p.innerText =
window.location.href;document.body.appendChild(p)</script></body></html>`

The sad part is that <a href>'s are actually blocked from using data:text/html
URLs. So we can still create tiny games and apps that can be copy/pasted in
the address bar, but we can't link to them.

~~~
thaumasiotes
You may not be able to <a> to them, but you can certainly issue redirects to
them, and <a> to a URL that issues such a redirect.

You can also <a> to a URL that issues a redirect to a location given by a GET
parameter, eliminating the need to stand up a site for every different idea
you come up with.

~~~
myhf
That used to be possible [1], but it looks like redirection to a data url is
blocked on current versions of Chrome and Firefox.

[1]
[http://indirection.modusponens.org/data:text/html,Hello,%20w...](http://indirection.modusponens.org/data:text/html,Hello,%20world)!

~~~
floil
In chrome, what's blocked is page-initiated top-level navigations to data URLs
(because of spoofing concerns). You can load them in iframes, and you can
still do a browser-initiated navigation to them (i.e., type them into the
omnibox). They can be used freely as subresources.

Http Redirection to data: urls has been blocked in chrome for at least half a
decade. There's really no reason to allow that, a server can just as easily
return the data as the response body.

------
iforgotpassword
You should make this an electron app so I have a lightweight text editor at
hand even when I'm offline.

~~~
NVRM
Are you serious?

------
rehemiau
Litewrite[1] is a great notepad that does save notes to browser localstorage,
and has a syncing feature (you can sync through Dropbox, Google Drive or any
RemoteStorage provider)

[1] [https://litewrite.net/](https://litewrite.net/)

~~~
Boulth
This is nice! And it supports backing up data in self hosted RemoteStorage.

------
quickthrower2
It's a nice idea, but what is the advantage over windows notepad (or
equivalent on other OSes)?

~~~
perl4ever
I haven't tried the subject of this thread, but since I upgraded to Windows
10, the notes application has become ridiculously slow. Sometimes I have to
wait, and wait, for it to respond to clicking or typing. I assume because it's
doing some sort of network/AI enabled nonsense.

~~~
gruez
>the notes application has become ridiculously slow

the win32 one, or did they replace it with a metro/modern version?

~~~
perl4ever
I'm using 64-bit Windows 10. It looks like it has some subtle visual updates,
but I'm not sure what might have been changed under the hood. It seems to
frequently hang when I try to paste into it, for an interminable amount of
time.

------
NVRM
How can this be so upvoted. This is crazy.

------
Sawamara
This is literally an empty page with a contenteditable tag snapped on the
body. I mean.... yeah, it can be done.

------
fouc
Note to others: click on the screen and you'll see a cursor.

------
mettamage
From this idea I decided to type "no javascript" in the HN search bar. There
are some interesting things in there.

------
cup-of-tea
A Web browser is not more lightweight that notepad.

~~~
z3t4
To be fair, it's more lightweight then loading up Windows OS in an
container/VM and start notepad in it.

~~~
RazrFalcon
wine notepad.exe

------
xem
For the record, here's the smallest notepad with local persistence we've
golfed in JS: [http://xem.github.io/postit/](http://xem.github.io/postit/)
(github: [https://github.com/xem/postit/](https://github.com/xem/postit/))

------
Vinnl
Perhaps also interesting for people who like this: Firefox Notes.

[https://testpilot.firefox.com/experiments/notes](https://testpilot.firefox.com/experiments/notes)

~~~
dingdingdang
Like the look of this but given increasing privacy concerns I absolutely
believe that the Moz experiments data policies are plain wrong. At least allow
a non-data collecting variant, otherwise you will never find out how many
users this could have had :/

------
thinkxl
old thread about the same with good examples:
[https://news.ycombinator.com/item?id=6005295](https://news.ycombinator.com/item?id=6005295)

------
awake
[https://codepen.io/anon/pen/OZxqMo?editors=1000](https://codepen.io/anon/pen/OZxqMo?editors=1000)
sublime text with vim and drag and drop files and tabs. why? why not? idk.

------
awake
more examples in this thread [https://coderwall.com/p/lhsrcq/one-line-browser-
notepad](https://coderwall.com/p/lhsrcq/one-line-browser-notepad)

------
amitmerchant
I've also built something similar in past, which is also a PWA which works
offline(and quite minimalistic):
[https://notepad.js.org](https://notepad.js.org)

------
equalunique
Neat - although scrolling doesn't seem to work for me.

------
tzahola
I think this really shows how powerful Web technologies are! Think about it:
you get a full-fledged editor, with image embedding, and it only takes 200
_bytes_. Not kilobytes or megabytes, just bytes. Now check Evernote in the
AppStore which weighs in at 111.5 _megabytes_.

If you’re still writing native apps in 2018, you’re throwing money right out
of the window and you deserve bankruptcy.

~~~
sh87
Evernote chose features over counting kilobytes. Thats a choice they made.
Comparing this with evernote on kilobytes is like comparing homemade
skateboard to a SUV by their weight. Not cool.

I prefer native apps in most cases over some web counterpart with rare
exceptions.

