面向对象的前端开发_20多种面向前端开发人员的文档和指南（第11号）

最新推荐文章于 2020-09-01 07:39:50 发布

culi3118

最新推荐文章于 2020-09-01 07:39:50 发布

阅读量153

点赞数

文章标签：编程语言 java javascript python html ViewUI

原文链接：https://www.sitepoint.com/20-docs-guides-front-end-developers-11/

版权

面向对象的前端开发

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 eleventh 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.

因此，请享受我们的文档和指南系列的第11部分，不要忘记在我尚未包括的其他任何人的评论中让我知道。

1. HTML画布备忘单 (1. HTML Canvas Cheatsheet)

An HTML Canvas syntax cheatsheet, available in regular web format or as a downloadable PDF or PNG. This cheatsheet has a good overview starting with the basics (shapes, text, colors, etc.) and moving on to more advanced features (images, transformations, animations).

HTML Canvas语法备忘单，可提供常规的网络格式或可下载的PDF或PNG。该备忘单概述了基本知识(形状，文本，颜色等)，然后介绍了更高级的功能(图像，变换，动画)。

2. ARIA地标示例 (2. ARIA Landmarks Example)

An extensive W3C guide providing details for authoring accessible pages using ARIA Landmarks and headings. In addition to the info in the various pages (which cover everything from banner roles regions), the pages have interactive buttons at the top of the page that allow you to view the landmarks and headings visually, which is useful for identifying the organization and structure of a web page.

详尽的W3C指南，提供了使用ARIA地标和标题创作可访问页面的详细信息。除了各个页面(涵盖横幅角色区域的所有内容)中的信息之外，页面还在页面顶部具有交互式按钮，使您可以直观地查看地标和标题，这对于识别组织和结构非常有用网页。

3.干净的代码JavaScript (3. Clean Code JavaScript)

Developer Ryan McDermott has put together a comprehensive repository of software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.

开发人员Ryan McDermott从Robert C. Martin的书Clean Code (适用于JavaScript)中收集了软件工程原理的综合资料库。这是在JavaScript中制作可读，可重用和可重构软件的指南。

4.都知道 (4. Know it all)

Not so much a guide in itself, but a tool to help you decide which guides, tutorials, etc., to look for. It’s basically a web app in the style of a to-do list that lets you indicate which web platform and Node.js technologies you know or don’t know. The list starts off very broadly and lets you drill down to more specific features under each category.

它本身并不仅仅是一个指南，而是一个可帮助您确定要查找的指南，教程等的工具。它基本上是一个具有待办事项列表样式的Web应用程序，可让您指示您知道或不知道的Web平台和Node.js技术。该列表从最广泛的位置开始，可让您深入了解每个类别下的更多特定功能。

5.足够的函数式编程指南 (5. Mostly Adequate Guide to Functional Programming)

It seems like every week there’s a new resource on functional programming, but this one looks like a good option for experienced programmers and those not yet familiar with functional programming concepts. Written for JavaScript developers, this seems to be a work in progress. The first nine chapters are done and I think that’s plenty for anyone just getting started with this subject.

似乎每周都有一个关于函数式编程的新资源，但是对于有经验的程序员和尚未熟悉函数式编程概念的程序员来说，这似乎是一个不错的选择。写给JavaScript开发人员的，这似乎正在进行中。前九章已经完成，对于任何刚开始学习该主题的人，我认为这已经足够了。

6.在WHATWG上获取生活标准 (6. Fetch Living Standard on WHATWG)

In case you haven’t noticed, the Fetch standard, which is a modern replacement for XMLHttpRequest, now has pretty strong browser support. If you’re looking into making the transition from older techniques to this new API, the official spec might be a decent place to start.

如果您没有注意到，Fetch标准(它是XMLHttpRequest的现代替代品)现在具有相当强大的浏览器支持。如果您正在考虑从旧技术过渡到此新API，则官方规范可能是一个不错的起点。

7.从头开始编写JavaScript堆栈 (7. JavaScript Stack from Scratch)

This “minimalistic and straight-to-the-point guide to assembling a JavaScript stack” by Jonathan Verrecchia might help developers overcome the complexities of the current JavaScript ecosystem. The guide does not go into details about the individual technologies, but only demonstrates how you can get these up and running.

乔纳森·韦雷基亚(Jonathan Verrecchia)撰写的这份“组装JavaScript堆栈的简单明了的指南”可能有助于开发人员克服当前JavaScript生态系统的复杂性。该指南没有详细介绍各个技术，仅演示了如何启动和运行这些技术。

8. npm与纱线备忘单 (8. npm vs. Yarn Cheat Sheet)

Yarn is a JavaScript package manager that attempts to solve some of the problems with npm. Gant Laborde put together a little guide to help developers understand the differences should they want to make the switch. This is the PDF version of the article that has the same content.

Yarn是一个JavaScript软件包管理器，它试图解决npm的一些问题。 Gant Laborde整理了一些指南，以帮助开发人员了解他们想要进行切换时的差异。这是内容相同的PDF版本。

9. CSS参考 (9. CSS Reference)

A visual guide to CSS, divided into basic categories that include illustrated and animated examples to help you understand different properties and their possible values.

直观CSS指南，分为基本类别，包括插图和动画示例，以帮助您了解不同的属性及其可能的值。

10. iOS版Dash (10. Dash for iOS)

I’ve featured the desktop version of Dash before, but this is the iPad and iPhone version. Dash is a free and open-source API Documentation Browser that gives your iPad and iPhone instant offline access to 150+ API documentation sets, including Bootstrap, Angular, CoffeeScript, Ember.js, Node.js, Meteor, and tons more for both front-end and back-end developers.

我以前使用过Dash的桌面版本，但这是iPad和iPhone版本。 Dash是一个免费的开源API文档浏览器，可让您的iPad和iPhone即时脱机访问150多种API文档集，包括Bootstrap，Angular，CoffeeScript，Ember.js，Node.js，Meteor，以及前两者的更多功能后端开发人员。

11. ES6备忘单 (11. ES6 Cheatsheet)

I know what you’re thinking: Not another ES6 cheat sheet! This one is pretty cool, though. It’s organized into 9 sections with 31 code examples. Each example has a CodePen code comparison of the old way of doing things compared to the ES6 way of doing things.

我知道您在想什么：没有另一个ES6备忘单！不过，这很酷。它分为9个部分，包含31个代码示例。每个示例都将旧的处理方式与ES6的处理方式进行CodePen代码比较。

12.渐进式Web应用程序清单 (12. Progressive Web App Checklist)

A guide from Google on the hot topic of PWAs: “To help teams create the best possible experiences we’ve put together this checklist which breaks down all the things we think it takes to be a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.”

Google针对PWA热门话题提供的指南：“为了帮助团队创造最佳体验，我们整理了这份清单，其中列出了我们认为成为基准PWA所需的所有内容，以及如何采取这一步骤通过提供更有意义的脱机体验，甚至可以更快地进行交互并处理许多更重要的细节，借助示例性PWA进一步实现了这一目标。”

13.字节节省技术 (13. Byte-saving Techniques)

Based on an old code golf project called 140Bytes, this document has lots of quick JavaScript optimization tips and techniques. Note that some of these might not be practical in a real-world project as they could be problematic during code maintenance.

基于一个名为140Bytes的旧代码高尔夫项目，该文档提供了许多快速JavaScript优化技巧和技术。请注意，其中一些可能在实际项目中不切实际，因为它们在代码维护期间可能会出现问题。

14. AMP示例 (14. AMP by Example)

This website gives a hands-on introduction to Accelerated Mobile Pages based on code and live samples. It will help you learn how to create web pages with AMP and how to use AMP components.

该网站根据代码和实时示例对动手加速页面进行了动手介绍。它将帮助您学习如何使用AMP创建网页以及如何使用AMP组件。

15. WebAIM 508节清单 (15. WebAIM Section 508 Checklist)

A checklist from the folks at WebAIM, for helping you to get your pages Section 508 compliant. The guide is available online or as a PDF and it’s divided into two sections of content: 1) HTML 2) Scripts and Plug-ins.

WebAIM上的人员提供的清单，以帮助您使页面符合Section 508的要求。该指南可在线或以PDF形式获得，分为两部分内容：1)HTML 2)脚本和插件。

16.前端超级多语种 (16. Front-end Hyperpolyglot)

Jeff Carpenter’s comparison chart of similar features in popular JavaScript frameworks. If you’re considering using React, Angular, Ember, Polymer, Vue, or Riot.js, this breakdown will show you the syntax from each library on lots of different techniques common in these kinds of libraries and frameworks.

Jeff Carpenter在流行JavaScript框架中相似功能的比较表。如果您正在考虑使用React，Angular，Ember，Polymer，Vue或Riot.js，则此分类将为您显示每种库的语法，这些库在这些库和框架中具有多种常用技术。

17.版式手册 (17. Typography Handbook)

Kenneth Wang’s “concise, referential guide on best web typographic practices.” Includes tips on design, sizing and units with CSS, and font formats.

肯尼斯·王(Kenneth Wang)的“关于最佳网络印刷实践的简洁，参考指南。” 包括有关设计，使用CSS的大小和单位以及字体格式的技巧。

18. JavaScript模块 (18. JavaScript Modules)

A quick introduction and explanation of ES6 Modules, a module system inspired by Node.js modules. Although ES6 Modules don’t have much browser support yet, this is a nice guide to get a head start on what to expect. There’s also a comparison with CommonJS.

快速介绍和解释ES6模块，这是受Node.js模块启发的模块系统。尽管ES6模块还没有太多的浏览器支持，但是这是一个很好的指南，可以使您对所期望的内容有所了解。还有与CommonJS的比较。

19.同情心 (19. Sassisfaction)

A searchable collection of resources for Sass developers including tools, tutorials, libraries, and more.

可搜索的Sass开发人员资源集合，包括工具，教程，库等。

20. selfcare.tech (20. selfcare.tech)

Lastly, let’s finish this list with a collection of self-care resources from Jennifer Lyn Parsons. Includes tips, articles, and tools on exercise, positivity, journaling, and more. All tech workers will benefit from making good health and well-being a priority, and this might be a good starting point.

最后，让我们从Jennifer Lyn Parsons收集的一系列自我保健资源来完成此列表。包括有关锻炼，积极性，日记等的提示，文章和工具。将身体健康和福祉作为首要任务，所有技术人员都将从中受益，这可能是一个很好的起点。