function correctCaptionWidth() {
    // Kills the stupid extra 10 pixels added by WordPress.
    $(".wp-caption").width(function() {
        return jQuery('img', this).width();
    });
    // This allows it to be responsive.
    $(".wp-caption").css('max-width', '100%');

    correctCaptionWidth(); // Calls the function.
}

Lots of folks get steamed over WordPress captions, because they’re designed to be ten pixels wider than the photo they’re placed under. There’s actually a good reason for the extra space, but for some designs it can be a problem. I’ll explain how I got rid of it, but first I’d like to tell you why things are that way in the first place.

HTML elements, by default, expand to the size of their containers. To change this, some kind of width needs to be applied. Images are a little different because they actually have a real width of their own. By default, a photo will be its own regular size. To make a caption, WordPress wraps an image inside an HTML element. The image can be left aligned or whatever, but that caption container is going to run all the way to the end if we don’t do something. For this reason, WordPress looks at the photo and assigns a width to the containing div tag. They chose ten pixels because… well, because they wanted to. It goes well with the default design that comes with WordPress.

But there are problems if your design requires certain kinds of alignment, and especially if your design is responsive. An inline style is extremely specific, so it tends to override anything else you do. Even worse, it’s a set number and therefore refuses to scale down for responsive themes. (I’m assuming that you’re building your own theme here. Pre-built commercial or free themes might have solutions in place already.) The ten pixels really needs to be changed right there at the div, and there are two ways to do it:

1. PHP: You could either place a filter in functions.php or build a small plugin.
2. JavaScript: Add a small function to update the width of the caption container.

I decided to go with JavaScript since I’m a little stronger there, and because jQuery makes it really easy to target things. You’ll notice in the code that my first move is to target all of the WordPress captions on the page, and set their widths to a function. I could have grabbed the image width first, assigned a variable and then jumped up one level to the container before assigning the width, but this is much cleaner. The function takes care of the targeting for us. For each caption, we find out the width of the image it contains, and set the width to that value. Done.

But we’re still in trouble where responsive themes are concerned. We’ve killed the extra 10 pixels, but it’s still a set value. To solve this, an extra line is added to assign a max-width to the div. Since the max-width is inline, it carries the same specificity as the width attribute. We no longer need to worry about the hard number overriding our nice responsive styles.

Finer Points

I could have just tossed these lines of code into the $(document).ready function, but I chose to enclose them within their own function as a matter of policy. Maybe I’ll want to use a function when the browser window changes or put it on a timer or something. Or maybe I want a function to be called more than once, or with different arguments for different situations. For these reasons, I like to keep my code in functions for the most part. And besides, it makes the $(document).ready function easier to read. If a task takes more than a line or two, I tend to put it into a function.

And one last point about JavaScript variables. I used $(“.wp-caption”) twice in the code above. This means that jQuery had to go looking through the DOM twice to find all the elements with that class attached. There’s a pretty good argument for a variable here. I could have written it like this:

var wpCaption = $(".wp-caption");

This way, jQuery will go through the DOM once, and remember the elements that it found. When you should do this is a bit of a judgement call. Once doesn’t justify a variable. Twice may or may not make a difference in performance, depending upon how much jQuery has to look for. Three times, however, and you’re definitely in variable country.

This won’t make much of a difference in lighter sites with jut a bit of JavaScript, but if you have a lot going on then you’ll be glad for the savings in performance. And you’ll be especially glad if you’re messing around with the HTML5 canvas element.

Hopefully this will help you with your design, especially if your theme is responsive. If you have a better idea about how to adjust WordPress captions, please drop in for a comment. I’m always looking for a better mousetrap.

Twenty Eleven

This is the current default theme for WordPress. It has comments in the code for reference, and you can be sure it covers all the bases because it’s built by the WordPress Dev Team. It’s clean, thorough, and it’s even responsive. This makes it a pretty good candidate for child themes.

Building a WordPress theme on your own is a bit of work, so it can be helpful to simply add a few personal touches to an existing theme like this one. In fact, at the time of this writing my own site is a Twenty-Eleven child theme. I changed some styles, tweaked three PHP files and I was done.

HTML5 Boilerplate

This is the first starter theme I used for my own custom themes, and for good reason. It’s the Twenty Ten theme with all the styles pulled out, as well as some of the extra markup. (It’s actually based upon the Starkers theme, which is currently going through some changes.) If you’re trying to stick with the CSS without going too far into the code, this is an excellent theme to use as a starter. You can build a child theme if you like, but I tended to just make my own copy and change it. One big plus is the Boilerplate admin panel, which allows you to add things like jQuery, Modernizr and other neat stuff without digging into the PHP code. You can even link to your own custom JavaScript by checking a little box. If you want to just stick to the CSS, then you’ll be very happy with this theme.

Bones

Bones is a comprehensive starter, and it has the swankiest theme site around. Be sure to look at it in Chrome, so all the features will be at their fullest. There are two editions, but I was drawn to the responsive version. The stylesheets are all set up for you, and they’re well-documented.

The general idea is that you start with some simple styles just for mobile, and then add more features through media queries as you go up in size. It’s a different approach, so it takes a little getting used to.

The author also does a pretty good job of promoting LESS, and he even suggests some parser programs which update the css files as you save the LESS files. (The site itself links to the resulting CSS rather than trying to parse the LESS at runtime.) There are lots of comments in the code to explain what’s going on, and the author is nice enough to place links to extremely useful blog posts from other sites. After looking through this starter theme, I’ve pulled bunches of stuff from it and I’m now committed to using LESS.

HTML5 Reset

I have to admit to some special affection for this one. It’s a nice, simple set of files that don’t need to be retrofitted. It’s really and truly blank. It may not have the cool features that some of the other starters have, but that’s the point. The only features in this thing are the ones you choose to add. These files are also documented and they also reference nifty articles from other authors. The header.php file is nicely built, with starter meta for Dublin Core and a few other things.

There is a downside, however. This theme is for developers. You can’t check a box and activate jQuery. You need to know what you’re doing, and you’ll need to add features on your own.

So there’s my list. I hope you’ve found something in here to pull from, or even just to use. There are lots and lots of groovy things laying around in each of these themes. If you’re a developer, just open them up and pull out the parts you like. And if you’re a designer who just wants to stick to the CSS, then remember all those nice admin settings in the Boilerplate theme.

Pentagon vs. Bowtie

For some reason, HP refuses to clearly mark their ink cartridges properly. The cartridges in your printer are labeled with symbols which do not appear on the packaging. This isn’t a problem for Cyan, Magenta or Yellow, but it causes confusion between Black and Photo Black. One has a pentagon, and the other a little bow tie. But which is which?

This question is asked on many forum threads, and generally receives two kinds of responses:

1. Posts from other people who can’t find the information anywhere.
2. Posts from previously burned people like me who have bought one recently and paid attention when the product was opened.

Short answer: the pentagon is Black, and the bow tie is Photo Black.

Another way to tell is to ignore the symbols entirely. The bow tie is misleading. It draws your attention away from a symbol that is common to the cartridge and packaging. If you look at the photo below, you’ll see a camera symbol. It’s the only symbol that matters. (And in spite of what forum know-it-alls claim, it’s not obvious and this situation tricks lots of people.) The color inks will have dots on the box to match their color, and one of the black inks will have a camera. That’s Photo Black. The plain black dot indicates regular Black.

There's no bow tie anywhere on the box, but notice the camera symbol just above the bow tie. Most folks miss it just like I did. Also, notice that they're calling it "Photo" and not "Photo Black".

So why does Hewlett Packard use the geometric shapes on the cartridges when they’re not on the box? Who knows? I can only guess that they’re either poorly organized or they just don’t care to clear things up.

Ounces vs. Page Yield

Every forum thread I’ve seen about HP printer cartridges contains some form of this argument. Some people want to know how much ink is in the cartridge so they’ll know how much they’re paying for it, and HP insists that they should use pages as a unit of measurement instead.

I’ll get the math out of the way first, even though it never seems to work when other people do it. An ounce (or preferably a milliliter) is a fixed amount. If you buy a two-liter bottle of soda, you can calculate how much you’re paying per ounce of product. This is a simple calculation that consumers do every day. It’s not a big deal. In many cases you get the soda cheaper when you buy the larger bottle, so people like to compare prices. As they say on virtually every thread on the subject, “an ounce is an ounce.”

A page is not a fixed amount. Seriously, it isn’t. Printing a photo takes a large amount of ink while printing directions to your buddy’s house only takes a little. Both are pages, but they use different amounts of ink. It simply isn’t rational to claim that pages should be used to measure the cartridge instead of ounces. Remember, people aren’t asking how much they can print. They’re asking how much ink they’re getting for their money.

But alas, HP disagrees. Bob Headrick, who works for HP, added a post to the forum thread I linked above, and he says two things that don’t help much. First:

The wide black is the standard black, the narrow one is the photo black.

That only helps if you can open two boxes in the store before you buy anything. Remember, there’s no pentagon or bow tie on the box. You can’t see how wide it is unless you have X-Ray Vision. (He could have just told people to look for the camera symbol. If it’s not there, you have a regular Black cartridge.)

Your eyes are drawn to the geometric shapes, but take notice of the reversed camera symbol on the far left cartridge. It's the only symbol that matters.

Then he goes on to say:

As for the “ounces are ounces” comment, that is very misleading as it applies to printing.  A consumer prints pages, not ounces.  Comparing cartrdiges based on thier volume would at best be misleading for several reasons.  As an example, a printer using the #96 black cartrdige gets about twice as many printed pages per mL (or ounce) as does one that uses the #45 cartrdige.

Wow. He avoided the facts completely. That’s like saying people don’t buy gallons of gasoline, they buy miles. Think about that. When you go to the gas station, do you purchase a “mile” of gasoline? Of course not. Mileage is a variable. A gallon is not.

Mr. Headrick attempts (unsuccessfully) to mislead the other posters by comparing cartridges from two different printers. The #564 and the #564XL are for the same printer. Yes, you can certainly compare two cartridges that go into the same slot of the same printer. One simply has more ink in it.

Unfortunately, HP pushes their story pretty hard, even when people blatantly call them on it. Maybe the XL ink is the same cost per ounce as the regular size. Maybe it’s more expensive per ounce, and HP doesn’t want to admit it. Either way, it’s pretty shady. Not only do they refuse to tell us how much ink is in the cartridge, but they try to sell us on some crazy anti-mathamatical nonsense. Ask them a straight question if you like, but it will gain you nothing. They know you already bought the printer, so they don’t care if you get a good deal on the ink. In fact, supplies are where they make most of their money.

Windows vs. Mac

HP printers are designed to work with Windows. When my desktop PC was my primary machine, I had no trouble with the printer besides the confusion with the cartridges. (Not surprising, since that computer also came from HP.) However, things changed when I switched to Mac. I downloaded the HP Mac driver from their website, but scanning was a bit weird and printing on photo paper never seemed to yield the same result twice.

And yes, I know how to change and save the settings. I did save the settings when I finally got them right, but the next time I used them I was at square one again. It’s a real pain. I basically don’t print photos anymore. I can try, but it takes me several attempts to get it right. This burns through lots of ink, which HP gladly sells to me over and over again. It’s a good scanner, but as a photo printer it’s an empty promise.

But don’t get me wrong. If the machine was designed for Windows, then that’s fine. But if they’re going to provide a Mac driver, shouldn’t they get it right?

Conclusion

Don’t buy their stuff, if you can help it. HP simply doesn’t care about us. They don’t care if we’re confused by misleading packaging, and they don’t care if we get a fair price. Once you buy a printer, your wallet belongs to them. My only other advice is to avoid arguing with an HP staffer over ounces. It just doesn’t work. It’s their job to push the page yield argument, so no amount of logic or reason will sway them.

But at least you and I know the truth. An ounce is an ounce, even if the folks at HP close their eyes and cover their ears.

Thanks for your blog post, Brian!

Happy Learning,

Michael

That’s right. I posted a link to this blog post on my Facebook, Twitter and Google+ accounts, and they found it. Do you know what this means? Someone besides me is actually reading this blog! According to the business card enclosed, my one confirmed reader is Michael Ninness, Vice President of Content at Lynda.com. 

It says "Trust me. I'm a trained professional." And of course, Lynda's logo is on the back.

It also means that the internet is more of a small town than I had realized. Not only did they notice me, but they looked around a bit to see where I work. There are several levels of awesome here. Merely being found was kind of neat, so I would have been more than pleased with an email. But Michael decided to kick it up a notch and send me a physical gift. That’s the power of social media, folks. Kind words going back and forth, a free t-shirt, and oh yeah… thanks to the videos I’ve been watching, I’ll be able to make that WordPress plugin I was thinking about. Nice and shiny, with bells, whistles and everything.

So thanks, Michael. I’ll wear this shirt proudly.

That logo has been around for a long time, and I’ve always been impressed by her brand power. I mean, look at that thing. With glasses and a haircut, she made a distinctive logo that I’ll recognize forever. When I see her on the videos, I know instantly who I’m looking at. If I made an icon of myself reading a book, it would just look like some dude. No way it would work as well as Lynda’s.

But I digress. I’m not just writing this to give her some free (and well-deserved) advertisement. I’m writing this to tell you about the member’s area of her site, and how useful it is.

I’m a firm believer in books. You could search the internet to develop your web skills, but the web is vast and you only need a small fraction of it to achieve a particular goal. It’s really worth it to let an expert sift through the ocean of information and gather the best and most useful practices for you. Again and again I’ve been glad to pay the money for a book which leads me directly to the useful information I need, without digressing and without the assumption that I already know most of it. Seriously, some people should not write tutorials.

Lynda Weinman, and others like her, have helped us out with many a physical volume. But she also has lots of helpful and current web content. The only snag is that you have to pay for it, just as you would pay for a book. What you lose in the benefit of beloved paper and highlighters, you gain in plain English explanations of important concepts. It’s a win.

To be fair, this is the first site of this type that I’ve seen. I’m normally an O’Reilly Media man, and I know that they have similar web content which parallels their books. I’ve been told that it’s excellent, but I haven’t jumped in yet because I’m still sort of attached to the feel and solid comfort of paper. I’m not sure how it compares to Lynda’s site, but if I ever check it out I’ll be sure to write a post on the subject.

All I can say for now is that you have two winning options available to you which I have personally taken advantage of: O’Reilly books from the local bookstore, and tutorial videos from Lynda.com. (Did I mention that she has an iOS app? Because she does.) You’ll be happy with either option.

However… the web moves forward so fast that physical books might not be the best idea in all cases. You can get O’Reilly books for your iPad or iPhone for a fraction of the price you’d pay for a physical book, and subscriptions to online content will always be current if you pick a good site like Lynda.com or Safari Online from O’Reilly Media. I suppose the best way forward would be to take a look at your spending. If you’re buying lots of books from O’Reilly, then maybe the subscription to their online versions could save you some money. If you just need some tutorial videos, then maybe a subscription to Lynda.com could prevent the need for a book in the first place.

It all depends upon what you need, and how much you’re already spending. It’s certainly not the kind of thing a casual reader would want to pay for every month. If you just need help on rare occasions, then you’d save more money by sifting through the web’s free content on your own.

First of all, the canvas is fun. I built a star field animation at work last week that had several of us gathered around one machine, tweaking variables and trying out the API. It’s the kind of stuff that you could only do in Flash before, except that we’re just using Javascript. It was so nice to know that we could pursue this without paying a ton of money to Adobe. Eventually, I had to put a stop to the tweaking. After all, we were just building a 404 page. If we keep adding new features to the canvas, we’ll never be finished with it.

But I digress. Here are some ways in which the two differ. It’s not a complete list, of course.

Good Stuff

The canvas can draw programmatically, and can perform many of the tasks that we use Flash for. Circles, arcs, lines… you can do all that stuff with no trouble. Plus, it’s not restricted to the box it sits in. You can use JavaScript to pass information back and forth from the canvas to other parts of the page, (such as a form) and you don’t have to have a special program to debug things. This is especially important for a corporate environment. After all, you can’t debug somebody’s Flash code if your company machine doesn’t have Flash. Canvas promises to bring real animation to the web, and we’ll all be able to use it.

Also, much of the code is reusable, just like AS3 code. Once you learn something, you can easily adapt it for new situations. The star field you see in the solar system is the same one I built at work, with only minor adjustments.

The Bad Stuff

Two words. Browser Compatibility. Or more to the point, Internet Explorer. With Flash, you’re free to use fonts, images, and whatever else you like. If it works on your machine at home, it will work for the user’s desktop. But with canvas, you still have to worry about which browser is ahead, which is behind, and which features are common to both of them. You have to find a balance between moving forward and not leaving folks behind.

I tried my solar system animation in several browsers on my Mac, and the same several on my PC. The general results were surprising in a couple of places. As expected, my Macbook ran everything really well in every browser. On the PC, I got nice results from Chrome, Safari and Internet Explorer 9, but Firefox was rather choppy. (WTF, Mozilla? How did Microsoft get past you?)

Adjustments and Conditionals

In an effort to reduce the lag, I thought I would try to limit the number of canvases being used. At the time of this writing, there is a snowfall animation in my header. Could this be using too much processor power? I doubt it, but why not conserve anyway?

My WordPress theme is already set to pull in the extra JavaScript only if there’s a canvas on the page. (I put the id and the script’s filename into Custom Fields, and build the url from that. No custom field, no JavaScript link.) Just to save a little more, I set it up to only use the header animation if there’s no custom field for the page. If you go to the solar system page, you’ll get a lovely sunset photo of Lake Champlain. I’m not sure how much power I’m saving, but at least I got to play with some PHP while I was doing this. I’ll check the page from work, just to see if there was a problem with my PC at home.

My Conclusion

Although the HTML5 Canvas isn’t a complete Flash-killer, it’s getting there and it will only gain support as time goes by. Now is an excellent time to start using it.

I’ve had that site for… well, forever. It started as a Flash site, back when I was first learning the program. If you’re cringing with the idea of what that was like, then you’re not alone. It had too much art and way too much load time. By the time I learned how to maximize Flash for the web, I was smart enough not to build Flash sites.

Next. It turned into a horrifying pile of legacy HTML code. Each page was created manually, with no CMS involved. I used Dreamweaver templates to keep the common elements straight, and God help me, I used the WYSIWYG editor. (Seriously. I really did use that thing.) Even worse, I used tables for layout and my header was an image map. It sounds terrible these days, but those used to be standard practices for designers. If you took a class, they would teach you layout tables. Looking back, it gives me chills.

The content also changed as I went along. It started out as a blog of sorts, although people weren’t really using that word in those days. I would write articles and rants, and post photos. Eventually, I stopped blogging about whatever and started focusing on running events. It was a good way to avoid writer’s block, and frankly it’s kind of difficult to write a daily rant. Maybe it’s easy for some folks, but I can’t rely upon the world to tick me off every single day.

So eventually, I found my way to WordPress. My first theme was pretty rough. Looked horrible, had little flaws everywhere…it was a mess. Then I redesigned it, and I did a little better. Then I redesigned it again, and tinkered, and then redesigned. From that first painful Flash site to the one you’ll find today, there have been 10 versions of that thing. If you count major changes to the WordPress themes, I’m at 15. Holy crap, that’s more than the Doctor’s regenerations!

Recently I went through the whole thing, post by post, for some major changes. I wanted to get rid of a photo gallery plugin, make use of featured images, and just generally clean things up. I wanted to truly separate the content from the presentation. Since many posts from the older incarnations had been left behind like a well-loved scarf on a British actor, I was left with 97 posts to work on. I pulled out shortcodes, removed embeds, and did whatever I could to minimize the markup. The only embeds I decided to keep were from Flickr and YouTube. (I updated the YouTube embeds, but I noticed that the old ones still worked. Good job, YouTube.)

And then, I went through the theme and started over. Nothing fancy. I got rid of WP-Less, converting the styles to plain old CSS before pulling the important ones over. Most were dumped since I was trying to be cleaner. Then I took the HTML5 Boilerplate Theme and added the 960 Grid System to it, building a basic blog with a sidebar. Then I added some PHP snippets to single.php to pop my Garmin maps and Flickr galleries down at the end of the post, based upon a custom field. It seemed easy enough, and I thought I was done.

Sigh.

Nope. Not done. I keep finding little things. I never styled the H3 tags within the articles, and I had some trouble with floated elements and the stuff below them not respecting top margins. There’s other stuff in the posts, too. And yeah, I’ll go through them… but not tonight. Tonight, I think I’ll watch some Doctor Who. You know, the old stuff. With William Hartnell. And maybe I’ll Netflix some Tom Baker tomorrow.

.comment-pointer {
 border-top: 25px solid #fff;
 border-left:25px solid transparent;
 }

You can add more, but that’s basically the key to things. It’s all in the borders, and unlike the many tutorials and blog posts I’ve read recently, I’m actually going to tell you how it works.

It looks like a triangle, but it's really a box with a weird diagonal border effect.

I just finished a basic redesign of my running blog. For the comments, I became attached to the idea of having dialogue bubbles… because yeah, I love comic books. After consulting Google and a steaming pile of not-very-helpful blog posts and so-called “tutorials”, I finally found a way to get the active code without all the extra stuff. I didn’t want to make it orange just like that other guys, I wanted to know why the triangle was being formed.

Finally, I found this YouTube page. If you decide to watch it, be ready to skip forward. I mean, a lot. Most of the video is eaten up by the guy slowly typing out lines of code, and he speaks as though he could fall asleep at any moment. However, he was very helpful. After skipping forward through the entire vid, he finally said the magic words: “It’s just a box.”

Kind of not-very-similar to this bamboo picture frame. Sort of.

The Trick of the Triangle is in the way borders work. They aren’t just lines on the sides. Their origin points are on diagonal corners. I know that sounds weird, but think of it as a picture frame. the imaginary center line of the border goes from one diagonal corner to another, so it seems to lean over if you give it an insane thickness.

The best way to test this is to just open up a page that’s using the technique and play around with things in Firebug. If you hold down the arrow key with the border thickness selected, you can see the triangles form.

Colors are Important

The end result of this effect is to create a box with two colors in it, separated on a diagonal line. To get the triangle effect, you have to nix the color on one side of it. Don’t just set it to the same color as the background. One of these days you might change that, and you would have all these crazy little triangles floating around. Set it to transparent, as I have above.

So there you are. CSS Speech Bubbles. If you’d like to see an example, you can find it in one of my race reviews. Happy Firebugging!

<?php echo do_shortcode('[my shortcode here]'); ?>

There. Hopefully that showed up in the Google excerpt. (I hate when the useful stuff is buried deep down on the page.) What you’re looking at is a handy solution to a particular kind of problem. As I’ve written before, shortcodes can be a mixed blessing. On the one hand, they allow you to access some pretty cool features from a wealth of WordPress plugins. On the other hand, you’ll have those shortcodes in your content pretty much forever, even if you later decide to ditch the plugin. They’re harmless, of course, but if you’re like me then you just don’t want the litter.

I use one shortcode in my running site, for a Flickr gallery plugin. Since I tend to put it at the end of my articles, I started fishing around for a way to put the code in from outside the loop. Just a few minutes on Google resulted in the example above. This way, I have the shortcode call in just one place. If I ever change Flickr plugins, it won’t be an act of congress to clean them up.

However, I feel I should mention that there are times when you’ll want to use them as intended. If your design calls for shortcodes withing posts, then of course you should do just that. It’s nice to have an option, though.

Starkers is a stripped down theme with the bare minimum of markup and styles. It’s a working engine with no fancy stuff, and a pretty good starting point. The Boilerplate theme starts with Starkers and adds some cool bells and whistles on the back end. You can check boxes for things like Modernizr, Selectivizr, and a bunch of other handy tools. Even better, it will set up a site-specific JavaScript file for you. It’s a handy theme.

This evening I decided to start again, this time using the 960 Grid System. I was impressed by how easy it was to get started. Last time I tinkered with every little piece of the theme, but this time I wanted to keep it simple. At first I wanted to make no changes to the theme besides CSS, but I really wanted to put the grid in there. So I just started placing container div tags into the pages and started adding my styles to the theme.

It really didn’t take much to shape the content. If you just let the tools do what they do best, you can move pretty quick. It’s a little easier considering that I already have a color scheme and general design, but it’s still progressing nicely. When I’m done with the basic structure, I’ll be adding support for featured images, and maybe add a few canvases to the mix. I’ll bet the canvas could make some neat graphs.