Skip to content

Commit a441403

Browse files
fezcodefezcode
committed
Updates
1 parent 5964ab5 commit a441403

15 files changed

+157
-40
lines changed

‎apps/apps.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,14 @@
220220
"description": "Pop some virtual bubble wrap to relieve stress.",
221221
"icon": "CirclesFourIcon",
222222
"created_at": "2025-11-25T16:01:56+03:00"
223+
},
224+
{
225+
"slug": "tcg-card-generator",
226+
"to": "/apps/tcg-card-generator",
227+
"title": "TCG Card Generator",
228+
"description": "Create your own custom TCG cards with this generator.",
229+
"icon": "CardsThreeIcon",
230+
"created_at": "2025-11-26T12:00:00+03:00"
223231
}
224232
]
225233
},

‎asset-manifest.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": {
3-
"main.css": "/static/css/main.391993e2.css",
4-
"main.js": "/static/js/main.570a7686.js",
3+
"main.css": "/static/css/main.66b14aee.css",
4+
"main.js": "/static/js/main.61c70e7b.js",
55
"static/js/453.f568ff1d.chunk.js": "/static/js/453.f568ff1d.chunk.js",
66
"static/media/border.jpg": "/static/media/border.b7869a9ea7ccd009873c.jpg",
77
"static/media/parchment.png": "/static/media/parchment.c4af92656f29dc66bd67.png",
@@ -10,12 +10,12 @@
1010
"static/media/slick.ttf": "/static/media/slick.c94f7671dcc99dce43e2.ttf",
1111
"static/media/slick.woff": "/static/media/slick.295183786cd8a1389865.woff",
1212
"index.html": "/index.html",
13-
"main.391993e2.css.map": "/static/css/main.391993e2.css.map",
14-
"main.570a7686.js.map": "/static/js/main.570a7686.js.map",
13+
"main.66b14aee.css.map": "/static/css/main.66b14aee.css.map",
14+
"main.61c70e7b.js.map": "/static/js/main.61c70e7b.js.map",
1515
"453.f568ff1d.chunk.js.map": "/static/js/453.f568ff1d.chunk.js.map"
1616
},
1717
"entrypoints": [
18-
"static/css/main.391993e2.css",
19-
"static/js/main.570a7686.js"
18+
"static/css/main.66b14aee.css",
19+
"static/js/main.61c70e7b.js"
2020
]
2121
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en" class="dark"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml"/><meta name="description" content="codex by fezcode..."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display&display=swap" rel="stylesheet"><title>fezcodex</title><script defer="defer" src="/static/js/main.570a7686.js"></script><link href="/static/css/main.391993e2.css" rel="stylesheet"></head><body class="bg-slate-950"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1+
<!doctype html><html lang="en" class="dark"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml"/><meta name="description" content="codex by fezcode..."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display&display=swap" rel="stylesheet"><title>fezcodex</title><script defer="defer" src="/static/js/main.61c70e7b.js"></script><link href="/static/css/main.66b14aee.css" rel="stylesheet"></head><body class="bg-slate-950"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎posts/mastering-tailwind-centering.txt‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
Have you ever tried to center a title in a header, but also wanted a "Back" button or a breadcrumb on the far left?
2+
3+
If you just use `flex justify-between`, the title gets pushed off-center if the left and right items aren't exactly the same width. It looks messy.
4+
5+
Today, I'm going to show you the "Magic" behind perfectly centering an element while keeping a side item positioned absolutely, using **Tailwind CSS**.
6+
7+
## The Challenge
8+
9+
The goal is to have the **Title** perfectly centered in the container, regardless of how long the **Breadcrumb** text on the left is.
10+
11+
**The Solution: Absolute Positioning within a Relative Container.**
12+
13+
```jsx
14+
<div className="relative flex flex-col items-center justify-center mb-4">
15+
{/* Breadcrumb (Absolute on Desktop) */}
16+
<span className="md:absolute md:left-0 md:top-1/2 md:-translate-y-1/2 ...">
17+
fc::apps::tcg
18+
</span>
19+
20+
{/* Title (Flow Content) */}
21+
<h1 className="...">Techno TCG Maker</h1>
22+
</div>
23+
```
24+
25+
## Step-by-Step Breakdown
26+
27+
### 1. The Parent (`relative`)
28+
29+
```jsx
30+
<div className="relative flex flex-col items-center justify-center">
31+
```
32+
33+
* `relative`: This defines the "sandbox". Any child with `absolute` positioning will position itself relative to *this* box, not the whole page.
34+
* `flex flex-col items-center`: By default (mobile), this is just a vertical stack. The breadcrumb sits on top of the title.
35+
36+
### 2. The Breadcrumb (`absolute`)
37+
38+
```jsx
39+
<span className="md:absolute md:left-0 md:top-1/2 md:-translate-y-1/2">
40+
```
41+
42+
* `md:absolute`: On medium screens (desktop) and up, we rip this element out of the document flow. It no longer takes up space, so the Title (which is still in the flow) naturally snaps to the exact center of the parent.
43+
* `md:left-0`: "Go to the far left edge."
44+
* `md:top-1/2`: "Move your top edge to 50% of the container's height." (This alone actually makes it look too low).
45+
* `md:-translate-y-1/2`: "Slide yourself UP by 50% of your own height." **This is the golden rule** for vertically centering absolute items.
46+
47+
## Bonus: Coding Tailwind Like a Pro
48+
49+
To write "clean" Tailwind that produces complex layouts like this, follow these mental models:
50+
51+
### A. Think Mobile-First
52+
Notice how I wrote `flex-col` first, and then `md:absolute`?
53+
* **Bad:** Write for desktop, then try to fix it for mobile.
54+
* **Good:** Write for a narrow phone screen. Once that looks good, add `md:` prefix to change the layout for tablets/laptops.
55+
56+
### B. Master the "Invisible Box" (Flexbox)
57+
90% of layout is just Flexbox.
58+
* `flex justify-between`: Items push to edges (Left ... Right).
59+
* `flex justify-center`: Items bunch in the middle.
60+
* `gap-4`: The best way to space items. Never use `margin-right` on children if you can use `gap` on the parent.
61+
62+
### C. The "Text Gradient" Trick
63+
To get that shiny, futuristic text effect:
64+
1. `bg-gradient-to-r`: Define the gradient direction.
65+
2. `from-X to-Y`: Define the colors.
66+
3. `bg-clip-text text-transparent`: The specific magic that clips the colored background to the shape of the letters and makes the text fill invisible so the background shows through.
67+
68+
### D. Memorize the Spacing Scale
69+
Tailwind's scale is usually multiples of 4px (0.25rem).
70+
* `1` = 4px
71+
* `4` = 16px (Standard padding/margin)
72+
* `8` = 32px
73+
* `16` = 64px
74+
75+
Sticking to this rhythm makes your UI feel consistent and "professional" without you really trying.

‎posts/posts.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
11
[
2+
{
3+
"slug": "mastering-tailwind-centering",
4+
"title": "Mastering Tailwind CSS: The \"Absolute Centering\" Trick",
5+
"date": "2025-11-26",
6+
"updated": "2025-11-26",
7+
"description": "Learn how to perfectly center a title while keeping a side element positioned absolutely, ensuring a balanced layout regardless of content size.",
8+
"tags": [
9+
"tailwind",
10+
"css",
11+
"frontend",
12+
"layout",
13+
"tutorial"
14+
],
15+
"category": "gist",
16+
"filename": "mastering-tailwind-centering.txt",
17+
"authors": ["fezcode"],
18+
"image": "/images/defaults/sina-salehian-HqmTUJD73mM-unsplash.jpg"
19+
},
220
{
321
"slug": "gaussian-elimination",
422
"title": "Gaussian Elimination: The Swiss Army Knife of Linear Systems in Computer Engineering",

‎rss.xml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,24 @@
99
<link>https://fezcode.com</link>
1010
</image>
1111
<generator>RSS for Node</generator>
12-
<lastBuildDate>Wed, 26 Nov 2025 09:33:23 GMT</lastBuildDate>
12+
<lastBuildDate>Wed, 26 Nov 2025 13:28:31 GMT</lastBuildDate>
1313
<atom:link href="https://fezcode.com/rss.xml" rel="self" type="application/rss+xml"/>
14-
<pubDate>Wed, 26 Nov 2025 09:33:22 GMT</pubDate>
14+
<pubDate>Wed, 26 Nov 2025 13:28:31 GMT</pubDate>
1515
<copyright><![CDATA[2025 Ahmed Samil Bulbul]]></copyright>
1616
<language><![CDATA[en]]></language>
1717
<managingEditor><![CDATA[samil.bulbul@gmail.com (Ahmed Samil Bulbul)]]></managingEditor>
1818
<webMaster><![CDATA[samil.bulbul@gmail.com (Ahmed Samil Bulbul)]]></webMaster>
1919
<ttl>60</ttl>
20+
<item>
21+
<title><![CDATA[Mastering Tailwind CSS: The "Absolute Centering" Trick]]></title>
22+
<description><![CDATA[[object Object]]]></description>
23+
<link>https://fezcode.com/#/blog/mastering-tailwind-centering</link>
24+
<guid isPermaLink="false">https://fezcode.com/#/blog/mastering-tailwind-centering</guid>
25+
<dc:creator><![CDATA[Ahmed Samil Bulbul]]></dc:creator>
26+
<pubDate>Wed, 26 Nov 2025 00:00:00 GMT</pubDate>
27+
<content:encoded><![CDATA[<p>Have you ever tried to center a title in a header, but also wanted a &quot;Back&quot; button or a breadcrumb on the far left?</p>
28+
<p><a href="https://fezcode.com/#/blog/mastering-tailwind-centering">Read more...</a></p>]]></content:encoded>
29+
</item>
2030
<item>
2131
<title><![CDATA[LeetCode 62: Unique Paths - A Dynamic Programming Approach]]></title>
2232
<description><![CDATA[[object Object]]]></description>

‎sitemap.xml‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,64 @@
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
33
<url>
44
<loc>https://fezcode.com/</loc>
5-
<lastmod>2025-11-26T09:33:23.582Z</lastmod>
5+
<lastmod>2025-11-26T13:28:32.418Z</lastmod>
66
<changefreq>monthly</changefreq>
77
<priority>1.0</priority>
88
</url>
99
<url>
1010
<loc>https://fezcode.com/about</loc>
11-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
11+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
1212
<changefreq>monthly</changefreq>
1313
<priority>0.8</priority>
1414
</url>
1515
<url>
1616
<loc>https://fezcode.com/blog</loc>
17-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
17+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
1818
<changefreq>monthly</changefreq>
1919
<priority>0.8</priority>
2020
</url>
2121
<url>
2222
<loc>https://fezcode.com/projects</loc>
23-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
23+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
2424
<changefreq>monthly</changefreq>
2525
<priority>0.8</priority>
2626
</url>
2727
<url>
2828
<loc>https://fezcode.com/logs</loc>
29-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
29+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
3030
<changefreq>monthly</changefreq>
3131
<priority>0.8</priority>
3232
</url>
3333
<url>
3434
<loc>https://fezcode.com/stories</loc>
35-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
35+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
3636
<changefreq>monthly</changefreq>
3737
<priority>0.8</priority>
3838
</url>
3939
<url>
4040
<loc>https://fezcode.com/settings</loc>
41-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
41+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
4242
<changefreq>monthly</changefreq>
4343
<priority>0.8</priority>
4444
</url>
4545
<url>
4646
<loc>https://fezcode.com/apps</loc>
47-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
47+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
4848
<changefreq>monthly</changefreq>
4949
<priority>0.8</priority>
5050
</url>
5151
<url>
5252
<loc>https://fezcode.com/stories/lore</loc>
53-
<lastmod>2025-11-26T09:33:23.583Z</lastmod>
53+
<lastmod>2025-11-26T13:28:32.419Z</lastmod>
5454
<changefreq>monthly</changefreq>
5555
<priority>0.8</priority>
5656
</url>
57+
<url>
58+
<loc>https://fezcode.com/#/blog/mastering-tailwind-centering</loc>
59+
<lastmod>2025-11-26T00:00:00.000Z</lastmod>
60+
<changefreq>weekly</changefreq>
61+
<priority>0.7</priority>
62+
</url>
5763
<url>
5864
<loc>https://fezcode.com/#/blog/gaussian-elimination</loc>
5965
<lastmod>2025-11-23T00:00:00.000Z</lastmod>
@@ -572,79 +578,79 @@
572578
</url>
573579
<url>
574580
<loc>https://fezcode.com/#/stories/books/1</loc>
575-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
581+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
576582
<changefreq>monthly</changefreq>
577583
<priority>0.6</priority>
578584
</url>
579585
<url>
580586
<loc>https://fezcode.com/#/stories/books/1/pages/1</loc>
581-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
587+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
582588
<changefreq>weekly</changefreq>
583589
<priority>0.5</priority>
584590
</url>
585591
<url>
586592
<loc>https://fezcode.com/#/stories/books/2</loc>
587-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
593+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
588594
<changefreq>monthly</changefreq>
589595
<priority>0.6</priority>
590596
</url>
591597
<url>
592598
<loc>https://fezcode.com/#/stories/books/2/pages/1</loc>
593-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
599+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
594600
<changefreq>weekly</changefreq>
595601
<priority>0.5</priority>
596602
</url>
597603
<url>
598604
<loc>https://fezcode.com/#/stories/books/3</loc>
599-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
605+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
600606
<changefreq>monthly</changefreq>
601607
<priority>0.6</priority>
602608
</url>
603609
<url>
604610
<loc>https://fezcode.com/#/stories/books/3/pages/1</loc>
605-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
611+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
606612
<changefreq>weekly</changefreq>
607613
<priority>0.5</priority>
608614
</url>
609615
<url>
610616
<loc>https://fezcode.com/#/stories/books/3/pages/2</loc>
611-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
617+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
612618
<changefreq>weekly</changefreq>
613619
<priority>0.5</priority>
614620
</url>
615621
<url>
616622
<loc>https://fezcode.com/#/stories/books/4</loc>
617-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
623+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
618624
<changefreq>monthly</changefreq>
619625
<priority>0.6</priority>
620626
</url>
621627
<url>
622628
<loc>https://fezcode.com/#/stories/books/4/pages/1</loc>
623-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
629+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
624630
<changefreq>weekly</changefreq>
625631
<priority>0.5</priority>
626632
</url>
627633
<url>
628634
<loc>https://fezcode.com/#/stories/books/4/pages/2</loc>
629-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
635+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
630636
<changefreq>weekly</changefreq>
631637
<priority>0.5</priority>
632638
</url>
633639
<url>
634640
<loc>https://fezcode.com/#/stories/books/5</loc>
635-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
641+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
636642
<changefreq>monthly</changefreq>
637643
<priority>0.6</priority>
638644
</url>
639645
<url>
640646
<loc>https://fezcode.com/#/stories/books/5/pages/1</loc>
641-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
647+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
642648
<changefreq>weekly</changefreq>
643649
<priority>0.5</priority>
644650
</url>
645651
<url>
646652
<loc>https://fezcode.com/#/stories/books/5/pages/2</loc>
647-
<lastmod>2025-11-26T09:33:23.588Z</lastmod>
653+
<lastmod>2025-11-26T13:28:32.423Z</lastmod>
648654
<changefreq>weekly</changefreq>
649655
<priority>0.5</priority>
650656
</url>

‎static/css/main.391993e2.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎static/css/main.391993e2.css.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎static/css/main.66b14aee.css‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)