Web 前端

技术标准规范

Technical standard specification.

• W3C (opens new window) - 万维网联盟创建于 1994 年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
• WHATWG community (opens new window) - 网络超文本应用技术工作组（WHATWG）维护的一些规范性文档。
• Promises/A+ Specification (opens new window)

More others 👉 Awesome-Development-Technical-Standard-Specifications

技术参考文档

Official and unofficial technical reference documents.

• 标准实现状态（Standard implementation status）

  • Chrome Blink status (opens new window) - Google Chrome 的 Blink 引擎功能特性的官方实现和标准化的开发状态查询列表，官方网站。
  • Firefox status (opens new window) - Firefox 的 Web 平台功能的官方实现和标准化路线图查询列表，官方网站。
  • Webkit (opens new window) - Webkit 浏览器引擎的官方网站，可查询其功能特性的实现和标准化状态，官方网站。
  • Can I use (opens new window) - 可以查询特定 Web API（H5、CSS3）在各个浏览器平台的实现和标准化状态，非官方网站。
  • Can I email (opens new window) - 可以查询特定 Web API（H5、CSS3）在各个邮件客户端平台的实现和标准化状态，非官方网站。
  • compatibility table (opens new window) - 可以查询 ECMAScript API 在各平台实现的状态，非官方网站。

• 开发文档（Dev docs）

  • MDN Developer Document (opens new window) - MDN Web Docs 网站提供开放网络（Open Web）技术有关的信息，包括用于网站和渐进式网络应用的 HTML、CSS 和 API，是提供给 Web 开发者最好的学习资料和技术文档，可作为官方标准参阅学习。
  • Chrome Developers (opens new window) - Chrome 开发者中心，Chrome 官方站点。
  • Google Developers for Web (opens new window) - 谷歌开发者中心，Web 站点，众多工具和资源。
    • web.dev (opens new window) - Web 关键概念学习、实践。
  • The Front-End Checklist (opens new window) - 前端清单，前端知识点及其最佳实践。
  • 印记中文 (opens new window) - 包含了许多前端技术库的中文翻译文档。

• 技术设计文档 (System design docs)

  • 技术设计模板 (opens new window)
  • 系统设计 (opens new window)

• 路线图（Roadmap）

  • Frontend Developer Roadmap (opens new window) - 前端开发技术路线图。

• 备忘单与代码片段（Cheatsheet & Code Snippets）

  • this vs that (opens new window) - 类似概念区分理解。

UI 设计语言

• 52 Design Principles (opens new window) - 小红书设计原则
• Au Design (opens new window) - 极光设计原则

HTML

W3C HTML 官方规范标准（W3C HTML Official Specification Standard） (opens new window)

HTML 代码风格规范

Code Style Specifications.

• Google HTML Style Guide (opens new window)
• @mdo's Code Guide HTML (opens new window)

HTML 在线资源

HTML related online tools and documents, etc.

• HTML Reference (opens new window) - HTML 指南。
• HTML DOM (opens new window) - 有用的 HTML 代码片段。

HTML 工具库

HTML tool library, dealing with compatibility issues, etc.

• HTML Boilerplates (opens new window) - HTML 文件模板。
• HTML5 Boilerplate (opens new window) - HTML5 文件模板。

CSS

W3C CSS 官方规范标准（W3C CSS Official Specification Standard） (opens new window)

• css-modules (opens new window) - CSS 模块。（⚠️ 没有被标准化）

CSS 代码风格规范

Code Style Specifications.

• CSS 代码风格（CSS Code Style）

  • Google CSS Style Guide (opens new window)
  • Airbnb CSS / Sass Styleguide (opens new window)
  • @mdo's Code Guide CSS (opens new window)

• CSS 类命名规则（CSS class naming rules）

  • CSS BEM (opens new window)
  • OOCSS (opens new window)
  • SMACSS (opens new window)
  • Atomic CSS (opens new window)
  • SUIT CSS (opens new window)

CSS 在线资源

CSS related online tools and documents, etc.

• 文档（Documentation）

  • cssdb (opens new window) - CSS 新特性列表。
  • CSS Triggers (opens new window) - 一些改变会导致重绘、重布局的 CSS 属性。
    • What forces layout / reflow (opens new window) - 一些会导致重绘、重布局的 DOM 操作。
  • CSS Reference (opens new window) - CSS 视觉指南。

• 工具（Tools）

  • CSS Layout (opens new window) - 流行的 CSS 布局方案参考。
  • Keyframes (opens new window) - CSS 效果预览小工具集合。
  • Animista (opens new window) - 在线生成 CSS 动画样式代码。
  • easings.co (opens new window) - 测试 CSS 动画函数效果。
  • enjoyCSS (opens new window) - 便捷的组件样式设计输出在线工具。
  • Gradient Magic (opens new window) - 渐变设计，CSS 渐变画廊。
  • Conic.css (opens new window) - CSS 渐变。
  • Glassmorphism CSS Generator (opens new window) - 毛玻璃效果。
  • Glassmorphism CSS Generator (opens new window) - 毛玻璃效果。
  • Animated Backgrounds (opens new window) - CSS 动画背景。
  • My Device (opens new window) - 测量当前设备相关的 CSS 值，例如视区宽度等等。
  • bienvenida al laboratorio (opens new window) - 一些 CSS 特性相关的用例。
  • CSS Script (opens new window) - 设计现代 Web 的 CSS 脚本。

CSS 工具库

CSS tool library, dealing with compatibility issues, etc.

• CSS 重置（CSS Reset）

  • Normalize.css (opens new window) - 现代化的 Reset CSS 工具库，统一浏览器默认样式。（⚠️ 不再更新）
  • @csstools/normalize.css (opens new window)
  • modern-normalize (opens new window)
  • sanitize.css (opens new window)
  • ress (opens new window)

• 实用工具（Utils）

  • Tailwind CSS (opens new window) - 可定制设计的低级 CSS 框架，不提供组件样式，仅提供预设的工具类，来进行组合创建样式。
    • Tailwind CSS Cheat Sheet (opens new window)
    • Hypercolor (opens new window) - 渐变色集合。
    • Tailwind Components (opens new window) - 使用 TailwindCSS 构建的组件，社区支持。
    • daisyUI (opens new window) - 使用 TailwindCSS 构建的组件，支持多种主题配色。
    • headlessUI (opens new window) - 一组完全无样式、可访问的组件，与 TailwindCSS 集成使用，TailwindCSS 官方发布。
  • Uniform CSS (opens new window) - 实用优先的 CSS 框架，用来构建原子的 CSS 样式集合。
  • Masonry (opens new window) - grid 布局工具。
  • clsx (opens new window) - 非常轻量的 CSS 类名拼接工具。
  • polished (opens new window) - CSS 样式辅助工具。

JavaScript

ECMAScript 官方规范标准（ECMAScript Official Specification Standard） (opens new window)

（Recommend）推荐一个其它的收藏库，👉 https://github.com/sorrycc/awesome-javascript

• TC39 ECMAScript proposals (opens new window) - TC39 对 ECMAScript 标准制定提案的记录。
• OpenJS Foundation (opens new window) - 开源 JS 基金会，由 Node 基金会和 JS 基金会合并而成。

JS 代码风格规范

Code Style Specifications.

• JavaScript Standard Style (opens new window) - 支持 JSX 等语法，社区维护。
• Airbnb JavaScript Style Guide (opens new window) - 支持 React 技术栈，Airbnb 公司发布。
• Google JavaScript Style Guide (opens new window) - 仅支持原生 JavaScript，Google 公司发布。
• xo (opens new window)
• Principles of Writing Consistent, Idiomatic JavaScript (opens new window)
• clean-code-javascript (opens new window) - 如何编写干净简洁的 JavaScript 代码。

JS 在线资源

JavaScript related online tools.

• 关键概念（Key concepts）

  • DOM Events (opens new window) - DOM 事件运行机制的可视化。
  • SJSJ (opens new window) - JavaScript 术语介绍。
  • Modern JS Cheatsheet (opens new window) - 现代 JavaScript 概念要点。👉 中文翻译 (opens new window)
  • What the f*ck JavaScript? (opens new window) - JavaScript 中有趣且易错的要点。
  • 33 js concepts (opens new window) - 包含了丰富的 JavaScript 相关的知识概念，学习资源。

• 技巧（Skills）

  • Tips, Tricks, Best Practices (opens new window) - 前端技巧和最佳实践。
  • Favorite JavaScript Utilities (opens new window) - JavaScript 编程技巧，一行代码。
  • Vanilla JavaScript Toolkit (opens new window) - 原生 JS 代码片段集合。
  • JS The Right Way (opens new window) - 一些 JavaScript 最佳实践。

• 工具集（Toolset）

  • JavaScripting (opens new window) - JavaScript 库、插件、框架资源。
  • Javascript.FUN (opens new window) - 在线网站，JavaScript 开发资源集合。
  • best of js (opens new window)

• 其它（Other）

  • ECMAScript 6 — New Features: Overview & Comparison (opens new window) - ES6 新特性与旧代码差异对比。
  • The Modern JavaScript Tutorial (opens new window) - 现代 JavaScript 教程。
  • Learn Vanilla JavaScript (opens new window) - 原生 JS 学习资源。
  • JSchallenger (opens new window) - 在线 JavaScript 编程训练。

JS 工具库

JavaScript tool libraries (browser-side), such as file manipulation, Canvas drawing, HTTP requests, etc.

see also 👉 Node.JS-工具库

• 实用工具（Utils）

  • chroma.js (opens new window) - 颜色字符串解析、计算工具，功能很强大。
  • color (opens new window) - 颜色字符串解析、计算工具，更轻量。
  • TinyColor (opens new window) - 颜色字符串解析、计算工具，更轻量一些。（⚠️ 不再更新）
  • one.color (opens new window) - 颜色字符串解析、计算工具，支持 RGB, HSV, HSL, CMYK 等。
  • Fuse.js (opens new window) - 模糊搜索工具。
  • fuzzysort (opens new window) - 模糊搜索并排序。
  • normalizr (opens new window) - 根据 Schema 将嵌套的 JSON 数据归一化。
  • Anchorme.js (opens new window) - 将文本中的 URL/邮箱等转换为链接。

• 实用函数库（utility library）

  • Underscore (opens new window) - JavaScript 的工具函数库，提供了大量非常有用的工具函数。
  • Lodash (opens new window) - JavaScript 的工具函数库，参考自 Underscore，功能更丰富。
  • Ramda (opens new window) - JavaScript 的工具函数库，专门针对于函数式编程。
    • rambda (opens new window) - Ramda 的更快、更轻量的替代方案。
  • Remeda.js (opens new window) - JavaScript 的工具函数库，专门针对于函数式编程，同时支持 "data-first" 和 "data-last" 的范式。
  • ts-belt (opens new window) - JavaScript 的工具函数库，专门针对于函数式编程，更快、更现代化。
  • RxJS (opens new window) - 响应式编程（Reactive Extensions）的 JavaScript 实现，对异步数据集合处理很方便。

• UID

  • uuid (opens new window) - 生成随机唯一 id。
  • ulid (opens new window) - 生成可排序的唯一 id。（⚠️ 不再更新）
  • Nano ID (opens new window) - 生成唯一、URL 友好、安全的随机字符串。
  • cuid (opens new window) - 生成防碰撞的随机 id。（⚠️ 不再更新）

• 文档对象模型（DOM）

  • jQuery (opens new window) - 前几年非常流行的 DOM 操作工具库，处理了兼容性的细节问题。
    • You might not need jQuery (opens new window)
    • Zepto.js (opens new window) - 兼容 jQuery API 的轻量级工具库，适合移动端使用。（⚠️ 不再更新）
    • cash-dom (opens new window) - 轻量级 DOM 工具库，可作为 jQuery 的替代，但仅支持现代浏览器。
    • Umbrella JS (opens new window) - 可替代 jQuery 的轻量级工具库。
    • Bliss.js (opens new window) - 基于原生 API 的轻量级工具库。
  • Lozad.js (opens new window) - 轻量、高性能图片懒加载工具，使用了 Intersection Observer API (opens new window)。
  • clipboard.js (opens new window) - 现代的粘贴板工具库。
  • Tether (opens new window) - 元素跟踪定位工具。
    • popper.js (opens new window) - 元素定位工具。
  • Quicklink (opens new window) - 预请求视区内的资源，加快页面加载速度。
  • fastdom (opens new window) - 批处理 DOM 操作。
  • Canvas
    • print.js (opens new window) - 网页打印工具。
    • DOM to Image (opens new window) - 利用 HTML5 Canvas 生成 DOM 节点的快照图片。
      • html2canvas (opens new window)
      • rasterizeHTML.js (opens new window)
    • signature_pad (opens new window) - 手写签名。

• 事件（Event）

  • BOM / Browser
    • history (opens new window) - 管理页面路由。
    • screenfull.js (opens new window) - 跨浏览器的 Fullscreen API。
  • Mobile Event / Gestures
    • Hammer.js (opens new window) - 支持移动端触摸事件，以及手势操作、多点触控。（⚠️ 不再维护）
    • zingtouch (opens new window) - （⚠️ 不再维护）
    • interact.js (opens new window)
    • @use-gesture/vanilla (opens new window) - 轻量级。
  • Keyboard Event
    • Mousetrap (opens new window) - 处理键盘事件。
    • Hotkeys (opens new window) - 处理键盘事件。
    • Hotkey (opens new window) - 处理键盘事件。
  • Selecto.js (opens new window) - 拖动选择元素，支持鼠标和触摸事件。

• Cookie

  • js-cookie (opens new window) - 轻量的 Cookie 处理工具库。
  • universal-cookie (opens new window)

• 数据与缓存（Data && Cache）

  • crypto-js (opens new window) - JavaScript 加密库。
  • https://github.com/digitalbazaar/forge (opens new window) - JavaScript 加密库。
  • md5.js (opens new window) - md5 哈希库。（⚠️ 不再更新）
  • md5 (opens new window) - md5 哈希库。
  • object-hash (opens new window) - 对 JavaScript 对象进行 hash 处理。
  • crypto-browserify (opens new window) - Node 中 crypto 模块在浏览器中的实现。（⚠️ 不再更新）
  • SJCL (opens new window) - JavaScript 加密库。（⚠️ 不再更新）
  • Buffer (opens new window) - 可在浏览器中使用与 Node.js Buffer API (opens new window) 100% 相同的 API。

• 深度相等判断（Equal depth）

  • fast-deep-equal (opens new window) - 高性能，支持比较 ES6 Map, Set 和 Typed arrays。（⚠️ 不再更新）
  • microdiff (opens new window) - 高性能数组与对象的相等比较。
  • diff (opens new window) - 文本差异算法。

• 函数记忆化（Function memoization）

  • mem (opens new window) - 函数缓存，可控制缓存有效期等。
  • moize (opens new window) - 函数缓存，功能丰富。
  • memoize-one (opens new window) - 函数缓存，轻量级，仅缓存最后一次执行结果。

• 日期时间（Date && Time）

  • Moment.js (opens new window) - 功能强大的日期、时间处理库。
  • Luxon (opens new window) - 现代化、api 友好的日期、时间处理库，Moment.js 团队开发。
  • date-fns (opens new window)
  • Day.js (opens new window) - 现代化、轻量级日期、时间处理库。
  • ms (opens new window) - 毫秒格式化工具。

• 科学计算（Compute - Math && High precision && Scientific Computing）

  • math.js (opens new window) - 基本数学计算。
  • big.js (opens new window) - 十进制数计算，还有相关的 bignumber.js (opens new window) 和 decimal.js (opens new window)。
  • stdlib (opens new window)
  • glMatrix (opens new window) - 矩阵和矢量运算。
  • currency.js (opens new window) - 轻量的货币计算工具库。
  • Dinero.js (opens new window) - 货币计算。

• 客户端数据库（Client Database）

  • localForage (opens new window) - 离线存储，对 IndexedDB、WebSQL、localStorage 的封装。
  • SQL.js (opens new window)
  • LokiJS (opens new window) - 文档型内存数据库。
  • lowdb (opens new window) - 本地 JSON 数据库。
  • Dexie (opens new window) - 对 IndexedDB API 的轻量级封装。

• 多线程（Web Worker）

  • Comlink (opens new window) - 使 Web Worker 的使用更加简单、方便，Chrome 实验室发布。
  • web-worker (opens new window) - 跨平台的 Web Worker 实现， 支持 Node.js 与 Web 浏览器环境。

• 二维码（QR Code）

  • node-qrcode (opens new window) - 二维码生成。
  • Awesome-qr.js (opens new window) - 个性化二维码生成。（⚠️ 不再更新）

• 文件（File）

  • utils
    • FileSaver.js (opens new window) - Web 浏览器客户端文件保存 api 实现。
    • StreamSaver.js (opens new window) - Web 浏览器客户端异步保存文件 api 实现，解决了 FileSaver 的大小限制问题。
  • html/xml
    • parse-xml (opens new window) - XML 解析器。
  • json5
    • JSON5 (opens new window) - JSON5 格式数据解析、序列化。
  • zip
    • JSZip (opens new window) - 创建/读写 zip 文件。
  • xlsx
    • exceljs (opens new window) - 读、写 xlsx、csv 文件。
    • xlsx (opens new window) - 读、写 xlsx、csv 文件（写功能部分特性不免费）。
  • csv
    • Papa Parse (opens new window)
  • docx
    • docx (opens new window) - 生成 docx 文档。
    • mammoth (opens new window) - docx 转换成 HTML。
  • pptx
    • PptxGenJS (opens new window) - 生成 pptx 文件。
  • pdf
    • PDF-LIB (opens new window) - 解析和操作 PDF 文件。
    • jsPDF (opens new window) - Web 客户端生成 PDF 文件。
    • PDFKit (opens new window) - 生成 PDF 文件。
    • pdfmake (opens new window)
    • html-to-pdfmake (opens new window) - HTML转PDF工具
    • bookjs-easy (opens new window) - WEB打印，HTML转PDF工具
    • vue-plugin-hiprint (opens new window) - 打印设计
    • kr-print-designer (opens new window) - 打印设计
  • image
    • Pica (opens new window) - 图片质量调整。
    • merge-images (opens new window) - 图片拼接合并。
    • blurify (opens new window) - 图片模糊化。
    • Compressor.js (opens new window) - 图片压缩。
    • Lena.js (opens new window) - 图片滤镜。
  • audio
    • howler.js (opens new window) - 强大的音频处理工具库，支持所有的编解码器，跨浏览器支持。
  • svg
    • Trianglify (opens new window) - 通过算法生成三角网 SCG 背景图。(👉 https://trianglify.io/)
  • markdown
    • Showdown (opens new window) - Markdown 到 HTML 的转换器。

• HTTP 请求（HTTP - Ajax / Promise / fetch）

  • axios (opens new window) - 基于 Promise 的 HTTP 客户端工具库。
    • axios-mock-adapter (opens new window) - Mock API。
    • pont (opens new window) - 🌉数据服务层解决方案
    • better-mock (opens new window) - 数据模拟
    • yapi (opens new window) - 可视化的接口管理平台

• 套接字（Socket / TCP）

  • socket.io-client (opens new window) - 优秀的实时通信客户端框架。
  • sockjs-client (opens new window) - 实时工具库，支持多种语言实现的后端。

• WebRTC

  • PeerJS (opens new window) - 对 WebRTC API 的简单抽象。

• OCR

  • 'tesseract.js (opens new window) - 支持 100 种语言的图像文本识别。

• 自然语言处理（NLP）

  • compromise (opens new window)

• 国际化（i18n）

  • Format.js (opens new window)

TypeScript

TypeScript 官网 (opens new window) - JavaScript 超集，强类型语言。

• TypeScript Performance Tips (opens new window) - TypeScript 性能优化，官方。
• typescript-cheatsheet (opens new window) - TypeScript 备忘单。
• TypeScript Deep Dive (opens new window) - 深入理解 TypeScript 相关概念知识。
• TypeScriptToLua (opens new window) - 用 TypeScript 编写 Lua。

构建工具

Build tool, packaging tool used to develop web app, realize web engineering.

see also 👉 Node.JS-构建工具

• Create App (opens new window) - 前端项目构建工具启动配置。

构建现代 Web 应用

Build modern web apps.

• Modern Web (opens new window) - 现代 Web 开发的指南、工具和库。
• Open Web Components (opens new window) - 用于开发 Web 组件的指南、工具和库。

文档

Document.

• highlight.js (opens new window) - 页面代码高亮。
• Prism.js (opens new window) - 页面代码高亮。
• Shiki (opens new window) - 页面代码高亮。

API 兼容性支持

API Polyfill.

Browserslist (opens new window) - 社区主流的目标设备检测工具库。（👉 browserslist.dev (opens new window)）

• HTML

  • html5shiv (opens new window) - 在旧浏览器（IE9 以下）上提供对 HTML5 新标签（例如 footer、nav）的支持。

• CSS

  • Respond (opens new window) - 在旧浏览器（IE 6-8）上提供对 CSS3 Media Queries（媒体查询）的支持。
  • selectivizr (opens new window) - 在旧浏览器（IE 6-8）上提供对 CSS3 新选择器的支持，注意 style 标签内样式不解析，动态生成的 DOM 也不解析。
  • css-paint-polyfill (opens new window) - CSS Paint API (opens new window) 。

• JavaScript

  • Polyfill.io (opens new window) - Polyfills 服务。
  • core-js (opens new window) - 现代 JavaScript 标准库。
  • es-shims (opens new window) - ECMAScript 的 Polyfills 集合。
  • Promise Polyfill (opens new window) - 为浏览器提供 Promise API 支持。
  • webp-hero (opens new window) - 为浏览器提供 WebP 格式图片支持。
  • fetch (opens new window) - 提供 window.fetch API 的兼容性支持。
  • unfetch (opens new window) - 提供简单的 Fetch API 支持。
  • smoothscroll-polyfill (opens new window) - 提供平滑滚动的支持。

打包工具

Packaging tools && Task management.

• webpack (opens new window) - 打包工具，适合开发 Web 应用。

  • awesome-webpack (opens new window) - Webpack 相关资源，官方认证。

• Gulp (opens new window)

• Grunt (opens new window)

• esbuild (opens new window) - Go 编写的代码编译转换和打包工具。

编译器

Code compilation conversion.

• JavaScript / TypeScript

  • Babel (opens new window) - 编译工具，可将 TypeScript、ES6/7/8 代码编译为 JavaScript（ES5） 代码。
  • swc (opens new window) - Rust 编写的代码编译转换工具，可替代 Babel。

• CSS / Less / Sass

  • Sass (opens new window) - CSS 预处理器，可提供类似编程语言的能力（变量、方法、作用域、嵌套）来编写 CSS。
    • Sass Guidelines (opens new window) - Sass 语法风格指南，非官方。
  • PostCSS (opens new window) - CSS 后处理器，提供众多插件来实现还未被广泛实现和标准化的 CSS 功能特性，最终将其编译为目标平台支持的 CSS 代码。
    • postcss-normalize (opens new window)
  • CSS In JS
    • JSS (opens new window) - 一种 CSS-in-JS 的解决方案。
    • styled components (opens new window) - 一种 CSS-in-JS 的解决方案。
  • modular-css (opens new window) - CSS 模块的扩展实现。

代码静态分析

Code lint.

• ESLint (opens new window) - JavaScript 语法规则检查工具。
• Prettier (opens new window) - 代码格式化工具，支持多种语言。
• stylelint (opens new window) - CSS 语法规则检查工具，支持 CSS/Sass/CSS-in-JS 等。
• Flow (opens new window) - Facebook 出品的 JavaScript 静态类型检查工具。
• sonar.js (opens new window) - 代码质量分析。

测试工具

Test tools.

• fuite (opens new window) - CLI 工具，发现 Web 应用的内存泄露问题。

响应式设计

Responsive Design.

• Responsively (opens new window) - 开源免费。
• Polypane (opens new window) - 提供免费版本。

其它工具

Others tools.

• Source Map (opens new window) - 生成和解析 .map 文件，调试压缩代码，Mozilla 发布。

• SystemJS (opens new window) - 动态 ES Module 加载器。

• 移动端调试（Mobile debugging）

  • Eruda (opens new window) - 移动端 Web 调试工具。
  • vConsole (opens new window) - 移动端 Web 调试工具，腾讯（Tencent）出品。
  • Browsersync (opens new window) - 浏览器同步调式工具，功能非常强大。

UI 资源

UI resources.

字体图标

Font icon, vector icon.

字体

Font.

图标

Icon.

• Glyphs (opens new window) - 开源图标库。
• Bootstrap Icons (opens new window) - 开源图标库，仅支持 SVG，Twitter 公司发布。
• Feather (opens new window) - 简单漂亮的开源图标库，仅支持 SVG。
• Remix Icon (opens new window) - 中性风格的开源图标库，支持 SVG 与 Web font。
• IonIcons (opens new window) - 精美的开源图标库，支持 SVG 与 Web font，ionic 团队制作。
• Material Icons (opens new window) - Material Design 风格的开源图标库，支持 SVG 与 Web font，Google 官方发布。
• Material Design Icons (opens new window) - Material Design 风格的开源图标库，支持 SVG 与 Web font非官方，社区支持。
• Octicons (opens new window) - GitHub 开源图标库，GitHub 官方发布。
• Teenyicons (opens new window) - 开源图标库，仅支持 SVG。
• Forge Icons (opens new window) - 免费图标库，仅支持 SVG。
• Simple Icons (opens new window) - 免费的品牌 logo 图标，仅支持 SVG。
• Fabric Icons (opens new window) - 图标库，仅支持 Web font，Microsoft 官方发布。
• Spectrum Icons (opens new window) - Adobe Spectrum 设计系统图标，Adobe 官方发布。
• Font Awesome (opens new window) - 丰富的图标库，提供免费版。
• IconPark (opens new window) - 开源免费的图标库，字节跳动公司发布。
• flag-icons (opens new window) - 开源的世界各国国旗图标，支持 SVG 与 CSS。

UI 设计系统

Some open source, shared UI design kits.

• Primer (opens new window) - GitHub 设计，包含组件库、图标等资源，GitHub 官方发布。
• Material Design (opens new window) - Material 设计，包含组件库、图标等资源，Google 公司发布。
• Fluent UI (opens new window) - Fluent UI，包含组件库、图标等资源，Microsoft 公司发布。
• Carbon (opens new window) - Carbon 设计，包含组件库、图标、数据可视化工具等资源，IBM 公司发布。
• Spectrum (opens new window) - Spectrum 设计，包含组件库、图标、字体等资源，Adobe 公司发布。
• Ant Design (opens new window) - Ant 设计，包含组件库、图标、数据可视化工具等资源，阿里巴巴公司发布。
• TOAST UI (opens new window) - 包含日历、编辑器、网格组件，以及图表库，NHN 公司发布。

UI 组件

UI Component

Bit (opens new window)，共享组件发布平台。

组件库

UI component library, providing a set of components with consistent design style.

Bootstrap

• Bootstrap (opens new window) - 最流行的 CSS UI 框架，Twitter 公司发布。
• Bootswatch (opens new window) - 开源免费的 Bootstrap 主题集合，非官方。
• MDB (opens new window) - 基于 Bootstrap 实现 Material Design 的 UI 组件库，非官方。

Material Design

• Material Design Lite (opens new window) - 基于 Material Design 的轻量级 CSS UI 框架，Google 官方发布。（⚠️ 不再更新）
• Material Components Web (opens new window) - 基于 Material Design 的 Web 组件库，Google 官方实现。
• Materialize (opens new window) - 最流行的实现了 Google Material Design 的 CSS UI 框架。

其它（Others）

• UIkit (opens new window) - 轻量级的现代化前端模块化 CSS 框架。
• Framework7 (opens new window) - 跨平台 UI 库，支持 Android/ios/Desktop 平台，且主题样式设计适配相应平台。
  • Tailwind Mobile (opens new window)
• Onsen UI (opens new window) - 跨平台 UI 库，支持 Android/ios 平台，且主题样式设计适配相应平台。
• Metro 4 (opens new window)
• Bulma (opens new window)
• Office UI Fabric Core (opens new window) - Office 风格的 UI 库，Microsoft 公司发布。
• carbon-components (opens new window) - Carbon 设计风格，IBM 公司发布。
• Spectrum CSS (opens new window) - Spectrum 设计，Adobe 公司发布。
• Pure.CSS (opens new window) - 一组小的，响应式的 CSS 模块。
• Pico.css (opens new window) - 极小的针对语义化 HTML 的 CSS 框架。
• Layui (opens new window) - 适合后端开发使用。
• Semantic UI (opens new window) - 很受欢迎的组件库。（⚠️ 不再更新）
• Skeleton (opens new window) - 简单的响应式 CSS 框架。（⚠️ 不再更新）
• egjs (opens new window) - 提供多个可用的独立组件。
• Theme UI (opens new window) - 设计图框架。

独立组件

Independent UI components, only providing component modules that implement an interactive function.

• 表单组件（Form）

  • Cleave.js (opens new window) - 格式化输入框。
  • imask.js (opens new window)
  • tagify (opens new window) - 标签输入框。
  • flatpickr (opens new window) - 时间日期选择器。
  • layDate (opens new window) - 时间日期选择器。
  • Choices.js (opens new window) - 轻量的，可配置的输入框和选择器。

• 轮播（Carousel）

  • Swiper (opens new window)
  • slick-carousel (opens new window) - 功能丰富的轮播组件。（⚠️ 不再更新）
  • Glider.js (opens new window) - 轻量级滑动组件。
  • Flickity (opens new window)
  • lory.js (opens new window) - 轻量级滑动组件。（⚠️ 不再更新）
  • keen-slider (opens new window) - 轻量级滑动组件。
  • Siema (opens new window) - 无任何依赖的轻量级轮播组件。（⚠️ 不再维护）
  • Flicking (opens new window)
  • splide.js (opens new window) - 轻量的轮播组件。

• Lightbox

  • GLightbox (opens new window)
  • spotlight (opens new window)
  • lightGallery (opens new window)
  • Parvus (opens new window)

• 模态框（Modal box）

  • SweetAlert (opens new window) - 浏览器 Alert 弹框的替代，更漂亮美观。（⚠️ 不再更新）
  • SweetAlert2 (opens new window) - SweetAlert 的继承者。
  • Noty (opens new window) - 浏览器 Alert 弹框的替代，提供动画效果。（⚠️ 不再更新）

• 图片浏览（Image Browse）

  • Viewer.js (opens new window) - 图片列表预览。
  • Image Compare Viewer (opens new window) - 图片对比预览。
  • Cropper.js (opens new window) - 图片裁剪。
  • Medium Zoom (opens new window) - 图片缩放预览。

• 表格（Table）

  • Grid.js (opens new window) - 高级表格插件。
  • Frappe Datatable (opens new window)
  • RevoGrid (opens new window)
  • Cheetah-Grid (opens new window)

• H5 媒体（Audio & Video）

  • hls.js (opens new window) - HLS 协议支持。
  • video.js (opens new window) - 兼容大部分视频格式的视频播放器。
  • MediaElement.js (opens new window) - 非常漂亮的视、音频播放器。
  • Plyr (opens new window) - 很棒的视、音频播放器。
  • clappr (opens new window) - 视频播放器。
  • APlayer (opens new window) - 非常漂亮的音乐播放器。
  • DPlayer (opens new window) - 视频播放器。
  • Vime (opens new window) - 视频播放器。
  • Artplayer (opens new window) - 全功能 H5 播放器。
  • moovie (opens new window) - 转为电影播放的播放器。
  • wavesurfer.js (opens new window) - 音频可视化。
  • shaka-player (opens new window) - 视频播放器。

• 文件上传（File Upload）

  • FilePond (opens new window) - 文件上传。
  • DropzoneJS (opens new window) - 文件上传组件，支持拖放文件、图片预览功能。

• 拖拽布局（Drag Layout）

  • Muuri (opens new window) - 支持拖放布局、过滤动画等。
  • Packery (opens new window) - 需商业许可。
  • gridstack.js (opens new window)
  • DragSelect (opens new window) - 拖放布局，拖拽框选。
  • plain-draggable (opens new window)
  • draggable (opens new window)
  • DFlex (opens new window)

• 列表（List）

  • List.js (opens new window) - 为列表提供过滤、排序等功能。
  • Dragula (opens new window) - 支持拖放排序的列表组件。（⚠️ 不再维护）
  • SortableJS (opens new window) - 支持拖放排序的列表组件，支持 React.js、Vue.js 等。

• 过滤器（Filter）

  • Isotope (opens new window) - 列表过滤动画。
  • FilterizR (opens new window) - 过滤搜索动画。

• 用户引导（User guided tours）

  • Driver.js (opens new window)
  • Shepherd (opens new window)
  • intro.js (opens new window) - 商业收费。

• 编辑器（Editor）

  • TOAST UI Editor (opens new window) - 所见即所得编辑器。
  • slate (opens new window)
  • Quill (opens new window)
  • Editor.js (opens new window)
  • CodeMirror (opens new window) - 代码编辑器。
  • Ace Editor (opens new window) - 代码编辑器。

• 窗口布局（Window layout）

  • WinBox (opens new window) - 窗口组件。
  • golden-layout (opens new window) - 多窗口布局管理。

• 其它（Others）

  • NProgress (opens new window) - 页面顶部进度条，加载指示器。
  • PACE (opens new window) - 页面加载指示器。
  • TOAST UI Calendar (opens new window) - 强大的日历日程组件。
  • FullCalendar (opens new window) - 日历日程组件。
  • fullPage (opens new window) - 全屏滚动页面。
  • mailgo (opens new window) - 邮件和电话系统行为。
  • PulltoRefresh (opens new window) - 下拉刷新。
  • Tweakpane (opens new window) - 可快速创建跟踪值变化和调节的控制面板。
  • Holder.js (opens new window) - 图像占位符。
  • simple-drawing-board.js (opens new window) - 简单画板。
  • simple-keyboard (opens new window) - 虚拟键盘。
  • Tippy.js (opens new window) - 工具提示组件。
  • Smooth Scrollbar (opens new window) - 自定义滚动条，替代原生滚动事件。
  • OverlayScrollbars (opens new window) - 自定义滚动条。
  • sharer.js/ (opens new window) - 创建社交网站分享按钮。
  • ninja-keys (opens new window) - 为页面添加键盘快捷键导航功能界面。
  • InfiniteGrid (opens new window) - 无线网格布局。

UI 模板

UI template.

• tabler (opens new window) - 开源免费的可视化管理页面模板。

开发框架

Web front-end development framework (library).

• virtual DOM

  • React.js (opens new window) - 数据驱动的视图库，Facebook 公司发布。
    • Awesome-React.js
  • Vue.js (opens new window)
  • Million (opens new window) - 一个与库无关的虚拟 DOM 实现。
  • Hyperapp (opens new window) - 轻量的，纯函数式，声明式开发框架。
  • Snabbdom (opens new window) - 基于虚拟 DOM 机制，模块化、高性能开发框架。
  • mithril.js (opens new window)

• MVC

  • Backbone.js (opens new window) - 为 Web 应用开发引入 MVC 模型概念。

• MVVM

  • Knockout。js (opens new window)

• Angular.js (opens new window) - 一个比较重型的功能齐全的前端开发框架，Google 公司发布。（⚠️ 不再更新）

  • Angular (opens new window) - Angular.js 的继承者，支持全平台开发。

• Ember.js (opens new window) - 基于 Glimmer 引擎的 Web 全栈框架。

  • Glimmer.js (opens new window) - DOM 渲染引擎。

• Svelte (opens new window) - 更轻量的前端 UI 库。

  • Sapper (opens new window) - 基于 Svelte 的 Web App 开发框架。

• Web Components (opens new window)

  • LitElement (opens new window) - 用于创建 Web 组件的基类工具库。
  • Hybrids (opens new window) - 用于创建 Web 组件的 UI 库。
  • Riot.js (opens new window) - 基于组件的 UI 库。

• Marko (opens new window) - 声明式、响应式开发框架，流式渲染。

• Inferno (opens new window) - 类 React API 的 UI 库。

• Solid (opens new window) - 纯粹的反应式框架，基于 React 的理念，底层实现不再使用虚拟 DOM。

• Alpine.js (opens new window) - 轻量的 JavaScript 框架。

• Aurelia (opens new window)

应用状态管理

Application state management tool for modern web application development.

（Recommend）Redux 生态技术，👉 https://github.com/markerikson/redux-ecosystem-links

• Redux (opens new window)

  • Redux Thunk (opens new window) - 中间件，提供异步支持，官方发布。
  • Redux-Saga (opens new window) - 提供异步支持，比 Redux Thunk 功能更丰富，易于测试。
  • Reselect (opens new window) - 状态缓存，提高性能，官方发布。
  • Redux-Persist (opens new window) - 状态持久化。
  • Redux Logger (opens new window) - 中间件，调试工具，追踪状态变更日志。
  • Redux DevTools (opens new window) - Chrome 插件，调试工具，追踪状态变更日志，重放、快照等功能。
  • Redux Toolkit (opens new window) - 集成大部分第三方库、预配置的工具套件，使 Redux 更易于使用，官方发布。
  • Rematch (opens new window) - 对 Redux 进行了封装，提供更简单、更易理解、更容易使用的 API。

• MobX (opens new window)

• Flux (opens new window) - 应用状态管理，Facebook 公司发布。（⚠️ 不再积极更新）

• xstate (opens new window) - 基于状态机模型。

• Tools

  • Immutable.js (opens new window) - 不可变数据。
  • Immer (opens new window) - 不可变数据。

PWA

Progressive web apps (opens new window).

• PWA Inside (opens new window) - PWA 应用资源和商店。
• Progressive Web Apps (opens new window) - PWA 应用相关文章。
• Add a web app manifest (opens new window) - PWA 应用 manifest.webmanifest 文件中建议的字段。
• What PWA Can Do Today (opens new window) - 在线测试 PWA 应用可以调用的 Web API。
• Progressier (opens new window) - 轻松创建 PWA。
• WorkBox (opens new window) - Google 专门为构建 PWA （Progressive Web App，渐进式 Web 应用）提供的一套开发工具，支持多个平台，并提供了方便的 webpack 插件。

深入探索

Explore the principles behind the technology, the underlying architecture, etc.

JS 引擎/运行时

Javascript Engine/Runtime.

• 核心库（Core Library）

  • SpiderMonkey (opens new window) - Firefox 浏览器 JS 引擎，Mozilla 开发。
  • QuickJS (opens new window)
  • JavaScriptCore (opens new window)
  • Hermes (opens new window) - 为 React Native 准备的 JS 引擎，Facebook 开发。

• 实现分析（Implementation Analysis）

  • Tasks, microtasks, queues and schedules (opens new window) - JS 中的任务、微任务、队列和调度过程。
    • JavaScript Visualizer 9000 (opens new window) - 可视化脚本执行，任务队列，微任务队列，UI 更新的过程。
  • JavaScript Event Loop vs Node JS Event Loop (opens new window) - 浏览器中的 JS 事件循环。
  • ES modules: A cartoon deep-dive (opens new window) - ES module 的实现分析。

抽象语法树

Abstract syntax tree.

• Read JavaScript Source Code, Using an AST (opens new window) - 文章，通过 AST 了解 JavaScript 源码。
• AST Explorer (opens new window) - 在线预览 JavaScript 代码片段的 AST。

性能分析

Performance analysis.

• 概念（Concept）

  • Web Vitals (opens new window) - Web 性能指标，Google 提出，并提供 npm 工具包。
  • Front-End Performance Checklist 2021 (opens new window) - 前端性能检查清单。

• 工具（Tools）

  • Perfume.js (opens new window) - 性能监控工具。

应用架构

Application architecture patterns.

• Jamstack (opens new window) - 一种构建现代 Web 应用或网页的架构模式。
• Theoretical foundations for server-side rendering and static-rendering (opens new window)

其它

something more in-depth.

• What does 100% mean in CSS (opens new window) - CSS 中 100% 的含义。
• The complete guide to CSS media queries (opens new window)
• Web Applications 101 (opens new window)

更多

More useful related resources.

CDN

Content distribution network, static resource hosting.

• Global

  • jsDelivr (opens new window)
  • UNPKG (opens new window)
  • cdnjs (opens new window)
  • Google Hosted Libraries (opens new window)
  • ESM (opens new window) - 用于 ES Module 格式。
  • Skypack (opens new window)
  • jspm (opens new window)

• China

  • BootCDN (opens new window) - Bootstrap 中文网维护，cdnjs 的国内同步源。
  • 75CDN (opens new window) - 奇虎 360 前端团队奇舞团维护。
  • Staticfile CDN (opens new window) - 七牛云与掘金维护。
  • loli.net (opens new window) - cdnjs 的国内同步源。

在线工具

Some online resources, such as CDN, image compression tools, online IDE, etc.

• Web 安全（Web Security）

  • SRI Hash Generator (opens new window) - SRI (opens new window) 的 hash 生成。

• Web 优化（Web Optimization）

  • Lighthouse (opens new window) - Google 提供的一个网站优化检测分析工具，已被集成在 Chrome 开发工具中，也可以作为 Chrome 扩展或者命令行工具使用，Google 官方提供。
  • PageSpeed Insights (opens new window) - Google 提供的在线网站性能检测工具，提供优化建议和技巧，Google 官方提供。
  • Mobile Friendly (opens new window) - 测试网页是否移动端友好。
  • webhint (opens new window) - 类似 Lighthouse，OpenJS 基金会项目。
  • Waterfaller (opens new window) - 用来分析站点网络请求并提供优化建议的工具。
  • Yellow Lab Tools (opens new window) - 站点分析优化工具。
  • Varvy SEO tool (opens new window) - 一个在线网站 SEO、性能检测工具，提供优化建议和技巧。
  • What Web Can Do (opens new window) - 可以检测当前设备所支持的 Web API，主要检测硬件设备传感器等，非官方网站。

• 在线 IDE、编辑器（IDE / Editor）

  • CodeSandbox (opens new window) - 支持预配置的目标，例如 React.js 等。
  • StackBlitz (opens new window) - 支持预配置的目标，例如 React.js 等。
  • CodePen (opens new window)
  • JSFiddle (opens new window)
  • JSitor (opens new window)

• 其它（Others）

  • bit (opens new window) - 构建可重用组件的协作平台。
  • Prettier Playground (opens new window) - Prettier 代码格式化工具的在线版本。

其它

Other unclassified resources.

• JavaScript Open Source Award (opens new window) - JavaScript 开源项目奖，非官方。
• You Don't Need (opens new window) - 随着语言规范的更新，一些第三方工具库可以不再使用，用原生 JS 来实现。