Ruby on Rails 6: Learn 25+ gems and build a Startup MVP 2020

0 AWS Cloud9

# All AWS C9 envments
https://eu-central-1.console.aws.amazon.com/cloud9/home?region=us-east-1

# Instance management
https://console.aws.amazon.com/ec2/home?region=eu-central-1#Instances:sort=instanceId

# Create AWS C9 environment
https://eu-central-1.console.aws.amazon.com/cloud9/home/create

Setting - set tabs to 2
Ctrl+E to search file
Alt+T - new terminal
Alt+W - close current tab
Ctrl+] - next tab
Ctrl+[ - prev tab
Ctrl+D - delete current line of code

Increase AWS storage size
https://docs.aws.amazon.com/cloud9/latest/user-guide/move-environment.html#move-environment-resize

//clean webpacker
bin/rails webpacker:clean
bin/rails tmp:clear
bin/rails log:clear

1 Install RoR 6

# install latest version of Ruby, Rails, Postgresql, Yarn, Webpacker
rails -v
ruby -v
rvm list
rvm install ruby-2.7.2
rvm --default use 2.7.2
rvm uninstall 2.7.1
rvm uninstall 2.7.0
rvm uninstall 2.6.3
rvm uninstall 2.6.5
gem install rails -v 6.0.3.4
gem update rails
gem update --system
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install postgresql libpq-dev redis-server redis-tools yarn
ruby -v
rails -v
pg_config --version

2 Create app, configure PostgreSQL

# create rails app
rails new myappname --database=postgresql
cd myappname
bundle
yarn

# postgresql setup
sudo su postgres
createuser --interactive
ubuntu
y 
exit

# to make the server work, add the url to development.rb
config.hosts << "2b8c1faf3a934c25b7e01d446161bfff.vfs.cloud9.us-east-1.amazonaws.com"

# start server
rails db:create 
rails db:migrate
rails s

2 Install RoR5

#Ruby on Rails
rvm install ruby-2.7.1
rvm --default use 2.7.1
rvm uninstall 2.6.5
rvm uninstall 2.6.6
rvm uninstall 2.6.3
gem install rails -v 5.2.4.3

#Postgresql
sudo apt install postgresql libpq-dev
sudo su postgres
createuser --interactive
ubuntu
y 
exit

3 github

http://github.com/

git config --global user.name "Yaro"
git config --global user.email [email protected]

git init
git status
git add -A
git commit -m 'initialize app'
# https://github.com/new
git remote add origin https://github.com/yshmarov/rubygems.git
git push -u origin master

// delete last commit from github
git reset HEAD^ --hard
git push -f

// git uncheck last commit
git reset --soft HEAD~1

// git reset to specific commit
git reset --hard c14809fa

// forward-moving undo last commit 
git revert HEAD
git add -A
git commit -m 'undo last commit'

// forward-moving undo commit-before-last-commit 
git revert HEAD~1
git add -A
git commit -m 'undo commit-before-last-commit'

//check to which repo you are connected
git remote -v
//set remote repo
git remote set-url origin https://github.com/yshmarov/edurge.git

Git branches:
//Create branch
git checkout -b "i18n"
//Show all branches: 
git branch
//Switch to master 
git checkout master
//Merge "i18n" with master 
git merge i18n
//Delete "i18n" branch 
git branch -D i18n

//pull remote branch
git fetch origin stripe2
git checkout -b stripe2 origin/stripe2

4 Install Heroku and push

http://heroku.com/

# creating the first page
rails g controller home index
# Add the following line to routes.rb
root 'home#index'

git add -A
git commit -m 'add home index controller'

# installing heroku
npm uninstall -g heroku-cli
sudo snap install heroku --classic
npm install -g heroku
heroku create
heroku buildpacks:add heroku/ruby
git remote -v
git push heroku master
heroku run rake db:migrate

# if you want to connect to an existing heroku app
heroku git:remote -a yourappnamegoeshere

# see logs
heroku logs --tail
# to run console activerecord commands
heroku run rails c
# restart
heroku restart

# log into heroku from console
heroku login -i

# clone app from heroku to local
heroku git:clone -a bobablack

action_text!

https://edgeguides.rubyonrails.org/action_text_overview.html

// Console
rails action_text:install

// application.js
require("trix")
require("@rails/actiontext")

// actiontext.scss
@import "trix/dist/trix";

// application.scss
@import "./actiontext.scss";

// app/models/course.rb
class Course < ApplicationRecord
  has_rich_text :description
end

// app/views/courses/_form.html.erb
<%= f.label :description %>
<%= f.rich_text_area :description %>

add alerts and notices

// application.html.haml
= render 'layouts/messages'

// _messages.html.haml
- flash.each do |name, msg|
  - if msg.is_a?(String)
    %div{:class => "alert alert-#{name.to_s == 'notice' ? 'success' : 'danger'}", :role => "alert"}
      %button.close{"aria-hidden" => "true", "data-dismiss" => "alert", :type => "button"} ×
      = content_tag :div, msg, :id => "flash_#{name}"

basic search in navbar

// courses_controller.rb

def index
  if params[:title]
    @courses = Course.where('title ILIKE ?', "%#{params[:title]}%") #case-insensitive
  else
    @courses = Course.all
  end
end

// _header.html.haml

.form-inline.my-2.my-lg-0
  = form_tag(courses_path, method: :get) do
    .input-group
      = text_field_tag :title, params[:title], autocomplete: 'off', placeholder: "Find a course", class: 'form-control-sm'
      %span.input-group-append
        %button.btn.btn-primary.btn-sm{:type => "submit"}
          %span.fa.fa-search{"aria-hidden" => "true"}

credentials

CREATE CREDENTIALS & EDIT

rails credentials:edit 
EDITOR=vim rails credentials:edit

WORKING WITH VIM

For inserting
Press i //Do required editing
For exiting
Press Esc
:wq //for exiting and saving
:q! //for exiting without saving

FIND A CREDENTIAL

rails c
Rails.application.credentials.dig(:aws, :access_key_id)
or if an env variable is used
Rails.application.credentials[Rails.env.to_sym][:aws][:access_key_id]

In production:
heroku config:set RAILS_MASTER_KEY=123456789
or
heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

search by an attribute!

// courses_controller.rb

def index
  if params[:name]
    @courses = Course.published.approved.where('name ILIKE ?', "%#{params[:name]}%") #case-insensitive
    #@courses = Course.where('name LIKE ?', "%#{params[:name]}%") #case-sensitive
    #@courses = Course.where('LOWER(name) LIKE LOWER(?)', "%#{params[:name]}%") #make lowercase
  else
    @courses = Course.published.approved.all
  end
end

// in any view:

.form-inline.my-2.my-lg-0
  = form_tag(posts_path, method: :get) do
    .input-group
      = text_field_tag :name, params[:name], autocomplete: 'off', placeholder: "Find a post", class: 'form-control-sm'
      %span.input-group-append
        %button.btn.btn-primary.btn-sm{:type => "submit"}
          %span.fa.fa-search{"aria-hidden" => "true"}

useful snippets

//inline elsif
vote_text = current_user&.voted_for?(@post) ? "No" : "Yes"

wicked_pdf heroku

// gemfile:

gem 'wicked_pdf' #PDF for Ruby on Rails
gem 'wkhtmltopdf-binary', group: :development
gem 'wkhtmltopdf-heroku', group: :production

config/wicked_pdf.rb

WickedPdf.config ||= {}
WickedPdf.config.merge!({
  #YOUR CONFIG HERE
})

"describe" and "it" with minitest

  describe "foo" do
    it "bar" do
      assert User.admin?
    end
  end

    @talks = Talk.order("RANDOM()").excluding(@talk).limit(6)

<%= form.date_select(:valid_from, { order: [:day, :month, :year], use_month_numbers: true, prompt: { day: 'Day', month: 'Month', year: 'Year' }, }) %>

Rake tasks 101

heroku run rake import_my_stuff

# lib/tasks/import_data.rake

desc "adds activities data"
task import_my_stuff: :environment do
  require "csv"
  filename = Rails.root.join("data", "activities.csv")
  CSV.foreach(filename, headers: true) do |row|
    activity = Activity.find_by(name: row["name"])
      activity.update_attributes(row.to_hash)
end

rails assets:clobber

gem 'passwordless', github: 'mikker/passwordless', branch: 'master'
# inspect code from passwordless gem command:
# bundle open passwordless
# To open a bundled gem, set $EDITOR or $BUNDLER_EDITOR
# export EDITOR="code --wait"
# clear cached gems:
# bundle clean --force

gem "mygem", path: "/Users/yaroslavshmarov/Documents/GitHub.nosync/mygem"

onclick: "this.disabled=true;this.value='Sending, please wait...';this.form.requestSubmit();"

  root to: redirect("/orders")
  get "settings", to: redirect("/settings/filter")
  get "settings", to: redirect { |params, request|
    "/settings/filter?#{request.query_string}"
  }

rails new askvote -a=propshaft -d=postgresql -c=tailwind --main
rails new askvote -a=propshaft -c=tailwind --main

kill -9 $(ps -x | grep "Google Chrome" | awk "{print $1}")

Asset compilation

Normally we use bin/dev to run the server and dynamically compile assets.

If for some reason you ran rails assets:precompile, they will no longer compile dynamically (only when you restart).

Run rails assets:clobber to return asset compilation back to normal.

  config.i18n.raise_on_missing_translations = true
  config.action_view.annotate_rendered_view_with_filenames = true

create rails app on main branch rails new weblog --main

rails new askvote --main -d=postgresql -c=tailwind -a=propshaft

include Rails.application.routes.url_helpers

heroku git:remote -a corsego

Turbo Native, Strada

- add TurboNavigator plugin?
- ios routes (for modals /new & /edit)
- /new & /edit in turbo frame modal or new page?
- save user in cookies.permanent, not session
- strada - 
- devise auth is hard
- omniauth is hard
    should it rly be native?!
- data-turbo-action="replace" - to have back button go more than 1 lvl back

- try magic link authentication. cookies?session?
    register as a "universal link"

```shell
open ios/HikingJournal.xcodeproj

Learnings

• special viewport for turbo native apps
• do not show a footer if turbo_native_app

Useful links

• https://github.com/hotwired/turbo-ios/blob/main/Docs/QuickStartGuide.md
• https://github.com/hotwired/strada-ios
• https://github.com/joemasilotti/TurboNavigator/
• https://www.slideshare.net/slideshow/johnpollard-hybrid-app-railsconf2024-pptx/268167413

EDITOR='code --wait' bundle open turbo-rails
gems/turbo-rails-2.0.5/app/controllers/turbo/native/navigation.rb

    def browser_language
      request.env["HTTP_ACCEPT_LANGUAGE"]&.scan(/^[a-z]{2}/)&.first
    end

<table class="min-w-full md:divide-y md:divide-trezy-grey-200 relative">
	<thead class="bg-trezy-category-beige-100">
		<tr class="hidden md:table-row">
			<th scope="col" class="relative py-3.5 pl-3 pr-4 md:pr-6 rounded-tr-lg"></th>
		</tr>
	</thead>
	<tbody class="md:divide-y md:divide-trezy-grey-200 md:bg-white">
		<tr class="grid gap-x-2 pt-4 pb-2 px-3 md:px-0 md:py-0 grid-cols-[2rem,_1fr,_auto] md:table-row">
			<td class="hidden md:table-cell">
		</tr>
	</tbody>
</table>

    pdf = HexaPDF::Document.open(file_path)
    catalog = pdf.catalog
    doc = catalog[:Names][:EmbeddedFiles][:Names].value.last
    file = pdf.object(doc)
    xml = file[:EF][:F].stream

# "box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.7); background-blend-mode: saturation; background-image: linear-gradient(black, black), url('#{background_image_url}');"

https://www.shakacode.com/blog/identify-unused-routes-in-rails-7/
bin/rails routes --unused

https://github.com/rails/rails/blob/main/actionpack/lib/action_controller/metal/rate_limiting.rb

/* A couple handy classes for responsive YouTube and other iframe embeds */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

bundle add rename
rails g rename:into Myapp2

module DeviceFormat
  # Sets the request variant based upon the user agent
  #
  # For simplicity, we only register a "native" format for Turbo Native apps
  # but you may add others like "phone", "tablet" to render different partials
  # based upon the device

  extend ActiveSupport::Concern

  included do
    before_action :set_variant_for_device
  end

  private

  def set_variant_for_device
    if turbo_native_app?
      request.variant = :native
    end
  end
end

rails/app/views/layouts/_navbar.html+native.erb

  def viewport_meta_tag(content: "width=device-width, initial-scale=1", turbo_native: "maximum-scale=1.0, user-scalable=0")
    full_content = [content, (turbo_native if turbo_native_app?)].compact.join(", ")
    tag.meta name: "viewport", content: full_content
  end

frontent 10 commandments 7 deadly sins layout

<body class="flex h-screen">
  <aside class="hidden lg:flex flex-col justify-between bg-slate-400">
    <div>
      Widescreen sidebar top
    </div>
    <div>
      Widescreen sidebar bottom
    </div>
  </aside>
  <div class="flex-grow overflow-y-auto">
    <header class="sticky top-0 bg-rose-400">
      Header
    </header>
    <main>
      Page content
      <% 50.times do %>
        <div>abc</div>
      <% end %>
      <%= yield %>
    </main>
    <footer class="block lg:hidden sticky bottom-0 bg-rose-400">
      Mobile footer content
    </footer>
  </div>
</body>

brakeman -I