new

fezcode · fezcode · commit 947272d408f8 · 2025-11-07T02:36:56.000+03:00
diff --git a/public/posts/demystifying-tailwind-css.txt b/public/posts/demystifying-tailwind-css.txt
@@ -0,0 +1,91 @@
+
+# Demystifying Tailwind CSS in `fezcodex`: A Utility-First Approach
+
+In the `fezcodex` project, you'll notice that our components are styled **cool**(!). Instead of writing custom CSS for every element, **Tailwind CSS** is used. This post will explain what Tailwind CSS is, how it's configured in my project,
+and why it's a powerful tool for building user interfaces.
+
+## Part 1: The Core Concept - Utility-First CSS
+
+Traditionally, when styling a webpage, you might write CSS like this:
+
+```css
+.my-button {
+  background-color: blue;
+  color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+```
+
+And then apply it in your HTML:
+
+```html
+<button class="my-button">Click Me</button>
+```
+
+Tailwind CSS takes a **utility-first** approach. Instead of writing custom CSS classes for every component, you apply small, single-purpose utility classes directly in your HTML (or JSX, in our case). Each class does one thing, and one thing only.
+
+For example, the same button in Tailwind would look like this:
+
+```html
+<button class="bg-blue-500 text-white p-4 rounded-md">Click Me</button>
+```
+
+**Benefits of Utility-First CSS:**
+
+*   **Rapid UI Development:** You can build complex UIs much faster because you're not constantly switching between HTML/JSX and CSS files. All the styling happens directly in your markup.
+*   **Consistent Design:** By using a predefined set of utility classes (which are based on a design system), it's much easier to maintain a consistent look and feel across your application.
+*   **No More Unused CSS:** Tailwind, especially with its JIT (Just-In-Time) mode, only generates the CSS that you actually use in your project. This results in incredibly small and optimized CSS bundles, improving performance.
+*   **Avoid Naming Headaches:** You no longer have to come up with semantic class names for every single element, which can be a surprisingly difficult task in larger projects.
+
+## Part 2: Tailwind in `fezcodex` - Configuration and Customization
+
+Our project customizes Tailwind to fit its specific design needs. This is primarily managed through two files:
+
+### `tailwind.config.js`
+
+This is the central configuration file for Tailwind CSS. It tells Tailwind how to behave and what custom styles to include.
+
+*   **`content`**: This array (`./src/**/*.{js,jsx,ts,tsx}`) tells Tailwind which files to scan for utility classes. This is crucial for the build process to identify and include only the necessary CSS.
+*   **`theme.extend.colors`**: This is where we integrate our custom color palette. You'll see it imports `colors` from `./src/config/colors.js`. This means that any color defined in `colors.js` (like `article: '#FA8072'`) becomes available as a Tailwind utility class. For example:
+    *   `text-article` will apply the `article` color to text.
+    *   `bg-article` will apply the `article` color to the background.
+    *   `border-article` will apply the `article` color to the border.
+    This is why we use `text-article` and not just `article` – the `text-` prefix tells Tailwind *what* CSS property to apply the color to.
+*   **`theme.extend.fontFamily`**: Similar to colors, this section allows us to define and use custom fonts (imported from `./src/config/fonts.js`) throughout the project using Tailwind's `font-{name}` classes.
+*   **`plugins`**: We use `@tailwindcss/typography` here. This plugin provides a set of `prose` classes that can be used to style raw HTML (like the content generated from Markdown files) with beautiful, readable typography, without having to manually style every heading, paragraph, and list item.
+
+### `src/config/colors.js` and `src/config/fonts.js`
+
+These files act as our project's design token repositories. They centralize all our custom colors and font definitions, making it easy to manage and update our design system from a single source.
+
+## Part 3: How It All Comes Together - Building UI
+
+When you look at a component like `AppCard.js` or `WordCounterPage.js`, you'll see a lot of classes directly in the JSX. For example, a card might have classes like:
+
+```html
+<div class="bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl overflow-hidden h-full">
+  <!-- ... content ... -->
+</div>
+```
+
+Let's break down a few of these:
+
+*   `bg-transparent`: Sets the background to transparent.
+*   `border`: Adds a default border.
+*   `rounded-lg`: Applies a large border-radius.
+*   `shadow-lg`: Adds a large box shadow.
+*   `p-6`: Adds padding of `1.5rem` on all sides.
+*   `flex flex-col justify-between`: Configures the element as a flex container, arranging its children in a column and distributing space between them.
+*   `hover:scale-105 hover:shadow-2xl`: These are **variant** classes. They apply `scale-105` (makes the element 5% larger) and `shadow-2xl` (a larger shadow) *only when the element is hovered over*.
+*   `transition-all duration-300 ease-in-out`: Ensures that changes to properties like `transform` (for `scale`) and `box-shadow` (for `shadow`) happen smoothly over 300 milliseconds.
+
+Tailwind also makes responsive design easy with prefixes like `sm:`, `md:`, `lg:`, and `xl:`. For example, `md:flex` would make an element a flex container only on medium screens and larger.
+
+## Part 4: The Build Process
+
+During development and when building for production, a tool like **Craco** (which sits on top of Create React App's Webpack configuration) processes your code. It uses **PostCSS** and the Tailwind plugin to scan all your files for Tailwind utility classes. It then generates a minimal CSS file containing *only* the styles corresponding to the classes you've actually used. This ensures that your final application bundle is as small and performant as possible.
+
+## 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.
diff --git a/public/posts/posts.json b/public/posts/posts.json
@@ -1,4 +1,14 @@
 [
+  {
+    "slug": "demystifying-tailwind-css",
+    "title": "Demystifying Tailwind CSS",
+    "date": "2025-11-07",
+    "updated": "2025-11-07",
+    "description": "Demystifying Tailwind CSS",
+    "tags": ["tailwind", "css", "fezcodex", "react"],
+    "category": "dev",
+    "filename": "demystifying-tailwind-css.txt"
+  },
   {
     "slug": "ubuntu-once-more",
     "title": "Ubuntu Once More",
@@ -19,16 +29,24 @@
         {
           "slug": "react-memoization-hooks",
           "title": "React Memoization Hooks",
-          "filename": "/react-of-fezcode/016-react-memoization-hooks.txt",
+          "filename": "/react-of-fezcode/017-react-memoization-hooks.txt",
           "date": "2025-10-25",
           "updated": "2025-10-26",
           "category": "dev"
         },
         {
           "slug": "react-refs-useref",
           "title": "React Refs Useref",
-          "filename": "/react-of-fezcode/015-react-refs-useref.txt",
+          "filename": "/react-of-fezcode/016-react-refs-useref.txt",
+          "date": "2025-10-25",
+          "category": "dev"
+        },
+        {
+          "slug": "react-toast-explanation-in-details",
+          "title": "How React Toasts Work in `fezcodex`",
+          "filename": "/react-of-fezcode/015-react-toast-explanation-in-details.txt",
           "date": "2025-10-25",
+          "updated": "2025-10-25",
           "category": "dev"
         },
         {
diff --git a/public/posts/react-of-fezcode/015-react-toast-explanation-in-details.txt b/public/posts/react-of-fezcode/015-react-toast-explanation-in-details.txt
@@ -0,0 +1,64 @@
+
+# Deep Dive: How React Toasts Work in `fezcodex`
+
+Toast notifications are a staple of modern web applications. They provide non-intrusive feedback to users about the result of their actions. In the `fezcodex` project, we have a robust and reusable toast system. This article will break down how it works, from its architecture to the React magic that holds it all together.
+
+## Part 1: The Architecture - A Tale of Three Components
+
+The toast system is elegantly designed around three key parts that work in harmony:
+
+1.  **`ToastProvider.js` (The Brains):** This is the central manager. It wraps our entire application, creating a "context" that any component can plug into. It holds the list of all active toasts and provides the functions (`addToast`, `removeToast`) to modify that list. It's also responsible for rendering the container where the toasts appear.
+
+2.  **`useToast.js` (The Public API):** This is a custom React Hook that acts as a clean and simple gateway. Instead of components needing to know about the underlying context, they can just use this hook to get access to the `addToast` function. It's the "button" that other components press to request a toast.
+
+3.  **`Toast.js` (The Notification UI):** This component represents a single toast message. It's responsible for its own appearance, animations, and, most importantly, its own demise. It knows how long it should be on screen and contains the logic to remove itself after its time is up.
+
+## Part 2: The Magic of `useState` - Where Does the State Go?
+
+This is the crucial question. In `ToastProvider.js`, we have this line:
+
+```javascript
+const [toasts, setToasts] = useState([]);
+```
+
+When a component function runs, all its internal variables are created and then discarded when it's done. So how does the `toasts` array not just reset to `[]` every single time?
+
+**React Remembers.**
+
+The `useState` hook is a request to React to create and manage a piece of state *on behalf of* your component.
+
+1.  **First Render:** The very first time `ToastProvider` renders, React sees `useState([])`. It creates a "memory cell" for this specific component instance and puts an empty array `[]` inside it. It then returns that array to the component as the `toasts` variable.
+
+2.  **State Updates:** When you call `addToast`, it eventually calls `setToasts(...)`. This function doesn't change the state directly. Instead, it sends a message to React saying, "I have a new value for this state. Please update it and re-render the component."
+
+3.  **Subsequent Renders:** When React re-renders `ToastProvider`, it arrives at the `useState([])` line again. But this time, React knows it has already created a state for this component. It **ignores the initial value (`[]`)** and instead provides the *current* value from its internal memory—the updated array of toasts.
+
+This is the fundamental principle of React Hooks: they allow your function components to have stateful logic that persists across renders, managed by React itself.
+
+## Part 3: The Full Lifecycle of a Toast
+
+Let's tie it all together by following a single toast from birth to death.
+
+1.  **The Call:** A user performs an action in a component (e.g., the Word Counter). That component calls `addToast({ title: 'Success!', ... })`.
+
+2.  **The Context:** The `useToast` hook provides the `addToast` function from the `ToastProvider`'s context.
+
+3.  **The State Update:** The `addToast` function in `ToastProvider` runs. It creates a new toast object with a unique ID and calls `setToasts([newToast, ...otherToasts])`.
+
+4.  **The Re-render:** React receives the state update request and schedules a re-render for `ToastProvider`.
+
+5.  **The Render:** `ToastProvider` runs again. It calls `useState`, and React hands it the **new array** containing our new toast. The component's `return` statement is executed, and its `.map()` function now loops over an array that includes the new toast.
+
+6.  **The Birth:** A new `<Toast />` component is rendered on the screen. It receives its `id`, `title`, `message`, and `duration` as props.
+
+7.  **The Countdown:** Inside the new `<Toast />` component, a `useEffect` hook fires. It starts a `setTimeout` timer for the given `duration`.
+
+8.  **The End:** When the timer finishes, it calls the `removeToast(id)` function that was passed down as a prop.
+
+9.  **The Cleanup:** `removeToast` in the `ToastProvider` calls `setToasts(...)` again, this time with an array that *filters out* the toast with the matching ID.
+
+10. **The Final Re-render:** React processes the state update, re-renders the `ToastProvider`, and the toast is no longer in the array. It vanishes from the screen.
+
+## Conclusion
+
+The `fezcodex` toast system is a perfect microcosm of modern React development. It shows how to use **Context** to provide global functionality without cluttering components, and it relies on the magic of the **`useState` hook** to give components a memory that persists between renders. By letting React manage the state, we can write declarative UI that simply reacts to state changes.
diff --git a/public/posts/react-of-fezcode/016-react-refs-useref.txt b/public/posts/react-of-fezcode/016-react-refs-useref.txt
diff --git a/public/posts/react-of-fezcode/017-react-memoization-hooks.txt b/public/posts/react-of-fezcode/017-react-memoization-hooks.txt
diff --git a/src/components/AnimatedRoutes.js b/src/components/AnimatedRoutes.js
@@ -18,6 +18,7 @@ import DndLorePage from '../pages/DndLorePage'; // New import
 import DndBookPage from '../pages/DndBookPage'; // New import
 import AppPage from '../pages/AppPage';
 import IpPage from '../pages/apps/IpPage';
+import WordCounterPage from '../pages/apps/WordCounterPage';
 
 import UsefulLinksPage from '../pages/UsefulLinksPage';
 
@@ -300,6 +301,20 @@ function AnimatedRoutes() {
             </motion.div>
           }
         />
+        <Route
+          path="/apps/word-counter"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <WordCounterPage />
+            </motion.div>
+          }
+        />
         {/* D&D specific 404 page */}
         <Route
           path="/dnd/*"
diff --git a/src/components/AppCard.js b/src/components/AppCard.js
@@ -7,17 +7,17 @@ const AppCard = ({ app }) => {
   const { to, title, description } = app;
 
   const cardStyle = {
-    backgroundColor: colors['article-alpha-10'],
-    borderColor: colors['article-alpha-50'],
-    color: colors.article,
+    backgroundColor: colors['app-alpha-10'],
+    borderColor: colors['app-alpha-50'],
+    color: colors.app,
   };
 
-  const detailTextColor = colors['article-light'];
+  const detailTextColor = colors['app-light'];
 
   return (
     <Link to={to} className="block h-full">
       <div
-        className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full"
+        className="group bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl overflow-hidden h-full"
         style={cardStyle}
       >
         <div
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -65,7 +65,7 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
   const getLinkClass = ({ isActive }) =>
     `flex items-center space-x-3 px-3 py-1 rounded-md transition-colors ${
       isActive
-        ? 'text-article bg-article-alpha-10'
+        ? 'text-sidebar-highlight bg-sidebar-highlight-alpha-10'
         : 'text-gray-100 hover:text-white hover:bg-gray-800'
     }`;
 
@@ -120,10 +120,10 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
             <button
               onClick={() => setIsMainOpen(!isMainOpen)}
               className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${
-                isMainActive ? 'text-article' : 'text-gray-100'
+                isMainActive ? 'text-sidebar-highlight' : 'text-gray-100'
               }`}
             >
-              <span className={`flex items-center gap-2 font-sans ${isMainActive ? 'text-article' : 'text-white'}`}>
+              <span className={`flex items-center gap-2 font-sans ${isMainActive ? 'text-sidebar-highlight' : 'text-white'}`}>
                 <AsteriskSimpleIcon size={16} />
                 <span>Main</span>
               </span>
@@ -155,10 +155,10 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
             <button
               onClick={() => setIsContentOpen(!isContentOpen)}
               className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${
-                isContentActive ? 'text-article' : 'text-gray-100'
+                isContentActive ? 'text-sidebar-highlight' : 'text-gray-100'
               }`}
             >
-               <span className={`flex items-center gap-2 font-sans ${isContentActive ? 'text-article' : 'text-white'}`}>
+               <span className={`flex items-center gap-2 font-sans ${isContentActive ? 'text-sidebar-highlight' : 'text-white'}`}>
                 <BooksIcon size={16} />
                 <span>Content</span>
               </span>
@@ -196,10 +196,10 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
             <button
               onClick={() => setIsAppsOpen(!isAppsOpen)}
               className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${
-                isAppsActive ? 'text-article' : 'text-gray-100'
+                isAppsActive ? 'text-sidebar-highlight' : 'text-gray-100'
               }`}
             >
-              <span className={`flex items-center gap-2 font-sans ${isAppsActive ? 'text-article' : 'text-white'}`}>
+              <span className={`flex items-center gap-2 font-sans ${isAppsActive ? 'text-sidebar-highlight' : 'text-white'}`}>
                 <SquaresFourIcon size={16} />
                 <span>Apps</span>
               </span>
diff --git a/src/config/colors.js b/src/config/colors.js
@@ -11,6 +11,7 @@ module.exports = {
   movie: '#c75146',
   game: '#80ed99',
   article: '#FA8072', // Salmon
+  app: '#9EC5AB', // Duplicated from book
   music: '#A07B90',
   series: '#edc531',
   food: '#F4A259',
@@ -20,11 +21,16 @@ module.exports = {
   'movie-light': '#E08070',
   'game-light': '#B2F5C2',
   'article-light': '#FFB6C1', // Light Pink
+  'app-light': '#FFF8F00', // Duplicated from book-light
   'music-light': '#C0A0B0',
   'series-light': '#F5E080',
   'food-light': '#FFC780',
   'websites-light': '#FFF8DC',
   'tools-light': '#F0DFFF',
+  'sidebar-highlight': '#FA8072', // Duplicated from article
+  'sidebar-highlight-light': '#FFB6C1', // Duplicated from article-light
+  'sidebar-highlight-alpha-10': 'rgba(250, 128, 114, 0.1)', // Duplicated from article-alpha-10
+  'sidebar-highlight-alpha-50': 'rgba(250, 128, 114, 0.5)', // Duplicated from article-alpha-50
   'title-hover': '#fdd4a6', // orange-200
   'markdown-title-color': '#fed7aa', // orange-200
   'markdown-hx-color': '#ffedd5', // orange-100
@@ -48,6 +54,8 @@ module.exports = {
   'game-alpha-50': 'rgba(0, 255, 127, 0.5)',
   'article-alpha-10': 'rgba(250, 128, 114, 0.1)',
   'article-alpha-50': 'rgba(250, 128, 114, 0.5)',
+  'app-alpha-10': 'rgba(158, 197, 171, 0.1)', // Duplicated from book-alpha-10
+  'app-alpha-50': 'rgba(158, 197, 171, 0.5)', // Duplicated from book-alpha-50
   'music-alpha-10': 'rgba(160, 123, 144, 0.1)',
   'music-alpha-50': 'rgba(160, 123, 144, 0.5)',
   'series-alpha-10': 'rgba(237, 197, 49, 0.1)',
@@ -114,4 +122,4 @@ module.exports = {
     'line-highlight-start': '#3c526d5f',
     'line-highlight-end': '#3c526d55',
   },
-};
+};
diff --git a/src/pages/AppPage.js b/src/pages/AppPage.js
@@ -5,6 +5,11 @@ import AppCard from '../components/AppCard';
 import usePageTitle from '../utils/usePageTitle';
 
 const apps = [
+  {
+    to: '/apps/word-counter',
+    title: 'Word Counter',
+    description: 'Count words, characters, lines and paragraphs in a text.',
+  },
   {
     to: '/apps/ip',
     title: 'Show my IP',
diff --git a/src/pages/apps/IpPage.js b/src/pages/apps/IpPage.js
@@ -49,12 +49,12 @@ function IpPage() {
   };
 
   const cardStyle = {
-    backgroundColor: colors['article-alpha-10'],
-    borderColor: colors['article-alpha-50'],
-    color: colors.article,
+    backgroundColor: colors['app-alpha-10'],
+    borderColor: colors['app-alpha-50'],
+    color: colors.app,
   };
 
-  const detailTextColor = colors['article-light'];
+  const detailTextColor = colors['app-light'];
 
   return (
     <div className="py-16 sm:py-24">
diff --git a/src/pages/apps/WordCounterPage.js b/src/pages/apps/WordCounterPage.js
