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(){

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;

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
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
Strings can be split using three built-in functions: Split() is a method that splits a String object into an array Reverse() is a method that reverses the array Join() is a method that joins an array into a string function reverseString(str) { return str.split("").reverse().join(""); } reverseString("hello"); more
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
Basic steps to create a new app using Rails API with a React frontend, then deploy on Heroku.
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