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

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget

16 Designers Reveal Their All-Time Favorite IKEA Products

Monday, March 25, 2024

Plus, gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo lush gardens with sparkling blue water and trees 14 GARDENS EVERY

Accessibility Weekly #389: On Popover Accessibility

Monday, March 25, 2024

March 25, 2024 • Issue #389 View this issue online or browse the full issue archive. Featured: On popover accessibility: What the browser does and doesn't do "One of the premises of the new