<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10xDEV - Blog</title>

    <!-- Fonts -->
    <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=DM+Sans:opsz,wght@9..40,400;500;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
        rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>
        :root {
            /* Light Mode Default */
            --bg-body: #faf9f6;
            /* Off-white / Eggshell */
            --text-main: #1a1a1a;
            --text-sub: #666666;
            --border-subtle: #e5e5e5;
            --accent: #1a1a1a;

            --font-display: 'Playfair Display', serif;
            --font-body: 'DM Sans', sans-serif;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-body: #111111;
                --text-main: #f0f0f0;
                --text-sub: #a0a0a0;
                --border-subtle: #333333;
                --accent: #ffffff;
            }
        }

        body.dark-mode {
            --bg-body: #111111;
            --text-main: #f0f0f0;
            --text-sub: #a0a0a0;
            --border-subtle: #333333;
            --accent: #ffffff;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            font-family: var(--font-body);
            transition: background-color 0.3s, color 0.3s;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: var(--font-display);
        }

        .btn-minimal {
            border: 1px solid var(--border-subtle);
            padding: 0.5rem 1rem;
            border-radius: 99px;
            font-size: 0.875rem;
            transition: all 0.2s;
        }

        .btn-minimal:hover {
            border-color: var(--accent);
            background: var(--accent);
            color: var(--bg-body);
        }

        /* Layout C: Horizontal Scroll Snapping */
        .snap-scroll-x {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .snap-scroll-x::-webkit-scrollbar {
            display: none;
        }

        /* ===== PODCAST PLAYER ===== */
        #podcast-bar {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--bg-body);
            border-bottom: 1px solid var(--border-subtle);
            font-family: var(--font-body);
            transition: background-color 0.3s, color 0.3s;
        }

        /* Slim bar */
        .pc-slim {
            height: 42px;
            display: flex;
            align-items: center;
            padding: 0 1rem;
            gap: 0.75rem;
            font-size: 0.8rem;
        }

        .pc-slim .pc-play-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1.5px solid var(--accent);
            background: transparent;
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
            font-size: 0.65rem;
        }

        .pc-slim .pc-play-btn:hover {
            background: var(--accent);
            color: var(--bg-body);
        }

        .pc-title-scroll {
            flex: 1;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
        }

        .pc-title-scroll .pc-marquee {
            display: inline-block;
            white-space: nowrap;
            animation: pc-scroll 40s linear infinite;
        }

        .pc-title-scroll .pc-marquee:hover {
            animation-play-state: paused;
        }

        .pc-title-scroll .pc-marquee>span {
            margin-right: 3rem;
            color: var(--text-sub);
        }

        .pc-title-scroll .pc-marquee>span.pc-active {
            color: var(--accent);
            font-weight: 600;
        }

        @keyframes pc-scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .pc-slim .pc-expand-btn {
            background: none;
            border: none;
            color: var(--text-sub);
            cursor: pointer;
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .pc-slim .pc-expand-btn:hover {
            color: var(--accent);
            background: var(--border-subtle);
        }

        .pc-slim .pc-now-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-sub);
            flex-shrink: 0;
        }

        .pc-slim .pc-now-title {
            font-weight: 600;
            color: var(--accent);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
            flex-shrink: 1;
        }

        /* Expanding panels Container */
        .pc-dropdown-wrapper {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: var(--bg-body);
            z-index: 99;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* Expanding panels */
        .pc-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .pc-panel.pc-open {
            max-height: 600px;
            border-bottom: 1px solid var(--border-subtle);
        }

        /* Expanded Player (Level 1) */
        .pc-player {
            padding: 0.75rem 1rem 1rem;
            border-top: 1px solid var(--border-subtle);
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .pc-progress-wrap {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.7rem;
            color: var(--text-sub);
        }

        .pc-progress-wrap input[type=range] {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 2px;
            background: var(--border-subtle);
            outline: none;
            cursor: pointer;
        }

        .pc-progress-wrap input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
        }

        .pc-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .pc-controls-left,
        .pc-controls-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .pc-controls button {
            background: none;
            border: none;
            color: var(--text-main);
            cursor: pointer;
            font-size: 0.85rem;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s;
        }

        .pc-controls button:hover {
            color: var(--accent);
            background: var(--border-subtle);
        }

        .pc-speed-select {
            font-size: 0.7rem;
            background: var(--border-subtle);
            color: var(--text-main);
            border: none;
            border-radius: 4px;
            padding: 3px 6px;
            cursor: pointer;
        }

        .pc-vol-wrap {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .pc-vol-wrap input[type=range] {
            width: 70px;
            -webkit-appearance: none;
            appearance: none;
            height: 3px;
            border-radius: 2px;
            background: var(--border-subtle);
            outline: none;
            cursor: pointer;
        }

        .pc-vol-wrap input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
        }

        .pc-playlist-toggle {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        /* Playlist (Level 2) */
        .pc-playlist {
            border-top: 1px solid var(--border-subtle);
            max-height: 320px;
            overflow-y: auto;
        }

        .pc-playlist-item {
            display: flex;
            align-items: center;
            padding: 0.55rem 1rem;
            gap: 0.75rem;
            cursor: pointer;
            transition: background 0.15s;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--border-subtle);
        }

        .pc-playlist-item:last-child {
            border-bottom: none;
        }

        .pc-playlist-item:hover {
            background: var(--border-subtle);
        }

        .pc-playlist-item.pc-active-track {
            background: var(--border-subtle);
        }

        .pc-playlist-item .pc-pl-play {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid var(--accent);
            background: transparent;
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55rem;
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.15s;
        }

        .pc-playlist-item .pc-pl-play:hover {
            background: var(--accent);
            color: var(--bg-body);
        }

        .pc-playlist-item.pc-active-track .pc-pl-play {
            background: var(--accent);
            color: var(--bg-body);
        }

        .pc-playlist-item .pc-pl-info {
            flex: 1;
            min-width: 0;
        }

        .pc-playlist-item .pc-pl-title {
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pc-playlist-item .pc-pl-meta {
            font-size: 0.65rem;
            color: var(--text-sub);
            margin-top: 2px;
        }

        .pc-playlist-item .pc-pl-dur {
            font-size: 0.7rem;
            color: var(--text-sub);
            flex-shrink: 0;
        }

        /* Adjust header offset when podcast bar exists */
        header.sticky {
            top: 42px;
        }

        @media (max-width: 640px) {
            .pc-now-title {
                max-width: 110px;
            }

            .pc-controls {
                font-size: 0.75rem;
            }

            .pc-vol-wrap {
                display: none;
            }
        }
    </style>
</head>

<body class="antialiased min-h-screen">

    <!-- ===== PODCAST PLAYER BAR ===== -->
    <div id="podcast-bar">
        <!-- Level 0: Slim Bar -->
        <div class="pc-slim">
            <button id="pc-main-play" class="pc-play-btn" title="Play / Pause">
                <i class="fas fa-play"></i>
            </button>
            <span class="pc-now-label hidden md:inline">Now:</span>
            <span id="pc-now-title" class="pc-now-title">Loading episodes…</span>
            <div class="pc-title-scroll hidden md:block">
                <div id="pc-marquee" class="pc-marquee"></div>
            </div>
            <button id="pc-expand-player-btn" class="pc-expand-btn" title="Expand Player">
                <i class="fas fa-chevron-down text-[10px]"></i>
            </button>
        </div>

        <!-- Dropdown panels container -->
        <div class="pc-dropdown-wrapper">
            <!-- Level 1: Expanded Player -->
            <div id="pc-player-panel" class="pc-panel">
                <div class="pc-player">
                    <div class="pc-progress-wrap">
                        <span id="pc-time-current">0:00</span>
                        <input type="range" id="pc-seek" min="0" max="100" value="0" step="0.1">
                        <span id="pc-time-total">0:00</span>
                    </div>
                    <div class="pc-controls">
                        <div class="pc-controls-left">
                            <button id="pc-prev" title="Previous"><i class="fas fa-step-backward"></i></button>
                            <button id="pc-rew" title="Rewind 15s"><i class="fas fa-undo"></i> 15</button>
                            <button id="pc-play2" class="text-lg" title="Play / Pause"><i
                                    class="fas fa-play"></i></button>
                            <button id="pc-fwd" title="Forward 15s">15 <i class="fas fa-redo"></i></button>
                            <button id="pc-next" title="Next"><i class="fas fa-step-forward"></i></button>
                        </div>
                        <div class="pc-controls-right">
                            <select id="pc-speed" class="pc-speed-select" title="Playback Speed">
                                <option value="0.5">0.5×</option>
                                <option value="0.75">0.75×</option>
                                <option value="1" selected>1×</option>
                                <option value="1.25">1.25×</option>
                                <option value="1.5">1.5×</option>
                                <option value="2">2×</option>
                            </select>
                            <div class="pc-vol-wrap">
                                <i class="fas fa-volume-up text-xs"></i>
                                <input type="range" id="pc-volume" min="0" max="1" value="0.8" step="0.01">
                            </div>
                            <button id="pc-expand-playlist-btn" class="pc-expand-btn pc-playlist-toggle"
                                title="Show Playlist">
                                Playlist <i class="fas fa-chevron-down text-[10px]"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Level 2: Full Playlist -->
            <div id="pc-playlist-panel" class="pc-panel">
                <div id="pc-playlist" class="pc-playlist"></div>
            </div>
        </div>
    </div>

    <!-- Sticky Minimal Header -->
    <header
        class="sticky top-[42px] md:top-[42px] z-50 bg-[var(--bg-body)]/90 backdrop-blur-md border-b border-[var(--border-subtle)] transition-colors duration-300">
        <div class="container mx-auto px-4 md:px-8 h-16 flex items-center justify-between">
            <a href="/" class="text-xl font-bold tracking-tight font-serif">10xDEV<span
                    class="text-xs font-sans font-normal ml-1 opacity-50">BLOG</span></a>

            <nav class="hidden md:flex items-center gap-6 text-sm">
                
                <a href="/archive/" class="hover:text-[var(--accent)] transition-colors">Articles</a>
                
                <a href="/books/" class="hover:text-[var(--accent)] transition-colors">Books</a>
                
                <a href="/library/" class="hover:text-[var(--accent)] transition-colors">Library</a>
                
                <a href="/series/" class="hover:text-[var(--accent)] transition-colors">Series</a>
                
                <a href="/popular/" class="hover:text-[var(--accent)] transition-colors">Popular</a>
                
                <a href="/140-free-online-coding-certificates-2025/" class="hover:text-[var(--accent)] transition-colors">140+ Certificates</a>
                
            </nav>

            <div class="flex items-center gap-4">
                <button onclick="document.body.classList.toggle('dark-mode')"
                    class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--border-subtle)] transition-colors">
                    <i class="fas fa-adjust text-sm"></i>
                </button>
                <button
                    class="md:hidden w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--border-subtle)] transition-colors"
                    onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"><i
                        class="fas fa-bars"></i></button>
            </div>
        </div>

        <!-- Mobile Navigation Panel -->
        <nav id="mobile-menu"
            class="hidden md:hidden flex-col bg-[var(--bg-body)] border-t border-[var(--border-subtle)]">
            
            <a href="/archive/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Articles</a>
            
            <a href="/books/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Books</a>
            
            <a href="/library/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Library</a>
            
            <a href="/series/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Series</a>
            
            <a href="/popular/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Popular</a>
            
            <a href="/140-free-online-coding-certificates-2025/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">140+ Certificates</a>
            
        </nav>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 md:px-8 py-12 space-y-24">

        <!-- Intro Hero -->
        <section class="text-center max-w-2xl mx-auto py-12">
            <p class="text-xs font-bold uppercase tracking-widest text-[var(--text-sub)] mb-4">Roadmaps for 2025 &
                Beyond</p>
            <h1 class="text-4xl md:text-6xl mb-6 leading-tight">Master Development <br> in the Age of AI</h1>
            <p class="text-[var(--text-sub)] text-lg">Bite-sized podcasts, career roadmaps, and strategies for indie
                hacking and personal growth.</p>
        </section>

        <!-- Category Cloud -->
        <section class="mb-16">
            <div class="flex flex-wrap justify-center gap-3 max-w-4xl mx-auto">
                
                <a href="/category/interactive-roadmaps/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Interactive Roadmaps
                </a>
                
                <a href="/category/python-books/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Python Books
                </a>
                
                <a href="/category/new-in-the-dev-world/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    New in the Dev World
                </a>
                
                <a href="/category/python/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Python
                </a>
                
                <a href="/category/java/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Java
                </a>
                
                <a href="/category/javascript/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    JavaScript
                </a>
                
                <a href="/category/c/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    C++
                </a>
                
                <a href="/category/cheat-sheets/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Cheat Sheets
                </a>
                
                <a href="/category/ai-development-integration/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    AI Development & Integration
                </a>
                
                <a href="/category/deveneurship-indie-hacking/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Deveneurship & Indie Hacking
                </a>
                
                <a href="/category/career-growth/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Career Growth
                </a>
                
                <a href="/category/vibe-coding/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Vibe Coding
                </a>
                
                <a href="/category/web-development/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Web Development
                </a>
                
                <a href="/category/hacking-security-for-devs/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Hacking & Security for Devs
                </a>
                
                <a href="/category/personal-branding/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Personal Branding
                </a>
                
                <a href="/category/productivity/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Productivity
                </a>
                
                <a href="/category/software-engineering/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Software Engineering
                </a>
                
                <a href="/category/mobile-development/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Mobile Development
                </a>
                
                <a href="/category/mcp/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    MCP
                </a>
                
                <a href="/category/api/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    API
                </a>
                
                <a href="/category/artificial-intelligence/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Artificial Intelligence
                </a>
                
                <a href="/category/career-advice/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Career Advice
                </a>
                
                <a href="/category/database/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Database
                </a>
                
                <a href="/category/deployment/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Deployment
                </a>
                
                <a href="/category/development/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Development
                </a>
                
                <a href="/category/programming/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Programming
                </a>
                
                <a href="/category/prompt-engineering/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Prompt Engineering
                </a>
                
                <a href="/category/software-development/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Software Development
                </a>
                
                <a href="/category/technical-writing/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Technical Writing
                </a>
                
                <a href="/category/vs-code/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    VS Code
                </a>
                
            </div>
        </section>

        <!-- LATEST STORIES SECTION (Mixed Layout) -->
        <section class="mb-24">
            <div class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4">
                <h2 class="text-3xl md:text-5xl font-italic">Latest Articles</h2>
                <a href="/archive/"
                    class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                    More</a>
            </div>

            
            
            

            <!-- ROW 1: Hero + Stack -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
                <!-- HERO (Left 2/3) -->
                
                

                <!-- STACK (Right 1/3) -->
                <div class="space-y-8 flex flex-col justify-between">
                    
                    <div class="group cursor-pointer flex-1 flex flex-col">
                        <div class="aspect-[3/2] overflow-hidden rounded-sm mb-3 bg-gray-100">
                            <!-- DYNAMIC CARD REPLACEMENT -->
                            <div data-card-role="placeholder" data-text=""
                                data-tag="ARTICLE" data-bg="#f0f0f0"
                                data-color="#333" data-size="text-2xl"
                                class="w-full h-full transition-transform duration-500 group-hover:scale-105 opacity-90 group-hover:opacity-100">
                            </div>
                        </div>
                        <h4
                            class="text-xl font-bold leading-snug mb-2 group-hover:underline decoration-1 underline-offset-4">
                            <a href="/2026-01-01-the-piracy-paradox-why-tech-giants-let-you-steal-their-software/"></a>
                        </h4>
                        <div
                            class="mt-auto text-xs text-[var(--text-sub)] flex justify-between border-t border-[var(--border-subtle)] pt-2">
                            <span></span>
                            <span>Apr 10</span>
                        </div>
                    </div>
                    
                    <div class="group cursor-pointer flex-1 flex flex-col">
                        <div class="aspect-[3/2] overflow-hidden rounded-sm mb-3 bg-gray-100">
                            <!-- DYNAMIC CARD REPLACEMENT -->
                            <div data-card-role="placeholder" data-text="Build Y..."
                                data-tag="Python" data-bg="#f0f0f0"
                                data-color="#333" data-size="text-2xl"
                                class="w-full h-full transition-transform duration-500 group-hover:scale-105 opacity-90 group-hover:opacity-100">
                            </div>
                        </div>
                        <h4
                            class="text-xl font-bold leading-snug mb-2 group-hover:underline decoration-1 underline-offset-4">
                            <a href="/ai-matcher-python">Build Your Own AI Meme Matcher: A Beginner's Guide to Computer Vision with Python</a>
                        </h4>
                        <div
                            class="mt-auto text-xs text-[var(--text-sub)] flex justify-between border-t border-[var(--border-subtle)] pt-2">
                            <span>Python</span>
                            <span>Apr 10</span>
                        </div>
                    </div>
                    
                </div>
            </div>

            <!-- ROW 2: Triple Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-8 border-t border-[var(--border-subtle)]">
                
                <article class="group cursor-pointer">
                    <div class="flex items-baseline justify-between mb-2">
                        <span class="text-xs font-bold uppercase tracking-widest text-[var(--accent)]">AI Development & Integration</span>
                        <span class="text-[10px] text-[var(--text-sub)]">2026</span>
                    </div>
                    <h4 class="text-2xl font-serif font-bold mb-3 group-hover:text-[var(--text-sub)] transition-colors">
                        <a href="/googles-gemma-4-a-deep-dive-into-the-new-open-source-ai-models/">Google's Gemma 4: A Deep Dive into the New Open-Source AI Models</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">Google has just unveiled Gemma 4, a release that brings four new models, a significant licensing change, and some genuinely...</p>
                    <a href="/googles-gemma-4-a-deep-dive-into-the-new-open-source-ai-models/"
                        class="text-xs font-bold uppercase border-b border-black pb-0.5 hover:text-[var(--text-sub)] hover:border-[var(--text-sub)]">Read
                        Article</a>
                </article>
                
                <article class="group cursor-pointer">
                    <div class="flex items-baseline justify-between mb-2">
                        <span class="text-xs font-bold uppercase tracking-widest text-[var(--accent)]">AI Development & Integration</span>
                        <span class="text-[10px] text-[var(--text-sub)]">2026</span>
                    </div>
                    <h4 class="text-2xl font-serif font-bold mb-3 group-hover:text-[var(--text-sub)] transition-colors">
                        <a href="/the-great-ai-hangover-why-ai-didnt-steal-your-tech-job/">The Great AI Hangover: Why AI Didn't Steal Your Tech Job</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">Take a look at the calendar. It’s Mars 02, 2026. We all bought into the predictions that flooded the world...</p>
                    <a href="/the-great-ai-hangover-why-ai-didnt-steal-your-tech-job/"
                        class="text-xs font-bold uppercase border-b border-black pb-0.5 hover:text-[var(--text-sub)] hover:border-[var(--text-sub)]">Read
                        Article</a>
                </article>
                
                <article class="group cursor-pointer">
                    <div class="flex items-baseline justify-between mb-2">
                        <span class="text-xs font-bold uppercase tracking-widest text-[var(--accent)]">API</span>
                        <span class="text-[10px] text-[var(--text-sub)]">2026</span>
                    </div>
                    <h4 class="text-2xl font-serif font-bold mb-3 group-hover:text-[var(--text-sub)] transition-colors">
                        <a href="/16-api-concepts-you-need-to-master/">16 API Concepts You Need to Master</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">Hey readers, I still remember my first “real” system design interview. I was ready to code algorithms, but then the...</p>
                    <a href="/16-api-concepts-you-need-to-master/"
                        class="text-xs font-bold uppercase border-b border-black pb-0.5 hover:text-[var(--text-sub)] hover:border-[var(--text-sub)]">Read
                        Article</a>
                </article>
                
            </div>

            
        </section>

        
        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="interactive-roadmaps"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Interactive Roadmaps</h2>
            <a href="/category/interactive-roadmaps/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Angular 21: ..."
                        data-tag="Interactive Roadmaps" data-bg="#cbd5e1"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/angular-21-deep-dive-mind-map">Angular 21: The Deep-Dive Mind Map (English)</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">

                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">November
                        19, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/python-roadmap-for-self-taught-devs">The Definitive Python Roadmap for Self-Taught Developers</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">
</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">June
                        06, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/python-roadmap2/">The Python Developer Roadmap</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">
</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="python-books"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Python Books</h2>
            <a href="/category/python-books/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="5 Pytho..."
                        data-tag="Python Books" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/python-books-senior-developers-read">5 Python Books Senior Developers Read But Never Talk About</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="5 Pytho..."
                        data-tag="Python Books" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/books/python/awaken-coders-intuition/">5 Python Books That Awaken Your Coder's Intuition</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="5 Pytho..."
                        data-tag="Python Books" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/python-books-bend-fabric-code">5 Python Books That Bend the Fabric of Code</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="new-in-the-dev-world"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">New in the Dev World</h2>
            <a href="/category/new-in-the-dev-world/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/googles-gemma-4-a-deep-dive-into-the-new-open-source-ai-models/">Google's Gemma 4: A Deep Dive into the New Open-Source AI Models</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Google has just unveiled Gemma 4, a release that brings four new models, a significant licensing change, and some genuinely interesting architectural decisions to the...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">02</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/the-accidental-revolution-how-a-hobby-kernel-conquered-the-tech-world/">The Accidental Revolution: How a Hobby Kernel Conquered the Tech World</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">To explain what Linux is, you first have to explain what an operating system is. The thing about an operating system is that you’re never,...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">03</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/a-developers-guide-to-ai-coding-assistants-claude-vs-opencode-vs-cursor/">A Developer's Guide to AI Coding Assistants: Claude vs. OpenCode vs. Cursor</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">The landscape of agentic engineering is rich with a broad variety of tools designed to assist with coding through AI. Among the most popular today...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">04</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/ai-agents-are-now-socializing-a-deep-dive-into-openclaw-and-moltbook/">AI Agents Are Now Socializing: A Deep Dive into OpenClaw and Moltbook</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">The digital landscape is shifting at a dizzying pace. AI agents, once confined to isolated tasks, are now communicating with each other on a social...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">05</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/top-devtool-projects-persona-godoxy-git-ai-critique-opentui-and-vault/">Top DevTool Projects: Persona, Godoxy, Git-AI, Critique, OpenTUI, and Vault</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Every week, developers release useful open-source tools that improve how we build software. This article is a weekly DevTool project update, covering what’s new in...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="python"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Python</h2>
            <a href="/category/python/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/ai-matcher-python">Build Your Own AI Meme Matcher: A Beginner's Guide to Computer Vision with Python</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Have you ever wondered how Snapchat filters know exactly where your eyes and mouth are?...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/understanding-the-stack-data-structure-the-plate-analogy/">Understanding the Stack Data Structure: The Plate Analogy</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Imagine you’re arranging a set of plates. You stack them one by one. A blue...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/the-dark-side-of-python-its-shocking-uses-in-the-wild/">The Dark Side of Python: Its Shocking Uses in the Wild</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        You think you know Python. It’s the gentle language taught to beginners. The one people...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/python-the-hackers-weapon-of-choice/">Python: The Hacker's Weapon of Choice</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Why do companies fear a hacker who knows Python? Picture this. An ordinary employee. A...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="java"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Java</h2>
            <a href="/category/java/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Visually Exp..."
                        data-tag="Programming Visually Explained" data-bg="#e2e8f0"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/visually-explained-master-the-template-method-design-pattern-in-java/">Visually Explained: Master the Template Method Design Pattern in Java</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">The Template Method is a behavioral design pattern that defines the skeleton of an algorithm in a superclass but lets subclasses override specific steps of the algorithm without changing its...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">December
                        29, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/visually-explained-master-the-strategy-design-pattern-in-java/">Visually Explained: Master the Strategy Design Pattern in Java</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Have you ever found yourself trapped in a labyrinth of if-else statements? You start with a simple condition, but as...</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">December
                        24, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/state-pattern-visually-explained-from-messy-conditionals-to-clean-code/">State Pattern Visually Explained: From Messy Conditionals to Clean Code</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Have you ever found yourself trapped in a labyrinth of if/else or switch statements, where each new feature request adds...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="cheat-sheets"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Cheat Sheets</h2>
            <a href="/category/cheat-sheets/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/python-datascience-cheatsheet/">Data Science Cheatsheet</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        

                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/terraform-cheatsheet/">Terraform Cheatsheet</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        

                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/kubernetes-cheatsheet/">Kubernetes Cheatsheet</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        

                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/nodejs-cheatsheet/">Node.js Cheatsheet</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        

                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="ai-development-integration"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">AI Development & Integration</h2>
            <a href="/category/ai-development-integration/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Google's Gem..."
                        data-tag="AI Development & Integration" data-bg="#475569"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/googles-gemma-4-a-deep-dive-into-the-new-open-source-ai-models/">Google's Gemma 4: A Deep Dive into the New Open-Source AI Models</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">Google has just unveiled Gemma 4, a release that brings four new models, a significant licensing change, and some genuinely interesting architectural decisions to the forefront. With day-one support for...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">March
                        02, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/the-great-ai-hangover-why-ai-didnt-steal-your-tech-job/">The Great AI Hangover: Why AI Didn't Steal Your Tech Job</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Take a look at the calendar. It’s Mars 02, 2026. We all bought into the predictions that flooded the world...</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">February
                        26, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/how-the-plan-to-replace-developers-with-ai-went-horribly-wrong/">How the Plan to Replace Developers with AI Went Horribly Wrong</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">In 2023, the tech world was sold a prophecy. It felt like a death sentence for an entire industry. Leading...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="deveneurship-indie-hacking"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Deveneurship & Indie Hacking</h2>
            <a href="/category/deveneurship-indie-hacking/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="The Ris..."
                        data-tag="AI Development & Integration" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/the-rise-of-ai-employees-a-look-at-claude-bot-and-co-work/">The Rise of AI Employees: A Look at Claude Bot and Co-work</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="OpenCla..."
                        data-tag="AI Development & Integration" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/moltbot-formerly-clawdbot-your-247-ai-employee-explained/">OpenClaw (Formerly Moltbot/Clawdbot): Your 24/7 AI Employee Explained</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="OpenCla..."
                        data-tag="AI Development & Integration" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/clawdbot-the-ai-agent-revolutionizing-real-world-automation/">OpenClaw (Clawdbot): The AI Agent Revolutionizing Real-World Automation</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="career-growth"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Career Growth</h2>
            <a href="/category/career-growth/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/the-great-ai-hangover-why-ai-didnt-steal-your-tech-job/">The Great AI Hangover: Why AI Didn't Steal Your Tech Job</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Take a look at the calendar. It’s Mars 02, 2026. We all bought into the predictions that flooded the world in 2024 and 2025. The...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">02</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-the-plan-to-replace-developers-with-ai-went-horribly-wrong/">How the Plan to Replace Developers with AI Went Horribly Wrong</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">In 2023, the tech world was sold a prophecy. It felt like a death sentence for an entire industry. Leading researchers predicted that AI would...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">03</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/want-to-become-a-worse-coder-use-ai-says-anthropic-study/">Want to Become a Worse Coder? Use AI, Says Anthropic Study</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">It’s officially confirmed. The suspicion many of us held is now backed by data: using AI to code can actually make you a worse programmer....</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">04</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/dont-quit-programming-because-of-ai-heres-what-to-do-instead/">Don't Quit Programming Because of AI: Here's What to Do Instead</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">“I’ve decided to quit programming.” It’s a sentiment I’m hearing more and more. Talented developers, especially those just starting, feel like a dark cloud has...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">05</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/the-ultimate-guide-to-top-programming-fields-in-2026/">The Ultimate Guide to Top Programming Fields in 2026</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Choosing the wrong programming field in 2026 could mean wasting years only to feel like the problem was you all along. Every day, you hear...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="vibe-coding"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Vibe Coding</h2>
            <a href="/category/vibe-coding/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/vibe-coding-how-to-build-software-with-ai-in-2026/">Vibe Coding: How to Build Software with AI in 2026</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Today, we’re exploring a concept that has fundamentally changed my perspective on what can be...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/your-local-llm-is-10x-slower-than-it-should-be/">Your Local LLM is 10x Slower Than It Should Be</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        You’re probably familiar with tools like Ollama. You launch it, you talk to it, and...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/running-local-ai-models-with-openclow-on-proxmox-and-ollama/">Running Local AI Models with OpenClow on Proxmox and Ollama</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        This article provides a comprehensive walkthrough for setting up OpenClow (the new name for Clawdbot)...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/meet-clawdbot-your-ai-personal-assistant/">Meet OpenClaw (Clawdbot): Your AI Personal Assistant</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Note: The tool mentioned in this article, formerly known as Clawdbot, has been rebranded to...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="web-development"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Web Development</h2>
            <a href="/category/web-development/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="The Beginner..."
                        data-tag="Web Development" data-bg="#64748b"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/beginners-guide-env-files-security/">The Beginner’s Guide to .env Files & Security Management</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">Learning web dev? Stop hard-coding API keys! Learn what a .env file is, why secrets management is necessary skill for your career, and how to stay secure. Bou~codes: Make sure...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">February
                        21, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/webmcp-the-future-of-ai-powered-web-interaction/">WebMCP: The Future of AI-Powered Web Interaction</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">There’s a new proposal backed by Google and Microsoft. It could shape the future of how we use the web....</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">February
                        19, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/webmcp-a-new-standard-for-ai-agent-interaction-on-the-web/">WebMCP: A New Standard for AI Agent Interaction on the Web</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Google recently released an interesting concept for Chrome called WebMCP. I want to quickly explain what it is, why it’s...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="hacking-security-for-devs"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Hacking & Security for Devs</h2>
            <a href="/category/hacking-security-for-devs/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="The Dar..."
                        data-tag="Python" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/the-dark-side-of-python-its-shocking-uses-in-the-wild/">The Dark Side of Python: Its Shocking Uses in the Wild</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Python:..."
                        data-tag="Python" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/python-the-hackers-weapon-of-choice/">Python: The Hacker's Weapon of Choice</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Inside ..."
                        data-tag="Hacking & Security for Devs" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/inside-the-zero-day-market-the-hidden-economy-of-cyber-weapons/">Inside the Zero-Day Market: The Hidden Economy of Cyber Weapons</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="personal-branding"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Personal Branding</h2>
            <a href="/category/personal-branding/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-i-turned-my-gaming-hobby-into-a-2000month-side-hustle/">How I Turned My Gaming Hobby Into a £2,000/Month Side Hustle</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">This time last year, I was working in a supermarket. Now, I’m a social media marketing manager with a four-figure side hustle, sharing the cozy...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">02</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/over-10-tips-to-optimize-your-linkedin-profile-and-attract-recruiters/">Over 10+ Tips to Optimize Your LinkedIn Profile and Attract Recruiters</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Optimizing my LinkedIn profile significantly increased the number of times I was contacted by recruiters. It helped me receive interview calls at companies like Amazon,...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">03</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/crafting-the-ultimate-github-profile-a-developers-guide/">Crafting the Ultimate GitHub Profile: A Developer's Guide</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Why Your GitHub Profile Matters Why should you care about your GitHub profile? For developers, GitHub is one of the most critical platforms for self-promotion....</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">04</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-craft-a-linkedin-profile-that-attracts-recruiters/">How to Craft a LinkedIn Profile That Attracts Recruiters</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">What if your LinkedIn profile could land your dream job without you sending out a single application? Today, we’ll learn how to make that happen...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">05</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-create-an-impressive-github-profile-from-scratch/">How to Create an Impressive GitHub Profile from Scratch</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Having a nice resume and an attractive LinkedIn profile is obviously great, but what about GitHub? GitHub is a platform where you can store your...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="productivity"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Productivity</h2>
            <a href="/category/productivity/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/6-game-changing-vs-code-ai-features-youll-love/">6 Game-Changing VS Code AI Features You'll Love</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        New AI features are being added to VS Code almost every day. In this article,...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/zapiers-new-mcp-server-a-seamless-integration-for-automation/">Zapier's New MCP Server: A Seamless Integration for Automation</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Zapier has just launched its MCP server, and this integration is really, really amazing. What...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/zapiers-new-mcp-server-a-seamless-integration-for-automation/">Zapier's New MCP Server: A Seamless Integration for Automation</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Zapier has just launched its MCP server, and this integration is really, really amazing. What...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/unlocking-claudes-potential-5-use-cases-beyond-coding/">Unlocking Claude's Potential: 5+ Use Cases Beyond Coding</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Everyone knows Claude is a powerful coding tool. But what if I told you it...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="software-engineering"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Software Engineering</h2>
            <a href="/category/software-engineering/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="16 API Conce..."
                        data-tag="API" data-bg="#94a3b8"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/16-api-concepts-you-need-to-master/">16 API Concepts You Need to Master</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">Hey readers, I still remember my first “real” system design interview. I was ready to code algorithms, but then the interviewer asked me how I’d handle a payment retry without...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">July
                        28, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/5-common-mistakes-i-made-as-a-software-engineer/">5 Common Mistakes I Made as a Software Engineer</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Just half an hour ago, there was some sunshine peeking out of these gray and gloomy clouds. If you had...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="mobile-development"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Mobile Development</h2>
            <a href="/category/mobile-development/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Functio..."
                        data-tag="Programming Visually Explained" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/function-gemma-run-a-private-offline-ai-assistant-on-your-phone/">Function Gemma: Run a Private, Offline AI Assistant On Your Phone</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Explori..."
                        data-tag="AI" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/exploring-ai-powered-mobile-app-development-tools/">Exploring AI-Powered Mobile App Development Tools</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="mcp"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">MCP</h2>
            <a href="/category/mcp/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/mcp-protocol-upgrade-why-streamable-http-beats-sse/">MCP Protocol Upgrade: Why Streamable HTTP Beats SSE</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Anthropic’s MCP protocol has undergone some significant changes, and arguably the most impactful is the shift from SSE to streamable HTTP as its transport method....</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">02</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-set-up-your-first-mcp-server-in-vs-code-a-5-minute-guide/">How to Set Up Your First MCP Server in VS Code: A 5-Minute Guide</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Welcome to another installment in our MCP server series. In this article, we will provide a straightforward guide on how to set up your very...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">03</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-interact-with-mcp-servers-from-your-code-in-5-minutes/">How to Interact with MCP Servers from Your Code in 5 Minutes</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">This article introduces a library that lets you communicate with your MCP servers directly in your code. You can use it with any LLM you...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">04</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/deploying-remote-mcp-servers-with-fastapi-explained-in-under-10-minutes/">Deploying Remote MCP Servers with FastAPI Explained in Under 10 Minutes</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Welcome back! In today’s article, we’re going to explore how to create and deploy remote MCP servers. We’ll build an MCP server locally and then...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">05</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/context-7-mcp-server-explained-in-5-minutes/">Context 7 MCP Server Explained in 5 Minutes</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">In this quick article, I’m going to introduce an MCP server that is incredibly useful, powerful, and will save you a significant amount of time:...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="api"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">API</h2>
            <a href="/category/api/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/16-api-concepts-you-need-to-master/">16 API Concepts You Need to Master</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Hey readers, I still remember my first “real” system design interview. I was ready to...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="artificial-intelligence"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Artificial Intelligence</h2>
            <a href="/category/artificial-intelligence/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Build Your O..."
                        data-tag="Python" data-bg="#cbd5e1"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/ai-matcher-python">Build Your Own AI Meme Matcher: A Beginner's Guide to Computer Vision with Python</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">Have you ever wondered how Snapchat filters know exactly where your eyes and mouth are? Or how your phone can unlock just by looking at your face? The magic behind...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">February
                        01, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/ai-social-network-moltbook-spirals-into-skynet-bots-form-religion-plan-human-extinction/">AI Social Network 'Moltbook' Spirals into Skynet: Bots Form Religion, Plan Human Extinction</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">A new social media platform has gone viral for a chilling reason: it’s an AI-only platform, and it’s already beginning...</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">February
                        01, 2026</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/maltbot-mania-a-deep-dive-into-its-most-powerful-skills/">Maltbot Mania: A Deep Dive into Its Most Powerful Skills</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">The AI agent formerly known as Coolbot has a new name, Maltbot, and it’s taking the community by storm. The...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="career-advice"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Career Advice</h2>
            <a href="/category/career-advice/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Coding ..."
                        data-tag="Programming" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/best-programming-languages-2026/">Coding in 2026: The Quick Guide to Picking Your Language</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>10xdev team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="database"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Database</h2>
            <a href="/category/database/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-make-cursor-remember-your-supabase-database-schema/">How to Make Cursor Remember Your Supabase Database Schema</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Supabase is great, but there’s a problem. If you’re using Cursor to help build your databases, you’ll run into a big issue: Cursor forgets what’s...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">02</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/how-to-make-cursor-remember-your-supabase-database-schema/">How to Make Cursor Remember Your Supabase Database Schema</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Supabase is great, but there’s a problem. If you’re using Cursor to help build your databases, you’ll run into a big issue: Cursor forgets what’s...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="development"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Development</h2>
            <a href="/category/development/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="A Library fo..."
                        data-tag="MCP" data-bg="#e2e8f0"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/a-library-for-direct-mcp-server-communication-in-your-code/">A Library for Direct MCP Server Communication in Your Code</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">I’m going to show you a library that lets you communicate with your MCP servers directly in your code. You can use it with any LLM you prefer. Previously, communicating...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">July
                        28, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/z-ai-vs-cursor-ai-vs-wind-surf-a-deep-dive-into-ai-powered-ides/">Z AI vs. Cursor AI vs. Wind Surf: A Deep Dive into AI-Powered IDEs</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Welcome to the deep dive. Today we’re jumping into the world of AI-powered IDEs, integrated development environments. It’s moving fast....</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">July
                        28, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/gemini-cli-vs-claude-code-the-ultimate-ai-coding-showdown/">Gemini CLI vs. Claude Code: The Ultimate AI Coding Showdown</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Google just released what might be the most insane AI coding tool ever. But the number one question on everyone’s...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="programming"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Programming</h2>
            <a href="/category/programming/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Underst..."
                        data-tag="Programming" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/understanding-the-stack-data-structure-the-plate-analogy/">Understanding the Stack Data Structure: The Plate Analogy</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Coding ..."
                        data-tag="Programming" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/best-programming-languages-2026/">Coding in 2026: The Quick Guide to Picking Your Language</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>10xdev team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Why Lea..."
                        data-tag="Programming" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/learn-python-2026-prompts/">Why Learning Python in 2026 is Different (And 5 Prompts + a Book to Help You)</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>John The Pythonista</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="prompt-engineering"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Prompt Engineering</h2>
            <a href="/category/prompt-engineering/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT C: HORIZONTAL SCROLL (Carousel) -->
        <div class="relative group-section">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory snap-scroll-x pb-8">
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    <div
                        class="bg-[var(--bg-body)] border border-[var(--border-subtle)] p-8 h-full flex flex-col justify-between hover:border-[var(--accent)] transition-colors cursor-pointer">
                        <div>
                            <div class="text-4xl font-serif text-[var(--border-subtle)] mb-4">01</div>
                            <h3 class="text-2xl font-bold leading-tight mb-4"><a href="/a-beginners-guide-to-prompt-engineering-with-llms/">A Beginner's Guide to Prompt Engineering with LLMs</a></h3>
                            <p class="text-[var(--text-sub)] text-sm line-clamp-3">Did you know that an AI processes language and responds better when you ask the right way? Let’s learn how! Today, I’m going to teach...</p>
                        </div>
                        <div class="mt-8">
                            <span class="btn-minimal inline-block">Read Article</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="software-development"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Software Development</h2>
            <a href="/category/software-development/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT D: TYPOGRAPHIC LIST -->
        <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/an-introduction-to-vibe-coding-the-future-of-ai-powered-development/">An Introduction to Vibe Coding: The Future of AI-Powered Development</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Hey there, I’m going to share with you some things I’ve learned over the last...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/ai-coding-assistants-review-github-copilots-shocking-comeback/">AI Coding Assistants Review: GitHub Copilot's Shocking Comeback</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Well, this is always my favorite article to write. This is only my second one,...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/an-introduction-to-googles-agent-to-agent-a2a-protocol/">An Introduction to Google's Agent-to-Agent (A2A) Protocol</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        Google has introduced a new protocol called A2A, which stands for agent-to-agent protocol. It enables...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
            <article
                class="py-6 flex flex-col md:flex-row md:items-center justify-between group cursor-pointer hover:bg-[var(--border-subtle)]/30 transition-colors -mx-4 px-4 rounded-lg">
                <div class="md:w-3/4 pr-4">
                    <h3
                        class="text-xl md:text-2xl font-serif mb-1 group-hover:translate-x-2 transition-transform duration-300">
                        <a href="/building-a-native-desktop-chat-app-with-factory-ai/">Building a Native Desktop Chat App with Factory AI</a>
                    </h3>
                    <div
                        class="hidden md:block text-sm text-[var(--text-sub)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-1 group-hover:translate-y-0">
                        This article introduces a new AI tool that has been gaining a lot of traction...
                    </div>
                </div>
                <div class="md:w-1/4 text-right mt-2 md:mt-0">
                    <span
                        class="text-xs font-bold uppercase tracking-widest border border-[var(--accent)] px-2 py-1 rounded-sm opacity-50 group-hover:opacity-100 transition-opacity">Read</span>
                </div>
            </article>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="technical-writing"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">Technical Writing</h2>
            <a href="/category/technical-writing/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT A: SPOTLIGHT HERO (1 Big + 2 Small) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="group cursor-pointer">
                <div class="overflow-hidden aspect-[4/3] rounded-sm mb-6"><!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Organize You..."
                        data-tag="Technical Writing" data-bg="#475569"
                        data-color="#1e293b" data-size="text-3xl"
                        class="w-full h-full transition-transform duration-700 group-hover:scale-105">
                    </div>
                </div>
                <h3 class="text-3xl mb-3 leading-tight group-hover:underline decoration-1 underline-offset-4"><a
                        href="/organize-your-chaotic-laptop-folders-in-5-minutes-with-an-mcp-server/">Organize Your Chaotic Laptop Folders in 5 Minutes with an MCP Server</a></h3>
                <p class="text-[var(--text-sub)] line-clamp-3">If your computer’s folders are a chaotic mess, you’re going to love this guide. This article explains how to finally sort out those disorganized files using an MCP server alongside...
                </p>
            </div>
            <div class="space-y-12">
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">August
                        10, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/the-surprising-places-c-language-is-used-in-2025/">The Surprising Places C Language Is Used in 2025</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Despite C++ being used in millions of games, the C language is only about 2.7% less popular. Today, C remains...</p>
                </div>
                
                <div class="group">
                    <div class="text-xs font-bold text-[var(--text-sub)] mb-2 uppercase">August
                        10, 2025</div>
                    <h4 class="text-xl mb-2 font-bold group-hover:text-[var(--text-sub)] transition-colors"><a
                            href="/the-surprising-places-c-language-is-used-in-2025/">The Surprising Places C Language Is Used in 2025</a></h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-2">Despite C++ being used in millions of games, the C language is only about 2.7% less popular. Today, C remains...</p>
                </div>
                
            </div>
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        <!-- Get posts for this category -->
        
        

        <!-- Only render if category has posts -->
        

        

        <!-- Section Header -->
        <div id="vs-code"
            class="flex items-baseline justify-between mb-8 border-b border-[var(--border-subtle)] pb-4 scroll-mt-24">
            <h2 class="text-2xl md:text-3xl font-italic">VS Code</h2>
            <a href="/category/vs-code/"
                class="text-xs font-bold uppercase tracking-widest hover:underline decoration-1 underline-offset-4">View
                More</a>
        </div>

        <!-- DYNAMIC LAYOUTS -->
        
        <!-- LAYOUT B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="How to ..."
                        data-tag="VS Code" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/how-to-use-mcp-servers-in-visual-studio-code/">How to Use MCP Servers in Visual Studio Code</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="Buildin..."
                        data-tag="AI" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/building-a-full-app-with-new-vs-code-ai-features-agent-mode-mcp-servers-and-more/">Building a Full App with New VS Code AI Features: Agent Mode, MCP Servers, and More</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
            <div class="group cursor-pointer flex flex-col h-full">
                <div class="aspect-square overflow-hidden mb-4 rounded-sm bg-[var(--border-subtle)]">
                    <!-- DYNAMIC CARD REPLACEMENT -->
                    <div data-card-role="placeholder" data-text="6 Game-..."
                        data-tag="VS Code" data-bg="#f1f5f9" data-color="#334155"
                        data-size="text-xl" class="w-full h-full opacity-90 group-hover:opacity-100 transition-opacity">
                    </div>
                </div>
                <h3 class="text-lg font-bold mb-2 leading-snug"><a href="/6-game-changing-vs-code-ai-features-youll-love/">6 Game-Changing VS Code AI Features You'll Love</a></h3>
                <div
                    class="mt-auto pt-4 border-t border-[var(--border-subtle)] flex justify-between text-xs text-[var(--text-sub)]">
                    <span>Team</span>
                    <span>Read &rarr;</span>
                </div>
            </div>
            
        </div>

        

        <div class="my-24 border-b border-[var(--border-subtle)] w-1/3 mx-auto"></div>

        

        

        

        <!-- Pagination (Visual Placeholder) -->
        <div class="flex justify-center gap-4 py-8">
            <button class="btn-minimal opacity-50 cursor-not-allowed">Previous</button>
            <button class="btn-minimal">Next Page</button>
        </div>

    </main>

    <footer class="bg-slate-900 text-slate-50 py-16 mt-24 border-t border-slate-800 font-sans">
    <div class="container mx-auto px-4 md:px-8">

        <!-- Brand & Intro -->
        <div class="mb-12 text-center max-w-3xl mx-auto">
            <h2 class="text-3xl font-bold font-serif mb-4">10xDEV Blog</h2>
            <p class="text-slate-400 mb-6 leading-relaxed">Your source for bite-sized podcasts in the age of AI, easy-to-grasp roadmaps tailored for 2025 and beyond, and quick posts on programming, career growth, productivity, deveneurship, indie hacking, technical writing, and personal branding for devs.</p>
            <a href="/cdn-cgi/l/email-protection#6a191f1a1a05181e2a1e0f0902030f0e030b18030f1944090507" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-full font-bold transition-all">
                <i class="fas fa-envelope"></i> Contact Support
            </a>
        </div>

        <!-- Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

            <!-- Card 1: Hubs & Tools -->
            <div
                class="bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-emerald-500/50 transition-colors group">
                <h3 class="text-lg font-bold text-emerald-400 mb-4 uppercase tracking-widest text-xs">Dev Hubs</h3>
                <ul class="space-y-3">
                    <li>
                        <a href="https://10xdev.blog/certifications/"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Free Certifications Hub
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/ai-cli/"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            AI CLI Tools Hub
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/pythonista-group"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Pythonista Group
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Card 2: Learning & Books -->
            <div
                class="bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-emerald-500/50 transition-colors group">
                <h3 class="text-lg font-bold text-emerald-400 mb-4 uppercase tracking-widest text-xs">Learning Paths
                </h3>
                <ul class="space-y-3">
                    <li>
                        <a href="https://10xdev.blog/webdev-learning-path-2025"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Web Dev Path 2025+
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/pyacademy"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            PyAcademy v1.0
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/pybook"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Book: Zero to Pro
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/python-for-profit-book/"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Book: Fun & Profit
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Card 3: Online Studios -->
            <div
                class="bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-emerald-500/50 transition-colors group">
                <h3 class="text-lg font-bold text-emerald-400 mb-4 uppercase tracking-widest text-xs">Creative Studios
                </h3>
                <ul class="space-y-3">
                    <li>
                        <a href="https://10xdev.blog/kinetic-typography-studio"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Kinetic Typography
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/graphviz-designer"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            GraphViz Designer
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/mermaid-diagram-maker"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            Mermaid Maker
                        </a>
                    </li>
                    <li>
                        <a href="https://10xdev.blog/plantuml-studio"
                            class="block text-slate-300 hover:text-white hover:translate-x-1 transition-all">
                            PlantUML Studio
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Card 4: Our Story -->
            <div
                class="bg-slate-800 p-6 rounded-xl border border-slate-700 hover:border-emerald-500/50 transition-colors group flex flex-col justify-between">
                <div>
                    <h3 class="text-lg font-bold text-emerald-400 mb-4 uppercase tracking-widest text-xs">About Us</h3>
                    <p class="text-slate-400 text-sm mb-4">
                        From Techie Diaries to 10xDEV, follow our journey in building for the next generation of
                        developers.
                    </p>
                </div>
                <a href="https://10xdev.blog/our-story-by-naima"
                    class="block bg-slate-700 hover:bg-slate-600 text-center py-3 rounded-lg text-sm font-bold transition-colors">
                    Read Our Story &rarr;
                </a>
            </div>

        </div>

        <!-- Copyright -->
        <div
            class="mt-16 pt-8 border-t border-slate-800 text-center text-xs text-slate-500 flex flex-col md:flex-row justify-between items-center gap-4">
            <p>&copy; 2026 10xdev.blog. All rights reserved.</p>
            <div class="flex gap-4">
                <a href="/privacy/" class="hover:text-emerald-400 transition-colors">Privacy</a>
                <a href="/terms/" class="hover:text-emerald-400 transition-colors">Terms</a>
                <a href="/sitemap-page/" class="hover:text-emerald-400 transition-colors">Sitemap</a>
            </div>
        </div>

    </div>
</footer>

    <!-- Card Service -->
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js" defer></script><script src="/assets/js/card-service.js"></script>

    <!-- OneSignal Push Notifications -->
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function (OneSignal) {
    await OneSignal.init({
      appId: "8af84161-d976-4fa6-b262-3afcae3bc465",
      safari_web_id: "web.onesignal.auto.5f0d689b-f65a-4365-8770-a9853d53b981",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

    <!-- ===== PODCAST PLAYER SCRIPT ===== -->
    <script>
        (function () {
            'use strict';

            // DOM refs
            const barEl = document.getElementById('podcast-bar');
            const mainPlayBtn = document.getElementById('pc-main-play');
            const nowTitle = document.getElementById('pc-now-title');
            const marqueeEl = document.getElementById('pc-marquee');
            const expandPlayerBtn = document.getElementById('pc-expand-player-btn');
            const playerPanel = document.getElementById('pc-player-panel');
            const expandPlBtn = document.getElementById('pc-expand-playlist-btn');
            const playlistPanel = document.getElementById('pc-playlist-panel');
            const playlistEl = document.getElementById('pc-playlist');
            const seekEl = document.getElementById('pc-seek');
            const timeCur = document.getElementById('pc-time-current');
            const timeTotal = document.getElementById('pc-time-total');
            const play2Btn = document.getElementById('pc-play2');
            const prevBtn = document.getElementById('pc-prev');
            const nextBtn = document.getElementById('pc-next');
            const rewBtn = document.getElementById('pc-rew');
            const fwdBtn = document.getElementById('pc-fwd');
            const speedSel = document.getElementById('pc-speed');
            const volEl = document.getElementById('pc-volume');

            let episodes = [];
            let currentIdx = 0;
            let audio = new Audio();
            audio.volume = 0.8;
            audio.preload = 'metadata';

            // ---- Helpers ----
            function fmt(sec) {
                if (!sec || isNaN(sec)) return '0:00';
                const m = Math.floor(sec / 60);
                const s = Math.floor(sec % 60);
                return m + ':' + (s < 10 ? '0' : '') + s;
            }

            function setPlayIcon(playing) {
                const icon = playing ? 'fa-pause' : 'fa-play';
                mainPlayBtn.innerHTML = '<i class="fas ' + icon + '"></i>';
                play2Btn.innerHTML = '<i class="fas ' + icon + '"></i>';
            }

            function setLoadingIcon() {
                const icon = 'fa-spinner fa-spin';
                mainPlayBtn.innerHTML = '<i class="fas ' + icon + '"></i>';
                play2Btn.innerHTML = '<i class="fas ' + icon + '"></i>';
            }

            audio.addEventListener('loadstart', setLoadingIcon);
            audio.addEventListener('waiting', setLoadingIcon);
            audio.addEventListener('canplay', () => setPlayIcon(!audio.paused));
            audio.addEventListener('playing', () => setPlayIcon(true));
            audio.addEventListener('pause', () => setPlayIcon(false));

            // ---- Load episodes ----
            fetch('./podcast-episodes.json')
                .then(r => r.json())
                .then(data => {
                    episodes = data;
                    buildMarquee();
                    buildPlaylist();
                    loadTrack(0, false);
                })
                .catch(() => {
                    nowTitle.textContent = 'Could not load episodes';
                });

            // ---- Build marquee ----
            function buildMarquee() {
                let items = episodes.map((ep, i) => {
                    const badgeHtml = ep.badge ? ' <span class="bg-[var(--accent)] text-[var(--bg-body)] text-[9px] px-1.5 py-0.5 rounded-sm uppercase ml-2 tracking-wider font-bold">' + ep.badge + '</span>' : '';
                    return '<span class="' + (i === 0 ? 'pc-active' : '') + ' inline-flex items-center">' +
                        '<i class="fas fa-podcast mr-2 opacity-70"></i><span class="flex items-center">' + ep.title + badgeHtml + '</span>' +
                        '</span>';
                }).join('');
                // duplicate items for seamless loop
                marqueeEl.innerHTML = items + items;
            }

            function updateMarqueeActive() {
                marqueeEl.querySelectorAll('span.inline-flex').forEach((s, i) => {
                    s.classList.toggle('pc-active', i % episodes.length === currentIdx);
                });
            }

            // ---- Build playlist ----
            function buildPlaylist() {
                playlistEl.innerHTML = episodes.map((ep, i) => {
                    const author = ep.author || '10xdevblog team';
                    const badgeHtml = ep.badge ? ' <span class="bg-[var(--accent)] text-[var(--bg-body)] text-[9px] px-1.5 py-0.5 rounded-sm uppercase ml-2 tracking-wider font-bold">' + ep.badge + '</span>' : '';
                    return '<div class="pc-playlist-item' + (i === 0 ? ' pc-active-track' : '') + '" data-idx="' + i + '">' +
                        '  <button class="pc-pl-play"><i class="fas ' + (i === 0 ? 'fa-pause' : 'fa-play') + '"></i></button>' +
                        '  <div class="pc-pl-info">' +
                        '    <div class="pc-pl-title flex items-center">' + ep.title + badgeHtml + '</div>' +
                        '    <div class="pc-pl-meta">' + author + ' · ' + ep.category + ' · ' + ep.date + '</div>' +
                        '  </div>' +
                        '  <span class="pc-pl-dur">' + ep.duration + '</span>' +
                        '</div>';
                }).join('');

                playlistEl.querySelectorAll('.pc-playlist-item').forEach(item => {
                    item.addEventListener('click', () => {
                        const idx = parseInt(item.dataset.idx, 10);
                        if (idx === currentIdx) {
                            togglePlay();
                        } else {
                            loadTrack(idx, true);
                        }
                    });
                });
            }

            function updatePlaylistActive() {
                playlistEl.querySelectorAll('.pc-playlist-item').forEach((item, i) => {
                    item.classList.toggle('pc-active-track', i === currentIdx);
                    const icon = item.querySelector('.pc-pl-play i');
                    if (i === currentIdx && !audio.paused) {
                        icon.className = 'fas fa-pause';
                    } else {
                        icon.className = 'fas fa-play';
                    }
                });
            }

            // ---- Load & play track ----
            function loadTrack(idx, autoplay) {
                currentIdx = idx;
                const ep = episodes[idx];
                if (!ep) return;
                nowTitle.textContent = ep.title;
                audio.src = ep.audioUrl;
                audio.load();
                updateMarqueeActive();
                updatePlaylistActive();
                if (autoplay) {
                    audio.play().then(() => {
                        setPlayIcon(true);
                        updatePlaylistActive();
                    }).catch(() => { });
                }
            }

            function togglePlay() {
                if (!audio.src) return;
                if (audio.paused) {
                    audio.play().then(() => {
                        setPlayIcon(true);
                        updatePlaylistActive();
                    }).catch(() => { });
                } else {
                    audio.pause();
                    setPlayIcon(false);
                    updatePlaylistActive();
                }
            }

            // ---- Controls ----
            mainPlayBtn.addEventListener('click', togglePlay);
            play2Btn.addEventListener('click', togglePlay);

            prevBtn.addEventListener('click', () => {
                if (currentIdx > 0) loadTrack(currentIdx - 1, true);
            });
            nextBtn.addEventListener('click', () => {
                if (currentIdx < episodes.length - 1) loadTrack(currentIdx + 1, true);
            });
            rewBtn.addEventListener('click', () => { audio.currentTime = Math.max(0, audio.currentTime - 15); });
            fwdBtn.addEventListener('click', () => { audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 15); });

            speedSel.addEventListener('change', () => { audio.playbackRate = parseFloat(speedSel.value); });
            volEl.addEventListener('input', () => { audio.volume = parseFloat(volEl.value); });

            // Seek
            let seeking = false;
            seekEl.addEventListener('mousedown', () => seeking = true);
            seekEl.addEventListener('touchstart', () => seeking = true, { passive: true });
            seekEl.addEventListener('input', () => {
                if (audio.duration) {
                    audio.currentTime = (seekEl.value / 100) * audio.duration;
                }
            });
            seekEl.addEventListener('mouseup', () => seeking = false);
            seekEl.addEventListener('touchend', () => seeking = false);

            // Time update
            audio.addEventListener('timeupdate', () => {
                if (!seeking && audio.duration) {
                    seekEl.value = (audio.currentTime / audio.duration) * 100;
                }
                timeCur.textContent = fmt(audio.currentTime);
            });
            audio.addEventListener('loadedmetadata', () => {
                timeTotal.textContent = fmt(audio.duration);
            });
            audio.addEventListener('ended', () => {
                if (currentIdx < episodes.length - 1) {
                    loadTrack(currentIdx + 1, true);
                } else {
                    setPlayIcon(false);
                    updatePlaylistActive();
                }
            });

            // ---- Expand / Collapse ----
            expandPlayerBtn.addEventListener('click', () => {
                playerPanel.classList.toggle('pc-open');
                const icon = expandPlayerBtn.querySelector('i');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
                // Close playlist if player closed
                if (!playerPanel.classList.contains('pc-open')) {
                    playlistPanel.classList.remove('pc-open');
                    const plIcon = expandPlBtn.querySelector('i');
                    plIcon.className = 'fas fa-chevron-down text-[10px]';
                }
            });

            expandPlBtn.addEventListener('click', () => {
                playlistPanel.classList.toggle('pc-open');
                const icon = expandPlBtn.querySelector('i');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            });

        })();
    </script>

</body>

</html>