Today I’m joining Codecademy as Lead Designer

A few months after my move to San Francisco, I decided to leave Carsonified—wonderful folks, but the logistics weren’t playing. Since the departure, I’ve been on the hunt for a juicy new project; chatting with some of my favorite Bay Area companies about possibly working together. Just as I was finally prepared to commit, Bleikamp sent me this link. It was a Codecademy job posting.

“Lead UI/UX would be awesome there, Bouncy.”

Bleikamp calls me “Bouncy House”—or “Bouncy” for short—because I’m prone to animated fits of enthusiasm. I had a few as I worked through the Codecademy lessons.

“I’m, like, a laughably good match for this,” I told him. It’s true. I’m crazy about designing better educational experiences. I’ve worked on exactly that as an interface designer and as an instructor in university classrooms. “I’m going to email them. I’m jazzed.”

What followed was an incredibly fun talk with Codecademy co-founders Zach Sims and Ryan Bubinski over Skype—they’re smart, easygoing, hilarious, and we found a lot of overlap in our ideas.

Here’s the beautiful entrance to the Wiliamsburg Bri—NOPE. BUBINSKIED.

The company is actually located in NYC (not SF, as I had originally thought), so I took a trip to meet the guys in person. They were spectacular hosts, and we had a crazy-good time working together and hanging out. By the last day, I was bummed to have to leave.

To speed along to the conclusion—we decided to make it a thing. I’m back in NYC and it’s my first official day as Codecademy’s Lead Designer!

This beautiful little papercraft NYC was on my desk when I arrived!

Watch out for us this year, gang. Big things coming.

More on Codecademy:

• Codecademy: Next Frontier In Digital Education Movement (Forbes)
• Cracking the Code to Get a Job (CNN)
• New York Mayor Michael Bloomberg takes coding course (BBC News)
• Getting with the Program: Code Year (The New Yorker)

Things to Do in San Francisco

Here’s a big, ever-updating list of places I want to visit in San Francisco—everything from attractions to restaurants to tech companies. I’ve been working on it privately for awhile now. If you’re new to San Francisco, you may find this helpful! (And if you’ve been here awhile, I’d love to hear your top recommendations.)

The list and a few photos after the jump.

Continue reading…

Tumblr Themes: How to Render Tags in a Comma Separated List

This is a quick tutorial on displaying tags on your Tumblr in a comma-separated list. I was prompted to share these instructions by Dorijan Covran, who wrote in to inquire about my method:

I recently started modifying a Tumblr theme and want to achieve a similar layout of tags like in your Midday Latte blog. Could you share some insights or code to achieve this?

For this example, I’m using the HTML straight out of the custom theme documentation.

{block:HasTags}
  <ul class="tags">
    {block:Tags}
    <li><a href="{TagURL}">{Tag}</a></li>
    {/block:Tags}
    </ul>
{/block:HasTags}

Without any styling, the above generates a bulleted list of the tags for that post, with each linking to a tag page. Something like this:

Hooray! Appropriately semantic. From here, I can use my stylesheet to do the rest of the work. The following CSS resets browser defaults for unordered list items, floats each one left so the list is inline, and adds commas (except for on the last item).

.tags li {
  padding: 0;
  margin: 0;
  list-style-type:none;
  display: block;
  float: left;
  }

.tags li:after { 
  content: '\002C\00a0';    /* Add comma and space after each tag */
  }  

.tags li:last-child:after {
  content: ' ';    /* Eliminate comma after last tag */
  } 

Here’s what those additions produce. Ta-da! A comma-separated tag list.

One last note—if you want to add the number symbol (#) before each tag so that they look like hashtags (like #ui, #wireframes, #planning), just add this declaration to your CSS:

.tags li:before { content: '#'; }

Tumblr Themes: How to Add Fluid Width Video

If you want to expand your YouTube, Vimeo, and other embedded videos out of the 500-pixel wide Tumblr standard and make them scale fluidly, this post is for you. These instructions assume you’re familiar with CSS and customizing Tumblr themes.

Here’s the problem—when you use the {Video-500} variable, your video will come with fixed width and height attributes. Unlike images, you can’t resolve this problem with a simple max-width:100% declaration because the height won’t resize proportionally. You’ll end up with a really wide, short video. This solution will always present your video with a 4:3 ratio, even as the containing element is resized. (See here for an example of the fluidity at work.)

In your HTML…

When setting up your {block:Video} block, make sure your {Video-500} variable is in a container <div> with a class name. I’m going to use media. Here’s the example.

<div class="media">{Video-500}</div>

In your CSS…

Add the following rules to your stylesheet. (If you used a different class name for your video container, replace media with that.)

.media {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden; 
  }

.media iframe, .media object, .media embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

Note that padding-bottom:75% results in a video height that is 75% of the video width—in other words, the video is displayed with a 4:3 ratio. Feel free to adjust this number if you’re posting video in another aspect ratio.

Update: A really neat jQuery plugin was just called to my attention—FitVids.js facilitates fluid width video and gives you perfect aspect ratio. (Thanks for the tip, Rogie!) Also, I almost forgot to note—this solution was adapted from this post on elastic video.

Refreshing Midday Latte

If there’s one thing I’ve learned about myself and blogging, I have to keep things fresh to stay interested. It’s been a few months since I’ve written a real blog post—partly due to busyness, but mostly due to the stale design. It was time to spruce things up around here!

Previous version of Midday Latte, March 2011 – August 2011

Since Midday Latte’s initial design, I’ve learned a lot about how I like to use Tumblr and what’s possible when building a theme for it. The code has been completely overhauled to reflect those lessons, but I kept the visual style similar to previous iterations.

Midday Latte, refreshed!

So, what’s new in version three?

• Rebuilt the layout from scratch with responsiveness in mind. Simplified the HTML (I got a little happy with semantic HTML5 elements in previous iterations), animated the layout transitions on resize, and switched to TypeKit for font serving. (Did you hear they were acquired by Adobe? You did? Like, a thousand times? Okay, sorry.)
• Implemented maximum width photos and video, breaking out of the standard Tumblr 500px column. Woohoo! Level up! I’ll share these hacks soon.
• Dropped in an easy-peasy infinite scroll script by Cody Sherman. Rock ‘n’ roll.
• FB Comments plugin in, Disqus out. I like Disqus, but styling it is kind of a pain in the keester. FB Comments looks and plays nice right out of the box.