javascript

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
ruby
# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
  def subscribed
    # Subscribe to a specific room
    room = Room.find(params[:room_id])

ActionCable for real-time WebSocket communication

ruby rails actioncable
by Sarah Mitchell 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["bar", "percent", "status"]
  static values = {
    current: { type: Number, default: 0 },

Progress indicators for long-running operations

hotwire stimulus actioncable
by Jordan Lee 3 tabs
javascript
// Basic GET request
fetch('https://api.example.com/users')
  .then(response => {
    console.log('Status:', response.status);
    console.log('OK:', response.ok);
    return response.json();

Fetch API for HTTP requests and AJAX communication

javascript fetch api
by Alex Chang 1 tab
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu", "overlay", "toggle"]

  toggle() {

Mobile-first responsive navigation with Stimulus

stimulus responsive mobile
by Jordan Lee 2 tabs
javascript
// Express app with health checks and graceful shutdown
const express = require('express');
const { createServer } = require('http');

const app = express();
const server = createServer(app);

Container health checks and graceful shutdown patterns

docker kubernetes health-checks
by Ryan Nakamura 1 tab
javascript
import { Controller } from "@hotwired/stimulus"

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

  connect() {

Toast notifications with Stimulus and Tailwind

stimulus ux notifications
by Jordan Lee 3 tabs
javascript
import { sha256 } from './crypto.js';

const codeVerifier = crypto.randomUUID() + crypto.randomUUID();
sessionStorage.setItem('pkce_verifier', codeVerifier);

const digest = await sha256(codeVerifier);

OAuth 2.0 Authorization Code with PKCE for public clients

oauth2 oidc pkce
by Kai Nakamura 1 tab
erb
<%= turbo_frame_tag 'audit_log', data: { controller: 'lazy-frame', lazy_frame_src_value: audit_log_project_path(@project) } do %>
  <div class="py-6 text-gray-500">Scroll to load audit log…</div>
<% end %>

Lazy-load heavy panels with IntersectionObserver + Turbo frame

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
javascript
// k6 Load Test Configuration
// Run: k6 run load-test.js --env BASE_URL=https://api.example.com

import http from 'k6/http';
import { check, sleep, group } from 'k6';
import { Rate, Trend, Counter } from 'k6/metrics';

Load testing APIs with k6 for performance validation

k6 load-testing performance
by Ryan Nakamura 1 tab
javascript
// 1. Create SVG elements
const svgNS = 'http://www.w3.org/2000/svg';

function createSVGElement(type, attributes = {}) {
  const element = document.createElementNS(svgNS, type);
  Object.entries(attributes).forEach(([key, value]) => {

SVG manipulation with JavaScript

svg javascript graphics
by Alex Chang 1 tab