<story><title>Show HN: ~200 byte in-browser, no JS, private notepad</title><url>https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/</url></story><parent_chain><item><author>janneklouman</author><text>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&amp;#x27;t really like terminal text editors, notepad, or IDEs for writing, so I made this very simple notepad. It&amp;#x27;s a &amp;lt;body&amp;gt; html tag with the contenteditable attribute making it editable, and some &amp;lt;style&amp;gt;.&lt;p&gt;To save a note just store it on disk (cmd&amp;#x2F;ctrl+s). To add images, drag and drop them onto the text area. Remove the contenteditable attribute from &amp;lt;body&amp;gt;, 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&amp;#x2F;ctrl+b&amp;#x2F;i&amp;#x2F;u). Copy+pasting formatted text can potentially break things a bit.&lt;p&gt;The two colors are from Solarized. Feel free to download the file and update style&amp;#x2F;markup to your preference.&lt;p&gt;Some ideas&amp;#x2F;variations:&lt;p&gt;Dark theme: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;dark.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;dark.html&lt;/a&gt;&lt;p&gt;Serif: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;serif.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;serif.html&lt;/a&gt;&lt;p&gt;HN theme: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;hn.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;hn.html&lt;/a&gt;&lt;p&gt;With heading: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;with-heading.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;with-heading...&lt;/a&gt;</text></item></parent_chain><comment><author>mrec</author><text>&amp;gt; &lt;i&gt;To save a note just store it on disk (cmd&amp;#x2F;ctrl+s).&lt;/i&gt;&lt;p&gt;What&amp;#x27;s this supposed to do? On Firefox&amp;#x2F;Win it just saves the initial blank page as you&amp;#x27;d expect, which is not very useful. Removing the `contenteditable` attribute before saving makes no difference.&lt;p&gt;I&amp;#x27;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.</text></comment>
<story><title>Show HN: ~200 byte in-browser, no JS, private notepad</title><url>https://jjjjjjjjjjjjjjjjjjjj.github.io/new-note/</url></story><parent_chain><item><author>janneklouman</author><text>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&amp;#x27;t really like terminal text editors, notepad, or IDEs for writing, so I made this very simple notepad. It&amp;#x27;s a &amp;lt;body&amp;gt; html tag with the contenteditable attribute making it editable, and some &amp;lt;style&amp;gt;.&lt;p&gt;To save a note just store it on disk (cmd&amp;#x2F;ctrl+s). To add images, drag and drop them onto the text area. Remove the contenteditable attribute from &amp;lt;body&amp;gt;, 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&amp;#x2F;ctrl+b&amp;#x2F;i&amp;#x2F;u). Copy+pasting formatted text can potentially break things a bit.&lt;p&gt;The two colors are from Solarized. Feel free to download the file and update style&amp;#x2F;markup to your preference.&lt;p&gt;Some ideas&amp;#x2F;variations:&lt;p&gt;Dark theme: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;dark.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;dark.html&lt;/a&gt;&lt;p&gt;Serif: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;serif.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;serif.html&lt;/a&gt;&lt;p&gt;HN theme: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;hn.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;hn.html&lt;/a&gt;&lt;p&gt;With heading: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;with-heading.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&amp;#x2F;new-note&amp;#x2F;with-heading...&lt;/a&gt;</text></item></parent_chain><comment><author>timvdalen</author><text>Really cool idea! In what browsers is dragging images to contenteditable supposed to be supported? I&amp;#x27;m on Chrome 66 and it just opens the image in the current tab.</text></comment>