以開發者的視角整理編排的前端開發所使用語言的主流學習資源

KarStrand 8年前發布 | 105K 次閱讀 前端開發 前端技術

來自： https://github.com/icepy/Front-End-Develop-Guide

Front-End-Develop-Guide 前端開發指南

創建此項目靈感從SwiftGuide而來，這份指南匯集了前端開發所使用語言的主流學習資源，并以開發者的視角進行整理編排而成。

GitHub： icepy/Front-End-Develop-Guide ｜ 網站： http://front-end-developers-hunan.github.io ｜ 歡迎開發者一起維護，或 反饋/投稿

想了解關于該指南及 前端開發 更多信息的同學，可以閱讀短文《 致 Front-End Developers 》。 想查看優秀的開源項目，可以訪問 《Front-End Develop 項目精選》 。希望查看精選文章，可以訪問 《Front-End Develop 文章精選》 。也歡迎企業招聘人才提供工作崗位(請附上薪資)，可以提交到工作崗位。

由@icepy負責整理

由于個人精力有限，不足之處還望大家多多包容與提供建議。

目錄

  • Front-End Develop 文檔
    • Welcome to Front-End Develop
    • Front-End Develop Language
      • HTML&HTML5 文檔
      • CSS&CSS3 文檔
        • CSS Style Guide
        • CSS Language
        • Sass Guide
        • PostCss
      • JavaScript 文檔
        • JavaScript Style Guide
        • JavaScript Language
    • Front-End Develop Fly
      • 常用庫與框架的使用文檔
      • JavaScript 日志
      • 開放網絡標準
      • HTTP 文檔
      • 緩存策略
      • 前端自動化工具
      • React&React Native生態-探索學習
      • 移動前端技術
      • 動畫
      • 性能調優
    • Front-End Develop 項目與工具
      • 相關工具
      • Front-End Develop 開源項目
    • Front-End Questions
    • Front-End 需要了解的數據結構與算法
    • Front-End Develop 優秀文章
  • 延伸可擴展的方向
    • Node.js
    • Mongodb
    • WebGL
    • Chrome擴展開發
    • 桌面應用程序開發
    • 移動應用程序開發
    • V8 引擎文獻
  • Front-End Developer Blog
  • 通用Developer 社區
  • 技術分享會議

Front-End Develop 文檔

初略讀懂Front-End Develop要做些什么

Web Front-End Stack：這張圖非常詳細。

Welcom to Front-End Develop

W3C組織提供了官網的地址： w3.org ，可以去查詢最近實現的標準以及將來可能實現的討論。

Front-End Develop Language

web前端開發可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等，語言是編程的基礎，火狐的MDN出了一份比較通略的文檔，可以快速查看 Web 技術文檔 。

HTML&HTML5 文檔

書籍：

CSS&CSS3 文檔

CSS Style Guide

CSS Language

Sass Guide

  • Sass基礎知識 ：Sass官網，講述Sass/SCSS應用的基礎知識，變量、函數、條件、循環、宏等等；
  • Sass中文網 ：中文大，給E文不好的小朋友們；
  • Sass Guidelines ：這是由Sass專家 Hugo Giraudel 撰寫的一份“編寫穩健、可維護和可擴展的Sass”的指南，這份指南已被翻譯成中文；
  • Sass meister ：在線Sass/SCSS調試器；

PostCss

JavaScript 文檔

注明：JavaScript文檔將引用 justjavac/free-programming-books-zh_CN#JavaScript 所整理的免費圖書以及自己所收集的資料；

JavaScript Style Guide

  • Google JavaScript 代碼風格指南 ：Google風格指南不但指出每條規范，還解釋了為什么這樣寫的原因，同時給出了對與錯的實例；
  • Airbnb JavaScript 規范 ：A mostly reasonable approach to JavaScript，跟Google規范類似；
  • Google JSON 風格指南：該風格指南是對在Google創建JSON APIs而提供的指導性準則和建議。總體來講，JSON APIs應遵循JSON.org上的規范。這份風格指南澄清和標準化了特定情況，從而使Google的JSON APIs有一種標準的外觀和感覺。這些指南適用于基于RPC和基于REST風格的API的JSON請求和響應；
  • Javascript編程指南 ( 源碼 )

JavaScript Language

Front-End Develop Fly

如果你想飛起來，這正是好去處。

了解常用庫與框架的使用文檔

JavaScript 日志

前端代碼異常日志與監控

開放網絡標準

理解OAuth 2.0

HTTP 文檔

下面兩篇文章不會對 HTTP 的細節進行深究，而是從夠高和更結構化的角度將 HTTP 協議的元素進行分類講解，可以先閱讀 HTTP 協議漫談 和 圖解Http協議 來對HTTP有一個大概的了解。

深入全面了解，可閱讀 HTTP權威指南 。

緩存策略

cache是提高應用性能重要的一個環節，必需要有所了解。

Web緩存機制系列

前端自動化工具

現在的前端自動化工具主要如下三個流派，目測涵蓋90%以上經常使用。

React&React Native生態-探索學習

移動前端技術

動畫

性能調優

Front-End Develop 項目與工具

工欲善其事，必先利其器。開源項目與工具的使用，將極大的提高前端開發之效率。

相關工具

1. 開發工具

  • Sublime Text ：前端開發好用到爆；
  • Atom ：Github出品的一個類似Sublime Text編輯器，長的蠻像的，快捷鍵也非常類似；
  • Vundle.vim：使用vim開發前端的利劍，包括其他語言；

Sublime Text常用的插件：

  • Emmet：zen coding的升級版，對于前端來說，可是必備插件;
  • sublimelint：用于代碼的校驗，支持 HTML、CSS、JS、PHP、Java、C++ 等16種語言;
  • JsFormat ：用于JavaScript格式化;
  • jQuery ：jQuery語法提示;
  • Underscore ：Underscore語法提示;
  • DocBlockr ：快速編寫注釋;
  • SublimeCodeIntel ：智能語法分析提示;
  • ColorPicker ：快速選取顏色
  • HTML-CSS-JS Prettify ：html/css/js 格式化
  • Alignment ：用于代碼對齊;
  • WakaTime ：用于記錄編程時間；
  • Seti_UI ：好看的主題，包括文件icon；
  • OmniMarkupPreviewer ：將MD文件渲染成網頁，可以在瀏覽器中查看；
  • Babel ：ES6語法高亮；

Atom常用的插件：

vim常用的插件：

Bundle 'christoomey/vim-run-interactive'
Bundle 'Valloric/YouCompleteMe'
Bundle 'croaky/vim-colors-github'
Bundle 'danro/rename.vim'
Bundle 'majutsushi/tagbar'
Bundle 'kien/ctrlp.vim'
Bundle 'pbrisbin/vim-mkdir'
Bundle 'scrooloose/syntastic'
Bundle 'slim-template/vim-slim'
Bundle 'thoughtbot/vim-rspec'
Bundle 'tpope/vim-bundler'
Bundle 'tpope/vim-endwise'
Bundle 'tpope/vim-fugitive'
Bundle 'tpope/vim-rails'
Bundle 'tpope/vim-surround'
Bundle 'vim-scripts/ctags.vim'
Bundle 'vim-scripts/tComment'
Bundle "mattn/emmet-vim"
Bundle "scrooloose/nerdtree"
Bundle "Lokaltog/vim-powerline"
Bundle "godlygeek/tabular"
Bundle "msanders/snipmate.vim"
Bundle "jelera/vim-javascript-syntax"
Bundle "altercation/vim-colors-solarized"
Bundle "othree/html5.vim"
Bundle "xsbeats/vim-blade"
Bundle "Raimondi/delimitMate"
Bundle "groenewege/vim-less"
Bundle "evanmiller/nginx-vim-syntax"
Bundle "Lokaltog/vim-easymotion"
Bundle "tomasr/molokai"
Bundle "klen/python-mode"
Bundle "leafgarland/typescript-vim"
Bundle "scrooloose/nerdcommenter"
sesese色