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.

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.

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.

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.

Useful GitHub repositories

Canvas Confetti

On-demand confetti gun

GitHub logo catdad / canvas-confetti

🎉 on-demand confetti gun

Canvas Confetti

travis jsdelivr npm-downloads npm-version

Demo

catdad.github.io/canvas-confetti

Install

You can install this module as a component from NPM:

npm install --save canvas-confetti
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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…

wifi-password

Get the password of the wifi you're on

GitHub logo 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



Twind

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

GitHub logo 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

MIT License Latest Release Bundle Size Package Size Documentation Github Discord CI Coverage Status

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:

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.

😎

dribbble shots

Gamification components

Social Media Stats Dashboard

Client Details

Career & Experience Tracking Dashboard

Tweets

Picked Pens

Confetti Button

Hamster

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.

Syntax – Horror Web Dev Stories

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition!

Thank you for reading, talk to you next week, and stay safe! 👋

26