codesnips

511 code snips · on codesnips 28 days
ruby
class ProductsController < ApplicationController
  def index
    @products = Product
      .includes(:category)
      .order(created_at: :desc)
      .page(params[:page])

Fragment caching inside Turbo Frames (fast lists)

rails hotwire turbo
by codesnips 4 tabs
erb
<%# renders a lazy placeholder; real content arrives when scrolled into view %>
<div class="panel-card">
  <h3 class="panel-card__title"><%= title %></h3>

  <%= turbo_frame_tag dom_id(panel, :frame),
        class: "panel-card__body",

Lazy-load heavy panels with IntersectionObserver + Turbo frame

rails hotwire stimulus
by codesnips 3 tabs
erb
<%= turbo_frame_tag dom_id(flag) do %>
  <tr class="flag-row">
    <td class="flag-name"><%= flag.name %></td>
    <td class="flag-env"><%= flag.environment %></td>
    <td class="flag-state">
      <span class="badge badge--<%= flag.enabled? ? 'on' : 'off' %>">

Admin “quick toggle” with Turbo Streams and a single partial

rails hotwire turbo
by codesnips 4 tabs
erb
<div class="layout" data-controller="sidebar">
  <aside class="sidebar">
    <%= render "shared/sidebar", active: params[:controller] %>
  </aside>

  <main class="content-area">

Scoped navigation inside a sidebar with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: "User"

  validates :body, presence: true, length: { maximum: 5_000 }

Declarative model broadcasts with broadcasts_to (Rails 7)

rails hotwire turbo
by codesnips 4 tabs
erb
<%= form_with url: autosave_draft_path,
              method: :post,
              local: false,
              data: {
                controller: "autosave",
                autosave_target: "form",

Autosave drafts with Stimulus + Turbo (lightweight)

rails hotwire stimulus
by codesnips 3 tabs
ruby
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create

Inline markdown preview using Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
ruby
class Task < ApplicationRecord
  POSITION_GAP = 1024

  belongs_to :board

  scope :ordered, -> { order(:position) }

Reorder a list server-side and reflect instantly with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
javascript
import { Application } from "@hotwired/stimulus"
import FormSubmitController from "./controllers/form_submit_controller"

const application = Application.start()
application.debug = false

Disable submit button while Turbo form is submitting

rails hotwire stimulus
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus";

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

  connect() {

Autofocus first input when a Turbo modal opens (Stimulus)

rails hotwire stimulus
by codesnips 3 tabs
ruby
Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo
by codesnips 4 tabs
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Request spec: Turbo Stream template is rendered

rails hotwire turbo
by codesnips 3 tabs