Weekly Digest 25/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-06-27 16:59:53

Welcome to my Weekly Digest #25 which is the last one for June.

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

---

&nbsp;

## 🎉 Giveaway 

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
1. 👍 React to this post
1. ✉️ Subscribe to our [newsletter](https://worldindev.ck.page)

You will receive [our articles](https://dev.to/worldindev) directly to your [inbox](https://worldindev.ck.page) 📬.
 
&nbsp;

---

## Interesting articles to read

### In JS functions, the 'last' return wins

An edge case has convinced me it's the 'last' return that always wins.

[In JS functions, the 'last' return wins](https://jakearchibald.com/2021/last-return-wins/)

### Demystifying styled-components

For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we'll learn exactly how styled-components works by building our own mini-version.

[Demystifying styled-components](https://www.joshwcomeau.com/react/demystifying-styled-components/)

### Why I’m super excited about Astro

[Why I'm super excited about Astro (a new static site generator)](https://zellwk.com/blog/astro-thoughts/)

### Image To Text Conversion With React And Tesseract.js

Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tesseract.

[Image To Text Conversion With React And Tesseract.js (OCR) - Smashing Magazine](https://smashingmagazine.com/2021/06/image-text-conversion-react-tesseract-js-ocr/)

## Some great videos I watched this week

### What's New in ES2021

Every year a new version of JavaScript is released and implemented in browsers and JavaScript engines. Lets take a look at what's new this year.

{% youtube c5Y5m0HJXAk %}

by [ui.dev](https://twitter.com/uidotdev)

### Google Sheets… Your Next Database?

Can you use Google Sheets as a database? Learn how to build a Next.js app using a spreadsheet as the data layer

{% youtube K6Vcfm7TA5U %}

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

### Automated Lighthouse Benchmarks

Lighthouse has increasingly become a popular tool for many web developers to have the best site possible. But I've noticed that many don't realize you can automate Lighthouse benchmarks by adding them to your Continuous Integration workflow, and setting custom restrictions for performance regressions.

{% youtube V1QxitXe-XA %}

by [Jimmy Cleveland](https://twitter.com/JimmyDCleveland)

### Flee, Pursue, Evade

Continuing my quest to explore all the steering behaviors from Craig Reynolds' 1999 paper, in this video I tackle flee, pursue, and evade.

{% youtube Q4MU7pkDYmQ %}

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

### Building Strongly Typed REST Clients with Typescript

In this talk we'll use TypeScript to create a client library that works with a REST API. Come see how we create a type-safe client with tooling tailored to your service.

{% youtube aZ6nnGlfBG8 %}

by Jose Manuel Heredia Hidalgo

### Test Kitchen: A Recipe for Good Tests

In this talk, Iris will walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit.

{% youtube DDlth3Vek3A %}

by [Iris Schaffer](https://twitter.com/iris_schaffer)

## Useful GitHub repositories

### Data Science Cheatsheet

A helpful 5-page data science cheatsheet to assist with exam reviews, interview prep, and anything in-between.

{% github aaronwangy/Data-Science-Cheatsheet %}

### iPod.js

An iPod Classic that connects to Apple Music and Spotify. Built with React & Styled Components

{% github tvillarete/ipod-classic-js %}

### Slidev

Presentation Slides for Developers

{% github slidevjs/slidev %}

## dribbble shots

### Bubble - Mobile App Design

![https://cdn.dribbble.com/users/702789/screenshots/15902223/media/81c61c43f09cc5fd9e3ffafd0274e933.png](https://cdn.dribbble.com/users/702789/screenshots/15902223/media/81c61c43f09cc5fd9e3ffafd0274e933.png)

by [Outcrowd](https://dribbble.com/shots/15902223-Bubble-Mobile-App-Design)

### Pet Supplies Shopping App.

![https://cdn.dribbble.com/users/903897/screenshots/15900842/media/5d6de607a8dc3ec0c6fa67b1f6572ec5.png](https://cdn.dribbble.com/users/903897/screenshots/15900842/media/5d6de607a8dc3ec0c6fa67b1f6572ec5.png)

by [Yi Li](https://dribbble.com/shots/15900842-Pet-Supplies-Shopping-App)

### Electric Scooter Banner Design

![https://cdn.dribbble.com/users/1615584/screenshots/15901420/media/a2138f7ac184ea925ee804a631735e6b.jpg](https://cdn.dribbble.com/users/1615584/screenshots/15901420/media/a2138f7ac184ea925ee804a631735e6b.jpg)

by [Ghulam Rasool](https://dribbble.com/shots/15901420-Electric-Scooter-Banner-Design)

### Medicine Reminder App

![https://cdn.dribbble.com/users/8279166/screenshots/15909745/media/fe367af31c8513119c1786e65e7ed5f6.jpg](https://cdn.dribbble.com/users/8279166/screenshots/15909745/media/fe367af31c8513119c1786e65e7ed5f6.jpg)

by [Farrel Paperpillar](https://dribbble.com/shots/15909745-Medicine-Reminder-App)

### Shoplon | E-commerce UI Kit

![https://cdn.dribbble.com/users/2990466/screenshots/15922371/media/fa39def565ef0a0e0ec52dda5f1b2613.png](https://cdn.dribbble.com/users/2990466/screenshots/15922371/media/fa39def565ef0a0e0ec52dda5f1b2613.png)

by [Sepide Moqadasi](https://dribbble.com/shots/15922371-Shoplon-E-commerce-UI-Kit-Address)

### Recipe App

![https://cdn.dribbble.com/users/4601337/screenshots/15921850/media/11b4d473412c41b7c6dcba64d48914bd.png](https://cdn.dribbble.com/users/4601337/screenshots/15921850/media/11b4d473412c41b7c6dcba64d48914bd.png)

by [Arya Wijaya Kusuma](https://dribbble.com/shots/15921850-Recipe-App)

## Tweets

{% twitter 1407209612223336448 %}

{% twitter 1407546399911301123 %}

{% twitter 1407731478096756739 %}

{% twitter 1408184587885309952 %}

## Picked Pens

### Creating Generative Grid Layouts With Quadtrees

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

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

### Multi Colored Text with CSS

{% codepen https://codepen.io/TajShireen/pen/YzZmbep %}

by [Shireen Taj](https://twitter.com/Shireen_dev)

## Podcasts worth listening

### Junior to Senior - Developer Relations Program Manager at Google

David and Erin discuss having a mindset of learning with joy, being comfortable with asking 'dumb' questions, and defining clear goals

{% spotify spotify:episode:3zWrPoNDgNSbgY0YrFAmy8 %}

### Syntax - CSRF Explained

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

{% spotify spotify:episode:2IhNT0nmRiu1tkVnVw2RHS %}

### The CSS Podcast - is(), :where(), & nesting

In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the `:is` and `:where` functions, how they differ, and how they’re paving the way for nesting.

{% spotify spotify:episode:3WiLji83Iz2kuKuQGxJ6DY %}

---

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