National Novel Writing Month Kicks Off

It begins.

I’ve done a bit of planning and outlining for the book that I’ll be writing for National Novel Writers Month. I’m really looking forward to getting started today. This will (hopefully) be the first book that I’ve ever written, and honestly the challenge is a bit intimidating.

I’ll be keeping track of my progress here and on my NaNoWriMo account.

Here goes nothin’.


Fluid Videos with Nothing but CSS

There are a number of great open source javascript and jQuery plugins out there that are built to handle fluid width videos. There are plenty of reasons to go with a jQuery solution, most notably if you already have a site full of content and don’t have the time or desire to go back and refactor the markup surrounding your embedded videos.

In many cases, though, loading a jQuery plugin may not actually be necessary, or you may not be able to find a plugin that supports the video player that you’re using.

The inherent problem with fluid videos is that browsers don’t quite know how to handle scaling videos and their fancy aspect ratios.

It turns out, though, that browsers are really great at keeping intact the aspect ratios of images as they scale them up and down. Using this bit of knowledge, and a bit of CSS hackery, we can trick the browser into being a lot smarter than it thinks it is.

Let’s start by looking at how it’s done and then we’ll look at why it works.

Maintaining the Ratio

First, we’ll create an image that will sit behind our video and ensure that our video container scales correctly and consistently as the browser resizes. I’m using a 16px x 9px png image, weighing in at a feathery 82B, to maintain a 16:9 ratio.

The Markup

<section class="video-wrap">
    <img src="/path/to/16x9.png" class="ratio">
    <!-- our YouTube embed code -->
    <iframe src="//" class="video" frameborder="0" allowfullscreen></iframe>

The Styles

.video-wrap {
    padding: 0;
    position: relative;
    width: 100%;
.video-wrap iframe,  
.video-wrap object,  
.video-wrap embed {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
.ratio {
    height: auto;
    visibility: hidden;
    width: 100%;

So how does it work?

The trick here is in the way that position: absolute; and position: relative; work together.

When you set an element to be position: absolute; it collapses the div and removes it from the DOM tree. By setting the parent div (in this case video-wrap) to position: relative; we then make our position: absolute; div relative to the parent – allowing us to contain it within our wrapper.

From there, we essentially pin the video to the edges of our container div with left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; and allow the image to set the dimensions of our container.

See it in action


Making Incremental Improvements

I read an article a few months ago about a guy who allowed a password to change his life. The premise was simple – his company forced him to change his password every 30 days, so every month he would focus on improving one single area of his life.

It started with forgiving his ex-wife and over the ensuing two years turned into quitting smoking, saving for vacation, and eventually saving for a new ring for his new love.

The concept intrigued me.

There are a lot of areas of my life that I want to improve on, both personally and professionally, but I’d never thought to break them into pieces and focus on one at a time (it seems obvious now, but sometimes the obvious isn’t so obvious).

One step at a time.

Starting Now

Next month is National Novel Writers Month and I’ve been challenged by a coworker to write 50,000 words. Challenge accepted.

I’ve already started researching and outlining a book that I’ve wanted to write for a while and will begin writing on November 1.

I decided to step a bit outside of the fiction-writing theme of NaNoWriMo (as they call it) and am focusing on writing something related to web development, in order to satisfy part of that desire for professional improvement.

Going Forward

Like I said, there are many areas of my life that I want to improve upon. In the coming months, I’m going to break them down and focus on one at a time.

Growing up, I played a lot of sports. That, combined with teenage metabolism, meant that I could eat virtually anything I wanted and not gain any weight. As a result, I’ve never had to learn food discipline… and it’s beginning to show.

So, in December, I’ll turn my focus to my eating habits and work on teaching myself to be a more disciplined eater.

In January, I’ll focus on improving work-life balance… or finding some semblance of it.

I challenge you

Incremental improvements can lead to large cumulative results.

Everyone has areas of their life that they want to improve on. I challenge you to spend the next 30 days focusing on improving a single area of your life.

I’d love to hear what you choose and how it works for you.


10up Takes On New Orleans

The last few days, my pod at 10up has been in New Orleans for our annual meetup. It’s the first opportunity I’ve had to meet the people that I work with every day (which is a weird concept in itself, that I’m still getting used to), but everyone has been so awesome.

We spent the day yesterday working on some updates to the WordPress image editor, which was my first foray into (possibly) contributing to core. Our original goal was to add <picture> style art direction support to the image editor, but the lack of hooks within the wp_image_editor() UI prevented any manipulation.

So rather than building a hacky work-around, we took an opportunity to solve what we saw as an issue in core.

Challenge Accepted

It’s no secret that I’ve been trying to discipline myself to write more. A personal challenge that I’ve failed numerous times.

Then last night at dinner, Eric Mann informed me that next month is National Novel Writing Month and challenged me to write 50,000 words in the month of November. And I, never being one to back down from a challenge, accepted.

I’ve been kicking around the idea of writing a book for quite a while, but have always put it off. I believe this will provide the extra push (and accountability) that I need to finally put metaphorical pen-to-paper and get it done.

All in all, I’ll echo something that Faison Zutavern said about his pod meetup: I came to New Orleans with a bunch of co-workers and am leaving with a bunch of friends.


Building Faster, More Scalable WordPress Sites Using the Transients API

The WordPress Transients API is a super useful way to temporarily store cached data. It was introduced in WordPress 2.8 (all the way back in 2009, so it’s pretty much an antique or something now), but I’ve only recently become more aware of it and started using it heavily in production… as always, I find myself late to the party.

The Transients API is virtually identical to the Options API, except for the added ability to set an expiration on whatever data that you’re storing… it even uses the wp_options table to store data.

Unfortunately, the Transients API seems to be relatively misunderstood by a lot of developers. With this post, I’m hoping to help sort out at least a little bit of that confusion.

When should I use transients?

As a general rule of thumb, you should use transients to cache:

  • External requests (Twitter API, RSS feeds, etc)
  • Complex, slow database queries
  • Queries with results that rarely change

Say, for example, that you’ve coded up a Twitter widget to put on your site. Twitter would probably not be very happy if you’re making requests to their API every single time a visitor on your site loads a page.

By using the WordPress Transients API, you can keep a cached version of Twitter’s response on your server; meaning you only need to make requests to their API once every 10 minutes, for example, fetching updated data only when the transient expires.

Providing these static, cached copies of expensive queries and external requests translates into a much more performant website and much lower overhead on your servers; allowing your site to scale more quickly and efficiently.

How do I use the WordPress Transients API?

If, for example, you wanted to store your WP_Query results in a transient… this is how that would look:

// Check if the transient exists
$portfolio_query = get_transient( 'myblog_portfolio_query' );

// If the transient does not exist, run our portfolio query
if ( false === $portfolio_query ) {
    // Query args
    $portfolio_args = array(
        'post_status' => 'publish',
        'post_type'   => 'portfolio',

    // The query
    $portfolio_query = new WP_Query( $portfolio_args );

    // Set a new transient only if there are no errors and we have data to store
    if ( ! is_wp_error( $portfolio_query ) && ! empty( $portfolio_query ) ) {
        set_transient( 'myblog_portfolio_query', $portfolio_query, 2 * HOUR_IN_SECONDS );

Transients use key-value pairs to store your data, meaning you can store your data in a key that makes sense to you, your theme, or your plugin (in this case, myblog_portfolio_query) and can use that key to retrieve the value stored within it.

So in the sample above, myblog_portfolio_query is our transient name (key), $portfolio_query is the object or value that we’re storing in that key and 2 * HOUR_IN_SECONDS is the length of time that we want to store that data.

One of the things that makes dealing with transients interesting is that you can never assume that your data will be there. By their very nature, transients expire and disappear. So as a developer, you have to account for a range of possibilities.

If the transient doesn’t exist, it will return false. That’s the reason that, in the sample above, that we check if ( false === $portfolio_query ). We only want to execute our query if the transient does not exist.

Implementation is Everything

Remember… transients are temporary. Do not rely on them being there.

Another curveball comes in the form of Memcache, a caching system that stores data in memory, rather than in a database. Memcache uses an allotted amount of memory to store data and begins dropping off the least active data as it needs more space. This means that even if you’ve set a transient to expire in three hours, it may only exist for one or two hours.

So, I’ll say it once more. Do not rely on them being there.

That said, transients can be a very powerful way to store cached data that needs to expire. If you’re interested in reading more about the WordPress Transients API, I recommend checking out the Codex page.

One final note – make sure you keep the character length of your transient names under 45 characters… otherwise, your mileage may vary.

I’ve only scratched the surface of how transients work and how to use them. Though transients may seem a bit intimidating at first, I highly encourage you to take the time to tinker with them and see how they affect the performance of your site.

(Photo courtesy of BeautifulDFW)