首页 > 业界 > 20个为前端开发者准备的文档和指南
2016
07-26

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

  英文原文:20+ Docs and Guides for Front-end Developers (No. 9)

  是时候重新学习了!和以前一样,我收集了很多不同的学习资源,包括学习指南,学习文档,和其他有用的网站来帮助你在前端开发的不同领域里快速地进入状态。

  所以请尽情享受我们的文档和指南系列的第九部分,并且不要忘了在评论区让我知道任何我没有找到的。

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 1

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 2

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

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

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

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

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 3

  4. Type Terms

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 4

  5. Email Toolbox (Email 工具盒)

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 5

  6. Almost complete guide to flexbox (without flexbox)

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 6

  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

20个为前端开发者准备的文档和指南 - 同创卓越 - 7

  8. CSS Purge

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 8

  9. Google Chrome’s CSS File

  (需自备墙梯才能打开链接)

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 9

  10.  <head> Cheat Sheet

  “列出了在你的文档里的<head>标签元素里有很多的可以执行的东西。”我喜欢这个,因为它不仅列出了标准的元素,同时也列出了我们能看见的很多特定的东西,但是对于这些特定的东西我们也许并不完全理解。

20个为前端开发者准备的文档和指南 - 同创卓越 - 10

  11. Generators and Iterators

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 11

  12. Node.js ES2015 Support

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 12

  13. HTML5 Accessibility

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 13

  14. MaintainableCSS

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 14

  15. Simplified JavaScript Jargon

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 15

  16. Bootstrap 4 Cheat Sheet

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 16

  17. AngularJS Cheat Sheets(AngularJS 参考手册)

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 17

  18. React Makes You Sad

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 18

  19. Flexbox Patterns(可扩展布局盒模式)

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

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 19

  20. Hacksplaining

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

20个为前端开发者准备的文档和指南 - 同创卓越 - 20

  -

  译文链接:http://www.codeceo.com/article/20-docs-guides-for-web-dev.html

  翻译作者:码农网 – 唐李川

最后编辑:
作者:同创卓越
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。