Underscore: _.walk

The most useful utility method I had to write on top of underscore recently was ‘WALK’. It just walks any given object in order and executes the method on the leaf pairs.

 
//Underscore override
 
_.mixin({
 
    /*
     * Walk trough every  <key, value> in a given object or array
     * Usage:
     *      var obj = {a: 1, b: 2, c: {d: 3, e: 4}}
     *     _.walk(obj, function(value, key, obj){
     *         console.log(value);
     *     });
     *  //Output: 1, 2, 3, 4
     */
    walk: function(obj, iterator, context){
        _.each(obj, function(value, key){
            if(_.isObject(value)){
                _.walk(value, iterator, context);
            }else{
                iterator.call(context, obj[key], key, obj);
            }
        });
    }
});

It was born out of requirement to add cache buster version to all the template url’s that we used at MobileIron. Instead of manually adding them, we thought it would be cool to add it dynamically when the templateUrl object is loaded.

 
window.templateUrlObj = {
  APP: {
    'ADD': 'addurl.html',
    'DEL': 'deleteurl.html'
  },
  USER: {
    'LOGOUT' : 'logout.html'
  }
}
 
//Add cacheBuster versionString to all the template url's
(function addParamsToUrls(urlObj, param){
 
    //Walk trough the url templates
    _.walk(urlObj, function(url, key, obj){
        //add versionString
        obj[key] = [
           url, ((url.indexOf('?') === -1) ? '?' : '&' ), 'cacheBuster=' ,versionString 
        ].join('');
    });
 
})(templateUrlObj, versionString);
 
//_.walk will keep the object in tact but the values are updated with the cacheBuster version string.

I wish there was an underscore++ library to just maintain such useful methods. Right now I will try to maintain one personally and see if it makes sense to publish them to github @rajeshsegu. Let me know if you think there is a better idea to contribute.

rajeshsegu Java Script 0

JS: Object.is support

Object.is can be the most used function given how many times we compare various values and objects in a given javascript application. I am happy that Firefox 22 has finally accommodated this with their push towards getting closer towards EMCAScript6. Since two major browsers Chrome and Firefox supports it, I am definitely planning on using it going forward, adoption is the key.

For non-supported browsers we could always implement the functionality as in Mozilla MDN

 
if (!Object.is) {
  Object.is = function(v1, v2) {
    if (v1 === 0 && v2 === 0)
      return 1 / v1 === 1 / v2;
    if (v1 !== v1)
      return v2 !== v2;
    return v1 === v2;
  };
}

FYI, The ES6 compatibility table is very useful, as it tells us the ES6 features that are supported in the current browser. It also gives us a handy link to the specifications for each of the features listed.

Object.is works for most of the cases

 
Object.is("foo", "foo");     // true
Object.is(window, window);   // true
 
Object.is("foo", "bar");     // false
Object.is([], []);           // false
 
var test = {a: 1};
Object.is(test, test)       // true
 
Object.is(null, null)       // true
 
// Special Cases
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

The only exception being NaN === NaN, which IMO is not very used

 
//Only Exception
Object.is(NaN, NaN)          // true
NaN === NaN                  // false

rajeshsegu Java Script 0

JS: Python Ruby grid game

How about a simple game of Python & Ruby from our childhood computer days. Similar to PacMan but way less complex.

Rules of the Game:

1. User uses arrow keys to navigate the python.
2. Ruby has the intelligence to escape on every Python move.
3. User wins if the Python catches the Ruby.

User is informed of the number of moves it took for the Python to capture the Ruby. It’s a fun game the keeps you challenging yourself. Have fun and get rich by capturing the ruby :)

JS Bin

Code source: Python Ruby Github

rajeshsegu HTML&CSS, Java Script, Web Design 0

CSS: Rounded Profiles

Google+ kind of circular profile’s has become so common in the web world, I thought I should definitely try it out…

I tried an initial approach of having an image inside a div container and style it, but the challenge was to keep the image look not stretched while keeping it a perfect circle.

 
.circleX {
    margin: 1em auto;
    height: 100px;
    width: 100px;
}
 
.circleX img {
    height: 100%;
    width: 100%;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border: 5px solid gray;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
} 
 
<div class="circleX">
   <img src="http://www4.images.coolspotters.com/photos/32242/albert-einstein-profile.jpg">
</div>

jsBin: http://jsbin.com/unecep/2/edit

The trick was to keep the profile as a background image …

 
.circle {
  display: block;
  width: 100px;
  height: 100px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 99em;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border: 5px solid gray;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
 
<div class="circle" style="background-image: url('http://www4.images.coolspotters.com/photos/32242/albert-einstein-profile.jpg');"></div>

jsBin: http://jsbin.com/exifol/4/edit

rajeshsegu HTML&CSS 0

JS: Convert number into Binary

I had to solve a simple problem over the weekend to “Find the reverse of a given binary number.” It was a pretty simple, but the best learn was to convert a given number into Binary using javascript native methods.

//Binary format of the given Number
 
var a = 20;
a.toString(2); 
//"10100"

Hope this tid-bit helps. Have a happy weekend.

rajeshsegu Java Script 0

1 2 3 4 5 6 7 8 »