20个为前端开发者准备的文档和指南

灰太狼 2022-02-05 06:53 279阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

是时间选择你想重温的工具或者技术了。如果你感到你已经很努力了，但是结果却并非你所愿，我将会帮助你。

## 1. DevTools Challenger ##

它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。

![Image 1][]

image

## 2. The HTML & CSS(HTML和CSS技巧手册) ##

一个很好的HTML/CSS的样式指南，可以帮助开发者编写“耐用，持久”的代码，它是受NASA的技巧标准项目启发而编制的。

NASA介绍链接地址: [http://baike.sogou.com/v449802.htm?fromTitle=NASA][http_baike.sogou.com_v449802.htm_fromTitle_NASA]

![Image 1][]

image

## 3. ECMAScript 6 Cheatsheet(ECMAScript6参考手册) ##

我相信我们没有太多的ES6的学习资源，因此这个就是其中一个。ES6在JavaScript的发展历史上是一个巨大的进步，并且这个参考手册将向你介绍ECMAScript标准内容最新版本的一切。

![Image 1][]

image

## 4. React Cheat Sheet(React参考手册) ##

React介绍的链接地址: [ http://www.ibm.com/developerworks/cn/web/1509\_dongyue\_react/index.html][http_www.ibm.com_developerworks_cn_web_1509_dongyue_react_index.html]

React是目前最流行的框架技术，而本快速入门手册对学习者来说具有很大的帮助。在该网站的顶部有一个搜索表单，可以供过滤所需要的内容，而且每一个功能都有一个链接，当点击链接后就会链接到React的官方文档页面上。

![Image 1][]

image

## 5. Six Speed ##

它是一张图表，是为通过不同的转换编译器(Babel，Traceur等等)渲染涉及到Es5基层操作的不同的ES6功能显示性能报告信息。

Babel介绍链接地址: [http://babeljs.cn/][http_babeljs.cn]

Traceur介绍链接地址: [http://www.oschina.net/p/traceur][http_www.oschina.net_p_traceur]

![Image 1][]

image

## 6. U.S. Web Design Standards(美国[Web设计][Web]标准) ##

“它是开源的UI组件和可视化的样式指南，贯穿了美国联邦政府网站，旨在提供创造稳定的和出色的用户体验。”

![Image 1][]

image

## 7. ECMAScript 6 — New Features:Overview&Comparison(ECMAScript6-新功能:概述和对比) ##

这是另一个很棒的ES6学习资源。这个ES6的学习资源最棒的地方是，每一个功能它都有两个代码示例，包括同样的代码在ES5里是如何实现的。

![Image 1][]

image

## 8. Interactive WCAG 2.0(交互式的WCAG2.0) ##

WCAG2.0介绍的链接地址: [http://baike.sogou.com/v10626070.htm?fromTitle=wcag][http_baike.sogou.com_v10626070.htm_fromTitle_wcag]

它是为不同的UI元素制作的一个Web内容权限指南的列表，可以通过WCAG水平级别或者根据职责功能(包括前端,设计,用户体验等等。)来过滤所需内容。它还有W3C和WebAIM的建议。

UX介绍的链接地址: [http://baike.sogou.com/v68495939.htm?fromTitle=UX][http_baike.sogou.com_v68495939.htm_fromTitle_UX]

WebAIM介绍：他们的任务是授权组织机构来使这些组织机构的网页内容可以被身有残疾的人士阅读。

WebAIM 链接地址: [http://webaim.org/][http_webaim.org](英文网站)

![Image 1][]

image

## 9. Mac OS X Dev Setup Reference(Mac电脑的OSX系统的开发者设置手册) ##

“安装一台新的开发者机器一定是一个连续的，既耗体力又耗时间的过程。该手册旨在通过容易理解的说明和点文件或者脚本来自动完成大量不同的设置，达到简化安装过程的目的。”

![Image 1][]

image

## 10. Kinetic Email CSS Support(KineticJS邮箱的CSS支持表) ##

Kinetic的介绍链接地址: [http://www.cnblogs.com/zhangleblog/category/604046.html][http_www.cnblogs.com_zhangleblog_category_604046.html]

该网站以表格的形式列出了HTML和CSS的主要功能，这些功能在交互式的和动态的CSS技术里经常被使用，并且列出了主流邮件客户端对它们的支持。

![Image 1][]

image

## 11. HTMLBook ##

它是由O’Reilly Media发起的基于XHTML5编写代码和数字产品和打印书籍的标准概述的一个非官方的说明书。Lea Verou写的CSS Secrets(CSS的秘密)就是使用这个标准编写的。

O’Reilly Media介绍的链接地址: [http://baike.sogou.com/v69267939.htm?fromTitle=O%27Reilly+Media][http_baike.sogou.com_v69267939.htm_fromTitle_O_27Reilly_Media]

Lea Verou介绍的链接地址: [https://www.amazon.cn/%E5%9B%BE%E4%B9%A6/dp/B01ET3FO86?ie=UTF8&dpID=51zBDFxt-yL&dpSrc=sims&preST=*AC\_UL160\_SR125%2C160*&psc=1][https_www.amazon.cn_E5_9B_BE_E4_B9_A6_dp_B01ET3FO86_ie_UTF8_dpID_51zBDFxt-yL_dpSrc_sims_preST_AC_UL160_SR125_2C160_psc_1]

![Image 1][]

image

## 12. ECMAScript® 2016 Language Specification(ECMAScript 2016 计算机语言规范) ##

官方的ECMAScript说明书现在在GitHub上，被编辑成单页而且使用方便的HTML格式并且有着过滤器选项的说明书。

![Image 1][]

image

## 13. How DNS works(DNS如何工作的) ##

“它精彩地解释了DNS是怎么工作的…我们制作该连环画，目的是解释当你在浏览器里键入一个网站的地址时，究竟发生了什么。”

![Image 1][]

image

## 14. StaticGen ##

它是可以过滤的“顶级开源的静态站点生成器的排行榜。”可以让你通过计算机语言，GitHub星级，叉状数和开源问题来过滤你所需要的内容。

![Image 1][]

image

## 15. doiuse…? ##

打开该网站后，粘贴某些CSS代码或者某个网站的URL到相应的地方，点击tell me后，该站点就会告诉你哪个浏览器支持该CSS代码或者不支持该CSS代码。你可以执行一个一般的搜索或者使用Autoprefixer许可的关键字列表来过滤搜索你需要的内容。

Autoprefixer介绍链接地址: [http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html][http_www.cnblogs.com_aNd1coder_archive_2013_08_12_3252690.html]

![Image 1][]

image

## 16. Font Family Reunion(字体大全) ##

它是一个可以过滤内容的兼容图表，图表内容显示的是在所有操作系统上的默认的当地字体。该图表告诉你，该字体是否被支持，是否有别名，或者给该系统恢复默认字体。

![Image 1][]

image

## **17. Perf.Rocks** ##

它是一个资源站点，用来查找文章，工具，视频，音频，幻灯片和覆盖所有web性能的书。它维护得很好，你可以上传你自己的东西到上面。

![Image 1][]

image

## 18. [Website Style Guide Resources][](网站样式指南资源) ##

从几年前到现在，样式指南已经成了一个很重要的东西。该站点是一个单一的资源站点，拥有编译工具，文章，书籍，视频广播和很多关于样式指南的主题内容。

![Image 1][]

image

## 19. package.json ##

package.json介绍链接地址: [http://javascript.ruanyifeng.com/nodejs/packagejson.html][http_javascript.ruanyifeng.com_nodejs_packagejson.html]

“它是一个交互式的指南，用来查看package.json为node.js应用打包格式的不同重要的属性。你可以通过把鼠标悬停在某个属性名上或者点击该属性名来获取到该属性的详细信息。”

![Image 1][]

image

## 20. Promise Cookbook(Promise手册) ##

Promise介绍链接地址: [http://www.infoq.com/cn/news/2011/09/js-promise][http_www.infoq.com_cn_news_2011_09_js-promise]

一个在JavaScript里使用Promise的简介。

![Image 1][]

作者：子瑜说IT  
链接：https://www.jianshu.com/p/928f20b3fc2f

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[http_baike.sogou.com_v449802.htm_fromTitle_NASA]: https://links.jianshu.com/go?to=http%3A%2F%2Fbaike.sogou.com%2Fv449802.htm%3FfromTitle%3DNASA
[http_www.ibm.com_developerworks_cn_web_1509_dongyue_react_index.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fcn%2Fweb%2F1509_dongyue_react%2Findex.html
[http_babeljs.cn]: https://links.jianshu.com/go?to=http%3A%2F%2Fbabeljs.cn%2F
[http_www.oschina.net_p_traceur]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.oschina.net%2Fp%2Ftraceur
[Web]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.codeceo.com%2Farticle%2F9-gif-web-design-history.html
[http_baike.sogou.com_v10626070.htm_fromTitle_wcag]: https://links.jianshu.com/go?to=http%3A%2F%2Fbaike.sogou.com%2Fv10626070.htm%3FfromTitle%3Dwcag
[http_baike.sogou.com_v68495939.htm_fromTitle_UX]: https://links.jianshu.com/go?to=http%3A%2F%2Fbaike.sogou.com%2Fv68495939.htm%3FfromTitle%3DUX
[http_webaim.org]: https://links.jianshu.com/go?to=http%3A%2F%2Fwebaim.org%2F
[http_www.cnblogs.com_zhangleblog_category_604046.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.cnblogs.com%2Fzhangleblog%2Fcategory%2F604046.html
[http_baike.sogou.com_v69267939.htm_fromTitle_O_27Reilly_Media]: https://links.jianshu.com/go?to=http%3A%2F%2Fbaike.sogou.com%2Fv69267939.htm%3FfromTitle%3DO%2527Reilly%2BMedia
[https_www.amazon.cn_E5_9B_BE_E4_B9_A6_dp_B01ET3FO86_ie_UTF8_dpID_51zBDFxt-yL_dpSrc_sims_preST_AC_UL160_SR125_2C160_psc_1]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.amazon.cn%2F%25E5%259B%25BE%25E4%25B9%25A6%2Fdp%2FB01ET3FO86%3Fie%3DUTF8%26dpID%3D51zBDFxt-yL%26dpSrc%3Dsims%26preST%3D_AC_UL160_SR125%252C160_%26psc%3D1
[http_www.cnblogs.com_aNd1coder_archive_2013_08_12_3252690.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.cnblogs.com%2FaNd1coder%2Farchive%2F2013%2F08%2F12%2F3252690.html
[Website Style Guide Resources]: https://links.jianshu.com/go?to=http%3A%2F%2Fstyleguides.io%2F
[http_javascript.ruanyifeng.com_nodejs_packagejson.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fbrowsenpm.org%2Fpackage.json
[http_www.infoq.com_cn_news_2011_09_js-promise]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.infoq.com%2Fcn%2Fnews%2F2011%2F09%2Fjs-promise