Weekly Digest 10/2021
Tags: css, git, javascript
Published: 2021-03-14 18:07:21

Welcome to my Weekly Digest #10.

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

---

## Interesting articles to read

### Boost Your Programming Skills by Reading Git's Code

In this article, we discuss the original version of Git's code to highlight how reading code can boost your coding skills. We cover the reasons to learn about Git's code and how to access it. We discuss Git's original codebase structure and how Git's core functionalities are implemented in code.

[https://www.freecodecamp.org/news/boost-programming-skills-read-git-code/](https://www.freecodecamp.org/news/boost-programming-skills-read-git-code/)

### Insert Cursor at Any Position at Command Line

[](https://davidwalsh.name/insert-cursor-at-any-position-at-command-line)

### Building a Healthy On-Call Culture

In this post, we share some of the best practices we apply when SoundCloud engineers take on out-of-hours support duties.

[Building a Healthy On-Call Culture](https://developers.soundcloud.com/blog/building-a-healthy-on-call-culture)

### Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers

The JavaScript Intersection Observer is built into all modern browsers and lets you avoid scroll listeners. In this post we re-factor a the JavaScript that creates a table of contents for a blog post and updates the current indicator depending upon whether it is in view or not.

[Building a 'Table Of Contents' with active indicator using JavaScript Intersection Observers](https://benfrain.com/building-a-table-of-contents-with-active-indicator-using-javascript-intersection-observers/)

### What you risk when using `Number()` to parse an integer from a string in TypeScript

Using Number constructor function to parse a number from an input in TypeScript entails a couple of risks. It’s better to be aware of them.

[What you risk when using Number() to parse an integer from a string in TypeScript](https://journal.artfuldev.com/what-you-risk-when-using-number-to-parse-an-integer-from-a-string-in-typescript-ee5c4d2f484d)

---

## Some great videos I watched this week

### TypeScript: Unions and Never with Conditional Types

In this lesson we look at how unions gets distributed in conditional types. We also cover how never gets removed in unions.

{% youtube PUQU90seatA %}

by [Basarat Ali](https://twitter.com/basarat)

### Particle System Simulation - The Nature of Code

Welcome to Chapter 4 of The Nature of Code: Particle Systems! I begin by coding a simple particle system in p5.js. I convert the Mover class into a Particle class, add a lifetime property and organize a collection of particles into an array

{% youtube syR0klfncCk %}

by [Daniel Shiffman](https://twitter.com/shiffman)

### Using the axe Web Accessibility Testing Browser Plugin

I'm joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then help you fix them. There is quick automated testing as well as guided tests that help you test things that need a little bit more walkthrough, like testing the page tab order and testing modal dialogs.

{% youtube wUc4d1Vlxe4 %}

by [Chris Coyier](https://twitter.com/chriscoyier)

### Git Internals - How Git Works - Fear Not The SHA!

{% youtube P6jD966jzlk %}

by [GitLab](https://twitter.com/gitlab)

### How I Optimized My JavaScript Project (Complete Walkthrough) | Faster Spatial Hash Grids

In this project, we're doing some JavaScript optimization. We're continuing and building on that JavaScript spatial hash grid implementation, but we'll be examining it in detail with Chrome's DevTools profiler, looking for hotspots and optimization opportunities. I'll take you step by step through the process, benchmarking the code, examining the profile, and ultimately making the existing implementation dramatically faster.

{% youtube oewDaISQpw0 %}

by [Simon](https://twitter.com/iced_coffee_dev)

---

## Useful GitHub repositories

### System design interview

System design is a very broad topic. Even a software engineer with many years of working experience at a top IT company may not be an expert on system design. If you want to become an expert, you need to read many books, articles, and solve real large scale system design problems.

{% github checkcheckzz/system-design-interview %}

### Spectral

Improve the quality of your API descriptions, Kubernetes config, GitHub Actions, or any other JSON/YAML data. Get automatic validation & linting warnings, powered by Spectral, when you use Stoplight.

{% github stoplightio/spectral %}

### gatsby-source-google-docs

Gatsby plugin to use Google Docs as a data source.

{% github cedricdelpoux/gatsby-source-google-docs %}

### Front-end Tips

A series of super tiny, quick tips, tricks and best practices of front-end development.

The series cover different topics: CSS, HTML, JavaScript, TypeScript and Browser developer tools.

{% github phuoc-ng/frontend-tips %}

---

## dribbble shots

### Medical App UI with Dr Vector

![https://cdn.dribbble.com/users/4870223/screenshots/15252901/media/d930701471268cfc62b4a44b24e33854.png](https://cdn.dribbble.com/users/4870223/screenshots/15252901/media/d930701471268cfc62b4a44b24e33854.png)

by [Amjad](https://dribbble.com/shots/15252901-Medical-App-UI-with-Dr-Vector)

### Podcast Dashboard design

![https://cdn.dribbble.com/users/4335179/screenshots/14979461/media/605f9196d7196d8755011707eb8d78fc.png](https://cdn.dribbble.com/users/4335179/screenshots/14979461/media/605f9196d7196d8755011707eb8d78fc.png)

by [Amirbaqian](https://dribbble.com/shots/14979461-Podcast-Dashboard-design-Light)

### Fitness Pro: Desktop Version

![https://cdn.dribbble.com/users/427857/screenshots/15280261/fitness_pro_-_shot_2.png](https://cdn.dribbble.com/users/427857/screenshots/15280261/fitness_pro_-_shot_2.png)

by [Tran Mau Tri Tam](https://dribbble.com/shots/15280261-Fitness-Pro-Desktop-Version-Light-Dark-Mode)

### Dating App

![https://cdn.dribbble.com/users/4601337/screenshots/15286257/media/77362a6f5567378c5315a9ec55892b68.png](https://cdn.dribbble.com/users/4601337/screenshots/15286257/media/77362a6f5567378c5315a9ec55892b68.png)

by [Arya Wijaya Kusuma](https://dribbble.com/shots/15286257-Dating-App)

### time chat

![https://cdn.dribbble.com/users/2539160/screenshots/15284267/media/16defe1184682df3bbf5a9dc9729b07e.png](https://cdn.dribbble.com/users/2539160/screenshots/15284267/media/16defe1184682df3bbf5a9dc9729b07e.png)

by [Garagephic Studio](https://dribbble.com/shots/15284267-time-chat)

---

## Tweets

{% twitter 1368983332873117701 %}

{% twitter 1369327970821804042 %}

{% twitter 1369330440654499846 %}

{% twitter 1369637419050532867 %}

{% twitter 1370423341954306056 %}

---

## Picked Pens

### CodePen Home Random Rectangles and Circles

{% codepen https://codepen.io/xavier_ho/pen/RwoeeZL %}

by [Xavier Ho](https://twitter.com/Xavier_Ho)

### Neon Flower Illusion

{% codepen https://codepen.io/jkantner/pen/zYoMZGj %}

by [Jon Kantner](https://twitter.com/jonkantner)

---

Talk to you next week and stay safe! 👋