FEX 技術周刊-2015/08/24 · FEX 技術周刊

## 業界會議 **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歲開始，決定要把海洋洗干凈，然后竟然快做到了。很棒的小伙，有夢想一定要行動。