dropshado.ws

Refresh button in IE developer tools

Wed, 27 Mar 2013 13:10:09 -0400

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.

event.target on resize in Opera

Sun, 24 Mar 2013 19:08:40 -0400

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

See fiddle.

touch.identifier = 0

Mon, 18 Mar 2013 16:33:13 -0400

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

Sun, 06 Jan 2013 13:52:26 -0500

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.

Gradient syntax helper

Thu, 15 Nov 2012 09:11:31 -0500

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/

js-beautify npm module

Wed, 31 Oct 2012 11:23:40 -0400

js-beautify npm module:

all of the code powering jsbeautifier.org

Utility module for beautifying JS.

Felix's Node.js Style Guide

Mon, 22 Oct 2012 17:27:32 -0400

Felix's Node.js Style Guide:

via JavaScript for Cats

Get random letter

Sun, 14 Oct 2012 21:47:08 -0400

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

Animating max-height to overcome height:auto limitation

Tue, 25 Sep 2012 16:46:30 -0400

Animating max-height to overcome height:auto limitation:

(this is probably not new, but just in case…) Q: How to transition to height:auto? A: Transition max-height instead! jsfiddle.net/leaverou/zwvNY/
— Lea Verou (@LeaVerou) May 15, 2011

via Brad Frost:

This technique is insanely badass. I use it for all my height-animating needs, including accordions.

.command files can be double-clicked

Sun, 16 Sep 2012 21:53:09 -0400

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.

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

GitHub Styleguide

Wed, 25 Jul 2012 10:18:26 -0400

GitHub Styleguide

Pretty git log

Wed, 18 Jul 2012 17:17:35 -0400

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"

YAML Front Matter syntax highlighting in TextMate

Tue, 17 Jul 2012 21:52:07 -0400

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 code blocks in TextMate

Tue, 17 Jul 2012 21:50:44 -0400

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.

TextMate commands with node

Wed, 13 Jun 2012 10:41:00 -0400

TextMate commands are the scripts that run every time you do some special key command, for example, Ctrl + Shift + W to wrap text in an HTML tag. Commands aren’t just baked-in magic, each one is an editable script. This allows you to write your own. This is awesome.

Personally, I’m not familiar with bash or Ruby, which means the code behind any command is just as good as a magic spell. But through the wonder of node, I’m able to develop my own TextMate commands that I actually comprehend.

I had a project where I had to add links to any reference of a U.S. state, a perfect use-case for a custom command.

# before
Pennsylvania and Rhode Island
# after
[Pennsylvania](../pennsylvania/) and [Rhode Island](../rhode-island/)

node will need to be on your $PATH for TextMate.

First check that node is in your $PATH. On my machine, I have in ~/.bash_profile:

PATH=$PATH:~/bin:~/.gem/ruby/1.8/bin:/usr/local/bin/node
export PATH

To check it’s in there, from Terminal:

echo $PATH
# /usr/bin:/bin: ... /usr/local/bin/node
# /usr/local/bin/node or something similiar should appear in there

Or you can just add it in Preferences > Advanced > Shell (thx @rodneyrehmm).

This will allow the script to be run in node. For this script, I am using process.stdin, which takes the selected in. Of course, node does this in chunks or something and there’s a good reason for it, that John could elaborate on. But what I do know is that this works.

#!/usr/bin/env node

process.stdin.resume();

var str = '';

process.stdin.on( 'data', function ( chunk ) {
  str += chunk;
});

process.stdin.on( 'end', function () {
  // convert selected text to lowercase, then convert spaces to dashes
  var link = str.toLowerCase().replace( ' ', '-' );
  // format link
  var output = '[' + str + '](../' + link +'/)';
  process.stdout.write( output );
});

My Bundle options for the command look something this:

I hit Cmd + A around my selected text and it does the proper conversion. Nice! Now I can make TextMate commands at will.

Iterate over hashes in liquid templates - Stack Overflow

Tue, 29 May 2012 14:49:42 -0400

Iterate over hashes in liquid templates - Stack Overflow:

When you iterate over a hash using a variable called hash, hash[0] contains the key and hash[1] contains the value on each iteration.
{% for link_hash in page.links %}
  {% for link in link_hash %}
    {{ link[0] }}
  {% endfor %}
{% endfor %}

NaN messes with sorting

Tue, 22 May 2012 11:21:57 -0400

I’m building some dynamic table sorting. Looks like NaN values are messing with the sorting. For the sake of the example, let’s use an array of number-like strings. Try pasting this in your console.

(function() {
  var numbers = '19 26 63 twelve 83 106 hundred zero 12'.split(' ');
  return numbers.sort();
})();
// ["106", "12", "19", "26", "63", "83", "hundred", "twelve", "zero"]

The resulting array is as expected, since the values are still strings.

Let’s parse those values as integers, using a compare function in sort.

(function() {
  var numbers = '19 26 63 twelve 83 106 hundred zero 12'.split(' ');
  function parse( value ) {
    return parseInt( value );
  }
  return numbers.sort( function( a, b ) {
    return parse( a ) < parse( b );
  });
})();
// ["63", "26", "19", "twelve", "106", "83", "hundred", "zero", "12"]

This looks just random. I believe what’s happening is how a NaN value from parseInt('foo') messes with the comparison. Comparing any number with NaN will return false.

14 > NaN
// false
NaN > 14
// false

Oh JavaScript, you so cray.

My solution is to account for NaN in the parser.

(function() {
  var numbers = '19 26 63 twelve 83 106 hundred zero 12'.split(' ');
  function parse( value ) {
    value = parseInt( value );
    value = isNaN( value ) ? Infinity : value;
    return value;
  }
  return numbers.sort( function( a, b ) {
    return parse( a ) > parse( b );
  });
})();
// ["12", "19", "26", "63", "83", "106", "twelve", "hundred", "zero"]

You don’t have to munge NaN as Infinity, but this at least treats the value as a number that can be properly compared.

Sequel Pro

Mon, 09 Apr 2012 10:22:24 -0400

Sequel Pro:

Nice SQL database management app.

Chrome Developer Tools settings

Mon, 02 Apr 2012 10:40:07 -0400

Via JFSIII, Chrome’s Developer Tools has some useful options hidden in its settings panel. All this time, it has been hiding as that little cog icon in the bottom right.

Personal favorites include Disable cache, Text Editor indent, Dock to right which is ideal for mobile-sized media-query development.

Git submodules

Wed, 28 Mar 2012 07:36:00 -0400

I think I’m ready to discuss Git submodules. My chronic problem with submodules is that I don’t use them often enough to understand how they work. From what I gather, you can do a lot more than what I’ll cover, but I’m only interested in just placing a repo in a repo.

The benefit of submodules is that you can reduce duplicate code. Instead of copying files from one repo into another, Git can manage this for you. nclud.com v3 currently has 6 submodules. These are helpful for pulling changes to external repos — in our case jquery-smartresize and jquery.form.js.

I’ve been breaking out re-useable bits of code into smaller repos and gists. So I’ve got this requestAnimationFrame polyfill, and I want to include it in another project, Inflickity. This can be done with two git submodule commands:

git submodule add git://gist.github.com/1866474.git request-animation-frame
git submodule update --init

This will add the submodule, then pull in the appropriate commit. I’ll be able to use request-animation-frame/requestanimationframe.js in the Inflickity demo.

Both those commands trigger a change in the repo, changing .gitmodules and reference to the submodule repository. This change will require a commit.

If anyone else clones the repo, they’ll have to update and init the submodules as well.

git clone https://github.com/nclud/inflickity.git
cd inflickity
git submodule update --init

EDIT Or better yet, clone the repo and pull in submodules with git clone --recursive (thx Mathias):

git clone --recursive https://github.com/nclud/inflickity.git

Now, the crazy-pants part. Per the Git reference, git submodule update…

will make the submodules HEAD be detached

I think this is where I usually lose control of what was happening with my submodules. The submodule’s repository has checked out the specific commit, and is not on the master branch as I would have expected. For example, let’s try cloning the Inflickity repo and getting that submodule working.

~/projects $ git clone https://github.com/nclud/inflickity.git
Cloning into inflickity...
...
Unpacking objects: 100% (87/87), done.
~/projects $ cd inflickity
~/projects/inflickity $ git submodule update --init
Submodule 'request-animation-frame' (git://gist.github.com/1866474.git) registered for path 'request-animation-frame'
Cloning into request-animation-frame...
...
Submodule path 'request-animation-frame': checked out 'db50266cd98d2d46277fd54d24cfd37766476a00'
~/projects/inflickity $ ls request-animation-frame/
requestanimationframe.js

Great, so the contents of the submodule are there. But what happens if we check the status of that submodule repository:

~/projects/inflickity $ cd request-animation-frame/
~/projects/inflickity/request-animation-frame $ git status
# Not currently on any branch.
nothing to commit (working directory clean)

Not on any branch. Darnit. This will prevent the basic git pull from working, so you’ll have to specify remote and branch.

~/projects/inflickity/request-animation-frame $ git pull origin master
From git://gist.github.com/1866474
 * branch            master     -> FETCH_HEAD
Already up-to-date.

git submodule foreach allows you to run a shell command for each submodule, which is ideal for pulling all submodules.

~/projects/inflickity $ git submodule foreach 'git pull origin master'
Entering 'request-animation-frame'
From git://gist.github.com/1866474
 * branch            master     -> FETCH_HEAD
Already up-to-date.

Just like when adding submodules, if there are any new commits that were pulled for a submodule, you’ll need to track that change in a commit for the parent repository.

In review, my three go-to git submodule commands are:

# starts it off
git submodule update --init
# for anyone else cloning
git clone --recursive my-repo.git
# pull in any fresh commits
git submodule foreach 'git pull origin master'

This keeps me in the parent repo, and I don’t get confused popping in and out of submodules repo.