Weekly Digest 43/2021

Welcome to my Weekly Digest #43. Happy Halloween everyone 🎃

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

Bringing teams together in Creative Cloud at Adobe MAX 2021

At Adobe MAX 2021 we unveiled Creative Cloud Canvas & Spaces to help you collaborate better in Creative Cloud. We’re also extending Photoshop & Illustrator to the web.

Get a catch block error message with TypeScript

TypeScript forces you to acknowledge you can't know what was thrown making getting the error message a pain. Here's how you can manage it.

Merge Conflicts: What They Are and How to Deal with Them

Merge conflicts… Nobody likes them. Some of us even fear them. But they are a fact of life when you’re working with Git, especially when you’re teaming up with other developers.

Some great videos I watched this week

Details Elements Obviously Need a Pizza Arrow

If you make a summary of a details anything other than the default display: list-item;, then you lose the default ::marker.

by Chris Coyier

Next.js 12 is a Beast

Your first look at Next.js version 12. It's packed with awesome new features, like a rust compiler, middleware, concurrent mode, server components, and more.

by Fireship

Universe 2021 Keynote

CEO Nat Friedman will introduce a demo-packed session highlighting the latest feature updates. You'll hear directly from the Hubbers who helped build them and learn how we successfully use GitHub at GitHub to build GitHub on GitHub.

by GitHub

Make Money from your API Tutorial

Learn how to collect payments from an API or SaaS product. In this tutorial, we build an Express.js API from scratch, then make money by integrating Stripe Metered Billing.

by Fireship

Useful GitHub repositories

Canvas Confetti

On-demand confetti gun

catdad / canvas-confetti

🎉 on-demand confetti gun

Demo

catdad.github.io/canvas-confetti

Install

You can install this module as a component from NPM:

npm install --save canvas-confetti

You can then require('canvas-confetti'); to use it in your project build. Note: this is a client component, and will not run in Node. You will need to build your project with something like webpack in order to use this.

You can also include this library in your HTML page directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

Note: you should use the latest version at the time that you include your project. You can see all versions on the releases page.

Reduced Motion

Thank you for joining me in this very important message about motion on your website. See, not everyone likes it, and some actually prefer no motion. They have ways to tell us about it and we should listen. While I don't want…

View on GitHub

wifi-password

Get the password of the wifi you're on

rauchg / wifi-password

Get the password of the wifi you're on (bash)

wifi-password

People ask you for the Wi-Fi password. Answer quickly. macOS only. Windows version.

How to use

1. Install it

With bpkg:

$ bpkg install rauchg/wifi-password

With Homebrew:

$ brew install wifi-password

With Antigen:

Add antigen bundle rauchg/wifi-password to your .zshrc with your other antigen commands

With Zgen

Add zgen load rauchg/wifi-password to your .zshrc with your other zgen commands

or with curl:

curl -L https://raw.github.com/rauchg/wifi-password/master/wifi-password.sh -o ~/bin/wifi-password && chmod +x ~/bin/wifi-password

If you don't have ~/bin in your $PATH, replace it with /usr/local/bin or similar.

2. Use it:

To get the password for the WiFi you're currently logged onto:

$ wifi-password

To get it for a specific SSID:

$ wifi-password <ssid>

To put it straight in your clipboard for pasting elsewhere (OS X only):

$ wifi-password | pbcopy

License

MIT

View on GitHub

Twind

The smallest, fastest, most feature-complete Tailwind-in-JS solution in existence.

tw-in-js / twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

Twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence

Twind is a small compiler (~13kB) that converts Tailwind classes into actual CSS rules at runtime. If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar.

Documentation

Frequently viewed docs:

Quick Reference – fast overview
Getting Started – how to install twind
Shim – seamless integration with existing Tailwind HTML
Styling with Twind – how to style with Twind
Grouping – how to optimize rules size
Theming – how to apply your theme
CSS-in-JS – how to apply custom CSS
Tailwind Extensions – which additional features are available

Features

⚡️ No build step

Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.

🚀 Framework agnostic

If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.

😎…

View on GitHub

dribbble shots

Tweets

Josh 👻

@joshwcomeau

Omg this is genius. “Hocus Focus”, an accessibility-themed horror game.

The goal is simple: using the keyboard, navigate from the start emoji to the finish emoji.

Easier said than done 🎃

focus.hteumeuleu.com

By @HTeuMeuLeu, discovered in @amber1ey's wonderful newsletter!

14:10 PM - 25 Oct 2021

Jane "Not A Twïtter Employee" Manchun Wong

@wongmjane

i’m sorry

18:44 PM - 28 Oct 2021

GitHub

@github

ICYMI: Press ctrl-k / cmd-k on github.com to navigate, search, and run commands directly from your keyboard 🔑 ⚡

21:14 PM - 28 Oct 2021

🧁🍨 Mark Dalgleish

@markdalgleish

GitHub Copilot is a designer now.

00:29 AM - 29 Oct 2021

Anwesh Gangula

@anweshgangula

"Scroll-linked Animations" are going to improve interactivity and enable smooth story-telling in webpages.
Lot of the current methods to achieve this involve using "Intersection Observer", but this most likely would change that. twitter.com/argyleink/stat…

13:11 PM - 30 Oct 2021

Adam Argyle @argyleink
Inspired by @RobinhoodApp, a CSS way @supports (animation-timeline: works) { @scroll-timeline scroll-fade { time-range: 4s } @keyframes fade-in { to { opacity: 1 } } nav > * { opacity: 0; animation: fade-in 1s linear both; animation-timeline: scroll-fade } } https://t.co/1luqrOVpKV

Picked Pens

Confetti Button

by Marco Biedermann

Hamster

by Jon Kantner

Podcasts worth listening

Call with Kent – Protected route and redirect after payment

This is about protected route and 3rd party payment flow, ending in a re-direct back to my website. The user would need to re-login again. How to avoid that?

The Changelog – Oh my! Zsh.

Oh My Zsh — a delightful, open-source, community-driven framework for managing your Zshell configuration.

CodePen Radio – Apollo at CodePen

Rachel and Chris chat about all things Apollo GraphQL. Apollo is in this weird category of software where like by far most websites do not need it or anything like it.