DEV Community

Cover image for Weekly Digest 51/2021
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 51/2021

Welcome to my Weekly Digest #51, which is almost the last one for 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

How to use Storybook with ESLint

Automatically validate stories in your code editor

How to use Storybook with ESLint

The many methods for using SVG icons

Recently at work, Chen ran into a situation where we had to revisit how SVG icons were being implemented on our pages.

The many methods for using SVG icons


Some great videos I watched this week

Scroll Down to Start Playing Video

It's gotta be fairly easy to play an HTML video when you scroll down to it, right? We kinda knew IntersectionObserver is the right API here, for performance reasons, but this use case is super well served by it and it's quite easy to use. We also handle the prefers-reduced-motion case here.

by Chris Coyier

Solve subarray problems faster

There are many algorithms that come up frequently in coding interviews, with Sliding Windows being one of the most popular.

by Byte by Byte

Responsive images & art direction

Welcome back to Designing in the Browser with Developer Relations Engineer, Una Kravets. In this episode, we will learn all about responsive images and art direction, including how to optimize your art for size and layout.

by Google Chrome Developers

Speed up inputs with useDeferredValue

React 18 RC introduces a number of concurrent features thru new hooks: useDeferredValue, startTransition, and useTransition. In this video, Chantastic explores a simple useDeferredValue example and shares some transition gotchas.

by chantastic


Useful GitHub repositories

ML YouTube Courses

A repository to index and organize the latest machine learning courses found on YouTube.

GitHub logo dair-ai / ML-YouTube-Courses

A repository to index and organize the latest machine learning courses found on YouTube.

📺 ML YouTube Courses

At DAIR.AI we ❤️ open education. We are excited to share some of the best and most recent machine learning courses available on YouTube.

Course List:


Stanford CS229: Machine Learning

To learn some of the basics of ML:

  • Linear Regression and Gradient Descent
  • Logistic Regression
  • Naive Bayes
  • SVMs
  • Kernels
  • Decision Trees
  • Introduction to Neural Networks
  • Debugging ML Models ...

🔗 Link to Course

Applied Machine Learning

To learn some of the most widely used techniques in ML:

  • Optimization…

Bulletproof React

A simple, scalable, and powerful architecture for building production-ready React applications.

GitHub logo alan2207 / bulletproof-react

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Bulletproof React 🛡️ ⚛️

MIT License CI

A simple, scalable, and powerful architecture for building production ready React applications.

Introduction

React is a great tool for building frontend applications. It has a very diverse ecosystem with hundreds of great libraries for literally anything you might need. However, it can be overwhelming to be forced to make so many choices It is also very flexible, you can write React applications in any way you like but that flexibility comes with a cost. Since there is no pre-defined architecture developers can follow, it often leads to messy, inconsistent, or over-complicated codebases.

This is an attempt to present a way of creating React applications using the best tools in the ecosystem with a good project structure that scales very well. It is based on the experience of working with many different codebases, and this architecture turns out to be the most effective one.

The goal of…

UnoCSS

The instant on-demand atomic CSS engine.

GitHub logo antfu / unocss

The instant on-demand atomic CSS engine.


UnoCSS

The instant on-demand Atomic CSS engine

NPM version

💡 I highly recommend reading this blog post -
Reimagine Atomic CSS
for the story behind


🤹‍♂️ Online Playground


Features

Inspired by Windi CSS, Tailwind CSS, Twind but:

  • Fully customizable - no core utilities, all functionalities are provided via presets.
  • No parsing, no AST, no scanning, it's INSTANT (200x faster than Windi CSS or Tailwind JIT)
  • ~3.5kb min+gzip - zero deps and browser friendly.
  • Shortcuts - aliasing utilities, dynamically.
  • Attributify Mode - group utilities in attributes
  • Pure CSS Icons - use any icon as a single class.
  • Inspector - inspect and debug interatively.
  • CSS-in-JS Runtime version
  • CSS Scoping
  • VS Code extension
  • Code-splitting for CSS - ships minimal CSS for MPA.
  • Library friendly - ships atomic styles with your component libraries and safely scoped.
Benchmark
11/5/2021, 4:26:57 AM
1656 utilities | x50 runs (min build time)
none                              8.30 ms / delta.      0.00

dribbble shots

Orizon Bank App

by [Rakib Kowshar](https://dribbble.com/shots/17138964-Orizon-Bank-App)

by Rakib Kowshar

Plant Shop Mobile App

by [Fauzan Ardhiansyah](https://dribbble.com/shots/17136610-Ijo-ijo-Plant-Shop-Mobile-App)

by Fauzan Ardhiansyah

Weather & Forecast Landing

by [Yasir Ahmad Noori](https://dribbble.com/shots/17137313-Weather-Forecast-Landing-Web-Design)

by Yasir Ahmad Noori

Paygo

by [Shafiqul Islam](https://dribbble.com/shots/17139367-Paygo-Website-Design)

by Shafiqul Islam


Tweets


Picked Pens

Wavy Snowman

by Ale

GSAP Christmas Loop

by Alexander

Time Travelling with GSAP

by Jhey


Podcasts worth listening

Syntax – Gitpod, iPad Coding, Web3, WTF NFT

In this episode of Syntax, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay.


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

Discussion (0)