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.
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.
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.
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.
Clever Grunt plugin to simulate a very slow internet connection during web testing. This should be extremely useful for high weight pages, especially with those where large images do the heavy lifting.
As I came to understand quickly with my day job, working with international dates can be a major pain across different languages on the web. Not only are you dealing with traditional localization issues, but the format and order often changes significantly. For a while I tried relying on a simplistic in-house JS solution, but that fell apart as our site expanded to a progressively higher set of languages.
Moment.js is an excellent solution to this date problem. Download the languages you need and you’ll find yourself up and running very quickly, whether the issue is display or more complex manipulation.
Influential developer Julie Ann Horvath was recently in tech news for her public resignation from GitHub over harassment during her two year tenure. It’s illuminating hearing her story first hand and underlines a startup tech culture that’s can be very unfriendly towards women. It’s not an easy listen, but it’s important for the community to hear more stories like this so it can actively change for the better.
It’s not just a talk about Julie’s GitHub work experience either; she gives advice for moving your tech career forward, sharing workload among a team and much more.
Designer Eric Portis goes over the many growing pains for the web and responsive images. There’s a lot code, a lot of math, and generally a lot of trouble. Note Eric’s proposed solution – a single img tag with both srcset and sizes attributes – doesn’t exactly look like what browser manufacturers fully agreed upon as of last month. But even with the slightly more verbose picture element, the srcset and sizes idea remains. I especially loved Eric’s illustrations on this post; they’re smart and funny.