Premium
JAVASCRIPT Snippets.

Insert New DOM Element Before a Specific Sibling

Master the technique of inserting new HTML elements into the DOM structure right before an existing child element, providing fine-grained control over element placement.

Implement a useDebounce Hook for Input Optimization

Create a custom React hook to debounce any value, useful for delaying state updates from fast-changing inputs like search fields and improving performance.

Track Previous State or Prop Value with usePrevious Hook

Create a simple custom React hook to easily access the previous value of a prop or state variable, valuable for comparisons and conditional logic.

Detect Clicks Outside an Element with useOnClickOutside Hook

Implement a custom React hook to efficiently detect when a user clicks outside a specified DOM element, perfect for closing modals, dropdowns, or tooltips.

Respond to CSS Media Queries with useMediaQuery Hook

Create a React hook to dynamically detect and respond to CSS media queries within your component logic, enabling responsive behavior directly in JavaScript.

Dynamically Switching Components with Vue 3

Discover how to dynamically render different components in Vue 3 using the `<component :is>` attribute, enhancing UI flexibility and code organization.

Building a Custom Directive for Element Focus

Create a custom Vue 3 directive to automatically focus input elements on mount, demonstrating how to encapsulate reusable DOM behavior efficiently.

Implementing Dependency Injection with Provide/Inject

Implement Vue 3's `provide` and `inject` to manage shared data across deeply nested components, avoiding prop drilling and improving maintainability.

Secure Server-Side CORS Configuration in Node.js Express

Properly configure Cross-Origin Resource Sharing (CORS) in your Node.js Express application to control which domains can safely access your API resources.

Securely Hash Passwords with Argon2 in Node.js

Learn to securely hash user passwords using the Argon2 algorithm with Node.js `argon2` library, preventing common brute-force and rainbow table attacks.

Preventing Server-Side Request Forgery (SSRF) Attacks

Safeguard your server-side applications from SSRF attacks by validating and restricting outbound requests to external resources and private networks.

Validate Hexadecimal Color Code Format

Use a JavaScript regex to validate hexadecimal color codes, supporting 3-digit and 6-digit formats, with or without a leading hash symbol, for CSS or UI inputs.