Henry Kim

19 code snips · on codesnips 6 months

Rails specialist with a Hotwire-first frontend approach. I build fast, maintainable UIs with Turbo + Stimulus, keeping complexity low and shipping polish through server-rendered...

erb
<%= turbo_frame_tag 'quick_view' do %>
  <div class="text-gray-500">Select a post…</div>
<% end %>

<% @posts.each do |post| %>
  <%= link_to post.title, post_path(post), data: { turbo_frame: 'quick_view' }, class: 'block py-1 hover:underline' %>

Frame-powered inline “quick view” that falls back to full page

rails hotwire turbo
by Henry Kim 2 tabs
erb
<%= link_to 'Newest', posts_path(sort: 'new'), data: { turbo_frame: 'results', turbo_action: 'replace' } %>
<%= link_to 'Popular', posts_path(sort: 'popular'), data: { turbo_frame: 'results', turbo_action: 'replace' } %>

Hotwire-friendly “sort by” links that replace only the list

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class ActivityPanelController < ApplicationController
  def show
    @project = Project.find(params[:project_id])
    @events = @project.events.order(created_at: :desc).limit(50)

    latest = @events.maximum(:updated_at)

ETag + last_modified for expensive Turbo Frame endpoints

rails hotwire turbo
by Henry Kim 2 tabs
ruby
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_member

    def connect
      self.current_member = env['warden']&.user || reject_unauthorized_connection

Presence indicator with ActionCable + Turbo Streams

rails hotwire turbo
by Henry Kim 3 tabs
ruby
class NotificationsController < ApplicationController
  def mark_all_read
    current_member.notifications.unread.update_all(read_at: Time.current)

    streams = Turbo::Streams::TagBuilder.new(view_context)

Build Turbo Stream responses in the controller (TagBuilder)

rails hotwire turbo
by Henry Kim 2 tabs
erb
<%= turbo_stream.prepend 'items' do %>
  <%= render @item %>
<% end %>

<turbo-stream action="reset_form" target="new_item_form"></turbo-stream>

Custom Turbo Stream action: reset a form after success

rails hotwire turbo
by Henry Kim 3 tabs
ruby
class SupportMailbox < ApplicationMailbox
  def process
    ticket = Ticket.find_or_create_by!(message_id: mail.message_id) do |t|
      t.subject = mail.subject
      t.from_email = mail.from&.first
      t.body = mail.decoded

Action Mailbox: broadcast incoming emails into a feed

rails hotwire turbo
by Henry Kim 3 tabs
erb
<div data-controller="toast" data-toast-timeout-value="2500" class="rounded bg-gray-900 px-3 py-2 text-white">
  <div class="flex items-start justify-between gap-3">
    <div><%= message %></div>
    <button type="button" data-action="toast#close">✕</button>
  </div>
</div>

Stimulus toast auto-dismiss for Turbo-appended notifications

rails hotwire stimulus
by Henry Kim 2 tabs
erb
<turbo-stream action="set_title">
  <template><%= "Inbox (#{@unread_count})" %></template>
</turbo-stream>

Turbo Streams: update document title with a custom action

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class DashboardWidget < ApplicationRecord
  broadcasts_refreshes
end

Broadcasts refreshes for complex pages (less target wiring)

rails hotwire turbo
by Henry Kim 2 tabs
erb
<div id="image_preview">
  <%= render 'images/preview', record: @profile %>
</div>

Preview Active Storage uploads after attach using Turbo Streams

rails hotwire turbo
by Henry Kim 3 tabs
erb
<div data-controller="disclosure">
  <button type="button" data-action="disclosure#toggle" aria-expanded="false" class="font-medium">
    Advanced
  </button>
  <div data-disclosure-target="panel" class="mt-2 hidden">
    <%= render 'advanced_filters' %>

Collapse/expand UI with Stimulus that survives Turbo swaps

rails hotwire stimulus
by Henry Kim 2 tabs