A bigger update will come next that includes zoom-in/zoom-out functionality.

See the official feedback/updates post here.

I wanted to share a simple trick I’ve been using recently for quickly adding baseline grids to nearly any element on a page. It’s nothing too fancy, and it’s very easy to implement.

Demo: Baseline Grid on Any Element Example

Download Demo: easy_baseline_demo.zip (12KB)

In the demo above, you’ll see various baseline grids (and combinations of grids). There’s a switch in the top right to turn the grids on and off.

To make a 21px Baseline Grid, you would apply the class “baseline_21″ to the element which you want to apply the baseline grid to. In your stylesheet, you would add the following CSS:


.baseline_21 {
position:relative;
}

.baseline_21::after {
background:url(images/baseline_21.png);
}


Adding this class to an element will make that element “position: relative;” (meaning that this won’t work on elements where position needs to be something else). Then, using the ::after pseudo-element, we apply a background that is positioned absolutely to fill the entire element.

The background image is a 42px tall graphic divided into two rows. The rows alternate with their background color. The top row has no background, just a red baseline, and the bottom row has a 20% opaque white (or other color) background. This just helps me follow the rows on wide documents.

As shown in the demo, it’s easy to apply baseline grids to children inside the element with the baseline grid as well. By adding multiple backgrounds to a baseline grid, you could also overlay a column grid using this method.

Full disclosure: I’m not a typography guru, and the demo might not be a very solid example of baseline grid usage. Also, I whipped up the demo very quickly, so there may be an error or two in some browsers.

My new home away from home.

I’m working on a few posts that outline the process we used for designing and producing this catalog. In some regard, I’m writing to solidify what worked and what didn’t work in my own mind. I hope that the series also helps others like myself who decide to design a catalog with very little (if any) previous print experience.

Python Safety is a company I have been working with for just over half a year now.

And the catalog is shaping up very nicely. Still plenty to do, but if things continue at this rate, we should have a beautiful 80 page catalog ready for print by the end of December.

Pretty exciting for us all. In less than a year, we’ve moved and upgraded our headquarters twice. The company is growing quickly, and having a lot of fun :)

Someone is out to get me.

There was one bit in particular that struck a chord with me:

I don’t know why, but I always feel ashamed about the games I’m involved in making. I can’t even bring myself to start up “Battlefield Bad Company 2,” our last game, because I feel so ashamed. I know it is a great product but still I only see the things we could have done better.

Patrick Bach, DICE Executive Producer

UX, Interaction designers, and others who help plan, execute and analyze user tests are often perfectionists, and also tend to be their own worst critics. It’s true in web design, and apparently it’s also true in game design.

For what it’s worth, Battlefield Bad Company 2 was a ridiculously good game (one of my all time favorites), and Battlefield 3 is looking to raise the bar quite a bit. Just more evidence that investing in user centric design, just like investing in outstanding talent and leadership, is crucial to building great products.

Myself? I’m a fan of competitive video games. Starcraft, specifically.

It’s a geeky choice for evening entertainment, but I’m definitely not alone in my programming selection. Over 60,000 people tuned in from all over the world this past weekend to watch a live tournament in Spain called DreamHack. Some events see even more attention than this—and the winners often take home prizes in the tens (or hundreds) of thousands of dollars.

A lot of the individuals who “cast” live video streams use live video streaming service Justin.tv. JTV is great, but I find it a little difficult to navigate my way around the site, or watch video on my tablet. Thankfully, JTV has put together an API that has allowed me to create my own customized stream browser :)

I spent some time last night putting together a basic video browser with the API that tracks some of my favorite streams. I don’t currently have any plans for it, but I’m hosting the app at GamerChannels.com for the time being.

With how much momentum I’ve seen competitive gaming gain in the past 2 years, who knows… I may invest some more time into this project so it will be more useful for others.

I was having no trouble getting the API to do the things I wanted, but the Embed code for streams seemed to be borked.

I kept getting: “Something went wrong: Error #2048″

Did some digging and wasn’t able to find any error code documentation. I couldn’t even get embed codes working directly from channels.

Turns out that for whatever reason, Justin.tv doesn’t like “localhost”. That’s a pretty strange quirk… not sure if it’s intentional or not (haven’t seen any mention of it in the API documentation). I added a new host “test.local” and was immediately able to see the embed codes working.

Guide for setting up custom hosts on Mac →
…and on Windows →

I’m very proud to support Caldwell’s campaign. In 2010, I believe we ran one of the best campaigns in Georgia, and I’m looking forward to once again setting an example of how local campaigns can be operated honestly and transparently.

Had some fun with the Wufoo API while working on this project. Really impressed with how easy it was working with Wufoo and MailChimp together.