## 奇舞推荐 * ### [[翻译]深入浅出ES6：Arrow Functions](http://frontend-zigu.com/Arrow-Function/) ES6 In Depth最新文章！文章很详细地介绍了Arrow function的功能，以及由来，跟大多数文章不同，它从JavaScript的发展史来提出，令人印象深刻，很少再有类似的文章，介绍ES6中的Arrow特性比这个更详细的了。ES6 In Depth系列请戳--->[深入浅出ES6](http://www.infoq.com/cn/es6-in-depth/) ES6 Arrow JavaScript 奇舞推荐詹德超推荐 * ### [[翻译] 使用Promise的正确姿势](http://fex.baidu.com/blog/2015/07/we-have-a-problem-with-promises/) 用Javascript的小伙伴们，是时候承认了，关于 Promise 我们一直存在着问题。并非说 Promise 本身有问题，而是你真的用对了吗？ JavaScript Promise 奇舞推荐娇龙推荐 * ### [JavaScript中的this陷阱的最全收集--没有之一](http://segmentfault.com/a/1190000002640298#articleHeader4) 相信做过JavaScript开发的人都遇到过不少this的陷阱，我自己本身也遇到过不少坑，但是如果非要给出一个系统的总结的话，还没有足够的底蕴。非常幸运的是，今天早上起来看《Hacker News》的时候，恰巧看到了一篇有关于JavaScript this的解析：all this。 JavaScript this function 奇舞推荐mx推荐 ## 新技术 * ### [position: sticky 实现 iOS 6+ 下的粘性布局](http://hao.jser.com/archive/7970/) position:sticky是属于W3C Editor’s Draft中的一个属性，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。 粘性布局 CSS 新技术王峰推荐 * ### [Material Design Lite: Google新出的 UI 框架](http://www.getmdl.io/) Google自2014年发布 [Material Design](https://www.google.com/design/spec/material-design/introduction.html) 设计规范以来，得到了很多设计师追捧。现在它又针对前端开发者推出一套 UI 框架，包含了组件、布局、响应式和模版等。你可以把它看作一个高端版的Bootstrap。 框架 Material Design 新技术 * ### [原生CSS实现分页滚动](http://blog.gospodarets.com/css-scroll-snap/) 一页一页进行滚动的页面，不管是在手机上还是电脑上，大家肯定都已经见过很多啦。你相信这种效果可以用一行CSS实现吗？使用[最新的技术](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)，还真是可以。 CSS 新技术 ## 前端工程 * ### [前端组件化开发实践](http://tech.meituan.com/frontend-component-practice.html) 随着前端开发复杂度的日益提升，组件化开发应运而生。目前前端组件化的方案也有很多种，这篇文章介绍了美团前端团队在这方面做的三次尝试，非常值得大家参考。 JavaScript 前端工程 React * ### [前端自动化测试探索](http://fex.baidu.com/blog/2015/07/front-end-test/) 一个项目最终会经过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本。文章通过对界面回归测试，功能测试，性能测试和页面特征检测四方面对前端自动化测试进行了介绍。 自动化 测试 前端工程娇龙推荐 ## 其它 * ### [Angular.js 最强学习资源合集](http://blog.aijc.net/AngularLearing/) AngularJS诞生以来迅速成为了Web开发领域的新宠。本文整理了一些非常有价值的AngularJS相关教程和资源，基础、示例、视频、方案、性能、组件、源码分析，无论你的AngularJS技能修炼到了哪一级，请相信，你想要的，本文统统都会给你。 Angularjs 资源合集 * ### [读《Web与原生：我们得承认失败》有感](http://www.maxzhang.com/2015/07/%E8%AF%BB%E3%80%8AWeb%E4%B8%8E%E5%8E%9F%E7%94%9F%EF%BC%9A%E6%88%91%E4%BB%AC%E5%BE%97%E6%89%BF%E8%AE%A4%E5%A4%B1%E8%B4%A5%E3%80%8B%E6%9C%89%E6%84%9F/) 我想告诉所有的产品：WebApp根本就不是NativeApp，请不要再拿Native来与Web比较，臣妾做不到啊~~~。 移动Web开发maxzhang推荐 * ### [团队协作工具Worktile技术架构揭秘](http://www.csdn.net/article/2015-07-01/2825100) 跨平台设计，原生客户端的体验，实时消息系统，稳定服务，Worktile是如何做到这几点的？这篇文章里一一作者为大家揭秘。

## 奇舞推荐 * ### [Webpack 和 React 小书](https://fakefish.github.io/react-webpack-cookbook/) Webpack 是一个前端资源加载/打包工具，React 是一个Facebook 和Instagram 用来创建用户界面的JavaScript 库。两个都是非常有用的技术，如果同时使用他们，前端开发会更加有趣。 奇舞推荐 React Webpack * ### [从零开始构建JavaScript模块化加载器](http://wwsun.me/posts/creating-javascript-modules-loader.html) 对任何程序，都存在一个规模的问题，起初我们使用函数来组织不同的模块，但是随着应用规模的不断变大，简单的重构函数并不能顺利的解决问题。尤其对JavaScript程序而言，模块化有助于解决我们在前端开发中面临的越来越复杂的需求。 奇舞推荐 JavaScript李健春推荐 * ### [Polymer 1.0 浅尝](https://blog.coding.net/blog/polymer1-trial) Polymer，前端组件化的未来，打开本文感受下 WebComponent 的酷炫。 奇舞推荐 Polymerwebzhao推荐 ## React * ### [Angular vs. React - the tie breaker](https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker) Angular在快速开发大型Web项目上很受推崇，但仍存诸多缺陷，React正为JavaScript应用开发者提供新的开发方式。本文将对Angular和React进行对比，评析各自优劣。 Angular Reactzhouweicsu推荐 * ### [ReactEurope Conf 参会感想](https://github.com/dfguo/blog/issues/1) 这次在巴黎举办的ReactEurope Conf大会是继第一次在 Facebook 总部举办后最大的 React 活动。本文作者代表Strikingly（似乎也是国内唯一家公司）去参加之后写下一些参会感想。 React爱吃鸡蛋推荐 * ### [深入浅出 React系列](http://www.infoq.com/cn/dive-into-react) InfoQ精心策划“深入浅出React”系列文章，为读者剖析React开发的技术细节。目前该系列有3篇文章，React的设计哲学 - 简单之美，React开发神器Webpack、理解JSX和组件，深入的给大家讲解了React的知识点，值得大家学习。 React Webpackzhouweicsu推荐 ## JavaScript * ### [面向Node.js新手的7个技巧](http://dev.oupeng.com/articles/7-tips-for-a-nodejs-padawan) NodeJS新手可以瞧一瞧，看一看 nodejs tips JavaScriptAmin推荐 * ### [JavaScript ES7 中使用 async/await 解决回调函数嵌套问题](http://aisk.me/using-async-await-to-avoid-callback-hell/) 回调函数嵌套问题现在通用的解决方案是使用 Promise，另一个方案是使用 ES6 中新增的 generator，现在ES7中给出了一种更加标准的解决方案——async/await 。本文以实例讲解了这种“未来的”异步写法，值得一阅。 JavaScript 异步编程 ES7刘观宇推荐 * ### [jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released](http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/) 眨眼之间，jQuery离初次发布已经过去了将近八年，如今，jQuery 3.0与jQuery Compat 3.0也发布了Alpha版本，其中jQuery 3.0只支持IE9+，想支持IE8的话，得用jQuery Compat 3.0啦，喜欢尝新的你快来看看jQuery3.0有哪些新特性吧！ jQuery3.0 JavaScriptJK推荐 ## 其它 * ### [Fiddler工具使用](http://www.imooc.com/view/37) 本课程全面讲解了Fiddler工具的使用，包括工作原理、使用场景、操作界面、常用功能以及相关插件的使用。远人老师将教大家熟练掌握Fiddler工具，让你提高Web调试的效率与质量。 慕课网子烨推荐 * ### [程序员必读的6+1本书](http://droidyue.com/blog/2015/07/04/six-books-every-programer-must-read/) 本文讲列举六本业界牛人的著作，也是编程书籍中经典的经典，这几本书并非简单的教程书籍，而是教给你方法和思想来解决现实遇到的问题，提高编码的技艺和境界。 书籍 * ### [项目经理是大傻B吗？](http://icodeit.org/2015/07/is-project-manager-a-fool/) 你说呢？

## 奇舞推荐 * ### [函数式编程指南](http://drboolean.gitbooks.io/mostly-adequate-guide/content/) 也许继"面向对象编程"之后，"函数式编程"会成为下一个编程的主流范式。未来的程序员恐怕或多或少都必须懂一点。 奇舞推荐 JavaScript 函数式 GitBook * ### [如何克服 JavaScript 框架疲劳？](http://news.oneapm.com/overcoming-javascript-framework/) 在JavaScript 框架层出不穷的当下，不少开发者对选择框架有种种困惑。如果你也有类似的困惑，不妨读一读。 奇舞推荐 JavaScript 框架 * ### [阿里无线前端性能优化指南系列之加载期优化](https://github.com/amfe/article/issues/1) 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化。以下是我们根据实际经验总结的优化指南，希望对大家有所帮助。 第一部分仅包括数据加载期优化。 奇舞推荐 性能优化 无线前端夏之莎莫推荐 ## JavaScript * ### [JavaScript Promise迷你书（中文版）](http://liubin.github.io/promises-book/) 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心，着重向各位读者介绍JavaScript中对Promise相关技术的支持情况。几点在本书中重申的要点：1 ，then 的结果都是返回一个新创建的promise对象。2， Promises/A+ 实际上只是定义了关于 Promise#then 的规范 。3，JavaScript Promise 最初以“Futures”为名归为 DOM 规范，后来改名为“Promises”，最终纳入 JavaScript 规范。 JavaScript ecma6 script promise promise a+irideas推荐 * ### [JavaScript 模块化七日谈](http://huangxuan.me/js-module-7day) JavaScript 模块化的血泪史，从上古时期到王者归来，来看看你是不是从上古时期来 的原始人吧。 JavaScript 模块化zhouweicsu推荐 * ### [虚拟研讨会——真实世界的 JavaScript MVC 框架](http://zhuanlan.zhihu.com/FrontendMagazine/20087355) 你最喜欢哪个 JavaScript MVC 框架，已经使用了多久，以及它帮你解决了那些最基本的问题？ JavaScript MVC 框架 ## CSS * ### [解读CSS布局之-水平垂直居中](http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/) 比较系统的，全面的介绍了 CSS 布局中的水平，垂直居中 CSS 居中柏盼推荐 * ### [It's Time for Everyone to Learn About PostCSS](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/) 预处理器大家很常见Less、Sass、Stylus，后处理器PostCSS你了解吗？ CSS PostCSSzhouweicsu推荐 ## 其它 * ### [在Node.js中搭建缓存管理模块](http://www.infoq.com/cn/articles/built-cache-management-module-in-nodejs) nodejs进阶 NodeJS 缓存Amin推荐 * ### [PM2 小书](http://wohugb.gitbooks.io/pm2/content/index.html) 启动node服务你还在用forever？推荐你个好东西，用PM2试试。

## 奇舞推荐 * ### [CSS动画实用技巧](http://www.imooc.com/view/357) CSS想必大家都用过，你可知道使用CSS还可以实现一些有意思的动画效果？那么，今天就请大家跟随奇舞团 ，学习一步步实现一个CSS3 Hover特效。 奇舞推荐 CSS子烨推荐 * ### [写给前端面试者](http://www.w3cplus.com/css/write-to-front-end-developer-interview.html) 前端知名专家大漠写给前端面试者一些意见和建议，同时也得到了很多前端大牛的赞誉，也可以给前端面试者一些帮助。 奇舞推荐 职业成长许可推荐 * ### [高质量代码的快速迭代](http://engineering.quora.com/Moving-Fast-With-High-Code-Quality) Quora工程师分享的如何在快速迭代的同时保持代码的高质量。 奇舞推荐小编推荐 ## JavaScript * ### [async 函数的含义和用法](http://www.ruanyifeng.com/blog/2015/05/async.html) ES7的异步编程模式 JavaScript刘观宇推荐 * ### [正确使用forEach的姿势](http://efe.baidu.com/blog/avoid-foreach/) forEach 隐藏了迭代的意图。推荐使用更加语义化的迭代方法，例如 map、filter 和 some JavaScript小编推荐 * ### [简短版JS函数式编程指南](https://blog.oyanglul.us/javascript/functional-javascript.html) JS函数式编程的资料不少，但如果读不动全英文DrBoolean的《mostly-adequate-guide》或是Michael Fogus的《Functional JavaScript》，可以先阅读这个中文简短版的指南。虽说内容不同，但都是各自作者自己的理解，可以先读这个简短版找点感觉，想深入理解函数式编程再抽空去细读上面两本大作。 JavaScriptXiaoyuze推荐 ## CSS * ### [Web中的图标](http://www.w3cplus.com/css/web-icons.html) 介绍了Web中图标的几种方案之间的利与弊。相对而言，如果不需要考虑一些低版本用户，就当前这个互联网时代，面对众多终端，较为适合的方案还是使用SVG。 CSS SVG 图标 * ### [使用css和svn实现饼图](http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/) 忘记canvas，只需要CSS即可制作饼图 CSS ## 其它 * ### [3分钟快速上手 Win10](http://app.myzaker.com/news/article.php?&pk=55b8ee7f1bc8e08d14000005&app_id=13&sharechannel=wx) win10已经发布，这篇文章图文并茂，可以快速教会你win10 的所有核心牛逼特性，提前备好，前端产品的童鞋终于等到可以有望摆脱IE的那一天了 win10 快速 正式版 微软 发布张祥推荐 * ### [Node.js的代码风格以及开发者工作流](http://www.iteye.com/news/30792)

## 奇舞推荐 * ### [理想的应用框架](http://www.cnblogs.com/sskyy/p/4592353.html) 用事件系统去描述逻辑、流程，使得我们代码结构和逻辑，能达到一个非常理想的对应程度。这个对应程度使得代码里的调用栈信息就能表述逻辑。而这个调用栈所能产生的巨大价值，一方面在于可图形化，另一方面则在于能实现测试、监控等一系列工程领域的自动化。 奇舞推荐 JavaScript 前端框架 应用架构irideas推荐 * ### [ES7中的装饰器（Decorators）](http://zhuanlan.zhihu.com/FrontendMagazine/20139834) ES6 标准已于2015年6月17日正式发布，还没来得及看呢，ES7的特性又粗来了，本文介绍了ES7中的Decorators特性，赶紧戳。 奇舞推荐 JavaScript ES7 Decorators * ### [【译】Flux再进化：Introducing Relay and GraphQL](http://segmentfault.com/a/1190000002570887) Flux + React/ReactNative + React-Style + Relay/GraphQL ，新进的Relay/GraphQL解决的是工程问题的痛点。有没有感觉到兴奋？ 奇舞推荐 JavaScript GraphQL Relayirideas推荐 * ### [理解CSS中块级格式化上下文（BFC）](http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html) BFC是页面中盒模型布局的CSS渲染模式，这篇文章介绍了BFC的相关特性，以及如何影响元素在页面上的定位。 奇舞推荐 CSS ## 教程 * ### [CSS帧动画调试技巧](https://css-tricks.com/debugging-css-keyframe-animations/) 要写好一个 CSS 动画，不仅需要你对语法了如指掌，还需要一点点耐心去慢慢调优。本文介绍了一些好用的工具来调试 CSS 动画。 教程 CSS 动画 调试 * ### [SVG动画入门](https://css-tricks.com/guide-svg-animations-smil/) 不写CSS, 写不写JavaScript,用SVG轻轻松松搞定炫酷动画，本文通过详细的例子讲解了基本用法，非常值得大家学习。 教程 SVG 动画 SMILAtwood.cai推荐 * ### [【视频】版本控制入门 – 搬进 Github](http://www.imooc.com/view/390) 版本控制能够大大提高程序员的工作效率。本课程中，happypeter老师使用 Github 网站和图形化客户端来完成版本控制工作，提供给大家一套简单实用的流程，并配合图解方式的原理讲解，让大家以最短的时间上手 Git 和 Github. 教程 视频 慕课网子烨推荐 ## 其它 * ### [SVG 与 Canvas：如何选择](https://msdn.microsoft.com/zh-cn/library/gg193983(v=vs.85).aspx) 本文对 SVG 与 Canvas 进行简要比较，并通过大量的代码示例对比两者的优缺点。 canvas svg司机先生推荐 * ### [Git 使用规范流程](http://www.ruanyifeng.com/blog/2015/08/git-use-process.html) 团队开发中，遵循一个合理、清晰的Git使用流程，是非常重要的。文章介绍了 ThoughtBot 的Git使用规范流程，推荐你也这样使用Git 。 Git * ### [Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/) 本文简单介绍了Vue.js 和 webpack，以及把它们串联起来的 vue-loader，作者根据实践详细的介绍了三者结合使用的步骤。

## 奇舞推荐 * ### [如何成为一位卓越的前端工程师](http://jiongks.name/blog/how-to-become-a-great-front-end-engineer/) 一篇很好的写给前端人的建议文章，其实里面一些观点也适用其他人。比如：别光解决问题，想想究竟发生是什么；学会预见未来行业技术的发展趋势；阅读规范文档；阅读别人的代码；和比你聪明的人工作；造轮子；整理和记录 奇舞推荐 前端 建议 勾三股四AngelZou推荐 * ### [手机淘宝前端的图片相关工作流程梳理](http://jiongks.name/blog/our-image-workflow/) 无线前端开发最“难搞”的几件事，图片处理绝对可以排在前三。本文给大家详细介绍了手机淘宝在图片相关工作上的技术使用，超赞！配套PPT地址 --> [http://jiongks.name/slides/css-memos/](http://jiongks.name/slides/css-memos/) 奇舞推荐 图片处理 工具 流程 勾三股四zhouweicsu推荐 * ### [面向设计的半封装web组件开发](http://isux.tencent.com/half-package-web-components-for-design.html) 作者对web组件开发的理解很深入。文中结合设计的角度讨论web组件的开发，如何设计实现一款UI设计精良，同时代码轻便简洁，量身定制的高级web组件，配合模块化的管理，整个项目的品质就可以有质的提升。 奇舞推荐 半封装 组件开发李玥推荐 * ### [[幻灯片] 重拾 CSS 的乐趣（上）](https://github.com/cssmagic/blog/issues/52) CSS魔法大大在CSS前端开发者大会上海站的分享 奇舞推荐 CSSっ'Aries-X²º¹⁴推荐 ## Web标准 * ### [使用 Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) Web Worker是HTML5的一个特性，可以执行一些操作，例如触发长时间运行的脚本以处理计算密集型任务，同时却不会阻碍 UI 或其他脚本处理用户互动。这有助于解决令人讨厌的“无响应脚本”对话框。 Web标准 HTML HTML5zhouweicsu推荐 * ### [Stop pushing the web forward](http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html) 在前端轮子层出不穷的情况下，大部分人一味的追求新的技术特性、框架，被各种新的技术折磨的死去活来，但不曾想其实我们更应该注重的是用户体验。或许前端工程化也需要歇一歇，而我们也应该更多的去关注用户体验，看看用户到底需要什么。看完本篇，或许你还可以看看这两篇对这个观点的回应：[If we stand still, we go backwards](https://jakearchibald.com/2015/if-we-stand-still-we-go-backwards/)和[Fast-forwarding the Web Platform](http://ponyfoo.com/articles/fast-forwarding-the-web-platform) Web标准 技术发展Vanilla推荐 * ### [HTML：1990~1992](http://www.w3ctech.com/topic/1468) HTML是从很多方面支撑Web的语言，作为浏览器的通用语，HTML是可以渲染的。HTML获得了史无前例的成功，但你知道它是1990年才被发明的吗？而且在1993年之前还没几个人知道它。看看本文了解一下HTML的历史。 Web标准 HTML李松峰推荐 ## 其它 * ### [移动时代的前端加密 - Div.IO](http://div.io/topic/1220) 黑魔法咩哈哈哈 前端技术 JavaScript阿豆比推荐 * ### [Git 中级用户的25个提示](http://www.ituring.com.cn/article/202419) 使用Git做版本管理器的都可以看看，可以解决日常大部分疑惑。 Git 版本控制 工具zhouweicsu推荐 * ### [浏览器性能优化【翻墙】](https://developers.google.com/web/fundamentals/performance/?hl=zh-cn) 用户都希望他们访问的web应用是可交互且运行流畅的。因此，作为web开发者，你也要在这方面多花点功夫。你所做的页面，不但要能被快速加载，还要能流畅运行：页面的滚动要快速响应手指的动作，动画和交互效果更要如丝般顺滑。

## 奇舞推荐 * ### [【译】CSS 模块](http://www.w3ctech.com/topic/1479) CSS新技能，欢迎进入CSS新世界！描述了 CSS 通过 JS 编译达到模块化目的，使得 CSS 类名单一化，命名普通化，复用简单化。 奇舞推荐 CSS JavaScript React Sass Module公子推荐 * ### [【幻灯片】重拾 CSS 的乐趣（下）](https://github.com/cssmagic/blog/issues/54) 有（上）就要有（下），要么怎么看的尽兴呢~~~下集比上集更好玩，让我们继续用 CSS 来完成那些乍看起来 “不可能完成” 的任务吧！（上篇[地址](http://www.75team.com/weekly/issue122.html)） 奇舞推荐 CSSっ'Aries-X²º¹⁴推荐 * ### [【译】JavaScript 性能优化的凶手](http://www.w3ctech.com/topic/1474) 本文给出了许多避免使代码性能远低于预期的建议。 尤其是一些会导致 V8（涉及 Node.js，Opera，Chromium 等）无法优化相关函数的问题。 奇舞推荐 JavaScript 性能 优化vilicvane推荐 ## 性能优化 * ### [优化JavaScript的执行效率](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=zh-cn) 页面里的动画效果大多是通过JavaScript触发的。有些是直接修改DOM元素样式属性而产生的，有些则是由数据计算而产生的，比如搜索或排序。错误的执行时机和太长的时间消耗，是常见的导致JavaScript性能低下的原因。你需要尽量减少这两方面对你的JavaScript代码带来的执行性能的影响。 性能优化lei推荐 * ### [如何分析移动Web性能以及优化](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/pub) 如何分析移动Web性能以及优化，善用ChromeDev工具 性能优化lei推荐 * ### [【译】调试 CSS Keyframe 动画](http://www.w3ctech.com/topic/1472) 页面动画直接关系到用户体验，本文作者总结了一些有用的工具和方法。 性能优化 CSS Keyframe裕波推荐 ## 其它 * ### [【译】用SVG实现Hero Slider](http://www.w3ctech.com/topic/1477) 实战性强，效果超赞。 SVG 动画 幻灯片李松峰推荐 * ### [前端的基础修养：aria-label](http://lepture.com/zh/2015/fe-aria-label) 学习下提高前端易用性的 aria 标签，作者目前有一系列的基础修养文章 HTML柏盼推荐 * ### [Gulp 范儿——Gulp 高级技巧](http://csspod.com/advanced-tips-for-using-gulp-js/) Gulp上手很简单，但更多时候我们需要的是一些高级技巧。本文从高级、定制层面，探讨使用 Gulp及相关插件、stream 过程存在的陷阱。 工具 Gulp任祥磊推荐 * ### [前端代码异常日志收集与监控](http://www.cnblogs.com/hustskyking/p/fe-monitor.html) 功能、测试和监控是程序开发的三板斧，很多工程师可以将功能做的尽善尽美，也了解一些测试方面的知识，可是在监控这个方向上基本处于大脑空白。错误日志的收集、整理算是监控的一个小部分，但是它对我们了解网站稳定性至关重要。

## 奇舞推荐 * ### [前端工程——基础篇](https://github.com/fouber/blog/issues/10) 文章阐述了前端工程化从底层到极致的方方面面，从简单的代码压缩合并，到快速构建，到项目内容模块化，到最后的组件化开发项目，是前端工程化的很好的总结和入门文那张。 奇舞推荐 前端 工程 压缩 构建 模块 组件lizheming推荐 * ### [前端技术的开放和封闭](https://github.com/jayli/jayli.github.com/issues/18) 来看看拔赤以阿里去啊的工作流及架构为引子开始一系列思辩。对于高速发展的前端圈以及开闭之选，你所处在当下的环境又有哪些想法呢？ 奇舞推荐 开放与封闭 思考irideas推荐 * ### [前端开发指南](https://github.com/w3crange/Front-End-Develop-Guide) 这份指南汇集了前端开发所使用语言的主流学习资源，并以开发者的视角进行整理编排而成，我想应该对从零开始学习前端，会有一个系统的帮助。 奇舞推荐 HTML CSS JavaScript Guideicepy推荐 ## 项目实践 * ### [Fixing Performance in the Web Stack](http://ponyfoo.com/articles/fixing-web-performance) 解析Web开发中的性能问题。其中介绍了包括：TCP，HTTP，HTML，CSS，JavaScript，字体以及图像的一些潜在可优化点，并提出有效的优化方案。 项目实践 WebStack 性能优化 HTTP * ### [如何设计用户权限系统](http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=210306867&idx=1&sn=176f71769b707534e9b6cfec5953e714&scene=1#rd) 权限系统是所有后台系统都要用到的模块，看起来简单，实际上很讲究设计，复杂的组织架构就更加难设计权限系统 项目实践 权限系统lei推荐 * ### [canvas 图像处理和滤镜特效](http://www.haomou.net/2014/08/05/2014_html_canvas/) 在一个手机WebRTC拍照加特效的应用项目中，用到canvas标签获取图像矩阵，然后做图像处理，例如滤镜特效（马赛克，浮雕，衬底，反色等），这里我们详细介绍相关的知识。 项目实践 Canvas 图像处理 滤镜小撸推荐 ## JavaScript * ### [介绍一下JavaScript ES6中的Classes](https://strongloop.com/strongblog/an-introduction-to-javascript-es6-classes/) JavaScript ES6中的Classes JavaScript ES6 Classesnange推荐 * ### [React.js 的介绍 - 针对了解 jQuery 的工程师（译）](http://segmentfault.com/a/1190000003501752) 和 jQuery 横向对比让我们了解 React 并入门 jQuery React twitter jsbin JavaScriptlizheming推荐 * ### [使用 React 和 Flux 创建一个记事本应用](http://zhuanlan.zhihu.com/FrontendMagazine/19934725) React，来自 Facebook，是一个用来创建用户界面的非常优秀的类库。但React 不会关注于你的应用如何处理数据。所以，Facebook 引入了一种称作 Flux 的模式，提供了一个功能上的通道，可用于应用内的数据处理。 react JavaScript reflux刘博文推荐 ## 其它 * ### [CSS conic-gradient() polyfill](http://leaverou.github.io/conic-gradient/) css的“圆锥渐变”是很棒的效果，可惜现在浏览器还没有“conic-gradient”的实现。但是我们可以通过polyfill的方式，提前来使用这种炫酷的效果。 CSS polyfill * ### [我理解的阿里无线前端“架构”](https://github.com/amfe/article/issues/3) 又是一篇关于前端关于工程关于架构的思考，来看看阿里无线前端团队对"架构"问题的理解。文中鸡汤味道的确浓郁，但内部组织架构配图直接一看。 无线前端 架构 思考irideas推荐 * ### [Zakas博客搬家记](http://www.w3ctech.com/topic/1491) 个人博客抛弃数据库，转向静态化，Zakas给出一个经典的案例

## 奇舞推荐 * ### [CSS深入理解vertical-align和line-height的基友关系](http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/) 看标题就知道这篇文章的文风如何了，张鑫旭八月末压轴文章，详细讲述了vertical-align和line-height两个CSS属性的方方面面，很值得一读。 奇舞推荐zhouweicsu推荐 * ### [有关网页渲染，每个前端开发者都该知道的那点事](http://www.ituring.com.cn/article/199622) 有关网页渲染的文章很多，但是相关信息比较分散，且论述并不是很完整。如果要想对这个主题有个大致的了解，我们还得学习很多知识。因此，Web开发者Alexander Skutin 决定写一篇文章。他相信，这篇文章不仅能帮助初学者，也能对那些想要刷新知识结构的高级前端开发者有所裨益。 奇舞推荐张祥推荐 * ### [如何成为一名卓越的前端工程师](http://jiongks.name/blog/how-to-become-a-great-front-end-engineer/) 前端工程师的打怪练级之路 奇舞推荐 ## HTTP/2 * ### [HTTP/2 is here, let's optimize!](https://docs.google.com/presentation/d/1r7QXGYOLCh4fcUq0jDdDwKJWNqWK1o4xMtYpKZCJYjM/present?slide=id.p19) HTTP/2于今年5月份发布正式版，关于HTTP/2有哪些新特性，以及针对HTTP/2我们应当做哪些优化呢？这篇PPT会告诉我们答案。 HTTP/2娇龙推荐 * ### [HTTP/2 资料汇总](https://imququ.com/post/http2-resource.html) 随着今年 5 月 14 日 HTTP/2 协议正式版的发布，越来越多的网站开始部署 HTTP/2 了，HTTP/2 也离大家越来越近了，本文汇总了一些关于 HTTP/2 的资料以及博主写过的文章。 HTTP/2屈屈推荐 ## 其它 * ### [30 天学习 30 种新技术系列](http://segmentfault.com/a/1190000000349384) 知识爆炸的时候。这是最好的时代，也是最坏的时代 大杂烩刘观宇推荐 * ### [HTML 和 CSS 的那些说不完的坑](https://lizheming.github.io/wtf-html-css/) 项目列举了常见的一些 HTML 和 CSS 中容易踩到的坑，并给出了相应的解决办法。内容浅显，干货满满，不得不说是居家旅行撸码约会之必读好文。 HTML CSS browser style position button公子推荐 * ### [Redux 核心概念](http://www.jianshu.com/p/3334467e4b32) 介绍了 Redux 的一些核心概念，面向一些已经有 Redux 理解的用户，能够加深对 Redux 的理解 javascript redux fp王佳裕推荐 * ### [jQuery基金会将与Dojo基金会合并](http://www.w3ctech.com/topic/1500) jQuery基金会将与Dojo基金会合并，致力于打造一个最大、最丰富、最全面的基金会，更好地服务于开发者及其项目和社区，从而构建开放的Web。 最新动态李松峰推荐 * ### [Flash-Free Clipboard for the Web](https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/) 目前 WEB 端大部分复制文本到剪切板的需求都是用 flash 实现的，例如使用 ZeroClipboard 组件。随着 flash 越来越不遭人待见，mozilla 的这篇文章介绍了纯 JavaScript Api 实现复制文本的方案。

## 奇舞推荐 * ### [HTTP Client Hints 介绍](https://imququ.com/post/http-client-hints.html) 利用 HTTP Client Hints 技术，HTTP 客户端（通常可以认为是浏览器）能够主动将一些特性告诉服务端，以便服务端更有针对性地输出内容，用在响应式图片等场景上非常合适。一起来了解下吧~ 奇舞推荐 新技术屈屈推荐 * ### [【译】12条鲜有人知的css事实](http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376300.shtml) 文中介绍了一些我们在CSS中常见到，但是你不一定知道原理的知识点，看完本文有种CSS还可以这么用、还可以这么用、还可以这么用的感觉。 奇舞推荐 CSSzhouweicsu推荐 * ### [请用 Node.js 4.0.0](https://cnodejs.org/topic/55efcc524b70f72113ff4f3b) Node.js 4.0.0 可以让您享受最尖端的技术，保持项目的先进性。无需--harmony即可体验众多 ES6 的新特性。 奇舞推荐 NodeJSzhouweicsu推荐 ## 冷知识 * ### [JS原生Date类型方法的一些冷知识](http://segmentfault.com/a/1190000003710954) 关于JavaScript中Date对象的方方面面，Date()与new Date()，格式化，UTC与GMT等知识点。 冷知识 JavaScript Datezhouweicsu推荐 * ### [语义化版本 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本是软件版本号的规范，版本格式为：主版本号.次版本号.修订号。 冷知识welefen推荐 * ### [humans.txt](http://www.humanstxt.org.cn/) 有意思，发现大部分网站还是没有这个东东 冷知识 SEO斯基先生推荐 ## 新技术 * ### [CSS 布局的未来：网格布局](https://hacks.mozilla.org/2015/09/the-future-of-layout-with-css-grid-layouts/) 将容器划分成几行几列的格子，然后指定子元素放入任意一个或多个格子里面。CSS3 的网格布局可以让我们更方便地实现复杂布局效果。 新技术 CSS * ### [Prefetching, preloading, prebrowsing](https://css-tricks.com/prefetching-preloading-prebrowsing/) 说到前端性能优化，我们最先想到的是合并、压缩、缓存等技术。现在，预先加载技术也已经越来越多地得到浏览器的支持。本文介绍了如何使用预先解析DNS、建立连接、下载资源、预先渲染来提升浏览性能。 新技术 性能优化 ## 其它 * ### [如何实现一个 CMD 模块加载器](http://annn.me/how-to-realize-cmd-loader/) CMD 对于 nodejs 的使用者来说更加友好，使得类似 commonJS 模块的写法可以在浏览器中使用，同时解决了浏览器中模块异步加载的困扰。 今天，我们一起来学习如何实现一个浏览器端的简单的 CMD loader。 CMD阿安推荐 * ### [Vue.js 和 Webpack（一）](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1.html) 文章介绍了Vue.js与Webpack，以及两者的结合使用的优势。本文为系列文章第一篇，博客中还有[（二）](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2.html)与[（三）](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3.html)。 Vue.js Webpack * ### [醉牛前端资源大集合](http://f2er.club/) 有了这个，可以清空你的工具资源收藏夹了

## 奇舞推荐 * ### [诡异问题排查之「DataURI 引发的血案」](https://imququ.com/post/datauri-and-404.html) 文本分享了一个真实线上环境诡异网络问题的排查案例。主要分为：如何利用有限的日志信息进行分析和排查、如何收集更多数据并验证想法、如何权衡利弊并解决问题三部分。 奇舞推荐屈屈推荐 * ### [HTML5 性能优化方案](http://ddtalk.github.io/blog/2015/09/07/dingding-first/) 纯纯纯的手机端 HTML5 页面性能优化干货，你值得拥有 奇舞推荐 HTML5 性能优化 移动端张祥推荐 * ### [前端中的变换矩阵](https://github.com/alvarto/blog/issues/1) 从W3C标准和浏览器实现等角度来理解变换矩阵。 奇舞推荐 变换矩阵 CSS JavaScripthumphry推荐 ## JavaScript * ### [【译】升级 Node 4 的 7 个理由](http://www.w3ctech.com/topic/1512) Node 携带 ES6 大量新特性浴火重生 JavaScript NodeJS ES6公子推荐 * ### [JavaScript 模板引擎原理，几行代码的事儿](http://barretlee.com/blog/2013/12/03/cb-principle-of-javascript-template/) 讲的一些模版引擎的解析基本原理，小胡子哥的作品，值得一看。有兴趣的朋友还可以继续学习 HTML5 的 template 以及工程上的意义。 JavaScript小撸推荐 * ### [JavaScript数据结构和算法简述——数组](http://www.alloyteam.com/2015/09/brief-javascript-data-structures-and-algorithms-the-array/) 爱JavaScript就要深入学习，就是要有挖祖坟的斗志。这篇文章由日常的JavaScript数组应用，深入到低层C的实现，可谓是让JavaScript数据完全显露无疑。 JavaScript 教程 算法Atwood.cai推荐 ## 移动端 * ### [QQ 浏览器 X5 内核问题汇总](http://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/) 在微信营销盛行的今天，Android 手机微信里面内置 QQ 浏览器 X5 内核，了解其 bug，势在必行。 移动端 X5Atwood.cai推荐 * ### [[译] 剖析 Responsive Image](https://github.com/riskers/blog/issues/5) 一篇综合介绍响应式图片的文章 HTML5 移动端 响应式设计高一波推荐 * ### [深入了解 Viewport 和 px](http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml) 移动页面重构必备知识点。 移动端 viewport pxzhouweicsu推荐 ## 工具 * ### [2015：前端工具现状](http://www.w3ctech.com/topic/1513) 统计前端界目前开发工具排行榜 工具公子推荐 * ### [caniuse 命令行工具](http://annn.me/caniuse-cmd/) 大名鼎鼎的 caniuse.com 相信每个前端同学都不陌生。这款查询浏览器兼容性的利器, 现在可以在命令行下使用了，相比每次打开网站查询，命令行确实方便许多哦。 工具 caniuse阿安推荐 ## 其它 * ### [别让用户觉得自己蠢](http://beforweb.com/node/753) 真正优秀的体验来自于立足现实的精彩创意以及对用户发自内心的关怀。饱含设计用心的产品可以激发用户在正面情绪状态下高效行动，就像功能设计者在身边帮助他们一起完成任务一样。

## 奇舞推荐 * ### [Subresource Integrity 介绍](https://imququ.com/post/subresource-integrity.html) SRI 是 Subresource Integrity 的缩写，一般按照字面意义翻译为：子资源完整性（草案）。最近 GitHub 宣布启用 SRI 策略，很多小伙伴对此表示关注。本文介绍 SRI 究竟是什么，如何使用，以及它的适用场景和局限性。 奇舞推荐 HTTP Subresource Integrity 新技术屈屈推荐 * ### [iOS 9, Safari 浏览器和 Web](http://www.mobilexweb.com/blog/ios9-safari-for-web-developers) 伴随着 iOS 9 和新一代 iPhone / iPad 的推出，iOS 上的 Safari 又有了许多新的功能和变化，一起来了解下吧。 奇舞推荐 iOS Safari Web 新技术屈屈推荐 * ### [使用 Electron 构建桌面应用](http://zhuanlan.zhihu.com/FrontendMagazine/20225295) 使用 JavaScript、Node.js 和 Electron 创造专属于你的声效器 奇舞推荐 JavaScript Electron Node.jszhouweicsu推荐 ## 性能 * ### [CSS3 硬件加速也有坑！](http://div.io/topic/1348) 使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰复合层的排序，可以有效减少 Chrome 创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。 CSS3 硬件加速 性能奇舞团推荐 * ### [网页性能管理详解](http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html) 又见阮大神发博客啦，这一次主要讲的是网页性能优化，阮大神从网页生成的流程和原理上来分析如何去分析网页的性能以及动画方面，big 赞！ 优化 性能星期三，张秀华推荐 ## JavaScript * ### [像素化你的代码](https://imququ.com/post/code2png-encoder.html) 将代码像素化为图片，这是一个有点意思但并没什么卵用的想法。只要不用在正式场合，发挥脑洞，还是可以玩出一些有趣的东西来，例如将代码编进正常图片进行伪装。本文讲述了具体的实现步骤，提供了一个编码/解码工具和多个示例。 JavaScript 图片屈屈推荐 * ### [JavaScript 奇技淫巧 45 招](http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html) 黑科技，你懂得，多多益善。 JavaScript 黑科技 知识点总结张祥推荐 ## 其它 * ### [谈谈 Web 动画 API](http://danielcwilson.com/blog/2015/07/animations-intro/) 本文是系列文章，深入浅出的讲解了 Web 动画API，值得一看。 CSS 动画 API奇舞团推荐 * ### [七个对我最重要的职业建议](http://blog.jobbole.com/53812/) 作者是我最佩服的web前端界大牛之一Nicholas C. Zakas。哥们虽然不幸患上了罕见的莱姆病(Lyme disease)，现在有些瘦削憔悴，但是男神的光芒永远照耀我辈前进的方向！ Nicholas C. Zakas 程序员 职业生涯Gao推荐 * ### [移动端自适应方案](http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/) 本文结合实践主要解决以下问题：真的需要动态生成 viewport 吗？如何自适应？

## 奇舞推荐 * ### [你为什么不分享](http://www.cnblogs.com/coffeedeveloper/p/4825177.html) 针对为什么不分享，和如何写文章的一些建议和想法 职业发展 奇舞推荐coffeedeveloper推荐 * ### [使用 SRI 增强 localStorage 代码安全](https://imququ.com/post/enhance-security-for-ls-code.html) 广泛被大家使用的「将 JS 代码缓存在本地 localStorage」方案有很大的安全隐患。网站出现任何 XSS，都有可能被用来篡改缓存在 localStorage 中的 JS 代码。之后即使 XSS 被修复，LS 中的代码依然是被篡改过的，持续发挥作用。这个隐患由于不好修复，通常会被忽略。本文提供一种使用 [SRI](https://imququ.com/post/subresource-integrity.html) 的解决方案。 Web安全 奇舞推荐屈屈推荐 * ### [ECMAScript 6 模块架构](http://zhuanlan.zhihu.com/FrontendMagazine/20238288) 寸老师出品，必属精品。 ES 6 模块 奇舞推荐zhou wei cs u推荐 ## JavaScript * ### [“函数是一等公民”背后的含义](http://blog.leapoahead.com/2015/09/19/function-as-first-class-citizen/) 为什么说“函数时一等公民”，本文浅入浅出的讲述了它和函数式编程、无状态设计、封装抽象之间的关系，例子简单明了，阅读本文学习如何让应用维护、测试复杂度显著降低。 JavaScript 函数 函数是编程 测试zhouweicsu推荐 * ### [JavaScript 原型系统的变迁，以及 ES6 class](http://segmentfault.com/a/1190000003798438) 如果你对原型的理解还停留在 function + new 这个层面而不知道更深入的操作原型链的技巧，或者你想了解 ES6 class 的知识，相信本文会有所帮助。 JavaScript ES6 ## CSS * ### [运用flexbox为网页做适应性布局](http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/) 移动端布局可以可以尽情使用flex布局，该文细致讲解了flex相关知识 CSS flexboxChang1ng推荐 * ### [PostCSS Deep Dive: What You Need to Know](http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535?utm_source=CSS-Weekly&utm_campaign=Issue-182&utm_medium=web) PostCSS是细粒度的基本哲学模块化、即没有笨重的处理多个功能的插件。 你需要知道的第一件事就是PostCSS加速快,并有充分的理由,所以现在是时候进入建立一个清晰的理解它如何帮助你的开发过程。 PostCSS CSSAtwood.cai推荐 ## 其它 * ### [持续集成系统的演进之路](http://mp.weixin.qq.com/s?__biz=MzIwNjA0OTU0NQ==&mid=210229356&idx=1&sn=f18cd04659d46bea363f28fc51603310&scene=1) 本文分析了持续集成系统的功能点，比较Jenkins,Teamcity这两款持续集成工具的优缺点，最后总结了持续集成的最佳实践要点。 前端工程 * ### [React 数据流管理架构之 Redux 介绍](http://www.alloyteam.com/2015/09/react-redux/) 继 Facebook 提出 Flux 架构来管理 React 数据流后，相关架构开始百花齐放，本文简单分析 React 中管理数据流的方式，以及对 Redux 进行较为仔细的介绍。

## 奇舞推荐 * ### [【译】使用 requestIdleCallback 提升网页性能](http://galen-yip.com/2015/10/07/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8requestIdleCallback/) requestIdleCallback 是一个新的性能相关的 API，用来指定浏览器处于闲置状态时才执行某些操作。使用它可以很好地解决懒加载、瀑布流一类的页面在滚动时的性能问题。 奇舞推荐 HTML5 性能 JavaScriptgalenye推荐 * ### [NodeJS 的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/) 如果你一直用着 nodejs，然而一直都在写最基本的小 demo，很少深入的去剖析 nodejs 的性能问题，甚至连如何 debug 代码、如何发现性能问题都不知从哪里下手，那么赶紧看看这篇文章吧！ 奇舞推荐 NodeJS 性能屈屈推荐 * ### [CSS 秘密花园：梯形标签](http://www.w3cplus.com/blog/1658.html) CSS 秘密花园，Lea Verou 最新著作，讲解了有关于CSS中一些小秘密。本文是其中一个小节，看完本文如果有兴趣可以看看这个系列的文章。 奇舞推荐 CSS ## 网络 * ### [Content Security Policy Level 2 介绍](https://imququ.com/post/content-security-policy-level-2.html) [Content Security Policy](http://www.w3.org/TR/CSP/)（CSP）协议，是用来指定页面可以加载或执行哪些资源的协议，目前已经更新到 Level 2 了。CSP2 相比 CSP1 有哪些重要的变化呢？一起来了解下吧。 CSP 协议 网络屈屈推荐 * ### [window.opener.location 安全风险讨论](https://imququ.com/post/the-security-of-window-opener-location.html) Web 应用的安全性，很大程度上是由同源策略（Same Origin Policy，SOP）所保证的。但是，在子页面访问 opener.location 的一些属性和方法时却不受 SOP 保护，这就是本文要探讨问题的核心所在。 安全 网络屈屈推荐 ## JavaScript * ### [传统 Ajax 已死，Fetch 永生](https://github.com/camsong/blog/issues/2) 作者是个标题党。 JavaScript Ajax Fetchzhouweicsu推荐 * ### [JavaScript 中的 for 循环](http://segmentfault.com/a/1190000003829539) 我们知道 ES5 中有三种 for 循环，那为什么ES6 中还要新增 for-of 循环呢？本文将给你一个详细分析。 JavaScript ES6 for卢春雨推荐 ## 其它 * ### [Introducing RAIL: A User-Centric Model For Performance](http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/) Paul Irish 与 Paul Lewis 新作，RAIL 是一个性能模型，RAIL 代表 response, animation, idle 和 load，完成这四个不同领域的性能指标，你的用户将会非常高兴的。 RAIL 性能 * ### [回味 background](http://linxz.github.io/blog/css%E5%B1%9E%E6%80%A7%E5%9F%BA%E7%A1%80/2015/06/think-about-background.html) 小志前辈的一篇文章，介绍得相当详细，利用好每一个 CSS 属性才是高手，能不用多一个属性就不多用，运筹帷幄。 CSS小撸推荐 * ### [关于移动端 rem 布局的一些总结](http://segmentfault.com/a/1190000003690140) 作者总结分享了移动端 rem 布局下的一些经验。

## 奇舞推荐 * ### [AMP，来自 Google 的移动页面优化方案](https://imququ.com/post/amp-project.html) AMP 是 Google 推出的一项性能优化技术，号称能大大加快移动端页面呈现速度，提高整体体验，本文就带大家认识一下这项新技术。 奇舞推荐 AMP Google 性能屈屈推荐 * ### [基于 Webpack 搭建前端工程解决方案探索](http://www.infoq.com/cn/articles/frontend-engineering-webpack) React 开发和模块管理的主流工具，Webpack 同时提供了对 CommonJS、AMD 和 ES6 模块化标准的支持。 奇舞推荐 Webpack 工程化 * ### [“位置”在 CSS 里的细节](http://segmentfault.com/a/1190000003840639) 想要让元素稳定地待在为它预定的位置上，还是有很多功课要做的。本文只介绍了一部分有关位置的细节知识，如果你也曾对这些内容有所困惑，那么希望能有所帮助。 奇舞推荐 CSSwendy推荐 ## 前端工程 * ### [如何编写可维护可升级的代码](http://www.cnblogs.com/yexiaochai/p/4876099.html) 小钗前辈写的关于 WebApp 的文章，感觉和自己目前的理解比较相近，进阶的东西，有业务场景，有讲解，也有代码实例。 前端工程 组件化小撸推荐 * ### [设计易用的 RESTFul API](http://efe.baidu.com/blog/friendly-restful-api/) REST 不仅是一份 API 设计准则，更是一套软件实现架构，用于指导客户端与服务器端之间的交互。 前端工程 API REST * ### [图解 Flux](http://zhuanlan.zhihu.com/FrontendMagazine/20263396) 在如今的 Web 开发领域，Flux 最流行也最容易被大家所误解的技术之一。本教程打算以一种大家都能理解方式图解 Flux。 前端工程 React Facebook Flux JavaScript公子推荐 ## CSS * ### [记一次淘宝首页奇葩的渲染问题](http://www.barretlee.com/blog/2015/10/14/a-incredible-bug-in-taobao-homepage/) 你曾经在 Chrome 浏览器上碰到过这样的问题没：1）Hover 触发一个层展示, Hover 离开后，这个层还遗留残影；2）浏览器没有清理一个元素渲染的上一个状态，导致页面多出一个错位的跟该元素一模一样的影子；3）交互时突然出现一个方形色块，覆盖在元素上？本文带你一起探讨这类问题背后的原因。 CSS 渲染 浏览器屈屈推荐 * ### [理解 SVG transform 坐标变换](http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/) 张鑫旭老师的这篇文章相当详尽的讲解了 SVG transform 变换的语法、特点以及一些实际的处理等等。有相当多的截图，源代码展示，还有必要的 demo，对了，还有很多 gif 示意。如果你要学习 SVG，该文内容一定会对你的学有所帮助的。 CSS SVGwendy推荐 ## 其它 * ### [如何洞悉隐性需求](http://mp.weixin.qq.com/s?__biz=MjM5NTA0NjY4MA==&mid=216015155&idx=4&sn=fd5bce01eb1e12bf634ee24337414caf&scene=2&srcid=1013UOKcVgjD9piLUAJmiOSe&from=timeline&isappinstalled=0#rd) 虽然是开发者视角，但产品和运营同样也会感同身受。 产品设计 需求李松峰推荐 * ### [关于 Web 安全，99% 的网站都忽略了这些](https://blog.wilddog.com/?p=290) Web 安全是一个如何强调都不为过的事情，我们发现国内的众多网站都没有实现全站 https，对于其他安全策略的实践更是很少，本文的目的并非讨论安全和攻击的细节，而是从策略的角度引发对安全的思考和重视

## 奇舞推荐 * ### [JS 动画库 VelocityReact 介绍](http://www.w3ctech.com/topic/1545) 如果你习惯于使用 CSS 来制作动画效果，那么 Velocity.js 带给你的感觉很可能是“原来这一切竟然可以是真的”。 奇舞推荐 JavaScript Velocity React 动画Lenville推荐 * ### [界面之下：还原真实的 MV* 模式](https://github.com/livoras/blog/issues/11) 本文追根溯源，从最经典的 Smalltalk-80 MVC 模式开始逐步还原图形界面之下最真实的 MV* 模式。 奇舞推荐 MVC MVP MVVMwendy推荐 * ### [NCZ 新文章：Web 平台发展得过大了吗？](http://www.w3ctech.com/topic/1549) 深刻反思了当前 Web 平台发展的重大问题，厘清了莫须有的所谓 Web 平台与原生平台之争的想法，指明了 Web 开发者真正应该关心的问题所在。 奇舞推荐 Web平台李松峰推荐 ## HTTP * ### [扒一扒 HTTPS 网站的内幕](http://segmentfault.com/a/1190000003801450) 网站实现 HTTPS，在国外已经非常普及，也是必然的趋势。本文深入浅出，带你一探 HTTPS 的内幕。 HTTPzhouweicsu推荐 * ### [devd: 给 Web 开发者使用的静态服务器](http://corte.si/posts/devd/intro/index.html) 一个小巧的命令行 HTTP 服务器，拥有跨平台、自带 Livereload、反向代理、静态服务器等特性。 HTTP 服务器 * ### [你所不知道的 HSTS](http://www.barretlee.com/blog/2015/10/22/hsts-intro/) 本文简单说明了 HSTS 的基本原理和相关内容，他在全站 https 下有一个较大的正向作用，推荐使用。 HSTS HTTP ## 响应式 * ### [响应式图片解决方案](http://liyaodong.com/2015/10/18/responsive-image-workflow/) 如今开发一个网站不是响应式都不好意思拿出来，那么作为响应式中的重要一环「响应式图片」你又是如何解决的呢？ 响应式Vanilla推荐 * ### [iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸](http://www.zhihu.com/question/25308946/answer/32240185) 这个题目在关于目前移动端适配方面还是有一些质量回答的，可能在授权后分享出来。 移动端适配 响应式王纯推荐 ## 其它 * ### [推动 Web 向前发展](http://movethewebforward.org/cn/) 对了解和加入修订 Web 规范途径总结的小文档 Web 规范 HTML CSS JavaScript公子推荐 * ### [正则表达式入门](http://www.w3ctrain.com/2015/10/13/regular-expressions-introduction/) 正则表达式入门的好文章 正则表达式HelKyle推荐 * ### [程序员如何克服可怕的“职业倦怠”](http://www.html5cn.org/article-8916-1.html) 关注技术之余，也关注下自我心理调节，健康是一切的根本。

## 奇舞推荐 * ### [ThinkJS 2.0 - 使用 ES6/7 全部特性开发 Node 项目](http://www.w3ctech.com/topic/1554) ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架，彻底解决了 Node.js 中异步嵌套的问题。屈屈的 [ThinkJS 2.0，带你超越梦想一起飞](https://imququ.com/post/thinkjs-2.html) 一文，介绍了 ThinkJS 2.0 在技术上的改进和创新，也为你解答了一些职业发展相关的问题。 奇舞推荐 ThinkJS NodeJS * ### [HTTP/2 头部压缩技术介绍](https://imququ.com/post/header-compression-in-http2.html) HTTP/1 协议的状态行和头部没有经过任何压缩，直接以纯文本传输，随着现代 Web 应用的请求数越来越多，头部网络开销越来越大。好在这一切在 HTTP/2 中有了转机，本文将通过实际案例带领大家详细地认识 HTTP/2 的头部压缩。 奇舞推荐 HTTP/2 HTTP屈屈推荐 * ### [对响应式 SVG 的再思考](http://www.w3ctech.com/topic/1555) 如果你还未曾见响应式图标的技术，那你很可能会像我第一次看到它时一样，对它印象深刻。在这篇文章中，我想探究一下，我们该如何使用 SVG 来做一些更有趣的事情. 奇舞推荐 SVG夏明星推荐 ## React * ### [React Native Android 踩坑之旅](http://www.alloyteam.com/2015/10/react-native-android-steps-on-tour/) React Native Android 实战，持续更新中 React React Native Androidzhouweicsu推荐 * ### [Immutable 详解及 React 中实践](https://github.com/camsong/blog/issues/3) 有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。本文详细介绍了 React 的原理及在 React、Flux、Redux 的使用。 React Immutable Flux Redux凡推荐 ## CSS * ### [POSTCSS 深入学习系列](http://www.w3cplus.com/blog/tags/517.html) PostCSS 是什么？它能做什么？有什么特性？感兴趣的欢迎关注 PostCSS 深入学习系列。 CSS PostCSSzhouweicsu推荐 * ### [回归 CSS 标准之 float](http://efe.baidu.com/blog/float/) 本文通过将一些浮动元素的特点与 CSS 规范中的具体描述对应，来加深大家对 float 属性原理的理解。并通过一个 bug 实例，说明使用这个属性时要注意的问题。 CSS floatzhouweicsu推荐 ## 前端参禅 * ### [Web重构之道](http://www.w3cplus.com/web-reconstruction.html) 重构在当今的 Web 时代是一个含“金”量最低的职位，而重构之道是具有历史的一个话题，来看看作者对重构有怎么样的理解。 前端参禅 Web重构wendy推荐 * ### [做不到，别轻易说，我热爱编程，热爱学习。](http://www.jianshu.com/p/67a0cf352986) 问问自己，我真的热爱编程，我真的热爱学习么？想清楚这个问题，对你的价值，太大了，值得你用一个小时去好好思考，一天，甚至一年。 前端参禅 鸡汤zhouweicsu推荐 ## 其它 * ### [前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/what-is-a-fd.html) 什么时候前端开发者？该如何学习以及实践时该使用什么工具？本文将一一为你解答。 前端开发 * ### [webpack 入门及实践](http://www.w3ctech.com/topic/1557) React 自发布以来吸引了越来越多的开发者，React 开发和模块管理的主流工具 webpack 也被大家所熟知。那么 webpack 有哪些优势，可以成为最主流的 React 开发工具呢？本文和大家一起探索一下

## 奇舞推荐 * ### [使用 HTTP/2 提升性能的7个建议](http://www.w3ctech.com/topic/1563) 出自 nginx 官方博客，建议很实用，参考资源也不错。 奇舞推荐 HTTP 性能李松峰推荐 * ### [React 源码剖析系列 － 生命周期的管理艺术](http://zhuanlan.zhihu.com/purerender/20312691) 目前，前端领域中 React 势头正盛，很少能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 奇舞推荐 React JavaSvript 框架Cam推荐 * ### [当我们谈论 cluster 时我们在谈论什么(上)](http://taobaofed.org/blog/2015/11/03/nodejs-cluster/) 当 Node.js 应用需要充分利用多核 CPU 资源时，就会用到 cluster 模块。本文介绍了cluster 模块如何解决 Node.js 部署时遇到的各种问题。 奇舞推荐 Node.js ## 前端工程 * ### [React 服务器端渲染实践小结](http://www.alloyteam.com/2015/10/8783/) 服务端渲染是 React 一个非常好的特性，使用它我们可以更好得进行 SEO，并提高首屏渲染速度。 前端工程 React 框架 * ### [前端 MVC 变形记](http://efe.baidu.com/blog/mvc-deformation/) MV* 是一个很有争议性的话题，能够构建一个健壮、具有良好设计、遵从关注点分离的项目比花时间去争论到底是 MV* 更有意义。 前端工程 MVC * ### [浅谈 Hybrid 技术的设计与实现](http://www.cnblogs.com/yexiaochai/p/4921635.html) 以携程 App 为例，介绍了 Hybrid 结构中原生应用和 Web 如何通信以及如何增量更新等。 前端工程 Hybrid 移动开发小撸推荐 ## 教程 * ### [【英文】你不知道的 JavaScript](https://github.com/getify/You-Dont-Know-JS) 《You Don't Know JS》是深入讲解 JavaScript 核心机制的一系列书籍，不管是新手还是老鸟，都能从中学到新知识。 教程 JavaScriptlei推荐 * ### [【译】WebGL 基础系列](http://reygreen1.github.io/2015/10/24/webgl-fundamentals/) 这个教程集合了一系列从基本概念来介绍 WebGL 的文章，用一种全新的方式来帮助你全面理解 WebGL 的概念和工作原理。上面连接是第一篇，后面还有 [WebGL 工作机制](http://www.75team.com/weekly/issue133.html) 和 [WebGL着色器和GLSL](http://www.75team.com/weekly/issue133.html)。 WebGL 教程curry推荐 ## 其它 * ### [使用 JavaScript 实现“真·函数式编程”](http://jimliu.net/2015/10/21/real-functional-programming-in-javascript-1/) 你以为用用 forEach、map、reduce、immutable 就叫函数式编程了？本文的介绍如何用JavaScript 实现纯粹的函数式编程。文章的 [第二部分戳这里](http://jimliu.net/2015/10/22/real-functional-programming-in-javascript-2/)。 JavaScript 函数式编程 * ### [【译】CSS 负边距详解](http://segmentfault.com/a/1190000003942591) CSS 中的负边距如果使用得当，可以使 HTML 结构更加精简，也可以实现一些看起来很麻烦的页面样式。 CSSwendy推荐

## 奇舞推荐 * ### [给 JavaScript 初心者的 ES2015 实战](http://gank.io/post/564151c1f1df1210001c9161) 关于 ES2015 的文章，大家应该都看过。这篇文章讲解全面、易懂，大家不妨一读，温故而知新。 奇舞推荐 ES2015 JavaScript月影、snadn推荐 * ### [当我们谈论 cluster 时我们在谈论什么(下)](http://taobaofed.org/blog/2015/11/10/nodejs-cluster-2/) 上期周刊我们推荐了这篇文章的 [上篇](http://taobaofed.org/blog/2015/11/03/nodejs-cluster/) ，这次是下篇，讲解了如何保障各个 worker 进程稳定性以及如何 fork 子进程、父子进程间如何通信。 奇舞推荐 NodeJS JavaScript你猜推荐 * ### [如何评价页面的性能](http://taobaofed.org/blog/2015/11/09/web-performance/) 淘宝前端团队出品，本文主要是介绍如何评估页面加载完成之后的性能。 奇舞推荐 性能 ## JavaScript * ### [JavaScript 编码规范 - ESNext 补充篇](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md) 随着 JavaScript 语言特性的升级，编码规范也需要与时俱进。 JavaScript ESNext 规范月影推荐 * ### [Node.js 打造实时多人游戏框架](http://www.aliued.cn/2014/10/28/node-js-%e6%89%93%e9%80%a0%e5%ae%9e%e6%97%b6%e5%a4%9a%e4%ba%ba%e6%b8%b8%e6%88%8f%e6%a1%86%e6%9e%b6.html) 重点讲述了在搭建游戏框架过程中如何解决计时器的问题， 道路曲折，值得学习 NodeJS JavaScript 游戏开发Atwood.cai推荐 * ### [JavaScript quiz. ES6 edition. — Perfection Kills](http://perfectionkills.com/javascript-quiz-es6/) 还记得6年前的[ JavaScript quiz ](http://perfectionkills.com/javascript-quiz/)么，呐，现在 ES6 的版本出来了，赶紧去答题，看你能得多少分（需翻墙）。 JavaScript ES6 ## 框架 * ### [未来 Web 应用的前端技术选型畅想](https://github.com/xufei/blog/issues/24) 关于前端框架和分层，作者发表了一些自己的观点。 框架 前端工程 * ### [被误解的 MVC 和被神化的 MVVM](http://www.infoq.com/cn/articles/rethinking-mvc-mvvm) 我们需要保持的是一个拥抱变化的心，以及理性分析的态度。在新技术的面前，不盲从，也不守旧，一切的决策都应该建立在认真分析的基础上，这样才能应对技术的变化。 MVC MVVM 框架你猜推荐 ## 其它 * ### [移动端图片格式调研](http://blog.ibireme.com/2015/11/02/mobile_image_benchmark/) 文中详细对比了各种图片的多个维度的比较，深入浅出，图文并茂。 图片格式 图片编码 图片性能Atwood.cai推荐 * ### [TLS 握手优化详解](https://imququ.com/post/optimize-tls-handshake.html) HTTPS 在 TCP 和 HTTP 之间增加了 TLS，保证了传输层安全，同时也给 Web 性能优化带来新的挑战。本篇文章屈屈老师将带你深入理解 TLS 握手优化。 HTTP TLS 握手Atwood.cai推荐 * ### [使用 CSS3 will-change 提高页面滚动、动画等渲染性能](http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/) CSS3 will-change 属于 web 标准属性，目前处于草案阶段，作用是“增强页面渲染性能”。张老师详细的讲解了该属性的作用与注意事项。 CSS will-change

## 工具与框架 * ### [Vue.js 快速入门](http://segmentfault.com/a/1190000003968020) Vue.js 一个轻巧、高性能、可组件化的MVVM库，这篇基于最新版本的 Vue 入门教程写得很不错，推荐入门。 工具与框架zhouweicsu推荐 * ### [ThinkJS 项目用 WebStorm 来设置断点与调试](http://www.cnblogs.com/jkisjk/p/debug_thinkjs_with_webstorm.html) ThinkJS 项目用 WebStorm 来设置断点与调试，可以告别console.log了。 工具与框架JK推荐 * ### [Node内存问题追踪](http://apmblog.dynatrace.com/2015/11/04/understanding-garbage-collection-and-hunting-memory-leaks-in-node-js/) 追踪内存Node的内存问题 工具与框架 * ### [electron＋Angular构建桌面应用](https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron?utm_source=nodeweekly&utm_medium=email) 跨平台应用不只是Java能做 工具与框架 * ### [Apache支持HTTP2](https://icing.github.io/mod_h2/howto.html?utm_source=webopsweekly&utm_medium=email) Apache支持HTTP2，准备迎接http2时代吧 工具与框架 ## JavaScript生态圈 * ### [Delphi、C#之父Anders Hejlsberg近日首次访华](https://channel9.msdn.com/events/Ignite/Microsoft-Ignite-China-2015/DEV-B202) Delphi、C#之父Anders Hejlsberg近日首次访华，并在10月24日和27日参加了两场见面会，分享了他目前领导开发的TypeScript项目， JavaScript生态圈 * ### [TypeScript 1.6发布：完全支持React/JSX](http://www.infoq.com/cn/news/2015/09/typescript-16) 近日，微软再次更新TypeScript，推出了1.6版本。该版本添加了对React/JSX、类表达式以及很多新功能的支持 JavaScript生态圈 * ### [C++ To JavaScript](http://www.sitepoint.com/getting-started-emscripten-transpiling-c-c-javascript-html5/?utm_source=javascriptweekly&utm_medium=email) Emscripten是一个基于LLVM的工具，用来把C/C++代码转化为JavaScript JavaScript生态圈 * ### [将Scala编译为JavaScript的编译器](http://www.infoq.com/cn/news/2015/03/scala-js-javascript) Scala.js是一款将Scala代码编译为JavaScript代码的编译器，该编译器支持全部Scala语言特性。借助于Scala.js，开发者能够使用Scala开发从前端到后端的Web应用，而且Scala.js还带来了在服务器和客户端之间复用代码的可能性 JavaScript生态圈 * ### [Jison 友好的 JavaScript 解析器生成器](http://nuysoft.com/bak/jison-docs-cn.html) Jison 接受一个上下文无关文法作为输入，输出一个可以解析文法所描述的语言的 JavaScript 文件。然后，你可以使用生成的脚本来解析、接受、拒绝输入，或基于输入执行动作 JavaScript生态圈