Skip to content

Commit 0d94875

Browse files
sridhar-3009claude
andcommitted
redesign: editorial dark theme, Playfair Display, SDC-style polish
- Complete CSS overhaul: deep #05030e bg, purple glow system, glass navbar, backdrop-filter blur, Playfair Display serif headings, JetBrains Mono labels - New hero: split two-column layout, italic serif headline, pulse badge, stats - Course cards: per-color glow on hover, radial gradient overlay, top accent bar - Topic pages: theme-init script (no flash), reading-progress glow bar, at-a-glance summary boxes, scroll-reveal animations on all sections - Removed all emoji from UI (replaced with HTML entities / symbols) - Added .gitignore Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent b254e87 commit 0d94875

16 files changed

Lines changed: 1354 additions & 880 deletions

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.gstack/
2+
*.log
3+
.DS_Store

css/style.css

Lines changed: 703 additions & 447 deletions
Large diffs are not rendered by default.

index.html

Lines changed: 186 additions & 143 deletions
Large diffs are not rendered by default.

js/main.js

Lines changed: 132 additions & 89 deletions
Large diffs are not rendered by default.

topics/01-intro.html

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<script>try{var t=localStorage.getItem("dbms-theme")||"dark";document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}</script>
67
<title>Introduction to DBMS — DBMS Illustrated</title>
7-
<link rel="preconnect" href="https://fonts.googleapis.com">
8-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
98
<link rel="stylesheet" href="../css/style.css">
109
<style>:root{--topic-color:#0EA5E9}</style>
1110
</head>
1211
<body>
12+
<div class="reading-progress" id="reading-progress"></div>
1313
<nav class="navbar">
1414
<div class="navbar-inner">
15-
<a class="navbar-brand" href="../index.html"><span class="brand-icon">🗄</span>DBMS Illustrated</a>
15+
<a class="navbar-brand" href="../index.html"><span class="brand-icon" style="color:var(--primary-soft)">&#9670;</span>DBMS Illustrated</a>
1616
<div class="navbar-links">
1717
<a href="../index.html#topics">All Topics</a>
1818
</div>
1919
<div class="navbar-actions">
20-
<button class="btn-icon" id="theme-toggle">☀️</button>
20+
<button class="btn-icon" id="theme-toggle" title="Toggle theme">&#9788;</button>
2121
</div>
2222
</div>
2323
</nav>
24-
<div class="topic-progress"><div class="topic-progress-fill" id="scroll-progress"></div></div>
24+
</div>
2525

2626
<div class="container">
2727
<div class="breadcrumb">
@@ -40,26 +40,37 @@ <h1>Introduction to <span class="accent">DBMS</span></h1>
4040
</div>
4141
</div>
4242

43+
<div class="at-a-glance reveal">
44+
<h3>At a Glance</h3>
45+
<ul>
46+
<li><strong>DBMS</strong> adds data independence, integrity, concurrency control, and recovery on top of raw file storage.</li>
47+
<li><strong>Three-schema architecture</strong>: External (views) / Conceptual (logical) / Internal (physical) — changes at one level don't ripple to others.</li>
48+
<li><strong>ACID</strong> (Atomicity, Consistency, Isolation, Durability) — the four correctness guarantees for transactions.</li>
49+
<li><strong>Query pipeline</strong>: Parse → Optimize → Execute → Buffer Manager → Disk I/O.</li>
50+
<li><strong>Write-Ahead Logging (WAL)</strong> ensures durability: log first, flush later.</li>
51+
</ul>
52+
</div>
53+
4354
<!-- Concepts -->
4455
<div class="section-label">Core Concepts</div>
4556
<div class="mini-cards">
4657
<div class="mini-card">
47-
<div class="mini-card-icon">🗂</div>
58+
<div class="mini-card-icon"></div>
4859
<h4>Data Independence</h4>
4960
<p>Physical independence: change storage without touching app logic. Logical independence: restructure schema without rewriting queries.</p>
5061
</div>
5162
<div class="mini-card">
52-
<div class="mini-card-icon">🔒</div>
63+
<div class="mini-card-icon"></div>
5364
<h4>ACID Properties</h4>
5465
<p>Atomicity, Consistency, Isolation, Durability — the four guarantees that make transactions reliable in multi-user environments.</p>
5566
</div>
5667
<div class="mini-card">
57-
<div class="mini-card-icon">🏗</div>
68+
<div class="mini-card-icon"></div>
5869
<h4>Three-Schema Architecture</h4>
5970
<p>External (views), Conceptual (logical schema), Internal (physical storage) — three levels of abstraction that isolate users from hardware.</p>
6071
</div>
6172
<div class="mini-card">
62-
<div class="mini-card-icon">👥</div>
73+
<div class="mini-card-icon"></div>
6374
<h4>Concurrency Control</h4>
6475
<p>Multiple users reading and writing simultaneously without corrupting data. The DBMS serializes conflicting operations transparently.</p>
6576
</div>
@@ -131,7 +142,7 @@ <h2 class="section-title">ER Diagram Explorer</h2>
131142

132143
<div class="demo-section" id="demo-intro">
133144
<div class="demo-header">
134-
<h3>🗺 Entity-Relationship Diagram</h3>
145+
<h3>Entity-Relationship Diagram</h3>
135146
<div class="demo-controls">
136147
<span style="font-size:.78rem;color:var(--text-muted)">Click entity to explore</span>
137148
</div>
@@ -144,15 +155,15 @@ <h3>🗺 Entity-Relationship Diagram</h3>
144155
<div class="section-label">Anti-patterns</div>
145156
<div class="antipatterns">
146157
<div class="antipattern">
147-
<h4>Using flat files instead of a DBMS</h4>
158+
<h4>Using flat files instead of a DBMS</h4>
148159
<p>CSV files have no atomicity, no query language, no concurrent access control, and no recovery. Fine for scripts; catastrophic for production data.</p>
149160
</div>
150161
<div class="antipattern">
151-
<h4>Ignoring normalization from day one</h4>
162+
<h4>Ignoring normalization from day one</h4>
152163
<p>Denormalized schemas feel easy initially but create update anomalies, data redundancy, and painful migrations as the application grows.</p>
153164
</div>
154165
<div class="antipattern">
155-
<h4>Treating the DBMS as a dumb storage layer</h4>
166+
<h4>Treating the DBMS as a dumb storage layer</h4>
156167
<p>Not using constraints (FK, NOT NULL, CHECK) shifts validation to application code — the worst of both worlds and much harder to enforce consistently.</p>
157168
</div>
158169
</div>
@@ -225,9 +236,9 @@ <h2 class="section-title">Common Interview Questions</h2>
225236
<!-- Further Reading -->
226237
<div class="section-label">Further Reading</div>
227238
<div class="reading-links">
228-
<a class="reading-link" href="https://www.postgresql.org/docs/current/tutorial.html" target="_blank">📖 PostgreSQL Official Tutorial</a>
229-
<a class="reading-link" href="https://use-the-index-luke.com/" target="_blank">📖 Use The Index, Luke</a>
230-
<a class="reading-link" href="https://db.cs.cmu.edu/courses/" target="_blank">🎓 CMU Database Courses</a>
239+
<a class="reading-link" href="https://www.postgresql.org/docs/current/tutorial.html" target="_blank">PostgreSQL Official Tutorial</a>
240+
<a class="reading-link" href="https://use-the-index-luke.com/" target="_blank">Use The Index, Luke</a>
241+
<a class="reading-link" href="https://db.cs.cmu.edu/courses/" target="_blank">CMU Database Courses</a>
231242
</div>
232243

233244
<!-- Nav -->
@@ -240,11 +251,8 @@ <h2 class="section-title">Common Interview Questions</h2>
240251
</div>
241252
</div>
242253

243-
<footer>
244-
<div class="footer-bottom" style="max-width:1100px;margin:0 auto;padding:16px 24px;font-size:.78rem;color:var(--text-muted);">
245-
<a href="../index.html">← Back to Course</a>
246-
<span>DBMS Illustrated — Open Source</span>
247-
</div>
254+
<footer class="site-footer" style="margin-top:0">
255+
<p class="footer-sub"><a href="../index.html" style="color:var(--primary-soft)">Back to Course</a> &mdash; DBMS Illustrated</p>
248256
</footer>
249257

250258
<script src="../js/main.js"></script>

topics/02-relational-model.html

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<script>try{var t=localStorage.getItem("dbms-theme")||"dark";document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}</script>
67
<title>Relational Model — DBMS Illustrated</title>
7-
<link rel="preconnect" href="https://fonts.googleapis.com">
8-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
98
<link rel="stylesheet" href="../css/style.css">
109
<style>:root{--topic-color:#8B5CF6}</style>
1110
</head>
1211
<body>
12+
<div class="reading-progress" id="reading-progress"></div>
1313
<nav class="navbar">
1414
<div class="navbar-inner">
15-
<a class="navbar-brand" href="../index.html"><span class="brand-icon">🗄</span>DBMS Illustrated</a>
15+
<a class="navbar-brand" href="../index.html"><span class="brand-icon" style="color:var(--primary-soft)">&#9670;</span>DBMS Illustrated</a>
1616
<div class="navbar-links"><a href="../index.html#topics">All Topics</a></div>
17-
<div class="navbar-actions"><button class="btn-icon" id="theme-toggle">☀️</button></div>
17+
<div class="navbar-actions"><button class="btn-icon" id="theme-toggle" title="Toggle theme">&#9788;</button></div>
1818
</div>
1919
</nav>
20-
<div class="topic-progress"><div class="topic-progress-fill" id="scroll-progress"></div></div>
20+
</div>
2121

2222
<div class="container">
2323
<div class="breadcrumb">
@@ -39,22 +39,22 @@ <h1>The <span class="accent">Relational</span> Model</h1>
3939
<div class="section-label">Core Concepts</div>
4040
<div class="mini-cards">
4141
<div class="mini-card">
42-
<div class="mini-card-icon">📋</div>
42+
<div class="mini-card-icon"></div>
4343
<h4>Relation (Table)</h4>
4444
<p>A relation is a set of tuples (rows), all sharing the same schema (ordered list of attribute names and domains). Order of tuples is undefined — it's a set, not a list.</p>
4545
</div>
4646
<div class="mini-card">
47-
<div class="mini-card-icon">🔑</div>
47+
<div class="mini-card-icon"></div>
4848
<h4>Keys</h4>
4949
<p>Superkey → minimal superkey = Candidate Key → chosen CK = Primary Key. Foreign Keys enforce referential integrity between relations.</p>
5050
</div>
5151
<div class="mini-card">
52-
<div class="mini-card-icon">🔗</div>
52+
<div class="mini-card-icon"></div>
5353
<h4>Referential Integrity</h4>
5454
<p>A FK value must either be NULL or match a PK in the referenced table. ON DELETE CASCADE / SET NULL / RESTRICT control what happens when the parent row is deleted.</p>
5555
</div>
5656
<div class="mini-card">
57-
<div class="mini-card-icon">🧮</div>
57+
<div class="mini-card-icon"></div>
5858
<h4>Relational Algebra</h4>
5959
<p>Six fundamental operations: σ (select rows), π (project columns), ⋈ (join), ∪ (union), − (difference), × (Cartesian product). All SQL compiles down to these.</p>
6060
</div>
@@ -109,14 +109,25 @@ <h4>Set Operations (UNION, INTERSECT, EXCEPT)</h4>
109109
);</pre>
110110
</div>
111111

112+
<div class="at-a-glance reveal">
113+
<h3>At a Glance</h3>
114+
<ul>
115+
<li><strong>Relation</strong> = table. <strong>Tuple</strong> = row. <strong>Attribute</strong> = column. All values are atomic (1NF).</li>
116+
<li><strong>Primary key</strong> uniquely identifies a tuple. <strong>Foreign key</strong> references a primary key in another relation.</li>
117+
<li><strong>INNER JOIN</strong> returns only matching rows. <strong>LEFT JOIN</strong> keeps all rows from the left, NULLs on no match.</li>
118+
<li><strong>Relational algebra</strong>: selection (sigma), projection (pi), join, union, difference — the theoretical basis for SQL.</li>
119+
<li>Candidate keys, superkeys, and functional dependencies underpin normalization theory.</li>
120+
</ul>
121+
</div>
122+
112123
<!-- Demo -->
113124
<div class="section-label">Interactive Demo</div>
114125
<h2 class="section-title">JOIN Visualizer</h2>
115126
<p class="section-desc">Select a join type to see which rows match between the employees and departments tables. Matching rows animate into the result.</p>
116127

117128
<div class="demo-section" id="demo-relational">
118129
<div class="demo-header">
119-
<h3>Relational Join Demo</h3>
130+
<h3>Relational Join Demo</h3>
120131
<div class="demo-controls">
121132
<button class="demo-btn join-btn" data-join="INNER">INNER JOIN</button>
122133
<button class="demo-btn join-btn" data-join="LEFT">LEFT JOIN</button>
@@ -135,15 +146,15 @@ <h4>Key Insight: INNER vs OUTER Joins</h4>
135146
<div class="section-label">Anti-patterns</div>
136147
<div class="antipatterns">
137148
<div class="antipattern">
138-
<h4>Choosing the wrong join type</h4>
149+
<h4>Choosing the wrong join type</h4>
139150
<p>Using INNER JOIN when you need LEFT JOIN silently drops rows. Always verify expected result cardinality. A missing row in the result is often worse than an error.</p>
140151
</div>
141152
<div class="antipattern">
142-
<h4>Missing referential integrity constraints</h4>
153+
<h4>Missing referential integrity constraints</h4>
143154
<p>Storing FK values without declaring FOREIGN KEY lets orphaned rows accumulate — child rows pointing to deleted parents. This causes silent data corruption that's expensive to fix later.</p>
144155
</div>
145156
<div class="antipattern">
146-
<h4>Using natural joins in production queries</h4>
157+
<h4>Using natural joins in production queries</h4>
147158
<p>NATURAL JOIN matches on ALL common column names. Adding a column to a table can silently change join semantics. Always use explicit ON conditions.</p>
148159
</div>
149160
</div>
@@ -212,7 +223,7 @@ <h4>⚠ Using natural joins in production queries</h4>
212223
<div class="section-label">Further Reading</div>
213224
<div class="reading-links">
214225
<a class="reading-link" href="https://www.cs.cmu.edu/~christos/COURSES/826.S03/HANDOUTS/codd72.pdf" target="_blank">📄 Codd's Original 1970 Paper</a>
215-
<a class="reading-link" href="https://en.wikipedia.org/wiki/Relational_algebra" target="_blank">📖 Relational Algebra (Wikipedia)</a>
226+
<a class="reading-link" href="https://en.wikipedia.org/wiki/Relational_algebra" target="_blank">Relational Algebra (Wikipedia)</a>
216227
</div>
217228

218229
<div class="topic-nav">

topics/03-sql.html

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<script>try{var t=localStorage.getItem("dbms-theme")||"dark";document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}</script>
56
<title>SQL Fundamentals — DBMS Illustrated</title>
6-
<link rel="preconnect" href="https://fonts.googleapis.com">
7-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
87
<link rel="stylesheet" href="../css/style.css">
98
<style>:root{--topic-color:#10B981}</style>
109
</head>
1110
<body>
11+
<div class="reading-progress" id="reading-progress"></div>
1212
<nav class="navbar">
1313
<div class="navbar-inner">
14-
<a class="navbar-brand" href="../index.html"><span class="brand-icon">🗄</span>DBMS Illustrated</a>
14+
<a class="navbar-brand" href="../index.html"><span class="brand-icon" style="color:var(--primary-soft)">&#9670;</span>DBMS Illustrated</a>
1515
<div class="navbar-links"><a href="../index.html#topics">All Topics</a></div>
16-
<div class="navbar-actions"><button class="btn-icon" id="theme-toggle">☀️</button></div>
16+
<div class="navbar-actions"><button class="btn-icon" id="theme-toggle" title="Toggle theme">&#9788;</button></div>
1717
</div>
1818
</nav>
19-
<div class="topic-progress"><div class="topic-progress-fill" id="scroll-progress"></div></div>
19+
</div>
2020

2121
<div class="container">
2222
<div class="breadcrumb">
@@ -38,22 +38,22 @@ <h1>SQL <span class="accent">Fundamentals</span></h1>
3838
<div class="section-label">Core Concepts</div>
3939
<div class="mini-cards">
4040
<div class="mini-card">
41-
<div class="mini-card-icon">🔍</div>
41+
<div class="mini-card-icon"></div>
4242
<h4>SELECT Pipeline</h4>
4343
<p>Logical execution order: FROM → JOIN → WHERE → GROUP BY → HAVING → SELECT → DISTINCT → ORDER BY → LIMIT. NOT the textual order you write it.</p>
4444
</div>
4545
<div class="mini-card">
46-
<div class="mini-card-icon">🪟</div>
46+
<div class="mini-card-icon"></div>
4747
<h4>Window Functions</h4>
4848
<p>OVER(PARTITION BY … ORDER BY …) — aggregate over a sliding window without collapsing rows. ROW_NUMBER, RANK, LAG, LEAD, SUM OVER.</p>
4949
</div>
5050
<div class="mini-card">
51-
<div class="mini-card-icon">📎</div>
51+
<div class="mini-card-icon"></div>
5252
<h4>CTEs (WITH clause)</h4>
5353
<p>Named subqueries defined before the main query. Improve readability, enable recursion (WITH RECURSIVE for hierarchies/graphs), and can be referenced multiple times.</p>
5454
</div>
5555
<div class="mini-card">
56-
<div class="mini-card-icon">📊</div>
56+
<div class="mini-card-icon"></div>
5757
<h4>EXPLAIN / EXPLAIN ANALYZE</h4>
5858
<p>Shows the execution plan: node types (SeqScan, IndexScan, HashJoin), estimated vs actual rows, cost estimates. Essential for performance debugging.</p>
5959
</div>
@@ -94,14 +94,25 @@ <h2 class="section-title">Logical Query Execution Order</h2>
9494
<span class="kw">SELECT</span> * <span class="kw">FROM</span> org <span class="kw">ORDER BY</span> depth, name;</pre>
9595
</div>
9696

97+
<div class="at-a-glance reveal">
98+
<h3>At a Glance</h3>
99+
<ul>
100+
<li><strong>SQL = DDL + DML + DCL</strong>. DDL defines schema; DML queries and mutates data; DCL controls access.</li>
101+
<li><strong>Window functions</strong> (ROW_NUMBER, RANK, LAG) operate over a partition without collapsing rows like GROUP BY.</li>
102+
<li><strong>EXPLAIN / EXPLAIN ANALYZE</strong> reveals the execution plan — always check before deploying a slow query.</li>
103+
<li><strong>CTEs</strong> (WITH clause) improve readability and enable recursive queries (e.g. tree traversal).</li>
104+
<li>Subqueries in SELECT, FROM, WHERE, and HAVING enable complex single-statement logic.</li>
105+
</ul>
106+
</div>
107+
97108
<!-- Demo -->
98109
<div class="section-label">Interactive Demo</div>
99110
<h2 class="section-title">SQL Query Visualizer</h2>
100111
<p class="section-desc">Pick a preset or type a WHERE clause. Watch the table animate — matching rows glow green, non-matching fade out.</p>
101112

102113
<div class="demo-section" id="demo-sql">
103114
<div class="demo-header">
104-
<h3>Live SQL Filter</h3>
115+
<h3>Live SQL Filter</h3>
105116
<div class="demo-controls">
106117
<button class="demo-btn" data-preset="0">WHERE dept='Engineering'</button>
107118
<button class="demo-btn" data-preset="1">WHERE salary&gt;80000</button>
@@ -120,19 +131,19 @@ <h3>⚡ Live SQL Filter</h3>
120131
<div class="section-label">Anti-patterns</div>
121132
<div class="antipatterns">
122133
<div class="antipattern">
123-
<h4>SELECT * in production queries</h4>
134+
<h4>SELECT * in production queries</h4>
124135
<p>Fetches all columns including BLOBs and unused fields. Breaks when columns are added/removed. Always list explicit columns — the optimizer can use covering indexes only if it knows which columns you need.</p>
125136
</div>
126137
<div class="antipattern">
127-
<h4>The N+1 query problem</h4>
138+
<h4>The N+1 query problem</h4>
128139
<p>Fetching a list of N rows then running a query per row in application code. Replace with a single JOIN or a batch IN clause. N+1 is almost always the #1 performance issue in ORMs.</p>
129140
</div>
130141
<div class="antipattern">
131-
<h4>Using OFFSET for pagination on large tables</h4>
142+
<h4>Using OFFSET for pagination on large tables</h4>
132143
<p>OFFSET N scans and discards N rows every time. For page 1000 with 20 rows/page you discard 20,000 rows. Use keyset pagination: WHERE id > last_seen_id ORDER BY id LIMIT 20.</p>
133144
</div>
134145
<div class="antipattern">
135-
<h4>Implicit type conversions in WHERE</h4>
146+
<h4>Implicit type conversions in WHERE</h4>
136147
<p>WHERE user_id = '123' when user_id is INT causes a type cast on every row, disabling index usage. Match parameter types to column types exactly.</p>
137148
</div>
138149
</div>
@@ -200,9 +211,9 @@ <h4>⚠ Implicit type conversions in WHERE</h4>
200211

201212
<div class="section-label">Further Reading</div>
202213
<div class="reading-links">
203-
<a class="reading-link" href="https://use-the-index-luke.com/sql/explain-plan" target="_blank">📖 Reading EXPLAIN Plans</a>
204-
<a class="reading-link" href="https://www.postgresql.org/docs/current/functions-window.html" target="_blank">📖 PostgreSQL Window Functions</a>
205-
<a class="reading-link" href="https://modern-sql.com/" target="_blank">📖 Modern SQL</a>
214+
<a class="reading-link" href="https://use-the-index-luke.com/sql/explain-plan" target="_blank">Reading EXPLAIN Plans</a>
215+
<a class="reading-link" href="https://www.postgresql.org/docs/current/functions-window.html" target="_blank">PostgreSQL Window Functions</a>
216+
<a class="reading-link" href="https://modern-sql.com/" target="_blank">Modern SQL</a>
206217
</div>
207218

208219
<div class="topic-nav">

0 commit comments

Comments
 (0)