Weekly Digest 36/2021
Tags: css, javascript, react, webdev
Published: 2021-09-12 15:48:15

Welcome to my Weekly Digest #36 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

### EyeDropper API Dropped

Chrome has shipped the EyeDropper API in v95.

[EyeDropper API Dropped](https://css-tricks.com/eyedropper-api-dropped/)

### Build an Instagram-like infinite scrolling feed with React Query

Learn how to build an Instagram-like infinite scrolling feed in a React application with React Query’s `useInifiniteQuery()` Hook.

[Build an Instagram-like infinite scrolling feed with React Query - LogRocket Blog](https://blog.logrocket.com/build-instagram-infinite-scrolling-feed-react-query/)

### An Interactive Guide to Keyframe Animations

CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this deep-dive tutorial, we'll learn how CSS keyframes work from the ground up, and see how to use them to build high-quality animations.

[An Interactive Guide to Keyframe Animations](https://www.joshwcomeau.com/animation/keyframe-animations/)

---

## Some great videos I watched this week

### 13 Advanced Git Techniques and Shortcuts

Productive programmers tend to be really good at Git. Take a look at 13 advanced git tips and tricks to supercharge your development workflow.

{% youtube ecK3EnyGD8o %}

by [Fireship](https://twitter.com/fireship_dev)

### What Is Fastify?

{% youtube k1FSybMulVQ %}

by [LevelUpTuts](https://twitter.com/leveluptuts)

### Thinking on ways to solve split buttons

In today's GUI challenge I share my thinking on a way to solve split buttons. A staple component for condensed interfaces, it allows a single button to feature secondary actions. Lots of great tips about theming, shadows, color, layouts, interaction UX, and more.

{% youtube Qcpru-fIgwk %}

by [Adam Argyle](https://twitter.com/argyleink)

### Machine Learning Explained in 100 Seconds

Machine Learning is the process of teaching a computer how to perform a task without explicitly programming it. The process feeds algorithms with large amounts of data to gradually improve predictive performance.

{% youtube PeMlggyqz0Y %}

by [Fireship](https://twitter.com/fireship_dev)

### Meet an Extension: Shorten URLs

Wish your app could automatically shorten those large, ungainly URLs into something more… uh… gainly? Well, with the Shorten URLs extension, we can take any URL you store in a Firestore collection, send it over to [bit.ly](http://bit.ly/), and convert those URLs into something a lot shorter and a lot easier to share with your friends!

{% youtube RbEHaiJYueA %}

by [Firebase](https://twitter.com/Firebase)

### CSS Modules in CSS Modules

There is a newly-dropped Chromium feature to `import` stylesheets, which turns them into a constructible Stylesheet. Dave shows Chris how it works, the clutch feature being that you have a real JavaScript object of the stylesheet to potentially manipulate before using.

{% youtube oqIKbe5WLKA %}

by [Chris Coyier](https://twitter.com/chriscoyier)

---

## Useful GitHub repositories

### Women World Wide Dev

[WomenWorldWide.dev](https://womenworldwide.dev/) is a map of coding and tech groups around the world for all who identify as women.

{% github prisma/women-world-wide %}

### Microbundle

The zero-configuration bundler for tiny modules, powered by Rollup.

{% github developit/microbundle %}

### TSDX

Build production-ready TypeScript packages. The world's leading companies use TSDX to build and test TypeScript packages

{% github formium/tsdx %}

---

## dribbble shots

### Illustration and Hero section concept

![https://cdn.dribbble.com/users/1549225/screenshots/16412114/media/f4516ed9826e093bcf460adf85affe85.png](https://cdn.dribbble.com/users/1549225/screenshots/16412114/media/f4516ed9826e093bcf460adf85affe85.png)

by [prajil](https://dribbble.com/shots/16412114-Illustration-and-Hero-section-concept)

### loja CUPS.

![https://cdn.dribbble.com/users/3306546/screenshots/16418381/media/bc34d1e6dd0bb012ea09c807020b6d0f.png](https://cdn.dribbble.com/users/3306546/screenshots/16418381/media/bc34d1e6dd0bb012ea09c807020b6d0f.png)

by [Pablo Galvão](https://dribbble.com/shots/16418381-loja-CUPS)

### Social Media App

![https://cdn.dribbble.com/users/7514969/screenshots/16138528/media/82d409aaed80a267b297fe80f5cff509.png](https://cdn.dribbble.com/users/7514969/screenshots/16138528/media/82d409aaed80a267b297fe80f5cff509.png)

by [Julius Branding](https://dribbble.com/shots/16138528-Social-Media-App-Mobile-Design)

### eCommerce Mobile App Design

![https://cdn.dribbble.com/users/2399102/screenshots/16412950/media/a5733cfd4dfb9cb09ba3935874cfd62d.jpg](https://cdn.dribbble.com/users/2399102/screenshots/16412950/media/a5733cfd4dfb9cb09ba3935874cfd62d.jpg)

by [CMARIX TechnoLabs](https://dribbble.com/shots/16412950-eCommerce-Mobile-App-Design)

---

## Tweets

{% twitter 1436062501834264576 %}

{% twitter 1436377742040354825 %}

{% twitter 1436696408506212353 %}

---

## Picked Pens

### Pure CSS logarithmic spiral

{% codepen https://codepen.io/thebabydino/pen/powNvqB %}

by [Ana Tudor](https://twitter.com/anatudor)

### SVG Debit Card Animation 4

{% codepen https://codepen.io/creativeocean/pen/dyRWXPz %}

by [Tom Miller](https://codepen.io/creativeocean)

---

## Podcasts worth listening

### Syntax – TypeScripts Strict Explained

In this Hasty Treat, Scott and Wes talk about the Typescript `strict` flag — what it does and why you might use it.

{% spotify spotify:episode:39vBvvPrhOsgoMxLnlMEYr %}

### Syntax – Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity

It's another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!

{% spotify spotify:episode:6WMzwrutlTjeC9VKuZbhLX %}

---

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