Welcome to my Weekly Digest #49 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
Defensive CSS
A list of defensive CSS techniques to avoid potential future issues
Building The Gatsby Changelog Prototype
In this post, Paul documents his journey of developing a prototype Gatsby Changelog site for the GitHub Actions Hackathon.
Building The Gatsby Changelog Prototype
Coloring With Code — A Programmatic Approach To Design
Learn to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!
Coloring With Code - A Programmatic Approach To Design - Codrops
Some great videos I watched this week
Is Web3 all Hype?
A complete introduction into the wild world of Web3 - the decentralized web. Is Web 3.0 the future or is it all hype? Learn about the technologies and patterns used when building an app on the blockchain.
by Fireship
Thinking on ways to solve Toasts
In today's GUI Challenge, Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations, and the FLIP technique which helps build an adaptive and accessible component.
by Adam Argyle
ShopTalk Astro Edition
It's funny how you work on a real project, you get a 10 ✕ better understanding of how it works than if you just hello, world
it, or read a blog post.
by Chris Coyier
Macro & micro layouts - Designing in the Browser
In this episode of Designing in the Browser, we will be elaborating on some concepts introduced in the Container Queries episode and expanding beyond on how to use container queries into the question of when to use them.
by Una
Useful GitHub repositories
eslint-plugin-storybook
Official ESLint plugin for Storybook
storybookjs / eslint-plugin-storybook
Official ESLint plugin for Storybook
Build bulletproof UI components faster
eslint-plugin-storybook
Best practice rules for Storybook
Installation
You'll first need to install ESLint:
npm install eslint --save-dev
# or
yarn add eslint --dev
Next, install eslint-plugin-storybook
:
npm install eslint-plugin-storybook --save-dev
# or
yarn add eslint-plugin-storybook --dev
Usage
Use .eslintrc.*
file to configure rules. See also: https://eslint.org/docs/user-guide/configuring
Add plugin:storybook/recommended
to the extends section of your .eslintrc
configuration file. Note that we can omit the eslint-plugin-
prefix:
{
// extend plugin:storybook/<configuration>, such as:
"extends": ["plugin:storybook/recommended"]
}
This plugin will only be applied to files following the *.stories.*
(we recommend this) or *.story.*
pattern. This is an automatic configuration, so you don't have to do anything.
Overriding/disabling rules
Optionally, you can override, add or disable rules settings. You likely don't want these settings to be applied in every file, so make sure that you add a overrides
section in your .eslintrc.*
file that…
gping
Ping, but with a graph
gping 🚀
Ping, but with a graph.
Table of Contents
Install 💿
- macOS
- Linux (Homebrew):
brew install orf/brew/gping
- CentOS (and other distributions with an old glibc): Download the MUSL build from the latest release
- Windows/ARM
- Scoop:
scoop install gping
- Chocolatey:
choco install gping
- Download the latest release from the github releases page
- Scoop:
- Fedora (COPR):
sudo dnf copr enable atim/gping -y && sudo dnf install gping
- Cargo (This requires
rustc
version 1.44.0 or greater):cargo install gping
- Arch Linux:
pacman -S gping
- Ubuntu/Debian (Azlux's repo):
echo "deb http://packages.azlux.fr/debian/ buster main" | sudo tee /etc/apt/sources.list.d/azlux.list
wget -qO - https://azlux.fr/repo.gpg.key | sudo apt-key add -
sudo apt update
sudo apt install gping
- Gentoo (dm9pZCAq overlay):
sudo eselect repository enable dm9pZCAq
sudo emerge --sync dm9pZCAq
sudo emerge net-misc/gping::dm9pZCAq
Usage
…css.gg
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
astrit / css.gg
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
Demo - Figma - Twitter
Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API
New in 2.0
🥳 200 New Icons
🚀 SVG Icons
🔥 SVG Sprite
💅 Styled Components
⚛️ React Local Styled Components
🦄 Figma Components
🔮 Adobe XD Components
Table of Contents
dribbble shots
NFT Dashboard
by Afshin
MuseOn Branding
Multimedia Design Platform
Crafftt - NFT Marketplace Dashboard
Tweets
Elliot Jay Stocks / Other Form@elliotjaystocksFor the past year, I’ve been working with the @googlefonts team to create a library of educational typographic content, which has been reviewed by the best in the type business.
Say hello to... Google Fonts Knowledge!
(And this is just the beginning.)
fonts.google.com/knowledge16:13 PM - 07 Dec 2021
Storybook@storybookjsStorybook 6.4 makes it easier to build & test complex connected components
▶️ Interactive stories to simulate user behavior
⚡️ On-demand architecture for 4x faster load times
📋 Linter helps enforce best practices
⛸ Automigrate for easier upgrades
ed.gr/dr4hz16:00 PM - 06 Dec 2021
Adrian Bece (アドリアン・ベツエ)@adrianbecedev🎉 I've launched a new project 🎉
Introducing "Modern Fluid Typography Editor" - an awesome & handy tool for any #frontend #webdeveloper . Create and fine-tune fluid typography values in your projects with ease. It generates a #CSS clamp code snippet.
modern-fluid-typography.vercel.app12:09 PM - 06 Dec 2021
🤔 What if you could "run" a macOS on the web?
🤯 Check out this crazy page built by @puruvjdev using @sveltejs and @vite_js for bundling.
👉 macos.vercel.app15:45 PM - 04 Dec 2021
GitHub@githubGet busy curating – The Lists public beta is now available! Organize your starred repositories with Lists for easy access or to share your favorites.
github.blog/changelog/2021…22:30 PM - 09 Dec 2021
GitHub@githubCheck out the technology preview for GitHub code search, the next iteration for search, discovery, and navigation on GitHub.
github.blog/2021-12-08-imp…17:01 PM - 08 Dec 2021
Picked Pens
Sliding Stepper
by Jon Kantner
Craft Button
by Adir
Responsive castle
Podcasts worth listening
Call with Kent – Bestway to reset a form
This is a question about: Improve the Performance of your React Forms
Syntax – Meta Tags
In this Hasty Treat, Wes and Scott talk about Meta Tags.
Thank you for reading, talk to you next week, and stay safe! 👋
Top comments (0)