javascript

erb
<%= form_with model: @document, data: { controller: "upload" } do |form| %>
  <div class="field">
    <%= form.label :file, "Attach a document" %>
    <%= form.file_field :file,
          direct_upload: true,
          data: { upload_target: "input" } %>

Active Storage direct upload progress with Stimulus

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

export default class extends Controller {
  static targets = ["input"]
  static values = { wait: { type: Number, default: 300 }, url: String }

Stimulus: debounced search that plays nicely with Turbo

rails stimulus hotwire
by codesnips 3 tabs
javascript
// 1. localStorage basics
// Store data
localStorage.setItem('username', 'alex');
localStorage.setItem('theme', 'dark');

// Retrieve data

LocalStorage, SessionStorage, and IndexedDB

javascript localstorage indexeddb
by Alex Chang 1 tab
javascript
// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first, second); // 1 2

// Skip elements

ES6+ features: destructuring, spread operator, and template literals

javascript es6 destructuring
by Alex Chang 1 tab
typescript
// 1. Basic types
let username: string = 'Alex';
let age: number = 30;
let isActive: boolean = true;
let items: string[] = ['item1', 'item2'];
let numbers: Array<number> = [1, 2, 3];

TypeScript fundamentals for type-safe front-end code

typescript javascript types
by Alex Chang 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
javascript
// 1. Basic WebSocket connection
const socket = new WebSocket('wss://example.com/ws');

// Connection opened
socket.addEventListener('open', (event) => {
  console.log('Connected to WebSocket server');

WebSockets for real-time bidirectional communication

websockets real-time javascript
by Alex Chang 1 tab
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.highlight = function () {
  const className = this.getAttribute("data-highlight-class") || "flash-highlight"
  const duration = parseInt(this.getAttribute("data-highlight-duration"), 10) || 1500

Custom turbo_stream action tag: highlight an updated element

rails hotwire turbo
by codesnips 4 tabs
javascript
// ES6 Class syntax
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

JavaScript classes and prototype-based inheritance

javascript classes oop
by Alex Chang 1 tab
javascript
import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["input", "preview", "status"]
  static values = {

Stimulus controller for drag-and-drop file uploads

stimulus javascript file-uploads
by Jordan Lee 2 tabs
javascript
// Sample data
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true },

Array methods: map, filter, reduce, and functional programming

javascript arrays functional-programming
by Alex Chang 1 tab
rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

wasm-bindgen for Rust to JavaScript interop in WebAssembly

rust wasm webassembly
by Marcus Chen 1 tab