Web Design Weekly #132


People Skills for Web Workers

As the web continues to transform our society—in ways that both excite us and scare us—we need more than new technologies to keep up. We need collaboration. (alistapart.com)

100 Premium Infographics from Ingimage

With this bundle you’ll get 100 different high-quality infographics to help bring your data to life. Available as EPS files. Normally sells for $99, but for a limited time, you can get all 100 high-quality infographics for just $18 (82% off). See the examples. (mightydeals.com)


Virtual Reality in the browser with the Device Orientation API

In this article Rich Tibbett breaks down and explains practical usage of device orientation event data so we can incorporate device orientation event data in to our web applications. (opera.com)

CSS performance test: Flexbox v CSS Table – Fight!

A good write up by Ben Frain about why the latest Flexbox implementation is slower than CSS table layout. (benfrain.com)

Naming UI components in OOCSS

An interesting article by Harry Roberts on ways to name UI components. (csswizardry.com)

CSS animations and transitions performance

In this article Max Vujovic explains how browsers handle CSS Animations and CSS Transitions, so you can develop the understanding around whether an animation is likely to perform well or not. (adobe.com)

How to go freelance

Going freelance is one of the scariest career moves you can make. But done well, it can make you better off, give you more freedom and, more importantly, make you happier. (medium.com)


A behind the scenes look into Flipboards layout engine. (flipboard.com)

WebP improves while rolling out across Google (chromium.org)

Do HTML5 apps have to be online all the time? (christianheilmann.com)

Visual Inventory (danielmall.com)

If one hit a week isn’t enough, follow @wdweekly on Twitter

Tools / Resources

Understanding ECMAScript 6

Nicholas Zakas has written many books over the years. But this one “Understanding ECMAScript 6” is free and being openly written from the beginning. (nczonline.net)

Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. (tympanus.net)


Ever wondered what the difference between Adaptive, Responsive, Static and Liquid sites is? Well this small demo site should help answer them. (liquidapsive.com)


Reasons HTML and CSS might make you say what the f&*k. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. (wtfhtmlcss.com)

Webdesignrepo – a curated collection of helpful links (webdesignrepo.com)

The Ultimate Frontend Build Tool: make (algorithms.rdio.com)

Recommended GitHub Atom Packages (elijahmanor.com)

Flexbox Grid (flexboxgrid.com)


Choose tools you’ll use

Some wise words by Addy Osmani about not getting overwhelmed by all these tools we have at our disposal. (the-pastry-box-project.net)


A portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. (patatap.com)

Webstock conference talks (webstock.org)

Free Radicals – CodePen (codepen.io)

Often Be Coding (medium.com)


Digital Designer at Campaign Monitor

We’re looking for a world-class digital designer to bring their own style, expertise and wealth of experience to our team – and help continue pushing the brand and product to new and exciting places. (campaignmonitor.com)

From The Blog

Shaping CSS

Over the years CSS has really evolved and I thought it might be a good time to stop and take a look at some of the key players in our industry. The ones that are helping shape the direction. (web-design-weekly.com)

Throttle Bandwidth for Testing

Hopefully this article gives you a little insight and inspiration for doing bandwidth testing. As websites get bigger and bigger each year, we have a duty to provide the greater community the opportunity to also enjoy our creations. (web-design-weekly.com)

Last But Not Least…

The GIF tag the internet deserves

A web component for flexible GIF playback. Speed them up, slow them down, play them in reverse, synch multiple beats to a rhythm, synch them to audio, whatever you like. (github.com)

Picture element implementation in Blink (indiegogo.com)