Convert jQuery ajax function into promise (in ES6)

If you happens to want to convert jQuery’s ajax function into promise style using ES6 promise. Here is an example for you:

utils.js

Then you can use ajaxPostPromise in this way:

app.js

That’s it!

You can apply the same principle in converting other callback-style library into promise!

p.s. If you are looking for native and promise way to call your API, you may also check out fetch.

Use Slack as notification service in your workflow

This article intend to give some pointers to developers new to Slack on how to integrate their services / workflow with it. You can add a message to Slack and get notified as simple as a command like this:

My Use case

So my main purpose of using Slack it to get notified with certain events happen and implement it with minimum effort. For example, Continue reading “Use Slack as notification service in your workflow”

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 “10 common usage of lodash”

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.