javascript

Promises represent eventual completion or failure of asynchronous operations. I create promises with new Promise((resolve, reject) => {}) executor function. The .then() method chains successful results while .catch() handles errors. Using .finally(

Power users appreciate keyboard shortcuts that speed up common actions. I integrate the Mousetrap library via Stimulus to define app-wide shortcuts like cmd+k for search, c to compose, or ? to show help. The controller binds shortcuts on connect and u

The Canvas API provides a drawable bitmap surface for graphics. I use <canvas> elements with 2D rendering context via getContext('2d'). Drawing methods include fillRect(), strokeRect(), arc(), and lineTo(). The save() and restore() methods manag

Event listeners attach handlers to DOM elements using addEventListener(). I specify event type like click, input, submit with handler function. The event object contains information about the triggered event. Using event.preventDefault() stops default

The Fetch API provides modern interface for HTTP requests returning promises. I use fetch(url) to make GET requests that resolve with Response objects. The response.json() parses JSON data asynchronously. POST requests need method, headers, and body o

Sometimes the DOM updates but the browser tab title stays stale (e.g., unread count, active chat room). A neat Hotwire trick is a custom Turbo Stream action that sets document.title. The server emits a <turbo-stream action='set_title'> with a te

SVG (Scalable Vector Graphics) creates resolution-independent graphics. I manipulate SVG elements with DOM methods like createElementNS(). Attributes control SVG properties: setAttribute(), getAttribute(). Animations use CSS or SMIL for declarative ef

ES6 modules organize code into separate files with export and import statements. I use export default for single main export and export { name } for named exports. The import { name } from './module.js' syntax imports specific exports. Using import *

Outlets allow Stimulus controllers to reference and communicate with other controller instances, enabling composition without tight coupling. I define outlets by specifying which controller types to connect to, and Stimulus automatically finds matchin

Progressive Web Apps (PWAs) combine web and native app features. I register service workers to intercept network requests and enable offline functionality. The service worker lifecycle includes install, activate, and fetch events. Cache API stores ass

When appending new content (like a new message), I sometimes want to scroll it into view automatically. Rather than adding JS in the controller, I use a custom turbo stream action scroll_into_view that finds the target element and calls scrollIntoView

DOM manipulation modifies HTML structure using JavaScript methods like createElement(), appendChild(), and removeChild(). I minimize reflows by batching DOM changes together. Using DocumentFragment groups multiple changes before inserting into DOM. Th