Welcome to my Weekly Digest #20, which is the last one of May.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

Interesting articles to read

Frustrating Design Patterns: Mega-Dropdown Hover Menus

Do we need mega-dropdown hover menus in 2021? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus, and fine details for designing a better UX.

How to use Testing Library to test Storybook

Yann Braga introduces @storybook/testing-react, a new library that makes Storybook even more useful by helping you to reuse stories in Testing Library.

Advanced CSS Animation Using cubic-bezier()

When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier while staying in vanilla CSS.

How to talk to your company about sponsoring an open-source project

Open source sustainability is a topic that is just starting to get the attention that it deserves. So much of the technology sector is run on software that can be used for free without any further obligation.

82% of developers get this 3 line CSS quiz wrong

Without trying this out, what background do you expect <div> to have?

Some great videos I watched this week

The Find Command: My Favorite UNIX Command!

Chrome DevTools for designers

In this session, you’ll learn about the various design tooling tips, how to diagnose common design issues with Chrome DevTools, as well as some helpful steps to debug them.

The new responsive: Web design in a component-driven world

The web community is entering into a new era of responsive design and shifting our perspectives on what it means. With user preference queries, container queries, and other form-factor queries on the horizon, we’ll soon have the tools to create responsive designs far beyond what querying the global viewport allows.

Page performance after load

Web performance optimization tends to focus on initial page load because it’s the first major landmark where you can lose your audience. However, the user experience of highly interactive pages is often governed by post-load characteristics.

Sneaking a Peek at Tailwind CSS v2.2

In this video, we look at a few new features coming in Tailwind CSS v2.2 and how you can start playing with them yourself using our canary builds.

dribbble shots

Chef Finder App

Mobile Finance App — Concept Design

Crypter Component

Food delivery app

GS — Project

Smart Home App Design

Tweets

Picked Pens

lifeMeditation

Podcasts worth listening

Smashing Podcast — What is VisBug?

We’re talking about VisBug. What is it, and how is it different from the array of options already found in Chrome DevTools? Drew McLellan talks to its creator Adam Argyle to find out.

3 Minutes with Kent — TypeScript is testing

Syntax — Stylin the Unstylables

Tools and Resources

Learn CSS

An evergreen CSS course and reference to level up your web styling expertise.

Fluid typography

Create text that scales with the window size, so that your headings look great on any screen.

Thank you for reading, talk to you next week, and stay safe! 👋

Full-Stack JavaScript Engineer with focus on React, Redux & Node.js and passioned about Open Source working @Mobime based in Berlin, Germany marcobiedermann.com