Public API -s reference on the web

Today I found awesome website:

http://www.programmableweb.com/


It's a directory, a news source, a reference guide and a community.
So if you are a web-developer ( front or back ) - it is a great resource for exploring.

Happy coding.

What is thick ( fat ) client ?

This is one of the things that all front-end web developers should know:

A fat client (also called heavy, rich, or thick client) is a computer (client) in client–server architecture or networks that typically provides rich functionality independent of the central server. Originally known as just a "client" or "thick client" the name is contrasted to thin client, which describes a computer heavily dependent on a server's applications.

A fat client still requires at least periodic connection to a network or central server, but is often characterised by the ability to perform many functions without that connection. In contrast, a thin client generally does as little processing as possible and relies on accessing the server each time input data needs to be processed or validated.

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

Javascript roots and background

I really spent a lot of time trying to understand Javascript. Now, from this perspective, I can tell that it is not possible without knowing it's background and how Javascript is related to other languages.  For example, to know prototype nature of language, you have to know basic things about  classes and that type of object-oriented approach. One great text, that clarifies that can be found on Mozila developer site:

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Guide%2FDetails_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages


Happy coding

VIM editor tips

Vim is a text editor, common to Unix-like environments. And a lot more than that. Vim is a powerfull tool for coding, that has a cult status among developers. It is not so easy to master, but once you  find the key, you'll never stop using it.

I'm a dedicated Vim user, and like to discover new commands.
One thing that was frustrating me was a constant need to jump to ESC key every time when I wanted to go to COMMAND mode. It was hard and long hand-movement, and I was looking for something that is closer to my current hand position (asdf..).
The magic is in pressing  CTRL+c, and you are in the COMMAND mode, like with ESC key.

Happy Coding.

Chrome Autosave DevTool

Here is a great app that is part of Google Chrome Developer Tools and can be downloaded as Chrome extension. It is called autosave and you can use it for updating you Javascript and CSS changes through Chrome Developer Tools, without leaving the browser and switching to your editor.

 How to install it:

First install server:

 Install Node.js server.
    - on terminal run sudo apt-get install nodejs
    - then run sudo apt-get npm install -g autosave

Install extension:
      https://chrome.google.com/webstore/detail/mlejngncgiocofkcbnnpaieapabmanfl

How to use ?

In command line run $ autosave and the output should look like  DevTools Autosave 1.0.0 is running on http://127.0.0.1:9104

Now you are ready to make changes to JS and CSS files from the Chrome DevTools. Press F12 and it should open Developer Tools window. Click on elements, and on the right side you'll see your CSS formatting. Modify or add new style, and try to restart. If you did everything right, your changes should be saved.

Helpfull link:

https://github.com/NV/chrome-devtools-autosave

Happy coding

Browser compatibility tables

Browser (in)compatibility is giving headaches to developers around the globe, for years. And the king of all  incompatible browsers is of course - Internet Explorer. Every time we develop front-end based web-app we have to think is it supported in IE ?

Fortunately, there are some great resources on the web that can help you deal with bugs in browsers. Here is one I found today:

http://caniuse.com/#compare=ie+5.5,ie+6,ie+7,ie+8,ie+9,ie+10

Tutsplus tutorial - 30 Days to Learn jQuery

Checks this incredible video tutorial from tutsplus:

https://tutsplus.com/course/30-days-to-learn-jquery/

I can't belive that it's free. Jeffrey Way is the best programming tutor I ever had
Geeks are usually not very good in presenting their knowledge, but Jeffrey stands on his position.
It will teach you not only jQuery, but much, much more about web-application programmin, and about web in general. Highly recommend.

Require.js

Recently I discovered require.js, which is Javascript file and module loader.

Here is how you can import jquery module (which is jqeury library itself):
First download require.js  and place it in the root folder of your project. requirejs

Then create script tag in the head section of html document:

Where, main is the name of js file which had to be created. Choose your own, descriptive name.

Next, open main.js file, and add the following content inside:

define(["jquery-1.8.1"],function (jquery){
 // all your jquery code goes  here
})

Note: Trying to add $ as a function parameter leads to undefined error in my case, so I use jquery (that's how jquery handles AMD modules )

Now you can use jquery library, and let requirejs manage your modules. You can also remove path to jquery library in html document, because requirejs will find it.

A module can bi ordinary javascript function, so you can experiment with importing.

Here is a tutorial by the creator of requirejs:
http://www.youtube.com/watch?v=VGlDR1QiV3A