larry kubin

It’s been a while, I know. South By Southwest occupied all of my time the past couple of weeks. And damn was it fun. I’ll have to write more later as I’m still catching up on work and recovering from the beating my body took. For now, you’ll have to settle for another one of my concert videos.

As usual, I filmed segments of various performances and combined them into one video, this time using Final Cut Express. This was my first time using the software, so it actually took me a really long time, and I didn’t even do anything cool with it. Don’t worry, my new goal for the year is to become awesome at video editing, so prepare yourself for much better videos in the future. Another first is that I’m using Vimeo to host the video since YouTube has lame size and length requirements that would force me to sacrifice the quality of the video. It’s about 20 minutes long and I don’t want to divide it into two parts. Try using the “full screen” functionality — it looks pretty damn good.

The video features performances by Ben Harper, AA Bondy, Kimya Dawson, Akron/Family, Ice Cube, Tom Morello, Autolux, Longwave, Perry Ferrell, Saul Williams, Ra Ra Riot, Serj Tankian, Talib Kweli, Vampire Weekend, Tapes N Tapes, Black Keys, Yeasayer, Bon Iver, Blue Scholars, Brett Dennen, Canada, The Cool Kids, Fanfarlo, Does it Offend You?, Holy Fuck, and random people on 6th and Congress.

Where else but SXSW can you see Tom Morello jamming with Ben Harper at a venue that seats only a couple hundred people? Enjoy!

I just filled out an application for Startup School, a free one day conference held at Stanford University. It’s organized by BASES and YCombinator, the venture firm run by Paul Graham and company. The speaker list is solid. I went last year and it was a great experience. It was refreshing to meet a bunch of like-minded folks who were all about quitting their day jobs and starting their own companies. The people I talked to didn’t have a “What if it doesn’t work? Aren’t you afraid?” attitude towards starting a business. They had a nothing-to-lose attitude that was more like “What’s so bad about failing? If it doesn’t work, I’ll just do something else”. Everyone I met was extremely talented, outgoing, and passionate. I even got to have a few drinks with some of them at the Stanford bars, which was very fun.

The event is being held on April 19th this year. This is good because the Web 2.0 Expo is being held from April 22 - 25, and I got a coupon to attend that for free recently, thanks to SXSW. So it appears as though I have some great excuses to go to San Francisco again. I’ve done some research and it looks like it will be fun and cheap to stay at the Pacific Tradewinds Hostel. It was voted the best hostel in North America and it only costs around 20 bucks a night to stay there, so I’ll probably go that route. Should be a blast.

I actually took a video of Paul Graham’s talk last year using my digital camera. The video isn’t worth very much since you can’t see the slides (you mainly see the back of some guy’s head). However, you can hear the audio, which is the most important part. He basically tries to answer the question “Why don’t more people start startups?”. Check it out.

Mike recently introduced me to Beirut (the band of Zach Condon), and I’ve been listening to his albums constantly ever since. According to Wikipedia, he was a student at Santa Fe High School until he dropped out to travel Europe, where he was first exposed to Balkan gypsy music. He wrote his debut album Gulag Orkestar (2006) alone in his bedroom shortly thereafter, when he was only 19 years old.

I wouldn’t say his music is for everyone, but I certainly dig it. Below are a couple of videos of his band performing live in some unique settings. Both of these songs are from the album The Flying Club Cup. If you like these songs, you should get the album. It’s the bomb.

In the Mausoleum

Nantes

We are currently working on a new site for Randall Hansen, a.k.a. the TestPrepGuy. Randall is a small business owner who teaches LSAT test prep classes here in Austin. He competes with Kaplan by providing a superior level of personal attention at a lower price. He is getting ready to offer up some slick Flash-based test preparation games online to supplement his in person courses, and we’re going to help him do exactly that. The site should be launched in March, so stay tuned and we’ll let you know when it’s up. For now, here’s a preview of what’s to come.

So Radiohead tickets went on pre-sale on a site called W.A.S.T.E. earlier this month. The problem with W.A.S.T.E. is that the site is based in the U.K. and they don’t tell you exactly when the tickets go on sale. So you just gotta keep refreshing the page. So many fans who wanted tickets decided to stay up all night to make sure they would get some since it was sure to sell out immediately (which it did).

At about 4am I started getting pretty bored and sleepy, so I decided to come up with a solution to this problem. The idea was to leave instant messenger on, and have a script that sends me an instant message when it detects a change in the website’s markup. The instant message noise would wake me up so that I could buy tickets. Below is the script I wrote. It uses the Python toc.py module, which can be downloaded here. Also, other people can instant message the bot, their screen name will be added to a list, and all people on the list will be notified. Pretty cool.

Note that I still ended up refreshing the page by hand just to be sure, since there was no real way to test that this thing was gonna work. It was a fun little experiment and I did get an instant message when the tickets went on sale. Neat huh? I now have a substantial number of Radiohead tickets that I will proceed to sell on eBay. Seriously, I’ve already sold 4 of them for a short term 50% gain, and I bet I will get more on the next batch. Don’t hate the player.

bot_screenname = "larry x2a"
bot_password   = "myaimpassword"
notify_list    = ['mrkubin42']
ticket_url     = 'http://tickets.waste.uk.com/Store/DisplayItems.html'
city_to_find   = 'Houston'
 
from toc import TocTalk, BotManager
 
import time
import urllib
 
class TickBot(TocTalk):
 
    def on_IM_IN(self,data):
        global notify_list
 
        screenname = data.split(":")[0]
 
        if not screenname in notify_list:
            notify_list.append(screenname)
 
        self.do_SEND_IM(screenname, '''Your screen name has been added to the notification list.''')
 
if __name__ == "__main__":
 
    bot = TickBot(bot_screenname, bot_password)
    bot._info = "IM me and I'll let you know when Radiohead tickets go on sale!"
 
    bm = BotManager()
    bm.addBot(bot,"myBot")
 
    times_checked = 0
 
    while 1:
        time.sleep(60)
 
        times_checked = times_checked + 1
        city_found = None
 
        page = urllib.urlopen(ticket_url)
 
        for line in page:
            if line.find(city_to_find) != -1:
                city_found = "Found It!"
 
        if city_found:
            for i in notify_list:
                bot.do_SEND_IM(i, '''Dude, Radiohead tickets are on sale! Go buy them!''')
        else:
            print "I checked " + str(times_checked) + " times and Radiohead tickets are still not on sale!"

Can you feel it? This week, thousands of web geeks, video game producers, indie hipsters, filmmakers, and over 1,600 bands will be gathering in Austin for one of the largest festivals in the world. Sorry Kevin, there’s nothing like this in Birmingham — only crappy Nickelback cover bands. But hey, we offered to fly you out here so you have no excuse.

Yours truly has acquired a shiny badge and will be attending as many events as possible over the next 2 weeks. After having a blast last year, but feeling as though I missed out on many opportunities, I resolved that in 2008 I would not be working and would be enjoying the full festival without limitations. And now that time has come. Check out my awesome schedule and try not to be jealous. Note that there are several “conflicts” here. There are several times when there are 4+ places that I want to be at the same time, so I’ll have to do what I can.

The Interactive Festival

This part of the experience will involve the most “business” — for us non-music industry folks at least. The SXSWi portion of the festival will be crawling with bloggers and web standards evangelists, so watch out — these guys will get all offended if you use a table tag. I typically don’t like talks on professional blogging (even though I’m writing on one) or web standards (no offense guys), but I’m pretty damn excited about the talks on startups and location-based gaming.

I’m most excited about seeing Kathy Sierra speak. She wrote one of the best software development blogs I’ve ever read and has written some fantastic books that I have on my shelf at home (Head First Java, Head First Design Patterns). Unfortunately some assholes made all kinds of threats towards her because she is a woman. It’s really sad that when a woman does something intelligent and all people can comment on is her looks. For instance, there was a post on reddit called Google Talk on Map Reduce and clustering by cute girl which started a lot of discussion. Anyways, Kathy Sierra’s presentations are supposedly awesome, so I’m looking forward to it. Her talk is titled “Tools for Enchantment: 20 Ways to Woo Users”. It’s on Sunday. Don’t miss it.

Another highlight is the keynote by Mark Zuckerberg (Founder of Facebook). I was able to see Mark Zuckerberg talk during Startup School at Stanford last year. He didn’t really do much preparation for that particular talk (he’s a busy guy), and his speech basically could be summarized as “don’t trust MBA’s and old people, young techie guys are better”. This offended some of the audience and I heard some people say some really negative things about him afterwards, but I think they were just jealous. Despite some of the criticism he has received, I think he’s a pretty good speaker. I mean, he wasn’t nearly as good as the other speakers at the event (Chris Anderson, Max Levchin, Paul Buchheit) etc., but who is? You know Zuckerberg is good when he can convince investors that a network of online profiles is worth 15 billion dollars and will revolutionize the next 100 years in advertising. I mean, that’s 4 times as large as AMD’s market cap, and AMD actually has billion dollars fabs for producing microprocessors. But then again, even Sephira Software is more profitable than AMD.

I’m also looking forward to the talk by the 37 Signals guys. You know, the creators of Basecamp, Ruby on Rails, and other shiny web applications and frameworks. These guys are what every small web development company strives to be. Not only are they agile developers, they are great writers and are extremely profitable while being very open and real.

The Film Festival

I love watching movies. The fact that I will be watching movies in the middle of the day when many other people are hard at work in their cubicles makes it that much more fulfilling. This part of the festival is particularly interesting in that I know much less about film than I do about web development and music. I’ve been to plenty of music festivals and tech conferences, but I’ve never been to a film festival. Heck, I even have trouble saying the word “film” out loud since it just seems like a more pretentious way of saying movie. I’m pretty excited that I will get to see some random low budget movies that I probably won’t be able to see anywhere else any time soon.

21 Movie

I plan on seeing 21, which is about the MIT students who made a killing counting cards in Vegas. The description sounded pretty cool, I always enjoy movies involving casinos, and I’m about to take a trip to Vegas at the end of this month for my friend Kevin’s wedding. I thought the trailer was kinda lame though, so I’m already expecting to be underwhelmed by this one. See for yourself.

Choke

Hey, another movie based on a book by Chuck Palahniuk, who is best known for writing Fight Club. I vaguely remember reading Choke in college, and I seem to recall it involving sex addict meetings or something, but I suspect it was about much more than that. This one should be fun.

The Music Festival

We live in the Live Music Capital of the World, so most people are excited about the music festival portion of SXSW. I don’t blame them. I’ve tried my best to give most of the bands on the lineup a listen, but it’s almost impossible to do so unless you don’t do any work for a week. There are well over a thousand bands performing, so there’s definitely something for everyone. Below are some of the acts I am most looking forward to.

Bone Thugs-N-Harmony

What better way to kick off the festival than to see none other than Bone Thugs -N- Harmony at Emo’s? Sure, most SXSW types hate Bone Thugs because they only listen to the indie-rock-pitchfork-band-of-the-moment, but what could be better than seeing guys named Layzie Bone, Wish Bone, and Flesh-N-Bone performing classic hits like “Mo’ Murda”, “For tha Love of $”, and of course “Thuggish Ruggish Bone”. And if they encore with “Buddha Lovaz” I will totally go krayzie. Seriously, check out the video for “Foe tha Love of $” below. It brings back great high school memories for me. R.I.P Eazy E.

Fanfarlo

I recently heard about these guys on some random message board. From what I’ve heard, they are unsigned, but I suspect that will change very soon. Here’s a great clip of them performing in a “Black Cab Session”. I really enjoy raw recordings like this in unique settings.

The Black Keys

Josh and I saw these guys rock out at the Coachella Festival last year. They are often compared to the White Stripes in that they are a two piece band with some bluesy influences. Check out this performance of them kicking ass in Austin. Note the sheer awesomeness of the drummer.

Black Moth Super Rainbow

To be honest, I don’t know quite what to think about these guys yet. The following song sounds so trippy, like Pink Floyd mixed with Air or something. I think it will make for a great night show.

The Cool Kids

The Cool Kids are a couple of young rappers I’ve been hearing a lot about. I think they are about 19 or so. Here’s a video of them freestyling.

Tom Morello

What is the best concert I’ve ever been to? Rage Against the Machine. A large part of that has to do with the fact that Tom Morello is awesome. He will be performing both as the Nightwatchman and in the band “Body of War” with Serj Tankian of System of a Down and a “Special Guest” — I’m thinking Eddie Vedder. Check out Tom showing off some of his tricks. Apologies for the Carson Daly appearance in this video.

Akron/Family

These guys appear to rock. I love how they sing in unison also. Sounds very powerful.

Vampire Weekend

This is one of those buzz bands that everyone is talking about. They are playing so many shows during SXSW that I’ll have to see them once just to see what all the fuss is about. So far the songs I’ve heard have sounded very catchy. I can’t help but think Weezer when I hear them.

Ice Cube

Little known fact: Ice Cube’s Lethal Injection was the first CD I ever owned. I am probably looking forward to seeing Ice Cube perform at Auditorium Shores more than most people. I celebrate his entire catalog. The fact that Talib Kweli is opening for him is an added bonus.

My Schedule

And now for the moment you’ve all been waiting for. Behold, my South By Southwest schedule.

Thursday, March 6th

12:00AM - Bone Thugs N Harmony @ Emo’s

Friday, March 7th

01:00PM - Badge Pickup and Registration
02:30PM - Pro JavaScript Design Patterns (Dustin Diaz, Engineer @ Google)
03:30PM - How to Rawk SXSW (Matt Mullenweg, Creator of Wordpress and Tim Ferriss, Author of the Four Hour Work Week)
05:00PM - Bankrupt Your Startup in Five Easy Steps (Joshua Strebel, Andrew Hyde, Sean Tierney)
06:00PM - Super High Me @ Paramount (Film, Comedian Doug Benson, a famous marijuana advocate, decides to test the limits of his body during two, 30-day stretches.)
07:00PM - Austin Coworking Meetup @ Hotel San Jose on South Congress
09:30PM - 21 (Film, MIT Students take down Las Vegas in Blackjack) @ Paramount Theater

Saturday, March 8th

10:00AM - Quit Your Day Job and Vlog
11:30AM - You Are Here: Gaming and User’s Geolocation in Web 2.0
02:00PM - Location-based Entertainment, Animating Overlooked Spaces
03:30PM - 10 Things We’ve Learned at 37signals
05:00PM - Transparent Business — How Much is Too Much
06:00PM - Google Party @ Light Bar
06:30PM - Mr. Lonely (Film, Michael Jackson impersonator lives alone in Paris and performs on the streets to make ends meet)
08:00PM - Brent’s Party, Real Ale Brewery
09:00PM - 02:00AM, Austin Museum of Digital Art Showcase @ Club de Ville
10:00PM - 02:00AM, 16Bit SXSWi Party @ Scoot Inn

Sunday, March 9th

10:00AM - Social Design Strategies
11:30AM - Blogging for Dollars - Blogging’s a Profession?
12:00PM - ScreenBurn Arcade
02:00PM - Keynote Interview with Mark Zuckerberg (Facebook)
03:30PM - Tools for Enchantment: 20 Ways to Woo Users (Kathy Sierra)
05:00PM - Data as Art: Musical, Visual Web APIs
07:00PM - The Promotion (Film, story of two mid-level supermarket employees who compete ruthlessly for a coveted post at a new store location.)
07:30PM - 11th Annual Web Awards by Adobe
09:45PM - Nights and Weekends (Film, A man and woman must face the tension that builds between them during a long-distance relationship.)
11:00PM - I Slammed My Dick in the Drawer (Film, Based on actual events, its a harrowing tale of a young man, a drawer, and his dick.)

Monday, March 10th

10:00AM - The Care and Feeding of Your Startup
10:00AM - The Art of Self-Branding
10:00AM - Scalability Boot Camp
10:00AM - Building Developer-Friendly Web Service APIs
11:30AM - Self Replicating Awesomeness: The Marketing of No Marketing
12:30PM - The “Bloggies” Award Ceremony
03:00PM - 06:00PM - Facebook Developer Garage @ Pangaea
03:00PM - Instant Buzz: Drugs in Film
03:00PM - Upgrade Your Life: The Lifehacker Guide
05:00PM - Stories of Failure: Surviving Start-up Mistakes
05:00PM - Coworking and the Evolution of the Independent Worker
05:00PM - Bootstrapping through Entrepreneur Collaboration Networks
07:30PM - Where in the World is Osama Bin Laden @ Alamo Lamar (Film, If Morgan Spurlock has learned anything from over 30 years of movie-watching, it’s that if the world needs saving, it’s best done by one lone man willing to face danger head on to take it down, action hero style.)
09:45PM - 02:00AM - Facebook Developer Party @ Pangaea
11:00PM - Southern Gothic @ Alamo Ritz (Film, Hazel Fortune (Yul Vazquez) works in a strip club in the small Southern town of Redemption. Haunted by the death of his only daughter, Fortune has become a self-destructive, suicidal alcoholic, until he meets Starla Motes (Nicole DuPort))

Tuesday, March 11th

10:00AM - Insiders Guide to Angel Investing
10:00AM - Future of Corporate Blogs
11:30AM - Casual Multi-Player Online Games: Serious Revenues
01:00PM - A Conversation with Billy Bob Thornton (Film talk)
02:00PM - Secrets of JavaScript Libraries
03:30PM - Building Webapps Together
03:30PM - Considerations for Scalabale Web Ventures
05:00PM - Building a Startup You Love is Hard
09:00PM - 02:00AM Paste Magazine SXSW Music Opening/Film Closing Party @ Stubb’s
09:00PM - 04:00AM The Big Digg Shindigg @ PureVolume Ranch

Wednesday, March 12th

11:00AM - Octopus Project, Two Gallants, and More @ Red Eyed Fly
01:30PM - These New Puritans @ Emo’s
01:30PM - Bananaz (Film about cryptic cartoon band Gorillaz) @ Paramount Theater
02:30PM - Bowerbirds @ Emo’s
04:00PM - A Place to Bury Strangers @ Austin Convention Center
04:30PM - Akron/Family @ Austin Convention Center
05:30PM - Saul Williams @ Austin Convention Center
08:00PM - The Nightwatchman (Tom Morello of Rage Against the Machine) @ Esther’s Follies
09:00PM - These New Puritans @ Antone’s
09:30PM - Choke (Film - An adaptation of Chuck Palahniuk’s (Author of Fight Club) novel, this is the sardonic story about mother and son relationship, fear of aging, sexual addiction, and the dark side of historical theme parks.) @ Paramount Theater
09:40PM - Canada @ Soho Lounge
10:00PM - Lightspeed Champion @ Emo’s
11:00PM - Peel @ Maggie Mae’s
11:00PM - Sons and Daughters @ Antone’s
11:30PM - Yeasayer @ La Zona Rosa
11:45PM - Will to Live @ Red 7
12:00AM - R.E.M. @ Stubb’s
01:00AM - The Black Keys @ Emo’s

Thursday, March 13th

12:00PM - Okkervil River, The Cool Kids @ Yard Dog Gallery on South Congress
12:00PM - My Brightest Diamond @ Volume Night Club
12:00PM - Tapes N Tapes, Shout Out Louds, Tokyo Police Club, The Stills, The Onion AV Club Party @ Emo’s
12:00PM - Akron/Family (Under the Radar and Team Clermont College Party) @ Flamingo Cantina
01:00PM - Nada Surf @ Volume Night Club
02:30PM - Gibson Guitar Party @ Maggie Mae’s
02:30PM - DeVotchka @ 7th and Red River
02:30PM - Cadence Weapon @ Austin Convention Center
04:00PM - Beautiful Losers (Film, D.I.Y. spirit that unified a loose-knit group of American artists who emerged from the underground youth subcultures of skateboarding, graffiti, punk rock and hip-hop.) @ Alamo Ritz
04:40PM - The Cool Kids @ Austin Convention Center
05:00PM - Vampire Weekend, Shout Out Louds (NPR Music Show) @ The Parish
07:00PM - Body of War (Tom Morello of Rage, Serj Tankian of System of a Down) @ Stubb’s
07:00PM - Del the Funky Homosapien @ Auditorium Shores
08:00PM - Elena Mendell @ The Ale House
08:00PM - Spoon @ Auditorium Shores
09:00PM - Tia Carrera @ Light Bar
09:30PM - Yo La Tengo @ Austin Music Hall
11:00PM - Genghis Tron @ Emo’s Annex
11:00PM - My Morning Jacket @ Austin Music Hall
12:00AM - DeVotchKa @ Cedar Street Courtyard
12:00AM - Perry Farrell (Jane’s Addiction) @ Pangaea
12:45AM - Serj Tankian (System of a Down) @ La Zona Rosa
01:00AM - Black Mountain @ Mohawk
01:00AM - Yeasayer @ Emo’s Lounge
01:00AM - The Octopus Project @ Emo’s
01:00AM - Holy Fuck @ Wave Rooftop

Friday, March 14th

12:00PM - Hot Water Music @ Red 7
12:30PM - Hot Topic / Xbox / Rock Band Party (Serj Tankian of SOAD) @ Spiro’s
12:00PM - The Black Keys @ Scene Magazine Party, La Zona Rosa
04:00PM - Dizzee Rascal @ Austin Convention Center
08:00PM - Ravens & Chimes @ Club de Ville
08:00PM - YellowFever @ Buffalo Billiards
08:00PM - The Virgins @ Cedar Door
09:00PM - The Builders and The Butchers @ Club de Ville
10:00PM - A-trak @ Emo’s
11:00PM - Vampire Weekend @ Antone’s
11:00PM - Dr. Dog @ Cedar Door
11:00PM - Fanfarlo @ Wave Rooftop
12:00AM - Tapes ‘N Tapes @ Cedar Door
12:00AM - Akron/Family @ Emo’s
12:00AM - Russian Circles @ Emo’s Lounge
12:00AM - My Brightest Diamond @ Central Presbyterian Church
12:40AM - The Paul White Quintet @ Elephant Room
01:00AM - King of Prussia @ Light Bar
01:00AM - N.E.R.D. @ Stubb’s
01:00AM - Atlas Sound @ Prague
01:00AM - Blitzen Trapper @ Bourbon Rocks

Saturday, March 15th

12:00PM - San Francisco SXSW Party @ Bourbon Rocks
12:00PM - Seattle SXSW Party @ Palm Door
12:00PM - NME Party @ Wave
04:30PM - Lyrics Born @ Auditorium Shores
05:30PM - Talib Kweli @ Auditorium Shores
08:00PM - Ice Cube @ Auditorium Shores
09:00PM - Mission to the Sea @ Hilton Garden Inn
11:00PM - This Will Destroy You @ The Hideout
11:45PM - Blue Scholars @ Prague
12:00AM - Two Gallants @ Dirty Dog Bar
12:00AM - Kid Dakota @ Thirsty Nickel
12:00AM - Z-Trip @ Vice
01:00AM - Tokyo Police Club @ Dirty Dog Bar
01:00AM - Dr. Dog @ Emo’s Annex
01:00AM - Black Moth Super Rainbow @ Thirsty Nickel
01:00AM - MSTRKRFT @ Vice
01:00AM - The Virgins @ Wave Rooftop
01:00AM - British Sea Power @ Maggie Mae’s Rooftop
XX:XXXX - Duffy @ Stubb’s

Sunday, March 16th

12:00PM - 06:00PM, NME Party @ Wave
04:00PM - 07:00PM, Q Magazine and Guitar Hero Party @ Driskill Hotel w/ Lightspeed Champion, These New Puritans, and more
07:00PM - Rest of Life - Reflect on how awesome SXSW was

So, what do you think? Did I miss anything?

Every once in a while, Ashley and I take a short road trip to a random small town in Texas. This weekend it was Kerrville, home of the Kerrville Folk Festival. Was the festival going on this weekend? Nope. Is there anything particularly special about Kerrville? Not really, it’s just fun to hang out in another town sometimes. It’s also really cheap to hang out in another town if that town is not San Francisco or New York. As a bonus, we got to test out the Garmin GPS unit we just got. No more printing those vague Google Maps directions (no offense Google, we love you). We can just get in the car and go.

Daddy, what was it like?

Well let me tell you. We got to Kerrville and walked around the town a bit. We went into some random bookstore which had a really unique collection of books. I’m always surprised places like that actually still exist since it’s hard to see how a small bookstore can be profitable anymore with companies like Amazon around. I looked through some of the field guides on dragonflies since it reminded me of the work I do with John Abbott.

Meanwhile, back in Kerrville — After bumming around downtown, we went to Shreiner Park and hung out by the Guadalupe River. It was very peaceful. A kid was fishing with his dad. Ashley was fascinated by a dead goose floating in the water. You could see it’s trachea hanging out. Gross, I know. But she’s a speech therapist, so she is very interested in such things. Weird, I know.

Check out my new haircut. See how it’s shaped like a “V”. The barber did that on her own, I promise. I “went with it”. Notice also how I look like the little cartoon guy on my T-shirt.

Weren’t you hungry?

What trip is complete without some local cuisine? We went to some place called Pampelle’s and had some salads and sandwiches. You know, stuff white people like. Then we hung out at Hastings and read some books and magazines. I bought Ashley a copy of the Omnivore’s Dilemma since Lee from Jason’s Deli mentioned it in a meeting the other night. Since then she’s been talking my ear off about corn. Ha!

Seriously though. Apparently I can’t eat anything anymore because it’s all made of crap. And those Chicken McNuggets we all loved when we were 5 years old are carcinogenic, which explains a lot.

Blueprint is both a CSS Framework and an album by the legendary hip-hop artist Jay-Z. In this article, I am going to be writing about the Blueprint CSS Framework, which provides designers with a solid CSS foundation, including an easy-to-use grid, sensible typography, and a stylesheet for printing. This is my first experience with a CSS Framework, so I am going to test-drive Blueprint by writing this article using it, starting with an empty file in TextMate. So let’s do this. For the best learning experience, download the example code first, so you can see the final article marked up using Blueprint.

Download The Example Code

What is a CSS Framework?

These days the word framework is being used all of the time, but usually it’s in reference to a web development framework like Ruby on Rails, Django, or Spring.

“CSS Framework” is a relatively new term used to describe a framework intended to be used by designers rather than back-end programmers. Frameworks targeted at developers (eg. Django and Rails) free you from the boring, repetitive stuff that is required by every web application — tasks like building an authentication system, creating a database abstraction layer, and organizing your code so that it is maintainable and secure. Rather than having to make these kinds of decisions over and over again, a framework takes care of these decisions for you so that you can focus on the Fun Stuff — the needs of your individual application.

A CSS Framework provides these same benefits to designers, allowing for RWD, an acronym which I just made up (Who knows, maybe it will catch on). So rather than banging your head against the wall trying to figure out why your page looks like %$@! in Internet Explorer when you don’t even know what the word typography means, you can let Blueprint handle all of this for you. Blueprint provides sensible defaults that are sure to jump start your design process.

The Nitty Grid-dy

When you first start using Blueprint, the most important concept to understand is the “grid”. The best way for me to explain this is by comparing the “grid” to something else that is grid-like — an HTML table! Dun dun DUN! That’s right, I said it. “Table” is some kind of bad word to web standards evangelists, but it helped my understanding to compare the Blueprint grid to a table. In fact, let’s see what a default table looks like in Blueprint:

So the grid is analogous to the small table above — except it’s a 950 pixel wide “container” that is divided into 24 columns, each spaced 10 pixels apart. Using Blueprint, you can place “column” elements on the page with great precision and give each column a “span” (the span of each column is analogous to the colspan attribute of a td tag) to specify how wide the column should be. So to create a simple layout using Blueprint, I would:

1. Create a new HTML file and include the base Blueprint CSS files
2. Create a div “container” that would be the outer wrapper of my page
3. Create a header “column” of span 24 that would cover an entire row
4. Create a main content “column” of span 16, which would take up 2/3 of the next row
5. Create a sidebar “column” of span 8, which would take up the other 1/3 of the row. I would also specify that this column is the “last” element in the row.
6. Create a footer “column” of span 24

Show Me the Code

Enough of the jibber-jabber and analogies, let’s break it down step-by-step and see what the actual markup looks like for the layout described above.

Download and include the Blueprint CSS Files

After downloading the latest version of Blueprint from Google Code, unzip the file and copy the blueprint subdirectory into a directory called “css”. Then create a new HTML file in the parent directory (above css) and include the Blueprint CSS files like so:

<html>
<head>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
 
<body>
</body>
</html>

You can optionally include your own CSS files after the Blueprint CSS files to override the default styles and make your own customizations if necessary.

Create a container grid and divide it into columns

Create a div with a class attribute of “container”. Inside of this div, create header and footer “columns” that span the entire 24 rows of the container:

<html>
<head>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
 
<body>
	<div class="container">
		<div class="column span-24">Header</div>
		<div class="column span-24">Footer</div>
	</div>
</body>
</html>

Create a content area and a sidebar

To finish off the layout, create two additional divs, one for the main content of your page, and one for a navigation box that will float on the right side of the page. Notice that the navigation div has a “last” class, which is important because it tells Blueprint that this is the last column on that row.

<html>
<head>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
 
<body>
	<div class="container">
		<div class="column span-24">Header</div>
 
		<div class="column span-16">Content</div>
		<div class="column span-8 last">Navigation</div>
 
		<div class="column span-24">Footer</div>
	</div>
</body>
</html>

And that’s all there is to creating a simple layout with Blueprint! Notice I didn’t actually write any CSS myself. Wasn’t that easy?

Fancy Forms

In addition to simplifying layouts, Blueprint also makes your forms and fonts look nice without all the hassle. The form below is an example of what a simple form looks like when created with the appropriate Blueprint classes:

The markup is extremely simple, and I only added a couple of lines of custom CSS to make my form look like the image above. Here’s the source:

<form>
<fieldset>
	<legend>Log In</legend>
 
	<label for="username">Username</label>
	<input id="username" type="text" class="text" value="larry" />
 
	<label for="password">Password</label>
	<input id="password" type="password" class="text" value="yoyoyoyo" />
 
	<p class="buttons">
        <button type="submit" class="button positive">
         <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Log In
        </button>
 
	<a class="button negative" href="cancel">
	 <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
	</a>
	</p>				
</fieldset>
</form>

What about notification messages? Blueprint has you covered there also. Check out these handy dandy classes for displaying notifications or “flash” messages in a way that is clear and colorful:

Plugins

Blueprint has a plugin system that allows other designers to drop in custom CSS, which may include additional styles for buttons, fonts, and other customizations. The buttons in the form shown above are not included in Blueprint’s main forms.css file, but are included in a Blueprint plugin. To use a plugin, all you do is import its .css file from within the main Blueprint screen.css file — it’s kinda like importing a Python module. Once you have imported the plugin, its specific classes and customizations become available.

Another useful plugin is “fancy-type”, which includes such features as “incremental leading”. This is useful for including small side notes on paragraphs and other textual enhancements.

Conclusion

The Blueprint CSS Framework looks very promising, and I was excited that I was easily able to create a clean design in no time. Now people like me who aren’t experts in typography and obscure browser problems can quickly create new designs that are both attractive and are ensured to look the same across all browsers. Bundle this with a solid web framework like Django and you have a solid foundation upon which to build the next killer web app!

One of our favorite clients is Jason’s Deli. Why? They embrace open source software and we love their food. In the Fall of 2007, we helped create the new jasonsdeli.com, and we are now working on adding a new section containing nutritional data. Have you ever wondered how many calories are in a Reuben the Great? What are the health benefits of rye bread? Soon you will find out. The code is complete and it’s now in the proofing phase. We used jQuery to animate the food facts, and some CSS magic to make the nutritional information look like a food label. Below is a sneak preview of what’s to come.

Josh recently moved all of our email to Google Apps, and I must say it’s pretty slick. Now we get all the benefits of the Gmail frontend for our sephirasoft.com email. Plus we no longer have to run our own mail server. Couple that with a shared Google Calendar, collaborative document editing using Google Docs, and chatting using Google Talk, and who needs Microsoft products anymore? These free web applications make it very easy for us to collaborate from remote locations and allow us to keep our overhead very low. Google even lets you brand your apps, as shown in the screenshot to the right.

Now all they need to do is create some time tracking, invoicing, and tax preparation software :).