Weekly Digest 01/2021
Tags: performance, react, gatsby, typescript
Published: 2021-01-10 22:32:27

Happy New Year and welcome to my first weekly digest of this year 🎉🍾

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

---

## Interesting articles to read

### Gatsby 2.30.2

- 🌅 Gatsby Image (beta) improvements
    - Remote image support
    - AVIF support
- 🚧 SSR during development
- ⚡ 30% faster image transformations
- 🔍 Query on Demand & Lazy Images during development

[https://www.gatsbyjs.com/docs/reference/release-notes/v2.30/](https://www.gatsbyjs.com/docs/reference/release-notes/v2.30/)

### Advancing developer freedom: GitHub is fully available in Iran

All developers should be free to use GitHub, no matter where they live. At the same time, GitHub respects and abides by US law, which means government sanctions have limited our ability to provide developers

[https://github.blog/2021-01-05-advancing-developer-freedom-github-is-fully-available-in-iran/](https://github.blog/2021-01-05-advancing-developer-freedom-github-is-fully-available-in-iran/)

### Node.js January 2021 Security Releases

Updates are now available for v10,x, v12.x, v14.x and v15.x Node.js release lines for the following issues.

In addition to the vulnerabilities listed below, these releases also include an update to npm in order to resolve an issue that was reported against npm by security scanners even though it was not vulnerable.

```bash
$ nvm install 15.5.1
$ nvm install 14.15.4
$ nvm install 12.20.1
$ nvm install 10.23.1
```

[https://nodejs.org/en/blog/vulnerability/january-2021-security-releases/](https://nodejs.org/en/blog/vulnerability/january-2021-security-releases/)

### Don’t be the bad cop in pull request reviews — Let software do that job

And try to celebrate achievements!

When was the last time you reviewed a pull request and reminded the author to add a link to your bug tracking system? How about adding a missing label? Maybe you found an open PR that had no reviewer/assignee set.

[https://hackernoon.com/dont-be-the-bad-cop-in-pull-request-reviews-let-software-do-that-job-1eb9e574c2d1](https://hackernoon.com/dont-be-the-bad-cop-in-pull-request-reviews-let-software-do-that-job-1eb9e574c2d1)

---

## Some great videos and courses I watched this week

### Deno, a Secure Runtime for JavaScript and TypeScript

Deno is a runtime for JavaScript and TypeScript that is based on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl, original creator of Node.js, and is focused on productivity.

{% youtube doug6st5vAs %}

by Ryan Dahl

### React Server Components (with Next.js Demo)

React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

{% youtube DuSa5E-GgwU %}

by [Lee Robinson](https://twitter.com/leeerob)

### Parts of Speech(POS) Tagging with HMM

{% youtube M3852FebxJ0 %}

### Testing React with Jest and Enzyme series

Video course that covered how to set-up and test your React applications with the test runner Jest and the React testing library Enzyme.

{% youtube aSQ8v9JH5C8 %}

by [Jack Franklin](https://twitter.com/Jack_Franklin)

---

## Useful GitHub repositories

### Figma Design Tokens

Export Figma styles and custom design tokens to a style dictionary ready json or sync to GitHub.

![https://raw.githubusercontent.com/lukasoppermann/design-tokens/main/_resources/Design%20Tokens%20Plugin%20Cover.png](https://raw.githubusercontent.com/lukasoppermann/design-tokens/main/_resources/Design%20Tokens%20Plugin%20Cover.png)

The Design Tokens plugin for Figma allows you to export design tokens into a JSON format that can be used with the [Amazon style dictionary](https://amzn.github.io/style-dictionary/#/) package. This allows you to transform your tokens to different languages/platforms like web, iOS, or Android.

{% github lukasoppermann/design-tokens %}

### gatsby-source-instagram

Source plugin for sourcing data from Instagram. There are four ways to get information from Instagram.

{% github oorestisime/gatsby-source-instagram %}

### gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.

![https://github.com/MichaelDeBoey/gatsby-remark-embedder/blob/master/art/logo.png?raw=true](https://github.com/MichaelDeBoey/gatsby-remark-embedder/blob/master/art/logo.png?raw=true)

Trying to embed well-known services (like [CodePen](https://codepen.io/), [CodeSandbox](https://codesandbox.io/), [GIPHY](https://giphy.com/), [Instagram](https://www.instagram.com/), [Lichess](https://lichess.org/), [Pinterest](https://www.pinterest.com/), [Slides](https://slides.com/), [SoundCloud](https://soundcloud.com/), [Spotify](https://www.spotify.com/), [Streamable](https://streamable.com/), [Testing Playground](https://testing-playground.com/), [Twitch](https://www.twitch.tv/), [Twitter](https://twitter.com/), or [YouTube](https://www.youtube.com/)) into your [Gatsby](https://www.gatsbyjs.com/) website can be hard since you have to know how this needs to be done for all of these different services.

{% github MichaelDeBoey/gatsby-remark-embedder %}

---

## dribbble shots

### Gumroad Concept

![https://cdn.dribbble.com/users/110372/screenshots/14842365/media/75d0465a5a09e7ae73030c3446dca2a7.png?compress=1&resize=1600x1200](https://cdn.dribbble.com/users/110372/screenshots/14842365/media/75d0465a5a09e7ae73030c3446dca2a7.png?compress=1&resize=1600x1200)

by [Shakuro](https://dribbble.com/shakuro) [https://dribbble.com/shots/14842365-Gumroad-Concept](https://dribbble.com/shots/14842365-Gumroad-Concept)

### There are other delicious foods rather than the "Hamburger" icon

![https://cdn.dribbble.com/users/4001713/screenshots/14880132/media/f267b68950dda6374dfd8998fef058ca.png?compress=1&resize=1600x1200](https://cdn.dribbble.com/users/4001713/screenshots/14880132/media/f267b68950dda6374dfd8998fef058ca.png?compress=1&resize=1600x1200)

by [Arifin Yeasin](https://twitter.com/Arifin_Yeasin) [https://dribbble.com/shots/14880132-There-are-other-delicious-foods-rather-than-the-Hamburger-icon](https://dribbble.com/shots/14880132-There-are-other-delicious-foods-rather-than-the-Hamburger-icon)

### Online shoes store

![https://cdn.dribbble.com/users/2478245/screenshots/14878021/media/301a0926795de01d0decead6a2a8a725.jpg?compress=1&resize=1600x1200](https://cdn.dribbble.com/users/2478245/screenshots/14878021/media/301a0926795de01d0decead6a2a8a725.jpg?compress=1&resize=1600x1200)

by [Hesam Mousavi](https://twitter.com/etoHesi) [https://dribbble.com/shots/14878021-Online-shoes-store](https://dribbble.com/shots/14878021-Online-shoes-store)

### Icons set

![https://cdn.dribbble.com/users/371697/screenshots/14877486/media/1a13339c6d799e43071770d841722b2e.jpg?compress=1&resize=1600x1200](https://cdn.dribbble.com/users/371697/screenshots/14877486/media/1a13339c6d799e43071770d841722b2e.jpg?compress=1&resize=1600x1200)

by [Santi Gatti](https://dribbble.com/santigatti) [https://dribbble.com/shots/14877486-Icons-set](https://dribbble.com/shots/14877486-Icons-set)

---

## Tweets

{% twitter 1345755762623086592 %}

{% twitter 1346365824320163840 %}

{% twitter 1347296236282523648 %}

{% twitter 1346531963348381704 %}

{% twitter 1348016701632221184 %}

{% twitter 1347945758700544000 %}

---

## Picked Pens

### Home React HSL Slider

{% codepen https://codepen.io/jh3y/pen/gOwegKr %}

by [JHEY](https://codepen.io/jh3y)

### CSS paper snowflake

{% codepen https://codepen.io/michellebarker/pen/YzGEJoX %}

by [Michelle Barker](https://codepen.io/michellebarker)

### 12.

{% codepen https://codepen.io/ycw/pen/rNMGbJm %}

by [ycw](https://codepen.io/ycw)

---

Talk to you next week and stay safe! 👋