jingluochen / front-end-resources

前端资源整理收集文档，主要面对一些优秀的blog，技术文档，面试等资料

Font-End-Resources

前端资源整理收集文档，主要面对一些优秀的blog，技术文档，面试等资料

• React框架有关资源
• Vue框架有关资源
• 小程序
• 2019 前端工程师手册（front-end-handbook-2019）★★★★★
• 阮一峰：互联网上的免费书籍
• 各种框架渲染速度

NEW（最新更新）

• showdoc: 一款基于 JavaScript 实现的开源在线文档工具
• 每个 JavaScript 工程师都应懂的33个概念
• Filepond：一个可以让你通过拖曳上传内容的 JavaScript 库。Filepond 21 KB大小，可用于 Vue、React、Angular。
• 一个优秀的前端都应该阅读这些文章
• Zdog: 一款用于用于 Canvas 和 svg 的 JS 3D 渲染引擎
• big.js: 任意精度计算

前端大牛资源

• CS-Notes: 技术面试必备基础知识、Leetcode 题解、Java、C++、Python、后端面试、操作系统、计算机网络、系统设计

• 冴羽的博客

• 木易杨：前端进阶官网

• yck: 前端真好玩(前端面试之道作者)

• 第一名的小蝌蚪: 每周十道前端大厂面试题

• 五月君: Nodejs技术栈

• 浪里行舟

• 前端瓶子君: JS、React 源码

计算机基础和网络

• HTTP

• 计算机网络

• 计算机操作系统

• Linux

• VeryNginx: 功能强大而对人类友好的Nginx 扩展程序

• Linux命令大全搜索工具

HTML

• MDN HTML 中文文档

• 前端代码规范 (腾讯 AlloyTeam 团队)

• web docs MDN

• 12个HTML和CSS必须知道的重点难点问题

CSS

• 30 Seconds of CSS 中文版

• 30 Seconds of CSS

• 各种页面常见布局+知名网站实例分析+相关阅读推荐

• You-need-to-know-css

• Can I Use

• CSS3 Generator

• CSS-Tricks

• Animate CSS

• 干货!各种常见布局实现+知名网站实例分析

• BFC (Block Formatting Context)

• CSS之BFC详解

• 一劳永逸的搞定 flex 布局

• Saas详解

• Grid Garden

• Flebox Froggy

• PostCSS

• CSS Triggers

• CSS NEXT

• Jank Free

• matrix3d

• CSS-Matrix3d

• matrix

• tools

• Animate.css

• Object-Oriented CSS(OO CSS 面向对象编程Css)

• Hover.css: 鼠标Hover态的效果

• ihover: 鼠标Hover图片效果

• imagehover.css: 鼠标Hover图片效果

• WOW: 在滚动过程中展示CSS动画效果(默认触发animate.css动画)

• Pure.css: 一组轻量级、响应式纯css模块

• 最短的CSS样式，勾勒大数据演示屏

• 45个值得收藏的 CSS 形状

• cssfx: 即拿即用的 CSS 小功能

CSS Reset

• Neat.css

• normalize.css

CSS Tools: Reset CSS

• Hint.css

JS

• You-Dont-Know-JS

• 30-seconds-of-code

• 七天学会NodeJS

• 冴羽的博客

• JavaScript 秘密花园

• ECMAScript 6入门(阮一峰)

• JavaScript 标准参考教程(阮一峰)

• JavaScript教程 (廖雪峰)

• 轻量函数式 JavaScript

• promise 手册

• ScriptOJ: Web 前端开发评测系统

• 精心收集的 95 个超实用的 JavaScript 代码片段（ ES6+ 编写）

• do you really know JavaScript?

• Js tips

• 37 Essential JavaScript Interview Questions

• javascript 的 12 个怪癖（quirks）

• JavaScript Promise迷你书

• MDN JavaScript 中文文档

• 现代 JavaScript 教程: The Modern JavaScript Tutorial

• nzh：阿拉伯数字与中文数字相互转化的 JS 库

• request: JavaScript 简单、易用的 HTTP 请求客户端

• JavaScript 进阶问题列表，包含答案

• licia: 比较实用的 JS 工具库，内置了很多可能在工程中经常会用到的工具函数。

TypeScript

• TypeScript Deep Dive 中文版

Jquery

• Jquery

• Jquery插件库

NodeJs

• Node入门

• 七天学会NodeJS

• express

• koa

• Node.js 包教不包会

• Learn You The Node.js For Much Win!

• Node.js学习笔记

• N-blog: 一起学 Node.js学习笔记

Electron

• Motrix: 桌面下载工具，支持下载 HTTP、FTP、BT、磁力链、百度网盘等资源

• gridea: 一个静态博客写作客户端

• Strawberry-Wallpaper: 采用electron-vue开发的壁纸应用app

框架工具

VUE

• VUE框架

• Vue资源精选

组件库

• NUXT：通用应用框架

• VANT

• VUX 移动端UI框架

• VUE-ANTD

• Element

• iView

• Muse-UI

• Keen UI

• AT UIKIT

• v-charts

• D2Admin: 基于vue的清新后台模板

• TouchUI: 一套完全免费的高质量移动端UI框架

• vue-element-admin: vue后台管理系统

Weex

• Weex官网

• Weex Ui

• MinUI: 基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库

PWA

• PWA-Book-CN

• LAVAS: UI

微信小程序

• Taro：多端统一开发解决方案

• wepy: 让小程序支持组件化开发的框架

• mpvue: 一个使用 Vue.js 开发小程序的前端框架

• iVew Weapp: 一套高质量的微信小程序 UI 组件库

• Remax: 使用真正的 React 构建小程序

• uni-app：一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台

多端

• Flutter: Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK

其它

• docsify

• gittalk

• vuep

• 快应用

• turn.js

数据结构、算法、设计模式

• 算法

• 剑指 Offer 题解

• Leetcode 题解

• 设计模式

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

• leetcode题解 个人解题之路

FE综合

• 腾讯移动Web前端知识库

• 十大经典排序算法总结（JavaScript描述）

• 前端数据结构与算法总结

• Git飞行规则

• HelloGithub: 一个分享 GitHub 上有趣、入门级的开源项目

• Git的奇技淫巧

优秀框架插件

• Swiper：纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

• wechat-h5-boilerplate:为腾讯微信优化的H5动效模板，帮助你快速构建全屏滚动型H5页面

• editor.md: 一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建

• share.js: 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等

• nodeclub: 网页版演示库

• clipboard: 点击复制

• screenfull.js: 极小、跨平台的 JavaScript 全屏插件

• weweChat: 微信的第三方客户端

• flatpickr: 扁平化的日期选择组件

• carbon: 以美观、整洁的方式，展示你的代码片段

• Shepherd: 一款便于我们为一款产品做新手指引的工具库，通过一些简单的api就可以实现该功能，目前对于Vue，React，Angular，Ember框架都有支持

• markdown-nice: 支持自定义样式的微信 Markdown 排版工具

• xgplayer: 由字节跳动西瓜视频开源的带解析器、能节省流量的 HTML5 视频播放器

• vConsole: 一个轻量、可拓展、针对手机网页的前端开发者调试面板

计算机图形学

• A Primer on Bézier Curves

• OpenGL 教程

• WebGL中文网

• Three.js

• EffectHub Cocos2dx 特效编辑器

• AlloyStick: 骨骼动画引擎

• Cocos

可视化

• Echarts

• AntV

• D3

• Three

• Highcharts

• ichartjs

• Fusioncharts

• echartsMap: 全国区县GeoJSON

• 国内省市区的地图JSON文件

• datav地图选择器

游戏框架

• 白鹭引擎

• PhaserJs

• Cocos Creator

机器学习

• TensorFlow 官方文档中文版

面试资料

• Interview-Questions-Answers

• 前端开发面试题

各大前端技术网站

• 腾讯AlloyTeam

• 腾讯TGideas

• 淘宝前端团队FED

• 阿里巴巴国际UED团队

• 百度前端团队FEX

• 百度EFE

• 奇虎360前端团队

• 京东凹凸实验室

• JRFE：京东移动研发部

• 携程UED

• 新浪UED

• 前端圈

• W3C：大漠

• 伯乐在线

• WEB前端开发

• 蚂蚁数据体验技术团队博客

前端特效资源收集

• CODEPEN：优秀DEMO展示，很强大

• 5iweb网页特效库

• 酷炫的配色COLORS

• 前端观察

• F2EX

• Hellogirl

• JQuery插件库

字体图标

• IconFont（推荐）

• Font Awesome

• IcoMoon

• Material Icon

• Fontello

• Glyphicon Halflings

• FontSpider: 字蛛是一个中文字体压缩器

• IconJar

• Icon Store

• 开源图标库 Remix Icon

资料整理

• 免费的编程中文书籍索引

在线工具

• 图片压缩

• PNG ALL

• 智图：图片优化

• squoosh: 谷歌开源的图片压缩工具

配色网站

• Palettable

• Color Library

• Flat UI Colors2

• Pigment

• Colorado

• Brandcolors

• Brandcolors

• Colorwise

• The Colorbook

• CSS Gradient

• CoolHue

其它

• Main Controls

• Shell脚本编程30分钟入门

• 开源的卡通头像生成器

• 搜索多语言翻译

• 小霸王模拟器: 提供魂斗罗、冒险岛、热血格斗传送、超级马里奥等经典游戏供玩家体验

• 网易云音乐 Node.js API service

• 谷粒-Chrome插件英雄榜

• Github星聚弃疗榜

• shields.io 主要是用来可以生成 在Markdown 文档中的徽章，我们经常在github的项目上看到这些徽章，来表述比如单元测试覆盖率、打包的大小、版本信息、认证信息等