feat: new vocab entries

fezcode · fezcode · commit d6a5fbb1978b · 2026-01-09T03:31:43.000+03:00
diff --git a/src/data/vocab/modules-vs-includes.jsx b/src/data/vocab/modules-vs-includes.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export default function ModulesVsIncludes() {
+  return (
+    <div className="space-y-4">
+      <p>
+        <strong>Modules</strong> are independent units of code with explicit interfaces (exports/imports). When imported, the compiler loads a semantic representation of the code, ensuring encapsulation and faster builds.
+      </p>
+
+      <div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
+        <h4 className="text-sm font-bold text-blue-400 mb-2">
+          The C Approach (Includes):
+        </h4>
+        <p className="text-sm text-gray-300 mb-3">
+          C lacks modules and relies on the <strong>Preprocessor</strong>.
+        </p>
+        <ul className="list-disc pl-5 space-y-2 text-sm text-gray-400">
+          <li>
+            <strong className="text-white">Textual Copy-Paste:</strong> <code className="text-pink-400">#include "header.h"</code> literally copies the file's text into your source file.
+          </li>
+          <li>
+            <strong className="text-white">Translation Unit:</strong> The Source file + all copied Headers = one massive unit of code to be compiled.
+          </li>
+          <li>
+            <strong className="text-white">Object Files:</strong> The compiler turns this unit into an Object File (`.o`).
+          </li>
+          <li>
+            <strong className="text-white">Linking:</strong> The Linker stitches these object files together to make the executable.
+          </li>
+        </ul>
+      </div>
+
+      <p className="text-sm italic text-gray-500">
+        This "copy-paste" model is why C builds can be slow (headers are re-parsed every time) and why "include guards" are needed to prevent infinite loops.
+      </p>
+    </div>
+  );
+}
diff --git a/src/data/vocab/name-mangling.jsx b/src/data/vocab/name-mangling.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function NameMangling() {
+  return (
+    <div className="space-y-4">
+      <p>
+        <strong>Name Mangling</strong> (or name decoration) is a technique used by compilers to resolve unique names for programming entities (like functions, structure members, or variables) in modern programming languages.
+      </p>
+      <p>
+        It provides a way to encode additional information about the name—such as the function's parameter types or scope—directly into the symbol name used by the linker. This is essential for supporting features like function overloading or namespacing, especially in languages like C++.
+      </p>
+      <div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
+        <h4 className="text-sm font-bold text-yellow-400 mb-2">
+          Example (C++):
+        </h4>
+        <p className="text-sm text-gray-400 mb-2">
+          Two functions with the same name but different arguments:
+        </p>
+        <code className="block bg-black p-2 rounded text-xs text-green-400 mb-2">
+          int foo(int i);<br/>
+          int foo(char c);
+        </code>
+        <p className="text-sm text-gray-400 mb-2">
+          Might be "mangled" by the compiler into unique symbols like:
+        </p>
+        <code className="block bg-black p-2 rounded text-xs text-blue-400">
+          _Z3fooi  // for foo(int)<br/>
+          _Z3fooc  // for foo(char)
+        </code>
+      </div>
+    </div>
+  );
+}
diff --git a/src/data/vocabulary.js b/src/data/vocabulary.js
@@ -55,4 +55,12 @@ export const vocabulary = {
     title: 'Open Graph Protocol',
     loader: () => import('./vocab/open-graph'),
   },
+  'name-mangling': {
+    title: 'Name Mangling',
+    loader: () => import('./vocab/name-mangling'),
+  },
+  'modules-vs-includes': {
+    title: 'Modules vs. Includes',
+    loader: () => import('./vocab/modules-vs-includes'),
+  },
 };
