blog icon indicating copy to clipboard operation
blog copied to clipboard

I hope my content can help you. Now I focus on the front-end field, but I will also share what I see and feel in my limited time.✨✨

Article

本仓库已经沉淀了大量内容,为了方便检索,您可以通过以下几种方式进行搜索:

  • 使用 GitHub 自带的网页搜索,按下 T 键。
  • 使用 Sourcegraph.com 进行搜索。
  • 最近写的文章搜索站点
  • 将这个仓库克隆到本地,然后在仓库目录使用下面的命令。
grep -nri [搜索词] docs | cat --number

比如,搜索 CSS 相关内容。

grep -nri css docs | cat --number

后面新增的文章可能不会在 README.md 内更新。您可以通过上面分享的几种方式进行搜索。

学习说明

学习一门语言、相关工具、框架都从官方文档出发,它们都是最新、最完善的。

如果觉得文档看不下去或一些术语很难理解,可以先找一些大佬的文章、视频先入个门,回头在跟着文档刷一遍。

前端技术栈日新月异,大家加油吧。

Tips:本人也是一名前端小白,文章没啥深度,都是很基础的内容,不喜勿喷。

Canvas

  • 使用 toBlob 下载 Canvas API 生成的图像
  • 在 HTML canvas 绘制文本
  • 将 canvas 打印到 Data URL
  • 开始使用 Canvas

CSS

  • BEM 命令规范
  • BFC 及其应用
  • calc() 工作原理
  • CSS @Supports
  • CSS background 属性
  • CSS Bulma 框架
  • CSS content-visibility 属性 — 推迟内容渲染
  • CSS outline 属性
  • CSS Reset 与 Sprites
  • CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
  • CSS vertical-align 属性
  • CSS will-change 属性 — 优化渲染性能
  • CSS 单位及其需要注意的地方
  • CSS 实现文本溢出省略效果
  • CSS 盒模型
  • CSS 继承、级联和特异性
  • CSS 选择器
  • CSS 重置元素样式
  • display-none 与 [hidden] 的区别
  • Flex 布局
  • margin 与 padding 的区别
  • Normalize 和 Reset 的区别
  • PostCSS
  • SASS 预处理器
  • style='width**' 与 width='**'
  • 仅 CSS 添加暗黑模式
  • 仅使用 CSS 的打字机效果
  • 使用 CSS aspect-ratio 特性使 iframe 响应式缩放
  • 使用 CSS overscroll-behavior contain 来防止滚动链
  • 使用 CSS 创建一个三角形
  • 使用 Sass 默认参数的实用技巧
  • 获取动画 CSS 属性的值
  • 避免使用 CSS @import
  • 防止锚链接消失在粘性标题后面

CSS Layout

  • CSS Layout Note
  • CSS 多列(column)
  • CSS 居中
  • 三栏布局
  • 侧边栏布局
  • 卡片布局
  • 固定头部
  • 固定页脚
  • 图片和文字垂直居中

DOM

  • clientY 与 pageY 的区别
  • DOM 中 Element 与 Node 有何区别
  • DOMContentLoaded 与 load 的区别
  • HTMLCollection 和 NodeList 的区别
  • JavaScript 事件传播机制
  • keydown、keypress 和 keyup
  • key、keyCode 和 which
  • mouseenter 与 mouseover 的区别
  • naturalWidth 与 width 的区别
  • nodeName 与 tagName 的区别
  • parentElement 与 parentNode 的区别
  • stopImmediatePropagation 与 stopPropagation
  • 事件对象上的 currentTarget 与 target 属性
  • 从 DOM 中移除一个元素
  • 从 DOM 元素中移除所有子元素
  • 从给定文本中去除 HTML
  • 从页面中删除所有 CSS
  • 使用 closest 和 matches 方法来检测元素是否存在某选择器
  • 使用 JavaScript 从多个元素中添加和删除 CSS 类
  • 使用 JavaScript 将文本和 HTML 注入元素的四种不同方法
  • 使用 JavaScript 检查复选框是否被选中
  • 使用 JavaScript 禁用按钮
  • 使用 JavaScript 获取、设置和删除属性
  • 使用 JavaScript 获取和设置 CSS 属性的三种方法
  • 使用 URLSearchParams 在 JavaScript 中获取查询字符串值
  • 使页面在浏览器中可编辑
  • 切换 HTML 元素的类
  • 切换类
  • 创建一次性事件处理程序
  • 创建元素
  • 创建自己的查询选择器简写
  • 判断页面是否加载完成
  • 匹配元素
  • 区分鼠标左键和右键单击
  • 在指定元素的开头之前或末尾之后插入 HTML 字符串
  • 在指定的 DOM 元素中渲染给定的 DOM 树
  • 实现页面文本内容不可选中 — 不可复制
  • 将光标移动到输入框的末尾
  • 将给定的 CSS 代码注入当前文档
  • 打开模态时防止身体滚动
  • 显示指定的所有元素
  • 最小化 DOM 访问
  • 查找元素最近的相对位置祖先
  • 检查元素是否可滚动
  • 检查元素是否在视口中
  • 检查父元素是否包含子元素
  • 检查用户是否滚动到页面底部
  • 检查给定元素是否具有指定的类
  • 检测元素是否被聚焦
  • 添加样式
  • 滚动缩放
  • 统计当前页面出现的所有标签
  • 获取、设置和删除 data- 属性
  • 获取元素的 CSS 样式
  • 获取元素相对于另一个元素的位置
  • 获取元素相对于文档的位置
  • 获取或设置文档标题
  • 获取文档高度和宽度
  • 获取样式
  • 获取父级元素
  • 获取祖先元素
  • 获取选中的文本
  • 视口、设备和文档大小
  • 触发事件
  • 设置样式
  • 返回包含给定元素的所有同级的数组
  • 选择元素的文本内容
  • 通过给定的选择器获取最近的元素
  • 重置表单
  • 阻止事件的默认操作
  • 隐藏所有指定的元素

Git 和 Github

  • Git .gitignore
  • Git Amend
  • Git Cherry Pick
  • git clean 删除未跟踪的文件或目录
  • Git Diff
  • Git hooks
  • git init 和 git init --bare 有什么区别?
  • git pull 和 git fetch 的区别
  • Git status 的简短版本和不同的 --porcelain 模式
  • Git 与 SVN 的区别?
  • Git 常用配置和技巧
  • Git 日志
  • GitHub repo 快速筛选文件
  • 为不同的 GitHub 帐户使用多个 SSH 密钥
  • 从 GitHub 快速转至 VS Code
  • 删除 Git remote
  • 删除本地和远程 Git 分支
  • 同时推送到 2 个存储库并保持同步
  • 在 Git 和 GitHub 中重命名默认分支
  • 在不切换分支的情况下查看不同分支中的文件
  • 将本地 git 标签推送到 GitHub 上的远程仓库
  • 用于 GitHub markdown 和 Git 提交的 emoji 表情
  • 设置 Git SSH 密钥

HTML

  • alt 和 title 的区别
  • button 与 input type=“button” 的区别
  • Element 与 Node 的区别
  • Emmet VS Code 按键绑定以提升 HTML 编辑效率
  • Emmet 语法
  • HTML autocomplete 属性
  • HTML data 元素
  • HTML HTML5 基础知识 — 面试题专用
  • HTML iframe 标签
  • HTML picture 标签
  • HTML title 属性
  • HTML translate 属性
  • HTML 标准 FAQ
  • HTML 的实体编码(HTML Entity Encode)
  • label 标签触发相关 input 的状态
  • script 标签上的 defer 和 async 属性是什么?
  • Web 应用程序中的可访问性
  • 不要使用 submit 来命名提交按钮
  • 你可能不知道的几个常用的 HTML 属性
  • 使 abbr 元素适用于触摸屏、键盘和鼠标
  • 使用 HTML5 download 属性创建可下载的链接
  • 使用 loading 属性延迟加载图片
  • 使用 mark 元素突出显示文本
  • 使用 pattern 属性验证输入值
  • 使用 srcset 的响应式图像
  • 创建编号项目的降序列表
  • 在 Google 字体请求中加载给定字符
  • 在 HTML 中使用 ARIA 的规则
  • 在新标签页中打开所有链接
  • 在暗模式下更改 HTML 图片 URL
  • 在暗模式下更改网站图标
  • 在链接中使用 # 符号有什么用?
  • 声明式 Shadow DOM
  • 对于在新标签页中打开的链接,始终使用 ”noopener“ 或 ”noreferrer“
  • 对于特定于语言的样式,在 lang 属性选择器上使用 lang 伪类
  • 强制浏览器下载新的 favicon
  • 指定文档类型
  • 按时间间隔刷新页面(不使用 JavaScript)
  • 改造纯可折叠 details 元素
  • 显示日期、时间时使用 datetime 属性
  • 正确加载 SVG Favicon
  • 添加键盘快捷键
  • 省略 HTML 布尔属性的值
  • 确保输入字段只能上传图片
  • 结合 Google 字体请求
  • 自动断字依赖于已定义的文档语言
  • 过滤文件输入的文件类型
  • 避免使用 b、i、s 和 u 标签
  • 避免每个页面使用多个 h1 标签
  • 防止浏览器要求翻译
  • 隐式表单提交并不总是有效

JavaScript

  • ++value 和 value++ 的区别
  • 6 个常用的正则表达式
  • == 与 === 的区别
  • ArrayBuffer
  • ArrayBufferView
  • Blob 对象
  • Clipboard — 剪贴板操作
  • const、let 与 var 的区别
  • DataView 对象
  • delete obj.property 与 obj.property = undefined 的区别
  • encodeURI 与 encodeURIComponent 的区别
  • ES JSON 模块提案
  • ES2016(ES7)
  • ES2017(ES8)
  • ES2018(ES9)
  • ES2019(ES10)
  • ES2020(ES11)
  • ES2021(ES12)
  • for-in 和 for-of 的区别
  • in 运算符与 Object.hasOwnProperty 的区别
  • instanceof 与 typeof 的区别
  • JavaScript BOM 详解
  • JavaScript Eval
  • JavaScript JSON
  • JavaScript RegExp 对象 — 正则表达式
  • JavaScript V8 引擎
  • JavaScript 严格模式('use-strict')
  • JavaScript 中响应图像的最大宽度和高度
  • JavaScript 中定义函数的方法
  • JavaScript 中循环之间的差异
  • JavaScript 中清空数组
  • JavaScript 中的 Generator 和 Iterator
  • JavaScript 中的 setTimeout 和 setInterval 方法
  • JavaScript 中的 “this” 关键字
  • JavaScript 中的一等函数
  • JavaScript 中的函数和变量提升
  • JavaScript 中的异常处理
  • JavaScript 中的数字截断
  • JavaScript 中的模块发展方案
  • JavaScript 中的短路求值
  • JavaScript 中的自定义事件
  • JavaScript 中的虚值是什么?
  • JavaScript 中的闭包
  • JavaScript 函数方法 — call(),apply() 和 bind()
  • JavaScript 函数记忆
  • JavaScript 反转字符串
  • JavaScript 媒体查询
  • JavaScript 数组去重
  • JavaScript 数组方法总结
  • JavaScript 替换所有出现的字符串
  • JavaScript 的 AST 抽象语法树
  • JavaScript 立即执行函数表达式(IIFE)
  • JavaScript 纯函数
  • JavaScript 组合函数
  • JavaScript 获取字符串的最后一个字符
  • JavaScript 运算符总结
  • JavaScript 运行机制 — 事件循环(Event-Loop)
  • JavaScript 逗号运算符
  • JavaScript 链式调用
  • JavaScript 高阶函数
  • JS 作用域和作用域链
  • JSDoc
  • Map 与 WeakMap 的区别
  • null 与 undefined 的区别
  • Number() 和 parseInt() 的区别
  • Object 与 Map 的区别
  • Object.freeze() 与 Object.seal() 的区别
  • Object.getOwnPropertyNames() 与 Object.keys() 的区别
  • Object.is() 和 === 的区别
  • Object.keys、values、entries
  • object.property 和 object['property'] 的区别
  • slice 与 splice 的区别
  • string charAt(i) 和 string[i] 的区别
  • substr 和 substring 的区别
  • UMD
  • undefined 和 void 的区别
  • variable === undefined 与 typeof variable === undefined 的区别
  • 下载文件
  • 为 contenteditable 元素添加占位符
  • 为什么递归函数中返回结果为 undefined?
  • 从剪贴板粘贴图像
  • 从数组中删除重复的对象
  • 使用 CSS Transition 通过改变 Height 来展开收起元素
  • 使用 JavaScript 上传和处理不同的文件
  • 使用 JavaScript 添加时间
  • 使用 JavaScript 的 Date.toLocaleString() 方法格式化日期和时间
  • 使用 JavaScript 的 Intl.DateTimeFormat() 构造函数转换和格式化日期和时间
  • 使用 JavaScript 解构函数参数的方法
  • 使用 JS 进行 API 身份验证
  • 使用 Proxy 对象来健壮您的 JavaScript 不变性函数
  • 使用单选按钮切换 CSS 自定义属性
  • 使用焦点样式丰富用户体验
  • 创建可调整大小的拆分视图
  • 制作一个可调整大小的元素
  • 制作可拖动元素
  • 前端文件上传
  • 动态加载脚本文件
  • 匹配汉字
  • 取消已发送的网络请求
  • 变量赋值与原始对象可变性
  • 只允许输入特定字符
  • 图片懒加载
  • 在列表中拖放元素
  • 在单击位置显示自定义上下文菜单
  • 在浏览器中截屏
  • 在浏览器和 Node.js 中更精确地测量执行时间
  • 在解构 {} 时使用默认值防止错误
  • 如何从 JavaScript Date 对象获取月份名称?
  • 如何在 JavaScript 中交换两个变量?
  • 如何在 JavaScript 中使用管道(管道运算符)?
  • 如何在 JavaScript 中判断一个值是否为数组?
  • 如何在 JavaScript 中判断一个对象是否为空?
  • 如何在 JavaScript 中判断数组是否包含某个值?
  • 如何在 JavaScript 中合并两个数组?
  • 如何在 JavaScript 中对对象数组进行排序?
  • 如何在 JavaScript 中将字符串转换为数字
  • 如何在 JavaScript 中将数组拆分为一组数组
  • 如何在 JavaScript 中将数组转为对象
  • 如何在 JavaScript 中检查对象中是否存在某个属性?
  • 如何在 JavaScript 中检查数字是正数还是负数
  • 如何在 JavaScript 中添加千位逗号(每三位数)
  • 如何在 JavaScript 中获取对象的长度
  • 如何在 JavaScript 中选择或忽略对象的属性
  • 如何在 JavaScript 中遍历任意深度的对象
  • 如何在 JavaScript 对字符串去空
  • 如何在 JavaScript 将数字拆分为单个数字
  • 如何在用户停止输入 JavaScript 后执行函数
  • 如何翻转对象中的键和值?
  • 将 JSON 数据下载为文件
  • 将文件拖到元素上时突出显示该元素
  • 将表格导出到 csv
  • 平滑滚动到一个元素
  • 序列化表单数据
  • 打印图像
  • 拖动页面滚动
  • 数组中的最大值和最小值
  • 数组平均值与中位数
  • 数组扁平化
  • 无框架 Web 组件
  • 显示构造函数模式 — Revealing Constructor Pattern
  • 显示模块模式 — Revealing Module Pattern
  • 更改网站图标
  • 构造函数模式 — Constructor Pattern
  • 柯里化
  • 格式化输出 JSON
  • 检查数组是否已排序
  • 检查是否支持触摸事件
  • 检查页面的浏览器选项卡是否聚焦
  • 检测 JavaScript 字符串中的表情符号
  • 检测大写锁定是否开启
  • 检测是否为移动浏览器
  • 检测暗模式
  • 检测用户是否处于空闲状态或处于非活动状态
  • 浅拷贝和深拷贝
  • 滚动到页面顶部的多种实现
  • 点符号与括号符号
  • 特征检测、特征推断和使用 UA 字符串之间有什么区别?
  • 生成一个指定范围内的随机数
  • 类型化数组
  • 类构造函数与原型中的方法
  • 获取当前时间戳
  • 计算 textarea 的字符数
  • 调整图像大小
  • 调整文本框的宽度以自动适应其内容
  • 过滤并排序字符串列表
  • 重复字符串的多种方法
  • 重定向到另一个网页

Linux

  • bash 中的历史命令快捷方式
  • Bash 常用快捷键
  • curl -fsSL
  • curl 和 wget 有什么区别?
  • Linux Note
  • shell 大括号扩展 — {}
  • 同时创建多个文件
  • 如何在 Linux 中删除在特定端口上运行的进程

Magic

  • Code Golf

MongoDB

  • MongoDB 删除数据库
  • MongoDB 删除文档
  • MongoDB 删除集合
  • MongoDB
  • Mongoose aggregate
  • Mongoose create() 方法
  • Mongoose Populate
  • Mongoose Schema 和 SchemaTypes
  • Mongoose Virtuals
  • Mongoose 中的 db 属性
  • Mongoose 中的 ObjectIds
  • Mongoose 中的 Promise
  • Mongoose 中的枚举
  • Mongoose 唯一索引(unique)
  • Mongoose 插入文档
  • Mongoose 数组
  • Mongoose 时间戳(timestamps)
  • Mongoose 更新文档
  • Mongoose 查询文档
  • Mongoose 的 save() 方法
  • Mongoose 解决 Query was already executed 问题
  • 使用 Mongoose 连接到 MongoDB
  • 使用 Mongoose 验证数据唯一性
  • 在 Mongoose 中使用 MongoDB Explain

Nginx

  • Nginx 配置旧域名重定向到新域名
  • Nginx 静态文件与 root 和 alias 混淆
  • 查找 Nginx 配置文件

Node

  • Express 中的 app.use() 方法
  • Express 中的错误处理中间件
  • JavaScript Lodash 工具库
  • Node Koa 框架
  • Node REPL
  • Node.js assert 模块
  • Node.js Buffer 模块 — 缓冲区
  • Node.js HTTP 和 HTTPS 模块
  • Node.js Net 模块
  • Node.js OS 模块
  • Node.js path 模块
  • Node.js readline 模块
  • Node.js 中的 util.promisify() 方法
  • Node.js 文件系统模块
  • Node.js 读取 CSV 文件
  • Node.js 读取环境变量
  • Node.js 递归获取文件夹中的所有文件
  • open 模块
  • package.json 中的 browserslist 字段
  • package.json 详解
  • process.nextTick() 在 Node.js 中是如何工作的?
  • Puppeteer
  • 从 MIME 类型获取文件扩展名
  • 使用 Day.js 模块实现国际化日期
  • 使用 Express 上传文件
  • 使用 fs 模块的推荐方法
  • 使用 fs.extra 模块替代 fs
  • 使用 node-cron 在 Node.js 中调度任务
  • 使用 Node.js 显示整个对象
  • 使用 Node.js 生成子进程
  • 使用 Node.js 递归创建目录
  • 使用 Nodemailer 发送电子邮件
  • 使用 nodemon 自动重启 Node.js 应用程序
  • 使用 pm2 为 Node.js 应用程序提供服务
  • 使用 process.mainModule 或 require.main 确定 Node.js 入口脚本
  • 使用 sendFile() 在 Express 中发送静态文件
  • 使用 zx 编写在 Node 中编写 Bash 脚本
  • 创建 GUID、UUID
  • 删除所有的 node_modules 文件夹
  • 在 ES 模块(Node.js)中导入 JSON 文件
  • 在 Node.js 中使用 execa 运行命令
  • 在 Node.js 中将 Buffer 转换为 JSON 和 UTF8 字符串
  • 如何下载和解压 Node 中的 gz 文件
  • 如何在 Node.js 中使用 ES6 导入语法
  • 如何在 Node.js 中控制没有依赖项的日志消息
  • 如何在 Node.js 应用程序中使用 ESLint
  • 如何对 npm package 进行发包
  • 常用的 npm 命令
  • 快速执行 JavaScript 文件的语法检查
  • 打开包的主页或存储库
  • 查找未使用的 npm 依赖项
  • 检查 npm 模块更新
  • 防止 npm 安装不支持的 Node.js 版本

React

  • React Context API
  • React Fragment
  • React Hooks
  • React Portals
  • React 严格模式
  • React 中的代码拆分
  • React 中的单向数据流
  • React 入门
  • React 受控组件和非受控组件
  • React 声明式
  • React 展示组件与容器组件
  • React 纯函数
  • React 组合组件
  • React 高阶组件
  • 使用 React Hooks 获取数据时避免 Race Condition
  • 使用 React 创建一个无限滚动组件
  • 使用 React 自动聚焦字段
  • 使用 Styled Components 编写样式化组件
  • 使用 Typescript 编写自定义 React useDebounce Hook
  • 修复 React 中的 “Cannot read property 'map' of undefined” 错误
  • 在 React 中使用 useContext 切换暗、亮主题

Share

  • Markdown 语法
  • 五款基于浏览器的在线代码编辑器

SourceCode

  • co 源码解读
  • flexible.js 源码解读
  • nextTick 实现原理

TypeScript

  • JavaScript 和 TypeScript 中的 void
  • JavaScript 和 TypeScript 中的布尔值
  • TypeScript DefinitelyTyped 项目
  • TypeScript keyof 关键字
  • TypeScript 中的 const 断言
  • TypeScript 中的类型收窄
  • TypeScript 命名空间
  • TypeScript 基础 — const 和 readonly 的区别
  • TypeScript 基础 — d.ts 和 .ts 的区别
  • TypeScript 基础 — interface 中的函数和属性
  • TypeScript 基础 — interface 和 type 的区别
  • TypeScript 基础 — interface 接口
  • TypeScript 基础 — Null 和 Undefined
  • TypeScript 基础 — Object 类型
  • TypeScript 基础 — string 和 String 的区别
  • TypeScript 基础 — 元组
  • TypeScript 基础 — 函数
  • TypeScript 基础 — 枚举
  • TypeScript 基础 — 泛型
  • TypeScript 基础 — 类
  • TypeScript 基础 — 类型断言(Type Assertion)
  • TypeScript 基础 — 类型谓词
  • TypeScript 基础 — 联合类型
  • TypeScript 声明文件
  • TypeScript 工具类型 — Utility Types
  • TypeScript 文字联合类型与字符串枚举
  • TypeScript 类型转换
  • TypeScript 装饰器
  • 使用 TypeScript 中的类型进行对象分解
  • 在 TypeScript 中使用 unknown 而不是 any
  • 缩短 TypeScript 中的导入路径

VS Code

  • VS Code 快捷键

Vue

  • Vue 3 中的新的响应式 API
  • Vue Computed — 计算属性
  • Vue Context 参数 — Composition API
  • Vue CSS 变量 — 响应式样式 RFC
  • Vue keep-alive
  • Vue Mixins
  • Vue nextTick
  • Vue Props
  • Vue Router active-class 属性
  • Vue v-model 指令
  • Vue vue-loader
  • Vue 事件处理
  • Vue 依赖注入使用 Provide 和 Inject
  • Vue 动态组件
  • Vue 插槽
  • Vue 条件渲染 v-if 与 v-show
  • Vue 的深度 CSS 选择器
  • Vue 组件声明的多种方式
  • Vue 组件通信
  • Vue 过渡和动画
  • Vue 递归组件
  • Vue 错误处理 — onErrorCaptured 钩子
  • Vue2 与 Vue3 生命周期变化
  • Vue3 Suspense 组件
  • Vue3 Teleport 组件
  • Vue3 中使用 defineAsyncComponent 延迟加载组件
  • Vue3 使用 Event Bus
  • Vue3 注册全局组件
  • Vuex
  • watch 与 watchEffect 的区别
  • 使用 v-once 和 v-memo 指令来提升性能
  • 使用导航守卫保护 Vue 路由
  • 创建您的第一个 Vue 自定义指令
  • 制作您的第一个 Vue 插件
  • 在 Vue 中使用 $emit 自定义事件
  • 在 Vue2 与 Vue3 中构建相同的组件

Web API

  • Battery API
  • Broadcast Channel API
  • Cache API
  • Channel Messaging API
  • CSS Font Loading API
  • Fetch API
  • File System API
  • getUserMedia() 方法
  • History API
  • IndexedDB
  • Intersection Observer
  • Picture in Picture
  • requestAnimationFrame
  • Resize Observer API
  • Screen Capture API
  • Service Worker
  • Speech Synthesis API
  • URL 对象
  • Web Bluetooth API
  • Web Fullscreen API
  • Web Geolocation API
  • Web Notification API
  • Web Share API
  • Web Vibration API
  • Web Worker
  • WebSocket
  • XMLHttpRequest
  • 使用 MediaDevices API 访问您的网络摄像头

WTF

  • JSON Web Token
  • Repo 托管服务
  • WebP 图像格式
  • 什么是 CDN?
  • 什么是 CSRF 攻击?
  • 什么是 CSS-in-JS
  • 什么是 CSS?
  • 什么是 Doctype?
  • 什么是 JAMstack?
  • 什么是 NPM?
  • 什么是 Polyfill?
  • 什么是 Redis?
  • 什么是 REST?
  • 什么是 RFC?
  • 什么是 XSS 攻击?
  • 什么是 YAML?
  • 什么是包管理器?
  • 什么是单一职责原则?
  • 优雅降级和渐进增强

前端

  • Babel 入门
  • esbuild 入门
  • ESLint 配置文件
  • Parcel 入门
  • Tree Shaking
  • Vite 入门
  • Webpack DefinePlugin
  • Webpack externals
  • Webpack Watch
  • Webpack 入门
  • Webpack 减少构建时间
  • 使用 ESLint 的 --fix 标志
  • 使用 Prettier 格式化代码
  • 使用 Webpack 编译 TypeScript
  • 使用别名缩短 Webpack 中的导入路径
  • 将 ES 模块与 rollup.js 捆绑并生成多种文件格式
  • 忽略 ESLint 中的行和文件
  • 构建工具
  • 添加 .editorconfig 文件

手写系列

  • 仅执行一次函数
  • 实现 async、await
  • 实现 call、apply、bind
  • 实现 instanceof 运算符
  • 实现 JS 原生数组方法
  • 实现 JSON.parse
  • 实现 new 运算符
  • 实现 Object.assign
  • 实现 Object.create
  • 实现 Promise A+
  • 实现 sleep 函数
  • 实现一个 add 方法
  • 实现一个 Ajax HTTP 请求库
  • 实现一个 Event Bus
  • 实现一个 JavaScript 模板引擎
  • 实现一个有效期的 localStorage API
  • 实现一个简单的单页应用
  • 实现一个简单的双向数据绑定
  • 实现一个精简版的 Redux
  • 实现一个继承方法
  • 实现数组洗牌函数
  • 构建一个虚拟 DOM
  • 构建模块打包器
  • 模拟 setInterval
  • 统计字符串中出现最多的字母和个数
  • 节流和防抖

数据结构和算法

  • 大 O 符号
  • 数据结构 — 二叉搜索树
  • 数据结构 — 二叉树
  • 数据结构 — 双向链表
  • 数据结构 — 图
  • 数据结构 — 堆栈
  • 数据结构 — 链表
  • 数据结构 — 队列
  • 每日一算法:k 均值
  • 每日一算法:Levenshtein 距离
  • 每日一算法:二分搜索
  • 每日一算法:二项式系数
  • 每日一算法:冒泡排序
  • 每日一算法:凯撒密码
  • 每日一算法:分治法
  • 每日一算法:归并排序
  • 每日一算法:快速排序
  • 每日一算法:插入排序
  • 每日一算法:斐波那契数列
  • 每日一算法:杨辉三角形
  • 每日一算法:欧氏距离
  • 每日一算法:汉明距离
  • 每日一算法:素数
  • 每日一算法:选择排序
  • 每日一算法:阶乘

浏览器

  • Data URL
  • 关键渲染路径
  • 强缓存与协商缓存
  • 浏览器 Hack
  • 浏览器内核
  • 浏览器同源策略
  • 浏览器如何解析 CSS 选择器?
  • 浏览器如何解析 CSS?
  • 浏览器如何解析 HTML?
  • 浏览器重绘和回流(Repaint & Reflow)

计算机网络

  • DNS — 域名系统
  • HTTP 2
  • HTTP Cookie
  • HTTP 与 HTTPS 的区别
  • HTTP 中 GET 和 POST 的区别?
  • HTTPS
  • TCP 协议
  • TCP 和 UDP 的区别
  • UDP 协议
  • URL 重定向
  • 常见的 HTTP 状态码
  • 常见的网络端口及对应服务

勘误及提问

如果有疑问或者发现错误,可以在相应的 issues 进行提问或勘误

如果喜欢或者有所启发,欢迎 Star,对作者也是一种鼓励。

License

所有文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。