個人前端資源彙集（吐血整理 / 持續更新）

子弈發表於2020-04-07
前端

這裡是個人的「部落格」、「筆記」、「書籍」、「Awesomes」、「書籤」以及 「面試」等資源彙集。如果目前的你

  • 愁於找不到某項技術相對完善的文件
  • 不知道讀哪些書
  • 想快速檢索某一項技術
  • 想快速獲取某一方面的
  • 想了解別人怎麼記筆記
  • 想了解別人的書籤裡都收藏了些啥
  • 想快速獲取面經資源
  • 迷茫於不知道如何繼續學習

那麼可以看看這個資源彙集，或許能給你帶來一些靈感（這是我開始工作以來的所有前端資源成果，如果大家喜歡可以點個贊哈）。感興趣的同學可以 Star 一下 Git 倉庫，或者自己 Fork 哦。

個人前端資源彙集（吐血整理 / 持續更新）

文件地址：ziyi2.github.io/awesome/

部落格

有些文章寫了，但可能還沒理解透徹。

CSS

Vue

設計模式

Git

Npm

面試

總結

隨筆

筆記

有些筆記記了，但可能仍然會忘記。

JavaScript

演算法

CSS

HTTP

正則

Awesomes

一個好的 Awesome 可以快速入門某項技術。

全部

語言

  • awesome-javascript - A collection of awesome browser-side JavaScript libraries, resources and shiny things.
  • awesome-css - A curated contents of amazing CSS :)
  • awesome-nodejs - Delightful Node.js packages and resources
  • Front-End-Develop-Guide - 這份指南匯集了前端開發所使用語言的主流學習資源，並以開發者的視角進行整理編排而成
  • knowledge - 文件著重構建一個完整的「前端技術架構圖譜」，方便 F2E(Front End Engineering 又稱 FEE、F2E) 學習與進階。
  • awesome-javascript-cn - JavaScript 資源大全中文版，內容包括：包管理器、載入器、測試框架、執行器、QA、MVC 框架和庫、模板引擎等

框架

UI

架構

書籍

工具

  • awesome-mac - Collect premium software in various categories
  • awesome-vscode - A curated list of delightful VS Code packages and resources.
  • Awesome-Design-Tools - The best design tools and plugins for everything
  • awesome-webpack - A curated list of awesome Webpack resources, libraries and tools
  • awesome-gulp - A curated list of awesome gulp resources, plugins, and boilerplates for a better development workflow automation
  • awesome-github - 收集這個列表，只是為了更好地使用 GitHub,歡迎提交 pr 和 issue
  • awesome-npm - Awesome npm resources and tips

圖示

文件

  • awesome-resume - 程式設計師簡歷例句，程式設計師簡歷範例，Java 簡歷模版，Python 簡歷模版，C++簡歷模版

  • awesome-interview-questions - A curated awesome list of lists of interview questions. Feel free to contribute!

  • awesome-webpack-cn - webpack 優秀中文文章

書籍

有些書買了，但可能永遠遺憾。

HTML

  • 《HTML5與CSS3權威指南》- 陸凌牛 - 機械工業出版社

JavaScript

  • 《JavaScript從入門到精通》- 明日科技 - 清華大學出版社
  • 《JavaScript寶典（第六版）》- (美)古德曼,(美)莫里森 - 人民郵電出版社
  • 《JavaScript高階程式設計》- Nicholas C. Zakas - 人民郵電出版社
  • 《JavaScript權威指南》- (美)弗蘭納根 - 機械工業出版社
  • 《高效能JavaScript》 - Nicholas C. Zakas - 電子工業出版社
  • 《JavaScript設計模式》- - (美)奧斯馬尼 - 電子工業出版社
  • 《ES6標準入門》 - 阮一峰 電子工業出版社
  • 《JavaScript設計模式》- 張容銘 -人民郵電出版社
  • 《jQuery技術內幕》- 高雲 - 機械工業出版社
  • 《鋒利的jQuery》 - 單東林，張曉菲，魏然 - 人民郵電出版社
  • 《JavaScript效能優化(度量監控與視覺化)》- (美)巴克 - 機械工業出版社
  • 《編寫可維護的JavaScript》- Nicholas C. Zakas - 人民郵電出版社
  • 《JavaScript語言精髓》- (美)克羅克福德 - 電子工業出版社
  • 《JavaScript函數語言程式設計》- [美]Michael Fogus - 人民郵電出版社
  • 《JavaScript忍者祕籍》- (美)萊西格,(美)貝比奧特 - 人民郵電出版社

瀏覽器

  • 《Chrome擴充套件及應用開發》- 李喆 - 人民郵電出版社

CSS

  • 《CSS權威指南》 - Eric A. Meyer 和 Estelle Weyl 著 - 中國電力出版社
  • 《深入理解Bootstrap》 - 徐濤 - 機械工業出版社
  • 《CSS世界》- 張鑫旭 - 人民郵電出版社
  • 《精通CSS：高階WEB標籤解決方案》- (英)巴德，(英)科利森，(英)莫爾 - 人民郵電出版社
  • 《CSS揭祕》- Lea Verou - 人民郵電出版社
  • 《CSS實戰手冊》- [美]David McFarland - 中國電力出版社
  • 《圖解CSS3》- 大漠 - 機械工業出版社

Node.js

  • 《Node即學即用》 - (英)TomHughes-Croucher MikeWilson - 人民郵電出版社
  • 《深入淺出Node.js》 - 樸靈 - 人民郵電出版社
  • 《Node.js權威指南》- 陸凌牛 - 機械工業出版社
  • 《Node.js除錯指南》- 趙坤 - 電子工業出版社

全棧

  • 《Node.js+MongoDB+Angular Web開發：MEAN全棧權威指南》 - （美）Brad Dayley - 電子工業出版社
  • 《Web全棧工程師的自我修養》- 餘果 - 人民郵電出版社

Vue

  • 《Vue.js前端開發 快速入門與專業應用》 - 陳陸揚 -人民郵電出版社
  • 《Vue.js權威指南》- 張耀春 - 電子工業出版社
  • 《Vue2實踐揭祕》- 樑睿坤 - 電子工業出版社

React

  • 《深入React技術棧》 - 陳屹 - 人民郵電出版社

Git

  • 《Git版本控制管理》- (美)羅力格，(美)麥卡洛 - 人民郵電出版社

資料結構

  • 《資料結構(第二版)》- 嚴蔚敏 - 清華大學出版社
  • 《資料結構與演算法JavaScript描述》- (美)Michael McMillan - 人民郵電出版社

網路

  • 《計算機網路基礎》- 羅婭 - 清華大學出版社
  • 《圖解HTTP》 - (日) 上野宣 - 人民郵電出版社
  • 《深入理解Nginx》- 陶輝 - 機械工業出版社
  • 《TCP/IP詳解 卷1-3》- 機械工業出版社
  • 《圖解TCP/IP》- (日) 竹下隆史 - 人民郵電出版社
  • 《圖解網路硬體》- (日) 竹下隆史 - 人民郵電出版社

Web

  • 《Web效能權威指南》- Ilya Grigorik - 人民郵電出版社

正則

  • 《精通正規表示式》- (美)傑佛瑞E.F.佛瑞德 - 電子工業出版社 -【進行中】

演算法

  • 《演算法導論》 - (美) 科爾曼 - 機械工業出版社 -【進行中】
  • 《計算機程式設計藝術 卷1：基本演算法》- (美) 高德納 - 人民郵電出版社
  • 《演算法圖解》 - (美) 巴爾加瓦 - 人民郵電出版社
  • 《演算法心得》- (美) Henry S. Warren, Jr. - 機械工業出版社

儲存

  • 《Redis設計與實現》- 黃健巨集 - 機械工業出版社

軟體工程

  • 《軟體工程》 - 賴均 - 清華大學出版社

作業系統

  • 《鳥哥的Linux私房菜基礎學習篇》- 鳥哥 - 人民郵電出版社
  • 《作業系統真象還原》- 鄭鋼 - 人民郵電出版社

其他

  • 《不止程式碼》 - 電子版 - 阿里巴巴
  • 《前端面試江湖》- 李紅米 - 電子工業出版社

人生

  • 《冰心詩集》
  • 《艾青詩選》
  • 《朱自清散文》
  • 《徐志摩詩集》
  • 《駱駝祥子》
  • 《三國演義》
  • 《倉央嘉措》
  • 《紅與黑》
  • 《傲慢與偏見》
  • 《巴黎聖母院》
  • 《希臘神話》
  • 《魯濱遜漂流記》
  • 《少年維特之煩惱》
  • 《三個火槍手》
  • 《簡·愛》
  • 《茶花女》
  • 《包法利夫人》
  • 《愛的教育》
  • 《契訶夫小說集》
  • 《鋼鐵是怎樣煉成的》
  • 《老人與海》
  • 《罪與罰》
  • 《挪威的森林》
  • 《浮士德》
  • 《局外人》
  • 《羊脂球》
  • 《莫泊桑短篇小說選》
  • 《苦兒流浪記》
  • 《十四行詩》
  • 《飄》
  • 《悲催世界》
  • 《堂·吉訶德》
  • 《懺悔錄》
  • 《九三年》
  • 《歐也妮·葛朗臺》
  • 《高老頭》
  • 《基督山伯爵》
  • 《呼嘯山莊》
  • 《湯姆叔叔的小屋》
  • 《草葉集》
  • 《戰爭與和平》
  • 《安娜·卡列寧娜》
  • 《復活》
  • 《普希金詩選》
  • 《了不起的蓋茨比》
  • 《飛鳥集》
  • 《小王子》
  • 《童年》

書籤

有些書籤收藏了，但可能永遠不會再開啟。

HTTP

文件

應用

  • superagent - Small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features

博文

CSS

文件

應用

  • Bootstrap - Bootstrap 是全球最受歡迎的前端元件庫，用於開發響應式佈局、移動裝置優先的 WEB 專案
  • Bootstrap Table
  • Bulma - Bulma is a free, open source CSS framework based on Flexbox
  • FLEXBOX FROGGY - 學 Flex 的小遊戲

後臺模板

  • WrapPixel - Free & Premium Bootstrap, Angular & React Admin Templates + UI Kits
  • Remark - Responsive Bootstrap 4 Admin Template
  • ampleadmin - Bootstrap Admin Template

博文

JavaScript

文件

  • ECMAScript 6 入門 - 開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性

工具

  • ESLint - 可組裝的JavaScript和JSX檢查工具
  • Prettier - An opinionated code formatter
  • CKEditor 4 - Smart WYSIWYG HTML editor

應用

  • lodash - A modern JavaScript utility library delivering modularity, performance & extras
  • jQuery
  • zTree - jQuery Tree Plugin

博文

設計模式
機制
語法
工具
效能優化
風格指南

TypeScirpt

文件

博文

Vue

文件

應用

  • Nuxt - Vue.js通用應用框架(服務端渲染)
  • Vue Apollo - 在你的 Vue.js 應用中整合 GraphQL
  • Vue I18n - Vue.js國際化外掛
  • Vue Test Utils - Vue.js 官方的單元測試實用工具庫
  • VuePress 1.x - Vue 驅動的靜態網站生成器

原始碼分析

UI元件庫

  • element-ui - 基於Vue2.0的餓了麼桌面端元件庫
  • muse-ui - 基於Vue 2.0優雅的Material Design UI元件庫
  • ant-design-vue - Ant Design 的 Vue 實現
  • buefy - Lightweight UI components for Vue.js based on Bulma
  • Vue Material - Build beautiful apps with Material Design and Vue.js

中臺前端

腳手架

外掛

工具

社群

會議

博文

React

文件

UI元件庫

  • Ant Design - 基於 Ant Design 設計體系的 React UI 元件庫，主要用於研發企業級中後臺產品
  • Salt UI - 高效、簡潔的移動端UI元件庫

博文

原始碼解析

Webpack

文件

工具

  • webpack-chain - 生成和修改Webpack配置資訊的鏈式API集

博文

Gulp

  • Gulp中文網 - 用自動化構建工具增強你的工作流程！

Babel

文件

  • Babel - JavaScript編譯器

外掛集

博文

Node.js

文件

應用

  • linkerd2 - Linkerd gives you observability, reliability, and security for your microservices
  • Express - 高度包容、快速而極簡的 Node.js Web 框架
  • Koa - 基於Node.js平臺的下一代web開發框架
  • Egg - better enterprise frameworks and apps with Node.js & Koa
  • Socket.io - websocket
  • Node Redis

工具

  • pm2 - The Most Advanced Production Process Manager for Node.js

博文

命令列工具
資料庫
框架
微服務
BFF
Typescript
爬蟲

Npm

文件

Yarn

文件

Lerna

文件

  • Lerna - A tool for managing JavaScript projects with multiple packages

博文

Git

文件

規範

工具

網站

  • HELLO GITHUB - 分享 GitHub 上有趣、入門級的開源專案

博文

GraphQL

文件

  • GraphQL - A query language for your API
  • Prisma OSS Documentation - Documentation content for oss.prisma.io (GraphQL Playground, GraphQL Yoga, GraphQL Config...)
  • Apollo Client - Apollo Client is the best way to use GraphQL to build client applications

應用

  • graphql-yoga - Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience
  • graphql-middleware - Split up your GraphQL resolvers in middleware functions

博文

Nginx

文件

博文

微前端

Serverless

中臺

監控

客戶端

docker

地圖

測試

文件

  • Vue Test Utils - Vue.js 官方的單元測試實用工具庫
  • Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity
  • Nightwatch.js - Browser automated testing, the easy way
  • Mocha - Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
  • Chai - 斷言庫
  • Karma - A simple tool that allows you to execute JavaScript code in multiple real browsers

博文

部署

博文

Fonts

應用

瀏覽器

Chrome外掛

相容性

  • Can I use - 查詢瀏覽器相容性
  • browserl.ist - A page to display compatible browsers from a browserslist string

博文

Visual Studio Code

外掛

  • ESLint - Integrates ESLint JavaScript into VS Code
  • Prettier - Prettier formatter for Visual Studio Code
  • Vuetur - Vue tooling for VS Code, powered by vue-language-server

移動端

博文

演算法

文件

示例

  • javascript-algorithms - Algorithms and data structures implemented in JavaScript with explanations and links to further readings
  • CLRS - Solutions to Introduction to Algorithms

工具

博文

部落格

應用

  • Hexo - Hexo 是一個快速、簡潔且高效的部落格框架
  • Next - Elegant Theme for Hexo
  • icarus - A simple, delicate, and modern theme for the static site generator Hexo
  • Yelee - 簡而不減 Hexo 雙欄部落格主題
  • LeanCloud - 部落格評論

Markdown

工具

文件

設計

工具

文章

職業

團隊

協議

工具

文件

博文

低程式碼

視覺化

穩定性

總結

面試

面經

站點

書籍

  • 《前端面試江湖》

相關文章