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
Do we need mega-dropdown hover menus in 2021? Probably not. Let's explore things to keep in mind when designing and…
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
Storybook is a great tool to develop UI in isolation, we all know that. However, it’s not only suitable for component…
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
When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations…
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
Open source sustainability is a topic that is just starting to get the attention that it deserves. So much of the…
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.
Useful GitHub repositories
Prevents you from committing secrets and credentials into git repositories.
git secrets --scan [-r|--recursive] [--cached] [--no-index] [--untracked] [ ...] git secrets --scan-history git secrets…
A SQL linter and auto-formatter for Humans
SQLFluff is a dialect-flexible and configurable SQL linter. Designed with ELT applications in mind, SQLFluff also works…
Readme.so is an online editor to help developers make readmes for their project.
Readme.so is an online editor to help developers make readmes for their project. Link to production site: readme.so…
API, CLI & Web App for analyzing & finding a person’s profile across social media \ websites (Detections are updated regularly)
Chef Finder App
Mobile Finance App — Concept Design
Food delivery app
GS — Project
Smart Home App Design
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
An evergreen CSS course and reference to level up your web styling expertise.
An evergreen CSS course and reference to level up your web styling expertise. This course breaks down the fundamentals…
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! 👋