DEV Community

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

Posted on

Weekly Digest 48/2021

#css #javascript #webdev #react

Welcome to my Weekly Digest #48 of this year.

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

Advent of Code started just a could of days ago, so if you haven't signed up already there are still a couple of days left to catch up.

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.

Interesting articles to read

Adaptive, accessible, and automated color for Design Systems

The creation of our Design System’s color palette was like many others; we began by auditing and then standardizing a set of functional colors by how they were used generally while assuming we could manage niche cases with hotfixes here and there along the way.

Adaptive, accessible and automated colour for Design Systems

React Testing Library Recipes

Here are my favourite unit test patterns for verifying user journeys and accessible UI with React Testing Library, Jest and TypeScript.

React Testing Library unit test best practices

Some great videos I watched this week

Create your own Linked List

Being asked to create your own linked list in a coding interview is a tale as old as time.

by Basarat Ali Syed

Faster DevTools navigation with shortcuts and settings

Sharing some useful shortcuts and settings for quicker DevTools navigation.

by Google Chrome Developers

The fundamentals of CSS layout

Learn about the key CSS layout methods of flexbox and grid. Discover how these layout methods enable responsive, content-aware designs, and how to choose the best layout method for the component you need to build.

by Rachel Andrew

Coding Interview with Dan Abramov

by Ben Awad

Useful GitHub repositories

Open Source CSS Variables

CSS custom properties to help accelerate adaptive and consistent design.

GitHub logo argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Frame 2

Open Source CSS Variables

gradients animations sizes easings colors shadows aspect-ratios z-indexes

Tests


Need help?   👉   Discord


CDN

CLI

  • npm run gen:op - runs through src/ js files and creates the PostCSS files in src/
  • npm run gen:nowhere - creates a version of Open Props without the use of :where()
  • npm run gen:prefixed - creates a version of Open Props with each prop prefixed with op, like --op-font-size-1
  • npm run bundle - creates all the various minified bundles of props
  • npm run lib:js - builds the JS modules for NPM

View on GitHub


SecLists

SecLists is the security tester's companion. It's a collection of multiple types of lists used during security assessments, collected in one place

GitHub logo danielmiessler / SecLists

SecLists is the security tester's companion. It's a collection of multiple types of lists used during security assessments, collected in one place. List types include usernames, passwords, URLs, sensitive data patterns, fuzzing payloads, web shells, and many more.

seclists.png

About SecLists

SecLists is the security tester's companion. It's a collection of multiple types of lists used during security assessments, collected in one place. List types include usernames, passwords, URLs, sensitive data patterns, fuzzing payloads, web shells, and many more. The goal is to enable a security tester to pull this repository onto a new testing box and have access to every type of list that may be needed.

This project is maintained by Daniel Miessler, Jason Haddix, and g0tmi1k.

Install

Zip

wget -c https://github.com/danielmiessler/SecLists/archive/master.zip -O SecList.zip \
  && unzip SecList.zip \
  && rm -f SecList.zip

Git (Small)

git clone --depth 1 \
  https://github.com/danielmiessler/SecLists.git

Git (Complete)

git clone https://github.com/danielmiessler/SecLists.git

Kali Linux (Tool Page)

apt -y install seclists

Attribution

See CONTRIBUTORS.md

Contributing

See CONTRIBUTING.md

Similar Projects

Licensing

This project is licensed under the MIT license.

MIT License

—

NOTE: Downloading this repository…

View on GitHub

dribbble shots

Lestari

by [Firman Jabbar](https://dribbble.com/shots/16998375-Lestari-e-commerce-fashion-apps)

by Firman Jabbar

Petazy

by [Musemind Digital Agency](https://dribbble.com/shots/16994012-Petazy-App-Onboarding-Experience)

by Musemind Digital Agency

Vegetables illustration

by [Tanya Shegol](https://dribbble.com/shots/17000800-Vegetables-illustration-Creative-food-illustration)

by Tanya Shegol

Tweets

Picked Pens

3D CSpaceShip

by Ricardo Oliva Alonso

Generative CSS Christmas Tree Spiral

by Jhey

3D Heart Button

by Yoav Kadosh

Podcasts worth listening

CodePen Radio – With Aaron Iker

Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that’s exactly what Aaron wants you to do.

Syntax – Everything in web dev is Amazing!

In this episode of Syntax, Scott and Wes talk about all the things that have improved the lives of web developers over the years.

Call with Kent – How to decide among advanced react patterns?

So this short call is about when to use which advanced react pattern to create re-usable components.

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

Top comments (0)

Read next

zanepearton profile image

Rust + WASI: Application Monitoring

Zane -

pflashgary profile image

Build Your First React App: Mood Tracker

pflashgary -

willowjr profile image

What I’ve Learned from Building a Calculator with Vue.js

William Kwadwo Owusu -

skylerdev profile image

How I Created a Hover Reveal Text Animation with TailwindCSS and React

Skyler Dev -