Weekly Digest 20/2021
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.
Useful GitHub repositories
git-secrets
Prevents you from committing secrets and credentials into git repositories.
SQLFluff
A SQL linter and auto-formatter for Humans
Readme.so
Readme.so is an online editor to help developers make readmes for their project.
Social-Analyzer
API, CLI & Web App for analyzing & finding a person’s profile across social media \ websites (Detections are updated regularly)
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! 👋
