面向对象的前端开发
It’s that time again to get learning! As before, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help you get up to speed in different areas of front-end development.
是时候再次开始学习！ 和以前一样，我收集了许多不同的学习资源，包括指南，文档和其他有用的网站，以帮助您快速掌握前端开发的不同领域。
So please enjoy the twelfth installment of our Docs and Guides series and don’t forget to let me know in the comments of any others that I haven’t yet included.
因此，请享受我们的文档和指南系列的第12期，不要忘记在我尚未包括的其他任何人的评论中让我知道。
A compilation of React Patterns, techniques, tips and tricks. Includes sections on design patterns, ant-patterns, performance tips, and styling. This looks like a really good reference for those wanting to dig deep into React.
React模式，技术，技巧和窍门的汇编。 包括有关设计模式，蚂蚁模式，性能提示和样式的部分。 对于那些想深入研究React的人来说，这似乎是一个很好的参考。
This cheat sheet is available as a simple PDF with a quick reference to the different features or as a fully interactive guide. The interactive guide works as a shortcut to the official Vue.js documentation, opening each link in an overlaid iframe.
该备忘单可以以简单的PDF形式获得，并可以快速参考不同的功能，也可以作为完全互动的指南。 交互式指南是Vue.js官方文档的快捷方式，可在覆盖的iframe中打开每个链接。
The W3C’s new Grid Layout module features have really been picking up steam of late since browser support improved. This interactive guide is a pretty complex little app with a ton of options. This might not be a great guide for beginners but maybe a good option for those already familiar with Grid Layout basics.
自从浏览器支持得到改进以来，W3C的新的Grid Layout模块功能实际上已经开始流行。 该交互式指南是一个非常复杂的小应用程序，具有大量选项。 对于初学者来说，这可能不是一个很好的指南，但是对于那些已经熟悉网格布局基础知识的人来说，这可能是一个不错的选择。
Flexbox (the other hotness in CSS layout) is represented in this cheatsheet. From what I can tell, this one is using the same descriptive info as the spec, but with some interactive code examples to help visualize the different features.
备忘单中显示了Flexbox(CSS布局中的另一热点)。 据我所知，这是使用与规范相同的描述性信息，但带有一些交互式代码示例以帮助可视化不同的功能。
This site is technically a blog, but works well as both a pattern library and a superb example of an accessible site. So far only two entries have been posted in the “library”, but both cover their topics exhaustively, so there’s plenty to take in and this is a good one to keep an eye on for future posts if you are concerned about accessibility (and you should be!).
从技术上讲，该站点是一个博客，但既可以用作模式库，又可以作为可访问站点的绝佳示例。 到目前为止，“图书馆”中仅发布了两个条目，但是它们都涵盖了它们的主题，因此有很多内容可供参考，如果您担心可访问性，那么这是一个很好的关注未来的帖子(而且应该！)。
“The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.” Sections include forms, media, navigation, and more.
“ A11Y样式指南随附了预填充的可访问组件，其中包括指向相关工具，文章和WCAG准则的有用链接，以使您的网站更具包容性。 这些组件还可以作为HTML标记和SCSS / CSS代码的指南，以在网站创建的每个阶段通知设计人员，前端和后端开发人员。” 这些部分包括表单，媒体，导航等。
A collection of pre-configured front-end tooling setups for common uses. These are very opinionated, but might fit something you’re working on in the future.
常见用途的预配置前端工具设置的集合。 这些观点很自以为是，但可能适合您将来的工作。
Does the world need another list of ES6 features? Maybe not, but this one seems very technical in its explanations, which I’m sure many experienced programmers moving to JavaScript will appreciate. There are also lots of interactive code examples used for each feature.
世界是否需要另一种ES6功能列表？ 也许不是，但是这似乎是非常技术性的解释，我相信很多有经验的程序员会喜欢JavaScript。 每个功能还有很多交互式代码示例。
From the Codrops CSS reference, this is an exhaustive reference discussing all the features of the new Grid Layout spec. Lots of nice diagrams and clean code examples.
从Codrops CSS参考中，这是详尽的参考，讨论了新Grid Layout规范的所有功能。 许多漂亮的图表和干净的代码示例。
A free guide to HTML featuring all elements and attributes. Each HTML feature includes extensive code examples, and you can filter the features by meta, inline, and block.
包含所有元素和属性HTML免费指南。 每个HTML功能都包括大量的代码示例，您可以按meta，内联和块过滤功能。
If you’re somewhat new to HTML and are having trouble figuring out which element to use in what situation, this quick little interactive site will give you the right element after you answer a few questions.
如果您不熟悉HTML，并且在确定在什么情况下使用哪个元素时遇到麻烦，那么这个快速的交互式小网站将在回答几个问题后为您提供正确的元素。
A reference for the render impact of mutating CSS properties. That is, you’ll find out whether a property triggers a repaint, layout, or compositing, and whether or not these occur from the default or on subsequent updates.
更改CSS属性的渲染影响的参考。 也就是说，您将了解某个属性是否触发了重新绘制，布局或合成，以及这些是否发生在默认设置或随后的更新中。
If you’ve ever read the description of a CSS property in one of the specs, you might have seen a value that looks like this: Value: nowrap | wrap | wrap-reverse. Other values can be even more complex. This quick reference explains what that notation is all about.
如果您曾经在其中一个规范中阅读过CSS属性的说明，则可能会看到一个类似于以下内容的Value: nowrap | wrap | wrap-reverse Value: nowrap | wrap | wrap-reverse Value: nowrap | wrap | wrap-reverse 。 其他值可能更加复杂。 此快速参考说明了该符号的含义。
HTML now allows input types to include regular expressions in the pattern attribute to allow values to be validated on the client side. This site has a number of pre-built patterns covering passwords, credit cards, postal codes, phone numbers, email, and more.
HTML现在允许输入类型在pattern属性中包含正则表达式，以允许在客户端验证值。 该站点具有许多预先构建的模式，包括密码，信用卡，邮政编码，电话号码，电子邮件等。
This page tells you, by the numbers, which JavaScript projects got traction in 2016, by comparing stars added on GitHub over the past 12 months. This might be a great way to assess what libraries, frameworks, or other tools would be most valuable to learn.
此页通过比较过去12个月在GitHub上添加的星标，通过数字告诉您2016年哪些JavaScript项目受到关注。 这可能是评估哪些库，框架或其他工具最有价值的学习方法。
If you’re considering native vs. web for building your next app (or maybe both), this site gives you an overview of specific HTML5 features that attempt to mimic native features on different devices. This should give you a good idea whether to build on the web, depending on what features you want to use.
如果您正在考虑使用本机vs.Web构建您的下一个应用程序(或可能同时使用两者)，则本网站为您提供了一些HTML5功能的概述，这些功能试图模仿不同设备上的本机功能。 根据您要使用的功能，这应该为您提供一个好主意，使其是否可以在Web上构建。
“A community site to help site owners migrate to HTTPS with a simple tested process. Allowing you to filter the plan based on multiple platforms (WordPress, Magento, and more), hosting environments (cPanel, Apache, and more) along with the level of control / access you have over the site.”
“一个社区站点，它通过简单的经过测试的过程来帮助站点所有者迁移到HTTPS。 使您可以基于多个平台(WordPress，Magento等)，托管环境(cPanel，Apache等)以及对站点的控制/访问级别来过滤计划。”
“This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications. It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties.”
“该文档使读者了解如何使用WAI-ARIA 1.1 [WAI-ARIA]创建可访问的丰富Internet应用程序。 它描述了仅靠WAI-ARIA规范对大多数作者来说可能并不明显的考虑因素，并推荐了使用WAI-ARIA角色，状态和属性来使小部件，导航和行为可访问的方法。”
A quick reference for learning how Grid Layout features interact with other layout methods and how you can provide good fallbacks without building a completely different “forked” version of your code for older browsers.
快速参考，了解网格布局功能如何与其他布局方法交互以及如何在不为旧版浏览器构建完全不同的代码“分叉”版本的情况下提供良好的后备功能。
This is an interactive playground to brush up on the different flexbox features. Includes some preset layouts as well as the ability to deep link to saved states in your experiments, which is pretty cool.
这是一个交互式的操场，可以了解不同的flexbox功能。 包括一些预设布局以及能够深度链接到实验中已保存状态的功能，这非常酷。
The ultimate social & digital ad size guide
最终的社交和数字广告尺寸指南
Developer Documentation (Chrome Extension)
开发人员文档 (Chrome扩展程序)
CSS Reference for iOS
iOSCSS参考
CSS Cursors
CSS游标
Moving from Old Section 508 to WCAG 2.0 AA
从旧版508移至WCAG 2.0 AA
Polyfills and the evolution of the Web
Polyfill和Web的发展
Learn Accessibility (MDN)
学习辅助功能 (MDN)
Functional Programming Jargon
函数式编程术语
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.
如果您已经为前端开发人员构建或了解其他学习资源，请将其放入评论中，我将在以后的文章中考虑。
In the meantime, 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号)
20 Docs and Guides for Front-end Developers (No. 7)
20个面向前端开发人员的文档和指南(第7号)
20 Docs and Guides for Front-end Developers (No. 8)
20个面向前端开发人员的文档和指南(第8号)
20 Docs and Guides for Front-end Developers (No. 9)
20个面向前端开发人员的文档和指南(第9号)
20 Docs and Guides for Front-end Developers (No. 10)
20个面向前端开发人员的文档和指南(第10号)
20 Docs and Guides for Front-end Developers (No. 11)
20个面向前端开发人员的文档和指南(第11号)
翻译自: https://www.sitepoint.com/20-docs-guides-front-end-developers-12/
面向对象的前端开发
相关资源：jdk-8u281-windows-x64.exe