Skip to content

Commit 94311e1

Browse files
fezcodefezcode
committed
refactor: vocab entries new styles
1 parent bc2a535 commit 94311e1

20 files changed

+353
-302
lines changed

‎src/data/vocab/anti-pattern.jsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,26 @@ import React from 'react';
22

33
export default function AntiPattern() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
An <strong>Anti-Pattern</strong> is a common response to a recurring
7+
An <strong className="text-white">Anti-Pattern</strong> is a common response to a recurring
88
problem that is usually ineffective and risks being highly
99
counterproductive.
1010
</p>
1111
<p>
1212
It's a solution that looks good on the surface but has bad consequences
1313
in the long run.
1414
</p>
15-
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
16-
<h4 className="text-sm font-bold text-red-400 mb-2">
17-
Common React Anti-Patterns:
15+
16+
<div className="border-l-2 border-red-500/50 pl-4 py-2 my-6">
17+
<h4 className="text-xs font-bold text-red-400 uppercase tracking-widest mb-3">
18+
Common React Anti-Patterns
1819
</h4>
19-
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-400">
20-
<li>Prop Drilling (passing props down 5+ levels)</li>
21-
<li>Defining components inside other components</li>
22-
<li>Using indexes as keys in lists (when items can change order)</li>
23-
<li>Mutating state directly</li>
20+
<ul className="space-y-2 text-xs text-gray-400">
21+
<li>-- Prop Drilling (passing props down 5+ levels)</li>
22+
<li>-- Defining components inside other components</li>
23+
<li>-- Using indexes as keys in lists (when items can change order)</li>
24+
<li>-- Mutating state directly</li>
2425
</ul>
2526
</div>
2627
</div>

‎src/data/vocab/box-plot.jsx‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,61 @@ import React from 'react';
22

33
export default function BoxPlot() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
A <strong>Box Plot</strong> (or box-and-whisker plot) is a standardized way of displaying the distribution of data based on a five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum.
7+
A <strong className="text-white">Box Plot</strong> (or box-and-whisker plot) is a standardized way of displaying the distribution of data based on a five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum.
88
</p>
9-
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700 space-y-3">
10-
<div>
11-
<h4 className="text-sm font-bold text-blue-400">Median (Q2)</h4>
12-
<p className="text-sm text-gray-400">
9+
10+
{/* Box Plot Diagram */}
11+
<div className="py-8 border-y border-white/5 my-8">
12+
<svg viewBox="0 0 400 140" className="w-full h-auto font-mono text-[10px]">
13+
{/* Main Range Line (Whiskers) */}
14+
<line x1="50" y1="70" x2="350" y2="70" stroke="#525252" strokeWidth="2" />
15+
16+
{/* Whisker Ends (Min/Max) */}
17+
<line x1="50" y1="55" x2="50" y2="85" stroke="#525252" strokeWidth="2" />
18+
<text x="50" y="100" fill="#737373" textAnchor="middle">Min</text>
19+
20+
<line x1="350" y1="55" x2="350" y2="85" stroke="#525252" strokeWidth="2" />
21+
<text x="350" y="100" fill="#737373" textAnchor="middle">Max</text>
22+
23+
{/* The Box (IQR) - Green to match text */}
24+
<rect x="120" y="40" width="160" height="60" fill="#10b981" fillOpacity="0.1" stroke="#10b981" strokeWidth="2" />
25+
<text x="200" y="30" fill="#10b981" textAnchor="middle" className="uppercase tracking-widest font-bold">IQR (Q1-Q3)</text>
26+
27+
{/* Median Line - Blue to match text */}
28+
<line x1="180" y1="40" x2="180" y2="100" stroke="#3b82f6" strokeWidth="3" />
29+
<text x="180" y="120" fill="#3b82f6" textAnchor="middle" className="uppercase tracking-widest font-bold">Median</text>
30+
31+
{/* Outliers - Red to match text */}
32+
<circle cx="20" cy="70" r="3" fill="#f87171" />
33+
<circle cx="380" cy="70" r="3" fill="#f87171" />
34+
<text x="20" y="100" fill="#f87171" textAnchor="middle">Outlier</text>
35+
</svg>
36+
</div>
37+
38+
<div className="grid gap-6 my-8">
39+
<div className="border-l-2 border-blue-500/50 pl-4">
40+
<h4 className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-1">Median (Q2)</h4>
41+
<p className="text-xs text-gray-400">
1342
The middle value of the dataset. It splits the data into two equal halves. In a box plot, this is represented by the line inside the box.
1443
</p>
1544
</div>
16-
<div>
17-
<h4 className="text-sm font-bold text-green-400">Interquartile Range (IQR)</h4>
18-
<p className="text-sm text-gray-400">
45+
<div className="border-l-2 border-green-500/50 pl-4">
46+
<h4 className="text-xs font-bold text-green-400 uppercase tracking-widest mb-1">Interquartile Range (IQR)</h4>
47+
<p className="text-xs text-gray-400">
1948
The distance between the first quartile (25th percentile) and the third quartile (75th percentile). It represents the "middle 50%" of the data and is shown as the height/width of the box itself.
2049
</p>
2150
</div>
22-
<div>
23-
<h4 className="text-sm font-bold text-red-400">Outliers</h4>
24-
<p className="text-sm text-gray-400">
51+
<div className="border-l-2 border-red-500/50 pl-4">
52+
<h4 className="text-xs font-bold text-red-400 uppercase tracking-widest mb-1">Outliers</h4>
53+
<p className="text-xs text-gray-400">
2554
Data points that fall significantly outside the range of the rest of the data. Usually defined as points further than 1.5 × IQR from the edges of the box. They are typically plotted as individual dots beyond the whiskers.
2655
</p>
2756
</div>
2857
</div>
29-
<p className="text-sm italic text-gray-500">
58+
59+
<p className="text-xs text-gray-500 border border-white/10 p-4 uppercase tracking-wide">
3060
Box plots are exceptionally useful for comparing distributions between several groups at once, highlighting differences in spread and central tendency.
3161
</p>
3262
</div>

‎src/data/vocab/context-api.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react';
22

33
export default function ContextApi() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
The <strong>Context API</strong> is a React feature that enables you to
7+
The <strong className="text-white">Context API</strong> is a React feature that enables you to
88
share values (like global settings, user auth, or themes) between
99
components without having to explicitly pass a prop through every level
1010
of the tree.

‎src/data/vocab/crawler.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@ import React from 'react';
22

33
export default function Crawler() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
A <strong>Crawler</strong> (or bot) is an automated program that visits websites to index content for search
7+
A <strong className="text-white">Crawler</strong> (or bot) is an automated program that visits websites to index content for search
88
engines (like Google) or to generate link previews for social media (like Twitter and Discord).
99
</p>
10-
<div className="p-4 border-l-2 border-emerald-500 bg-white/5 font-mono text-xs text-gray-400 italic">
10+
11+
<div className="pl-4 border-l-2 border-emerald-500 py-2 my-6 text-xs text-gray-400 italic">
1112
"I visit the URL, read the meta tags, and report back what I found."
1213
</div>
14+
1315
<p>
14-
Most crawlers are simple: they fetch the <code>index.html</code> and look at the source code. If your site
16+
Most crawlers are simple: they fetch the <code className="text-emerald-400">index.html</code> and look at the source code. If your site
1517
relies entirely on JavaScript to render its content (CSR), the crawler sees a blank page.
1618
</p>
1719
<p>
18-
By using <strong>Static Site Generation (SSG)</strong>, we ensure that every route on Fezcodex has a unique HTML
20+
By using <strong className="text-white">Static Site Generation (SSG)</strong>, we ensure that every route on Fezcodex has a unique HTML
1921
file that any crawler can read, ensuring perfect SEO and rich social thumbnails.
2022
</p>
2123
</div>

‎src/data/vocab/csr.jsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,29 @@ import React from 'react';
22

33
export default function CSR() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong>Client-Side Rendering (CSR)</strong> is a web development technique where the browser downloads a minimal HTML file and a large JavaScript bundle. The JavaScript then executes and builds the entire user interface on the fly.
7+
<strong className="text-white">Client-Side Rendering (CSR)</strong> is a web development technique where the browser downloads a minimal HTML file and a large JavaScript bundle. The JavaScript then executes and builds the entire user interface on the fly.
88
</p>
9-
<div className="bg-emerald-500/5 p-4 rounded-sm border border-emerald-500/20 font-mono text-xs">
10-
<div className="text-gray-500 font-bold"> {'//'} CSR Initial HTML</div>
11-
<div className="text-white">{'<html>'}</div>
12-
<div className="text-white">{' <body>'}</div>
13-
<div className="text-white">{' <div id="root"></div>'}</div>
14-
<div className="text-white">{' <script src="bundle.js"></script>'}</div>
15-
<div className="text-white">{' </body>'}</div>
16-
<div className="text-white">{'</html>'}</div>
9+
10+
<div className="bg-black p-4 border border-white/10 font-mono text-xs my-6">
11+
<div className="text-gray-500 font-bold mb-2"> {'//'} CSR Initial HTML</div>
12+
<div className="text-blue-400">{'<html>'}</div>
13+
<div className="text-blue-400 pl-4">{'<body>'}</div>
14+
<div className="text-white pl-8">{'<div id="root"></div>'}</div>
15+
<div className="text-white pl-8">{'<script src="bundle.js"></script>'}</div>
16+
<div className="text-blue-400 pl-4">{'</body>'}</div>
17+
<div className="text-blue-400">{'</html>'}</div>
1718
</div>
19+
1820
<p>
1921
Most standard React apps use CSR. While powerful for interactivity, it has a "blank white screen" problem during the initial load and is often invisible to search engine crawlers that don't execute JavaScript.
2022
</p>
21-
<p>
22-
<strong>Comparison:</strong> Unlike SSG, where the HTML is ready before it reaches the browser, CSR requires the user's device to do the heavy lifting of rendering.
23-
</p>
23+
24+
<div className="border-l-2 border-white/20 pl-4 py-1">
25+
<strong className="text-white uppercase tracking-wider text-xs block mb-1">Comparison</strong>
26+
<span className="text-gray-400 text-xs">Unlike SSG, where the HTML is ready before it reaches the browser, CSR requires the user's device to do the heavy lifting of rendering.</span>
27+
</div>
2428
</div>
2529
);
2630
}

‎src/data/vocab/game-of-the-year.jsx‎

Lines changed: 42 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,36 @@
11
import React from 'react';
22

3+
const WINNERS = [
4+
{ year: '2025', game: 'Clair Obscur: Expedition 33' },
5+
{ year: '2024', game: 'Astro Bot' },
6+
{ year: '2023', game: "Baldur's Gate 3" },
7+
{ year: '2022', game: 'Elden Ring' },
8+
{ year: '2021', game: 'It Takes Two' },
9+
{ year: '2020', game: 'The Last of Us Part II' },
10+
{ year: '2019', game: 'Sekiro: Shadows Die Twice' },
11+
{ year: '2018', game: 'God of War' },
12+
{ year: '2017', game: 'The Legend of Zelda: Breath of the Wild' },
13+
{ year: '2016', game: 'Overwatch' },
14+
{ year: '2015', game: 'The Witcher 3: Wild Hunt' },
15+
{ year: '2014', game: 'Dragon Age: Inquisition' },
16+
{ year: '2013', game: 'Grand Theft Auto V' },
17+
{ year: '2012', game: 'The Walking Dead' },
18+
{ year: '2011', game: 'The Elder Scrolls V: Skyrim' },
19+
{ year: '2010', game: 'Red Dead Redemption' },
20+
{ year: '2009', game: 'Uncharted 2: Among Thieves' },
21+
{ year: '2008', game: 'Grand Theft Auto IV' },
22+
{ year: '2007', game: 'BioShock' },
23+
{ year: '2006', game: 'The Elder Scrolls IV: Oblivion' },
24+
{ year: '2005', game: 'Resident Evil 4' },
25+
{ year: '2004', game: 'Grand Theft Auto: San Andreas' },
26+
{ year: '2003', game: 'Madden NFL 2004' },
27+
];
28+
329
export default function GameOfTheYear() {
430
return (
5-
<div className="space-y-4">
31+
<div className="space-y-6 font-mono text-sm leading-relaxed">
632
<p>
7-
<strong>Game of the Year (GOTY)</strong> is an award given by various
33+
<strong className="text-white">Game of the Year (GOTY)</strong> is an award given by various
834
gaming publications, websites, and events to a video game that is
935
considered the best or most outstanding of a particular year.
1036
</p>
@@ -14,81 +40,20 @@ export default function GameOfTheYear() {
1440
gaming industry and culture. Winning GOTY is a prestigious honor often
1541
associated with critical acclaim and significant commercial success.
1642
</p>
17-
<h3 className="text-xl font-bold text-gray-100 mt-6">
18-
Notable Game of the Year Winners (The Game Awards & Spike Video Game
19-
Awards)
20-
</h3>
21-
<ul className="list-disc pl-5 space-y-1 text-gray-400">
22-
<li>
23-
<strong>2025:</strong> Clair Obscur: Expedition 33
24-
</li>
25-
<li>
26-
<strong>2024:</strong> Astro Bot
27-
</li>
28-
<li>
29-
<strong>2023:</strong> Baldur's Gate 3
30-
</li>
31-
<li>
32-
<strong>2022:</strong> Elden Ring
33-
</li>
34-
<li>
35-
<strong>2021:</strong> It Takes Two
36-
</li>
37-
<li>
38-
<strong>2020:</strong> The Last of Us Part II
39-
</li>
40-
<li>
41-
<strong>2019:</strong> Sekiro: Shadows Die Twice
42-
</li>
43-
<li>
44-
<strong>2018:</strong> God of War
45-
</li>
46-
<li>
47-
<strong>2017:</strong> The Legend of Zelda: Breath of the Wild
48-
</li>
49-
<li>
50-
<strong>2016:</strong> Overwatch
51-
</li>
52-
<li>
53-
<strong>2015:</strong> The Witcher 3: Wild Hunt
54-
</li>
55-
<li>
56-
<strong>2014:</strong> Dragon Age: Inquisition
57-
</li>
58-
<li>
59-
<strong>2013:</strong> Grand Theft Auto V
60-
</li>
61-
<li>
62-
<strong>2012:</strong> The Walking Dead
63-
</li>
64-
<li>
65-
<strong>2011:</strong> The Elder Scrolls V: Skyrim
66-
</li>
67-
<li>
68-
<strong>2010:</strong> Red Dead Redemption
69-
</li>
70-
<li>
71-
<strong>2009:</strong> Uncharted 2: Among Thieves
72-
</li>
73-
<li>
74-
<strong>2008:</strong> Grand Theft Auto IV
75-
</li>
76-
<li>
77-
<strong>2007:</strong> BioShock
78-
</li>
79-
<li>
80-
<strong>2006:</strong> The Elder Scrolls IV: Oblivion
81-
</li>
82-
<li>
83-
<strong>2005:</strong> Resident Evil 4
84-
</li>
85-
<li>
86-
<strong>2004:</strong> Grand Theft Auto: San Andreas
87-
</li>
88-
<li>
89-
<strong>2003:</strong> Madden NFL 2004
90-
</li>
91-
</ul>
43+
44+
<div className="mt-8">
45+
<h3 className="text-xs font-bold text-white uppercase tracking-widest mb-4 border-b border-white/10 pb-2">
46+
Notable Winners (TGA & VGA)
47+
</h3>
48+
<div className="grid grid-cols-1 gap-2">
49+
{WINNERS.map((winner) => (
50+
<div key={winner.year} className="flex gap-4 text-xs group">
51+
<span className="text-emerald-500 font-bold min-w-[40px]">{winner.year}</span>
52+
<span className="text-gray-400 group-hover:text-white transition-colors">{winner.game}</span>
53+
</div>
54+
))}
55+
</div>
56+
</div>
9257
</div>
9358
);
9459
}

‎src/data/vocab/hydration.jsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,23 @@ import React from 'react';
22

33
export default function Hydration() {
44
return (
5-
<div className="space-y-4">
5+
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong>Hydration</strong> is the process of a client-side JavaScript library (like React) "attaching" itself to a static HTML page that was already rendered by the server or a build tool.
7+
<strong className="text-white">Hydration</strong> is the process of a client-side JavaScript library (like React) "attaching" itself to a static HTML page that was already rendered by the server or a build tool.
88
</p>
9-
<div className="flex justify-center py-4">
10-
<div className="flex flex-col items-center gap-2 border border-dashed border-gray-700 p-4">
11-
<span className="text-gray-500 text-xs uppercase">Static HTML (Dry)</span>
12-
<span className="text-xl">↓</span>
13-
<span className="text-emerald-500 font-bold uppercase">React Event Listeners (Water)</span>
14-
<span className="text-xl">↓</span>
15-
<span className="text-blue-400 font-bold uppercase">Interactive App (Hydrated)</span>
9+
10+
<div className="flex justify-center py-8">
11+
<div className="flex flex-col items-center gap-4 border border-white/10 p-6 bg-white/[0.02]">
12+
<span className="text-gray-500 text-xs uppercase tracking-widest font-bold">Static HTML (Dry)</span>
13+
<span className="text-xl text-white">↓</span>
14+
<span className="text-emerald-500 font-bold uppercase tracking-widest text-xs">React Event Listeners</span>
15+
<span className="text-xl text-white">↓</span>
16+
<span className="text-blue-400 font-bold uppercase tracking-widest text-xs">Interactive App (Hydrated)</span>
1617
</div>
1718
</div>
19+
1820
<p>
19-
In the Fezcodex architecture, we use <code>ReactDOM.hydrateRoot</code>. When the browser loads the pre-rendered HTML (from SSG), React checks the content and makes it interactive without throwing away the existing DOM nodes. This provides the fast visual load of a static site with the interactivity of a dynamic app.
21+
In the Fezcodex architecture, we use <code className="text-white">ReactDOM.hydrateRoot</code>. When the browser loads the pre-rendered HTML (from SSG), React checks the content and makes it interactive without throwing away the existing DOM nodes. This provides the fast visual load of a static site with the interactivity of a dynamic app.
2022
</p>
2123
</div>
2224
);

0 commit comments

Comments
 (0)