How to get output of multiple asynchronous calls in one callback


Javascript IO is asynchronous, which is awesome but sometime you might land into a situation where you wanted to call several asynchronous function and when all of them are ready you have to perform some action. Obviously you can not nest each other with anonymous functions in all situations.

so intead of doing this (assume u need to call several asyncCalls 1,2,3 etc,)


         asyncCall1(param1,function (output1){
           asyncCall2(param2,function(output2){
              asyncCall3(....)
           })
         })



You might like to do this

    function finalCallback(alloutput){
       //here is your final output
    }
    cbGenerator=getGroupCallBackGenerator(timeout,finalcallback);
    asyncCall1(param1,cbGenerator.getCallback('asyncCall1'))
    asyncCall2(param2,cbGenerator.getCallback('asyncCall2'))
    asyncCall3(param3,cbGenerator.getCallback('asyncCall3'))
    asyncCall4(param4,cbGenerator.getCallback('asyncCall4'))
    cbGenerator.start();


Well You can do it if you want to use my utility function here.


at Posted by

Codefoo Plugin for Sublime Text 2

Hi,

I developed a Sublime Text 2 Plugin, named codefoo which does some magic for you.
This plugin helps you in retrieving code snippet from web.

Do not leave the browser simply get code in 3 easy steps 
 1. type the query
 2. select
 3. press `ctrl+alt+r`

Try with these query 

 * email validation regex
 * URL validation in javascript
 * reversing a string in javascript
 * slide To unlock css

Demo 




 Github: https://github.com/markandey/codefoo

How it works


It works by searching you query in a list of popular web pages where you find code. Then it scrapes the page to get just the code snippet.

Install Via Sublime Package Control

  1. You should use sublime package manager
  2. Use cmd+shift+P then Package Control: Install Package
  3. Look for CodeFo and install it.
This is all powered by Yahoo! BOSS Search API and YQL.
at Posted by

Javascript Language Sugar (one liners)


Here are some good one liners in javascript





//Hello World Program Which is Palindrome

(alert)('Hello, World') && ('dlroW ,olleH')(trela)


//Reverse a string

"this is a string".split("").reverse().join("");


//Trim a string

" Hello World ".replace(/^\s*|\s*$/g,'')


//HTML escape

"<b>Hello HTML</b>".replace(/([&<>])/g,function (c) {return "&" + {"&": "amp","<": "lt",">": "gt"}[c] + ";";});


//Shuffle an array

[1,2,3,4,5].sort(function(){return (4*Math.random()>2)?1:-1})


//Detect IE

isIE='\v'=='v';


//Force String to be a Number (multiply or divide by 1)

"100"*1


//Force to be boolean

!!"some value"


//Converting string to Leet

"Hello Hacker".replace(/[a-z]/g,function f(a){return "4BCD3F6H1JKLMN0PQR57"[parseInt(a, 36)-10] || a.replace(/[a-t]/gi,f)});


//Clone an array

var clone = [1,2,4,5,6,9].slice(0);
at Posted by

YUI DateTime Chooser

I just created YUI3 DateTime Chooser Module.

What is it?


At some time in a webform you have to capture date and time together with timezone. This YUI3 module is to help you in progressively enhance "date-time form input" to popup (calendar and slider based) UI to input date and time with TimeZone.

How to Use?







<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?gallery-2012.12.12-21-11/build/gallery-datetime-input/assets/gallery-datetime-input/gallery-datetime-input-core.css">
<script>
YUI({
gallery: 'gallery-2012.12.12-21-11'
}).use('gallery-datetime-input', function (Y) {
  new Y.DateTimeInput({
    inputBox:"#datetime-input"
   });
});
</script>

at Posted by

Introduction To Yahoo Mojito and Its Client and Server Seamlessness [screencast]

Hi There,


Mojito is a model-view-controller (MVC) application framework built on YUI 3 and its open source. Most notable feature of mojito is its capability to give you seamless MVC framework to manage your code on server as well as on client. Applications built on Mojito consists of  small components called Mojits which are independent UI element which can have their own Model,View, Controller and Binders.

Mojito features:
  1. Local Command Line development Tools.
  2. Library for simplifying internationalization & localization.
  3. Integrated unit testing.
  4. Device Specific Presentation.
  5. Single MVC to manage Client and Server code seamlessly.   
Here is screen cast to show you some awesomeness of Yahoo Mojito. Watch the Youtube video.

ScreenCast
How to setup this example
  1. Install Node
  2. Install Mojito

    3. npm install mojito -g

  3. Create App and Mojit

    4. $ mojito create app youtubesearch
$ cd youtubesearch
$ mojito create mojit containerMojit
$ mojito create mojit searchResultMojit

  4. Modify application.json
  5. Modify routes.json
  6. Modify mojits MVCs. Get the full code here

    7. Get from github
git clone https://github.com/markandey/mojito-example-youtube.git

HTMLFrameMojit is inbuilt mojit in the Mojito framework which creates basic html layout. In the example we have created a containerMojit, which is a composite mojit. Then In searchResultMojit we have created binder to handle click of search button. We are using mojitProxy to tunnel the request to mojit. We never bothered about the location of searchResultMojit and framework automatically tunnels the request to mojit either it is on server or it is on client. There is a way to lazyLoad a mojit.

I have used YQL to get youtube search result. To Read more about the YQL read here.


 Where to Host Mojito Application
You can host mojito on any node.js server, Try Openshift, its free and easy to deploy.
You can also try http://www.nodejitsu.com/

at Posted by
Subscribe to: Posts (Atom)