Updates

Author: fezcode

apps/apps.json

@@ -0,0 +1,135 @@
+[
+  {
+    "slug": "image-toolkit",
+    "to": "/apps/image-toolkit",
+    "title": "Image Toolkit",
+    "description": "A toolkit for basic image manipulations.",
+    "icon": "Image"
+  },
+  {
+    "slug": "codename-generator",
+    "to": "/apps/codename-generator",
+    "title": "Codename Generator",
+    "description": "Generate cool, spy-ish project names.",
+    "icon": "ShieldCheck"
+  },
+  {
+    "slug": "picker-wheel",
+    "to": "/apps/picker-wheel",
+    "title": "Picker Wheel",
+    "description": "A spinning wheel to pick a random winner from a list of entries.",
+    "icon": "CircleDashed"
+  },
+  {
+    "slug": "tournament-bracket",
+    "to": "/apps/tournament-bracket",
+    "title": "Tournament Bracket",
+    "description": "Create and manage tournament brackets.",
+    "icon": "ListNumbers"
+  },
+  {
+    "slug": "fantasy-name-generator",
+    "to": "/apps/fantasy-name-generator",
+    "title": "Fantasy Name Generator",
+    "description": "Generate fantasy names for characters, places, and items.",
+    "icon": "Sparkle"
+  },
+  {
+    "slug": "dice-roller",
+    "to": "/apps/dice-roller",
+    "title": "Dice Roller",
+    "description": "Roll various types of dice for your games and adventures.",
+    "icon": "DiceSix"
+  },
+  {
+    "slug": "word-counter",
+    "to": "/apps/word-counter",
+    "title": "Word Counter",
+    "description": "Count words, characters, lines and paragraphs in a text.",
+    "icon": "TextT"
+  },
+  {
+    "slug": "case-converter",
+    "to": "/apps/case-converter",
+    "title": "Case Converter",
+    "description": "Convert text to different cases (e.g., uppercase, lowercase, camelCase).",
+    "icon": "TextAa"
+  },
+  {
+    "slug": "base64-converter",
+    "to": "/apps/base64-converter",
+    "title": "Base64 Converter",
+    "description": "Encode and decode text to and from Base64 format.",
+    "icon": "Code"
+  },
+  {
+    "slug": "url-converter",
+    "to": "/apps/url-converter",
+    "title": "URL Encoder/Decoder",
+    "description": "Encode and decode URL strings.",
+    "icon": "LinkIcon"
+  },
+  {
+    "slug": "ascii-converter",
+    "to": "/apps/ascii-converter",
+    "title": "Text to ASCII Converter",
+    "description": "Convert text to ASCII codes and vice-versa.",
+    "icon": "Keyboard"
+  },
+  {
+    "slug": "hash-generator",
+    "to": "/apps/hash-generator",
+    "title": "Hash Generator",
+    "description": "Generate SHA1, SHA256, and SHA512 hashes from text.",
+    "icon": "Fingerprint"
+  },
+  {
+    "slug": "uuid-generator",
+    "to": "/apps/uuid-generator",
+    "title": "UUID Generator",
+    "description": "Generate UUID v4.",
+    "icon": "Key"
+  },
+  {
+    "slug": "password-generator",
+    "to": "/apps/password-generator",
+    "title": "Password Generator",
+    "description": "Generate strong, random passwords with customizable options.",
+    "icon": "Key"
+  },
+  {
+    "slug": "json-formatter",
+    "to": "/apps/json-formatter",
+    "title": "JSON Formatter & Validator",
+    "description": "Format and validate JSON data for readability and correctness.",
+    "icon": "Code"
+  },
+  {
+    "slug": "color-contrast-checker",
+    "to": "/apps/color-contrast-checker",
+    "title": "Color Contrast Checker",
+    "description": "Check WCAG color contrast ratios for accessibility.",
+    "icon": "Palette"
+  },
+  {
+    "slug": "qr-code-generator",
+    "to": "/apps/qr-code-generator",
+    "title": "QR Code Generator",
+    "description": "Generate QR codes from text or URLs with customizable versions and error correction.",
+    "icon": "QrCode"
+  },
+  {
+    "slug": "color-palette-generator",
+    "to": "/apps/color-palette-generator",
+    "title": "Color Palette Generator",
+    "description": "Generate random color palettes.",
+    "icon": "Palette"
+  },
+  {
+    "slug": "css-unit-converter",
+    "to": "/apps/css-unit-converter",
+    "title": "CSS Unit Converter",
+    "description": "Convert between px, em, rem, vw, vh, and % units.",
+    "icon": "Ruler"
+  }
+]

asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.7f4591e4.css",
-    "main.js": "/static/js/main.77bdf3e8.js",
+    "main.css": "/static/css/main.41dc2c5c.css",
+    "main.js": "/static/js/main.df883002.js",
     "static/js/453.f568ff1d.chunk.js": "/static/js/453.f568ff1d.chunk.js",
     "static/media/border.jpg": "/static/media/border.b7869a9ea7ccd009873c.jpg",
     "static/media/parchment.png": "/static/media/parchment.c4af92656f29dc66bd67.png",
@@ -10,12 +10,12 @@
     "static/media/slick.ttf": "/static/media/slick.c94f7671dcc99dce43e2.ttf",
     "static/media/slick.woff": "/static/media/slick.295183786cd8a1389865.woff",
     "index.html": "/index.html",
-    "main.7f4591e4.css.map": "/static/css/main.7f4591e4.css.map",
-    "main.77bdf3e8.js.map": "/static/js/main.77bdf3e8.js.map",
+    "main.41dc2c5c.css.map": "/static/css/main.41dc2c5c.css.map",
+    "main.df883002.js.map": "/static/js/main.df883002.js.map",
     "453.f568ff1d.chunk.js.map": "/static/js/453.f568ff1d.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.7f4591e4.css",
-    "static/js/main.77bdf3e8.js"
+    "static/css/main.41dc2c5c.css",
+    "static/js/main.df883002.js"
   ]
 }

index.html

@@ -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.77bdf3e8.js"></script><link href="/static/css/main.7f4591e4.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>
+<!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.df883002.js"></script><link href="/static/css/main.41dc2c5c.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/demystifying-tailwind-css.txt

@@ -137,6 +137,41 @@ Another way is to treat the `<hr>` as a block element with a specific height and
 
 Choose the method that best suits your design needs. The `border-color` method is generally more semantic for an `<hr>`, but the `background-color` method offers more flexibility for solid bars.
 
+## Part 6: Let's Put Two `<Span>` Element Next To Each Other
+
+When your parent `div` has the classes `flex flex-col text-sm group w-max flex-grow`, the `flex-col` class specifically instructs the flex container to arrange its direct children in a **column**, meaning they will stack vertically, one below the other.
+
+To put two `<span>` elements next to each other (horizontally) within this `flex-col` parent, you need to introduce a **nested flex container** that is configured for a row layout.
+
+Here's how you can do it:
+
+```html
+<div class="flex flex-col text-sm group w-max flex-grow">
+  <!-- Other content that might stack vertically due to parent's flex-col -->
+  <div>Other content 1</div>
+  <div>Other content 2</div>
+
+  <!-- This is the new nested flex container for your two spans -->
+  <div class="flex items-center space-x-2">
+    <span>Span 1</span>
+    <span>Span 2</span>
+  </div>
+
+  <!-- More content that might stack vertically -->
+  <div>More content 3</div>
+</div>
+```
+
+**Explanation:**
+
+1.  **`flex flex-col text-sm group w-max flex-grow`**: This is your existing parent `div`. It will arrange its direct children (like "Other content 1", "Other content 2", the new nested `div`, and "More content 3") in a vertical column.
+2.  **`<div class="flex items-center space-x-2">`**: This is the crucial part.
+    *   `flex`: This makes this new `div` a flex container. By default, a flex container arranges its items in a **row** (`flex-row`).
+    *   `items-center`: This vertically aligns the items (your `<span>`s) in the center of this nested flex container.
+    *   `space-x-2`: This Tailwind utility adds horizontal space between the direct children of this flex container (your two `<span>`s). You can adjust `2` to any spacing you need (e.g., `space-x-1`, `space-x-4`).
+
+By using this nested `div`, you create a horizontal layout context specifically for your two `<span>` elements, while the overall parent `div` still maintains its `flex-col` behavior for its other children.
+
 ## Conclusion
 
 Tailwind CSS provides a powerful and efficient way to build and maintain the UI of the `fezcodex` project. By embracing its utility-first philosophy and leveraging its extensive configuration options, we can rapidly develop consistent, responsive, and performant user interfaces. It streamlines the styling process, allowing developers to focus more on functionality and less on managing complex CSS stylesheets.

rss.xml

@@ -9,9 +9,9 @@
             <link>https://fezcode.com</link>
         </image>
         <generator>RSS for Node</generator>
-        <lastBuildDate>Wed, 12 Nov 2025 21:51:11 GMT</lastBuildDate>
+        <lastBuildDate>Wed, 12 Nov 2025 23:05:13 GMT</lastBuildDate>
         <atom:link href="https://fezcode.com/rss.xml" rel="self" type="application/rss+xml"/>
-        <pubDate>Wed, 12 Nov 2025 21:51:11 GMT</pubDate>
+        <pubDate>Wed, 12 Nov 2025 23:05:13 GMT</pubDate>
         <copyright><![CDATA[2025 Ahmed Samil Bulbul]]></copyright>
         <language><![CDATA[en]]></language>
         <managingEditor><![CDATA[samil.bulbul@gmail.com (Ahmed Samil Bulbul)]]></managingEditor>