DEV Community: Steve Alex

Rails 8 Basic Auth - Missing Pieces

Steve Alex — Thu, 20 Mar 2025 01:26:05 +0000

I've spend a good deal of time with Rails Basic Authentication scaffold. I think I installed it on a new app in late January and have spent way to much time trying to figure it out. While I've used Rails since v 0.9, I'm just a hobbyist and not very good or fast.

I did write a post a few weeks back on the same subject. Rails Basic Authorization (after Basic Authentication)

Rails Basic Authorization (after Basic Authentication) that was my first attempt at using it. I think the scaffold came out late last year. There is quit a bit written about it. I'll just add a little more to that.

One thing missing was Session Expiry - mentioned in several posts. Leaving a page open just didn't seem right.

I added it! But to took me a while before I figured out I was just going in circles. Spent a lot of time trying to figure out how to terminate a session. I didn't realize that it was simple as terminate_session. I though the methods in authentication.rb were private! There not!

I added 6 lines to authentication.rb. My demo app is a Blog type app that has a public view and a private view. Private being adding articals and a few other thing. Public - just to read the articles. I had a problem that if I was in the public view, I would just sign-in again (with a login_path I added). That would generate a new Session and would orphan the last one. To get rid of that I added 6 lines to authentication.rb:

def start_new_session_for(user)
  # klude to stop dual logins using login
  has_session = Session.find_by(user_id: user.id) # should be 0 or 1
  if has_session
    Current.session = has_session
    cookies.signed.permanent[:session_id] = { value: Current.session.id, httponly: true, same_site: :lax }
  else
    user.sessions.create!(user_agent: request.user_agent, ip_address: request.remote_ip).tap do |session|
      Current.session = session
      cookies.signed.permanent[:session_id] = { value: session.id, httponly: true, same_site: :lax }
    end
  end
end

For the missing piece - session_expiry - I added 12 lines to the application_controller.rb.

class ApplicationController < ActionController::Base
  include Authentication
  allow_browser versions: :modern
  before_action :session_expiry

    def session_expiry
    if Current.session
      key = "#{Current.session.id}_expires_at"
      if session[key].present? && session[key] < Time.now
        terminate_session
        reset_session
        redirect_to root_path #, flash: {alert: "Your session has expired!"}
      else
        session[key] = Time.now + 2.hours
      end
    end
  end

EDIT: Had to add the session.id to the :expires_at attribute. The original was global and not tied to the session.

I have some versions in other/older apps that session_expiry is twice a long and convoluted! This is kinda simple. Just set a session attribute!

That's it. Just a short piece on missing pieces!

Rails Basic Authorization (after Basic Authentication)

Steve Alex — Fri, 07 Mar 2025 23:26:18 +0000

Hi! The hobby developer is back.

I've been doing RoR since version 0.9. I have a few semi-private apps deployed and try to keep up with versions.

When DHH released the Basic Authentication Scaffold I played with it and got it working. It did bother me that there is stuff in there that I have no idea on what it does. Like:

 def start_new_session_for(user)
  user.sessions.create!(user_agent: request.user_agent, ip_address: request.remote_ip).tap do |session|
  Current.session = session
    cookies.signed.permanent[:session_id] = { value: session.id, httponly: true, same_site: :lax }
  end
end

Have no idea what .tap does. Anyhow it works! Now on to a new challenge - Authorization.

I only have one app that has some form of role based Authorization. It's a golf group management app. It just kept track of groups, players, points, quotas etc. Kinda like a Handicap. I have several groups that use it. Each group has a user/manager that can do anything and a few that can do most things - form team - score teams etc. It turned out that they just share the User account and have two or three players that can do anything!

I think I tried Devise but didn't like the pain. Later tried CanCan and then CanCanCan. It was ok, but then I rolled my own. Didn't have much to do so I spent the last week rolling another version! I forgot to say that I just turned 80 and don't have much to do. Just though I'd share it.

Much like CanCanCan it has an Ability scheme that defines who can do what. In mine it's just a Constant wrapped in a class.

class Can
  CRUD = {
    super:{
      group:'1111',
      user:'1111',
      player:'1111',
      game:'1111',
      round:'1111',
      article:'1111'
    },
    manager:{
      group:'0110',
      user:'1111',
      player:'1111',
      game:'1111',
      round:'1111'
    },
    trustee:{
      group:'0100',
      user:'0110',
      player:'0110',
      game:'0110',
      round:'0110',
    },
    ... other roles
  }
  def self.can(role)
    # called from User model - returns user roles 
    cans = CRUD[role.downcase.to_sym]
  end
  ... some other utilities
end

The CRUD hash defines what Roles are used and what CRUD action each model implements. Each model defines a 4 character string of 0's or 1's - which equates to True or False. The manager role above: cannot Create or Destroy a Group, only Read or Update a group. Kind of simple .

Every thing is controlled from the User model:

 class User < ApplicationRecord
  has_secure_password
  has_many :sessions, dependent: :destroy
  normalizes :email_address, with: ->(e) { e.strip.downcase }

  attribute :permits
  after_initialize :set_attributes

  def set_attributes
    self.permits = Can.can(self.role) unless self.role.blank?
  end

  def can?(action,model)
    return false if self.role.nil? || self.permits.nil?
    action = action.to_s.downcase
    model = model.to_s.downcase
    permit = permits[model.to_sym]
    return false if permit.nil? 

    if ['create','new'].include?(action)
      return permit[0] == '1'
    elsif ['index','show','read'].include?(action)
      return permit[1] == '1'
    elsif ['edit','update'].include?(action)
      return permit[2] == '1'
    elsif ['delete','destroy'].include?(action)
      return permit[3] == '1'
    else
      return false
    end
  end

end

The User model has an attribute:permits defined and set after_initialize by calling set_attributes.

set_attributes extracts the CRUD hash for the User's role and stuffs it into the permits attribute. It is there for the duration of the Session.

Authorization takes place in the Model controller or a View.

You add 9 lines to each Controller that is going to use Authorization:

class UsersController < ApplicationController
  before_action :set_auth
  before_action :set_user, only: %i[ show edit update destroy ]

  # GET /users or /users.json
  def index
    @users = User.all
  end
  ...
    private
     def set_auth
      if ['index','show','new','edit','create','update','destroy'].include?(params["action"])
        permitted = Current.user.can?(params["action"],"user")
        unless permitted
          redirect_to dashboard_path, alert: "I'm sorry, but you can't do that!" 
        end
      end
    end
    ...

The before_action :set_auth calls the User.can?method with the params['action'] and the model name. Only the basic crud actions are filtered. Not sure if other action need to be included?? or needed?? Remember Simple!

On second though, you can wrap a controller action in a if/else statement or begin/rescue/end statement. Just Current.user.can?(:update,:model)

It's in the controller to prevent someone, who is not signed in, the typing in the browser /article/5/edit

On the View side you add code to links or buttons to hide them. You can add a helper to the application_controller and use it..

  def can?(action,model)
    Current.user && Current.user.can?(action,model)
  end
  helper_method :can?

Then add it to links in the view:

div
  = link_to icon('fas fa-eye',"Show User"), user,class:"btn-sm-green mr-4"
  = link_to icon('fas fa-edit',"Edit User"),  edit_user_path(user),class:"btn-sm-orange mr-4" if can?('edit',"user")

Going back to the User model, the can? method is called with an action and a model.
The action is more or less converted to CRUD. The show and index actions are just the R in CRUD or Read. That is done in the can? method.

Again I'm just a hobby developer. This was just a sharing effort. Maybe it will give someone some ideas.

EDIT

Using the before_action :set_auth stuff in the controller may not be a good idea. It may be easier add the Authorization to the controller actions. First add another helper to application_controller.rb.

  def flashit(msg=nil)
    if msg
      redirect_to dashboard_path, alert: msg
    else
      redirect_to dashboard_path, alert:"I'm sorry, Dave. I'm afraid I can't do that!"
    end
  end
  helper_method
  # A little 2001: A Space Odyssey flavor!

Now add the can? test to each controller action that needs authorized.

  # GET /articles or /articles.json
  def index
    flashit unless can?(:index,:article)
    @articles = Article.all
  end

  # GET /articles/1 or /articles/1.json
  def show
    flashit unless can?(:show,:article)
  end

  # GET /articles/new
  def new
    flashit unless can?(:new,:article)
    @article = Article.new
  end
  ...

You can even uses this to non-CRUD actions if they modify something.

Rails backup schemes to backup Postgres databases

Steve Alex — Mon, 05 Feb 2024 13:46:59 +0000

The hobbyist developer is back just to document something I created for myself - just to see if I could do it. Maybe someone else needs a Postgres backup scheme. I have two, one in Bash, the other in Ruby

I've had three Rails apps running on a Digital Oceans droplet for about 10 years. I upgraded the droplet about four years ago. At some point I figured that I should have some kind of backup. I initially had a bash script that semi worked. Something happened that it stopped working with a password error. I tried to fix the copied script but gave up when I found a new script from somewhere. I wish I could remember where, just to acknowledge the author.

I know very little about bash/shell scripts - mainly copy/paste and try to make it work for whatever I needed. The script I found was just to backup one DB. I just add a front end script to handle the 3 apps. Here are the scripts:

##### backup_all.sh

# for use with cron, eg:
# 0 3 * * * postgres /var/db/db_backup.sh foo_db

DATABASES=(myvfw_production ptgolf_production our_books_production);

for DATABASE in "${DATABASES[@]}"
do
    # echo $DATABASE
    /home/rails/backups/apps/db_backup.sh "$DATABASE"
done

##### db_backup.sh

#!/bin/bash

if [[ -z "$1" ]]; then
    echo "Usage: $0 <db_name> [pg_dump args]"
    exit 1
fi

DB="$1"; shift
DUMP_ARGS=$@
# DIR="/home/rails/backups/$DB"
suffix="_production"
dbname=${DB%$suffix}
DIR="/home/rails/backups/apps/databases/$dbname"
echo $DIR
# exit 1

KEEP_DAILY=7
KEEP_WEEKLY=5
KEEP_MONTHLY=12

function rotate {
    rotation=$1
    fdate=`date +%Y-%m-%d -d $date`
    file=$DIR/daily/*$fdate*.gz
    mkdir -p $DIR/$rotation/ || abort
    if [ -f $file ]; then
        cp $file $DIR/$rotation/ || abort
    else
        echo
    fi
}

function prune {  
    dir=$DIR/$1
    keep=$2
    ls $dir | sort -rn | awk " NR > $keep" | while read f; do rm $dir/$f; done
}

function abort {
    echo "aborting..."
    exit 1
}

mkdir -p $DIR/daily || abort
mkdir -p $DIR/weekly || abort
mkdir -p $DIR/monthly || abort
mkdir -p $DIR/yearly || abort

date=`date +%Y-%m-%d` || abort
day=`date -d $date +%d` || abort
weekday=`date -d $date +%w` || abort
month=`date -d $date +%m` || abort

# Do the daily backup
/usr/bin/pg_dump $DB $DUMP_ARGS | gzip > $DIR/daily/${DB}_$date.sql.gz
test ${PIPESTATUS[0]} -eq 0 || abort

# Perform rotations
if [[ "$weekday" == "0" ]]; then
    rotate weekly
fi
if [[ "$day" == "01" ]]; then
    rotate monthly
fi
if [[ "$month/$day" == "01/01" ]]; then
    rotate yearly
fi

prune daily $KEEP_DAILY
prune weekly $KEEP_WEEKLY
prune monthly $KEEP_MONTHLY

While don't know bash, I more or less concluded that it:

Builds a timestamp based name for the database
Calls pg_dump to download the sql dump
Gzips the sql
Adds the zipped file to a structured directory
Prunes the directory size

The directory structure is basically

this script (pg_gzip_backup.rb)
a log file to catch any crontab errors and log updates
a root pg_dump directory
- an app directory using the app name for each DB
  - daily backups
  - weekly backups
  - monthly backups
  - yearly backups

The script is run from cron once a day. Another cron script runs some time later and does a rsync to an offsite repo.

I've had this running for a couple of years and will occasionaly unzip the latest dump and upload it into development or staging. I think once someone deleted a record and all siblings. I downloaded the backup and extracted the record and siblings to yaml /json. I then uploaded it back into the DB.

The daily/weekly/monthly/yearly periods might be overkill but it was there! You could just use X daily backups and forget about the weekly, monthly and yearly backups.

Not having anything to do, I decided to write a Ruby version of the backup scheme. I think I changed the directory structure a little by using a different directory naming scheme. I also added a little upfront configuration values. Here is the Ruby version in all it's glory:

class PgBackup
  require "date"
  require 'fileutils'
  # example crontab files. should write error to a log file in dir
    # cron staging 00 2 * * * /home/developer/.rbenv/shims/ruby /home/developer/apps/backup/pg_gzip_backup.rb >> /home/developer/apps/backup/log 2>&1
    # cron local   14 12 * * * /Users/xxx/.rbenv/shims/ruby /Users/xxx/work/common/backup/pg_gzip_backup.rb >> /Users/salex/work/common/backup/log 2>&1 
    # rsync --rsh="ssh -p8611" -a --delete /home/rails/backups/apps/databases/  post@myrepo.us:/home/post/backups/databases

  attr_accessor :dir, :apps, :today

  def initialize
    # puts ARGV[0]
    # ARGV[0].present? @stage = ARGV[0] : @stage = 'production'
    # config local paths for stage, dir, pgdump, gzip and an array of databases/apps
    @stage = "development" # normally production but set to development or staging for testing
    @dir = "/Users/salex/work/common/pg_backup"
    # find path of gzip and pg_dump with `which app` and set class vars
    @pgdump = "/opt/homebrew/bin/pg_dump"
    @gzip = "/usr/bin/gzip"
    @apps = %w[myusers myvfw ptgolf our_books] # array of app names
    # go to work and generate the pg dumps
    @today = Date.today  # current date used in filename of dumps
    set_backup_folders # check or create a dump folder structure for each app
    gzip_dumps# get the dumps and gzip them
  end

  def gzip_dumps
    apps.each do |app|
      db = "#{app}_#{@stage}" # create the rails/pg database name
      file_name = db+"_#{today.to_s}.sql" # create the dump name
      file_path = "#{dir}#{app}/daily/#{file_name}" # always dump daily
      `pg_dump #{db} > #{file_path}`
      `#{@gzip} -f #{file_path}`
      # daily period is now zipped, copy and prune if needed
      @zipped_file_path = file_path+'.gz'
      copy_period('weekly') if is_eow?
      copy_period('monthly') if is_eom?
      copy_period('yearly') if is_eoy?
      prune("#{dir}#{app}/daily/",7)
      prune("#{dir}#{app}/weekly/",5)
      prune("#{dir}#{app}/monthly/",12)
    end
  end

  def copy_period(period) # if it's the end of a period, copy daily
    period_file_path = @zipped_file_path.sub('daily',period)
    FileUtils.copy(@zipped_file_path,period_file_path)
  end

  def is_eow?
    today.sunday? # It's Sunday
  end
  def is_eom?
    today.month != (today + 1).month # It's the last day of the month
  end
  def is_eoy? 
    today.year != (today + 1).year # It's the last day of the year
  end

  def prune(dir,size)
    curr_files = Dir.children(dir).sort.reverse # reverse in case of a .file in folder
    if curr_files.size > size
      File.delete(dir + curr_files[size]) # delete the oldest file
    end
  end

  private

  def set_backup_folders
    File.write(@dir+"/log", "") if !File.exist?(@dir+"/log")
    File.write(@dir+"/log", "script opened #{Time.now}\n", mode: 'a+')
    if !Dir.exist?(@dir+"/pg_dumps/")
      # create all app dumps
      Dir.mkdir(@dir+"/pg_dumps/")
      apps.each{|a| make_new_app_set(a)}
    else
      # create any new app dumps added to the apps array after initial creation
      apps.each do |a|
        if !Dir.exist?(@dir+"/pg_dumps/#{a}/")
          make_new_app_set(a)
        end
      end
    end
    @dir = @dir+"/pg_dumps/"
  end

  def make_new_app_set(app)
    Dir.mkdir(@dir+"/pg_dumps/#{app}/")
    Dir.mkdir(@dir+"/pg_dumps/#{app}/daily/")
    Dir.mkdir(@dir+"/pg_dumps/#{app}/weekly/")
    Dir.mkdir(@dir+"/pg_dumps/#{app}/monthly")
    Dir.mkdir(@dir+"/pg_dumps/#{app}/yearly")
  end
  # fire this ruby script
  PgBackup.new
end

Not only do I not understand bash scripting with all its hieroglyphic notation, piping etc, I'm not great at Ruby - but I'm proud that I got it working!

I initially tried to use Zlib but the gz files would not uncompress on a Mac. I finally figured out the Zlib for Ruby only inflates or deflates stings and does the add gz headers to a file. Gzip is on the Mac and Linux by default. I just had to get around the piping stuff. Just for info: one db dump was 3.7gb and reduced to 549kb. The other was 2.2gb and reduced to 323kb.

I use rbenv but I'm sure it can be converted to rvm or just the host version of Ruby. For cron everything is based off the root or home directory. The first 5 lines in def initialize is the configuration. Just define path to the script and everything is based off of that. There are a couple crontab examples in the top comments that needs the Ruby path. Didn't know that cron was so picky! There is also a rsync scheme to push the changes to a remote.

I'm sure there is some commercial version of a postgres backup, but then I'd have to figure it out. Try it out in development and see what you think.

Hope it interests someone.

Ruby/Rails Hash.to_s. Why?, Where is String.to_h?

Steve Alex — Sat, 11 Feb 2023 20:49:49 +0000

For years I've been using a serialized column in a model to store semi-constant setting/preferences. I've used various schemes to update, change, add or delete these preference. Updating values is fairly simple, just use a form that defines the key/value settings[some_field] value. Adding and deleting something is a little more involved and usually result in a re-deploy (since you had to add code to take care of the change!).

I've been playing with a new app that will never get deployed. I just wanted to see how difficult it would be to replicate Point-Of-Sale(POS) system. A POS is just a high-end cash register. I was more or less in charge of a VFW bar and we had a POS, until Covid forced us to close. We had about 8 months left on our contract, so we had to pay about $200 a month for doing nothing.

After a few weeks playing with it, using all the Rails goodies (Turbo Frames/Streams), it was not that difficult to create a rudimentary POS. It tablet friendly in that 95% is button clicks. I then adding features that dealt with taxes, discounts and other stuff.

  class Business < ApplicationRecord
    # where preferences/settings are stored

  class Department < ApplicationRecord
    has_many :items
    belongs_to :business
    # puts like items under it. Thing like Liquor, Food
    # that may have different tax-rates

  class Item < ApplicationRecord
    belongs_to :department
    has_many :ticket_items
    # inventory, price 

  class Employee < ApplicationRecord
    has_many :tickets
    has_many :tills
    # who using the pos

  class Ticket < ApplicationRecord
    belongs_to :employee
    has_many :ticket_items
    # a new sale

  class TicketItem < ApplicationRecord
    belongs_to :ticket
    belongs_to :item
    # what items are on the ticket  (quantity and Price/tax 
    # at time of sale (think Happy Hour)

  class Till < ApplicationRecord
    belongs_to :employee
    # balances sales with payment

Enough of the POS and getting back to my Title/Question and settings/preferences. My current settings are :

{"item_tax"=>"included",                                                                                           
 "taxes_used"=>["sales", "county", "federal", "city", "liquor"],                                                   
 "employee_discount"=>{"percent"=>0.2, "round"=>0.25},                                                             
 "discounts_used"=>{"time_discount"=>{"percent"=>0.1, "round"=>0.25}, "special_discount"=>{"percent"=>0.2, "round"=>0.25}}}

item_tax: Defines if the item price includes that tax or it's a separate line
taxes_used: Is defined the the Department. It just sums them, but can be separated by a Taxable class that also defines what the tax rates are based on ticket date. Tax rates do change, but very seldom.
employee_discount: Is a switch on ticket that if the customer is an employee, they get 20% off
discounts_used: Defines the different discounts. time-discount: takes care of changing happy hour prices it my get_current_price method.

I was just managing the settings in the console when I discovered that the scaffold view had a settings field. I just changed it to a text-area.

The cover image is pretty view of my settings form field. I said, what the heck and changed something and submitted. Low in behold, they changed! - but the serialized hash was now just a string - and everything that depended on the hash broke.

I'm sure Rails uses some form of Hash.to_s to populate the field. I can't think where else it would be used. That gets to my Why? question. Can anyone think of other reasons to use Hash.to_s other than to view it.

Since my settings: as serialized serialize :settings, JSON as JSON, what is stored in the DB is JSON but returned as a Ruby Hash.

"{\"item_tax\"=>\"included\", \"taxes_used\"=>[\"sales\", \"county\",
\"federal\", \"city\", \"liquor\"],
\"employee_discount\"=>{\"percent\"=>0.2, \"round\"=>0.25},
\"discounts_used\"=>{\"time_discount\"=>{\"percent\"=>0.1, \"round\"=>0.25},
\"special_discount\"=>{\"percent\"=>0.2, \"round\"=>0.25}}}"

If I convert the hash to json (j = b.settings.to_json) I get:

"{\"item_tax\":\"included\",\"taxes_used\":[\"sales\",\"county\",
\"federal\",\"city\",\"liquor\"],
\"employee_discount\":{\"percent\":0.2,\"round\":0.25},
\"discounts_used\":{\"time_discount\":{\"percent\":0.1,\"round\":0.25},
\"special_discount\":{\"percent\":0.2,\"round\":0.25}}}"

See the difference??? Hash.to string basically give Ruby like version of a JSON like string. All that is different is the hash assignment operators. JSON uses :, Ruby used =>

So I throw together a monkey patch (or could of just used a method) String.json_to_h

# Edit, forgot about array's
# /lib/core_extensins/json_to_h.rb
# convert JSOM to a Hash
module CoreExtensions
  module String
    def json_to_h
      if valid?
        JSON.parse(self.gsub('=>', ':'))
      end
    end

    def valid?
      default = true
      open_hash = self[0] == "{" && self[-1] == "}"
      open_arry = self[0] == "[" && self[-1] == "]"
      open_match = (self.count('{') + count('[')) 
      close_match = (self.count('}') + count(']'))
      return(default && (open_hash || open_arry)  && (open_match == close_match))
     end
  end
end

I added a few sanity checks but it will error in the controller if not valid. I just had the change the scaffold controller a little:

def update
  # convert setting to hash and upate latter
  settings = business_params['settings'].json_to_h
  # settings will be nil if not a valid hash
  business_params.delete('settings')
  respond_to do |format|
    if settings.present?
      @business.attributes = business_params
      @business.settings = settings
      @business.save
      ...

So I answered my second question Where is String.to_h

Don't think I'd use it except in development, but it was an interesting trip.

Rails Hash to Struct - A monkey patch

Steve Alex — Sat, 24 Sep 2022 16:02:06 +0000

The Hobby Developer(me!) has been busy refactoring a few my sites. I've mentioned in a posts about using serialized fields in a model Rails - Using the Attributes API to manage serialized preferences. Most were just adding a serialize attribute in a model serialize :settings, ActiveSupport::HashWithIndifferentAccess. Rails 7.0.4 kind of mucked that up. I had been using HashWithIndifferentAccess because I like using symbols in a hash versus 'strings'. Rails serializes hashes using YAML. YAML had a security bug and Rails fixed it by requiring you to explicitly define what will be serialized. That took a little while to get right, but in the talk about the bug, they basically said: 'why not just use JSON'.

That's a little of what I've been refactoring. I'm still trying to figure out change a few attributes from HashWithIndifferentAccess to JSON. I'm afraid its going to be something like:

Take the server down
Remove serialize :settings, ActiveSupport::HashWithIndifferentAccess
Deploy conversion version parse the YMAL and save as JSON
Add serialize :settings, JSON and redeploy.

It will Probably take 15 minutes, but I want to think about it a little more.

What I've been doing recently is converting some of these setting/preference Hashes to Struct (originally OpenStruct - but abandoned that). Again, it's just a personal preference, I prefer settings.acct_placeholders than settings['acct_placeholders'].I originally did this using a Monkey Patch I stuck in config/initializers.

Hash.class_eval do
  def to_struct
    Struct.new(*keys.map(&:to_sym)).new(*values)
  end
end

Probably not a good idea, but it worked for a simple hash, but not a nested hash. In reading a little more about Monkey Patching in Monkey patching in Rails and 3 Ways to Monkey-Patch Without Making a Mess, I decided to do it the Rails way using modules.

I added a folder to /lib core_extensions and two sub-folder hash and array. In the subfolders and added my monkey patches.

core_extensions
- hash
- as_struct.rb
- to_struct.rb
- array
- test_array.rb

I just added the array as a proof of concept.

# just a proof of concept
module CoreExtensions
  module Array
    def test_array
      puts "test_array"
      self
    end
  end
end

To get these patches to work, you have to load the patches, so in config/initializers I added monkey_patches.rb

# config/initializers/money_patches.rb
# Require all Ruby files in the core_extensions directory by class
Dir[Rails.root.join('lib', 'core_extensions/*', '*.rb')].each { |f| require f }

# Apply the monkey patches
Array.include CoreExtensions::Array
Hash.include CoreExtensions::Hash

For the hash.to_struct patch I ended up with two patches: .to_struct and .as_struct. This is a spinoff and Rails .to_json and .as_json. One (.as_json) sanitizes a hash and the other does the conversion.

# /lib/core_extensins/as_struct.rb
# convert Hash to Struct on a single level
module CoreExtensions
  module Hash
    def as_struct
      Struct.new(*keys.map(&:to_sym)).new(*values)
    end
  end
end

# /lib/core_extensins/to_struct.rb
# convert Hash to a nested Struct 
module CoreExtensions
  module Hash
    def to_struct
      hash_to_struct(self)
    end

    private

    def hash_to_struct(ahash)
      struct = ahash.as_struct # convert to struct
      struct.members.each do |m|
        if struct[m].is_a? Hash
          struct[m] = hash_to_struct(struct[m]) # nested hash, recursive call
        elsif struct[m].is_a? Array 
          # look for hashes in an array and convert to struct
          struct[m].each_index do |i|
            # normal use, an array of hashes
            struct[m][i] = hash_to_struct(struct[m][i]) if struct[m][i].is_a? Hash
            # convoluded use, an array that may contain hash(es)
            struct[m][i] = hash_in_array(struct[m][i]) if struct[m][i].is_a? Array
          end
        end
      end
      struct 
    end

    def hash_in_array(arr)
      arr.each_index do |ii|
        arr[ii] = hash_to_struct(arr[ii]) if arr[ii].is_a? Hash 
      end
      arr
    end 
  end
end

So if I define a convoluted nested Hash (I wouldn't do this... but again proof of concept)

h = {
  game:{id:1,date:'2022-09-11',player:6},
  players:[{name:'Joe',quota:21},{name:'Harry',quota:26},{name:'Pete',quota:14},
    {name:'don',quota:21},{name:'sally',quota:26},{name:'red',quota:14}],
  teams:[['joe','don',team:{a:1,b:2,c:3}],['harry','sally',lost:{skins:2,par3:9}],['pete','red']]}

and call s = h.to_struct, I get a convoluted Struct:

<struct                                               
 game=<struct  id=1, date="2022-09-11", player=6>,    
 players=                                              
  [<struct  name="Joe", quota=21>,                    
   <struct  name="Harry", quota=26>,                  
   <struct  name="Pete", quota=14>,                   
   <struct  name="don", quota=21>,                    
   <struct  name="sally", quota=26>,                  
   <struct  name="red", quota=14>],                   
 teams=                                                
  [["joe", "don", <struct  team=<struct  a=1, b=2, c=3>>],
   ["harry", "sally", <struct  lost=<struct  skins=2, par3=9>>],
   ["pete", "red"]]>

  # s.game returns 
  <struct  id=1, date="2022-09-11", player=6>
  # s.game.date return
  "2022-09-11"

That it!

Again, I'm just a hobbyist and my Ruby skill are not deep, but a lot better that what I knew 12 years ago.

Any comments?

Rails 7 with Tailwindcss and custom Slim Template

Steve Alex — Sun, 03 Jul 2022 22:26:58 +0000

I'll start of with I Hate HTML!. I've hated it since the early 1990's when we put up one of the first websites in Alabama AIDT.edu using WebSTAR. The original version was just a simple Who we are and What do we do site. It has evolved!

I've hated it since making a poor decision in adopting a framework (my opinion!) 4D - 4th Dimension, or Silver Surfer to manage AIDT's process. At first it was just used as a local DB server. We then adopted Active4D, which was a PHP like plugin for 4D. That application was on a subdomain.

I've long ago retired but before I did, we experimented with Rails, Version 0.9 for some internal projects. It never went anywhere, but it did get me hooked on Rails. After I retired I became a hobby developer. I developed a Rails version of the Active4D subdomain with all the things it should of had. I tried to give it to AIDT, but...

My hobby projects include:

rBooks which is a web-based double entry accounting system I build for myself. I joined the VFW (Veterans of Foreign Wars) and became the Quartermaster (accountant!). I was not going to use paper ledgers. The github page gives a little more background on me and the different phases of rBooks.
Another VFW site I used to manage a few other things at my post (members, reports etc.) It had some blog like pages, but then came Facebook!
PTGolf.us - a golf group dogfight point management system (Groups/Players/Games/Rounds). It actually started as a backdoor page on one of the servers at AIDT.

Slim

Somewhere about 10 year ago I put away my hate HTML when I discovered haml, and then slim. I can manage indented tabs a lot better than I could HTML tags. My three project started about Rails 3 and went through 4, 5 and 6. I've spent the last 6 month moving them to Rails 7. Not an easy task! I added Tailwindcss and I'm slowly moving from W3.css. I've also gone through CSS hell trying different stuff. Zurb Foundation which was always broke! That forced me to plain old W3.css.

As I moved to Rails 7 and added Tailwind, Rails would muckup the application layout page and add:

<body>
  <main class="container mx-auto mt-16 px-5 flex">
    <%= yield %>
  </main>

That worked fine for erb scaffolds, providing workable ( prettier ) CRUD scaffold views. Not so good with Slim. My 3 projects views have long ago moved to different layouts so I just deleted or modified the tailwind stuff in the layout. I'll point out that the majority of the view are table based and that was eliminated in the Rails 7 scaffolds.

Running out of things to do, I though about rewriting rBooks and removing the VFW flavor and refactoring a bunch of junk code. Instead of removing the Tailwind stuff in the layout I tried to work with it and create Slim template that kinda matched the erb layout.

I remember doing that years ago, probably using erb, then running the erb through some html2slim processor. But I gave it another try, modifying slim-rails layout templates to include some tailwind.

There were a few links how to add lib/templates/slim/scaffold Working with Custom Rails Scaffolding Templates in Slim. It's several year old and seems to have lost some gists, but it was enough to start.

One of the things I don't like about Tailwind is a basic class for some things like buttons - something that I feel you should be consistent with. I understand the tailwind concept of just using their classes to style a button, but adding:

= link_to 'something',some_path,class="ml-2 rounded-md py-1 px-3 bg-gray-200 inline-block font-medium "

That gets old and you have to remember what classes used for that button. I wrote a post a while back Mimic Tailwind components in Rails using Helpers
. I think I only used it on one model/views that I was refactoring. The above like would become:

= link_to 'something',some_path,class="#{btn-sm-blue} "

which would call a method in:

module ButtonHelper
  def btn_lg
    "ml-2 rounded-xl py-5 px-7 bg-gray-200 inline-block font-medium "
  end
  def btn_md
    "ml-2 rounded-lg py-3 px-5 bg-gray-200 inline-block font-medium "
  end
  def btn_sm
    "ml-2 rounded-md py-1 px-3 bg-gray-200 inline-block font-medium "
  end 
  def btn_submit
    "mt-2 rounded-md py-4 px-6 bg-blue-700 text-white hover:bg-blue-600 inline-block font-medium"
  end
  def btn_sm_blue
    btn_sm + "bg-blue-200 hover:bg-blue-300 "
  end
  def btn_sm_red
    btn_sm + "bg-red-700 hover:bg-red-800 text-white "
  end
  def btn_sm_green
    btn_sm + "bg-green-200 hover:bg-green-300 "
  end

  def icon(klass, text = nil)
    icon_tag = tag.i(class: klass)
    text_tag = tag.span text
    text ? tag.span(icon_tag + text_tag) : icon_tag
  end

end

My slim templates are going to require this helper. I've also added fontawsome icons, if you don't use fontawsome, they'll just be ignored.

After writing the tailwind css helper my process was:

Copy the scaffold templates from the slim_rails gem to your lib/templates/slim/scaffold directory.

Also, from the post I mentioned: You need to tell rails explicitly to use slim when scaffolding views. Open up application.rb and in your Class Application < Rails::Application add:

config.generators do |g|
   g.template_engine :slim
end

Go through a laborious process and making the slim template produce something like the erb templates. That may include many 'bin/rail g scaffold thing date title content
' followed by bin/rails destroy scaffold thing, deleting the table etc.

An example of a template looks like:

div.w-full
  p style="color: green" = notice
  h1.font-bold.text-2xl Showing <%= human_name.capitalize %>

  div.flex.gap-8
    => link_to icon('fas fa-edit',"Edit <%= human_name.capitalize %>"), <%= edit_helper(type: :path) %>, class:"#{btn_sm_green}"
    =< link_to icon('fas fa-list',"List <%= human_name.pluralize.capitalize %>"), <%= index_helper(type: :path) %>, class:"#{btn_sm_green}"
    = button_to icon('fas fa-trash',"Destroy <%= human_name.capitalize %>"), <%= model_resource_name(prefix: "@") %>, method: :delete, form:{data: { turbo_confirm: 'Are you sure?', turbo_method:'delete' }}, class:"#{btn_sm} bg-red-700 text-white"
  hr.border-1.border-blue-500.my-1
  == render @<%= singular_table_name %>

All 6 file are in a gist

I've also created a rails7_playgroun repository on github

Wrapping a generic sort_table javascript function in a stimulus controller

Steve Alex — Thu, 03 Feb 2022 02:48:22 +0000

Several year ago I decided I needed to add a table sort feature to an app. Now there are hundred of "sort_table" functions out there. Some ranging from 50 lines of code to a couple hundred.

I'm not into javascript but get by. I may have even been using CoffeeScript at the time. I picked one that I almost understood that was short and sweet. It did a basic table sort and even offered an ascending/descending option. I'm sorry but I've lost track of were I found this JS so I can't point to the source, but maybe someone can. At some point, probably early 2020 I wrapped this in a Stimulus controller and have used it ever since.

One of my new uses had a table that had a numeric column and it didn't handle it well. I went looking for another sort_table function and found a few, but I was too lazy to try to wrap the function(s) into a Stimulus controller. I already had something that worked, I just had to modify it by adding a simple numeric switch that I found in one of the searches.

So we'll start with the markup of one of my tables using slim.

table.small-table id="current_members"
  thead[data-controller="sortTable"]
    tr
      th Del
      th[data-action="click->sortTable#sortBy" data-stype="T"]
        i.fas.fa-sort.noprint
        |Name
      th.numeric[data-action="click->sortTable#sortBy" data-stype="N"]
        i.fas.fa-sort.noprint
        |RQ

      th Tee
      th[data-stype="N" data-action="click->sortTable#sortBy"]
        i.fas.fa-sort.noprint
        |TM

  -  @game.current_players_name.each do |p|
    tr[data-schedule-target="currentPlayers"]
      td = check_box_tag "deleted[]", value=p.id,nil,data:{action:'schedule#update_player'}
      td = p.name
      td = p.player.rquota_limited
      td.bg-green-100.select = select_tag 'tee[]', tee_options(@game.group,p,true), class:"border border-green-500 select",data:{action:'schedule#update_player'}
      td = p.team

I add the sortTable controller to the table and data-action="click->sortTable#sortBy" to any TH column I want to sort. There is also a little css and font awesome icons that are optional. There is also another controller actions.

The numeric option is triggered by add a numeric class to the TH.

Now the Stimulus controller, again 90% of code I copied from somewhere:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ ]

  connect() {
    this.numeric = false
  }

  sortBy(){
    const th = event.target
    this.numeric = th.classList.contains('numeric')
    const tr = th.closest('tr')
    const table = tr.closest('table')
    var idx = Array.from(tr.children).indexOf(th)
    this.sortTable(table,idx)
  }

  sortTable(table,idx) {
    var  rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    switching = true;
    // Set the sorting direction to ascending:
    dir = "asc"; 
    /* Make a loop that will continue until
    no switching has been done: */

    while (switching) {
      // Start by saying: no switching is done:
      switching = false;
      rows = table.rows;
      /* Loop through all table rows (except the
      first, which contains table headers): */

      for (i = 1; i < (rows.length - 1); i++) {
        // Start by saying there should be no switching:
        shouldSwitch = false;
        /* Get the two elements you want to compare,
        one from current row and one from the next: */

        x = rows[i].getElementsByTagName("TD")[idx];
        y = rows[i + 1].getElementsByTagName("TD")[idx];
        // Added this check if there is a row that has a colspan e.g. ending balance row
        if ((x == undefined) || (y == undefined)){continue}
        /* Check if the two rows should switch place,
        based on the direction, asc or desc: */

        // Check if numeric sort (th has class numeric) added by ME
        if (!this.numeric) {
          var compx = x.innerHTML.toLowerCase()
          var compy = y.innerHTML.toLowerCase()
        }else{
          var compx = /\d/.test(x.innerHTML) ? parseFloat(x.innerHTML) : 0 
          var compy = /\d/.test(y.innerHTML) ? parseFloat(y.innerHTML) : 0 
        }

        if (dir == "asc") {
          if (compx > compy) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (compx < compy) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        /* If a switch has been marked, make the switch
        and mark that a switch has been done: */
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        // Each time a switch is done, increase this count by 1:
        switchcount ++; 
      } else {
        /* If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again. */
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  }

}

I'm sure this is an old fashioned bubble sort and there maybe better functions, but it worked for me. I just wanted to point out it's not that hard to wrap a JS function into Stimulus.

Upgrading from Rails 6.x Webpacker to Rails 7 Importmaps

Steve Alex — Fri, 07 Jan 2022 18:13:57 +0000

I've spend a good part of the last few months trying to figure out how I was going to convert my three semi-private Rails 6.1.x apps to Rails 7. I created a bunch of Rails 7 test apps using ESbuild, Importmaps and even Webpacker. While ESbuild may of been an eaiser path (basically node modeles without webpacker stuff), I leaned towards Importmaps. Other than a few node package I used, almost all of my JS was using Stimulus in some form.

So I marched on with my journey to Rails 7. Along the way I did do a lot of refactoring. I've been moving slowly from W3css to Tailwind.css. I already had the mixed css with some of my own scss. I don't think I'll remember all the steps I took, but I try to decribe the steps I took in some kind of order. It may not be the best way, but I did it my way and it worked

Rail7 Branch

I created and checked out a new rails7 branch. Fortunally I didn't have to make any changes to my deployed master, but merging branches was always in the back of my mind.

I then did bin/rails app:update and it did its thing. I hate to admint this, but I have No tests. I've tried many times to get into the test mode, but failed! So I continued to test how I've tested for the last 40 years! Change something then push the car back up the hill and see if the brakes fail again!!

I can't remember if development worked after the update, but I think it did. The gem 'sass-rails' was still in the Gemfile
so I think it worked.

I did have a problem with the update adding ActiveStorage migrations. Apperently I never installed ActiveStorge and really didn't want to. I set config.active_record.migration_error = false to avoid the error and later on changed require "rails/all" to the documentation way to not require ActiveStorage.

Onward to the next step, Rip out Webpacker and convert Gemfile to a fresh Rails 7 Importmaps version.

Rip out Webpacker.

Seemed scary but pretty simple. I removed:

app/javascript/application.css
app/javascript/channels/consumer.js
app/javascript/channels/index.js
app/javascript/packs/application.js
babel.config.js
bin/spring
bin/webpack
bin/webpack-dev-server
bin/yarn
config/webpack/development.js
config/webpack/environment.js
config/webpack/production.js
config/webpack/test.js
config/webpacker.yml
package-lock.json
postcss.config.js
yarn.lock

I then basically merged my orginal Gemfile with the Test App Gemfile. The main stuff being (without my specifics):

gem "rails", "~> 7.0.0"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
gem "tailwindcss-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

gem "redis", "~> 4.0"

I think at this point development worked, but maybe a few errors/problems with css.

SASS CSS, etc

I had a bunch of crap scss. Some problably hadn't been used in years and never found a good way of identifing what wasn't used. I knew the main things I used were colors, buttons, tables and a few almost components. I converted that scss to css with one of the many scss_to_css sites found on the web and added that css to my branch.

Stimulus Controller needed to be converted to the @hotware version. import { Controller } from "@hotwired/stimulus"

I added to config/importmap.rb my unique CDNs

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "stimulus-flatpickr", to: "https://ga.jspm.io/npm:stimulus-flatpickr@3.0.0-0/dist/index.m.js"
pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.js"
pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:stimulus-autocomplete@3.0.0-rc.5/src/autocomplete.js"
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.0.1/dist/stimulus.js"

I also had to add a link to my layout for flatpickr link rel="stylesheet" href="https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.min.css"

CSS bundling starting working with some problems. Many of them related to the config/tailwind.js file.

I merged my old tailwing config file with the new verssion

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.html.*',
    './app/components/**/*.html.*'

  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        'orange': '#ffa500',
        'malt': '#991A1E',
        'gold': '#A79055',
        'dark-blue': '#0F3E61',
        'success': '#63ed7a',
        'secondary': "#9db3b8",
        'w3green': "#4CAF50",
        'w3red': "#f44336",
        'blue-link': "#00c",
        lime: {
          lightest: '#f1fff1',
          lighter: '#e2ffe2',
          light: '#c9ffc9',
          DEFAULT: '#b8ffb8',
          dark: '#96ff96',
          darker: '#7cff7c',
          darkest: '#49ff49',
        },
        // gray: colors.trueGray,

        green: {
          lighter:'hsla(122, 59%, 64%, 1)',
          light: 'hsla(122, 49%, 54%, 1)',
          DEFAULT: 'hsla(122, 39%, 49%, 1)',
          dark: 'hsla(122, 39%, 39%, 1)',
          darker: 'hsla(122, 39%, 29%, 1)',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
  ]
}

I have a few Web Components and needed to add that folder to the content: array

I also had some tailwind webpack components the used @apply and converted them to rails helpers. Something like:

module ComponentsHelper
  def greenBox
    "box-border box-content m-3 p-4 bg-green-300 border-green-100 border-2 text-black"
  end

  def blueBox
    "box-border box-content m-3 p-4 bg-blue-400 border-blue-200 border-2 text-black"
  end

  def btn
    "py-1 px-2 text-black hover:text-white rounded font-lg font-bold "
  end

  def btnInfo
    btn + "bg-blue-400 text-blue-link hover:text-blue-100"
  end

  def btnWarn
    btn + "bg-orange hover:text-yellow-200"
  end

  def btnGreen
    btn + "bg-green-500 hover:text-green-100"
  end

  def btnDanger
    btn + "bg-red-500 hover:text-red-200"
  end

  def btnSuccess
    btn + "bg-success hover:bg-green-700"
  end

  def btnSecondary
    btn + "bg-secondary"
  end

  def flashAlert(type)
    case type
    when 'danger'
      return "bg-red-200 text-red-600"
    when 'info'
      return "bg-blue-200 text-blue-600"
    when 'success'
      return "bg-green-200 text-green-600"
    when 'warning'
      return "bg-yellow-400 text-yellow-800"
    else
      return "bg-gray-200 text-gray-600"
    end
  end

  def destroyConfirmTag(model,confirm_msg:"",klass:"",prompt:"")
    klass= "#{btnDanger} inline-block" if klass.blank?
    confirm_msg = "Are You Sure?" if confirm_msg.blank?
    prompt = "Delete #{model.class.name}" if prompt.blank?
    node = content_tag(:div, class: klass,
      data:{
        controller:"destroyConfirm", 
        action:"click->destroyConfirm#confirm",
        destroyConfirm_cmsg_value:confirm_msg
      }){
      concat(tag.span(prompt))
      concat(button_to( '',model, method: :delete,class:"hidden",data:{destroyConfirm_target:"submit"}))
    }
    node 
  end

end

The last helper destroyConfirmTag tackled the problem with Rails removing the method::get from delete scaffold. The default change is to change link_to to button_to. But it didn't have a confirm tag. So I just call this on delete links and add back the confirm message. I have a couple delete links that I need to sure they didn't click the wrong link. There is a simple stimulus controller:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "submit"]
  static values = { cmsg: String}

  connect() {
    // console.log("destroy confirm")
    if (this.hasCmsgValue) {
      this.confirm_msg = this.cmsgValue
    }else{
      this.confirm_msg  = "Are you sure?"
    }
  }

  confirm(){
    // console.log(this.submitTarget.closest('form'))
    let ans = confirm(`${this.confirm_msg}`)
    if (ans == true) {
      this.submitTarget.closest('form').submit()
    }
  }

}

I even toyed with simple Ruby class to generate css from tailwind config file - never finished or used it though. Think I saw some post the the rails_tailwind gem site bitching about colors and components.

class TwColors

  attr_accessor :colors, :css

  Colors = {:colors=>                                                  
  {:orange=>"#ffa500",                                      
   :malt=>"#991A1E",                                        
   :gold=>"#A79055",                                        
   :"dark-blue"=>"#0F3E61",                                 
   :lime=>                                                  
    {:lightest=>"#f1fff1",                                  
     :lighter=>"#e2ffe2",                                   
     :light=>"#c9ffc9",                                     
     :DEFAULT=>"#b8ffb8",                                   
     :dark=>"#96ff96",                                      
     :darker=>"#7cff7c",                                    
     :darkest=>"#49ff49"},
   :green=>
    {:lighter=>"hsla(122, 59%, 64%, 1)",
     :light=>"hsla(122, 49%, 54%, 1)",
     :DEFAULT=>"hsla(122, 39%, 49%, 1)",
     :dark=>"hsla(122, 39%, 39%, 1)",
     :darker=>"hsla(122, 39%, 29%, 1)"}}}

  def initialize()
    @colors = Colors
    @css = "not parsed yet \n"
    @colors[:colors].each do |k,v|
      unless v.is_a?(Hash)
        add_color_classes(k,v)
      else
        add_nested_color_classes(k,v)
      end
    end
    puts @css
  end

  def add_color_classes(k,v)
    @css << ".text-#{k} {\n\tcolor: #{v};\n}"
    @css << ".bg-#{k} {\n\t background-color: #{v};\n}\n"
  end

  def add_nested_color_classes(k,v)
    v.each do |kk,vv|
      if kk.to_s == "DEFAULT"
        add_color_classes("#{k}",vv)
      else
        add_color_classes("#{k}-#{kk}",vv)
      end
    end
  end

end

Merging rails7 branch with master

One of my major fears was -> What if I merged and Capistrono would not deploy. I spent way too much time trying to figure out how to deploy a branch to my staging server. I found posts on how to do it (old) and nothing worked.

I then just faked it and ran staging locally.

set staging DB to point to develoment
bin/rails assets:precompile
bin/rails s -e staging

This was where I found I had the bundling issues with css classes in components not being picked up. After a little tuning things were working fine.

Had to remember to bin/rails assets:clobber when I moved back to development.

Everything seemed to be working fine, especially after a bunch of refactoring. It was time to merge. Made sure I had a backup clone of my repo and did a merge after I figured out how to do it (I've been using the OSX version of Fork and am not proficient with git or Fork.

Devepment worked fine, as expected.

cap staging deploy also worked without any changes to the Capistrono config file.

Played with it with a few more refactoring tweeks and the deployed to production!

and I'm fine and

I'm on Rails 7 without any Webpacker crap!!!

Mimic Tailwind components in Rails using Helpers

Steve Alex — Sat, 27 Nov 2021 16:22:26 +0000

I've been toying with Rails 7 alpha for the last month or so and this is a little expansion on My Bumpy Ride post. It is confirmed that in Rail 7, rails new xxx will default to importmaps. You can still use webpacker, but it will stop being upgraded. You also have the option of using esbuild which is like mini-webpacker - you get the bundling without all the webpacker bable stuff.

Recently I've added a little tailwindcss to a few of my apps. I have three semi-private apps that are used by a very small group of friends. None of the apps have a large amount of Javascript and all javascript has been converted to stimulus.js. But all the apps have messy mixture of css that have been through custom sass, Zurb Foundation and W3.css

The esbuild approach will probably be the best approach to upgrading a rails 6 app, but it won't be easy. Hopefully the Rails team will come up with some tools. I actually had the best results (just testing approach) by

Creating a new rails 7 app using esbuild
Adding my node stuff, including tailwind
Copying my controllers, models and views to the new app.

Lots of work. Could probably go the other way and copy the new rails app guts to the and existing app clone. Then deleting the webpacker stuff. Think I'll just wait for the upgrade!

The importmaps approach is the simplest. I had a few problems importing stimulus-flatpickr and getting it to work. Most of the problems came from stimulus being changed to @hotware/stimulus and getting versions to match.

That still left me with tailwind css that couldn't be modified (add my preferred colors, etc). It finally hit me that I can still write my own css in a utility first style and get my colors. That is provided I didn't create the crap classes that I used in the past that would eventually clash with other crap classes!

The few apps that I've added tailwind css to are actually using a mixture of W3.css and tailwind. I'm slowly converting the W3.css to tailwind when warranted. You still end up with he major complaint of tailwind - the hiedius markup.

/ markup using slim
section.bg-gray-900
  .max-w-5xl.mx-auto.px-4.py-24(class="sm:px-6 lg:px-8")
    h1.text-4xl.font-bold.tracking-wide.uppercase.text-center.text-white(class="sm:text-6xl")
      |Hello World

Fortunately I don't have a marketing site with all the flashing components. I have simple buttons and some card-like sections.

It finally hit me that I could use rails Helpers to make life easier and keep me from creating a bunch of css classes that are almost all the same.

Lets create a couple simple buttons and boxes.

module ComponentsHelper
  def greenBox
    "box-border box-content m-3 p-4 bg-green-300 border-green-100 border-2 text-black"
  end

  def blueBox
    "box-border box-content m-3 p-4 bg-blue-400 border-blue-200 border-2 text-black"
  end

  def btn
    "py-1 px-2 text-black hover:text-white rounded font-lg font-bold "
  end

  def btnInfo
    btn + "bg-blue-400 hover:text-blue-200"
  end

  def btnWarn
    btn + "bg-orange hover:text-yellow-300"
  end

  def btnDanger
    btn + "bg-red-500 hover:text-red-200"
  end

  def btnSuccess
    btn + "bg-success"
  end

  def btnSecondary
    btn + "bg-secondary"
  end

  def flashAlert(type)
    case type
    when 'danger'
      return "bg-red-200 text-red-600"
    when 'info'
      return "bg-blue-200 text-blue-600"
    when 'success'
      return "bg-green-200 text-green-600"
    when 'warning'
      return "bg-yellow-400 text-yellow-800"
    else
      return "bg-gray-200 text-gray-600"
    end
  end

end

Just a simple rails helper using tailwind classes and a few custom colors (bg-orange, bg-success). Now my buttons are all about same and it would be easy to add others.

The markup changes to something like:

 div.mx-10.flex-grow.px-2
      button[class="#{btnInfo} mr-2" data-action="click->entryLedger#check_valid"] Validate
      button[class="#{btnWarn} mr-2"] = link_to('Cancel', session[:current_acct].present? ? account_path(session[:current_acct]) :request.headers['HTTP_REFERER'],
        class:"")
      - unless @entry.new_record? || @entry.reconciled?
        - confirm_msg = @entry.cleared? ? "Entry has been Cleared - Are you sure?" : 'Are you sure?'
        button[class="#{btnDanger} mr-2"] = link_to 'Delete Entry',@entry, data: { confirm: confirm_msg }, method: :delete

Again I use slim-rail, but an erb would just replace the #{} with erb tags.

This approach may make the importmaps more acceptable.

Going down the track to rail.7.0.0.alpha - it may be a bumpy ride

Steve Alex — Thu, 07 Oct 2021 18:31:24 +0000

Okay, I'm not a real developer - but I've been using RoR since before v1.0. When I was still working, I tried to push the Rails approach to our state government agency, but they were scared of failing - so there are still using stuff like 4D (aka 4th Dimension, aka Silver Surfer - you might have to go back in history to find it, but it's still alive!) I retired and just write code for the heck of it. I have three apps that are more or less targeted to a single or small group of users. Two are apps used by a Veterans of Foreign War Post (VFW) that I wrote because I didn't want to keep pushing paper. The other is a golf group manager, which is used by my golf group and a few others. Think they all started in about rails 3.x and are up to the latest 6.x.

I decided to try to see what rail 7.x was going to do to my apps. Again, it may be a bumpy road to upgrade - a lot of stuff has changed, but if you want to move forward you are going to have to accept that there will be some pain.

Javascript has always been a pain, but ES6 is making in almost usable. I've never had a lot of Javascript, but a few of the apps have what I like to call Spreadsheet like pages. It's hard to do a double-entry ledger without some work to make sure the entries balance before you submit it. I did it in pre-coffee days and it was horrible. CoffeeScript made it a little better, but it was still a pain.

I don't know when I discovered Stimulus, but I spent about 4 months a few years ago converting my CoffeeScript to stimulus controllers and css from Zurb Foundation to plain old W3.css. Since then I've biting on Tailwind and have one app partially converted to a mixture.

Both Stimulus.js and Tailwind is being pushed as almost the default paths - and probably the best.

I decided to replicate the DHH screen cast on Rail 7 and tried the three approaches. I only have two imported stimulus packages stimulus-flatpickr which is a wrapper on pure flatpickr.js, and stimulus-autocomplete which is a search and select widget. They were my test cases on how rails 7 was going to fit in.

Import Maps - default
- Worked okay but Tailwind didn't have any customization that I could find. You can't add colors or components, etc.
- With a little work and finding a stimulus 3.x branch I got stimulus.flatpickr.js to work. Couldn't get stimulus-autocomplete.js to work.
ESbuild
- Almost like webpacker, which is a pain in the ass. You still have all the yarn stuff, but there are no packs, you're just using yarn to add JS packages then import what you need.
- stimulus-flatpicker semi-worked, but I couldn't get the flatpickr.css to load. If you take the default tailwind.css path, there seemed to be no way to add other css files. I posted an issue on rails about this and someone pointed out a way to have tailwind.css and application.css to be created, but you are limited to two with this approach - that left my w3.css out without a kludge.
- stimulus-autocomplete did not work - which the main reason for this post
webpacker
- no thanks - will be glad to get rid of it. It worked, but once you went through the pain of getting it to work, you didn't want to change anything.

Enough history, there is always a way to solve problems - like replacing stimulus-autocomplete. Stimulus-autocomplete is almost a pure JS program (in a stimulus controller) that uses another stimulus-controller to fire it off. It is rather simplistic - at least now, but was confusing when I first tried to use it.

You use an html markup to register the application (or slim in my case, I understand indented/hierarchical lists a lot better than tags. The template contains 5 parts

a wrapper block that defines the controller
an input tag that is the text field to enter what you are searching for
a hidden input tag that stores the selected result after a result is selected (clicked)
a ui element where the query result will be displayed
a url that calls the search method that creates and returns li elements that match the input.

The search method is responsible to do the query and return li elements that contain ids, urls etc

After a few days of trying to replicate how stimulus-autocomplete worked in a stimulus controller I got it to do probably about 90% of what autocomplete does in about 60 lines of code

So I created a new rails app. Generated a demo controller with show, search and select methods. There is no database. A hash simulates a person model with only a name and id attribute.

show displays the base template in show view. The view also contains a flatpickr template and fontawsome icon to make sure at leasts those 3 things work in Rails 7. Methods, gems for fontawsome don’t work with ESBuild.
search does the query and return the li's
select just displays the results.

The demo controller:

class DemoController < ApplicationController
  def show
  end

  def display
    set_db
  end

  def search
    set_db
    @search_results = []
    @db.each do |k,n|
      if n[:name].downcase.index(params[:input].downcase)
        @search_results << [n[:name],k]
      end
    end
    return(render layout: false)
  end

  private

  def set_db
    names = %w(steve jan butch lori james Jamie Chappel drew sarrah poochie wimpie callie cammie momma peaks grouchie leftey rightey tigger).sort
    @db = {}
    names.each.with_index do |n,i|
      @db[i] = {name:n,id:i}
    end
  end

end

The autopickr template/markup that is contained in the show template

div[
  data-autopickr-url-value="/demo/search" 
  data-controller="autopickr"
  data-autopickr-slen-value="1"
  class=blueBox
  ]
  / just calling a helper blueBox to set tailwind classes for a simple button
  div
    = text_field_tag(:input,nil,
      data:{autopickr_target:"input", action:"autopickr#search" },
      placeholder:"Search...",class:"w-48 px-1 my-2",autofocus:true)
    / span = link_to('Pick',nil,data:{autopickr_target:"button"}, 
    / class:"bg-blue-500 hover:bg-blue-700 text-white font-bold mx-2 py px-2 rounded inline-block hidden")
  div = hidden_field_tag('selected_id',nil,
    data:{autopickr_target:"hidden",action:"change->autopickr#selected"})
  ul.text-black.bg-gray-100.max-h-72.divide-y.divide-fuchsia-300.overflow-scroll[data-autopickr-target="results"]

There are a few things I added. Stimulus had a few options, one was how many character should be enter before a search is triggered. I just added data-autopickr-slen-value="1" that you set to how many character will trigger a search. I also added a button that would trigger the display instead of clicking on the li. I have a couple uses where I'd have a button that would do more than just display the results (duplicate a ledger entery)

The controller search menthod renders demo/search.html.erb that generates the li's

<% @search_results.each.with_index do |result| %>
  <li class="hover:bg-blue-100 p-1" role='option' data-action="click->autopickr#select" data-select-id="<%= result[1] %>"
    data-select="/demo/display?id=<%= result[1] %>" > <%= result[0] %></li>
<% end %>

The stimulus controller

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input",'results','hidden','selected','button']
  static values = { url: String ,slen: Number}

  connect() {
    console.log("Hi autopickr")
    let slen  // slen is the number of charcters entered before we search/query
    if (this.hasSlenValue) {
      this.slen = this.slenValue
    }else{
      this.slen = 1
    }
    this.inputTarget.click() // activate the autofocus target
  }

  select(){
    const selected = event.target
    if (this.hasButtonTarget) {  // if there is a button target, display instead of following url
      this.buttonTarget.classList.remove('hidden')
      this.buttonTarget['href'] = selected.dataset.select
    }else{
      location.assign(selected.dataset.select)
    }
  }

  selected(){
    this.clear_results()
  }

  clear_results(){
    while (this.resultsTarget.firstChild) {
      this.resultsTarget.removeChild(this.resultsTarget.firstChild);
    }
  }

  async search(){
    var len = this.inputTarget.value.length
    if (len >= this.slen) { 
      let response = await fetch(this.urlValue+`?input=${this.inputTarget.value}`);
      let data = await response.text();
      let frag = document.createRange().createContextualFragment(data);
      this.clear_results()  // set result to no children
      this.resultsTarget.appendChild(frag) // rebuild the results
    }
  }
}

I put the demo app on GitHub

WhatsitToYou - Back to the Past!

Steve Alex — Tue, 02 Mar 2021 15:16:20 +0000

Whatsit! or Wow! Howd All That Stuff Get In There!! was a command line database program I first saw at the 1978 West Coast Computer Fair. I think I actually bought it and was amazed by what it could do. I had made several attempts over the years to replicate it using RoR, but only got so far. It was always a learning attempt, not something that I had any real use for. I decided to make another attempt, but going back to original command line interface.

It was just one of many "Index Card" type applications of the time. It was followed years later with HyperCard, Frontier and other scripting languages. It was meant for you to store your important information, providing it conformed to a Subject, Tag, Value type system (a classic join table, with the Tag joining the Subject and Value). It was not meant as a group database, but just someplace to put your stuff.

I meant to try to learn Turbo and Hotwire , but that ended up failing because it was above my head, especially without any real examples how to implement it. I just stuck with Stimulus.js. I did a few things that may seem strange. I think when I played with it about 8 years ago I was attempting to use an ancestry type approach, parent, child type stuff. I only use two tables instead of the classic 3, but have three models.

My bare model (without the methods displayed), are as follows:

class Subject < ApplicationRecord
  has_many :relations, dependent: :destroy
  has_many :values, through: :relations 
end

class Relation < ApplicationRecord
  belongs_to :subject, class_name: 'Subject', foreign_key: :subject_id
  belongs_to :value, class_name: 'Value', foreign_key: :value_id
end

class Value < Subject
  has_many :relations, class_name: 'Relation', foreign_key: :value_id, dependent: :destroy
  has_many :subjects, through: :relations
end

To create a new 3Tuple (always wanted to use the word Tuple after reading the early Relational Database books!) you'd type something like

Steve's child's Lori

If it didn't find and display the tuple you'd be prompted to confirm you want to create a new Tuple. If you respond with a yes, two subjects would be created (Steve and Lori), and a relation child would be created linking the subject_id to Steve and the value_id to Lori. Now if you did another Tuple

Lori's child's Sarrah

only a value record for Sarrah would be create and a relation record linking them.

The name: is the only attribute in the Subject/Value records. All name's are queried case insensitive using arel match queries.

That's the ancestry side of the application, although I don't thing Ancestry.com has anything to worry about!

As just a index card style application, you'd enter things like:

Lori's homePhone's 888.555.1212
Lori's cellPhone's 888.555.1213
lori's doctor appointment's Tuesday Feb 9th at 8:30AM's

Now if this in not going Back to the Past I don't know what is. The 's are optional for single word attributes but are required for multi-word attributes like home phone. The What's and Who's commands in the original program are also optional. There are other commands:

Forget's [subject,ralation,value] word will delete stuff
Change's [subject,ralation,value] word to word will change stuff
Dump's dumps the entire database tuples
Subject's lists the subject names
Value's list the value names
Relation's list the relation names (unique)
Family's word dumps all relations (the family tree) for the word

On the console/terminal side, the console is just a div that is contains the data-controller-whatsit, and a prompt div that contains in input field that has a stimulus data_action change->search that responds to a onchange event. If changed, it sends the value of the input field as a param to the controller's new.js action with Rail.ujs.

The controller initializes a new Whatsit class, stuffs the parameters in the class and calls a Whatsit helper method whatsit_actions. The helper is the traffic cop. Based on the parameters:

It will call a search method with the query
- If it responds with an array, it will be the results of the query or an Error(s)
- If it responds with a string it's probably to build a confirm prompt
It will call a do_something method if the parameters contain a confirm method and the response was y
- The input will have a data-action that is a structured string the contains the query it was responding to
It will always end by creating a new prompt at the end of the console div

Stimulus Controller

The stimulus controller basically:

Builds the parameters for the ajax call
Moves the cursor (caret) to the last input field
Scrolls the console div to the bottom (by focusing on the last input field)

import { Controller } from "stimulus"
import Rails from '@rails/ujs';

export default class extends Controller {

  static targets = ["console",'query','input_node']

  connect() {
    this.moveCursor()
  }

  search(){
    const tuple_node = event.target
    this.query(tuple_node)    
  }

  clear() {
    this.consoleTarget.innerHTML = '<span>WhatsitToYou?&nbsp;</span><input data-whatsit-target="input_node" data-action="change->whatsit#search">'
    this.moveCursor()
  }

  moveCursor(){
    const inpts = this.consoleTarget.querySelectorAll('input')
    const last = inpts[inpts.length -1]
    last.focus()
  }

  query(tuple){

    const cls = tuple.className
    const val = tuple.value
    const confirm = tuple.dataset.confirm
    const qry = this.queryTarget.value
    this.queryTarget.value = val
    var url
    if (confirm == undefined) {
      url = `/whatsit/new.js?search=${encodeURI(val)}&action_type=${cls}`
    }else {
      url = `/whatsit/new.js?confirm=${encodeURI(confirm)}&action_type=${cls}&resp=${val}`
    }
    Rails.ajax({
      url: url,
      type: "get",
      success: function(data) {
        const viewer = document.getElementById('query_results')
        // const last_query = document.getElementById('last_query')
        const inputs = viewer.querySelectorAll('input')
        const inputs_length = inputs.length
        // var prev = inputs[inputs_length - 2]
        var last = inputs[inputs_length - 1]
        // prev.value = last_query.value
        last.focus()
      }
    })
  }

}

One of my goals on this project (that took a week! Guess I knew less that I thought) was to work on writing better Ruby code. Unfortunately, thought I got better, there is still some Steve code

That's What's it's is. I don't think it has any life other than for me to add a learning experience.

If interested, I put the demo code on github. It also contains a demo for a past post A rudimentary Stimulus WYSIWYG markdown editor

A rudimentary Stimulus WYSIWYG markdown editor

Steve Alex — Tue, 02 Feb 2021 15:55:21 +0000

After about a month of refactoring one of my Rails applications, I though I should document what all I did. I first started to write in a .md document using Sublime Text. After few paragraphs I previewed what little I wrote. This back and forth was going to be a pain and I though, maybe I should add a javascript markdown editor.

I did a quick search and found a few from the 10 best.. or 7 best posts. Half of them had not been changed in years. I've been using Stimulus for about a year after about a four month effort of de-jQuering three applications. That included getting away from CSS frameworks that relied on jQuery (Zurb Foundation in my case) and just using the simplistic but effective W3.CSS. I did another quick search for stimulus javascript editor and up popped a link Build a Markdown Editor in Stimulus.js like in Vue.js.

I thought this was amazing - a WYSIWYG editor with a 4 line HTML template and an 8 line Stimulus controller! Of course it used a javascript package marked to do the heavy lifting.

I threw the 12 lines in a demo page, after changing to slim, and it worked. Wow I said, but it does not have any of the little buttons for Bold, List, etc. Well I didn't have anything else to do yesterday (or wanted to do!), so I started tinkering.

The HTML grew to about 24 lines, most of it for the added buttons (just abbreviated text buttons - missing a few).

.w3-container[data-controller="marked" style="max-height: 90vh;"]
  h3 Marked Demo
  .w3-row-padding
    .w3-half
      = tag.button('B', data:{action:"click->marked#bold"})
      = tag.button('I', data:{action:"click->marked#italic"})
      = tag.button('BI', data:{action:"click->marked#italicBold"})
      = tag.button('H1', data:{action:"click->marked#h1"})
      = tag.button('H2', data:{action:"click->marked#h2"})
      = tag.button('H3', data:{action:"click->marked#h3"})
      = tag.button('H4', data:{action:"click->marked#h4"})
      = tag.button('H5', data:{action:"click->marked#h5"})
      = tag.button('H6', data:{action:"click->marked#h6"})
      = tag.button('BQ>', data:{action:"click->marked#backQuote"})
      = tag.button('BT`', data:{action:"click->marked#backTick"})
      = tag.button('UL', data:{action:"click->marked#ul"})
      = tag.button('OL', data:{action:"click->marked#ol"})
      = tag.button('FC', data:{action:"click->marked#fencedCode"})
      = tag.button('LK', data:{action:"click->marked#anchor"})
      = tag.button('IM', data:{action:"click->marked#image"})
      = tag.textarea('', data:{action:"input->marked#convertToMarkdown change->marked#convertToMarkdown",marked_target:"markup"},style:'width:100%;height:75vh;')
    .w3-half
      = tag.button('Rendered Markdown')
      = tag.div('',data:{marked_target:'viewer'},style:"border:solid black 1px;height:75vh;overflow:scroll;")

The controller grew to about 160 lines, most of it in a getInputSelection function that I found. I can't find the link in my history, but did find the jsfiddle page.

import { Controller } from "stimulus"
import marked from 'marked/lib/marked.js'

export default class extends Controller {

  static targets = ["viewer","markup"]

  connect() {
  }

  convertToMarkdown(event) {
    this.viewerTarget.innerHTML = marked(event.target.value, {sanitized: true})
  }

  trigger(){
    var chg = new Event('change',{ bubbles: true })
    this.markup.dispatchEvent(chg)
    // marked does not pick up js insertions, trigger a change
  }


  h1() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n# '+selected)
  }

  h2() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n## '+selected + ' ')
  }

  h3() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n### '+selected)
  }

  h4() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n#### '+selected)
  }

  h5() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n##### '+selected)
  } 

  h6() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    this.insert('\n###### '+selected)
  } 

  bold() {
    this.wrap('**')
  }

  italic() {
    this.wrap('*')
  }

  italicBold() {
    this.wrap('***')
  }

  backTick(){
    this.wrap('`')
  }

  ul() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = "\n* " + selected.replace(/\n/g,"\n* ")
    this.insert(selected)
  }

  ol() {
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = "\n1. " + selected.replace(/\n/g,"\n1. ")
    this.insert(selected)
  }

  fencedCode(){
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = "```

lang\n " + selected + "\n

```"
    this.insert(selected)
  }

  anchor(){
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = "[" + selected + "]" + '(http://...)'
    this.insert(selected)
  }

  image(){
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = "![" + selected + "]" + '(path/to/img.jpg)'
    this.insert(selected)
  }

  backQuote(){
    var selected = this.markup.value.substring(this.range.start,this.range.end)
    selected = ">" + selected
    this.insert(selected)
  }

  get markup() {
    return this.markupTarget
  }

  get range(){
    return this.getInputSelection(this.markup)
  }

  insert(selected){
    const len = this.markup.value.length
    this.markup.value = this.markup.value.substring(0,this.range.start) + selected + this.markup.value.substring(this.range.end,len)
    this.trigger()
  }

  wrap(wrapper){
    const len = this.markup.value.length
    const wrapie = wrapper + this.markup.value.substring(this.range.start,this.range.end) + wrapper
    this.markup.value = this.markup.value.substring(0,this.range.start) + wrapie + this.markup.value.substring(this.range.end,len)
    this.trigger()
  }

  getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");
            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());
            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
  }

}

Well I felt proud of myself - but I ended up using sublime text to write this!! I did use the editor to tweak and add some stuff.

Stimulus is really amazing for someone who had a lot of problems with early rails javascript - made it through coffeescript - and now feel comfortable with stimulus and the little es6 javascript sprinkles.