The third and final reading from the 2005 Christmas CD is one of my most favorite stories. As a kid, when I first encountered this story—I think as an “after-school special” type thing, it hit some strong emotional chords with me. I’m not entirely sure why, but I remember this story as the first that actually made me cry. (Old Yeller worked it’s magic on me years later…)

The Velveteen Rabbit is a cute little story about a stuffed, toy rabbit who longs to be “real.” Initially of little interest to his owner, or to the other toys with whom he is thrown together, eventually the rabbit becomes the much-loved favorite of the boy. After the boy contracts an illness which requires the purging of those belongings he keeps closest to him, the rabbit is thrown out of the house, to be incinerated. Filled with love for the boy, and sadness at their separation, the rabbit’s single tear summons the “toy fairy,” who completes his transformation and deposits him in the forest among the other real rabbits.

The 2005 CD may’ve been shorter, but that was ok ’cause it had this story on it. Also, I managed to sneak Spidey into the CD jacket, which was fun.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Podcast: Play in new window | Download (Duration: 8:24 — 5.0MB)

There are many issues to deal with when designing for the web, and one of the most fundamental—and seemingly hard to understand or remember—is the simple fact that the end user ultimately has control over font size, not the designer. I’ve seen many gorgeous designs that are completely untenable if the fonts are enlarged by even a single point size.

In this post, I’m going to look at a singular expression of this problem, but it should be remembered that this is just one possible example. The possibility of font resizing should be considered when designing any and every piece of a website.

The Concept

For our example, we’ll consider a simple content box, self-contained and isolated from the rest of the webpage—a bordered box with some text and a nice varied-gradient background, like so:

The Problem

In a situation like this, when constructed in HTML, the size of the container must increase as the font-size increases (unless you’re OK with locking it down and having the text spill over or disappear behind the box borders). Sounds fine, right? The problem is that, as the container changes shape or size, so must the background.

The background can be set to start in the top, center, bottom, left, or right; may repeat vertically, horizontally, or both, or may remain fixed to the start position. With a background not designed to tile, the tiling becomes obvious. With a non-repeating background, the background color of the page or element will be exposed. In either event, without sufficient forethought the result will likely be quite ugly.

Some Examples

The first box is our “normal” example, included again for comparison. As you can see in the second box, we run out of gradient, and in the third box, the tiling is very obvious. Neither situation is desirable.

Possible “solutions”

There are, of course, various ways of dealing with these issues, either during HTML production, or within the design itself.

One Big Image

Kind of an old school solution, the content area can always be created as a single image including the borders, background, text, etc. This is, of course, terrible for searchability, and terrible for vision impaired users unless some other concessions are made in the HTML.

Text as Image

Equally old school, with the same issues as the “One Big Image” solution, this also comes with its own unique issues. Effectively, we’re talking about saving the gradient to it’s own file, and saving the text as a separate image file. Really the only benefit to this solution is that the gradient background could then be re-used for multiple (of the same sized) content boxes, with the text image laid over them.

Do It in Flash

With the widespread acceptance of Flash—and javascript packages like swfObject that make it easier to build in alternate (non-flash) content—building complex content boxes in Flash is no longer an unreasonable proposition. Using flash also opens up many other possibilities (like subtle visual effects, or more complex interactions) with hardly any more overhead than a large background image. The potential problems with Flash are, once again, searchability and usability for the vision-impaired. Still, these issues should be addressed by judicious and appropriate use of alternate content.

Improve the Gradient

The final solution would be to simply improve the gradient such that it reasonably accommodates the foreseeable problems with the particular content box.

Enlarge the Gradient
First option is simply to enlarge the gradient—take whatever it is you have done, and extend it beyond the borders of the content box so that as more of the gradient is exposed, it doesn’t look like crap. Big thing here is that the extended gradient should still work well with whatever content is over it—so don’t graduate to dark colors if the copy in your box is also dark. This solution probably gives the designer more control over the gradient as a whole, but also means that if the box expands beyond an expected point, you’ll just have the same issues all over again. So, you have to put some thought into how and where the expansion will occur, and how much of it to reasonably expect.

Fade it to a solid background color
If you you can modify it so that it graduates to a solid color on one or more sides, your gradient might be able to be locked into an appropriate corner of the box, with that solid color applied to the background. Then the gradient image will just fade right into the background color and the box can expand however much it needs to.

Make it Tile-friendly
If you can modify the gradient such that it tiles well and doesn’t interfere with the content, go for it. Tiled backgrounds save on bandwidth, download times, and storage space on the server. Tiled background do NOT, however, save memory usage on the client machine (at least the last I heard…). Tiled backgrounds also allow for “unlimited” expansion.

Recommendation: Improve the Gradient

Of the main “possible” solutions, really the most recommended is improving the gradient (or preferably designing it with these things in mind in the first place). Flash is a good option for very complex content areas, but is overkill for the simpler elements. Improving the gradient gives you more control, while keeping the HTML flexible, usable, accessible, and SEO-friendly.

An Example

Conclusion

Obviously, I’m no designer, and the examples I’ve shown here are super-simplified for our purposes. In the real world, there are usually even more complex considerations, but those dealt with here are fairly fundamental. If you’re going to be designing these nice little content boxes with pretty, complex backgrounds and big, bold fonts, you have to remember what happens to that fantastic design when it gets in the hands of the HTML guys and finally in the browsers of the end users—neither group is kind.

If you have questions or other possible solutions to this type of background image problem, or if you have other examples of how well thought-out design is a prerequisite for building good HTML, please share by leaving a comment.

Since the object of the project is to make a Christmas present, it’s kind of imperative to include at least a few outright Christmas stories in the mix. And what story (well, secular story, anyway) is more a part of Christmas than the long poem, The Night Before Christmas.

This classic story includes references which modern kids will likely never be exposed to elsewhere—like actual shutters, kerchief and caps as sleepwear, and sugarplums. Of course, this story also is one of the primary introductions for children to Santa’s peculiar attributes, and also has an easy to memorize roster of Santa’s pre-Rudolph reindeer.

There are many stories and songs about Santa and his reindeer, but this is one of the absolute fundamental texts of Santology.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Podcast: Play in new window | Download (Duration: 3:43 — 2.6MB)

photo © 2005 by Neil Norman

Yesterday was my and my wife’s anniversary. Since she’s on a crappy rotation now, and working the 6p – 4a shift, I took a half day so I could hang out with her for a few hours. We had a great afternoon, not doing anything really special apart from being together.

We went out and had a nice lunch where we had our first date, went to the mall to see if we could reserve our new iPhones, went to the other mall to try our first Orange Julius (just “ok”) and to browse at the furniture store. Wonderfully ordinary “couple” stuff.

The funny thing is, I can’t imagine a better way to celebrate our anniversary. We’re not fancy-big-production type people, so a low key, mundane adventure is just about perfect for us. Just being together is enough.

And I think that’s a perfect testament to our marriage as well. Everyone’s relationships are different, but for us, we’re the most content and most happy when we’re together. Even after four years. Or, I should say, especially after four years.

The most awesome thing is, that as much as I loved my wife the day I married her, I love her a little bit more every day.

The focus of Buddhist teaching, as we’ve discussed, is on suffering—from where it originates, and how it can be overcome.

Suffering

My understanding is that the suffering with which buddhism is concerned is generally of the mental variety rather than the physical. Certainly physical pain isn’t merely some illusion of the mind (though the point is probably open for argument), but results from some specific internal or external cause. Whether you’ve stubbed your toe, broken your collarbone, or have some painfully debilitating condition, physical suffering can be difficult or nearly impossible to escape from or ignore.

Read the rest of this entry »

The 2005 CD wasn’t actually completed until 2006, and only included three books, one of which was the longer but much beloved Velveteen Rabbit. (It is kind of sad when time and timeliness become a factor in the creation of a Christmas present… but it was in this instance. I’ve tried to be better about it since then, to greater and lesser effect.)

The first track I’d like to feature from this CD is the short—but very cute—Guess How Much I Love You, by Sam McBratney and Anita Jeram.

This story documents a peculiar exchange between a narcissistic elder bunny and an insecure but effusive younger bunny who share a vague and unhealthily competitive relationship, and who apparently belong to a cult which has stripped them of their names and only allows them to be referenced by the color of their fur.

As the story progresses, the junior bunny attempts to elucidate the magnitude of his devotion to the elder bunny, but with each new platitude, the elder bunny is compelled to explain that his devotion to the younger bunny is actually the greater. He accomplishes this through various means, including physical feats of strength and simple size-related intimidation techniques. In the end, the elder bunny—not content to allow the youngster even the smallest victory—must get in the last word, even as his companion loses consciousness. One imagines the elder bunny smiling to himself with smug satisfaction, before dropping off to a fitful, horror-filled sleep.

Too much?

[UPDATE: 1 hour after this post launched, I realized I'd neglected to include the audio. Whoops.]

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Podcast: Play in new window | Download (Duration: 2:43 — 1.9MB)

When I first switched to Linux, I also attempted to switch to Gimp—which is generally considered to be Linux’s Photoshop. My experience with Gimp, especially versions before 2.5, was not great, and I switched back to Photoshop pretty quickly.

One of my freelance clients publishes a newsletter every month, and I convert the PDF into JPG images to use on the site as a sort of low-fi online version. I discovered pretty quickly that Gimp’s conversion routines did a terrible job. Eventually, I found a solution using ImageMagick, which I had used previously in my bipolar gallery scripts.

Converting images is super easy with ImageMagick’s convert command, and as it turns out, convert can also handle PDF files.

Here’s the commandline I use:

convert -density 300 -size 4100 sourcefile.pdf -quality 100 outputfiles.jpg

Basically, this converts each page of the pdf into a 300ppi JPG with a maximum dimension of 4100 pixels and a JPG quality setting of 100% (or no compression). Each page is saved as an individual JPG named outputfilesXX.jpg (where XX represents the page number, starting at 00).

This gives me much higher-quality starting images than Gimp provided, which I can then resize as needed.

convert has a huge array of features beyond this simple example, and is worth a look if you need to do image manipulation from a script, or batch operations on images from the commandline.

Here we are in June—one whole month into the new coffeemonk.com. I’m happy that I managed to get out a new post every Monday, Wednesday, and Friday at 10am. It wasn’t originally a goal for the site, but I decided a few days prior to launch that it might be good to make it an unofficial one. Aside from some last minute post-writing in the last week, it’s been a very comfortable experience, all told. Not sure how long I can keep it up, so we’ll just have to see.

Anyway, I wanted to take a moment, now that we’re a month old, to look back on the past month and see what we made of it.

Read the rest of this entry »

Mr. Brown Can Moo! Can You? is apparently a story about a neurotic and possibly delusional individual who wanders the countryside attempting to communicate by imitating the noises of animals and nature. Or perhaps he’s an amnesiac who has lost the capacity for human language altogether, and who is known as Mr. Brown solely because of the color of his outerwear. In any event, his unfortunate condition provided his psychiatrist—the infamous Dr. Seuss—an excellent opportunity for profit.

The reader is drawn along on the patient’s perambulatory adventure, and is given the opportunity to observe and occasionally participate in a re-enactment of his mad mimicry. Graciously, Mr. Brown’s repertoire of sounds is somewhat limited, and does not venture into the mechanical or electronic, so the book remains relatively short. The book closes with a review section, which one imagines might be an abstract representation of the troubled man’s unconscious mind.

Seriously though, Mr. Brown Can Moo is a great little book that smaller children simply love. It is especially fun when, once they’ve been through the book about 20 times (a day, for six straight months) and know pretty much what to expect, the reader begins to mix up the animals and their sounds. Toddlers love making animal noises, and they squeal with delight (or homicidal rage) when one presents the obviously ludicrous idea that a dog might say “quack.”

This is the last track off the original 2004 Christmas CD. Next week, 2005!

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Podcast: Play in new window | Download (Duration: 2:18 — 1.6MB)

Last month, there was quite a bit of discussion around how URL shorteners are bad for the internet, and what we developers and users might be able to do to minimize the potential damage. One big idea was to use HTTP headers and rel(or revrel attribute has been called into service in other areas, namely in defining relationships between people (or to other sites you own or have a profile on), and in telling robots how to treat a link.

The first suggested solution to the short URL problem to get broad exposure was rev=”canonical”, which proposed that a page should define a “reverse” relationship to a given short URL. In other words… “You see that short url over there? well, I’m the canonical version of it, so nyah.” (In my head, web pages are full of attitude. This probably comes from years of having to physically subdue rowdy CSS.)

rev=canonical was picked up by several major sites, and has some traction. When I was looking into the issue myself, thinking about what I wanted to do for this site, I found an alternate recommendation that seemed to make more sense to me.

Read the rest of this entry »