面向对象的前端开发
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.
请享受我们的文档和指南系列的第六期，不要忘了让我们知道我们尚未在此或上一篇文章中包含的其他内容。
An interactive site that demonstrates how to use the new animation-related features present in Firefox Developer Edition.
一个交互式站点，演示如何使用Firefox Developer Edition中提供的与动画相关的新功能。
A good HTML/CSS styleguide to help developers write “durable, reliable” code, loosely inspired by NASA’s Workmanship Standards Program.
一份出色HTML / CSS样式指南，可帮助开发人员从NASA的工作标准计划中轻松地获得“持久，可靠”的代码。
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标准最新版本的所有信息”。
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正式是“当前的大事”，因此此快速参考应该会有所帮助。 该页面可使用顶部的搜索表单进行过滤，并且每个功能均包含指向官方文档的链接。
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功能的性能报告信息。
“Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.”
“开源UI组件和视觉样式指南可在整个美国联邦政府网站上创建一致性和优美的用户体验。”
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中如何完成相同的操作。
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的建议。
“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.
“设置新的开发人员机器可能是临时的，手动的且耗时的过程。 [本参考资料]旨在通过易于理解的说明和点文件/脚本来简化多个不同任务的设置，从而简化流程。
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功能及其在主要电子邮件客户端中的支持。
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是使用此标准编写的。
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格式，带有过滤器选项。
“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如何工作的有趣有趣的解释……我们制作了这幅漫画来解释当您在浏览器中键入网站地址时会发生什么。”
A filterable “leaderboard of the top open-source static site generators.” Lets you filter by language, GitHub stars, forks, and open issues.
可过滤的“顶级开源静态站点生成器的排行榜”。 使您可以按语言，GitHub星号，分支和未解决问题进行过滤。
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允许的列表关键字进行常规搜索或过滤。
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.
几乎所有操作系统上的默认本地字体的可过滤兼容性图表。 该表通知您字体是否受支持，别名或将恢复为操作系统的默认字体。
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性能的文章，工具，视频，演讲，幻灯片和书籍的单一资源。 它维护得很好，您可以贡献自己的力量。
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.
几年来，样式指南一直是一件大事。 这是一个单独的资源，其中包含有关样式指南主题的工具，文章，书籍，播客，以及更多内容。
“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打包格式的各种重要属性。 您可以通过鼠标悬停或单击属性名称来访问有关属性的信息。”
A brief introduction to using Promises in JavaScript.
在JavaScript中使用Promises的简要介绍。
An alt Decision Tree
备用决策树
Google Ranking Factors
Google排名因素
w3viewer
w3viewer
Checklist / collection of SEO tips
清单/搜索引擎优化技巧的集合
Pragmatic Standards: JavaScript Coding Standards and Best Practices
实用标准：JavaScript编码标准和最佳做法
Here are the previous posts in this series:
以下是本系列中的先前文章：
20 Docs and Guides for Front-end Developers (No. 1)
20个面向前端开发人员的文档和指南(第1号)
20 Docs and Guides for Front-end Developers (No. 2)
20个面向前端开发人员的文档和指南(第2号)
20 Docs and Guides for Front-end Developers (No. 3)
20个面向前端开发人员的文档和指南(第3号)
20 Docs and Guides for Front-end Developers (No. 4)
20个面向前端开发人员的文档和指南(第4号)
20 Docs and Guides for Front-end Developers (No. 5)
20个面向前端开发人员的文档和指南(第5号)
If you’ve built or know of another learning resource for front-end developers, drop it in the comments and I’ll consider it for a future post.
如果您已经为前端开发人员构建或了解其他学习资源，请将其放入评论中，我将在以后的文章中考虑。
翻译自: https://www.sitepoint.com/20-docs-guides-front-end-developers-6/
面向对象的前端开发
相关资源：jdk-8u281-windows-x64.exe