☺︎

April 01, 2022

Setting default url options

If you are managing an application that has a staging version, you will need to point default_url_options[:host] to the correct host domain. If not, features that depend on host domains(i.e. uploading to cloudinary or sending out an email from your application)will not work.

# application_controller.rb
def set_default_url_option
  if ENV["HOST"]
    {host: ENV["HOST"]}
  elsif Rails.env.production?
    {host: 'https://app-name.com'}
  else
    {:host => "localhost", :port => "3000"}
  end
end

Set env variable in your staging app

heroku config:set --app app_name_staging HOST="https://staging.app-name.com"

February 24, 2022

A hotwired to-do list

I recently had a job interview for a Junior Rails role with a company. I was tasked to complete one of three exercises, one of which was a to-do list. I decided to utilize hotwire in order to expand my understanding of it.

February 19, 2022

Set alias for a project

I’m working on a Rails 6 project that is still dependent on sprockets. Which means I am often clobbering and precompiling when cleaning up on CSS styling. Setting up aliases help me save time.

alias rap='bin/rails assets:precompile && bin/rails s'
alias rac='bin/rails assets:clobber && bin/rails assets:precompile && bin/rails s'

Update–

You might not have to clobber and pre-compile. It may be an issue with a webpacker dependency. To fix, try deleting public/packs and public/assets.

February 15, 2022

Turbo stream responses with request.js

I’ve been tinkering with request.js and it’s quite magical. From the client, we can make make typical REST requests get, post, put, patch, destroy. We can even deliver a turbo-stream response. By adding responseKind: "turbo-stream" to the options config, you can receive some_action.turbo_stream.erb. When hooked with a stimulus controller, the implementation is easier than you would imagine.

<!-- pages/index.html.erb -->
<div class="flex flex-col" data-controller="activity">
  <div>
    What would you like to do?
    <%= select_tag "activity",
                   options_for_select(@options),
                   { include_blank: true,
                     data: { activity_target: "input",
                             url: what_to_do_path,
                             action: "change->activity#select" } } %>
  </div>
  <div>
    <div data-activity-target="loading" class="hidden">Loading...</div>
    <%= turbo_frame_tag "option" %>
  </div>
</div>

In the stimulus controller I import get from the request.js library. When a change event is triggered on the select tag, select() makes a get request. Notice how I use new URLSearchParams to append the param to the url. You can also return a Promise object with your request.

// javascript/controllers/activity_controller.js
import { Controller } from "@hotwired/stimulus"
import { get } from "@rails/request.js"

export default class extends Controller {
  static targets = [ "loading", "input" ]

  select(event) {
    let url = this.inputTarget.dataset.url
    let body = document.getElementById("option")
    let params = new URLSearchParams()
    params.append("option", this.inputTarget.value)


    this.loadingTarget.classList.remove("hidden")
    body.textContent = ""

    const request = get(`${url}?${params}`, { responseKind: "turbo-stream" })
    request.then((response) => {
      this.loadingTarget.classList.add("hidden")
    })
  }
}

From the controller, in your respond_to specify the turbo_stream format.

# controllers/pages_controller.rb
def what_to_do
  @result = params[:option]
  sleep 0.5
  respond_to do |format|
    format.turbo_stream
  end
end

And finally, deliver HTML over the wire with your turbo_stream ☺︎

# views/pages/what_to_do.turbo_stream.erb
<%= turbo_stream.replace "option" do %>
  <%= turbo_frame_tag "option" do %>
    <% unless @result.blank? %>
      Then you should <%= @result.downcase %>!
    <% end %>
  <% end %>
<% end %>

February 12, 2022

Dark mode your webpage with CSS

A really simple way to apply dark mode on your webpage is including a CSS media query. The browser checks the users system display settings and sets accordingly. ☺︎

@media (prefers-color-scheme: dark) {
  body { background: black; color: white; }
  h1, h2, h3 { @apply text-yellow-500 }
  a { @apply text-yellow-500 hover:text-yellow-600 }
}
Discover more writings