Hey everyone and welcome to week #439 of the Responsive Design Newsletter.
This will be the penultimate edition for 2020, with next week being the last edition for the year before I finish up for xmas holidays and try to spend some time away from the screen for the first time in 2020.
Luckily, there is a lot of great stuff that I’m going to share with you this week and again next week.
Let’s get to those links!
Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 22 chapters spanning aspects of page content, user experience, publishing, and distribution. I was so pleased to see our friend Henri Helvetica as the author of the page-weight section of this almanac.
For the past four years this survey has helped us do just that, by collecting data from over 20,000 developers to identify current and upcoming trends.
This year again, take the survey to help find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more.
Modern websites aren’t inseparable from screens any more. Between phone assistants, home speakers, and screen readers, more and more people are using the web without even looking at it. I predicted this would be a big thing 3 or 4 years ago and I was wrong, but I still think that ensuring your site can have interactions through voice alone will be a big thing one day soon.
How a Small Team used Citizen Centered Design to make World-First Covid Apps.
A couple months ago CloudFlare reached out to Marko Saric (one of my favourite bloggers who is working on Plausible Analytics) to review what they had done behind closed doors so far. Now CloudFlare is going to a wider market with their new analytics tool. I’m going to run it across RWD.is, surfthedream.com.au (now running WordPress 2021 theme) and my pocket notebook site as well to compare it against what Google is doing.
Sometimes you just want something to sit over something else. This mostly happens with overlays, titles over images, modals. This tutorial looks at how you can use utility classes and some JS to make this more repeatable.
Oh I really really like this. After spending almost an entire day allocating images against the social metadata values across a wordpress site I’m going to include this as part of our future site builds.
In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. In this detailed tutorial Josh looks through all the aspects of margins and what happens in the majority of scenarios (multiple margins, vertical margins, nesting, negative margins, flow layout and more).
How often have you wished if there was a CSS feature that made it easy to create a scrollable container? We can do that, thanks to CSS scroll snap.
CSS variables (also know as CSS custom properties) can hold all sorts of things. Some of these things were not obvious to me, which is why Will Boyd decided to write this.
Squoosh.app has been upgraded to V2. Along with a fancy new coat of paint, it is also now supporting the AVIF image type AND has released CLI support!New codecs support, updated design, and CLI support!
Lighthouse Parade is a Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page. With a single command, the tool will crawl an entire site, run a Lighthouse report for each page, and then output a spreadsheet with the aggregated data.
I’ve been impressed with the sticky approach on sites, but making the Sticky part also act parallax…. mind blown!
That’s all for this week. If you’ve come across any interesting/helpful articles or you’ve written something yourself please hit reply and let me know about them.
See you all next week!
Have a great weekend!