Lost My Box Tool – XScope


If you lose your box tool:


You can get it back by selecting it, as I’ve done in the photo above, then hitting “cmd + shft + 5”




Add Server Side Includes to your MAMP Localhost

Super simple edit the file:

pico /Applications/MAMP/conf/apache/httpd.conf

Uncomment the following:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

Then add an .htaccess file to your root:

AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

Restart MAMP and it should work like a charm!

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: http://stephen.io/mediaqueries/#iPhone. 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: http://stackoverflow.com/questions/12539697/iphone-5-css-media-query


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

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

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() {
      state.svg.data([state.data]).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: 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(

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