當(dāng)其沖的立下了幾條規(guī)矩:
1、禁止使用flash,動(dòng)畫效果用視頻、canvas實(shí)現(xiàn),不支持的瀏覽器降級(jí)使用圖片。保持頁(yè)面沒有報(bào)錯(cuò)、樣式錯(cuò)亂
2、頁(yè)面需要兼容IE8、9、10、11、QQ瀏覽器、chrome、Firefox,不需要支持IE6
3、測(cè)試分辨率1024*768、1440*900、1920*1080,頁(yè)面主內(nèi)容區(qū)域可根據(jù)對(duì)應(yīng)產(chǎn)品站點(diǎn)用戶分辨率,從原本的1000px調(diào)整為1200px
4、頁(yè)面foot,驗(yàn)證專題所屬游戲域名【如:xxx.qq.com/foot.js】是否存在,如果存在是用這個(gè)版本的foot.js,不存在則使用通用版。
小編解釋一下:上面第4條提到的foot.js以及通用版,小伙伴們不用理會(huì),這是騰訊為了方便,把頁(yè)面的foot寫成了foot.js,以后直接調(diào)用就行了。
如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<meta name="robots" content="all">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="Tencent-CP">
<meta name="Copyright" content="Tencent">
<meta name="Description" content="">
<meta name="Keywords" content="騰訊游戲">
<title>專題主題(標(biāo)題)- 產(chǎn)品中文全稱官方網(wǎng)站 - 騰訊游戲</title>
<link href="css/common.css" rel="stylesheet">
<!-- 頁(yè)面設(shè)計(jì):cp | 頁(yè)面制作:cp | 創(chuàng)建:2017-xx-xx -->
</head>
<script src="http://ossweb-img.qq.com/images/js/foot.js"></script>
<script src="http://ossweb-img.qq.com/images/js/title.js"></script>
<script src="http://ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
<script>
//此段代碼不能放到外鏈JS中,
var setSite = { //設(shè)置網(wǎng)站屬性
siteType: "os" || "a20160711xxx", //必填項(xiàng):"os"代表是官網(wǎng),如果不是,則填寫actName例如a20160701xxx
pageType: "index", //必填項(xiàng):本頁(yè)面的定位;按照頁(yè)面含義填寫例如main||list||detail||download||share||page1||pageN
pageName: "首頁(yè)", //必填項(xiàng):頁(yè)面中文名
osact: 0, //選填項(xiàng):是否是官網(wǎng)專題(在官網(wǎng)運(yùn)營(yíng)的專題)boolean;默認(rèn)是0;可以在鏈接上加入?yún)?shù)osact=1來(lái)靈活設(shè)置
ingame: 0, //選填項(xiàng):是否投放在游戲APP內(nèi)boolean;默認(rèn)是0;可以在鏈接上加入?yún)?shù)ingame=1來(lái)靈活設(shè)置
stayTime: 0 //選填項(xiàng):是否需要統(tǒng)計(jì)停留時(shí)長(zhǎng)boolean;默認(rèn)是0
}
if (typeof (pgvMain) == 'function') pgvMain();//千萬(wàn)不能忘記!
</script>
</body>
</html>
文檔類型統(tǒng)一使用html5的doctype、編碼統(tǒng)一使用gbk、添加版權(quán)和作者
<!DOCTYPE html>
<meta charset="gbk" />
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
Description和Keywords
注:Description值一般為頁(yè)面標(biāo)題或主題,針對(duì)該頁(yè)面主題的說明。Keywords為產(chǎn)品名、專題名、專題相關(guān)名詞,之間用英文半角逗號(hào)隔開。
<meta name="Description" content="" />
<meta name="Keywords" content="" />
文件規(guī)范
文件目錄
1、存放圖片/CSS文件夾命名規(guī)范:ossweb-img
2、CSS文件命名如:comm.css(單面頁(yè)css放在同一個(gè)頁(yè)面中,css的reset采用范例規(guī)定的格式)
3、JS文件(非必須,框架、公用js的放到該目錄):js,JS文件命名如:comm.js
4、inc文件(include頁(yè)面片):inc
5、分離前文件圖片、CSS、JS引用的資源路徑不要去掉http:
圖片規(guī)范
圖片標(biāo)簽
圖片標(biāo)簽必須寫上寬度、高度和alt屬性,寬高為圖片的原大小,例如:
<img src="" width="500" height="200" alt="活動(dòng)獎(jiǎng)品建筑排程卡"/>
測(cè)試標(biāo)準(zhǔn)
瀏覽器兼容性測(cè)試
兼容IE8、IE9、IE10、IE11、Firefox、chrome,QQ瀏覽器。并且拖大和縮小窗口,頁(yè)面布局不會(huì)發(fā)生錯(cuò)位;
頁(yè)面不需要兼容IE6、7,頁(yè)面中可以在頂部加入以下提示,注意頁(yè)面中CSS類browser-tips需要寫上樣式,并使用醒目的背景和字體顏色
<!--[if lt IE 7]><p class="browser-tips">您的瀏覽器版本過低,請(qǐng)升級(jí)瀏覽器獲得更好的體驗(yàn)<p><![endif]-->
顯示器分辨率測(cè)試
1024*768、1440*900、1920*1080
可讀性測(cè)試
1、在屏蔽js、css后,頁(yè)面要仍然具有良好的可讀性。
2、表現(xiàn)與結(jié)構(gòu)分離,代碼中不要涉及表現(xiàn)元素,如:style、font、bgColor、border等。
3、選用恬當(dāng)?shù)脑兀瑯?biāo)題使用h1~h6,h1為網(wǎng)頁(yè)一級(jí)標(biāo)題,一個(gè)頁(yè)面中只出現(xiàn)一次;
4、分大塊使用div,段落使用p。數(shù)據(jù)列表使用table/ul/ol/dd等,關(guān)鍵字使用strong
怎么樣?對(duì)你有所啟發(fā)了嗎?快告訴小編吧!
人整理來(lái)之不易請(qǐng)珍惜,如有錯(cuò)誤請(qǐng)諒解,謝謝。。。
資源教程:
- [前端知識(shí)體系](http://www.cnblogs.com/sb19871023/p/3894452.html)
- [前端知識(shí)結(jié)構(gòu)](https://github.com/JacksonTian/fks)
- [Web前端開發(fā)大系概覽](https://github.com/unruledboy/WebFrontEndStack)
- [Web前端開發(fā)大系概覽-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html)
- [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png)
- [免費(fèi)的編程中文書籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [前端書籍](https://github.com/dypsilon/frontend-dev-bookmarks)
- [前端免費(fèi)書籍大全](https://github.com/vhf/free-programming-books)
- [前端知識(shí)體系](http://www.cnblogs.com/sb19871023/p/3894452.html)
- [免費(fèi)的編程中文書籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [智能社 - 精通JavaScript開發(fā)](http://study.163.com/course/introduction/224014.htm)
- [重新介紹 JavaScript(JS 教程)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- [麻省理工學(xué)院公開課:計(jì)算機(jī)科學(xué)及編程導(dǎo)論](http://v.163.com/special/opencourse/bianchengdaolun.html)
- [JavaScript中的this陷阱的最全收集--沒有之一](http://segmentfault.com/a/1190000002640298)
- [JS函數(shù)式編程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
- [JavaScript Promise迷你書(中文版)](http://liubin.github.io/promises-book/)
- [騰訊移動(dòng)Web前端知識(shí)庫(kù)](https://github.com/AlloyTeam/Mars)
- [Front-End-Develop-Guide 前端開發(fā)指南](https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide)
- [前端開發(fā)筆記本](https://li-xinyang.gitbooks.io/frontend-notebook/content/)
- [大前端工具集 - 聶微東](https://github.com/nieweidong/fetool)
- [前端開發(fā)者手冊(cè)](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
- [前端入門教程](http://www.cnblogs.com/jikey/p/3613082.html) - [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000) - [jQuery基礎(chǔ)教程](http://www.imooc.com/view/11) - [前端工程師必備的PS技能——切圖篇](http://www.imooc.com/view/506) - [結(jié)合個(gè)人經(jīng)歷總結(jié)的前端入門方法](https://github.com/qiu-deqing/FE-learning)
六. API:
1. 總目錄
- [mozilla js參考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) - [chrome開發(fā)中心(chrome的內(nèi)核已轉(zhuǎn)向blink)](https://developer.chrome.com/extensions/api_index.html) - [safari開發(fā)中心](https://developer.apple.com/library/safari/navigation) - [microsoft js參考](https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx) - [js秘密花園](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html) - [js秘密花園](http://bonsaiden.github.io/JavaScript-Garden/zh/) - [w3help](http://www.w3help.org/) 綜合Bug集合網(wǎng)站
2. jQuery
3. Ecmascript
4. Js template
5. 彈出層
6. CSS
7. Angularjs
8. React
9. 移動(dòng)端API
10. avalon
11. Requriejs
12. Seajs
13. Less,sass
14. Markdown
15. D3
16. 兼容性
17. UI相關(guān)
18. HTTP
19. 其它API
20. 圖表類
21. vue
21. 正則
22. ionic
23. 其它
七. 開發(fā)規(guī)范
八. 其它收集
1. 各大公司開源項(xiàng)目
2. Javascript
3. Html5
4. CSS
5. jQuery
6. Ext, EasyUI, J-UI 及其它各種UI方案
7. 頁(yè)面 社會(huì)化 分享功能
8. 富文本編輯器
9. 日歷
10. 綜合效果搜索平臺(tái)
11. 前端工程化
12. 輪播圖
- [無(wú)縫切換](http://www.swipejs.com/) - [滑屏效果](http://www.idangero.us/swiper/) - [全屏fullpage](https://github.com/peunzhang/fullpage) - [單個(gè)圖片切換](https://github.com/qiqiboy/touchslider) - [單個(gè)全屏切換](https://github.com/peunzhang/slip.js) - [百度的切換庫(kù)](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) - [單個(gè)全屏切換](https://github.com/peunzhang/iSlider) - [滑屏效果](https://github.com/saw/touch-interfaces) - [旋轉(zhuǎn)拖動(dòng)設(shè)置](http://baijs.com/tinycircleslider/) - [類似于swipe切換](http://touchslider.com/) - [支持多種形式的觸摸滑動(dòng)](http://www.swiper.com.cn/demo/index.html) - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) - [大話主席pc移動(dòng)圖片輪換](http://www.superslide2.com/) - [滑屏效果](https://github.com/hahnzhu/parallax.js) - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) - [ - 定寬網(wǎng)頁(yè)設(shè)計(jì)下,固定寬度布局開發(fā)WebApp并實(shí)現(xiàn)多終端下WebApp布局自適應(yīng)](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html][WebApp) - [判斷微信客戶端的那些坑](http://loo2k.com/blog/detecting-wechat-client/) - [可以通過javascript直接調(diào)用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) - [JiaThis 分享到微信代碼](http://www.jiathis.com/help/html/weixin-share-code) - [聊聊移動(dòng)端跨平臺(tái)開發(fā)的各種技術(shù)](http://fex.baidu.com/blog/2015/05/cross-mobile/) - [前端自動(dòng)化測(cè)試](http://www.zhihu.com/question/29922082) - [多種輪換圖片](http://ajccom.github.io/niceslider/) - [滑動(dòng)側(cè)邊欄](https://mango.github.io/slideout/)
13. 文件上傳
14. 模擬select
15. 取色插件
16. 城市聯(lián)動(dòng)
17. 剪貼板
18. 簡(jiǎn)繁轉(zhuǎn)換
19. 表格 Grid
20. 在線演示
21. 播放器
22. 粒子動(dòng)畫
九. Nodejs
十. 性能優(yōu)化
- [Javascript高性能動(dòng)畫與頁(yè)面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering) - [移動(dòng)H5前端性能優(yōu)化指南](http://isux.tencent.com/h5-performance.html) - [5173首頁(yè)前端性能優(yōu)化實(shí)踐](http://ued.5173.com/?p=1731) - [給網(wǎng)頁(yè)設(shè)計(jì)師和前端開發(fā)者看的前端性能優(yōu)化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) - [復(fù)雜應(yīng)用的 CSS 性能分析和優(yōu)化建議](http://www.orzpoint.com/profiling-css-and-optimization-notes/) - [張?chǎng)涡瘛岸诵阅躚(http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) - [前端性能監(jiān)控總結(jié)](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) - [ 網(wǎng)站性能優(yōu)化之CSS無(wú)圖片技術(shù)](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/) - [web前端性能優(yōu)化進(jìn)階路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html) - [前端技術(shù):網(wǎng)站性能優(yōu)化之CSS無(wú)圖片技術(shù)](http://my.eoe.cn/tuwandou/archive/4544.html) - [瀏覽器的加載與頁(yè)面性能優(yōu)化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) - [頁(yè)面加載中的圖片性能優(yōu)化](http://www.w3ctech.com/p/1503) - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) - [html優(yōu)化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) - [99css——性能](http://www.99css.com/tag/%e6%80%a7%e8%83%bd) - [Yslow——性能優(yōu)化](http://www.yslow.net/category.php?cid=20) - [YSLOW中文介紹](http://www.cnblogs.com/yslow/) - [轉(zhuǎn)一篇Yahoo關(guān)于網(wǎng)站性能優(yōu)化的文章,兼談本站要做的優(yōu)化](http://www.360ito.com/article/40.html) - [Yahoo!團(tuán)隊(duì)實(shí)踐分享:網(wǎng)站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) - [網(wǎng)站性能優(yōu)化指南:什么使我們的網(wǎng)站變慢?](http://blog.jiasule.com/i/153) - [網(wǎng)站性能優(yōu)化實(shí)踐,減少加載時(shí)間,提高用戶體驗(yàn)](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) - [淺談網(wǎng)站性能優(yōu)化 前端篇](http://www.umtry.com/archives/747.html) - [前端重構(gòu)實(shí)踐之如何對(duì)網(wǎng)站性能優(yōu)化?](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) - [前端性能優(yōu)化:使用媒體查詢加載指定大小的背景圖片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) - [網(wǎng)站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) - [加載,不只是少一點(diǎn)點(diǎn)](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) - [前端性能的測(cè)試與優(yōu)化](http://mzhou.me/article/95310/) - [分享網(wǎng)頁(yè)加載速度優(yōu)化的一些技巧?](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) - [頁(yè)面加載中的圖片性能優(yōu)化](http://www.f2es.com/images-bytes-opt/) - [web前端優(yōu)化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) - [網(wǎng)站性能優(yōu)化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html) - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) - [由12306談?wù)劸W(wǎng)站前端性能和后端性能優(yōu)化](http://coolshell.cn/articles/6470.html) - [AlloyTeam——前端優(yōu)化](http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) - [毫秒必爭(zhēng),前端網(wǎng)頁(yè)性能最佳實(shí)踐](http://www.cnblogs.com/developersupport/p/3248695.html) - [網(wǎng)站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) - [前端工程與性能優(yōu)化(上):靜態(tài)資源版本更新與緩存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) - [前端工程與性能優(yōu)化(下):靜態(tài)資源管理與模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) - [HTTPS連接的前幾毫秒發(fā)生了什么](http://blog.jobbole.com/48369/) - [Yslow](http://uicss.cn/yslow/#more-12319) - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) - [YUISlide,針對(duì)移動(dòng)設(shè)備的動(dòng)畫性能優(yōu)化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) - [讓網(wǎng)站提速的最佳前端實(shí)踐](http://segmentfault.com/a/1190000000367899) - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) - [Need for Speed – How to Improve your Website Performance](https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) - [阿里無(wú)線前端性能優(yōu)化指南 (Pt.1 加載期優(yōu)化)](https://github.com/amfe/article/issues/1)
十一. 前端架構(gòu)
十二. 個(gè)人作品
1. 推薦作品
2. 群?jiǎn)T作品
3. 國(guó)外大牛精品
十三. 簡(jiǎn)歷模板
十四. 面試題
十五. iconfont
十六. 開發(fā)工具類
十七. 前端導(dǎo)航網(wǎng)站
十八. 常用CDN
十九. Git,SVN,Github
需要資源私信回復(fù)前端,希望大家多多關(guān)注,多多評(píng)論
端知識(shí)體系 http://www.cnblogs.com/sb19871023/p/3894452.html
前端知識(shí)結(jié)構(gòu) https://github.com/JacksonTian/fks
Web前端開發(fā)大系概覽 https://github.com/unruledboy/WebFrontEndStack
Web前端開發(fā)大系概覽-中文版 http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
WebFrontendStackv2.2https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png
免費(fèi)的編程中文書籍索引https://github.com/justjavac/free-programming-books-zh_CN
前端書籍https://github.com/dypsilon/frontend-dev-bookmarks
前端免費(fèi)書籍大全https://github.com/vhf/free-programming-books
前端知識(shí)體系http://www.cnblogs.com/sb19871023/p/3894452.html
免費(fèi)的編程中文書籍索引https://github.com/justjavac/free-programming-books-zh_CN
精通JavaScript開發(fā)http://study.163.com/course/introduction/224014.htm
重新介紹 JavaScript(JS 教程)https://developer.mozilla.org/zhCN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
麻省理工學(xué)院公開課:計(jì)算機(jī)科學(xué)及編程導(dǎo)論http://v.163.com/special/opencourse/bianchengdaolun.html
JavaScript中的this陷阱的最全收集--沒有之一http://segmentfault.com/a/1190000002640298
JS函數(shù)式編程指南
https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise迷你書(中文版)http://liubin.github.io/promises-book
騰訊移動(dòng)Web前端知識(shí)庫(kù) https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide 前端開發(fā)指南https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
前端開發(fā)筆記本https://li-xinyang.gitbooks.io/frontend-notebook/content
大前端工具集 - 聶微東https://github.com/nieweidong/fetool
前端開發(fā)者手冊(cè)https://dwqs.gitbooks.io/frontenddevhandbook/content
易迅網(wǎng)前端博客https://github.com/YIXUNFE/blog
重新介紹 JavaScript(JS 教程)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
入門類
地址
前端入門教程http://www.cnblogs.com/jikey/p/3613082.html
廖雪峰的Javascript教程
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
jQuery基礎(chǔ)教程http://www.imooc.com/view/11
前端工程師必備的PS技能——切圖篇http://www.imooc.com/view/506
結(jié)合個(gè)人經(jīng)歷總結(jié)的前端入門方法https://github.com/qiu-deqing/FE-learning
效果類
地址
彈出層http://www.imooc.com/learn/58
焦點(diǎn)圖輪播特效http://www.imooc.com/learn/18
工具類
地址
css sprite 雪碧圖制作http://www.imooc.com/learn/93
版本控制入門 – 搬進(jìn) Githubhttp://www.imooc.com/learn/390
Grunt-beginner前端自動(dòng)化工具h(yuǎn)ttp://www.imooc.com/learn/30
慕課專題
地址
張?chǎng)涡?- 慕課系列http://www.imooc.com/space/teacher/id/197450
lyn - 慕課系列http://www.imooc.com/space/teacher/id/104593
艾倫 - 慕課系列http://www.imooc.com/space/teacher/id/290139
碧仔 - Hello,移動(dòng)WEBhttp://www.imooc.com/view/494
周報(bào)類
地址
平安科技移動(dòng)開發(fā)二隊(duì)技術(shù)周報(bào)https://github.com/PaicHyperionDev/MobileDevWeekly
開發(fā)中心
地址
mozilla js參考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
chrome開發(fā)中心(chrome的內(nèi)核已轉(zhuǎn)向blink)
https://developer.chrome.com/extensions/api_index.html
safari開發(fā)中心https://developer.apple.com/library/safari/navigation
microsoft js參考https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js秘密花園http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js秘密花園http://bonsaiden.github.io/JavaScript-Garden/zh
w3help http://www.w3help.org綜合Bug集合網(wǎng)站
綜合搜索
地址
javascriptinghttp://www.javascripting.com
各種流行庫(kù)搜索http://microjs.com
綜合API
地址
runoob.com-包含各種API集合http://www.runoob.com
開源中國(guó)在線API文檔合集http://tool.oschina.net/apidocs
devdocs http://devdocs.io英文綜合API網(wǎng)站
jQuery
地址
jQuery API 中文文檔http://www.jquery123.com
hemin 在線版http://hemin.cn/jq
css88 jq api http://www.css88.com/jqapi-1.9/on
css88 jqui api http://www.css88.com/jquery-ui-api
學(xué)習(xí)jquery http://learn.jquery.com
jquery 源碼查找http://james.padolsey.com/jquery
Ecmascript
地址
Understanding ECMAScript 6 - Nicholas C. Zakas https://leanpub.com/understandinges6/read
exploring-es6 https://leanpub.com/exploring-es6/read
exploring-es6翻譯 https://github.com/es6-org/exploring-es6
exploring-es6翻譯后預(yù)覽 http://es6-org.github.io/exploring-es6
阮一峰 es6 http://es6.ruanyifeng.com
阮一峰 Javascript http://javascript.ruanyifeng.com
ECMA-262,第 5 版 http://yanhaijing.com/es5
es5 http://es5.github.io
Js template
地址
template-chooser http://garann.github.io/template-chooser
artTemplate https://github.com/aui/artTemplate
tomdjs https://github.com/aui/tmodjs/blob/master/README.md
淘寶模板juicer模板 http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 繁星前端模板引擎 http://koen301.github.io/fxtpl
laytpl http://laytpl.layui.com
mozilla - nunjucks https://github.com/mozilla/nunjucks
Juicer https://github.com/PaulGuo/Juicer
dustjs http://akdubya.github.io/dustjs
etpl http://ecomfe.github.io/etpl
彈出層
地址
artDialog 最新版 https://github.com/aui/artDialog
artDialog 文檔 http://aui.github.io/artDialog/doc/index.html
google code 下載地址 https://code.google.com/p/artdialog/downloads/list
賢心彈出層 http://layer.layui.com
響應(yīng)式用戶交互組件庫(kù) https://github.com/bh-lay/UI
sweetalert-有css3動(dòng)畫彈出層 http://t4t5.github.io/sweetalert
Angularjs
地址
Angular.js 的一些學(xué)習(xí)資源 https://github.com/dolymood/AngularLearning
angularjs中文社區(qū) http://angularjs.cn
Angularjs源碼學(xué)習(xí) http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs源碼學(xué)習(xí) http://www.ifeenan.com/?c=AngularJS
angular對(duì)bootstrap的封裝 http://angular-ui.github.io/bootstrap
angularjs + nodejs https://cnodejs.org/topic/51404e0f069911196d2e3923
呂大豹 Angularjs http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS 最佳實(shí)踐 http://www.infoq.com/cn/news/2013/02/angular-web-app
Angular的一些擴(kuò)展指令 http://www.lovelucy.info/angularjs-best-practices.html
Angular數(shù)據(jù)綁定原理 https://github.com/Pasvaz/bindonce
一些擴(kuò)展Angular UI組件 https://github.com/angular-ui
Ember和AngularJS的性能測(cè)試
http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
帶你走近AngularJS - 基本功能介紹
http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs開發(fā)指南 http://angular.duapp.com/docs/guide
Angularjs學(xué)習(xí) http://www.cnblogs.com/amosli/p/3710648.html
不要帶著jQuery的思維去學(xué)習(xí)AngularJS http://www.rainweb.cn/article/angularjs-jquery.html
angularjs 學(xué)習(xí)筆記 http://wangjiatao.diandian.com/?tag=angularjs
angularjs 開發(fā)指南 http://www.angularjs.cn/T008
angularjs 英文資料 https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap http://angular-ui.github.io/bootstrap
angular jq mobile https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui http://mgcrea.github.io/angular-strap
整合jQuery Mobile+AngularJS經(jīng)驗(yàn)談 http://www.tuicool.com/articles/7ZZVr2
有jQuery背景,該如何用AngularJS編程思想 http://blog.jobbole.com/46589/
AngularJS在線教程 http://each.sinaapp.com/angular
angular學(xué)習(xí)筆記 http://www.zouyesheng.com/angular.html
React
地址
react.js 中文論壇 http://www.react-china.org
react.js 官方網(wǎng)址 https://facebook.github.io/react/index.html
react.js 官方文檔 https://facebook.github.io/react/docs/getting-started.html
react.js material UI http://material-ui.com/#
react.js TouchstoneJS UI http://touchstonejs.io
react.js amazeui UI http://amazeui.org/react
React 入門實(shí)例教程 - 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
React Native 中文版 http://wiki.jikexueyuan.com/project/react-native
Webpack 和 React 小書 - 前端亂燉 http://www.html-js.com/article/Fakefish%203053
Webpack 和 React 小書 - gitbook https://fakefish.github.io/react-webpack-cookbook
webpack https://github.com/webpack/webpack
Webpack,101入門體驗(yàn) http://html-js.com/article/3009
webpack入門教程 http://html-js.com/article/3113
基于webpack搭建前端工程解決方案探索 http://segmentfault.com/a/1190000003499526
React原創(chuàng)實(shí)戰(zhàn)視頻教程 http://www.piliyu.com
移動(dòng)端API
地址
99移動(dòng)端知識(shí)集合 https://github.com/jtyjty99999/mobileTech
移動(dòng)端前端開發(fā)知識(shí)庫(kù) https://github.com/AlloyTeam/Mars
移動(dòng)前端的一些坑和解決方法(外觀表現(xiàn)) http://caibaojian.com/mobile-web-bug.html
【原】移動(dòng)web資源整理 http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 中文手冊(cè) http://mweb.baidu.com/zeptoapi
zepto 1.0 中文手冊(cè) http://www.html-5.cn/Manual/Zepto
zepto 1.1.2 http://www.css88.com/doc/zeptojs_api
zepto 中文注釋 http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile 手冊(cè) http://app-framework-software.intel.com/api.php
移動(dòng)瀏覽器開發(fā)集合 https://github.com/maxzhang/maxzhang.github.com/issues
移動(dòng)開發(fā)大雜燴 https://github.com/hoosin/mobile-web-favorites
微信webview中的一些問題
http://lin-chao.github.io/2014/11/14/%E5%BE%AE%E4%BF%A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98
框架
地址
特色的HTML框架可以創(chuàng)建精美的iOS應(yīng)用 http://framework7.taobao.org
淘寶SUI http://m.sui.taobao.org
avalon
地址
avalonjs http://avalonjs.github.io
Avalon新一代UI庫(kù): OniUI http://ued.qunar.com/oniui/index.html
avalon.oniui-基于avalon的組件庫(kù) https://github.com/RubyLouvre/avalon.oniui
Requriejs
地址
Javascript模塊化編程(一):模塊的寫法
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript模塊化編程(二):AMD規(guī)范
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript模塊化編程(三):require.js的用法
http://www.ruanyifeng.com/blog/2012/11/require_js.html
RequireJS入門(一) http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
RequireJS入門(二) http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS進(jìn)階(三) http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie源碼學(xué)習(xí) http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie 入門指南 http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS 學(xué)習(xí)筆記 http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs 其一 http://cyj.me/why-seajs/requirejs/
require backbone結(jié)合 http://www.cnblogs.com/yexiaochai/p/3221081.html
Seajs
地址
seajs http://seajs.org
seajs 中文手冊(cè) http://cyj.me/why-seajs/zh
Less,sass
地址
sass http://www.w3cplus.com/sassguide
sass教程-sass中國(guó) http://www.sass.hk
Sass 中文文檔 http://sass.bootcss.com
less http://less.bootcss.com
Markdown
地址
Markdown 語(yǔ)法說明 (簡(jiǎn)體中文版) http://wowubuntu.com/markdown
markdown入門參考
https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook https://www.gitbook.com國(guó)外的在線markdown可編輯成書
mdeditor https://www.zybuluo.com/mdeditor一款國(guó)內(nèi)的在線markdown編輯器
stackedit https://stackedit.io國(guó)外的在線markdown編輯器,功能強(qiáng)大,同步云盤
mditor http://bh-lay.github.io/mditor一款輕量級(jí)的markdown編輯器
lepture-editor https://github.com/lepture/editor
markdown-editor https://github.com/jbt/markdown-editor
D3
地址
d3 Tutorials https://github.com/mbostock/d3/wiki/Tutorials
Gallery https://github.com/mbostock/d3/wiki/Gallery
lofter http://datavisual.lofter.com/post/40cf3a_188e535
iteye http://alanland.iteye.com/blog/1878595
ruanyifeng http://javascript.ruanyifeng.com/library/d3.html
兼容性
地址
esma 兼容列表 http://kangax.github.io/compat-table/es6
W3C CSS驗(yàn)證服務(wù) http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse http://caniuse.com/#index
csscreator http://csscreator.com/properties
microsoft https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx
在線測(cè)兼容-移動(dòng)端 http://www.responsinator.com
emulators https://www.manymo.com/emulators
UI相關(guān)
地址
bootcss http://v3.bootcss.com
MetroUICSS http://www.w3cplus.com/MetroUICSS
semantic http://semantic-ui.com
Buttons http://alexwolfe.github.io/Buttons
kitecss http://hiloki.github.io/kitecss
pintuer http://www.pintuer.com
amazeui http://amazeui.org
worldhello http://www.worldhello.net/gotgithub/index.html
linuxtoy http://igit.linuxtoy.org/contents.html
gitmagic http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn
rogerdudler http://rogerdudler.github.io/git-guide/index.zh.html
gitref http://gitref.justjavac.com
book http://git-scm.com/book/zh
gogojimmy http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic
HTTP
地址
HTTP API 設(shè)計(jì)指南 http://segmentfault.com/bookmark/1230000002521721
其它API
地址
javascript流行庫(kù)匯總
javascriptoo
驗(yàn)證api http://niceue.com/validator/demo/index.php
underscore 中文手冊(cè) http://www.css88.com/doc/underscore
underscore源碼分析 http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031
underscore源碼分析-亞里士朱德的博客 http://yalishizhude.github.io/tags/underscore
underscrejs en api http://underscorejs.org
lodash - underscore的代替品 https://lodash.com
ext4api http://extjs-doc-cn.github.io/ext4api
backbone 中文手冊(cè) http://www.csser.com/tools/backbone/backbone.js.html
qwrap手冊(cè) http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm
緩動(dòng)函數(shù) http://easings.net/zh-cn
svg 中文參考 http://www.w3school.com.cn/svg/svg_reference.asp
svg mdn參考 https://developer.mozilla.org/en-US/docs/Web/SVG
svg 導(dǎo)出 canvas https://github.com/gabelerner/canvg
svg 導(dǎo)出 png https://github.com/exupero/saveSvgAsPng
ai-to-svg http://www.zamzar.com/convert/ai-to-svg
localStorage 庫(kù) https://github.com/machao/localStorage
圖表類
地址
Highcharts 中文API http://www.hcharts.cn/api/index.php
Highcharts 英文API http://api.highcharts.com/highcharts
ECharts 百度的圖表軟件 http://echarts.baidu.com/
高德地圖 http://lbs.amap.com/api
開源的矢量圖腳本框架 http://paperjs.org
svg 地圖 http://jvectormap.com
vue
地址
Vue http://cn.vuejs.org
Vue 論壇 http://forum.vuejs.org
Vue 入門指南 http://www.cnblogs.com/aaronjs/p/3660102.html
Vue 的一些資源索引 http://segmentfault.com/a/1190000000411057
awesome-vue https://github.com/vuejs/awesome-vue
正則
地址
JS正則表達(dá)式元字符 http://segmentfault.com/a/1190000002471140
正則表達(dá)式30分鐘入門教程 http://deerchao.net/tutorials/regex/regex.htm
MDN-正則表達(dá)式
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
ruanyifeng - RegExp對(duì)象 http://javascript.ruanyifeng.com/stdlib/regexp.html
小胡子哥 - 進(jìn)階正則表達(dá)式 http://div.io/topic/764?page=1
is.js https://github.com/Cedriking/is.js/blob/master/is.js
正則在線測(cè)試 http://regexper.com
ionic
地址
ionic https://github.com/ychow/ionic-guide
其它
地址
Mock.js 是一款模擬數(shù)據(jù)生成器 http://mockjs.com
前端
地址
通過分析github代碼庫(kù)總結(jié)出來(lái)的工程師代碼書寫習(xí)慣 http://alloyteam.github.io/CodeGuide
HTML&CSS編碼規(guī)范 by @mdo http://codeguide.bootcss.com
團(tuán)隊(duì)合作的css命名規(guī)范-騰訊AlloyTeam前端團(tuán)隊(duì) http://www.alloyteam.com/2011/10/107
前端編碼規(guī)范之js - by yuwenhui http://yuwenhui.github.io
前端編碼規(guī)范之js - by 李靖 http://www.cnblogs.com/hustskyking/p/javascript-spec.html
前端開發(fā)規(guī)范手冊(cè) http://zhibimo.com/read/Ashu/front-end-style-guide
Airbnb JavaScript 編碼規(guī)范(簡(jiǎn)體中文版)
https://github.com/yuche/javascript#table-of-contents
AMD與CMD規(guī)范的區(qū)別 http://www.zhihu.com/question/20351507
AMD與CMD規(guī)范的區(qū)別 http://www.cnblogs.com/tugenhua0707/p/3507957.html
KISSY 源碼規(guī)范
http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html
bt編碼規(guī)范 http://codeguide.bootcss.com
規(guī)范加強(qiáng)版 https://github.com/Suxiaogang/Code_Guide
前端代碼規(guī)范 及 最佳實(shí)踐 http://blog.jobbole.com/79075
百度前端規(guī)范 http://coderlmn.github.io/code-standards
百度前端規(guī)范 http://isobar-idev.github.io/code-standards
百度前端規(guī)范 http://zhuanlan.zhihu.com/fuyun/19884834
ECMAScript6 編碼規(guī)范--廣發(fā)證券前端團(tuán)隊(duì) https://github.com/gf-rd/es6-coding-style
JavaScript 風(fēng)格指南/編碼規(guī)范(Airbnb公司版) http://blog.jobbole.com/79484
網(wǎng)易前端開發(fā)規(guī)范 http://nec.netease.com/standard
css模塊 http://www.75team.com/archives/1049
前端規(guī)范資源列表 https://github.com/ecomfe/spec
PHP
地址
最流行的PHP 代碼規(guī)范 http://segmentfault.com/a/1190000000443795
最流行的PHP 代碼規(guī)范https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md
Android
地址
【敏捷開發(fā)】Android團(tuán)隊(duì)開發(fā)規(guī)范 http://www.cnblogs.com/lcw/p/3619181.html
Android 開發(fā)規(guī)范與應(yīng)用 http://www.jianshu.com/p/4390f4fe19b3
各大公司開源項(xiàng)目
地址
Facebook Projects https://code.facebook.com/projects/web
百度web前端研發(fā)部 http://fex.baidu.com
百度EFE http://efe.baidu.com
百度github https://github.com/fex-team
alloyteam http://www.alloyteam.com
alloyteam-github http://alloyteam.github.io
alloyteam-AlloyGameEngine https://github.com/AlloyTeam/AlloyGameEngine
AlloyDesigner
http://alloyteam.github.io/AlloyDesigner即時(shí)修改,即時(shí)保存,設(shè)計(jì)稿較正,其它開發(fā)輔助工具
H5交互頁(yè)編輯器AEditor介紹http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shaoH5動(dòng)畫交互頁(yè)開發(fā)的工具介紹
AEditor http://aeditor.alloyteam.comH5動(dòng)畫交互頁(yè)開發(fā)的工具
maka http://forum.maka.im/wordpress
值得訂閱的weekly https://github.com/fenbility/weekly-feed
騰訊html5 http://cube.qq.com
奇舞團(tuán)開源項(xiàng)目 http://75team.github.io
Qunar UED http://ued.qunar.com
Scrat http://scrat.io
常用
地址
ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性
http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome
模擬鍵盤 http://mottie.github.io/Keyboard
拼音 https://github.com/hotoo/pinyin
中國(guó)個(gè)人身份證號(hào)驗(yàn)證 https://github.com/mc-zone/IDValidator
算法
地址
數(shù)據(jù)結(jié)構(gòu)與算法 JavaScript 描述. 章節(jié)練習(xí) https://github.com/Ralph-Wang/algorithm.in.js
常見排序算法(JS版) https://github.com/twobin/twobinSort
經(jīng)典排序 https://github.com/luofei2011/jsAgm/blob/master/js/sort.js
常見排序算法-js版本 https://github.com/hechangmin/jssort
JavaScript 算法與數(shù)據(jù)結(jié)構(gòu) 精華集 https://github.com/lightningtgc/JavaScript-Algorithms
面試常考算法題精講 http://www.nowcoder.com/live/courses
JSON
地址
模擬生成JSON數(shù)據(jù) http://beta.json-generator.com
返回跨域JSONAPI http://jsonp.afeld.me
Html5
地址
HTML5 有哪些讓你驚艷的 demo?http://www.zhihu.com/question/24398907
CSS
地址
browserhacks http://browserhacks.com
焦點(diǎn)圖
地址
myfocus https://github.com/koen301/myfocus
myfocus-官方演示站 http://www.chhua.com/myfocus
SuperSlidev2.1 -- 大話主席 http://www.superslide2.com
soChange http://www.bujichong.com/sojs/soChange/index.html
Ext, EasyUI, J-UI 及其它各種UI方案
地址
extjs https://www.sencha.com/products/extjs
ext4英文api http://docs.sencha.com/extjs/4.0.7
ext4中文api http://extjs-doc-cn.github.io/ext4api
EasyUI
地址
jquery easyui 未壓縮源代碼 http://jquery-easyui.googlecode.com/svn/trunk/src
J-UI
地址
J-UI http://jui.org
Other
地址
MUI-最接近原生APP體驗(yàn)的高性能前端框架 http://dcloudio.github.io/mui
Amaze UI
中國(guó)首個(gè)開源 HTML5 跨屏前端框架
淘寶 HTML5 前端框架 http://m.sui.taobao.org
KISSY - 阿里前端JavaScript庫(kù) http://docs.kissyui.com
網(wǎng)易Nej - Nice Easy Javascript http://nej.netease.com
Kendo UI MVVM Demo http://demos.telerik.com/kendo-ui/mvvm/index
Bootstrap http://www.bootcss.com
Smart UI http://smartui.chinamzz.com
雅虎UI - CSS UI http://developer.yahoo.com/yui/grids
頁(yè)面 社會(huì)化 分享功能
地址
百度分享 http://share.baidu.compc端
JiaThis http://jiathis.compc端
社會(huì)化分享組件 http://developer.baidu.com/soc/share移動(dòng)端
ShareSDK 輕松實(shí)現(xiàn)社會(huì)化功能 http://www.mob.com/#/index移動(dòng)端
友盟分享 http://dev.umeng.com/social/android/quick-integration移動(dòng)端
富文本編輯器
地址
功能齊全 tinymce https://www.tinymce.com
百度 ueditor http://ueditor.baidu.com/website
經(jīng)典的ckeditor http://ckeditor.com
經(jīng)典的kindeditor http://kindeditor.net
wysiwyg http://www.bootcss.com/p/bootstrap-wysiwyg
一個(gè)有情懷的編輯器。Bach's Editor http://integ.github.io/BachEditor
tower用的編輯器 https://github.com/mycolorway/simditor
summernote 編輯器 https://github.com/summernote/summernote
html5編輯器 http://neilj.github.io/Squire
XEditor http://lab.hustlzp.com/XEditor
wangEditor https://github.com/wangfupeng1988/wangEditor
PC
地址
經(jīng)典my97 http://www.my97.net/dp/demo/index.htm
強(qiáng)大的獨(dú)立日期選擇器 http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html
fullcalendar http://fullcalendar.io
fullcalendar日歷控件知識(shí)點(diǎn)集合 http://blog.csdn.net/francislaw/article/details/7740630
中文api http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html
農(nóng)歷日歷 https://github.com/zzyss86/LunarCalendar
超酷的仿百度帶節(jié)日日歷老黃歷控件http://www.sucaisj.com/jiaoben/date/201509/16856.html
日期格式化 http://momentjs.com
大牛日歷控件https://github.com/Johnqing/QPAYCalendar
我群某管理作品https://github.com/Iamlars/dateMarker
input按位替換-官網(wǎng)http://digitalbush.com/projects/masked-input-plugin
input按位替換-githubhttps://github.com/digitalBush/jquery.maskedinput/tree/1.2.2
bootstrap-daterangepicker https://github.com/dangrossman/bootstrap-daterangepicker
國(guó)外30個(gè)插件集合 http://www.vandelaydesign.com/30-best-free-jquery-plugins
JavaScript datepicker http://dbushell.com/2012/10/09/pikaday-javascript-datepicker
Datepair.js http://jonthornton.github.io/Datepair.js
一個(gè)風(fēng)格多樣的日歷 https://github.com/glad/glDatePicker
彈出層式的全日歷 http://amsul.ca/pickadate.js/date
jquery雙日歷http://www.daterangepicker.com
Date library
地址
Datejs https://github.com/datejs/Datejs
sugarjs http://sugarjs.com/api/Date
綜合效果搜索平臺(tái)
地址
效果網(wǎng) http://www.jq22.com
17素材 http://www.17sucai.com
常用的JavaScript代碼片段http://microjs.com
概述
地址
前端工具大全http://www.awesomes.cn
什么是前端工程化https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#
Gulp
地址
Gulp官網(wǎng) http://gulpjs.com
Gulp中文網(wǎng) http://www.gulpjs.com.cn
gulp資料收集 https://github.com/Platform-CUF/use-gulp
Gulp:任務(wù)自動(dòng)管理工具 - ruanyifeng http://javascript.ruanyifeng.com/tool/gulp.html
Gulp插件 http://gulpjs.com/plugins
Gulp不完全入門教程 http://www.ido321.com/1622.html
為什么使用gulp? https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33
Gulp安裝及配合組件構(gòu)建前端開發(fā)一體化 http://www.dbpoo.com/getting-started-with-gulp
Gulp 入門指南 https://github.com/nimojs/gulp-book
Gulp 入門指南 - nimojs https://github.com/nimojs/blog/issues/19
Gulp入門教程
http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B
Gulp in Action http://www.imooc.com/video/5692
Gulp開發(fā)教程(翻譯) http://www.w3ctech.com/topic/134
前端構(gòu)建工具gulpjs的使用介紹及技巧 http://www.cnblogs.com/2050/p/4198792.html
Grunt
地址
gruntjs http://gruntjs.com
Grunt中文網(wǎng) http://www.gruntjs.net
Fis
地址
fis 官網(wǎng) http://fex-team.github.io/fis-site/index.html
fis http://fis.baidu.com
pc圖輪
地址
單屏輪播sochange http://www.jsfoot.com/jquery/demo/2011-09-20/192.html
左右按鈕多圖切換 http://bxslider.com/examples/carousel-demystified
fullpage全屏輪播 https://github.com/alvarotrigo/fullPage.js
移動(dòng)端
地址
無(wú)縫切換 http://www.swipejs.com
滑屏效果 http://www.idangero.us/swiper
全屏fullpage https://github.com/peunzhang/fullpage
單個(gè)圖片切換 https://github.com/qiqiboy/touchslider
單個(gè)全屏切換 https://github.com/peunzhang/slip.js
百度的切換庫(kù) http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group
單個(gè)全屏切換 https://github.com/peunzhang/iSlider
滑屏效果 https://github.com/saw/touch-interfaces
旋轉(zhuǎn)拖動(dòng)設(shè)置 http://baijs.com/tinycircleslider
類似于swipe切換 http://touchslider.com
支持多種形式的觸摸滑動(dòng) http://www.swiper.com.cn/demo/index.html
滑屏效果 https://github.com/joker-ye/main/blob/master/wap/index.html
大話主席pc移動(dòng)圖片輪換 http://www.superslide2.com
滑屏效果 https://github.com/hahnzhu/parallax.js
基于zepto的fullpage https://github.com/yanhaijing/zepto.fullpage
[WebApp]定寬網(wǎng)頁(yè)設(shè)計(jì)下,固定寬度布局開發(fā)WebApp并實(shí)現(xiàn)多終端下WebApp布局自適應(yīng)
http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html
判斷微信客戶端的那些坑 http://loo2k.com/blog/detecting-wechat-client
可以通過javascript直接調(diào)用原生分享的工具 https://github.com/JefferyWang/nativeShare.js
JiaThis 分享到微信代碼 http://www.jiathis.com/help/html/weixin-share-code
聊聊移動(dòng)端跨平臺(tái)開發(fā)的各種技術(shù) http://fex.baidu.com/blog/2015/05/cross-mobile
前端自動(dòng)化測(cè)試 http://www.zhihu.com/question/29922082
多種輪換圖片 http://ajccom.github.io/niceslider
滾動(dòng)條組件 http://ajccom.github.io/nicescroller
滑動(dòng)側(cè)邊欄 https://mango.github.io/slideout
大氣實(shí)用jQuery手機(jī)移動(dòng)端日歷日期選擇插件 http://www.frankdemo.cn/index.php?c=content&a=show&id=115
jQuery Mobile 移動(dòng)開發(fā)中的日期插件Mobiscroll https://mobiscroll.com
fastclick https://github.com/ftlabs/fastclick
no-click-delay https://github.com/mmastrac/jquery-noclickdelay
文件上傳
地址
百度上傳組件 http://fex.baidu.com/webuploader
上傳 https://blueimp.github.io/jQuery-File-Upload
flash 頭像上傳 http://www.hdfu.net
圖片上傳預(yù)覽 http://www.dropzonejs.com
圖片裁剪 http://elemefe.github.io/image-cropper
圖片裁剪-shearphoto http://www.shearphoto.com
jQuery圖片處理 http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2
模擬select
地址
糖餅 select http://aui.github.io/popupjs/doc/selectbox.html
flexselect https://github.com/rmm5t/jquery-flexselect
雙select http://loudev.com
select2 http://select2.github.io
取色插件
地址
類似 Photoshop 的界面取色插件 http://www.jq22.com/plugin/367
jquery color https://github.com/jquery/jquery-color
取色插件集合 http://www.oschina.net/project/tag/287/color-picker
farbtastic 圓環(huán)+正方形 https://github.com/mattfarina/farbtastic
城市聯(lián)動(dòng)
地址
jquery.cityselect.js基于jQuery+JSON的省市或自定義聯(lián)動(dòng)效果 http://www.ijquery.cn/?p=360
剪貼板
地址
剪貼板 https://github.com/zeroclipboard/zeroclipboard
clipboard 最新的剪切方案 http://zenorocha.github.io/clipboard.js
不是Flash的剪貼板 https://github.com/zenorocha/clipboard.js
簡(jiǎn)繁轉(zhuǎn)換
地址
簡(jiǎn)繁轉(zhuǎn)換 https://github.com/BYVoid/OpenCC
表格 Grid
地址
facebook表格 http://facebook.github.io/fixed-data-table
類似于Excel編輯表格-handsontable http://handsontable.com
bootstrap-table插件 http://bootstrap-table.wenzhixin.net.cn
datatables https://www.datatables.net
在線演示
地址
js 在線編輯 - runjs http://runjs.cn
js 在線編輯 - jsbin http://jsbin.com
js 在線編輯 - codepen http://codepen.io
js 在線編輯 - jsfiddle http://jsfiddle.net
java 在線編輯 - runjs http://ideone.com
js 在線編輯 - hcharts http://code.hcharts.cn
js 在線編輯 - jsdm http://jsdm.com
sql 在線編輯 - sqlfiddle http://sqlfiddle.com
mozilla 在線編輯器 https://thimble.mozilla.org
前端導(dǎo)航網(wǎng)站
地址
界面清爽的前端導(dǎo)航 http://uxbees.com/index.html
前端導(dǎo)航 http://whycss.com
前端網(wǎng)址導(dǎo)航 http://www.daqianduan.com/nav
前端名錄 http://sentsin.com/daohang
前端導(dǎo)航 http://123.jser.us
前端開發(fā)資源 http://www.css88.com/nav
網(wǎng)址導(dǎo)航 http://www.haourl.cn
前端開發(fā)倉(cāng)庫(kù) - 眾多效果的收集地 http://code.ciaoca.com
前端資源導(dǎo)航 https://github.com/jnoodle/f2e-collect
F2E 前端導(dǎo)航 http://f2e.im/static/pages/nav/index.html
播放器
地址
Html5 VideoPlayer https://github.com/zmmbreeze/DeadSimpleVideoPlayer
粒子動(dòng)畫
地址
Proton 煙花 http://a-jie.github.io/Proton/#example
Nodejs
地址
nodejs 篇幅比較巨大 http://liuqing.pw
Node.js 包教不包會(huì) https://github.com/alsotang/node-lessons
篇幅比較少 http://www.rainweb.cn/article/category/Nodejs
node express 入門教程 http://www.w3cfuns.com/article-5598538-1-1.html
nodejs定時(shí)任務(wù) http://my.oschina.net/u/568264/blog/193773
一個(gè)nodejs博客 http://60sky.com
【NodeJS 學(xué)習(xí)筆記04】新聞發(fā)布系統(tǒng) http://www.cnblogs.com/yexiaochai/p/3536547.html
過年7天樂,學(xué)nodejs 也快樂 http://www.cnblogs.com/qqloving/p/3541099.html
七天學(xué)會(huì)NodeJS https://github.com/nqdeng/7-days-nodejs
Nodejs學(xué)習(xí)筆記(二)--- 事件模塊 http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
nodejs入門 http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs https://github.com/zensh/jsgen
從零開始nodejs系列文章 http://blog.fens.me/series-nodejs
理解nodejs http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs事件輪詢 http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
node入門 http://www.nodebeginner.org/index-zh-cn.html
nodejs cms http://ourjs.com/detail/53e1f281c5910a9806000001
Node初學(xué)者入門,一本全面的NodeJS教程
http://ourjs.com/detail/529ca5950cb6498814000005
NodeJS的代碼調(diào)試和性能調(diào)優(yōu) http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line
優(yōu)化工具
地址
JavaScript 性能分析新工具 OneProfile http://www.html-js.com/article/3083
JavaScript 堆內(nèi)存分析新工具 OneHeap http://www.html-js.com/article/3091
在線工具
地址
google在線工具 https://developers.google.com/speed/pagespeed/insights
阿里測(cè) http://www.alibench.com
阿里-免費(fèi)測(cè)試服務(wù) http://itest.aliyun.com
阿里-F2etest多瀏覽器兼容性測(cè)試解決方案 https://github.com/alibaba/f2etest
js性能測(cè)試 http://jsperf.com
前端架構(gòu)
地址
技術(shù)架構(gòu) http://www.zhihu.com/topic/19612641
前端架構(gòu) http://saito.im/note/The-Architecture-of-F2E
如何成為前端架構(gòu)師 http://www.zhihu.com/question/24092572
關(guān)于前端架構(gòu)-張克軍 http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html
百度騰訊offer比較(騰訊游戲VS百度基礎(chǔ)架構(gòu)) http://www.zhihu.com/question/25583350
推薦作品
地址
winter代碼片段需要翻墻 https://gist.github.com/wintercn
fgm http://www.fgm.cc/learn
岑安作品集 https://github.com/hongru/hongru.github.com
當(dāng)耐特demo集合 http://kmdjs.github.io
米空格 js作品 http://www.laoshu133.com/Lab
myFocus http://koen301.github.io
SeaJS組件庫(kù) http://panxuepeng.github.io/seajslib
顏海鏡作品 http://yanhaijing.com/myProject
腳兒網(wǎng)作品 http://jo2.org/category/myworks
javascript個(gè)人作品 http://www.cnitblog.com/yemoo/category/3107.html
妙味的雷東升游戲作品 http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790
javascript作品集 http://bbs.csdn.net/topics/380227212
云五筆,灰度產(chǎn)生生成工具 https://github.com/TooBug/works
項(xiàng)目主頁(yè) http://koen301.github.io
個(gè)性的作品主頁(yè) http://zaole.net
播放器 http://static.tingall.com/v2/player
ucren js demos 集 http://ucren.com/blog/demos
智能社 http://www.zhinengshe.com/works_list.html
實(shí)例陳列架 http://demos.shizuwu.cn
zoye demo http://zoye.sinaapp.com/demo
王員外 http://lab.yuanwai.wang
平凡 http://pingfan1990.sinaapp.com
jyg 游戲案例 http://www.lovewebgames.com
很多jquery插件 http://www.helloweba.com/list.html
不羈蟲 - soJs 作品系列 http://www.bujichong.com/sojs/api/index.html
frozenui http://frozenui.github.io/case.html
黑白棋 http://js-game.github.io/othello
fromone http://yansm.github.io/fromone/index.html
國(guó)外大牛精品
地址
pazguille http://pazguille.me
簡(jiǎn)歷模板
地址
不錯(cuò)的個(gè)人簡(jiǎn)歷 http://learnshare.github.io/about/index.html
簡(jiǎn)歷 http://hcy2367.github.io/resume
張倫 http://ncuey.sinaapp.com/CrispElite/
簡(jiǎn)歷 https://github.com/hacke2/ResumeSample
翁天信 http://blog.dandyweng.com/2013/07/how-my-website-was-created
動(dòng)畫方式的簡(jiǎn)歷 http://www.webhek.com/misc/interactive-resume
組件豐富簡(jiǎn)歷 http://www.linqing07.com/resume.html
簡(jiǎn)歷池 http://www.mojianli.com/resume/view
haorooms博客 http://www.haorooms.com/about
Justin Young http://cv.youngdze.com
面試題
地址
那幾個(gè)月在找工作(百度,網(wǎng)易游戲) http://www.nowcoder.com/discuss/3196
2014最新面試題 http://www.html-js.com/article/1743
阿里前端面試題 http://www.w3cfuns.com/thread-5598563-2-1.html
2016校招內(nèi)推 -- 阿里巴巴前端 -- 三面面試經(jīng)歷 http://www.cnblogs.com/imwtr/p/4685546.html
騰訊面試題 http://www.w3cfuns.com/article-5599657-1-1.html
年后跳槽那點(diǎn)事:樂視+金山+360面試之行 http://www.cnblogs.com/lvdabao/p/3660707.html
阿里前端面試題上線 http://fatesinger.com/2722.html
拉勾網(wǎng)js面試題 http://www.cnblogs.com/52cik/p/js-question-lg.html
前端面試 http://www.cnblogs.com/allenxing/p/3724382.html
Web開發(fā)筆試面試題 大全 http://mianshiti.diandian.com
前端開發(fā)面試題 http://segmentfault.com/a/1190000000465431
2014最新前端面試題 https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
百度面試 https://github.com/fex-team/interview-questions
面試題 http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177
前端工作面試問題 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese
前端開發(fā)面試題 http://segmentfault.com/a/1190000000465431
5個(gè)經(jīng)典的前端面試問題http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98
最全前端面試問題及答案總結(jié)http://segmentfault.com/a/1190000002562454
如何面試一名前端開發(fā)工程師?http://www.html-js.com/article/Large-search-front-team-column%202961
史上最全 前端開發(fā)面試問題及答案整理https://github.com/hawx1993/Front-end-Interview-questions
前端實(shí)習(xí)生面試總結(jié) http://www.cnblogs.com/xiaoruo/p/4665163.html
史上最全 前端開發(fā)面試問題及答案整理 https://github.com/hawx1993/Front-end-Interview-questions
BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題:JavaScript篇 http://blog.jobbole.com/78738
前端開發(fā)面試題大收集 https://github.com/paddingme/Front-end-Web-Development-Interview-Question
收集的前端面試題和答案 https://github.com/qiu-deqing/FE-interview
如何面試前端工程師 http://www.zhihu.com/question/19568008
前端開發(fā)面試題https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
牛客網(wǎng)-筆試面經(jīng) http://www.nowcoder.com/discuss?type=2
iconfont
地址
中文字體 http://www.zhihu.com/question/21253343
淘寶字庫(kù) http://iconfont.cn
字體 http://mux.alimama.com/fonts
制作教程 http://iconfont.cn/help/platform.html
zhangxinxu-icommon http://www.zhangxinxu.com/wordpress/?s=icomoon
icommon https://icomoon.io/app
用字體在網(wǎng)頁(yè)中畫ICON圖標(biāo)(推薦教程 http://imooc.com/learn/243
字體壓縮工具 http://font-spider.org
前端開發(fā)工具
地址
IntelliJ IDEA 簡(jiǎn)體中文專題教程 https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm http://t.cn/8kZZ1Uy
SublimeText https://github.com/jikeytang/sublime-text
Atom https://atom.io
visual studio code https://code.visualstudio.com
Fiddler
地址
Fiddler調(diào)試使用知多少(一)深入研究 http://www.cnblogs.com/tugenhua0707/p/4623317.html
微信fiddle http://www.cnblogs.com/strick/p/4570006.html
微信fiddle http://gaoboy.com/article/26.html
Chrome
地址
Google Chrome 官方 https://developer.chrome.com/devtools
Chrome - 基礎(chǔ) http://www.cnblogs.com/constantince/p/4565261.html
Chrome - 進(jìn)階 http://www.cnblogs.com/constantince/p/4579121.html
Chrome - 性能 http://www.cnblogs.com/constantince/p/4585983.html
Chrome - 性能進(jìn)階 http://www.cnblogs.com/constantince/p/4607497.html
Chrome - 移動(dòng) http://www.cnblogs.com/constantince/p/4624241.html
Chrome - 使用技巧 http://www.cnblogs.com/liyunhua/p/4544738.html
Chrome - Console控制臺(tái)不完全指南 http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
Chrome - Workspace使瀏覽器變成IDE http://c7sky.com/chrome-devtools-workspace.html
network面板 http://www.html-js.com/article/Nothing-blind%202975
chrome開發(fā)工具快捷鍵 http://anti-code.com/devtools-cheatsheet
chrome調(diào)試工具常用功能整理 http://www.html-js.com/article/2327
Chrome 開發(fā)工具 Workspace 使用
http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace
Chrome神器Vimium快捷鍵學(xué)習(xí)記錄
http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html
sass調(diào)試-w3cplus http://www.w3cplus.com/sassguide/debug.html
如何更專業(yè)的使用Chrome開發(fā)者工具-w3cplus
http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html
chrome調(diào)試canvas http://sentsin.com/web/253.html
chrome profiles1 https://developer.chrome.com/devtools/index
chrome profiles2 http://h5dev.uc.cn/article-25-1.html
chrome profiles3 http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles
chrome移動(dòng)版調(diào)試 https://developer.chrome.com/devtools/docs/mobile-emulation
chrome調(diào)試 http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool
chrome的調(diào)試 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html
chrome console 命令詳解 https://developer.chrome.com/devtools/docs/commandline-api
查看事件綁定1 http://www.cnblogs.com/leonkao/p/3809655.html
查看事件綁定2 http://www.cnblogs.com/xiaoyao2011/p/3447421.html
神器——Chrome開發(fā)者工具 http://segmentfault.com/a/1190000000683599
奇趣百科性能優(yōu)化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹
https://xinranliu.me/2015-05-22-qiqu-performance
chrome 開發(fā)者工具的 15 個(gè)小技巧 http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html
Chrome開發(fā)者工具不完全指南 http://1ke.co/course/361
Chrome 開發(fā)者工具使用技巧 http://segmentfault.com/a/1190000003882567
Firebug
地址
firebug視頻教程 http://www.imooc.com/learn/137
firefox 模擬器 https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE
console.log 命令詳解 http://www.cnblogs.com/ctriphire/p/4116207.html
Firebug入門指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html
Firebug控制臺(tái)詳解 http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
移動(dòng),微信調(diào)試
地址
瀏覽器端調(diào)試安卓 https://openstf.github.io
移動(dòng)端前端開發(fā)調(diào)試http://yujiangshui.com/multidevice-frontend-debug
使用 Chrome 遠(yuǎn)程調(diào)試 Android 設(shè)備 https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md
mac移動(dòng)端調(diào)試 http://plus.uc.cn/document/webapp/doc5.html
mac移動(dòng)端調(diào)試 http://www.mihtool.com
無(wú)線調(diào)試攻略 http://thx.github.io/mobile/debugging-in-mobile
無(wú)線調(diào)試攻略 http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile
屌爆了,完美調(diào)試 微信webview(x5 http://www.jianshu.com/p/ccf124f1f74b
微信調(diào)試的那些事http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B
遠(yuǎn)程console http://jsconsole.com
微信調(diào)試工具 http://blog.qqbrowser.cc
各種真機(jī)遠(yuǎn)程調(diào)試方法匯總 https://github.com/jieyou/remote_inspect_web_on_real_device
iOS Simulator
地址
Simulator https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Xcode中的iOS模擬器(iOS Simulator的介紹和使用心得
http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary
img
地址
loading img http://preloaders.net/en/circular
智圖-圖片優(yōu)化平臺(tái) http://zhitu.isux.us
在線png優(yōu)化 https://tinypng.com
生成二維碼
地址
生成二維碼 http://cli.im
瀏覽器同步
地址
puer https://github.com/leeluolee/puer
liveReload http://livereload.com
f5 http://getf5.com
File Watchers http://geek100.com/2608
在線PPT制作
地址
nodePPT http://js8.in/2013/11/16/%E6%8E%A8%E8%8D%90nodeppt%EF%BC%9A%E4%BD%BF%E7%94%A8markdown%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%86%99%E7%BD%91%E9%A1%B5ppt
PPT https://github.com/ksky521/nodePPT
reveal https://github.com/hakimel/reveal.js
slippy https://github.com/Seldaek/slippy
常用CDN
地址
新浪CDN http://lib.sinaapp.com
百度靜態(tài)資源公共庫(kù) http://cdn.code.baidu.com
360網(wǎng)站衛(wèi)士常用前端公共庫(kù)CDN服務(wù) http://libs.useso.com
Bootstrap中文網(wǎng)開源項(xiàng)目免費(fèi) CDN 服務(wù) http://www.bootcdn.cn
開放靜態(tài)文件 CDN - 七牛 http://staticfile.org
CDN加速 - jq22 http://www.jq22.com/cdn
jQuery CDN http://code.jquery.com
Google jQuery CDN http://www.google-jquery-cdn.com
微軟CDN http://www.asp.net/ajax/cdn
Git
地址
git-scm http://git-scm.com
廖雪峰-Git教程
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
git-for-windows https://git-for-windows.github.io
GitHub 添加 SSH keys http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github
gogithub http://www.worldhello.net/gotgithub/index.html
git常規(guī)命令練習(xí) http://pcottle.github.io/learnGitBranching
git的資料整理 https://github.com/xirong/my-git
我所記錄的git命令(非常實(shí)用)http://www.cnblogs.com/fanfan259/p/4810517.html
企業(yè)開發(fā)git工作流模式探索部分休整
https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md
GitHub 漫游指南 https://github.com/phodal/github-roam
GitHub秘籍 https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md
使用git和github進(jìn)行協(xié)同開發(fā)流程 http://livoras.com/post/28
動(dòng)畫方式練習(xí)git http://onlywei.github.io/explain-git-with-d3
優(yōu)秀JavaScript項(xiàng)目
地址
Angular和Webpack種子文件 https://github.com/AngularClass/angular2-webpack-starter
Fis3面向前端的工程構(gòu)建系統(tǒng) https://github.com/fex-team/fis3
Fis3 DEMO https://github.com/fex-team/fis3-demo
前端JQuery系列:源碼剖析 https://github.com/JsAaron/jQuery
avalon框架 https://github.com/RubyLouvre/avalon
Microsoft ChakraCore 微軟的Chakra引擎 https://github.com/Microsoft/ChakraCore
Quintus HTML游戲引擎 https://github.com/cykod/Quintus
一個(gè)用node.js搭建的有趣博客 https://github.com/STRML/strml.net
Web前端助手--FeHelper(Chrome擴(kuò)展) https://github.com/zxlie/FeHelper
百度前端技術(shù)學(xué)院 https://github.com/baidu-ife/ife
Cheerio(node.js中的jQuery) https://github.com/cheeriojs/cheerio
nodejs的一個(gè)聊天軟件 類似微信 https://github.com/BryanYang/freechat
使用html5和node.js構(gòu)建的網(wǎng)易云音樂 https://github.com/stkevintan/Cube
babel ES6轉(zhuǎn)換為ES5 https://github.com/babel/babel
一個(gè)JS富文本編輯器 https://github.com/fex-team/ueditor
一個(gè)JS腦圖可視化工具 https://github.com/fex-team/kityminder-core
一個(gè)JS寫的Flappy Bird Game https://github.com/ellisonleao/clumsy-bird
一個(gè)JS寫的GBA模擬器 https://github.com/taisel/IodineGBA
SegmentFault寫的Markdown解析器 https://github.com/SegmentFault/HyperDown.js
基于node.js的Ghost博客 https://github.com/TryGhost/Ghost
學(xué)習(xí)react的demos https://github.com/ruanyf/react-demos
CSS
地址
CSS 語(yǔ)法參考 http://tympanus.net/codrops/css_reference
CSS3動(dòng)畫手冊(cè) http://isux.tencent.com/css3/index.html
騰訊css3動(dòng)畫制作工具 http://isux.tencent.com/css3/tools.html
志爺css小工具集合 http://linxz.github.io/tianyizone
css3 js 移動(dòng)大雜燴
http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs 觸摸庫(kù) http://bouncejs.com
css3 按鈕動(dòng)畫 http://fian.my.id/Waves
animate.css http://daneden.github.io/animate.css
全局CSS的終結(jié)(狗帶 [譯] http://www.alloyteam.com/2015/10/8536
常規(guī)優(yōu)化
地址
Javascript高性能動(dòng)畫與頁(yè)面渲染 http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering
移動(dòng)H5前端性能優(yōu)化指南 http://isux.tencent.com/h5-performance.html
5173首頁(yè)前端性能優(yōu)化實(shí)踐 http://ued.5173.com/?p=1731
給網(wǎng)頁(yè)設(shè)計(jì)師和前端開發(fā)者看的前端性能優(yōu)化http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers
復(fù)雜應(yīng)用的 CSS 性能分析和優(yōu)化建議http://www.orzpoint.com/profiling-css-and-optimization-notes
張?chǎng)涡瘛岸诵阅躧ttp://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD
前端性能監(jiān)控總結(jié)http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html
網(wǎng)站性能優(yōu)化之CSS無(wú)圖片技術(shù)http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF
web前端性能優(yōu)化進(jìn)階路http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html
前端技術(shù):網(wǎng)站性能優(yōu)化之CSS無(wú)圖片技術(shù) http://my.eoe.cn/tuwandou/archive/4544.html
瀏覽器的加載與頁(yè)面性能優(yōu)化 http://www.baiduux.com/blog/2011/02/15/browser-loading
頁(yè)面加載中的圖片性能優(yōu)化 http://www.w3ctech.com/p/1503
Hey——前端性能http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD
html優(yōu)化 http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2
99css——性能 http://www.99css.com/tag/%e6%80%a7%e8%83%bd
Yslow——性能優(yōu)化 http://www.yslow.net/category.php?cid=20
YSLOW中文介紹 http://www.cnblogs.com/yslow
轉(zhuǎn)一篇Yahoo關(guān)于網(wǎng)站性能優(yōu)化的文章,兼談本站要做的優(yōu)化 http://www.360ito.com/article/40.html
Yahoo!團(tuán)隊(duì)實(shí)踐分享:網(wǎng)站性能http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml
網(wǎng)站性能優(yōu)化指南:什么使我們的網(wǎng)站變慢?http://blog.jiasule.com/i/153
網(wǎng)站性能優(yōu)化實(shí)踐,減少加載時(shí)間,提高用戶體驗(yàn)http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html
淺談網(wǎng)站性能優(yōu)化 前端篇http://www.umtry.com/archives/747.html
前端重構(gòu)實(shí)踐之如何對(duì)網(wǎng)站性能優(yōu)化?http://www.adinnet.cn/blog/designview/2012-7-12/678.html
前端性能優(yōu)化:使用媒體查詢加載指定大小的背景圖片http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9
網(wǎng)站性能系列博文http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html
加載,不只是少一點(diǎn)點(diǎn)
http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml
前端性能的測(cè)試與優(yōu)化 http://mzhou.me/article/95310
分享網(wǎng)頁(yè)加載速度優(yōu)化的一些技巧?
http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading
頁(yè)面加載中的圖片性能優(yōu)化 http://www.f2es.com/images-bytes-opt
web前端優(yōu)化(基于Yslow http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html
網(wǎng)站性能優(yōu)化工具大全 https://www.qianduan.net/website-performance-optimization-tool.html
【高性能前端1】高性能HTML http://www.alloyteam.com/2012/10/high-performance-html
【高性能前端2】高性能CSS http://www.alloyteam.com/2012/10/high-performance-css
由12306談?wù)劸W(wǎng)站前端性能和后端性能優(yōu)化 http://coolshell.cn/articles/6470.html
AlloyTeam——前端優(yōu)化http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96
毫秒必爭(zhēng),前端網(wǎng)頁(yè)性能最佳實(shí)踐 http://www.cnblogs.com/developersupport/p/3248695.html
網(wǎng)站性能工具Yslow的使用方法 http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html
前端工程與性能優(yōu)化(上):靜態(tài)資源版本更新與緩存
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1
前端工程與性能優(yōu)化(下):靜態(tài)資源管理與模板框架
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2
HTTPS連接的前幾毫秒發(fā)生了什么 http://blog.jobbole.com/48369
Yslow http://uicss.cn/yslow/#more-12319
Essential Web Performance Metrics — A Primer, Part 1
http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1
Essential Web Performance Metrics — Part 2 http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2
YUISlide,針對(duì)移動(dòng)設(shè)備的動(dòng)畫性能優(yōu)化 http://jayli.github.io/blog/data/2011/12/23/yuislide.html
Improving Site Performance http://joelglovier.com/improving-site-performance
讓網(wǎng)站提速的最佳前端實(shí)踐 http://segmentfault.com/a/1190000000367899
Why Website Speed is Important http://sixrevisions.com/web-development/why-website-speed-is-important
Need for Speed – How to Improve your Website Performance https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance
阿里無(wú)線前端性能優(yōu)化指南 (Pt.1 加載期優(yōu)化 https://github.com/amfe/article/issues/1
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。