Premium
JAVASCRIPT Snippets.

Dynamically Update Browser Document Title

Learn to build `useDocumentTitle`, a custom React hook for declaratively setting the browser tab's title, useful for dynamic page titles in single-page applications.

Simple Controlled Input State Management

Develop a `useInput` React hook for managing the state and change handlers of basic form input fields, streamlining common form interactions.

Dynamically Add and Remove DOM Elements

Learn how to programmatically create new HTML elements from scratch, append them to the DOM, and efficiently remove existing elements using pure JavaScript.

Manage Element Attributes and CSS Classes

Discover JavaScript methods to efficiently add, remove, and toggle CSS classes, along with setting and getting custom data attributes on HTML elements.

Traverse the DOM Tree with JavaScript

Learn how to navigate the Document Object Model (DOM) using JavaScript, accessing an element's parent, children, and siblings to locate specific elements.

Update Element Text and HTML Content Safely

Understand the difference between `textContent` and `innerHTML` for updating element content, and learn when to use each for security and formatting purposes.

Implement CSRF Protection with Express and `csurf`

Protect web applications from Cross-Site Request Forgery (CSRF) attacks by integrating a token-based middleware in Express.js for secure form submissions.

Configure Essential Security HTTP Headers in Express

Enhance web application security by setting critical HTTP headers like HSTS, CSP, X-Frame-Options, and X-Content-Type-Options using Helmet.js in Express.

Server-Side Input Sanitization for XSS Prevention

Sanitize user-provided input on the server-side to prevent Cross-Site Scripting (XSS) attacks, ensuring only safe content is processed and displayed.

Configure Secure and HttpOnly Cookies in Express

Enhance session security by setting `HttpOnly`, `Secure`, and `SameSite` flags on cookies in Express.js, protecting against XSS attacks and CSRF.

Get the Previous Value of a State or Prop

A custom React hook to efficiently track and return the previous value of any state or prop, ideal for comparing current and past values in useEffect.

Track and Access Browser Window Dimensions

A custom React hook to get and react to changes in the browser window's `width` and `height`, useful for creating responsive UI components.