Awesome TODOMVC project

Look no further - this awesome project will give you everything you need to know about javascript. Take a walk through Todomvc examples and you'll be enlightened. It is incredibly usefull to take a look at just Vanilla.js, as a starting point.That way we can see pure javascript in action - outside of  framework solutions. And later, you can move on to other examples. Authors covered all known and unknown modern javascript framworks and libraries.
Backbone, jQuery, Angularjs, Ember, Dojo, Yui - and even Dart :)
And of course everything starts with pure js.

For example, injecting HTML without templates usage looks like this:

function View() {

  this.defaultTemplate =

'
'+'

',

+''

+'{{title}}'

+''

+'
'+'
';

};

It looks like a string concatenation horror :)

Or a helper functions, for DOM query, that binds function to global object:

window.$ = document.querySelectorAll.bind(document);
window.$$ = document.querySelector.bind(document);

Here's a link to TODOMVC GitHub page

Happy Coding

How to save Backbone collection to the server ?

Backbone Collection doesn't have save method, it is only avaliable on the Model instances. So how can we save collections to the server ?

There are couple of workarounds. I found  one very elegant solution, which wraps model around collection. It is opposite to common pattern in which collection is a wrapper around models.

Here is a basic skeleton of this idea:

//
// collection class extended
var CDShop = Backbone.Collection.extend();

// collection instance 
var CDShopInstance = new CDShop([
    {
        title: "Blue Train",
        author: "John Coltrane"
    },
    {
        title: "Intercontinental",
        author: "Joe Pass"
    },
    {
        title: "Confirmation",
        author: "Charlie Parker"
    }

]);

// model class extended
var MusicShop = Backbone.Model.extend({
    defaults: {
        title: "",
        author: ""
    },
    // passing collection as a property of instance
    model: CDShopInstance,
    // imaginary url 
    urlRoot: "/shop"
});
// model instance 
var musicShopInstance = new MusicShop;

// testing returns three objects from the collection
console.log(musicShopInstance.model.toJSON());

// now we can save out collection to the server  
musicShopInstance.save();
//

Happy Coding.

Bash script helper for fetching remote JS libs

I created a small bash-script, to help me fetch most freqently used JS libraries for client side development:

#!/bin/bash

url http://code.jquery.com/jquery-latest.js>jquery.js
curl https://raw.github.com/documentcloud/underscore/
master/underscore.js>underscore.js
curl https://raw.github.com/documentcloud/backbone/
master/backbone.js>backbone.js

Although these libs can be fetched manually, or like a part of for example Yeoman project or Bower, I found that sometimes I don't need all the functionallity that comes with package managers. So this script is ideal for a fast production setup.

It can be found on my Git repo.

Happy Coding.

Triggering globally custom events in Backbone

If you want to implement traditional publish/subscribe pattern, you can do a very cool trick with Backbone custom events model.

// create a basic model
var Model = Backbone.Model.extend({
    defaults: {
        color:"red",
        name: "bmw"
    }
});

// create a view for that model
var ModelView = Backbone.View.extend({
tagName: "h4",
initialize: function(){
    this.render();
},
render: function(){
    this.$el.html(this.model.get("color"));
    return this;
}
});

// create a route
var Route = Backbone.Router.extend({
    routes: {
    "home": "showHome"
},
showHome: function(){
    Vent.trigger("init");
}
});

// create instances
var model = new Model;
var modelView = new ModelView({model:model});
new Route;

// start a history
Backbone.history.start();

// create a global Vent object, and extend it with Backbone event model (with the help //of underscore.js - which is Backbone dependency ):
var Vent = _.extend({},Backbone.Events);

// append everything to the DOM, with the help of custom global event:
Vent.on("init",function(){
$(document.body).append(modelView.el);
});

The most important part of this code is attaching custom event handler to the URL route. We made that event  globally accessible, by attaching it to the global Vent object. Vent object is triggering custom init event , which is responsible for appending content the DOM.  We subscribed to that custom Init event  through on method of the global Vent object. This is very basic example, just to show the power of custom events.

Happy coding.

HTML metamorphosis

In the beginning, there was that pure markup language, which was fetched from the server, and rendered in the browser:

<h1>Hello from the HTML</h1>

Hello from the HTML

---

Then, someone sad that we should bring some formatting, so it looks nice:

<h1 style = "color:red">Hello from the HTML</h1>

Hello from the HTML

---

And also some Javascript, to make web-sites more dynamic:

<h1 style = "color:red" onclick=clickMe>Hello from the HTML</h1>

Hello from the HTML

---

But, that wass all inline.  So it was good idea to place our CSS and Javascript in a separate files:

---

And we had nicely formatted code that could responde to users activity. Sut something was missing - maybe some HTML dissecting on a server side.

No problem - here comes PHP:

<h1><?php  echo "Hello from the PHP, embedded in HTML on a server side?></h1>

Hey, we could reuse out HTML!!! Say hello to to templates:

<h1>{{title}}</h1>
<p>{{some paragraph text}}</p>

---

We can even render out HTML on a client side:

Backbone.View.extend({

render:function(){
    this.$el.html(...);
};

---

So HTML has been changing it't role on a web quite often, but at the same time remainig dominant  language for building web sites and applications.

Happy Coding.

Vim vs sublime-text2

One of the essential tools for a web developer is a code editor. Fortunately, there is a lot of great editors on the market.

They may be divided on the basis of several criteria:

• Whether commercial or open software
• What languages ​​are supported
• Are they intended for online or desktop editing
• IDE or a basic a text editor and so on.

Among them, I personally don't like fancy IDE-s like Dreamweaver of NetBeans. Althought they provide a lot of usefull tools in one window, their core funtionallity is hidden under shiny GUI.
I like to develope on the basic level without too much use of the mouse and the ability to adjust environment based on my needs.
For everything else - I use Chrome dev. tools.

Sublime-text2 and Vim stands in their own in the world of editors.
Vim is a incredibly powerfull text editor written by Bram Moolenaarand first released publicly in 1991. Part of Vim's power is that it can be extensively customized.
The learning curve is not so easy, but Vim is intended to be used by dedicated programmers who are willing to spend time learning. After initial difficulties, you discover the world of incredible productivity with a large amount of plugins and custom keyboard mappings. Vim is also completely free.

On the other hand Sublime-text2 is a new comer in the editors world.

Some features include:

• Minimap: a preview of the full source code
• Ability to select multiple sections of code
• Multi-panel editing
• Bookmarks within files
• Native support for 27 (44 as of Sublime Text 2 beta) programming languages included, with additional available for download
• Autosave
• RegEx-based find and replace
• Fully customizable syntax highlighting
• Brace matching, autocomplete
• Support for macros and Python-based plugins
• Custom key bindings

One important feature of Sublime is that it has support for Vim commands, through the use of vintage mode.

In the past weeks I tried to compare these two powerfull editors.
I am a dedicated Vim user, but I decided to give a chance to Sublime, since it is used by many famous developers.

I used nonregistered version of Sublime-text2 on Ubuntu 13.04.

In the end I have to say that I'm not overly thrilled with the Sublime. My conclusion is that all that it offers,  can already be found in Vim. The only obvious advantage I saw is GUI. Vim is despite the use of 256 colors, which extend the range of colors, still attached to the terminal. GVim is of course different, but I'm not using it.
Sublime GUI is nice and intuitive - but for now that is all.
 All  Vim users have in their fingers  a bunch of custom keyboard mappings. Those mappings is not possible to transfer to Sublime  - even through vintage mode - for me that  is a good reason to stay faitfull to Vim.

Happy Coding.