The Ultimate
Snippet Library.

Toggle Element Visibility with JavaScript and CSS Classes

Implement a straightforward show/hide mechanism for any HTML element by toggling a CSS class using JavaScript's classList API.

Smooth Scroll to an HTML Element Programmatically

Implement smooth programmatic scrolling to any target element on a webpage, significantly enhancing user navigation and overall experience.

Read, Set, and Remove Custom Data Attributes

Learn to effectively manipulate custom `data-*` attributes on HTML elements using JavaScript, enabling dynamic content and interactive behavior.

Extract and Remap Columns from Array of Objects/Arrays

Efficiently extract a specific column from a multi-dimensional PHP array or array of objects, optionally remapping its key to create a new flat associative array.

Extract Unique Values from a Specific Array Key

Learn how to efficiently extract all unique values for a particular key from an array of associative arrays, useful for filtering, summarizing, or populating dropdowns.

Reindex and Reset Numeric Keys of a PHP Array

Discover how to reset an array's numeric keys, ensuring they start from zero and are sequential after elements have been removed, filtered, or reordered in PHP.

Whitelist Specific Keys from an Associative Array

Learn to filter an associative PHP array, keeping only a predefined set of allowed keys and discarding all others, effectively whitelisting desired data for security or trimming.

Custom React Hook for Data Fetching with Loading and Error States

Implement a custom React hook, `useFetch`, to handle asynchronous data fetching, including managing loading and error states, making API calls cleaner and reusable.

Detect Clicks Outside an Element with useClickOutside React Hook

Build a `useClickOutside` React hook to detect when a user clicks anywhere outside a specific DOM element, ideal for closing modals, dropdowns, or popovers.

Lazy Loading with useIntersectionObserver React Hook

Implement a `useIntersectionObserver` React hook for efficient lazy loading of images or components, detecting when an element enters the viewport for performance optimization.

React to CSS Media Queries in JavaScript with useMediaQuery Hook

Create a `useMediaQuery` React hook to dynamically respond to CSS media query changes directly within your JavaScript components, enabling responsive logic.

Backup a Directory to a Timestamped Tar Archive

Automate creating local, timestamped `.tar` archives of important directories. Essential for quick backups of web application files, configuration, or user uploads.