FEX 技術周刊 - 2016/03/28 · FEX 技術周刊

## 深閱讀 **How one developer just broke Node, Babel and thousands of projects in 11 lines of JavaScript** [http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/](http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/) [http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) 由于 npm 上一個開發者下架了自己的所有模塊，尤其是其中用得比較多的 left-pad，導致 Babel 等好多模塊構建失敗，這個事件引發了許多討論，有人吐槽 npm 中有大量只有幾行代碼的模塊，有人吐槽 npm 腳本很危險（可以通過 npm install –ignore-scripts 關掉），感興趣的可以繼續閱讀：[http://lucumr.pocoo.org/2016/3/24/open-source-trust-scaling/](http://lucumr.pocoo.org/2016/3/24/open-source-trust-scaling/) [http://www.haneycodes.net/npm-left-pad-have-we-forgotten-how-to-program/](http://www.haneycodes.net/npm-left-pad-have-we-forgotten-how-to-program/) [https://medium.freecodecamp.com/npm-package-hijacking-from-the-hijackers-perspective-af0c48ab9922#.to7j5qyy0](https://medium.freecodecamp.com/npm-package-hijacking-from-the-hijackers-perspective-af0c48ab9922#.to7j5qyy0) [http://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability](http://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability) [http://blog.h5jun.com/post/left-pad.html](http://blog.h5jun.com/post/left-pad.html) [https://ponyfoo.com/articles/npm-meltdown-security-concerns](https://ponyfoo.com/articles/npm-meltdown-security-concerns) [http://developer.telerik.com/featured/left-pad-indicative-fragile-javascript-ecosystem/](http://developer.telerik.com/featured/left-pad-indicative-fragile-javascript-ecosystem/) cnpm 已經將 unpublish 權限收斂到了 admin[https://github.com/cnpm/cnpmjs.org/issues/866](https://github.com/cnpm/cnpmjs.org/issues/866) **Introduction to Immutable.js and Functional Programming Concepts** [https://auth0.com/blog/2016/03/23/intro-to-immutable-js/](https://auth0.com/blog/2016/03/23/intro-to-immutable-js/) Learn about functional data structures and their uses in this overview of Facebook’s popular library for JavaScript: Immutable.js **When should I use TypeScript?** [https://medium.com/@alexewerlof/when-should-i-use-typescript-311cb5fe801b#.q76w4w76y](https://medium.com/@alexewerlof/when-should-i-use-typescript-311cb5fe801b#.q76w4w76y) Last summer we had to convert a huge code base (18,000+ LOC) from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it. **如何實現一個 Virtual DOM 算法** [http://mp.weixin.qq.com/s?__biz=MzI5MTE4NjQ4Ng==&mid=401684442&idx=1&sn=18750a1fe95490ec43b963fd0e750962](http://mp.weixin.qq.com/s?__biz=MzI5MTE4NjQ4Ng==&mid=401684442&idx=1&sn=18750a1fe95490ec43b963fd0e750962) 本文會分享怎么用 300~400 行代碼實現一個基本的 Virtual DOM 算法，并且嘗試盡量把 Virtual DOM 的算法思路闡述清楚。希望在閱讀本文后，能讓讀者深入理解 Virtual DOM 算法，給我們現有前端的編程提供一些新的思考。 **React 同構實踐與思考** [http://zhuanlan.zhihu.com/purerender/20669111](http://zhuanlan.zhihu.com/purerender/20669111) 眾所周知，目前的 WEB 應用，用戶體驗要求越來越高，WEB 交互變得越來越豐富！前端可以做的事越來越多，去年 Node 引領了前后端分層的浪潮，而 React 的出現讓分層思想可以更多徹底的執行，尤其是 React 同構 (Universal or Isomorphic) 這個黑科技到底是怎么實現的，我們來一探究竟。 **How Medium does progressive image loading** [https://jmperezperez.com/medium-image-progressive-loading-placeholder/](https://jmperezperez.com/medium-image-progressive-loading-placeholder/) Medium 的圖片先模糊到清晰上如何實現的。 **前端文本截斷** [http://efe.baidu.com/blog/text-truncating/](http://efe.baidu.com/blog/text-truncating/) 很古老的問題了，其中涉及到的細節點其實很多。 **移動端地圖技術分享** [http://www.jianshu.com/p/41179be5893a](http://www.jianshu.com/p/41179be5893a) 地圖服務的實現原理介紹。 **Stack Overflow：云技術程序員收入最高 [http://www.199it.com/archives/451195.html](http://www.199it.com/archives/451195.html) 上周發過[原版](http://stackoverflow.com/research/developer-survey-2016)，這是其中一部分翻譯的版本，之前漏過的可以看看，主要是語言部分的流行及受歡迎程度。 **React Native and its problems** [http://blog.dev-area.net/2016/01/29/react-native-and-its-problems/](http://blog.dev-area.net/2016/01/29/react-native-and-its-problems/) 使用 React Native 過程中遇到的問題。 **Chromium網頁渲染機制簡要介紹和學習計劃** [http://blog.csdn.net/luoshengyang/article/details/50916769](http://blog.csdn.net/luoshengyang/article/details/50916769) 深入代碼細節的解析，不過估計大部分人看不懂。 **Growth: 全棧增長工程師指南** [http://growth.phodal.com/](http://growth.phodal.com/) 作者挺能寫的，也不容易了，但大家需要有自己的判斷啊，別光看字數多就點贊。 **My SublimeText-killer Atom setup for developing React apps** [https://medium.com/unhandled-exception/my-sublimetext-killer-atom-setup-for-developing-react-apps-fa3c06505dd#.xvvuqhreb](https://medium.com/unhandled-exception/my-sublimetext-killer-atom-setup-for-developing-react-apps-fa3c06505dd#.xvvuqhreb) 推薦了一些 Atom 插件，喜歡折騰編輯器的可以看看，不過貌似安裝插件需要科學上網。 **H5、React Native、Native應用對比分析** [http://my.oschina.net/vczero/blog/597980](http://my.oschina.net/vczero/blog/597980) 通過一個簡單應用來對比使用這三種技術開發的情況，然后順帶植入廣告。 **Android自定義Lint實踐** [http://tech.meituan.com/android_custom_lint.html](http://tech.meituan.com/android_custom_lint.html) 如何寫自己的規則。 **Cookpad近期微服務經驗總結** [http://liubin.org/blog/2016/03/16/microservice-at-cookpad/](http://liubin.org/blog/2016/03/16/microservice-at-cookpad/) Cookpad是日本最大的在線菜譜分享公司，上市企業；這都不算啥，說到Rails，日本人沒有不知道Cookpad的，可以說Cookpad將Rails用到了極致，相信他們在微服務方面的經驗也能為我們帶來幫助。 **一名全棧工程師Node.js之路** [http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245) 寫得還挺詳細 **用Node.js開發微信墻簡明教程** [http://blog.h5jun.com/post/%E7%94%A8Node.js%E5%BC%80%E5%8F%91%E5%BE%AE%E4%BF%A1%E5%A2%99%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B.html](http://blog.h5jun.com/post/%E7%94%A8Node.js%E5%BC%80%E5%8F%91%E5%BE%AE%E4%BF%A1%E5%A2%99%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B.html) 這是一個簡單的用Node.js開發微信墻的教程，在這個教程中，包括以下幾部分內容：驗證服務器有效性；接收用戶通過微信訂閱號發給服務器的消息；解析收到的XML文本消息格式為JSON；用模板構造應答用戶的XML文本消息；將接收到的消息通過WebSocket服務廣播；獲取消息發送人的用戶基本信息（名字和頭像）。 **以20像素為基準的CSS網頁布局實踐分享** [http://www.zhangxinxu.com/wordpress/2016/03/css-layout-base-20px/](http://www.zhangxinxu.com/wordpress/2016/03/css-layout-base-20px/) 看似是簡單的要求以20像素為基準，實際上根植于體系中并有一套完整的解決方案。另附作者的另一個新文章：[簡單了解CSS3的all屬性](http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/) **從網易與淘寶的font-size思考前端設計稿與工作流** [http://www.cnblogs.com/lyzg/p/4877277.html](http://www.cnblogs.com/lyzg/p/4877277.html) 還沒空仔細看，目測有價值 **ReactNative增量升級方案** [https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%A2%9E%E9%87%8F%E5%8D%87%E7%BA%A7%E6%96%B9%E6%A1%88.md](https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%A2%9E%E9%87%8F%E5%8D%87%E7%BA%A7%E6%96%B9%E6%A1%88.md) 作者寫了不少 ReactNative 相關的文章 **前端的自我成長** [http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=416695997&idx=1&sn=f57f073bcb3a9559f0575d0a7584a246](http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=416695997&idx=1&sn=f57f073bcb3a9559f0575d0a7584a246)? 前端其實是個特別苦逼的職業，因為前端技術一直革命的特別快，新技術、新技巧在不斷地被發明出來。到目前為止，還沒有任何一個大學會教前端，倒是有些培訓班，會講網頁開發三劍客。這里講的內容，希望帶給大家的，就是該如何學習前端，實現自身成長。 **JSPatch開源經驗分享** [http://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=403063229&idx=1&sn=34651b982e211ae64742913026d459b0](http://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=403063229&idx=1&sn=34651b982e211ae64742913026d459b0) JSPatch 在國內開源方面做得很不錯，很多公司都在使用。 ## 新鮮貨 **ua-device** [https://github.com/fex-team/ua-device](https://github.com/fex-team/ua-device) FEX 團隊用心打造的 UA 解析庫，我們分析了無數條日志，并結合各種網上的信息，整理出了這個對國內各種手機識別率最高的 UA 庫，歡迎大家使用，并一起完善。 **iTerm2 指南** [http://wdxtub.com/2016/03/20/iterm2-guide/](http://wdxtub.com/2016/03/20/iterm2-guide/) 用好 iTerm2 可以極大提升效率，這里面介紹的只是一部分，iTerm2 有大量功能，建議開啟每日技巧（Tip of the Day），日積月累地學習。 **React Native 0.22.0** [https://github.com/facebook/react-native/releases/tag/v0.22.0](https://github.com/facebook/react-native/releases/tag/v0.22.0) 更新還是挺勤快的，居然這次有 99 個貢獻者。 **BuckleScript** [https://github.com/bloomberg/bucklescript](https://github.com/bloomberg/bucklescript) 將 OCaml 編譯為 JavaScript 的工具 **Opensource kit** [https://github.com/mr47/opensource-kit](https://github.com/mr47/opensource-kit) JavaScript 開源項目模板，整合了許多工具 **Emulators written in JavaScript** [https://github.com/fcambus/jsemu](https://github.com/fcambus/jsemu) 收錄了各種 JS 寫的模擬器 **Directory Upload - Spec** [https://wicg.github.io/directory-upload/proposal.html](https://wicg.github.io/directory-upload/proposal.html) This spec enables directory uploading by allowing a developer to read directory contents (files and sub-directories) asynchronously and be able to identify the directory structure. This specification proposes changes to [HTML] (in particular, additional API surface on HTMLInputElement, along with an additional atribute on the element) as well as a new specification called Directory Upload which brings directories to the web. **Small** [https://github.com/wequick/Small](https://github.com/wequick/Small) 支持 Android 和 iOS 的插件化框架。 **SSH for Clusters and Teams** [http://gravitational.com/teleport/](http://gravitational.com/teleport/) 團隊 SSH 解決方案，提升效率。 **Docker for Mac and Windows Beta: the simplest way to use Docker on your laptop** [https://blog.docker.com/2016/03/docker-for-mac-windows-beta/](https://blog.docker.com/2016/03/docker-for-mac-windows-beta/) 終于不是用 VirtualBox 了，用起來會更加自然。 **It’s Official: JavaScript Is The Most Commonly Used Programming Language On Earth** [http://arc.applause.com/2016/03/22/javascript-is-the-worlds-dominant-programming-language/](http://arc.applause.com/2016/03/22/javascript-is-the-worlds-dominant-programming-language/) **match - A JavaScript library to test JSON with some nice features.** [https://github.com/ozkxr/match](https://github.com/ozkxr/match) It is built to test REST API endpoints but, of course, you can use it to whatever you want. ## 產品及其它 **一個Geek范的H5頁面制作工具** [http://zhuanlan.zhihu.com/wonderful/20675594](http://zhuanlan.zhihu.com/wonderful/20675594) 百度出品的H5頁面確實都是業界比較先進的，尤其是在對技術的運用上，非常的得當。工具的誕生的目的不外乎兩點：節約勞動時間和輔助完成無法徒手完成的任務。而節約時間又可以從提升勞動效率和減少溝通成本入手，對于IT業來說，這也是提升工程效率的最重要兩個方式。所以我們不妨從這兩方面去看一下這款H5工具，是不是一款優秀的工具。 **Docker三年回顧：夢想依然在，人生正當年** [http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403178679&idx=1&sn=d555a7c9dfdd407b66d1e555b49ea374&scene=0#rd](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403178679&idx=1&sn=d555a7c9dfdd407b66d1e555b49ea374&scene=0#rd) 細談Docker，我們發現，其背后的容器技術，其實并非首創，早在十數年前，容器技術便已有雛形，那究竟為何Docker的席卷之勢空前之大。不論是技術領域有什么獨到之處，還是時勢造就了如今大好的局面，我們都沒有理由不來細細品鑒Docker這三年來的種種發展。 **安卓之父，真正的極客，一個與喬布斯并列的改變世界的人…** [http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=403343518&idx=1&sn=eb4a5194c17e9093b70035cbf100f350](http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=403343518&idx=1&sn=eb4a5194c17e9093b70035cbf100f350) 安迪·魯賓：真正的Geek，從不關心技術之外的人和事。 **WebAPP與原生APP的交互設計區別** [http://www.jianshu.com/p/7c0eac6070b5](http://www.jianshu.com/p/7c0eac6070b5) 挺不錯的總結 **程序bug導致了天大的損失，要槍斃程序猿嗎** [http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=403431752&idx=1&sn=1c79c8b03e2b8839160b5f6cd830588a&scene=0#rd](http://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=403431752&idx=1&sn=1c79c8b03e2b8839160b5f6cd830588a&scene=0#rd) 2015年9月3日，隨著東京最高法院駁回瑞穗證券的上訴，維持二審的原判結果，一個長達10年的訴訟終于畫下了句號。這個判例將對IT行業產生深遠的影響：如果程序的bug導致了巨大的經濟損失，應該由誰來承擔？用戶？運營商？還是系統開發商？