DEV Community

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

Posted on

Weekly Digest 46/2021

Welcome to my Weekly Digest #46 of 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

Flip, Invert, and Reverse

Chuan is going to introduce 3 kinds of transformations for the SVG path commands. Specifically for h/H and v/V commands.

Flip, Invert, and Reverse

Introducing “Shadow Palette Generator”

In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do we come up with all of the parameters, though? I've built a tool that'll help.

Introducing "Shadow Palette Generator"

Using Position Sticky With CSS Grid

How to make position sticky work with CSS grid items

Using Position Sticky With CSS Grid - Ahmad Shadeed

Parallax Powered by CSS Custom Properties

Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some “whimsy” for the site.

Parallax Powered by CSS Custom Properties


Some great videos I watched this week

The new responsive design

Join us as we discuss the latest updates on UI styling, DevTools, and the evolution of responsive design.

by Google Chrome Developers

New in Chrome 96: Improvements for installed PWAs, Priority Hints, and more!

Chrome 96 is rolling out now! There are two new properties in the web app manifest. The id property allows you to specify a unique ID for your PWA, and the protocol_handlers property allows you to automatically register your PWA as a protocol handler upon installation.

by Google Chrome Developers

Introducing the new PageSpeed Insights

Introducing the new PageSpeed Insights: a more intuitive way to measure performance & improve it using real-world and lab data.

by Addy Osmani

How to Code: Rectangular Collision Detection

Rectangular collision detection is a must-know when it comes to video game development. It's a way to tell when two objects touch, so you can call some sort of reactionary event in return, such as gaining a power-up, or ending the game.

by Chris Courses

React Location: Better than React Router?

React Router has been the best in class router for years now. But now the creator of React Query, Tanner Linsley, has developed and just released a new router for the Tanstack named React Location.

by Jack Herrington


Useful GitHub repositories

yq

yq is a portable command-line YAML processor

GitHub logo mikefarah / yq

yq is a portable command-line YAML processor

yq

Build Docker Pulls Github Releases (by Release) Go Report

a lightweight and portable command-line YAML processor. yq uses jq like syntax but works with yaml files as well as json. It doesn't yet support everything jq does - but it does support the most common operations and functions, and more is being added continuously.

yq is written in go - so you can download a dependency free binary for your platform and you are good to go! If you prefer there are a variety of package managers that can be used as well as docker, all listed below.

Quick Usage Guide

Read a value:

yq e '.a.b[0].c' file.yaml
Enter fullscreen mode Exit fullscreen mode

Pipe from STDIN:

cat file.yaml | yq e '.a.b[0].c' -
Enter fullscreen mode Exit fullscreen mode

Update a yaml file, inplace

yq e -i '.a.b[0].c = "cool"' file.yaml
Enter fullscreen mode Exit fullscreen mode

Update using environment variables

NAME=mike yq e -i '.a.b[0].c = strenv(NAME)' file.yaml
Enter fullscreen mode Exit fullscreen mode

Merge multiple files

yq ea '. as $item

React-Grid-Layout

A draggable and resizable grid layout with responsive breakpoints, for React.

Appsmith

Quickly build any custom business software like admin panels, internal tools, dashboards, and more with pre-built UI widgets that connect to any database, GraphQL or REST API, controlling everything with Javascript.

GitHub logo appsmithorg / appsmith

Quickly build any custom business software like admin panels, internal tools, dashboards and more with pre-built UI widgets that connect to any database, GraphQL or REST API, controlling everything with Javascript.

Appsmith - The Frontend Tool for Any Backend

Get StartedDocsCommunityTutorialsEventsYoutubeDiscordTemplates

Turn any datasource into an internal app in minutes. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source



MVC-Github-Readme

Quick Start

The fastest way to start with Appsmith is the cloud-hosted version. When you're ready, you can also host it yourself.


Build an Internal Tool with Appsmith

Features

Use ready components to build workflows in record time. Drag common elements like tables, charts, forms and more right into your app.

Includes text, forms, inputs, buttons, tables, images, charts, checkboxes, switches, radio buttons, datepickers, dropdowns, filepickers, containers, maps, modals, rich text editors, tabs &


dribbble shots

Plus Medicine - Website Responsive Mobile

by [Adalahreza](https://dribbble.com/shots/16898488-Plus-Medicine-Website-Responsive-Mobile)

by Adalahreza

Audio Books App

by [Natalia Berdnyk](https://dribbble.com/shots/16897169-Audio-Books-App)

by Natalia Berdnyk

Dashboard Design

by [AR Shakir](https://dribbble.com/shots/16798476-Dashboard-Design)

by AR Shakir

Food Delivery App

by [Purrweb UI](https://dribbble.com/shots/16895548-Food-Delivery-App)

by Purrweb UI


Tweets

Picked Pens

Snowflakes with clip-path trigonometry

by Michelle Barker

Pure CSS 3D Packaging

by Jhey


Podcasts worth listening

Syntax – Next.js 12

In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates!

Call with Kent – Versioning and dependency management for libraries

How did you approach versioning and dependency management when you were building this reusable component library at PayPal?


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

Discussion (0)