面向对象的前端开发
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 tenth 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.
因此，请享受我们的文档和指南系列的第十期 ，不要忘记在我尚未包括的其他任何人的评论中让我知道。
You’ll understand this one better if you read Patrick Clancey’s recent article on A List Apart on “mod queries”. This is a tool/guide that helps you understand these CSS selectors and how they can be used to lay out unknown numbers of items in grid layouts.
如果您阅读了Patrick Clancey 最近关于“ mod query”的“ A List Apart ” 上的文章，您将更好地理解这一点。 这是一个工具/指南，可帮助您了解这些CSS选择器以及如何使用它们在网格布局中布置未知数量的项目。
With the smart warning that these components might not be semantic or accessible to all users, this site has collected a bunch of different techniques that demonstrate what can be done with just HTML, CSS, Sass.
明智的警告是这些组件可能不是所有用户都无法理解或使用的，因此该站点收集了许多不同的技术，这些技术演示了仅使用HTML，CSS和Sass即可完成的工作。
A really comprehensive infographic, available to download as a PDF, that covers HTML5 tags (old, new, and obsolete), attributes, desktop and mobile browser support, event handlers, and Canvas features.
一个非常全面的信息图，可以以PDF格式下载，涵盖了HTML5标签(旧的，新的和过时的)，属性，桌面和移动浏览器支持，事件处理程序以及Canvas功能。
An official document from the W3C that ‘describes some best practices for creating interoperable, reusable, performant, efficient, and practical SVG documents, using explanations and code samples.’ The document provides guidance without setting requirements and is useful for developers creating SVGs manually.
W3C的官方文档，“使用说明和代码示例描述了一些用于创建可互操作，可重用，高性能，高效且实用的SVG文档的最佳实践”。 该文档提供了无需设置要求的指导，对于手动创建SVG的开发人员非常有用。
Although the WHATWG HTML5 spec continues to be a “living standard” without versions, the W3C is pushing ahead with increments for their spec. If you’re interested in looking at what’s new and different in HTML5.2, this is a good place to start.
尽管WHATWG HTML5规范仍然是没有版本的“生存标准”，但W3C仍在努力提高其规范。 如果您有兴趣了解HTML5.2中的新增功能和不同之处，那么这是一个不错的起点。
A nice, extensive checklist for developers when finishing a project. Includes categories for usability, accessibility, SEO, code quality, security, and lots more. Also, each item in the categories includes links to help you check off the items.
完成项目时为开发人员提供的一份不错的，广泛的清单。 包括可用性，可访问性，SEO，代码质量，安全性等类别。 此外，类别中的每个项目都包含帮助您检查项目的链接。
A simple site that allows you to search for a CSS property and it will tell you if that property is “animatable” and will provide further info on how browsers calculate the animation.
一个简单的站点，您可以搜索CSS属性，并告诉您该属性是否“可动画化”，并提供有关浏览器如何计算动画的更多信息。
BrowserStack’s guide to mobile device testing, based on market share data, OS versions, screen sizes, viewports and resolutions, etc. As the site explains: “We have gained insights from usage statistics of over 30,000 BrowserStack customers, and current global market trends. The lists are continuously updated to include latest and upcoming devices.”
BrowserStack基于市场份额数据，操作系统版本，屏幕尺寸，视口和分辨率等的移动设备测试指南。正如该网站所解释的：“我们已经从30,000多个BrowserStack客户的使用统计信息以及当前的全球市场趋势中获得了见解。 列表会不断更新，以包括最新和即将推出的设备。”
Jon Yablonski created this dynamic checklist, which is based on an article he authored, for designers to add some valuable and generally easy-to-implement performance improvements to their front-end projects. Each item has links to the appropriate section of the associated article.
乔恩·雅布隆斯基(Jon Yablonski)创建了这个动态清单，该清单基于他撰写的文章，旨在使设计师在其前端项目中添加一些有价值的且通常易于实现的性能改进。 每个项目都有指向相关文章的相应部分的链接。
“Powered by data from caniuse.com and StatCounter, this page indicates the percentage of users who have a browser that natively supports various web platform features. Obviously, this doesn’t consider polyfill-ability or other fallback scenarios.”
“由caniuse.com和StatCounter的数据提供支持，该页面显示了拥有本机支持各种Web平台功能的浏览器的用户百分比。 显然，这不考虑可填充性或其他后备方案。”
“Over nine thousand developers took part in the first edition of the State Of JavaScript survey. They answered questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries. You’ll find out which libraries developers most want to learn next, and which have the highest satisfaction ratings. And hopefully, this data will help you make sense of the ever-changing JavaScript ecosystem.”
“超过9000名开发人员参加了JavaScript状态调查的第一版。 他们回答了从前端框架和状态管理到构建工具和测试库等主题的问题。 您会发现开发人员接下来最想学习哪些库，以及哪些库的满意度最高。 希望这些数据将帮助您了解不断变化JavaScript生态系统。”
This is a real-time, animated mobile usage data infographic that demonstrates how various aspects of online activity grow with each passing second.
这是一个实时的动画移动使用情况数据图表，该图表演示了在线活动的各个方面是如何随着每秒的增长而增长的。
Zach Leatherman’s detailed and technical guide to dealing with web fonts with lots of best practices and recommendations for developers dealing with this issue.
Zach Leatherman的详细和技术指南，涉及处理Web字体，并提供许多最佳实践和针对开发此问题的开发人员的建议。
This one may have gone under your radar. It’s mostly for beginners so not applicable to all of us, but it’s a nice central location for getting quick access to all sorts of resources on learning HTML, CSS, and JavaScript on Mozilla Developer Network.
这可能已经被您掩盖了。 它主要面向初学者，因此不适用于我们所有人，但它是一个不错的中心位置，可让您快速访问Mozilla开发人员网络上学习HTML，CSS和JavaScript的各种资源。
The team at Sparkbox have put together a simple, interactive page that demonstrates how to use various technologies to create a bouncing ball animation. This might a good way to compare APIs and potential coding overhead when considering using an animation library.
Sparkbox的团队整理了一个简单的交互式页面，演示了如何使用各种技术来创建弹跳球动画。 考虑使用动画库时，这可能是比较API和潜在编码开销的好方法。
“Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.” Includes sections for developers, engineers, project managers, quality assurance, and editorial.
“使工作易于访问可全面创造更好的体验。 无论您在项目中的角色或阶段如何，都可以使用此清单来帮助您在流程中建立可访问性。” 包括针对开发人员，工程师，项目经理，质量保证和社论的部分。
This is a more technical and detailed accessibility checklist from the folks at WebAIM, available on a web page or as a PDF, divided into parts for HTML and Scripts/Plugins.
这是WebAIM上的技术性和详细的可访问性清单，可从网页或PDF中获得，分为HTML和脚本/插件的部分。
A nice extensive resource that lists techniques using vanilla JavaScript to replace stuff done by utility libraries like Lodash and Underscore, including mention of browser support for each technique.
一个不错的广泛资源，列出了使用香草JavaScript来代替实用程序库(如Lodash和Underscore)完成的工作的技术，其中包括对每种技术的浏览器支持。
From Ian McBurnie, a developer at eBay, this is a nice little testing ground for accessible web patterns like autocomplete, checkboxes, flyout menus, pagination, tooltips, and lots more. You’ll also find documentation for these in the associated GitBook.
从eBay的开发人员Ian McBurnie那里，这是一个很好的小测试平台，用于可访问的Web模式，例如自动完成，复选框，弹出菜单，分页，工具提示等。 您还可以在关联的GitBook中找到这些文档的文档。
Checklist for Angular 1.x to help you do a code review and ensure you’re using recognized best practices for style, architecture, security, accessibility, and performance. You can also sign up to be notified when a similar checklist is available for Angular 2.
Angular 1.x清单有助于您进行代码审查，并确保您在样式，体系结构，安全性，可访问性和性能方面使用公认的最佳实践。 您也可以注册以在Angular 2可以使用类似的清单时得到通知。
Progressive Web Application
渐进式Web应用程序
How React Do?
React如何？
React Patterns
React模式
Itsy Bitsy Data Structures
Itsy Bitsy数据结构
Random HTML Tags
随机HTML标签
SVG 2 new features
SVG 2的新功能
The Security Checklist
安全清单
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号)
翻译自: https://www.sitepoint.com/20-docs-guides-front-end-developers-10/
面向对象的前端开发
相关资源：jdk-8u281-windows-x64.exe