After what feels like an eternity in the web community, Firefox’s Firebug web debugger just released version 2. By now I’ve moved my development tools entirely to Chrome; their DevTools have continuously iterated and pushed the ball forward. But fans of Firebug should be happy. There’s a lot that’s been added, most notably code auto completion and console log grouping.
All in one JS powered web app to rapidly generate fast cross-browser animations, written by web developer Joel Besada. It just came out today, but my first impressions are very positive. Instead of downloading a clunky, bloated Mac app for doing CSS3 animations, this feels a lot fresher and more lightweight. I was able to put together a fairly complex CSS3 animation quickly though I haven’t inspected the exported CSS in detail yet.
A few days away from the big E3 press conferences, Nathan Grayson over at Kotaku has mixed feelings and some nostalgia for what the event meant to him during his childhood. There’s also some good interviews with game industry veterans about the E3 of today: how it’s changed and whether it’s still relevant.
Mark Serrels, writing for Kotaku:
Just. Another. Shooter.
It feels like gamers, as consumers, are getting over shooting things in the face. And pretty damn soon I suspect they’ll become wary of paying for the privilege. It’s all just too familiar, too worn out. We need a new verb to enjoy. Once upon a time we jumped. We punched and occasionally kicked things. Then we mostly just shot things. We’ve been shooting things for too long. What will our new verb be?
This post indirectly supports yesterday’s editorial I wrote on Microsoft, Kinect, and the company’s big bet on AAA exclusives. In particular, another weakness of AAA games is their lack of flexibilty. With their huge budgets and often multi-year development cycle, they can’t easily adjust to changing consumer tastes.
Jason Rodriguez, writing for A List Apart:
Just like with responsive websites, there are three main components of a responsive email: flexible images, flexible layouts, and media queries.
The only difference between the web and email is in how these three techniques are implemented.
In email design, we have a limited subset of HTML and CSS at our disposal. We can’t rely on properties and values that designers use for responsive sites on the web; margins, floats, and ems don’t work in many email clients. So we have to think of workarounds.
Frankly before this post I considered “responsive” email as something of a lost cause. But there’s a lot of strategic, well explained code examples here that make me want to revisit the emails we regularly send out as part of our day job. At the very least check out Jason’s solution for flexibile images which has a very clean HTML and CSS-based solution.
Yes, Mad Men’s midseason finale was a week ago. But after an extremely busy week at work, I finally caught up to this A.V. Club review by Todd VanDerWerff and Sonia Saraiya and it’s incredible (spoilers for the episode below and of course in the post):
As aware as Mad Men is of the future—because it’s really about our present, told through the lens of 1960-1969—its characters are conscious of the past. Bert was a piece of that past—a piece laid to rest tonight, as astronauts did the unthinkable and miraculous. There is no moment that says the past is over more powerfully than the moon landing. And for this show, there is no more powerful moment that says the past is over than killing off Bert Cooper and selling his agency before his body is cold. Bert was the past, and now the show’s sense of past is gone. The future is now, as Cutler intimates to Roger—SC&P is becoming “the ad agency of the future.” And that means the next crop of people to die will be those characters currently left standing in the halls of the Time-Life building. Great moments have a way of boiling down to the exact same feeling—a dawning realization that outside of the hustle to stay alive, the only thing that is waiting for you, for sure, is death.
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.
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.
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.
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.