Garrett Murphey

Ruby & JavaScript Developer

Ignoring Git Hooks When Rebasing

Posted on February 02, 2013

If you’re in the habit of rebasing your work before pushing to origin (and you should be, in my opinion), you may notice some annoying things happening if you have prepare-commit-msg and pre-commit hooks enabled for your repository. I have both – one to pre-prend the branch name on my commit messages and another to run build processes. When I would clean up my commits with an interactive rebase each of the commits in the rebase would have their messages edited and a build would be made for every step of the way. That finally annoyed me enough to add a simple condition to my hooks.

#!/bin/sh

BRANCH_NAME=$(git branch | grep '*' | sed 's/* //')

if [ $BRANCH_NAME != '(no branch)' ]
then
  # your regularly scheduled hook
fi

Now those commits won’t run when rebasing (rebase runs in a headless branch) and you could technically run a separate hook just for rebases.


Grunt Pre-Commit Hook for Release Tasks

Posted on December 22, 2012

I’m always forgetting to run release tasks when committing to Git, and then I’m forced to either rewrite history and merge commits or roll back and re-commit. It’s a big time sink. Thankfully, I’ve been playing with Grunt tasks and Git pre-commit hooks and found a way to not only save time and my sanity, but take release tasks out of my manual workflow entirely. This hook will stash any work that’s not staged, run the release task, stage any files updated by the task and restore any stashed files.

In the pre-commit hook (.git/hooks/pre-commit):

#!/bin/sh
# stash unstaged changes, run release task, stage release updates and restore stashed files

NAME=$(git branch | grep '*' | sed 's/* //')

# don't run on rebase
if [ $NAME != '(no branch)' ]
then
  git stash -q --keep-index
  grunt release

  RETVAL=$?

  if [ $RETVAL -ne 0 ]
  then
    exit 1
  fi

  git add .
  git stash pop -q
fi

And in your Grunt config:

grunt.registerTask('release', ['lint', 'qunit', 'concat', 'min']);

Never commit linting errors or failing tests again, and you won’t worry about run build tasks from now on.


Jekyll Plugin: Syntax Highlighting With Prism

Posted on August 09, 2012

I’ve been battling with Pygments, the native Jekyll markup highlighter, for a while. Its reliance on Python makes it nearly impossible to run on Heroku without committing your compiled site to git (which just makes me feel dirty). Needless to say, I’ve been looking for a Pygments alternative for a while. That’s why I was excited to see Lea Verou announce Prism, a standalone and lightweight client-side syntax highlighter.

The Setup

The Prism plugin is very easy to install and start using.

Simply download the plugin, copy prism.rb to your plugins folder setup your layout to use the Prism JavaScript and styles.

<html>
  <head>
    <link href="prism.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    ...
    <!-- after all your content -->
    <script src="prism.js"></script>
  </body>
</html>

Getting Started

Much of my work on the plugin is based on the Jekyll’s native highlight tag, and it’s used much the same way.

For a plain, old vanilla experience (like you see on this page), the syntax is pretty straightforward.

... content ...

{% prism javascript %}
var obj = { 'foo': true, 'bar': false };

for (key in obj) {
  console.log(obj[key]);
}
{% endprism %}

... more content ...

Like Jekyll’s highlight, the Prism plugin also can highlight lines using linenos. The value can be a comma-separated list or a range (1, 3-7).

Note: you need to include line highlighting in your Prism download for this to work.

... content ...

{% prism javascript linenos=1,4 %}
var obj = { 'foo': true, 'bar': false };

for (key in obj) {
  console.log(obj[key]);
}
{% endprism %}

... more content ...

And for something Prism doesn’t offer out of the box, declaring linenos without a value will highlight all lines.

... content ...

{% prism javascript linenos %}
var obj = { 'foo': true, 'bar': false };

for (key in obj) {
  console.log(obj[key]);
}
{% endprism %}

... more content ...

Fork it!

As usual, all the code for the plugin is hosted on GitHub. If you find a bug, please file an issue or request a pull.


jQuery Plugin: Outbound Analytics

Posted on July 22, 2012

A jQuery plugin aimed at making it easier to track outbound (external) links with Google Analytics.

Getting Started

Download the production version or the development version.

99% of the time you’ll probably just want to track clicks on all outbound links on a page. This is easy. In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.outbound-analytics.min.js"></script>
<script>
jQuery(function($) {
  // automatically tracks all outbound links (a[href]) in the DOM
  $.outboundAnalytics();
});
</script>

Sometimes you may want to track only certain links, or track links in your header or footer different. This is easy, too. In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.outbound-analytics.min.js"></script>
<script>
jQuery(function($) {
  // automatically tracks all outbound links (a[href]) in <header>
  $('header').outboundAnalytics();

  // track <aside> links as 'Reference Links'
  $('aside').outboundAnalytics({ 'category': 'Reference Links' });
});
</script>

Fully Customizable

The plugin comes with smart defaults and everything you pass to Google Analytics is totally customizable (options can even be passed as functions). Here’s what you have access to:

NameTypeDefaultDescription
categoryStringOutbound LinksThe category used in Google Analytics
actionStringClickThe action used in Google Analytics
labelStringThe link’s href attributeThe label used in Google Analytics
valueFloatnullThe value assigned to the event in Google Analytics
nonInteractionBooleanfalseWhether or not the event calculates into the bounce rate in Google Analytics

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don’t edit files in the “dist” subdirectory as they are generated via grunt. You’ll find source code in the “src” subdirectory!

Release History

  • 0.1.1: Improving external link detection.
  • 0.1.0: Intial release.

jQuery Plugin: Best Ampersand

Posted on July 19, 2012

“Best Ampersand” is a simple jQuery plugin that adds ampersand classes for better ampersand fonts. Inspired by Dan Cederholm.

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.best-ampersand.min.js"></script>
<script>
jQuery(function($) {
  // finds and surrounds all ampersands in all <h2>s
  $('h2').bestAmpersand();
});
</script>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don’t edit files in the “dist” subdirectory as they are generated via grunt. You’ll find source code in the “src” subdirectory!

Release History

  • 0.1.0: Initial release.