Grind-75 on Gejun's Blog https://gejun.name/tags/grind-75/ Recent content in Grind-75 on Gejun's Blog Gejun's Blog https://gejun.name/ https://gejun.name/ Hugo -- 0.162.1 en-us Tue, 24 Feb 2026 00:00:00 +0000 The Pattern Compendium — Grind 75 in Python https://gejun.name/leetcode-patterns/ Tue, 24 Feb 2026 00:00:00 +0000 https://gejun.name/leetcode-patterns/ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>The Pattern Compendium · Grind 75 in Python</title> <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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" /> <style> :root { --bg: #0a0d13; --bg-2: #0e131c; --surface: #121826; --surface-2: #161d2e; --border: #222a3d; --border-bright: #2f3b56; --ink: #ece6d6; --muted: #8a93a8; --faint: #5c6478; --amber: #f4b350; --amber-dim: #caa05a; --cyan: #54d2e6; --green: #7fe3a6; --rose: #f2898f; --violet: #b69cf0; --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7); --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Hanken Grotesk', system-ui, sans-serif; --serif: 'Fraunces', Georgia, serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 30px; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; background-image: radial-gradient( 900px 600px at 88% -8%, rgba(244, 179, 80, 0.1), transparent 60% ), radial-gradient( 800px 700px at -10% 18%, rgba(84, 210, 230, 0.08), transparent 55% ), radial-gradient( 700px 500px at 50% 120%, rgba(182, 156, 240, 0.07), transparent 60% ); background-attachment: fixed; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: rgba(244, 179, 80, 0.3); color: #fff; } /* ---------- Layout ---------- */ .shell { display: grid; grid-template-columns: 288px 1fr; max-width: 1480px; margin: 0 auto; position: relative; z-index: 2; } /* ---------- Sidebar ---------- */ .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--border); padding: 30px 20px 60px; background: linear-gradient( 180deg, rgba(14, 19, 28, 0.6), rgba(10, 13, 19, 0.6) ); backdrop-filter: blur(6px); } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 8px; } .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; } .brand-mark { width: 38px; height: 38px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--amber), #e0863a); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: #1a1206; font-size: 18px; box-shadow: 0 6px 18px -6px rgba(244, 179, 80, 0.6); } .brand-name { font-family: var(--serif); font-weight: 900; font-size: 19px; line-height: 1.05; letter-spacing: -0.01em; } .brand-sub { font-family: var(--mono); font-size: 10.5px; color: var(--amber-dim); letter-spacing: 0.13em; text-transform: uppercase; margin-top: 1px; } .search-wrap { position: relative; margin: 22px 0 18px; } #search { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 10px 34px; color: var(--ink); font-family: var(--mono); font-size: 13px; outline: none; transition: 0.2s; } #search:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(244, 179, 80, 0.12); } #search::placeholder { color: var(--faint); } .search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); } .nav-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 18px 6px 8px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: 0.15s; border: 1px solid transparent; } .nav a:hover { color: var(--ink); background: var(--surface); } .nav a.active { color: var(--ink); background: var(--surface-2); border-color: var(--border-bright); } .nav a.active .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .nav a.hidden { display: none; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-bright); flex: none; transition: 0.15s; } .nav .num { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: auto; } /* ---------- Main ---------- */ .main { padding: 0 clamp(20px, 5vw, 72px) 120px; min-width: 0; } /* Hero */ .hero { padding: 74px 0 38px; border-bottom: 1px solid var(--border); position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; border: 1px solid var(--border-bright); padding: 6px 13px; border-radius: 100px; background: rgba(244, 179, 80, 0.05); } .eyebrow b { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } h1.title { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 6.5vw, 82px); line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 6px; } h1.title em { font-style: italic; font-weight: 500; color: var(--amber); } .lede { font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 680px; margin-top: 20px; line-height: 1.6; } .lede strong { color: var(--ink); font-weight: 600; } .hero-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 34px; } .hstat .n { font-family: var(--serif); font-weight: 900; font-size: 34px; color: var(--ink); line-height: 1; } .hstat .l { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } /* Section heads */ .section { padding-top: 64px; scroll-margin-top: 20px; } .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-dim); margin-bottom: 10px; } h2.sec-title { font-family: var(--serif); font-weight: 900; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.02em; line-height: 1.05; } .sec-intro { color: var(--muted); max-width: 720px; margin-top: 12px; font-size: 15.5px; } /* Decision guide table */ .guide { margin-top: 30px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); } .guide-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border-bottom: 1px solid var(--border); } .guide-row:last-child { border-bottom: none; } .guide-row:hover { background: var(--surface-2); } .guide-cue { padding: 15px 20px; font-size: 14.5px; border-right: 1px solid var(--border); } .guide-cue code { font-family: var(--mono); font-size: 12.5px; background: rgba(244, 179, 80, 0.1); color: var(--amber); padding: 1px 6px; border-radius: 5px; } .guide-ans { padding: 15px 20px; display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px; color: var(--cyan); } .guide-ans::before { content: '→'; color: var(--faint); } .guide-head { display: grid; grid-template-columns: 1.4fr 1fr; background: var(--surface-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .guide-head div { padding: 11px 20px; } .guide-head div:first-child { border-right: 1px solid var(--border); } /* Reference tables */ .reftable { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 13.5px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .reftable th { background: var(--surface-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 12px 16px; font-weight: 500; } .reftable td { padding: 11px 16px; border-top: 1px solid var(--border); vertical-align: top; } .reftable tr:hover td { background: var(--surface); } .reftable td:first-child { font-weight: 600; } .bigo { font-family: var(--mono); font-size: 12.5px; padding: 2px 8px; border-radius: 6px; display: inline-block; } .o-1, .o-logn { background: rgba(127, 227, 166, 0.13); color: var(--green); } .o-n { background: rgba(84, 210, 230, 0.13); color: var(--cyan); } .o-nlogn { background: rgba(244, 179, 80, 0.13); color: var(--amber); } .o-n2, .o-2n { background: rgba(242, 137, 143, 0.13); color: var(--rose); } /* Pattern cards */ .pcard { margin-top: 26px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow); } .pcard.hidden { display: none; } .pc-head { padding: 26px 30px 22px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .pc-head::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient( circle, rgba(244, 179, 80, 0.09), transparent 70% ); pointer-events: none; } .pc-idx { font-family: var(--mono); font-size: 12px; color: var(--amber-dim); letter-spacing: 0.1em; } .pc-name { font-family: var(--serif); font-weight: 900; font-size: 27px; letter-spacing: -0.02em; margin: 3px 0 8px; line-height: 1.05; } .pc-tag { color: var(--muted); font-size: 14.5px; max-width: 640px; } .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .badge { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--border-bright); color: var(--muted); background: var(--surface); } .badge.t { color: var(--cyan); border-color: rgba(84, 210, 230, 0.3); } .badge.s { color: var(--green); border-color: rgba(127, 227, 166, 0.3); } .pc-body { padding: 26px 30px; } .block-label { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; } .block-label.first { margin-top: 0; } .block-label svg { flex: none; } .usewhen { list-style: none; display: grid; gap: 8px; margin-bottom: 26px; } .usewhen li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink); align-items: flex-start; } .usewhen li::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--green); margin-top: 8px; flex: none; transform: rotate(45deg); } .usewhen code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; color: var(--cyan); } .idea { font-size: 14.5px; color: var(--ink); margin-bottom: 22px; line-height: 1.7; } .idea code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; color: var(--violet); } .illus { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 26px; display: flex; justify-content: center; } .illus svg { max-width: 100%; height: auto; } /* animation player */ .anim { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 12px; margin-bottom: 26px; } .anim-stage { min-height: 172px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .anim-stage svg { max-width: 100%; height: auto; font-family: var(--mono); } .anim-bar { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border); } .anim-ctrls { display: flex; gap: 6px; } .ac { background: var(--surface); border: 1px solid var(--border-bright); color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 6px 9px; border-radius: 7px; cursor: pointer; transition: 0.15s; min-width: 32px; line-height: 1; } .ac:hover { color: var(--ink); border-color: var(--amber); } .ac.play { color: var(--amber); min-width: 86px; font-weight: 500; } .ac.play.on { color: var(--green); border-color: rgba(127, 227, 166, 0.4); } .anim-progress { flex: 1; height: 4px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .anim-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--cyan)); transition: width 0.35s ease; } .anim-count { font-family: var(--mono); font-size: 11.5px; color: var(--faint); min-width: 52px; text-align: right; } /* Code blocks */ .codewrap { position: relative; margin-bottom: 6px; } .codewrap .cap { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--border); border-bottom: none; border-radius: 11px 11px 0 0; padding: 8px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .cap .fname { display: flex; align-items: center; gap: 8px; } .cap .fname::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 14px 0 0 var(--amber), 28px 0 0 var(--green); margin-right: 18px; } .copybtn { background: var(--surface); border: 1px solid var(--border-bright); color: var(--muted); font-family: var(--mono); font-size: 11px; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: 0.15s; } .copybtn:hover { color: var(--ink); border-color: var(--amber); } .copybtn.done { color: var(--green); border-color: var(--green); } pre { background: var(--bg); border: 1px solid var(--border); border-radius: 0 0 11px 11px; padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; margin: 0; } pre::-webkit-scrollbar { height: 9px; } pre::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 9px; } code.py { font-family: var(--mono); white-space: pre; } /* token colors */ .tk-kw { color: var(--rose); font-weight: 500; } .tk-def { color: var(--amber); font-weight: 600; } .tk-builtin { color: var(--cyan); } .tk-str { color: var(--green); } .tk-num { color: var(--violet); } .tk-com { color: var(--faint); font-style: italic; } .tk-self { color: var(--amber-dim); font-style: italic; } .tk-op { color: var(--muted); } /* Example block */ .example { margin-top: 26px; border-top: 1px dashed var(--border); padding-top: 24px; } .ex-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .ex-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: rgba(244, 179, 80, 0.12); color: var(--amber); } .ex-title { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; } .diff { font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.06em; } .diff.easy { background: rgba(127, 227, 166, 0.13); color: var(--green); } .diff.med { background: rgba(244, 179, 80, 0.13); color: var(--amber); } .diff.hard { background: rgba(242, 137, 143, 0.13); color: var(--rose); } .ex-prob { color: var(--muted); font-size: 14px; margin: 8px 0 16px; line-height: 1.6; } .related { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .related .rl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-right: 4px; } .related span.q { font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 100px; } /* Pitfall / tip callouts */ .callout { display: flex; gap: 13px; padding: 15px 18px; border-radius: 12px; margin-top: 18px; font-size: 14px; line-height: 1.6; } .callout.pit { background: rgba(242, 137, 143, 0.07); border: 1px solid rgba(242, 137, 143, 0.25); } .callout.tip { background: rgba(127, 227, 166, 0.06); border: 1px solid rgba(127, 227, 166, 0.22); } .callout .ic { flex: none; font-family: var(--mono); font-weight: 700; font-size: 13px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; } .callout.pit .ic { background: rgba(242, 137, 143, 0.16); color: var(--rose); } .callout.tip .ic { background: rgba(127, 227, 166, 0.16); color: var(--green); } .callout b { color: var(--ink); } /* Closing */ .closing { margin-top: 70px; padding: 40px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(135deg, var(--surface), var(--bg-2)); text-align: center; } .closing h3 { font-family: var(--serif); font-weight: 900; font-size: 26px; margin-bottom: 10px; } .closing p { color: var(--muted); max-width: 560px; margin: 0 auto 6px; } .closing a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(244, 179, 80, 0.3); } .footer { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .noresult { display: none; text-align: center; padding: 60px 20px; color: var(--muted); font-family: var(--mono); } .noresult.show { display: block; } /* Mobile */ .menu-btn { display: none; } @media (max-width: 980px) { .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: 0.3s; } .sidebar.open { transform: translateX(0); } .menu-btn { display: grid; place-items: center; position: fixed; top: 16px; right: 16px; z-index: 60; width: 46px; height: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-bright); color: var(--amber); cursor: pointer; } .overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 40; } .overlay.show { display: block; } .guide-row, .guide-head { grid-template-columns: 1fr; } .guide-cue { border-right: none; border-bottom: 1px solid var(--border); } .guide-head div:first-child { border-right: none; } } </style> </head> <body> <button class="menu-btn" id="menuBtn" aria-label="Menu"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" > <path d="M3 6h18M3 12h18M3 18h18" /> </svg> </button> <div class="overlay" id="overlay"></div> <div class="shell"> <aside class="sidebar" id="sidebar"> <div class="brand"> <div class="brand-mark">&lt;/&gt;</div> <div> <div class="brand-name">Pattern Compendium</div> <div class="brand-sub">Grind 75 · Python</div> </div> </div> <div class="search-wrap"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" > <circle cx="11" cy="11" r="7" /> <path d="m21 21-4-4" /> </svg> <input id="search" type="text" placeholder="filter patterns…" autocomplete="off" /> </div> <nav class="nav" id="nav"> <div class="nav-label">Foundations</div> <a href="#how" data-nav><span class="dot"></span>How to use this</a> <a href="#guide" data-nav ><span class="dot"></span>Pattern decision guide</a > <div class="nav-label" id="navPatternsLabel">The 20 Patterns</div> <div id="navPatterns"></div> <div class="nav-label">Reference</div> <a href="#bigo" data-nav><span class="dot"></span>Big-O cheatsheet</a> <a href="#ds" data-nav><span class="dot"></span>Data structure ops</a> </nav> </aside> <main class="main"> <header class="hero"> <div class="eyebrow"><b></b> Interview prep · field manual</div> <h1 class="title"> Stop memorizing.<br />Start <em>recognizing</em>. </h1> <p class="lede"> Every Grind&nbsp;75 problem is a costume worn by one of a small number of <strong>patterns</strong>. Learn to spot the pattern from the problem's signals, reach for the matching template, and adapt. This is the recognition map — <strong>20 patterns</strong>, each with the tells that trigger it, an illustrated idea, a Python template, and a flagship Grind&nbsp;75 solution. </p>