Jordan Lee

24 code snips · on codesnips 5 months

Rails frontend specialist with deep expertise in Hotwire (Turbo & Stimulus). Building fast, interactive UIs with minimal JavaScript. 7+ years crafting responsive, accessible...

ruby
class ApplicationController < ActionController::Base
  helper_method :turbo_native_app?

  private

  def turbo_native_app?

Turbo Native bridge for mobile hybrid apps

hotwire turbo-native mobile
by Jordan Lee 3 tabs
ruby
class ButtonComponent < ViewComponent::Base
  VARIANTS = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900",
    danger: "bg-red-600 hover:bg-red-700 text-white"
  }.freeze

ViewComponent for reusable UI components

rails viewcomponent components
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,

Stimulus controller for autosaving form drafts

stimulus forms ux
by Jordan Lee 2 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: 'User'

  # Automatically broadcast changes to all subscribers of this post
  after_create_commit -> { broadcast_append_to post, target: "comments" }

Turbo Stream broadcasts for real-time collaboration

hotwire turbo-streams actioncable
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field"]

  validateField(event) {

Form validation with Stimulus and server-side errors

stimulus forms validation
by Jordan Lee 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["sentinel"]
  static values = {
    url: String

Infinite scroll with Turbo Frames and Intersection Observer

hotwire turbo stimulus
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal", "message", "confirm", "cancel"]
  static values = {
    message: String

Turbo confirmation dialogs with custom modal

hotwire turbo stimulus
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["parent", "child"]
  static values = {
    options: Object,

Stimulus controller for dependent select dropdowns

stimulus javascript forms
by Jordan Lee 2 tabs
erb
<article class="post">
  <h1><%= @post.title %></h1>
  <%= simple_format @post.body %>

  <!-- Lazy load comments when scrolled into view -->
  <%= turbo_frame_tag "post_#{@post.id}_comments",

Lazy-loading Turbo Frames for performance

hotwire turbo performance
by Jordan Lee 3 tabs
ruby
class CommentsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.build(comment_params)
    @comment.author = current_user

Turbo Streams for real-time list updates

hotwire turbo turbo-streams
by Jordan Lee 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "counter"]
  static values = {
    max: { type: Number, default: 280 }

Stimulus controller for dynamic form interactions

stimulus javascript hotwire
by Jordan Lee 2 tabs
erb
<div class="post">
  <h1><%= @post.title %></h1>

  <%= turbo_frame_tag "post_#{@post.id}" do %>
    <div class="post-content">
      <%= simple_format @post.body %>

Turbo Frame for inline editing without page reloads

hotwire turbo turbo-frames
by Jordan Lee 2 tabs