笨鸟前端开发指南 - 笨鸟编程导航

开发必备

nodejs 开源的跨平台 JavaScript 运行时环境

WebStorm 一款专业的Go语言集成开发环境，提供智能代码编辑、调试、项目管理和丰富的生态系统支持

Sublime Text 一个简单、开源、跨平台的 Go 集成开发环境

VSCode 一款免费、开源的跨平台代码编辑器，提供了强大的代码编辑、调试、插件支持和版本控制等功能

Chrome DevTools 一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具

firebug 改变了开发人员在浏览器中检查 HTML 和调试 JS 的方式

NPM JavaScript包管理工具

会转头可调速的电扇超好玩的会转头可调速电扇的js源代码

有趣的蜡烛吹灭动画有趣的蜡烛吹灭动画的HTML+CSS源代码

一个可互动的路灯一个可互动的路灯的HTML+CSS源代码

可互动的开/关灯一个可互动的开/关灯的js源代码

飞机窗外的世界一个飞机窗外的世界的HTML+CSS源代码

JS加密在线 JS加密、JavaScript源代码加密

开发工具

编辑器富文本编辑器 API调试分析/调试错误监控

WebStorm 一款专业的Go语言集成开发环境，提供智能代码编辑、调试、项目管理和丰富的生态系统支持

Sublime Text 一个简单、开源、跨平台的 Go 集成开发环境

VSCode 一款免费、开源的跨平台代码编辑器，提供了强大的代码编辑、调试、插件支持和版本控制等功能

built with 网站技术分析工具

Chrome DevTools 一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具

firebug 改变了开发人员在浏览器中检查 HTML 和调试 JS 的方式

Raygun JavaScript错误监控工具

errorception JavaScript错误监控服务

sentry 错误监控和报告工具

{track:js} JavaScript错误监控工具

动画效果源码

会转头可调速的电扇超好玩的会转头可调速电扇的js源代码

有趣的蜡烛吹灭动画有趣的蜡烛吹灭动画的HTML+CSS源代码

一个可互动的路灯一个可互动的路灯的HTML+CSS源代码

可互动的开/关灯一个可互动的开/关灯的js源代码

飞机窗外的世界一个飞机窗外的世界的HTML+CSS源代码

CSS框架

框架/样式库预/后处理重置/规范生成/格式化检查/优化

Tailwind CSS 一个实用工具优先的css框架，可以快速构建现代网站，而不需要离开你的html

Bulma 免费、开源、基于Flexbox的现代CSS框架

Foundation 响应式前端框架

Bootstrap 流行的前端框架，支持响应式布局

Pure.css 轻量级的CSS模块库

Concise 简洁的CSS框架

Materialize 基于Material Design设计语言的CSS框架

Ratchet 移动应用的CSS框架

oocss 面向对象的CSS框架

SMACSS 可扩展和模块化的CSS架构

Blaze CSS 开放源码的模块化CSS工具包，为建立网站提供了很好的结构。

Flex.css flex.css is 是一个声明式的布局框架，能够兼容多个 MVVM框架和浏览器。

Jingle Jingle是一个基于html5、css3开发轻量级的移动webapp 框架，提供一些基本交互方式，帮助您更方便的开发移动应用。

Mobi.css 一个轻量级的，可扩展的，移动优先的CSS框架。

UIKit 轻量级的前端框架

Preline 一套开源的预构建 UI 组件，基于实用优先的 Tailwind CSS 框架

Eric Meyer’s “Reset CSS” 2.0 Eric Meyer的CSS重置样式

Normalize 现代浏览器的CSS重置样式

NEC(CSS规范) NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。

CSS TRIGGERS CSS属性触发的浏览器重绘和重排情况

cssguidelin.es CSS编码规范

Ultimate CSS Gradient Generator CSS渐变生成器

Enjoy CSS CSS样式生成器

CSS matic CSS在线生成工具

patternify.com 生成CSS背景图案的工具

patternizer.com 在线生成CSS图案的工具

CSS arrow please 生成CSS箭头的工具

Layer Styles 国外一个CSS3阴影在线生成器网站

CSS在线压缩工具 Css在线解压缩工具/整理/格式化。

Css3Maker CSS3在线生成器，给你省去很多功夫。

Trianglify Trianglify 是一款可以生成漂亮的三角形素材的工具，它还可以生成SVG或者CSS的背景。

MEZW 将PS中的投影效果转换为CSS3中的box-shadow & text-shadow代码

Flexplorer Flexbox布局生成器

cssvalues.com CSS属性和值参考

UI框架

UI组件库图标库动画库模板引擎

Tailwind UI 美丽的用户界面组件和模板的创建者的TailWind css

Preline UI 是一组开源的预构建的UI组件，基于公用事业优先的TailWind CSS框架

Ripple UI 最干净、现代和美观的TailWind CSS组件

Sira 可定制和可访问的设计系统，提供TailwindCSS组件类名库以构建现代UI

TW Elements 一个免费的开源用户界面组件、模板、部分和插件的集合。具有深色模式和主题定制选项

Mamba UI 包含免费组件和模板的UI工具包，这些组件和模板的样式是TailWind CSS

Kutty 一个用于构建Web应用程序的tailwind插件。它有一组可访问和可重用的组件，这些组件通常在Web应用程序中使用

Sailboat UI 现代的用户界面组件库，用于TailWind css。开始使用150多个开源TailWind CSS组件，轻松构建您的产品

HyperUI 免费的TailWind CSS组件，可以在您的下一个项目中使用。通过一系列组件，您可以构建您的下一个营销网站、管理仪表板、电子商务商店等

XtendUI 一个强大的前端库，它由普通的js增强了TailWind的css组件。它可以帮助您构建具有高级交互和动画的界面。

Vant 轻量、可靠的移动端Vue组件库

jQuery UI 基于jQuery 开发的一套界面工具

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

daisyUI 免费的最佳TailWind CSS UI组件库，提升你的界面设计

Webix 企业级UI组件库

Material UI React实现的Material Design组件

photonkit 为桌面应用设计的UI组件库

SVGO-GUI 基于 Node-WebKit 的 SVGO 图形用户界面

Jquery EasyUI中文网 easyui是一种基于jQuery的用户界面插件集合。

Rubik UI Rubik UI 是一个基于 Vue.js 2.0+ 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。

Bootflat Bootflat - 基于bootstrap 3.2.0 的扁平化风格的UI组件的开源项目。

SUI SUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。

ZUI 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

Atui 阿里通讯前端部推出的一个基于 Vue.js 2.0 的 UI 组件库。

qunee 一套基于HTML5的网络图组件。

jQuery File Upload Plugin 一个有功能强大的 jQuery 上传组件，支持多文件选择、拖拽上传、验证、图片和多媒体预览等功能。

SUI Mobile 淘宝的SUI是一款不错的移动端UI库，轻量，小巧且精美。

jQuery WeUI 专为微信公众账号开发而设计的一个简洁而强大的UI库。

Vux 基于 WeUI 和 Vue.js 的移动端 UI 组件库，提供丰富的组件满足移动端(微信)页面常用业务需求。

Brick Brick是为易于快速构建Web应用程序UI设计的UI组件的集合。

Muse-UI 基于 Vue 2.0 和 Material Design 的 UI 组件库。

GMU 百度FEX团队推出的基于zepto的ui组件库，适用于移动端。

Ant Design Mobile 一个基于 Preact / React / React Native 的 UI 组件库。

Frozen UI FrozenUI 是一套基于移动端的UI库轻量、精美、遵从手机 QQ 设计规范。

Vue Loader Vue.js 组件的 Webpack loader。

Iconfont 阿里妈妈MUX打造的图标库，是国内功能很强大且图标内容很丰富的矢量图标库

pictonic 国外一个免费字体图标库，有362个免费字体图标

IcoMoon 免费开源的字体图标库

MFG Labs icon set 免费字体图标

Font Awesome 一款风靡全球的图标字体库和CSS框架。

Animate动画库各种Animate动画案例，可以直接预览效果，如果你稍微会点Animate知识，可以试着去读源代码，帮助自己提高Animate技能

缓动函数速查表缓动函数指定动画效果在执行时的速度，使其看起来更加真实. 本页可以在每次你需要时，帮助你找到想要的缓动函数。

HTML5 Boilerplate HTML5项目的基础模板

Web Starter Kit Boilerplate & Tooling for Multi-Device Development 多设备开发的工具和模板

HTML5 Bones HTML5模板，包含基本结构和常用元素

Email-Boilerplate HTML邮件模板

HAML HTML的简洁模板语言

Mustache.js 逻辑无关的模板引擎

Handlebars 扩展了Mustache功能的模板引擎

htmlbars 快速且流行的模板引擎

Nunjucks 强大的模板引擎

Transparency 数据绑定的模板引擎

paperclip.js 响应式模板引擎

ractive.js 反应式模板引擎

Pug Pug 是一款强大，优雅，功能丰富的 Node.js 模板引擎。

EJS 应用于 Node.js 的嵌入式 JavaScript 模板引擎。

Swig Swig是一个非常棒的 Django/Jinja-like模板引擎，用于node.js。

Rivets.js 轻量级和强大的数据绑定+模板解决方案，用于构建现代Web应用程序。

Dust.js 针对浏览器和服务器的异步Javascript模板。

Consolidate.js Node.js 模板引擎的集合。

lit-html JavaScript 中写 HTML 的模板引擎

Placeit 在线生成原型模板网站，有可点击的交互、视频、照片。

AllTheFreeStock 一个地址，找到所有无版权图片、模型、视频、声效、配色、网页模板、字体、图标、邮件模板……简直就是懒人福音！

JS框架

开发框架移动端框架模块加载游戏开发框架代码检查/优化其他/特定

AngularJS 流行的前端框架

React 用于构建用户界面的JavaScript库

Vue.js 渐进式JavaScript框架

Ember 为开发现代Web应用而设计的框架

Backbone 轻量级的前端框架

Aurelia 现代前端框架

Semantic UI 现代响应式的前端开发框架

Metro UI 基于Metro设计语言的前端框架

Material Design Lite(MDL) 实现Material Design的轻量级前端框架

Base 轻量级的响应式前端框架

Kendo UI 完整的前端UI框架

Elemental UI 一个针对 React.js 的灵活的、漂亮的 UI 框架。

Cf-ui Cloudflare 开发的一个 Web UI 框架。

AdminLTE 一个非常流行的基于 Bootstrap 3.x 免费后台UI框架。

NativeScript 使用JavaScript开发原生移动应用的框架

React Native 使用React构建原生移动应用

tabris.js 跨平台移动应用开发框架

Ionic 领先的HTML5 移动开发框架和 SDK，利用你所熟知的web 技术构建难以置信的移动应用，是AngularJS最好的朋友。

Framework7 功能强大的创建 iOS & Android APP 的 HTML 框架。

jQuery Mobile jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。

Onsen UI 用来构建混合移动端APP的 HTML5 UI 框架。

Junior 用于构建具有原生外观的HTML5移动应用的前端框架。

Requirejs RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。

create-react-app 无需配置文件快速创建 React 应用

Egg 一个用于更好地构建企业应用的框架，内置流程管理，高度可定制，有强大的插件系统。

ThinkJS ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架。

SystemJS 模块加载器

rollup.js JavaScript模块打包工具

Ant Design 一个服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观，通过模块化的解决方案，让设计者专注于更好的用户体验。

Microbundle 零配置的模块打包器。

Mout MOUT是模块化JavaScript实用程序的集合，可以在浏览器中用作AMD模块或node.js。

UMD 适用于任何地方的JavaScript模块的UMD（通用模块定义）模式。

ESL ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。

CreateJS 基于HTML5的一套模块化的库和工具共同工作或独立使丰富的交互式内容的开放式Web技术。

jshint JavaScript代码质量检查工具

ESLint 可扩展的JavaScript代码检查工具

Prettier 代码格式化工具

TSLint TypeScript代码检查工具

UglifyJS 3 JavaScript代码压缩工具

JS加密在线 JS加密、JavaScript源代码加密

Paper.js 矢量图形脚本框架

Sortable 一个简约的 JavaScript 库用于在现代浏览器中拖放列表重新排序，支持任何JS框架。

NW.js 轻量级跨平台桌面应用开发框架。

JADE LANGUAGE Jade是一款基于haml的html模版引擎,采用JavaScript实现,可以方便地在Node.js、Yeoman等框架中使用。

Ember starter-kit Ember.js应用的入门套件

NG6-starter Angular 2应用的入门套件

JS库/插件

核心/工具网络通信 B端操作数据操纵静态网站

jQuery 最流行的JavaScript库

Zepto.js 轻量级的JavaScript库，兼容jQuery语法

underscore.js 常用的JavaScript工具库

lodash 实用的JavaScript工具库

webcomponents.js Web组件的Polyfill库

RxJS 响应式编程库

jquerymy.js jQuery的数据绑定插件

JSX JavaScript语法扩展

Modernizr 检测浏览器特性支持的JavaScript库

webshim HTML5特性的Polyfill库

console-polyfill 为旧浏览器提供console对象的Polyfill

URI.js URL处理和操作的JavaScript库

platform.js 检测平台信息的JavaScript库

history.js HTML5浏览历史管理库

html2canvas 将网页渲染为图像的JavaScript库

jsdom Node.js的DOM模拟工具

virtual-dom 高效的虚拟DOM实现

dom-shims DOM的Polyfill库

Pointer Events Polyfill 统一的事件系统Polyfill

Alloyfinger 腾讯Web前端团队推出的轻量级的多点触控手势库。

Unreal.js 为 UnrealEngine 构建的 Javascript 运行时。

fullPage.js 一个简单易用的库，可创建全屏滚动网站（也称为单页网站或单页网站），并在网站各部分中添加横向滑块。

Moment.js 日期处理的JavaScript库

async 异步控制流库

Chance 随机生成数据的JavaScript库

xregexp.com 扩展的正则表达式库

Math.js 数学运算库

Numeral.js 数字格式化库

accounting.js 货币和数字格式化库

format.js 国际化库

keypress 简单的键盘事件处理库

clipboard.js 现代的剪贴板操作库

tether.io 定位元素的JavaScript库

string.js 字符串操作库

wait JavaScript中的简单等待库

DefiantJS 用于查询JSON的JavaScript库

构建部署

构建工具包管理自动化部署

cooking 更易上手的前端构建工具，不仅简单而且高效。

Jspm-cli JSPM是基于SystemJS的Javascript包 package管理器，基于动态的ES6模块加载器之上构建。

component 前端程序包管理器和用于模块化Web应用程序的构建工具。

FuseBox FuseBox是一款快速的捆绑器/模块加载器，您可以以毫秒为单位测量构建时间。

协作工具

团队协作设计/原型

Koding 在线开发环境和协作平台

Slack 团队协作和沟通工具

tower 项目管理，任务管理，团队协作，项目协作等。

代码质量/测试

单元测试端到端测试性能测试兼容性测试

Mocha JavaScript测试框架

Jest JavaScript测试框架

QUnit JavaScript单元测试框架

Jasmine 行为驱动开发的测试框架

Ava 极简JavaScript测试框架

Selenium Web应用自动化测试工具

nightwatchjs 基于Node.js的端到端测试工具

Protractor Angular应用的端到端测试框架

Cypress 前端自动化测试工具

TestCafe 浏览器自动化测试工具

GTmetrix 网站速度测试工具

Web Page Test 网站性能测试工具

Lighthouse 自动化网站性能分析工具

YSlow 网站性能分析工具

Speed Curve 网站性能监控工具

数据处理

数据可视化 JSON 数据存储

Google Charts Google 图表工具功能强大、易于使用且是免费的，试用我们丰富的交互式图表和数据工具库

D3 by Observable 用于定制数据可视化的JavaScript库

Apache ECharts 一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

Chart.js 为您的网站提供开源HTML5图表

Victory 用于构建交互式数据可视化的可组合反应组件的生态系统

Nivo 提供了一组丰富的Dataaviz组件，这些组件构建在D3和React之上

Frappe Charts 简单而现代的网络SVG图表，零依赖

Recharts 构建在React组件上的可组合制图库

Three.js JavaScript 3D库

DataV Vue 大屏数据展示组件库

AntV 蚂蚁企业级数据可视化解决方案，让用户轻松看数收获工作意义

Highcharts 互动制图库，让开发人员可以轻松地为网络和移动平台创建图表和仪表板

chartist-js 响应式图表库

amCharts 强大的图表库

FusionCharts 可视化图表解决方案

ZingChart 现代化的图表库

Datawrapper 简单的在线数据可视化工具

ChartBlocks 在线图表生成工具

EChart 百度EFE团队出品的可视化图表插件。

JSON Mask 用于筛选JSON数据的工具

JSON Generator 生成模拟JSON数据的工具

Mockaroo 在线生成模拟数据的工具

json-schema.org JSON模式的标准

jsonschema.net 在线生成JSON模式的工具

JSONmate 在线JSON编辑器

FillText 可生成用于测试或演示的 JSON 数据集

Tableau 帮助任何人查看和理解他们的数据。连接到几乎任何数据库，拖放以创建可视化，并只需单击即可共享。

YDN-DB 离线数据库

forerunner 前端数据库

AlaSQL 客户端数据库

RxDB 在本地存储数据，构建高性能实时应用程序，与后台同步数据，甚至在离线时也能运行

lovefiled Google开发的关系型数据库

pouchdb 浏览器端的NoSQL数据库

Firebase 实时数据库和后端服务

Dexie.js IndexedDB的封装库

localForage 改进的离线存储。使用简单但功能强大的 API 封装 IndexedDB、WebSQL 或 localStorage

图形/图表

SVG/Canvas 图表库图像工具

svg.js 轻量级的SVG操作库

Snap.svg 现代化的SVG库

Raphaël 简化SVG操作的JavaScript库

Fabric.js 基于Canvas的绘图库

EaselJS HTML5画布库

学习资源/社区

资源聚合学习平台编码指南开发者社区

JavaScripting.com JavaScript库和插件的集合

microjs 微型JavaScript库的集合

Unheap JavaScript插件集合

jQuery插件库 jQuery插件

StackShare 技术栈分享和推荐平台

ObjectPath Wordpress和WooCommerce插件免费下载链接

developerWork IBM 的官方开发者项目，在这里你可以访问和下载试用版软件，查找丰富的 IT 技术资源(文章、教程、视频和代码等),和专业的 IT 从业人员交流。

publicdomain publicdomainarchive目前已经有33万张免费高清图像下载，设计师可以免费使用在你的创意项目上。

staticsitegenerators.net 静态网站生成器列表

MDN Web 文档 Web 技术学习平台

汇智网学习最前沿编程技术的平台

爱思资源网 web前端开发资源平台

力扣（LeetCode）全球极客挚爱的技术成长平台

百度前端技术学园百度创办的免费前端技术学习平台

七天学会NodeJS Node.js学习资源

WebGL中文网 WebGL教程网站

Atomic Design 原子设计方法论

掘金帮助开发者成长的社区

牛客网互联网求职神器和备考学习平台

SegmentFault 领先的开发者技术社区

Laravel China Laravel 开发者社区

V2EX 奇妙好玩的话题和流行动向

CNode Node.js 开源技术社区

Aotu.io「凹凸实验室」年轻基情的技术社区组织

百度EFE 百度EFE技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。

AlloyTeam 来自于腾讯SNG(社交网络事业群)，是主要负责腾讯Q+、WebQQ、QQ群空间项目的团队，致力于Web前端技术的研究。

开源中国开源中国是目前中国最大的开源技术社区，我们传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。