Turbolinks and Font Awesome 5 SVG with Javascript

Font Awesome 5 SVG icons use javascript to find <i> tags with an icon class and replaces them with an <svg> tag. Turbolinks online displays these icons on initial page load and/or refresh, however when following a link, Turbolinks reloads the page and not the icons. This guide assumes that you have already loaded font awesome into your project using your preferred method. For what its worth, this guide uses the font awesome CDN

Force Turbolinks to Re-Render the Icons

Create a new file named fontawesome-init.js in app/assets/javascripts/ and add the following code:


document.addEventListener('turbolinks:load', function(){
FontAwesome.dom.i2svg();
})

Be sure that application.js has the line //= require_tree. If not you will need to add it or add //= require fontawesome-init

Prevent layout shifting

Font Awesome 5 adds the class fontawesome-i2svg-pending to the html tags while icons are being rendered. This can cause the layout to be constantly resized and shifted as the icons are being rendered. We can prevent this by hiding the body tag until the icons are rendered and the class has been removed.



Add the following to your css:


.fontawesome-i2svg-pending body {
display: none;
}

guide
Assuming that you have Rails and PostgreSQL already installed on your workstation, follow the steps for a new or existing Ruby on Rails app according to your needs. more
guide
The ability to like or favorite posts is very common on websites. This guide will show you how to add this functionality to your Rails 5 application without adding unnecessary bloat from gems. This guide assumes that you have already implemented posts (or similar) and users to your application and will not cover these steps. Let's go over some design considerations before we begin. While everyone can view a post, only authenticated users can like posts by clicking a link or icon.  We're keeping it positive by just tracking likes.more
guide
Problem: Ransack will only search for one keyword or phrase such as, "Jumpity Jump", without quotations. Using quotations or commas such as in "Jumpity Jump" or, "Jumpity, Jump" (with or without quotations). returns a blank result. Test conditions: Randomly selected records were edited to include varied words/phrases in searched fields, such as in the following examples: jump jumpity jump jimpity jump jump rabbit jumpity jumpity rabbit Solution: Custom predicates added to initializer based on Stack Overflow answer linked at end.more
guide
Basic steps to create a new app using Rails API with a React frontend, then deploy on Heroku.
guide
Recently, while creating a subscription checkout form using Stripe Elements, I wanted to list the plans along wth their pricing and details. The form uses a collection input to list the plans as radio buttons, but the methods in this guide should work for checkboxes and selects.  Here is the input statement that we are working with for starters: <%= f.input :plan_id,   collection: Plan.published, as: :radio_buttons %> Currently, this will display the following label and radio buttons (Note that this label is provided using I18n): Please select your plan: ○ plan 1 ○ plan 2 I already have text with instructions...more
guide
For use with trusted/cleaned data. Add to application.rb def truncate_and_link(text,options ={}) length = options[:length] return text if length.blank? url = options[:url] || '#' output = raw text.truncate_words(length) output += link_to('more', url) if text.size > length output.html_safe end Adapted from: http://itiansrock.blogspot.com/2013/01/truncate-and-link-text-helper-in-rails.htmlmore