javascript

javascript
// Basic try-catch
try {
  const result = riskyOperation();
  console.log('Success:', result);
} catch (error) {
  console.error('Error occurred:', error.message);

Error handling and debugging techniques in JavaScript

javascript debugging error-handling
by Alex Chang 1 tab
erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Importmap setup for Stimulus controllers (Rails 7 style)

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

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

Debounced Search Suggestions With a Turbo Frame Lazy-Loaded Results Partial

rails hotwire turbo
by codesnips 4 tabs
javascript
let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

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

export default class extends Controller {
  static targets = ["wrapper", "template", "anchor"]

  add(event) {

Stimulus: nested fields add/remove without re-rendering

rails stimulus hotwire
by codesnips 4 tabs
javascript
import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Basic Context
const UserContext = createContext(null);

function UserProvider({ children }) {

State management with Context API and Redux patterns

react redux state-management
by Alex Chang 2 tabs
javascript
import { useCallback, useMemo, useState } from 'react';

function compare(a, b) {
  if (typeof a === 'number' && typeof b === 'number') return a - b;
  return String(a ?? '').localeCompare(String(b ?? ''));
}

Building a Paginated, Sortable Data Table with a useTable Hook in React

react hooks pagination
by codesnips 3 tabs
javascript
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {
    if (typeof window === 'undefined') return initialValue;
    try {

Persist a React Shopping Cart to localStorage with a Context Provider

javascript react context
by codesnips 3 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
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 { 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
javascript
const withTimeout = (promise, timeoutMs, name) => {
  let timer;
  const timeout = new Promise((_, reject) => {
    timer = setTimeout(
      () => reject(new Error(`check '${name}' timed out after ${timeoutMs}ms`)),
      timeoutMs

Express Health-Check Router With a Pluggable Dependency Checks Registry

express health-check observability
by codesnips 3 tabs