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导致了巨大的经济损失，应该由谁来承担？用户？运营商？还是系统开发商？