The Ultimate
Snippet Library.

Get Element Dimensions and Position (getBoundingClientRect)

Precisely retrieve the size and position of any DOM element relative to the viewport using `getBoundingClientRect()`, essential for dynamic layouts, overlays, and animations.

Creating a Custom Vue 3 Directive for Click Outside

Implement a custom Vue 3 directive to detect clicks outside an element, perfect for closing dropdowns, modals, or context menus efficiently.

Animating List Items with Vue 3 TransitionGroup

Learn to effortlessly animate the insertion, removal, and reordering of list items in Vue 3 using the powerful `<TransitionGroup>` component and CSS.

Managing Reactive Side Effects with Vue 3 `watchEffect`

Discover how to use Vue 3's `watchEffect` to automatically track reactive dependencies and run side effects, simplifying complex reactivity scenarios.

Validate Email Address Format with Regex

A robust JavaScript regular expression snippet to accurately validate the common format of email addresses, ensuring correct input in web forms and applications.

Validate URL Format with a Regular Expression

A Python regex pattern to validate common URL formats, including HTTP/HTTPS protocols, domain names, optional ports, paths, queries, and fragments, useful for data validation.

Enforce Strong Password Rules with Regex

A JavaScript regex snippet to enforce strong password policies, requiring a minimum length, at least one uppercase, lowercase, number, and special character for enhanced security.

Extract All URLs from Text Using Regex

A PHP code snippet demonstrating how to use regular expressions to efficiently find and extract all valid URLs, including both HTTP/HTTPS links, from a given text or HTML content.

Validate IPv4 Address Format with Regex

A precise JavaScript regular expression to validate IPv4 address formats, ensuring each octet is within the 0-255 range, essential for network-related input validation.

Reactively Track CSS Media Queries with useMediaQuery

Build a React hook, useMediaQuery, to dynamically respond to CSS media query changes, enabling responsive components based on screen size.

Simplify setInterval with useInterval React Hook

Create a robust useInterval React hook to manage timed actions, automatically handling interval setup and cleanup for recurring tasks.

Track Browser Online/Offline Status with useOnlineStatus

Implement a useOnlineStatus React hook to monitor network connectivity, allowing components to display different UI based on online/offline state.