RWD Weekly #448
Hello again, welcome back to RWD Weekly #448.
This is the second to last week of homeschooling in the UK and a small step towards returning a small amount of normality. For all those who have been homeschooling, a hat tip to you!
Our feature image this week is something that I had on today because I’m missing my Friday lunchtimes kicking back for a beer with friends… not too much longer now.
Let’s get linking!
Getting Deep into Shadows
Who would have thought that the world of shadows in web design could be so detailed and interesting? Rob does an amazing job of showing throughout the article with plenty of visual examples and codepens to play with.
Sponsor
Authority Pro Theme Package
Authority Pro perfectly highlights your knowledge, years of experience, and acquired wisdom. Even if it’s early in your journey toward building expertise and trust, this carefully-constructed design will accelerate how quickly your audience grows.
Article
The Beauty Of Tiny Enhancements In CSS
Some great examples from Ahmad about how tiny enhancements in your CSS can make a difference to the end result, but without losing anything from the experience on browsers that are lacking that support.
Material Design text fields are badly designed
Adam describes why Google have got it wrong when it comes to the Material Design label approach. While aesthetically more pleasing to the eye, the float label approach is less practical than the standard label.
Semantic document outlines and heading structures
Digital accessibility at the Natural History Museum
Tutorials
How to receive micropayment in $BTC (or $Ɖoge) on your website
Tomomi Imura shows you how to set up web monetisation on your site using Coil and Interledger and get paid in BTC y’all.
Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)
DevTools is very advanced and helpful, but can also be very intimidating and overwhelming. Let’s fix that. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari.
Building a ‘Table Of Contents’
You know those table of contents that follow you down the page and highlight the section you are currently reading? Well Ben has written a tutorial for you to do just that using intersection observers.
Infinite Circular Gallery using WebGL
Such a great tutorial from Luis on Codrops this week. I love how the images move in the wind and the transitions as you wheel through the gallery is smooth as silk.
Create Responsive Image Effects With CSS Gradients And aspect-ratio
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair. A great tutorial from Stephanie.
Everything we know about Core Web Vitals and SEO
There has been a lot of uncertainty and confusion since Google announced the Page Experience Update in 2020. With just over three months before the update goes live in May, here’s what Simon can tell us about it.
Resources & Tools
SmolCSS
Minimal snippets for modern CSS layouts and components from Stephanie Eckles
Ray.so
Creates beautiful images of your code, nice find from Bram.us
AVIF Converter
Convert any images to AVIF for free. No data is sent. The magic happens in your browser
Finally
Iceberger
I spent a disproportionate amount of time this evening drawing different shaped icebergs using this brilliant little web site from Josh.
That’s all for this week. Thanks for stopping by, if you found something useful please recommend us to a friend and help us continue to grow.
Cheers,
Justin.
