SVN Create a Patch with Kaleidoscope

So here’s the sitch yo:

You have kaleidoscope as your diff tool. You go to make a patch:

svn diff > ~/Desktop/my-cool-diff.patch

Then you realize that it’s opening kaleidoscope instead and not exporting your diff to a file.

Well the problem is you’re using the wrong program. Do something like this:

svn diff --diff-cmd /usr/bin/diff -x "" > ~/Desktop/modal-fix.patch

Now you’re using the right diff tool!

Then you can apply the patch like this:

svn patch ~/Desktop/my-cool-diff.patch


Targeting iPhone 5 vs 6 with Media Queries

So most blogs will tell you to target different versions of iphone using “device-width”. There’s a good example of this here: While these media queries aren’t wrong, they pose a challenge when trying to target an iPhone 5 vs iPhone 6. For that we need something a little more specific.

Fortunately, we have a media query that can help us out called:


With this we can target individual devices, lucky for us, the iphone 5/5s and 6/6s and 6+/6+s all have different aspect ratios:

  • iPhone 5/5s: 40/71
  • iPhone 6/6s: 375/667
  • iPhone 6+/6+s: 9/16

So the following would target each device:

// iphone 5/5s portrait/landscape
    .download-iphone5 {
      @media screen and (device-aspect-ratio: 40/71) {
        display: block;

    // iphone 6/6s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 375/667) {
        display: block;

    // iphone 6+/6+s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 9/16) {
        display: block;

This might be useful if you are trying to display a link only on iphone 5 vs a different link on iphone 6.

More here:


JavaScript Function to get Target From Event

Quick one today:

When you’re looking for the target from an event. It’s a good idea to do the following:

function stuff(e) {

    var target = || e.srcElement;


For older IE browsers don’t have “.target” and instead have “srcElement”

Curry vs Factory vs Class

Hey all just thought I’d make a quick rosetta stone of different ways to say the same thing.

In this example, I setup different forms of currying, a factory and a class all serving to become a messenger app.

Rule #1: You must pass a name as an argument first.

Rule #2: later in your code, you must pass a message.

See the Pen Messenger Rosetta Stone by Mike Newell (@newshorts) on CodePen.

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() {

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, idx) {
    return {
      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.

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(, function(d) { return d.x });
  var extentY = d3.extent(, 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:

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

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); })

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() {[]).append('g').append("path").attr("d", line);

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:


If you aren’t familiar with factory functions, he also has a video here: 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(

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 ' +;

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
  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


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:


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
  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:


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


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

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:


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!

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.


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!