FEX 技术周刊-2015/08/24
最后更新于：2022-04-01 00:05:20
## 业界会议
**SYNC 2015**
[http://www.pingwest.com/subject/SYNC2015_SF/](http://www.pingwest.com/subject/SYNC2015_SF/)
一群美国科技公司们讲述他们来中国的“东游记”。
**Kcon 2015 8.21-8.23**
[http://kcon.knownsec.com/](http://kcon.knownsec.com/)
本届 KCon，我们将曝光许多黑掉手法，无论是漏洞、攻击、还是反攻，我们要做到心中有数，才能够坦然面对未来那些未知的东西，才能做好真正的安全。
## 深阅读 - Web
**How browsers work**
[http://domenicodefelice.blogspot.com/2015/08/how-browsers-work.html?t=2](http://domenicodefelice.blogspot.com/2015/08/how-browsers-work.html?t=2)
有人新写的浏览器渲染原理介绍，其中的笔记还挺详细。
**Netflix - Falcor**
[http://netflix.github.io/falcor/starter/what-is-falcor.html](http://netflix.github.io/falcor/starter/what-is-falcor.html)
[http://techblog.netflix.com/2015/08/falcor-developer-preview.html](http://techblog.netflix.com/2015/08/falcor-developer-preview.html)
[https://github.com/Netflix/falcor](https://github.com/Netflix/falcor)
Falcor is the innovative data platform that powers the Netflix UIs. Falcor allows you to model all your backend data as a single Virtual JSON object on your Node server. On the client you work with your remote JSON object using familiar JavaScript operations like get, set, and call. If you know your data, you know your API. Falcor is middleware. It is not a replacement for your application server, database, or MVC framework. Instead Falcor can be used to optimize communication between the layers of a new or existing application.
**CSS Modules - Welcome to the Future**
[http://glenmaddern.com/articles/css-modules](http://glenmaddern.com/articles/css-modules)
[https://github.com/css-modules/css-modules](https://github.com/css-modules/css-modules)
The CSS Modules team felt we could attack the problem head-on — keep everything we liked about CSS, and build upon the good work that the styles-in-JS community was producing. So, while we’re bullish about our approach and firmly defend the virtues of CSS, we owe a debt of gratitude to those folks pushing the boundaries in the other direction.
**Font Boosting**
[https://github.com/amfe/article/issues/10](https://github.com/amfe/article/issues/10)
「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
**The Log: What every software engineer should know about real-time data's unifying abstraction**
[http://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying](http://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying)
一篇 2013 年的老文，但质量很高，详细介绍了日志在系统中起到的关键作用，值得反复阅读。
**[译] JavaScript 性能优化杀手**
[http://www.w3ctech.com/topic/1474](http://www.w3ctech.com/topic/1474)
这篇文档包含了如何避免使代码性能远低于预期的建议. 尤其是一些会导致 V8 (牵涉到 Node.js, Opera, Chromium 等) 无法优化相关函数的问题.
**Android微信智能心跳方案**
[http://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=207243549&idx=1&sn=4ebe4beb8123f1b5ab58810ac8bc5994&scene=1](http://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=207243549&idx=1&sn=4ebe4beb8123f1b5ab58810ac8bc5994&scene=1)
这种方案在尽量不影响用户收消息及时性的前提下，根据网络类型自适应的找出保活信令TCP连接的尽可能大的心跳间隔，从而达到减少安卓微信因心跳引起的空中信道资源消耗，减少心跳Server的负载，以及减少部分因心跳引起的耗电。
**智能运维在百度日常业务监控中的探索**
[http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=207609097&idx=1&sn=52d71d23c165ed55583caceae3cb99cf&scene=0](http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=207609097&idx=1&sn=52d71d23c165ed55583caceae3cb99cf&scene=0)
本文以实际例子来讲解，在百度我们是如何帮助产品完成智能化运维监控之路的。主要内容包括：如何发现商业数据与运维数据的关系？如何进行异常的自动检测？如何解决报警风暴？如何进行自动故障定位？如何形成发现+定位+止损的监控闭环？
**架构腐化之谜**
[http://mp.weixin.qq.com/s?__biz=MjM5NTg2NTU0Ng==&mid=210816035&idx=3&sn=7ad903e7be165e2c616c20fa2f148f63&scene=1](http://mp.weixin.qq.com/s?__biz=MjM5NTg2NTU0Ng==&mid=210816035&idx=3&sn=7ad903e7be165e2c616c20fa2f148f63&scene=1)
作为在软件行业第一线工作多年的从业者，我们不得不面对一个现实，那就是当初采用新技术的乐趣随着项目周期的增长而迅速减少。无论当初的选择多么光鲜，半年、一年之后，只要这个项目依然活跃，业务在扩张——越来越多的功能需要加入，一些公共的问题就会逐渐显露出来。在长期运转的项目中，架构的腐化是怎么产生的？为什么常见的面向对象技术无法解决这类问题？如何延缓架构的腐化？本文将尝试解释这一切，并提出相应的解决方案。
**调试 CSS Keyframe 动画**
译文:[http://www.w3ctech.com/topic/1472](http://www.w3ctech.com/topic/1472)
原文:[https://css-tricks.com/debugging-css-keyframe-animations/](https://css-tricks.com/debugging-css-keyframe-animations/)
讲了很多在制作 CSS 动画的时候一些正确的触发机制以及一些小技巧，从而充分的提高性能，同时给出了几个比较好的 CSS 动画调试工具。
**Javascript 异步的进化史**
[https://blog.risingstack.com/asynchronous-javascript/](https://blog.risingstack.com/asynchronous-javascript/)
The async functions are just around the corner - but the journey to here was quite long. Not too long ago we just wrote callbacks, then the Promise/A+ specification emerged followed by generator functions and now the async functions.
**How Autodesk Implemented Scalable Eventing Over Mesos**
[http://highscalability.com/blog/2015/8/17/how-autodesk-implemented-scalable-eventing-over-mesos.html](http://highscalability.com/blog/2015/8/17/how-autodesk-implemented-scalable-eventing-over-mesos.html)
详细介绍了 Autodesk Cloud 后端所使用的各种技术。
**Google 关于图片优化的一些建议**
[https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=zh-cn](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=zh-cn)
处理图片是开发上绕不开的一环，而且图片的加载速度对于网站的体验意义重大。多国语言版。谷歌的[https://developers.google.com/web/fundamentals/performance/](https://developers.google.com/web/fundamentals/performance/) 这里有不少性能优化的资料，可以系统化的补充下相关知识。
**移动端点击、触碰随记**
[http://f2e.souche.com/blog/-yi-dong-duan-dian-ji-hong-peng-sui-ji/](http://f2e.souche.com/blog/-yi-dong-duan-dian-ji-hong-peng-sui-ji/)
这篇文章大概会花费20分钟时间去阅读，主要解决移动端延迟，点穿，焦点获取的问题。解析问题根本原因，给出最佳实践的方案。心急的话可以拉到最后。
**Leveling Up Your App With Advanced Bootstrap Features**
[http://developer.telerik.com/featured/leveling-up-your-app-with-advanced-bootstrap-features/](http://developer.telerik.com/featured/leveling-up-your-app-with-advanced-bootstrap-features/)
It’s time to take your Bootstrap skills to the next level. Let’s learn about powerful features like: fluid containers, visibility, offsets, push/pull and more. By learning these features, you’ll be able to recognize when they are needed and know how to implement them. It’s time to become a Bootstrap master, and leverage the full power of the framework, let’s dig in.
**Here are the Reasons I Deleted your Mobile App**
[http://developer.telerik.com/featured/here-are-the-reasons-i-deleted-your-mobile-app/](http://developer.telerik.com/featured/here-are-the-reasons-i-deleted-your-mobile-app/)
列举了一些常见问题并给出如何规避。
**Cross-platform UI in GitHub Desktop**
[http://githubengineering.com/cross-platform-ui-in-github-desktop/](http://githubengineering.com/cross-platform-ui-in-github-desktop/)
GitHub 桌面版基于 Electron 进行跨平台 UI 开发的经验。
**Image Scaling using Deep Convolutional Neural Networks — Flipboard Engineering**
[http://engineering.flipboard.com/2015/05/scaling-convnets/](http://engineering.flipboard.com/2015/05/scaling-convnets/)
使用深度学习来提升拉伸图片的质量，效果看起来很不错。
**Tasks, microtasks, queues and schedules**
[https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
作者很详细的讲解了在浏览器中 tasks、microtasks 存放在不同的事件池中，在事件触发时以怎样的机制来调用，以及不同浏览器对一些事件当成 microntasks 或是 tasks 导致同一份代码在不同浏览器上不同的运行结果。同时在事件触发调用的时候以堆栈动画的形式一步一步展示出来，可以让你更容易理解调用的机制。
**Scaling Node.js to 500 million Users**
[https://vimeo.com/136965797](https://vimeo.com/136965797)
一个实时消息平台使用 Node.js 支撑 5 亿用户月活的经验分享。
**What's happening in frontend now?**
[https://speakerdeck.com/koba04/whats-happening-in-frontend-now](https://speakerdeck.com/koba04/whats-happening-in-frontend-now)
对近几年出现的前端技术进行了综述，如果你有一段时间没关注前端了，可以看看这关 PPT 来了解最近都发生了什么。
## 深阅读 - Ext
**Gartner 发布 2015年 技术成熟度曲线**
[http://www.gartner.com/newsroom/id/3114217](http://www.gartner.com/newsroom/id/3114217)
[http://36kr.com/p/5036534.html](http://36kr.com/p/5036534.html)
这个报告对了解科技发展趋势非常有参考意义，哪些。
**极路由安全设计架构分析**
[http://www.freebuf.com/articles/terminal/75524.html](http://www.freebuf.com/articles/terminal/75524.html)
现代智能路由器是目前物联网发展链条上一个不可或缺的重要组成部分，搞清楚其架构设计对将来设计物联网有深远的影响，当然为更安全的设计物联网架构起到关键作用。本文将针对智能路由器的代表“极路由”的安全设计架构进行详细的分析。
**Basic CPU Tutorial**
[https://embeddedmicro.com/tutorials/lucid/basic-cpu](https://embeddedmicro.com/tutorials/lucid/basic-cpu)
教你如何使用 Lucid 语言开发一个简单的 CPU。
**十大注定要被淘汰的安全技术**
[http://mp.weixin.qq.com/s?__biz=MjM5Njc3NjM4MA==&mid=207543992&idx=1&sn=daadd056db59aaae52b8b7f9ac302940&scene=2](http://mp.weixin.qq.com/s?__biz=MjM5Njc3NjM4MA==&mid=207543992&idx=1&sn=daadd056db59aaae52b8b7f9ac302940&scene=2)
攻击和技术的步伐持续前进，即使是所谓最尖端的防御技术，比如生物认证和高级防火墙，都终将失败并退出局面。下面是那些注定要进入历史教科书的安全防御技术，我们五到十年后再翻开这篇文章，一定会超出你的想像。
## 新鲜货
**Centrifugo**
[https://github.com/centrifugal/centrifugo](https://github.com/centrifugal/centrifugo)
Go 写的 Websockets 实时消息服务
**Phaser – A fast, fun and free open source HTML5 game framework**
[http://phaser.io/](http://phaser.io/)
[https://github.com/photonstorm/phaser](https://github.com/photonstorm/phaser)
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
**Color Pickers from Sketch, Photoshop, Chrome & more**
[https://github.com/casesandberg/react-color/](https://github.com/casesandberg/react-color/)
7 Different Pickers - Sketch, Photoshop, Chrome and many more. Popup or Block - It can be used it as a popup or always visible. Make Your Own - Use the building block components to make your own
**GoTTY - Share your terminal as a web application**
[https://github.com/yudai/gotty](https://github.com/yudai/gotty)
**Chronos - a distributed task scheduler**
[https://github.com/mesos/chronos](https://github.com/mesos/chronos)
[https://aphyr.com/posts/326-call-me-maybe-chronos](https://aphyr.com/posts/326-call-me-maybe-chronos)
Chronos is a replacement for cron. It is a distributed and fault-tolerant scheduler that runs on top of Apache Mesos that can be used for job orchestration. It supports custom Mesos executors as well as the default command executor. Thus by default, Chronos executes sh (on most systems bash) scripts.
**lantern**
[https://github.com/getlantern/lantern](https://github.com/getlantern/lantern)
一个加快网速的开源软件。
**Language Trends on GitHub**
[https://github.com/blog/2047-language-trends-on-github](https://github.com/blog/2047-language-trends-on-github)
java 增势惊人，已经排第二了。
**Go 1.5 is released**
[https://blog.golang.org/go1.5](https://blog.golang.org/go1.5)
[http://www.infoq.com/cn/news/2015/08/go-1.5-released](http://www.infoq.com/cn/news/2015/08/go-1.5-released)
此版本包括大量重大改进，编译工具链从 C 转换到 Go，以Go编译Go，从 Go 代码库中完全移除 C 代码。完全重新设计了垃圾收集器，减少垃圾收集器的停顿时间。
**KOA 1.0.0**
[https://github.com/koajs/koa/releases/tag/1.0.0](https://github.com/koajs/koa/releases/tag/1.0.0)
已经趋于稳定，大家可以放心用了。
**Bootstrap 4 alpha**
[http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/](http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/)
Moved from Less to Sass; Dropped IE8 support and moved to rem and em units; Consolidated all our HTML resets into a new module, Reboot.
**Test versions of IE from 6 through 11 and Microsoft Edge using virtual machines**
[http://dev.modern.ie/tools/vms/mac/](http://dev.modern.ie/tools/vms/mac/)
有各种版本的环境，对兼容性测试有意义。
**JavaScript实现类的private、protected、public、static以及继承**
[http://blog.csdn.net/yorhomwang/article/details/47807969](http://blog.csdn.net/yorhomwang/article/details/47807969)
挺能折腾的，还是等 ES 规范来拯救世界吧。
**Android大神**
[http://yeungeek.com/android%E5%A4%A7%E7%A5%9E/](http://yeungeek.com/android%E5%A4%A7%E7%A5%9E/)
对 android 开发有兴趣的同学可以关注这些资源。
**What are the best programming text editors?**
[http://www.slant.co/topics/12/compare/~sublime-text_vs_vim_vs_emacs](http://www.slant.co/topics/12/compare/~sublime-text_vs_vim_vs_emacs)
毫无疑问是 sublime
**Build, display, and solve algebraic equations in JavaScript**
[http://algebra.js.org/](http://algebra.js.org/)
一个方程式相关的的工具库 algebra.js
**GitHub Linker**
[https://github.com/github-linker/chrome-extension](https://github.com/github-linker/chrome-extension)
The GitHub Linker is a Google Chrome Extension which makes import statements clickable and more. 有了这个插件，看代码方便多了
**Imba – A new programming language for the web**
[http://imba.io/](http://imba.io/)
Imba is a new programming language for the web that compiles to performant and readable JavaScript. It has language level support for defining, extending, subclassing, instantiating and rendering dom nodes. For a semi-complex application like TodoMVC, it is more than 20 times faster than React with less code, and a much smaller library.
**itemplate**
[https://github.com/Rapid-Application-Development-JS/itemplate](https://github.com/Rapid-Application-Development-JS/itemplate)
将模板转成 Incremental DOM 操作的工具，不知道能不能提升性能。
**HHVM 3.9**
[http://hhvm.com/blog/9995/hhvm-3-9-0](http://hhvm.com/blog/9995/hhvm-3-9-0)
据说提升了一些的性能。
## 产品及其它
**Facebook内部高效工作PPT指南**
[http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=207614267&idx=2&sn=e0b956203d212545697e305e0623ae2f&scene=0#rd](http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=207614267&idx=2&sn=e0b956203d212545697e305e0623ae2f&scene=0#rd)
当你在状态时，就多干点，不然就好好休息；保持专注，一心一用；动手做，胜过任何完美的想象；给所有事情都设定一个期限...
**和 Vue.js 框架的作者聊聊前端框架开发背后的故事**
[http://teahour.fm/2015/08/16/vuejs-creator-evan-you.html](http://teahour.fm/2015/08/16/vuejs-creator-evan-you.html)
这一期我们将聊到非常多前端框架和技术，大家也可以听到小右同学对各种前端框架和技术的点评，如果你正愁如何选择你的前端工具栈, 我相信这一期将会对你有非常大的帮助。(涉及到的技术包含 Knockout, BackboneJS, Spine, Marionette, AngularJS, Ember, Ractive.js, React, Flux, webpack, Karma， Jasmine 等等等等)
**Inside Amazon: Wrestling Big Ideas in a Bruising Workplace**
[http://www.nytimes.com/2015/08/16/technology/inside-amazon-wrestling-big-ideas-in-a-bruising-workplace.html](http://www.nytimes.com/2015/08/16/technology/inside-amazon-wrestling-big-ideas-in-a-bruising-workplace.html)
揭秘 Amazon 内部苛刻的工作环境，不过后来又有内部员工反馈和实际情况有偏差[https://www.tbray.org/ongoing/When/201x/2015/08/16/Working-at-Amazon](https://www.tbray.org/ongoing/When/201x/2015/08/16/Working-at-Amazon)
**真正受过教育的人，应该有这样的思维方式**
[http://mp.weixin.qq.com/s?__biz=MzA3NDc1NjgwMg==&mid=213790401&idx=1&sn=4945923f31a3c72de61ab7357d1a2ed2&scene=2](http://mp.weixin.qq.com/s?__biz=MzA3NDc1NjgwMg==&mid=213790401&idx=1&sn=4945923f31a3c72de61ab7357d1a2ed2&scene=2)
坚持、感恩的心、选择、反思...瞬间觉得自己像没受过教育的。教育的本质在于：教育的本质是帮助我们理解了如何去思考，让我们掌控如何去看待这个世界。在繁琐无聊的生活中，时刻保持有意识（Self-awareness），知道什么对你是重要的，学会控制你的想法。
**揭秘谷歌网络基础设施十年演变过程**
[http://techcrunch.cn/2015/08/19/how-googles-networking-infrastructure-has-evolved-over-the-last-10-years/](http://techcrunch.cn/2015/08/19/how-googles-networking-infrastructure-has-evolved-over-the-last-10-years/) （译文）[http://techcrunch.com/2015/08/18/how-googles-networking-infrastructure-has-evolved-over-the-last-10-years/](http://techcrunch.com/2015/08/18/how-googles-networking-infrastructure-has-evolved-over-the-last-10-years/) （原文） 把越来越多的机器更有效地连接起来，这本身就是一个非常有挑战的事情。 谷歌数据中心目前已经拥有十万台机器，本文记录了其网络基础设施的演变过程。
**算法、技术及其它**
[http://www.cnblogs.com/aquastone/p/algorithm-technology-and-others.html](http://www.cnblogs.com/aquastone/p/algorithm-technology-and-others.html)
一位算法工程师对自己工作的反思，写得挺实在的。
**他才21岁，却要改变这个世界，因为大海被人弄脏了**
[http://mp.weixin.qq.com/s?__biz=MzA4NTg5MjMxNQ==&mid=209350413&idx=1&sn=391f6b86451f0d18b057992402fed73a&scene=4](http://mp.weixin.qq.com/s?__biz=MzA4NTg5MjMxNQ==&mid=209350413&idx=1&sn=391f6b86451f0d18b057992402fed73a&scene=4)
一个很帅的少年，从17岁开始，决定要把海洋洗干净，然后竟然快做到了。很棒的小伙，有梦想一定要行动。