Web开发资源汇总

请关注DeveloperQ公众号

DeveloperQ公众号

文| 谷歌开发技术专家 (GDE) 杨波 (Alpha)

目录

## 浏览器工具 * [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的开发者工具:工具 -> Web Developer。

IE的开发者工具。

Opera 工具.

## 浏览器功能

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

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

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

Internet Explorer的状态和路线图。

ECMAScript 兼容性一览.

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

手机浏览器的功能。

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

测试你的浏览器CSS3支持。

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

  • status modern ie 类似于Chrome Status但是针对 Edge 和 Internet Explorer,有当前状态和路线图。

  • ES6 compatibility 从服务器端和浏览器的ECMAScript兼容性列表。

## 文档和教程

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

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

包括JavaScript的互动学习环境。

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

  • Udacity

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

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

非常用心的介绍性文章。

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

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

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

HTML组件的默认样式。

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

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

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

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

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

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

著名出版社的参考文档。

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

关于CSS的深度文章。

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

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

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

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

## 在线代码编辑器

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

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

前端演示。

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

入门的好地方。

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

Google的JavaScript APIs示例。

## 托管

介绍Git, GitHub, GitHub Pages 和 Jekyll.

## 代码检测和验证工具

HTML 验证工具。

HTML 分析工具。

CSS 验证工具。

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

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

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

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

JSON 验证工具.

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

## 测试

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

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

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

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

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

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

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

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

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

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

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

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

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

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


库和包管理器

前端构建工具。

JavaScript任务启动器。

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

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

包管理器。

特性支持检测库。

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

JavaScript优化检查工具。

CSS变量、继承及混合等。

跨浏览器 CSS 库。

MVC 框架。

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

跨浏览器HTML5 web应用框架。

Web应用框架

## 标准和规范

关于HTML、CSS。

HTML最新标准。

JavaScript只是它的一种方言。

## 书

作者David Flanagan

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

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

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

作者Steve Krug

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

作者Douglas Crockford

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

## 统计和归档数据

多渠道的统计对比。

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

原生应用的统计和分析。

新兴市场的数据和资源。

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

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

2015年5月。

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

2016年6月。

数据中也包含功能机。

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

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

实时的网络统计。

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

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

## 其它

免费的占位图片。

  • 原文:https://github.com/alphayang/awesome-web

  • 作者:杨波 (Alpha)

SDK.cn国内领先的开发者服务平台







相关问题推荐