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
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.
Shopify
/
restyle
A type-enforced system for building UI components in React Native with TypeScript.
@shopify/restyle
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>(…swc
swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.
swc-project
/
swc
swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.
Make the web (development) faster
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
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:
- Giving developer time on the project. (Message us on Github discussions (preferred) or Slack for guidance!)
- Giving funds by becoming a sponsor (see https://opencollective.com/swc)!
Contributing
See CONTRIBUTING.md. You may also find…
dribbble shots
Surfing app concept
Bit Coin - Crypto Currency App
by Syful Islam
Banking App - Mobile Design Concept
Tweets
Some useful tricks I use to help me remember when to use certain TypeScript types:
unknown = "don't know"
any = "don't care"
never = "don't want"
void = "don't return"12:29 PM - 13 Sep 2021
Oh wow, I didn't realize that the `rgb()` CSS color function accepts alpha values these days. 😲
Comma-separated:
✅ rgb(200, 125, 50)
✅ rgb(200, 125, 50, 0.5) /* 50% opacity */
Space-separated:
✅ rgb(200 125 50)
✅ rgb(200 125 50 / 0.5) /* 50% opacity */08:19 AM - 16 Sep 2021
media-queries-4 making confusing queries much simpler 😍
caniuse (Firefox only atm) caniuse.com/mdn-css_at-rul…
CSS spec w3.org/TR/mediaquerie…
PostCSS plugin github.com/postcss/postcs…
⭐️ to show Chromium you want it bugs.chromium.org/p/chromium/iss…13:21 PM - 16 Sep 2021
TIL that you can control how virtual keyboards capitalize characters and words by default.
Learn more on @htm_hell: htmhell.dev/tips/autocapit…06:39 AM - 17 Sep 2021
Ian Miell@ianmiell
Source unknown...05:07 AM - 17 Sep 2021
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! 👋
Oldest comments (0)