PageSourceSearch

https://rualc.vercel.app/note/frontend-development-cookbook

html rualc.vercel.app collected 2026-10-03 07:38:38 UTC 41,562 bytes, 49 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>我的 Web 前端开发知识体系 (2022) | 前端指南</title>
7    <meta name="generator" content="VuePress 1.9.7">
8    <link rel="icon" type="image/jpg" href="/js-nation-square-blue.png">
9    <meta name="description" content="一个前端工程师的自我修养">
10    <meta name="keywords" content="computer-science,checklist,roadmap,study,frontend,notes,guide,developer,awesome-list,engineer">
11    
12    <link rel="preload" href="/assets/css/0.styles.1fddf40a.css" as="style"><link rel="preload" href="/assets/js/app.c64cd934.js" as="script"><link rel="preload" href="/assets/js/2.04549dbd.js" as="script"><link rel="preload" href="/assets/js/60.654d7fcb.js" as="script"><link rel="prefetch" href="/assets/js/10.0102fe71.js"><link rel="prefetch" href="/assets/js/11.1989b1e0.js"><link rel="prefetch" href="/assets/js/12.e2f48d41.js"><link rel="prefetch" href="/assets/js/13.c4569b8f.js"><link rel="prefetch" href="/assets/js/14.1ec0b6f6.js"><link rel="prefetch" href="/assets/js/15.5cd09c1a.js"><link rel="prefetch" href="/assets/js/16.08bb086d.js"><link rel="prefetch" href="/assets/js/17.1004d89a.js"><link rel="prefetch" href="/assets/js/18.55d290e7.js"><link rel="prefetch" href="/assets/js/19.0fb46784.js"><link rel="prefetch" href="/assets/js/20.0ba5db39.js"><link rel="prefetch" href="/assets/js/21.144395a4.js"><link rel="prefetch" href="/assets/js/22.c484d808.js"><link rel="prefetch" href="/assets/js/23.d836a8bf.js"><link rel="prefetch" href="/assets/js/24.300a5196.js"><link rel="prefetch" href="/assets/js/25.714c8f44.js"><link rel="prefetch" href="/assets/js/26.33671622.js"><link rel="prefetch" href="/assets/js/27.5e10aefa.js"><link rel="prefetch" href="/assets/js/28.0297723b.js"><link rel="prefetch" href="/assets/js/29.b5f5f2c3.js"><link rel="prefetch" href="/assets/js/3.26aba41d.js"><link rel="prefetch" href="/assets/js/30.2f800eb7.js"><link rel="prefetch" href="/assets/js/31.299f1715.js"><link rel="prefetch" href="/assets/js/32.067030e0.js"><link rel="prefetch" href="/assets/js/33.1e948242.js"><link rel="prefetch" href="/assets/js/34.3c8a47e9.js"><link rel="prefetch" href="/assets/js/35.ef40b2ee.js"><link rel="prefetch" href="/assets/js/36.37a19e58.js"><link rel="prefetch" href="/assets/js/37.b35d04ce.js"><link rel="prefetch" href="/assets/js/38.5d7fb190.js"><link rel="prefetch" href="/assets/js/39.bb7e0dec.js"><link rel="prefetch" href="/assets/js/4.b290b339.js"><link rel="prefetch" href="/assets/js/40.7b89fc4f.js"><link rel="prefetch" href="/assets/js/41.454c6ff2.js"><link rel="prefetch" href="/assets/js/42.6299e858.js"><link rel="prefetch" href="/assets/js/43.4fe639ba.js"><link rel="prefetch" href="/assets/js/44.d1eaff8e.js"><link rel="prefetch" href="/assets/js/45.1d532812.js"><link rel="prefetch" href="/assets/js/46.dffcdb67.js"><link rel="prefetch" href="/assets/js/47.8baad108.js"><link rel="prefetch" href="/assets/js/48.147a515e.js"><link rel="prefetch" href="/assets/js/49.352e5241.js"><link rel="prefetch" href="/assets/js/5.65f15598.js"><link rel="prefetch" href="/assets/js/50.652e719b.js"><link rel="prefetch" href="/assets/js/51.616da4c9.js"><link rel="prefetch" href="/assets/js/52.7ac1b6aa.js"><link rel="prefetch" href="/assets/js/53.6f43ff4d.js"><link rel="prefetch" href="/assets/js/54.cf948dc1.js"><link rel="prefetch" href="/assets/js/55.ef7696f3.js"><link rel="prefetch" href="/assets/js/56.1c2dcaf1.js"><link rel="prefetch" href="/assets/js/57.a50a29b1.js"><link rel="prefetch" href="/assets/js/58.b33e251b.js"><link rel="prefetch" href="/assets/js/59.51ed6677.js"><link rel="prefetch" href="/assets/js/6.68cd07da.js"><link rel="prefetch" href="/assets/js/7.05b4d547.js"><link rel="prefetch" href="/assets/js/8.a3f84ca0.js"><link rel="prefetch" href="/assets/js/9.583f41d9.js">
13    <link rel="stylesheet" href="/assets/css/0.styles.1fddf40a.css">
14  </head>
15  <body class="theme-mode-light">
16    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon">
16<path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/js-nation-square-blue.png" alt="前端指南" class="logo"> <span class="site-name can-hide">前端指南</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note/frontend-development-cookbook.html" class="nav-link">指南</a></div><div class="nav-item"><a href="/study/where-do-i-learn-from/" class="nav-link">资源</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码训练" class="dropdown-title"><!----> <span class="title" style="display:;">代码训练</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/seognil-study/leetcode" target="_blank" rel="noopener noreferrer" class="nav-link external">
17  刷力扣
18  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/seognil-study/learn-by-doing" target="_blank" rel="noopener noreferrer" class="nav-link external">
19  手写题
20  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="归档" class="dropdown-title"><a href="/archives/" class="link-title">归档</a> <span class="title" style="display:none;">归档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><a href="/about/me" class="link-title">关于</a> <span class="title" style="display:none;">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/about/me/" class="nav-link">关于我</a></li><li class="dropdown-item"><!----> <a href="/about/the-site/" class="nav-link">关于本站</a></li></ul></div></div> <a href="https://github.com/seognil/fe-foundation" target="_blank" rel="noopener noreferrer" class="repo-link">
21    GitHub
22    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
22 <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://avatars.githubusercontent.com/u/5526096?s=400"> <div class="blogger-info"><h3>Seognil LC</h3> <span>略懂点前端</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/note/frontend-development-cookbook.html" class="nav-link">指南</a></div><div class="nav-item"><a href="/study/where-do-i-learn-from/" class="nav-link">资源</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码训练" class="dropdown-title"><!----> <span class="title" style="display:;">代码训练</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/seognil-study/leetcode" target="_blank" rel="noopener noreferrer" class="nav-link external">
23  刷力扣
24  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/seognil-study/learn-by-doing" target="_blank" rel="noopener noreferrer" class="nav-link external">
25  手写题
26  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="归档" class="dropdown-title"><a href="/archives/" class="link-title">归档</a> <span class="title" style="display:none;">归档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><a href="/about/me" class="link-title">关于</a> <span class="title" style="display:none;">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/about/me/" class="nav-link">关于我</a></li><li class="dropdown-item"><!----> <a href="/about/the-site/" class="nav-link">关于本站</a></li></ul></div></div> <a href="https://github.com/seognil/fe-foundation" target="_blank" rel="noopener noreferrer" class="repo-link">
27    GitHub
28    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>我的 Web 前端开发知识体系 (2022)</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/note/frontend-development-cookbook/#xie-zai-qian-mian" class="sidebar-link">写在前面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#roadmap-zi-yuan-he-ji-shu-qu-shi" class="sidebar-link">Roadmap 资源和技术趋势</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#wo-de-suo-yin" class="sidebar-link">我的索引</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#ji-ben-kai-fa-huan-jing" class="sidebar-link">基本开发环境</a></li></ul></li><li><a href="/note/frontend-development-cookbook/#web-qian-duan" class="sidebar-link">Web 前端</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#qian-duan-ji-shu-ji-chu" class="sidebar-link">前端技术基础</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#javascript" class="sidebar-link">JavaScript</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#npm-he-gong-ju" class="sidebar-link">npm 和工具</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#react-jiao-shou-jia" class="sidebar-link">React/脚手架</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#gui-fan-hua" class="sidebar-link">规范化</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#zhuang-tai-guan-li-gong-ju" class="sidebar-link">状态管理工具</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#css-gong-ju" class="sidebar-link">CSS 工具</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#ce-shi" class="sidebar-link">测试</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#bu-shu" class="sidebar-link">部署</a></li></ul></li><li><a href="/note/frontend-development-cookbook/#qi-ta" class="sidebar-link">其他</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#ji-suan-ji-ke-xue" class="sidebar-link">计算机科学</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#shi-yong-gong-ju" class="sidebar-link">实用工具</a></li><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#za-tan" class="sidebar-link">杂谈</a></li></ul></li><li><a href="/note/frontend-development-cookbook/#ni-ke-yi-kan-shi-me-da-lao" class="sidebar-link">你可以看什么大佬</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/note/frontend-development-cookbook/#phodal-xie-de-xi-lie-wen-zhang" class="sidebar-link">(Phodal 写的系列文章)</a></li></ul></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-6"><div class="articleInfo-wrap" data-v-e1efabd0><div class="articleInfo" data-v-e1efabd0><ul class="breadcrumbs" data-v-e1efabd0><li data-v-e1efabd0><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-e1efabd0></a></li> <li data-v-e1efabd0><a href="/categories/?category=note" title="分类" data-v-e1efabd0>note</a></li></ul> <div class="info" data-v-e1efabd0><div title="作者" class="author iconfont icon-touxiang" data-v-e1efabd0><a href="https://github.com/seognil" target="_blank" title="作者" class="beLink" data-v-e1efabd0>Seognil LC</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-e1efabd0><a href="javascript:;" data-v-e1efabd0>2022-01-29</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rz
28SoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">我的 Web 前端开发知识体系 (2022)<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h1 class="cookbook-page">我的 Web 前端开发知识体系 (2022)</h1> <hr> <h2 id="xie-zai-qian-mian"><a href="#xie-zai-qian-mian" class="header-anchor">#</a> 写在前面</h2> <h3 id="roadmap-zi-yuan-he-ji-shu-qu-shi"><a href="#roadmap-zi-yuan-he-ji-shu-qu-shi" class="header-anchor">#</a> Roadmap 资源和技术趋势</h3> <ul><li><a href="https://risingstars.js.org/" target="_blank" rel="noopener noreferrer">JavaScript Rising Stars<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">Frontend Developer Roadmap<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://stateofjs.com/" target="_blank" rel="noopener noreferrer">State Of JS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://stateofcss.com/" target="_blank" rel="noopener noreferrer">State Of CSS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.youtube.com/watch?v=EqzUcMzfV1w" target="_blank" rel="noopener noreferrer">Web Development In 2022 - A Practical Guide<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
28 <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.youtube.com/playlist?list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8" target="_blank" rel="noopener noreferrer">Programming &amp; Web Development Crash Courses - Traversy Media<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="wo-de-suo-yin"><a href="#wo-de-suo-yin" class="header-anchor">#</a> 我的索引</h3> <ul><li><a href="/workspace/awesome-tools">装了啥</a></li> <li><a href="/study/where-do-i-learn-from">我都从哪学习</a></li> <li><a href="/study/my-reading-list/">看了啥</a></li> <li><a href="/study/crash-course-study-skills">学习技巧</a></li> <li><a href="/study/using-english">英语</a></li></ul> <h3 id="ji-ben-kai-fa-huan-jing"><a href="#ji-ben-kai-fa-huan-jing" class="header-anchor">#</a> 基本开发环境</h3> <ul><li><a href="/workspace/mac">Mac</a></li> <li><a href="/workspace/chrome">Chrome</a></li> <li><a href="/workspace/vscode">VS Code</a></li></ul> <h2 id="web-qian-duan"><a href="#web-qian-duan" class="header-anchor">#</a> Web 前端</h2> <ul><li><a href="/frontend/frontend-hardcore-overview">硬核前端(劝退篇)</a></li></ul> <h3 id="qian-duan-ji-shu-ji-chu"><a href="#qian-duan-ji-shu-ji-chu" class="header-anchor">#</a> 前端技术基础</h3> <ul><li><a href="/frontend/html">HTML</a></li> <li><a href="/frontend/css">CSS</a></li> <li><a href="/cs/javascript-language-basic">JavaScript</a></li> <li><a href="/cs/typescript-language-basic">TypeScript</a></li> <li><a href="/frontend/nodejs-basic">Node.js</a></li></ul> <h3 id="javascript"><a href="#javascript" class="header-anchor">#</a> JavaScript</h3> <ul><li><a href="/frontend/javascript-foundation">JavaScript 学习指南 *</a></li> <li><a href="/frontend/introduction-to-javascript">JavaScript 简介</a></li> <li><a href="/frontend/how-to-run-javascript-code">运行 JavaScript 代码的十几种方式</a></li> <li><a href="/frontend/javascript-advanced">JavaScript 进阶指南 *</a></li> <li><a href="/frontend/syntactic-sugar-in-javascript">语法糖、操作符、关键字、特性</a></li> <li><a href="/frontend/javascript-modules">前端模块化</a></li> <li><a href="/frontend/javascript-regular-expression">正则表达式 学习指南</a></li> <li><a href="/frontend/javascript-foundation-legacy-version">JS Foundation *</a></li></ul> <h3 id="npm-he-gong-ju"><a href="#npm-he-gong-ju" class="header-anchor">#</a> npm 和工具</h3> <ul><li><a href="/frontend/introduction-to-npm">npm</a></li> <li><a href="/frontend/speeding-up-npm-install">用 Proxy 进一步提高 npm 安装速度</a></li> <li><a href="/frontend/set-up-a-private-npm-registry-using-verdaccio">使用 verdaccio 搭建私有 npm 仓库</a></li></ul> <h3 id="react-jiao-shou-jia"><a href="#react-jiao-shou-jia" class="header-anchor">#</a> React/脚手架</h3> <ul><li><a href="/frontend/react-hooks">React</a></li> <li>Vite</li> <li>Next.js</li></ul> <h3 id="gui-fan-hua"><a href="#gui-fan-hua" class="header-anchor">#</a> 规范化</h3> <ul><li>ES Lint</li> <li>Prettier</li> <li>tsconfig.json</li> <li>Husky</li></ul> <h3 id="zhuang-tai-guan-li-gong-ju"><a href="#zhuang-tai-guan-li-gong-ju" class="header-anchor">#</a> 状态管理工具</h3> <ul><li>Recoil.js</li> <li>Mobx</li> <li><a href="/frontend/rxjs">RxJS</a></li> <li><a href="/frontend/redux">Redux</a></li></ul> <h3 id="css-gong-ju"><a href="#css-gong-ju" class="header-anchor">#</a> CSS 工具</h3> <ul><li>Tailwind / Twind</li> <li>@emotion/css</li></ul> <h3 id="ce-shi"><a href="#ce-shi" class="header-anchor">#</a> 测试</h3> <ul><li>Playwright</li> <li><a href="/frontend/jest">Jest</a></li> <li><a href="/frontend/testing-library">testing-library</a></li> <li><a href="/frontend/cypress">Cypress</a></li></ul> <h3 id="bu-shu"><a href="#bu-shu" class="header-anchor">#</a> 部署</h3> <ul><li>Github</li> <li>Vercel</li></ul> <h2 id="qi-ta"><a href="#qi-ta" class="header-anchor">#</a> 其他</h2> <h3 id="ji-suan-ji-ke-xue"><a href="#ji-suan-ji-ke-xue" class="header-anchor">#</a> 计算机科学</h3> <ul><li><a href="/cs/crash-course-computer-science">计算机科学</a></li> <li><a href="/cs/introduction-to-functional-programming">函数式编程</a></li> <li>数据结构/算法</li> <li>设计模式</li></ul> <h3 id="shi-yong-gong-ju"><a href="#shi-yong-gong-ju" class="header-anchor">#</a> 实用工具</h3> <ul><li><a href="/cs/git">Git</a></li> <li><a href="/cs/markdown">Markdown</a></li> <li><a href="/workspace/introduction-to-terminal">终端</a></li> <li><a href="/workspace/terminal-settings">打造趁手的终端</a></li> <li><a href="/cs/python-language-basic">Python</a></li></ul> <h3 id="za-tan"><a href="#za-tan" class="header-anchor">#</a> 杂谈</h3> <ul><li><a href="/misc/gaming-set/">游戏环境研究笔记(2022-01)</a></li> <li><a href="/workspace/my-video-player-shortcuts">用快捷键控制视频播放</a></li> <li><a href="/cs/count-lines-of-code">代码行数统计工具小测</a></li> <li><a href="/misc/linux-basic-security">Ubuntu 服务器基本防护</a></li> <li><a href="/misc/clean-a-keyboard">如何清洁机械键盘</a></li> <li><a href="/about/the-guild">关于学习指南系列</a></li> <li><a href="/study/dont-waste-your-time-and-money">杂谈:你可学点好吧</a></li> <li><a href="/study/why-we-need-to-study">杂谈:我们为什么需要读书和学习</a></li> <li><a href="/study/study-fortune">关于学习的鸡汤</a></li></ul> <h2 id="ni-ke-yi-kan-shi-me-da-lao"><a href="#ni-ke-yi-kan-shi-me-da-lao" class="header-anchor">#</a> 你可以看什么大佬</h2> <ul><li><a href="https://github.com/antfu" target="_blank" rel="noopener noreferrer">Anthony Fu<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
28<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/egoist" target="_blank" rel="noopener noreferrer">EGOIST<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/sindresorhus" target="_blank" rel="noopener noreferrer">Sindre Sorhus<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="phodal-xie-de-xi-lie-wen-zhang"><a href="#phodal-xie-de-xi-lie-wen-zhang" class="header-anchor">#</a> (Phodal 写的系列文章)</h3> <ul><li><a href="https://www.phodal.com/about/" target="_blank" rel="noopener noreferrer">黄峰达(Phodal Huang) 是谁<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <ul><li><a href="http://ideabook.phodal.com/" target="_blank" rel="noopener noreferrer">Phodal's Idea 实战指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://github.phodal.com/" target="_blank" rel="noopener noreferrer">GitHub 漫游指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://growth.ren/" target="_blank" rel="noopener noreferrer">Growth - an app to help you Be Awesome Developer<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
28 <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://growth.phodal.com/" target="_blank" rel="noopener noreferrer">Growth: 全栈增长工程师指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://growth-in-action.phodal.com/" target="_blank" rel="noopener noreferrer">Growth: 全栈增长工程师实战<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://repractise.phodal.com/" target="_blank" rel="noopener noreferrer">RePractise<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://ued.party/" target="_blank" rel="noopener noreferrer">我的职业是前端工程师<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://serverless.ink/" target="_blank" rel="noopener noreferrer">Serverless 应用开发指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://phodal.github.io/make/" target="_blank" rel="noopener noreferrer">写给软件工程师看的硬件编程指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://microfrontends.cn/" target="_blank" rel="noopener noreferrer">Thinking in Microfrontend (微前端的那些事儿)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
28<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://migration.ink/" target="_blank" rel="noopener noreferrer">系统重构与迁移指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://phodal.github.io/booktree/" target="_blank" rel="noopener noreferrer">Developer 进阶书单<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=awesome" title="标签">#awesome</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">Jan 29, 2022 6:24 PM</span></div></div> <div class="page-nav-wapper"><!----> <!----></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/workspace/shell/"><div>
29            Linux Shell 快速入门笔记
30            <!----></div></a> <span class="date">11-18</span></dt></dl><dl><dd>02</dd> <dt><a href="/misc/gaming-set/"><div>
31            游戏环境研究笔记(2022-01)
32            <!----></div></a> <span class="date">01-16</span></dt></dl><dl><dd>03</dd> <dt><a href="/workspace/mac/"><div>
33            Mac 环境(M1 + Monterey)
34            <!----></div></a> <span class="date">11-15</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="https://github.com/seognil" title="GitHub" target="_blank" class="iconfont fab fa-github"></a><a href="https://steamhunters.com/id/seognil/games?sort=completionstate" title="Steam" target="_blank" class="iconfont fab fa-steam"></a><a href="https://psnprofiles.com/seognil?order=percent" title="PSN" target="_blank" class="iconfont fab fa-playstation"></a><a href="https://www.trueachievements.com/gamer/seognil/games#" title="Xbox" target="_blank" class="iconfont fab fa-xbox"></a></div> 
35  Theme by
36  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
37    | Copyright © 2019-2022
38    <span>Seognil LC | <a href="https://github.com/seognil/fe-foundation/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
39          跟随系统
40        </li><li class="iconfont icon-rijianmoshi">
41          浅色模式
42        </li><li class="iconfont icon-yejianmoshi">
43          深色模式
44        </li><li class="iconfont icon-yuedu">
45          阅读模式
46        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"></div></div>
47    
47<script src="/assets/js/app.c64cd934.js" defer></script>
47<script src="/assets/js/2.04549dbd.js" defer></script>
47<script src="/assets/js/60.654d7fcb.js" defer></script>
47
48  </body>
49</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.