Weekly Digest 07/2021
Tags: css, javascript, storybook, zsh
Published: 2021-02-21 17:35:55

Welcome to my Weekly Digest #7 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

### Introducing the Storybook Axios addon

Storybook is a fantastic tool to share the current state of your UI with your team.

When it comes to network requests things get a little tricky. React’s Higher Order Components (and similar techniques) help you move network requests out of your components into their own layer.

**[Storybook Axios** **addon**](https://www.npmjs.com/package/storybook-axios) helps you to see what data is sent to the backend and returned; either from the API or the mock. That way you can debug your connected components as you build in Storybook.

[Introducing the Storybook Axios addon](https://medium.com/storybookjs/introducing-the-storybook-axios-addon-a61e844df54f)

### Zsh Tricks to Blow your Mind

In UNIX-based programming, we often talk about shells, terminals, and the command line interfaces. Bash is probably the most well-known, but there are other widely-used options as well, such as Zsh or the Z shell. Read on to learn more about Zsh and some tips and tricks to optimize your development.

[Zsh Tricks to Blow your Mind](https://www.twilio.com/blog/zsh-tricks-to-blow-your-mind)

### SmolCSS

Minimal snippets for modern CSS layouts and components, created by [Stephanie Eckles](https://twitter.com/5t3ph) of [ModernCSS.dev](https://moderncss.dev/)

[SmolCSS](https://smolcss.dev/)

### Use CSS Variables instead of React Context

How and why you should use CSS variables (custom properties) for theming instead of React context by [Kent C. Dodds](https://twitter.com/kentcdodds).

[Use CSS Variables instead of React Context](https://epicreact.dev/css-variables/)

### Listify a JavaScript Array

When you want to display a list of items to a user, I'm afraid `.join(', ')` just won't cut it. `Intl.ListFormat` can do all you need and more.

[Listify a JavaScript Array](https://kentcdodds.com/blog/listify-a-java-script-array)

### TypeScript without TypeScript -- JSDoc superpowers

One way to think about TypeScript is as a thin layer around JavaScript that adds type annotations. Type annotations that make sure you don’t make any mistakes. The TypeScript team worked hard on making sure that type checking also works with regular JavaScript files. TypeScript’s compiler (`tsc`) as well as language support in editors like VSCode give you a great developer experience without any compilation step.

[TypeScript without TypeScript -- JSDoc superpowers](https://fettblog.eu/typescript-jsdoc-superpowers/)

---

## Some great videos I watched this week

### Dgraph Graph Database in 100 Seconds

Learn the fundamentals of Dgraph - an open-source Graph Database that implements GraphQL as its query language.

{% youtube OzDG68VvPxY %}

by [Fireship](https://twitter.com/fireship_dev)

### Additive Waves - The Nature of Code

This video builds on the previous sine wave visualization in p5.js example. Here, I build a Wave class with variables for period, amplitude, and phase, and demonstrate how to add multiple wave patterns together!

{% youtube okfZRl4Xw-c %}

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

### ? in NaN Seconds

Learn how the question mark "?" in JavaScript provides syntactic sugar in three powerful ways.

{% youtube O0gmXbN7lVE %}

by [Fireship](https://twitter.com/fireship_dev)

---

## Useful GitHub repositories

### Domain-Driven Hexagon

Guide on Domain-Driven Design, Hexagonal architecture, techniques, tools, best practices, architectural patterns, and guidelines gathered from different sources.

{% github Sairyss/domain-driven-hexagon %}

### Bundle Buddy

A tool to understand your bundle size and why files are in your bundle.

{% github samccone/bundle-buddy %}

---

## dribbble shots

### Juice Brand Website Menu

![https://cdn.dribbble.com/users/418188/screenshots/15141114/juice_website_design_menu_interactions_tubikstudio.png](https://cdn.dribbble.com/users/418188/screenshots/15141114/juice_website_design_menu_interactions_tubikstudio.png)

by [tubik](https://twitter.com/tubikstudio)

### Sayuran - Grocery UI KIT

![https://cdn.dribbble.com/users/5963189/screenshots/15137412/media/9784238d5a0c0a52405dd8257f360ab9.png](https://cdn.dribbble.com/users/5963189/screenshots/15137412/media/9784238d5a0c0a52405dd8257f360ab9.png)

by [Nela Rosdiana](https://dribbble.com/nelaaars)

### Task Management Dashboard

![https://cdn.dribbble.com/users/4682699/screenshots/15144481/media/5644ef680b2b5e008d2186b25d0f4adf.png](https://cdn.dribbble.com/users/4682699/screenshots/15144481/media/5644ef680b2b5e008d2186b25d0f4adf.png)

by [Tito Tri Atmojo](https://dribbble.com/titotriatmojo)

## Tweets

{% twitter 1361598959828037633 %}

{% twitter 1362048512943398914 %}

{% twitter 1363245229533507585 %}

---

## Picked Pens

### Only CSS: Polygon Fish

{% codepen https://codepen.io/YusukeNakaya/pen/WNopRwX %}

by [Yusuke Nakaya](https://twitter.com/s14garnet)

### Pretty Map folding with CSS

{% codepen https://codepen.io/spiros-staridas/pen/gOLYqYO %}

by [Spiros Staridas](https://twitter.com/StaridasGeo/)

---

Talk to you next week and stay safe! 👋