DEV Community

Cover image for Weekly Digest 20/2021
Marco Biedermann
Marco Biedermann

Posted on • Updated on

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.

Frustrating Design Patterns: Mega-Dropdown Hover Menus - Smashing Magazine

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

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

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

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


Some great videos I watched this week

The Find Command: My Favorite UNIX Command!

by Colt Steele

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.

by Jecelyn Yeen and Adam Argyle

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.

by Una Kravets

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.

by Jason Miller and Surma

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.

by Tailwind Labs


Useful GitHub repositories

git-secrets

Prevents you from committing secrets and credentials into git repositories.

GitHub logo awslabs / git-secrets

Prevents you from committing secrets and credentials into git repositories

git-secrets

Prevents you from committing passwords and other sensitive information to a git repository.

git secrets --scan [-r|--recursive] [--cached] [--no-index] [--untracked] [<files>...]
git secrets --scan-history
git secrets --install [-f|--force] [<target-directory>]
git secrets --list [--global]
git secrets --add [-a|--allowed] [-l|--literal] [--global] <pattern>
git secrets --add-provider [--global] <command> [arguments...]
git secrets --register-aws [--global]
git secrets --aws-provider [<credentials-file>]

git-secrets scans commits, commit messages, and --no-ff merges to prevent adding secrets into your git repositories. If a commit commit message, or any commit in a --no-ff merge history matches one of your configured prohibited regular expression…

SQLFluff

A SQL linter and auto-formatter for Humans

GitHub logo sqlfluff / sqlfluff

A modular SQL linter and auto-formatter with support for multiple dialects and templated code.

SQLFluff

The SQL Linter for Humans

PyPi Version PyPi License PyPi Python Versions PyPi Status PyPi Downloads

GitHub Workflow Status ReadTheDocs Code style: black Docker Pulls

SQLFluff is a dialect-flexible and configurable SQL linter. Designed with ELT applications in mind, SQLFluff also works with Jinja templating and dbt. SQLFluff will auto-fix most linting errors, allowing you to focus your time on what matters.

Dialects Supported

Although SQL is reasonably consistent in its implementations, there are several different dialects available with variations of syntax and grammar. SQLFluff currently supports the following SQL dialects (though perhaps not in full):

We aim to make it easy to expand on the support of these dialects and also add other, currently…

Readme.so

Readme.so is an online editor to help developers make readmes for their project.

GitHub logo octokatherine / readme.so

An online drag-and-drop editor to easily build READMEs

readme.so

Readme.so is an online editor to help developers make readmes for their project.

Link to production site: readme.so

Features

  • Choose from list of sections to add to your readme
  • Edit the contents of each section
  • Drag and drop to rearrange sections
  • Download your readme file

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Tech Stack

Running the Dev Server

To run the dev server, run npm run dev and navigate to localhost:3000

Feedback

Feedback is appreciated! Reach out on Twitter or submit a new issue!

License

MIT

This readme was created with readme.so :)




Social-Analyzer

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

GitHub logo qeeqbox / social-analyzer

API, CLI, and Web App for analyzing and finding a person's profile in 1000 social media \ websites

Social Analyzer - API, CLI, and Web App for analyzing & finding a person's profile across +1000 social media \ websites. It includes different analysis and detection modules, and you can choose which modules to use during the investigation process.

The detection modules utilize a rating mechanism based on different detection techniques, which produces a rate value that starts from 0 to 100 (No-Maybe-Yes). This module is intended to have fewer false positives.

The analysis and public extracted information from this OSINT tool could help investigate profiles related to suspicious or malicious activities such as cyberbullying, cyber grooming, cyberstalking, and spreading misinformation.

This project is currently used by some law enforcement agencies in countries where resources are limited - The detection database is different than the one shared here..

So·cial Me·di·a

Websites and applications that enable users to create and share content or to participate in social networking - Oxford…


dribbble shots

Chef Finder App

https://cdn.dribbble.com/users/2183470/screenshots/15660997/media/e5339e69802475ce13c25daa54aa2602.png

by Mitesh Samal

Mobile Finance App - Concept Design

https://cdn.dribbble.com/users/7514969/screenshots/15578956/media/72a69d4e71c9da1d43732212076817e2.png

by Julius Branding

Crypter Component

https://cdn.dribbble.com/users/427857/screenshots/15668496/media/de54571eeb3be0a67b09b55d06f1086a.png

by Tran Mau Tri Tam

Food delivery app

https://cdn.dribbble.com/users/1022158/screenshots/15668062/media/700cefbbd8982ef0cf7cdfc057aa0939.png

by Anton Anoshko

GS—Project

https://cdn.dribbble.com/users/1069526/screenshots/15687626/media/f5c5607c0f466ac2ad3814ab9fd7b70f.jpg

by Alexander Laguta

Smart Home App Design

https://cdn.dribbble.com/users/5748976/screenshots/15705022/media/b4c5bcc7405995c8618af1f35ff8db4d.jpg

by Abdullah Mubin


Tweets


Picked Pens

lifeMeditation

by Sophia


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.

Learn CSS

Fluid typography

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

Fluid Typography


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

Top comments (0)