DEV Community: Mario

Boolean Validator for Rails

Mario — Sat, 17 Jun 2023 09:57:39 +0000

Rails doesn't come with a built-in boolean validator.
That means if we have boolean attribute and we set it to nil, it defaults to false, which is not necessarily what we want.

For example a SchrodingersCat model with a alive boolean attribute:

cat = SchrodingersCat.new(alive: nil)
cat.valid? # => true

To solve that problem we can add a custom validator:

# app/validators/boolean_validator.rb
class BooleanValidator < ActiveModel::EachValidator
  def validate_each(record, attribute, value)
    return if value.in? [false, true]

    record.errors.add attribute, :boolean
  end
end

Then we can use that validator the same way as the built-in ones:

# app/models/schrodingers_cat.rb
class SchrodingersCat < ApplicationRecord
  validates :alive, boolean: true
end

The error message can be defined for example in activerecord.errors.messages.boolean:

# config/locales/en.yml
en:
  activerecord:
    errors:
      messages:
        boolean: "must be boolean"

The result:

cat = SchrodingersCat.new(alive: nil)
cat.valid? # => false
cat.errors.to_a # => ["Alive must be boolean"]

GitHub Action using pre-installed Postgres

Mario — Sun, 22 Jan 2023 14:05:25 +0000

Until now I used something like this for Postgres in GitHub Actions:

jobs:
  the_job_that_needs_postgres:
    runs-on: ubuntu-latest

    services:
      postgres:
        image: postgres:latest
        env:
          POSTGRES_PASSWORD: ${{ env.POSTGRES_PASSWORD }}
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          - 5432:5432

    steps:
      # your steps

Then I saw that the GitHub's Ubuntu Runner Image actually comes with a pre-installed Postgres version, but the service is not activated by default.

So instead of using the postgres:latest image as a service, we could use that pre-installed Postgres.

In order to make that work, we have to add one step to the CI job that starts the postgresql.service and one step that creates a runner user in the database, so that the workflow's session user can connect to the database.

jobs:
  the_job_that_needs_postgres:
    runs-on: ubuntu-latest

    steps:
      - name: Start PostgreSQL
        run: |
          sudo systemctl start postgresql.service
          pg_isready
          sudo -u postgres createuser -s -d -r -w runner

      # your steps

Here's what the createuser flags do:

-s : User will be a superuser
-d : User can CREATE DATABASE
-r : User can CREATE ROLE
-w : It won't prompt for a password.

This approach takes only a few seconds (3 - 5 seconds) to startup whereas the former setup takes between 20 - 30 seconds.

On the downside you can't specify the Postgres version, you have to live with the version that comes with the runner image.

At the time of writing ubuntu-22.04 contains Postgres 14.6.

Database config for Rails

For Rails projects this is how a minimal database.yml could look like using the setup above:

test:
  adapter: postgresql
  encoding: unicode
  database: github_actions_ci_db
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: runner

Behold:

username is set to runner
hostname is not required

(It might even not work if you provide the hostname, like localhost or 127.0.0.1.)

Credits

(Cover photo by Nathan Queloz on Unsplash)

Auto-reload `config_for` files in Rails

Mario — Fri, 31 Dec 2021 10:34:17 +0000

In Rails projects I often use YAML files to organize app-wide values or configurations.

# config/settings.yml
shared:
  important_value: 42

development:
  default_from_email: 'development@example.com'

test:
  default_from_email: 'test@example.com'

production:
  default_from_email: 'production@example.com'

In the application configuration we create a new configuration:

# config/application.rb
module RailsApp
  class Application < Rails::Application
    # ...
    config.settings = config_for(:settings)
  end
end

We can access these values using Rails.configuration.settings, for example:

# $ RAILS_ENV=test bin/rails c
# Loading test environment (Rails 7.0.0)
Rails.configuration.settings[:important_value]    # => 42
Rails.configuration.settings[:default_from_email] # => "test@example.com"

Unfortunately the configuration is not reloaded automatically. If we change the important_value and refresh the page, we'd still see the old value. In order to see the value, we'd need to restart the server first. This can be confusing and tedious, particularly in development.

Here's a way to reload the configuration every time the file changes.

Create a new file config/initializers/config_for_reloader.rb:

# config/initializers/config_for_reloader.rb
if Rails.env.development?
  config_for_reloader = ActiveSupport::FileUpdateChecker.new(["config/settings.yml"]) do
    Rails.application.config.settings = Rails.application.config_for(:settings)
  end

  ActiveSupport::Reloader.to_prepare do
    config_for_reloader.execute_if_updated
  end
end

ActiveSupport::FileUpdateChecker takes an Array of file paths and a block containing the instructions to be executed on change. (Documentation for ActiveSupport::FileUpdateChecker)

In our case the block contains the same instruction as in config/application.rb for loading the YAML file.

ActiveSupport::Reloader.to_prepare registers a callback that will run once at application startup and every time the code is reloaded. (Documentation for ActiveSupport::Reloader.to_prepare)

At this point, I would have expected that Rails picks up the changes automatically after the file config/settings.yml is modififed, but for some reason it does not. It only reloads the file and sets the configuration after an "application file" (a model, template, controller, routes, etc.) is modified.

We can workaround this by adding config/settings.yml to the eager_load_paths:

# config/application.rb
module RailsApp
  class Application < Rails::Application
    # ...
    config.settings = config_for(:settings)
    config.eager_load_paths << Rails.root.join("config/settings.yml")
  end
end

(If anybody knows why that is necessary, I'd be interested.)

Now, the configuration file is reloaded after changing it and a page refresh would show the latest value.

(Cover image by Christopher Alvarenga on Unsplash)

Create views to display all data managed by apartment gem

Mario — Wed, 17 Nov 2021 08:39:46 +0000

One strategy of the apartment gem is to store tenant data in dedicated schemas in a Postgres database.

If we have a model Contract and tenants company_a and company_b, we will find these tables in the database:

SELECT * FROM "public"."contracts"; -- is supposed to be empty
SELECT * FROM "company_a"."contracts";
SELECT * FROM "company_b"."contracts";

(The actual tenant schema names may differ)

Having the data distributed in multiple schemas makes "cross-tenant-analysis" quite tricky.
To solve this problem we could create views that collects all data from all tenant tables, like so:

CREATE OR REPLACE VIEW public.all_contracts AS
          SELECT * FROM "company_a"."contracts"
UNION ALL SELECT * FROM "company_b"."contracts"
-- UNION ALL ...
;

Now we can query all data using:

SELECT * FROM all_contracts;

Following Ruby script creates these views automatically:

# we want to exclude all "public" models, since these data is not distributed
public_table_names = Apartment.excluded_models.map { |model| model.constantize.table_name.remove(/^public\./) }

# create and execute an SQL query to collect all tables from all schemas (= tenants)
class PgTable < ActiveRecord::Base; end
tenants_table_names_sql = PgTable.select(:schemaname, :tablename)
                                 .where(schemaname: Apartment.tenant_names)
                                 .where.not(tablename: public_table_names)
                                 .order(:tablename)
                                 .to_sql

all_pg_tables_rows = ActiveRecord::Base.connection.execute(tenants_table_names_sql)

# The next lines builds and executes the "CREATE OR REPLACE VIEW" query, which is described at the beginning of the article
all_pg_tables_rows.group_by { |row| row['tablename'] }.each do |table_name, pg_tables_rows|
  selects_sql = pg_tables_rows.map do |pg_table_row|
    "SELECT * FROM \"#{pg_table_row['schemaname']}\".\"#{pg_table_row['tablename']}\""
  end

  unioned_selects_sql = selects_sql.join(' UNION ALL ')

  create_view_sql = "CREATE OR REPLACE VIEW public.all_#{table_name} AS #{unioned_selects_sql}"

  ActiveRecord::Base.connection.execute(create_view_sql)
end

Disclaimer: Obviously this is a hacky script and should probably not be used in production.

If we want to query these views using ActiveRecord we could create corresponding models.

class AllContract < ActiveRecord::Base; end

AllContract.where(...) # go crazy here

Note that these are VIEWS and cannot (?) be used to insert, modify or delete data.

(Cover image by Aleks Marinkovic on Unsplash)

I18n in StimulusReflex

Mario — Wed, 14 Apr 2021 06:45:00 +0000

How do you use I18n in your Reflexes?

There is an official approach in the Documentation of StimulusReflex to do that.

However, here's another one:

# ./app/reflexes/application_reflex.rb
class ApplicationReflex < StimulusReflex::Reflex
  around_reflex :switch_locale

  private

  def switch_locale(&action)
    # replace `session[:locale]` with your custom logic
    locale = session[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end
end

Yes, it is basically the same thing as Rails suggests for Managing the Locale across Requests.

This way I like that all reflexes have the locale set by default, and I do not have to care about it anymore when adding new reflexes.

What's your experience/opinion regarding I18n in StimulusReflex?

(Cover image by Nareeta Martin on unsplash)

Maintaining `.rubocop.yml`

Mario — Fri, 11 Sep 2020 13:28:54 +0000

For a while now, every time I update rubocop gem to the latest version in my projects and then run bundle exec rubocop I would get a message that looks like this

The following cops were added to RuboCop, but are not configured. Please set Enabled to either `true` or `false` in your `.rubocop.yml` file.

Please also note that can also opt-in to new cops by default by adding this to your config:
  AllCops:
    NewCops: enable

Lint/DuplicateRequire: # (new in 0.90)
  Enabled: true
Lint/EmptyFile: # (new in 0.90)
  Enabled: true
Lint/TrailingCommaInAttributeDeclaration: # (new in 0.90)
  Enabled: true
Lint/UselessMethodDefinition: # (new in 0.90)
  Enabled: true
Style/CombinableLoops: # (new in 0.90)
  Enabled: true
Style/KeywordParametersOrder: # (new in 0.90)
  Enabled: true
Style/RedundantSelfAssignment: # (new in 0.90)
  Enabled: true
Style/SoleNestedConditional: # (new in 0.89)
  Enabled: true
Rails/AfterCommitOverride: # (new in 2.8)
  Enabled: true
Rails/SquishedSQLHeredocs: # (new in 2.8)
  Enabled: true
Rails/WhereNot: # (new in 2.8)
  Enabled: true
For more information: https://docs.rubocop.org/rubocop/versioning.html

I am not the "opt-in to new cops by default"-guy and prefer to add and configure new cops manually.

I also like to have the cops in alphabetical order.
However, manually putting new cops into order would take me some time and was an annoying task, so I wrote a script that did this work for me.

Eventually I put the script into a gem named ruboclean so anyone with the same "fetish" can use it.

Today, all I do is copy-paste the new cops into .rubocop.yml and then run ruboclean... done.

Satisfying. 🙂

For more information, please visit https://github.com/lxxxvi/ruboclean/.

(Cover image by nrd on unsplash)

How to use GraphiQL in Rails

Mario — Thu, 13 Aug 2020 07:52:35 +0000

I recently wanted to use graphiql-rails gem to play around with a GraphQL endpoint that I was running in a Rails project.

For some reasons, I was not able to set it up properly since the gem doesn't seem to be working without Rails Asset Pipeline... or may be I was just too lazy to look it up how to make it work.

So I came up with a workaround:

If exists, remove graphiql-rails from Gemfile, then run bundle.

If exist, remove these lines from ./config/routes.rb.

if Rails.env.development?
  mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/your/endpoint"
end

These things may have been auto-generated if you followed the installation instructions from the graphql gem.

Add to ./config/routes.rb

get '/graphiql', to: 'graphiql#index' if Rails.env.development?

This adds a new route /graphiql and maps it to the index action of controller GraphiqlController, which we are going to define next...

Create ./app/controllers/graphiql_controller.rb with this content:

class GraphiqlController < ApplicationController
  layout false

  def index; end
end

We can leave the index method empty, and continue with the view...

Create ./app/views/graphiql/index.html.erb with this content:

<html>
  <head>
    <title>Simple GraphiQL</title>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
    <%= csrf_meta_tags %>
  </head>
  <body style="margin: 0;">
    <div id="graphiql" style="height: 100vh;"></div>

    <script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>

    <script>
      const graphqlEndpointUrl = "<%= graphql_url %>";
      const graphQLFetcher = graphQLParams =>
        fetch(graphqlEndpointUrl, {
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': document.querySelector(`meta[name="csrf-token"]`).content
          },
          body: JSON.stringify(graphQLParams),
        })
          .then(response => response.json())
          .catch(() => response.text());
      ReactDOM.render(
        React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
        document.getElementById('graphiql'),
      );
    </script>
  </body>
</html>

That content originally comes from the official GraphiQL README Page.

It loads the GraphiQL source from a CDN, so you need to be connected to the internet in order to use it.

However, the file has been enriched in 3 locations in order to work with Rails:

<%= csrf_meta_tags %> : This writes the CSRF token as a <meta>-tag, which we are going to use in the AJAX request below.
const graphqlEndpointUrl = "<%= graphql_url %>"; : If your Rails application runs the GraphQL endpoint, its URL will automatically be defined here.
'X-CSRF-Token': document.querySelector(`meta[name="csrf-token"]`).content : This reads the CSRF token from the <meta>-tag and sends it together with the GraphQL query to the Rails server. If this is missing, Rails will refuse the request with the error ActionController::InvalidAuthenticityToken.

Finally, start the rails server bin/rails s and go to http://localhost:3000/graphiql:

TIL Tuples vs Arrays in Crystal

Mario — Thu, 06 Aug 2020 08:26:25 +0000

Today I played around with Crystal... the programming language (🥁 ba-dum-tss).

Coming from Ruby, Crystal isn't a mystery in many cases, but in the end, I don't know much about it at all.

However, I learned something about Tuples and Arrays today.

It starts simple with a class that takes a String as an argument.

class TupleVsArray
  def initialize(@text : String)
    puts "Text: #{@text}"
  end
end

Now let's decomposit an array into two variables, and then pass the first variable, foo, into the class:

foo, bar = ["foo", "bar"]
TupleVsArray.new(foo)     # Text: foo

This works fine.
All elements in the array are of type String.
It compiles, it runs!

Let's change the second element in the array into a Symbol:

foo, bar = ["foo", :bar]
TupleVsArray.new(foo)

This fails during compiling with this error:

Error: no overload matches 'TupleVsArray.new' with type (String | Symbol)

To me, having little to 0 experience with type checking, this is fascinating... and confusing, because foo is allegedly never going to be a Symbol. Allegedly...

Then I realized that the array could be changed in the meantime, for example:

row = ["foo", :bar]
row[0] = :foo
foo, bar = row
TupleVsArray.new(foo)

# Error: no overload matches 'TupleVsArray.new' with type (String | Symbol)

This time, the error makes absolutely sense.

Then I also learned, that in Crystal we cannot change an array's element to an not-yet-existing type:

row = ["foo", :bar]
row[0] = 42
Error: no overload matches '=' with types Int32, Int32

If we want to change any element in row, we must only use String or Symbol.

So, in order to resolve the original problem, we need to use a Tuple, which is a

[...] fixed-size, immutable, stack-allocated sequence of values of possibly different types.

foo, bar = {"foo", :bar}
TupleVsArray.new(foo)     # Text: foo

Alright, got it. 😊

(Photo by Cristofer Jeschke on Unsplash)

TIL Using Postgres in GitHub Actions

Mario — Fri, 24 Jul 2020 14:10:33 +0000

I recently made my first experiences with GitHub Actions.

Setting up Postgres took me several attempts because of a misunderstanding with variables in the service's env block.

I thought that I could just define POSTGRES_PASSWORD in the global env block and this would then be available and used in Postgres' service. However, not having set POSTGRES_PASSWORD in services.postgres.env gave me this nice, quite unhelpful error message:

##[error]Failed to initialize, postgres service is unhealthy.

After a while I learned that the environment variable POSTGRES_PASSWORD in services.postgres.env is mandatory and must not be blank.

Also, the variables defined in services.postgres.env are passed into the docker image, thus they are somewhat different compared to regular env blocks in Github Action Workflow syntax... I guess?

However, my final result looks like this.

env:
  # ...
  POSTGRES_PASSWORD: mysecretpassword

jobs:
  a-job-that-uses-postgres:
    # ...
    services:
      postgres:
        image: postgres:latest
        env:
          POSTGRES_PASSWORD: ${{ env.POSTGRES_PASSWORD }}
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          - 5432:5432
    # ...

Which is being translated into this command, which makes it clear what happens with the variables.

docker create\
  # many others\
  -p 5432:5432\
  --health-cmd pg_isready\
  --health-interval 10s\
  --health-timeout 5s\
  --health-retries 5\
  -e "POSTGRES_PASSWORD=mysecretpassword"\    # <= 💡
  -e GITHUB_ACTIONS=true\
  -e CI=true\
  postgres:latest

My learning may be trivial, but I hope that this helps someone having the same issue.

(Photo by Andrew Rice)

Middleman + TailwindCSS + Webpack

Mario — Tue, 02 Jul 2019 16:27:26 +0000

I really enjoy using Middleman for some websites that I maintain. For one of my projects I wanted to include TailwindCSS and started googling how to do that. I found this guide but it seemed bit outdated.

This got me inspired to write an updated version.

So, in this guide I'm trying to describe how I managed setting up a middleman project and integrate TailwindCSS using Webpack.

It uses these versions:

Middleman 4.3.4
Tailwind 1.0.4
Webpack 4.35.2

Disclaimer: I am not an expert with Webpack etc. So the following instructions may be inaccurate, incomplete or misleading. I hope it's not too bad though, please comment if you feel something is terribly wrong.

Here we go...

Setup a Middleman project

Firstly, install Middleman and create a project

gem install middleman
middleman init project
cd ./project
middleman serve

Once middleman serve is running you should see a default page on http://localhost:4567. You may abort the process again since we're going to change some configurations now...

Also, from now on this guide assumes that the working directory is the project's root directory.

(These instructions were taken from the Middleman installation page)

Add Livereload (Optional)

Livereload automatically reloads the page in the browser every time we change something in the code, which can be useful later.

Add gem 'middleman-livereload' to ./Gemfile
Add activate :livereload to ./config.rb
Run bundle install

(These instructions were taken from the Middleman Basics page)

Add npm packages

Now we get to the first part where I don't have much knowledge about. After some experimenting I concluded this list of packages

yarn init
yarn add autoprefixer css-loader mini-css-extract-plugin postcss postcss-import postcss-loader style-loader tailwindcss webpack webpack-cli

(You may substitute yarn with npm. Use npm install instead of yarn add)

Prepare CSS file

Middleman comes with SCSS, but I decided to not use SCSS together with Tailwind. That's why I renamed the stylesheet's filename:

mv ./source/stylesheets/site.css.scss ./source/stylesheets/site.css

Then I changed the content of ./source/stylesheets/site.css to this:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
  @apply bg-red-500;
}

This imports the Tailwind definitions and applies a rule to the body tag using Tailwind's @apply directive. At the end of this guide we expect the background color of the page to be red(-ish).

(This instruction was taken from the Tailwind's installation page)

Create `postcss.config.js`

Next we're going to create a file ./postcss.config.js with this content:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

(This instruction was taken from the Tailwind's installation page)

Configure webpack

To me, configuring webpack was the most difficult part. There are a lot of examples for this on the interwebs and as a JS-noob I couldn't make clear which way is the best. But here's what I came up with.

Create a file ./webpack.config.js with this content:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin()
  ],
  entry: {
    application: './source/javascripts/site.js',
    styles: './source/stylesheets/site.css',
  },
  output: {
    path: __dirname + '/.tmp/dist',
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
        ]
      }
    ]
  }
}

While I created this file I made several observations that I'd like to share:

The keys in entry: { ... } (application and styles) will be used as filenames. So there will be a file named application.js and one named styles.js (yes... the styles file's extension is going to be .js, I guess it won't be used though, may be I can get rid of it somehow?)
output.path apparently has to be /.tmp/dist (!), otherwise Middleman won't use it in development?
Lastly, the rule for .css files is more or less copy/pasted from MiniCssExtractPlugin project page. I assume this plugin is responsible for processing/creating a styles.css file in the output path? Note that this plugin replaces a plugin named extract-text-webpack-plugin.

You see, in this area I have multiple question marks. So if you have corrections, I invite you to post them in the comments.

Activate Webpack as `:external_pipeline`

Now let's hook up webpack to the Middleman pipeline.

Add these lines to ./config.rb

activate :external_pipeline,
  name: :webpack,
  command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch -d --color',
  source: ".tmp/dist",
  latency: 1

This ensures that webpack runs as soon as anything changes in the project during development or when we build the project.

(This instruction was taken from the Middleman Documentation)

Change stylesheet and javascript paths in `./source/layouts/layout.erb`

Remember that we configured webpack so we get a file named application.js and one named styles.css as outputs? We need to change these filenames in the head section of the page.

In ./source/layouts/layout.rb change

<%= stylesheet_link_tag "site" %>
<%= javascript_include_tag "site" %>

<%= stylesheet_link_tag "styles" %>
<%= javascript_include_tag "application" %>

Moment of truth...

Run

middleman serve

Check whether the background of the page at http://localhost:4567 is red(-ish). If so, this guide is trustworthy and you can happily start using Tailwind in your project. If not, put the blame on me and share your experience.

Credits

Cover image by Marco Verch

DEV Community: Mario

Boolean Validator for Rails

GitHub Action using pre-installed Postgres

Database config for Rails

Credits

Auto-reload `config_for` files in Rails

Create views to display all data managed by apartment gem

I18n in StimulusReflex

Maintaining `.rubocop.yml`

How to use GraphiQL in Rails

TIL Tuples vs Arrays in Crystal

TIL Using Postgres in GitHub Actions

Middleman + TailwindCSS + Webpack

Setup a Middleman project

Add Livereload (Optional)

Add npm packages

Prepare CSS file

Create postcss.config.js

Configure webpack

Activate Webpack as :external_pipeline

Change stylesheet and javascript paths in ./source/layouts/layout.erb

Moment of truth...

Credits

Create `postcss.config.js`

Activate Webpack as `:external_pipeline`

Change stylesheet and javascript paths in `./source/layouts/layout.erb`