Web Design Weekly #178


Strategies for Staying on Top of Web Performance

Web performance is hard. Staying on top of web performance is harder. Thankfully in this post Chris Coyier shares some great knowledge to help ease the pain to make sure our sites stay lean. (css-tricks.com)

Species in Pieces

Some amazing CSS polygon, design and animation work by Bryan James. Great to see good old CSS being used for this. (species-in-pieces.com)

No more noisy neighbours. Quad-Core SSD Dedicated Servers – UK Based

Quad-core dedicated server, 128GB SSD, Single 500GB HDD, 4GB RAM, 24×7 UK support, Control panel, Reboot & KVMoIP requests, alerting & monitoring as standard. No minimum contract – pay monthly. (easyspace.com)


Precise Control Over Responsive Typography

Super interesting post by Mike Riethmuller that explains how you can have precise control over responsive typography using calc() and viewport units. He goes into details on how you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range. (madebymike.com.au)

Different Ways To Use SVG Sprites In Animation

Sarah Drasner explores some techniques for using SVG sprites in complex animations. (smashingmagazine.com)

CSS Testing with PhantomCSS, PhantomJS, CasperJS and Grunt

If you are keen to have more certainty when you hit that deploy button then CSS regression testing is something that I would highly recommend you look into. In this post Micah Godbolt gives you the lowdown on how to get up and running. (phase2technology.com)

Redesigning the Login Screen

A nice case study by the GoSquared team about finding the balance between security and usability on their login screen. (gosquared.com)

HTTP/2 for a Faster Web

As HTTP/2 gains more and more traction we will be seeing a lot more articles about it. If you haven’t had time to read up on it yet, this piece by Benjamin Patch is a great introduction. (cascadingmedia.com)

New JavaScript techniques for rapid page loads (blog.chromium.org)

Tools / Resources

A Collection of Compatibility Tables

Zach Leatherman has collected 16 resources that help with making important decisions about new web feature production readiness, inform our best practices and help us troubleshoot strange issues in cutting edge browsers. (zachleat.com)


Sanitize follows in the footsteps of normalize.css and reset.css but is the new school version. (jonathantneal.github.io)

Babel – Beyond the Basics

Sebastian McKenzie, creator of Babel presents a nice, short 12 minute talk that digs into some of the ES6/7 features and optimisations Babel provides, including some upcoming React optimisations. (youtube.com)

Great Uses for Sass Maps

Una Kravets looks at why Sass maps are an awesome tool for organising your code, minimising duplication and making your codebase less prone to overall careless errors. (sitepoint.com)

Getting Started with Jekyll (developer.telerik.com)

Making Pinterest HTTPS (engineering.pinterest.com)


CSS Sans

Not everyday you see a font made out of CSS. (yusugomori.com)

UI Animation Reviews – Web Navigation (valhead.com)


Web Design Course Instructor for Tuts+

Here’s the challenge; we want you to teach our students how to design for the web. We’re looking for web designers to teach video-based courses at Tuts+. Get paid a competitive rate to share your knowledge and experience with the millions of students using Tuts+ every month. (tutsplus.com)

Front End Engineer at Yelp

Join Yelp’s Front-end team and help build a modern, style guide-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)

Need to find passionate developers? Why not advertise in the next newsletter!

From the blog

Barebones ES6 project using Gulp

Dennis Gaebel previously discussed preparing for ES6, but in this post he take things one step further and examines an actual project using the tools he discussed in that article. He explains the steps required in order to setup a barebones ES6 project with the help of our faithful tooling companion Gulp. (web-design-weekly.com)

Last but not least…

JS1K 2015 Defender by Keith Clark

Keith Clark’s JavaScript is next level. This article goes into detail about what it took to build his JS1K submission, which is quite astounding. (keithclark.co.uk)