10 common usage of lodash

lodash is a excellent tool library for every javascript developer. It is similar to underscore, but smaller. It is always come in handy to keep it in your toolchain.

map

This should be quite familiar for most JS developers. It iterate through a collection and perform a 1-to-1 mapping.

mapValues

mapValues is just like map but instead of the key being iterate Continue reading

Docker named volume explained

Named volume is a new feature since Docker 1.9, it allows you to manage persistent data more easily, and also the volume can be provided by other storage drivers such as Glusterfs instead of “just a directory on the host”. This new feature is particularly useful in production environment. (On the Dev side, I think we still need mounted volume) Continue reading

Javascript simple floating and forever moving image

In this example, I will show you how to  animate an element and make it moving up and down infinitely. And I will do it without any explicit Loop construct (no for, while loops), with the help of the jQuery.

HTML:

Javascript

 How it works

In CSS, we set the element (the IMG) to absolute position so that it “float up” and detach from the normal layout. With this, we can move the image up and down by changing the “top” CSS property.

In Javascript, we define two functions, bannerMoveDown() and bannerMoveUp(). In each function, we use the jQuery animate() method to animate the IMG element, and after the each animation ends, we call the other one respectively, thus making it loop forever.

Finally, we call bannerMoveDown() to initiate the animation loop.

Fully functional example

Please checkout a fully function example here on JSFiddle: http://jsfiddle.net/madcoda/mN3n8/

Thanks for reading, Leave your comments down below if you encounter any problem!

AngularJS minimal MVC example

Recently started to learn AngularJS, which is really a very good framework. It makes routes, Two way data binding and modular design easy.

I have created a minimal MVC example for beginners to get started with. This is a BMI calulator.

You can also try the jsFiddle here.

Convert Webp image to png under osx/linux

You can find the open source project here : http://www.webmproject.org/code/

To build the tool from source

You can find the dwebp utility under “examples” folder

You can test it out using the test.webp in the same folder