前端资源

1.应用场景

学习与开发前端项目

2.学习/操作

http://www.axios-js.com/   //axios http 请求组件

 

HTML[CSS/JS]

https://developer.mozilla.org/zh-CN/   // MDN 重要参考手册

https://github.com/diegocard/awesome-html5  //GitHub 上的 Awesome HTML5，其中有大量的资源和技术文章。

 

CSS
https://developer.mozilla.org/zh-CN/docs/Web/CSS

 

-- CSS规范

https://github.com/necolas/idiomatic-css

https://github.com/grvcoelho/css-styleguide

https://google.github.io/styleguide/htmlcssguide.html

我个人觉得只要你仔细读一下文档，CSS 并不难学。绝大多数觉得难的，一方面是文档没读透，另一方面是浏览器支持的标准不一致。所以，学好 CSS 最关键的还是要仔细地读文档。

之后，在写 CSS 的时候，你会发现，你的 CSS 中有很多看起来相似的东西。你的 DRY - Don’t Repeat Yourself 洁癖告诉你，这是不对的。所以，你需要学会使用 LESS 和 SaSS 这两个 CSS 预处理工具，其可以帮你提高很多效率。

 

补充: 

https://sass-guidelin.es/#the-7-1-pattern  //遵循 7-1 模式来组织 SASS：Sass 指南

-- CSS Framework

https://getbootstrap.com/

http://foundation.zurb.com/

https://semantic-ui.com/

https://bulma.io/

其中最著名的就是 Twitter 公司的 Bootstrap，其有很多不错的 UI 组件，页面布局方案，可以让你非常方便也非常快速地开发页面。除此之外，还有，主打清新 UI 的 Semantic UI 、主打响应式界面的 Foundation 和基于 Flexbox 的 Bulma。

关于更多的 CSS 框架，你可以参看Awesome CSS Frameworks 上的列表。https://github.com/troxler/awesome-css-frameworks

还有ant design  (Pro)  TBD  20200109

 

 

-- Reset 或标准化的 CSS 库

https://github.com/necolas/normalize.css

https://github.com/jgthms/minireset.css

https://github.com/csstools/sanitize.css

https://github.com/Martin-Pitt/css-unstyle

当然，在使用 CSS 之前，你需要把你浏览器中的一些 HTML 标签给标准化掉。所以，推荐几个 Reset 或标准化的 CSS 库：Normalize、MiniRest.css、sanitize.css 和 unstyle.css。

 

-- CSS 相关实践[某些公司]

https://codepen.io/chriscoyier/post/codepens-css

http://markdotto.com/2014/07/23/githubs-css/

https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06

https://medium.com/bbc-design-engineering/css-at-bbc-sport-part-1-bab546184e66

https://blog.trello.com/refining-the-way-we-structure-our-css-at-trello  //这个听着很熟悉, 果然就是以前公司用过的scrum管理软件trello

 

-- 可以写出可扩展的 CSS 的阅读列表

https://github.com/davidtheclark/scalable-css-reading-list

 

 

JS  详细参见: https://time.geekbang.org/column/article/12271   //里面都很多推荐

https://book.douban.com/subject/11874748/  

JavaScript: The Good Parts ，中文翻译版为《JavaScript 语言精粹》。这是一本介绍 JavaScript 语言本质的权威图书，值得任何正在或准备从事 JavaScript 开发的人阅读，并且需要反复阅读。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越大师，这本书就是开始。

Secrets of the JavaScript Ninja https://book.douban.com/subject/26638316/ ，中文翻译版为《JavaScript 忍者秘籍》，本书是 jQuery 库创始人编写的一本深入剖析 JavaScript 语言的书。适合具备一定 JavaScript 基础知识的读者阅读，也适合从事程序设计工作并想要深入探索 JavaScript 语言的读者阅读。这本书有很多晦涩难懂的地方，需要仔细阅读，反复琢磨。

 

Effective JavaScript https://book.douban.com/subject/25786138/，Ecma 的 JavaScript 标准化委员会著名专家撰写，作者凭借多年标准化委员会工作和实践经验，深刻辨析 JavaScript 的内部运作机制、特性、陷阱和编程最佳实践，将它们高度浓缩为极具实践指导意义的 68 条精华建议。

 

https://github.com/Chalarangelo/30-seconds-of-code  //一堆你可以在 30 秒内看懂各种有用的 JavaScript 的代码，在 GitHub 上有 2 万颗星了。

https://github.com/denysdovhan/wtfjs  //一堆 JavaScript 搞笑和比较 tricky 的样例。

 

接下来是 ES6 的学习，这里给三个学习手册源。

ES6 in Depth https://hacks.mozilla.org/category/es6-in-depth/，InfoQ 上有相关的中文版 - ES6 深入浅出。还可以看看 A simple interactive ES6 Feature list https://codetower.github.io/es6-features?utm_source=mybridge&utm_medium=email&utm_campaign=read_more ，或是看一下 阮一峰翻译的 ES6 的教程http://es6.ruanyifeng.com/ 。

ECMAScript 6 Tools https://github.com/addyosmani/es6-tools ，这是一堆 ES6 工具的列表，可以帮助你提高开发效率。

Modern JS Cheatsheethttps://mbeaudru.github.io/modern-js-cheatsheet/ ，这个 Cheatsheet 在 GitHub 上有 1 万 6 千颗星，你就可见其影响力了。

 

然后，还有一组很不错的《You Don’t Know JS 系列》https://github.com/getify/You-Dont-Know-JS 的书。

You Don’t Know JS: “Up & Going”

You Don’t Know JS: “Scope & Closures”

You Don’t Know JS: “this & Object Prototypes”

You Don’t Know JS: “Types & Grammar”

You Don’t Know JS: “Async & Performance”

You Don’t Know JS: “ES6 & Beyond”

 

 

 

 

 

 

后续补充

...

3.问题

TBD

4.参考

https://time.geekbang.org/column/article/12271 //87 | 程序员练级攻略：前端基础和底层原理

后续补充

...