2. 程式人生 > >送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄)

送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄)

阿新 • • 發佈：2018-12-12

送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄)

來源：https://zhuanlan.zhihu.com/p/22229868

 

作者：路人甲
連結：https://zhuanlan.zhihu.com/p/22229868
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

昨天寫的文章，一大早發出去點開預覽的時候發現格式都錯亂了。又急著去上班就把文章給刪除了。本來是週一更的習慣也就打破，放到週二去更新了。今天週二，度過了煩人的週一，又開始一個新的工作日。

這篇文章起初是想做：有哪些適合新手練手的前端專案？但是我發現我一個人沒法整理，於是正在邀請幾位大大朋友在幫忙。所以這個主題暫時空缺一週或是兩週，在下週或是下下週的時候可能會補上來。也歡迎各位朋友在學習過程中碰到不錯的練習專案可以積極的推薦。

學習程式設計專欄連載的練手專案篇，如有興趣可以訪問前三篇：

有哪些適合新手練手的Java專案？ - 學習程式設計 - 知乎專欄

有哪些適合新手練手的Java Web專案？ - 學習程式設計 - 知乎專欄

有哪些適合新手練手的Python專案？ - 學習程式設計 - 知乎專欄

本篇文章推薦分享五篇關於前端資源彙總的帖子，希望可以幫助到學習前端的你。同時你可以去看一看前端技能樹喔：前端技能

第一篇：前端收藏夾 ，以及他們的github地址：GitHub - w3ctrain/w3ctrain.github.io: w3ctrian前端收藏夾

以下是目錄，更多資訊請訪問他們的主頁：

前端工具

自動化： Gulp 、 Grunt 、百度Fis 、Ant、Yeoman、Codekit、Koala、Webpack

預編譯： Slim、Haml、Coffeescript、Sass、BabelJs、Jade、Less、Stylus、Pleeease、PostCSS、

查詢工具：CssTriggers、screensiz.es、友盟指數、javascripting、builtwith、thetoolbox、stylesheets

版本控制：Github

、GitCafe、GitLab、Bitbucket、Sourcetree、Cornerstone、版本控制之道、ProGit、廖雪峰的git教程、svn教程

編輯器：Sublime Text、Atom、HBuilder、WebStorm、MacDown、UltraEdit、ace、Brackets、LightTable、Visual Studio Code

線上編輯：Jsfiddle、Codepen、Jsbin、Runjs、sassmeister

除錯/測試：Firebug、YSlow、IEDeveloperToolbar、Fiddler、ChromeDevTools、JSLint、JSHint、CSSLint、HTML Validators、UnitJS、Jasmine、BrowserStack、Testem、Dalekjs、NightWatch、Hardy

部署流程：YUI Compressor、UglifyJs、CleanCss、JSDoc

高效工具：Dash、奇妙清單、Omnigraffle

其它：CodeIf、H5Viewer、anvil、cssmixins、JSON Server、ngrok、Glyphter、CSSStats、spritegen、placehold.it、MWeb、browsersync.io、kjson.com、strut.io、Reveal.js、iconverticons.com、智圖、longshadows、cubic-bezier、browserhacks、tool.oschina.net、Pagespeed、icomoon.io、circulus、Mock.js

部落格/社群/資訊

國內綜合：w3ctech、w3cplus、w3cfuns、前端亂燉、前端觀察、segmentfault、html5tricks、騰訊ISUX、百度EFE、奇舞團、淘寶UED、前端裡、div.io、慕課網、Codecademy、極客標籤、InfoQ中國、WEB前端開發、前端開發部落格、愛奇舞——H5.vc、看雲、匯智網、伯樂線上

國外綜合：tutsplus、CSSAnimation、TeamTreehouse、SmashingMagazine、CodyHouse、Echojs、Codeschool、codewars、Html5Rocks、SpeakerDeck、Alistapart、Lynda、DigitalTutors、Ponyfoo.com、tutorialzine

前端資訊：CSS-Tricks、WebDesignerNews、FrontEndFont、Sidebar.io、DesignerNews

問答社群：StackOverflow、Quora、知乎

每日鮮：稀土掘金、開發者頭條、極客頭條、開發頭條

前端大牛：Hugo Giraudel、Philip Walton、David Walsh、Sara Soueidan、Paul Irish、玉伯、廖雪峰、阮一峰、勾三股四、張鑫旭、餘果、Sofish、糖餅、Evan You、Darren_聶微東、司徒正美、CSS魔法

各類外掛

滑動/視差：fullPage、swiper、Slick、sliderjs、hammer.js、unslider、Superscrollorama、ScrollMagic、WOW、skrollr、stellar.js、multiscroll.js、iscroll、dragula、waypoints

動畫/效果：popmotion、velocity、GreenSock-JS、Snapsvg、sketch.js、impress、blast.js、sticky、Colorify.js、nprogress、Mojs、skrollr、typed.js、Effeckt.css、Hover.css、Animatable、Animate.css、CSS3 Animation Cheat Sheet、pagePiling.js、headroom.js、hint.css、SpinKit、CircularProgressButton、css-loaders、pace、two.js、Sequence、ElasticProgress、CSSgram

相容：Modernizr、bowser、retinajs、picturefill、Normalize.css、Respond、html5shiv、box-sizing-polyfill、elementQuery、css-element-queries

Chrome：clear-cache、EditThisCookie、Full Page Screen Capture、HTML5 Outliner、JSONView、Postman、User-Agent Switcher for Chrome、Window Resizer、頁面自動重新整理、Chrome Sniffer Plus

模板工具：Handlebars、Mustache、artTemplate、nunjucks、transparency、doT

其他：zxcvbn、Validation、moment、primer、Please.js、qrcode、dynamics.js、smartcrop.js、lazyload、imagesloaded、unveil、fastclick、jQuery Form Plugin、jQuery-File-Upload、sweetalert、toolbar、tooltipster、video.js、Font-Awesome、minigrid、bricks.js

主流框架

綜合：React、Bootstrap、Foundation、SemanticUI、Purecss、UIKit、妹子 UI、Alice、materialize、material-design-lite、Html5Boilerplate、Material design、Lightning Design System、Vux

MVVM：AngularJS、Vue.js、Backbone、Avalon、knockout

模組化：Require.js、Sea.js

JavaScript：JQuery、Zepto、prototypejs、emberjs、MooTools、Dojo、meteor、Domcom

Hybrid：React-Native、Nativescript、Phonegap、Ionic、Crosswalk、Meteor、Electron

遊戲：Construct 2、ImpactJS、CreateJS、Three.js、PlayCanvas、Pixi、Hilo

手冊/書籍

書籍：《JavaScript高階程式設計（第3版）》、《單頁Web應用:JavaScript從前端到後端》、《JavaScript語言精粹》、《JavaScript DOM程式設計藝術 （第2版）》、《編寫可維護的JavaScript》、《Web全棧工程師的自我修養》、《深入淺出Node.js》、《響應式Web設計》、《精通CSS》、《高效能JavaScript》、《You-Dont-Know-JS》

快速入門：學習CSS佈局、Learn to Code HTML & CSS、Learn to Code AdvancedHTML & CSS、前端技能樹

精選文章：如何跟上前端開發的最新前沿、移動H5前端效能優化指南、那些過目不忘的H5頁面、玩轉HTML5移動頁面、MobileWeb 適配總結、搞定這些疑難雜症，向css3動畫說yes

手冊/規範：前端開發者手冊、前端開發筆記本、Material Design 中文版、CSS規範、JavaScript Style Guide、Sass規範、ECMAScript3/5、ECMAScript6、W3C、CommonJS Modules

翻譯文章：學習flexbox屬性、使用Velocity.js改善使用者體驗

設計/互動

靈感來源：Dribbble、SiteInspire、Httpster、設計達人、PhotoshopLady、站酷、UI中國、uiparade、365psd、Behance、Naldz Graphics、mobile-patterns、wa.design、pinterest、花瓣、堆糖、覓處、視覺中國

學點設計：TutsplusDesign、優設網、PSDFAN、Envato、abduzeedo、Interactive Guide to Blog Typography、24Ways

互動體驗：Navnav、Codyhouse、騰訊ISUX、淘寶UED、阿里巴巴中文站、阿里巴巴國際站、阿里媽媽UED、百度移動使用者體驗部、百度搜索使用者體驗中心、騰訊TGideas、騰訊MXD、騰訊UED、騰訊CDC、新浪UDC、迅雷CUED、uxbooth、tympanus

配色工具：Adobe color、FLATUI、Thedayscolor、colrd、Nipponcolors、Nolourlovers、中國傳統色、日本傳統色、Fashiontrendsetter

第二篇：github上值得關注的前端專案 以及他們的github地址，歡迎關注：GitHub - hawx1993/github-FE-project: A collection about github front-end project

一小部分目錄

綜合/資源

frontend-dev-bookmarks 一個巨大的前端開發資源清單。star:15000

front-end-collect 分享自己長期關注的前端開發相關的優秀網站、部落格、以及活躍開發者。star:860

Front-end-Interview-questions 史上最全前端開發面試問題及答案

f2e-hub 包含Animation，UI，dialog，Carousels，color，image，workflow等。star:100

awesome-javascript 一系列很棒的javascript 庫，資源。star:3100

fks 前端技能彙總，包含前端知識架構，後端知識，linux，書籍推薦等。star:4000

node123 node.js中文資料導航。star:1200

mobile-web-favorites 移動端web開發收藏夾。star:200

gulp-book Gulp 入門指南

Front-end-tutorial 最全的資源教程-前端涉及的所有知識體系。（12.25更新）

canvas/資料視覺化

echarts 基於Canvas，純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。star:6900

Chart.js 使用<canvas>標籤的簡易HTML5圖表。star:14600

sketch.js 跨平臺JavaScript創意編碼框架，gzip壓縮後僅有2kb。star:1500

d3 一個基於資料操作文件的js資料視覺化框架，最流行的視覺化庫之一。star:38000

zrender 一個輕量級的Canvas類庫，MVC封裝，資料驅動，提供類DOM事件模型，讓canvas繪圖大不同！star:850

c3 一個基於 D3.js 的可重用 JavaScript 圖表庫。幾乎零學習曲線。star:4.5K（6.28更新）

img2css 將圖片轉為純css程式碼。（11.3更新）

第三篇：網站：『引』最全前端資源彙集（更新網址），github地址：GitHub - JacksonTian/fks: 前端技能彙總 Frontend Knowledge Structure （github地址），號稱最全的資源教程－前端涉及的所有知識體系。

部分目錄（此處所有目錄連結到主頁），詳細資訊請訪問具體網址和github

1 · 綜合類
2 · 入門類
3 · 工具類
4 · 綜合效果搜尋平臺
5 · 團隊Blog|週報類
6 · 開發中心
7 · Nodejs
8 · 綜合API
9 · Ecmascript
10 · Js template
11 · HTML5(HTML)
12 · CSS3(CSS)
13 · Angularjs
14 · React
15 · vue
16 · 移動端API
17 · jQuery
18 · D3
19 · Requriejs
20 · Seajs
21 · Less,sass
22 · Markdown
23 · 相容性
24 · UI相關
25 · 其它API
26 · 圖表類
27 · 正則
28 · 前端規範
29 · PHP
30 · 各大公司開源專案
31 · 常用
32 · 演算法
33 · 移動端
34 · JSON
35 · 焦點圖
36 · Ext, EasyUI, J-UI 及其它各種UI方案
37 · 頁面 社會化 分享功能
38 · 富文字編輯器
39 · 前端概述
40 · Gulp
41 · Grunt
42 · Fis
43 · pc圖輪
44 · 移動端圖輪
45 · 檔案上傳
46 · 模擬select
47 · 取色外掛
48 · 城市聯動
49 · 剪貼簿
50 · 簡繁轉換
51 · 表格 Grid
52 · 線上演示
53 · 常規優化
54 · 優化工具

相關推薦

送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄)

送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄) 來源：https://zhuanlan.zhihu.com/p/22229868   作者：路人甲 連結：https://zhuanlan.zhihu.com/p/22229868

測開必備，推薦幾款前端效能測試工具、神器

我們在使用網站過程中，經常會遇到慢的問題，為了找到原因，一般需要藉助工具進行檢測，通過工具，可以檢測出前端站點載入資源的相關詳細情況。 今天，就給大家介紹幾款前端效能測試分析工具，結合效能測試工具，實現通過量化的方式測試網站中諸如首位元組載入時間（time to first byte）或者渲染時間等表現。其

幾篇前端文章

覆蓋 note agg 架構 not book pro css布局 .html 轉轉前端http://zzfe.org 如何在Promise鏈中共享變量？https://blog.fundebug.com/2017/09/04/promise-share-variable

推薦幾款前端開發框架

大二的時候，本人是電腦科學與技術專業的；但是我對學校安排的課程毫無興趣；例如：學校裡面安排的課程有資料庫原理與應用，C語言程式設計、c++、Java WEB  ERP、作業系統、組合語言與介面技術、資料結構等等。大二的時候，受我們助班的影響，我開接觸PHP，發現我已經愛上它

[HG]想做前端開發？推薦幾個必備珍品元件庫

前端是一個一直在發展的名詞，從最初刀耕火種時代的頁面仔到文藝復興時期的前端工程化再到如今新時代的大前端，前端技術在某種程度上似乎可以為所欲為了。但是我們這次討論的是前端技術中的一部分—元件庫。 什麼是元件？為什麼要用元件庫？ 元件是組成頁面中最基本的元素，按鈕，輸入框，下拉選擇都是元件，元件和元件組合就變

前端開發的你，必須知道這些前端的坑

前端是一個相對比較新的行業。但在這幾年期間，隨著W3C標準的不斷更新以及node.js的興起，基於node.js一系列的工具和諸多

推薦幾篇圖片隱寫技術的文章

這幾天瞭解與學習圖片隱寫相關的技術點，在查詢與閱讀相關的文章後，選了三篇不錯的文章推薦給大家。 說明：三篇文章是一個系列，專門講圖片隱寫。內容全面，有原理介紹，還有實踐操作指引，可所謂用心之作，很棒！ 如下是文章內容截圖 文章列表 Misc 總結 ----隱寫術之圖片隱寫(

IT老鐵們，推薦幾款實用的網站程式碼及工具(下)

8.SAE SAE的強大不用多說了，強大的虛擬主機提供商。提供各種各樣的程式語言線上執行，同時提供雲端儲存Storage，各種資料庫，應用十分廣泛。不僅提供程式碼託管，還提供線上伺服器執行，JAVA，PHP，Python等等的支援應有盡有，在這裡你可以假設你自己的網站，你的應用介面，你的創意

IT老鐵們，推薦幾款實用的網站程式碼及工具(上)

1.Git 還在擔心自己辛辛苦苦寫的程式碼被誤刪了嗎？還在擔心自己改錯了程式碼不能挽回嗎？還在苦惱於多人開發合作找不到一個好的工具嗎？那麼用Git就對了，Git是一個開源的分散式版本控制系統，用以有效、高速的處理從很小到非常大的專案版本管理。有了它，程式碼託管不是問題，版本控制不再苦惱，多人

從零開始學習深度學習，推薦幾本書單，建議按照先後順序排名進行學習

深度學習能夠訓練機器執行一些令人難以置信的任務，例如面部識別，癌症檢測，甚至是股市預測。這就是為什麼我們要學深度學習。 以下這些書可以讓你從零開始學習深度學習。本文綜述中的每一本書都有各自的優點，而且每一本書都非常出色。我已經把它們按我認為是最好的以及我建議學習先後的順序排

九神大師告訴你，心態比任何方法都重要。

心態比方法更為重要，下面就是總結出的一些關於心得     第一、不要貪婪以及過度幻想     中有幾個玩法的中獎率較高, 百家了, 新手一般會嘗試下這三個, 而且常常運氣不錯，第一次買就中, 連續中了幾次之後，就會幻想如果倍投5倍,10倍,100倍,

關於JDK，JRE，JVM寫的最好的文章。

關於jdk和jre  大家肯定在安裝JDK的時候會有選擇是否安裝單獨的jre，一般都會一起安裝，我也建議大家這樣做。因為這樣更能幫助大家弄清楚它們的區別： Jre 是java runtime environment, 是java程式的執行環境。既然是執行，當然要包含jvm，也就是大家熟悉的虛擬機器啦，還有所

Web前端如日中天，成為優秀前端程式設計師的5個祕訣，你用了幾個？

近些年，越來越多的程式設計師轉移陣地，搞起前端開發。 有不少的Android開發的程式設計師直接轉到了前端開發。 而就拿JavaScript來說，就因前端流行使得它在各種程式語言排行榜上名列前茅。 那麼，如何做一名優秀、甚至卓越的WEB前端工程師? 雖然說小夥伴們的學習技巧各有差異，

20款有效提高工作效率的web前端開發工具推薦，總有一款適合你

Rendera 如果你希望有個環境可以測試、瀏覽和體驗各種不同的 CSS/HTML 和 JavaScript 程式碼，Rendera 為你提供了實時的執行結果。類似RunJS。 Patternizer 從名字可看出該工具可以建立真正的調色盤，包括各種線條和條文，可編輯線寬、顏色、角

如果你在2018面試前端，那這篇文章最好看一看！

前端目錄 Html相關 <div id="html">1 html語義化</div> 意義：根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。注意：1.儘

程式設計師學習前端必備的5大網站，你用過幾個？

最近收到不少的粉絲的提問，問能不能推薦一些實戰綜合性強點前端學習網站。下面w3cschool精選了5個前端學習網站，相信這些網站將對前端學習者大有幫助。在這裡相信有許多想要學習前端的同學，關注小編文章最後面文字，可免費領取一整套系統的web前端學習教程！0、廖雪峰官方網站有不

推薦幾個精致的web UI框架及常用前端UI框架

web spm ued jquery 解決 模塊 str github 控件 以下是幾個精致的web UI框架 1.Aliceui Aliceui是支付寶的樣式解決方案，是一套精選的基於 spm 生態圈的樣式模塊集合，是 Arale 的子集，也是一套模塊化的樣式命名和組織規

後端不會寫頁面怎麽辦？推薦幾個好用的前端UI模板、組件對比

的人 動態效果 str 喜歡 開發 定制化 優點 git amazeui 前言 下面推薦並對比幾個好用的前端UI模板 推薦給以下的人使用： 1、不想重復造輪子的後端 2、不想學bootstrap的後端 3、後端開發想自己寫簡單頁面的 4、偷懶的前端 本文註重手

要想成為前端大神，那些你不得不知曉的web前端命名規範。

let 優勢 是我 wke gre com 下載 sans 寬度 一、Web語義化 1.1 H5的語義化 對於經驗資深的前端er，在給web布局時，相信都會很註重標簽和命名的規範。尤其是隨著html5的普及發展，更是把web前端語義化推向一個新的臺階上。比如html5給我們

作為Web前端開發者，不可不知的幾個前端框架

近年來，Web技術的發展速度快得讓人窒息，特別是最近幾年一代又一代的變革一次又一次的創造。各大巨頭又紛紛把技術轉向HTML5和CSS3，各種企業級框架如雨後春筍般湧現。   那麼今天就給大家介紹幾個在web界比較優秀的前端框架。   1.Bootstrap