Stéphane Paquet

did you try deploying using sqlite?

I found few reference about it, include a Podcast with Chris... but no real end-to-end proper integration.
So far I have read https://github.com/maizzle/framework/issues/346 and the Mix & Go (box & YT video) but nothing really explain how the global mail layout should be configured, what should be tweaked in the config.js or postcss (the post on Github seems broken for Maizzle 4.5.0) etc.
for the time being, my idea is to have a generic <%= yield %> in the mail layout... but that's a bit killing the purpose.
Any suggestion?

My little experience is that app/validators makes it easier to import the custom validator in the model than using app/models/validators as with the first one there is no need to user include my_custom_validator in the model.

that was my thoughts too. And on any unix type of operating system that you manage you can also add a few more lines in the hosts file to make it work with any browser as this file is queried before the DNS.

I'd like to point to my docker image, which is maintained.
It now runs mailcatcher 0.8.2 and is built using Alpine Linux making it one of the smallest available images.
You can find it here https://hub.docker.com/r/stpaquet/alpinemailcatcher

I put together information I collected across different blogs, tutorials about how to use Enums in Models and Forms (focus on Rails 7). I might have missed some use cases, so feel free to comment either here or on the blog itself.
Link: https://medium.com/@spaquet/activerecord-enum-and-activeview-form-f09dca0ea4b0
Cheers

Well, Bootstrap is quite heavy compare to Tailwind and offer less control out of the box.
You rapidly end up creating a lot of custom CSS with bootstrap that you do not have to with Tailwind. Also, the JIT included in Tailwind makes the bundle pretty small. Now that I have tasted Tailwind I do not want to go back to Bootstrap (tried Bv5 few week ago... and dropped it).
I'd like to add one thing before wrapping up this post: there are predefined UI for Tailwind. Some are paid, some are free, some are maintained by the Tailwind team, some are independent projects.
I suggest reading https://superdevresources.com/tailwind-ui-kits/ (not an exhaustive list, but already a good starting point)

Rails 7.0
Ruby 3.0.3
Esbuild / Tailwind
Question: what is the best way to import the CSS from a node package. After running the yarn add command, the JS loads very easily but as you know adding import css in application.js will lead in having the application.css overwritten, what is not intended.
I could copy the node_module css files to the assets/javascript folder and the use @import in the application.tailwind.css file but that means that every time the node_module is upgraded (or during deployment) something will break...
I was considering adding Rails.application.config.assets.paths << "node_modules" in the assets.rb file but not sure this is a good practice.
What are your recommendations?

you can install something called "Stimulus Components". They have a bunch of standard tailwind based elements such as dropdown, modals and more. there should be something to use for the hamburger too.

I also added a for loop to display the form parameters and their values as console.log does not work in that case.

Using request.js to pass the data to the controller:

import { Controller } from "stimulus"
import { patch } from '@rails/request.js'
import Sortable from "sortablejs"

export default class extends Controller {
  connect() {
    this.sortable = Sortable.create(this.element, {
      group: 'shared',
      animation: 150,
      onEnd: this.end.bind(this)
    })
  }

  async end(event) {
    let id = event.item.dataset.id
    var data = new FormData()
    data.append("position", event.newIndex + 1)

    for (var key of data.entries()) {
      console.log(key[0] + ', ' + key[1]);
    }

    const response = await patch(this.data.get("url").replace(":id", id), { body: data })
    if (response.ok) {
      console.log('Sequence reordered')
    } else {
      console.error('Error')
    }
  }
}

They are kind of similar. I think that the "main" draw back I've read regarding Papertrail is that it is storing the user ID as a string... so when you do a lookup you have to convert it back to a int.

Did you decide which one to use for your project? If yes, what were you key drivers?

found out the change in Tailwind that prevented the expected behavior.

I created a flash view component to display flash messages.

It does work, but the javascript trigger its display does not work as expected. Instead of displaying on the spot, it waits for like 5 seconds before rendering and disappear rapidly...

The project uses Hotwire, Stimulus, Webpacker (6), Tailwind CSS 2.2 with JIT

No error reported during the asset compilation but I suspect that the assets are not compiled in the right sequence or something like that.

Here the Stimulus controller code"

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    if (!this.isPreview) {
      // Display with transition
      setTimeout(() => {
        this.element.classList.remove('hidden');
        this.element.classList.add('transform', 'ease-out', 'duration-300', 'transition', 'translation-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');

        // Trigger transition
        setTimeout(() => {
          this.element.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0');
        }, 100);
      }, 500);

      // Auto-hide after 5 seconds
      setTimeout(() => {
        this.close();
      }, 5000);
    }
  }

  close() {
    // Remove with transition
    this.element.classList.remove('transform', 'ease-out', 'duration-300', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2', 'translate-y-0', 'sm:translate-x-0');
    this.element.classList.add('ease-in', 'duration-100');

    // Trigger transition
    setTimeout(() => {
      this.element.classList.add('opacity-y-0');
    }, 100);

    // Remove element after transition
    setTimeout(() => {
      this.element.remove();
    }, 300);
  }

  disconnect() {
    this.element.classList.remove('play-animation')
  }

  get isPreview() {
    return document.documentElement.hasAttribute('data-turbolinks-preview')
  }
}

Did someone try using video_tag or video.js? I working on a product that needs to display different video sources and having to embed different iframes/players depending on the source is not quite an option.

Check this article https://dev.to/kattak2k/adding-a-favicon-to-your-site-using-webpacker-in-rails-6-2m2h looks like it contained the answer to your question.

By default, the helper in Rails looks for the favicons in the assets/images folder. Webpack does not ;-)

Check this article on dev.to https://dev.to/kattak2k/adding-a-favicon-to-your-site-using-webpacker-in-rails-6-2m2h

At the same time, owning this data presents risks and add Ops to the project.

Devise seems to be very popular among the Rails communities and I was wondering why Auth0, Okta, Cognito (AWS) or Firebase, etc. were not that much used to authenticate and manage users in Rails app.

They offer pretty decent free tiers (so developing costs should remain close to 0) and solve a lot of security and compliance issues that we face as developers.

What are your thought and what are your best practices when it comes to user authentication and management?

I cannot agree more regarding the performance improvement. I also think it's a good practice to avoid changing a string that we wanted to be static ;-)