前端开发

⬅︎ 返回上层

TOC

其他

框架

  • single-spa: Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you’re using)

表单

物理引擎

HTML

  • HEAD: HEAD 里放什么?
  • lit: a simple library for building fast, lightweight web components

A11Y

Code Lint

Browser Feature Detection

  • MDN - Implementing feature detection
  • feature.js: 检测 async, addEventListener, canvas, classList, cors, contextMenu, css3Dtransform, cssTransform, cssTransition, defer, deviceMotion, deviceOrientation, geolocation, historyAPI, placeholder, localStorage, matchMedia, pictureElement, querySelectorAll, remUnit, serviceWorker, sizes, srcset, svg, touch, viewportUnit, webGL
  • Modernizr: 检测 HTML5 和 CSS3 特性
  • feature-detect-es6: 检测 ES2015 以上的特性

文件上传

ECMAScript

有限状态机 && Statechart

状态管理

  • effector: 基于 hook 的状态管理。很干净,没有多余的概念。跨框架。
  • zustand: 待评价
  • jotai: 待评价

声音

  • Tone.js: A Web Audio framework for making interactive music in the browser.

Cheatsheet

存储

Fast-Development

AJAX

Mock

模块加载器

编译工具

  • webpack: 编译框架或应用的工具。配置项多,方便高端玩家定制
  • esbuild: Go 开发的,超级快
  • SWC: Rust 开发的,超级快 -turbo: Rust 开发的。「待评价」
  • parcel: 编译框架或应用的工具。零配置
  • rollup: 编译类库时首选工具。零配置
  • fuse-box: 「待评估」
  • pikapkg/web: 「待评估」直接在浏览器端下载安装 npm 包
  • pikapkg/pack: 「待评估」编译打包工具

Webpack

analyzer

UI 组件

  • noty: 通知提示

Loading Spinner

React 组件

React

DevTools

UI Component Explorer

IDE

教程

React-Native

排版 Typography

  • typography.js: A powerful toolkit for building websites with beautiful design
  • textblock: for adjusting size, leading, and grades to cast continuously responsive typography
  • FlowType.JS: 根据容器宽度自动调整字号

中文排版

CSS

教程

CSS in JS

  • styled-components: 字符串模板
  • emotion: 比 styled-component 更灵活。可以单独设置样式 (css api),不基于 DOM 类。可以用字符串模板,也可以用函数传参,结合 styled-components 和 glamorous 的优点。
  • styled-system: Style props for rapid UI development
  • polished: CSS helper functions for CSS in JS

CSS in JSX

CSS Module

PostCSS

CSS Schema

栅格/网格/Grid

参数可视化

  • dat.gui: 轻量级动态修改 JS 变量的 GUI 接口

动效

2D

3D

粒子效果

滚动条

  • aos: 滚动触发动效

UI/绘图

2D

3D

数据可视化

图表

组件库

  • visx: D3 + React 技术栈。容易组合底层组件
  • nivo: D3 + React 技术栈。拿来即用的组件

测试

  • jest: 测试框架,前后端通用,支持 ts、babel 等扩展。
  • cypress: 非常酷炫的,大而全的,前端自动化测试框架。
  • enzyme: JavaScript Testing utilities for React
  • playwright: 浏览器 UI 自动化测试工具。支持多种内核 (Chromium, Webkit, Firefox) 的浏览器自动化操作。微软出品。

响应式

Headless Browser

Profiling

日志

兼容性检查

Polyfill

CDN

用户导引 Walkthrough

  • driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page
  • reactour: Tourist Guide into your React Components

待评价

UI component explorers

参考自 https://archive.ph/LDHnV


其他人的工具列表