layout	title	date
post	Web开发资源列表	2017-03-03 17:28

Web开发资源列表

目录

浏览器工具
浏览器功能
文档和教程
在线代码编辑器
托管
代码检测和验证工具
测试
库和包管理器
标准和规范
书
统计和归档数据
其它

## 浏览器工具 * [Chrome Dev Tools](http://code.google.com/chrome/devtools/docs/overview.html) Chrome浏览器内置开发工具，实时编辑HTML、CSS和JavaScript，还可在 [console](http://code.google.com/chrome/devtools/docs/console.html)中运行代码.

Firefox Developer Tools

Firefox的开发者工具:工具 -> Web Developer。

Microsoft Edge Developer Tools (F12) Tools

IE的开发者工具。

Opera Dragonfly

Opera 工具.

## 浏览器功能

caniuse.com

手机和桌面浏览器的功能，带链接到各自的文档。

chromestatus.com

Web平台特性支持和示例，能看到将要发布的功能，可以使用Chrome Canary进行测试。Blink作为Chromium的渲染引擎，在blink-dev论坛中也有一些非常有趣的讨论。

blink-dev

可以查看Chrome将有哪些新功能。

status.modern.ie

Internet Explorer的状态和路线图。

Kangax

ECMAScript 兼容性一览.

whatwebcando.today

浏览器功能大全，带有示例链接和支持信息。

mobilehtml5.org

手机浏览器的功能。

html5please.com

HTML、 CSS 和 JavaScript 特性: flux中有什么, 什么是flakey, 能用来做些什么。

css3test.com

测试你的浏览器CSS3支持。

Robohornet

使用真实用例进行浏览器测试而不只是纯粹的JavaScript性能测试。

status modern ie 类似于Chrome Status但是针对 Edge 和 Internet Explorer，有当前状态和路线图。
ES6 compatibility 从服务器端和浏览器的ECMAScript兼容性列表。

## 文档和教程

Khan Academy

大量的计算机科技入门教程。

Code Academy

简明的HTML、CSS和JavaScript互动课程。

Code Wars

包括JavaScript的互动学习环境。

Codebar

关于HTML、CSS和JavaScript及其它语言的简单教程，适合龟速网络使用者查看。

Udacity

由很多制作精良的Web互动课程:

非常好看的Web技术入门在线书籍。

Basic JavaScript

非常用心的介绍性文章。

stackoverflow.com

询问或是查找web相关问题高质量答案的地方，没有之一。有技术问题第一个要先搜索的地方。

html5rocks.com and updates.html5rocks.com

有最新的HTML、CSS和JavaScript教程和示例。

W3C list of elements

最新最全面的组件、标记和事件列表，且都带有示例。

Default browser stylesheets

HTML组件的默认样式。

MDN

Mozilla Developer Network: 由Mozilla员工和成百上千的志愿者维护，支持多个本地化语言的示例，教程和参考文档。

devdocs.io

可下载的web关键技术文档。

diveintohtml5.info

独一无二，精心编写的关于HTML5的一切，包括如何入门及发展历史。

Web Fundamentals

跨设备web开发的最佳实践。

html5doctor.com

HTML, CSS 和 JavaScript的文章和教程 .

Quirksmode

精通浏览器，有一系列主题的深度文章。

Sitepoint

著名出版社的参考文档。

MSDN

微软家的HTML、CSS和JavaScript文档。

CSS Tricks

关于CSS的深度文章。

Smashing Magazine

跨设备web设计、工具和技术。

Chrome Developer Docs Team Learning Materials

重点关注由Chrome开发工程师维护的站点，每个链接的资源都进行了分类和评价。

html5search.com

由Googler Paul Kinlan创建的站点用来搜索高质量的web文档，如果有使用w3schools.com, 牢记 w3fools.com上的警告。还要注意的是web标准和规范同样也是文档，看下看。

webplatform.org

跨行业构建web文档的项目，虽已无人维护但还是有一些有用的信息。

## 在线代码编辑器

JS Bin

实时编辑HTML、CSS 和 JavaScript – 可以保存或链接分享。

jsFiddle

HTML、CSS和JavaScript的在线编辑演示。

CodePen

前端演示。

Mozilla Thimble

由Mozilla提供的在线网页编辑和发布工具。

Codecademy

入门的好地方。

c9

取代本地IDE的完整线上环境，可集成github/bitbucket，还基于ubuntu container提供terminal。

Google code playground

Google的JavaScript APIs示例。

## 托管

Creating and Hosting a Personal Site on GitHub

介绍Git, GitHub, GitHub Pages 和 Jekyll.

## 代码检测和验证工具

W3C HTML validator

HTML 验证工具。

HTMLHint

HTML 分析工具。

W3C CSS validator

CSS 验证工具。

CSSLint

CSS 检测，有编辑器的插件。

CSS Beautify

由Sencha Labs提供的开源CSS格式化工具。

ESLint

JavaScript 检测工具，可以Sublime等编辑器中作为插件使用，还可用于如Gulp和Grunt等构建工具中。

JSHint

JavaScript 检测工具(类似 JSLint但更易配置，有编辑器和Grunt插件。)。

JSONLint

JSON 验证工具.

JS Beautifier

格式化JavaScript和HTML的开源工具。

## 测试

Page Speed Tools

Google提供的工具，应用web性能的最佳实践来帮助开发者优化网页，并有用户体验和移动测试。

Web Page Test

跨浏览器页面加载测试，可指定使用分布在全球的不同地点和网络环境的服务器。

headspin.io

使用全球不同的移动网络进行测试和监控。

Charles Proxy

Web高度代理：可以用来设置带宽和延迟.

Augmented Traffic Control (ATC)

由Facebook提供的一整套开源应用，可用来是控制流量和模拟低速网络环境。

Fiddler

Fiddler 基于GeoEdge进行代理，使用自定义规则可以模拟网络速度。

jsPerf

创建、分享和对比测试用例。

Network Link Conditioner

OS X和iOS的网络模拟工具。

Chrome DevTools emulation mode throttling

Chrome开发工具中的网络模拟模式

Web Developer Checklist

高质量web应用和网站的检查列表。

browserstack.com

实时的在线浏览器测试 - 对于开源项目免费使用。

whatdoesmysitecost.com/

预估流量费用，对于新兴市场的用户来说流量费用的高低极其重要。

Google Mini Mobile Device Lab

进行跨设备测试的框架，支持 Android, iOS, Windows (包括 phone, RT , desktop)和 Chrome OS。

openstf

一个简单的web应用支持跨Android进行网页测试。

库和包管理器

Gulp

前端构建工具。

Grunt

JavaScript任务启动器。

注意参考Why we should stop using Grunt & Gulp.

Yeoman

构建最新web应用的工具流工具。

Bower

包管理器。

Modernizr

特性支持检测库。

jQuery

著名的带有UI和widget插件的跨平台JavaScript库。但有时你可能更不需要它 youmightnotneedjquery.com。

Closure

JavaScript优化检查工具。

Sass

CSS变量、继承及混合等。

Less

跨浏览器 CSS 库。

backbone.js

MVC 框架。

HTML5 cross-browser polyfills

跨浏览器的HTML5特性支持，其实就是如果浏览器厂家没有用C/C++实现的功能在这里用JavaScript模拟出来。

Sencha and Ext JS

跨浏览器HTML5 web应用框架。

Sproutcore

Web应用框架

## 标准和规范

W3C

关于HTML、CSS。

WHATWG

HTML最新标准。

ECMAScript

JavaScript只是它的一种方言。

## 书

JavaScript: The Definitive Guide

作者David Flanagan

广受好评的经典书籍，纸版。

Eloquent JavaScript

作者Marijn Haverbeke (在线阅读或纸版)

JavaScript编程的入门好书，并有大量的可编辑在线示例。

Don’t Make Me Think

作者Steve Krug

用户界面设计的经典之作，纸版值得拥有和珍藏。

JavaScript: The Good Parts

作者Douglas Crockford

作者的文章都值得一读，特别是关于JavaScript的视频课程。

## 统计和归档数据

Wikipedia browser usage share

多渠道的统计对比。

Statcounter

浏览器份额图表，多种维度。

App Annie

原生应用的统计和分析。

Building for billions

新兴市场的数据和资源。

HTTP Archive

Web技术的趋势，实用统计和网站性能。

Wayback Machine

包含4000亿页面的归档服务。

ITU stats

2015年5月。

GSMA

全球移动数据 (需要登陆)。

GSMA Mobile Connectivity Index

2016年6月。

数据中也包含功能机。

opensignal.com/reports/2015/08/android-fragmentation

2015年8月 (>24000 单独设备数, >1000 品牌)。

Device chart

根据屏幕尺寸和价格生成的设备图表。

Internet Live Stats

实时的网络统计。

Global Internet penetration

由互联网协会提供的全球互联网用户渗透率。

The Big Mac Index

麦当劳巨无霸指数，大于60个国家, 用来衡量平均购买力。

## 其它

lorempixel

免费的占位图片。