1016 lines
51 KiB
HTML
1016 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Build Your Own X - 精选高质量教程</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0f172a;
|
||
--surface: #1e293b;
|
||
--surface2: #334155;
|
||
--border: #475569;
|
||
--text: #e2e8f0;
|
||
--text2: #94a3b8;
|
||
--accent: #38bdf8;
|
||
--accent2: #818cf8;
|
||
--green: #4ade80;
|
||
--orange: #fb923c;
|
||
--red: #f87171;
|
||
--pink: #f472b6;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 3rem 2rem 2rem;
|
||
text-align: center;
|
||
}
|
||
.header h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.header p { color: var(--text2); margin-top: .5rem; font-size: 1.1rem; }
|
||
.stats { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
|
||
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1.5rem; }
|
||
.stat strong { color: var(--accent); font-size: 1.4rem; }
|
||
.stat span { display: block; color: var(--text2); font-size: .85rem; }
|
||
|
||
.nav { position: sticky; top: 0; z-index: 100; background: rgba(15,23,42,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: .8rem 2rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
|
||
.nav a { color: var(--text2); text-decoration: none; padding: .4rem 1rem; border-radius: 8px; font-size: .9rem; transition: all .2s; border: 1px solid transparent; }
|
||
.nav a:hover, .nav a.active { color: var(--accent); background: var(--surface); border-color: var(--border); }
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
|
||
|
||
.section { margin-bottom: 3rem; }
|
||
.section-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); display: flex; align-items: center; gap: .8rem; }
|
||
.section-icon { font-size: 1.4rem; }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.2rem;
|
||
transition: all .3s;
|
||
cursor: pointer;
|
||
}
|
||
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(56,189,248,.1); }
|
||
.card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem; }
|
||
.card-title { font-size: 1.2rem; font-weight: 700; color: #fff; }
|
||
.card-title a { color: inherit; text-decoration: none; }
|
||
.card-title a:hover { color: var(--accent); }
|
||
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
|
||
.badge { font-size: .75rem; padding: .2rem .6rem; border-radius: 6px; font-weight: 600; }
|
||
.badge-lang { background: rgba(56,189,248,.15); color: var(--accent); }
|
||
.badge-diff-easy { background: rgba(74,222,128,.15); color: var(--green); }
|
||
.badge-diff-mid { background: rgba(251,146,60,.15); color: var(--orange); }
|
||
.badge-diff-hard { background: rgba(248,113,113,.15); color: var(--red); }
|
||
.badge-time { background: rgba(129,140,248,.15); color: var(--accent2); }
|
||
.badge-stars { background: rgba(244,114,182,.15); color: var(--pink); }
|
||
|
||
.card-meta { color: var(--text2); font-size: .9rem; margin: .8rem 0; }
|
||
.card-meta strong { color: var(--text); }
|
||
|
||
.card-build { background: var(--surface2); border-radius: 10px; padding: 1rem; margin: .8rem 0; }
|
||
.card-build-label { font-size: .8rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
|
||
|
||
.learn-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
|
||
.learn-tag { font-size: .78rem; background: rgba(148,163,184,.1); color: var(--text2); padding: .2rem .6rem; border-radius: 6px; border: 1px solid rgba(148,163,184,.15); }
|
||
|
||
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(71,85,105,.5); flex-wrap: wrap; gap: .5rem; }
|
||
.card-author { font-size: .85rem; color: var(--text2); }
|
||
.card-links a { font-size: .85rem; color: var(--accent); text-decoration: none; margin-left: 1rem; }
|
||
.card-links a:hover { text-decoration: underline; }
|
||
|
||
.quality-note { font-size: .88rem; color: var(--text2); margin-top: .6rem; line-height: 1.5; }
|
||
.quality-note strong { color: var(--green); }
|
||
|
||
/* Code Projects Table */
|
||
.repo-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
|
||
.repo-table th { text-align: left; padding: .8rem; font-size: .85rem; color: var(--accent); border-bottom: 2px solid var(--border); }
|
||
.repo-table td { padding: .8rem; border-bottom: 1px solid rgba(71,85,105,.3); font-size: .9rem; }
|
||
.repo-table tr:hover td { background: rgba(56,189,248,.03); }
|
||
.repo-table a { color: var(--accent); text-decoration: none; }
|
||
.repo-table a:hover { text-decoration: underline; }
|
||
.tier-label { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; }
|
||
.tier-1 { background: rgba(74,222,128,.15); color: var(--green); }
|
||
.tier-2 { background: rgba(56,189,248,.15); color: var(--accent); }
|
||
.tier-3 { background: rgba(251,146,60,.15); color: var(--orange); }
|
||
|
||
.verdict { font-size: .85rem; color: var(--text2); font-style: italic; }
|
||
|
||
.suitable-box { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); border-radius: 8px; padding: .6rem .8rem; margin-top: .5rem; font-size: .85rem; }
|
||
.suitable-box strong { color: var(--green); }
|
||
|
||
@media (max-width: 768px) {
|
||
.header h1 { font-size: 1.8rem; }
|
||
.container { padding: 1rem; }
|
||
.card { padding: 1rem; }
|
||
.stats { gap: .8rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="header">
|
||
<h1>Build Your Own X - 精选指南</h1>
|
||
<p>从 500+ 条链接中筛选出的真正高质量教程与代码项目</p>
|
||
<div class="stats">
|
||
<div class="stat"><strong>30</strong><span>精选教程</span></div>
|
||
<div class="stat"><strong>11</strong><span>优质代码仓库</span></div>
|
||
<div class="stat"><strong>7</strong><span>大分类</span></div>
|
||
<div class="stat"><strong>484k</strong><span>原仓库 Stars（90%水分）</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<a href="#system">系统/底层</a>
|
||
<a href="#network">网络/基础设施</a>
|
||
<a href="#frontend">前端/语言</a>
|
||
<a href="#ai">AI/ML</a>
|
||
<a href="#repos">优质代码仓库</a>
|
||
<a href="#summary">总结</a>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<!-- ===== 系统/底层 ===== -->
|
||
<div class="section" id="system">
|
||
<h2 class="section-title"><span class="section-icon">⚙</span> 系统 / 底层</h2>
|
||
|
||
<!-- Crafting Interpreters -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="http://www.craftinginterpreters.com/" target="_blank">Crafting Interpreters</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Java + C</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">80-120h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的脚本语言 "Lox" -- 造两遍。先用 Java 写树遍历解释器，再用 C 写字节码虚拟机。支持动态类型、垃圾回收、闭包、类和继承。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">词法扫描</span>
|
||
<span class="learn-tag">递归下降解析</span>
|
||
<span class="learn-tag">AST</span>
|
||
<span class="learn-tag">变量作用域</span>
|
||
<span class="learn-tag">闭包</span>
|
||
<span class="learn-tag">字节码编码</span>
|
||
<span class="learn-tag">栈式虚拟机</span>
|
||
<span class="learn-tag">哈希表实现</span>
|
||
<span class="learn-tag">Mark-Sweep GC</span>
|
||
<span class="learn-tag">Pratt 解析</span>
|
||
</div>
|
||
<div class="quality-note"><strong>公认神作。</strong>Robert Nystrom（Google Dart 团队）著，手绘插图，每行代码都有解释。同一语言用两种根本不同的方式实现，深度理解权衡。全书免费在线阅读。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想深入理解编程语言工作原理的中级程序员，需要基础 Java 和 C 知识。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Robert Nystrom · Google Dart 团队高级工程师</span>
|
||
<span class="card-links"><a href="https://github.com/munificent/craftinginterpreters" target="_blank">GitHub 仓库</a><a href="http://www.craftinginterpreters.com/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nand2Tetris -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="http://nand2tetris.org/" target="_blank">Nand2Tetris</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">HDL / Jack / ASM</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">100-200h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
从一个 NAND 门开始，搭建逻辑门、ALU、CPU、RAM、汇编器、VM 翻译器、编译器、操作系统 -- 最终在你亲手造的计算机上跑俄罗斯方块。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">布尔逻辑</span>
|
||
<span class="learn-tag">组合电路/ALU</span>
|
||
<span class="learn-tag">时序电路/RAM</span>
|
||
<span class="learn-tag">机器语言</span>
|
||
<span class="learn-tag">CPU 设计</span>
|
||
<span class="learn-tag">汇编器</span>
|
||
<span class="learn-tag">栈式 VM</span>
|
||
<span class="learn-tag">编译器前端</span>
|
||
<span class="learn-tag">OS 服务</span>
|
||
</div>
|
||
<div class="quality-note"><strong>CS 史上最受欢迎的课程之一。</strong>全球 400+ 大学采用，Coursera 免费课程，MIT Press 出版教材。从 NAND 门到俄罗斯方块，端到端理解计算机，无出其右。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想从最底层理解计算机的任何人。无需编程基础以外的前置知识。自学程序员填补基础空白的最佳选择。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Noam Nisan & Shimon Schocken · 耶路撒冷希伯来大学 / IDC</span>
|
||
<span class="card-links"><a href="http://nand2tetris.org/" target="_blank">官网</a><a href="https://www.coursera.org/learn/build-a-computer" target="_blank">Coursera</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Writing an OS in Rust -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://os.phil-opp.com/" target="_blank">Writing an OS in Rust</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Rust</span>
|
||
<span class="badge badge-diff-hard">高级</span>
|
||
<span class="badge badge-time">60-100h</span>
|
||
<span class="badge badge-stars">17.4k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
x86_64 最小操作系统内核：VGA 文本输出、CPU 异常处理、硬件中断、分页内存管理、堆分配器、async/await 协作式多任务。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">裸机 Rust (no_std)</span>
|
||
<span class="learn-tag">x86_64 启动</span>
|
||
<span class="learn-tag">中断描述符表</span>
|
||
<span class="learn-tag">PIC 中断控制器</span>
|
||
<span class="learn-tag">虚拟内存/分页</span>
|
||
<span class="learn-tag">堆分配器设计</span>
|
||
<span class="learn-tag">async/await 内部机制</span>
|
||
</div>
|
||
<div class="quality-note"><strong>最受欢迎的 OS 教程。</strong>翻译成 10+ 语言，每月更新，Rust OSDev 社区标杆。用 Rust 类型系统让 unsafe 代码更安全。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>有 Rust 经验、想理解 OS 内核的开发者。非初学者友好。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Philipp Oppermann · Rust OSDev 社区领袖</span>
|
||
<span class="card-links"><a href="https://github.com/phil-opp/blog_os" target="_blank">GitHub</a><a href="https://os.phil-opp.com/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- kilo Text Editor -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://viewsourcecode.org/snaptoken/kilo/" target="_blank">Build Your Own Text Editor (kilo)</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">15-25h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
~1000 行 C 代码的终端文本编辑器，零依赖。支持文件编辑、增量搜索、语法高亮。基于 Redis 作者 antirez 的 kilo 编辑器。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">终端 raw mode</span>
|
||
<span class="learn-tag">VT100 转义序列</span>
|
||
<span class="learn-tag">POSIX I/O</span>
|
||
<span class="learn-tag">动态数组</span>
|
||
<span class="learn-tag">增量搜索</span>
|
||
<span class="learn-tag">语法高亮状态机</span>
|
||
</div>
|
||
<div class="quality-note"><strong>教学法出色。</strong>184 个微小增量步骤，每步都能编译测试，立即看到结果。零依赖，只需 C 编译器。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>会基础 C、想理解终端应用和文本编辑器底层的人。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Jeremy Ruten (snaptoken) · 基于 antirez (Redis 作者) 的 kilo</span>
|
||
<span class="card-links"><a href="https://github.com/snaptoken/kilo-tutorial" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Simple Database -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://cstack.github.io/db_tutorial/" target="_blank">Let's Build a Simple Database</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">15-25h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
简化版 SQLite 克隆：REPL、SQL 编译器和虚拟机、B-Tree 数据结构、磁盘持久化、节点分裂。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">SQL 解析</span>
|
||
<span class="learn-tag">虚拟机架构</span>
|
||
<span class="learn-tag">行序列化</span>
|
||
<span class="learn-tag">页式存储</span>
|
||
<span class="learn-tag">B-Tree</span>
|
||
<span class="learn-tag">二分搜索</span>
|
||
<span class="learn-tag">磁盘持久化</span>
|
||
</div>
|
||
<div class="quality-note">直接参照 SQLite 真实架构，TDD 驱动开发。14 部分完整可用（作者已停更，但内容自洽）。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想理解数据库内核的后端工程师、面试准备。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Connor Stack</span>
|
||
<span class="card-links"><a href="https://github.com/cstack/db_tutorial" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LC-3 VM -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://justinmeiners.github.io/lc3-vm/" target="_blank">Write your Own Virtual Machine</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-easy">入门</span>
|
||
<span class="badge badge-time">5-10h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
~250 行 C 代码的 LC-3 虚拟机，能跑真实汇编程序（2048 游戏、Roguelike）。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">指令集架构</span>
|
||
<span class="learn-tag">寄存器/内存</span>
|
||
<span class="learn-tag">指令编解码</span>
|
||
<span class="learn-tag">取指-解码-执行循环</span>
|
||
<span class="learn-tag">内存映射 I/O</span>
|
||
<span class="learn-tag">Trap 系统调用</span>
|
||
</div>
|
||
<div class="quality-note"><strong>最佳周末项目。</strong>代码极简但能跑真实程序。文学式编程风格，概念与实现分离清晰。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>系统编程入门者，一个周末就能完成。只需基础 C 知识。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Justin Meiners & Ryan Pendleton</span>
|
||
<span class="card-links"><a href="https://github.com/justinmeiners/lc3-vm" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Linux Containers 500 LOC -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://blog.lizzie.io/linux-containers-in-500-loc.html" target="_blank">Linux Containers in 500 Lines of Code</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-hard">高级</span>
|
||
<span class="badge badge-time">10-20h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
最小化但功能完整的 Linux 容器运行时：namespaces、capabilities、cgroups、seccomp、chroot。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Linux Namespaces</span>
|
||
<span class="learn-tag">Capabilities</span>
|
||
<span class="learn-tag">Cgroups</span>
|
||
<span class="learn-tag">Seccomp</span>
|
||
<span class="learn-tag">clone() 系统调用</span>
|
||
<span class="learn-tag">容器安全加固</span>
|
||
</div>
|
||
<div class="quality-note">文学式编程，文档即代码。深入 Linux 内核安全机制，引用内核源码和安全论文。理解 Docker 本质的最佳材料。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>有 Linux 经验的 DevOps/SRE/安全工程师。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Lizzie Dixon · 安全方向 Linux 工程师</span>
|
||
<span class="card-links"><a href="https://blog.lizzie.io/linux-containers-in-500-loc.html" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 网络/基础设施 ===== -->
|
||
<div class="section" id="network">
|
||
<h2 class="section-title"><span class="section-icon">🌐</span> 网络 / 基础设施</h2>
|
||
|
||
<!-- Beej's Guide -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="http://beej.us/guide/bgnet/" target="_blank">Beej's Guide to Network Programming</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">20-30h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的 socket 编程能力：TCP/UDP 客户端和服务端、多路复用、DNS 解析。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Socket API</span>
|
||
<span class="learn-tag">TCP/UDP</span>
|
||
<span class="learn-tag">select/poll</span>
|
||
<span class="learn-tag">字节序</span>
|
||
<span class="learn-tag">DNS 解析</span>
|
||
<span class="learn-tag">多客户端处理</span>
|
||
</div>
|
||
<div class="quality-note"><strong>网络编程圣经。</strong>几乎每个 CS 学生都读过。幽默易懂的写作风格，持续更新 20+ 年。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想理解网络编程底层的任何开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Brian "Beej" Hall</span>
|
||
<span class="card-links"><a href="http://beej.us/guide/bgnet/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TCP/IP Stack -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="http://www.saminiir.com/lets-code-tcp-ip-stack-1-ethernet-arp/" target="_blank">Let's code a TCP/IP stack</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C</span>
|
||
<span class="badge badge-diff-hard">高级</span>
|
||
<span class="badge badge-time">30-50h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
用户态 TCP/IP 协议栈：Ethernet、ARP、ICMP、TCP 状态机。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Ethernet 帧</span>
|
||
<span class="learn-tag">ARP 协议</span>
|
||
<span class="learn-tag">IP 分组</span>
|
||
<span class="learn-tag">ICMP</span>
|
||
<span class="learn-tag">TCP 状态机</span>
|
||
<span class="learn-tag">TUN/TAP 设备</span>
|
||
</div>
|
||
<div class="quality-note">从以太网帧到 TCP 握手，逐层实现。真正理解网络协议的最佳实践。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想深入理解 TCP/IP 协议栈的系统/网络工程师。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Sami Niiranen</span>
|
||
<span class="card-links"><a href="https://github.com/saminiir/level-ip" target="_blank">GitHub</a><a href="http://www.saminiir.com/lets-code-tcp-ip-stack-1-ethernet-arp/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BitTorrent -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://blog.jse.li/posts/torrent/" target="_blank">Building a BitTorrent client from the ground up in Go</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Go</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">8-12h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
能下载真实 torrent 的 BitTorrent 客户端。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Bencode 编解码</span>
|
||
<span class="learn-tag">Tracker 协议</span>
|
||
<span class="learn-tag">Peer 协议</span>
|
||
<span class="learn-tag">分片下载</span>
|
||
<span class="learn-tag">并发管理</span>
|
||
</div>
|
||
<div class="quality-note">一篇文章讲透 BT 协议，简洁清晰，最终产物能实际下载文件。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>对 P2P 协议和 Go 感兴趣的开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Jesse Li</span>
|
||
<span class="card-links"><a href="https://blog.jse.li/posts/torrent/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DNS Server Rust -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://github.com/EmilHernvall/dnsguide" target="_blank">Building a DNS server in Rust</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Rust</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">10-15h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的 DNS 服务器，支持递归解析。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">DNS 协议</span>
|
||
<span class="learn-tag">UDP Socket</span>
|
||
<span class="learn-tag">递归解析</span>
|
||
<span class="learn-tag">二进制协议解析</span>
|
||
</div>
|
||
<div class="quality-note">5 章循序渐进，从 DNS 报文格式到完整递归解析。Rust 网络编程实践佳作。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想学 Rust 网络编程或理解 DNS 原理的开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Emil Hernvall</span>
|
||
<span class="card-links"><a href="https://github.com/EmilHernvall/dnsguide" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bocker -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://github.com/p8952/bocker" target="_blank">Docker implemented in ~100 lines of bash</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Shell</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">2-4h</span>
|
||
<span class="badge badge-stars">12.6k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
100 行 Bash 的 Docker 克隆：pull、run、exec、ps、logs、网络、cgroups。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Linux Namespaces</span>
|
||
<span class="learn-tag">Cgroups</span>
|
||
<span class="learn-tag">Chroot</span>
|
||
<span class="learn-tag">容器本质</span>
|
||
</div>
|
||
<div class="quality-note"><strong>"每行代码的顿悟密度"最高的项目。</strong>100 行证明容器就是 Linux 内核特性的组合，比大多数书讲得好。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>任何用 Docker 但不理解其本质的人。2-4 小时搞懂容器。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Peter Weldon</span>
|
||
<span class="card-links"><a href="https://github.com/p8952/bocker" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Browser Engine -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html" target="_blank">Let's build a browser engine</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Rust</span>
|
||
<span class="badge badge-diff-hard">高级</span>
|
||
<span class="badge badge-time">20-30h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
简化版浏览器引擎：HTML 解析器、CSS 解析器、布局引擎、渲染管线。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">HTML 解析</span>
|
||
<span class="learn-tag">CSS 选择器</span>
|
||
<span class="learn-tag">样式计算</span>
|
||
<span class="learn-tag">布局算法</span>
|
||
<span class="learn-tag">渲染树</span>
|
||
</div>
|
||
<div class="quality-note">Mozilla 工程师 Matt Brubeck 写的，7 篇系列。从 HTML 解析到像素输出，理解浏览器渲染的最佳短教程。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>前端想理解浏览器内部、或对 Rust 实战感兴趣的高级开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Matt Brubeck · Mozilla 工程师</span>
|
||
<span class="card-links"><a href="https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 前端/语言 ===== -->
|
||
<div class="section" id="frontend">
|
||
<h2 class="section-title"><span class="section-icon">💻</span> 前端 / 编程语言</h2>
|
||
|
||
<!-- Build your own React -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://pomb.us/build-your-own-react/" target="_blank">Build your own React</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">JavaScript</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">4-6h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
React 克隆 "Didact"：Fiber 架构、函数组件、useState Hook、协调算法 (Reconciliation)。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">createElement / JSX</span>
|
||
<span class="learn-tag">Virtual DOM</span>
|
||
<span class="learn-tag">Fiber 树</span>
|
||
<span class="learn-tag">并发渲染</span>
|
||
<span class="learn-tag">Reconciliation</span>
|
||
<span class="learn-tag">useState 实现</span>
|
||
</div>
|
||
<div class="quality-note">交互式代码块，8 步拆解 React 16.8+ 核心。Rodrigo Pombo（Code Hike 作者）出品，<strong>讲 React 内部原理最清楚的一篇。</strong></div>
|
||
<div class="suitable-box"><strong>适合：</strong>每天用 React 但想深入理解原理的前端开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Rodrigo Pombo (pomber)</span>
|
||
<span class="card-links"><a href="https://github.com/pomber/didact" target="_blank">GitHub</a><a href="https://pomb.us/build-your-own-react/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Super Tiny Compiler -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://github.com/jamiebuilds/the-super-tiny-compiler" target="_blank">The Super Tiny Compiler</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">JavaScript</span>
|
||
<span class="badge badge-diff-easy">入门</span>
|
||
<span class="badge badge-time">1-2h</span>
|
||
<span class="badge badge-stars">28.4k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
~200 行的迷你编译器：将 Lisp 风格调用转为 C 风格。注释比代码多。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">词法分析</span>
|
||
<span class="learn-tag">AST 解析</span>
|
||
<span class="learn-tag">Visitor 模式</span>
|
||
<span class="learn-tag">代码生成</span>
|
||
<span class="learn-tag">编译三阶段</span>
|
||
</div>
|
||
<div class="quality-note"><strong>史上最易懂的编译器教程。</strong>Babel/Yarn/Lerna 核心贡献者 Jamie Kyle 出品。每行都有注释，像读书一样。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>对编译器好奇但被"龙书"吓退的人。1-2 小时入门。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Jamie Kyle · Babel/Yarn/Flow 核心贡献者</span>
|
||
<span class="card-links"><a href="https://github.com/jamiebuilds/the-super-tiny-compiler" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Norvig Lispy -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="http://norvig.com/lispy.html" target="_blank">How to Write a Lisp Interpreter in Python</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">3-5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
117 行 Python 的 Scheme 解释器 "Lispy"：变量、条件、lambda/闭包、REPL。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">词法/语法分析</span>
|
||
<span class="learn-tag">AST</span>
|
||
<span class="learn-tag">环境模型</span>
|
||
<span class="learn-tag">Eval/Apply 循环</span>
|
||
<span class="learn-tag">Lambda 演算</span>
|
||
<span class="learn-tag">闭包</span>
|
||
</div>
|
||
<div class="quality-note"><strong>Peter Norvig（Google 研究总监、AI 教材作者）亲笔。</strong>117 行代码诠释"软件的麦克斯韦方程"，经典中的经典。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想理解编程语言工作原理的 Python 开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Peter Norvig · Google 研究总监</span>
|
||
<span class="card-links"><a href="http://norvig.com/lispy.html" target="_blank">在线阅读</a><a href="http://norvig.com/lispy2.html" target="_blank">进阶版</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LSBASI -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://ruslanspivak.com/lsbasi-part1/" target="_blank">Let's Build A Simple Interpreter</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">30-50h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的 Pascal 解释器：词法器、递归下降解析器、AST、符号表、语义分析器。19 部分系列。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">词法分析</span>
|
||
<span class="learn-tag">递归下降解析</span>
|
||
<span class="learn-tag">AST + Visitor</span>
|
||
<span class="learn-tag">BNF/EBNF 语法</span>
|
||
<span class="learn-tag">符号表</span>
|
||
<span class="learn-tag">语义分析</span>
|
||
<span class="learn-tag">嵌套作用域</span>
|
||
</div>
|
||
<div class="quality-note">19 部分系列，从单数字计算器到完整 Pascal 解释器。每篇递增构建，带练习题。<strong>最彻底的解释器教程。</strong></div>
|
||
<div class="suitable-box"><strong>适合：</strong>愿意投入几周深入学习解释器/编译器的开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Ruslan Spivak</span>
|
||
<span class="card-links"><a href="https://github.com/rspivak/lsbasi" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Browser Engineering -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://browser.engineering" target="_blank">Browser Engineering (Web Browser Engineering)</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python</span>
|
||
<span class="badge badge-diff-hard">高级</span>
|
||
<span class="badge badge-time">80-120h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的 Web 浏览器：HTTP 网络、HTML/CSS 解析、布局引擎、渲染管线、JS 集成、无障碍、动画、合成。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">HTTP 网络</span>
|
||
<span class="learn-tag">HTML 解析</span>
|
||
<span class="learn-tag">CSS 级联/优先级</span>
|
||
<span class="learn-tag">布局算法</span>
|
||
<span class="learn-tag">JS/DOM 交互</span>
|
||
<span class="learn-tag">安全 (Cookie/XSS/CSRF)</span>
|
||
<span class="learn-tag">GPU 动画</span>
|
||
<span class="learn-tag">无障碍树</span>
|
||
</div>
|
||
<div class="quality-note"><strong>牛津大学出版社正式出版，</strong>Chrome 渲染引擎负责人合著。免费在线版，大学教材级别。16 章覆盖完整浏览器栈。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想深入理解浏览器的资深开发者、Web 平台工程师、CS 高年级学生。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Pavel Panchekha (犹他大学教授) & Chris Harrelson (Google Chrome 渲染团队负责人)</span>
|
||
<span class="card-links"><a href="https://browser.engineering" target="_blank">在线阅读</a><a href="https://github.com/browserengineering/book" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Write Yourself a Git -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://wyag.thb.lt/" target="_blank">Write yourself a Git!</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">8-15h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
983 行 Python 的 Git 实现 "wyag"：init、add、commit、log、checkout、tag 等，兼容真实 Git 仓库。教程本身的提交就是用 wyag 完成的。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Git 对象模型</span>
|
||
<span class="learn-tag">SHA-1 内容寻址</span>
|
||
<span class="learn-tag">Refs/分支/HEAD</span>
|
||
<span class="learn-tag">Index 暂存区</span>
|
||
<span class="learn-tag">Tree/Commit 序列化</span>
|
||
<span class="learn-tag">Merkle DAG</span>
|
||
<span class="learn-tag">.gitignore</span>
|
||
</div>
|
||
<div class="quality-note">从底层重新实现 Git，最终产物兼容真实 Git 仓库。<strong>理解 Git 内部原理的最佳教程。</strong>2026 年 2 月仍在更新。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>每天用 Git 但被 Git 心智模型困惑的开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Thibault Polge</span>
|
||
<span class="card-links"><a href="https://github.com/thblt/write-yourself-a-git" target="_blank">GitHub</a><a href="https://wyag.thb.lt/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hecto -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://www.flenker.blog/hecto/" target="_blank">Hecto: Build your own text editor in Rust</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Rust</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">15-25h</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
~3000 行 Rust 的终端文本编辑器：文件读写、搜索、语法高亮。kilo 编辑器的 Rust 重写。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">Rust 所有权/借用</span>
|
||
<span class="learn-tag">终端 raw mode</span>
|
||
<span class="learn-tag">文本缓冲区</span>
|
||
<span class="learn-tag">文件 I/O</span>
|
||
<span class="learn-tag">增量搜索</span>
|
||
<span class="learn-tag">语法高亮</span>
|
||
</div>
|
||
<div class="quality-note">通过造真实项目学 Rust，而非抽象练习。后期章节先给任务再给答案，鼓励主动学习。2025 年 5 月更新。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>想通过实战项目学 Rust 的其他语言开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Philipp Flenker</span>
|
||
<span class="card-links"><a href="https://www.flenker.blog/hecto/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== AI/ML ===== -->
|
||
<div class="section" id="ai">
|
||
<h2 class="section-title"><span class="section-icon">🤖</span> AI / 机器学习</h2>
|
||
|
||
<!-- Karpathy -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://www.youtube.com/playlist?list=PLAqhIrjkxbuWI23v9cThsA9GvCAUhRvKZ" target="_blank">Neural Networks: Zero to Hero</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python (PyTorch)</span>
|
||
<span class="badge badge-diff-easy">入门-中级</span>
|
||
<span class="badge badge-time">25-30h</span>
|
||
<span class="badge badge-stars">21.1k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
Micrograd（自动微分引擎）、Makemore（字符级语言模型）、GPT from scratch、BPE Tokenizer。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">反向传播原理</span>
|
||
<span class="learn-tag">语言模型</span>
|
||
<span class="learn-tag">MLP 架构</span>
|
||
<span class="learn-tag">BatchNorm</span>
|
||
<span class="learn-tag">手动反向传播</span>
|
||
<span class="learn-tag">Transformer 注意力</span>
|
||
<span class="learn-tag">BPE 分词</span>
|
||
</div>
|
||
<div class="quality-note"><strong>业界神作。</strong>Andrej Karpathy（前 Tesla AI 总监、OpenAI 创始成员）讲解。前置要求极低：基础 Python + 模糊的高中数学。Jupyter notebook 全提供。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>ML 零基础但会 Python 的人；想建立神经网络深层直觉的自学开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Andrej Karpathy · 前 Tesla AI 总监 / OpenAI 创始成员</span>
|
||
<span class="card-links"><a href="https://github.com/karpathy/nn-zero-to-hero" target="_blank">GitHub</a><a href="https://www.youtube.com/playlist?list=PLAqhIrjkxbuWI23v9cThsA9GvCAUhRvKZ" target="_blank">YouTube</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LLMs from Scratch -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://github.com/rasbt/LLMs-from-scratch" target="_blank">Build a Large Language Model (From Scratch)</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">Python (PyTorch)</span>
|
||
<span class="badge badge-diff-mid">中级</span>
|
||
<span class="badge badge-time">60-80h</span>
|
||
<span class="badge badge-stars">89.4k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
完整的 ChatGPT 级 LLM：分词器、注意力机制、GPT 架构、预训练、分类微调、指令微调。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">LLM 架构</span>
|
||
<span class="learn-tag">分词/Tokenization</span>
|
||
<span class="learn-tag">Self-Attention</span>
|
||
<span class="learn-tag">Multi-Head Attention</span>
|
||
<span class="learn-tag">GPT 实现</span>
|
||
<span class="learn-tag">预训练</span>
|
||
<span class="learn-tag">分类微调</span>
|
||
<span class="learn-tag">指令微调</span>
|
||
<span class="learn-tag">LoRA</span>
|
||
</div>
|
||
<div class="quality-note"><strong>GitHub 上最受欢迎的 ML 教程之一。</strong>Manning 出版社配套书籍。笔记本电脑即可运行，无需 GPU。附 17+ 小时视频课程。Bonus 章节覆盖 Llama/Qwen/Gemma。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>会 Python 想深入理解 LLM（不只是调 API）的开发者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Sebastian Raschka · ML 研究者、畅销书作者</span>
|
||
<span class="card-links"><a href="https://github.com/rasbt/LLMs-from-scratch" target="_blank">GitHub</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ray Tracing -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title"><a href="https://raytracing.github.io/" target="_blank">Ray Tracing in One Weekend (系列)</a></div>
|
||
<div class="badges">
|
||
<span class="badge badge-lang">C++</span>
|
||
<span class="badge badge-diff-easy">入门-中级</span>
|
||
<span class="badge badge-time">8-12h (Book 1) / 40-60h (全三册)</span>
|
||
<span class="badge badge-stars">10.3k Stars</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-build">
|
||
<div class="card-build-label">你会造出什么</div>
|
||
光线追踪渲染器：漫反射/金属/电介质材质、景深、纹理、体积雾、BVH 加速、蒙特卡洛积分。
|
||
</div>
|
||
<div class="learn-list">
|
||
<span class="learn-tag">光线-球体相交</span>
|
||
<span class="learn-tag">抗锯齿</span>
|
||
<span class="learn-tag">材质系统</span>
|
||
<span class="learn-tag">景深/运动模糊</span>
|
||
<span class="learn-tag">纹理/Perlin 噪声</span>
|
||
<span class="learn-tag">BVH 加速结构</span>
|
||
<span class="learn-tag">蒙特卡洛方法</span>
|
||
</div>
|
||
<div class="quality-note"><strong>图形学入门经典。</strong>三册渐进深入，CC0 公共领域许可。Peter Shirley（图形学教授）将多年教学浓缩为最易懂的光线追踪入门。能生成照片级真实感图像。</div>
|
||
<div class="suitable-box"><strong>适合：</strong>对图形学好奇的人、游戏开发者、想要有视觉成就感的 C++ 学习者。</div>
|
||
<div class="card-footer">
|
||
<span class="card-author">Peter Shirley, Steve Hollasch, Trevor David Black</span>
|
||
<span class="card-links"><a href="https://github.com/RayTracing/raytracing.github.io" target="_blank">GitHub</a><a href="https://raytracing.github.io/" target="_blank">在线阅读</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 优质代码仓库 ===== -->
|
||
<div class="section" id="repos">
|
||
<h2 class="section-title"><span class="section-icon">📦</span> 优质代码仓库（可克隆学习）</h2>
|
||
<p style="color:var(--text2);margin-bottom:1.5rem;">以下是 build-your-own-x 中有<strong>真正高质量代码</strong>的仓库，不只是文章链接，而是可以 clone 下来研读的项目。</p>
|
||
|
||
<table class="repo-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Tier</th>
|
||
<th>仓库</th>
|
||
<th>Stars</th>
|
||
<th>语言</th>
|
||
<th>造什么</th>
|
||
<th>一句话评价</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="tier-label tier-1">T1</span></td>
|
||
<td><a href="https://github.com/trekhleb/javascript-algorithms" target="_blank">trekhleb/javascript-algorithms</a></td>
|
||
<td>196k</td>
|
||
<td>JavaScript</td>
|
||
<td>70+ 算法 + 15+ 数据结构</td>
|
||
<td class="verdict">GitHub 最受欢迎的教育仓库，每个算法有 README、BigO 分析、测试</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-1">T1</span></td>
|
||
<td><a href="https://github.com/rasbt/LLMs-from-scratch" target="_blank">rasbt/LLMs-from-scratch</a></td>
|
||
<td>89.4k</td>
|
||
<td>Python</td>
|
||
<td>完整 GPT-like LLM</td>
|
||
<td class="verdict">"造 LLM" 的权威资源，书级质量，笔记本可跑</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-1">T1</span></td>
|
||
<td><a href="https://github.com/ssloy/tinyrenderer" target="_blank">ssloy/tinyrenderer</a></td>
|
||
<td>23.4k</td>
|
||
<td>C++</td>
|
||
<td>~500 行 3D 软件渲染器</td>
|
||
<td class="verdict">14 课详解，零依赖。理解 OpenGL/Vulkan 底层的最佳项目</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-2">T2</span></td>
|
||
<td><a href="https://github.com/cfenollosa/os-tutorial" target="_blank">cfenollosa/os-tutorial</a></td>
|
||
<td>30.3k</td>
|
||
<td>C / ASM</td>
|
||
<td>Bootloader 到 Kernel + Shell</td>
|
||
<td class="verdict">25 个小课（每课 5-15 分钟），"造 OS" 最佳入门</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-2">T2</span></td>
|
||
<td><a href="https://github.com/p8952/bocker" target="_blank">p8952/bocker</a></td>
|
||
<td>12.6k</td>
|
||
<td>Shell</td>
|
||
<td>100 行 Bash 的 Docker</td>
|
||
<td class="verdict">每行代码顿悟密度最高的项目，2-4 小时搞懂容器</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-2">T2</span></td>
|
||
<td><a href="https://github.com/kanaka/mal" target="_blank">kanaka/mal (Make a Lisp)</a></td>
|
||
<td>10.6k</td>
|
||
<td>89 种语言</td>
|
||
<td>Lisp 解释器（11 步到自举）</td>
|
||
<td class="verdict">用任何你想学的语言造同一个解释器，独一无二的多语言教育项目</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-2">T2</span></td>
|
||
<td><a href="https://github.com/hexacta/didact" target="_blank">hexacta/didact</a></td>
|
||
<td>6.7k</td>
|
||
<td>JavaScript</td>
|
||
<td>React 克隆（Fiber + Hooks）</td>
|
||
<td class="verdict">"造 React" 的配套代码，commit diff 展示演进过程</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-3">T3</span></td>
|
||
<td><a href="https://github.com/jamesroutley/write-a-hash-table" target="_blank">jamesroutley/write-a-hash-table</a></td>
|
||
<td>4.3k</td>
|
||
<td>C</td>
|
||
<td>~200 行哈希表</td>
|
||
<td class="verdict">7 章 1-2 小时，最佳下午茶项目</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-3">T3</span></td>
|
||
<td><a href="https://github.com/Fewbytes/rubber-docker" target="_blank">Fewbytes/rubber-docker</a></td>
|
||
<td>3.2k</td>
|
||
<td>Python / C</td>
|
||
<td>容器引擎（Workshop 格式）</td>
|
||
<td class="verdict">比 bocker 更深入，有讲义和分级练习</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-3">T3</span></td>
|
||
<td><a href="https://github.com/conradoqg/naivecoin" target="_blank">conradoqg/naivecoin</a></td>
|
||
<td>1.3k</td>
|
||
<td>JavaScript</td>
|
||
<td>~1500 行加密货币</td>
|
||
<td class="verdict">有 REST API、钱包、挖矿、P2P，"造币" 最佳实战</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tier-label tier-3">T3</span></td>
|
||
<td><a href="https://github.com/jserv/mini-arm-os" target="_blank">jserv/mini-arm-os</a></td>
|
||
<td>1.2k</td>
|
||
<td>C / ASM</td>
|
||
<td>ARM 最小 OS（抢占式多任务）</td>
|
||
<td class="verdict">嵌入式/ARM 方向的 OS 入门，支持 QEMU 和真实硬件</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ===== 总结 ===== -->
|
||
<div class="section" id="summary">
|
||
<h2 class="section-title"><span class="section-icon">💡</span> 总结与建议</h2>
|
||
|
||
<div class="card" style="cursor:default;">
|
||
<h3 style="color:var(--accent);margin-bottom:1rem;">快速入门路线（总时间 < 20h）</h3>
|
||
<table class="repo-table">
|
||
<tr><td style="width:30%">1. The Super Tiny Compiler</td><td>1-2h</td><td>理解编译器三阶段</td></tr>
|
||
<tr><td>2. Write your Own VM (LC-3)</td><td>5-10h</td><td>理解 CPU 执行原理</td></tr>
|
||
<tr><td>3. Docker in 100 lines (bocker)</td><td>2-4h</td><td>理解容器本质</td></tr>
|
||
<tr><td>4. Norvig's Lispy</td><td>3-5h</td><td>理解编程语言原理</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card" style="cursor:default;">
|
||
<h3 style="color:var(--accent2);margin-bottom:1rem;">深度学习路线（每个 1-2 周）</h3>
|
||
<table class="repo-table">
|
||
<tr><td style="width:30%">1. Crafting Interpreters</td><td>80-120h</td><td>编程语言实现圣经</td></tr>
|
||
<tr><td>2. Nand2Tetris</td><td>100-200h</td><td>从 NAND 门到俄罗斯方块</td></tr>
|
||
<tr><td>3. LLMs from Scratch</td><td>60-80h</td><td>从零造 LLM</td></tr>
|
||
<tr><td>4. Browser Engineering</td><td>80-120h</td><td>从零造浏览器</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card" style="cursor:default;">
|
||
<h3 style="color:var(--green);margin-bottom:1rem;">核心结论</h3>
|
||
<ul style="color:var(--text2);line-height:2;">
|
||
<li>build-your-own-x 的 500+ 链接中，<strong>真正高质量的约 30 个</strong>（本页全部列出）</li>
|
||
<li>最有价值的不是链接集合本身，而是其中<strong>少数经过社区反复验证的经典教程</strong></li>
|
||
<li>优质代码仓库 11 个，其中 T1 级别 3 个（javascript-algorithms / LLMs-from-scratch / tinyrenderer）</li>
|
||
<li>如果只选一个做：想理解计算机选 <strong>Nand2Tetris</strong>，想理解 AI 选 <strong>Karpathy 系列</strong>，想学编程语言选 <strong>Crafting Interpreters</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="text-align:center;padding:3rem;color:var(--text2);font-size:.85rem;border-top:1px solid var(--border);">
|
||
从 build-your-own-x (484k stars) 精选 | 研究日期：2026-03-28
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|