DEV Community

Cover image for Weekly Digest 02/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 02/2022

Welcome to my Weekly Digest #2 of 2022.

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

Animating with the Flip Plugin for GSAP

Initial experimentation with the FLIP technique to create fun add-to-cart transitions

Animating with the Flip Plugin for GSAP | Ryan Mulligan

Make Beautiful Gradients

Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB colors. Fortunately, we can work around this quirk, and create beautiful, lush, saturated gradients.

https://www.joshwcomeau.com/css/make-beautiful-gradients/

Color Modulation — Generative Snacks!

Introduce a touch of beautiful, organic color variance to your generative compositions with just a few lines of code.

Color Modulation - Generative Snacks! | George Francis


Some great videos I watched this week

Reverse a Linked List in-place

Once you create your linked list, the most common question the interviewer will ask is to reverse the direction of the linked list.

by Basarat Codes

Discover and fix low contrast text with DevTools

Learn how to discover and fix low contrast text with DevTools

by Google Chrome Developers


Useful GitHub repositories

@parcel/css

A CSS parser, transformer, and minifier written in Rust.

GitHub logo parcel-bundler / parcel-css

A CSS parser, transformer, and minifier written in Rust.

@parcel/css

A CSS parser, transformer, and minifier written in Rust.

Features

  • Extremely fast – Parsing and minifying large files is completed in milliseconds, often with significantly smaller output than other tools. See benchmarks below.
  • Typed property values – many other CSS parsers treat property values as an untyped series of tokens. This means that each transformer that wants to do something with these values must interpret them itself, leading to duplicate work and inconsistencies. @parcel/css parses all values using the grammar from the CSS specification, and exposes a specific value type for each property.
  • Browser-grade parser@parcel/css is built on the cssparser and selectors crates created by Mozilla and used by Firefox and Servo. These provide a solid general purpose CSS-parsing foundation on top of which @parcel/css implements support for all specific CSS rules and properties.
  • Minification – One of the main purposes of @parcel/css is to minify CSS…

Icônes

Icon Explorer with Instant searching, powered by Iconify

GitHub logo antfu / icones

⚡️ Icon Explorer with Instant searching, powered by Iconify

Icônes

Icon Explorer with Instant searching, powered by Iconify

Go to App

Electron is coming...

Dark Mode is now Live!

Features

  • Instant Fuzzy Searching - all are done locally, no web queries!
  • The Bag - select your icons and pack them into a ready-to-use icon font!
  • Copy the usage scripts
  • SVGs direct download
  • Mobile friendly
  • Collection bookmarks
  • Categories filters
  • Dark mode
  • Built with Vite and Vue 3
    • If you like how it's built - try 🏕 Vitesse, an opinionated starter template made from Icônes

Community

TODOs

  • Electron client (Coming!)
  • Full-offline mode - pack all the icons

License

MIT - Anthony Fu 2020

AR Cut & Paste

Cut and paste your surroundings using AR

GitHub logo cyrildiagne / ar-cutpaste

Cut and paste your surroundings using AR

AR Cut & Paste

An AR+ML prototype that allows cutting elements from your surroundings and pasting them in an image editing software.

Although only Photoshop is being handled currently, it may handle different outputs in the future.

Demo & more infos: Thread

⚠️ This is a research prototype and not a consumer / photoshop user tool.

Update 2020.05.11: If you're looking for an easy to use app based on this research, head over to https://clipdrop.co

Modules

This prototype runs as 3 independent modules:

  • The mobile app

    • Check out the /app folder for instructions on how to deploy the app to your mobile.
  • The local server

    • The interface between the mobile app and Photoshop.
    • It finds the position pointed on screen by the camera using screenpoint
    • Check out the /server folder for instructions on configuring the local server
  • The object detection / background removal service

    • For now, the salience detection and…

dribbble shots

Fodcasta - Food Podcast Mobile Design

by [Andri Setiawan](https://dribbble.com/shots/17280724--Fodcasta-Food-Podcast-Mobile-Design)

by Andri Setiawan

Worque | low-code automation

by [Alexander Plyuto](https://dribbble.com/shots/17244068--Worque-low-code-automation)

by Alexander Plyuto

Medical service - Mobile App

by [Anastasia](https://dribbble.com/shots/17257062-Medical-service-Mobile-App)

by Anastasia


Tweets


Picked Pens

AI Art Generator

by Yannick Brandt

CSS Stretchy Heading

by S. Shahriar


Podcasts worth listening

Syntax – Remix!

In this Hasty Treat, Scott and Wes talk about Remix!

CodePen Radio – 2021’s Most Hearted

It’s back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year’s list. Who’s on it, what’s on it, and digging into the numbers where we can.


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

Discussion (0)