面向对象的前端开发
In recent months, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help in learning different front-end technologies. I’ve rounded up some of the best ones in this post.
最近几个月，我收集了许多不同的学习资源，包括指南，文档和其他有用的网站，以帮助学习不同的前端技术。 我在这篇文章中总结了一些最好的。
So please enjoy the eighth installment of our Docs and Guides series and don’t forget to let me know of any others that I haven’t yet included.
因此，请享受我们的文档和指南系列的第八期 ，不要忘记让我知道我还没有包括的其他内容。
1.键盘事件查看器 (1. Keyboard Event Viewer)
A configurable, interactive tool that allows you to view data on keyboard events, showing legacy info as well as event information as outlined in the UI Events Specification.
一个可配置的交互式工具，使您可以查看键盘事件的数据，显示遗留信息以及UI Events Specification中概述的事件信息。
2. jQuery快速API参考 (2. jQuery Quick API Reference)
A one-page cheat sheet of jQuery features, covering versions of jQuery up to 1.10/2.0. Just click a feature and it will open the page from jQuery’s docs in a modal window.
一页的jQuery功能备忘单，涵盖了jQuery 1.10 / 2.0之前的版本。 只需单击一个功能，它将在模式窗口中打开jQuery文档的页面。
3. BugRex (3. BugRex)
Ok, this is not so much a “doc” but more of an interactive help guide where you can chat with an expert. As the site explains: “The BugRex chat is operated by a community of developers who truly enjoy helping others. Use it to understand new concepts, ask questions or fix annoying bugs.”
好的，这不仅仅是一个“文档”，而是更多的交互式帮助指南，您可以在其中与专家聊天。 正如该网站所述：“ BugRex聊天是由一群真正乐于帮助他人的开发人员进行的。 用它来理解新概念，提出问题或修复烦人的错误。”
4.全局CSS属性使用 (4. Global CSS Property Usage)
If you enjoyed SitePoint’s recent CSS Survey then you might also appreciate this data, compiled by the Microsoft Edge team. They scan over one million web pages quarterly to compile usage stats on CSS properties. And it’s searchable too!
如果您喜欢SitePoint的最新CSS调查，那么您可能还会喜欢由Microsoft Edge团队汇编的这些数据。 他们每季度扫描超过一百万个网页，以编译CSS属性的使用情况统计信息。 而且它也是可搜索的！
5.当今的性能工具 (5. Performance Tooling Today)
A collection of resources to help you improve your workflow and to deliver better and faster websites. Resource categories include tools, articles, videos, slide decks, books, courses, and performance audits.
一系列资源可帮助您改善工作流程并提供更好，更快的网站。 资源类别包括工具，文章，视频，幻灯片，书籍，课程和绩效审核。
6. Opera Mini提示 (6. Opera Mini Tips)
“A collection of front-end development features not supported by Opera Mini and some crowdsourced workarounds for them.”
“ Opera Mini不支持的一组前端开发功能，以及针对这些功能的一些众包解决方法。”
7.触摸键盘类型备忘单 (7. Touch Keyboard Type Cheat Sheet)
Baymard Institute, an organization that does e-commerce usability research, has put together a guide to encourage developers to optimize form fields for touch keyboards. For example, how to set the appropriate type and when to use attributes like autocorrect, autocapitalize, etc. The page’s forms are testable on a touch device.
从事电子商务可用性研究的组织Baymard Institute汇总了一份指南，以鼓励开发人员优化触摸键盘的表单字段。 例如，如何设置适当的类型以及何时使用诸如autocorrect ， autocapitalize等属性。页面的表单可以在触摸设备上进行测试。
8. HTML5备忘单 (8. HTML5 Cheat Sheet)
An attractive and simple cheat sheet for HTML5 tags and their meanings, available as a PDF or PNG.
HTML5标签及其含义的引人入胜且简单的备忘单，可以PDF或PNG格式提供。
9. HTML的差异 (9. Diff of HTMLs)
“Unofficial diff viewer for WHATWG HTML Standard and W3C HTML 5.1. The Diff of HTMLs provides side-by-side diff view of each section between the specifications.”
“用于WHATWG HTML标准和W3C HTML 5.1的非官方差异查看器。 HTML的差异提供了规范之间每个部分的并排差异视图。”
10.电子邮件客户端CSS支持指南 (10. CSS Support Guide for Email Clients)
“A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.”
“对全球十大最受欢迎的移动，Web和桌面电子邮件客户端CSS支持的完整分类。”
11. Babel用户手册 (11. Babel User Handbook)
A comprehensive guide written by James Kyle that covers Babel, the popular JavaScript compiler, covering everything you’ll need to know about using Babel and related tools.
由James Kyle撰写的综合指南，涵盖了流行JavaScript编译器Babel，涵盖了您需要使用Babel和相关工具所需要了解的所有内容。
12. A11Y项目 (12. The A11Y Project)
Not a new project, but the site has been recently redesigned. It’s a “community-driven effort to make web accessibility easier.” Includes accessibility-related how-tos, myths, tests, tips, information on assistive technology, and more.
这不是一个新项目，但是该站点最近进行了重新设计。 这是“社区驱动的工作，使Web访问更容易。” 包括与可访问性相关的操作方法，神话，测试，技巧，辅助技术信息等。
13. Flexbox游乐场 (13. Flexbox playground)
An interactive flexbox CodePen demo that lets you easily test the different properties and values.
交互式flexbox CodePen演示，可让您轻松测试不同的属性和值。
14.超文本传输协议版本2(HTTP / 2) (14. Hypertext Transfer Protocol Version 2 (HTTP/2))
The proposed standard specification for HTTP/2.
HTTP / 2的建议标准规范。
15. JS技巧 (15. JS Tips)
A project by Joel Lovera that provides an archive of JavaScript tips. The project was originally supposed to provide a new tip each day, but it doesn’t look like that’s been maintained. Still a good resource for quick tips though.
Joel Lovera的一个项目，提供JavaScript技巧的存档。 该项目原本应该每天提供一个新的提示，但看起来并没有得到维护。 仍然是快速提示的好资源。
16. LMHT (16. LMHT)
A searchable HTML tags reference specifically designed to help Spanish speakers understand HTML terminology, including audio recordings to hear the definitions in English and Spanish. It looks like the reference is still low on content, but you can contribute if able.
可搜索HTML标记参考，专门用于帮助讲西班牙语的人理解HTML术语，包括录音以收听英语和西班牙语的定义。 看起来参考文献的内容仍然很少，但是您可以尽力而为。
17. 350个项目符号中的ES6概述 (17. ES6 Overview in 350 Bullet Points)
Nicolás Bevacqua, who has written a number of ES6 (i.e. ES2015) posts on his blog, has created this summary of all his previous articles, which works as a quick reference for ES6 features.
NicolásBevacqua在他的博客上写了许多ES6(即ES2015)帖子，并创建了他之前所有文章的摘要，可作为ES6功能的快速参考。
18.对HTTPS说“是” (18. Say Yes to HTTPS)
A simple and practical guide to help web developers get up to speed with HTTPS — what it is, how it works, and how to set it up.
一个简单实用的指南，可帮助Web开发人员快速掌握HTTPS的含义，含义，工作方式以及设置方法。
19. Bigcommerce的Sass编码准则 (19. Bigcommerce’s Sass Coding Guidelines)
Bigcommerce’s Sass style guide, influenced by SUIT CSS and Medium’s CSS.
Bigcommerce的Sass样式指南，受SUIT CSS和MediumCSS影响。
20. WPO统计 (20. WPO Stats)
“Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.”
“案例研究和实验证明了Web性能优化(WPO)对用户体验和业务指标的影响。”
荣誉奖 (Honorable Mentions)
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
Your guide to the (sometimes overwhelming!) React ecosystem.
推荐你的 (Suggest Yours)
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:
同时，这是本系列中的先前文章：
翻译自: https://www.sitepoint.com/20-docs-guides-front-end-developers-8/
面向对象的前端开发
扫一扫
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
