Web Design Weekly #155


Refining The Way We Structure Our CSS At Trello

We have seen a few posts of late that have given an overview of internal CSS. The more the merry I say! In this post Bobby Grace gives us a look into how Trello structures its CSS. Awesome post! (trello.com)

iOS8’s Mobile Safari is a big upgrade for the web (sencha.com)

Support this newsletter by getting yourhands on some WDW merchandise →


An animated banner ad with no images

During the last few months Chris Coyier has been doing custom advertisments on CSS-Tricks and on a recent episode of CodePen Radio he talked a little bit more about it. In this article Steven Fabre from the Campaign Monitor team explains his process for creating an ad for CodePen. I’m sure we will be seeing more ad’s like this in the future. Well, I at least hope so! (campaignmonitor.com)

Optimizing Webfont Selection and Synthesis

To be honest I had no idea of this concept until reading this post by Ilya Grigorik but it sounds great. Ilya goes into details about how you should consider using synthesized fonts as an optimization strategy. (igvita.com)

The next evolution for Safari and native webapps

iOS 8 is finally here and there are new APIs, as well as new challenges to support the new screen sizes. Max Firtman breaks it all down into an epic post. (mobilexweb.com)

My Take on WordPress

Some great words by Chris Lema about the healthy WordPress community. (chrislema.com)

Web Components

The godfather of the web design community Jeremy Keith chimes in with his thoughts on the “Web Components” movement. Wise words as always. (adactio.com)

CSS Audits – Taking Stock of Your Code (alistapart.com)

From AngularJS to React (risingstack.com)

Tools / Resources


A performance-first CSS framework. Simple modules and components that move faster than the speed of light. (github.com)


A sneak peek at a new project that the Facebook developers are working on for analysing and typechecking JavaScript. (youtube.com)

SVG Circus

A cool tool built by Alex Kaul that enables users to easily design animated SVG spinners, loaders and other looped SVG animations in seconds. (svgcircus.com)

Select CSS

Cross-browser styles for consistent select element styling. (github.com)

Fitter Happier Text

Performant, fully fluid headings. (jxnblk.github.io)

Nice slide deck on Web Components by Rob Dodson (speakerdeck.com)

Migrating a WordPress site to Digital Ocean (wptheming.com)

Sketch Plugins for Web Design (newmediacampaigns.com)

Official Apple Devices PSDs (apple.com)


Faith in eventually – by Jason Fried (signalvnoise.com)

Web Audio Editor (web-audio-editor.herokuapp.com)


Front End Engineer at Yelp!

Join Yelp’s Front-end team and help build a modern, styleguide-driven UX for our 138 million users! We’re looking for people who love good code and working closely with design, product and other engineers to make great features. (yelp.com)

Advertise in next week’s newsletter →

From the Blog

Understanding & measuring events with Chrome DevTools

Measuring performance is important and so important that we need a hash tag #perfmatters to discuss all the difficult scenarios and topics surrounding the question “How can I make my Website faster?”. In this post Dennis Gaebel dives into how we can measure the data with the Chrome DevTools Timeline panel. (web-design-weekly.com)

Last But Not Least…

A great selection of Design Patterns (codepen.io)

Dribbble v1 API (dribbble.com)

Git Pretty (justinhileman.info)