FEX 技術周刊 - 2015/11/02 · FEX 技術周刊

## 業界會議 **Geekon 極棒安全峰會** [http://geekon2015.geekpwn.org/](http://geekon2015.geekpwn.org/) **2015 架構師大會 10.22-10.24** [http://sacc.it168.com/about.html](http://sacc.it168.com/about.html) 高端會議，期待資料 ## 深閱讀 **回歸CSS標準之Float** [http://efe.baidu.com/blog/float/](http://efe.baidu.com/blog/float/) 這篇文章打算通過將目前一些成文的浮動元素的特點與CSS規范中的具體描述對應，來加深大家對float屬性原理的理解。并在后面通過一個bug實例，說明使用這個屬性時要注意的問題。 **[ISUX轉譯]iOS 9人機界面指南（一）：UI設計基礎** [http://isux.tencent.com/ios9-guideline-ch1.html](http://isux.tencent.com/ios9-guideline-ch1.html) iOS9 人機界面指南的中文版，英文苦手的同學有福了 **淘寶前端團隊（FED）- 官方 Blog 閃亮登場** [http://taobaofed.org/](http://taobaofed.org/) 已經有幾篇精彩文章，歡迎圍觀。 **Re:work – tools and lessons to make work better** [https://rework.withgoogle.com/](https://rework.withgoogle.com/) Practices, research, and ideas from Google and other organizations to put people first. **Introducing Shadow DOM API** [https://www.webkit.org/blog/4096/introducing-shadow-dom-api/](https://www.webkit.org/blog/4096/introducing-shadow-dom-api/) We’re pleased to announce that basic support for the new slot-based shadow DOM API we proposed in April is now available in the nightly builds of WebKit after r190680\. Shadow DOM is a part of Web Components, a set of specifications that were initially proposed by Google to enable the creation of reusable widgets and components on the Web. **GitHub 漫游指南** [http://github.phodal.com/](http://github.phodal.com/) 作者寫得蠻用心的，通過自身的真實故事像我們介紹了 Github 這個神級產品，值得認真看看。這年頭如果你還沒用過 Github 或者 Gitlab，真心不好意思說自己是碼農。 **互聯網式焦慮：莫名其妙優越感** [http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=401883823&idx=1&sn=dc1b7f30a340e498db044124d340c5ca](http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=401883823&idx=1&sn=dc1b7f30a340e498db044124d340c5ca) 每個人都有不同的選擇，都需要尊重。客觀的認知，理性的選擇，也許我們僅僅不希望后悔，當我們為這個行業揮灑青春與血汗的時候；也許我們僅僅不希望虛無，當我們為這個行業奉獻到大部分生命之后。每個人的力量那么的微小，很難左右行業的變遷，而也許我們只能去適應，去努力，去渴望，去等待。 **[譯]TypeScript 大法好！** [https://github.com/techird/blog/issues/1](https://github.com/techird/blog/issues/1) [https://medium.com/@vivainio/typescript-is-pretty-good-d8fecf80ea0c](https://medium.com/@vivainio/typescript-is-pretty-good-d8fecf80ea0c) 為什么說跟 ES6 比起來，TypeScript 更好呢？現在前端社區開始普遍接受轉譯的做法了（即把各種語法轉換成 JS 執行）。雖然還是有部分 ES5 的死忠粉，但他們之中，有絕大部分在一旦在心里接受了 Crockford 的信仰之后，也會忘掉過往固執的經驗并且開始轉軍接受。另附：與大師面對面 - TypeScript 的現狀與未來?[http://www.w3ctech.com/topic/1553](http://www.w3ctech.com/topic/1553) **What PostgreSQL has over other open source SQL databases** [https://www.compose.io/articles/what-postgresql-has-over-other-open-source-sql-databases/](https://www.compose.io/articles/what-postgresql-has-over-other-open-source-sql-databases/) [https://www.compose.io/articles/what-postgresql-has-over-other-open-source-sql-databases-part-ii/](https://www.compose.io/articles/what-postgresql-has-over-other-open-source-sql-databases-part-ii/) You may be asking yourself "Why PostgreSQL?" There are several choices for open source relational databases out there (we looked at MySQL, MariaDB and Firebird for this article), but what does PostgreSQL have that they don't? PostgreSQL's tag line claims that it's: "The world's most advanced open source database." We'll give you a few reasons why PostgreSQL makes this claim. **前端優化帶來的思考，淺談前端工程化** [http://www.cnblogs.com/yexiaochai/p/4901341.html](http://www.cnblogs.com/yexiaochai/p/4901341.html) 性能優化的實踐，總結得蠻好的。 **后端開發書架2015 2.0版** [http://calvin1978.blogcn.com/articles/bookshelf.html](http://calvin1978.blogcn.com/articles/bookshelf.html) 大神江南白衣整理的服務端開發書目，隨著 Node 的持續推進，前端正風風火火的殺入服務端開發這個領域，問題域的變化使得我們必須儲備新知識，這份清單挺有幫助的。 **ReFlux細說** [http://www.html-js.com/article/3204](http://www.html-js.com/article/3204) Flux作為一種應用架構（application architecture）或是設計模式（pattern），闡述的是單向數據流（a unidirectional data flow）的思想，并不是一個框架（framework）或者庫（library）。Reflux，是另一個實現Flux模式的庫，旨在使整個應用架構變得更加簡單。準確地說，Reflux是由Facebook Flux演變而來（inspired by Facebook Flux），可以說是它的一個進化版本。這個文章對 Flux ReFlux 的分析非常清晰的，值得對 React 不熟的同學看看。 **Long-running Node processes** [http://spanningcloudapps.github.io/2015/10/12/Long-running-Node-processes/](http://spanningcloudapps.github.io/2015/10/12/Long-running-Node-processes/) Node 的一個經典問題，可以了解下這篇文章的經驗。 **From REST to GraphQL** [https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b#.i715zzvky](https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b#.i715zzvky) 對 GraphQL 的詳細介紹，這個協議很適合移動端應用。 **React Native For Android 架構初探** [http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=207782506&idx=1&sn=3ff6b03c0d59fbda406f64739d9272cf&scene=1&srcid=1009Q3qo6mLeT2ydjdzUwLQ7&from=groupmessage&isappinstalled=0#rd](http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=207782506&idx=1&sn=3ff6b03c0d59fbda406f64739d9272cf&scene=1&srcid=1009Q3qo6mLeT2ydjdzUwLQ7&from=groupmessage&isappinstalled=0#rd) 分析了 React Native Android 是如何實現的。 **Five Things Old Programmers Should Remember** [https://medium.com/@garywiz/five-things-old-programmers-need-to-remember-e78caf0b0973#.noc8x7fk2](https://medium.com/@garywiz/five-things-old-programmers-need-to-remember-e78caf0b0973#.noc8x7fk2) 對于老程序員的建議 **The Stack That Helped Medium Drive 2.6 Millennia of Reading Time** [https://medium.com/medium-eng/the-stack-that-helped-medium-drive-2-6-millennia-of-reading-time-e56801f7c492#.e92opawl7](https://medium.com/medium-eng/the-stack-that-helped-medium-drive-2-6-millennia-of-reading-time-e56801f7c492#.e92opawl7) 詳盡介紹了 Medium 中所使用的技術，主要是基于 Node 和 DynamoDB **漫談Web前端的『組件化』** [http://leeluolee.github.io/fequan-netease/#/1](http://leeluolee.github.io/fequan-netease/#/1) 來自網易前端的經驗。 **騰訊防刷負責人：基于用戶畫像大數據的電商防刷架構** [http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=400931866&idx=1&sn=b96873fc9f726e5705b2653968f1d992](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=400931866&idx=1&sn=b96873fc9f726e5705b2653968f1d992) **HTTP/2 頭部壓縮技術介紹** [https://imququ.com/post/header-compression-in-http2.html](https://imququ.com/post/header-compression-in-http2.html) 我們知道，HTTP/2 協議由兩個 RFC 組成：一個是 RFC 7540，描述了 HTTP/2 協議本身；一個是 RFC 7541，描述了 HTTP/2 協議中使用的頭部壓縮技術。本文將通過實際案例帶領大家詳細地認識 HTTP/2 頭部壓縮這門技術。 **The Art of Debugging** [https://remysharp.com/2015/10/14/the-art-of-debugging](https://remysharp.com/2015/10/14/the-art-of-debugging) This is the accompanying article for my Art of Debugging talk that I first gave at Fronteers in Amsterdam in 2015\. TL;DR: learn every tool that's available to use, use them as you need them, enjoy bug bustin' - it's certainly more fun pounding the keyboard and working on a 6 month feature drive. **Do you know how much your computer can do in a second?** [http://computers-are-fast.github.io/](http://computers-are-fast.github.io/) Let's find out how well you know computers! All of these programs have a variable NUMBER in them. Your mission: guess how big NUMBER needs to get before the program takes 1 second to run. **58同城沈劍：好的架構是進化來的，不是設計來的** [http://ws.oneapm.com/shenjian-oneapm-course/](http://ws.oneapm.com/shenjian-oneapm-course/) 對很多創業公司而言，隨著業務的增長，網站的流量也會經歷不同的階段。從十萬流量到一百萬流量，再從一百萬流量跨越到一千萬甚至上億的流量，網站的架構需要經歷哪些變化？我們一起聽聽 58 同城的技術委員會執行主席沈劍在 OneAPM 技術公開課上的演講。 ## 新鮮貨 **Babel 6.0.0 Released** [https://babeljs.io/blog/2015/10/29/6.0.0/](https://babeljs.io/blog/2015/10/29/6.0.0/) **weui** [https://github.com/weui/weui](https://github.com/weui/weui) 微信官方設計團隊推出的前端 UI 庫，可以用于微信頁面的開發，保持風格統一。 **React Desktop** [https://github.com/gabrielbull/react-desktop](https://github.com/gabrielbull/react-desktop) 可以用來做 Mac 和 Windows 桌面應用的 React UI 庫。 **WebGL 版 BMW i8** [http://playcanv.as/p/RqJJ9oU9?overlay=false](http://playcanv.as/p/RqJJ9oU9?overlay=false) 基于 playcanvas，渲染效果不錯。 **Sketch 3.4** [http://blog.sketchapp.com/](http://blog.sketchapp.com/) **參加SF.GG黑客馬拉松項目技術要點總結** [http://f2e.souche.com/blog/2015-hackathon-summary/](http://f2e.souche.com/blog/2015-hackathon-summary/) 玩 Hackathon 的果然是各種新技術，很潮。 **Guide To Using WebP Images Today: A Case Study** [http://www.smashingmagazine.com/2015/10/webp-images-and-performance/](http://www.smashingmagazine.com/2015/10/webp-images-and-performance/) They say a picture is worth a thousand words. But online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a web page’s total size on average. Given this, image optimization is key, especially considering that many users will abandon a request if it doesn’t load within a few seconds. **VMD - preview markdown files** [https://github.com/yoshuawuyts/vmd](https://github.com/yoshuawuyts/vmd) Preview markdown files in a separate window. Markdown is formatted exactly the same as on GitHub. **CSSgram** [http://una.im/CSSgram/](http://una.im/CSSgram/) A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes. **Walkthrough to upgrade an Angular 1.x component to Angular 2** [http://toddmotto.com/walkthrough-to-migrate-an-angular-1-component-to-angular-2/](http://toddmotto.com/walkthrough-to-migrate-an-angular-1-component-to-angular-2/) In this article we’re going to look at upgrading your first Angular 1.x component, a simple todo app, across to Angular 2 code. We’ll compare the API differences, templating syntaxes and hopefully it’ll shed some light on upgrading to Angular 2, and well as making it appear less daunting. **Vue.js 1.0.0 Released** [http://zhuanlan.zhihu.com/evanyou/20302927](http://zhuanlan.zhihu.com/evanyou/20302927) [http://vuejs.org/2015/10/26/1.0.0-release/](http://vuejs.org/2015/10/26/1.0.0-release/) Improved Template Syntax; API Cleanup; Faster Initial Rendering; More Powerful Tooling. **jpacks** [https://github.com/zswang/jpacks](https://github.com/zswang/jpacks) 集鵠大叔還開源的一個二進制結構編解碼工具，同時開源的還有?[https://github.com/zswang/jints](https://github.com/zswang/jints) **Announcing Rust 1.4** [http://blog.rust-lang.org/2015/10/29/Rust-1.4.html](http://blog.rust-lang.org/2015/10/29/Rust-1.4.html) [https://github.com/rust-lang/rust/blob/8ab8581f6921bc7a8e3fa4defffd2814372dcb15/RELEASES.md#version-140-october-2015](https://github.com/rust-lang/rust/blob/8ab8581f6921bc7a8e3fa4defffd2814372dcb15/RELEASES.md#version-140-october-2015) Rust是Mozilla開發的注重安全、性能和并發性的編程語言，現正式發布1.4穩定版，此次升級1200個補丁。另附： Writing an OS in Rust[http://blog.phil-opp.com/](http://blog.phil-opp.com/) **Node 5.0發布** [http://alinode.aliyun.com/blog/11](http://alinode.aliyun.com/blog/11) [https://nodejs.org/en/blog/release/v5.0.0/](https://nodejs.org/en/blog/release/v5.0.0/) [https://nodejs.org/en/blog/community/node-v5/](https://nodejs.org/en/blog/community/node-v5/) 我了個去，這是要學 Chrome 成為版本帝嗎，可是作為編程語言，這樣快速升級，真的好嗎？ **ThinkJS 2.0** [https://imququ.com/post/thinkjs-2.html](https://imququ.com/post/thinkjs-2.html) [https://thinkjs.org/](https://thinkjs.org/) ThinkJS 是奇舞團開源的一款 Node Web MVC 框架。ThinkJS 2.0 Slogan 換成了「The web framework beyond your dreams」，這也是本文標題的來源。如果說 ThinkJS 1.0 的 Slogan 樸實而理性，那 2.0 的 Slogan 給我的感覺絕對是性感而充滿力量。 **Remote 遠程控制SDK** [https://github.com/akira-cn/remote](https://github.com/akira-cn/remote) 大神月影開源的小工具：基于socket.io的遠程控制SDK，允許你的PC網頁被手機終端遠程控制 **MWeb Lite** [http://zh.mweb.im/](http://zh.mweb.im/) [http://coderforart.com/mweb-1.8.1-release.html](http://coderforart.com/mweb-1.8.1-release.html) MWeb Lite 的定位是 Markdown 編輯器和一些 MWeb 正式版的功能的體驗。對于輕度使用 Markdown 的朋友來說， MWeb Lite 已足夠了，MWeb 正式版的功能大部分用不到。MD 編輯器似乎已經有不少商業化產品了。這也是一個 MD 產品?[http://classeur.io/](http://classeur.io/) **PyPy 4.0.0 Released - A Jit with SIMD Vectorization and More** [http://morepypy.blogspot.de/2015/10/pypy-400-released-jit-with-simd.html](http://morepypy.blogspot.de/2015/10/pypy-400-released-jit-with-simd.html) We’re pleased and proud to unleash PyPy 4.0.0, a major update of the PyPy python 2.7.10 compatible interpreter with a Just In Time compiler. We have improved warmup time and memory overhead used for tracing, added vectorization for numpy and general loops where possible on x86 hardware (disabled by default), refactored rough edges in rpython, and increased functionality of numpy. **第 24 屆國際 C 語言混亂代碼大賽結果出爐** [http://blog.jobbole.com/93692/](http://blog.jobbole.com/93692/) 這代碼看的也是罪了。 ## 產品及其它 **What a Deep Neural Network thinks about your #selfie** [http://karpathy.github.io/2015/10/25/selfie/](http://karpathy.github.io/2015/10/25/selfie/) Convolutional Neural Networks are great: they recognize things, places and people in your personal photos, signs, people and lights in self-driving cars, crops, forests and traffic in aerial imagery, various anomalies in medical images and all kinds of other useful things. **PHP對戰Node.js：我們曾相愛，想到就心酸** [http://mp.weixin.qq.com/s?__biz=MjM5MDI5MjAyMA==&mid=400167099&idx=1&sn=4c93fd716539c8d5419aa652b7a30f6a](http://mp.weixin.qq.com/s?__biz=MjM5MDI5MjAyMA==&mid=400167099&idx=1&sn=4c93fd716539c8d5419aa652b7a30f6a) 兩位昔日好友如今分道揚鑣，甚至被迫陷入了你死我活的斗爭當中。剛開始的分歧并不嚴重，無非是一位老友對于另一位伙伴長久以來占據、但又絕口不提的業務領域產生了點興趣。另附：專訪 PHP 之父-PHP7 性能翻倍的關鍵[http://www.admin10000.com/document/6753.html](http://www.admin10000.com/document/6753.html) **凱文·凱利最新演講：未來20年科技的必然走向** [http://mp.weixin.qq.com/s?__biz=MzA4MjAxODMzMA==&mid=400294559&idx=2&sn=b0e635056741ac35476aac6424c0bd3d](http://mp.weixin.qq.com/s?__biz=MzA4MjAxODMzMA==&mid=400294559&idx=2&sn=b0e635056741ac35476aac6424c0bd3d) 另附這位神奇老頭的另一個文章：?[http://mp.weixin.qq.com/s](http://mp.weixin.qq.com/s)? __biz=MzA3NTUwODQxOQ==&mid=400410215&idx=3&sn=f71798b1fedda57ce3d4bb4312e3321a **聽百度和科大訊飛談語音技術現狀** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400189223&idx=1&sn=1cb32bee42de626443ebadbf065ec79c](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400189223&idx=1&sn=1cb32bee42de626443ebadbf065ec79c) [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400205267&idx=1&sn=c95916547119be179dcc8895d3b44ad9](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400205267&idx=1&sn=c95916547119be179dcc8895d3b44ad9) 2011年之后，深度學習技術引入到語音識別之后，大家也一直再問一個問題，深度學習技術還能像剛提出時候那樣，持續大幅度提升現在的語音識別技術嗎？語音技術能夠從小規模的使用轉向全面產業化成熟嗎? **設計規范如何寫，這20個精選案例讓你大開眼界** [http://mp.weixin.qq.com/s?__biz=MjM5MzYyNjQyNQ==&mid=400268146&idx=1&sn=02d57397fd46e1de92d166a08a129e27](http://mp.weixin.qq.com/s?__biz=MjM5MzYyNjQyNQ==&mid=400268146&idx=1&sn=02d57397fd46e1de92d166a08a129e27) 給出了業界一些公司的設計規范，值得參考。