1.常用网站

github fe-tools

1.1 HTML/CSS/JavaScript

地址 标签 说明
MDN 文档手册 html/css/js 很全很有用的查询网站。
W3C官网 html/css/js W3C官方,不解释。
html中文网-css教程手册 css 快速查询css属性及基本使用。
canvas速查手册 canvas 一目了然canvas的api方法。
VML 参考手册 VML(IE) *微软开发的在低端IE上运行的“SVG”。
ES6入门(阮一峰) ES6 使用频率最高的ECMAScript6文档。
ECMA International(6) China ES6 ECMAScript6官方文档,部分中文翻译。
ECMA International(6) ES6 ECMAScript6官方文档。
TypeScript中文文档 typescript TypeScript官网文档。
Typescript Handbook typescript TypeScript使用手册。
Web API Reference html5 HTML5 web API查询,如摄像头/地理位置。
Safari HTML Ref查询 html Safari webview的HTML标签查询,某些ios特殊的属性或表现可以查这个。

1.2 兼容/查询

地址 标签 说明
can i use -- 使用频率最高的兼容支持查询网站。
ES兼容查询 js ECMAScript兼容查询。
IOS字体支持查询 ios font IOS系统自带字体查询。
Web安全色查询 web color 为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。
浏览器份额统计 browser 百度统计的市面上浏览器份额,(要Flash,Chrome不一定能看)。

1.3 CSS工具

1.3.1 预处理

地址 标签 说明
less文档 less 易上手的CSS预处理工具。
sass 文档 sass 热门的CSS预处理工具。
stylus 文档 stylus 功能丰富的CSS预处理工具。
stylus 文档(张旭鑫) stylus stylus中文文档。

1.3.2 后处理

地址 标签 说明
postcss 文档 postcss 被广泛运用的CSS后处理工具。
github-postcss postcss post插件库中心。
github-autoprefixer autoprefixer 自动补充浏CSS前缀的后处理工具。
cssnano官网 cssnano CSS优化和分解插件。
postcss-plugin-px2rem px2rem 将px单位转为rem单位的工具。
postcss-px-to-viewport px2vw 将px单位转为vw单位的工具。
cssnext官网 cssnext 让今天的我们写着明天的CSS特性。

1.3.3 样式库/模块

地址 标签 说明
animate.css bulma.css CSS3动画库。
Hover.css Hover.css 鼠标hover交互动画库。
bulma.css bulma.css 一款轻量级的CSS UI库。
cardinal.css cardinal.css 一款移动优先的less库。
bootflat.css bootflat.css 一款扁平化风格scss库,基于BootStrap3.3。
corpus.css corpus.css 一款scss集合库。
weui weui 微信风格的样式库,腾讯。
materialize.css materializecss Material风格的响应式前端样式框架。
mui.css MUI Material风格的轻量级前端样式框架。
Metro UI Metro UI 一款流行的响应式前端样式框架,React版
NES.css NES.css 游戏机风格的前端样式框架。
paper.css paper.css 手绘风格的前端样式框架。
css3 icon css3 icon 纯CSS实现的图标。
Bootstrap 文档 bootstrap 红极一时的前端样式框架。
fontawesome fontawesome 字体图标库。
iconfont iconfont 字体图标库,阿里。
normalize normalize 相对较优的CSS reset替代方案。

1.3.4 其他

地址 标签 说明
css tricks css tricks 包括布局、图标、动画等CSS技巧。
BEM bem BEM写法规范。
ACSS acss Atomic CSS,一种模块化写法规范。
IT.css itcss IT CSS,一种组件化写法规范。
CSS modules css-modules 一种CSS样式模块化的解决方案。
css in js css-in-js 用写js的方式生成css样式。
Moo-CSS moo-css 一种CSS写法方案。

1.4 JS插件/库

1.4.1 库

地址 标签 说明
jQuery api jQuery 红极一时的js库。
Zepto api Zepto 移动端使用的轻量级“jQuery”。
city.js city 全国行政区划分数据文件。
phaser.js phaser 2D游戏前端库。
fabric.js fabricjs 有名的svg和canvas相互转换的封装库。
babylon.js babylonjs 有名的3D游戏/视频框架。
stdlib stdlib js的数学增强库。
immutable-js immutable 生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持。

1.4.2 数据工具

地址 标签 说明
LoDash lodash 广为人知的函数式工具库。
ramda ramda 广为人知的函数式工具库。
UnderscoreJS underscorejs 红极一时的函数式工具库。
StreamJs streamjs 一款js数据的操作工具。
BaconJs baconjs 也是一款js数据的操作工具。
MomentJs momentjs 一款日期格式化的工具。
numbro numbrojs 一款多国语言的数字转化工具。
accounting.js accounting.js 数字,金钱的格式化工具。
money.js money.js 金钱的汇率转换工具。

1.4.3 请求、cookie和缓存

地址 标签 说明
axios axios 高频使用的ajax库。
fetch fetch Fetch API的兼容polyfill。
jsonp jsonp 不用多说,实现jsonp。(axios没有封装jsonp)
URI.js uri URI解析操作的工具。
StoreJs storage storage的封装库,兼容IE6。
js-cookie js-cookie cookie的封装库。
Dexie.js Dexie.js IndexedDB的封装库。

1.4.4 插件

地址 标签 说明
swiper.js swiper 轮播插件。
nanobar.js nanobar 绚丽的进度条展示插件,IE7+。
sweetalert sweetalert.js 还算库的PC alert展示插件。
bowserjs bowserjs 通过ua做的浏览器探测插件。
vConsole vconsole 被誉为移动端的开发者工具。
clipboard.js clipboardjs 剪切板控制插件。
Qrcode-generator grcode-generator 二维码生成工具。
html2canvas html2canvas html转为图片(canvas),即实现网页截图。
Pen Editor Pen Editor web的文本编辑工具。
cleave.js cleave.js 一款好用的input输入控制插件。
视/音频
地址 标签 说明
mediaelement.js mediaelementjs 一款视频控制插件。
video.js videojs 一款视频控制插件。
flv.js flvjs 一款无需flash的flv播放插件。
howler.js howlerjs 视、音频控制插件。
jplayer jplayer jQuery的视、音频控制插件。
audio5.js audio5js 一款音频控制插件。
图片
地址 标签 说明
caman.js camanjs 一款web图片处理插件。

1.4.5 工具

地址 标签 说明
md5.js md5 md5加密。
requirejs 文档 requirejs js模块化工具。
seajs 文档 seajs js模块化工具。
validate.js validate.js form表单校验工具。
validator.js validator.js 有名的内容校验工具,比如邮箱验证、数值验证等。

1.4.6 数据可视化(图表)

地址 标签 说明
highcharts highcharts 效果、兼容最好(ie6+)的可视化库,可惜企业要收费。
echarts echarts 国内最全面的可视化库。
d3 d3 不直接输出图形,输出开发功能的svg工具。
Chartjs chartjs 模块化可视化库。
antv G2/F2 包括pc/移动的可视化库,蚂蚁。
FundCharts fundcharts 本人的跨端轻量可视化库。
ThreeJs文档 threejs/webGL 3D建模工具
scene.js scenejs WebGL 3D基础库。
Snap.svg snap 一款svg操作库。
pixi.js pixijs 2D WebGL渲染引擎。
svg-3d-builder svg-3d-builder 3D SVG渲染引擎。

1.4.6 数据可视化(地图)

地址 标签 说明
cesiumjs Cesium.js 一款开源的3D城市建模库。
Kartograph Kartograph.js 一款普通的2D SVG城市数据展示库,IE7+。
leafletjs Leaflet.js 一款移动优先的地图展示插件。

1.4.7 h5动画

地址 标签 说明
Bounce.js BounceJS 牛啤的CSS3动画创建工具。
animateplus.js Animateplus 仅3k的动画工具。
svg.js svgjs 轻量的svg操作/动画库。
snapsvg Snap.svg 一款有名的svg操作/动画库。
lottie lottie web/原生/小程序的跨端动效方案。
EaselJS easeljs canvas动画操作库,CreateJS四剑客之一。
TweenJS tweenjs 动画曲线(ease/linear…)操作库,CreateJS四剑客之一。
SoundJS soundjs 音频控制库,CreateJS四剑客之一。
PreloadJS preload 资源预加载库,CreateJS四剑客之一。

1.4.8 移动端手势

地址 标签 说明
AlloyFinger.js AlloyFinger 增加移动端的各种手势事件。
hammer.js hammerjs 增加手势以及取消了移动端click的300ms延迟。

1.4.9 加载

地址 标签 说明
aload.js aload.js 异步图片/js/css加载工具。
layzr.js layzr.js 轻量图片懒加载工具。
lazysizes.js lazysizes 高性能的图片/iframe懒加载工具。

1.5 Vue

地址 标签 说明
Vue 文档 vue 官方文档。
vue-cli 文档 vue-cli vue脚手架工具文档。
vuex 文档 vuex vue数据流控制工具。
vue-router 文档 vue-router 基于vue的前端路由控制。
better-scroll 文档 better-scroll 控制滚动场景的插件。
vant 文档 vant 移动UI库,有赞。
vue-weui 文档 vue-weui weui风格的移动UI组件库。
Element 文档 element 使用PC中后台前端开发的UI组件库,饿了么。
iView 文档 iview PC UI组件库。
antd-vue 文档 antd-vue PC UI组件库,ant design的Vue版。
vue-i18n 文档 vue-i18n 多语言解决方案。

1.6 React

地址 标签 说明
React 文档 react 官方文档。
create-react-app 文档 create-react-app react脚手架工具文档。
react-router react-router 基于react的前端路由控制。
redux 文档 redux 广泛使用的数据流控制工具,reducer+flux。
flux 文档 flux 数据流控制工具。
mobx 文档 mobx 轻量数据流控制工具。
dvajs 文档 dvajs 基于 redux 和 redux-saga 的数据流方案,蚂蚁。
UmiJs 文档 umijs 可插拔的企业级 react 应用框架,蚂蚁。
NextJs 文档 nextjs 轻量级的 React 服务端渲染应用框架。
antd 文档 antd ant design,PC UI组件库。
antd-mobile 文档 antd-mobile 移动版的antd,UI组件库。
react-markdown react-markdown 在react上使用的markdown工具。
classnames classnames 操作className的工具,多用于React。

1.7 Nodejs和构建

地址 标签 说明
npm npm node包统一平台。
yarn yarn 高速的node包管理平台。
nodejs api node Node官方文档。
V8 v8 V8引擎介绍。

1.7.1 构建

地址 标签 说明
ejs ejs 简单上手的html模板引擎。
pug pug html模板引擎。
jade jade html模板引擎。
gulp 配置文档 gulp 自动化构建工具。
gulp plugins gulp gulp插件中心。
grunt 配置文档 grunt 自动化构建工具。
rollupjs文档 Rollup 一款ES6模块构建工具。
webpack 配置文档 webpack 应用面不能再广的打包工具。
parceljs 配置文档 parceljs 轻量打包。
babel babel 应用面不能再广的ES编译器。

1.7.2 服务端

地址 标签 说明
express 配置文档 express 轻量web应用程序开发框架。
Koa 文档 koajs web应用程序开发框架。
feathers.js feathersjs 轻量web应用程序开发框架。
Nest.js nestjs 强大的Web应用框架。
Mockjs 配置文档 mockjs 接口数据模拟工具,可以在客户端和服务端使用。
SheetJs sheetjs 通过node操作word的工具。
js-pdf js-pdf 通过node操作生成pdf的工具。
pm2 pm2 node进程管理。
colors.js colorsjs node log控制台输出颜色控制。

1.8 Hybird和跨端

地址 标签 说明
pwa pwd 渐进式web应用。
微信小程序官网 小程序/hybird 微信小程序开发官网。
支付宝小程序官网 小程序/hybird 支付宝小程序开发官网。
百度小程序官网 小程序/hybird 百度小程序开发官网。
wepy文档 小程序/hybird vue语法的小程序开发官网。
小程序工具集合 小程序/hybird 小米轻应用开发官网。
小米轻应用官网 轻应用/hybird 小米轻应用开发官网。
Oppo/vivo快应用官网 轻应用/hybird Oppo/vivo轻应用开发官网。
华为快应用官网 轻应用/hybird 华为轻应用开发官网。
React-native 文档 跨端 热门的react语法跨端工具。
Weex文档 跨端 热门的vue语法跨端工具。
Weex-UI文档 跨端/weex weex的UI组件库。
Taro文档 小程序/跨端 跨web/小程序/原生的react语法跨端工具。
uni-app文档 小程序/跨端 跨web/小程序/原生的vue语法跨端工具。
Flutter文档 跨端 超火的Dart语法的跨端开发工具。
Electron文档 跨端 windows应用的开发。

1.9 辅助工具

地址 标签 说明
正则表达式30分钟 regexp 正则上手教程。
whistle whistle web调试代理工具。
husky Husky NodeJS上的git工具。
eslint 文档 eslint js代码检查工具。
动画曲线查询 cubic 动画曲线查询网站(ease/linear…)
ImageMagick imagemagick 后台运用极广的图片处理工具。
GraphicsMagick gm 后台图片处理工具。
valineJS valine 评论系统工具。
GitTalk gittalk github的评论工具。
webIDE webide web上写代码。
Fusuma fusuma 用markdown写web ppt。
VuePress vuepress 用markdown写文档/博客
Hexo hexo 用markdown写文档/博客

1.10 测试、安全及加密

1.10.1 单元测试

地址 标签 说明
MochaJS文档 mocha 一款单元测试工具。
JestJS文档 jest 一款单元测试工具。

1.10.2 安全及加密知识

《浅谈前端安全》


《8大前端安全问题》


《前端加密那点事》


《HTTPS 到底加密了什么?》


《Web 端反爬虫技术方案》


《那些我们该讨论的前端加密方法》