Web Design Weekly #283


Building Production-Ready CSS Grid Layouts

Morten Rand-Hendriksen gives us an understanding of what new layout opportunities and challenges CSS Grid brings, what old problems it solves and how to start using it in production today. (smashingmagazine.com)

Perfect Paragraph (betterwebtype.com)

Find Top Developers Fast

The search is over. Let Toptal connect you with the world’s most talented developers. Get started today. (toptal.com)


A React TODOs example, explained

If you are still battling with some React concepts this post and code examples are a great way to get a better understanding of how things should be structured and why. (hackernoon.com)

Embracing the Power of Styled Components

Fernando Agüero shares what he and his team learnt in the first week moving away from CSS Modules to Styled Components. (building.sentisis.com)

A crash course in memory management

The first of an awesome 3-part series by Lin Clark that aims to give you a good understanding of why ArrayBuffer and SharedArrayBuffer were added to JavaScript. (mozilla.org)


Tinkering and rebuilding your personal site is one of the best ways to explore new tech without too much pressure. A perfect way to learn really. In this post Ben Smithett shares the inner details of his latest blog redesign. (bensmithett.com)

WebAssembly 101: A Developer’s First Steps

This tutorial guides you along the necessary steps to port a JavaScript library of the Conway’s game of life to WebAssembly. (blog.openbloc.fr)

JavaScript’s new #private class fields (thejameskyle.com)

Tools / Resources

An Introduction to the `fr` CSS unit

Robin Rendle digs into how the new `fr` CSS length unit can be used in conjunction with CSS Grid. (css-tricks.com)

Visuals are processed 60K times faster in the brain than text. Find the perfect visuals for your project at iStock.

Easily search millions of powerful images and video clips at iStock and ensure your project truly stands out. Until July 6th new customers can save 15% with code KZKPC46N. Make an impact without breaking the bank. (istockphoto.com)

A Guide to ES2015

In this article Ashley Rich shares his favourite parts of ES2015. Ashely clearly explains some of the features that make it pretty easy for you to keep your JavaScript cutting edge. (deliciousbrains.com)

Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter effects for playful interactions. (tympanus.net)

React State vs. Redux State: When and Why? (atomicobject.com)

Real-World Redux-Saga Patterns (formidable.com)

Using CSS Variables (correctly) (codepen.io)

Safari 11.0 (developer.apple.com)


The Road to Burnout is Paved With Context Switching (sophieshepherd.com)

Overtime with Rogie King (dribbble.com)


Senior JavaScript Engineer

We are looking for a senior JavaScript engineer with a history of front-end JavaScript or Node.js experience to lead projects in React JS and deliver key new features for Outreach. (outreach.io)

Web/Interactive Designer at Sanborn

Sanborn is currently on the hunt for an enthusiastic, energetic soul to join our design team. We are looking for a designer who wants to be challenged in a fast-paced work environment. (sanbornagency.com)

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

Last but not least…

Results of the Ultimate CSS Survey 2017 (sitepoint.com)