FEX 技術周刊 - 2015/09/28 · FEX 技術周刊

## 百度WEB技術專欄 **LineUp：多屬性排序的可視分析** [http://efe.baidu.com/blog/lineup/](http://efe.baidu.com/blog/lineup/) 在我們的日常生活中經常會遇到各種各樣的排序列表，排序是將無序的數據項集合重組的普遍方式，它基于數據項的單個或多個屬性值為數據項計算一個排名。 ## 深閱讀 **How Chromium Works** [https://medium.com/@aboodman/in-march-2011-i-drafted-an-article-explaining-how-the-team-responsible-for-google-chrome-ships-c479ba623a1b](https://medium.com/@aboodman/in-march-2011-i-drafted-an-article-explaining-how-the-team-responsible-for-google-chrome-ships-c479ba623a1b) Today, I’d like to tell you about how Chromium works. Not Chrome, the browser, but Chromium, the group of people who build the browser. Hundreds of engineers work on the Chromium project. Together we commit about 800 changes to the codebase every single week. We also depend on many other large and active projects like V8, Skia, and WebKit. **ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？** 譯文?[http://huangxuan.me/2015/09/22/js-version/](http://huangxuan.me/2015/09/22/js-version/) 原文?[http://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/](http://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/) 譯者：我們天天都在說 ES6/ES7，那 ES2015/ES2016 又是哪來的名字？到底哪個才是正確的？想要嚴謹的裝逼，本文帶你一同回顧， 20 歲的 JavaScript，從誕生到今天的命名黑歷史 **N|Solid? is the premier Enterprise-grade Node.js? platform** [https://nodesource.com/products/nsolid](https://nodesource.com/products/nsolid) It provides developers, DevOps and operations staff an optimized platform for running Node.js applications at scale, with confidence. N|Solid delivers greater understanding, predictability, and availability of your critical Node applications through a secure, high-performance, highly instrumented Node implementation. **Scroll Snapping with CSS Snap Points** [https://www.webkit.org/blog/4017/scroll-snapping-with-css-snap-points/](https://www.webkit.org/blog/4017/scroll-snapping-with-css-snap-points/) Scroll snapping allows you to define special points in the content of a scrollable container using CSS. When a user scrolls in this container, the scroll offset will come to rest at one of these special offsets. **[專訪]如何構建高可用和可伸縮的架構** [http://www.csdn.net/article/2015-09-22/2825769-CTO](http://www.csdn.net/article/2015-09-22/2825769-CTO) 如何構建高可用和可伸縮架構？有哪些關鍵的技術節點和難點挑戰？對于公司來說，為什么有必要考慮高可用可伸縮？本文為@七牛云存儲首席架構師李道兵在CTO講堂中的精彩分享整理。 **How to Write a Git Commit Message** [http://chris.beams.io/posts/git-commit/](http://chris.beams.io/posts/git-commit/) Git 正在大規模應用，commit msg 在研發中非常重要，這個文章很有參考價值。 **CSS3硬件加速也有坑！！！** [http://div.io/topic/1348](http://div.io/topic/1348) 傳說中的CSS 3硬件加速也是有坑啊。 **Ten Rules for Open Source Succes** [http://hintjens.com/blog:95](http://hintjens.com/blog:95) Everyone wants it, lots of people try it, yet doing it is mostly painful and irritating. I'm speaking about free software aka open source. Today I'm going to summarize 30 years of coding experience in ten management-proof bullet points. **Launching nginScript and Looking Ahead** [https://www.nginx.com/blog/launching-nginscript-and-looking-ahead/](https://www.nginx.com/blog/launching-nginscript-and-looking-ahead/) nginScript is a robust implementation of much of JavaScript, including the parts most useful for configuring NGINX. nginScript can be used for quick fixes, making NGINX configuration more convenient and operations more efficient. But, because it runs at the application delivery level, it will also enable you to refactor your applications for greater long-term stability, security, and scale. 另外 NGINX 1.9.5 將支持 HTTP/2?[https://www.nginx.com/blog/nginx-1-9-5/](https://www.nginx.com/blog/nginx-1-9-5/) **可視化你的足跡** [http://icodeit.org/2015/09/visualize-your-steps/](http://icodeit.org/2015/09/visualize-your-steps/) [http://icodeit.org/2015/09/show-your-map-in-browser/](http://icodeit.org/2015/09/show-your-map-in-browser/) 在本文中，我們通過將日常中很容易收集到的數據，通過一系列的處理，并最終展現在地圖上。這僅僅是GIS的一個很簡單場景，但是我們可以看到，當空間數據和地圖結合在一起時，可以在可視化上得到很好的效果，讀者可以很容易從中獲取信息。 **Back to the :roots** [http://simurai.com/blog/2015/09/09/back-to-the-roots/](http://simurai.com/blog/2015/09/09/back-to-the-roots/) 文中通過4個例子演示了當使用CSS時，使用能繼承父節點的一些屬性有時候會來帶很好的效果。 **uses mathematics and code together to make art** [https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/](https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/) 文中以 step-by-step 的方式介紹了一個很炫的3D旋轉的類似多米諾骨牌效應的效果。 **如果業界中不用高級算法和數據結構，那為什么還要學?** [http://blog.jobbole.com/91815/](http://blog.jobbole.com/91815/) 這是一個你無法說清楚自己會在什么時候用到它，但是卻在潛移默化中被其影響的東東，所以你要學。 **架構之路（二）：性能** [http://www.csdn.net/article/2015-09-22/2825773](http://www.csdn.net/article/2015-09-22/2825773) 文中講述了不應該因為過分追求性能的優化而去影響代碼的可讀性，這并不無道理。在很多時候我們也確實應該衡量性能的提升會帶來的產出與投入是否對稱，根據實際應用場景來進行處理。 **ES6 in Depth Strings & Array Extensions** [http://ponyfoo.com/articles/es6-strings-and-unicode-in-depth](http://ponyfoo.com/articles/es6-strings-and-unicode-in-depth) [http://ponyfoo.com/articles/es6-array-extensions-in-depth](http://ponyfoo.com/articles/es6-array-extensions-in-depth) 介紹了 Strong 的 from、of、copyWithin、fill、find等方法，Array 的一些新的方法以及對unicode的新支持，例如emoji。 **The Asset Pipeline** [http://guides.rubyonrails.org/asset_pipeline.html](http://guides.rubyonrails.org/asset_pipeline.html) 關于 Asset pipeline 的詳細介紹 **JS中的二進制操作簡介** [http://jimliu.net/2015/09/26/a-brief-look-at-binary-ops-in-js/](http://jimliu.net/2015/09/26/a-brief-look-at-binary-ops-in-js/) 隨著 JS 應用場景的增多，處理二進制已經越來越常見，這個文章介紹了 JS 處理二進制數據的一些基礎知識。 **【Deep Learning】From AI to True-AI** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=211012086&idx=1&sn=2a217f842a1430891a2a42e913a55ab9&scene=1&srcid=0925tQ6ZfZJSDJgtOSnqe1SR#rd](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=211012086&idx=1&sn=2a217f842a1430891a2a42e913a55ab9&scene=1&srcid=0925tQ6ZfZJSDJgtOSnqe1SR#rd) 聽360研究院負責人科普高科技，Brain-Like 和 Baby-Like 這樣的抽象很容易理解。另附 Google 工程師制作關于機器學習和神經網絡的科普視頻?[http://video.weibo.com/show?fid=1034:06d167d21be3cb57d915646f3251b8ed](http://video.weibo.com/show?fid=1034:06d167d21be3cb57d915646f3251b8ed) **Goodbye, Native Mobile Apps - Why Atavist is betting on the web** [https://atavistinsider.atavist.com/goodbye-native-mobile-apps/](https://atavistinsider.atavist.com/goodbye-native-mobile-apps/) Atavist 是一個新聞資訊類網站，這篇文章介紹了他們在移動端的 Web 實踐之路。 ## 新鮮貨 **GitLab 8.0 released with new looks and integrated CI!** [https://about.gitlab.com/2015/09/22/gitlab-8-0-released/](https://about.gitlab.com/2015/09/22/gitlab-8-0-released/) 好多個功能升級，值得更新。 **Zulip - Powerful open source group chat** [https://blogs.dropbox.com/tech/2015/09/open-sourcing-zulip-a-dropbox-hack-week-project](https://blogs.dropbox.com/tech/2015/09/open-sourcing-zulip-a-dropbox-hack-week-project) [https://www.zulip.org/](https://www.zulip.org/) Dropbox has open-sourced Zulip, a group chat application optimized for software development teams that was acquired by Dropbox in 2014. **Introducing Lemur** [http://techblog.netflix.com/2015/09/introducing-lemur.html](http://techblog.netflix.com/2015/09/introducing-lemur.html) Netflix is pleased to announce the open source release of our x.509 certificate orchestration framework : Lemur! **Fresh Resources for Developers – September 2015** [https://codegeekz.com/fresh-resources-for-developers-september-2015/](https://codegeekz.com/fresh-resources-for-developers-september-2015/) 15款新鮮的為開發者提供的資源，涉及CSS、排版、主題、設計、配色、Git等等，總有一款適合你。 **ContentTools——A beautiful & small content editor** [http://getcontenttools.com/](http://getcontenttools.com/) A JS library for building WYSIWYG editors for HTML content. **A simple string to crash Google Chrome** [http://andrisatteka.blogspot.jp/2015/09/a-simple-string-to-crash-google-chrome.html](http://andrisatteka.blogspot.jp/2015/09/a-simple-string-to-crash-google-chrome.html) 在Chrome導航欄中輸入簡短的16個字符，真的會導致Chrome崩潰。更糟糕的是，如果上面這串字符屬于某個超鏈接的一部分，當你將鼠標放上去的時候，Chrome 也會掛掉當前頁面、并報出“Aw，Snap！”的錯誤。 **Scalable Vector Graphics (SVG) 2** [https://svgwg.org/svg2-draft/](https://svgwg.org/svg2-draft/) This document is the 24 September 2015 Editor’s Draft of SVG 2\. This version of SVG builds upon SVG 1.1 Second Edition by improving the usability of the language and by adding new features commonly requested by authors. **Dolphin - Web UI自動化測試平臺** [http://dolphin.duapp.com/](http://dolphin.duapp.com/) UC 的同學研制的平臺，其目標是：“對業務功能進行自動化回歸測試，及時發現問題，從而提高業務功能測試的效率” **幾個輕量級類React的框架** [http://mithril.js.org/](http://mithril.js.org/) [http://riotjs.com/](http://riotjs.com/) [https://github.com/dekujs/deku](https://github.com/dekujs/deku) **ShaderFrog** [http://shaderfrog.com/](http://shaderfrog.com/) 一款面向設計者和開發人員的 WebGL Shader 在線編輯器 **The State of Front-End Tooling – 2015** [http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results](http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results) 2015年前端各種工具的使用情況調查情況，可以幫助自己在技術選型上做出一些判斷。 **2015全球容器大會資料** [http://pan.baidu.com/s/1jGCP2Lo](http://pan.baidu.com/s/1jGCP2Lo)?密碼：sq2p ## 產品及其它 **阿里前副總裁波特從馬云身上學到的40條心得** [http://zhouchangfan.baijia.baidu.com/article/179358](http://zhouchangfan.baijia.baidu.com/article/179358) 波特?埃里斯曼是阿里巴巴最早加入的美國員工之一，曾任阿里巴巴國際及阿里巴巴集團的副總裁。他將自己的親身經歷以及他對阿里巴巴的觀察和看法寫成《阿里傳》一書，而下面的 40 堂課即是波特從馬云和阿里巴巴創業過程中學到的 “心法”，涉及商業、生活與企業家精神。 **史上最猛程序員...** [http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=209494340&idx=1&sn=9161b0e319614bc4bb9ca597e565d616&scene=2&srcid=09215GOBilBYYNAYlCBk07H5](http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=209494340&idx=1&sn=9161b0e319614bc4bb9ca597e565d616&scene=2&srcid=09215GOBilBYYNAYlCBk07H5) 競選美國總統，硅谷真正的老大，賣殺毒軟件也賣毒品。這哥們叫John McAfee，你別不信，這哥們以前真是程序員，還是世界上第一個破解電腦病毒的人。。。 **什么是工程師文化？** [http://www.zhihu.com/question/22168420](http://www.zhihu.com/question/22168420) 一個值得思考的話題，這三點總結得不錯： - 對組織管理結構和運行模式有較高要求 - 對自動化和智能化無休止的追求 - 團隊精神有著無比重要的地位 **微信之父張小龍如何向馬化騰眾高管詳解微信背后的產品觀？** [http://mp.weixin.qq.com/s?__biz=MjM5MTQ4NzgwNA==&mid=210517947&idx=1&sn=4e12e68172cbcd1503574ba95f20919c&scene=2&srcid=0922S9sGoRiYQk227w36PMWG](http://mp.weixin.qq.com/s?__biz=MjM5MTQ4NzgwNA==&mid=210517947&idx=1&sn=4e12e68172cbcd1503574ba95f20919c&scene=2&srcid=0922S9sGoRiYQk227w36PMWG) 在張小龍看來，關注人性和群體心理，像上帝一樣，道生一，一生二地去建立規則和系統，并提高用戶體驗品味，才算是一個合格的產品經理。以下是張小龍經典的干貨，再次與大家分享。另附：產品經理的段位——說說騰訊的產品職級?[http://mp.weixin.qq.com/s?__biz=MjM5MTQ4NzgwNA==&mid=210517947&idx=1&sn=4e12e68172cbcd1503574ba95f20919c&scene=2&srcid=0922S9sGoRiYQk227w36PMWG](http://mp.weixin.qq.com/s?__biz=MjM5MTQ4NzgwNA==&mid=210517947&idx=1&sn=4e12e68172cbcd1503574ba95f20919c&scene=2&srcid=0922S9sGoRiYQk227w36PMWG)