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

   2016-07-28 0

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

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

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

  链接:http://standardjs.com

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

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

  链接:https://angular.io/docs/ts/latest/guide/webpack.html

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

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

  链接:https://thepaciellogroup.github.io/AT-browser-tests/

  “HTML元素是如何被屏幕阅读器所支持的。”在Windows10操作系统上的Firefox浏览器里,在VoiceOver上的Firefox浏览器里和在OSX操作系统上的Safari9浏览器上,和在Windows8.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

 4. Type Terms

  链接:https://www.supremo.tv/typeterms/

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

 5. Email Toolbox(Email 工具盒)

  链接:http://email-toolbox.com/

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

 6. Almost complete guide to flexbox (without flexbox)

  链接:https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

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

 7. Angular 1.x styleguide (ES2015)

  链接:https://github.com/toddmotto/angular-styleguide

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

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

 8. CSS Purge

  链接:http://www.csspurge.com/

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

 9. Google Chrome’s CSS File

  链接:https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

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

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

 10. <head> Cheat Sheet

   链接:http://gethead.info/

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

 11. Generators and Iterators

  链接:http://greim.github.io/gen/dist/00-intro.html

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

 12. Node.js ES2015 Support

  链接:http://node.green/

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

 13. HTML5 Accessibility

  链接:http://www.html5accessibility.com/

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

 14. MaintainableCSS

  链接:http://maintainablecss.com/

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

 15. Simplified JavaScript Jargon

  链接:http://jargon.js.org/

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

 16. Bootstrap 4 Cheat Sheet

  链接:http://hackerthemes.com/bootstrap-cheatsheet/

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

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

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

  链接:https://egghead.io/articles/angularjs-core-services-directive-definition-object-and-ui-router-cheat-sheets

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

 18. React Makes You Sad

  链接:https://github.com/gaearon/react-makes-you-sad

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

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

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

  链接:http://www.flexboxpatterns.com/

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

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

 20. Hacksplaining

  链接:https://www.hacksplaining.com/

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

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

 
标签: 前端开发
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • bootstrap前端开发框架环境搭建 bootstrap框架
    !DOCTYPE htmlhtmlheadtitlebootstrap框架搭建/titlelink href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/headbodyscript src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"/scriptscrip
    03-08
  • 前端开发:JavaScript---ECMAScript
    前端开发:JavaScript---ECMAScript
    JavaScript:JavaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的脚本语言。它运行在客户端从而减轻服务器的负担。js是一种解释型语言,边执行边解释,无需另外编译。javascript的作用:  1. 表单验证---减轻服
    02-08
  • 前端开发CSS样式重置代码,reset.css
    /* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, texta
    02-08
  • 从cocos2d-html5中提取出来的,用做前端开发的
    从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js/**************************************************************************** Copyright (c) 2010-2012 cocos2d-x.org Copyright (c) 2008-2010 Ricardo Quesada Copyright (c) 2011Zynga Inc.
    02-08
  • React前端开发createElement源码解读 js的creat
    目录React 与 Babel元素标签转译组件转译子元素转译createElement源码函数入参第一段代码 __self 和 __source第二段代码 props 对象第三段代码 children第四段代码 defaultProps第五段代码 ownerReactElement源码REACT_ELEMENT_TYPE回顾React 与 Babel元素标
  • 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法
    前端开发:4、JavaScript简介、变量与常量、数
    前端开发之JavaScript目录前端开发之JavaScript一、JavaScript简介二、JS基础三、变量与常量四、基本数据类型1、数值类型2、字符类型3、布尔类型五、特殊数据类型1、null2、undefined六、引用数据类型1、对象(Object)2、数组(Array)3、字典(Dictionary)七
    02-08
  • CSS Houdini:用浏览器引擎实现高级CSS效果
    CSS Houdini:用浏览器引擎实现高级CSS效果
    CSS的任何新特性从诞生到被浏览器普遍支持,要经历漫长的周期,而CSS Houdini开放了底层接口,让开发者直接接触、开发原生的CSS效果,实现更为复杂、流畅的效果和动画,无需等待,快学起来吧!vivo 互联网前端团队-Wei XingHoudini被称之为Magic of styling a
  • 从零开始制作【立体键盘】,画UI免写CSS,【盲打练习】的交互逻辑只用了10来行表达式!
    从零开始制作【立体键盘】,画UI免写CSS,【盲
    手把手教你从空白页面开始通过拖拉拽可视化的方式制作【立体键盘】的静态页面,不用手写一行CSS代码,全程只用10来行表达式就完成了【盲打练习】的交互逻辑。整个过程在众触应用平台进行,快速直观。手把手教你从空白页面开始通过拖拉拽可视化的方式制作【立
  • 前端开发框架对比
    前端开发框架对比
    近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特点,本文对这些框架进行初
    09-18 前端
点击排行