20个为前端开发者准备的文档和指南

时间 2019-11-11

原文原文链接

是时候从新学习了！和之前同样，我收集了不少不一样的学习资源，包括学习指南，学习文档，和其余有用的网站来帮助你在前端开发的不一样领域里快速地进入状态。css

因此请尽情享受咱们的文档和指南系列的第九部分，而且不要忘了在评论区让我知道任何我没有找到的。html

1. JavaScript Standard Style(JavaScript标准样式)

JavaScript标准样式并非一个主要的学习指南,可是它是一个模式,根据这个模式你能够安装和运行JavaScript，而且能够经过命令行来测试你的JavaScript代码，而不是一系列JavaScript语法的规则。它也被用做一个文本编辑器的插件。做为一份指南，你也能够看看Rules breakdown，这对于初学者和其余人来讲是培养一些基本的JavaScript意识练习的最好方法。前端

2. Webpack: An Introduction(Webpack:一份入门手册)

“Webpack是一款流行的模块打包工具，它能在语块里很方便地打包应用的代码资源，而且它能从一个服务器里把代码加载到一个浏览器里。”这份指南在Angular的官网上有，这份指南已经准备好在Angular2应用里使用Webpack。html5

3. Aural UI of the Elements of HTML(HTML元素的Aural UI)

“HTML元素是如何被屏幕阅读器所支持的。”在Windows10操做系统上的Firefox浏览器里,在VoiceOver上的Firefox浏览器里和在OSX操做系统上的Safari9浏览器上,和在Windows8.1操做系统上的NVDA和Firefox浏览器里是由四个表格组成的数据来覆盖JAWS的, 还有更多的测试。node

JAWS介绍连接地址: http://wenku.baidu.com/view/18d8337a1711cc7931b716d4.htmlreact

VoiceOver介绍连接地址: http://baike.sogou.com/v7818959.htm?fromTitle=voiceoverwebpack

OSX介绍连接地址: http://baike.sogou.com/v286354.htm?fromTitle=OSXgit

NVDA介绍连接地址: http://blog.sina.com.cn/s/blog_bdda07c4010197aq.htmlangularjs

4. Type Terms

Type Terms工具对设计者的有用程度远大于开发者，可是它对于那些想更加熟悉排版术语的人来讲，是为他们精心设计的和有用的交互工具。它是Supremo(苏帕摩)的民间机构，一个曼彻斯特的设计机构开发出来的。github

5. Email Toolbox(Email 工具盒)

它是大量的连接资源，主要聚焦在设计和编写HTML邮件代码上。这些资源都在不一样的分类下，包括人们应遵循的，课程，可读的博客文章，工具和邮件服务提供者(商)。

6. Almost complete guide to flexbox (without flexbox)

这里有不少不一样的伸缩布局盒指南和工具，可是他们有一些不一样。这份指南将向你展现在你的布局里如何使用传统的方法来达到和伸缩布局盒同样的效果。很高兴能看到它们在这样一个帖子里，而且还有代码示例。

7. Angular 1.x styleguide (ES2015)

这是由Todd Motto写的一份”针对团队的Angular样式指南”,他是一名Telerik倡导开发人员。Todd也在Angular JS开发网站上提供课程。这份样式指南”已经为ES2015从头到脚从新写了一遍,内容变化的是在Angular1.5以上版本在将来升级你的应用到Angular2。”

Telerik的介绍连接地址: http://bbs.51aspx.com/showtopic-44305.html

8. CSS Purge

这个网站能够给你一些流行网站和框架排名的有效统计数据，可维持的CSS.它能够展示CSS文件大小的数据,具体的排名,和使用的CSS属性。

9. Google Chrome’s CSS File

（需自备墙梯才能打开连接）

归功于Umar Hansa在推特上写的博客文章。这是Chrome浏览器使用的核心CSS文件,该核心CSS文件用来为HTML元素提供以西基本默认的样式。有兴趣能够快速浏览,由于它确实有一些奇怪。

10. <head> Cheat Sheet

“列出了在你的文档里的<head>标签元素里有不少的能够执行的东西。”我喜欢这个，由于它不只列出了标准的元素，同时也列出了咱们能看见的不少特定的东西，可是对于这些特定的东西咱们也许并不彻底理解。

这是一份由Greg Reimer所写的，覆盖了ES6 Generators的有着八个部分的教程。”在现在的JavaScript中Generators是一个最被忽视的功能。我认为这是由于generators仅仅是由generators和iterators组成的一个两部分总体的一半。并且知道若是只学习其中一个而不学其余的,则就像是在画一幅不完整的画。至少对于我本人来讲,啊哈!那个时刻没有到来知道我缩小范围而且从总体上看iterators和generators。”

12. Node.js ES2015 Support

从技术上说，这是后端，可是它和JavaScript开发者息息相关。这里有为ES2015准备的兼容的表格集合，可是它只能在Node.js上应用。

13. HTML5 Accessibility

我在以前一个帖子里已经贴了这个，可是它被从新设计了，并且从新设计后的看上去很棒。”这个网站测试了在主流的浏览器上对HTML5新特性的支持程度。这包括它们是否有键入访问权限，是否容许经过APIs映射到平台，而且是否任何涉及到新特性的权限功能都被支持。”

14. MaintainableCSS

“编写CSS不用再担忧以前存在的样式会带来问题。MaintainableCSS是编写模块化的,可扩展的和可扩展性的CSS样式的一种方式。”这是由Adam Silver编写的有十二个部分的指南。

15. Simplified JavaScript Jargon

最初是由Hugo Giraudel开始的，这是一个社区驱动的试图用最少简单的词汇来解释不少时髦的词汇，来编织当前的JavaScript生态系统。”这个想法并非取代我的的文档，可是能够做为某种形式的术语表，能够被轻松地引用。”

16. Bootstrap 4 Cheat Sheet

一份Bootstrap 4的参考手册,来自HackerThemes网站的Alex。这个网站有一个很是漂亮交互式布局,这个漂亮的交互式布局展现了可被点击的条目,当该条目被点击时在该页面的视口的底端会有代码片断和代码效果显示出来。你也能够在版本4里点击突出的全部新的东西。

Bootstrap 4的介绍连接地址: http://www.bootcss.com/

17. AngularJS Cheat Sheets（AngularJS参考手册）

“咱们建立了一些参考手册学习指南来帮助你克服最初的AngularJS学习曲线，而且提供给你的平常工做提供一份参考。”包括三份参考手册:AngularJS Core Services(AngularJS核心服务),AngularJS Directive Definition Object(AngularJS指令定义对象)，和AngularJS ui-router(AngularJS 用户界面路由)。

18. React Makes You Sad

Dan Abramov为那些在使用React框架时有理解不一样概念困难的人而制做的一张流程图。这张流程图提供了一些能够作和不能够作的类型的建议，来帮助你简化事情，这样你就能够更好地理解这个库了。

React介绍连接地址: http://www.ruanyifeng.com/blog/2015/03/react.html

19. Flexbox Patterns（可扩展布局盒模式）

“Flexbox很棒，可是引入了不少新的概念，这样作可能使使用它变得有些困难。这些交互示例将会展现给你很实际的方法，来使用Flexbox构建UI组件。它们以简单的代码，而在结尾以前获得更复杂的代码

Flexbox介绍连接地址: http://www.cnblogs.com/starof/p/4894140.html

20. Hacksplaining

它不只仅适用于前端开发者，同时也值得在开发领域的人进去看一看。”The best defense against hackers(对抗黑客最好的防护)是一个见多识广的开发团队。咱们交互式的练习将教会你的团队，关于现在大多数的常见的安全漏洞。”