Antelope Love Fan

While there are plenty of more comprehensive lists out there, there are a few tools I use for web development on a daily basis that are worth talking about.

Firebug

The number one is obviously Firebug. Doing web development without is like developing with a rock on an etch-a-sketch.

Some favorite features

• Easily print messages to the Firebug console.
• View (and even modify) HTML and CSS in a nice structured way.
• View network activity and page speed using the Net panel. You can get more page speed information using YSlow or PageSpeed.

FirePHP

FirePHP is a plugin for Firebug that lets you log messages to the Firebug console using server-side PHP calls. Fantastic for simple debugging. SixRevisions has an excellent guide on setting it up.

Web Developer tools

This is another must-have with too many features to list. Some of my favorites are:

• Easily clear domain, url, & session cookies for the current page.
• Turn styles on and off.
• Automatically populate HTML form fields.
• Lots of information about how elements are rendering on the page.

Html Validator

A handy Firefox add-on that automatically validates the HTML of a page. It also improves Firefox’s “View Source” interface.

Screen Calipers

Nice, stand-alone desktop app for measuring pixel distance.

ColorPic

Great desktop app from Iconico for picking colors from the screen. Also handy as a general purpose screen-zoom tool.

I’m sure people out there have their own favorite tools and I’d love to hear about them.

I’ve been building a site at work that uses WordPress for the back-end. Since the site is for a very specific purpose, most of the heavy lifting happens through a heavily customized theme which means I’m getting knee deep in WordPress template tags (and, most likely, abusing them in all sorts of horrific ways).

Most tasks involving template tags are pretty straightforward but there was one thing that was a bit tricky for me to figure out.

Getting the caption of an image attached to a post

This seemed easy on the surface but ended up taking some research to figure out.

Most people who’ve used WordPress have used the improved interface for inserting an image (or gallery) into a post. The interesting thing is that those image attachments are actually stored as posts. Each image attachment has an entry in the wp_posts table with the parent_post field set to the ID of the containing post.

I may have missed it but I couldn’t find a decent explanation of the above anywhere. But the nice thing is that, once you have a handle to the containing post, you can use the get_posts() template tag to get at the image attachments.

Now, in my case, I have several posts in a category called “Pictures”. Each post contains a gallery shortcode item which has a number of image attachments.

In this example, we’re getting a single, random post from the “Pictures” category (category ID 9).

                     $picPosts = get_posts('numberposts=1&orderby=rand&category=9');
                     $picPost = $picPosts[0];

This gives us a post object ($picPost) which we can use to get at the image attachments. The following code will get a single, random image attachment (remember, that attachment is still just a post!) that has $picPost as its parent.

                    $args = array(
                                'post_type'=> 'attachment',
                                'numberposts'=> 1,
                                'post_status'=> null,
                                'post_parent'=> $picPost->ID,
                                'orderby'=> 'rand'
                                );
                    $attachments = get_posts($args);
                    $attachment = $attachments[0];

Once $attachment is set, we have an object that will give us the image caption (stored in $attachment->post_excerpt) or the image description ($attachment->post_content).

This strategy lets me have a gallery section of the site that links nicely together (using previous_post_link and next_post_link on each page that has a post using the gallery shortcode) and I can easily pull a random image attachment out to display on the front page.

A colleague of mine (Charlie Dillon over at fourthgate.org) recently introduced me to a nice way create tab-like navigation buttons.

A simple example of the finished product looks like this.

Advantages

• Works across all modern browsers (including IE6).
• Link text is nicely centered.
• The link fills up the entire button so you have a big clickable area and you can use a:hover for stying.
• Uses very simple HTML and CSS and it’s easy to style.

Disadvantages

• It uses tables, which is handy because a lot of your sizing/stretching is handled automatically. However it makes it harder to use in a dropdown menu situation. In that case, you’re better using a nested <ul>.
• The markup doesn’t lend itself well to rounded corners.

Here’s the HTML. Nothing shocking there.

           <table cellpadding="0" cellspacing="0" border="0" class="tabs">
                <tr>
                    <td class="tab Selected"><a href="#">Home</a></td>
                    <td class="tab"><a href="#">Store</a></td>
                    <td class="tab"><a href="#">About</a></td>
                    <td class="tab"><a href="#">Contact</a></td>
                    <td class="tab"><a href="#">FAQ</a></td>
                </tr>
            </table>

Now for the CSS

The first thing to do is give the <table> a width and each <td> a height. I’m also centering the table on the page using margin-left & margin-right and defining a class for when a tab is selected.

            .tabs {
                width:  500px;
                margin-left:  auto;
                margin-right:  auto;
            }

            .tabs .tab {
                height:  30px;
                background:  #FFB300;
                text-align:  center;
            }

             .tabs .tab.Selected {
                background:  #FFD573;
            }

Now for the fun part.

            .tabs .tab a {
                display:  block;
                font: normal normal bold 15px/30px Arial, sans-serif;
                color:  #000000;
                text-decoration:  none;
                text-transform:  uppercase;
            }

             .tabs .tab a:hover {
                background:  #FFD573;
            }

There are a couple of interesting things happening here.

We’re setting the <a> tags to display: block; which lets them fill up the entire <td> that contains them.

Now notice the 15px/30px part of the font style. We’re setting the font-size to 15px and the line-height to 30px which is the same height as the <td>. This lets the text of the <a> tag float in the middle of the <td> without using any margin or padding.

That’s all there is too it. Nothing too magical, but a nice effect.