My first webapp (runs offline): A very simple notepad | Hacker News Reader

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

dl.dropboxusercontent.com

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 :)

Tip: you can host apps like this for free on 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]

> 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.

I 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.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...

Well, if Pingdom says it's 0.6, then it must be true. Here's what I'm getting - http://i.imgur.com/xQiZMq8.png

Seems 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?

> Maybe there's some issues on your network at the moment?

Nope, none. It is specific to your site. I am across the Atlantic though.

yes. my homepage is hosted on a free server so the server response time is the only problem that makes my site load slower than it should be...

A 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)

The 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.

Ahem ... "File / Save Page As"

You 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.

Beat me to it. :)

and 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..

A couple of years ago I wrote something similar (runs offline): http://web.student.tuwien.ac.at/~e0427417/outliner/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-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.

thanks for the links.. i got some inspiration from ur design and will take a deep look at the code...

I am weirdly much more interested by the FileSaver.js and Blob.js (https://github.com/eligrey/FileSaver.js/ and 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.

these libraries have given my app a life..

And 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.

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. http://iklsr.github.io/jot.htm

Thanks for sharing this. I got some design inspiration on how you made the textarea wrap the whole screen.

URL UPDATED: https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/n...

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).

This 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

You're right but, I guess that the storage limits are sufficient for a simple note-taking app.

thnx

thanx :)

Check this out it might help you expand your app http://www.html5rocks.com/en/features/offline

I 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.

i 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...

Would be nice to have 'tab' support. aka the Tab button.

have planned. keyboard support like ctrl+s, tab etc. thanks :)

agreed

You say it runs offline, but does it have HTTP caching? There's no app manifest, so I assume it doesn't actually work offline.

Or, since he's obviously a beginner, he means something different by "runs offline" than an expert does.

Yes. I just mean that it can run without any server. FileSaver.js makes it possible to download any note offline..

go to "data:text/html, <html contenteditable>" to your browser and type

i know this. even first i thought i'd use contenteditable attribute inside a div but later i decided to use textarea instead..

thanks.

"You are using an outdated browser. Please upgrade your browser to use this app."

please 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?

I, for one, am using the android browser, quite recently updated.

Also, we'll all appreciate it if you upgrade your grammar and spelling.

1. 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.

Having English as a second language is one thing, using shortcuts like "u" and "ur" is quite another. I hope you can forgive me for finding that annoying. I know I'm not the only one. It's clear from their writing on the app itself and the post title that the OP can do better when they want to. HN is usually a place where you can expect that people will put a little effort into making their comments look decent. This is a good thing about HN. Looking back, I was too snarky, but that's mostly what I wanted to convey.

Okay I'll keep it on my Mind.

And I'll be more careful with my wording and try to not spark massive useless subthreads. :)

1. 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').

"Android Browser isn't modern"

I second that. Use Firefox for Android, Opera, Dolphin... They are all better than the stock browser.

Firefox and Chrome both rendered text funny for me. The font size would suddenly change halfway down the front page of reddit. I didn't see a strong reason not to go back to the stock browser.

i'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.

This is the kind of comment that sums up where I dislike Hacker News. "Android Browser" means not Chrome for Android, so it must be a bit behind.

As he's stated, English is not his first language and is not the first language of many HN users. Leave the poor guy alone and the android browser is behind a few years when it comes to standards.

Upgrade to chrome or Firefox.

Congratulations! I will be posting my first web app up here too shortly!

thanks :)

Can you share the code and way you do it

i'd glad to share it and learn from other people, here u go - https://dl.dropboxusercontent.com/u/92126558/ntpd/ntpd.zip

It's all javascript, just view source

yea the html file only and the filesaver.js

the button css style is taken from boostrap 3

thx

Reply on news.ycombinator.com