Archive: May, 2014

How we made The Last of Us’s interface work so well

A guest Kotaku post by Naughty Dog’s Alexandria Neonakis on UI design within one of the most critically acclaimed games from 2013. I love seeing how the interface changed over time. It’s an especially cool look considering how rarely we get behind-the-scenes access to AAA game design.

Picturefill 2.0

It’s exciting to be able to deploy a true “finalized” responsive image spec to the public, something in upcoming months that should be rapidly adopted by the browsers. That’s exactly what happened to us at Pocket – a stable version 2.0 release came out a few weeks before I needed it for our latest major release. If you’re already using some other, competing responsive image solution, I’d recommend looking into Picturefill and consider switching over. It’s a polyfill that’s very well equipped for the finalized picture element.

The implementation was pretty painless, though I did find occasional image pop-in when using the srcset attribute in a solo image (no picture element). There’s also sometimes a double image download in already native-supporting srcset browsers (e.g. latest Chrome). It’s a known temporary issue and only a minor downside given Picturefill’s overall benefits.

Politespace

As part of my work on the Pocket Premium purchase flow, I integrated the Filament Group’s Politespace plugin for our credit card form field. It’s pretty simple: when the user blurs off the input field in question we auto add spaces to improve readability (e.g. in our case for Visa cards we add spaces between every four characters). When a user focuses back on said field the spaces are removed.

Pocket Premium

It’s very rare I write a plug about my day job here, but this deserves a mention: today Pocket unveiled Pocket Premium, a for-pay subscription service that adds permanent library, full-text search and suggested tags to the core (free) Pocket platform. It was a huge effort among the whole team and my web work added significant improvements for all users: a slicker, smarter search, a conversion of the whole site to a smarter blend of Typekit, Picturefill 2 for responsive imagery across our marketing pages and much more.

A practical guide to web app success

Cool online book by author Dan Zambonini on getting a web app off the ground successfully. As he writes:

You’ll find processes, statistics and resources that you can use for the entire lifecycle of your app, from developing the seed of an idea to post-launch promotion. Rather than getting bogged down with unnecessary detail and opinion disguised as best practice, this book concentrates on the critical points of each topic to ensure a well-rounded app that’s equipped for even the most demanding users.

That’s the key – it’s short and very much to the point. And it’s completely free.

A cure for Hacker News overload

Engineer Jeff Miller put together a simple but well thought out Python bot that tweets Hacker News stories:

Here’s a robust cure for Hacker News overload: use score thresholds. This solves the problem of too many stories by cutting out low-scoring noise while still leaving behind those links interesting enough to have been upvoted by the HN community.

I’ve created a handful of Twitter and RSS feeds that apply score thresholds to Hacker News. Stories enter the feeds in near real-time as soon as they reach X points on the main HN site.

Building Flickr’s new hybrid signed-out homepage

The Flickr web developer team breaks down the usability and performance considerations behind their new signed out homepage. There’s a lot of solid content including emphasis on 3d transforms to keep CSS animations fast and throttling JavaScript-based scroll events.

The rise of the bespoke TV series

Vulture’s Matt Zoller Seitz writes on TV series that are breaking away from the traditional 13 to 26 episodes per season format. It’s a concept often mentioned on social media and the occasional blog post, but Seitz constructs the best argument to date. He cites influences like the BBC and Netflix, along with our changing viewing habits and mediums (e.g. TVs, computers, tablets) to help shape the “anything goes” approach that defines a lot of TV today.

Working from home

In the last year I’ve worked more from home than I have in all my previous roles combined. It’s a move that comes with both a lot of freedom but also new challenges. Tech writer Matt Gemmell writes about the subject at length in this post. There’s plenty of smart advice that’s worked for me as well in practice, especially sticking to a schedule and scheduling blocks of time for email.

A matter of workflow

Web designer and developer Dan Davies ran a fascinating experiment; he asked twenty three UK-based web developers on their workflow and overall opinions on responsive web design. As you might imagine there’s a lot of repetition, but many answers were insightful, especially those regarding tools used (a handful of which I’ve barely heard of) and pitching RWD fundamentals on clients.