RWD Weekly #417 — New Performance Tool, Accessibility Tips, and more

View this email in your browser

Hello and welcome to RWD Weekly Newsletter edition 417.

As we get further along the 400's with our status codes the stranger they are becoming (and certainly the less familiar I am with them). The 417 status code is expectation failed (sounds like my dating efforts in my early 20's). The browser will throw this if the expectation given for the Expect header is not met, for example if the browser is expecting the content length of a certain size and that isn't met.

I must say, in researching the status codes this week I ended up on the Internet Engineering Task Force and their RFC.... the internet is complicated!

Let's get linking after a word from this week's sponsor.

Sponsor

Digital Ocean - get $100 credit

Do you want your own server spun up in under a minute for just $5 a month?

I use Digital Ocean to run the https://responsivedesign.is site and it has been ticking along beautifully for the past 5 years. I use a plain droplet configured from scratch, but now they have a droplet marketplace already set up with Wordpress, Ghost, Docker, Magento, Minecraft, CPanel, Plesk, Django, Grafana, Mastodon, Discourse and a bunch of others.

Get your Digital Ocean Server Today from $5

Advertise your product, service, or job opportunity to 27,079 tuned in web designers and developers. Find out more.

Article

No - Safari 14 Does Not Block Google Analytics

Last week there were rumours that this was the case when in fact, it is not. Safari are including Intelligent Tracking Prevention which will impact the ability for sites to track users, however Google Analytics is a first-party analytics platform in that it stores first party cookies on the browser for the site.

Use Speedlify to Continuously Measure Site Performance

Zach delivers yet another amazing tool (see the tools section below) to make our lives easier. This article takes you through the steps we usually take when building new sites.... get it fast, launch it, never check again.

Is WebP really better than JPEG?

When I read this title I immediately thought "duh, well of course it is". Turns out I was right... but not as often as I thought. This shows that WebP has it's sweet spot on photography images 500px or smaller, but anything bigger and you should reach for MozJPEG. This doesn't take into consideration any vectorish images with transparency that we use PNG for these days.

Information And Information Architecture: The BIG Picture

Lots of good tips in this article. I found it quite timely as I go through the restructure of a council website this week.

Tutorials

A Complete Guide to Dark Mode on the Web

Just like we went from building desktop only sites to having to build for multiple viewports and devices, we're going to find ourselves having to build in Dark Mode for all our standard sites (this is my 2 year guess... next there's also voice control on our site too). CSS Tricks do a great job of rounding up everything you need to know and run through the best way to implement and test.

How-to guide for creating edge-to-edge color bars that work with a grid

Here’s how to reliably create column background colors without the need for images or pseudo-elements.

How to test HTTP/3 and QUIC with Firefox Nightly

It doesn't feel that long ago that http2 arrived and we were ecstatic about having parallel downloads and we didn't have to shard domains to faux download assets faster. Now we have HTTP/3 and you can enable it in Firefox Nightly as well as enabling it through your Cloudflare account (even free accounts). Give it a go and see if the performance improves.

Five Ways to Improve Your Cover Letter

In these uncertain times it is quite possible that you've lost your job, been furlough, or your company is looking to make cuts. Don't wait for the worse to happen, make sure that you've got a solid cover letter and resume in case the worse happens (or if you're just looking for a change and new challenge).

Designing Beautiful Focus States

Ethan has prepared a number of new videos for Gymnasium and they're all worth a watch. At only 5 minutes each, these "gym shorts" are focussed around accessibility which is something I'm sure we all could do with being a little better at.

Testing your animations for “prefers-reduced-motion” support

Christian shows how to include prefers reduce motion in your implementation, but also how you can update dev tools on Edge to test. For those of you looking to test this across all browsers you're better off making the change at the OS level which MDN has you sorted out with these instructions.

Uncommon CSS Properties

This is a great tutorial if just for the first property display: grid; place-items: center;

Tools and Resources

Speedlify

This is the github repository for the speedlify 11ty site that Zach put together. The great thing about this is there's a "Deploy to Netlify" at the bottom of the readme which takes care of everything for you (you do need to put in your own sites to monitor).

Finally

That's all for this week. As always thank you to those that sent through link recommendations, if you've come across something or have written something please send it through.

Cheers,

Justin.

Copyright © 2020 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:

Simple Things

Simple Things LTD

Thame, Oxfordshire OX92EQ

United Kingdom

Add us to your address book

Want to change how you receive these emails?
You can update your preferences or

RWD Weekly #417 — New Performance Tool, Accessibility Tips, and more

Sponsor

Digital Ocean - get $100 credit

Article

No - Safari 14 Does Not Block Google Analytics

Use Speedlify to Continuously Measure Site Performance

Is WebP really better than JPEG?

Information And Information Architecture: The BIG Picture

Tutorials

A Complete Guide to Dark Mode on the Web

How-to guide for creating edge-to-edge color bars that work with a grid

How to test HTTP/3 and QUIC with Firefox Nightly

Five Ways to Improve Your Cover Letter

Designing Beautiful Focus States

Testing your animations for “prefers-reduced-motion” support

Uncommon CSS Properties

Tools and Resources

Speedlify

Finally

Older messages

RWD Weekly #416 — Accessibility, Dev tools updates, and AMP turns 5

RWD Weekly #415 — Unsupported Media Type & Bootstrap 5

RWD Weekly #414 — HTML Boiler Plate 8.0

RWD Weekly #413

RWD Interview Series with Rachel Andrew

You Might Also Like

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

9 Trends From Milan We Can’t Stop Thinking About

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Why Jake Arnold Doesn’t Text Clients

The secret ingredient to media success

#453: Design Systems

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Accessibility Weekly #393: When Security and Accessibility Clash