Weekly Digest 20/2021
Tags: css, javascript, react, webdev
Published: 2021-05-23 17:02:35

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.

[Frustrating Design Patterns: Mega-Dropdown Hover Menus - Smashing Magazine](https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/)

### 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.

[How to efficiently reuse stories in your React tests](https://medium.com/storybookjs/testing-lib-storybook-react-8c36716fab86)

### 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.

[Advanced CSS Animation Using cubic-bezier() | CSS-Tricks](https://css-tricks.com/advanced-css-animation-using-cubic-bezier/)

### 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.

[How to talk to your company about sponsoring an open source project](https://humanwhocodes.com/blog/2021/05/talk-to-your-company-sponsoring-open-source/)

### 82% of developers get this 3 line CSS quiz wrong

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

[82% of developers get this 3 line CSS quiz wrong](https://lea.verou.me/2021/05/82-of-developers-get-this-3-line-css-quiz-wrong/)

---

## Some great videos I watched this week

### The Find Command: My Favorite UNIX Command!

{% youtube YdL13obmRow %}

by [Colt Steele](https://twitter.com/codecolt)

### 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.

{% youtube yNwwEu3Kcbs %}

by [Jecelyn Yeen](https://twitter.com/jecelynyeen) and [Adam Argyle](https://twitter.com/argyleink)

### 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.

{% youtube jUQ2-C5ZNRc %}

by [Una Kravets](https://twitter.com/una)

### 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.

{% youtube 4QkuvwRftTw %}

by [Jason Miller](https://twitter.com/_developit) and [Surma](https://twitter.com/DasSurma)

### 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.

{% youtube hoFwUe97Gdc %}

by [Tailwind Labs](https://twitter.com/tailwindlabs)

---

## Useful GitHub repositories

### git-secrets

Prevents you from committing secrets and credentials into git repositories.

{% github awslabs/git-secrets %}

### SQLFluff

A SQL linter and auto-formatter for Humans

{% github sqlfluff/sqlfluff %}

### Readme.so

[Readme.so](http://readme.so/) is an online editor to help developers make readmes for their project.

{% github katherinepeterson/readme.so %}

### Social-Analyzer

API, CLI & Web App for analyzing & finding a person's profile across social media \ websites (Detections are updated regularly)

{% github qeeqbox/social-analyzer %}

---

## dribbble shots

### Chef Finder App

![https://cdn.dribbble.com/users/2183470/screenshots/15660997/media/e5339e69802475ce13c25daa54aa2602.png](https://cdn.dribbble.com/users/2183470/screenshots/15660997/media/e5339e69802475ce13c25daa54aa2602.png)

by [Mitesh Samal](https://dribbble.com/shots/15660997-Chef-Finder-App)

### Mobile Finance App - Concept Design

![https://cdn.dribbble.com/users/7514969/screenshots/15578956/media/72a69d4e71c9da1d43732212076817e2.png](https://cdn.dribbble.com/users/7514969/screenshots/15578956/media/72a69d4e71c9da1d43732212076817e2.png)

by [Julius Branding](https://dribbble.com/shots/15578956-Mobile-Finance-App-Concept-Design)

### Crypter Component

![https://cdn.dribbble.com/users/427857/screenshots/15668496/media/de54571eeb3be0a67b09b55d06f1086a.png](https://cdn.dribbble.com/users/427857/screenshots/15668496/media/de54571eeb3be0a67b09b55d06f1086a.png)

by [Tran Mau Tri Tam](https://dribbble.com/shots/15668496-Crypter-Component)

### Food delivery app

![https://cdn.dribbble.com/users/1022158/screenshots/15668062/media/700cefbbd8982ef0cf7cdfc057aa0939.png](https://cdn.dribbble.com/users/1022158/screenshots/15668062/media/700cefbbd8982ef0cf7cdfc057aa0939.png)

by [Anton Anoshko](https://dribbble.com/shots/15668062-Food-delivery-app)

### GS—Project

![https://cdn.dribbble.com/users/1069526/screenshots/15687626/media/f5c5607c0f466ac2ad3814ab9fd7b70f.jpg](https://cdn.dribbble.com/users/1069526/screenshots/15687626/media/f5c5607c0f466ac2ad3814ab9fd7b70f.jpg)

by [Alexander Laguta](https://dribbble.com/shots/15687626-GS-Project)

### Smart Home App Design

![https://cdn.dribbble.com/users/5748976/screenshots/15705022/media/b4c5bcc7405995c8618af1f35ff8db4d.jpg](https://cdn.dribbble.com/users/5748976/screenshots/15705022/media/b4c5bcc7405995c8618af1f35ff8db4d.jpg)

by [Abdullah Mubin](https://dribbble.com/shots/15705022-Smart-Home-App-Design)

---

## Tweets

{% twitter 1394204791929196544 %}

{% twitter 1394310571206524928 %}

{% twitter 1394602918687485953 %}

{% twitter 1395102434213695493 %}

{% twitter 1395106082029068289 %}

{% twitter 1395401586503864326 %}

---

## Picked Pens

### lifeMeditation

{% codepen https://codepen.io/fractalkitty/pen/dyNBEMr %}

by [Sophia](https://twitter.com/fractalkitty)

---

## 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.

{% spotify spotify:episode:4zb3ABhYuUZxptl776Irxf %}

### 3 Minutes with Kent - TypeScript is testing

{% spotify spotify:episode:4buFGIt7eqq9WbSdpyJoUZ %}

### Syntax - Stylin the Unstylables

{% spotify spotify:episode:1ng1RKkmDQqz5f7bLVThHY %}

## Tools and Resources

### Learn CSS

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

[Learn CSS](https://web.dev/learn/css)

### Fluid typography

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

[Fluid Typography](https://fluid-typography.netlify.app/)

---

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