in

Weekly Digest 37/2021 – DEV Community


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.

Spotify for the terminal written in Rust 🚀




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!

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.

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

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.

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.

Check out the documentation in the website.

Please see comparison with babel.

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





Source: https://dev.to/marcobiedermann/weekly-digest-37-2021-3lam

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

PHP FansOnly Patrons v2.0 – Paid Content Creators Platform – ULC

React hooks for generating QR code