2015-7 · JS前端開發群月報

# 7月份前端資源分享 ##1. Javascript - [calendar1](https://github.com/amsul/pickadate.js) - [calendar2](https://github.com/Baremetrics/calendar) - [深入淺出ES6](http://www.infoq.com/cn/es6-in-depth/) - [了不起的 JavaScript](https://github.com/wwsun/awesome-javascript) - [怎樣減輕程序中 if 語句的依賴？](http://www.zhihu.com/question/20161410) - [impress.js 使用總結](http://www.html-js.com/article/Tools-impressjs-frontend-Usage-Summary%203045) - [《JavaScript語言精粹》xmind知識點梳理](http://pan.baidu.com/s/1kTpbLLP) - [《JavaScript模式》xmind知識點梳理](http://pan.baidu.com/s/1hqtlEYg) - [數學理論在前端開發中的實踐](http://www.imooc.com/course/video/mid/8385) - [一個源生js寫的ajax](http://www.cnblogs.com/rainbowcode/p/4629314.html) - [JavaScript的語法解析與抽象語法樹](http://wwsun.me/posts/javascript-ast-tutorial.html) - [ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/) - [2014 年末有哪些比較火的 Web 開發技術](http://www.zhihu.com/question/26644904) - [怎么判定web前端架構師的能力高低](http://www.zhihu.com/question/26187669) - [FEX 技術周刊](http://www.liuhaihua.cn/archives/103201.html) - [HTML5街頭霸王游戲(開放源碼)](http://www.alloyteam.com/2012/05/html5-streetfighter-demo/) - [視覺設計師是怎樣讓前端工程師 100% 實現設計效果的](http://www.zhihu.com/question/27743708) - [自己總結的web前端知識體系大全【歡迎補充】](http://www.cnblogs.com/wangfupeng1988/p/4649709.html) - [We have a problem with promises](http://div.io/topic/1095) - [七牛前端測試實踐](http://weibo.com/p/1001603864951990185052) - [FEX 技術周刊-2015/07/13](http://fex.baidu.com/blog/2015/07/fex-weekly/) - [有哪些好用的前端模板引擎](http://www.zhihu.com/question/32524504) - [對于“前端”開發我們需要什么？](http://lcepy.github.io/2015/07/20/%E5%AF%B9%E4%BA%8E%E2%80%9C%E5%89%8D%E7%AB%AF%E2%80%9D%E5%BC%80%E5%8F%91%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E4%BB%80%E4%B9%88%EF%BC%9F/) - [圖解Javascript原型鏈](http://blog.rainy.im/2015/07/20/prototype-chain-in-js/) - [簡單的jQuery頁面滾動導航切換代碼](http://www.17sucai.com/pins/10844.html) - [Teambition · 暑期實習生計劃](https://github.com/Brooooooklyn/summer-page) - [我理解的阿里無線前端“架構”（半雞湯，少干貨）](https://github.com/amfe/article/issues/3) - [ Nicholas C. Zakas驗證插件](http://eslint.org/) - []() ##2. 移動Javascript開發 - [無縫切換](http://www.swipejs.com/) - [滑屏效果](http://www.idangero.us/swiper) - [全屏fullpage](https://github.com/peunzhang/fullpage) - [單個圖片切換](https://github.com/qiqiboy/touchslider) - [單個全屏切換](https://github.com/peunzhang/slip.js) - [百度的切換庫](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) - [單個全屏切換](https://github.com/peunzhang/iSlider) - [滑屏效果](https://github.com/saw/touch-interfaces) - [旋轉拖動設置](http://baijs.com/tinycircleslider/) - [類似于swipe切換](http://touchslider.com/) - [支持多種形式的觸摸滑動](http://www.swiper.com.cn/demo/index.html) - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) - [大話主席pc移動圖片輪換](http://www.superslide2.com/) - [滑屏效果](https://github.com/hahnzhu/parallax.js) - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) - [微信調試的那些事](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/) - [[WebApp]定寬網頁設計下，固定寬度布局開發WebApp并實現多終端下WebApp布局自適應](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直接調用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) - [JiaThis 分享到微信代碼](http://www.jiathis.com/help/html/weixin-share-code) - [聊聊移動端跨平臺開發的各種技術](http://fex.baidu.com/blog/2015/05/cross-mobile/) - [前端自動化測試](http://www.zhihu.com/question/29922082) - [移動端高清、多屏適配方案](http://div.io/topic/1092) - []() ##3. Html5 - [一起用HTML5 canvas做一個簡單又騷氣的粒子引擎](http://www.cnblogs.com/jation/p/4627155.html) - []() ##4. CSS - [CSS3動畫手冊](http://isux.tencent.com/css3/index.html) - [多屏復雜動畫CSS技巧三則](http://isux.tencent.com/css-animation-skills.html) - [CSS3 timing-function: steps() 詳解](http://www.tuicool.com/articles/neqMVr) - [在你的日常開發中遇到過哪些常用布局是無法用純 CSS 實現的？](http://www.zhihu.com/question/31863128) - [林小志-進階css從零開始突破](http://linxz.github.io/blog/%E6%97%A0%E8%81%8A%E7%9A%84%E4%BA%A7%E7%89%A9/2015/07/book-begin-css.html) - [css3 attr 簡單介紹和實例](http://segmentfault.com/a/1190000003032566) - [FLEXBOX](http://www.w3cplus.com/blog/tags/157.html) - []() ##5. Angular - [AngularJS常用插件與指令收集](http://chensd.com/2015-06/AngularJS-popular-Plugins-and-Directive.html) - [vue，angular，avalon這三種MVVM框架之間有什么優缺點？](http://www.zhihu.com/question/27791075) - []() ##6. React, Vue - [React使用總結](http://www.html-js.com/article/Reactjs%203046) - [Vue.js 常見問題 FAQ](http://www.html-js.com/article/Vuejs-Chinese-entry-Vuejs-FAQ-common-problems) - [如何評價 React Native](http://www.zhihu.com/question/27852694) - [ReactEurope Conf 參會感想](http://www.w3ctech.com/topic/1429) - [Webpack 和 React 小書](http://www.html-js.com/article/Fakefish%203053) - [如何使用 Webpack 模組整合工具](http://rhadow.github.io/2015/03/23/webpackIntro/) - [使用 Webpack 建立 React 專案開發環境](http://rhadow.github.io/2015/04/02/webpack-workflow/) - [這么多人吹捧ReactJS，但是真的好嗎](http://www.zhihu.com/question/33631170) - []() ##7. jQuery - [Image Map Resize](https://github.com/davidjbradshaw/image-map-resizer) - [jQuery源碼剖析](http://www.w3ctech.com/topic/256#inArray) - [jQuery源碼模塊解構](http://davestewart.io/resources/javascript/deconstructed/jquery/) - [jquery css動畫擴展](http://ricostacruz.com/jquery.transit) - [可放大的幻燈片效果](http://codecloud.net/zoom-slider-4893.html) - [jQuery之家](http://www.htmleaf.com/) - [一個收費的圖片輪換](http://www.skyplugins.com/sky-jquery-touch-carousel/default_skin.html) - [選擇商品購物車飛入](http://www.helloweba.com/demo/fly/#) ##8. 看書學習 - [學習新技能的37個最佳網站](http://codecloud.net/the-37-best-websites-to-learn-something-new-4772.html) - [百度前端學院](https://github.com/baidu-ife/ife) - []() ##9. Git - [APDPlat是Application Product Development Platform的縮寫，即應用級產品開發平臺](https://github.com/ysc/APDPlat) - [如何在github上fork一個項目來貢獻代碼以及同步原作者的修改](http://www.cnblogs.com/rubylouvre/archive/2013/01/24/2874694.html)(此文章中有圖片現在的github網址有差異，操作上也有部分差需要注意，其怎樣與原倉儲作者保持同步操作有變化注意頁面下面的文章描述中有鏈接交換倉儲位置) - [如何使用github在線編輯及其語法介紹](https://github.com/LearnShare/Learning-Markdown/blob/master/README.md) - [你不可不知的10個Github功能](http://www.php100.com/html/it/focus/2014/1117/7824.html) - []() ##10. 創業 | 職業｜管理 - [為什么有些行業精英不去選擇創業](http://www.zhihu.com/question/24329639) - [在一家小公司只有我一個前端開發，該如何自我提升](http://www.zhihu.com/question/32099504) - [什么樣的前端技術 leader 是稱職的](http://www.zhihu.com/question/31462342) - [在什么情況下，公司創始人會被踢出董事局](http://www.zhihu.com/question/32291066) - [怎樣做才可以帶出一支優秀的團隊](http://www.zhihu.com/question/19602067) ##11. IDE，編輯器，調試等工具類 - [Fiddler調式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html) - [chrome瀏覽器開發者工具使用入門提高](http://www.cnblogs.com/constantince/p/4565261.html) - []() ##12. 前端及架構工程化等 - [百度FIS3發布了](http://fex-team.github.io/fis3/) - [Muffin=FIS+Browserify](http://fex.baidu.com/blog/2015/01/fis-muffin/) - [SeaJS 和 Browserify 的模塊化方案有哪些區別](http://www.zhihu.com/question/20941305) - [es6 + babel + webpack + angular1.x](http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/) - [gulp-es6-angular-demo](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-20/gulp-es6-angular) - [Gulp不完全入門教程](http://www.ido321.com/1622.html) - [分享D瓜哥最近攢的資料（架構方面）](http://www.diguage.com/archives/41.html) - [變態的靜態資源緩存與更新](http://div.io/topic/745) - []() ##13. sass - []() ##14. 工作 | 協同 - []() ##15. Nodejs - [fibjs 對比 nodejs 有哪些優點和缺點](http://www.zhihu.com/question/26472351) - [youtube上不錯的node入門教程](https://www.youtube.com/watch?v=_D2w0voFlEk) ##16. UI - [一些有用的 Bootstrap 主題和插件](https://github.com/lvwzhen/BootstrapHub) - []() ##17. 性能優化教程 - [5173首頁前端性能優化實踐](http://ued.5173.com/?p=1731) - [給網頁設計師和前端開發者看的前端性能優化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) - [復雜應用的 CSS 性能分析和優化建議](http://www.orzpoint.com/profiling-css-and-optimization-notes/) - [張鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) - [前端性能監控總結](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) - [網站性能優化之CSS無圖片技術](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前端性能優化進階路](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) - [前端技術：網站性能優化之CSS無圖片技術](http://my.eoe.cn/tuwandou/archive/4544.html) - [瀏覽器的加載與頁面性能優化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) - [頁面加載中的圖片性能優化](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優化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD) - [Yslow——性能優化](http://www.yslow.net/category.php?cid=20) - [YSLOW中文介紹](http://www.cnblogs.com/yslow/) - [轉一篇Yahoo關于網站性能優化的文章，兼談本站要做的優化](http://www.360ito.com/article/40.html) - [Yahoo!團隊實踐分享：網站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) - [網站性能優化指南：什么使我們的網站變慢？](http://blog.jiasule.com/i/153) - [網站性能優化實踐，減少加載時間，提高用戶體驗](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) - [淺談網站性能優化前端篇](http://www.umtry.com/archives/747.html) - [前端重構實踐之如何對網站性能優化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) - [前端性能優化：使用媒體查詢加載指定大小的背景圖片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) - [網站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) - [加載，不只是少一點點](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) - [前端性能的測試與優化](http://mzhou.me/article/95310/) - [分享網頁加載速度優化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) - [頁面加載中的圖片性能優化](http://www.f2es.com/images-bytes-opt/) - [web前端優化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) - [網站性能優化工具大全](http://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談談網站前端性能和后端性能優化](http://coolshell.cn/articles/6470.html) - [AlloyTeam——前端優化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) - [毫秒必爭，前端網頁性能最佳實踐](http://www.cnblogs.com/developersupport/p/3248695.html) - [網站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) - [前端工程與性能優化（上）：靜態資源版本更新與緩存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) - [前端工程與性能優化（下）：靜態資源管理與模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) - [HTTPS連接的前幾毫秒發生了什么](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,針對移動設備的動畫性能優化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) - [讓網站提速的最佳前端實踐](http://blog.segmentfault.com/laopopo/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](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) ###18. 面試相關 - [2015年各大公司的面試題提前透漏（公鑰）幾道](div.io/topic/1166) - []() ###19. mac ios - [iOS提高效率的方法和工具](http://lcepy.github.io/2015/07/14/iOS%E6%8F%90%E9%AB%98%E6%95%88%E7%8E%87%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%B7%A5%E5%85%B7/) ###20.如何查看各個瀏覽器的 user agent stylesheet ？ Firefox (Gecko):[http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css](http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css) Chrome/Safari (WebKit):[http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css](http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) Internet Explorer (Trident), all versions: [http://www.iecss.com/](http://www.iecss.com/) ###21. 英語 - [歐路詞典](http://www.eudic.net/eudic/windows.aspx) - []() ###21. 其它 - [http協議分析工具](http://www.cnblogs.com/klguang/p/4624333.html) - [Android 常用開發工具以及Mac常用軟件](http://codingfish.top/2015/07/07/android-developer-tools-list/) - [參加 ShenJS (jsconf China 2015) 是個什么樣的體驗](http://www.zhihu.com/question/32101888) - [一個用 laravel 5 開發的博客系統](https://github.com/yccphp/laravel-5-blog) - [PHP 7.0 升級備注](https://linux.cn/article-5840-1.html) - []()