

My first webapp (runs offline): A very simple notepad - slashdotaccount
https://dl.dropboxusercontent.com/u/92126558/ntpd/notepad.html
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 :)
======
bobfunk
Tip: 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
> _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
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...](http://tools.pingdom.com/fpt/#!/d6MDaV/https://www.bitballoon.com)

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
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](http://i.imgur.com/xQiZMq8.png)

~~~
bobfunk
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?

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

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

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

~~~
huhtenberg
Ahem ... "File / Save Page As"

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

------
panzi
A couple of years ago I wrote something similar (runs offline):
[http://web.student.tuwien.ac.at/~e0427417/outliner/outliner....](http://web.student.tuwien.ac.at/~e0427417/outliner/outliner.html)
[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-g...](http://hackworthy.blogspot.co.at/2012/05/savedownload-data-
generated-in.html) 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
thanks for the links.. i got some inspiration from ur design and will take a
deep look at the code...

------
idlewan
I 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
these libraries have given my app a life..

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

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

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

------
udhb
URL UPDATED:
[https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/n...](https://dl.dropboxusercontent.com/u/92126558/projects/ntpd/notepad.html)

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

~~~
joeblau
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](http://en.wikipedia.org/wiki/Web_Storage)

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

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

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

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

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

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

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

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

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

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

thanks.

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

~~~
slashdotaccount
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?

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

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

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

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

~~~
slashdotaccount
Okay I'll keep it on my Mind.

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

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

~~~
slashdotaccount
thanks :)

------
GrinV
Can you share the code and way you do it

~~~
reustle
It's all javascript, just view source

~~~
slashdotaccount
yea the html file only and the filesaver.js

the button css style is taken from boostrap 3

~~~
GrinV
thx

