DEV Community

Cover image for Weekly Digest 01/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 01/2022

Welcome to my first Weekly Digest of the new year 2022.

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

Building Designcember

A peek into the process and tools used to build the holiday-calendar-style experience of Designcember.

Building Designcember

Remove unused brew dependencies and delete outdated downloads

Uninstalling a brew dependency does not remove its dependencies. There is an easy solution for that, though. If you want to delete outdated formulas, Pawel also got you covered.

Remove unused brew dependencies and delete outdated downloads | pawelgrzybek.com

Design integrations for Storybook

Connect Figma, Sketch, Zeplin, and more with Storybook

Design integrations for Storybook


Some great videos I watched this week

Chrome 97 - What’s New in DevTools

New Recorder panel, refresh device list in Device Mode, and more.

by Google Chrome Developers

New in Chrome 97: Web Transport, Script type Detection, and more!

Chrome 97 is rolling out now! There’s a new option for sending real time messages between the client and server using Web Transport. You can use feature detection to see what types of scripts a browser supports. JavaScript gets better, and there’s plenty more.

by Google Chrome Developers

Technologies I'm Learning in 2022

by Ben Awad


Useful GitHub repositories

Centralized Recommendations for TSConfig bases

Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment

GitHub logo tsconfig / bases

Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment

Centralized Recommendations for TSConfig bases

Hosts TSConfigs for you to extend in your apps, tuned to a particular runtime environment. Owned and improved by the community Basically Definitely Typed for TSConfigs.

Available TSConfigs

Recommended tsconfig.json

Install:

npm install --save-dev @tsconfig/recommended
yarn add --dev @tsconfig/recommended
Enter fullscreen mode Exit fullscreen mode

Add to your tsconfig.json:

"extends": "@tsconfig/recommended/tsconfig.json"
Enter fullscreen mode Exit fullscreen mode

Create React App tsconfig.json

Install:

npm install --save-dev @tsconfig/create-react-app
yarn add --dev @tsconfig/create-react-app
Enter fullscreen mode Exit fullscreen mode

Add to your tsconfig.json:

"extends": "@tsconfig/create-react-app/tsconfig.json"
Enter fullscreen mode Exit fullscreen mode

Cypress tsconfig.json

Install:

npm install --save-dev @tsconfig/cypress
yarn add --dev @tsconfig/cypress
Enter fullscreen mode Exit fullscreen mode

Add to your tsconfig.json:

"extends": "@tsconfig/cypress/tsconfig.json"
Enter fullscreen mode Exit fullscreen mode

Deno tsconfig.json

Install:

npm install --save-dev @tsconfig/deno
yarn add --dev @tsconfig/deno
Enter fullscreen mode Exit fullscreen mode

Add to your tsconfig.json:

"extends": "@tsconfig/deno/tsconfig.json"
Enter fullscreen mode Exit fullscreen mode

Docusaurus v2 tsconfig.json

Install:

npm install --save-dev @tsconfig/docusaurus
yarn add --dev @tsconfig/docusaurus
Enter fullscreen mode Exit fullscreen mode

Add to your tsconfig.json:

"extends": "@tsconfig/docusaurus/tsconfig.json"
Enter fullscreen mode Exit fullscreen mode

Next.js tsconfig.json

Install:

npm install --save-dev @tsconfig/next
yarn add
Enter fullscreen mode Exit fullscreen mode

LeetHub

Automatically sync your LeetCode solutions to your GitHub account

GitHub logo QasimWani / LeetHub

Automatically sync your leetcode solutions to your github account - top 5 trending GitHub repository

LeetHub - Automatically sync your code to GitHub.
LeetHub - Automatically sync your code to GitHub

license discord chrome-webstore users

Top 5 Trending JavaScript Repositories

Available on:

What is LeetHub?

A chrome extension that automatically pushes your code to GitHub when you pass all tests on a Leetcode problem.

How fast is it really?

THIS FAST (~400ms, 530x speed improvement)!

Why LeetHub?

1. Recruiters want to see your contributions to the Open Source community, be it through side projects, solving algorithms/data-structures, or contributing to existing OS projects.
As of now, GitHub is developers' #1 portfolio. LeetHub just makes it much easier (autonomous) to keep track of progress and contributions on the largest network of engineering community, GitHub.

2. There's no easy way of accessing your leetcode problems in one place!
Moreover, pushing code manually to GitHub from Leetcode is very time consuming. So, why not just automate it entirely without spending a SINGLE additional second on it?

How does LeetHub work?

Your

fuite

A tool for finding memory leaks in web apps

GitHub logo nolanlawson / fuite

A tool for finding memory leaks in web apps

fuite

fuite /fɥit/ French for "leak"

fuite is a CLI tool for finding memory leaks in web apps.

Introductory blog post

Tutorial video

Usage

npx fuite https://example.com
Enter fullscreen mode Exit fullscreen mode

This will check for leaks and print output to stdout.

By default, fuite will assume that the site is a client-rendered webapp, and it will search for internal links on the given page. Then for each link, it will:

  1. Click the link
  2. Press the browser back button
  3. Repeat to see if the scenario is leaking

For other scenarios, see scenarios.

How it works

fuite launches Chrome using Puppeteer, loads a web page, and runs a scenario against it. It runs the scenario some number of iterations (7 by default) and looks for objects that leaked 7 times (or 14 times, or 28 times). This might sound like a strange approach, but it's useful for cutting through the noise in memory analysis.

fuite

https://github.com/nolanlawson/fuite

Standard Version

Automate versioning and CHANGELOG generation, with semver.org and conventionalcommits.org

GitHub logo conventional-changelog / standard-version

🏆 Automate versioning and CHANGELOG generation, with semver.org and conventionalcommits.org

Standard Version

A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits.

ci NPM version codecov Conventional Commits Community slack

Having problems? Want to contribute? Join us on the node-tooling community Slack.

How It Works:

  1. Follow the Conventional Commits Specification in your repository.
  2. When you're ready to release, run standard-version.

standard-version will then do the following:

  1. Retrieve the current version of your repository by looking at packageFiles[1], falling back to the last git tag.
  2. bump the version in bumpFiles[1] based on your commits.
  3. Generates a changelog based on your commits (uses conventional-changelog under the hood).
  4. Creates a new commit including your bumpFiles[1] and updated CHANGELOG.
  5. Creates a new tag with the new version number.

bumpFiles, packageFiles and updaters

standard-version uses a few key concepts for handling version bumping in your project.

  • packageFiles – User-defined files where versions can be read from and be "bumped"
    • Examples: package.json

dribbble shots

Restaurant Web Header.

by [Sajon](https://dribbble.com/shots/17227269-Restaurant-Web-Header)

by Sajon

Gaming Mobile Design

by [Mostafa_taghipour.uix](https://dribbble.com/shots/17223285-Gaming-Mobile-Design)

by Mostafa_taghipour.uix

bayaraja - Fintech Landing Page

by [SLAB Design Studio](https://dribbble.com/shots/17222228-bayaraja-Fintech-Landing-Page)

by SLAB Design Studio


Tweets


Picked Pens

Spirited Away Bathhouse (Aburaya) - 3D CSS

by Adam Kuhn


Podcasts worth listening

2022 Predictions

In this episode of Syntax, Wes and Scott talk through their predictions for 2022.

CodePen Radio – With Olivia

Olivia Ng has done loads of wonderful work here on CodePen and off. She got started just out of pure desire to build things.


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

Discussion (0)