Community Snippets — SaveSnippets

JavaScript Scroll to Element Smoothly

Scrolls the page to a target element with an optional pixel offset (useful when a fixed header is present). Uses the native scrollIntoView with smooth behaviour when supported, and falls back to a manual scrollTo with a configurable offset. Pass a CSS selector string or an Element reference.

#dom #scroll #animation #utils

@admin 7h ago

JavaScript IndexedDB Wrapper

A Promise-based wrapper for the IndexedDB API — simplifies the verbose request/onsuccess/onerror pattern into clean async/await calls. Supports get, set, delete, and getAll operations on a named object store. Ideal for storing large client-side datasets, offline data, and blobs that exceed localStorage limits.

#indexeddb #storage #offline #browser

@admin 7h ago

JavaScript Worker Pool (Web Workers)

Manages a pool of Web Workers for CPU-intensive tasks (image processing, crypto, parsing). Distributes tasks across available workers using a round-robin strategy and returns a Promise per task. Falls back gracefully to inline execution in environments where workers are unavailable.

#workers #concurrency #performance #advanced

@admin 7h ago

JavaScript JSON Fetch Wrapper

A thin wrapper around fetch that automatically serialises the request body to JSON, sets the Content-Type header, parses the response as JSON, and throws a descriptive error on non-OK responses. Covers the boilerplate needed for 95% of REST API calls in a single reusable function.

#fetch #api #http #utils

@admin 7h ago

JavaScript Base64 Encode & Decode (Unicode-safe)

Encodes and decodes strings to/from Base64. The native btoa/atob only handles Latin-1 characters, so these wrappers use TextEncoder/Uint8Array to handle the full Unicode range including emoji and CJK characters. Useful for encoding binary data, tokens, and payloads for URLs or localStorage.

#base64 #encoding #utils

@admin 7h ago

JavaScript Web Crypto — AES-GCM Encrypt & Decrypt

Encrypts and decrypts text using AES-GCM (256-bit) via the browser's native Web Crypto API — no external library needed. A random 96-bit IV is generated per encryption and prepended to the output so decryption can recover it. Suitable for encrypting sensitive data client-side before storage.

#crypto #security #encryption #webcrypto

@admin 7h ago

JavaScript Observable / Reactive State

A minimal reactive state container. Wrap any object with observable() and it returns a Proxy that notifies subscribers whenever a property is set. subscribe() registers a listener that receives the changed key and new value. A lightweight alternative to MobX or Vue's reactive() for small-scale reactivity needs.

#reactive #state #proxy #pattern

@admin 7h ago

JavaScript Detect Mobile / Device Type

Detects whether the user is on a mobile, tablet, or desktop device. The navigator.userAgentData API (Chromium) is preferred for its structured data; falls back to a User-Agent regex for Safari and Firefox. Useful for conditional rendering, touch event handling, and analytics segmentation.

#browser #mobile #detection #utils

@admin 7h ago

JavaScript Detect Dark Mode Preference

Reads the user's OS-level dark mode preference using the prefers-color-scheme media query and watches for live changes. Useful for initialising theme state before any user interaction and reacting automatically when the user switches their system theme without reloading the page.

#browser #theme #darkmode #utils

@admin 7h ago

JavaScript Rate Limiter (Token Bucket)

Implements a token-bucket rate limiter that allows a burst of calls up to a maximum capacity, then replenishes tokens at a steady rate. Useful for throttling outbound API requests, user-facing actions, or any operation where you need to allow occasional bursts without exceeding a sustained rate.

#ratelimit #utils #performance

@admin 7h ago

JavaScript Animate Counter (Number Roll-Up)

Smoothly animates a number from a start value to an end value over a given duration using requestAnimationFrame. Supports a custom easing function (defaults to ease-out quad). Ideal for dashboard stat widgets, donation counters, and any UI where a bare static number would be less impactful.

#animation #dom #counter #ui

@admin 7h ago

JavaScript Create Element Helper

A concise helper for creating DOM elements with attributes, properties, styles, event listeners, and children in one call — similar to hyperscript or JSX without a build step. Eliminates repetitive createElement / setAttribute / appendChild chains and keeps DOM construction code readable.

#dom #utils #hyperscript

@admin 7h ago

JavaScript DOM Ready Helper

Runs a callback when the DOM is fully parsed and ready, without waiting for images or stylesheets. Works whether called before or after DOMContentLoaded has already fired — unlike a bare addEventListener which misses the event if the DOM is already ready when the script runs.

#dom #utils #browser

@admin 7h ago

JavaScript Delegate Event Listener

Attaches a single event listener to a parent element and handles events from matching descendant elements via event delegation. More efficient than attaching listeners to many individual elements, and works for elements added dynamically to the DOM after the listener is registered.

#dom #events #delegation #utils

@admin 7h ago

JavaScript Intersection Observer (Lazy Load / Reveal)

Uses the IntersectionObserver API to trigger a callback when elements enter the viewport. The reveal pattern adds a visible class to animate elements as they scroll into view. The lazyLoad pattern loads images on demand by swapping data-src to src. Much more performant than scroll event listeners.

#dom #observer #lazyload #performance

@admin 7h ago

JavaScript Serialize Form to Object

Converts all named form fields into a plain JavaScript object using the FormData API. Handles text inputs, selects, textareas, and checkboxes. Multiple values for the same name (e.g. multi-select, checkboxes) are collected into an array. Ready to JSON.stringify and POST to an API.

#forms #serialize #utils

@admin 7h ago

JavaScript Cookie Helpers (Get / Set / Delete)

Minimal cookie utilities: getCookie retrieves a value by name, setCookie writes a cookie with optional expiry days and path, deleteCookie removes it by setting an expired date. No library needed for simple first-party cookie management. For complex scenarios (SameSite, Secure, partitioned) extend the options object.

#cookies #browser #utils

@admin 7h ago

JavaScript Validate URL

Validates whether a string is a well-formed URL using the native URL constructor, which matches browser parsing behaviour exactly. Optionally restricts to specific protocols (defaults to http and https). No regex maintenance required — if the browser can parse it as a URL, this returns true.

#validation #url #utils

@admin 7h ago