<!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>
    <link rel="manifest" href="//manifest.json">

    <!-- 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="/category/roadmaps/" class="hover:text-[var(--accent)] transition-colors">Roadmaps</a>
                
                
                
                <a href="/category/cheatsheets/" class="hover:text-[var(--accent)] transition-colors">CheatSheets</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>
                
                
                
                <a href="/subscribe/" class="hover:text-[var(--accent)] transition-colors">Get out books (One free)</a>
                
                
                
                <a href="https://ai.10xdev.blog/" class="hover:text-[var(--accent)] transition-colors">AI Directory for Developers</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="/category/roadmaps/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Roadmaps</a>
            
            
            
            <a href="/category/cheatsheets/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">CheatSheets</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>
            
            
            
            <a href="/subscribe/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">Get out books (One free)</a>
            
            
            
            <a href="https://ai.10xdev.blog/"
                class="block px-4 py-3 border-b border-[var(--border-subtle)]/50 hover:bg-[var(--border-subtle)] transition-colors">AI Directory for Developers</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/roadmaps/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Roadmaps
                </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/ai-development-integration/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    AI Development & Integration
                </a>
                
                <a href="/category/agentic-development/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Agentic Development
                </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/python/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Python
                </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/javascript/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    JavaScript
                </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/cheatsheets/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    CheatSheets
                </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/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/programming/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Programming
                </a>
                
                <a href="/category/personal-branding/"
                    class="btn-minimal text-xs uppercase tracking-wide opacity-70 hover:opacity-100">
                    Personal Branding
                </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="overflow-hidden rounded-sm mb-3 bg-gray-100 relative" style="aspect-ratio: 3/2; min-height: 120px;">
                            <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #ec4899;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </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>Personal Branding</span>
                            <span>Jun 03</span>
                        </div>
                    </div>
                    
                    <div class="group cursor-pointer flex-1 flex flex-col">
                        <div class="overflow-hidden rounded-sm mb-3 bg-gray-100 relative" style="aspect-ratio: 3/2; min-height: 120px;">
                            <img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4f5g6h7-i8j9-0k1l-2m3n-4o5p6q7r8s9t_2560x1440.png"
       alt="The 3 Pillars of Observability: What to Do When Your System is a Black Box"
       class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
       onerror="this.style.display='none';var f=this.nextElementSibling;if(f)f.style.display='flex';">
  <div style="display:none;background-color:#22c55e;" class="absolute inset-0 transition-transform duration-500 group-hover:scale-110">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-newspaper" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                        </div>
                        <h4
                            class="text-xl font-bold leading-snug mb-2 group-hover:underline decoration-1 underline-offset-4">
                            <a href="/the-3-pillars-of-observability-logging-metrics-and-tracing/">The 3 Pillars of Observability: What to Do When Your System is a Black Box</a>
                        </h4>
                        <div
                            class="mt-auto text-xs text-[var(--text-sub)] flex justify-between border-t border-[var(--border-subtle)] pt-2">
                            <span>New in the Dev World</span>
                            <span>May 28</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)]">Agentic Development</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="/darjs-experiment-karpathy-2026-agentic-methodology/">I Built a Framework as a Deliberate Stress Test for Agentic Development. Here's What the Data Says.</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">I didn’t build DarJS because I needed another framework. I built it because I wanted to know what actually happens...</p>
                    <a href="/darjs-experiment-karpathy-2026-agentic-methodology/"
                        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)]">Agentic Development</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="/7-things-developers-get-wrong-about-ai-agents-2026/">7+ Things Every Developer Gets Wrong About AI Agents in 2026 (Beginners, Read This First)</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">You gave the AI all the context. You wrote a detailed prompt. You hit enter. It confidently did the wrong...</p>
                    <a href="/7-things-developers-get-wrong-about-ai-agents-2026/"
                        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)]">Agentic Development</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="/10-rules-ai-agent-ready-software/">10 Rules for Building Software AI Agents Can Actually Drive</a>
                    </h4>
                    <p class="text-sm text-[var(--text-sub)] line-clamp-3 mb-4">Everyone is talking about “AI-assisted development.” Far fewer people are talking about what happens when your AI agent hits a...</p>
                    <a href="/10-rules-ai-agent-ready-software/"
                        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="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">Roadmaps</h2>
            <a href="/category/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 featured + stack of smaller) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            
            <!-- Big featured post — full cover image + title + excerpt -->
            <a href="/the-ultimate-ai-engineer-roadmap-for-2026-skills-that-truly-matter/" class="group block">
                <div class="overflow-hidden rounded-sm mb-4 relative" style="aspect-ratio: 4/3; min-height: 200px;">
                    <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #f97316;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                </div>
                <h3 class="text-2xl md:text-3xl font-bold leading-tight mb-2 group-hover:text-[var(--text-sub)] transition-colors">The Ultimate AI Engineer Roadmap for 2026: Skills That Truly Matter</h3>
                <p class="text-sm text-[var(--text-sub)] line-clamp-2 mb-3">The field of Artificial Intelligence is evolving at an unprecedented pace. The roadmaps of yesterday are quickly becoming obsolete as new architectures and methodologies emerge....</p>
                <div class="text-xs font-bold uppercase tracking-widest text-[var(--text-sub)]">December 29, 2025</div>
            </a>
            <!-- Stacked sub-posts — thumbnail + title -->
            <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/the-ultimate-ai-engineer-roadmap-for-2026-skills-salary-and-specializations/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #06b6d4;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Dec 19, 2025</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/the-ultimate-ai-engineer-roadmap-for-2026-skills-salary-and-specializations/">The Ultimate AI Engineer Roadmap for 2026: Skills, Salary, and Specializations</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">An AI Engineer is a professional who designs, builds, and maintains AI...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/the-2026-data-analyst-roadmap-4-unspoken-rules-to-beat-the-ai-competition/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #f59e0b;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Dec 18, 2025</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/the-2026-data-analyst-roadmap-4-unspoken-rules-to-beat-the-ai-competition/">The 2026 Data Analyst Roadmap: 4 Unspoken Rules to Beat the AI Competition</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">The old advice for aspiring data analysts is obsolete. “Learn Excel, SQL,...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/angular-21-deep-dive-mind-map" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Nov 22, 2025</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/angular-21-deep-dive-mind-map">Angular 21: The Deep-Dive Mind Map (English)</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">
</p>
                    </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="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 B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/the-3-pillars-of-observability-logging-metrics-and-tracing/" class="block h-40 md:h-48 overflow-hidden relative"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe4f5g6h7-i8j9-0k1l-2m3n-4o5p6q7r8s9t_2560x1440.png"
           alt="The 3 Pillars of Observability: What to Do When Your System is a Black Box"
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
           onerror="this.style.display='none';var f=this.nextElementSibling;if(f)f.style.display='flex';">
      <div style="display:none;background-color:#22c55e;" class="absolute inset-0 transition-transform duration-500 group-hover:scale-110">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-newspaper" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #22c55e;">New in the Dev World</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/the-3-pillars-of-observability-logging-metrics-and-tracing/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#22c55e'"
         onmouseout="this.style.color='inherit'">The 3 Pillars of Observability: What to Do When Your System is a Black Box</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 28, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>5 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/the-cap-theorem-a-simple-guide-to-a-hard-problem/" class="block h-40 md:h-48 overflow-hidden relative"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd3e4f5g6-h7i8-9j0k-1l2m-3n4o5p6q7r8s_2560x1440.png"
           alt="The CAP Theorem: A Simple Guide to a Hard Distributed Systems Problem"
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
           onerror="this.style.display='none';var f=this.nextElementSibling;if(f)f.style.display='flex';">
      <div style="display:none;background-color:#22c55e;" class="absolute inset-0 transition-transform duration-500 group-hover:scale-110">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-newspaper" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #22c55e;">New in the Dev World</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/the-cap-theorem-a-simple-guide-to-a-hard-problem/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#22c55e'"
         onmouseout="this.style.color='inherit'">The CAP Theorem: A Simple Guide to a Hard Distributed Systems Problem</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 21, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>5 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/what-is-a-message-queue-3-real-world-examples/" class="block h-40 md:h-48 overflow-hidden relative"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc2d3e4f5-g6h7-8i9j-0k1l-m2n3o4p5q6r7_2560x1440.png"
           alt="What is a Message Queue? 3 Real-World Problems They Solve"
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
           onerror="this.style.display='none';var f=this.nextElementSibling;if(f)f.style.display='flex';">
      <div style="display:none;background-color:#22c55e;" class="absolute inset-0 transition-transform duration-500 group-hover:scale-110">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-newspaper" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #22c55e;">New in the Dev World</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/what-is-a-message-queue-3-real-world-examples/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#22c55e'"
         onmouseout="this.style.color='inherit'">What is a Message Queue? 3 Real-World Problems They Solve</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 14, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>5 min</span>
    </div>
  </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 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]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/your-test-suite-doesnt-test-your-browser-code/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/your-test-suite-doesnt-test-your-browser-code/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Your Test Suite Doesn't Test Your Browser Code</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 22, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>6 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/your-framework-needs-a-dar-inspect/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/your-framework-needs-a-dar-inspect/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Your Framework Needs a `dar inspect`</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 22, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>4 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/your-directory-layout-is-now-a-routing-table/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/your-directory-layout-is-now-a-routing-table/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Your Directory Layout Is Now a Routing Table</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 22, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>6 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/writing-code-for-machines-not-just-humans/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/writing-code-for-machines-not-just-humans/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Writing Code for Machines, Not Just Humans</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 22, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>7 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/writing-art-direction-not-image-prompts/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/writing-art-direction-not-image-prompts/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Writing Art Direction, Not Image Prompts</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 22, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>7 min</span>
    </div>
  </div>
</article>



                </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="agentic-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">Agentic Development</h2>
            <a href="/category/agentic-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="/darjs-experiment-karpathy-2026-agentic-methodology/">I Built a Framework as a Deliberate Stress Test for Agentic Development. Here's What the Data Says.</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">
                        I didn’t build DarJS because I needed another framework. I built it because I wanted...
                    </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="/7-things-developers-get-wrong-about-ai-agents-2026/">7+ Things Every Developer Gets Wrong About AI Agents in 2026 (Beginners, Read This First)</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 gave the AI all the context. You wrote a detailed prompt. You hit enter....
                    </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="/10-rules-ai-agent-ready-software/">10 Rules for Building Software AI Agents Can Actually Drive</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 is talking about “AI-assisted development.” Far fewer people are talking about what happens when...
                    </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="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 A: SPOTLIGHT HERO (1 Big featured + stack of smaller) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            
            <!-- Big featured post — full cover image + title + excerpt -->
            <a href="/agentic-qa-shared-files-codex-claude/" class="group block">
                <div class="overflow-hidden rounded-sm mb-4 relative" style="aspect-ratio: 4/3; min-height: 200px;">
                    <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #eab308;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                </div>
                <h3 class="text-2xl md:text-3xl font-bold leading-tight mb-2 group-hover:text-[var(--text-sub)] transition-colors">Agentic QA in 2026: Let One AI Break Your Framework and Another Fix It</h3>
                <p class="text-sm text-[var(--text-sub)] line-clamp-2 mb-3">Most demos of AI coding agents show the happy path. You ask for an app. The agent creates files. Tests pass. Everyone claps. Real software...</p>
                <div class="text-xs font-bold uppercase tracking-widest text-[var(--text-sub)]">May 22, 2026</div>
            </a>
            <!-- Stacked sub-posts — thumbnail + title -->
            <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/your-test-suite-doesnt-test-your-browser-code/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">May 22, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/your-test-suite-doesnt-test-your-browser-code/">Your Test Suite Doesn't Test Your Browser Code</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">tags: [testing, browser, node, scope, syntax, pre-commit, hooks, studio, debugging] related: tools/hooks/check-js-syntax.js...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/your-framework-needs-a-dar-inspect/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">May 22, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/your-framework-needs-a-dar-inspect/">Your Framework Needs a `dar inspect`</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">When an AI agent starts working on a DarJS app, it faces...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/your-directory-layout-is-now-a-routing-table/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">May 22, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/your-directory-layout-is-now-a-routing-table/">Your Directory Layout Is Now a Routing Table</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">During a long session building the DarJS framework, I generated an audit...</p>
                    </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 B: CLASSIC GRID (3 Cols) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/ai-matcher-python" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/ai-matcher-python"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">Build Your Own AI Meme Matcher: A Beginner's Guide to Computer Vision with Python</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Apr 10, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>19 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/visually-explained-master-the-template-method-pattern-in-python/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/visually-explained-master-the-template-method-pattern-in-python/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">Visually Explained: Master the Template Method Pattern in Python</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Dec 31, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>11 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/stop-modifying-your-classes-a-visual-guide-to-the-decorator-pattern-in-python/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/stop-modifying-your-classes-a-visual-guide-to-the-decorator-pattern-in-python/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">Stop Modifying Your Classes: A Visual Guide to the Decorator Pattern in Python</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Dec 29, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>11 min</span>
    </div>
  </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="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 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]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/python-books-senior-developers-read" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python Books</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/python-books-senior-developers-read"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">5 Python Books Senior Developers Read But Never Talk About</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Nov 27, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>9 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/books/python/awaken-coders-intuition/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python Books</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/books/python/awaken-coders-intuition/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">5 Python Books That Awaken Your Coder's Intuition</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Nov 26, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>12 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/python-books-bend-fabric-code" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python Books</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/python-books-bend-fabric-code"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">5 Python Books That Bend the Fabric of Code</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Nov 25, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>11 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/python-books-build-god-like-developers" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python Books</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/python-books-build-god-like-developers"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">5 Python Books That Build God-Like Developers</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Nov 23, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>10 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/forbidden-python-tomes-weave-code-reality" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #eab308;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-python" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #eab308;">Python Books</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/forbidden-python-tomes-weave-code-reality"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#eab308'"
         onmouseout="this.style.color='inherit'">5 Forbidden Python Tomes That Weave Code into Reality</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Nov 20, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>11 min</span>
    </div>
  </div>
</article>



                </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="javascript"
            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">JavaScript</h2>
            <a href="/category/javascript/"
                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="/angular-20-bootstrap/">🚀 Let's Get Angular 20 and Bootstrap Working Together: A Quick Guide</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">
                        Angular 20, which landed in May 2025, is a game-changer. It’s clear the Angular team...
                    </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="/spanish/angular-20-bootstrap/">🚀 Hagamos que Angular 20 y Bootstrap funcionen juntos: Una Guía Práctica</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">
                        Angular 20, que aterrizó en mayo de 2025, llega para cambiar las reglas del juego....
                    </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="/fr/angular-20-bootstrap/">🚀 Angular 20 et Bootstrap : Le Guide Pratique pour les Faire Collaborer</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">
                        Angular 20, arrivé en mai 2025, change véritablement la donne. Il est clair que l’équipe...
                    </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="/chinese/angular-20-bootstrap/">🚀 Angular 20 与 Bootstrap 协同工作：一份实践指南</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">
                        于 2025 年 5 月发布的 Angular 20 真正地改变了游戏规则。很明显，Angular 团队正全力以赴，通过专注于速度、更智能的响应性以及更清爽的开发体验来简化我们的工作。但当你把像 Bootstrap 这样的老朋友带入这个新世界时，会发生什么呢？你会得到两全其美的结果：一个坚如磐石的响应式设计框架，运行在一个超强性能的现代前端引擎之上。 本指南旨在引导你如何将 Bootstrap 与 Angular...
                    </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 featured + stack of smaller) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            
            <!-- Big featured post — full cover image + title + excerpt -->
            <a href="/beginners-guide-env-files-security/" class="group block">
                <div class="overflow-hidden rounded-sm mb-4 relative" style="aspect-ratio: 4/3; min-height: 200px;">
                    <img src="/assets/images/env-files-security.jpg"
       alt="The Beginner’s Guide to .env Files &amp; Security Management"
       class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
       onerror="this.style.display='none';var f=this.nextElementSibling;if(f)f.style.display='flex';">
  <div style="display:none;background-color:#6366f1;" class="absolute inset-0 transition-transform duration-500 group-hover:scale-110">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                </div>
                <h3 class="text-2xl md:text-3xl font-bold leading-tight mb-2 group-hover:text-[var(--text-sub)] transition-colors">The Beginner’s Guide to .env Files & Security Management</h3>
                <p class="text-sm text-[var(--text-sub)] line-clamp-2 mb-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...</p>
                <div class="text-xs font-bold uppercase tracking-widest text-[var(--text-sub)]">February 26, 2026</div>
            </a>
            <!-- Stacked sub-posts — thumbnail + title -->
            <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/stop-crashing-your-python-code-the-magic-of-pop-with-a-default/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Jan 30, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/stop-crashing-your-python-code-the-magic-of-pop-with-a-default/">Stop Crashing Your Python Code: The Magic of `pop()` with a Default</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">Ever had your program running perfectly? Then suddenly, it crashes. All because...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/from-lan-to-wan-a-visual-guide-to-computer-networking-fundamentals/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #f97316;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Jan 07, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/from-lan-to-wan-a-visual-guide-to-computer-networking-fundamentals/">From LAN to WAN: A Visual Guide to Computer Networking Fundamentals</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">As a web developer, you operate on the world’s largest computer network:...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/tcl-the-weirdest-programming-language-i-ever-learned/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #ec4899;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Jan 02, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/tcl-the-weirdest-programming-language-i-ever-learned/">TCL: The Weirdest Programming Language I Ever Learned</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">In my first software developer role, I used C++. That was expected,...</p>
                    </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="cheatsheets"
            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">CheatSheets</h2>
            <a href="/category/cheatsheets/"
                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">
            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/python-datascience-cheatsheet/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #a855f7;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #a855f7;">CheatSheets</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/python-datascience-cheatsheet/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#a855f7'"
         onmouseout="this.style.color='inherit'">Data Science Cheatsheet</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Aug 05, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>1 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/terraform-cheatsheet/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">CheatSheets</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/terraform-cheatsheet/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Terraform Cheatsheet</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Aug 04, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>1 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/kubernetes-cheatsheet/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #14b8a6;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #14b8a6;">CheatSheets</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/kubernetes-cheatsheet/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#14b8a6'"
         onmouseout="this.style.color='inherit'">Kubernetes Cheatsheet</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Aug 03, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>1 min</span>
    </div>
  </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="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]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/how-the-plan-to-replace-developers-with-ai-went-horribly-wrong/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/how-the-plan-to-replace-developers-with-ai-went-horribly-wrong/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">How the Plan to Replace Developers with AI Went Horribly Wrong</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Feb 26, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>7 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/beyond-vibe-coding-mastering-spec-driven-development-for-ai-engineering/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/beyond-vibe-coding-mastering-spec-driven-development-for-ai-engineering/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Beyond Vibe Coding: Mastering Spec-Driven Development for AI Engineering</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Jan 08, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>5 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/the-genesis-of-go-how-ken-thompson-and-google-engineers-built-a-new-language/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/the-genesis-of-go-how-ken-thompson-and-google-engineers-built-a-new-language/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">The Genesis of Go: How Ken Thompson and Google Engineers Built a New Language</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Jan 06, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>6 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/will-ai-take-your-job-a-guide-to-navigating-the-future-of-work/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/will-ai-take-your-job-a-guide-to-navigating-the-future-of-work/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">Will AI Take Your Job? A Guide to Navigating the Future of Work</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Jan 04, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>14 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/top-7-ai-certifications-that-outweigh-a-college-degree/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #f59e0b;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-briefcase" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #f59e0b;">Career Growth</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/top-7-ai-certifications-that-outweigh-a-college-degree/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#f59e0b'"
         onmouseout="this.style.color='inherit'">Top 7 AI Certifications That Outweigh a College Degree</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Dec 28, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>8 min</span>
    </div>
  </div>
</article>



                </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="/unlock-unlimited-email-addresses-with-this-gmail-trick/">Unlock Unlimited Email Addresses with This Gmail Trick</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 will reveal a built-in Gmail feature that allows you to generate an infinite...
                    </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-best-online-business-for-beginners-in-2026-a-complete-guide/">The Best Online Business for Beginners in 2026: A Complete Guide</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">
                        If you want to start an online business or side hustle in 2026 but feel...
                    </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="/run-aws-on-your-laptop-with-localstack-and-docker/">Run AWS on Your Laptop with LocalStack and Docker</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">
                        What if you could run AWS directly on your laptop? Not a simulation. Not 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>
            
            <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="/how-to-build-perfect-images-in-ai-with-json-prompting/">How to Build Perfect Images in AI with JSON Prompting</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">
                        There’s a powerful trick that many are overlooking with AI image generators. It marks the...
                    </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 featured + stack of smaller) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            
            <!-- Big featured post — full cover image + title + excerpt -->
            <a href="/understanding-the-stack-data-structure-the-plate-analogy/" class="group block">
                <div class="overflow-hidden rounded-sm mb-4 relative" style="aspect-ratio: 4/3; min-height: 200px;">
                    <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #14b8a6;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                </div>
                <h3 class="text-2xl md:text-3xl font-bold leading-tight mb-2 group-hover:text-[var(--text-sub)] transition-colors">Understanding the Stack Data Structure: The Plate Analogy</h3>
                <p class="text-sm text-[var(--text-sub)] line-clamp-2 mb-3">Imagine you’re arranging a set of plates. You stack them one by one. A blue one, then green, yellow, orange, and finally a red one...</p>
                <div class="text-xs font-bold uppercase tracking-widest text-[var(--text-sub)]">February 27, 2026</div>
            </a>
            <!-- Stacked sub-posts — thumbnail + title -->
            <div class="space-y-0 divide-y divide-[var(--border-subtle)]">
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/mastering-the-factory-method-a-visual-guide-to-decoupling-your-code/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #6366f1;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Jan 02, 2026</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/mastering-the-factory-method-a-visual-guide-to-decoupling-your-code/">Mastering the Factory Method: A Visual Guide to Decoupling Your Code</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">As applications grow, the way we create objects can become a major...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/visually-explained-master-the-template-method-design-pattern-in-java/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #14b8a6;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Dec 29, 2025</div>
                        <h4 class="text-base font-bold leading-snug group-hover:text-[var(--text-sub)] transition-colors">
                            <a href="/visually-explained-master-the-template-method-design-pattern-in-java/">Visually Explained: Master the Template Method Design Pattern in Java</a>
                        </h4>
                        <p class="text-xs text-[var(--text-sub)] line-clamp-2 mt-1">The Template Method is a behavioral design pattern that defines the skeleton...</p>
                    </div>
                </div>
                
                <div class="group flex gap-4 items-start py-5">
                    <a href="/visually-explained-master-the-strategy-design-pattern-in-java/" class="flex-shrink-0 block relative overflow-hidden rounded-sm" style="width:80px;height:80px;">
                        <div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
       style="background-color: #f59e0b;">
    <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
    <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <i class="fas fa-file-alt" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
    </div>
  </div>
                    </a>
                    <div class="flex-1 min-w-0">
                        <div class="text-[10px] font-bold text-[var(--text-sub)] mb-1 uppercase">Dec 29, 2025</div>
                        <h4 class="text-base font-bold leading-snug 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-xs text-[var(--text-sub)] line-clamp-2 mt-1">Have you ever found yourself trapped in a labyrinth of if-else statements?...</p>
                    </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="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">
            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/skill-stack-agentic-ai-sdd" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #6366f1;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-robot" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #6366f1;">AI Development & Integration</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/skill-stack-agentic-ai-sdd"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#6366f1'"
         onmouseout="this.style.color='inherit'">The Essential Skill Stack for the Age of Agentic AI and SDD</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>May 14, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>6 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/best-programming-languages-2026/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #10b981;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-code" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #10b981;">Programming</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/best-programming-languages-2026/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#10b981'"
         onmouseout="this.style.color='inherit'">Coding in 2026: The Quick Guide to Picking Your Language</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Dec 13, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>6 min</span>
    </div>
  </div>
</article>



            
            


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/learn-python-2026-prompts/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #10b981;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-code" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #10b981;">Programming</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/learn-python-2026-prompts/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#10b981'"
         onmouseout="this.style.color='inherit'">Why Learning Python in 2026 is Different (And 5 Prompts + a Book to Help You)</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Dec 10, 2025</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>9 min</span>
    </div>
  </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="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]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/2026-01-01-the-piracy-paradox-why-tech-giants-let-you-steal-their-software/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #ec4899;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #ec4899;">Personal Branding</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/2026-01-01-the-piracy-paradox-why-tech-giants-let-you-steal-their-software/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#ec4899'"
         onmouseout="this.style.color='inherit'"></a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Jun 03, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>9 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/the-dark-side-of-python-its-shocking-uses-in-the-wild/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #ec4899;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #ec4899;">Personal Branding</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/the-dark-side-of-python-its-shocking-uses-in-the-wild/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#ec4899'"
         onmouseout="this.style.color='inherit'">The Dark Side of Python: Its Shocking Uses in the Wild</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Feb 27, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>4 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/python-the-hackers-weapon-of-choice/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #ec4899;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #ec4899;">Personal Branding</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/python-the-hackers-weapon-of-choice/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#ec4899'"
         onmouseout="this.style.color='inherit'">Python: The Hacker's Weapon of Choice</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Feb 27, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>4 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/inside-the-zero-day-market-the-hidden-economy-of-cyber-weapons/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #ec4899;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #ec4899;">Personal Branding</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/inside-the-zero-day-market-the-hidden-economy-of-cyber-weapons/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#ec4899'"
         onmouseout="this.style.color='inherit'">Inside the Zero-Day Market: The Hidden Economy of Cyber Weapons</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Feb 27, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>12 min</span>
    </div>
  </div>
</article>



                </div>
                
                <div class="snap-start flex-shrink-0 w-[85vw] md:w-[400px]">
                    


  <article class="content-card group bg-white overflow-hidden shadow-sm hover:shadow-md border border-slate-200 transition-all duration-300 flex flex-col hover:-translate-y-1 w-full flex-shrink-0 rounded-lg">
  <a href="/the-mind-bending-python-libraries-of-2027-you-havent-heard-of/" class="block h-40 md:h-48 overflow-hidden relative"><div class="absolute inset-0 transition-transform duration-500 group-hover:scale-110"
           style="background-color: #ec4899;">
        <div class="absolute inset-0" style="background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,.3) 100%);"></div>
        <div class="absolute inset-0" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fas fa-star" style="font-size:3rem;color:rgba(255,255,255,0.3);"></i>
        </div>
      </div></a>

  <div class="p-4 md:p-5 flex flex-col flex-1"><span class="text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-2"
          style="color: #ec4899;">Personal Branding</span><h3 class="font-bold text-[14px] md:text-base leading-snug mb-3 line-clamp-2 flex-1" style="color:#0f172a;">
      <a href="/the-mind-bending-python-libraries-of-2027-you-havent-heard-of/"
         style="color:inherit;transition:color .2s;"
         onmouseover="this.style.color='#ec4899'"
         onmouseout="this.style.color='inherit'">The Mind-Bending Python Libraries of 2027 You Haven't Heard Of</a>
    </h3>

    <div class="mt-auto pt-3 border-t border-slate-100 flex justify-between items-center text-[10px] md:text-xs font-medium" style="color:#94a3b8;">
      <span>Feb 25, 2026</span>
      <span><i class="far fa-clock" style="margin-inline-end:.25rem;"></i>4 min</span>
    </div>
  </div>
</article>



                </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#6d1e181d1d021f192d19080e05040809040c1f04081e430e0200" 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"></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>