1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

Responsive Design Weekly - RWD Weekly #439

Read online

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!
Start learning today
Advertise your product, service, or job opportunity to 26,586 tuned in web designers and developers. Find out more.

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.
Twitter
Facebook
Website
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 unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #438

Friday, December 4, 2020

Read online Hey everyone and welcome to week #438 of the responsive design newsletter. It's Christmas time which means the season of Advent blog posts are upon us again. I've listed my

RWD Weekly #437

Friday, December 4, 2020

This week we look at Cloudflares new offering for Wordpress sites to improve performance and how we should look at things as a front end developer. Read online Hey everyone and welcome to week #437 of

RWD Weekly #436

Friday, November 20, 2020

Read online Hey everyone and welcome to week #436 of the responsive design newsletter. This week we see a couple of new product version launches in Tailwind and View, see how you can monitor your sites

RWD Weekly #435

Friday, November 13, 2020

Read online Hey everyone and welcome to week #435 of the responsive design newsletter. Our feature site this week is from Ahmad who has single handedly brought more featured articles in this newsletter

RWD Weekly #434

Friday, November 6, 2020

Read online Hey everyone and welcome to week #434 of the responsive design newsletter. I'm sure you, like me, are patiently waiting to see how the US election is going to pan out so I hope this

You Might Also Like

Behind the Design of Lauren Santo Domingo’s Ski House

Thursday, November 21, 2024

View in your browser | Update your preferences ADPro Peak Style When it comes to clients, says AD100 designer Andre Mellone, “my biggest nightmare is a person who says, 'Carte blanche, do whatever

2025 Interior Design Trends, Revealed

Wednesday, November 20, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “Design, like fashion, tries to

Want a free strategy session with us?

Wednesday, November 20, 2024

Plus, the emails editors open most often. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

One Simple Thing You Can Do to Retain Your Staff

Tuesday, November 19, 2024

View in your browser | Update your preferences ADPro By my account, it's not fall until I've watched You've Got Mail, Nora Ephron's '90s film adaptation of the 1930s Hungarian play

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

Accessibility Weekly #423: Beautiful Focus Outlines

Monday, November 18, 2024

November 18, 2024 • Issue #423 View this issue online or browse the full issue archive. Featured: Beautiful focus outlines "Unfortunately, focus outlines are often overlooked in web design.

175 / Build your ideas without writing any code

Monday, November 18, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 1 View in browser Welcome to Issue 175 One month ago, I quit my longest-standing job and embarked on a pathless path to let my

Into the Fediverse

Sunday, November 17, 2024

Issue 221: We need decentralized social networks ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏