DEV Community

Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 30/2022

Welcome to my Weekly Digest #30.

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

Solving “The Dangler” Conundrum with Container Queries and :has()

Solving "The Dangler" Conundrum with Container Queries and :has()

Statements Vs. Expressions

One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions. In this blog post, we'll dig into how these two structures work, and see how building an intuition about this can help us solve practical problems.

Statements Vs. Expressions


Some great videos I watched this week

Thinking on ways to solve carousels

In today's GUI Challenge, @Adam Argyle shares the features and aspects of a carousel component: adaptive theming, adaptive to various user input types, adaptive to author time options, and adaptive to user preferences.

by Google Chrome Developers

Chrome 104 - What’s New in DevTools

Restart frame during debugging, slow replay options in the Recorder panel, and more.

by Google Chrome Developers

I pressed ⌘B. You wouldn’t believe what happened next

Whenever you press ⌘B in Figma, what happens is a choreography of events of surprising complexity. It’s a collision of two worlds – keyboard shortcuts and typography – each one with hundreds of years of history.

by Marcin Wichary

How to log messages in the Console | DevTools Tips

In this episode, Bramus and Jecelyn walk you through the different ways of logging and filtering messages in the Console.

by Google Chrome Developers


Useful GitHub repositories

magic-regexp

A compiled-away, type-safe, readable RegExp alternative

GitHub logo danielroe / magic-regexp

A compiled-away, type-safe, readable RegExp alternative

🦄 magic-regexp

npm version npm downloads Github Actions Codecov Bundlephobia LGTM

A compiled-away, type-safe, readable RegExp alternative

Features

  • Runtime is zero-dependency and ultra-minimal
  • Ships with transform to compile to pure RegExp
  • Automatically typed capture groups
  • Natural language syntax
  • Generated RegExp displays on hover

📖  Read more

💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Run interactive tests using pnpm dev

Similar packages

License

Made with ❤️

Published under MIT License.




Plop

Consistency Made Simple

GitHub logo plopjs / plop

Consistency Made Simple

Plop

Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity plop demo

Documentation also available on plopjs.com

Getting Started

npm   npm   plop on slack

What is Plop?

Plop is what I like to call a "micro-generator framework." Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it's not always easy to locate the files in your codebase that represent the current "best practice." That's where plop saves you. With plop, you have your "best practice" method of creating any given pattern in CODE. Code that can easily be run from the terminal…

Gum

A tool for glamorous shell scripts

GitHub logo charmbracelet / gum

A tool for glamorous shell scripts 🎀

Gum

Gum Image

Latest Release Go Docs Build Status

A tool for glamorous shell scripts. Leverage the power of Bubbles and Lip Gloss in your scripts and aliases without writing any Go code!

Shell running the ./demo.sh script

The above example is running from a single shell script (source).

Tutorial

Gum provides highly configurable, ready-to-use utilities to help you write useful shell scripts and dotfiles aliases with just a few lines of code.

Let's build a simple script to help you write Conventional Commits for your dotfiles.

Start with a #!/bin/sh.

#!/bin/sh
Enter fullscreen mode Exit fullscreen mode

Ask for the commit type with gum choose:

gum choose "fix" "feat" "docs" "style" "refactor" "test" "chore" "revert"
Enter fullscreen mode Exit fullscreen mode

Tip: this command itself will print to stdout which is not all that useful To make use of the command later on you can save the stdout to a $VARIABLE or file.txt


dribbble shots

Cyberpunk Dystopia 3D Icon Set

by [Krafted](https://dribbble.com/shots/18894095-Cyberpunk-Dystopia-3D-Icon-Set)

by Krafted

Food Delivery Maemlur - Mobile Apps.

by [Habibi](https://dribbble.com/shots/18928557-Food-Delivery-Maemlur-Mobile-Apps)

by Habibi

Agriculture Assistant App

by [Conceptzilla](https://dribbble.com/shots/18913570-Agriculture-Assistant-App)

by Conceptzilla


Tweets


Picked Pens

Responsive Faux 3D Content Scroller

by Jhey

CSS only back to top button

by Temani Afif

Cascading CSS Text Effects

by Jhey


Podcasts worth listening

Syntax – What is Bun? The New JS Runtime

In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What's on Bun's roadmap? And why do we need another JavaScript runtime?


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

Top comments (0)