# awesome-web

**Repository Path**: super456/awesome-web

## Basic Information

- **Project Name**: awesome-web
- **Description**: web开发资源及轮子
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-04-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

# Awesome Web  [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/alphayang/awesome-web)


Web开发资源列表

## 目录

<!-- MarkdownTOC depth=4 -->
- [浏览器工具](#browser-tools)
- [浏览器功能](#browser-capability)
- [文档和教程](#tutorial)
- [在线代码编辑器](#online-editor)
- [托管](#hosting)
- [代码检测和验证工具](#lint-validator)
- [测试](#test)
- [库和包管理器](#lib)
- [标准和规范](#spec)
- [书](#books)
- [统计和归档数据](#stats-archive)
- [其它](#other)



<!-- /MarkdownTOC -->

<a name="browser-tools" />
## 浏览器工具
*  [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](https://developer.mozilla.org/tools)

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

* [Microsoft Edge Developer Tools (F12) Tools](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/)

IE的开发者工具。

* [Opera Dragonfly](http://www.opera.com/dragonfly/)

Opera 工具.


<a name="browser-capability" />
## 浏览器功能

* [caniuse.com](http://caniuse.com)

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

* [chromestatus.com](http://chromestatus.com)

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

* [blink-dev](https://groups.google.com/a/chromium.org/forum/#!forum/blink-dev)

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

* [status.modern.ie](http://status.modern.ie/)

Internet Explorer的状态和路线图。

* [Kangax](https://kangax.github.io/compat-table/es6/)

ECMAScript 兼容性一览.

* [whatwebcando.today](https://whatwebcando.today/)

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

* [mobilehtml5.org](http://mobilehtml5.org/)

手机浏览器的功能。

* [html5please.com](http://html5please.com)

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

* [css3test.com](http://css3test.com/)

测试你的浏览器CSS3支持。

* [Robohornet](http://www.robohornet.org/)

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

* [status modern ie](http://status.modern.ie/)
类似于Chrome Status但是针对 Edge 和 Internet Explorer，有当前状态和路线图。

* [ES6 compatibility](https://kangax.github.io/compat-table/es6/)
从服务器端和浏览器的ECMAScript兼容性列表。



<a name="tutorial" />
## 文档和教程

* [Khan Academy](https://www.khanacademy.org/)

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

* [Code Academy](http://www.codecademy.com/tracks)

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

* [Code Wars](https://www.codewars.com/?language=javascript)

包括JavaScript的互动学习环境。

* [Codebar](http://tutorials.codebar.io/)

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

* Udacity

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

* [HTML + CSS Intro](https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-2698138588)

* [JavaScript Basics](https://www.udacity.com/course/javascript-basics--ud804)

* [20 things I learned about the Web](http://www.20thingsilearned.com/en-US)

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

* [Basic JavaScript](http://www.2ality.com/2013/06/basic-javascript.html)

非常用心的介绍性文章。

* [stackoverflow.com](http://stackoverflow.com)

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

* [html5rocks.com](http://html5rocks.com) and [updates.html5rocks.com](http://updates.html5rocks.com/)

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

* [W3C list of elements](http://www.w3.org/community/webed/wiki/HTML/Elements)

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

* [Default browser stylesheets](https://github.com/sw4/revert.css)

HTML组件的默认样式。

*  [MDN](http://developer.mozilla.org)

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

* [devdocs.io](http://devdocs.io/)

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

* [diveintohtml5.info](http://diveintohtml5.info)

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

* [Web Fundamentals](https://developers.google.com/web/fundamentals/)

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

* [html5doctor.com](http://html5doctor.com)

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

* [Quirksmode](http://www.quirksmode.org/)

精通浏览器，有一系列主题的深度文章。
* [Sitepoint](http://reference.sitepoint.com/)

著名出版社的参考文档。

* [MSDN](http://msdn.microsoft.com/en-us/ie/aa740476.aspx)

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

* [CSS Tricks](http://css-tricks.com/)

关于CSS的深度文章。

* [Smashing Magazine](https://www.smashingmagazine.com/)

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

* [Chrome Developer Docs Team Learning Materials](https://sites.google.com/a/google.com/chrome-writers/ramping-up/external-materials)

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

* [html5search.com](http://html5search.com)

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


* [webplatform.org](http://webplatform.org)

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

<a name="online-editor" />
## 在线代码编辑器


* [JS Bin](http://jsbin.com/)

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

* [jsFiddle](http://jsfiddle.net/)

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

* [CodePen](http://codepen.io/)

前端演示。

* [Mozilla Thimble](https://thimble.webmaker.org/)


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

* [Codecademy](http://www.codecademy.com/courses/programming-intro/)

入门的好地方。

* [c9](https://c9.io/)

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

* [Google code playground](http://code.google.com/apis/ajax/playground/)

Google的JavaScript APIs示例。

<a name="hosting" />
## 托管

* [Creating and Hosting a Personal Site on GitHub](http://jmcglone.com/guides/github-pages/)

介绍Git, GitHub, GitHub Pages 和 Jekyll.

<a name="lint-validator" />
## 代码检测和验证工具

* [W3C HTML validator](http://validator.w3.org/)

HTML 验证工具。

* [HTMLHint](http://htmlhint.com)

HTML 分析工具。

* [W3C CSS validator](http://jigsaw.w3.org/css-validator/)

CSS 验证工具。

* [CSSLint](https://github.com/CSSLint/csslint)

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

* [CSS Beautify](http://cssbeautify.com/)

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

* [ESLint](http://eslint.org/)

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

* [JSHint](http://www.jshint.com/)

JavaScript 检测工具(类似 [JSLint](http://jslint.com)但更易配置，有编辑器和Grunt插件。)。

* [JSONLint](http://jsonlint.com/)

JSON 验证工具.

* [JS Beautifier](http://jsbeautifier.org/)

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

<a name="test" />
## 测试

* [Page Speed Tools](http://code.google.com/speed/page-speed/)

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

* [Web Page Test](http://www.webpagetest.org/)

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

* [headspin.io](https://headspin.io)

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

* [Charles Proxy](https://www.charlesproxy.com/)

Web高度代理：可以用来 [设置带宽和延迟](http://www.charlesproxy.com/documentation/proxying/throttling/).

* [Augmented Traffic Control (ATC)](http://facebook.github.io/augmented-traffic-control/)

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

* [Fiddler](http://www.telerik.com/fiddler)

Fiddler 基于[GeoEdge](http://www.geoedge.com/faq)进行代理，使用自定义规则可以模拟网络速度。

* [jsPerf](http://jsperf.com/)

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

* [Network Link Conditioner](http://nshipster.com/network-link-conditioner/)

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

* [Chrome DevTools emulation mode throttling](https://developer.chrome.com/devtools/docs/device-mode#network-conditions)

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

* [Web Developer Checklist](http://webdevchecklist.com/)

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

* [browserstack.com](https://www.browserstack.com/)

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

* [whatdoesmysitecost.com/](http://whatdoesmysitecost.com/)

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

* [Google Mini Mobile Device Lab](https://github.com/GoogleChrome/MiniMobileDeviceLab)

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

* [openstf](https://github.com/openstf/stf)

一个简单的web应用支持跨Android进行网页测试。
<a name="lib" />
## 库和包管理器

* [Gulp](https://css-tricks.com/gulp-for-beginners/)

前端构建工具。

* [Grunt](http://gruntjs.com/)

JavaScript任务启动器。

注意参考[Why we should stop using Grunt & Gulp](http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/).

* [Yeoman](http://yeoman.io/)

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

* [Bower](http://bower.io/)

包管理器。

* [Modernizr](http://www.modernizr.com/)

特性支持检测库。

* [jQuery](http://jquery.com)

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

* [Closure](https://developers.google.com/closure/)

JavaScript优化检查工具。

* [Sass](http://sass-lang.com/)

CSS变量、继承及混合等。

* [Less](http://lesscss.org/)

跨浏览器 CSS 库。

* [backbone.js](http://backbone.js)

MVC 框架。

* [HTML5 cross-browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

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

* [Sencha and Ext JS](http://www.sencha.com/)

跨浏览器HTML5 web应用框架。

* [Sproutcore](http://sproutcore.com/)

Web应用框架


<a name="spec" />
## 标准和规范

* [W3C](http://www.w3.org/standards/)

关于HTML、CSS。

* [WHATWG](http://www.whatwg.org/http://www.whatwg.org/specs/web-apps/current-work/multipage/)

HTML最新标准。

* [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript)

JavaScript只是它的一种方言。

<a name="books" />
## 书

* [JavaScript: The Definitive Guide](http://www.amazon.co.uk/JavaScript-Definitive-Guide-Guides/dp/0596805527/ref=sr_1_1?ie=UTF8&qid=1326894097&sr=8-1)

作者David Flanagan

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

* [Eloquent JavaScript](http://eloquentjavascript.net/)

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

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

* [Don’t Make Me Think](http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758)

作者Steve Krug

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

* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742/ref=as_li_ss_tl?ie=UTF8&tag=jspro-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742)

作者Douglas Crockford

作者的文章都值得一读，特别是关于JavaScript的[视频课程](http://yuiblog.com/crockford/)。

<a name="stats-archive" />
## 统计和归档数据

* [Wikipedia browser usage share](http://en.wikipedia.org/wiki/Usage_share_of_web_browsers)

多渠道的统计对比。

* [Statcounter](http://gs.statcounter.com)

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

* [App Annie](https://www.appannie.com)

原生应用的统计和分析。

* [Building for billions](https://docs.google.com/document/d/1LV55gzhvvfIvCTrn9yx6kvRrtXgjxIrzbQT-hSLcHZ0/edit#heading=h.g19h01g1apr1)

新兴市场的数据和资源。

* [HTTP Archive](http://httparchive.org/)

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

* [Wayback Machine](http://archive.org/web/)

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

*   [ITU stats](http://www.itu.int/net/pressoffice/press_releases/2015/17.aspx#.VboJhxNVjUA)

2015年5月。

*   [GSMA](https://gsmaintelligence.com/)

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

*   [GSMA Mobile Connectivity Index](http://mobileconnectivityindex.com)

  2016年6月。

*   [Wikipedia list of countries by number of Internet users](https://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users)

*   [StatCounter global browser share](http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201502-201606)

数据中也包含功能机。

*   [opensignal.com/reports/2015/08/android-fragmentation](http://opensignal.com/reports/2015/08/android-fragmentation/)

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

*   [Device chart](http://www.productchart.com/smartphones/)

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

*   [Internet Live Stats](http://www.internetlivestats.com/)

实时的网络统计。


*   [Global Internet penetration](http://www.internetsociety.org/map/global-internet-report/)

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


*   [The Big Mac Index](http://www.economist.com/content/big-mac-index)

麦当劳巨无霸指数，大于60个国家, 用来衡量 [平均购买力](https://en.wikipedia.org/wiki/Purchasing_power_parity)。

<a name="other" />
## 其它

* [lorempixel](http://lorempixel.com/)

免费的占位图片。