9 ms·
Show HN: ~200 byte in-browser, no JS, private notepad
- janneklouman 8y agoI 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.html https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/with-heading...
- timvdalen 8y agoReally 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.
- O1111OOO 8y agofyi, 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
- woodruffw 8y agoWorks for me in Firefox (61.0b2).
- kalleboo 8y agoIn Safari, Drag & Drop of images doesn't work but Copy/Paste does
- watersb 8y agoI 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...
- fouc 8y agoLooks like this mainly works best for FireFox
- labster 8y agoPretty cool. It seems like it would be pretty easy to add a save/load feature with localStorage.
- gruez 8y ago>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?
- JasonSage 8y ago> it's as simple as a plain text editor can get Just because it is simple does not mean OP has to like it.
- gruez 8y agoI'm assuming he's going for the minimalist notepad because of how bare bones the contenteditable notepad is.
- chii 8y agothe content-editable version lacks the most basic of features, such as search and replace. I don't think you can compare them at all.
- jrochkind1 8y agoSo... someone doesn't like Notepad because it has search-and-replace, and preferred something kind of like notepad but without all those pesky features?
- henrikschroder 8y agoI 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.
- janneklouman 8y agoYes, 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 (?)
- sillysaurus3 8y agoI'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.
- ConSeannery 8y agotiddlywiki with a markdown plugin is something to look at if you like this idea
- henrikschroder 8y agohttp://lmgtfy.com/?q=markdown+editor http://lmgtfy.com/?q=markdown+editor
- faheel 8y agohttps://livemark.ml https://livemark.ml
- mrec 8y ago> 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.
- kalleboo 8y agoWhen you save it as a webarchive in Safari it includes the user-generated content, including embedded images.
- pvg 8y agoIn FF, you have to tell it to save as 'Webpage - complete'. Other browsers have similar options.
- franzpeterstein 8y agoOn 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.
- la_oveja 8y agoI just saved as txt on Firefox 60 Windows
- stephengillie 8y ago> 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.)
- ifoundthetao 8y agoI 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.
- quickthrower2 8y agoIt's a nice idea, but what is the advantage over windows notepad (or equivalent on other OSes)?
- perl4ever 8y agoI 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 8y ago>the notes application has become ridiculously slow the win32 one, or did they replace it with a metro/modern version?
- throwaway41441 8y agoThey haven't.
- perl4ever 8y agoI'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.
- Maybestring 8y agoWhile the page doesn't use js, it is there for you to use. document.body.innerText += 'hello world/n';
- hexane360 8y agoecho hello world >> file_in_notepad.txt Although I'll admit that notepad's not as graceful about multiple programs editing files.
- 8y ago
- napsterbr 8y agoYou can always type `data:text/html, <html contenteditable>` on your browser :)
- antoineMoPa 8y agoWow, 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.
- matte_black 8y agoMaybe that’s a feature, not a bug. If we can put the data in an image file a user could drag a cart into their address bar to load up a game. So we can pass around carts like images.
- thaumasiotes 8y agoYou 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 8y agoThat 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,%20world http://indirection.modusponens.org/data:text/html,Hello,%20w...!
- floil 8y agoIn 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.
- fouc 8y agoNote to others: click on the screen and you'll see a cursor.
- thinkxl 8y agoold thread about the same with good examples: https://news.ycombinator.com/item?id=6005295 https://news.ycombinator.com/item?id=6005295
- rehemiau 8y agoLitewrite[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 8y agoThis is nice! And it supports backing up data in self hosted RemoteStorage.
- iforgotpassword 8y agoYou should make this an electron app so I have a lightweight text editor at hand even when I'm offline.
- awake 8y agomore examples in this thread https://coderwall.com/p/lhsrcq/one-line-browser-notepad https://coderwall.com/p/lhsrcq/one-line-browser-notepad
- Sawamara 8y agoThis is literally an empty page with a contenteditable tag snapped on the body. I mean.... yeah, it can be done.
- NVRM 8y agoHow can this be so upvoted. This is crazy.
- Vinnl 8y agoPerhaps also interesting for people who like this: Firefox Notes. https://testpilot.firefox.com/experiments/notes https://testpilot.firefox.com/experiments/notes
- dingdingdang 8y agoLike 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 :/
- cup-of-tea 8y agoA Web browser is not more lightweight that notepad.
- z3t4 8y agoTo be fair, it's more lightweight then loading up Windows OS in an container/VM and start notepad in it.
- RazrFalcon 8y agowine notepad.exe
- gvx 8y agoIt certainly feels more lightweight, provided the webbrowser is already running, which for me is always.
- mettamage 8y agoFrom this idea I decided to type "no javascript" in the HN search bar. There are some interesting things in there.
- deleted 8y ago[deleted]
- jrcii 8y agoNotational Velocity ftw. There's even a variation for CLI junkies
- amitmerchant 8y agoI'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
- tzahola 8y agoI 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 8y agoEvernote 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.
- lerie82 8y agoI am sorry but it seems very pointless for me. Wouldn't you need an OS to use a browser that supported this? If so, couldnt you just use a terminal or hell, if your on windows, just notepad... I am really failing to see how this made it on yc.
- awake 8y agohttps://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.
- xem 8y agoFor 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/)
- equalunique 8y agoNeat - although scrolling doesn't seem to work for me.