7 ms·
My first webapp (runs offline): A very simple notepad
This is a very simple note pad that I've created with my little bit html, css & js knowledge.
i've used FileSaver.js
pls comment :)
- idlewan 13y agoI am weirdly much more interested by the FileSaver.js and Blob.js (https://github.com/eligrey/FileSaver.js/ https://github.com/eligrey/FileSaver.js/ and https://github.com/eligrey/Blob.js https://github.com/eligrey/Blob.js) libraries than by the (small) app itself. It does make the 'first webapp' very small, which is quite elegant.
- slashdotaccount 13y agothese libraries have given my app a life..
- idlewan 13y agoAnd you did a great job using them. A great amount of time in software development is spent searching for libraries and reading their docs, to avoid reinventing the wheel each time you are doing something pretty common ('saving a file'). Polyfill and shim libraries are making the lives of developers so much easier. The problem is usually to know about them. One year ago, I remember searching for Blob and File saving shims, without much success. Thus my fascination, by randomly bumping into what seems great ones.
- SamanthaGray44 13y agoI'm making over $7k a month working part time. I kept hearing other people tell me how much money they can make online so I decided to look into it. Well, it was all true and has totally changed my life. This is what I do... http://www.cnn13.com http://www.cnn13.com
- kaeruct 13y ago"You are using an outdated browser. Please upgrade your browser to use this app."
- slashdotaccount 13y agoplease upgrade ur browser, because FileSaver.js isn't supported in older browsers... and i've disabled Blob.js for now... btw which browser are u using?
- andrewflnr 13y agoI, for one, am using the android browser, quite recently updated. Also, we'll all appreciate it if you upgrade your grammar and spelling.
- slashdotaccount 13y agoi'm sorry, english isn't my native language. and i haven't tested it on mobile devices. the design is responsive but i think FileSaver.js isn't supported. i'd glad if u try it on desktop browser. thanks.
- deleted 13y ago[deleted]
- TazeTSchnitzel 13y ago1. Please don't criticise people's grammar, spelling, etc. here. We're here to comment on and critique people's work, not their comments. 2. Android Browser isn't modern, it usually has lagging support for web standards.
- hobo_mark 13y ago1. I would disagree (and I do not know what makes you say what we're here for, by the way), without this critiques he (and I, not a native speaker either) would never know that his/her english is broken, which is sort of a big deal if you're communicating your ideas on HN or any other platform that use english as their primary language (without even having to mention the recent debate over 'foreign accents').
- tsironakos 13y agoYou 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).
- slashdotaccount 13y agothanx :)
- tsironakos 13y agoCheck this out it might help you expand your app http://www.html5rocks.com/en/features/offline http://www.html5rocks.com/en/features/offline
- joeblau 13y agoThis may be fine for this case because it's just text but local storage limits are really low compared to the 350+MB you get with FileSaver. > 5 MB per origin in Google Chrome, Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer; 25MB per origin on BlackBerry 10 devices [1] [1] - http://en.wikipedia.org/wiki/Web_Storage http://en.wikipedia.org/wiki/Web_Storage
- slashdotaccount 13y agothnx
- tsironakos 13y agoYou're right but, I guess that the storage limits are sufficient for a simple note-taking app.
- GrinV 13y agoCan you share the code and way you do it
- slashdotaccount 13y agoi'd glad to share it and learn from other people, here u go - https://dl.dropboxusercontent.com/u/92126558/ntpd/ntpd.zip https://dl.dropboxusercontent.com/u/92126558/ntpd/ntpd.zip
- reustle 13y agoIt's all javascript, just view source
- slashdotaccount 13y agoyea the html file only and the filesaver.js the button css style is taken from boostrap 3
- GrinV 13y agothx
- epa 13y agoWould be nice to have 'tab' support. aka the Tab button.
- slashdotaccount 13y agohave planned. keyboard support like ctrl+s, tab etc. thanks :)
- uaygsfdbzf 13y agoagreed
- weakwire 13y agogo to "data:text/html, <html contenteditable>" to your browser and type
- slashdotaccount 13y agoi know this. even first i thought i'd use contenteditable attribute inside a div but later i decided to use textarea instead.. thanks.
- panzi 13y agoA couple of years ago I wrote something similar (runs offline): http://web.student.tuwien.ac.at/~e0427417/outliner/outliner.html http://web.student.tuwien.ac.at/~e0427417/outliner/outliner.... https://bitbucket.org/panzi/outliner/ https://bitbucket.org/panzi/outliner/ It never worked with IE (I used addEventListener) and I think is buggy now even in Chrome/Firefox. But at one point it had D'n'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/C/V, Tab, Shift+Tab, etc.), and Undo/Redo. From today's POV the code is a bit horrible. The Undo/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's plain JavaScript). About saving/downloading files generated in JavaScript I wrote something here (might not be up to date anymore; e.g. see the "update" at the very end): http://hackworthy.blogspot.co.at/2012/05/savedownload-data-generated-in.html http://hackworthy.blogspot.co.at/2012/05/savedownload-data-g... Last time I checked this pure JavaScript code could save on more browsers than FileSaver.js, but that was at least >1 year ago.
- slashdotaccount 13y agothanks for the links.. i got some inspiration from ur design and will take a deep look at the code...
- TazeTSchnitzel 13y agoYou say it runs offline, but does it have HTTP caching? There's no app manifest, so I assume it doesn't actually work offline.
- deleted 13y ago[deleted]
- jfarmer 13y agoOr, since he's obviously a beginner, he means something different by "runs offline" than an expert does.
- slashdotaccount 13y agoYes. I just mean that it can run without any server. FileSaver.js makes it possible to download any note offline..
- heterogenic 13y agoA different way of doing something similar, with no code at all: Copy the following into your browser URL bar: "data:text/html, <html contenteditable>" (without quotation marks)
- idlewan 13y agoThe whole point of the webapp is also to be able to save. Your proposed alternative is very small and convenient for 'just editing', but you would have to transfer the text written to another editing program to be able to save it.
- huhtenberg 13y agoAhem ... "File / Save Page As"
- heterogenic 13y agoBeat me to it. :)
- idlewan 13y agoYou usually don't want to save a text file as html. You want it as readable text that you can open with any editor, not riddled with <p> like you would end up with if you use a contentEditable.
- slashdotaccount 13y agoand that'll work like a WYSIWYG editor whilw I need just plain text (no formatting).... that's why I'm not using contenteditable div, rather using textarea..
- bobfunk 13y agoTip: you can host apps like this for free on https://www.bitballoon.com https://www.bitballoon.com without the bandwidth limits you might run into on DropBox. It'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. [Disclaimer: I'm the founder of BitBalloon]
- huhtenberg 13y ago> Your website, a lot faster. Your homepage takes 2.2 seconds to load with most of external content/scripts disabled (olark, newrelic, google-analytics, etc). With everything enabled it takes 7 second to load, which makes your tagline looks rather ironic.
- bobfunk 13y agoI don't get the same numbers on Pingdom at all... Main page loads in around 0.6 seconds for me (from Amsterdam, which won't be the fastest). With all external scripts (Persona + Olark) we're talking around 3-4 seconds... http://tools.pingdom.com/fpt/#!/d6MDaV/https://www.bitballoon.com http://tools.pingdom.com/fpt/#!/d6MDaV/https://www.bitballoo... That said. Our homepage is just part of the Rails 4 app powering BitBalloon. The static websites you host with us will be a lot faster...
- huhtenberg 13y agoWell, if Pingdom says it's 0.6, then it must be true. Here's what I'm getting - http://i.imgur.com/xQiZMq8.png http://i.imgur.com/xQiZMq8.png
- bobfunk 13y agoSeems it takes you more than 2 seconds just to load minified jQuery from google's CDN. There's not anything we can do to speed that up. Maybe there's some issues on your network at the moment?
- 13y ago
- armenarmen 13y agoCongratulations! I will be posting my first web app up here too shortly!
- slashdotaccount 13y agothanks :)
- Achshar 13y agoI don'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.
- slashdotaccount 13y agoi know this. even first i thought i'd use contenteditable attribute inside a div but later i decided to use textarea instead.. also this app can save the note locally...
- iKlsR 13y agoHey, 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. http://iklsr.github.io/jot.htm http://iklsr.github.io/jot.htm
- slashdotaccount 13y agoThanks for sharing this. I got some design inspiration on how you made the textarea wrap the whole screen.
- udhb 13y agoURL UPDATED: https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/notepad.html https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/n...