Internet Explorer’s HTML developer tool will not display changes to the DOM until you click the Refresh button. This goes for newly appended elements, changes to classes, and other changes.

Try out this demo. New items won’t appear in the inspector until you refresh.

Thx to KillianJK on GitHub for putting in the due diligence to get to the bottom of this.

In Opera, on resize, event.target is document, not window.

See fiddle.

In the touch event API, each touch object has a unique identifier property. This allows you to keep track of which touch is which when listening to touch events. Try out jsfiddle.net/desandro/WnnG9/8/show/light on a touch device.

document.body.addEventListener( 'touchstart', function( event ) {
  // dismiss after-touches
  if ( isTouching ) {
    return;
  }
  event.preventDefault();
  // only care about the first touch
  var touch = event.changedTouches[0];
  identifier = touch.identifier;
  log('touch START; indentifer ' + touch.identifier );
  window.addEventListener( 'touchmove', onTouchMove, false );
  window.addEventListener( 'touchend', onTouchEnd, false );
  isTouching = true;
}, false );

function getTouch( event ) {
  // cycle through every change touch and get one that matches
  for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    var touch = event.changedTouches[i];
    if ( touch.identifier === identifier ) {
      return touch;
    }
  }
}

function onTouchMove( event ) {
  // get matched touch
  var touch = getTouch( event );
  if ( !touch ) {
    return;
  }
  log( 'touch move ' + touch.pageX + ' ' + touch.pageY );
}

I ran into a bug because I was short-cutting checking touch.idenfitier. iOS uses a unique number for each every touch, like 166930777, 166930778, 166930779. It looks like Opera Mobile (and possibly Android) isn’t as granular with these identifiers, instead using 0, 1, 2 for each gesture event, then using 0, 1, 2 for the next one. I ran into a gotcha on that first touch, when it’s a falsy value touch.identifier = 0.

Collapsing margins is an ancient property of the CSS Box Model, which I am just now comprehending. In short, with two block elements, will collapse the margins between them collapse to the greater margin. But this only applies to block elements. Floated and inline-block elements will keep margins un-collapsed.

See example on CodePen.

Modernizr can detect general support for CSS3 gradients. But here’s a little script to determine the vendor gradient syntax, i.e. -webkit-linear-gradient, if supported by the browser.

jsfiddle.net/desandro/bxMgf/

Here’s a helper function that uses base 36 numeral system to return a random letter a to z.

function getRandomLetter() {
  var rand26 = Math.floor( Math.random() * 26 );
  return ( ( 10 + rand26 ) / 36 ).toString(36).substring(2);
}

From Chris Page on Stack Overflow: How do I make this file.sh executable via double click?:

By default, .sh files are opened in a text editor (Xcode or TextEdit). To create a shell script that will execute in Terminal when you open it, name it with the “command” extension, e.g., file.command. By default, these are sent to Terminal, which will execute the file as a shell script.

You will also need to ensure the file is executable, e.g.:

chmod +x file.command

Works also for .tool files.

Combine this with Allow .command files to determine working directory - Mac OS X Hints (from ‘04) and you have a low-level interface to allow non-technical colleagues run command line scripts.

The command line is a great and powerful tool for any capable developer, but to most non-technical users and colleagues, it is an uncomforting, alien black box. Ideally, any set of directions meant for everybody on your team should never include “open up Terminal.” .command files provide a mechanism to bridge this gap.

In the couple years that dropshado.ws has been dropping shadows, this is one of my favorite finds.

1. It’s way old.
2. It’s a bridge between the command line and the GUI.

TJ Holowaychuk featured a pretty git log alias, taking advantage of git log --pretty. I am now rocking:

alias glog="git log --format='%Cgreen%h%Creset %C(cyan)%an%Creset - %s' --graph"

Aside: Right now I’m a train with spotty Wifi. Hence, lots of time for noodling rather than actual productivity.

If you like that Jekyll as much as I do, chances are you’ve got lots and lots of wonderful Markdown files loaded with YAML Front Matter. I use Jekyll for everything, lo, even this very post! Let’s get TextMate’s Markdown Language Grammer to properly highlight the YAML up top.

Crack open the Bundle Editor (Cmd + Opt + Ctrl + B) and select the Markdown Language Grammer. In TextMate 2, this is in Markdown > Language Grammers > Markdown. You’ll need to add two bits.

In the block, er, block, add { include = '#yaml_front_matter'; }, to the patterns:

block = {
  patterns = (
    { include = '#yaml_front_matter'; },
    { include = '#separator'; },
    { include = '#heading'; },
    ...
  );

Then add the following pattern for yaml_front_matter under the block repository. I just added it after separator pattern.

separator = {
  match = '(^|\G)[ ]{,3}([-*_])([ ]{,2}\2){2,}[ \t]*$\n?';
  name = 'meta.separator.markdown';
};
# add this next bit
yaml_front_matter = {
  patterns = (
    { begin = '\G---';
      end = '^---';
      name = 'source.yaml.embedded.markdown';
      patterns = ( { include = 'source.yaml'; } );
    },
  );
};

Boom. Now my Jekyll Markdown files look niiiiiiiiiice.

GitHub README’s feature nice syntax highlighted code blocks with the triple tick notation.

``` css
body { font-family: sans-serif; }
```

But as this syntax is a part of GitHub Flavored Markdown and not the vanilla Markdown variety, TextMate does not recognize triple ticked code blocks, which can lead to ugly sections of the document. Take this example from desandro/textmate-bundle/README.mdown

I resolved this by modifying TextMate’s Markdown Language Grammer, adding in the triple tick pattern for raw_block.

raw_block = {
  patterns = (
    { begin = '(^|\G)([ ]{4}|\t)';
      name = 'markup.raw.block.markdown';
      while = '(^|\G)([ ]{4}|\t)';
    },
    { begin = '(^|\G)```';
      end = '(^|\G)```';
      name = 'markup.raw.block.markdown';
    },
  );
};

Bingo.