面向对象的前端开发_20个面向前端开发人员的文档和指南（第4号）
面向对象的前端开发
It’s that time again to get learning! Well, in this industry, that time is always I suppose. This is the fourth of such posts I’ve put together and this might be the best one yet.
是时候再次开始学习！ 好吧，在这个行业中，我总是想那个时间。 这是我撰写的此类文章中的第四篇，这可能是迄今为止最好的一篇。
I’ve stumbled across and collected lots of different guides and learning resources in recent months and this is the latest installment.
最近几个月，我偶然发现并收集了许多不同的指南和学习资源，这是最新一期。
Enjoy!
请享用！
1.放大镜 (1. Loupe)
This is “a little visualisation to help you understand how JavaScript’s call stack/event loop/callback queue interact with each other.” It’s interactive, allowing you to include your own custom code and then execute it, and there’s also a video presentation on the same topic.
这是“一些可视化功能，可帮助您了解JavaScript的调用堆栈/事件循环/回调队列如何相互影响。” 它是交互式的，允许您包含自己的自定义代码，然后执行它，并且还提供有关同一主题的视频演示。
2.急救工具 (2. First Aid Git)
“A searchable collection of the most frequently asked Git questions.” This looks useful for anyone with average or below average skills with Git. Currently has 38 separate topics that can be found via an on-page search filter.
“最常见的Git问题的可搜索集合。” 对于使用Git具有中等或中等以下技能的人来说，这看起来很有用。 当前有38个单独的主题，可以通过页面搜索过滤器找到。
3. ARIA 1.0角色和属性的 周期表 (3. Periodic Table of ARIA 1.0 Roles & Attributes)
This is two separate pages — which I suppose brings this list to 21 — documenting detailed info on ARIA roles and attributes.
这是两个单独的页面(我想使该列表增加到21个)，记录了有关ARIA角色和属性的详细信息。
Just click on a role or attribute and an overlay will display information from the spec on that feature.
只需单击角色或属性，覆盖层就会显示该功能的规格信息。
4.服务人员准备好了吗？ (4. Is Service Worker Ready?)
The Service Workers specification is a promising (no pun intended!) new standard that isn’t quite ready for production because of lack of browser support and being still in flux. This little info site has a description of the spec’s features and how they measure up in the different browsers.
Service Workers规范是一个很有前途的(没有双关语！)新标准，由于缺乏浏览器支持并且仍在不断变化中，因此尚未准备就绪。 这个小信息网站描述了规范的功能以及它们在不同浏览器中的度量方式。
5.浏览器支持损坏/丢失的图像 (5. Browser support for broken/missing images)
This is something we probably all take for granted most of the time. This is a CodePen-based document by Bart Veneman that outlines exactly how the different browsers/OSes handle broken images (with placeholder, alt text, border, etc.)
这可能是我们大多数时间都理所当然的事情。 这是Bart Veneman的基于CodePen的文档，准确概述了不同浏览器/操作系统如何处理损坏的图像(带有占位符，alt文本，边框等)。
6. 2014年回应报告 (6. 2014 Responsive Report)
This is an annual responsive survey conducted by the folks at Gridset. Over 1000 participants in this survey provide information on challenges they face in their RWD workflow, in relation to clients, testing, and so forth. The survey also looks at optimism (or lack of it), trends, and tools used in RWD.
这是Gridset员工进行的年度响应调查。 这项调查的1000多名参与者提供了有关他们在RWD工作流程中面临的挑战(与客户，测试等相关)的信息。 该调查还研究了RWD中使用的乐观(或缺乏乐观)，趋势和工具。
7.版式备忘单 (7. Typography Cheatsheet)
“A comprehensive guide to using proper typographic characters, including correct grammatical usage.” Also available as a one-page PDF, this includes the keyboard shortcuts to produce the different characters for both Mac and Windows, which can be handy.
“使用正确的印刷字符的全面指南，包括正确的语法用法。” 也可作为一页PDF提供，其中包括键盘快捷键，可为Mac和Windows生成不同的字符，这很方便。
8. ARIA示例 (8. ARIA Examples)
Accessibility expert Heydon Pickering’s excellent compilation of HTML examples demonstrating different use cases for various ARIA features. Demos and code for 9 different examples. A really nice starting point for anyone looking to get into advanced ARIA implementation.
辅助功能专家Heydon Pickering对HTML示例的出色汇编，展示了各种ARIA功能的不同用例。 9个不同示例的演示和代码。 对于任何希望进入高级ARIA实施的人来说，这都是一个很好的起点。
9. ES5移动兼容性表 (9. ES5 Mobile Compatibility Table)
This is a little different and a little more specific as far as compat tables go. It’s a look at all the JavaScript features introduced in ES5 and how they measure up in different mobile browsers.
就compat表而言，这有些不同，并且更加具体。 本文介绍了ES5中引入的所有JavaScript功能以及它们如何在不同的移动浏览器中进行度量。
10. iOS字体 (10. iOS Fonts)
“Every font. Every iOS version.” Speaking of being really specific and mobile, this is an insta-filterable list of which fonts are available on iOS devices, including the Apple Watch.
“每种字体。 每个iOS版本。” 说到真正的特定性和移动性，这是一个可过滤的列表，列出了iOS设备(包括Apple Watch)上可用的字体。
11. CSS筛选器游乐场 (11. CSS Filters Playground)
A simple interface to mess around with the various parts of the filters spec. Useful also because you can choose a custom URL and even try it out with an iframe or video.
一个简单的界面，可以处理过滤器规范的各个部分。 也很有用，因为您可以选择自定义网址，甚至可以通过iframe或视频进行尝试。
12. Git备忘单 (12. Git Cheatsheet)
An interactive, clickable cheatsheet for Git commands. The different sections have deep linking too, which is a nice bonus for sharing.
用于Git命令的交互式，可单击的备忘单。 不同的部分也具有深层链接，这对于共享是一个不错的奖励。
13.键码 (13. Keycodes)
A quick-access little info site to obtain codes for keyboard keys, unicode characters, and URL-encoded characters for use in HTML, CSS, or JavaScript.
一个快速访问的小信息网站，可获取用于HTML，CSS或JavaScript的键盘按键，Unicode字符和URL编码字符的代码。
14.正则表达式101 (14. Regular Expressions 101)
A very nicely done little app to help you test and learn regular expressions. I like how it displays an “explanation” and “match information” and it lets you choose 3 different flavors of regex.
一个做得很好的小应用程序，可帮助您测试和学习正则表达式。 我喜欢它显示“解释”和“匹配信息”的方式，它使您可以选择3种不同的正则表达式。
15. CIUM (15. CIUM)
This is a mobile app that “provides compatibility tables for features in HTML5, CSS3, JS API, SVG and other upcoming web technologies.” I’m assuming the name is supposed to be a play on “Can I Use Mobile”, but they don’t seem to use that exact phrase, probably to avoid copyright issues, but I’m not sure.
这是一个移动应用程序，“为HTML5，CSS3，JS API，SVG和其他即将推出的网络技术的功能提供了兼容性表。” 我假设该名称应该是“我可以使用移动设备”上的名称，但是他们似乎并没有使用确切的词组，可能是为了避免版权问题，但是我不确定。
16. DevTools片段 (16. DevTools Snippets)
“A collection of helpful snippets to use inside of browser devtools.” Looks to be about 20 of them and you can contribute your own.
“可以在浏览器devtools中使用的有用片段的集合。” 看起来大约有20个，您可以贡献自己的一份力量。
17. Codrops CSS参考 (17. Codrops CSS Reference)
In case you missed this one, Codrops, with help from Sara Soueidan produced their own very nicely designed and comprehensive CSS reference.
万一您错过了它，Codrops在Sara Soueidan的帮助下制作了他们自己的非常好的设计和全面CSS参考。
18.屏幕尺寸 (18. Screen Sizes)
A really extensive list of mobile devices and laptops with their respective screen sizes. The devices even link to their product pages on Amazon.
包含屏幕尺寸的大量移动设备和笔记本电脑列表。 这些设备甚至链接到其在Amazon上的产品页面。
19.前端准则 (19. Frontend Guidelines)
One developer’s tips for code style in various aspects of HTML/CSS/JavaScript. Lots of good tips here.
一位开发人员针对HTML / CSS / JavaScript各个方面的代码样式的技巧。 这里有很多好的技巧。
20. CSS标尺 (20. CSS Ruler)
A simple, interactive little tool to help you understand the different ways CSS handles relative and absolute font sizes.
一个简单的交互式小工具，可以帮助您了解CSS处理相对和绝对字体大小的不同方式。
推荐你的 (Suggest Yours)
If you have another suggestion for a learning resource, leave it in the comments. In the meantime, when you get through this one, you can check out the previous posts if you’ve missed those:
如果您对学习资源有其他建议，请在评论中保留。 同时，当您读完这篇文章时，如果您错过了以前的文章，则可以查看一下以前的文章：
翻译自: https://www.sitepoint.com/20-docs-guides-front-end-developers-4/
面向对象的前端开发