Weekly Digest 11/2022
Tags: css, javascript, webdev, design
Published: 2022-03-20 19:23:17

Welcome to my Weekly Digest #11 of this year.

This weekly digest contains many interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

---

## Interesting articles to read

### **Aligning Content In Different Wrappers**

How to align content with another section given that they are placed in different wrappers.

[Aligning Content In Different Wrappers - Ahmad Shadeed](https://ishadeed.com/article/aligning-content-different-wrappers/)

### Optimizing SVG Patterns to Their Smallest Size

Here are radical ways of optimizing SVG patterns so that they contain as little code as possible without affecting the overall image quality.

[Optimizing SVG Patterns to Their Smallest Size | CSS-Tricks](https://css-tricks.com/optimizing-svg-patterns/)

### Claymorphism: Will It Stick Around?

This fresh new design trend has been picking up steam with the rising popularity of colorful inflated 3D graphics in web illustrations and with the latest Virtual Reality projects like “Horizon Worlds”. Let’s see if there is room for Claymorphism on the UI, and how we can create this effect with CSS.

[Claymorphism: Will It Stick Around? - Smashing Magazine](https://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/)

---

## Some great videos I watched this week

### 10 Design Patterns Explained in 10 Minutes

Software design patterns help developers to solve common recurring problems with code. Let's explore 10 patterns from the famous Gang of Four book and implement them with JavaScript and TypeScript.

{% youtube tv-_1er1mWI %}

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

### Pi in the Sky Game

Happy Pi Day! How many delicious digits of Pi can you catch from the sky? In JavaScript!

{% youtube _H9JIwWP7HQ %}

by [Daniel Shiffman](https://twitter.com/shiffman)

### Thinking on ways to solve a loading bar

In today's GUI Challenge, [@Adam Argyle](https://www.youtube.com/channel/UCBGr3ZMcV5jke40_Wrv3fNA) shows how to style the built-in progress element and implement great screen reader UX, light and dark adaptive colors, custom animations, and more.

{% youtube TD1QxlGgIPk %}

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

### Make your own Remix Stack

{% youtube NJCiUVGiNyA %}

[by [Kent C. Dodds](https://twitter.com/kentcdodds)](https://www.youtube.com/watch?v=iAY9MWUF91c)

by [Kent C. Dodds](https://twitter.com/kentcdodds)

---

## Useful GitHub repositories

### StandWithUkraine

This repository contains Readme Banners (and some useful docs) that can be used by OSS projects to spread the word, support, and help Ukraine in this disastrous situation.

{% github vshymanskyy/StandWithUkraine %}

### ****Twitter API SDK for TypeScript****

A TypeScript SDK for the Twitter API. This library is built with TypeScript developers in mind, but it also works with JavaScript.

{% github twitterdev/twitter-api-typescript-sdk %}

---

## dribbble shots

### ****AI launcher Dashboard****

![by [Gleb Kuznetsov](https://dribbble.com/shots/17764319-AI-launcher-Dashboard)](https://cdn.dribbble.com/userupload/2409325/file/original-82b3ef1b34ece2025b29aa1717fb28e0.png)

by [Gleb Kuznetsov](https://dribbble.com/shots/17764319-AI-launcher-Dashboard)

### Photography Website - Exploration

![by [Anggayudha](https://dribbble.com/shots/17765140-Photography-Website-Exploration)](https://cdn.dribbble.com/users/2475685/screenshots/17765140/media/c1aa1ec7304b49e39cc9994688320fb0.png)

by [Anggayudha](https://dribbble.com/shots/17765140-Photography-Website-Exploration)

### Onboarding Screens-Doctor App

![by [jubayer ahmed](https://dribbble.com/shots/17763461-Onboarding-Screens-Doctor-App)](https://cdn.dribbble.com/users/5036558/screenshots/17763461/media/703ddaf1606ad7ce3adad45b43255f9a.png)

by [jubayer ahmed](https://dribbble.com/shots/17763461-Onboarding-Screens-Doctor-App)

---

## Tweets

{% twitter 1504123380106076161 %}

{% twitter 1504098168773906434 %}

{% twitter 1504429845488537604 %}

{% twitter 1504463229338193920 %}

{% twitter 1504478335627268105 %}

---

## Picked Pens

### Boppin' Bears

{% codepen https://codepen.io/jh3y/pen/OJzJGee %}

by [JHey](https://twitter.com/jh3yy)

### Loading Goes Off Track

{% codepen https://codepen.io/jkantner/pen/ZEvQbOK %}

by [Jon Kantner](https://twitter.com/jonkantner)

### Union

{% codepen https://codepen.io/georgedoescode/pen/bGaEGyq %}

by [George Francis](https://twitter.com/georgedoescode)

---

## Podcasts worth listening

### CodePen Radio – ****Tiffany Choong****

Chris had tons of fun talking to [Tiffany Choong](https://codepen.io/tiffachoo/) this week! He loved learning her process of creating countless code art Pokémon characters.

{% spotify spotify:episode:6BBGlEgt5TinUJ4s5tQBpE %}

### Syntax – **Handling Auth × Are Web Dev Real Developers? × Handling Git Conflicts × Converting PNG to Box-Shadow**

In this potluck episode of Syntax, Wes and Scott answer your questions about handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, and more.

{% spotify spotify:episode:6scHSMYlGY0626fhtFmA3f %}

---

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