Forem: Vincent Bakker

Clone record with overrides

Vincent Bakker — Wed, 05 Jul 2023 07:15:40 +0000

The clone_with_overrides function duplicates the original record using the dup method, assigns the overridden fields from the overrides hash, saves the new record, and returns it.

class Person < ApplicationRecord
  def clone_with_overrides(overrides = {})
    # Create a new instance of the model
    new_record = self.dup

    # Assign the overridden fields to the new instance
    overrides.each do |field, value|
      new_record[field] = value
    end

    # Save the new record
    new_record.save

    # Return the cloned record with overrides
    new_record
  end
end

To use this function, you can call it on an instance of the model and pass a hash of field-value pairs to override. Here's an example usage:

# Assuming you have an existing record with ID 1
original_record = Person.find(1)

# Clone the record and override some fields
cloned_record = original_record.clone_with_overrides(
  name: 'John',
  age: 42
)

# The cloned record is saved and ready to use
puts cloned_record.inspect

Make sure to adjust the field names and their types according to your model's attributes.

Search Engine Optimization (MetaTags) for Ruby on Rails applications

Vincent Bakker — Thu, 09 Dec 2021 09:38:33 +0000

The following code set's up the minimal required meta tags for Social Media and Search Engines using the MetaTags gem. ([https://moz.com/blog/meta-data-templates-123])

You can easily extend this with other properties. Setting this up with a couple of helper functions makes it easy to extend and maintain.

Installation

Add the "meta-tags" gem to your Gemfile.

gem 'meta-tags'

And run bundle install command.

MetaTags Usage

First, add this code to your main layout:

<head>
  <%= display_meta_tags site: 'My website' %>
</head>

Then, to set the page title, add this to each of your views (see below for other options):

<h1><%= title 'My page title' %></h1>

When views are rendered, the page title will be included in the right spots:

<head>
  <title>My website | My page title</title>
</head>
<body>
  <h1>My page title</h1>
</body>

Setting up default values

Let's add a helper function to setup default values

def default_meta_tags
    {
      site: 'Site Name',
      title: '',
      reverse: true,
      separator: '|',
      description: 'Site Description',
      keywords: 'your, key, words',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('logo.png') },
        { href: image_url('logo.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png' },
      ],
      og: {
        site_name: 'Site Name',
        title: '',
        description: 'Site Description', 
        type: 'website',
        url: request.original_url,
        image: image_url('social.jpg')
      }
    }
end

Implement the helper function in your main layout

<head>
  <%= display_meta_tags(default_meta_tags %>
</head>

Overriding the default values

The following example overrides the default values for a Post model. (Add this code to the show.erb for example)

set_meta_tags title: @post.title, 
  description: @post.intro, 
  twitter: {
   card: "summary",
   site: "@getSmart_NL"
 },
  og: { 
    title: @post.title, 
    description: @post.intro, 
    image: image_url(@post.header.attached? ? url_for(@post.header) : "social.jpg"), 
    type: "article" 
  }

*Instructions based on MetaTags readme and tweaked to my personal usage.

Adding TailwindCSS to your Rails project with PostCSS 7 compatibility

Vincent Bakker — Tue, 16 Nov 2021 08:58:37 +0000

Install Tailwind CSS with PostCSS 7 compatibility

Run the following command to add tailwind to your project and package.json.

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create Tailwind Configuration

The following command will create a tailwind.config.js file where you can setup the default configuration for TailwindCSS.

npx tailwindcss init

The Tailwind config file will be empty and should look like this:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

If you compile all Tailwind CSS classes the generated CSS file will be huge. Let's enable Just-in-time compilation to only extract the classes we use from our views, helpers and javascript files.

module.exports = {
  mode: 'jit',
  purge: [
      './app/views/**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
  ],
};

Adding Tailwind to PostCSS config

You will need to add the following line to the postcss.config.js file to include it in the compiling process.

require('tailwindcss')('tailwind.js'),

Here is an example of my postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss')('./app/javascript/css/tailwind.js'),    
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

Import Tailwind to your Javascript Pack

You will need to import tailwind via javascript.
Create an application.css file in app/javascript/css/

I usually keep this in a folder called css, you could choose any other folder that's convenient for you inside the app/javascript directory

Add the following to your application.css file that you just created:

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

Import application.css in your app/javascript/packs/application.js file.

import  "../layouts/application.css";

Import Tailwind to your layout

Now that you have added TailwindCSS to your application pack, you will have to import it in application.html.erb to use tailwind globally in your application and make it work with Webpack.

Add the following line to app/views/layouts/application.html.erb in <head>:

<%=  stylesheet_pack_tag  'application',  media: 'all',  'data-turbolinks-track': 'reload'  %>

And that’s it!

*Instructions based on Bodhish Thomas post and tweaked to my personal usage.