面向对象的前端开发
As is often the case in front-end development, it seems we have so much to learn and so little time to do it. I’ve rounded up another 20+ learning resources, interactive playgrounds, and other goodies for front-end learning.
就像前端开发中经常发生的那样，似乎我们有很多东西要学习，而花的时间却很少。 我已经收集了另外20多种学习资源，交互式游乐场和其他用于前端学习的东西。
So please enjoy the seventh installment of our Docs and Guides series and don’t forget to let me know of any others that I haven’t yet included.
因此，请享受我们的文档和指南系列的第七部分，不要忘记让我知道我还没有包括的其他内容。
This is a site from the official Meteor development team, outlining opinions on best-practice application development targeted at intermediate JavaScript developers who are already familiar with Meteor.
这是Meteor官方开发团队的网站，概述了针对已经熟悉Meteor的中级JavaScript开发人员的最佳实践应用程序开发的意见。
Lists in grid format the names and descriptions of all HTML elements in the W3C and WHATWG specs. If you click an element, you’ll also see example code on how it can be used along with a link to the spec.
以网格格式列出W3C和WHATWG规范中所有HTML元素的名称和描述。 如果单击某个元素，还将看到有关如何使用该元素的示例代码以及指向规范的链接。
Maybe you’re like me and you’re tired of seeing so many ES6/ES2015 resources. Or maybe this is the one that you finally sit down with and it gets you over the hump of absorbing everything that’s new in the ECMAScript spec.
也许您就像我一样，并且厌倦了看到如此多的ES6 / ES2015资源。 也许这是您最终坐下来的那个，它使您摆脱了吸收ECMAScript规范中新内容的驼峰。
This one made the rounds a short time ago. If you haven’t seen it and want a fun way to study up on flexbox syntax, this is a very nicely done little interactive game/tutorial.
这是不久前进行的回合。 如果您还没有看到它，并且想要一种有趣的方法来学习flexbox语法，那么这是一个非常出色的互动游戏/教程。
Nicolás Bevacqua’s study into JavaScript habits. This seems to be the first such survey that he’s conducted and he received an over 5,000 survey entries.
NicolásBevacqua对JavaScript习惯的研究。 这似乎是他进行的首次此类调查，并且他收到了5,000多个调查条目。
A simple interactive page to help you visualize how each flexbox feature works (flex-wrap, flex-direction, etc).
一个简单的交互式页面，可帮助您可视化每个flexbox功能的工作方式(flex-wrap，flex-direction等)。
“This collection of information supports you to better find the best CDN for your content delivery needs.”
“这种信息收集可帮助您更好地找到最适合内容交付需求的CDN。”
Part of the official Angular 2 docs, this is a one-stop developer guide with options to lookup syntax for JavaScript, TypeScript, and Dart.
这是Angular 2官方文档的一部分，是一站式开发人员指南，其中包含用于JavaScript，TypeScript和Dart的查找语法的选项。
More from Nicolás Bevacqua, this time it’s a visualization playground to help you learn JavaScript’s new promises feature. What’s great about this is the ability to step through the visualized code components with the option to save the animated visualization as a GIF.
NicolásBevacqua的更多内容，这是一个可视化的游乐场，可帮助您学习JavaScript的新Promise功能。 这样做的好处是能够逐步浏览可视化的代码组件，并可以选择将动画可视化另存为GIF。
An interactive playground for learning CSS’s background-blend-mode and filter properties.
一个用于学习CSS的background-blend-mode和filter属性的交互式游乐场。
This is similar to the previous site, this time it’s a playground to help you understand the mix-blend-mode property.
这与以前的站点类似，这次是一个游乐场，可帮助您了解mix-blend-mode属性。
A really nice little interactive tool to help you understand and visualize regular expressions. Includes a quick reference section, an explanation of the expression used, plus the ability to save the expression to a unique URL.
一个非常好的互动工具，可以帮助您理解和可视化正则表达式。 包括快速参考部分，对所用表达式的说明以及将表达式保存到唯一URL的功能。
“A collection of working, practical examples of using service workers in modern web apps. Open your Developer Tools console to view fetch events and informative messages about what each recipe’s service worker is doing.”
“在现代Web应用程序中使用服务工作者的工作实例的集合。 打开您的开发人员工具控制台，以查看获取事件和有关每个配方的服务人员正在做什么的信息。”
A lookup site to search for JavaScript libraries, frameworks, and plugins, filterable by categories including animation, DOM, forms, helpers, audio, video, and more.
一个搜索站点，用于搜索JavaScript库，框架和插件，可按类别进行过滤，包括动画，DOM，表单，助手，音频，视频等。
A set of guidelines for building more secure web properties, covering topics like SSL/TLS, Content Security Policy, cross-site scripting, cookie security, and more.
一组用于构建更安全的Web属性的准则，涵盖诸如SSL / TLS，内容安全策略，跨站点脚本，cookie安全性等主题。
“A practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities.”
“针对开发人员的实用指南，涉及如何使用可访问的Rich Internet Applications规范[WAI-ARIA-1.1]向HTML元素添加可访问性信息，该规范定义了使残障人士更容易访问Web内容和Web应用程序的方法。”
“A searchable catalog of PostCSS plugins.” If you aren’t yet that familiar with the growing community around PostCSS, this might be a good way to learn about the kinds of plugins available.
“ PostCSS插件的可搜索目录。” 如果您还不熟悉PostCSS周围的社区，那么这可能是了解可用插件种类的好方法。
A Gist by Paul Irish that lists various front-end features that, when used in JavaScript, will trigger “reflow or layout thrashing”, which is a common performance bottleneck.
Paul Irish的Gist列出了各种前端功能，这些功能在JavaScript中使用时，将触发“重排或布局颠簸”，这是常见的性能瓶颈。
“A listing of every term defined by CSS specs.” Each item links to its place in the spec.
“ CSS规范定义的每个术语的列表。” 每个项目都链接到其在规范中的位置。
This is a question posed on the Q&A site Slant, showing multiple pros and cons, along with user comments, for lots of different IDEs and text editors.
这是在问答网站Slant上提出的一个问题，它针对许多不同的IDE和文本编辑器显示了多个优缺点以及用户评论。
Essential JavaScript Links
基本JavaScript链接
Native Form Elements
本机表单元素
CSS Cursor
CSS游标
Non-standard CSS properties and DOM APIs
非标准CSS属性和DOM API
Simplified JavaScript Jargon
简化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号)
20 Docs and Guides for Front-end Developers (No. 6)
20个面向前端开发人员的文档和指南(第6号)
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-7/
面向对象的前端开发
相关资源：jdk-8u281-windows-x64.exe