TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

My first webapp (runs offline): A very simple notepad

50 pointsby slashdotaccountover 11 years ago
This is a very simple note pad that I&#x27;ve created with my little bit html, css &amp; js knowledge. i&#x27;ve used FileSaver.js<p>pls comment :)

14 comments

bobfunkover 11 years ago
Tip: you can host apps like this for free on <a href="https://www.bitballoon.com" rel="nofollow">https:&#x2F;&#x2F;www.bitballoon.com</a> without the bandwidth limits you might run into on DropBox. It&#x27;ll also minify your scripts and CSS and serve all assets with cache-friendly URLs from a CDN. So your app will most likely load faster.<p>[Disclaimer: I&#x27;m the founder of BitBalloon]
评论 #6346278 未加载
heterogenicover 11 years ago
A different way of doing something similar, with no code at all:<p>Copy the following into your browser URL bar: &quot;data:text&#x2F;html, &lt;html contenteditable&gt;&quot; (without quotation marks)
评论 #6346205 未加载
panziover 11 years ago
A couple of years ago I wrote something similar (runs offline): <a href="http://web.student.tuwien.ac.at/~e0427417/outliner/outliner.html" rel="nofollow">http:&#x2F;&#x2F;web.student.tuwien.ac.at&#x2F;~e0427417&#x2F;outliner&#x2F;outliner....</a> <a href="https://bitbucket.org/panzi/outliner/" rel="nofollow">https:&#x2F;&#x2F;bitbucket.org&#x2F;panzi&#x2F;outliner&#x2F;</a><p>It never worked with IE (I used addEventListener) and I think is buggy now even in Chrome&#x2F;Firefox. But at one point it had D&#x27;n&#x27;D support (of lines within the outliner and dropping of files from your file system), common keyboard edit methods (Shift+Arrow keys to select things, Ctrl+X&#x2F;C&#x2F;V, Tab, Shift+Tab, etc.), and Undo&#x2F;Redo.<p>From today&#x27;s POV the code is a bit horrible. The Undo&#x2F;Redo code should be written completely differently (so it can be serialized) and it all should be rewritten with jQuery or something like that (it&#x27;s plain JavaScript).<p>About saving&#x2F;downloading files generated in JavaScript I wrote something here (might not be up to date anymore; e.g. see the &quot;update&quot; at the very end): <a href="http://hackworthy.blogspot.co.at/2012/05/savedownload-data-generated-in.html" rel="nofollow">http:&#x2F;&#x2F;hackworthy.blogspot.co.at&#x2F;2012&#x2F;05&#x2F;savedownload-data-g...</a> Last time I checked this pure JavaScript code could save on more browsers than FileSaver.js, but that was at least &gt;1 year ago.
评论 #6345765 未加载
idlewanover 11 years ago
I am weirdly much more interested by the FileSaver.js and Blob.js (<a href="https://github.com/eligrey/FileSaver.js/" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;eligrey&#x2F;FileSaver.js&#x2F;</a> and <a href="https://github.com/eligrey/Blob.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;eligrey&#x2F;Blob.js</a>) libraries than by the (small) app itself.<p>It does make the &#x27;first webapp&#x27; very small, which is quite elegant.
评论 #6345461 未加载
iKlsRover 11 years ago
Hey, I started something like this sometime back and never got around to actually making it work. Nice to look at this and get some tips. <a href="http://iklsr.github.io/jot.htm" rel="nofollow">http:&#x2F;&#x2F;iklsr.github.io&#x2F;jot.htm</a>
评论 #6346976 未加载
udhbover 11 years ago
URL UPDATED: <a href="https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/notepad.html" rel="nofollow">https:&#x2F;&#x2F;dl.dropboxusercontent.com&#x2F;u&#x2F;92126558&#x2F;projects&#x2F;ntpd&#x2F;n...</a>
tsironakosover 11 years ago
You can probably add some localStorage support in your app, saving a list of all created notes and some basic edit functionality. Perhaps, you can add Gist support as well (just throwing ideas around).
评论 #6345609 未加载
评论 #6345573 未加载
Achsharover 11 years ago
I don&#x27;t see the need to use a library. Just get the data in a data uri and use the download attribute in the a tag along with the file name. A lot easier and works in every modern browser.
评论 #6346922 未加载
epaover 11 years ago
Would be nice to have &#x27;tab&#x27; support. aka the Tab button.
评论 #6345747 未加载
评论 #6348303 未加载
TazeTSchnitzelover 11 years ago
You say it runs offline, but does it have HTTP caching? There&#x27;s no app manifest, so I assume it doesn&#x27;t actually work offline.
评论 #6346174 未加载
评论 #6345903 未加载
weakwireover 11 years ago
go to &quot;data:text&#x2F;html, &lt;html contenteditable&gt;&quot; to your browser and type
评论 #6345772 未加载
kaeructover 11 years ago
&quot;You are using an outdated browser. Please upgrade your browser to use this app.&quot;
评论 #6345563 未加载
armenarmenover 11 years ago
Congratulations! I will be posting my first web app up here too shortly!
评论 #6346905 未加载
GrinVover 11 years ago
Can you share the code and way you do it
评论 #6345592 未加载
评论 #6345641 未加载