RWD Weekly #366

Welcome to week #366 of the responsive design weekly newsletter!

This week we’re looking at portable patterns, dark patterns, and cross-stitch patterns (one of those isn’t true).  We also have a full overview and introduction to Variable Fonts in a two part series, and while you’re on the learning curve you can get started with D3 and visualise some data.

That and much more, let’s get into the links this week.


Calibre App

Calibre helps businesses of all shapes and sizes track and improve web performance under a wide range of real-world conditions. Gaining meaningful insight into what users experience is busy guesswork — Calibre makes complex monitoring effortless, so you can focus on your customers.


Tips for Portable Patterns

With patterns and modules becoming their own things rather than something that is only part of the page it’s important that the patterns you develop can work in a variety of situations, as well as across a variety of different viewports.

Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites

Dark patterns are user interface design choices that benefit an online service by coercing, steering, or deceiving users into making unintended and potentially harmful decisions. These are the results from a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark patterns.

CSS Grid Demo: “Kandinsky zum 60. Geburtstag”

Another great use of CSS Grid. If you want to see those gridlines yourself you can use Firefox developer tools.

What I Learned From Designing AR Apps

I was playing around with image recognition and AR last night so I was glad to find this article in my feed this morning. 


Optimizing Google Fonts Performance

Last week we featured a new performance technique for google fonts, but this week Smashing Mag have a whole host of different options for you.

Am I cached or not?

Detecting on the client side whether a page was served from Cache can be an important feature for your website. You don’t want folks reading stale news if you’re updating it frequently, your article might have had a refresh, you might be serving up live content that is static. I feel this will mainly occur when using service workers, where the page in cache is always returned before going to the network. This tutorial from Jeremy shows how we can timestamp our pages and then run some client side JS to detect if it’s a recent version.

Render Snarky Comments in Comic Sans

By running your comments through a sentiment analysis you can get a feel for the tone of the comment, and then programmatically change its appearance by applying random cApS and Comic Sans. I’d be too nervous that the programmatic approach would render some serious comments in that way and damage your relationship with that person, so test the sentiment stuff out first.

Building a Conference Schedule with CSS Grid

When it comes to setting up schedules/diary kind of things for website layouts I’m always focused on ensuring that the solution allows for maximum flexibility for the content editor, and very little additional effort to get it laid out (i.e. it has to be super dynamic). Another great use of CSS Grid!

An Introduction to D3.js

So, you want to create amazing data visualizations on the web and you keep hearing about D3.js. But what is D3.js, and how can you learn it? Let’s start.

How to Enable Experimental Web Platform Features in Chrome and Firefox

The title kinda gives away what this article is all about. If you’re looking at how to do it on Safari you can go to the Develop menu option and down to the Experimental Features option in there.

Beginner’s Guide to Variable Fonts: Part 1 & Part 2

Viget brings a two-part introduction to Variable Fonts.


That’s all for this week, enjoy your weekend and if you have written about anything you have been doing lately please hit reply.



Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.