RWD Weekly #349
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!
Headline
The Web Almanac by HTTP Archive
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.
The State of JavaScript Survey
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.
Sponsor
Vue 3 Introduction with Sarah Drasner.
Get started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API!
Article
Making Websites Easier To Talk To
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.
A Digital Response to the Pandemic
How a Small Team used Citizen Centered Design to make World-First Covid Apps.
Cloudflare’s privacy-first Web Analytics is now available for everyone
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.
Tutorials
Fading in a Page on Load with CSS & JavaScript
Usually I would be against using javascript to display content, however I think there’s legs in this approach. Load the hiding style using JS to ensure that it is running, and then remove it once the DOM is ready. Of course, there is still a risk that the second part of the JS doesn’t fire due to an error but it is minimising the risk and I really like the effect.
A Utility Class for Covering Elements
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.
Automatic Social Share Images
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.
The Rules of Margin Collapse
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).
CSS Scroll Snap
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.
What Can You Put in a CSS Variable?
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.
Tools
Announcing Squoosh v2
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!
Big picture performance analysis using Lighthouse Parade
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.
Finally
CSS Sticky Parallax Sections
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!
Cheers,
Justin.
