erb
<%= form_with model: @profile do |form| %>
  <div
    class="field"
    data-controller="character-count"
    data-character-count-max-value="280"
  >

Character counter for textareas with Stimulus

rails hotwire stimulus
by codesnips 3 tabs
ruby
class SignupsController < ApplicationController
  def new
    @user = User.new
  end

  def create

Inline form validation feedback via Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
ruby
class PostsController < ApplicationController
  def index
    @posts = Post.published
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(20)

Infinite scrolling list using lazy Turbo Frames

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

export default class extends Controller {
  static targets = ["form"]
  static values = { delay: { type: Number, default: 250 } }

Debounced live search with Stimulus + Turbo Streams

rails hotwire stimulus
by codesnips 4 tabs
erb
<%# locals: item %>
<button
  type="button"
  class="toggle-btn"
  data-controller="toggle"
  data-action="click->toggle#toggle"

Optimistic toggle button with Stimulus “revert on failure”

rails hotwire stimulus
by codesnips 3 tabs
erb
<h1>Products</h1>

<%= link_to "New product", new_product_path, data: { turbo_frame: "modal" }, class: "btn" %>

<table id="products">
  <tbody>

Turbo Frame modal that renders server HTML

rails hotwire turbo
by codesnips 4 tabs
ruby
class ProductsController < ApplicationController
  before_action :set_product, only: %i[edit update]

  def index
    @products = Product.order(:name)
  end

Inline edit a table row with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
ruby
module FlashHelper
  FLASH_CLASSES = {
    "notice" => "flash--success",
    "alert"  => "flash--error",
    "error"  => "flash--error"
  }.freeze

Turbo Stream flash messages without custom JS

rails hotwire turbo
by codesnips 4 tabs
typescript
import axios from 'axios';

export type NormalizedErrors = {
  fields: Record<string, string>;
  formLevel: string | null;
};

Frontend: normalize and display server validation errors

ux typescript react
by codesnips 3 tabs
typescript
import { z } from "zod";

export const envSchema = z.object({
  VITE_API_URL: z.string().url(),
  VITE_APP_NAME: z.string().min(1).default("my-app"),
  VITE_ENABLE_ANALYTICS: z

Vite env handling: explicit prefixes only

vite frontend env
by codesnips 3 tabs
json
{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",

Prettier config for consistent formatting

tooling prettier formatting
by codesnips 3 tabs
javascript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';

export default [
  js.configs.recommended,

ESLint config that avoids bikeshedding

tooling typescript eslint
by codesnips 3 tabs