ZICKONEZERO

Michael Zick | UI Engineer

[zickonezero]

Wisdom from Dan Abramov

Facebook/React guru shares some knowledge that made me feel better about myself. Check it out!

http://bit.ly/df5joahk3

[zickonezero]

Composition > Inheritance

Unless you’ve been coding under a rock, you know about the ES6/ES201* class syntax, which offers a constructor function and demands that you include super() if you wanna use this anywhere in your function. This is great syntactically if you’re used to classical OOP languages, but I think it’s masking the most powerful and flexible aspect of JS: prototypes and object concatenation. Besides, class/constructor/super are just playing a prototypical shell game under the hood.

There are several ways to use a functional approach to creating new objects and patterns, one of which is called the Factory Function, and I really like it. I like it so much in fact that I cooked up my own implementation and called it Unifactory. I named it that because it takes an arbitrary number of arguments, analyzes their type and returns them as properties of an object.

Check it out...

function Factory () {    const args = Array.from(arguments),          obj = {};        obj.__proto__ = defaultProps;        args.forEach(function(arg) {        if (typeof(arg) === 'function') {            obj[arg.name] = arg        } else if (typeof(arg) === 'object') {            for (let key in arg) {                obj[key] = arg[key]            }        } else {            obj[arg] = arg        }    });    return obj; } // Assign some default properties. ****/ const defaultProps = {    defaultPhrase: function (phrase) {        console.log(phrase);    } }; //*************************************/ // Create an observer pattern. ************/ const customEvent = Factory({    events: {},    add: function (event, callback) {        this.events[event] = callback;    },    dispatch: function (event, args) {        this.events[event](args);    } }); customEvent.add('walk', function (dest) {    console.log('I am walking to ' + dest); }); customEvent.dispatch('walk', 'the store.'); //*****************************************/ // Create some people with properties. ***************************/ let michael = Factory({name:'Michael'}, function speak (phrase) {    console.log('I am ' + michael.name + ' and ' + phrase); }); let zick = Factory({name:'Zick'}, function say (phrase, action) {    console.log('I am ' + zick.name + ', ' +                'and I '+ phrase + ' ' + action + '.'); }); zick = Object.assign(zick, {    retort: function (phrase) {        console.log(phrase);    } }); michael.speak('I\'m a developer.'); zick.say('might be', 'surfing'); zick.retort('I\'m probably enineering something now.'); michael.defaultPhrase('This is the default phrase.'); //****************************************************************/

[zickonezero]

babel-loader

I struggled like hell to get babel-loader and es2015 playing nice with React, after reformatting the old React.createClass syntax to ES2015′s class for my components. Here’s how I formatted my module in webpack.config.js to get it working:

module: {    loaders: [      {        test: /\.jsx|js$/, loader: 'babel-loader',        exclude: /(node_modules|bower_components)/,        query: { presets: ['react', 'es2015'] }      }    ]  }

[zickonezero]

Filter Duplicates

There are a lot of different ways to do this, but I found this to be pretty simple. It uses the built-in ES5 Array method filter. Check it out.

const filter = (item, i, arr) => arr.indexOf(item) === i;

console.log (    ['mark', 'john', 'mike', 'john', 'matt', 'mark'].filter(filter) );

It basically says “Hmm, this item must exist already, because once I get to the second ‘John’ the index of ‘John’ is still 1. However i is 3.”

Now...while this may seem like an elegant solution, there’s one problem: the time complexity. Using indexOf still traverses the array, leading to an less efficient O time than an object hash map.

let hash = {};

const filter = (item, i, arr) => {    if (!hash[item]) {        hash[item] = true;        return true;    }    return false; }

Now we use an object to filter duplicates based on the following logic: If the number we’re on in the array does not exist in the hash, add it and return true. This adds the number to the resulting array. If it does, return false and don’t add the number to the result.

[zickonezero]

Compensate for Daylight Savings Time (DST)

Here’s a function I wrote at ParkMe to do what the title suggests. We were running into an issue where the Bootstrap Datepicker, using the DatePair library, was showing the wrong date if it fell into DST territory.

Here’s the juice:

// Takes the start or end date, // gets the remainder of the two offsets // and returns a new date with the factored offset. this.compensateForDST = function (date) {        var internalDate = new Date(date),              newDate = new Date(),              newDateOffset = newDate.getTimezoneOffset(),              internalDateOffset = internalDate.getTimezoneOffset(),              offset = (internalDateOffset - newDateOffset) * 60000,              internalDateEpoch = internalDate.getTime(),              combinedTime = internalDateEpoch + offset,              combinedDate = new Date(combinedTime);

       return combinedDate; };

Then for the start and end date, use it like this:

// Only compensate for DST if the offsets don't match. if (startDate.getTimezoneOffset() !== date.getTimezoneOffset()) {       return this.compensateForDST(date); } else {       return date; }

[zickonezero]

Chrome Console Log Weirdness

Take the following code and run it in jsFiddle:

var Master = function (options) {     this.options = options;     console.log('>>OPTIONS');     console.log(options);     console.log('>>THIS.OPTIONS');     console.log(this.options);     console.log('>>THIS');     console.log(this); };

var Me = function () {};

Me.prototype = new Master({one: 234, two: 876});

var me = new Me();

me.options.one = 1;

If you inspect the output in the console, you'll see the following:

>>OPTIONS (index):23

Object {one: 234, two: 876} (index):24

>>THIS.OPTIONS (index):25

Object {one: 234, two: 876} (index):26

>>THIS (index):27

Master {options: Object}

options: Object

one: 1

two: 876

__proto__: Object

__proto__: Object

 If you expand "Master" (this), then expand options, you'll see that "options.one" is "1". Wait, why is "this.options.one" still "234"? For some reason, when you expand an object in the console, it shows you the updated referenced value. Remember that arrays and objects are passed by reference and not value. If console logging "this" shows the updated value, why doesn't plain old "this.options" get updated?

If you were to change the console.log(this) to alert(JSON.stringify(this)), you'll see that "this.options.one" is still "234". This is because the output hasn't reached "me.options.one = 1".

So why would "console.log(this)" show "1" instead of "234"? Well, seems like expanding the object tree reveals the updated value, despite being called before "options.one" is changed.

[zickonezero]

Event Bubbling

No, this does not involve a glass item and a plant named "OG". This is how browsers handle events, most commonly clicks, when nested in parent elements.

Here's an example:

var e1 = document.getElementById("e1"); var e2 = document.getElementById("e2");

// TRUE = TOP => DOWN (CAPTURING) // FALSE = DOWN => UP (BUBBLING) e1.addEventListener('click', doSomething1, false); e2.addEventListener('click', doSomething2, false);

function doSomething1() {       console.log(this.id); }

function doSomething2(e) {       alert(this.id);       e.stopPropagation(); }

The stopPropagation function prevents bubbling from happening up the hierarchy. Conversely, changing the event listener on e1 from "false" to "true", would trigger a top-down approach, bypassing e.stopPropagation() altogether!

Potent stuff.

[zickonezero]

Inheritance

In my ongoing quest to break my jQuery addiction and learn the core features of JavaScript, I've embarked on a mission to declassify class vs. prototypical inheritance. And FINALLY I found a great article explaining it...

http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html#fbid=jdhQ_ZDn1ay

Take the following example:

http://jsfiddle.net/ZICKONEZERO/WYjcn/35/

Two.doStuff(); works, because...

constructor.one.prototype.doStuff = function() {         console.log('doing stuff'); }

...we've added .doStuff() to constructor.one's prototype, and is immediately inherited by the Two object!

[zickonezero]

JavaScript Recursion

This is a powerful programming concept called "recursion" - where a function runs itself within itself. Here's an example:

var stuff = {       one: 1,       two: {              a: "A",              b: "B",              c: {                   yes: "YES",                   no: "NO"               }        },        three: 3 };

function loopStuff (thang) {         for (var key in thang) {               if (typeof(thang[key]) == "object") {                    loopStuff(thang[key]);               } else {                    console.log(thang[key]);

              }        } }

loopStuff(stuff);

So what this does is loops through the object, and only console logs the data that's not an object. If it finds a nested object, it will run itself, passing in the latest var[key] as the argument.

Rad, huh?

[zickonezero]

jQuery AJAX + Object Iteration

So I wanted to brush up on AJAX, and decided to throw in a little object iteration as well. Here's the code:

<!doctype> <html>   <head>     <title>jquery ajax</title>   </head>   <body>     <div id="bin"></div>     <input type="submit" value="Submit"/>     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>     <script type="text/javascript">         $('input').click(function() {             runAjax();         });         function runAjax() {             $.ajax({                 type: 'GET',                 url: 'INSERT URL HERE',                 dataType: 'json',                 success: function(data) {                     console.log(data);                     loopObj(data);                 },                 error: function(jqXHR,textStatus,errorThrown) {                 console.log(jqXHR);                 console.log(textStatus);                 console.log(errorThrown);                 console.log(jqXHR.responseText);                 console.log('unable to make call, skipping to end bracket');               }            });          }

      function loopObj(data) {           for (var key in data) {           if (key == "clip_title") {               console.log("Contains a clip: "+data[key]);           }         }      }    </script> </body> </html>

Basically what this does is calls data from a URL when you click the "Submit" button, and makes it available as a JavaScript object. Unlike arrays, where you can use the standard "for (i...)" loop, you use "for (var in obj)".

[zickonezero]

Discussing the term "brogrammer".

Ok, so most people in the coding world have heard the term "brogrammer", and I have to admit I learned of it very recently as such: "I heard that <company_name> is high on the brogrammer scale." So I decided to do some research on the matter.

What I found was amusing at first, then I started to wonder if I'm a brogrammer. I mean, let's face it...I surf, skate, sometimes sound like both of those when I talk, listen to music that doesn't make girls run in the opposite direction and well, take care in my appearances. You can catch me mentioning the fact that I play first-person shooters on my computer in the same conversation about how good the waves were.

The times are changing, and I think the more people become enamored with the computers in their pockets, their cars, boats, planes, brains (oh we're not there yet?), the more appealing programming becomes.

Kanye made geek look cool when he started wearing Ivy League clothes and big-rimmed glasses. Now people realize that after 2008 the world is different. Not cause of the crash, but because the recovery is happening without them. Stocks are reaching record highs yet the job market for many people still sucks. The jobs that were there before were slipped out from under them and replaced by machines, computers, databases, automated things that don't require paychecks.

Now, back to "brogrammer" status. I think I'm a pretty cool guy...up to a point. Then I'm like, "hell yeah I'm a geek!" I geek out about a multitude of things, including web development, software, games, music, coding. I certainly embody some stereotypes of your typical programmer while straying heavily from others, and not decidedly, but by nature. I love hanging with other programmers cause I can nerd-out, geek-out, dork-out like the best of em. I can also hang out with mature surfers whose vocabulary spans more words than "bro", "dude", "yo", "sick", or some expletive version of those. No, I need to have intelligent conversations, thank you. 

However, make no mistake...on any given Wednesday you might catch me saying "Yo, that function is sick!"

[zickonezero]

JS Objects

This is a must-read on JS objects.

http://javascriptissexy.com/javascript-objects-in-detail/

[zickonezero]

ROBOTS OR DINOSAURS?

Robots

[zickonezero]

PureJS

In an effort to break from my jQuery addiction, I've started practicing some pure JS techniques. In this example, I create the function "canine", which establishes some prototypes and takes in two variables as arguments.

Using the canine function as a prototype, I build the "dog" function, which takes in two more arguments. Then I create my dog "blaise", and give him a name and color.

Finally, I create a function that's bound to a click event, and pass in the blaise object, taking with it all of the canine and dog attributes I passed down. Changing something in the canine prototype would be like re-writing a dog's genetic code, but that would be highly unethical.

function canine(sound, showsHappy) {

    this.legs = 4;

    this.eyes = 2;

    this.tail = true;

    this.sound = sound;

    this.showsHappy = showsHappy;

};

function dog(name, color) {

    this.name = name;

    this.color = color;

}

dog.prototype = new canine(

    function(bark) {

        console.log(bark);

    },

    function(tail) {

        console.log(tail);

});

var blaise = new dog("Blaise", "black");

function clickThis(myDog) {

    this.myDog = myDog;

    document.getElementById('clickThisText').onclick = function() {

        console.log("legs: "+myDog.legs+", color: "+myDog.color);

        myDog.sound("woof");

        myDog.showsHappy("wags tail");

    }

}

clickThis(blaise);

[zickonezero]

Finding Redundancy in an Array

Here's a bit of JS I wrote that takes an array of numbers, sorts them and finds which number occurs multiple times. You're dying with excitement, aren't you?

var myArray = [1, 3, 9, 3, 4, 3, 10, 11, 3, 6];

var sameNum = [];

function analyze() {

    myArray.sort();

    console.log(myArray);

    for (i=0; i<myArray.length; i++) {

        if (myArray[i-1] == myArray[i] || myArray[i+1] == myArray[i]) {

            sameNum.push(myArray[i]);

        }

    }

}

analyze();      

console.log(sameNum);

console.log(sameNum.length);

[zickonezero]

The First Post

Hi,

I'm creating this tech blog to entertain, educate myself and educate others. Hope you enjoy it.

Michael