The Problem

I recently upgraded to Snow Leopard, and as a result, upgraded to PHP 5.3 on my local development machine. I have been really impressed with the new features of 5.3, and I am happy it came packed with my OS X install. However, I noticed that a few of my commands had stopped functioning correctly.

I hadn’t had a chance to investigate the problem, but when I sat down to write a new command the other day, I figured it out. The $_ENV variable is an empty array on a default Snow Leopard install. When running PHP from the command line, this global variable holds all of the data about the environment PHP is running in. It’s also how TextMate injects it’s variables into the PHP script.

The Solution

Fortunately, it’s a very easy problem to solve.

1. Open your php.ini file

mate /etc/php.ini

2. Find the directive for variables_order.

The ini file describes this setting:

This directive determines which super global arrays are registered when PHP starts up. [...] G,P,C,E & S are abbreviations for the following respective super globals: GET, POST, COOKIE, ENV and SERVER.

You can read more about the variables_order directive in the php manual

Although the ini claims that the default value is EGPCS, my default ini has GPCS

3. Add an “E” to the beginning of the directive.

variables_order = "EGPCS"

Save and close the file. Your PHP Textmate commands and any other scripts running from the command line should now have the properly populated $_ENV values.

Additional Resources on using PHP for TextMate Commands

• David Walsh Blog Create Commands in TextMate Using PHP
• Stuart Colville Using PHP CLI for TextMate commands
• Ciarán Walsh’s Blog TextMate Tip – Using PHP for Commands

<?php
$average = 3.43;
$round_to = 0.5; // you can change this to any increment you like
$rounded = round($average / $round_to) * $round_to;

The variable “$rounded” is now set to 3.5.

1. Download Pngcrush
2. Extract the Source Code
3. Compile Pngcrush
4. Using Pngcrush

Download Pngcrush

Download Pngcrush (Direct Download Link)

I save source files into ~/src/

Extract the Source Code

Open terminal and run these commands to extract the source code.

	cd ~/src
	tar -xvzf pngcrush-1.7.2.tar.gz
	cd pngcrush-1.7.2

Compile Pngcrush

While in the pngcrush-1.7.2 folder, run these commands to compile it.

	make
	sudo mv pngcrush /usr/local/bin/

The make command compiles the code. I move the executable to /usr/local/bin/ in as suggested by Dan Benjamin. It does not matter where you move the compiled executable, but I recommend that you put it in a place within your environment’s path.

Using Pngcrush

To crush a png file, run this command on the shell.

	pngcrush -reduce -brute source.png destination.png

Clicking “How To…” would take me directly to this portion of the page (http://docs.jquery.com/UI/Tabs#How_to…) instead of the top of the page (http://docs.jquery.com/UI/Tabs). I think that I will enjoy this feature quite a bit, and since most users do not scroll, this should get some dusty content a little bit of fresh attention.

How I imagine It Works

I imagine that google installed an application on all of the computers in their daycare centers. The app rewards the toddlers with ice cream and candy for clicking all the “big words” on a page. All the while they track the clicks using a super-secret internal version of analytics, using the data to serve content to us with a better experience. Next time you see a first grader, let them know you appreciate it.

How it Actually Works

According to the offical google webmaster’s blog, google is simply scanning the page for anchor tags in section headings. Sometimes things really are as simple as they seem. The good news is, it should be pretty easy to clean up your site and increase your chances of getting these links in your search results. In fact, you may already be there… or at least close.

How to Increase the Chance Your Google Search Results Snippets Will Include Content Links

Break up the content of your page into sections, giving each section a heading tag (h2 or h3, etc). Inside the sub-header tags, add an anchor.

<h2><a name="how-i-imagine-it-works" />How I imagine It Works</h2>

<h2><a name="how-it-actually-works" />How It Actually Works</h2>

You should also link to these anchors somewhere on the page, in a table of contents fashion.

As with anything google, nothing is a guarantee. Fortunately, this is something we should all probably be doing anyway. It makes it much more convenient to link to specific content when you want to share something. For example, the smashing magazine article I linked to above (“most users do not scroll”) has no anchor tags, and if you click it, you’ll have to scroll down and find the section that I was referencing.

A PHP Function to Automatically Generate Anchors Within Your Subheads

/**
 * generate a subhead with an anchor tag
 *
 *  Usage:
 *    echo subhead("How it Actually Works");
 *  Prints:
 *    <h2 id="how-it-actually-works">How it Actually Works</h2>
 *
 * @param string $name
 * @return string
 */
function subhead($name) {
	$anchor_name = strtolower(str_replace(' ', '-', $name));
	return "<h2 id=\"$anchor_name\">$name</h2>";
}

Cover Slider Layout

One of the problems that I ran in to involved the loss of quality from Internet Explorer 6 and 7 when the browser renders the image at a smaller dimension than the file.

An image scaled in internet explorer.

This project was for a site that still has a substantial amount of visitors using IE6 (and IE7’s scaling abilities are not much better than 6). So I needed to come up with a way to correct the image scaling. A short google later, I found Ethan Marcotte’s blog post Fluid Images [via Unstoppable Robot Ninja] and a post on flickr’s developer blog.

It turns out that the Microsoft AlphaImageLoader used to support transparent pngs in IE6 will also cause the browser to use a better engine to render scale.

Here is how I fixed scaled images for IE6:

// apply AlphaImageLoader in IE6 for better image scaling
var broswerVersion=navigator.appVersion;
if(broswerVersion.indexOf('MSIE 6') >= 0) {
    $('.cover_slider .images img').each(function() {
        var imgSrc = $(this).attr('src');
        this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"   imgSrc   "', sizingMethod='scale')";
        this.src = '/images/misc/spacer.gif';
    });
}

You use the src from the image in the AlphaImageLoader call, and then replace the src with a transparent “spacer” gif. It’s not perfect, but it is definitely much better.

IE7 is even easier. It can be fixed with a simple MS specific CSS class.

.cover_slider img {    -ms-interpolation-mode:bicubic;}

Google provides an easy to use tool for building a “customized search engine” that only searches the sites you specify. Google Custom Search may not receive a lot of hype around the internet, but it is a very simple, yet powerful resource.

To get started, visit http://www.google.com/cse and click “Create a Custom Search Engine.” The form is pretty self-explanitory — just enter the list of sites that you want to search.

Here is the list I created:

snipplr.com/*
*.smipple.net/*
tipster.carsonified.com/*
snipt.net/*
snippets.dzone.com/*
*.koders.com/*
codesnippets.joyent.com/*
*.bytemycode.com/
refactormycode.com/*
*.naslu.com/*
codecodex.com/wiki/*
*.jonasjohn.de/snippets/*
github.com/*
*.codase.com/*
*.google.com/codesearch/*
*.snipiti.com/*
codekeep.net/*
snippetsmania.com/*
devsnippets.com/*
*.refactory.org/*
*.code-sucks.com/code/*
*.phpsnips.com/*
*.phpclasses.org/*
wiki.greasespot.net/Code_snippets/*
*.stackoverflow.com/*

Once created, there are several more advanced options — annotations, styling, custom logos, etc.

If you want to see what the result looks like, you can see the Code Snippet search engine I created, or jump straight into creating your own and let me know what you come up with.

1. autoResize

David makes the case that all textareas should be resizable, and I would have to agree. When text expands past the boundries of a textarea, autoResize will modify the size of the textarea, allowing the user to see all of the content in the box.

2. Custom Checkboxes with jQuery

Though less of a requirement, better looking checkboxes can make a big impact on user experience. The following tutorial shows you how to implement customized checkboxes (and radio controls).

Customize HTML control with jQuery (Checkbox + Radio)

3. FancyBox

Lightbox components are a slick and convenient addition to many sites. You can use the jQuery UI dialog features to create a lightbox, but FancyBox is a cleaner solution designed specifically for use as a lightbox.

jQuery FancyBox homepage

4. asmSelect

A jQuery alternative to David’s quickboxes was not easily found. Instead, I offer you a plugin that improves upon the “select multiple” control of the browser.

jQuery asmSelect homepage

5. ScrollTo

This plugin allows you to cleanly scroll to a location on the page.

jQuery ScrollTo homepage

6. qTip

qTip is the full-featured tooltip solution. It includes just about anything you could ever want to do with a tooltip, including media/complex content inside the tooltip, arrows, positioning, and more.

jQuery qTip homepage

7. Zebra Tables

I am sure that there is an excellent plugin out there that will do this for you, but it seems just as easy to do it yourself.

Setup your styles:

table.zebra tr.odd { background-color: #CCCCCC;}table.zebra tr.hover { background-color: #99FF99;}table.zebra tr.selected { background-color: #9999FF;}

after document.ready():

$('table.zebra') // add a class of 'odd' to all the odd rows .find('tr:odd').addClass('odd').end() // add a class of 'even' to all the even rows .find('tr:even').addClass('even').end() .find('tr') // when a row is clicked, give it a class of 'selected' .click(function() { $(this).toggleClass('selected'); }) // when a row is hovered over, give it a class of 'hover' .hover( // over function() { $(this).addClass('hover'); }, // mouse-out function() { $(this).removeClass('hover'); } )        .end();

jQuery Zebra Striping Demo

Thanks to David Walsh for the great post and set of tools.

Fever allows you to set feeds as “sparks.” A spark is a feed that you do not actually read every post for, but it seeds the list of “Hot” posts. Any hyperlinks within a spark gets tracked and added to the links in your normal subscriptions. The pages that are linked to the most bubble up to the top of the “Hot” list. This means that all the misc feeds that would occasionally have great posts have a proper place now. I don’t have to filter through posts on my own, they naturally make their way to the top. You can also do some fun stuff like subscribing to the “popular” feed for delicious keywords of your choosing, and mark them as sparks to catch what people are bookmarking as well as blogging about.

The interface is really slick. It hides item counts by default (google reader was always 1000+ anyway). The iPhone interface works really well (better than google reader, which occasionally freezes up and resets).

My only complaint is that there is no “Share” feature. You can save items, but you can’t generate a feed of items to share with friends. As a solution, I decided to start using my Tumblr account (http://michaelfox.tumblr.com) for sharing items. All of my activity is on FriendFeed (http://friendfeed.com/michaelfox), but I feel like that is too much… I want a way to share only items that I think others might find interesting.

If you are interested in what I find, you can subscribe to my tumblr mini-blog at http://michaelfox.tumblr.com/rss

The first thing to do is download Selenium from http://seleniumhq.org/download/. All that you will need for our purposes is the “IDE” — although I would encourage you to browse around http://seleniumhq.org/ if you are interested in using Selenium as a testing tool as well.

Download Selenium IDE

Suppose you are working on an account sign-up page but your form validation code is tripping up somewhere. Normally, you might tweak your code and try re-posting your form. Then you would make additional changes and continue this process over and over. Selenium will remove the menial portion of this process and allow you to focus on troubleshooting.

Load your page that contains the form and go to Tools >> Selenium IDE in Firefox. You might notice that the record button is already active in the widget that loads. Fill out your form as you normally would, including submitting it — and then stop the recording in Selenium.

Go ahead and make your tweaks to your form processing, but when it is time to see if your changes were effective, don’t bother filling out the form — just click the “Play entire test suite” button in Selenium. It will load the correct page (if you weren’t already there) fill out the form exactly as you had before and submit it.

The really nice thing here is that once you have Selenium installed, you are not taking any additional steps to set up this tool, you would have to submit the form at least once manually anyway. If you decide that you want to alter some of the data before submitting the form, simply click the last command in the window and hit delete. Now your form will fill up without submitting — you can change the appropriate fields and click submit yourself. Or create a whole new test case so that you can come back to this one later.

Tests can be saved, if you think they will serve a purpose later — I am hoping to use this tool to insure that changes I am making do not break previous functionality.