Weekly Digest 06/2021
Tags: css, javascript, typescript, design
Published: 2021-02-14 20:40:38

Welcome to my second 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

### Managing CSS Z-Index In Large Projects

Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions that brings clarity and confidence to working with z-index.

[Managing CSS Z-Index In Large Projects - Smashing Magazine](https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/)

### An Interactive Guide to CSS Transitions

This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.

[An Interactive Guide to CSS Transitions](https://www.joshwcomeau.com/animation/css-transitions/)

### The best JavaScript date libraries in 2021

Wrangling dates and times in JavaScript can be a headache. JavaScript date libraries provide user-friendly APIs and useful utilities that alleviate some of that pain. But with so many options how do you pick the best one? In this post we delve into the world of JavaScript date libraries to help you choose. Our top pick, date-fns, delivers the best feature set combined with an elegant modular architecture.

[The best JavaScript date libraries in 2021 - Skypack Blog](https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/)

### Fluid typography with CSS clamp

Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

[Fluid typography with CSS clamp - Tutorial - Piccalilli](https://piccalil.li/tutorial/fluid-typography-with-css-clamp)

### Announcing TypeScript 4.2 RC

Today we’re excited to announce our Release Candidate of TypeScript 4.2! Between now and the stable release of TypeScript 4.2, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet,

[Announcing TypeScript 4.2 RC | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-rc/)

### How to Install a NPM Module from GitHub Branch

In my journey to work more quickly with a project containing loads of dependencies, I've come across a few techniques I've not needed to use before.

[How to Install a NPM Module from GitHub Branch](https://davidwalsh.name/how-to-install-a-npm-module-from-github-branch)

---

## Some great videos I watched this week

### Can A.I. Design the Perfect Roller Coaster?

{% youtube 4l5MGqrAItU %}

by [Art of Engineering](https://twitter.com/aoEngineering)

### The Future of Machine Learning and JavaScript

There are many exciting things happening with AI, from which, until recently, JavaScript developers were largely shut out. But things are changing, if you can do `npm install @tensorflow/tfjs` or make an API call, you can now do AI. In this fast-paced talk, I'll open your mind to what's possible by demoing several AI-powered JavaScript apps and show you how they were built using either TensorFlow.js or easy to use AI-powered APIs. You don't need a PhD in Maths, you don't need years of experience, you just need imagination and the willingness to try.

{% youtube HC38FUMNfc8 %}

by [Asim Hussain](https://twitter.com/jawache)

### VS Code 🔥 Tips and Tricks

We'll go over some of our favorite and essential tips, as well as demo some of the newest features and advanced settings for you to customize VS Code to your liking. Whether you are just learning VS Code or are a long-time user, you'll be sure to leave with some new tricks and shortcuts to become more productive while coding.

{% youtube nmU9PAinP14 %}

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

### Linux Directories Explained in 100 Seconds

Linux is a cryptic labyrinth of directories defined my Filesystem Hierarchy Standard (FHS). Learn the purpose of the most common Linux directories in 100 seconds

{% youtube 42iQKuQodW4 %}

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

### Graphing Sine Wave - Nature of Code

What does a sine wave look like? In this video I look at how to graph and animate a sine wave in p5.js varying the period and phase.

{% youtube JLAc9hMtcxk %}

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

---

## Useful GitHub repositories

### Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams. Collaborative and end-to-end encrypted.

![https://github.com/excalidraw/excalidraw/blob/master/public/og-image.png?raw=true](https://github.com/excalidraw/excalidraw/blob/master/public/og-image.png?raw=true)

{% github excalidraw/excalidraw %}

### Awesome-Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

![https://github.com/LeCoupa/awesome-cheatsheets/blob/master/_design/cover_github@2x.png?raw=true](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/_design/cover_github@2x.png?raw=true)

{% github LeCoupa/awesome-cheatsheets %}

---

## dribbble shots

### Wine Shop POS App

![https://cdn.dribbble.com/users/5031392/screenshots/15097032/media/89f03e62bc074841a5708049cf2010e9.png](https://cdn.dribbble.com/users/5031392/screenshots/15097032/media/89f03e62bc074841a5708049cf2010e9.png)

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

### Toplay Website

![https://cdn.dribbble.com/users/6234/screenshots/15096917/media/47ced9a86254278d9182ffe2873098ae.png](https://cdn.dribbble.com/users/6234/screenshots/15096917/media/47ced9a86254278d9182ffe2873098ae.png)

by [Halo UI/UX](https://twitter.com/halolabteam)

### Apps Planning Concept

![https://cdn.dribbble.com/users/2302891/screenshots/15089012/media/a5027c037f648bf880f9983f576a3fb3.jpg](https://cdn.dribbble.com/users/2302891/screenshots/15089012/media/a5027c037f648bf880f9983f576a3fb3.jpg)

by [Adalahreza](https://twitter.com/adalahreza28)

### Parfume Apps Exploration

![https://cdn.dribbble.com/users/6843587/screenshots/15091913/media/e3a3c3f8507d900acd0e8701286ad2a2.png](https://cdn.dribbble.com/users/6843587/screenshots/15091913/media/e3a3c3f8507d900acd0e8701286ad2a2.png)

by [Rohmad Khoirudin](https://dribbble.com/Rohmad_Khoir)

---

## Tweets

{% twitter 1358842017095311361 %}

{% twitter 1358824089960542208 %}

{% twitter 1359093978570907648 %}

{% twitter 1359399954347929604 %}

{% twitter 1359416560847261697 %}

{% twitter 1359525093601382406 %}

{% twitter 1360664535120506881 %}

---

## Picked Pens

### Untitled

{% codepen https://codepen.io/bennettfeely/pen/xxEMQxa %}

by [Bennett Feely](https://twitter.com/bennettfeely)

### Checkout Form

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

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

---

Talk to you next week and stay safe! 👋