是时候再次开始学习！ 和以前一样，我收集了许多不同的学习资源，包括指南，文档和其他有用的网站，以帮助您快速掌握前端开发的不同领域。
因此，请享受我们的文档和指南系列的第十二期，不要忘了在我尚未包括的其他任何人的评论中让我知道。
1.反应位
React模式，技术，技巧和窍门的汇编。 包括有关设计模式，蚂蚁模式，性能提示和样式的部分。 对于那些想深入研究React的人来说，这似乎是一个很好的参考。
2. Vue.js完整的API速查表
该备忘单可以以简单的PDF形式获得，其中包含对不同功能的快速参考，也可以作为完全互动的指南。 交互式指南是Vue.js官方文档的快捷方式，可在覆盖的iframe中打开每个链接。
3. CSS网格备忘单
自从浏览器支持得到改进以来，W3C的新的Grid Layout模块功能实际上已经开始流行。 该交互式指南是一个非常复杂的小应用程序，具有大量选项。 对于初学者来说，这可能不是一个很好的指南，但是对于那些已经熟悉Grid Layout基础知识的人来说，这可能是一个不错的选择。
4. Flexbox备忘单
备忘单中显示了Flexbox（CSS布局中的另一热点）。 据我所知，这是使用与规范相同的描述性信息，但带有一些交互式代码示例以帮助可视化不同的功能。
5.包容性组件
从技术上讲，该站点是一个博客，但既可以用作模式库，又可以作为可访问站点的绝佳示例。 到目前为止，“图书馆”中仅发布了两个条目，但它们都涵盖了它们的主题，因此有很多内容可供参考，如果您担心可访问性，那么这是一个很好的留意未来的帖子（并且应该！）。
6. A11y样式指南
“ A11Y样式指南随附了预填充的可访问组件，其中包括指向相关工具，文章和WCAG准则的有用链接，以使您的网站更具包容性。 这些组件还可以作为HTML标记和SCSS / CSS代码的指南，以在网站创建的每个阶段通知设计人员，前端和后端开发人员。” 这些部分包括表单，媒体，导航等。
7.前端工具配方
常见用途的预配置前端工具设置的集合。 这些观点很自以为是，但可能适合您将来的工作。
8. ES6功能
世界是否需要另一种ES6功能列表？ 也许不是，但是这似乎是非常技术性的解释，我相信很多有经验的使用JavaScript的程序员都会对此感到赞赏。 每个功能还有很多交互式代码示例。
9. CSS网格完整指南
从Codrops CSS参考中，这是详尽的参考，讨论了新Grid Layout规范的所有功能。 许多漂亮的图表和干净的代码示例。
10. HTML参考
包含所有元素和属性的HTML的免费指南。 每个HTML功能都包括大量的代码示例，您可以按meta，内联和块过滤功能。
11. HTML5机械手
如果您不熟悉HTML，并且在弄清楚在什么情况下使用哪个元素时遇到麻烦，那么这个快速的交互式小网站将在回答几个问题后为您提供正确的元素。
12. CSS触发器
更改CSS属性的渲染影响的参考。 也就是说，您将发现某个属性是否触发了重新绘制，布局或合成，以及这些是否发生在默认设置或随后的更新中。
13. CSS属性语法速查表
如果您曾经在其中一个规范中阅读过CSS属性的描述，则可能已经看到一个看起来像这样的Value: nowrap | wrap | wrap-reverse Value: nowrap | wrap | wrap-reverse Value: nowrap | wrap | wrap-reverse 。 其他值可能更加复杂。 此快速参考说明了该符号的含义。
14. HTML5模式
HTML现在允许输入类型在pattern属性中包括正则表达式，以允许在客户端验证值。 该站点具有许多预先构建的模式，包括密码，信用卡，邮政编码，电话号码，电子邮件等。
15. 2016年JavaScript新星
此页通过比较过去12个月在GitHub上添加的星标，通过数字告诉您2016年哪些JavaScript项目受到关注。 这可能是评估哪些库，框架或其他工具最有价值的学习方法。
16.今天网络可以做什么
如果您正在考虑使用本机vs.Web构建您的下一个应用程序（或可能同时使用两者），则此站点为您提供了一些特定HTML5功能的概述，这些功能试图模仿不同设备上的本机功能。 根据您要使用的功能，这应该为您提供一个好主意，使其是否可以在Web上构建。
17.转到HTTPS指南
“一个社区站点，它通过简单的经过测试的流程来帮助站点所有者迁移到HTTPS。 使您可以基于多个平台（WordPress，Magento等），托管环境（cPanel，Apache等）以及对站点的控制/访问级别来过滤计划。”
18. WAI-ARIA创作惯例1.1
“该文档使读者了解如何使用WAI-ARIA 1.1 [WAI-ARIA]创建可访问的丰富Internet应用程序。 它描述了仅靠WAI-ARIA规范对大多数作者来说可能并不明显的考虑因素，并推荐了使用WAI-ARIA角色，状态和属性来使小部件，导航和行为可访问的方法。”
19.网格“后备”和替代
快速参考，了解网格布局功能如何与其他布局方法交互以及如何在不为较旧的浏览器构建完全不同的代码“分叉”版本的情况下提供良好的后备功能。
20.软盒
这是一个交互式的操场，可以了解不同的flexbox功能。 包括一些预设布局以及能够深度链接到实验中已保存状态的功能，这非常酷。
最好的休息
- 最终的社交和数字广告尺寸指南
- 开发人员文档 （Chrome扩展程序）
- iOS CSS参考
- CSS游标
- 从旧版508移至WCAG 2.0 AA
- Polyfill和Web的发展
- 学习辅助功能 （MDN）
- 函数式编程术语
推荐你的
如果您已经为前端开发人员构建或了解其他学习资源，请将其放在评论中，我将在以后的文章中考虑。
同时，这是本系列中的先前文章：
- 20个面向前端开发人员的文档和指南（第1号）
- 20个面向前端开发人员的文档和指南（第2号）
- 20个面向前端开发人员的文档和指南（第3号）
- 20个面向前端开发人员的文档和指南（第4号）
- 20个面向前端开发人员的文档和指南（第5号）
- 20个面向前端开发人员的文档和指南（第6号）
- 20个面向前端开发人员的文档和指南（第7号）
- 20个面向前端开发人员的文档和指南（第8号）
- 20个面向前端开发人员的文档和指南（第9号）
- 20个面向前端开发人员的文档和指南（第10号）
- 20个面向前端开发人员的文档和指南（第11号）
From: https://www.sitepoint.com/20-docs-guides-front-end-developers-12/
扫一扫
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
