这些前端资源，你值得拥有

笔记地址

因为之前学习前端的收集书签的资源太多，所以就在今年3、4月开始抽空整理了所有的书签资源，并归类，现在分享给大家，欢迎给我 提 issue or PR

Github, 知乎，掘金

• Github

• 知乎

• 掘金

因为图片太多，所以整理出来一版无图的，如果你觉得有图更好，欢迎跳转带图片的版本

DevDocs: API Documentation Browser -> Github

框架

React

React是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。

React - Antd: antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

UxCore: 为企业级后台而生的PC组件库。

ZanUI: PC、移动、小程序

React.part: 查找React的组件

Vue

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。 在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。

Vue - Antd

IView: 一套基于 Vue.js 的高质量

Element: Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Mint UI: 基于 Vue.js 的移动端组件库

VUX: 一个凑合的 Vue.js 移动端 UI 组件库

Vue-Map: 基于 Vue 2.x 和高德地图的地图组件, Vue-Map文档

Nodejs

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。Node.js由Node.js基金会持有和维护，并与Linux基金会有合作关系。

Express： 高度包容、快速而极简的 Node.js Web 框架

koa

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

egg: 为企业级框架和应用而生

Nodejs学习笔记

Javascript

现代 Javascript 教程: 从基础知识到高阶主题，只需既简单又详细的解释。

Philip Roberts: Javascript可视化运行 -> Github -> Demo

Lodash: Lodash是一个JavaScript库，它使用函数式编程范例为常见的编程任务提供实用程序功能。

Ramda: 一款实用的JavaScript 函数式编程库。

Underscore : -> Github: Underscore.js是一个JavaScript库，为常见的编程任务提供实用程序功能。它与Prototype.js和Ruby语言提供的功能相当，但选择功能性编程设计而不是扩展对象原型。

30 seconds of code -> Github: 精心收集的有用的 JavaScript 代码片段，可以让你在 30 秒或更少的时间内理解

AST Explorer: 用于探索各种解析器生成的AST的Web工具。

JavaScript 版本兼容性查询

前端代码片段

flaviocopes: 一些JavaScript编程教程

Web 相关

Can I Use: 查询浏览器的特性支持情况

Package Different

查询 NodeJS 的 ES2018 特性支持情况

Web Dev: Google官方Web开发者资源

Mock

Easy-Mock: 高效伪造数据

Mock.js:生成随机数据，拦截 Ajax 请求

Rapid-Api: 构建块来增强您的应用程序, 发现并连接世界上最大的API中心的数千个API.

动画库(Javascript & CSS)

Threejs -> Github

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub

Animate.css: 一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

Animejs: Anime.js是一个轻量级JavaScript动画库，具有简单但功能强大的API。它适用于CSS属性，SVG，DOM属性和JavaScript对象。

TweenMax.js

适用于移动端和现代互联网的超高性能专业级动画插件。

Tweenmax是GreenSock 动画平台的核心，配合其他插件 可动画CSS属性、滤镜效果、 颜色、 声音、 色彩、 帧、 饱和度、 对比度、 色调、 色系、 亮度、 贝塞尔

GreenSock: 适用于现代网络的超高性能专业级动画

Notes: 11 JavaScript Animation Libraries For 2019

Kubt.js -> Github: KUTE.js是一个Javascript动画引擎，具有顶级性能，内存效率和模块化代码。 它提供了大量工具来帮助您创建出色的自定义动画。

Hover -> Github: CSS3动力悬停效果的集合，适用于链接，按钮，徽标，SVG，特色图像等。 轻松应用于您自己的元素，修改或仅用于灵感。 提供CSS，Sass和LESS。

css-tricks: 分享使用CSS样式的技巧、经验和教程等。值得前端开发者阅读收藏的国外网站。

V8 引擎: 了解支持 Chrome 和 NodeJS 的 Google 开源高性能 Javascript 和 WebAssembly 引擎

测试框架

Mocha -> Mocha GitHub: Mocha是Node.js程序的JavaScript测试框架，具有浏览器支持，异步测试，测试覆盖率报告以及任何断言库的使用。

Chai -> Chai Github: Chai是节点和浏览器的BDD / TDD断言库，可以与任何javascript测试框架愉快地配对。

Jest -> Jest Github: Jest是一个令人愉快的JavaScript测试框架，专注于简单性。它适用于以下项目：Babel，TypeScript，Node，React，Angular，Vue等等！

Karma: 一个 runner ， 旨在帮助开发者简单而又快速的进行自动化单元测试 -> Github: karma测试框架的前世今生

Tape Github

jsPerf — JavaScript performance playground -> GitHub

优秀项目 & 插件

Webpack

Webpack config tool: webpack 配置工具

BootCDN: 稳定、快速、免费的前端开源项目 CDN 加速服务

BootStrap

BootsWatch: Free themes for Bootstrap

RxJS: 使用Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。-> Github -> 中文文档

Layui -> Github

Awesome Lists

图表库

Echarts -> Github

AntV -> Github

G2

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

G6

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。

F2

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。

L7

L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视化能力。L7 的目标是提供一套地理空间数据可视化框架，易用易扩展，支持海量数据的高性能和 3D 高质量渲染，安全可靠（无地图法务风险）的地理空间数据可视化解决方案。

Recharts -> Github

Datamatic

开发资源

Awesomes前端开发资源

语雀 IT 百科精品知识库

算法学习 & 机器学习

Rappid算法学习

AI算法工程师手册

机器深度学习

VisuAlgo - 数据结构和算法动态可视化 (Chinese)

Algorithm Visualizer -> Github

Papers With Code : the latest in machine learning

Data Structure Visualizations: 旧金山大学CS Data Structure

BestofML: 收集汇总了机器学习相关的资源，包括书籍、课程、博客、论文等 -> Github

internetfundamentals：了解Web的工作原理，并迈出创建网页的第一步！ 一个完全免费的视频课程，适合初学者

数学知识学习

微积分

线性代数

概率论

最优化方法

Math ∩ Programming

Immersive Linear Algebra: 一本会动的线代书，O(∩_∩)O哈哈~

机器学习的数学基础知识 ->Github -> Download

机器学习 - The Hundred-Page Machine Learning Book

MIT 的数据结构课程

计算机科学速成课(视频): Youtube 热门视频课程

Linux

Linux命令大全

Explain Shell -> Github: 一个解释 shell 的网站，你不理解某个命令的时候，在网站输入这个命令，网站会自动帮你分解解释对应参数的意思。

Iodide: Mozilla支持的在 Web中实现各种数据科学的效果 -> Github

Icon & 设计 & 网页

Iconfont

FontAwesome

Ionicons

Icomoon

Mobiriseicons

zwicon

unDraw

优设

uiforus

它免费提供设计素材、插件、工具，其中设计素材包括：UI 、图标、网页、插画、实物、桌面、组件、表单、字体，并且按照不同的设计软件对应的文件进行分类，包括：Photoshop 、Sketch 、Adobe Xd 、Illustrator 文件。

Product Hunt: 产品相关

Issue Hunt: issue需要帮助或者有余力去帮助别人，当然也可以赚钱哦

网络安全的教程

以一个黑客的角度将你带入，它配套了十几个小demo，一步一步带你发现各种各样的安全漏洞。因为这些demo都是交互式，玩起来很带感。

开发社区 & 学习社区

Medium: 轻量级内容发行的平台，允许单一用户或多人协作，将自己创作的内容以主题的形式结集为专辑（Collection），分享给用户进行消费和阅读

Stack Overflow: 最好的软件类问答网站了，给软件开发人员工作和学习提供了非常大的便利

Vue.js 社区

React.js社区

掘金

InfoQ: InfoQ 是一个实践驱动的社区资讯站点，致力于促进软件开发领域知识与创新的传播。

w3cplus

V2EX

大前端

开源中国

segmentfault

best-chinese-front-end-blogs: 收集优质的中文前端博客

softnshare

路径及文章

众成翻译

Fly63前端

博客 & 团队

阮一峰ES6入门

廖雪峰官网

AlloyTeam - 腾讯Web前端团队

IMWeb前端社区

凹凸实验室

淘宝前端团队FED

奇舞团

腾讯互娱

FEX 百度前端研发部

JDC 京东设计中心

携程UED

饿了么前端

美团前端

路径

程序员不能错过的28份技术知识图谱，你的进阶路上必备

学好机器学习需要哪些数学知识?

浏览器的工作原理

工具

Repl.it: 不要浪费时间建立一个开发环境。它为您提供了一个即时的IDE，让您可以在一个地方学习、构建、协作和托管所有内容。

Glitch

正则表达式可视化工具

Regulex

Regulex是一个JavaScript正则表达式可视化工具，由纯JavaScript实现，源码托管在Github上。

Regexper

Regexper是由Jeff Avallone开发的一款JavaScript正则表达式可视化工具，源码托管在Github上。它能够让正则表达式字符串以 Railroad形式图形化，便于阅读和理解。同时推荐一款 JavaScript 正则在线测试工具——Regexpal，可以和Regexper 配合使用。

Debuggex

Debuggex是一个测试正则表达式的Web应用，它支持JavaScript、Python以及PCRE。

国际化应用的利器: 发现一个制作国际化应用的利器。该网站收集各种语言包，你输入中文，它返回各种语言包对这个词的翻译。

前端网站导航

D2日报

心谭博客