Web Design Weekly #157


Building OS X Apps with JavaScript

OS X Yosemite introduced JavaScript for Automation. This makes it possible to access native OS X frameworks with JavaScript. Tyler Gaw goes into all the details! (tylergaw.com)

If you’re just changing resolutions, use srcset (css-tricks.com)

Build awesome sites with themeforest!

Launch beautiful, responsive websites faster with themes and templates for WordPress, Joomla, Drupal, Magento, Landing Pages and more. (themeforest.net)

Sponsor Web Design Weekly and reach over 21,206 Developers


An Unconventional Review of React

James Shore does a great review of React. If you haven’t had the time to do your own research on React this is a great starting point. Highly recommended. (letscodejavascript.com)

Beware of Selector Nesting in Sass

During the last few years there has been lots of talk about nesting in preprocessors (good and bad). In this post Hugo Giraudel points out some things we should be mindful of and why we should be aiming for a simplified codebase, not a complex one. (sitepoint.com)

Better @font-face with Font Load Events

Zach Leatherman argues that the current implementation of @font-face is actually harmful to the performance and usability of the web and explains a few ways into making it better. (dev.opera.com)

Prefixing in WordPress Themes

An important best practice when coding a WordPress theme or plugin is correct prefixing. In this post Fränk Klein explains why prefixing is needed not only in PHP but in WordPress specifically and how to go about it properly. (themeshaper.com)

New section on CSS Guidelines – Architectural Principles (cssguidelin.es)

Jank Case Study – theverge.com (chromium.org)

Tools / Resources

Font Family Reunion

A handy tool by Zach Leatherman that makes looking up default font lists for different operating systems easy. Zac also did a nice write up on the process which is also worth checking out. (fontfamily.io)


I’m not completely sold on this idea yet but it is an interesting approach for writing CSS. The CSStyle approach is to use a set of SASS mixins to help make your CSS readable and semantic by generating your selectors for you. It also handles things like specificity and nesting. (csstyle.io)

Lazy Line Painter

A jQuery plugin for SVG path animation. (lazylinepainter.info)

CSS Next

Use tomorrow’s CSS syntax, today. (github.com)

New in Angular 1.3 – $scope.$watchGroup (egghead.io)

Cubic Bezier Curves – Under the Hood (vimeo.com)

Using Sass with Jekyll (markdotto.com)

An awesome web based colour palette tool (jxnblk.github.io)

Random Gradient Generator (paintbycode.github.io)


Pull Requests screencast by Adam Morse

In this screencast Adam explains how easy it can be to make a simple pull requests to an open source project. Warning, he is extremely talented with Vim/CLI! (vimeo.com)

What goes around comes around. (blog.offscreenmag.com)

How GitHub is using Web Components in production (webcomponents.org)


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 →

Last But Not Least…

Advanced Debugging Techniques with Chrome

Paul Irish digs into some advanced JavaScript debugging techniques and shows how to be effective. Lots of great tips to become a better developer in this clip! (youtube.com)

If one hit a week isn’t enough, follow Web Design Weekly on Twitter!