On the iPhone, Mobile Safari renders its on-screen keyboard differently for “email,” “tel” and “url” form fields — you automatically get the keys that make the most sense for each specific situation.

HTML5 email form input rendered on an iPhone

HTML5 tel form input rendered on an iPhone

HTML5 url form input rendered on an iPhone

However, the version of CakePHP that we’re running our replicated sites on (1.2.5) doesn’t have support for these awesome HTML5 inputs — any unknown input type is automatically rendered as a textarea.  (What kind of weird default is that?)

The HTML5 inputs are supported in CakePHP 2.0 (currently in beta), but we’re stuck with 1.2.5 for the time being.  Lennaert Ekelmans back-ported that support to 1.3.6, but his solution didn’t work for me out of the box either — apparently there were a couple of changes in the Form helper between 1.2.5 and 1.3.6.  So I back-back-ported his code to work with 1.2.5.  Here it is:

 <?php
# app/views/helpers/html5_form.php
App::import('Helper', 'Form');
class Html5FormHelper extends FormHelper {
    /**
     * Generates a form input element complete with label and wrapper div
     *
     * Options - See each field type method for more information. Any options that are part of
     * $attributes or $options for the different type methods can be included in $options for input().
     *
     * - 'type' - Force the type of widget you want. e.g. ```type => 'select'```
     * - 'label' - control the label
     * - 'div' - control the wrapping div element
     * - 'options' - for widgets that take options e.g. radio, select
     * - 'error' - control the error message that is produced
     *
     * @param string $fieldName This should be "Modelname.fieldname"
     * @param array $options Each type of input takes different options.
     * @return string Completed form widget
     *
     * different from regular form helper only in the textarea/default case -- adds support for HTML5 form types and attributes like placeholder
     *
     */
    function input($fieldName, $options = array()) {
        $view =& ClassRegistry::getObject('view');
        $this->setEntity($fieldName);
        $entity = join('.', $view->entity());

        $defaults = array('before' => null, 'between' => null, 'after' => null);
        $options = array_merge($defaults, $options);

        if (!isset($options['type'])) {
            $options['type'] = 'text';

            if (isset($options['options'])) {
                $options['type'] = 'select';
            } elseif (in_array($this->field(), array('psword', 'passwd', 'password'))) {
                $options['type'] = 'password';
            } elseif (isset($this->fieldset['fields'][$entity])) {
                $fieldDef = $this->fieldset['fields'][$entity];
                $type = $fieldDef['type'];
                $primaryKey = $this->fieldset['key'];
            } elseif (ClassRegistry::isKeySet($this->model())) {
                $model =& ClassRegistry::getObject($this->model());
                $type = $model->getColumnType($this->field());
                $fieldDef = $model->schema();

                if (isset($fieldDef[$this->field()])) {
                    $fieldDef = $fieldDef[$this->field()];
                } else {
                    $fieldDef = array();
                }
                $primaryKey = $model->primaryKey;
            }

            if (isset($type)) {
                $map = array(
                    'string'  => 'text',     'datetime'  => 'datetime',
                    'boolean' => 'checkbox', 'timestamp' => 'datetime',
                    'text'    => 'textarea', 'time'      => 'time',
                    'date'    => 'date',     'float'     => 'text'
                );

                if (isset($this->map[$type])) {
                    $options['type'] = $this->map[$type];
                } elseif (isset($map[$type])) {
                    $options['type'] = $map[$type];
                }
                if ($this->field() == $primaryKey) {
                    $options['type'] = 'hidden';
                }
            }

            if ($this->model() === $this->field()) {
                $options['type'] = 'select';
                if (!isset($options['multiple'])) {
                    $options['multiple'] = 'multiple';
                }
            }
        }
        $types = array('text', 'checkbox', 'radio', 'select');

        if (!isset($options['options']) && in_array($options['type'], $types)) {
            $view =& ClassRegistry::getObject('view');
            $varName = Inflector::variable(
                Inflector::pluralize(preg_replace('/_id$/', '', $this->field()))
            );
            $varOptions = $view->getVar($varName);
            if (is_array($varOptions)) {
                if ($options['type'] !== 'radio') {
                    $options['type'] = 'select';
                }
                $options['options'] = $varOptions;
            }
        }

        $autoLength = (!array_key_exists('maxlength', $options) && isset($fieldDef['length']));
        if ($autoLength && $options['type'] == 'text') {
            $options['maxlength'] = $fieldDef['length'];
        }
        if ($autoLength && $fieldDef['type'] == 'float') {
            $options['maxlength'] = array_sum(explode(',', $fieldDef['length']))+1;
        }

        $out = '';
        $div = true;
        $divOptions = array();

        if (array_key_exists('div', $options)) {
            $div = $options['div'];
            unset($options['div']);
        }

        if (!empty($div)) {
            $divOptions['class'] = 'input';
            $divOptions = $this->addClass($divOptions, $options['type']);
            if (is_string($div)) {
                $divOptions['class'] = $div;
            } elseif (is_array($div)) {
                $divOptions = array_merge($divOptions, $div);
            }
            if (in_array($this->field(), $this->fieldset['validates'])) {
                $divOptions = $this->addClass($divOptions, 'required');
            }
            if (!isset($divOptions['tag'])) {
                $divOptions['tag'] = 'div';
            }
        }

        $label = null;
        if (isset($options['label']) && $options['type'] !== 'radio') {
            $label = $options['label'];
            unset($options['label']);
        }

        if ($options['type'] === 'radio') {
            $label = false;
            if (isset($options['options'])) {
                if (is_array($options['options'])) {
                    $radioOptions = $options['options'];
                } else {
                    $radioOptions = array($options['options']);
                }
                unset($options['options']);
            }
        }

        if ($label !== false) {
            $labelAttributes = $this->domId(array(), 'for');
            if (in_array($options['type'], array('date', 'datetime'))) {
                $labelAttributes['for'] .= 'Month';
            } else if ($options['type'] === 'time') {
                $labelAttributes['for'] .= 'Hour';
            }

            if (is_array($label)) {
                $labelText = null;
                if (isset($label['text'])) {
                    $labelText = $label['text'];
                    unset($label['text']);
                }
                $labelAttributes = array_merge($labelAttributes, $label);
            } else {
                $labelText = $label;
            }

            if (isset($options['id'])) {
                $labelAttributes = array_merge($labelAttributes, array('for' => $options['id']));
            }
            $out = $this->label($fieldName, $labelText, $labelAttributes);
        }

        $error = null;
        if (isset($options['error'])) {
            $error = $options['error'];
            unset($options['error']);
        }

        $selected = null;
        if (array_key_exists('selected', $options)) {
            $selected = $options['selected'];
            unset($options['selected']);
        }
        if (isset($options['rows']) || isset($options['cols'])) {
            $options['type'] = 'textarea';
        }

        $empty = false;
        if (isset($options['empty'])) {
            $empty = $options['empty'];
            unset($options['empty']);
        }

        $timeFormat = 12;
        if (isset($options['timeFormat'])) {
            $timeFormat = $options['timeFormat'];
            unset($options['timeFormat']);
        }

        $dateFormat = 'MDY';
        if (isset($options['dateFormat'])) {
            $dateFormat = $options['dateFormat'];
            unset($options['dateFormat']);
        }

        $type     = $options['type'];
        $before     = $options['before'];
        $between = $options['between'];
        $after     = $options['after'];
        unset($options['type'], $options['before'], $options['between'], $options['after']);

        switch ($type) {
            case 'hidden':
                $out = $this->hidden($fieldName, $options);
                unset($divOptions);
            break;
            case 'checkbox':
                $out = $before . $this->checkbox($fieldName, $options) . $between . $out;
            break;
            case 'radio':
                $out = $before . $out . $this->radio($fieldName, $radioOptions, $options) . $between;
            break;
            case 'text':
            case 'password':
                $out = $before . $out . $between . $this->{$type}($fieldName, $options);
            break;
            case 'file':
                $out = $before . $out . $between . $this->file($fieldName, $options);
            break;
            case 'select':
                $options = array_merge(array('options' => array()), $options);
                $list = $options['options'];
                unset($options['options']);
                $out = $before . $out . $between . $this->select(
                    $fieldName, $list, $selected, $options, $empty
                );
            break;
            case 'time':
                $out = $before . $out . $between . $this->dateTime(
                    $fieldName, null, $timeFormat, $selected, $options, $empty
                );
            break;
            case 'date':
                $out = $before . $out . $between . $this->dateTime(
                    $fieldName, $dateFormat, null, $selected, $options, $empty
                );
            break;
            case 'datetime':
                $out = $before . $out . $between . $this->dateTime(
                    $fieldName, $dateFormat, $timeFormat, $selected, $options, $empty
                );
            break;
            case 'textarea':
                $out = $before . $out . $between . $this->textarea($fieldName, $options + array('cols' => 30, 'rows' => 6));
            break;
            default:
                $out = $before . $out . $between . $this->defaultInput($type, $fieldName, $options);
            break;
        }

        if ($type != 'hidden') {
            $out .= $after;
            if ($error !== false) {
                $errMsg = $this->error($fieldName, $error);
                if ($errMsg) {
                    $out .= $errMsg;
                    $divOptions = $this->addClass($divOptions, 'error');
                }
            }
        }
        if (isset($divOptions) && isset($divOptions['tag'])) {
            $tag = $divOptions['tag'];
            unset($divOptions['tag']);
            $out = $this->Html->tag($tag, $out, $divOptions);
        }
        return $out;
    }

    /**
    * Creates a default input widget, whose type is determined by $options['type'].
    *
    * @param string $fieldName Name of a field, in the form "Modelname.fieldname"
    * @param array $options Array of HTML attributes.
    * @return string A generated HTML input element
    * @access public
    */
    function defaultInput($type, $fieldName, $options = array()) {
            $options = $this->_initInputField($fieldName, array_merge(
                    array('type' => $type), $options
            ));
            return sprintf(
                    $this->Html->tags['input'],
                    $options['name'],
                    $this->_parseAttributes($options, array('name'), null, ' ')
            );
    }
}    
?>

Unlike Lennaert, I chose to extend the regular form helper by creating my own helper class instead of adding the necessary code to Cake’s own form helper. Now I can get good HTML5 form inputs by adding the Html5Form helper to my controller and then calling the following code in my view:

echo $html5Form->input('email',
    array(
        'autofocus' => 'autofocus',
        'placeholder' => 'email@example.com',
        'type' => 'email',
        'label' => __('Email address', true),
        'required' => 'required',
        'div' => 'required'
    )
);
echo $html5Form->input('phone',
    array(
        'placeholder' => '801-867-5309',
        'type' => 'tel',
        'label' => __('Phone', true),
        'required' => 'required',
        'div' => 'required'
    )
);
echo $html5Form->input('phone',
    array(
        'placeholder' => 'http://www.curtisgibby.com',
        'type' => 'url',
        'label' => __('Web site', true),
        'required' => 'required',
        'div' => 'required'
    )
);

That results in the following HTML:

<div>
    <label for="ContactEmail">Email address</label>
    <input name="data[Contact][email]" type="email" autofocus="autofocus" placeholder="email@example.com" required="required" value="" id="ContactEmail" />
</div>
<div>
    <label for="ContactPhone">Phone</label>
    <input name="data[Contact][phone]" type="tel" placeholder="801-867-5309" required="required" value="" id="ContactPhone" />
</div>
<div>
    <label for="ContactPhone">Web site</label>
    <input name="data[Contact][phone]" type="url" placeholder="http://www.curtisgibby.com" required="required" value="" id="ContactPhone" />
</div>

(There doesn’t seem to be an easy way to output HTML5′s standalone attributes as simply autofocus or required rather than the more verbose XHTML-ish autofocus = ‘autofocus’ or required = ‘true’ — without hacking the CakePHP base helper class. I’m okay with this slightly lengthier version for now though.)

If you find this code useful, let me know in the comments.

By the time the May issue came in the mail, I was annoyed enough that I started ripping the all-ad pages out of the magazine and complaining about it on Facebook: “Curtis Gibby just ripped out 10 of the first 16 pages in my new WIRED magazine because they were useless ads on both sides. Who says print journalism is dying?”  A couple of people took notice of my post, and I thought it would be interesting to expand on the subject when the June issue rolled around.

And now it’s time for a breakdown…

The magazine in its wrapper, before I started ripping it apart

It came in a little plastic bag and had a subscription card for the New Yorker behind it.

The back cover, immediately after opening the wrapper

I immediately noticed that both sides of the back cover were actually ads. I had decided to tear out any sheet that was advertising on both sides, but I didn’t want to destroy the physical integrity of the magazine by ripping off the cover.  Curse you, Conde Nast editors!

The back cover - an ad

The inside back cover - another ad

I started by going through the whole magazine from the front cover, and counting every page as either editorial content or an ad.  I gave the publishers the benefit of the doubt, calling anything that actually had to do with the magazine itself “content,” regardless of whether it was a boring index or a photo illustration without any actual information.  (As long as it wasn’t actively trying to get me to purchase a Best Buy TV, I called it good.)

The inside front cover and first page - both ads.

The first several pages were not promising — after the front cover, there were five ad pages in a row.  In fact, I was surprised to find out that most of the first half of the magazine had an ad on every other page.  It wasn’t until I got to the actual articles section near the back that I got several pages in a row of content without ads.

One page had a vertical ad that took up a column about a third of the page size.

The single split page with both editorial and ad

I tore out twenty sheets (ones that had ads on both sides) and collected four silly subscription cards.

The twenty ripped-out pages

The complete magazine after the breakdown

tl;dr

In the end, I found that the magazine was 53.17% editorial content — 94.64 pages were editorial versus 83.36 pages of ads.

I’ve posted a spreadsheet listing every page at Google Docs.  The spreadsheet also lists where I found the insert cards and specifies the cumulative percentage of editorial content.

Just when I got used to my new tab colors described in my previous post, Firefox 4 was released and broke what I’d done.  I could still see a teeny difference between my green, yellow, and red tabs — a 2-pixel strip at the top of each of them.  But most of the tab was the default chrome — nice-looking, but not what I wanted.

So I started looking for a solution that would let me change the whole tab’s color in FF4, not just the top of the tab.  I downloaded Tab Mix Plus, which did work in Firefox 4, and reverse-engineered the CSS that it added to the page.  I found that it was adding a background-image to the tab’s CSS, like this:

background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), -moz-linear-gradient(#a6dfa6,#8dd68d) !important;

I added that to the relevant section of my userChrome.css, restarted Firefox, and presto! My tab was colored the way that it should be.

Then I realized that FF4′s chrome had inactive and hover states that were much more pronounced than before, much darker than an active tab.  And unlike my previous solution, Firefox didn’t automatically convert this into those hover and active states.

So I had to go back and add plain old CSS :hover and [selected="true"] rules to each of my colors, making the inactive tab the darkest, the hover, slightly lighter, and the active the lightest.  This is what I ended up with:

/* Localhost colors */
tab[image*="-dev.net"]
{
 -moz-appearance: none;
 background-color:#d8f1d8 !important; /* what we had before -- the tiny little strip at the top */
 background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), /* the line on the bottom */
 -moz-linear-gradient(#a6dfa6,#8dd68d) !important; /* the main color we're adding */
}

/* Localhost hover colors */
tab[image*="-dev.net"]:hover
{
 background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px),
 -moz-linear-gradient(#bfe8bf,#a6dfa6) !important;
}

/*  Localhost active colors */
tab[image*="-dev.net"][selected="true"]
{
 background-image: -moz-linear-gradient(#d8f1d8,#bfe8bf) !important; /* no line on the bottom here, since it's the active one */
}

(Of course, repeated for each of my color groups.)

This is what the “live” red group looks like:

But I’ve never really gotten the NMT to play well with my audio files — it doesn’t handle standard playlist formats like .pls or .m3u, so you’re stuck playing one song at a time unless you can figure out its own insane .jsp playlist format.

Most of the music jukebox programs that I found for the NMT seemed needlessly complicated, creating dozens of files (playlists, album cover images, html and XML) and forcing you to put your MP3s into a certain folder structure.  I didn’t need to be able to pick and choose any song from my extensive collection.  While my MP3s are generally pretty well-tagged, I do have dozens of files where I don’t know the album name, and that would mess up most of these playlist generators.

All I wanted was a way to quickly and easily get some music going on my nice home theater through my Popcorn Hour, preferably with a “shuffle” option — start it up and let it run.

A couple of weeks ago, I was getting desperate, so I tried the Music Jukebox program that so many people recommended on the NMT forum.  I gave it a subset of my music and turned it loose to create its myriad files.  Its output turned out as I expected — an index page, plus a page for each album, with playlists for each song and a “play all” playlist.  But I was interested in the “shuffle” option at the top of the page.  It took the regular album playlist .jsp file and fed it to a shuffle.php script running on the MyiHome server on the NMT.  “Ah,” I thought. “I can reverse-engineer this bad boy.”

I dove into the PHP code and found that it was reading in the playlist file, then putting each line (which corresponded to an individual song) into an array, shuffling that array, and echoing the whole thing back out to the server as the new “playlist.”  I figured I could do the same thing with PHP’s glob function to find all of my MP3 files, shuffle them, and output a line for each of them back to the NMT.  That’s what this first simple script does (you may have to update the specific paths to match your folder scheme):

// get all of the MP3s in my "Music" folder's subfolders
$glob_files = glob("../Music/*/*.mp3");

// randomize
shuffle($glob_files);

// output in a playlist format that the NMT understands
foreach ($glob_files as $filename) {
    echo "$filename|0|0|file:///opt/sybhttpd/localhost.drives/HARD_DISK/Music/$filename|
";
}

It was super simple, but it worked great.  I was listening to a random playlist of every single MP3 on my Popcorn Hour’s hard drive, with the album art and meta-data that the NMT’s default music player could read from the ID3 tags in my files.  (I still wish that the player had support for showing the lyrics of the currently-playing song, but that’s another quibble.)

Next, I wanted to recreate some of the smart-playlist functionality that you get with iTunes or Winamp or Songbird.  There are certain artists in my music library whose songs my wife doesn’t enjoy listening to, and on Sundays I only want to hear LDS and classical music.  So I came up with the idea of specific modes that would filter the songs according to an artist whitelist or blacklist:

$glob_files = glob("../Music/*/*.mp3");
$mode = ( $_GET['mode'] ? $_GET['mode'] : "normal");

$artistWhitelist = null;
$artistBlacklist = null;

switch ($mode) {
	case "sarah":
		$artistBlacklist = array_map('strtolower', array(
			'Bush',
			[ ... ],
			'Weird Al Yankovic',
		));
		break;
	case "sunday":
		$artistWhitelist = array_map('strtolower', array(
			'Alan Silvestri',
			[ ... ],
			'Vivaldi',
		));
		break;
	default:
		break;
}
shuffle($glob_files);

foreach ($glob_files as $filepath) {

	// set the output as normal
	$output = "$filepath|0|0|file:///opt/sybhttpd/localhost.drives/HARD_DISK/Music/$filepath|
";
	$filename = basename($filepath, 'mp3');
	// my MP3 files are named like "Artist - Track.mp3"
	$splodedFilename = explode(' - ', $filename);
	$artist = strtolower($splodedFilename[0]);
	if (
		(!empty($artistWhitelist) && !in_array($artist, $artistWhitelist)) || // if there's a whitelist and the artist isn't in that array, blank out the output for this file
		(!empty($artistBlacklist) && in_array($artist, $artistBlacklist)) // if there's a blaclist and the artist is in that array, blank out the output for this file
	) {
		$output = "";
	}
    echo $output;
}

That also worked well.  It does take a bit more time to start playing the first song than a normal playlist (usually about 5 – 10 seconds), but given that it’s chewing through more than 5,000 tracks, I’m okay with a few seconds of delay.

The code that I use in my NMT index file I borrowed from the generated HTML from Music Menu:

Music
Sunday Music
Sarah-Safe Music

The next step would be to use one of the MP3 functions or libraries to actually read the ID3 tag from the MP3 file, to filter by genre and remove all of the Christmas songs, for example.  But I’m guessing that would take quite a bit longer to generate the playlist, and for now, I’m happy to either skip or listen to the odd holiday song that occasionally pops up.

In general, I now enjoy listening to my music through the Popcorn Hour on my big TV and nice stereo speakers.  Now if only I could make it scrobble my tracks to Last.fm…

Yes, that’s three different fonts for three different headers… on the same page.

The first is an H2 of class “g-m0 g-m dsp” that just inherits the body’s “Arial,Helvetica,sans-serif” font-family.

The second is another H2, this one with class “h2Titles”.  It gets font-family “Trebuchet” — which apparently I don’t have installed on my machine, because I see the crappy default Times New Roman.  (Yes, they specified exactly one font — incorrectly.  Apparently they haven’t heard of font stacks.)

The third H2 is probably what they wanted for all of these.  It has class “h2Title” (as opposed to “h2Titles” above) and gets the correct font “Trebuchet MS”.

What a mess.  This is one of the biggest e-commerce companies in the world and they can’t get their CSS right.  (This isn’t exactly bleeding-edge web technology, guys — the font-family part of the CSS spec came out 14 years ago.)

Here’s how they could have prevented this train wreck of a page.  First, set up a CSS reset that hits every single H2 (and anything else that you may want to look good) with a solid definition.  Next, add some progressive enhancement to certain H2s by adding a class.  Third, check that the specified font rules are actually doing something to the intended target (as in the number 2 “Trebuchet” case above).  Finally, at the very least, give your page a quick once-over to make sure that everything looks as you intended.

At least they all got the same color — #5D5D5D looks pretty nice.

Anyway, the point here is that I wanted to have my Firefox tabs for different environments show up as different colors in my browser.  As a web developer, I spend a lot of time in a localhost development server, on a staging dev server, and on a live web site.  I may have ten tabs open, each of which could be from any of my environments, and each of which may look identical until you click into it to see the actual URL.  So I spent a lot of time clicking back and forth between them trying to find the other page I’d been working on.  I wanted a quick visual representation to show which of those environments I was in.

If you’ve never heard of userChrome.css, you can use it to change a lot of stuff that you don’t like about the “chrome” (or the look of the browser window itself — completely unrelated to the browser Google Chrome).  You add some CSS to the file (which in Windows is found in %appdata%/Mozilla/Firefox/Profiles/<profile-id>/chrome ), then save it and restart Firefox, and voilà, some change has been made to your chrome.

I found a Stylish forum that asked about my very question: can you customize the color or other style of the tab based on the domain of the URL?  Fortunately, the answer was yes.  What you have to do is write a CSS selector based on the favicon in the tab window.  (So if a site doesn’t have a favicon, this hack won’t work.  Fortunately, all of the ones I wanted to style do have a favicon, and most other sites on the web do too.)  The basic CSS selector looks like this:

tab[image*="example.com"] {background:red !important;}

That means, “For every tab that has a favicon whose url includes the text ‘example.com’, give it a background-color of red.”  In my case, I wanted my localhost to show light green, the staging server to show light yellow, and the live server to show light red.  This is the css that I came up with:

tab[image*="localhost"] {background-color:#CBEDCB !important;} /* light green */
tab[image*="dev.mycompany.com"] {background-color:#EDEDCB !important;} /* light yellow */
tab[image*="live.mycompany.com"] {background-color:#EDCBCE !important;} /* light red */

This worked perfectly for me — now I can easily distinguish between all of my development environments.  Firefox even makes the active tab a brighter version of the same background color (or is it, “Firefox dims the non-active tabs”?  That seems more likely.), so you don’t have to specify a style to tell which tab is the active one.

I’d be interested to know if there’s a way to accomplish the same thing in other major browsers, but this is how I did it in Firefox.

We did a lot of fun and fantastic things this year and, of course, added a baby to the mix.  Take a look at our 2010 “Christmas letter” — a personalized memory game that I made on Match The Memory.  Have fun playing it!

When we got to the game called “Tell a story” (“How do you play it?” Sarah wondered aloud, and we laughed), Audrey told one about a queen and king who had a 5-year-old named Audrey and a baby named Claire and a 2-year-old named Nathan.  They lived in a royal palace and had lots of servants. One day they took a walk and found some more servants who didn’t have anywhere to live, so they hired them.  The end.

Sarah told an engaging story about a little dragon who wanted to breathe fire like his big brother, but no matter how hard he huffed and puffed, he just got a little bit of smoke.  Audrey was INTO this story, so much so that she started coming up with solutions for the little dragon’s problem.  Sarah whispered to me, “Who’s telling this story?”

When it was my turn, I came up with a highly inventive tale that went something like this: “Once there was a little boy named Randy who loved to play with his cowboy doll named Sheriff Moody.  [Moody rhymes with "goody" and "hoodie" in this story.]  Randy had a lot of toys that he liked to play with, but Sheriff Moody was his favorite.”

“Then Randy had a birthday, and all the toys were afraid that he would get a toy that was cooler than they were and he wouldn’t play with them anymore.  Randy’s mom gave him a spaceman toy called… Muzz Gightlear.  Randy thought Muzz Gightlear was really cool.”

At this point, Nathan interjected, “An’ it was Buzz!”  We asked Audrey if she knew that I was really talking about Andy and Woody and Buzz Lightyear and she said no, but Nathan recognized my thinly veiled cribbing of the plot of Disney-Pixar’s beloved 1995 hit, Toy Story.  Pretty good for a kid who’s not yet three.

When Sarah was about 20 weeks along with this baby, she began to lobby for us to not find out what the gender was until the baby was actually born.  After all, she figured, we could be surprised by learning if it was a boy or a girl at 20 weeks, or at 40 weeks.  Also, we already had one of each, so she wasn’t especially pining to have either a girl or a boy, and we already had the clothing for whichever kind of baby came out.  She figured that if she didn’t know, she’d also end up spending less money on clothes and stuff.  I supported her decision, even though I personally would have rather found out.  So we never got an ultrasound.

But as the weeks wore on, we began to regret our decision to not find out.  We had a great name picked out for a girl (Claire Rebecca Gibby), but we struggled with coming up with a good boy name.  We considered several — Seth, Henry, Thomas, Joseph — and spent hours trying to find one that had all the right qualities.  For me, that meant it couldn’t be too popular, but it still had to be common and recognizable;  Sarah wanted something distinctive, with character.  But we never settled on anything, even as Sarah’s due date drew closer.  We realized that if we’d gotten an ultrasound like most people do, we would have known whether it was a boy or a girl, and if we even had to worry about thinking up a boy name.

Baby Time

Our other two kids were early — 12 days for Audrey, and 10 days for Nathan — so we weren’t expecting Sarah to even make it to 39 weeks.  But as 39 and then 40 weeks came and went, Sarah started getting more miserable.  “I want my body back!” she’d exclaim.  Every time Sarah had a few good contractions, we’d hope that this was it… but then she’d get up and do something, and the contractions would peter out.  “I’m going to be pregnant forever,” she moaned.

On Monday, September 13 (three days after her due date), Sarah woke up with the same kind of contractions, but they were pretty regular.  I went to work, confident in the knowledge that I could get home within 5 minutes of when she called me.  Sarah got her doctor to come check her by mid-morning, and she was at a 4-5 cm dilation and 90% effaced — it was going to happen sometime today!  He went back to work (probably to cancel a bunch of other patients!) but promised that he’d be back when she needed him.  Sarah called our moms and her sisters to come down to our house, and got me to come home from work at lunch time.

By the time I got home, her contractions were almost a minute long and less than four minutes apart.  She really was in good labor.  Judy took Audrey to school, and my mom took Nathan to the store with her to keep him out of our hair.  Dr. Wright came back and we got the pool set up in our bathroom by about 1:30 p.m.

I got my swimsuit on and jumped in the tub with Sarah, and she got to work having good contractions.  I was against the back wall, and she was leaning back on me for support.  I rubbed her back and tummy, poured water on her belly, whispered encouraging words.  Being in the water helped her manage the pain.  A midwife and a midwife-in-training showed up to lend a hand to Dr. Wright, and Alaura started snapping pictures.  Once between contractions, my mom brought Nathan up to see what was going on, and he was happy and shy.

When the doctor checked her again, she was just at 5-6 cm dilated and fully effaced.  She was afraid that it would take a long time to be fully dilated, but soon Sarah’s “vocalizations” got louder and more intense and she felt the urge to push — it was really baby time.  At one point in the middle of a contraction, she cried out, “I’m so excited to have this baby!”  The midwives had never heard someone so enthusiastic and happy to be giving birth.

Eventually, Sarah could reach down and feel the baby’s head.  It only took her half an hour to get from that 5-6 to 10 centimeters.  When she actually pushed the baby out, the doctor grabbed her and placed her onto Sarah’s chest. We covered the baby with towels and got them wet to keep her warm.  We didn’t even check to see if she was a boy or a girl for a few minutes; we just looked and looked at her head and fingers, so happy that she was finally with us.

When the doctor peeked under the towel and announced that it was a girl, we were very relieved.  And we immediately said her name, “Claire.”

Sarah’s sister Zilpha missed the birth by five minutes because she hadn’t gotten the first messages that we’d left for her, but Judy and Alaura were both there to witness it, and Mom and Nathan came up to see the baby while we were still in the tub.  Audrey got home from school an hour after Claire was born, and she was so happy that we’d had a little sister for her instead of a brother.

Conclusions

Claire ended up being 7 pounds, 14 ounces and 20 inches long, which surprised us — we thought she’d be bigger because she had longer to cook in the womb.  But she’s perfectly healthy and we’re happy to have her with us.

This was our first home birth, and we liked how it all turned out.  We knew where everything was and could easily grab anything we needed during the labor and delivery.  We didn’t have to rush to the hospital, we didn’t have to fill out forms before we could have a baby, we didn’t have to listen to any security lectures about not letting strangers walk off with our child, and we didn’t have to hear any other newborns crying all night.  Dr. Wright and his crew took care of cleaning up the tub and the towels and everything in the bathroom.  We just quickly settled back into life at home with our three kids.

The one gripe I’ve had with Stylish is that it doesn’t automatically let you sync your styles across computers.  I’d make a change to a site’s style on my work computer, then get frustrated that I had to make the same change on my home machine.  I keep hoping that Firefox Sync (formerly Weave) will add support for syncing the file where Stylish stores its content (a sqlite file called, creatively enough, stylish.sqlite), but it hasn’t happened yet.

But then I came up with the idea of userstyle syncing via Dropbox — it’s a great service and I already had the client installed on all of the computers that I wanted to sync, so I just had to figure out how to do it.  This blog entry by Rob Wilkerson talked about how to sync all of your Firefox preferences and bookmarks; I already had that part covered with Firefox Sync, but it was the inspiration for me to get off my butt and make my Stylish dreams come true.

At first I thought I’d have to copy my sqlite file into the Dropbox, then make symlinks in my Firefox folder to that file, like Rob did.  They’re called Junctions in Windows parlance, and they’re a little more tricky to work with than symlinks in *nix.  (But they are natively supported in Windows Vista and up, which two out of the three machines I’d be syncing were running.  I’d have to download a special program to get it working in XP on my old laptop.)

But when I poked around a bit in about:config, I found this option: extensions.stylish.dbFile.  It was set to the full file path of the stylish.sqlite file in my Firefox profile directory.

I tried copying the file into my Dropbox, then setting the value of the dbFile option to that file path instead.  (“C:\Users\Curtis\Documents\My Dropbox\stylish.sqlite” in my case.)  When I restarted Firefox, my styles were working right, and I was able to make a change in a userstyle and see Dropbox re-upload it to the cloud.

So then I just had to go into about:config on all of the other client machines and change the extensions.stylish.dbFile option to the path of the Dropbox stylish.sqlite file on that machine.  It works perfectly! I can add a bit of CSS to Stylish on any one of the computers and it is automatically reflected in the other copies of Firefox on the other computers.

This is a brute-force method: you don’t have the option of automatically merging the styles from the various client computers into the unified stylish.sqlite like you would with Firefox Sync, but my userstyles were pretty close across the computers anyway, so it wasn’t a big deal.  Hooray for Firefox, for Stylish, and for Dropbox!  Great software all around, and like peanut butter and chocolate, they go even better together!