FEX 技术周刊 – 2016/03/28
最后更新于：2022-04-01 00:04:12
## 深阅读
**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导致了巨大的经济损失，应该由谁来承担？用户？运营商？还是系统开发商？