Underscore.js

Underscore .js (_) is a small library of helper methods that deals with low level data-manipulaltion. It offers functions similar to some other languages ( Python, Ruby). Javascript lacks some of this methods, so it is really usefull to have them as a part of your toolset. Underscore is built in Jquery, so you are probably using some of these methods already ( $.extend(), $.map(),$.each()...).

Here's a quick demo how to use $.extend() method:

    var firstName = {first: "Mickey"}, // create a first object
         lastName = {last: "Mouse"}; // create a second object

    var E = $.extend(firstName, lastName); // call extend method /* with jquery, and pass objects to be merged. First one is target,and second one is a source of properties */


    dir(E); /* see new object in a chrome developer console ( or Firebug ).*/

If you want to use library outside of jquery, for a custom project you can download it here: http://underscorejs.org/

Note: you'll have to include jquery in your page, either from a local file or from CDN.

Happy Coding.

Should web developers learn algorithms ?

Algorithms are a big puzzle to web-developers ( if they are not graduate CS ). There are lot of  online discussions about them. Should we learn it or not ? My opinion is that we shouldn't try to master them, cause that leads to frustration.
Algorithms can be very complex, and much of them are unnecessary in everyday web programming. Since web languages are mostly  scripting and interpreted, there is really no need to learn about complex memory allocation, garbage collection and other low-level things. Instead, we should adopt some of the major concepts that can be found in every programming language.
These concept deals with control flow, data manipulation and in general they can help you to think and code more productively and efficiently.
Nicholas Zakas has a page with implementation of classic computer science algorithms in Javascript. It's great because here you can find a collection of classic and well known algorithms, together with  great explanation and implementation.

http://www.nczonline.net/blog/tag/computer-science/

Happy coding.

The role of functions in Javascript language

Mastering functions is very important skill for Javascript developer. Compared to other composite data types ( object and array ), functions in JS have a wide application and can be used in many ways. 

So functions can:

- be called and invoke a code inside of their body

- receive arguments

- treated as object ( with properties )

- tied to a variable and passed around 

- provide scope and privacy

- act like a constructor ( and create instance of object )

- provide a framework for procedural programming

It is important to mention that JS is class-less language, and lot of function behaviour is in the goal of providing  classical paradigms and concepts. For example, function as constructor is a concept directly inherited from a classical object-oriented paradigm. In JS you don't have to use constructors, but they are present. One more example is a way that JS deals with privacy. In classical OO languages, privacy is provided through classes, and all instances share same privacy state like their parent class ( mostly ). In JS privacy is provided through functions. Concept of closures, which are functions nested inside of another functions, is a very powerfull technique that is widelly used by a lot of developers. David Flanagan.

If you wanny learn more about functions and JS in general, I would recommend Javascript patterns, which is a book written by Stoyan Stefanov - Yahoo web-developer. And if you are total novice with language, definitely read Javascript: The Definitive Guide by David Flanagan.

Happy coding.

Application architecture ( clarification )

So I was trying to figure out what is the difference between architecture and design in terms of programming ( and especially Javascript ).

Here is some clarification, that help me a lot:

Architecture is about bigger picture, and it stands on a higher level then design. Architecture is about structure, it provides framework, it is about strategy.Architecture answers to what and where questions.

In Javascript architecture is usually provided through objects and functions.

Object are containers that holds pieces of data together. You can put whole application in one object and create basic structure.

And functions can act like a architecture creation. For example, when working with jquery, it is common to wrap your code in an annonymous function ( and provide basic structure). Functions can provide more complex architecture frame, due to their nature of beeing both  - object and a function.

Architecture and design are closely tied, wherever you find some structure, you will find some functionallity which is the responsibillity of design.

More on design in the next post.

Here is one good link from stackoverfow that bring's a light on that topic: http://stackoverflow.com/questions/704855/software-design-vs-software-architecture

Happy coding.

How Browsers Work ?

The browser's main components are :

1. The user interface - this includes the address bar, back/forward button, bookmarking menu etc. Every part of
the browser display except the main window where you see the requested page.
2. The browser engine - the interface for querying and manipulating the rendering engine.
3. The rendering engine - responsible for displaying the requested content. For example if the requested content
is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
4. Networking - used for network calls, like HTTP requests. It has platform independent interface and underneath
implementations for each platform.
5. UI backend - used for drawing basic widgets like combo boxes and windows. It exposes a generic interface
that is not platform specific. Underneath it uses the operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute the JavaScript code.
7. Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for
examples, cookies. The new HTML specification (HTML5) defines 'web database' which is a complete
(although light) database in the browser.

Conceprual diagram of a main browser components:

Modernizr: The Awesome Detection Tool

There are a large number of different browsers around now unlike before back in the day when internet explorer was the monopoly of the web.


Web applications are getting more and more complicated as the web/internet evolves rapidly, which inevitably causes inconsistencies in web standards, and headaches for people who are in the industry of web design/development!

Modernizr is a tool which helps web designers and developers detect features and conditionally styles functionality catered for things that are enabled/disabled or incompatible due to end users' browser/software/hardware.

Download Modernizr.js 

How to style chrome developer tools with CSS ?

I am a user and a big fun of chrome developer tools.  I use it daily as a part of my web-development.
Here is a tip how to customize your own dev. tools with custom css properties:

-  on Ubuntu/Linux find a Chrome config file - /home/user/.config/chromium/profile 1/User StyleSheets   and open that file with your text editor.
- it is empty by default, but you can  copy/paste a color theme from a template. Here is a good link http://darcyclarke.me/design/skin-your-chrome-inspector/

If you want to play with your own styles enter the following URL in a Chrome adress bar: chrome-devtools://devtools/devTools.css. Copy the content in a config file and you can now experiment.

Happy coding