DEV Community: Chuck

Using each_slice in Rails

Chuck — Sat, 23 Oct 2021 15:48:53 +0000

I wanted to take a moment to share about an approach to a problem I encounter with our application at work. I was working on a multi-step controller pattern which returned data from an external API to move through a registration process. The data did not persist into a database, but instead, was presented from JSON.

The design called for a grid of 12 cards that could be paginated, searched, and selected. For instance if we have 32 cards, on multiple pages, we needed to be able to select all the cards, and on submit, persist 32 cards to the next controller action with an array of data. After reviewing the specification, we decided to use DataTables, which we have already used throughout this Rails 5 application.

The problem: How do you populate a card view into a HTML table? DataTables will read a table, add pagination and search automatically but does not work with a CSS Grid Card view.

TLTR: Just go grab the source code if you prefer.

Base application

So, I have created a base Rails 6 application to start with set up with Webpacker, Bootstrap5, and I have added jQuery for DataTables. I have created a single resource called Player, with the attribute of name, used faker to populate the database with thirty instances, and displayed in a card view on the index action.

Set up Datatables

We are going to set up DataTables just so we can see the results. You can go to the DataTables Download page to confirm which package you will need. In my case, I am using the package which uses Bootstrap5.

yarn add datatables.net-bs5

Next set up a file to configure. I just placed in my packs directory: app/javascript/packs/player-datatables.js, and do not forget to import from application.js: import "./player-datatables.js".

To set up, call like so in player-datatables.js:

require('datatables.net-bs5');

$(document).ready( function () {
    $('#players').DataTable(); // players ID for our table
} );

However, I want to make a few configuration changes.

Set the pagination parameter of 4 rows
Do not show the rows filter select and label
Hide the search box label
Add a placeholder into the search box
Inject some CSS classes for the search box styling

require('datatables.net-bs5');

$(document).ready( function () {
    $('#players').DataTable({ 
        "pageLength": 4,        // set rows for pagination
        "bInfo": false,         // Hide show columns select
        "bLengthChange": false,  // Hide bInfo 1 of n shown
        "oLanguage": {
            "sSearch": "",
            "sSearchPlaceholder": "Search players..."
        }
    });
    // Add classes to search box
    $('#players_filter').addClass('d-flex justify-content-end me-3') 
} );

DataTables will look for a table with the ID of players, use the table rows to populate the data, and do its magic. The table must have column headings for each column, but we can kind of fake it like I have done here:

<table id="players">
  <thead class="d-none">
    <tr>
      <td>Player</td>
      <td>Player</td>
      <td>Player</td>
    </tr>
  </thead>
<tbody></tbody>
</table>

Now we have an empty table populating on the index view.

Logic of iteration

Let's look at the logic of iterating over a collection to populate a view. Iterating normally would look something like this using each:

  <tbody>
    <% @players.each do |player| %>
      <tr>
        <td><%= player.title %></td>
      </tr>
    <% end %>
  </tbody>
</table>

However, we are trying to replicate a card grid into a table, which means that we want to force only three columns, then move to the next row, using the same data in each table cell. The above loop will place our entire collection into one column.

There might be other solutions, maybe using each_with_index and evaluating the index with modulus, although this did not work for me.

First let me say, I love Ruby, which had the perfect method for this use case: each_slice, which will iterate the given block for each slice of a number of specified elements. If no block is given, it will return an enumerator.

Notice this example:

irb(main):009:0> (1..10).each_slice(3) { |a| p a }
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
[10]
=> nil

each_slice return arrays with the number of elements specified (3), and then an array of the remainder elements.

Solution

So, to start building our view with each_slice, the <tbody> section will start as so:

<tbody>
    <% @players.each_slice(3) do |player| %>
      <tr role="row">
        ...
      </tr>
    <% end %>
  </tbody>

Now, remember, each_slice returns an array, so player is an array, not an instance, in which will will need to iterate:

<tbody>
    <% @players.each_slice(3) do |player| %>
      <tr role="row">
        <% player.each do |p| %>
          <%= render partial: "players/player", locals: { p: p } %>
        <% end %>
      </tr>
    <% end %>
  </tbody>

This seems like we are finished, but remember if we do have a remainder array returned from each_slice, we have not addressed these. In fact, DataTable will crash. See console output:

The reason: DataTables expect correctly formatted table markup. The browser is more forgiving, and will display the table. However, all the DataTables features will not be present (i.e. search, pagination). If there are remainders, there is no <td></td> tags for those cells. Luckily, Ruby can help us real easily to check if there are any remainder in player:

<tbody>
    <% @players.each_slice(3) do |player| %>
      <tr role="row">
        <% player.each do |p| %>
          <%= render partial: "players/player", locals: { p: p } %>
        <% end %>
        <% (3 - player.length).times do %> // calc remainders
          <td></td>
        <% end %>
      </tr>
    <% end %>
  </tbody>

Conclusion

So, what have we learned? First, Ruby is beautiful, but beyond the obvious, we have learned about each_slice. This is a method you may not use everyday, but with this example you have seen a least one use case. Be sure to leave a comment or hit me up on Twitter, and I hope you have enjoyed.

Learning Rails

Chuck — Thu, 11 Mar 2021 22:07:50 +0000

So, I decided to write this article to share a few resources I have used over the last twenty months of learning Ruby and Ruby on Rails in the hopes it may help others. Also, I am writing to share a little of my story.

I have always loved web technologies and am a self-taught developer, which started as a hobby. Initially, I build my first website with HTML 3.2 because my business needed a website. For fun, I eventually, I supported many area non-profits by building WordPress sites for many years. However, two years ago, something changes, I had a desire to learn more and transition to a professional career.

In August 2019, I started at Flatiron School and fell in love with the entire Ruby eco-system: Ruby, Sinatra, and especially Ruby on Rails. I have a thirst and drive to be better tomorrow than I am today, so these resources reflect that desire.

Free Resources

Gorails - this course is by Chris Oliver of GoRails, creator of JumpstartPro and Hatchbox. This is a new free course for beginners , and is a great place to begin, watch, and code along.

Rails Code Along - Steve Polito's course is a little different. This course bridges the gap between building side-projects, to a full production application. It follows full Test Driven Development with a Continuous Integration workflow. If you have been coding Rails for a little while, this will really way to step up your game.

Rails Guides - Yes, the Rails Guides. Rails documentation is actually quite good. Any sharp developer needs to learn to read the documentation.

Other I have not used:

OdinProject - a lot of Rails developers started with Odin Project, I just never have.

Web-Crunch - Andy Leverenz has a multi-part Rails series that I understand is quite good.

Commercial Resources

Rails Tutorial - the Rails Tutorial, by Michael Hartl, has been the definitive standard for learning Rails for years. It is on longer free, so it is listed in the Commercial section, but it is worth the cost of admission. Even if you only purchase the Book, it is a great resource. I finished this tutorial while learning Rails at Flatiron, and I am continually referencing the book, or the finished application. It covers User accounts (not Devise), relationship models, and all with TDD using minitest.

Professional Rails Code Along - this Udemy course takes a unique approach of mimicking a Professional Production application, designed to meet the clients' expectations. It includes an Administration Dashboard to manager users and resources, and full Test Driven Development. Now, the tutorials are dated as they are built with Rails 4.2.6. So, I decided to build with the latest Rails and Ruby versions. When I hit a roadblock, I stop, worked through the problems, and documented the results.

Ruby on Rails 5 - BDD, RSpec and Capybara - a full TDD course by Mashrur Hossain and Emmanuel Asante. Again, a little dated (Rails 5.1), so as before I decided to build with the latest Rails and Ruby versions.

Andrea Fomera - Andrea's courses are top notch. She has a Rails course that touches on User accounts, relationships, and Javascript reactive rendering, just to name a few topics. There is also a new pre-released course Learn Hotwire by Building a Forum that I am doing right now that covers reactivity of Hotwire and is excellent.

Jason Charnes - offers a great course called Interactive Rails with StimulusReflex which I highly recommend, which teaches Stimulus Reflex.

Books

Books I have read and/or reading that I have found beneficial

Confident Ruby by Avdi Grimm
Metaprogramming Ruby by Paola Perrotta
Practical Object-Oriented Design by Sandi Metz

Communities

Being in a community of developers has been vital to my personal growth:

VirtualCoffee - Virtual Coffee is a laid-back conversation with developers twice a week. It's the conversation that keeps going in slack. It's the online events that support developers at all stages of the journey. It's the place you go to make friends.
GoRails - a community of Rails developers, learning Ruby on Rails to build their ideas, products, and businesses.
Local and virtual Ruby Meetups
Rails and StimulusReflex Discord

Workflow

When I first graduated from Flatiron, in February 2020, I was pulled in
a lot of directions, mostly influenced by the amount of job posting I was
reading. I spent time learning more about Redux, a lot of time learning Vue,
which I loved, and time learning the basics of Python, which I have a
desire to fully learn. Eventually I spent some time considering exactly what I wanted to do with my development career - I LOVE RAILS, so I redoubled my efforts to just Rails.

It was important for me to develop a routine, a routine that was missing since Bootcamp.

My daily routine is the same each day:

In my office at 6am everyday
Catch up on emails, and follow up on potential Ruby/Rails job openings
Network on Twitter, LinkedIn, and the Slack communities I am a member
Then, pay attention to this part, I code eight hours a day, committing and pushing code to a repository, running continuous integration, and sometimes deploying.

That's right I work as if I already had the job I am searching. It is important to develop skills and the muscle memory of developing.

The second routine I have developed is to make notes. If I have worked through a problem, in a tutorial or side project, I document in a Notions workbook. There is no reason to do the same task of discovery all over again.

It is fine to study, learn, listen to others, follow tutorials, but you just have to build stuff. It is the task of build were you learn to work through problems, and solve tasks.

So, What now.

I have been searching for my first full-time Rails position for thirteen months. During this time I have met a lot of wonderful developers, I have sharpened my skills, and with a strong passion and desire to be better tomorrow than I am today, I continue to code. Why?

I am a Rails Developer. Even though I am still searching for that first position, I am a Rails developer and therefore I code.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Shameless Plug: If you work at a great company, and you are in the market for a Software Developer with a varied skill set and life experiences, and strives to be better tomorrow than I am today, send me a message on Twitter and check out my LinkedIn.

Credit: Localhost SSL

Set Up Rbenv Revisited

Chuck — Thu, 04 Mar 2021 14:49:26 +0000

I have been working on setting up a new operating system distribution. I took some time to test out a different package manager, but ended up going back to my familiar toolset. This article will talk about package manager to manage Ruby version.

Package Managers

So what is a package manager?

A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer's operating system consistently.

They give you the ability to manage multiple versions of the same packages (i.e. Node.js, Ruby, etc.).

When it comes to Ruby, there are three major package managers to consider.

RVM - When I first started learning Ruby almost two years ago, and set up my MacBook Pro, I started with RVM. It worked fine, and I had no real issues. However, it seemed heavy, computer resource wise.

ASDF - this is a different package manager as it is language agnostic. You can install a plugin for the respect language (i.e. Ruby, nodejs, etc.). I recently tried this one, but have returned to rbenv, just because I prefer it and the Node package manger I use.

RBENV - this is my preference, and the focus of this article. A major pull of rbenv for me is that it's lighter, and by that I mean that it doesn't have to throw as many hooks into your computer system as rvm, although there is some load to the terminal. This is the exact same reason I prefer N to manage Node versus NVM, because there is ZERO terminal load. This may be the source of another article.

Enter the Clones

So, Homebrew offers a rbenv package install, and Ubuntu does as well. I have used both, but I prefer to have more control, so I just clone the repositories.
To set up RBENV there is the default way:

Clone rbenv to .rbenv
Clone rbenv-build to .rbenv/plugins
Set up .rbenv/bin in your $PATH
Set up .rbenv/bin/rbenv init in your shell
Restart shell
Run rbenv-doctor script to verify installation

There is thankfully an easier install script. This script installs or updates rbenv on your system. If Homebrew is detected, installation will proceed using brew install/upgrade. Otherwise, rbenv is installed under ~/.rbenv. Additionally, ruby-build is also installed if rbenv install is not already available. After the installation, a separate rbenv-doctor script is run to verify the success of the installation and to detect common issues.

# with curl
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer | bash

# alternatively, with wget
wget -q https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer -O- | bash

Default Gems

There in one rbenv plugin which I prefer to set up and that is rbenv-default-gems. This plugin will manage installing a select set of gems whenever you update your version of ruby. Install the plugin:

git clone https://github.com/rbenv/rbenv-default-gems.git $(rbenv root)/plugins/rbenv-default-gems

Create a simple text file: touch ~/.rbenv/default-gems. In this file create your link of preferred gems to install/update:

bundler
rails

Now install your ruby version: rbenv install 3.0.0

Updating

When new versions of Ruby are releases it is important to update rbenv. There are two ways to do this. Since, you have literally cloned the repository, you can git pull, but there are two directories to do that in:

cd ~/.rbenv
git pull

And for ruby-build

cd ~/.rbenv/plugins/ruby-build
git pull

Check on Ruby versions to install:

# list latest stable versions:
$ rbenv install -l

# list all local versions:
$ rbenv install -L

# install a Ruby version:
$ rbenv install 2.7.2

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Shameless Plug: If you work at a great company, and you are in the market for a Software Developer with a varied skill set and life experiences, send me a message on Twitter and check out my LinkedIn.

Devise Profile Usernames

Chuck — Wed, 03 Feb 2021 13:10:04 +0000

I have worked on several projects recently with user accounts managed by Devise, and I have been working at changing the way user profile URL's are set up and presented to the user. In this article I will address this task and use a few of my recent favorite gems.

TLTR: If you just want the code go grab it, and post questions or responses if you like.

Goals

Here are the project parameters:

Set up user accounts with Devise
Set up an URL for a User's profile page as: /users/:username
Generate a unique username which is not requested on the sign-up form

name_of_person - We will use the name_of_person gem by Basecamp. This gem creates a pseudo-field for full name (requires first_name and last_name in the User table). It has many other abstractions, but this is the only feature we will use.

friendly_id - We will use the friendly_id gem, which created slugs that we can map to a predetermined route. This is a method you can use throughout an application, not just with the User models.

Basic set up

We will start by setting up a basic Rails app: rails new awesome_app, and set up a static controller for a home route: rails g controller static home.

Configure the routes to load the basic home.html.erb, in config/routes.rb:

Rails.application.routes.draw do

  root "static#home"

end

Add to follow to the application.html.erb, to add a rudimentary navbar we can use later:

<!DOCTYPE html>
<html>
<head>
  <title>ArticleDeviseUsernames</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<div style="margin-top: 20px">
  <% if user_signed_in? %>
    <%= link_to "User Profile", user_path(current_user.slug) %>
    <%= link_to "Logout", destroy_user_session_path(current_user.slug), method: :delete %>
  <% else %>
    <%= link_to "Log in", new_user_session_path %>
  <% end %>
  <%= yield %>

</div>
</body>
</html>

Set up Devise

Add the Devise gem to the Gemfile and bundle install, then install Devise: rails generate devise:install. You will need to add to config/environments/development.rb the following line:

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

We are going to generate a devise User model: rails generate devise User.

To use name_of_person gem, we need to add two columns to the created Devise migration. Add first_name and last_name somewhere within the database migration, then migrate with rails db:migrate:

class DeviseCreateUsers < ActiveRecord::Migration[6.1]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ...

      t.string :first_name
      t.string :last_name

      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

Devise will automatically add the appropriate routes, but it always a good idea to check, so make sure that in config/routes.rb the route is found: devise_for: users.

Add to the User model to use the name_of_person gem, by adding has_person_name:

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_person_name
end

This is the basic configure for the gem, but we are going to have to tell Devise to allow the new name field. So, in app/controllers/application_controller.rb add the following:

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end
end

We will need to add the name field to the sign-in and sign-up forms, so we need to generate the views: rails generate devise:views. In app/views/devise/registrations/new.html.erb, .../registrations/edit.html.erb, and .../sessions/new.html.erb add the following for the name field:

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: false, autocomplete: "email" %>
  </div>

  ...

Almost there ... We need to create a page to contain the User Profile, so we need to create a User controller:

rails g controller User show

Edit controller:

class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
  end

end

Lastly, update the routes, so for the route to the profile page:

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show]

  root "static#home"

end

All done with Devise. You can restart your rails server, open the development site, and create a User Account. When you are redirected to the root_path, click the "User Profile" link in the navbar. You will be redirected to a path, something like http://localhost:3000/users/1. This is not the goal, so lets move on.

Friendly ID

Add the friendly_id gem to the Gemfile and bundle install, then create a migration:

rails g migration AddSlugToUsers slug:uniq

This will create a unique slug. In our case we are going to use the first and last name fields, and it will create a unique username. So in my case /users/chuck-smith. If this is not unique, maybe there is another "Chuck Smith" in the user table, it will make it unique: /users/chuck-s.

Next we need to generate friendly_id: rails generate friendly_id, and migrate the database: rails db:migrate.

We use Friendly_Id by extending the User model, and define the :name column, from name_of_person as the slug field:

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_person_name

  extend FriendlyId
  friendly_id :name, use: :slugged
end

Now, edit the show action in the UsersController to use the :slug param from Friendly:

class UsersController < ApplicationController

  def show
    @user = User.friendly.find(params[:slug])
  end

end

Lastly, update the routes, for the new param:

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show], param: :slug

  root "static#home"

end

If you already have Users created, from the rails console execute: User.find_each(&:save), which will update the new slug column.

Now, where you log in and browse to your User Profile the URL is friendlier (forgive the pun): /users/chuck-smith.

One additional optional configuration. If you want to change the user profile path you can edit the routes file:

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show], param: :slug, path: ""

  root "static#home"

end

Notice I have added a path key to the :users resource which is empty. So, now if you browse to the user profile page the path will be (in this example): /chuck-smith.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Dev Environment SSL

Chuck — Tue, 02 Feb 2021 16:56:02 +0000

Have you ever wanted to set up SSL for localhost development on your computer? No? Honestly, as hard as this can be at times, me neither. What changed? Recently, I have been working on a Rails contract project, and the project was set up using SSL. I needed to set up SSL on my Linux computer, so I could collaborate on the project.

Why you may need SSL in development? Check this tweet to find the answer.

So there is one solution Puma-dev, however, even though there is Linux support, the solution and set up never worked for me.

Solution

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt

You will be provided with some information fields to fill in about country key, email, etc. However, you can skip this step. This command will create two new files localhost.key and localhost.crt in the current directory. You can move these files anywhere.

Rails Server and Webpack

Open in your browser: ssl://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt. Make sure the certificate and key location is correct in the URL string.

You cannot use the standard rails server as this defaults to http://localhost:3000. Instead, use the following command:

rails s -b 'ssl://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt'

Make sure the certificate and key location is correct in the URL string.

FYI: you will have to accept the certificate in your browser the first time you open the URL.

I have included in a ZSH alias, which is much easier to remember:

alias rss="rails s -b 'ssl://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt'"

What about Webpack, which I like to start in a separate terminal window? It is actually not that hard and is documented on the repository for webpack: Webpack SSL. Basiclly, we have to enable https in config/webpacker.yml, start webpacker like normal and accept the certificate.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Credit: Localhost SSL

Rails Basic Template

Chuck — Fri, 15 Jan 2021 18:57:00 +0000

There is no need for developers to walking the same path, performing the same tasks at the beginning of any project, over and over again. That is what this series of articles has been about, streamlining our workflow.

I have writing about create templates for Rails before, but quite frankly, I have learned so much about Rails over the last six months, as I sharpen my skills while searching for a position, it bears touching this topic again.

Rails Boilerplate

Chuck ・ Jul 8 '20

#rails #ruby #webdev #tutorials

This is a default/basic template:

RSpec
Code Quality with Rubocop
Code Coverage
Configure Rails generators
Static routes
No styling (this varies per project)
No user accounts

TLTR: The Rails template is hosted in this Repository

The template design uses a modular design, so it is easy to maintain and turn off features if I desire. I am going to step through a few of the methods to explain my set up:

Setup Additional Gems

The first method adds new gem requirements to the 'Gemfile'. This does not install them, it only prepares for the installation. Most of these gems are to set up my testing, code quality, and code coverage norms I prefer.

def add_gems
  # Rexml is required for Ruby 3
  gem "rexml" 

  gem_group :development, :test do
    gem "capybara", ">= 2.15"
    gem "database_cleaner"
    gem "factory_bot_rails", git: "http://github.com/thoughtbot/factory_bot_rails"
    gem "rspec-rails"
  end

  gem_group :development do
    gem "fuubar"
    gem "guard"
    gem "guard-rspec"
    gem "rubocop"
    gem "rubocop-rails", require: false
    gem "rubocop-rspec"
  end

  gem_group :test do
    gem "simplecov", require: false
  end

end

I have written on this topic before, and you can read more in my previous article: Rails testing Setup

Rails Testing Setup

Chuck ・ Aug 27 '20

#rails #testing #ruby

Static Routes

This method sets up a static route controller with a view for a home route. This is a mounting point for any static routes the project may have:

def add_static
  generate "controller static home"

  route "root to: 'static#home'"
end

Copy Additional Files

We can stop here with one configuration file. However, we can also setup some files to copy for a more complete configuration:

def copy_templates
  remove_dir "spec"

  copy_file "Guardfile"
  copy_file ".rspec", force: true
  copy_file ".rubocop.yml"
  copy_file ".simplecov"

  directory "config", force: true
  directory "lib", force: true
  directory "spec", force: true
end

We are copying four files which are specifically for testing, code quality, and code coverage.

Whenever I use rails generators, I prefer to not create a lot of extra files I am not going to use, like stylesheets, helpers, and spec files. If I choose to use any of these resources, I would rather manually create them. So, I configure the generators in config/application.rb, and copy the config directory:

config.generators do |g|
  g.stylesheets false
  g.helper nil
  g.test_framework nil
end

Lastly, I remove the generated spec directory and copy a new one that includes the configuration I need, and one feature spec to test the static route.

Config File

To use the new template, you need to set up a .railsrc dotfile, in the users' path, in your $HOME directory. When you use the rails new command will inject commands to the command line silently. So my simple .railsrc file:

--database=postgresql --database=postgresql -T -m /path/to/template.rb

I can start a new project: rails new cool_app and silently the postgresql flag is added, no default testing framework is installed, and the custom setup installation process begins.

Remember to check out the complete Rail's template hosted in the Repository

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Rails Image Helper

Chuck — Tue, 12 Jan 2021 16:27:18 +0000

Often times when developing application, the developer may need to include logic to conditionally render UI elements. For instance, maybe an active CSS class in the navbar menu-item for the current page. Sometimes the required logic is more complex. In my case I needed to provide a fallback image when an image was not available from the API. In this article I will show the methodology I used to create a Rails Helper to meet this goal.

Structure

On my side project Your Congress, I am using a free GitHub repository, UnitedStates/Images which stores all the photographs of serving Congress members. The images are accessible through an API served from GitHub pages, by images size and member ID. So, the image URL will be configured like so: https://theunitedstates.io/images/congress/[size]/[member_id].jpg.

The image is rendered in the ERB partial:

image_tag "https://theunitedstates.io/images/congress/225x275/#{senator.member_id}.jpg"

Problem

The existing code works fine, but as new members have been added to the US Congress, the available images are not currently available for the new members. When the image is not available, the browser developer console logs a 404 status code, and the UI displays a broken image, thereby breaking the card layout. So, there needs to be a better way to access these images, and check for availability.

The goals:

Check for a success code when accessing the image, and render this image.
Check for unsuccessful access of an image and render a fallback image to preserve the UI layout.

This is too much complexity for the ERB partial, so to DRY out this process we will create a Rails Helper.

Solution

What are helpers in Rails? A helper is a method that is (mostly) used in your Rails views to share reusable code.
RubyGuides

We are creating a new helper in app/helpers called bio_image_helper.rb. The basic structure of the helper is to create a module and then within the module, a method we will call within our view. We are going to define the URI string in a variable and pass in the member_id in an argument called member. So the basic structure:

module BioImageHelper

  def bioimage_helper(member)
    img_url = "https://theunitedstates.io/images/congress/225x275/#{member}.jpg"
    res = Net::HTTP.get_response(URI.parse(img_url.to_s))

    res.is_a?(Net::HTTPSuccess) ? img_url : 'backup.png'
  end

end

Remember the second goal was to validate the success of the image response, and offer a fallback image. We will use two libraries to meet these objectives: net/http and uri. With these, we will store to a variable (res) the response object and parse the img_url string. Then use a Ruby ternary to check the response object for an HTTPSuccess, and use the image, or our fallback image.

require 'net/http'
require 'uri'

module BioImageHelper

  def bioimage_helper(member)
    img_url = "https://theunitedstates.io/images/congress/225x275/#{member}.jpg"
    res = Net::HTTP.get_response(URI.parse(img_url.to_s))

    res.is_a?(Net::HTTPSuccess) ? img_url : 'backup.png'
  end

end

So, the image_tag in the partial now is abstracted to:

image_tag bioimage_helper(senator.member_id)

Thanks

Special thanks to the users on the Ruby on Rails Discord Server who pointed me in the right direction, with feedback, and code review.

Also, the Stack Overflow discussion which helped the most.

Footer

This has been fun. Leave a comment or send me a DM on Twitter.

Shameless Plug: If you work at a great company and you are in the market for a Software Developer with a varied skill set and life experiences, send me a message on Twitter and check out my LinkedIn.

Rails Search Bar

Chuck — Sun, 18 Oct 2020 21:56:01 +0000

A search bar is an especial feature as a web application grows. There are several ways to implement this feature in a Rails application. This article will explore one of these, by searching a Postgres database with the pg_search gem.

Install pg_search

In a smaller application you can query the database using ActiveRecord, a simple way to prototype search and filtering. It allows you to quickly find related records for databases of fewer than 1000 records, but, as your database grows, ActiveRecord queries can get overly complex and make your app lag.

Install the gem as usual. Add gem pg_search to your Gemfile and bundle install.

There are two basic search configurations with pg_search, a Single Model search scope or a multi Model configuration. In my case I am only using the Single Model configuration, but you can read more about multi-search in the documentation.

I am using my Rails Your Congress as an example, and I am setting up a search bar on the Senator's search page.

Model

To start using pg_search, you need to include PgSearch in your model and set up the pg_search_scope:

class Senator < ApplicationRecord
  include PgSearch

  scope :sorted, ->{ order(last_name: :asc) }

  pg_search_scope :global_search,
                  against: [:first_name, :last_name, :state],
                  using: { tsearch: { prefix: true } }
end

In this example, I am searching from the Senator resource, by first_name, last_name, and state.

Controller

Since, I am providing a search on the index page, the index method in the Senators controller:

class SenatorsController < ApplicationController

  def index
    if params[:query].present?
      @senator_search = Senator.global_search(params[:query])
      @senators = @senator_search.paginate(page: params[:page], per_page: 20)
    else
      @senators = Senator.paginate(page: params[:page], per_page: 20)
    end

    respond_to do |format|
      format.html
      format.json { render json: { senators: @senators } }
    end
  end

In this method, we set a conditional to determine if we are searching or not. If we are searching we are setting two instance variables. The variable @senators is used in the views, and I had to set up two variables to get will_paginate to play nicely with the pg_search results.

Improvements

With each search the entire page re-renders. So next week we will look at how I set up StimulusJS to make the Senator container reactive.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Rails Multiple Seed Files

Chuck — Mon, 12 Oct 2020 12:32:19 +0000

If you have a larger Rails project, or a project with many resources, managing one database seed file can get out of hand. In the name of DRY-ing out code, this article walks you through how to abstract your seed data into multiple files.

So, the approach is to create a new directory: db/seeds, and had multiple seed files in this location. I think the best approach would be to separate your concerns in your seed files (i.e. books, posts, recipe, users etc). Create multiple seed files to manage easier each resource and place them in this new directory.

When you execute rails db:migrate, Rails will only run the file: db/seeds.rb. To fix this, we will use Ruby to parse the new directory for files. So, in the default db/seeds.rb file add the following:

Dir[File.join(Rails.root, "db", "seeds", "*.rb")].sort.each do |seed|

  puts "seeding - #{seed}. loading seeds, for real!"

  load seed
end

Now, when you run the seed command, it will parse through all of your files and print to the command line exactly which file is loading.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

New Rails Template

Chuck — Mon, 28 Sep 2020 12:40:01 +0000

In this article we take a look at a more complete Rails template, to start a new Rails project. Why? With a custom template, you can start developing your project immediately already preconfigured with the gems, packages, and settings you like to use.

Credit

The inspiration for my custom template starts with Andy Leverenz's Kickoff template. There are a few other great resources as well.

Jumpstart Chris Oliver has put together a template called Jumpstart. This template creates a Boilerplate app that includes user accounts, admin interface, and Bootstrap styling.

Jumpstart Pro Chris also has a commercial product called Jumpstart Pro that bootstraps a full featured e-commerce application setup.

Template Features

User accounts with Devise, friendly_id, and name_of_Person
Sidekiq
Testing environment with RSpec, Guard, Simplecov, and Rubocop
User Avatars using Active Storage, with a fallback image using Gravatar
Tailwind for styling
Fontawesome
Stimulus JS and tailwindcss-stimulus-components for the dropdown menu action

TL;TR: The completed repository to the finished custom rails template if you would like to jump straight to the code.

Using a Template

First let's cover the basics of using a template. The rails new command offers many command option flags, and provides a flag to use a custom template:

rails new myapp -m /path/to/my/template.rb

Rails Boilerplate

Chuck ・ Jul 8 '20

#rails #ruby #webdev #tutorials

When this command is executed, Rails will run the script, install and create the new app.

Now, to streamline this process you can create a dotfile in the root of your file system: .railsrc. Rails will look for this configuration file first. In our case this is a good start:

--database=postgresql
-T
-m /path/to/my/template.rb

So, we can start the new project: rails new myapp. Rails will use Postgres database, will not install a testing framework (more on this later), and use our template, without having to type the commands on the command line.

If at some time you wan to create a default Rails app, instead of your custom setup: rails new myapp --no-rc.

A Custom Template

If you start to look at the main template.rb in the codebase you will notice at the top of the file is a series of methods, and the business logic of calling these methods:

# Main setup
source_paths

add_gems

after_bundle do
  stop_spring
  add_testing
  add_active_storage
  add_users
  remove_app_css
  add_sidekiq
  add_foreman
  copy_templates
  add_tailwind
  add_fontawesome
  add_stimulus
  add_friendly_id
  copy_postcss_config
  add_stimulus_navbar

  # Migrate
  rails_command "db:create"
  rails_command "db:migrate"

  git :init
  git add: "."
  git commit: %Q{ -m "Initial commit" }

Basically, after the bundle install in completed the methods are executed, it creates the database, a migration is run, and then the first git commit is saved.

So, let's go over a few of the methods to show you the power of the API.

Add gems

The add_gem method does not install these gems, it only adds the gems to the Gemfile. If you examine the method you will notice we are setting up gems associated with users, setting up a testing environment, and Rubocop.

def add_gems
  gem "devise", "~> 4.7", ">= 4.7.2"
  gem "friendly_id", "~> 5.3"
  gem "image_processing"
  gem "sidekiq", "~> 6.1", ">= 6.1.1"
  gem "name_of_person", "~> 1.1", ">= 1.1.1"

  gem_group :development, :test do
    gem "database_cleaner"
    gem "factory_bot_rails", git: "http://github.com/thoughtbot/factory_bot_rails"
    gem "rspec-rails"
  end

  gem_group :development do
    gem "fuubar"
    gem "guard"
    gem "guard-rspec"
    gem "rubocop"
    gem "rubocop-rails", require: false
    gem "rubocop-rspec"
  end

  gem_group :test do
    gem 'simplecov', require: false
  end
end

NOTE: After your app is set up you will probably want to clean up your Gemfile. All the above gems and groups are added to the bottom of the Gemfile.

If you have been following my articles you know I have written about this Rails Testing Setup before:

Rails Testing Setup

Chuck ・ Aug 27 '20

#rails #testing #ruby

Testing

I noted previously, in the .railsrc file, we did not install the default Rails testing environment. In the add_testing method we are setting up Rspec.

def add_testing
  generate "rspec:install"

  directory "spec", force: true

  run "rm -r test" if Dir.exist?("test")

  copy_file "config/webpacker.yml", force: true
  copy_file ".rspec", force: true
  copy_file ".rubocop.yml"
  copy_file ".simplecov"
  copy_file "Guardfile"
end

Remember, this method will run after bundle install, so we are only configuring the gems here. Since we are using a repository, instead of just a simple template file, we can copy preconfigured files and directories:

We are copying the spec directory and force overwriting the directory in the new app.
In case the user does not have -T in the .railsrc file, we are deleting the test directory if it exists.

You can read more about the Template API at Railsguides.

Modifying Files

In the creating process we can also modify files. For instance, in the add_tailwind method:

append_to_file("app/javascript/packs/application.js", 'import "stylesheets/application"' + "\n")
  inject_into_file("./postcss.config.js",
                   "let tailwindcss = require('tailwindcss');\n", before: "module.exports")
  inject_into_file("./postcss.config.js", "\n    tailwindcss('./app/javascript/stylesheets/tailwind.config.js'),", after: "plugins: [")

In this case we can append_to_file an import. Also, we are injecting into a file at a specific point (before of after some text).

We can also inject at the end of a file a block of inserts:

inject_into_file 'app/javascript/controllers/index.js' do
<<~EOF
  // Import and register all TailwindCSS Components
  import { Dropdown, Modal, Tabs, Popover, Toggle } from "tailwindcss-stimulus-components"
  application.register('dropdown', Dropdown)
  application.register('modal', Modal)
  application.register('tabs', Tabs)
  application.register('popover', Popover)
  application.register('toggle', Toggle)
EOF
end

The Template API is fairly robust and offers a way to streamline the startup time of a new project. This is my personal setup. Clone the repository and give it a try, tweak it for your own, and if something doesn't work, open a PR.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Part 2: Rails Gravatar

Chuck — Wed, 23 Sep 2020 12:19:35 +0000

In the previous article in this series, we learned about Active Storage. We set up an interface to allow a user to add an Avatar to their user profile.

Part 1: Rails Active Storage

Chuck ・ Sep 22 '20

#rails #ruby #webdev

Part Two of this two part series, we extend this feature to use, as a fallback image, the Gravatar service.

The goal is to check if the user has an attached image. If they do not, then fall back to the image from the Gravatar service. According to the Gravatar website:

Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog

What is interesting is that if the user has not provided an Avatar image for their profile at Gravatar, then it defaults to a standard image. So, essentially it creates redundancy in our case.

TL;TR: The completed repository if you would like to jump straight to the code.

Helper method

So, we need to create a helper that we will locate in app/helpers/application_helpers.rb:

def avatar_url_for(user, opts = {})
    size = opts[:size || 32]

    if user.avatar.attached?
      user.avatar.variant(
        resize: "#{size}x#{size}!"
      )
    else
      hash = Digest::MD5.hexdigest(user.email.downcase)
      "https://secure.gravatar.com/avatar/#{hash}.png?s=#{size}"
    end
 end

the method accepts two arguments, the user and an optional option hash. This hash is where we control the image size, which defaults to 32px. The conditional logic checks for the attached avatar, uses a user selected avatar or reverts to a Gravatar, and resizes based on the options array.

Navbar

In the previous article we checked for the user's avatar like so:

<li class="nav-item">
    <%= link_to user_path(current_user.username), class: "nav-link" do %>
      <% if current_user.avatar.nil? %>
        <%= image_tag current_user.avatar.variant(resize: "24x24!"), class: "mr-1" %>
      <% end %>
      <%= current_user.username %>
    <% end %>
</li>

We can edit this code to use our helper, which includes the logic to check for an avatar. This DRY's out our view file:

<li class="nav-item">
    <%= link_to user_path(current_user.username), class: "nav-link" do %>
      <%= image_tag avatar_url_for(current_user, size: 24), class: "rounded-circle mr-1" %>
      <%= current_user.username %>
    <% end %>
</li>

So, if the user hasn't setup an avatar on Gravatar or their user profile the fallback image is used:

Edit profile

We need to update the edit.html.erb file to use the helper logic. Take a look at the complete source for this file:

<div class="row">
    <div class="col-sm-2">
      <%= image_tag avatar_url_for(current_user, size: 128), class: "rounded-circle m-4" %>
    </div>
    <div class="col-sm-10">
      <div class="form-group">
        <%= f.label :avatar %>
        <%= f.file_field :avatar %>
      </div>
    </div>
  </div>

Show profile

Finally, we need to update the edit.html.erb file to use the helper logic:

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    <%= image_tag avatar_url_for(current_user, size: 128), class: "rounded-circle mr-4" %>
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

Footnote

This has been fun. I hope you have enjoyed this short article series and it has been in some way helpful. Leave a comment or send me a DM on Twitter.

Shameless Plug: If you work at a great company and you are in the market for a Software Developer with a varied skill set and life experiences, send me a message on Twitter and check out my LinkedIn.

Part 1: Rails Active Storage

Chuck — Tue, 22 Sep 2020 14:06:37 +0000

On any web application, the ability to use images are tantamount. In a Ruby on Rails project, using Active Storage increases the flexibility to use external storage services and to seamlessly create user interaction.

In this article we will use Active Storage to allow a user to add an Avatar to their user profile. This Avatar will display on their Profile page and in the User Profile link in the Navbar.

TL;TR: The completed repository if you would like to jump straight to the code.

Setup

This is not a complete tutorial on the setup of our Rails project. Here are the basic features below. I do suggest you look at the repository.

Basic Rails project with Postgres
A controller called static for the home page, and the root route specified as static#home.
Add Bootstrap 4 using Webpacker
Add Devise with the additional registration field of username and name added to the migration
Use the gem devise-bootstrapped to preconfigure the Devise views with bootstrap styling.

Add the following Bootstrap navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container">
    <%= link_to "Active Storage", root_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ml-auto">

        <% if user_signed_in? %>
          <li class="nav-item">
            <%= link_to current_user.username, user_path(current_user.username), class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign out", root_path, class: "nav-link" %>
          </li>
        <% else %>
          <li class="nav-item active">
            <%= link_to "Log in", root_path, class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign up", root_path, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

Create a profile page for the user:

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    Avatar
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

Add the route for the profile page: resources :users, only: [:show], param: :username, path: ""

Again, this is an overview of the setup, just look at this commit for the complete beginning source.

Active Storage

Active Storage gives us the option to use different storage services. We start by configuring the development environment, by adding the following to config/environments/development.rb:

# Store files locally.
config.active_storage.service = :local

If you want to use Amazon S3 service in production, you add the following to config/environments/production.rb:

# Store files on Amazon S3.
config.active_storage.service = :amazon

Refer to the documentation for more configuration options in production.

Remember Active Storage is part of Rails, so you just need to install to configure: rails active_storage:install, then run the migration: rails db:migrate.

Active Storage uses two tables in your application’s database named active_storage_blobs and active_storage_attachments. The active_storage_attachments is a polymorphic join table that stores your model's class name.

In the Gemfile, uncomment and bundle install image_processing. This gem allows us to resize our images. Make sure to restart your rails server.

Avatar

Add to the User model: has_one_attached :avatar:

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_one_attached :avatar
end

We need to update the permitted parameter's method in the application controller for the avatar:

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:username])
    devise_parameter_sanitizer.permit(:account_update, keys: %i[avatar name username])
  end

end

Edit Profile

First, let's update the 'Edit Profile' form, so we can select an Avatar. You will find the template in app/views/devise/registrations/edit.html.erb.

We need to add name, and username to the edit form:

<div class="form-group">
    <%= f.label :username %>
    <%= f.text_field :username, autofocus: true %>
  </div>

  <div class="form-group">
    <%= f.text_field :name, autofocus: true, placeholder: "Name" %>
  </div>

We need to add a place to display the Avatar, and a form picker to select the file. This will be placed at the top of the file. Take a look at the complete source for this file:

<div class="row">
    <div class="col-sm-2">
      <% if current_user.avatar.nil? %>
        <%= image_tag f.object.avatar.variant(resize: "128x128!"), class: "rounded-circle m-4" %>
      <% end %>
    </div>
    <div class="col-sm-10">
      <div class="form-group">
        <%= f.label :avatar %>
        <%= f.file_field :avatar %>
      </div>
    </div>
  </div>

We are testing if there is an Avatar that is associated with the current user, then displaying the image by using an image_tag, resized to 128px, a feature of the image_processing gem. We are using the Bootstrap classes to display the avatar as a rounded circle.

User Profile Page

So, we need to revisit our User show.html.erb template file to include the newly selected avatar.

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    <% if current_user.avatar.nil? %>
        <%= image_tag f.object.avatar.variant(resize: "128x128!"), class: "rounded-circle m-4" %>
      <% end %>
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

This is the same code we used for the edit template. This is the result:

Navbar

Originally, I had placeholder paths in the Navbar, so we revisit to make the links workable. Also, we will include the avatar, and a check if one exist.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container">
    <%= link_to "Active Storage", root_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ml-auto">

        <% if user_signed_in? %>
          <li class="nav-item">
            <%= link_to user_path(current_user.username), class: "nav-link" do %>
              <% if current_user.avatar.nil? %>
                <%= image_tag current_user.avatar.variant(resize: "24x24!"), class: "mr-1" %>

              <% end %>
              <%= current_user.username %>
            <% end %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign out", destroy_user_session_path, method: :delete, class: "nav-link" %>
          </li>
        <% else %>
          <li class="nav-item active">
            <%= link_to "Log in", new_user_session_path, class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign up", new_user_registration_path, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

Not Perfect

So, this solution is not entirely practical. I do not like the approach where we are displaying a blank space if the avatar does not exist. In the next article we will build on this feature by using the users Gravatar as an optional or fallback image.

Footnote

This has been fun. Leave a comment or send me a DM on Twitter.

Shameless Plug: If you work at a great company and you are in the market for a Software Developer with a varied skill set and life experiences, send me a message on Twitter and check out my LinkedIn.