DEV Community

Cover image for Weekly Digest 24/2021 - Top of the Week
Marco Biedermann for World In Dev

Posted on

Weekly Digest 24/2021 - Top of the Week

Welcome to my Weekly Digest #24.

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


 

🎉 Giveaway

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

  1. 👍 React to this post
  2. ✉️ Subscribe to our newsletter

You will receive our articles directly to your inbox 📬.

 


Interesting articles to read

The Beauty of FizzBuzz in CSS

In this CSS implementation of FizzBuzz, we can generate beautiful patterns with math!

The Beauty of FizzBuzz in CSS | Lara Schenck

CSS for Web Vitals

This article covers CSS-related techniques for optimizing Web Vitals.

CSS for Web Vitals

Inherit, initial, unset, revert

Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords.

Inherit, initial, unset, revert - ppk

Inline Styles as Classes

If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box.

Inline Styles as Classes (lol) | CSS-Tricks

Useful and Useless Code Comments

Unfortunately, many comments are not particularly helpful. The most common reason is that comments repeat the code: all of the information in the comment can easily be deduced from the code next to the comment.

Useful and Useless Code Comments

A Complete Guide To Accessibility Tooling

Learning to build accessible websites can be a daunting task for those who are just starting to implement accessible practices. We’ve pulled together a wide range of accessibility tooling, ranging from single-use bookmarklets to full-blown applications, in order to help you get started with building more accessible websites.

A Complete Guide To Accessibility Tooling - Smashing Magazine


Some great videos I watched this week

Pie Charts in React with visx

Using visx, the low-level visualization library from Airbnb, we'll create a cool looking Pie Chart that resembles the beautiful one that the Exodus wallet has.

by Leigh Halliday

What’s new in React 18

Understand the top new features coming to React 18, explained simply.

by Arnaud

Five Essential Design Patterns in Typescript

Jack is going to "do it live!" as he brings you five essential Design Patterns, from the GoF book, in Typescript, live, as you get to ask questions along the way!

by Jack Herrington

How to Find and Remove Dead CSS

Ever have old CSS styles pile up that you're afraid to remove because you're not sure if anything else is depending on them? Here's one way to get more confidence about which styles are actually unused and safe to delete, by using combining the code coverage results for each page on your website.

by Justin Searls

Seeking a Target

This video explores Craig Reynolds' formula for Steering Behaviors in JavaScript (p5.js) beginning with "Seeking a Target.

by Daniel Shiffman


Useful GitHub repositories

Fig

Fig adds autocomplete to your terminal. ****As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

GitHub logo withfig / autocomplete

Fig adds autocomplete to your terminal.


os Signup Documentation All-Contributors Discord Twitter

Fig adds autocomplete to your terminal.

As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

Fig Visual Autocomplete For Your Terminal Demo


👋 Add a completion spec for a CLI tool

Want to add autocomplete to a CLI tool (or make changes to an existing autocomplete spec)? We welcome contributions!

Completion specs are defined in a declarative schema that specifies subcommands, options and arguments. Suggestions are generated from information in the spec or can be generated dynamically by running shell commands or reading local files.

For documentation and tutorials, visit fig.io/docs

To request autocomplete for a CLI tool, open an issue.


😎 Get Started

Build your first spec in 3 or less min: fig.io/docs/getting-started

Prerequisites:

  • Early access to the Fig macOS app.

If you don't have access yet, sign up for the waitlist and say you're interested in building completions!

  • Node and NPM…

ni

Use the right package manager

antfu/ni

Modern Unix

A collection of modern/faster/saner alternatives to common unix commands.

GitHub logo ibraheemdev / modern-unix

A collection of modern/faster/saner alternatives to common unix commands.

Modern Unix

bat

A cat clone with syntax highlighting and Git integration.

exa

A modern replacement for ls.

lsd

The next gen file listing command. Backwards compatible with ls.

delta

A viewer for git and diff output

dust

A more intutive version of du written in rust.

duf

A better df alternative

broot

A new way to see and navigate directory trees

fd

A simple, fast and user-friendly alternative to find.

ripgrep

An extremely fast alternative to grep that respects your gitignore

ag

A code searching tool similar to ack, but faster.

fzf

A general purpose command-line fuzzy finder.

mcfly

Fly through your shell history. Great Scott!

choose

A human-friendly and fast alternative to cut and (sometimes) awk

jq

sed for JSON data.

sd

An intuitive find & replace CLI (sed alternative).

cheat

Create and view interactive cheatsheets on the command-line.

tldr

A…

Google TypeScript Style

gts is Google's TypeScript style guide, and the configuration for our formatter, linter, and automatic code fixer. No lint rules to edit, no configuration to update, no more bike shedding over syntax.

GitHub logo google / gts

☂️ TypeScript style guide, formatter, and linter.

gts

Google TypeScript Style

NPM Version GitHub Actions Dependency Status Known Vulnerabilities codecov TypeScript Style Guide

gts is Google's TypeScript style guide, and the configuration for our formatter, linter, and automatic code fixer. No lint rules to edit, no configuration to update, no more bike shedding over syntax.

To borrow from standardjs:

  • No configuration. The easiest way to enforce consistent style in your project. Just drop it in.
  • Automatically format code. Just run gts fix and say goodbye to messy or inconsistent code.
  • Catch style issues & programmer errors early. Save precious code review time by eliminating back-and-forth between reviewer & contributor.
  • Opinionated, but not to a fault. We recommend you use the default configuration, but if you need to customize compiler or linter config, you can.

Under the covers, we use eslint to enforce the style guide and provide automated fixes, and prettier to re-format code.

Getting Started

The easiest way to get started is to…


dribbble shots

Cake App

https://cdn.dribbble.com/users/4601337/screenshots/15849060/media/3fbba213a9d483fa2a51abd8fc756b7d.png

by Arya Wijaya Kusuma

OYOTEE - Plant Shop Website

https://cdn.dribbble.com/users/3550736/screenshots/15848860/media/74bc70659511fd4169f64ed424b42665.jpg

by Maulana Farhan

Blog App - UI Design

https://cdn.dribbble.com/users/3375201/screenshots/15849030/media/9a70a3bbe66853bc8aec151c11fe89f4.png

by Sayyid Ahsan

Spotify for Artists Fan Study Pitch

https://cdn.dribbble.com/users/3816/screenshots/15864817/media/4de75f68c1be6817132eaef6f7c771c1.png

by Ben Cline

Tweets


Picked Pens

3D Modern House

by Ricardo Oliva Alonso

Loki – Intro text animation

by Eduardo Allegrini

Rage

by Tiffany Choong


Podcasts worth listening

Syntax - What is SvelteKit?

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.

The CSS Podcast - Custom properties

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.

Smashing Podcast - What is Image Optimization in 2021?

We’re talking about Image Optimization. What steps should we follow for performant images in 2021? Drew McLellan talks to expert Addy Osmani to find out.

CodePen Radio - Andy and Una from Google’s Learn CSS Project

Learn CSS is a very cool project from a whole team of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way.

Junior to Senior - Maintainer of the JavaScript Octokit

David and Gregor discuss building and maintaining open-source software, how to be a valuable asset to your team, and growing through communication.


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


 

Make sure to subscribe to our newsletter 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on Discord 📣.

 

Discussion (0)