DEV Community

Cover image for Weekly Digest 37/2021
Marco Biedermann
Marco Biedermann

Posted on

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.

GitHub logo Rigellute / spotify-tui

Spotify for the terminal written in Rust 🚀

Spotify TUI

Continuous Integration Crates.io

All Contributors

Follow Alexander Keliris (Rigellute)

A Spotify client for the terminal written in Rust.

Demo

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

Installation

The binary executable is spt.

Homebrew

For both macOS and Linux

brew install spotify-tui
Enter fullscreen mode Exit fullscreen mode

To update, run

brew upgrade spotify-tui
Enter fullscreen mode Exit fullscreen mode

Snap

For a system with Snap installed, run

snap install spt
Enter fullscreen mode Exit fullscreen mode

The stable version will be installed for you automatically.

If you want to install the nightly build, run

snap install spt --edge
Enter fullscreen mode Exit fullscreen mode

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…

Stargazer

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

GitHub logo 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

Make your own video

Dev

To run it locally you need a .env file with a github token var REMOTION_GITHUB_TOKEN

Credits

Made with Remotion




Restyle

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

GitHub logo Shopify / restyle

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

@shopify/restyle

RestyleTheme 2020-02-25 17_43_51

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.

Here's an example of how a view built with Restyle components could look:

import {
  ThemeProvider,
  createBox,
  createText,
  createRestyleComponent,
  createVariant,
  VariantProps,
} from '@shopify/restyle';
// See the "Defining Your Theme" readme section below
import theme, {Theme} from './theme';

const Box = createBox<Theme>(
Enter fullscreen mode Exit fullscreen mode

swc

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

GitHub logo swc-project / swc

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

babel

Make the web (development) faster

npm Downloads undefined

CI Status

swc 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 entrypoint for using library will be parser.

If you are using swc from javascript, please refer to docs on the website.

Documentation

Check out the documentation in the website.

Features

Please see comparison with babel.

Performance

Please see benchmark results on the website.

Supporting swc

Backers on Open Collective Gold sponsors on Open Collective Silver sponsors on Open Collective Bronze sponsors on Open Collective

swc is a community-driven project, and is maintained by a group of volunteers. If you'd like to help support the future of the project, please consider:

Contributing

See CONTRIBUTING.md. You may also find…


dribbble shots

Surfing app concept

https://cdn.dribbble.com/users/6337227/screenshots/16476321/media/ead508e57919ee3a27a0786175820a6f.png

by Sadhin Saleem

Bit Coin - Crypto Currency App

https://cdn.dribbble.com/users/2969830/screenshots/16478674/media/27924e920befe7ae4ce37b48e6e7b20c.jpg

by Syful Islam

Banking App - Mobile Design Concept

https://cdn.dribbble.com/users/7514969/screenshots/16477023/media/3f6e3dc3a7158fbf29d4e3dc2a645243.png

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! 👋

Discussion (0)