The Ultimate
Snippet Library.

Manage Custom Data Attributes with dataset

Explore how to store and retrieve custom data on HTML elements using JavaScript's `dataset` property for enhanced interactivity and state management.

Dynamically Change Element Styles

Learn to modify individual CSS properties of HTML elements directly through JavaScript's `style` property for dynamic visual updates and interactive styling.

Define Reusable Query Logic with Eloquent Local Scopes

Create encapsulated, reusable query constraints in your Eloquent models, simplifying complex queries and improving code maintainability.

Automate Actions with Eloquent Model Events and Observers

Trigger custom logic automatically before or after Eloquent model operations like creating, updating, or deleting using events or observers.

Filter Parent Models Based on Related Model Criteria with `whereHas`

Efficiently retrieve parent models only if their related models meet specific criteria, avoiding unnecessary data loading and improving query performance.

Efficiently Query and Manipulate JSON Columns in Eloquent

Store and query semi-structured data within JSON or JSONB columns using Eloquent in databases like MySQL (5.7+) or PostgreSQL, offering flexible schema.

Centralized Authentication State with Pinia Store

Learn to manage global authentication state in Vue 3 applications using Pinia, Vue's official state management. Ensures reactive, centralized user data.

Create a Custom Composable for Debounced Input

Implement a reusable Vue 3 custom composable (`useDebounce`) to efficiently handle debounced input, preventing excessive function calls.

Manage Dynamic Components with KeepAlive

Dynamically switch Vue 3 components, preserving state with `<component :is>` and `<KeepAlive>`. Optimizes user experience by caching inactive instances.

Use Teleport to Render Modals Outside Component Tree

Use Vue 3's `<Teleport>` component to render content like modals into a different part of the DOM. Enhances accessibility and avoids z-index issues.

Implement a Global Event Bus with Mitt for Cross-Component Communication

Create an efficient global event bus in Vue 3 using the `mitt` library. Facilitates lightweight, many-to-many communication between decoupled components.

Find and Replace Text in Project Files

A powerful bash script to recursively find files matching a pattern and replace text within them, useful for refactoring or updating configurations across a web project.