DEV Community: Pete Benoit

The First Thing I Do When I Open a Project

Pete Benoit — Fri, 10 Apr 2026 13:40:14 +0000

There's a specific kind of blank-stare moment many developers know. You open a project, something you cloned, something you built yourself last spring, and you just stare. The code is right there. The context is completely gone.

I built a VS Code extension called Explain This Project to solve this.

One command gives you structure analysis, dependency mapping, git diagnostics showing which files break the most, and a plain-text summary via Copilot. All in one file at your project root.

I recently added git diagnostics after reading a great post by Ally Piechowski on the git commands she runs before reading any code. I thought it was an amazing idea, and added it to my extension.

You can read more about it here.

peterbenoit.com/blog/first-thing-open-project

CSS @starting-style: Animating Elements Into Existence

Pete Benoit — Wed, 25 Mar 2026 15:00:43 +0000

The enter animation problem has been with us since CSS transitions were invented. @starting-style finally gives us a clean, declarative solution.

There's a class of bug that every CSS developer encounters eventually, usually while trying to animate a toast notification or a dialog. You add the element to the DOM, apply the transition, and… nothing. The element snaps in instantly, ignoring the transition entirely.

The reason is simple once you understand it: CSS transitions animate between two computed states. When an element is first inserted, there is no previous state. The browser has nothing to interpolate from, so the transition is skipped.

The old workarounds
Most of us reached for the same duct-tape solutions. Force a reflow, then set the target state:

// Option 1: setTimeout (fragile, tied to frame timing)
toast.classList.remove('visible');
setTimeout(() => toast.classList.add('visible'), 16);

// Option 2: requestAnimationFrame (better, still manual)
requestAnimationFrame(() => {
  requestAnimationFrame(() => toast.classList.add('visible'));
});

// Option 3: force reflow by reading layout property
toast.getBoundingClientRect();
toast.classList.add('visible');

All of these work, in the sense that they produce the animation. None of them feel right. They're coupling timing to the rendering pipeline in ways that are hard to test, hard to reason about, and easy to break with a browser update.

Enter @starting-style
The @starting-style rule, now in Baseline 2024, lets you declare what an element's computed style should be treated as on its very first render. It gives the browser a "from" state to animate from, without any JavaScript.

/* The element's normal state */
.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* How the browser treats this element on its first render */
@starting-style {
  .toast {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

That's it. Add the element to the DOM, give it the class .toast, and the browser automatically transitions from the @starting-style declarations to the element's computed style. No JavaScript timing tricks required.

Keep Reading about @starting-style on: peterbenoit.com

Liquid Glass UI in CSS Only

Pete Benoit — Mon, 16 Jun 2025 10:31:58 +0000

Apple recently introduced “Liquid Glass” as part of its new UI design language. It’s a translucent visual style that reflects and refracts its surroundings and adapts to light and content behind it. Since it’s been all over my feed, I wanted to see how close I could get to the effect using just CSS.

No images, no JavaScript frameworks, no canvas tricks. Just a clean CSS-based implementation using two core properties:

mix-blend-mode: difference for automatic contrast
backdrop-filter: blur for that frosted-glass depth

Together, they let text and UI elements stay legible on any background without explicitly setting color logic. I also added a draggable button with a subtle jiggle to hint that it’s interactive.

This isn’t a one-to-one recreation, but it captures the spirit of what Apple’s going for in a way that’s simple and performance friendly for the web.

Demo: https://codepen.io/peterbenoit/live/qEdYxyL

Manage duplicates in your Bitwarden Vault with Python

Pete Benoit — Sat, 04 Jan 2025 00:50:13 +0000

Bitwarden doesn't have a built-in method for managing duplicates in your vault. I wasn't happy with the other user-made libraries I found, so I went and created a Python-based tool to help automate the process.

Features

Filter entries by type: Login, Secure Note, Card, or Identity.
Identify and export duplicates for review.
Save unique entries in a cleaned JSON file.
Interactive or CLI-based configuration for flexibility.

How It Works

Export your Bitwarden vault into JSON and run the tool, you can categorize entries based on customizable criteria using an interactive shell script.

Why Use This Tool?

Simplifies vault management.
Works directly with Bitwarden JSON exports.
Fully customizable and extensible.

Setup

To get started, clone the repository and run the shell script:

git clone https://github.com/peterbenoit/Bitwarden-Deduplicator
cd Bitwarden-Deduplicator
./run_python.sh

This script sets up a virtual environment, installs dependencies, and guides you through the configuration process.

Demo: The Doggo Image Slider

Pete Benoit — Sun, 06 Oct 2024 18:00:06 +0000

This project is built using React for managing the component state and rendering, Axios for fetching data from the Dog API, and Tailwind CSS for styling, including a glassmorphic effect on the UI. The slider is fully configurable, allowing dynamic control over the slide speed and looping behavior. React's useState and useEffect hooks manage state updates and side effects like fetching images and handling the auto-slide feature. The useRef hook is used to handle and reset the slide timer efficiently. The design leverages Tailwind’s utility classes for smooth transitions, hover effects, and responsive design, creating a modern, flexible, and highly interactive UI.