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

## 業界會議 **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) 提升團隊的協作開發效率，除了合理的溝通，擁抱隊友之外，還需要工程師們打破開發的職責邊界，不要僅將自己的技術視野定在工作所需，向外擴展，會在協作時減少不必要的磨合。