Rails Code Along

Rails Ruby Testing

So I am always looking for ways to improve my skills in Ruby on Rails. As I look for my first professional dev job, after years as a hobbyist, I have to say, Rails would be my dream job. I have been working more recently with RSpec TDD/BDD development and learning proper methodology.

TLTR: Hey, grab the code

Basic Course Description

I recently started a Udemy course by Jordan Hudgens called Professional Rails Code Along. The course structure is to develop a client-side enterprise application using TDD. The course is three years old and a little dated as it uses Rails 5 and Bootstrap 3, but it is still a very solid course.

I decided to update the application along the way. So, the first upgrade was to use the latest Rails release (v. 6.0.3.2) and utilize Webpacker as much as feasibly possible. So the first two enhancements I made:

  • Rails 6 with Postgres
  • Bootstrap 4.5.2 using Webpacker. Honestly, it is too easy not to use the Railsbytes Template. With one command, you are set up:
rails app:template LOCATION='https://railsbytes.com/script/x9Qsqx'`

Enhance Development Environment

Also, as I proceeded, I wanted a more robust developer's experience.

Additional enhancements to the development environment

  • Guard for automated testing
  • Fuubar for a reporter progress bar
  • Simplecov for code coverage reports
  • Rubocop for code consistency

Read more about this setup in a previous article about Rails Testing Setup

Gritter Notifications

The default tutorial uses the Gritter gem to implement Growl pop-up notifications in the application, which uses a jQuery plugin called gritter. So, I wanted to use Webpacker. Luckily, Mbonu Blessing has written a wonderful tutorial on Using Gritter in Rails 6. The only change I made to this tutorial was to the styling. I had difficulty using the default styling in the Yarn package, and I did not want to reinvent the CSS and images. The simple fix for me was to use a CDN of the gritter styling. I added the following to app/views/layouts/application.html.erb in the headsection:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.gritter/1.7.4/css/jquery.gritter.css">

It worked perfectly.

I know this is a shorter article, but I am just starting. Pay attention as I document the journey through this tutorial and the enhancements along the way.