DEV Community

loading...
Cover image for Weekly Digest 25/2021 - Top of the Week
World In Dev

Weekly Digest 25/2021 - Top of the Week

Marco Biedermann
Full-Stack JavaScript Engineer passionate about TypeScript, Node.js, React and Open Source working @mobimeo based in Berlin.
Updated on ・4 min read

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.


 

🎉 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
  2. ✉️ Subscribe to our newsletter

You will receive our articles directly to your inbox 📬.

 


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

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

Why I’m super excited about Astro

Why I'm super excited about Astro (a new static site generator)

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

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.

by ui.dev

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

by Fireship

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.

by Jimmy Cleveland

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.

by Daniel 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.

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.

by 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 logo aaronwangy / Data-Science-Cheatsheet

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

Data Science Cheatsheet 2.0

A helpful 5-page machine learning cheatsheet to assist with exam reviews, interview prep, and anything in-between. This resource is not meant to be a comprehensive deep dive into any specific model, but rather a quick refresher on a few of the most fundamental machine learning algorithms. The reader should have at least a basic understanding of statistics and linear algebra, though beginners may find this cheatsheet helpful as well.

Inspired by Maverick's Data Science Cheatsheet (hence the 2.0 in the name), located here.

Topics covered:

  • Linear and Logistic Regression
  • Decision Trees and Random Forest
  • SVM
  • K-Nearest Neighbors
  • Clustering
  • Boosting
  • Dimension Reduction (PCA, LDA, Factor Analysis)
  • Natural Language Processing
  • Neural Networks
  • Recommender Systems
  • Reinforcement Learning
  • Anomaly Detection
  • Time Series
  • A/B Testing

This cheatsheet will be occasionally updated with new/improved info, so consider a follow/star to stay up to date.

Future additions (ideas welcome):

  • Time Series Added!

iPod.js

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

GitHub logo tvillarete / ipod-classic-js

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

ipod_og

by Tanner Villarete | LinkedIn | Website

Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two most popular music streaming platforms in the world.

I built this thing to be very extensible – to the point where it can even run games (like brick!). In the future I might consider adding a few more little apps and easter eggs (theming?).

ipod

Details

Here's a breakdown of the Full Stack:

Frontend:

  • JS: TypeScript, React (Hooks, Context)
  • CSS: Styled Components, Framer Motion (for some of the animations)

Slidev

Presentation Slides for Developers

GitHub logo slidevjs / slidev

Presentation Slides for Developers (Beta)


Slidev

Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

NPM version NPM Downloads Docs & Demos Themes
GitHub stars

Video Preview


Status: Public Beta 🎉
Made possible by my Sponsor Program 💖

Features

  • 📝 Markdown-based - use your favorite editors and workflow
  • 🧑‍💻 Developer Friendly - built-in syntax highlighting, live coding, etc.
  • 🎨 Themable - theme can be shared and used with npm packages
  • 🌈 Stylish - Windi CSS on-demand utilities, easy-to-use embedded stylesheets
  • 🤹 Interactive - embedding Vue components seamlessly
  • 🎙 Presenter Mode - use another window, or even your phone to control your slides
  • 🧮 LaTeX - Built-in LaTeX math equations support
  • 📰 Diagrams - Creates diagrams with textual descriptions
  • 🌟 Icons - Access to icons from any iconset directly
  • 💻 Editors - Integrated editor, or extension for VS Code
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a hostable SPA
  • ⚡️ Fast - instant reloading powered by Vite

dribbble shots

Bubble - Mobile App Design

https://cdn.dribbble.com/users/702789/screenshots/15902223/media/81c61c43f09cc5fd9e3ffafd0274e933.png

by Outcrowd

Pet Supplies Shopping App.

https://cdn.dribbble.com/users/903897/screenshots/15900842/media/5d6de607a8dc3ec0c6fa67b1f6572ec5.png

by Yi Li

Electric Scooter Banner Design

https://cdn.dribbble.com/users/1615584/screenshots/15901420/media/a2138f7ac184ea925ee804a631735e6b.jpg

by Ghulam Rasool

Medicine Reminder App

https://cdn.dribbble.com/users/8279166/screenshots/15909745/media/fe367af31c8513119c1786e65e7ed5f6.jpg

by Farrel Paperpillar

Shoplon | E-commerce UI Kit

https://cdn.dribbble.com/users/2990466/screenshots/15922371/media/fa39def565ef0a0e0ec52dda5f1b2613.png

by Sepide Moqadasi

Recipe App

https://cdn.dribbble.com/users/4601337/screenshots/15921850/media/11b4d473412c41b7c6dcba64d48914bd.png

by Arya Wijaya Kusuma

Tweets

Picked Pens

Creating Generative Grid Layouts With Quadtrees

by George Francis

Multi Colored Text with CSS

by Shireen Taj

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

Syntax - CSRF Explained

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

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.


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

Discussion (0)