News for hackers. Stuff that matters.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by janneklouman on Saturday May 05, 2018 @01:08PM (#17002649)
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

Serif: https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/serif.html

HN theme: https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/hn.html

With heading: https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/with-heading...

Re:Show HN: ~200 byte in-browser, no JS, private notepad by mrec on Saturday May 05, 2018 @09:59PM (#17004922)
> 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.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by stephengillie on Sunday May 06, 2018 @12:05PM (#17006874)
> 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

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

Re:Show HN: ~200 byte in-browser, no JS, private notepad by mrec on Tuesday May 08, 2018 @02:00PM (#17023066)
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.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by stephengillie on Thursday May 10, 2018 @01:59PM (#17041368)
> 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.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by kalleboo on Sunday May 06, 2018 @01:19AM (#17005332)
When you save it as a webarchive in Safari it includes the user-generated content, including embedded images.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by pvg on Sunday May 06, 2018 @01:45AM (#17005397)
In FF, you have to tell it to save as 'Webpage - complete'. Other browsers have similar options.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by franzpeterstein on Sunday May 06, 2018 @05:37AM (#17005838)
On Linux Mint, with FF 59.0.2 (64-bit) there are no problems. Simply save the page with "Save page as..." into a folder. The idea is wonderfully simple.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by la_oveja on Sunday May 06, 2018 @09:44AM (#17006388)
I just saved as txt on Firefox 60 Windows
Re:Show HN: ~200 byte in-browser, no JS, private notepad by gruez on Saturday May 05, 2018 @09:35PM (#17004850)
>I don't really like terminal text editors, notepad, or IDEs for writing

are you talking about the windows notepad? it's as simple as a plain text editor can get, how is the contenteditable notepad better?

Re:Show HN: ~200 byte in-browser, no JS, private notepad by henrikschroder on Sunday May 06, 2018 @03:34AM (#17005595)
I am convinced this is some sort of practical joke to see how stupid an idea you can submit to HN and still get upvotes.

Either that, or I'm in the Twilight Zone.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by janneklouman on Sunday May 06, 2018 @03:44AM (#17005612)
Yes, I was talking about the windows notepad. I'm not saying the contenteditable notepad is better, just that I don't like notepad for writing - purely an aesthetic preference. Now it's been a while since I usd notepad, but iirc you can't have an inner max-width, or theming that persists restart (?)
Re:Show HN: ~200 byte in-browser, no JS, private notepad by janneklouman on Sunday May 06, 2018 @04:16AM (#17005691)
Tried it out now and while typography changes do persist, I can't figure out how to change line height or background color.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by JasonSage on Saturday May 05, 2018 @09:37PM (#17004859)
> it's as simple as a plain text editor can get

Just because it is simple does not mean OP has to like it.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by gruez on Saturday May 05, 2018 @09:41PM (#17004873)
I'm assuming he's going for the minimalist notepad because of how bare bones the contenteditable notepad is.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by chii on Saturday May 05, 2018 @09:46PM (#17004887)
the content-editable version lacks the most basic of features, such as search and replace. I don't think you can compare them at all.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by jrochkind1 on Sunday May 06, 2018 @02:28AM (#17005482)
So... someone doesn't like Notepad because it has search-and-replace, and preferred something kind of like notepad but without all those pesky features?
Re:Show HN: ~200 byte in-browser, no JS, private notepad by timvdalen on Saturday May 05, 2018 @03:40PM (#17003414)
Really cool idea! In what browsers is dragging images to contenteditable supposed to be supported? I'm on Chrome 66 and it just opens the image in the current tab.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by O1111OOO on Saturday May 05, 2018 @06:15PM (#17004155)
fyi, did some quick testing (I was also curious about image dragging):

Pale Moon 27.9: Image conversion to base64 worked perfectly

Dooble 1.50: creates clickable link (file:///home/user/.../filename.jpg)

Midori 0.5.11: creates NON-clickable link

Otter 0.9.09 beta 9: creates clickable link

Chromium 65.0.3325.181: opens new tab

Opera 45.0: opens new tab

Re:Show HN: ~200 byte in-browser, no JS, private notepad by woodruffw on Saturday May 05, 2018 @08:27PM (#17004653)
Works for me in Firefox (61.0b2).
Re:Show HN: ~200 byte in-browser, no JS, private notepad by kalleboo on Sunday May 06, 2018 @01:17AM (#17005328)
In Safari, Drag & Drop of images doesn't work but Copy/Paste does
Re:Show HN: ~200 byte in-browser, no JS, private notepad by watersb on Sunday May 06, 2018 @04:40AM (#17005738)
I just tested this on my iPad 4th-gen, which is stuck at iOS 10.3 these days.

Safari cut-and-paste works for images.

Of course, as the iPad runs out of memory as I use multiple apps, stops Safari then reloads it when I come back. Which loses any edits to the content.

Expected. The unexpected is that this simple thing is as functional as it is...

Re:Show HN: ~200 byte in-browser, no JS, private notepad by saagarjha on Sunday May 06, 2018 @07:16AM (#17006021)
Try using something like split screen to guarantee that the app will stay in memory.
Re:Show HN: ~200 byte in-browser, no JS, private notepad by watersb on Sunday May 06, 2018 @01:15PM (#17007203)
(Good suggestion, but the iPad4 iOS 10.3 does not support split-screen apps.)
Re:Show HN: ~200 byte in-browser, no JS, private notepad by ifoundthetao on Saturday May 05, 2018 @11:11PM (#17005060)
I think this is great. I did something similar, with a very simple IdeaStore webapp, where I can just throw an idea into words, have it get added to my ideabank, and I can reference it later. But the whole point is to not break my workflow from other projects.

Anyway, I know you said you don't like lots of different things, but you might actually find that you like BoostNote. I'd say give it a try, I think it's great.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by labster on Saturday May 05, 2018 @09:26PM (#17004819)
Pretty cool.

It seems like it would be pretty easy to add a save/load feature with localStorage.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by fouc on Saturday May 05, 2018 @09:14PM (#17004788)
Looks like this mainly works best for FireFox
Re:Show HN: ~200 byte in-browser, no JS, private notepad by sillysaurus3 on Saturday May 05, 2018 @09:36PM (#17004853)
I'd love this and use it regularly if it supported Chrome and markdown syntax.

I know it wouldn't be 200 bytes, but this is a pretty great idea.

Re:Show HN: ~200 byte in-browser, no JS, private notepad by faheel on Sunday May 06, 2018 @11:31AM (#17006756)
Re:Show HN: ~200 byte in-browser, no JS, private notepad by ConSeannery on Saturday May 05, 2018 @10:06PM (#17004932)
tiddlywiki with a markdown plugin is something to look at if you like this idea