What is salting.mdx?

salting.mdx is a text file written in the MDX format-a blend of Markdown and JSX (JavaScript XML). It contains a beginner‑friendly explanation of “salting,” which is the practice of adding random data to passwords before they are hashed. The file is meant to be read by both humans (as regular Markdown) and by web frameworks that can render the embedded JSX components.

Let's break it down

  • MDX: a file type that lets you write normal Markdown (headings, lists, paragraphs) and also insert interactive React components directly in the same document.
  • salting: a security technique where a unique random string (the “salt”) is combined with a password before hashing, making each stored hash unique even if two users have the same password.
  • salting.mdx therefore combines a clear, step‑by‑step written guide with optional live code examples or visual aids that are rendered by the website.

Why does it matter?

Salting protects stored passwords from attacks such as rainbow‑table lookups and bulk hash cracking. By ensuring that identical passwords produce different hashes, it forces attackers to target each password individually, dramatically increasing the effort required to compromise user accounts. Explaining this concept clearly helps developers implement it correctly.

Where is it used?

  • Documentation sites built with Next.js, Gatsby, or other React‑based static site generators that support MDX.
  • Internal developer wikis or onboarding portals that want to mix tutorial text with runnable code snippets.
  • Open‑source security guides that need interactive examples without leaving the page.

Good things about it

  • Readable: plain Markdown makes the text easy to write and edit.
  • Interactive: JSX lets you embed live demos, code editors, or visualizations right in the guide.
  • Reusable: the same MDX file can be rendered on the web, compiled to static HTML, or imported as a component in a React app.
  • Version‑controlled: being a simple text file, it works well with Git and other source‑control tools.

Not-so-good things

  • Build step required: MDX needs a compilation step (e.g., via webpack or Vite) before it can be served, adding complexity to the project setup.
  • React dependency: the JSX parts only work in environments that support React, limiting portability to non‑React ecosystems.
  • Learning curve: beginners may be confused by the mix of Markdown and JavaScript syntax, especially if they only need static text.
  • Potential performance hit: embedding many interactive components can slow down page load times if not optimized.