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