面向对象的前端开发
As is often the case in front-end development, it seems we have so much to learn and so little time to do it. I’ve rounded up another 20+ learning resources, interactive playgrounds, and other goodies for front-end learning.
就像前端开发中经常发生的那样,似乎我们有很多东西要学习,而花的时间却很少。 我已经收集了另外20多种学习资源,交互式游乐场和其他用于前端学习的东西。
So please enjoy the seventh 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. Meteor: The Official Guide)
This is a site from the official Meteor development team, outlining opinions on best-practice application development targeted at intermediate JavaScript developers who are already familiar with Meteor.
这是Meteor官方开发团队的网站,概述了针对已经熟悉Meteor的中级JavaScript开发人员的最佳实践应用程序开发的意见。
2. Gethtml (2. Gethtml)
Lists in grid format the names and descriptions of all HTML elements in the W3C and WHATWG specs. If you click an element, you’ll also see example code on how it can be used along with a link to the spec.
以网格格式列出W3C和WHATWG规范中所有HTML元素的名称和描述。 如果单击某个元素,还将看到有关如何使用该元素的示例代码以及指向规范的链接。
3.学习ES2015 (3. Learn ES2015)
Maybe you’re like me and you’re tired of seeing so many ES6/ES2015 resources. Or maybe this is the one that you finally sit down with and it gets you over the hump of absorbing everything that’s new in the ECMAScript spec.
也许您就像我一样,并且厌倦了看到如此多的ES6 / ES2015资源。 也许这是您最终坐下来的那个,它使您摆脱了吸收ECMAScript规范中新内容的驼峰。
4. Flexbox僵硬 (4. Flexbox Froggy)
This one made the rounds a short time ago. If you haven’t seen it and want a fun way to study up on flexbox syntax, this is a very nicely done little interactive game/tutorial.
这是不久前进行的回合。 如果您还没有看到它,并且想要一种有趣的方法来学习flexbox语法,那么这是一个非常出色的互动游戏/教程。
5. JavaScript开发人员调查结果 (5. JavaScript Developer Survey Results)
Nicolás Bevacqua’s study into JavaScript habits. This seems to be the first such survey that he’s conducted and he received an over 5,000 survey entries.
NicolásBevacqua对JavaScript习惯的研究。 这似乎是他进行的首次此类调查,并且他收到了5,000多个调查条目。
6. Flexbox.help (6. Flexbox.help)
A simple interactive page to help you visualize how each flexbox feature works (flex-wrap, flex-direction, etc).
一个简单的交互式页面,可帮助您可视化每个flexbox功能的工作方式(flex-wrap,flex-direction等)。
7. CDN比较 (7. CDN Comparison)
“This collection of information supports you to better find the best CDN for your content delivery needs.”
“这种信息收集可帮助您更好地找到最适合内容交付需求的CDN。”
8.角备忘单 (8. Angular Cheat Sheet)
Part of the official Angular 2 docs, this is a one-stop developer guide with options to lookup syntax for JavaScript, TypeScript, and Dart.
这是Angular 2官方文档的一部分,是一站式开发人员指南,其中包含用于JavaScript,TypeScript和Dart的查找语法的选项。
9.承诺人 (9. Promisees)
More from Nicolás Bevacqua, this time it’s a visualization playground to help you learn JavaScript’s new promises feature. What’s great about this is the ability to step through the visualized code components with the option to save the animated visualization as a GIF.
NicolásBevacqua的更多内容,这是一个可视化的游乐场,可帮助您学习JavaScript的新Promise功能。 这样做的好处是能够逐步浏览可视化的代码组件,并可以选择将动画可视化另存为GIF。
10.过滤混合 (10. Filter Blend)
An interactive playground for learning CSS’s background-blend-mode
and filter
properties.
一个用于学习CSS的background-blend-mode
和filter
属性的交互式游乐场。
11.混合混合模式CSS属性测试 (11. Mix-Blend-Mode CSS property test)
This is similar to the previous site, this time it’s a playground to help you understand the mix-blend-mode
property.
这与以前的站点类似,这次是一个游乐场,可帮助您了解mix-blend-mode
属性。
12.正则表达式101 (12. Regular Expressions 101)
A really nice little interactive tool to help you understand and visualize regular expressions. Includes a quick reference section, an explanation of the expression used, plus the ability to save the expression to a unique URL.
一个非常好的互动工具,可以帮助您理解和可视化正则表达式。 包括快速参考部分,对所用表达式的说明以及将表达式保存到唯一URL的功能。
13. ServiceWorker食谱 (13. ServiceWorker Cookbook)
“A collection of working, practical examples of using service workers in modern web apps. Open your Developer Tools console to view fetch events and informative messages about what each recipe’s service worker is doing.”
“在现代Web应用程序中使用服务工作者的工作实例的集合。 打开您的开发人员工具控制台,以查看获取事件和有关每个配方的服务人员正在做什么的信息。”
14. JavaScript (14. JavaScripting)
A lookup site to search for JavaScript libraries, frameworks, and plugins, filterable by categories including animation, DOM, forms, helpers, audio, video, and more.
一个搜索站点,用于搜索JavaScript库,框架和插件,可按类别进行过滤,包括动画,DOM,表单,助手,音频,视频等。
15. HTTP安全最佳实践 (15. HTTP Security Best Practice)
A set of guidelines for building more secure web properties, covering topics like SSL/TLS, Content Security Policy, cross-site scripting, cookie security, and more.
一组用于构建更安全的Web属性的准则,涵盖诸如SSL / TLS,内容安全策略,跨站点脚本,cookie安全性等主题。
16.在HTML中使用ARIA的注意事项 (16. Notes on Using ARIA in HTML)
“A practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities.”
“针对开发人员的实用指南,涉及如何使用可访问的Rich Internet Applications规范[WAI-ARIA-1.1]向HTML元素添加可访问性信息,该规范定义了使残障人士更容易访问Web内容和Web应用程序的方法。”
17. PostCSS.parts (17. PostCSS.parts )
“A searchable catalog of PostCSS plugins.” If you aren’t yet that familiar with the growing community around PostCSS, this might be a good way to learn about the kinds of plugins available.
“ PostCSS插件的可搜索目录。” 如果您还不熟悉PostCSS周围的社区,那么这可能是了解可用插件种类的好方法。
18.是什么导致布局/回流 (18. What forces layout / reflow)
A Gist by Paul Irish that lists various front-end features that, when used in JavaScript, will trigger “reflow or layout thrashing”, which is a common performance bottleneck.
Paul Irish的Gist列出了各种前端功能,这些功能在JavaScript中使用时,将触发“重排或布局颠簸”,这是常见的性能瓶颈。
19. CSS索引 (19. CSS Indexes)
“A listing of every term defined by CSS specs.” Each item links to its place in the spec.
“ CSS规范定义的每个术语的列表。” 每个项目都链接到其在规范中的位置。
20.最好JavaScript IDE和编辑器是什么? (20. What are the best JavaScript IDEs and editors?)
This is a question posed on the Q&A site Slant, showing multiple pros and cons, along with user comments, for lots of different IDEs and text editors.
这是在问答网站Slant上提出的一个问题,它针对许多不同的IDE和文本编辑器显示了多个优缺点以及用户评论。
荣誉奖… (Honorable Mentions…)
推荐你的 (Suggest Yours)
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-7/
面向对象的前端开发