These are my actions. These are my words.

Apple’s shiny new USB installer icon

Apple's shiny new icon

Download it here.

Quick Compile SASS with Compass + TextMate

I’ve created a tiny TextMate bundle to quickly compile SASS into CSS. The bundle uses a SASS_DIR variable unique to your project pointing to your SASS directory. Here’s how to set it up:

  1. For best results, install the SCSS + Zen bundle beforehand.
  2. Download and install the Quick Compile bundle.
  3. In your project drawer, select the “i” icon in the bottom right corner. If the icon is grayed out, you probably have a file or folder selected within the drawer. Deselect the file by clicking elsewhere inside of the drawer.
  4. Add a SASS_DIR shell variable. The value should be the path to your SASS folder relative to your project root.
    Note: on a default compass generated project, the relative path is your project root. The SASS_DIR value should be “.”, unquoted.

That’s it. The keystroke is mapped to ⌘S. It will autosave along with your usual workflow. The Compass output will appear as a tooltip, either to confirm the output or to notify you of errors. Apologies for the formatting, I don’t see a way to clean it up:

Download Compass Quick Save 1.0

Substitute :last-child for :first-child for IE 7 support

Consider the following:

ul li {
   display: inline;
   margin-right: 10px;
   padding-right: 10px;
   border-right: 1px solid red;

ul li:last-child {
   margin-right: 0;
   padding-right: 0;
   border-right: 0;

This bit of CSS would give you perfect line separators in IE8+. But since IE 7 supports the :first-child pseudo-class, we can do one better:

ul li {
   display: inline;
   margin-left: 10px;
   padding-left: 10px;
   border-left: 1px solid red;

ul li:first-child {
   margin-left: 0;
   padding-left: 0;
   border-left: 0;

Same* result, with more browser support.
*Substitute for “sane”.

Add to your Twitter homepage with Greasemonkey / GreaseKit

For those using either Greasemonkey or GreaseKit, I threw together a quick script to add the interface in your Twitter homepage: / Twitter Integrator

Here’s a screenshot of what that looks like for reference:

RGBa makes a great debugging tool

With 24 Ways pushing RGBa into the foreground today, I thought I’d share a quick debugging tip. Using RGBa can help while you’re debugging element positioning. For the adventurous, combine with a debug class:

.debug {
  background: rgba(255, 0, 0, 0.5);

Flow 1.1

And just like that, a new update. Several small fixes worthy of a point upgrade:

  • Switched QuerySelector engine to Sizzle 1.0
  • querySelector/querySelectorAll can now be run on any element (via Selectors API)
  • IE 8 does not like setAttribute on type elements. Reverting to DOM 1 method.
  • Fixed minor assertion bug in Require.js

Flow 1.0.8

A tiny update that fixes IE 8 browser identification. It previously incorrectly identified IE 8 as IE 5.

Pickleview shuts down

It had a good run there for a few months. I don’t need to tell you about MLB’s At Bat app do I? It’s the better (and free) alternative, and I can’t really compete with baseball’s integrated setup.

My thanks to the founders, wherever you are. That was a great weekend.