javascript-site

Organizing Table Data

Quick one today, I just wanted to add a cute little function that quickly traverses a table and organizes an array of html dom elements by table head tag (th).

NodeList.prototype.toArray = function() {
  return Array.prototype.slice.call(this);
};

function CollectData(className) {
  var table = document.querySelector(className);
  var thead = table.querySelector('thead');
  var tbody = table.querySelector('tbody');
  var ths = thead.querySelectorAll('th').toArray();
  var trs = tbody.querySelectorAll('tr').toArray();
  
  return ths.map(function(th, idx) {
    return trs.map(function(tr) {
      return tr.querySelectorAll('td')[idx];
    });
  });
}

It basically, manually walks the table, then returns an array based on what it finds in the table headers. The Nodelist function at the top just adds a “toArray()” function to the nodelist object so you can get output from querySelector as an array.

javascript-site

Very Simple Line Graph With D3

I’ve been learning more about D3 and decided to apply what I learned about composition to make a very simple line graph. I’ll just post the pen and comment on it below:

See the Pen Very Simple Line Graph with D3 by Mike Newell (@newshorts) on CodePen.

Basically, the important parts are that I’m using a factory to create “LineGraph()”. It takes some data, a class name of the actual svg element to target and some default options. Once you call, “lineGraph.draw()” the real work begins.
First we get the dimensions of the svg element on the page:

var svgElem = state.svg[0][0];
  var width = svgElem.offsetWidth;
  var height = svgElem.offsetHeight;

Then we get the min,max of each set of data. In this case we get min/max for x and y datasets.

var extentX = d3.extent(state.data, function(d) { return d.x });
  var extentY = d3.extent(state.data, function(d) { return d.y });

We also need to tell the graph how to scale the data to actual dimensions of the graph itself. This is done by plugging the width and height of the graph into a function d3 can use to scale our data points. We also add some padding so the data doesn’t touch the edge of the graph and get cut off. Moar on scaling here: http://www.d3noob.org/2012/12/setting-scales-domains-and-ranges-in.html

var scaleX = d3.time.scale().range([state.padding, width - state.padding]);
  var scaleY = d3.scale.linear().range([height - state.padding, state.padding]);
  scaleX.domain(extentX);
  scaleY.domain([0,extentY[1]]);

Once we have our data ranges and scales, we can create our line:

var line = d3.svg.line()
    .x(function(d) { return scaleX(d.x); })
    .y(function(d) { return scaleY(d.y); })
    .interpolate(state.interpolation);

In many cases, d3 will return a function you’ve prepared before hand to run on some data. In this case we prepare a line. You can see we pass functions into the x and y values.

function(d) { return scaleX(d.x); }

These functions are used by d3 to “loop the data” and the return value is what the actual data value is set to. So we use our scale functions here to scale the x and y values after we have pulled them out of each object. We then return the scaled value to the loop.
Finally, we set up our “draw()” method, when called, will draw the actual line on the graph:

draw: function() {
      state.svg.data([state.data]).append('g').append("path").attr("d", line);
    }
javascript-site

Composing ‘Chainable’ Functions

Mattias Petter Johansson has a great video explaining the difference between composition and inheritance chains in development.

I won’t repeat the tutorial he gives in the video because frankly, his video is better than anything I could write. But!

I want to add a tweak to his factory function in order to make your factories “chainable”. Basically so you can call something like this:

sniffles.speed(15).walk();

If you aren’t familiar with factory functions, he also has a video here: https://www.youtube.com/watch?v=ImwrezYhw4w that again, explains things better than I could.

So here’s what we want to do. Let’s make a dog. A dog can walk and bark. Our dog will be our main “thing” factory:

// the thing it is
function Dog(name) {
  var state = {
    name: name
  };
  
  return Object.assign(
    {},
    barker(state),
    walker(state)
  );
}

The most perceptive of you might notice that we have something in here called a “barker” and a “walker”. They are functions that we will define in a minute. The thing to notice here is that this function takes a “name” parameter. Essentially, this follows the same end user workflow as a class. A developer using your code will just have to use:

// use this for factories
var dog = Dog('sniffles');

// instead of classes
var dog = new Dog('sniffles');

So you can see, it’s almost the same thing! In fact, in most cases you’ll never notice a difference.

Now for the fun part. Let’s make these “doing” functions that take the state argument. Then lets make their methods chainable.

A dog can bark, so let’s make a “barker” factory:

function barker(state) {
  var _state = state;
  return {
    bark: function() {
      console.log('I am a ' + _state.name);
    }
  };
}

Simple enough. However things get more complex when we want to make a “walker” factory. Instead of just having a function called “walk” we want to be able to set the speed of the walk, as well as have a default in case the user just calls .walk().

function walker(state) {
  var _state = Object.assign(
    {
      speed: 100
    },
    state
  );
  return {
    walk: function() {
      var speed = _state.speed || 50;
      console.log('walking at speed: ' + _state.speed);
    },
    speed: function(speed) {
      _state.speed = speed;
    }
  }
}

So now we can start walking!

// make a dog named sniffles
var sniffles = Dog('sniffles');

// set the walking speed
sniffles.speed(10);

sniffles.walk();

What would be nice is if you could update the speed as you go. If you haven’t made functionality to update any attribute of the state, there’s not really a good way to get changes in speed into sniffle’s state. Also, let’s say you want to limit a developer’s ability to tamper with the internal state of your object. To do this, it would be nice to set speed before we call walk. Of course, we could pass speed as an argument of walk:

sniffles.walk(1000);

But not we have to make special functionality inside our walk function to share the speed in case another function needs to use speed as well. Not good!

So by adding:

return this;

to the speed function we return the context of the speed function which happens to be sniffles! Now we can chain speed().

The function now looks like this:

function walker(state) {
  var _state = Object.assign(
    {
      timeToWalk: 100
    },
    state
  );
  return {
    walk: function() {
      var speed = _state.speed || 50;
      console.log('walking at speed: ' + _state.speed + ' for ' + _state.timeToWalk + ' seconds.');
    },
    speed: function(speed) {
      _state.speed = speed;
      return this;
    }
  }
}

So now we can do:

sniffles.speed(15).walk();

Here’s a codepen so you can play with it:

 

See the Pen Dog Factory (chainable) by Mike Newell (@newshorts) on CodePen.

javascript-site

Smart Serialization of JSON

Just wanted to point this one out with Chrome moving dom attributes to the prototype chain.

If you’re used to stringifying dom objects for requests either to local/remote storage. You might be doing something like this alot:

JSON.stringify(object)

But what you’ll find with chrome 43+ is that the properties in prototype chain don’t get serialized. This presents a problem. Luckily, there’s some recursive magic that html5 rocks gives us to do out own serializationZ:

function stringifyDOMObject(object)
{
    function deepCopy(src) {
        if (typeof src != "object")
            return src;
        var dst = Array.isArray(src) ? [] : {};
        for (var property in src) {
            dst[property] = deepCopy(src[property]);
        }
        return dst;
    }
    return JSON.stringify(deepCopy(object));
}
var s = stringifyDOMObject(domObject);

Short and quick today!

bash

SVN 101

Let’s start with the basics. I’m assuming you know what svn is and the purpose for it. If not, use Google. This tutorial is to get you going with it. I’m assuming you have it installed and are working on a mac.

UPDATE:

There’s an easier way to structure your project (sorry, I’m learning as I go here…)

Pretty simple, you’re going to create a place to put your repos, populate them, then checkout a working copy:

 

For those of you who want a simpler step by step version, see below:

Set up your test environment:
mkdir ~/Learning
cd ~/Learning
mkdir rawfiles
touch rawfiles/stuff.txt

First step is to create a local repository (I’m assuming we don’t want to make this first tutorial more complex than it needs to be…usually your repo lives on a remote server where people can get access, but we are going to work with everything locally to keep it easy):

Create a repo:
svnadmin create remote
Import your files:
svn import rawfiles file:///Users/{YOUR_NAME}/Learning/remote/trunk -m "initial import"

Now we assume the “remote” is our repo living on a server somewhere. Time to pull down the project so we can start working with it:

Checkout a working copy:
mkdir local
svn co file:///Users/{NAME}/Learning/remote/trunk local/trunk
Let’s see what we have in there:
ls -la local/trunk

“Trunk” is just the main repository. It’s common in svn to use trunk the same way someone might use “Master” in git. It’s the production version of things. Not required, but it is convention.

At this point you’re ready to begin working with the files. In 102, I’ll show you how to setup your project to ignore certain files and begin modifications and commits. Then we’ll create some branches and start merging!

cordova

Cordova Getting Started

Once you have it installed. Run the following:

cordova create hello com.example.hello HelloWorld
cordova platform add ios
cordova build

Open your project in Xcode (under the platforms folder/ios) and you should be able to run it on an ios device!

gear

How To Build GearVR Apps with Unity

 

Great step by step instructions for setting up your environment correctly here: https://www.reddit.com/r/GearVR/comments/2qcryc/step_by_step_guide_to_building_apps_for_the_gear/

Oculus Signature File:

Get your device id by:

adb devices

Copy the id and paste it on the site below to get your signature file

Oculus signature file: https://developer.oculus.com/osig/

Oculus Android Utility Package:

Download the oculus utilities package: https://developer.oculus.com/downloads/game-engines/0.1.0-beta/Oculus_Utilities_for_Unity_5/

Made a quick video to show you how to build and run on GearVR:

javascript-site

Arguments has a length, Object Literals do not?

I’m going to research on this and get back here. Basically, I’m wondering the following:

Why am I able to test inside of a function for arguments.length. But I can create an object literal and length is undefined? example:

function count(a,b) {
    console.log(arguments.length); // 2
}
count(1,2);

var obj = { a: 1, b : 2 };
console.log(obj.length); // undefined!