June 13, 2009

Happy birthday to not you.

Happy birthday to not you. — Mazie

Mazie Family
June 11, 2009

Peppa Pig DVD Covers

I find it frustrating when I cannot find good quality, high-resolution album or DVD cover art on the Internet. So, when I have to resort to scanning I like to post it to share the effort with others. Here are the scans to two Peppa Pig DVDs: Cold Winter Day and Stars.

Dear Diary
June 8, 2009

Learning to Make Sausage

A couple of weekends ago we all loaded up into the car and drove up to Grand Marais to spend a wonderful weekend with our friends the Tangen’s. As is often the case when going up north”, it was really crazy cold. It was the end of May and on our last day it was barely above freezing.

Anyway, the main attraction of the trip was a class that Tammy had signed Kent and I up for at the North House Folk School. North House is a very cool place where you can go and learn hundreds of skills. While we were learning the in’s and out’s of sausage making, another group of people were learning how to build a brick oven.

Back to the sausage. Another friend, Kevin Dotzenrod, makes the most amazing sausage I’ve ever eaten. I’ve got a few feet of it left in the freezer that I’m coveting from everyone else. I really only like lean sausage with a lot of flavor. Tammy thought it would be fun for me to learn how to make it myself and that’s how Kent and I found ourselves elbow deep in meat.

The experience was captured best with video. Since I was running the camera this video is all Kent. I am excited to try my hand at making some of my own sausage just the way I like it.

http://vimeo.com/5065944

Dear Diary Video
June 8, 2009

No Content Found

CAPS LOCK IS CRUISE CONTROL FOR COOL. — Comment by Jordan Young on TechCrunch

iPhone Techie
June 7, 2009

Flank Steak

Flank steak off the Big Green Egg for lunch today.

Big Green Egg Cooking
June 5, 2009

Unordered Lists to Comma Separated List

I was tweaking some layout in Tumblr today and I really wanted to take a list of tags and display them with proper grammar. For example, I wanted to have commas in the right places and to use the proper singular and plural forms as needed. My goal was something like. At 9pm with tags Mazie, Baseball and St. Paul Saints.

Or, if there was only one tag.

At 9pm with tag Mazie.

The trick is that Tumblr only provides a way to iterate through the list of tags and you can’t do any funky logic in there. This is actually a benefit, since it forced me to figure out the right way to do this with CSS. After a little searching I found a really old post from 2005 explaining comma-separated list elements that was pretty close to what I wanted. I did some tweaking on it and came up with the following CSS block to do exactly what I wanted.

/* Styling for a comma separated list of values from a ul */
ul.comma-separated { display: inline; list-style: none; margin: 0; padding: 0; }
ul.comma-separated li { display: inline; }
/* Put the correct label in front, this should be plural for multiple tags */
ul.comma-separated li:first-child:before { content:"tags "; }
/* The comma we are looking for. */
ul.comma-separated li:before { content: ", "; white-space: pre;}
/* The last element should not have a comma and should be followed with a period. */
ul.comma-separated li:last-child:before { content:" and "; white-space: pre;}
ul.comma-separated li:last-child:after { content: "."; }
/* Special case required to handle a ul with only one item. */
ul.comma-separated li:only-child:before { content:"tag "; }

This will take a block of HTML like this

  • Mazie

  • Baseball

  • St. Paul Saints

and display it exactly how I want.

This was a great exercise. I’m not a CSS guru and I don’t tend to look to CSS to solve this type of problem. I immediately wanted to start working some magic inside of a loop in the code and handle the logic there. This is much simpler, and has the huge benefit of being able to modify the contents after page load with Javascript and have the formatting dynamically adjust as needed.

Now I just need to move this super smart CSS into my WordPress site as well.

Techie