Weekly Digest 05/2021
Tags: css, javascript, typescript, layout
Published: 2021-02-07 16:09:53

Welcome to my first weekly digest of February 🌨️.

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

---

## Interesting articles to read

### 4 Weird Tricks To Become A 10x Flexbox Engineer

Do you ever find yourself trying stuff out until they work? Did you make [css-tricks’ guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) your default new-tab page (or even better, [purchase the poster](https://css-tricks.com/product/css-flexbox-poster/))?

If so, these tricks are for you!

Maybe you’re not going to become a [10x engineer](https://twitter.com/mike_conley/status/1149845391153737728) like I promised. I do promise, however, that you’ll get more confident when authoring and debugging flexbox layouts in DevTools.

[patrick / articles](https://patrickbrosset.com/articles/2021-02-02-4-Weird-Tricks-To-Become-A-10x-Flexbox-Engineer)

### v2.32 (February 2021 #1)

Gatsby v2.32

✨Stable API, art direction support, and improved defaults in beta image plugin.
✨Support for beta image plugin with Contentful.
✨Performance improvements for larger sites (10,000+ pages).

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

### 10 bad TypeScript habits to break this year

TypeScript and JavaScript have steadily evolved over the last years, and some of the habits we built over the last decades have become obsolete. Some might never have been meaningful. Here's a list of 10 habits that we all should break.

[10 bad TypeScript habits to break this year](https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/)

### Designing Better Tooltips For Mobile User Interfaces

Tooltips are powerful design patterns implemented to enhance the design experience by providing additional information precisely when users need it. In this article, we show you how to design tooltips that will amplify your mobile designs and explain where mobile tooltips are most effective.

[Designing Better Tooltips For Mobile User Interfaces - Smashing Magazine](https://www.smashingmagazine.com/2021/02/designing-tooltips-mobile-user-interfaces/)

### What's new in ECMAScript 2021

This week’s TC39 meeting concluded with a complete list of ECMAScript 2021 features. Similarly, how I do it every year, let’s have a look at what’s coming this year. I also prepared for you a few code examples.

[What's new in ECMAScript 2021 | pawelgrzybek.com](https://pawelgrzybek.com/whats-new-in-ecmascript-2021/)

---

## Some great videos I watched this week

### The Past, Present, and Future of CSS-in-JS

Max Stoiber, creator of styled-components and react-boilerplate, talks about what is CSS-in-JS, why do people use it, how has it come as far as it has and where is it going.

{% youtube a31BUlx-EXc %}

by [Max Stoiber](https://twitter.com/mxstbr)

### Angles and Vectors - Nature of Code

In this video, I tackle a common question, how do you make an object point in the direction it's moving? I demonstrate how to get the angle of a vector and create an vector from an angle in p5.js.

{% youtube oXwCVDXS2Lg %}

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

### unknown, never, and void in TypeScript

{% youtube mZCsrRl1ORc %}

by [William Candillon](https://www.youtube.com/c/wcandillon)

### A New Way to Look at Fibonacci Numbers

A look at how Pisano periods and the modulo function can turn the Fibonacci sequence into strange and fun visual designs.

{% youtube o1eLKODSCqw %}

by [Jacob Yatsko](https://www.youtube.com/channel/UCw37_wJcsCjZc5tDgkLf1NA)

---

## Useful GitHub repositories

### Type<Challenge[]>

High-quality types can help improving projects' maintainability while avoiding potential bugs.

There are a bunch of awesome type utility libraries may boosting your works on types, like [ts-toolbelt](https://github.com/millsp/ts-toolbelt), [utility-types](https://github.com/piotrwitek/utility-types), [SimplyTyped](https://github.com/andnp/SimplyTyped), etc, which you can already use.

![https://raw.githubusercontent.com/type-challenges/type-challenges/master/screenshots/logo-light.png](https://raw.githubusercontent.com/type-challenges/type-challenges/master/screenshots/logo-light.png)

{% github type-challenges/type-challenges %}

### tooling.report

It's a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

{% github GoogleChromeLabs/tooling.report %}

---

## dribbble shots

### Rungon - Music Streaming Dashboard

![https://cdn.dribbble.com/users/3860505/screenshots/15060139/media/bdec93527b1e4f8442fa1b02cb5740c4.png](https://cdn.dribbble.com/users/3860505/screenshots/15060139/media/bdec93527b1e4f8442fa1b02cb5740c4.png)

by [Choirul Syafril](https://dribbble.com/choirulsyafril)

### Photo Gallery App

![https://cdn.dribbble.com/users/5031392/screenshots/15046479/media/08720cc5f8607bbdd40d90cac21626db.png](https://cdn.dribbble.com/users/5031392/screenshots/15046479/media/08720cc5f8607bbdd40d90cac21626db.png)

by [Purrweb UI](https://twitter.com/purrweb)

### Flight Ticket Booking App | Part 3

![https://cdn.dribbble.com/users/6462782/screenshots/15067562/media/ac091faa796e89910ec43ee74b181a7e.png](https://cdn.dribbble.com/users/6462782/screenshots/15067562/media/ac091faa796e89910ec43ee74b181a7e.png)

by [Armin Mohammadi](https://dribbble.com/ArminMhmdi)

### Hammer Construction Logo

![https://cdn.dribbble.com/users/6898095/screenshots/15066663/media/6a71393836a207e16b7ce2809431055c.png](https://cdn.dribbble.com/users/6898095/screenshots/15066663/media/6a71393836a207e16b7ce2809431055c.png)

by [GRAFAST DESIGN](https://dribbble.com/grafastdesign)

---

## Tweets

{% twitter 1356350389168316417 %}

{% twitter 1356404787244195840 %}

{% twitter 1356583916237447169 %}

---

## Picked Pens

### #PureCSS - Responsive Elon Musk Portrait

{% codepen https://codepen.io/AsyrafHussin/pen/mdroBzv %}

by [Asyraf Hussin](https://twitter.com/asyrafhussin4)

### Lockdown Fun: Pascal’s Triangle

{% codepen https://codepen.io/stoumann/pen/dyOozQV %}

by [Mads Stoumann](https://twitter.com/madsstoumann)

### Inverted Colors

{% codepen https://codepen.io/marcobiedermann/pen/qBqbbXE %}

by [Marco Biedermann](https://twitter.com/BiedermannMarco)

---

Talk to you next week and stay safe! 👋