Weekly Digest 09/2021
Tags: gatsby, javascript, reactnative, css
Published: 2021-03-07 18:53:43

Welcome to my Weekly Digest #9 of this year.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, and designs I consumed during this week.

---

## Interesting articles to read

### How to Map Mouse Position in CSS

Let’s look at how to get the user’s mouse position and map it into CSS custom properties: `--positionX` and `--positionY`. 

We could do this in JavaScript. If we did, we could do things like make an element draggable or move a background. But actually, we can still do similar things, but not use any JavaScript!

[https://css-tricks.com/how-to-map-mouse-position-in-css/](https://css-tricks.com/how-to-map-mouse-position-in-css/)

### Use Touch ID for sudo on Mac

The landscape of security is changing quite a bit. We’ve gone from basic username and password to 2FA, facial recognition, fingerprint recognition, and so on. Hell, my Mac unlocks simply when I have my Apple Watch nearby. In the end, I probably use the Mac fingerprint key the most.

[Use Touch ID for sudo on Mac](https://davidwalsh.name/touch-sudo)

### GatsbyConf 2021: Announcing Gatsby v3.0, Gatsby Hosting, All-New Gatsby Image, and More 🚀

It has been over two years since the last major version of Gatsby. This doesn’t mean they’ve been sitting on our laurels resting. They are committed to making Gatsby the best open-source framework, plugin ecosystem, and developer experience anywhere. Releasing Gatsby v3.0 is a culmination of months and years of effort.

[Gatsby version 3.0, Gatsby Hosting, All New Gatsby Image, Gatsby Functions](https://www.gatsbyjs.com/blog/gatsbyconf-product-announcements/)

### How to Make Badass Shadows

How to Make Badass Shadows. Tips to help create better UI shadows.

[How to Make Badass Shadows](https://blog.prototypr.io/how-to-make-badass-shadows-564b3a30aba4)

### React Native is the Future of Mobile at Shopify

After years of native mobile development, Shopify decided to build all of their new mobile apps using React Native. As they'll explain, that decision doesn’t come lightly.

[React Native is the Future of Mobile at Shopify](https://shopify.engineering/react-native-future-mobile-shopify)

### content-visibility: the new CSS property that boosts your rendering performance

The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to leverage this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.

[content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)

---

## Some great videos I watched this week

### New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!

Chrome 89 is rolling out now! Web HID, Web NFC, and Web Serial have graduated from their origin trials and are now available in stable. We’re closing a loop-hole a few developers used to skirt the PWA installability checks. Web Share, and Web Share Target arrive on the desktop. And there’s plenty more.

{% youtube O-gv6zLZHKw %}

by [Google Chrome Developers](https://twitter.com/ChromiumDev)

### A First Look at Cloudflare Pages

{% youtube 5sJn7kNaVJk %}

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

### Git Rebase Vs. Merge

In this video, we dive deep into two similar and confusing git concepts: merging and rebasing. Why do some people use rebase instead of merge? What's the golden rule of rebasing?! Why are people scared of rebasing?

{% youtube 7Mh259hfxJg %}

by [Colt Steele](https://www.youtube.com/c/ColtSteeleCode)

### Announcing: Gatsby Plugin Image with Laurie Barth

Laurie Barth's talk made a big splash at GatsbyConf (and on Twitter) when she took viewers on a deep-dive into the launch of the brand new gatbsy-plugin-image, the best in class solution for including performant images in your site. From support for nextgen formats like AVIF to thorough sizing and layout considerations, this is a game-changer. Did we mention the new StaticImage component that removes the need for GraphQL when using one-off images?

{% youtube zRtFwzF4p1o %}

by [Gatsby](https://twitter.com/GatsbyJS)

### This is What Abraham Lincoln May Have Looked Like!

{% youtube 2wcw_O_19XQ %}

---

## Useful GitHub repositories

### Awesome CTO

A curated and opinionated list of resources for Chief Technology Officers and VP R&D, with the emphasis on startups and hyper-growth companies

{% github kuchin/awesome-cto %}

### gatsby-source-shopify-experimental

This plugin works by leveraging Shopify's bulk operations API, which allows us to process large amounts of data at once. This gives us a more resilient and reliable build process. It also enables incremental builds so that your site can build quickly when you change your data in Shopify.

{% github gatsbyjs/gatsby-source-shopify-experimental %}

### AWS Toolkit for Visual Studio Code

AWS Toolkit for Visual Studio Code, an extension for working with AWS services including AWS Lambda.

{% github aws/aws-toolkit-vscode %}

---

## dribbble shots

### The Pills landing page interaction

![https://cdn.dribbble.com/users/1998175/screenshots/15230266/media/b2c1bfdd3b14953d76803493497e884f.jpg](https://cdn.dribbble.com/users/1998175/screenshots/15230266/media/b2c1bfdd3b14953d76803493497e884f.jpg)

by [Taras Migulko](https://dribbble.com/shots/15230266-The-Pills-landing-page-interaction)

### Soulwise App - Home

![https://cdn.dribbble.com/users/1720296/screenshots/15229489/media/bf1922ce0d92f1e8b72d3867d3c62621.png](https://cdn.dribbble.com/users/1720296/screenshots/15229489/media/bf1922ce0d92f1e8b72d3867d3c62621.png)

by [Adarsh Goldar](https://dribbble.com/shots/15229489-Soulwise-App-Home)

### Organic Landing Page Design - Homepage

![https://cdn.dribbble.com/users/4095861/screenshots/15247941/media/34270265fad7fa33a0a6b5f7c8ee607c.jpg](https://cdn.dribbble.com/users/4095861/screenshots/15247941/media/34270265fad7fa33a0a6b5f7c8ee607c.jpg)

by [Muhammad Shofiuddoula](https://dribbble.com/shots/15247941-Organic-Landing-Page-Design-Homepage)

### Travel App Ui design

![https://cdn.dribbble.com/users/3473978/screenshots/15245915/media/9cfbc0f8d36b189ae02a09e8f30b4169.jpg](https://cdn.dribbble.com/users/3473978/screenshots/15245915/media/9cfbc0f8d36b189ae02a09e8f30b4169.jpg)

by [CreativePeoples](https://dribbble.com/shots/15245915-Travel-App-Ui-design)

---

## Tweets

{% twitter 1366526458001297410 %}

{% twitter 1366814970776866819 %}

{% twitter 1368471484910370818 %}

{% twitter 1368131837634215940 %}

{% twitter 1368479029683122180 %}

---

## Picked Pens

### Astronomical & Tide Calendar 2021

{% codepen https://codepen.io/niallains/pen/JjKwJLa %}

by [Niall](https://codepen.io/niallains)

### A skipping llama / SVG animation with gsap

{% codepen https://codepen.io/nszafraniec/pen/qBqodqg %}

by [Natalia](https://twitter.com/natszafraniec)

---

Talk to you next week and stay safe! 👋