面向对象的前端开发_20多种面向前端开发人员的文档和指南（第5号）
面向对象的前端开发
It’s that time again to choose the tool or technology that we want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back covered.
是时候再次选择我们想要使用的工具或技术。 如果您觉得自己一直在努力构建，但可能学习的内容不尽如人意，那么我会为您提供帮助。
Please enjoy the fifth installment of our Docs and Guides series and don’t forget to let us know of any others that we haven’t yet included in this or a previous post.
请享受我们的“文档和指南”系列的第五期，不要忘记让我们知道我们尚未在此或上一篇文章中包含的其他内容。
1. SitePoint Sass参考 (1. SitePoint Sass Reference)
SitePoint’s very own project, a reference site based on Sass built by our resident expert Hugo Giraudel and Stu Robson, SitePoint’s Sass editor.
SitePoint属于自己的项目，它是由我们的驻地专家Hugo Giraudel和SitePoint的Sass编辑器Stu Robson构建的基于Sass的参考站点。
2. SVG viewBox和preserveAspectRatio交互式演示 (2. SVG viewBox and preserveAspectRatio Interactive Demo)
This is an interactive page to go along with a related article series by Sara Soueidan. This demo helps readers visualize some of the concepts associated with the viewBox and preserveAspectRatio attributes used on SVG elements. Noteworthy also is that the demo page has an associated cheat sheet.
这是一个交互式页面，以及Sara Soueidan的相关文章系列。 该演示可帮助读者形象化与viewBox相关的一些概念，并在SVG元素上使用preserveAspectRatio属性。 还值得注意的是，演示页面具有关联的备忘单。
3. CSS 2.1索引列表 (3. CSS 2.1 Index List)
This is a W3C document I came across recently. It’s a giant list of just about every CSS term, with links to each term or feature. In some cases the link is to a simple definition somewhere in the spec, in other cases it’s a link to that feature’s place in the spec.
这是我最近遇到的W3C文档。 这是一个几乎每个CSS术语的庞大列表，其中包含每个术语或功能的链接。 在某些情况下，链接是指向规范中某个地方的简单定义，而在其他情况下，则是指向该功能在规范中的位置的链接。
4.关于Github的流行编码公约 (4. Popular Coding Convention on Github)
Choose from different languages including JavaScript, Ruby, and PHP then this page will show you chart-based data to indicate how prevalent certain coding patterns are on GitHub-hosted projects.
从包括JavaScript，Ruby和PHP在内的不同语言中进行选择，然后此页面将向您显示基于图表的数据，以指示某些编码模式在GitHub托管项目中的流行程度。
5.地下城与开发商 (5. Dungeons and Developers)
This is not an interactive game, but a RPG-like talent tree representation of web development skills, with links to various places to learn the different skills listed.
这不是交互式游戏，而是Web开发技能的类似于RPG的人才树表示，带有指向各个地方的链接，以学习列出的不同技能。
6. JSON API (6. JSON API)
“If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON API is your anti-bikeshedding weapon. By following shared conventions, you can increase productivity, take advantage of generalized tooling, and focus on what matters: your application.”
“如果您曾经与您的团队就JSON响应的格式化方式进行过辩论，那么JSON API是您的反自行车武器。 通过遵循共享约定，您可以提高生产率，利用通用工具并专注于重要的事情：您的应用程序。”
7. jQuery UI事件备忘单 (7. jQuery UI Events Cheatsheet)
A chart that specifies which jQuery events are applicable for desktop vs mobile and mouse vs keyboard.
一张图表，指定哪些jQuery事件适用于台式机，移动设备以及鼠标和键盘。
8. Weightof.it (8. Weightof.it)
A quick reference app to view and compare JavaScript libraries by weight with an option to view the size Gzipped or not. The app also lets you add different libraries to a “stack” (like adding to a shopping cart) so you can view your total library weight.
一个快速参考应用程序，用于按重量查看和比较JavaScript库，并提供选项来查看是否压缩大小。 该应用程序还允许您将不同的库添加到“堆栈”中(例如添加到购物车中)，以便查看库的总重量。
9.一幅图片中JavaScript (9. JavaScript in one pic)
This a very nicely done visualization of all of JavaScript’s native features. Not exactly the most practical way to learn the language, but from scanning this you might find something interesting to do further research on.
这是JavaScript所有本机功能的非常出色的可视化。 这并不是最实用的语言学习方法，但是通过扫描，您可能会发现一些有趣的东西，可以做进一步的研究。
10.了解NPM (10. Understanding NPM)
“Since its creation, the role of npm has expanded to fulfill the broader needs of the JavaScript and Node.js developer community to include management of front-end web applications, mobile applications and other JavaScript development tools and frameworks […] This visualization is intended to help you understand the role and scope of npm.”
“自创建以来，npm的作用已经扩展，可以满足JavaScript和Node.js开发人员社区的更广泛的需求，其中包括前端Web应用程序，移动应用程序和其他JavaScript开发工具和框架的管理[…]旨在帮助您了解npm的作用和范围。”
11. Web上的SVG (11. SVG on the Web)
An overview of SVG by Jake Giltsoff, getting you up to speed on how to use SVG on websites with some tips and tricks to help you along.
杰克·吉尔佐夫(Jake Giltsoff)撰写的SVG概述，通过一些提示和技巧来帮助您快速掌握如何在网站上使用SVG。
12. GreenSock备忘单 (12. GreenSock Cheat Sheet)
A quick reference in PDF format for using GreenSock the powerful JavaScript animation library.
使用功能强大JavaScript动画库GreenSock的PDF格式快速参考。
13. JavaScript图形库比较 (13. JavaScript Graphing Library Comparison)
An easy way to compare JavaScript graphing/charting libraries. Just hover over a tile and you’ll get info on supported chart types, pricing, and dependencies. You can also choose to filter the libraries by categories (chart types, pricing, options, and dependencies).
比较JavaScript图形/图表库的简单方法。 只需将鼠标悬停在磁贴上，您将获得有关受支持的图表类型，价格和依存关系的信息。 您还可以选择按类别(图表类型，价格，选项和依赖项)过滤库。
14.可访问性备忘单 (14. The Accessibility Cheatsheet)
From Ire Aderinokun, this is a condensed version of the Web Content Accessibility Guidelines (WCAG), supported by some practical examples.
来自Ire Aderinokun，这是Web内容可访问性指南(WCAG)的精简版本，并附有一些实际示例。
15. AngularJS样式指南 (15. AngularJS Style Guide)
“The goal of this style guide is to present a set of best practices and style guidelines for one AngularJS application.”
“此样式指南的目标是为一个AngularJS应用程序提供一组最佳实践和样式指南。”
16.默认的浏览器焦点轮廓样式 (16. Default Browser Focus Outline Styles)
This is a table that uses screenshots to display how the different browsers handle focus styles on various form elements in different situations.
该表使用屏幕截图显示不同情况下不同浏览器如何处理各种表单元素上的焦点样式。
17. 5分钟内的Flexbox (17. Flexbox in 5 Minutes)
An interactive tour of all the major features of the new flexbox specification. Includes demos and allows you to play with the features right on the page.
新Flexbox规范的所有主要功能的交互式浏览。 包括演示，并允许您直接使用页面上的功能。
18. Sass函数备忘单 (18. Sass Functions Cheat Sheet)
A searchable list of Sass functions (color, opacity, number, string, etc.) as a handy reference. You can download as a 2-page color or black-and-white PDF or LaTeX document.
可搜索的Sass函数列表(颜色，不透明度，数字，字符串等)，方便使用。 您可以下载为2页彩色或黑白PDF或LaTeX文档。
19.网络类型的状态 (19. The State of Web Type)
“Up-to-date data on support for type and typographic features on the web.”
“有关网络上字体和印刷功能支持的最新数据。”
20. ES6 Katas (20. ES6 Katas)
“A simple website that lists various katas (small tasks) for learning ECMAScript 6 by doing it. Each kata links to tddbin and loads the according source code in there. All you have to do is fix the failing tests. And by doing so you are supposed to use and learn ES6 one small task and feature at a time.”
“一个简单的网站列出了用于学习ECMAScript 6的各种选项(小任务)。 每个kata都链接到tddbin并在其中加载相应的源代码。 您所要做的就是修复失败的测试。 这样一来，您应该一次使用和学习ES6一个小的任务和功能。”
荣誉奖… (Honorable Mentions…)
还有吗？ (Got Any More?)
Here are the previous posts in this series:
以下是本系列中的先前文章：
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-5/
面向对象的前端开发