Weekly Digest 37/2021

Welcome to my Weekly Digest #37 of this year.

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

---

Interesting articles to read

Designing Beautiful Shadows in CSS

Most of the shadows are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, Josh will show you how.

Designing Beautiful Shadows in CSS

The Future of CSS: Cascade Layers

There’s a new CSS Language Feature coming to help us: Cascade Layers (CSS @layer).

The Future of CSS: Cascade Layers (CSS @layer)

Less Absolute Positioning with Modern CSS

How to use use position:absolute less by leveraging modern CSS

Less Absolute Positioning With Modern CSS - Ahmad Shadeed

---

Some great videos I watched this week

React Storybook Crash Course

Designing and testing components are crucial to every application, but it can be difficult to view components in isolation. This makes it hard to design and test components, but with Storybook this is no longer an issue. Storybook makes developing, testing and working with a component library so much easier. You can test complex actions and ensure your components are always working as expected.

by Web Dev Simplified

CSS accent-color

It's a fun little thing. Or is it not really "little"? Dave says this is a massive improvement for design systems work where NOT having to re-create form components just for size and color changes is a big time saver.

by Chris Coyier

Stop using @import with Sass

The use of @import has been deprecated in Sass for quite a while now, but a lot of people still use it. In this video, I take a quick look at the replacements you should be using instead, @use and @forward.

by Kevin Powell

Springy Animated Modals

Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its spring animations

by Fireship

Chrome 94 - What’s New in DevTools

Use DevTools in your preferred language, new Nest Hub devices, new CSS container queries badge and more.

by Google Chrome Developers

---

Useful GitHub repositories

Spotify TUI

A Spotify client for the terminal written in Rust.

Rigellute / spotify-tui

Spotify for the terminal written in Rust 🚀

Spotify TUI

A Spotify client for the terminal written in Rust.

The terminal in the demo above is using the Rigel theme.

• Spotify TUI
  • Installation
    • Homebrew
    • Snap
    • AUR
    • Nix
    • Void Linux
    • Fedora/CentOS
    • Cargo
      • Note on Linux
    • Windows
      • Scoop installer
    • Manual
  • Connecting to Spotify’s API
  • Usage
• Configuration
  • Limitations
  • Using with spotifyd
  • Libraries used
  • Development
    • Windows Subsystem for Linux
  • Contributors
  • Roadmap
    • High-level requirements yet to be implemented

Installation

The binary executable is spt.

Homebrew

For both macOS and Linux

brew install spotify-tui

To update, run

brew upgrade spotify-tui

Snap

For a system with Snap installed, run

snap install spt

The stable version will be installed for you automatically.

If you want to install the nightly build, run

snap install spt --edge

AUR

For those on Arch Linux you can find the package on AUR here. If however you're using an AUR helper you can install directly from that, for…

View on GitHub

Stargazer

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

pomber / stargazer

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

Example

out.mp4

There are 2 ways to make your Stargazer video.

1. Make your Video locally
2. Make your Video using Github Actions (Easy)

Make your own video (local)

1. Use this repo as a template

2. Go to https://github.com/settings/personal-access-tokens/new and create a token with default settings. Create a .env file and add it:

REMOTION_GITHUB_TOKEN=github_pat_...

3. Install dependencies:

npm i

4. Start the preview:

npm start

5. Open the right sidebar, enter your repo name and click "Render".

Make your own video (GitHub Actions)

1. Fork this repo

2. Go to Actions of the forked repo

3. Click on I understand my workforce, go ahead and enable them

4. Go to the render video option in the workforce.

5. Over here enter the details of the repo for which you want to make the Stargazer video.

6. Here you can see the progress of the rendering video.

7. By clicking on…

View on GitHub

Restyle

A type-enforced system for building UI components in React Native with TypeScript.

Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.

Getting started • Installation • Playground • Discord

Build a consistent, themed UI in minutes.

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.

This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.

Installation

Add the package to your project using one of the following:

yarn add @shopify/restyle

npm install @shopify/restyle

npx expo install @shopify/restyle

Usage

See Usage in the documentation, or see below for the fixture app.

App / Playground

The fixture is an example…

View on GitHub

swc

swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.

swc-project / swc

Rust-based platform for the Web

Make the web (development) faster

SWC (stands for Speedy Web Compiler) is a super-fast TypeScript / JavaScript compiler written in Rust. It's a library for Rust and JavaScript at the same time. If you are using SWC from Rust, see rustdoc and for most users, your entry point for using the library will be parser.

Also, SWC tries to ensure that

If you select the latest version of each crates, it will work

for rust users.

MSRV of crates is currently 1.73.

To update all SWC crates you use, you can run curl https://raw.githubusercontent.com/swc-project/swc/main/scripts/update-all-swc-crates.sh | bash -s. This script will update all dependencies to the latest version and run cargo build to ensure that everything works Note that you need

• jq
• cargo upgrade

command to run the script.

---

If you are using SWC from JavaScript, please refer to docs on the website.

Documentation

Check out…

View on GitHub

---

dribbble shots

Surfing app concept

by Sadhin Saleem

Bit Coin - Crypto Currency App

by Syful Islam

Banking App - Mobile Design Concept

by Julius Branding

---

Tweets

---

Picked Pens

Focusss

by Hakim El Hattab

Pokédex

by Marco Biedermann

---

Podcasts worth listening

Ladybug – Getting Started With Java

Java is a high-level, class-based, object-oriented programming language. It’s a general-purpose programming language designed to let app developers: write once, run anywhere. Today we’re diving into the world of Java.

The Changelog – Coding in the cloud with Codespaces

On this special edition of The Changelog, we’re talking with Cory Wilkerson, Senior Director of Engineering at GitHub, about GitHub Codespaces. For years now, the possibility of coding in the cloud seemed so close, yet so far away for a number of reasons. According to Cory, the raw ingredients to make coding in the cloud a reality has been there for years.

Syntax – New to JavaScript — ES2022

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.

---

Thank you for reading, talk to you next week, and stay safe! 👋