Premium
JAVASCRIPT Snippets.

Vue 3 Custom Composable for Dark Mode Toggling

Create a reusable Vue 3 composable to manage dark mode state, persist user preference in localStorage, and dynamically apply a 'dark' class to the document body.

Vue 3 Dynamic Components with KeepAlive for Tabbed Interfaces

Implement dynamic component rendering in Vue 3 using `<component :is='...' />` and `<KeepAlive>` to maintain component state and improve performance in tabbed UIs.

Vue 3 Teleport for Creating Accessible Modals

Learn to use Vue 3's `<Teleport>` feature to render modal content directly into the document body, ensuring proper layering, accessibility, and avoiding CSS overflow issues.

Vue 3 Custom Directive for Auto-Focusing an Input

Create a custom Vue 3 directive (`v-focus`) to automatically focus an input element when it is mounted to the DOM, improving user experience for forms and interactive elements.

Persist React State in Local Storage with useLocalStorage Hook

Learn how to create a custom React hook to automatically synchronize component state with browser local storage, ensuring data persistence across user sessions.

React Responsiveness with useMediaQuery Hook

Implement a custom React hook to detect CSS media query matches, allowing components to adapt their behavior or rendering based on real-time screen size changes.

Detect Clicks Outside an Element with useOutsideClick React Hook

Create a reusable React hook to easily detect when a user clicks outside a specified DOM element, perfect for closing modals, dropdowns, or popovers.

Access Previous State or Prop Values with usePrevious React Hook

Learn to create a simple yet powerful React hook to keep track of the previous value of any state or prop, useful for comparing changes in your components.

Track Browser Window Dimensions with useWindowSize React Hook

Develop a custom React hook to efficiently get and update the current browser window width and height, enabling responsive layouts and dynamic UI adjustments.

Enforcing X-Content-Type-Options: nosniff to Prevent MIME Sniffing

Enhance web security by instructing browsers to disable MIME-sniffing, preventing them from interpreting files as a different content type.

Sanitizing User-Generated HTML Content

Securely process user-generated HTML content in web applications using DOMPurify to prevent Cross-Site Scripting (XSS) vulnerabilities effectively.

Securely Managing Sensitive Configuration with Environment Variables

Protect sensitive API keys, database credentials, and other configurations by using environment variables in Node.js applications, enhancing security.