RWD Weekly #417
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.
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.
