Web Design Weekly #90


Chrome DevTools Revolutions 2013

In this presentation Paul Irish explores new features like emulating mobile devices, remote debugging, Canvas and WebGL profiling, Sass preprocessor support, developing completely within Chrome using the new Workspaces support and 20 other features that are brand-new. (youtube.com)


Writing Testable JavaScript

We’ve all been there: that bit of JavaScript functionality that started out as just a handful of lines grows to a dozen, then two dozen, then more. Along the way, a function picks up a few more arguments; a conditional picks up a few more conditions. And then one day, the bug report comes in: something’s broken and it’s up to us to untangle the mess. (alistapart.com)

Hackers Experiment With White House “We The People” API

Earlier this year the White House opened the API of its online petition tool, We The People, allowing independent developers to create applications using petition data. The White House invited a group of developers to participate in a hackathon to create apps with whatever data they could find within the millions of signatures. (fastcompany.com.com)

Designing CSS Layouts With Flexbox Is As Easy As Pie

Flexible box layout is a new box model optimised for UI layout. As one of the first CSS modules designed for actual layout, it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space and source-code independent layout. (smashingmagazine.com)

How Google Unified Its Products With A Humble Index Card

At Google’s I/O conference, Google Maps and Google+ each received massive makeovers which further consolidated the user experience across its products. Google’s “cards” really are just humble white rectangles, but they have become the company’s new voice for data, imbued with a seemingly effortless tangibility that seems to scale to any interface on any hardware. (fastcodesign.com)

Design Patterns in WordPress: An Introduction

Tom McFarlin takes a look at common software design patterns, specifically in the context of WordPress, how they’re useful and some practical examples that can be used in themes and plugins. This is an ongoing series on the tutsplus network, and the first 4 parts are available now. (hub.tutsplus.com)

Create a 3D CSS Animated Box with Sass

Flippin’ Awesome is a new site created by Brian Rinaldi which is starting to have some really great content. In this post Jaime Quiroz explains how to create a 3D animated box using Sass and Compass. (flippinawesome.org)

Upping Your Type Game (jessicahische.is)

‘Scope’ in CSS (csswizardry.com)

Support this newsletter by becoming a member for the price of a coffee →

Tools / Resources

GitHub workflows inside of a company

A great post by Nicholas C. Zakas about the different ways companies use GitHub. If you happen to use GitHub in your workplace this article has some great information. (nczonline.net)

Prepros – Preprocessing Windows App

Prepros is the Codekit for Windows. Prepros can compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown. (alphapixels.com)

How to solve the ‘sharing huge design files amongst teams’ problem (medium.com)

Clientside Package Management – Less Work, More Awesome (youtube.com)

How to keep up to date on Front-End Technologies (uptodate.frontendrescue.org)

The Sass & Compass For Designers book (sassandcompass.com)


Ethan Marcotte – The Map Is Not The Territory

In this presentation Ethan looks at some ways in which our audience reshape the way we think about our medium and see where they might be leading us. (vimeo.com)

Mediocre ideas, showing up and persistence (the-pastry-box-project.net)

Designing blogs for readers (mattgemmell.com)


Become a Designer at Stripe!

We’re looking for designers who can make detailed graphics, but also have a deep understanding of how applications should work and more importantly, how they should feel. (stripe.com)

Advertise in next weeks newsletter

Last But Not Least…

Stylify Me – Online Style Guide Generator (stylifyme.com)

Using Modernizr – The Do’s and Dont’s (css-tricks.com)