Easy debugging with window.q = this

December 25, 2016

TL;DR: Sprinkle a quick window.q = this into your JS file for a quick and easy way to debug from your browser's dev tools.

Modern JS techniques generally prohibit application code from adding or modifying global variables, so the scope of various classes that contain an applications state and functionality are not directly accessible from a browser's debug console. This is an annoyance for debugging.

Continue reading »

Avoid an insidious Ember.js gotcha by always properly listing all the dependencies of a computed property

November 19, 2016

Ember.js computed properties are a powerful feature of the Ember.js framework that is essentially an abstraction around a property getter (with built-in caching). The body of the computed property is evaluated whenever the value is requested; the returned value is cached until one of the other properties that is depended on changes. For instance consider the following simple Ember object:

let Person = Ember.Object.extend({
  firstName: 'Betty',
  lastName: 'Jones',

  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;

Person.get('fullName') evaluates to 'Betty Jones'. The value is cached until firstName or lastName is changed. But for this to work, we need to manually list out the properties that fullName depended on. Listing out all of the properties a computed depends on like this can be a fairly tedious task. It can be tempting to skip a few, espeically if you can say to yourself that certain properties would always change together. For instance, say we want to add another computed property:

  json: Ember.computed('fullName', function() {
    return JSON.stringify({
      firstName: this.get('firstName'),
      lastName: this.get('lastName')

Whenever firstName or lastName changes, fullName is assured to change. It seems like we have just saved ourselves some typing, right? Though the output would be correct for now, this post is about why this is a bad idea, since this will not always be the case. There is a big gotcha that can happen if you do this, which manifests itself as computed properties not getting updated.

Continue reading »

A summary of the Intellectual Property section of the Trans Pacific Partnership Treaty

November 7, 2015

The full text of the Trans-Pacific Partnership has been released, and there has been much discussion about it, some of it a bit misinformed. I decided to take a closer look at the chapter on Intellectual Property. It's an important chapter that governs trademarks, patents, copyrights, and their enforcement (including on the Internet). I am about as far as one can get from being an international trade lawyer, but I believe that I was able to make a reasonable assessment of the section. The language was sometimes difficult, but precise. Here is a summary:

Continue reading »

Bezier curve animation using D3.js

January 16, 2015

I was recently faced with the challenge of animating a Bezier curve using the data manipulation and visualization library D3.js, which I eventually accomplished for Shopify's live map of orders. We start off with a fairly rudimentary code to generate a spline:

Continue reading »

Making text more readable on images using a text-outline workaround

January 13, 2015

text-outline or text-stroke is a convenient CSS property that, as of January 2015, has very limited support on major browsers. This is a bit of a shame since it is highly useful in certain circumstances, such as overlaying text on top of a background image and still ensuring that it is easily readable.

Without text outline
With text outline

Photo by JustSomePics, CC-BY-SA.

Continue reading »