After a snafu with my previous hosting company, I’ve been using Amazon’s static site service on S3.

Site is built in build/. I’ve been using Grunt mostly, but this would work just as well for Jekyll sites.

I use s3cmd to transfer the files. Everything in build/ gets uploaded.

s3cmd sync build/. s3://masonry.desandro.com

This command is saved in a Makefile. See masonry-docs/Makefile.

make deploy

So after set up, making a site takes one or two commands

grunt
make deploy

See this workflow in use:

• Masonry docs
• Isotope docs
• Draggabilly site

This workflow is especially straightforward. At one time I did try a git post-receive hook (like one Nicolas Gallagher explains), but this felt murky, _ssh_ing to a remote box, managing two git instances. Sticking with straight-up file transfering is dumb enough that I can understanding it. Adding a separate workflow for deployment on top of git seems like duplicated effort, but there’s a benefit to separating these tasks. In my head, they’re separate.

When listening to transition End event, the event object comes with propertyName. This is useful when detecting just what transition has completed.

elem.addEventListener( 'transitionend' function( event ) {
  console.log( event.propertyName + 'transition completed' );
});

Also interesting is how the transition end event will only trigger once if a property gets changed again, during a previous transition.

See the Pen transtionEnd by David DeSandro (@desandro) on CodePen

By default, flex box makes item elements inherit the height of their container. To disable this behavior, and collapse item heights, use align: start (or the proper variation there-of).

.row {
  /* flex box */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
  /* align start, disable vertical height */
  -webkit-box-align: start;
     -moz-box-align: start; /* FF <=20 */
     -ms-flex-align: start; /* IE10 */
  -webkit-align-items: flex-start;
          align-items: flex-start;
}

 Check out this Pen!

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"