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.
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.
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.
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…
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.
- Make your Video locally
- Make your Video using Github Actions (Easy)
Make your own video (local)
-
Go to https://github.com/settings/personal-access-tokens/new and create a token with default settings. Create a
.envfile and add it:
REMOTION_GITHUB_TOKEN=github_pat_...
- Install dependencies:
npm i
- Start the preview:
npm start
- Open the right sidebar, enter your repo name and click "Render".
Make your own video (GitHub Actions)
-
Fork this repo
-
Go to Actions of the forked repo
-
Click on
I understand my workforce, go ahead and enable them
-
Go to the render video option in the workforce.
-
Over here enter the details of the repo for which you want to make the Stargazer video.
-
Here you can see the progress of the rendering video.
-
By clicking on…
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.
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…
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
jqcargo upgrade
command to run the script.
If you are using SWC from JavaScript, please refer to docs on the website.
Documentation
Check out…
dribbble shots
Surfing app concept
Bit Coin - Crypto Currency App
by Syful Islam
Banking App - Mobile Design Concept
Tweets
Picked Pens
Focusss
Pokédex
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! 👋
Top comments (0)