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

## 業界會議 **[報名]AC2015 - AlloyTeam 前端技術大會 - 2015.12.12** [http://ac.alloyteam.com/](http://ac.alloyteam.com/) 騰訊AlloyTeam源于2008年成立的騰訊WebQQ團隊，于2011年10.24正式對公司外以為團隊名稱進行對外交流，AlloyTeam的寓意是：像合金一樣將各種技術，以及各個成員的聰明才智聚合在一起，從而產生更強的合金特性，未來我們也希望通過聚合業界的各大前端牛人，來共同推動Web前端技術在中國的發展！ **[報名]慕課網技術沙龍之前端專場-12.05** [http://www.imooc.com/activity/salon201512](http://www.imooc.com/activity/salon201512) [http://www.imooc.com/wenda/detail/296382](http://www.imooc.com/wenda/detail/296382) 本期沙龍以“暢?言”為主題，邀請國內一線互聯網公司資深前端工程師、獨立創業者傾情分享前端領域熱門技術，圍繞“前沿技術實踐、技術原理探究、網站性能優化”三大方面進行探討，并與前來參會的技術發燒友、開發者深度互動。有百度、小米、阿里等公司專家已經小胖的演講，百度的Node.js 實踐值得關注。話說今年前端的交流似乎異常多，神馬情況呢？ **2015.12.5 HTML5 移動生態大會－白鷺開發者盛典** [http://event.egret.com/](http://event.egret.com/) 當Web碰上VR，當HTML5玩轉3D，將撞出怎樣的火花與創意？當著急搭上“互聯網＋”東風的企業遇見HTML5,將產生怎樣的化學反應？由白鷺時代主辦的2015HTML5移動生態大會將匯聚行業力量，共探HTML5發展的無限可能，開啟一場“發現創新之旅”。 **2015.11.17 日ChinaTech Day - 中國技術開放日** [http://www.chinatechday.com/](http://www.chinatechday.com/) 2015年11月，極客邦科技和InfoQ全球，攜手中國頂尖互聯網技術公司阿里巴巴、騰訊、百度、獵豹移動等，在國際頂級技術盛會QCon美國舊金山站開啟ChinaTech Day中國技術開放日專場，并探訪當地著名技術企業，向美國及世界展現中國頂尖技術實力，建立國際技術品牌，促進中美IT圈的交流融合。 ## 深閱讀 **百度 JavaScript編碼規范 - ESNext補充篇** [https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md) 由百度多位資深前端工程師給出，ES6 正在逐步投入生產環境，這份規范非常有參考意義，引發了廣泛討論。另附： JavaScript 初心者的 ES2015 實戰?[http://gank.io/post/564151c1f1df1210001c9161](http://gank.io/post/564151c1f1df1210001c9161) 另附百度的前端代碼風格檢查套件 FECS?[http://fecs.baidu.com/](http://fecs.baidu.com/) [http://efe.baidu.com/blog/fecs/](http://efe.baidu.com/blog/fecs/) **前端實現 SVG 轉 PNG** [http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/](http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/) svg 是一種矢量圖形，在 web 上應用很廣泛，但是很多時候由于應用的場景，常常需要將 svg 轉為 png 格式，下載到本地等。隨著瀏覽器對 HTML 5 的支持度越來越高，我們可以把 svg 轉為 png 的工作交給瀏覽器來完成。 **Google - TensorFlow is an Open Source Software Library for Machine Intelligence** [https://github.com/tensorflow/tensorflow](https://github.com/tensorflow/tensorflow) [http://tensorflow.org/tutorials/mnist/beginners/index.md](http://tensorflow.org/tutorials/mnist/beginners/index.md) [http://tech.qq.com/a/20151110/007439.htm](http://tech.qq.com/a/20151110/007439.htm) 谷歌開放人工智能系統走安卓路線】多年以來，谷歌內部一直在使用一種機器學習系統，代號為“TensorFlow”。如今，谷歌正在將此系統成為開源系統，并將此系統的參數公布給業界工程師、學者和擁有大量編程能力的技術人員。贊 Google，業界良心。 **The Single Biggest Mistake Programmers Make Every Day** [https://medium.com/javascript-scene/the-single-biggest-mistake-programmers-make-every-day-62366b432308](https://medium.com/javascript-scene/the-single-biggest-mistake-programmers-make-every-day-62366b432308) I believe the single biggest mistake that every programmer makes from time to time is overcomplicating things. Simplify your code. Start with the least complicated implementation and work your way toward more complex solutions only when the problem demands it. Remember: - Keep It Stupid Simple (KISS) - Make it work, make it right, make it fast. - Understand the problem. (Know what “make it work” means.) - Begin at the beginning. - Start with tests. - Do One Thing (DOT). - Start small and iterate. - Pure function > Function > Factory > Class Simple beats clever every day of the week. **Redis 未授權訪問配合 SSH key 文件利用分析** [http://blog.knownsec.com/2015/11/analysis-of-redis-unauthorized-of-expolit/](http://blog.knownsec.com/2015/11/analysis-of-redis-unauthorized-of-expolit/) [http://www.sebug.net/vuldb/ssvid-89715](http://www.sebug.net/vuldb/ssvid-89715) [http://www.sebug.net/vuldb/ssvid-89339](http://www.sebug.net/vuldb/ssvid-89339) [http://www.ichunqiu.com/course/1413](http://www.ichunqiu.com/course/1413) Redis 未授權訪問的問題是一直存在的問題，知道創宇安全研究團隊歷史上也做過相關的應急，今日，又出現 Redis 未授權訪問配合 SSH key 文件被利用的情況，今天我們來簡要的分析下。 **Blink Workers** [https://docs.google.com/document/d/1i3IA3TG00rpQ7MKlpNFYUF6EfLcV01_Cv3IYG_DjF7M](https://docs.google.com/document/d/1i3IA3TG00rpQ7MKlpNFYUF6EfLcV01_Cv3IYG_DjF7M) workers無疑是現在最熱門的web未來技術之一，如果你也被一連串的web workers, shared worker, service worker, compositor worker, Houdini worker搞得暈乎乎, 想了解這些workers的異同和未來還將出現什么新的品種，不要錯過Chrome團隊的文章。另附兩篇關于 ServiceWorker 實踐的文章：?[ServiceWorker與逐步聯網策略](http://www.w3ctech.com/topic/1564)?[My first Service Worker](https://adactio.com/journal/9775) **A 360 Degree View of the Entire Netflix Stack** [http://highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html](http://highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html) As we research and dig deeper into scaling, we keep running into Netflix. They are very public with their stories. This post is a round up that we put together with Bryan’s help. **未來Web應用的前端技術選型暢想** [https://github.com/xufei/blog/issues/24](https://github.com/xufei/blog/issues/24) 民工哥 xufei 的思考，贊這句：約束越強的框架很可能越不受歡迎，基于ES自身的語言特性做業務代碼約束才是王道。xuefei 的這量篇關于 Angular 的文章也也值得用 Angular 的同學參考：優化Angular應用的性能?[https://github.com/xufei/blog/issues/23](https://github.com/xufei/blog/issues/23)?Angular的變革[https://github.com/xufei/blog/issues/25](https://github.com/xufei/blog/issues/25) **JavaScript Is Eating The World** [http://arc.applause.com/2015/11/06/javascript-is-eating-the-world/](http://arc.applause.com/2015/11/06/javascript-is-eating-the-world/) Modern developers have to deal with three primary platforms when it comes to coding in the last 10 years or so: the browser, the server and native/mobile apps. JavaScript is already the de facto language of the Web. **移動端開發小記 - Flexbox** [http://taobaofed.org/blog/2015/11/11/flexbox-in-mobile-web/](http://taobaofed.org/blog/2015/11/11/flexbox-in-mobile-web/) 可以當做 Flexbox 的使用實例，是時候掌握了這個屬性了，還不會用的同學自行 Google 學習吧。另附 FED 的另一篇文章：如何評價頁面的性能?[http://taobaofed.org/blog/2015/11/09/web-performance/](http://taobaofed.org/blog/2015/11/09/web-performance/) **如何開發并維護一個開源的 React 組件** [http://zhuanlan.zhihu.com/FrontendMagazine/20341776](http://zhuanlan.zhihu.com/FrontendMagazine/20341776) 如今 React 被廣泛應用在各類應用上，直觀的編程方式，易學易用的工具鏈，豐富的生態等等優點被大家所鐘愛。相信你已經熟悉 React 的用法和相關的開發工具，本文就不贅述 React 用法、特性等，換種思路，分享一下幾個月前開發的組件 autoresponsive-react 過程中的幾點心得體會。 **Node.js 在雙十一中有哪些應用，表現如何** [http://www.zhihu.com/question/37379084](http://www.zhihu.com/question/37379084) Node.js 在雙十一中有哪些應用大家今年訪問到的所有www域頁面（包括首頁、頻道、會場等）全部是一個全棧node應用支撐的。相比以往大促使用的技術方案，已經被證明的優勢如下：節省了巨大的服務器資源；提供頁面安全性、穩定性；對業務個性化需求的支持更好； **你為什么應該試一試Reflux** [http://icodeit.org/2015/11/get-started-with-reflux/](http://icodeit.org/2015/11/get-started-with-reflux/) 鑒于Flux本身只是一個架構，而且Facebook提供的參考實現又有一些問題，所以社區有了很多版本的Flux實現。比如我們這里會用到的Reflux。簡而言之，Reflux里有兩個組件：Store和Action。Store負責和數據相關的內容：從服務器上獲取數據，并更新與其綁定的React組件（view controller）;Action是一個事件的集合。Action和Store通過convention來連接起來。 **Nginx能為前端開發帶來什么** [http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=400326547&idx=1&sn=5c712281bb5c931c2b6c5be601f83535](http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=400326547&idx=1&sn=5c712281bb5c931c2b6c5be601f83535) 作為一名工程師一定要注意：物盡其用，用正確的工具、類庫干正確的事情，而不是把生命浪費在無意義的造輪子上。這篇文章對 Nginx 的使用場景分析得挺到位的，作為一個 Web 服務非常重要的一個角色，Nginx 覺得值得學習。 **編程書單推薦：知名程序員的書架** [http://www.codingpy.com/article/programmers-bookshelf-recommendations/](http://www.codingpy.com/article/programmers-bookshelf-recommendations/) 自從開始自學編程以來，就一直希望有人指點該如何逐步的打牢基礎，該讀哪些書籍來加深對計算機科學的理解。最近，我在網上看到有人整理了一些知名程序員推薦的書籍，他們或是接受采訪，或是在自己的博客上，向大家推薦了自己認為最有價值的編程書籍。覺得應該都是不錯的選擇，所以翻譯過來與大家分享。贊文中引用的名言：我這一輩子，從不知道哪位智者是根本不讀書的——沒有，沒有一個人 **如何寫出不可維護的服務端程序** [http://yanyiwu.com/work/2014/03/03/ru-he-xie-chu-bu-ke-wei-hu-de-fu-wu.html](http://yanyiwu.com/work/2014/03/03/ru-he-xie-chu-bu-ke-wei-hu-de-fu-wu.html) 大伙寫 Node 時引以為戒吧。 **WebGL 2.0 前瞻** [https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit#slide=id.p](https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit#slide=id.p) SIGGRAPH Asia 2015 大會上的一篇演講，介紹了 WebGL 2.0 中的新功能 ## 新鮮貨 **EditorConfig** [http://editorconfig.org/](http://editorconfig.org/) EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems. **Better than Gzip Compression with Brotli** [https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/](https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/) Brotli is an open source data compression library formally specified by IETF draft. It can be used to compress HTTPS responses sent to a browser, in place of gzip or deflate. **React router 1.0.0 released** [https://github.com/rackt/react-router/blob/9ee114e94d5f163dbff11f04b54ee129ac89b240/CHANGES.md](https://github.com/rackt/react-router/blob/9ee114e94d5f163dbff11f04b54ee129ac89b240/CHANGES.md) [https://github.com/rackt/react-router](https://github.com/rackt/react-router) **SSL/TLS 加密新紀元 - Let's Encrypt** [https://linux.cn/article-6565-1.html](https://linux.cn/article-6565-1.html) Let's Encrypt 項目是由互聯網安全研究小組主導并開發的一個新型數字證書認證機構。該項目旨在開發一個自由且開放的自動化 CA 套件，并向公眾提供相關的證書免費簽發服務以降低安全通訊的財務、技術和教育成本。 **Gulp 4.0 API 文檔** [https://github.com/cssmagic/blog/issues/55](https://github.com/cssmagic/blog/issues/55) [https://github.com/gulpjs/gulp/blob/4.0/docs/API.md](https://github.com/gulpjs/gulp/blob/4.0/docs/API.md) 據說調整后的 API 非常好用。 **Bower宣告終止開發** [https://github.com/rackt/redux/issues/944](https://github.com/rackt/redux/issues/944) [http://gofore.com/ohjelmistokehitys/stop-using-bower/](http://gofore.com/ohjelmistokehitys/stop-using-bower/) 這貨終于要推出歷史舞臺了，值得鼓掌 **Segment** [https://github.com/lmgonzalves/segment](https://github.com/lmgonzalves/segment) [http://lmgonzalves.github.io/segment/](http://lmgonzalves.github.io/segment/) A little JavaScript class (without dependencies) to draw and animate SVG path strokes **Github Corners** [https://github.com/tholman/github-corners](https://github.com/tholman/github-corners) 作者為了慶祝 Github 七周年用 SVG + CSS3 做的頁面角花（Github Corners），鼠標 hover 后，尾巴會搖。 **Windows 2000 的 CSS 主題** [https://win2k.brod.io/](https://win2k.brod.io/) I am fully aware the methods used in win2k go against some of the core design principles of Basscss although the win2k theme should really be considered a rendering style, not just a theme. The styles are as reusable as possible without requiring overly verbose selectors. **codecrap** [http://codecrap.com/](http://codecrap.com/) 去圍觀并點評一下一些神奇的代碼。 **H5 幀動畫生成工具** [http://jhtmls.com/h5animation/](http://jhtmls.com/h5animation/) [http://jhtmls.com/h5animation/example/](http://jhtmls.com/h5animation/example/) 將尺寸一樣幀系列圖片拖拽到頁面上、按需設置、下載。將自動生成需要的圖片和樣式。 **讓 Apple Music for Android 教國內的安卓廠商如何姿勢正確地做一個充滿果味的 Android 應用** [http://zhuanlan.zhihu.com/thoughts-dng/20333663](http://zhuanlan.zhihu.com/thoughts-dng/20333663) Apple 在他們的 Android 應用上保留的, 用以彰顯應用個性的內容只有三個: 細線條的圖標風格 (而且圖標的表述還遵循了 Material Design 的指導); 高飽和度, 明快的配色; 高斯模糊的背景. 而那些在國產安卓應用中非常經常見到的其他充滿 iOS 風格的控件元素以及底部 tab bar 布局并沒有出現. **Firefox for iOS** [https://github.com/mozilla/firefox-ios](https://github.com/mozilla/firefox-ios) 可以當做瀏覽器技術和 Swift 的學習資料。 **硅谷最火的大數據公司Palantir產品技術解讀** [http://vdisk.weibo.com/s/D2zXXYpNQA3x](http://vdisk.weibo.com/s/D2zXXYpNQA3x) [http://www.palantir.com/](http://www.palantir.com/) Palantir因從事高度機密的工作而名揚天下，Palantir的技術可以使得沒有工程師背景的人士輕松對大量數據進行分析，以進行問題查詢和解決難題。據說，這一技術被美國Chase銀行用來防止客戶賬號被黑。此外，洛杉磯警局也在使用Palantir的技術。對大數據有興趣的同學可以關注。 **Continuous Delivery service for Windows** [http://www.appveyor.com/](http://www.appveyor.com/) AppVeyor aims to give powerful Continuous Integration and Deployment tools to every .NET developer without the hassle of setting up and maintaining their own build server. **Code reviews Service** [http://csswizardry.com/work/](http://csswizardry.com/work/) 750 英鎊，生財之道呀... **StarCraft: The past, present and future** [http://www.polygon.com/2015/11/6/9670176/starcraft-2-future-history-dlc-blizzard](http://www.polygon.com/2015/11/6/9670176/starcraft-2-future-history-dlc-blizzard) 對 StarCraft 有興趣的同學可以了解下。 **Atlassian files for IPO** [http://www.sec.gov/Archives/edgar/data/1650372/000155837015001685/](http://www.sec.gov/Archives/edgar/data/1650372/000155837015001685/) [https://www.atlassian.com/](https://www.atlassian.com/) 這個公司有很多優秀的工程產品，其 IPO 文檔非常有參考意義。 ## 產品及其它 **NEXT 2015年度產品評選** [http://next.36kr.com/posts/collections](http://next.36kr.com/posts/collections) 看看都有那些優秀產品吧，年度最佳數據分析工具、年度最佳 HTML 5 制作工具這兩個可以重點關注。 **YouTube放量增長的十條管理經驗** [http://www.huxiu.com/article/130595/1.html?f=pc-weibo-article](http://www.huxiu.com/article/130595/1.html?f=pc-weibo-article) 這篇文章總結自筆者在斯坦福大學的課程筆記：CS183C——利用科技實現閃電規模化 (Blitzscaling)，授課老師是 Reid Hoffman、John Lilly、Chris Yeh 和 Allen Blue。文中的這節課是 YouTube 前產品、工程和用戶體驗負責人 Shishir Mehrotra 的演講，內容主題是從 YouTube 規模化中獲得的經驗教訓。夢之隊、牛逼組、打工組、別干了組這幾個分類挺有意思的。 **數據科學家揭秘《微信用戶報告》背后的巨大商機** [http://mp.weixin.qq.com/s?__biz=MzI3MTAzMjQ3Mw==&mid=400090581&idx=1&sn=5a798e31755176fdd0823c0c9a64bcbf&scene=1](http://mp.weixin.qq.com/s?__biz=MzI3MTAzMjQ3Mw==&mid=400090581&idx=1&sn=5a798e31755176fdd0823c0c9a64bcbf&scene=1) 對《微信用戶報告》的一個解讀 **想抱微信的“大腿”？你可能先得滿足張小龍的三點“無理要求”** [http://www.pingwest.com/sell-movie-ticket-on-wechat/](http://www.pingwest.com/sell-movie-ticket-on-wechat/) 張小龍關于電影和掛號接入所提的問題很犀利，其背后就是產品決策，值得學習 **138 頁全球機器人研究報告** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400430504&idx=1&sn=6126fda783c335033cc3f7d0ed76eb5d](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400430504&idx=1&sn=6126fda783c335033cc3f7d0ed76eb5d) 報告共包括三大部分，從國外行業發展趨勢到國內機器人產業發展機會，對機器人行業進行了系統的梳理。