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