前端資源

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”