RWD Weekly #452

Hello again, welcome back to RWD Weekly #452.

This week we’ve got a tonne of accessible front end components for you — well, actually, Vitaly from Smashing has them for you. We take a look at improving performance through better images and video, and Bootstrap have a nice set of updated items include off-canvas flyouts.

Let’s get linking.

A Complete Guide To Accessible Front-End Components

This week Vitaly brings you 33 minutes of helpful tips and tricks to provide better accessible frontend experiences to your users from tabs and tables to toggles and tooltips.


Sponsor

Let’s get together virtually this Spring

Online Together: Spring Summit is a three-day web design conference with an intense focus on digital design, UX, content, code, and more—featuring 15 in-depth sessions, Q&A with the speakers, “After Hours” events to conclude each day, and more. You’ll get deep insights into where we are now and where things are going next. Join us online April 19–21.

Save $100 on any multi-day pass with promo code AEARWD21.

See the detailed three-day agenda and sign up today.

Article

Who has the fastest F1 website in 2021?

As I clicked on to Jake’s article all I can hear in my head is the mid song switch in Fleetwood Mac’s The Chain. Dummmmm, dum dum dum dum, dum dum dum-dum-dum, dummmm.

Safety at conferences

Laura covers off some tips for conferences organisers (and attendees) on how to make speakers/attendees feel safer. This goes for the conference itself, as well as getting to and from the hotel/airport.

Bootstrap 5 Beta 3

This is the last of the beta releases for Bootstrap 5, next up will be the first stable release. Along with improving the dependencies with Bootstrap, they’re also bringing in a new off canvas component as well.

The End of AMP

Tutorials

How MDN’s site-search works

An interesting overview of how the MDN Site search works from Peter Bengtsson using a combination of GitHub actions and elastic search. 

Animating Underlines

Michelle Barker gives us the rundown on how to make our links appear a little more entertaining than just switching colours when you hover. This post is full of progressive enhancement, so I hope you don’t mind all of your users getting the best result possible.

Handling Text Over Images in CSS

We all love a heading almost as much as we love a heading on top of an image. Unfortunately, we can never really be sure what image the client is going to upload onto the site, so we can’t be sure if the test will be readable. Fortunately for us, we have Ahmad to show us all the ways in which we can get this to work.

Resources & Tools

The Component Gallery

A cracking resource from Iain Bean. Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.

Finally

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.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.