FEX 技术周刊-2015/08/31
最后更新于：2022-04-01 00:05:18
## 业界会议
**2015 创新中国秋季峰会**
[http://demochina.cyzone.cn/2015aut2/](http://demochina.cyzone.cn/2015aut2/)
## 百度 Web 技术专栏
**FIS3 3.2.0-stable版 发布**
[https://github.com/fex-team/fis3/releases/tag/3.2.0](https://github.com/fex-team/fis3/releases/tag/3.2.0)
## 深阅读
**PHP 5.6.x 版本迁移至 PHP 7.0.x 版本**
译文: [https://github.com/pangee/Migrating-from-PHP5.6.x-to-PHP7.0.x](https://github.com/pangee/Migrating-from-PHP5.6.x-to-PHP7.0.x)
原文: [http://php.net/manual/en/migration70.php](http://php.net/manual/en/migration70.php)
介绍了php7.0的一些新特性、停用的的特性、新的函数、以及新的类与接口等。目前php7.0还在开发中，等到正式发版时若想迁移到php7.0还需注意一些兼容性问题。
**ES6 In Depth: The Future**
[https://hacks.mozilla.org/2015/08/es6-in-depth-the-future/](https://hacks.mozilla.org/2015/08/es6-in-depth-the-future/)
这个系列文章的最后一篇，介绍了后续可能会添加到 JavaScript 的功能。
**Node.js之HelloWorld背后的大坑**
[http://www.jianshu.com/p/3c5897dd2b85](http://www.jianshu.com/p/3c5897dd2b85)
通过简单的源码分析介绍 Node.js 内部的运行机制。
**Pushing the performance limits of node.js**
[http://www.jut.io/blog/2015/pushing-node-js-performance-limits](http://www.jut.io/blog/2015/pushing-node-js-performance-limits)
来看看 JUT 这个实时日志分析服务是如何优化 Node 性能的。
**5 steps to making a Node.js frontend app 10x faster**
[https://engineering.gosquared.com/making-dashboard-faster](https://engineering.gosquared.com/making-dashboard-faster)
另一个 Node 性能优化建议。
**[译]学习BFC**
[http://web.jobbole.com/83274/](http://web.jobbole.com/83274/)
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2\. 1规范定义的，关于CSS渲染定位的一个概念，这个文章详细的介绍了这个知识点。
**在线调试方案的思考与实践**
[http://www.cnblogs.com/hustskyking/p/debug-suggest.html](http://www.cnblogs.com/hustskyking/p/debug-suggest.html)
本文的要点不在移动端调试上，移动端调试无非就是调试页面和调试工具之间存在分离，消除这种分离并创建连结就能解决移动端的调试问题。重点阐述的是所见即所得的调试模式下会遇到的阻碍。核心点在于 resource map。这位淘宝工程师关于前端异常收集的这篇文章也不错 [http://www.cnblogs.com/hustskyking/p/fe-monitor.html](http://www.cnblogs.com/hustskyking/p/fe-monitor.html)
**谈谈App混合开发**
[http://bxbxbai.gitcafe.io/2015/08/16/talk-about-bybird-app/](http://bxbxbai.gitcafe.io/2015/08/16/talk-about-bybird-app/)
介绍 Hybrid App 的实现细节。
**backdooring your javascript using minifier bugs**
[https://zyan.scripts.mit.edu/blog/backdooring-js/](https://zyan.scripts.mit.edu/blog/backdooring-js/)
本文讲解了一些由于使用 uglify-js 2.4.23 压缩 JS 代而导致的bug，它们可能导致与压缩前截然相反的结果，也可能会让用户得到用不过期的token。虽然有些故意而为之的因素，但是仔细读了他的示例后你会发现自己触发这种bug也并非毫无可能，所以若非必要，尤其是后端处理逻辑，不要压缩它们。
**把罗永浩搞得黯然神伤的 DDoS 是什么？**
[http://www.ifanr.com/556432](http://www.ifanr.com/556432)
对 DDoS 原理及其现状和分布趋势有一个简要的介绍，用无赖在商场门口闹事导致商场很难为正常消费者服务作比喻很形象。
**前端工程——基础篇**
[https://github.com/fouber/blog/issues/10](https://github.com/fouber/blog/issues/10)
通常情况下，前端开发只要经过库/框架选型，简单构建优化，JS/CSS模块化开发这3个阶段就可以解决绝大部分的需求，但当面临大体量开发、大规模合作、高性能需求等复杂问题的时候，还需要再做两件事：组件化开发以提升团队协作效率，资源管理以贯彻增量加载原则。
**Fixing Performance in the Web Stack**
[http://ponyfoo.com/articles/fixing-web-performance](http://ponyfoo.com/articles/fixing-web-performance)
分析了很多解决Web开发中的性能问题的手段，包括TCP、HTTP、压缩、CDN等经常被分析的问题，同时也讲了一些关于前端的HTML、CSS、JavaScript、图片、字体等优化方案，贯彻缓存与按需加载的理念。
**float是如何工作的**
译文:[http://www.w3cplus.com/css/how-floating-works.html](http://www.w3cplus.com/css/how-floating-works.html)
原文:[http://bitsofco.de/2015/how-floating-works/](http://bitsofco.de/2015/how-floating-works/)
比较详细的讲解了 CSS 中 float 的工作原理以及应该如何正确的使用浮动。
**Responsive Images**
[http://blog.cloudfour.com/responsive-images-101-definitions/](http://blog.cloudfour.com/responsive-images-101-definitions/)
在这个言必及“响应式设计”的年代，响应式图片这个关键词也经常被见到，响应式图片即“A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.”。文中的内容只给出了响应式图片的定义，内容底部有作者连载完结的一系列响应式图片实现方法。
**CSS vs. SVG:图形文本的效果**
译文: [http://www.w3cplus.com/svg/css-vs-svg-graphical-text.html](http://www.w3cplus.com/svg/css-vs-svg-graphical-text.html)
原文: [https://blogs.adobe.com/dreamweaver/2015/07/css-vs-svg-graphical-text.html](https://blogs.adobe.com/dreamweaver/2015/07/css-vs-svg-graphical-text.html)
针对图形文本的实现，讲了 CSS 和 SVG 结合实例来进行纹理填充的不同解决方案。在浏览器全面支持CSS的background-clip:text属性之前，SVG绝对是创建纹理填充文本效果的最佳方法
**LazyLoad**
[https://github.com/verlok/lazyload](https://github.com/verlok/lazyload)
LazyLoad is a fast, lightweight and flexible script for loading images only when they’re about to enter the viewport of a scrollable area, which supports the srcset attribute and with and takes best advantage from the progressive JPEG image format (which is good for performance).另外和jQuery_lazyload相比起来，它具有更好的性能并且支持渐进式 JPEG。
**ES6 Template Strings**
[http://ponyfoo.com/articles/es6-template-strings-in-depth](http://ponyfoo.com/articles/es6-template-strings-in-depth)
[http://www.2ality.com/2015/08/logging-variables-tagged-template.html](http://www.2ality.com/2015/08/logging-variables-tagged-template.html)
这2个都是讲 ES6 中 template 的使用，在做字符串拼接的时候确实很好用。
**RESTful APIs, the big lie**
[http://mmikowski.github.io/the_lie/](http://mmikowski.github.io/the_lie/)
关于 restful api 的讨论，反思是技术进步的源泉。
**如何能让页面仔也能做出良性的前端组件？**
[http://www.zhihu.com/question/35121667](http://www.zhihu.com/question/35121667)
关于：如何做前端组件这个话题的讨论。
**gl-react-native**
[https://github.com/ProjectSeptemberInc/gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native)
OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm.
## 新鲜货
**Using requestIdleCallback**
[https://developers.google.com/web/updates/2015/08/27/using-requestidlecallback](https://developers.google.com/web/updates/2015/08/27/using-requestidlecallback)
和 requestAnimationFrame 用法稍微类似，不过使用 requestIdleCallback 时，它允许应用程序协同调度后台任务，使得它们不引入延迟到共享相同的事件循环的其他高优先级的任务，如输入处理，动画和帧合成。
API可以参考这里：[https://w3c.github.io/requestidlecallback/](https://w3c.github.io/requestidlecallback/)
event Loop可以参考 [http://www.ruanyifeng.com/blog/2014/10/event-loop.html](http://www.ruanyifeng.com/blog/2014/10/event-loop.html)
或参考 [https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
**Toxy, a hackable HTTP proxy to simulate failure scenarios**
[https://github.com/h2non/toxy](https://github.com/h2non/toxy)
toxy is a fully programmatic and hackable HTTP proxy to simulate server failure scenarios and unexpected network conditions, built for node.js/io.js. It was mainly designed for fuzzing/evil testing purposes, when toxy becomes particularly useful to cover fault tolerance and resiliency capabilities of a system, especially in service-oriented architectures, where toxy may act as intermediate proxy among services.
**Ant Design 正式发布**
[http://ant.design/](http://ant.design/)
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和开发资源，服务更多产品。目前已经用 React 封装了一 Ant Design 的组件库。
**乳摇动画初探**
[http://www.alloyteam.com/2015/08/fu-li-ru-yao-dong-hua-chu-tan/](http://www.alloyteam.com/2015/08/fu-li-ru-yao-dong-hua-chu-tan/)
介绍作者实现乳摇的过程思路与方法。
**DevTools Tips For Sublime Text Users**
[https://medium.com/@addyosmani/devtools-tips-for-sublime-text-users-cdd559ee80f8](https://medium.com/@addyosmani/devtools-tips-for-sublime-text-users-cdd559ee80f8)
介绍了很多在平时开发时候可能用到的快捷键操作，其中包含一些类似Vim中的块级别操作，用起来真的很爽，值得学习
**Type Profiling and Code Coverage Profiling for JavaScript**
[https://www.webkit.org/blog/3846/type-profiling-and-code-coverage-profiling-for-javascript/](https://www.webkit.org/blog/3846/type-profiling-and-code-coverage-profiling-for-javascript/)
Web Inspector 中新增的两个小功能，最后还简单介绍了内部是怎么实现的。
**HystrixJS - resilience library for NodeJs applications**
[https://bitbucket.org/igor_sechyn/hystrixjs/overview](https://bitbucket.org/igor_sechyn/hystrixjs/overview)
Hystrix 的 Node.js 版，可以减少服务不稳定导致的雪崩。
**Sequence.js**
[https://github.com/IanLunn/Sequence/](https://github.com/IanLunn/Sequence/)
一款为制作 step-based 类型应用提供响应式 CSS 框架的 JS库
**Chrome will begin pausing many Flash ads by default on September 1**
[https://plus.google.com/+GoogleAds/posts/2PmwKinJ7nj](https://plus.google.com/+GoogleAds/posts/2PmwKinJ7nj)
从9月1号起，chrome将开始默认屏蔽 flash 广告。
**5 Cool Things About the Next Version of Bootstrap**
[https://dzone.com/articles/5-cool-things-about-next-version-of-bootstrap](https://dzone.com/articles/5-cool-things-about-next-version-of-bootstrap)
简单的介绍了Bootstrap的一些新特性，其中对Sass的切换值得关注。另外文中提到的PostCSS，虽然它自称：“PostCSS, written in JS, is 3 times faster than libsass, which is written in C++.”，但是也有例子证明它在编译含Bootstrap的时候却是相对慢很多的，可以见这里：[https://medium.com/@ddprrt/postcss-misconceptions-faf5dc5038df](https://medium.com/@ddprrt/postcss-misconceptions-faf5dc5038df)
**知道创宇研发技能表v3.0**
[http://blog.knownsec.com/Knownsec_RD_Checklist/v3.0.html](http://blog.knownsec.com/Knownsec_RD_Checklist/v3.0.html)
绝对的干货，包含但不仅限于web安全、嵌入式安全、前端、server端、产品、设计等各方向的学习资料。
**使用 estools 辅助反混淆 Javascript**
[http://blog.knownsec.com/2015/08/use-estools-aid-deobfuscate-javascript/](http://blog.knownsec.com/2015/08/use-estools-aid-deobfuscate-javascript/)
JS代码压缩与混淆的工具随处可见，但是代码反混淆还是很有意思的，虽然有些内容例如变量名是无法复原的，但是也可以使用类似jsnice这样的工具对变量进行自动命名，这在看一些被混淆后的代码时还是很有用的。
**Exploring the Hacker Tools of Mr Robot**
[https://hackertarget.com/hacker-tools-mr-robot/](https://hackertarget.com/hacker-tools-mr-robot/)
枚举另一些常用的攻击工具。Kali Linux 这个专门用作网络渗透的 os 挺值的关注的。
**JSPatch**
[https://github.com/bang590/JSPatch](https://github.com/bang590/JSPatch)
JSPatch bridges Objective-C and JavaScript using the Objective-C runtime. You can call any Objective-C class and method in JavaScript by just including a small engine. That makes the APP obtaining the power of script language: add modules or replacing Objective-C code to fix bugs dynamically.
**Angular 1 and Angular 2 integration: the path to seamless upgrade**
[http://angularjs.blogspot.jp/2015/08/angular-1-and-angular-2-coexistence.html](http://angularjs.blogspot.jp/2015/08/angular-1-and-angular-2-coexistence.html)
讲了如何在已经使用了 Angular 1 的应用中使用 Angular 2 进行无缝升级。另附一个 angular 的文章：
How to build an Angular 2 application with routing and services
[https://medium.com/@daviddentoom/how-to-build-an-angular-2-application-with-routing-and-services-67ead73db96e](https://medium.com/@daviddentoom/how-to-build-an-angular-2-application-with-routing-and-services-67ead73db96e)
**What's New for Developers in Firefox 42**
[https://hacks.mozilla.org/2015/08/developer-edition-42-wifi-debugging-win10-multiprocess-firefox-reactjs-tools-and-more/](https://hacks.mozilla.org/2015/08/developer-edition-42-wifi-debugging-win10-multiprocess-firefox-reactjs-tools-and-more/)
Firefox 42发布了，新增wifi环境调试android、默认开启多进程、win10主题、React开发中工具等新特性。
**Four:a slightly higher level graphics API based on WebGL 1.0**
[https://github.com/allotrop3/four](https://github.com/allotrop3/four)
Four is a framework to develop 3D content for the web. It lets you avoid the burden of repetition and complexity to speed up and simplify the development while exposing the flexibility of the WebGL API.
**algebra.js**
[https://github.com/nicolewhite/algebra.js](https://github.com/nicolewhite/algebra.js)
用于解析、计算代数方程的 javaScript 库。
**A collection of debugging stories**
[https://github.com/danluu/debugging-stories](https://github.com/danluu/debugging-stories)
debu，尤其是复杂环境下一些诡异问题的 debug 是码农工作中最有挑战的一个项目。作者的这篇文章也不错 Why Don't Schools Teach Debugging? [http://danluu.com/teach-debugging/](http://danluu.com/teach-debugging/)
## 产品及其它
**[译]为什么要造轮子？**
[http://www.jianshu.com/p/ec8e81d03001](http://www.jianshu.com/p/ec8e81d03001)
[https://medium.com/@leeb/why-invest-in-tools-3240ce289930](https://medium.com/@leeb/why-invest-in-tools-3240ce289930)
Facebook Product Infrastructure 团队的经验：
- 只有在一个自由开发环境的情况下，工程师才能去「造」一些他们认为更高效帮助他们完成工作的工具
- 当一些“实验”看起来有点儿意思的时候，充满想法和聪明的人会自发地聚到一起来实现这个“实验”
**Windows 95 is 20 years old today**
[http://www.theverge.com/2015/8/24/9197529/windows-95-is-20-years-old-today](http://www.theverge.com/2015/8/24/9197529/windows-95-is-20-years-old-today)
8月24号竟然是Windows 95 发布的第20周年，当时的“开始菜单按钮”、PNP、MSN等至今仍在使用。
**如何快速掌握一门新技术/语言/框架...**
[http://blog.jobbole.com/89978/](http://blog.jobbole.com/89978/)
前端的技术更新速度应该是互联网行业中最快的，如何快速的掌握一门新技术，总结起来大致这么几点：跳出自己的舒适区，不要对自己不熟悉的技术心存恐惧；主动学习；看官方文档；实践。
**2015移动端UI/UX设计趋势报告**
译文：[http://www.uisdc.com/2015-ui-ux-trend-report?utm_source=tuicool](http://www.uisdc.com/2015-ui-ux-trend-report?utm_source=tuicool)
原文：[https://medium.com/interactive-mind/mobile-2015-263ab694e60e](https://medium.com/interactive-mind/mobile-2015-263ab694e60e)
从扁平风和 Material Design 入手，分析了移动端UI的设计趋势以及对用户的影响。
**中国互联网公司最新最全阵亡名单（附死因和反思）**
[http://mp.weixin.qq.com/s?__biz=MjM5NjAyMzcyMA==&mid=221761795&idx=2&sn=2c46655f0b8c3e3347d683026ff439ab&scene=0#rd](http://mp.weixin.qq.com/s?__biz=MjM5NjAyMzcyMA==&mid=221761795&idx=2&sn=2c46655f0b8c3e3347d683026ff439ab&scene=0#rd)
整理的很详细，挺有参考价值的。
**提高开发效率的几个协作理念**
[http://36kr.com/p/5036872.html](http://36kr.com/p/5036872.html)
提升团队的协作开发效率，除了合理的沟通，拥抱队友之外，还需要工程师们打破开发的职责边界，不要仅将自己的技术视野定在工作所需，向外扩展，会在协作时减少不必要的磨合。