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

My first webapp (runs offline): A very simple notepad(dl.dropboxusercontent.com)

50 pointsby slashdotaccountvor 13 Jahren57 comments

dl.dropboxusercontent.com

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

https://dl.dropboxusercontent.com/u/92126558/ntpd/notepad.html

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

15 comments

bobfunkvor 13 Jahren

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]

huhtenbergvor 13 Jahren

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

bobfunkvor 13 Jahren

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

huhtenbergvor 13 Jahren

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

bobfunkvor 13 Jahren

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?

huhtenbergvor 13 Jahren

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

slashdotaccountvor 13 Jahren

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

heterogenicvor 13 Jahren

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)

idlewanvor 13 Jahren

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.

huhtenbergvor 13 Jahren

Ahem ... "File / Save Page As"

idlewanvor 13 Jahren

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.

heterogenicvor 13 Jahren

Beat me to it. :)

slashdotaccountvor 13 Jahren

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

panzivor 13 Jahren

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.

slashdotaccountvor 13 Jahren

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

idlewanvor 13 Jahren

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.

slashdotaccountvor 13 Jahren

these libraries have given my app a life..

idlewanvor 13 Jahren

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.

iKlsRvor 13 Jahren

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

slashdotaccountvor 13 Jahren

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

udhbvor 13 Jahren

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

tsironakosvor 13 Jahren

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

joeblauvor 13 Jahren

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

tsironakosvor 13 Jahren

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

slashdotaccountvor 13 Jahren

thnx

slashdotaccountvor 13 Jahren

thanx :)

tsironakosvor 13 Jahren

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

Achsharvor 13 Jahren

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.

slashdotaccountvor 13 Jahren

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

epavor 13 Jahren

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

slashdotaccountvor 13 Jahren

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

uaygsfdbzfvor 13 Jahren

agreed

TazeTSchnitzelvor 13 Jahren

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.

jfarmervor 13 Jahren

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

slashdotaccountvor 13 Jahren

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

[deleted]vor 13 Jahren

weakwirevor 13 Jahren

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

slashdotaccountvor 13 Jahren

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

thanks.

kaeructvor 13 Jahren

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

slashdotaccountvor 13 Jahren

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?

andrewflnrvor 13 Jahren

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

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

TazeTSchnitzelvor 13 Jahren

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.

andrewflnrvor 13 Jahren

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.

slashdotaccountvor 13 Jahren

Okay I'll keep it on my Mind.

andrewflnrvor 13 Jahren

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

hobo_markvor 13 Jahren

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

blindhippovor 13 Jahren

idlewanvor 13 Jahren

"Android Browser isn't modern"

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

andrewflnrvor 13 Jahren

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.

slashdotaccountvor 13 Jahren

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.

brackinvor 13 Jahren

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.

C1Dvor 13 Jahren

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.

[deleted]vor 13 Jahren

armenarmenvor 13 Jahren

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

slashdotaccountvor 13 Jahren

thanks :)

GrinVvor 13 Jahren

Can you share the code and way you do it

slashdotaccountvor 13 Jahren

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

reustlevor 13 Jahren

It's all javascript, just view source

slashdotaccountvor 13 Jahren

yea the html file only and the filesaver.js

the button css style is taken from boostrap 3

GrinVvor 13 Jahren

thx

SamanthaGray44vor 13 Jahren