Web Design Weekly #101


Solving rendering performance puzzles

Jake Archibald hit a rendering performance issue recently. He explains how he tracked it down. Awesome post! (jakearchibald.com)

Emmet LiveStyle is a plugin for live bi-directional CSS editing (livestyle.emmet.io)

Amazon Appstore Now Open To Web Apps (techcrunch.com)

Chrome Status (chromestatus.com)


Checking in front-end dependencies

Package management is an important and evolving area in front-end development. In this post Addy Osmani disscusses whether or not to check-in the dependencies installed by your package manager into source control. (addyosmani.com)

Benchmarks and Results for Topcoat

Topcoat has been getting a lot of traction of late for good reasons! This post/screencast gives some insight into getting Chromium Telemetry up and running for cross-chrome-platform performance testing. (topcoat.io)

Taking Control of Image Loading

Image loading seems to be something that’s either overlooked entirely, or handed off to unnecessarily large plugins. Having a beautiful, smooth and speedy loading experience for your site is a crucial part of good UX, and should be considered a common courtesy to your designer. (barrelny.com)

Mobile Design Details: Performing Actions Optimistically

The situation on mobile is dire. People expect a faster experience on mobile than they get on the desktop but the networks connecting them to your service are naturally slower. As a result, your Web site or native app ends up fighting performance on both sides. In these situations it really pays to be an optimist. (lukew.com)

Modular CSS, an example

The main take away from this post by John Long is it’s best to avoid nesting your Sass code to make it easier to read and maintain. (thesassway.com)

How They Did it: Rebuilding 8 Faces (tutsplus.com)

Being Practical (timkadlec.com)

Tools / Resources

Harpoon T-shirt Giveaway

Meet Harpoon, a financial planning and metrics app for freelancers. This month we’re giving away a handful of snazzy Harpoon t-shirts to celebrate our upcoming launch. Check out our blog post for more information! (harpoonapp.com)


An open-source web server with built-in pre-processing. Harp serves Jade, Markdown, EJS, CoffeeScript, LESS and Stylus as HTML, CSS & JavaScript. No configuration necessary. (harpjs.com)


Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. Pretty handy! (github.com)

MEAN Boilerplate

A boilerplate that provides a nice starting point for MongoDB, Node.js, Express, and AngularJS based applications. It is designed to give you a quick and organised way to start developing web apps with useful modules like mongoose and passport pre-bundled and configured. (github.com)

Why Does Angular.js Rock?

Angular.js is a Javascript framework which is maintained by Google. It excels in the creation of single page applications or even for adding some “magic” to our classic web applications. (angular-tips.com)

Web Tracing Framework

An awesome looking tool from Google. It’s designed to help you analyse and visualise performance issues. (github.com)

Should you review code that you’re not familiar with? (the-pastry-box-project.net)

Web Performance Crash Course (youtube.com)


Creative Link Effects

Some awesome CSS transitions on pseudo elements in this Codrops demo. (tympanus.net)

Designed with Windows

We need to step outside our calm, forgiving world of beautiful software and embrace the volatile and slightly broken real world. It might not be quite our taste, but it’s where we’ll find most of our users. (medium.com)

The Big Web Show #95: Jake Archibald (5by5.tv)

CSS3 Geometry (css3geometrydaily.tumblr.com)


Senior Network Engineer @ Campaign Monitor

Campaign Monitor is seeking a Senior Network Engineer to help them improve and scale their network. They send over 1 billion emails every month and their network needs to scale and ultimately enable Campaign Monitor to deliver the best user experience possible. (campaignmonitor.com)

Advertise in next week’s Web Design Weekly

Last But Not Least…

The Subtle patterns photoshop plugin!

Imagine the immense library from Subtle Patterns, fed directly into your Photoshop panel – always in sync! It’s finally possible with our plugin for Adobe Photoshop. (plugin.subtlepatterns.com)

Cloud Cannon CMS

A cool looking service for simple websites with a great client editable feature. All your files live in a dedicated Dropbox folder and they do the rest. (cloudcannon.com)

Dude, I redesigned Facebook! (will-grounds.roon.io)