面向对象的前端开发

It’s that time again to choose the tool or technology that you want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back.

是时候再次选择要使用的工具或技术。如果您觉得自己一直在努力构建，但可能学习的内容不尽如人意，那么我会支持您的。

Please enjoy the sixth installment of our Docs and Guides series and don’t forget to let us know of any others that we haven’t yet included in this or a previous post.

请享受我们的文档和指南系列的第六期，不要忘了让我们知道我们尚未在此或上一篇文章中包含的其他内容。

1. DevTools挑战者 (1. DevTools Challenger)

An interactive site that demonstrates how to use the new animation-related features present in Firefox Developer Edition.

一个交互式站点，演示如何使用Firefox Developer Edition中提供的与动画相关的新功能。

2. HTML和CSSCraft.io手册 (2. The HTML & CSS Workmanship Manual)

A good HTML/CSS styleguide to help developers write “durable, reliable” code, loosely inspired by NASA’s Workmanship Standards Program.

一份出色HTML / CSS样式指南，可帮助开发人员从NASA的工作标准计划中轻松地获得“持久，可靠”的代码。

3. ECMAScript 6备忘单 (3. ECMAScript 6 Cheatsheet)

I don’t think we can have too many ES6 learning resources, so here’s another one. ES6 is a huge step forward in JavaScript’s history and this reference will give you ‘everything about the latest version of the ECMAScript standard’.

我认为我们没有太多的ES6学习资源，所以这是另外一个。 ES6是JavaScript历史上的一大进步，本参考将为您“提供有关ECMAScript标准最新版本的所有信息”。

4.React备忘单 (4. React Cheat Sheet)

React is officially the “current big thing” so this quick reference should be a big help. The page is filterable using a search form at the top and each feature includes a link to the official docs.

React正式是“当前的大事”，因此此快速参考应该会有所帮助。该页面可使用顶部的搜索表单进行过滤，并且每个功能均包含指向官方文档的链接。

5.六速 (5. Six Speed)

A chart that displays performance report information for different ES6 features relative to the ES5 baseline operations as rendered by various transpilers (Babel, Traceur, etc).

一张图表，显示了与不同编译器(Babel，Traceur等)呈现的ES5基准操作相关的不同ES6功能的性能报告信息。

6.美国网页设计标准 (6. U.S. Web Design Standards)

“Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.”

“开源UI组件和视觉样式指南可在整个美国联邦政府网站上创建一致性和优美的用户体验。”

7. ECMAScript 6 —新功能：概述和比较 (7. ECMAScript 6 — New Features: Overview & Comparison)

Another nice ES6 learning resource. What’s really great about this one is the fact that it has two code examples for each feature, including how the same thing is accomplished in ES5.

另一个不错的ES6学习资源。该功能的真正优点在于，每个功能都有两个代码示例，包括在ES5中如何完成相同的操作。

8.交互式WCAG 2.0 (8. Interactive WCAG 2.0)

A list of Web Content Accessibility Guidelines for various UI elements, filterable by WCAG level, responsibility (Front-end, design, UX, etc.). It also includes recommendations from both the W3C and WebAIM.

各种UI元素的Web内容可访问性指南列表，可以按WCAG级别，职责(前端，设计，UX等)进行过滤。它还包括W3C和WebAIM的建议。

9. Mac OS X开发人员设置参考 (9. Mac OS X Dev Setup Reference)

“Setting up a new developer machine can be an ad-hoc, manual, and time-consuming process. [This reference] aims to simplify the process with easy-to-understand instructions and dotfiles/scripts to automate the setup” of a number of different tasks.

“设置新的开发人员机器可能是临时的，手动的且耗时的过程。 [本参考资料]旨在通过易于理解的说明和点文件/脚本来简化多个不同任务的设置，从而简化流程。

10. Kinetic Email CSS支持 (10. Kinetic Email CSS Support)

The following table lists the major HTML & CSS features that are commonly used by interactive and dynamic CSS techniques and their support among the major email clients.

下表列出了交互式和动态CSS技术常用的主要HTML和CSS功能及其在主要电子邮件客户端中的支持。

11. HTMLBook (11. HTMLBook)

An unofficial specification initiated by O’Reilly Media for outlining an XHTML5-based standard for authoring and producing digital and print books. Lea Verou’s book CSS Secrets was written using this standard.

由O'Reilly Media发起的非官方规范，用于概述基于XHTML5的创作和生产数字书籍和印刷书籍的标准。 Lea Verou的书CSS Secrets是使用此标准编写的。

12.ECMAScript®2016语言规范 (12. ECMAScript® 2016 Language Specification)

The official ECMAScript specification, which is now edited on GitHub, in a single-page, easy to use HTML format, with filter option.

官方ECMAScript规范(现已在GitHub上进行了编辑)为单页，易于使用HTML格式，带有过滤器选项。

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

“A fun and colorful explanation of how DNS works… We made this comic to explain what happens when you type a website address in your browser.”

“关于DNS如何工作的有趣有趣的解释……我们制作了这幅漫画来解释当您在浏览器中键入网站地址时会发生什么。”

14. StaticGen (14. StaticGen)

A filterable “leaderboard of the top open-source static site generators.” Lets you filter by language, GitHub stars, forks, and open issues.

可过滤的“顶级开源静态站点生成器的排行榜”。使您可以按语言，GitHub星号，分支和未解决问题进行过滤。

15.请问…？ (15. doiuse…?)

Paste in some CSS or a website URL and this site will tell you what browsers the CSS is compatible/incompatible with. You can do a general search or filter using the list keywords that Autoprefixer permits.

粘贴一些CSS或网站URL，此站点将告诉您CSS兼容/不兼容的浏览器。您可以使用Autoprefixer允许的列表关键字进行常规搜索或过滤。

16.字体家庭聚会 (16. Font Family Reunion)

a filterable compatibility chart for default local fonts on just about any OS. The table informs you if the font is supported, aliased, or will revert to the default font for the OS.

几乎所有操作系统上的默认本地字体的可过滤兼容性图表。该表通知您字体是否受支持，别名或将恢复为操作系统的默认字体。

17.Perf.Rocks (17. Perf.Rocks)

A single resource for finding articles, tools, videos, talks, slides, and books covering web performance. It’s well maintained and you can contribute your own stuff.

用于查找有关Web性能的文章，工具，视频，演讲，幻灯片和书籍的单一资源。它维护得很好，您可以贡献自己的力量。

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

Style guides have been a pretty big thing for a couple of years now. This is a single resource that has compiled tools, articles, books, podcasts, and more just on the topic of style guides.

几年来，样式指南一直是一件大事。这是一个单独的资源，其中包含有关样式指南主题的工具，文章，书籍，播客，以及更多内容。

19. package.json (19. package.json)

“This is an interactive guide for exploring various important properties of the package.json packaging format for node.js applications. You can access information about properties by mousing over or clicking the property name.”

“这是一个交互式指南，用于探索node.js应用程序的package.json打包格式的各种重要属性。您可以通过鼠标悬停或单击属性名称来访问有关属性的信息。”