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) - []()