DEV Community

Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 22/2022

Welcome to my Weekly Digest #22.

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

Don’t Sink Your Website With Third Parties

In this article, Ken Harker explains what third-party resource requests really are and which common optimization strategies can help reduce the impact on the user experience.

Don't Sink Your Website With Third Parties - Smashing Magazine

Event-Driven Architecture. Part 1: Pros and cons with examples

In this multipart series, we will go step by step in creating a simple event-driven system. In Part 1 we compare this approach with a classic point-to-point communication and look at the advantages and disadvantages of both.

Event-Driven Architecture. Part 1: Pros and cons with examples


Some great videos I watched this week

Chrome 102 - What’s New in DevTools

New Performance insights panel, shortcuts to emulate light/dark themes, and more.

by Google Chrome Developers

Functional programming with 'compose’

by Matt Pocock

Using extends to constrain generics

by Matt Pocock

When To Fetch: Remixing React Router

We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too

by Ryan Florence


Useful GitHub repositories

AutoAnimate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

GitHub logo formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

AutoAnimate Logo

Latest Build GitHub Sponsors Package Size

Add motion to your apps with a single line of code.

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application.

Examples & Docs

With one line of code, you can improve your interfaces, for example:

Simple example of AutoAnimation motion

Installation

Install using your package manager of choice.

#yarn
yarn add @formkit/auto-animate
#npm
npm install @formkit/auto-animate
#pnpm
pnpm add @formkit/auto-animate
Enter fullscreen mode Exit fullscreen mode

Boom! Done. That was fast! 🐇

Usage

📖 View the documentation site for usage instructions.

Examples

📖 View the documentation site for examples.

Plugins

📖 View the documentation site for plugin instructions.

Support us

Is AutoAnimate saving you time?

Please consider supporting us with a recurring or one-time donation! 🙏

Contributing

Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change…

Videogrep

Videogrep is a command-line tool that searches through dialog in video files and makes supercuts based on what it finds.

GitHub logo antiboredom / videogrep

automatic video supercuts with python

Videogrep

Videogrep is a command line tool that searches through dialog in video files and makes supercuts based on what it finds. It will recognize .srt or .vtt subtitle tracks, or transcriptions that can be generated with vosk, pocketsphinx, and other tools.

Examples

Tutorial

See my blog for a short tutorial on videogrep and yt-dlp.


Installation

Videogrep is compatible with Python versions 3.6 to 3.10.

pip install videogrep

If you want to transcribe videos, you also need to install ffmpeg and vosk.

If you're on a mac with homebrew you install ffmpeg with:

brew install ffmpeg

To install vosk:

pip install vosk

Note: the previous version of videogrep supported pocketsphinx for speech-to-text…


dribbble shots

Simple Food Delivery App Concept

by [Giorgi](https://dribbble.com/shots/18409200-Simple-Food-Delivery-App-Concept)

by Giorgi

Travel App

by [App Ninja](https://dribbble.com/shots/18403432-Travel-App)

by App Ninja

Restaurant Waiter App

by [Alexandr V](https://dribbble.com/shots/18389053-Restaurant-Waiter-App)

by Alexandr V


Tweets


Picked Pens

Pure CSS/SVG Tic Tac Toe

by Jhey

Pure CSS Animated Image Zoom

by Jhey


Podcasts worth listening

Syntax – Cache Control Headers Explained

In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching.

Smashing Podcast – Why does accessibility matter?

We ask why accessibility really matters, and why is it so important to get it right? Smashing’s Vitaly Friedman talks in depth to Sara Soueidan to find out.


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

Discussion (0)