Saturday 26 January 2013

My Web Application Tutorial for Beginners

Web Application with Backbone:   BEGINNER TUTORIAL

Here is a tutorial I wrote for a quick start with Backbone and other JavaScript stuff. Only vague knowledge is assumed. Everything is included as comments in the code with each single line commented. It can be found HERE and the much shorter 'commentless' code can be run and downloaded HERE.

Below is the Introduction.

Web Application with Backbone:   BEGINNER TUTORIAL

Backbone.js is a very popular and light(weight) JavaScript library
for building Web Applications.
However, learning it I found frustratingly few simple examples of
true workable applications with all lines of code explained.

Here is my attempt to hack the popular Jerome Gravel-Niquet's Backbone Todo App
down to a MVA (Minimum Workable App), and turn it into
a Beginner Tutorial by adding long
and tedious explanations for every single line of Code.

When not broken, this App should offer Entry Field for your Item,
where you can enter any Text (and please be careful with other characters).
Pressing ENTER will add the Item (if not empty) to the List.
Then hovering your mouse over a List Entry,
you see a little gray cross image at the very right,
which you can click to instantly delete the Item for good.
Just before deleting as your mouse hovers over that image ready to click,
it turns black (i.e. the image, not your mouse, hopefully)
to give you the last chance to save the Item from its coming death.

This is it, as far as the unsofisticated functionality goes.
Yet remarkably, this involves quite a few useful things Backbone can offer
to sweeten your life when attempting to write something more useful.
So the primary goal of this Tutorial is to explain all those little features
and hopefully help the reader to get a quick start,
even if she is only vaguely familiar with all this JavaScript stuff.

Since I've stripped this App to its absolute bare nacked minimum,
including whatever styles are used for decoration purposes,
this is probably the ugliest looking App you have ever seen.
And just to relieve the reader's pain, she is welcome to add any of her
favorite styles to make the App 'not so hard on the eyes'.
Unfortunately, every beautiful page seems to have very 'unbeautiful'
CSS code underneath, which would leave no hope to keep this tutorial
(reasonably) short keeping all lines ferociously explained.

You can copy the file either with 'Download Gist' or the '<>' Icon "View Raw",
and view it with your Browser, where you see links to download 4 missing files.
Once those are in the same directory, the App should become functional.

I could provide many links to the terms discussed.
However, the links are known to become outdated or die/break at moments of viewing.
Thus it will better serve the reader simply to copy-paste them
into her favorite Search Engine.

Practice. Yes, you can only learn through practice!
Which is why I included little paragraphs with homework.
To do it, you need to access JavaScript Console provided
either by Firebug Extension for Firefox,
or natively in the View/Developer menu in Chrome, also available for other Browsers.

Have Fun!

Wednesday 12 December 2012

Towards Minimum Workable App

Learning Backbone.js I found frustratingly few simple examples of true workable web applications with all lines of code, HTML, CSS and Javascript being very basic and easily understood.

Here is my attempt to hack the popular Jerome Gravel-Niquet's Backbone Todo App in all parts - html, css and javascript, down to a MVA (Minimum Workable App): https://gist.github.com/3853693

The App can be enjoyed HERE and the source found HERE

Tuesday 14 February 2012

Thursday 19 January 2012

The most useful Firefox option

What can we do about awfully designed webpages? Such as ones with unlucky choices of colors? White text on a bright red screen? Or sites putting their text in a tiny thin strip in the middle of the screen most or the space?

Firefox has a wonderful option to help!
"View -> Page style -> No Style" removes all the mentioned defects and lets you enjoy the site in its virgin purity!





Monday 5 December 2011

Google+: You better read the Terms of Service!

Young boy (10) lost access to his 2 years old Gmail account after signing for Google+, pretty scary:
Google made my son cry

Friday 2 December 2011