Web Design Weekly #127


Bye Bye Layer Hacks, Hello will-change

Have you ever used the translateZ hack to create a new compositor layer? Most developers have. Now there is an incoming property called ‘will-change’ that’s going to change how we tell the browser what we’re trying to achieve. (aerotwist.com)

Mobile Menu AB Tested: Hamburger Not the Best Choice? (exisweb.net)

Learn how to use WordPress in one hour without reading a word

Whether you’re new to WordPress yourself, or are looking for a better way to teach your clients how to work with WordPress, this 28-part WP101 video tutorial series will get you and your clients up and running in no time. (mightydeals.com)


How SVG Line Animation Works

If you are interested in the inner workings of SVG animation then this post by Chris Coyier should be one of your go-to pieces. It’s an 8 step guide that’s easy to follow and very informative. (css-tricks.com)

On Creative Direction

Daniel Mall does an extraordinary analysis of what “Creative Direction” means in a digital context, compared to art direction and design. He covers various areas of confusion with great clarity. (danielmall.com)

Designing apps for the visually impaired

As a designer or developer, it’s normal to want to get as many people using your creation as soon as possible. Unfortunately, there are many people who suffer from various forms of disability that could potentially hinder the experience they have with your work if these disabilities have not been taken into consideration in the design process. (realmacsoftware.com)

Build a Web app with component

Component is a front-end package manager created by TJ Holowaychuk. It embraces the philosophy of creating small and reusable modules. (kewah.com)

The science behind fonts and how they make you feel (thenextweb.com)

Making sandboxed iFrames better (blog.codepen.io)

Tools / Resources

PNG Hat – A Better Way To Slice Photoshop Designs

It’s a Photoshop plugin that helps with exporting layers to files. Just select the layers, click export and you are ready to publish. What? PNG Hat instantly uploads exported assets and generates a code snippet ready to be pasted into your site or app. (madebysource.com)

FontPrep – Web Font Generator for Mac OSX

FontPrep takes your TTF and OTF font files and generates all of the respective font-formats for the web: WOFF, EOT and SVG. (fontprep.com)


A bridge between React and Backbone enabling data binding between models/collections and components both on the client and server sides. (gtihub.com)

Addy Osmani – Automating Front-end Workflow

A good introduction to the Yeoman workflow – a combination of three tools working together to help you out on the front-end.  (youtube.com)


A stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity. (github.com)

Recordit – Record screencasts fast & free! with GIF Support! (recordit.co)

Angular App Structuring Guidelines (johnpapa.net)

Build Wars – Gulp vs. Grunt (markdalgleish.github.io)

ES6 Fiddle (es6fiddle.net)


Why you should move that button 3px to the left

A great post by Braden Kowitz about how to convince engineering and product managers to care about design right up to public launch. (gv.com)

Walking Out On Walking Out (medium.com)

Colour Schemes (daylerees.github.io)


JavaScript Engineer at Automattic

We’re building new ways to interact with WordPress. They’re simple, fast, and highly usable. They’re written in the latest web technologies and are being used by millions of people. We want you to help. (automattic.com)

Front-end Developer at Digital Telepathy

Create some of the best user experiences on the web with digital-telepathy’s top-notch design and development team. We’re a user experience design company looking to improve the design of the web and you can be a part of it. (dtelepathy.com)

Post a Job in Web Design Weekly →

Last But Not Least…

ViziCities released as open-source

ViziCities is a 3D city and data visualisation platform, powered by WebGL. Its purpose is to change the way you look at cities and the data contained within them. It is the brainchild of Robin Hawkes and Peter Smart (rawkes.com)

Great little Photoshop extension for avatars (randomuser.me)