前端收集

前端收集

在前端路上摸索前行，在這裏分享本身長期關注的前端開發相關的優秀網站、博客、以及活躍開發者。歡迎更新，如下各排名不分前後順序。

本身 RSS 長期訂閱了一些IT 和技術相關博客，這裏是我Feedly 輸出的opml，可直接導入一些RSS 閱讀器: https://github.com/foru17/luolei-dotfiles/blob/master/feedly.opml

 

前端收集圖譜

• git clone https://github.com/hjzheng/front-end-collect
• cd front-end-collect
• bower install
• 放入你喜歡的web容器,訪問index.html便可
• 你也直接能夠訪問: http://get-set.cn/front-end-collect/
• 支持Chrome, Firefox and IE10&11以上瀏覽器

聚合&&週報訂閱

名稱	訂閱地址	介紹
Html5 Weekly	http://html5weekly.com/	Html 技術類
CSS Weekly	http://css-weekly.com/
Javascript Weekly	http://javascriptweekly.com/	JS相關，一樣有 html,css 和工具相關
Web Design Weekly	http://web-design-weekly.com/	設計、技術、技巧、工具聚合
UX Weekly	http://uxwkly.com/	用戶體驗、網頁設計推送
Web Tools Weekly	http://webtoolsweekly.com/	Js，工具推送
RESPONSIVE DESIGN NEWSLETTER	http://responsivedesignweekly.com/	每週推送一次響應式設計相關
Tutorialzine	http://tutorialzine.com/	精品教程和資源推送
Sidebar	http://sidebar.io/	天天、每半周、每週推送5條設計相關
The Hacker News Newsletter	http://www.hackernewsletter.com/	HN 每週精選
Design News	https://news.layervault.com/	F2類資訊聚合
HACKDESIGN	http://hackdesign.org/	每週發佈一個設計類課程
前端資源分享 半月刊	http://www.hacke2.cn/monthly/	每半月發佈最新高質量的前端資源
中文推送
SegmentFault精選	http://segmentfault.com/	國內開發者技術問答社區每週精選問答
FE Weekly	http://www.feweekly.com/	每週一次，內容主要是英文的，不過有中文導讀
EchoJs_News	http://www.echojs.com/	天天推送若干好文，都是英文的，JS技術類

專業博客

注:此處活躍度爲博客更新頻率，原創度指的是做者原創或者翻譯的文章所佔博文比例。請尊重原創，大量轉載其餘網站資訊的網站和聚合類網站不作推薦。

中文博客

名稱	活躍度	原創度	維護者	其餘
W3Cplus	★★★★★	★★★★★	攜程 @大漠	國內最優秀的前端博客，原創居多
W3Cfuns	★★★★★	★★★★☆	#	專一於web前端開發行業的綜合性門戶網站
前端觀察	★★★★☆	★★★★☆	騰訊 ISUX @神飛	曾經最優秀，最近更新不頻繁了
騰訊web前端 AlloyTeam 團隊	★★★★	★★★★	@騰訊AlloyTeam	來自於騰訊SNG(社交網絡事業羣)
張鑫旭-鑫空間-鑫生活	★★★★☆	★★★★★	張鑫旭	重構很厲害，很多經典文章經驗
ria之家	★★★★☆	★★★★☆	淘寶 @明河	#
大前端	★★★★☆	★★★★☆	#	#
CSS森林	★★★★☆	★★★★☆	關於	#
設計達人	★★★★☆	★★★☆☆	#	更新較頻繁，但轉載也較多
阮一峯博客	★★★★☆	★★★☆☆	#	牛人一個
Be For Web - 爲網而生 - 原創譯文博客	★★★★☆	★★★★☆	@C7210	關注移動應用及互聯網產品、用戶體驗設計、前端開發

國外博客

名稱	活躍度	原創度	維護者	其餘
Smashing Magazine	★★★★★	★★★★★	#	業界權威，web 設計很贊
Tuts	★★★★★	★★★★★	-	國外知名開發者網站
DeveloperDrive	★★★★★	★★★★★	-	優質前端技術信息
CSS-TRICKS	★★★★★	★★★★★	Chris Coyier	左邊這位是大神
Web Designer Wall	★★★★★	★★★★★	Nick La.	優質 Html5,CSS3等教程
Tutorialzine	★★★★★	★★★★★	#	大量 web 教程和資源
Inspect Element	★★★★★	★★★★★	#	CSS,wordpress 相關教程挺多
Codrops	★★★★★	★★★★★	#	設計、交互、CSS
Jake Rutter	★★★★★	★★★★★	Jake Rutter	Jquery 做者，不解釋了
Paul Irish	★★★★★	★★★★★	Paul Irish	大神,Google Chrome團隊,Yeoman
Krasimir Tsonev	★★★★★	★★★★★	Krasimir Tsonev	html5,ccs3,javascript
NCZOnline	★★★★★	★★★★★	Nicholas C. Zakas	html5,ccs3,javascript
HTML5 Rocks	★★★★★	★★★★★	#	html5權威網站
A List Apart	★★★★★	★★★★★	#	能夠改變世界的文章
hakim	★★★★★	★★★★★	HAKIM EL HATTAB	ccs3,javascript
DailyJS	★★★★★	★★★★★	#	javascript

活躍微博

ID	公司	簡介
@w3c中國	#	萬維網聯盟中國辦事處官方微博
@TheFrontEnd	#	JavaScript技術資訊、新聞、教程、深度文章。
@前端快爆	阿里巴巴	有HTML五、CSS三、JS
@HTML5中國	#	中國www.html5cn.org官方微博
@developerWorks	#	#

開發者博客

微博微信流行後，明顯感受到寫博客的人仍是愈來愈少了，下面推薦的這些開發者屬於在網上比較活躍的，或者博客積累了大量優質資源的。

國內開發者

國內開發者一塊歡迎你們 Fork提交推薦，最好能推薦一些在前端界較活躍的的開發者。

ID	博客	微博	Github	Twitter	公司	關鍵字
阮一峯	阮一峯博客	@ruanyf	#	@ruanyf	上海金融學院國際金融學院	教師，博客寫做人，翻譯人，《黑客與畫家》的譯者
老趙	http://blog.zhaojie.me/	@老趙	#	#	摩根大通（香港）	資深碼農
玉伯	歲月如歌	@玉伯也叫射鵰	@lifesinger	@lifesinger	支付寶	大牛
kejun	http://hikejun.com/	@kejunz	#	@kejunz	豆瓣	前端大神
寒冬winter	winter-cn	@寒冬winter	#	#	#	#
左耳朵耗子	酷殼	@左耳朵耗子	#	@haoel	淘寶	#
fool2fish	#	@fool2fish	#	#	支付寶	#
樸靈	Html5fiy	@樸靈	JacksonTian	#	阿里巴巴	《深刻淺出Node.js》做者,大牛
Cat Chen	陳廣琛	@CatChen	@CatChen	@CatChen	Facebook	大牛
BYVod	Beyond the Void	@BYVoid	@byvoid	@BYVoid	Facebook 英國	《Node.js 開發指南》做者,大牛
郭宇	Einmal ist keinmal	@郭宇	@turingou	@turingou	糗事百科,原支付寶	Node.js
勾三股四	#	@勾三股四	#	#	淘寶	#
cnberg	冰山一角	@berg	@cnberg	@cnberg	百度	騎行
大貓	意淫筆記	@daemao	@Damao	@13igcat	騰訊	知乎
hzlzh	自力博客	@hzlzh	@hzlzh	@hzlzh	騰訊	前端開發
C7210	beforweb.com/	@C7210	@C7210	@C7210	#	UX、交互設計師、視覺與前端
kejun	http://hikejun.com/	#	#	#	騰訊	前端開發
張鑫旭	張鑫旭博客	@張鑫旭	@zhangxinxu	@zhangxinxu	騰訊 上海 ISUX	前端開發
lucifr	http://lucifr.com/	@lucifr	@lucifr	@lucifr	#	Mac,ios
smallni	http://www.smallni.com/	#	@Smallni	#	騰訊	前端開發
TQ	http://targetkiller.net/	@Piser-TQ	@tqtan	@targetkiller	騰訊 ISUX	網頁重構
LOO2K	LOO2K	@LOO2K	LOO2K	LOO2K	墨籌網	少年才俊
qiqiboy	qiqiboy	@qiqiboy	#	#	金山網絡 UX	吐槽清理大師開發者
foru17	羅磊的獨立博客	@羅羅磊磊	@foru17	@foru17	金山網絡 UX	打醬油的
周愛民	aimingoo專欄	#	#	#	支付寶	JavaScript語言精髓與編程實踐做者
hax	hax的技術部落格	#	#	#	#	前端大牛
三生石上	三生石上	#	#	#	#	js祕密花園譯者
司徒正美	Ruby's Louvre	#	#	#	#	前端開發
葉小釵	葉小釵	#	#	#	#	前端開發
聶微東	Darren	#	#	#	百度移動雲	前端開發
當耐特	iamzhanglei	#	#	#	#	HTML5實驗室做者
教主	_frank	#	#	#	#	又一牛
typeof	typeof	#	#	#	#	又一牛
Gray Zhang	Gray Zhang	#	#	#	#	百度一牛
李鬆峯	爲之漫筆	#	#	#	#	高程2等書的譯者
小魚	sofish	@sofish	#	#	#	百姓網一牛
vilic	vilic	#	#	#	#	年輕一牛
彬Go	彬Go	#	#	#	#	人人網一牛
PuterJam	PuterJam's Blog	#	#	#	#	騰訊一牛
css森林	cssforest	#	#	#	#	前端博客
99css	99css	@ytzong	#	#	#	騰訊一牛
秦歌	Kaven	#	@kavenyan	#	#	js語言精粹譯者
linxz	linxz	#	#	#	#	css那些事兒的做者
米隨隨	米隨隨	#	#	#	#	騰訊ISUX 一牛
飄飄	飄飄	#	#	#	#	騰訊一牛
Along	Along's Blog	@newwave	#	#	#	Opera 歐朋一牛
安記	cssha	@hanan321	hanan198501	#	#	去哪網一牛
餘弦	EVILCOS	餘弦	evilcos	#	知道創宇	安全（黑客）、架構、團隊的各類觀點與分享
湯姆大叔	湯姆大叔的博客	#	#	#	#	《深刻理解Bootstrap》、《JavaScript啓示錄》、《JavaScript設計模式》等多本前端書籍翻譯做者

一些社區

名稱	地址	介紹
V2EX	http://v2ex.com/	小衆活躍社區
知乎	http://www.zhihu.com/	綜合問答社區
前端亂燉	http://www.html-js.com/	專業的前端知識平臺
segmentfault	http://segmentfault.com/	綜合問答社區
果殼問答	http://www.guokr.com/ask/pending/	綜合問答社區
Ruby	http://ruby-china.org/	同 V2EX 氛圍相似，不侷限於Ruby
Node.js 中文社區	http://cnodejs.org/	Node.js 國內最活躍的社區
Code Wall	https://coderwall.com/	國外技術社區
前端亂燉	http://www.html-js.com/	國內前端技術社區
DIV.IO	http://div.io/	國內前端技術社區

企業官方博客

在開頭個人 Feedly 訂閱 opml 文件裏比較全面。

名稱	公司	部門	活躍度	簡介	微博
ISUX 社交用戶體驗設計	騰訊	ISUX	★★★★☆	負責騰訊的社交網絡相關產品的用戶體驗設計與研究。	#
騰訊 CDC	騰訊	CDC	★★★★☆	簡介	#
騰訊Web前端 Alloy 團隊 Blog	騰訊	SNG	★★★★☆	主要負責手機QQ、QQ互聯、騰訊Q+、WebQQ項目的團隊。	alloyteam
TID-財付通設計中心	騰訊	TID	★★★★☆	簡介	#
騰訊MXD移動互聯網設計中心	騰訊	MXD	★★★★☆	簡介	@騰訊MXD
人人網FED Team	人人網	FED	★★★★☆	簡介	#
微博UDC	新浪	UDC	★★★★☆	簡介	@微博UDC設計中心
新浪UED	新浪	UED	★★★★☆	簡介	#
網易用戶體驗設計中心	網易	UED	★★★★☆	簡介	#
阿里巴巴（中國站）用戶體驗設計部博客	阿里巴巴	UED	★★★★☆	簡介	@Alibaba-UED
攜程UED-攜程旅行前端開發團隊	攜程網	UED	★★★☆☆	攜程UED,攜程前端開發團隊,UED,Javascript,重構,ux	#
百度FEX	百度	FEX	★★★★☆	百度前端團隊Blog,關注前端技術，還更重視全端及全棧的能力。	#
淘寶UED	淘寶網	UED	★★★★☆	用戶體驗、交互設計、視覺設計、前端技術博客	@淘寶UED

書籍

名稱	做者	價格	出版社	簡評
Web標準設計	劉傑（嗷嗷）	RMB 60.00	清華大學出版社	基礎入門
大巧不工 : Web前端設計修煉之道	賴定清 / 林堅	RMB 59.00	機械工業出版社	適合入門，瞭解前端全局
高性能網站建設指南:前端工程師技能精髓	Steve Souders	RMB 35.00	電子工業出版社	能從原理層理解各類方法
高性能網站建設指南:Web開發者性能優化最佳實踐	Steve Souders	RMB 49.80	電子工業出版社	#
Web站點優化 : Web站點優化	金	RMB 55.00	#	#
Node.js開發指南	郭家寶	RMB 45.00	#	做者很牛
JavaScript高級程序設計	Nicholas C. Zakas	RMB 99.00	人民郵電出版社	適合沒事就翻翻
JavaScript權威指南	弗拉納根	RMB 109.00	機械工業出版社	犀牛書
JavaScript語言精粹	Douglas Crockford	RMB 35.00	電子工業出版社	絕對經典，相信看完後，對Javascript這門語言有了從新認識，原來這個語言是這麼的美麗！

捐贈目錄

• 【張鑫旭】的我的博客
• 【艾倫】- 博客園 - jQuery源碼分析系列
• 【大漠】 W3CPLUS是一個前端愛好者的家園
• 【司徒正美】 - 博客園
• 【Hemin】jQuery API 中文手冊
• 【鳥哥】Laruence
• 【Highcharts】Highcharts中文贊助
• 【芒果雲】 在線資源管理器

大漠分享

性能優化優秀教程

• 5173首頁前端性能優化實踐
• 給網頁設計師和前端開發者看的前端性能優化
• 複雜應用的 CSS 性能分析和優化建議
• 張鑫旭——前端性能
• 前端性能監控總結
• 網站性能優化之CSS無圖片技術
• web前端性能優化進階路
• 前端技術：網站性能優化之CSS無圖片技術
• 瀏覽器的加載與頁面性能優化
• 頁面加載中的圖片性能優化
• Hey——前端性能
• html優化
• 99css——性能
• Yslow——性能優化
• YSLOW中文介紹
• 轉一篇Yahoo關於網站性能優化的文章，兼談本站要作的優化
• Yahoo!團隊實踐分享：網站性能
• 網站性能優化指南：什麼使咱們的網站變慢？
• 網站性能優化實踐，減小加載時間，提升用戶體驗
• 淺談網站性能優化 前端篇
• 前端重構實踐之如何對網站性能優化？
• 前端性能優化：使用媒體查詢加載指定大小的背景圖片
• 網站性能系列博文
• 加載，不僅是少一點點
• 前端性能的測試與優化
• 分享網頁加載速度優化的一些技巧？
• 頁面加載中的圖片性能優化
• web前端優化(基於Yslow)
• 網站性能優化工具大全
• 【高性能前端1】高性能HTML
• 【高性能前端2】高性能CSS
• 由12306談談網站前端性能和後端性能優化
• AlloyTeam——前端優化
• 毫秒必爭，前端網頁性能最佳實踐
• 網站性能工具Yslow的使用方法
• 前端工程與性能優化（上）：靜態資源版本更新與緩存
• 前端工程與性能優化（下）：靜態資源管理與模板框架
• HTTPS鏈接的前幾毫秒發生了什麼
• Yslow
• Essential Web Performance Metrics — A Primer, Part 1
• Essential Web Performance Metrics — Part 2
• YUISlide,針對移動設備的動畫性能優化
• Improving Site Performance
• 讓網站提速的最佳前端實踐
• Why Website Speed is Important
• Need for Speed – How to Improve your Website Performance

 

線上的一些翻譯版好書

書名	地址	做者	譯者	介紹
JavaScript祕密花園	http://bonsaiden.github.io/JavaScript-Garden/zh/	伊沃·韋特澤爾&張易江	三生石上	完整書籍，界面美觀，有詳細demo
Material Design 中文版	http://design.1sters.com/	Google設計手冊	協同翻譯	Google I/O 2014 發佈的 Material Design 官方手冊的中文翻譯
JavaScript DOM編程藝術	Jeremy Keith /Jeffrey Sambells	RMB 49.00	人民郵電出版社	適合Javascript入門看
深刻淺出node.js	樸靈	RMB 69.00	人民郵電出版社	一本從前端通往全端的好書
CSS開發王	張亞飛	RMB 49.00	電子工業出版社	適合有必定基礎後CSS進階用

關於

 

本 repo 會 不斷更新，感謝推薦和分享新資源的朋友。