thebigreason

Projects

Here are a couple of miscellaneous projects, web services, utilities, etc. I’ve been messing around with over the past few years. Drop me a line if you find them useful, or if you have any helpful suggestions.

TextMate Snippets

Here are a few TextMate snippets I made to streamline (X)HTML markup and CSS. They are described in detail below. To use them, download the zip archive and double click the snippets you would like to instal in the resulting folder.

Download TextMate Snippets (8k zip file)

1. Border Radius

   Did you know that Webkit has supported the border-radius property about four years longer than Geko? It’s true. Yet I often come across CSS rules in style sheets that leave Webkit browsers out in the cold. Did you also know that Geko’s implementation uses syntax that is inconsistent with the W3C working draft?

   My snippets contain the Webkit, and Geko selector prefixes as well as the current W3C recommended syntax for the rules to ensure they are future proof.

   Tab trigger: border tab

   -webkit-border-top-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   border-top-left-radius: 5px;
   
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topright: 5px;
   border-top-right-radius: 5px;
   
   -webkit-border-bottom-right-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   border-bottom-right-radius: 5px;
   
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-bottom-left-radius: 5px;

   In this snippet, 5px is the default value for each rule. The first rule’s value is the default selection and mirrored down the line. Subsequent tab stops are as follows:

   1. First three rules for the top-left corner are selected so they can be deleted.
   2. Value of fourth rule is selected so it can be modified and is mirrored to the two subsequent rules.
   3. All three rules for the top-right corner are selected so they can be deleted.
   4. Value of seventh rule is selected so it can be modified and is mirrored to the two subsequent rules.
   5. All three rules for the bottom-right corner are selected so they can be deleted.
   6. Value of tenth rule is selected so it can be modified and is mirrored to the two subsequent rules.
   7. All three rules for the bottom-left corner are selected so they can be deleted.
   
   

   Remember that the border-radius spec takes two values. The first is for the horizontal radius, the second for the vertical. Omitting the second value makes both horizontal and vertical radiuses equal.

   I also have a snippet for the shorthand version.

   Tab trigger: border tab

   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   In the shorthand snippet, 5px is a default value and is mirrored for each subsequent property.

2. Box Shadow

   Webkit and Geko support box shadows. Great for creating shadows, glows and inset and emboss effects. Here is the output of my box-shadow snippet:

   Tab trigger: box tab 1

   -webkit-box-shadow: 10px 10px 10px #888;
   -moz-box-shadow: 10px 10px 10px #888;
   -box-shadow: 10px 10px 10px #888;

   This snippet selects the horizontal offset value (first value) of the first rule by default, and mirrors the respective values of the subsequent rules. Subsequent tab stops are as follows:

   1. Value of vertical offset (second value) is selected so it can be modified and is mirrored to respective values of the two subsequent rules.
   2. Value of blur radius (third value) is selected so it can be modified and is mirrored to respective values of the two subsequent rules.
   3. Value of blur radius (third value) is selected so it can be modified and is mirrored to respective values of the two subsequent rules.
   4. Value of shadow color (fourth value) is selected so it can be modified and is mirrored to respective values of the two subsequent rules.
   
   

   And yes, it also comes in rgba flavor:

   Tab trigger: box tab 2

   -webkit-box-shadow: rgba(255,255,255,.5) 5px 5px 5px;
   -moz-box-shadow: rgba(255,255,255,.5) 5px 5px 5px;
   box-shadow: rgba(255,255,255,.5) 5px 5px 5px;

   In this snippet, tab stops are set at each RGB and alpha channel individually, then offsets and blur radius with modifications mirroring down the line respectively, as in the previous example.

3. Clearfix

   The classic CSS hack for clearing floats without extra markup.

   Tab trigger: clearfix tab

   .clearfix:after {
   	content: ".";
   	display: block;
   	clear: both;
   	visibility: hidden;
   	line-height: 0;
   	height: 0;
   }
   .clearfix { display: inline-block; }
   html[xmlns] .clearfix { display: block; }
   * html .clearfix { height: 1%; }

   In my snippet, the .clearfix selector is a placeholder mirror so that you can specify your own selector, and mirror it down the line.

4. Debug Outline/Border

   It’s sometimes useful to outline specific elements on your page to help debug layout issues. These snippets help with that.

   Tab trigger: outlineme tab

   outline: 1px solid #900;

   Internet Explorer doesn’t support the outline property, so I have a border version for it.

   Tab trigger: borderme tab

   border: 1px solid #900;

5. Quotes, Apostrophes and Dashes

   While TextMate ships with a very robust entity converter for large blocks of content, it isn’t as useful when writing content by hand. There are those who use the term curly quotes, and then there are those of us who understand the difference between quotation marks, apostrophes and primes. These snippets are set to their respective OS X keyboard short cuts and are applied to the html.text scope selector so that they only happen in HTML markup.

   The following snippet will wrap your selected text in double quotes, or insert double quote entities around your cursor. A second tab stop is set just after the right quote.

   Key equivalent: option + [

   “”

   The following is a right double quote for shits and giggles.

   Key equivalent: shift + option + [

   ”

   The following snippet will wrap your selected text in single quotes, or insert single quote entities around your cursor. A second tab stop is set just after the right quote.

   Key equivalent: option + ]

   ‘’

   Use the following snippet for apostrophes.

   Key equivalent: shift + option + ]

   ’

   Insert an em-dash.

   Key equivalent: shift + option + -

   —

   Insert an en-dash.

   Key equivalent: option + -

   –

Commute Timer for iPhone (web application)

Do you ever find yourself arguing with someone about the fastest way to work, the lake, or the city? Can you prove you’re right? You can now. This application is no longer active.

I created the commute timer so I could see which way to work was actually the fastest. After a few months of use, I was surprised to find that speed and moderate traffic have little effect on the time it takes me to drive to work (traffic lights and stop signs are what kill you). I also know which routs work best depending on the time of day.

The interface is designed to be easy to use in the car. You can select a different rout if you change your mind at the last minute, and you can always go back an change your entries (right down to the time) if you make a mistake.

Sign up for a FREE account and try it today.

Adobe CS3 Configurator

The Adobe CS3 suite comes in a lot of flavors—6 to be exact. Adobe offers a pretty little product selector to help you decide which CS3 package is right for you. But what if you aren’t new? What if you are a seasoned professional who already knows which applications you need? How do you decide which package is the most economical option for you? That’s right! The Adobe CS3 Configurator… This project is no longer active.