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
ruby
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

pin_all_from "app/javascript/controllers", under: "controllers"

Importmap setup for Stimulus controllers (Rails 7 style)

rails hotwire stimulus
by Henry Kim 2 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 { 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
<button
  data-controller="optimistic-toggle"
  data-optimistic-toggle-url-value="<%= post_star_path(post) %>"
  data-optimistic-toggle-on-text-value="Starred"
  data-optimistic-toggle-off-text-value="Star"
  data-optimistic-toggle-on-class-value="bg-yellow-400"

Optimistic toggle button with Stimulus “revert on failure”

rails hotwire stimulus
by Henry Kim 2 tabs
erb
<div data-controller="autofocus">
  <%= render 'form', post: @post %>
</div>

Autofocus first input when a Turbo modal opens (Stimulus)

rails hotwire stimulus
by Henry Kim 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"
import { NotificationsApi } from "notifications_api"

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

Stimulus: intersection observer for “mark as read”

rails stimulus hotwire
by codesnips 3 tabs
erb
<time data-controller="time-ago" datetime="<%= post.created_at.iso8601 %>">
  <%= post.created_at.to_fs(:short) %>
</time>

Time-ago formatting with Stimulus (no heavy date libs)

rails hotwire stimulus
by Henry Kim 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

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

  validateField(event) {

Form validation with Stimulus and server-side errors

stimulus forms validation
by Jordan Lee 2 tabs
ruby
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = @post.likes.find_or_create_by(user: current_user)

Turbo Streams: optimistic UI for likes with disable-on-submit

rails turbo stimulus
by codesnips 3 tabs