Stéphane Paquet

Joined

4,360 Experience
18 Lessons Completed
3 Questions Solved

Activity

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

Posted in Enum in Models and Forms

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

Posted in Installing Tailwind with Rails 7

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?

Posted in Installing Tailwind with Rails 7

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?

Posted in ViewComponents and Tailwind CSS JIT

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

Posted in ViewComponents and Tailwind CSS JIT

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')
  }
}

Posted in Embed Youtube video in Rails app

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 ;-)

Posted in Authentication in 2021

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

Posted in Authentication in 2021

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 ;-)

I was wondering if some of you are adding # frozen_string_literal: true to their config files?

Posted in Just sharing: Squash your migrations

Agree. but when testing or launching the app I should have an error about that, pushing me to run the few missing migrations.

After that, I will have a new and up-to-date schema.rb which can be used for all deployment (unless I'm not testing before deploying...)

Posted in Just sharing: Squash your migrations

Thanks Chris for your answer.
I would have thought that the following command rake db:schema:load (likely to berails db:schema:load in modern rails) could be used to quickly setup the database without having to runrails db:migrate, but still preserving the usage of all migration features, especially the option to rollback to any point in time.

Posted in Just sharing: Squash your migrations

2 questions:
How's that different from the schema.rb files ?
Is it compatible with Rails 5.0.x and forthcoming Rails 5.1?

logo Created with Sketch.

Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

© 2022 GoRails, LLC. All rights reserved.