Rails Code Along

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

TLTR: Hey, just go grab the code

Basic Course Description

I have started recently a Udemy course by Jordan Hudgens, called Professional Rails Code Along. The structure of the course is to develop a client enterprise application, using TDD. The course is three years old and a little dated as it uses Rails 5 and Bootstrap 3, but 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 is use the Railsbytes Template. With one command you are setup:

rails app:template LOCATION='https://railsbytes.com/script/x9Qsqx'`

Enhance Development Environment

Also as I proceeded I wanted a more robust developers experience.

Additional enhancements to 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 utilize Webpacker, luckily Mbonu Blessing has written a wonderful tutorial on Using Gritter in Rails 6. The only change I made to this tutorial was with regards to 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 my 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.

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.