DEV Community: Stephane Paquet

Gemtracker v1.0.5 is here!

Stephane Paquet — Sun, 05 Apr 2026 02:30:38 +0000

Gemtraker is a terminal-based TUI (written in Go with BubbleTea) that makes it way easier to understand and manage your Ruby bundle.

Just run it in any project that has a Gemfile.lock and you instantly get:

Full visibility into every gem version (direct + transitive dependencies)
Outdated gem detection with latest version info
CVE/vulnerability highlighting so you can quickly spot risky transitive gems
Interactive dependency tree (forward & reverse)
Tabs for Gems, Search, CVEs, and detailed views with direct links to RubyGems & GitHub

It’s perfect for day-to-day dependency hygiene and compliance work (SOC 2, security audits, etc.) where you need to prove exactly what’s in your supply chain.If you work with Ruby or Rails projects, I’d love for you to give it a spin!

Test it, break it, share feedback, suggest features, or submit a PR — all contributions are very welcome. https://github.com/spaquet/gemtracker

Looking forward to your thoughts, support and contributions!

Introducing Listopia: Collaborative List Management with AI Magic

Stephane Paquet — Sat, 28 Jun 2025 15:27:56 +0000

I’m thrilled to share Listopia, the first open-source collaborative list management app with AI-powered multi-channel publishing (MCP) support, built on Rails.

Whether you’re organizing tasks, brainstorming ideas, or tracking projects, Listopia makes it seamless with natural language controls—manage your lists like you’re chatting with a friend!

Why Listopia?

Collaborate Effortlessly: Work together on lists in real-time.
AI-Powered: Use natural language to create and manage lists with MCP support.
Open Source: Free to use, extend, and contribute to!

Check it out at https://listopia-dhv.pages.dev and join the community on GitHub

I’d love your feedback, ideas, or contributions! What do you think about using AI to supercharge list management? Drop a comment below or star us on GitHub!

PS, we use Ruby LLM so you're not stuck with only one AI.

Startup Growth, AI, and Leadership: My Chat with Anna 🎙️🚀

Stephane Paquet — Fri, 27 Dec 2024 00:50:46 +0000

Had the privilege of being a guest on Anna's podcast! 🎙️ We talked about everything from AI transforming the workplace to scaling startups, growth strategies, and the founder's journey. 🚀

Anna brought so much energy and asked amazing questions that made for a truly engaging conversation.

Check it out if you're curious about how startups grow, innovate, and navigate challenges: https://youtu.be/u9Y-yAiskck

AI & Personas

Stephane Paquet — Thu, 12 Dec 2024 17:54:04 +0000

Yesterday I asked ChatGPT to generate tech predictions for the year 2025 in the style of Marc Andreessen.

Why Marc Andreessen? Well, Marc is one of the most successful VC in the Silicon Valley and a very prominent figure. He also post his own predictions about what the tech will look like in 1 year or more from now so I assumed that ChatGPT has enough knowledge about him, his style and vision of the tech scene.

Here is the result of this one time exercise with ChatGPT: https://medium.com/@spaquet/top-10-technology-trends-for-2025-f2dc56896947

I'm now going to ask Claude the exact same question, but will change the style to have answers from another prominent person in tech.

Happy Holidays 🎉

Mailcatcher for beginners

Stephane Paquet — Mon, 14 Mar 2022 21:46:29 +0000

When in need to troubleshoot email messages use Mailcatcher.

Mailcatcher is a simple SMTP server that you can run locally or remotely intercept emails during test and development phases.

Once captured by Mailcatcher emails can be rendered from within their web interface and exported to be opened in any mail client.

Mailcatcher web interface is refreshed in realtime when your app is using websocket otherwise every 30 seconds.

Mailcatcher is language agnostic and simple to use as you just have to redirect SMTP traffic to Mailcatcher smtp port 1025.

So, let's say that you have an application that uses an external SMTP provider and that you have Mailcatcher running locally, you just need to replace your third party provider by smtp://127.0.0.1:1025 and done!

To access Mailcatcher web interface, simply point to http://127.0.0.1:1080.

If for any reason your instance of Mailcatcher is using a different IP address, just adapt the above examples.

Over the years, I found it more convenient to not install Mailcatcher on my computer, but have it running in a docker image.

Here are few ways to have it up and running:

docker run --rm -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher Will delete the image once you are done using it. This could be interesting for a test environment.
docker run -d -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher Will launch the image as a daemon.
docker run -it -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher Will launch the image in interactive mode

Useful links:
Mailcatcher homepage: mailcatcher.me
Dockerfile and Docker Compose: https://github.com/spaquet/docker-alpine-mailcatcher
Dockerhub: https://hub.docker.com/r/stpaquet/alpinemailcatcher

Longer article can be found on Medium with Docker Compose basic configuration and more examples: https://medium.com/@spaquet/mailcatcher-to-the-rescue-4ba438dc98c2

Rails 7 + Devise + Log out

Stephane Paquet — Mon, 21 Feb 2022 19:41:47 +0000

A Quick and Dirty way to get the redirection working on Logout when using Devise in a Rails 7 app.

You probably have noticed that most of the redirects in Devise a somehow broken. This is due to the way Turbo interfere with them as it catches the 200 status code.

There are already a lot of posts explaining how to patch this while waiting for an official release. But, if your main issue is about the "redirect on log out" not working, then you can easily fix this.

Instead of calling destroy_user_session_path in a link_to, call it inside of a button_to

Here is the full code:

<%= button_to(
        "Log Out",
        destroy_user_session_path,
        method: :delete
      ) %>

And Voilà! This simple hack enables your users to be redirected to the root_path of your app in seconds.

Rails, Popper, Tailwind & Stimulus

Stephane Paquet — Mon, 17 Jan 2022 12:11:37 +0000

Popper is a javascript positioning engine to speed up the development of popovers and tooltips.

More information about it can be found here

Project setup:

Rails 7
Stimulus 2
esbuild / jsbuild
Tailwind CSS

rails new project_name --css=tailwind --javascript=esbuild

Step 1: add popper to the project

yarn add @popperjs/core

Step2: create a stimulus controller

rails g stimulus popper

Open the popper_controller.js and perform the following edits:

Add at the top of the file:

import { createPopper } from "@popperjs/core";

Before creating an instance of popper in the controller, let's add "target" and "values" to make this controller more reusable.

Popper instance is instantiated in the connect() method

connect() {
    // Create a new Popper instance
    this.popperInstance = createPopper(this.elementTarget, this.tooltipTarget, {
      placement: this.placementValue,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: this.offsetValue,
          },
        },
      ],
    });
  }

Note that the event listeners are not added to the target or element from within the stimulus controller. As written in Better Stimulus and the official stimulus documentation, event management should be handled by the Stimulus framework. We will attached the event management to the element using the data-action tag as explained below.

Let's create the show and hide methods as well as the disconnect one that us used to remove the popper instance.

show(event) {
    this.tooltipTarget.setAttribute("data-show", "");

    // We need to tell Popper to update the tooltip position
    // after we show the tooltip, otherwise it will be incorrect
    this.popperInstance.update();
  }

  hide(event) {
    this.tooltipTarget.removeAttribute("data-show");
  }

  // Destroy the Popper instance
  disconnect() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
    }
  }

So far we are pretty much sticking to popper's documentation. The main difference is that the event listeners are not attached to the element programmatically within the stimulus controller.

At this point, the popper_controller.js file should look like this:

import { Controller } from "@hotwired/stimulus";
import { createPopper } from "@popperjs/core";

// Connects to data-controller="popper"
export default class extends Controller {
  static targets = ["element", "tooltip"];
  static values = {
    placement: { type: String, default: "top" },
    offset: { type: Array, default: [0, 8] },
  };

  connect() {
    // Create a new Popper instance
    this.popperInstance = createPopper(this.elementTarget, this.tooltipTarget, {
      placement: this.placementValue,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: this.offsetValue,
          },
        },
      ],
    });
  }

  show(event) {
    this.tooltipTarget.setAttribute("data-show", "");

    // We need to tell Popper to update the tooltip position
    // after we show the tooltip, otherwise it will be incorrect
    this.popperInstance.update();
  }

  hide(event) {
    this.tooltipTarget.removeAttribute("data-show");
  }

  // Destroy the Popper instance
  disconnect() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
    }
  }
}

Step 3: Let's get stylish!

We can use the one provided by the popper team as an example on their website

#tooltip {
  background: #333;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  display: none;
}
#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
#tooltip[data-popper-placement^="top"] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^="left"] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^="right"] > #arrow {
  left: -4px;
}

#tooltip[data-show] {
  display: block;
}

Feel free to use tailwind CSS styles and animation or any other CSS trick that is required or will make your popover/tooltip look better.

Saved it in app/assets/stylesheets/popper.css and import it at the top of app/assets/stylesheets/application.tailwind.css

@import "popper.css";

/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

It's now time to work on the frontend of the project!

Step 4: Let's create a button

<div data-controller="popper">
   <button id="button" data-popper-target="element" data-action="mouseenter->popper#show mouseleave->popper#hide" class="bg-blue-500 text-blue-100 px-3 py-2 rounded-xl">
      Click me
      <div id="tooltip" role="tooltip" data-popper-target="tooltip">
         My tooltip
         <div id="arrow" data-popper-arrow></div>
      </div>
   </button>
</div>

As stated above, the event listeners are added using the data-action parameter. in this case we direct the mouseenter event, which is triggered when the mouse is over the button, to the show method defined in the controller. When the mouse is no longer over the button element, mouseleave is triggered and the hide method is called to hide the tooltip.

You can add more actions or adapt to your needs. For example, you can have data-action="click->popper#show" to open a popover when a user click on a certain element.

Step 5: Enjoy

Wrapping up 2021

Stephane Paquet — Thu, 23 Dec 2021 04:24:01 +0000

Wrapping up the year with new tools for a great start in 2022.

Fig

Definitely the tool I cannot live without anymore. Its capacity to understand or simply list the options when typing CLI is fabulous and help you save a lot of time. Yes there are a lot of completion tools available, but Fig is clearly outsmarting its competitors by its speed, accuracy, flexibility and UI.

Tabby

I have to admit that I was a bit bored using iTerm2. It was great but quite massive and resource hungry. So, during most of 2021 I’ve been relying on the OS X de facto Terminal (or the one in VSCode).
That was true till I stumbled upon Tabby. Its UI and how you can layout the different windows inside it are making it a very promising alternative to the existing terminals.
My only regret at the time being is that Tabby is not yet supported by Fig, but that should be quickly addressed by the Fig team 😁

Github Copilot

Always on since I’ve been granted early access to it.
Yes, some suggestions are quite out of the blue, but I appreciate it’s great help in maintaining style in my code and making smart code suggestion that I would not have come up with.
It also greatly helps when you have to write very repetitive test cases or when working on some initialization routines.

What about you? Share you comments and thoughts below.

Original article was published here