Weekly Digest 04/2021
Tags: typescript, css, testing, design
Published: 2021-01-31 16:52:55

Welcome to this weekly digest, which is the last one for January ❄️.

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

---

## Interesting articles to read

### Making Remote Work Work: Useful Tools And Resources

How to stay creative, focused, and organized when working remotely? We’ve collected some useful tools and resources that we use daily at Smashing. We aren’t affiliated in any way with any of the toolmakers featured here. We simply love what they do.

[Making Remote Work Work: Useful Tools And Resources - Smashing Magazine](https://www.smashingmagazine.com/2021/01/tools-resources-remote-work/)

### The CodePen Spark

Stacks, Skateboards, and Synths

[The CodePen Spark](https://codepen.io/spark/218)

### How Algolia created its Netlify build plugin

We recently released the Algolia Netlify plugin. You can read more about the plugin, watch an intro, or get started with right away. Algolia is a flexible search and navigation platform, which enables cutting-edge, web, app and e-commerce experiences.

[How Algolia created its Netlify build plugin | Algolia Blog](https://www.algolia.com/blog/engineering/how-algolia-created-its-netlify-build-plugin/)

### Where should you store tokens?

Confused on how to store a token on client side?🤷 LocalStorage? Cookie?

[Where should you store tokens?](https://balavishnuvj.com/blog/where-to-store-auth-tokens/)

### Creating a Simple Yet Complicated Dark Mode Animation

A dark mode toggle animation should have some personality. Here's my take on a unique dark mode transition animation.

[CK - Creating a Simple Yet Complicated Dark Mode Animation](https://celikk.me/blog/darkModeAnimation/)

### Using fetch with TypeScript

How to make HTTP requests with fetch and TypeScript

[](https://kentcdodds.com/blog/using-fetch-with-type-script)

### Don't use functions as callbacks unless they're designed for it

[Don't use functions as callbacks unless they're designed for it](https://jakearchibald.com/2021/function-callback-risks/)

### New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in responsive web design and for preventing [cumulative layout shift](https://web.dev/cls/). Now, there's a more straightforward way to do this with the new `aspect-ratio` property launching in [Chromium 88](https://www.chromestatus.com/feature/5738050678161408), [Firefox 87](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#property_aspect-ratio), and [Safari Technology Preview 118](https://developer.apple.com/safari/technology-preview/release-notes/).

[New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly](https://web.dev/aspect-ratio/)

### Addon ecosystem 2.0

New addon catalog, tutorials, and docs.

[Addon ecosystem 2.0](https://storybook.js.org/blog/addon-ecosystem-2-0/)

---

## Some great videos I watched this week

Despite having launched a video showing how to mock both Fetch and Axios recently... here is another solution, the one recommended by Kent C. Dodds (creator of React Testing Library), showing how to use Mock Service Worker to avoid making actual HTTP requests when you are running your tests.

{% youtube v77fjkKQTH0 %}

by [Leigh Halliday](https://twitter.com/leighchalliday)

### GitHub Discussions, Dark Mode, PR Auto Merge, Codespaces, and more #DemoDays

Join Bryan Cross for a tour of the exciting additions and changes to the GitHub User Experience we introduced at GitHub Universe. All to make your experience as a developer just a bit smoother.

{% youtube NhSj40jEzQk %}

by [GitHub](https://twitter.com/github)

### VS Code Productivity Tips and Tricks

Tips and tricks on how to be productive with Visual Studio Code.

{% youtube lSvP2ahPojg %}

by [Sana Ajani](https://twitter.com/sana_ajani)

### Fun with advanced TypeScript

{% youtube nNse0r0aRT8 %}

---

## Useful GitHub repositories

### Spotter

![https://raw.githubusercontent.com/spotter-application/spotter/master/preview/icon.png](https://raw.githubusercontent.com/spotter-application/spotter/master/preview/icon.png)

macOS productivity tool to launch everything (e.g. switch the next song, connect bluetooth device, set a timer, etc.) so you can stay focused on your current task.

{% github spotter-application/spotter %}

### Mock Service Worker

Mock Service Worker (MSW) is an API mocking library for browser and Node.

![https://raw.githubusercontent.com/mswjs/msw/master/logo.png](https://raw.githubusercontent.com/mswjs/msw/master/logo.png)

{% github mswjs/msw %}

### Deskreen

Deskreen turns any device with a web browser to a second screen for your computer

![https://raw.githubusercontent.com/pavlobu/deskreen/master/resources/icon.png](https://raw.githubusercontent.com/pavlobu/deskreen/master/resources/icon.png)

[https://github.com/pavlobu/deskreen](https://github.com/pavlobu/deskreen)

---

## dribbble shots

### Newsly - News Reader Concept

![https://cdn.dribbble.com/users/78806/screenshots/15014264/media/276d8ce8e15a346c17ddd5fe6eadfdf8.png](https://cdn.dribbble.com/users/78806/screenshots/15014264/media/276d8ce8e15a346c17ddd5fe6eadfdf8.png)

by [Dmitriy Kharaberyush](https://twitter.com/DH_84)

### Notes App concept

![https://cdn.dribbble.com/users/953678/screenshots/14967815/media/2b78a0f3f76304b6df31385d9b79b6d1.png](https://cdn.dribbble.com/users/953678/screenshots/14967815/media/2b78a0f3f76304b6df31385d9b79b6d1.png)

by Anton Mikhaltsov

### Podcast Dashboard Component design | Part 2

![https://cdn.dribbble.com/users/4335179/screenshots/15001896/media/bdd211ce7b43a6765e8820205d0eddda.png](https://cdn.dribbble.com/users/4335179/screenshots/15001896/media/bdd211ce7b43a6765e8820205d0eddda.png)

by [Amirbaqian](https://twitter.com/amirbaqian)

---

## Tweets

{% twitter 1354162849023713280 %}

{% twitter 1353977223028465664 %}

{% twitter 1353616560057815041 %}

{% twitter 1355147003014098946 %}

{% twitter 1355158641586954241 %}

{% twitter 1355795453980372994 %}

{% twitter 1355600163226660872 %}

---

## Picked Pens

### Genuary 25 - Make a Grid of Permutations

{% codepen https://codepen.io/DonKarlssonSan/pen/QWKXabK %}

by [Johan Karlsson](https://twitter.com/DonKarlssonSan)

### ScrollTrigger - Highlight Text

{% codepen https://codepen.io/hexagoncircle/pen/gOPMwvd %}

by [Ryan Mulligan](https://twitter.com/hexagoncircle)

### Book Store UI

{% codepen https://codepen.io/TurkAysenur/pen/JjGKKrP %}

by [Aysenur Turk](https://twitter.com/AysnrTrkk)

---

Talk to you next week and stay safe! 👋