FEX 技术周刊 - 2016/11/14

微信搜索『FEX』关注我们的公众号，及时获得最新资讯。

深阅读

19 things I learnt reading the NodeJS docs
https://hackernoon.com/19-things-i-learnt-reading-the-nodejs-docs-8a2dcc7f307f#.mx01lyeup
译 https://segmentfault.com/a/1190000007435273
As long-time readers will know, I am on a journey of writing out every interface, prop, method, function, data type, etc related to web development, so that I can fill in the gaps of what I don’t know. The Node docs were my last stop, having finished HTML, DOM, the Web APIs, CSS, SVG, and EcmaScript. This held the most unknown gems for me, so I thought I’d share them in this little listicle. I will present them in descending order of appeal. As I do with my outfits when I meet someone new.

ThoughtWorks Tech Radar NOV ‘16
https://www.thoughtworks.com/radar/languages-and-frameworks
就前端而言 React 和 Redux 是推荐使用的。另附一篇看了这个技术雷达之后的思考：从最新的技术趋势看前端的未来。

Native Apps are Doomed
https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0#.g41yd34p3
From now on, I won’t be building any more native apps. All my apps going forward will be progressive web apps. Progressive web apps are web applications which are designed to work even more seamlessly on mobile devices than native mobile apps. 另附这位大侠整理的：10 Must See Web Apps & Games

Pitfall: not all objects can be proxied transparently
http://www.2ality.com/2016/11/proxying-builtins.html
An ES6 proxy lets you intercept and customize operations performed on an object, its so-called target. Interception and customization is handled via a handler object (think even listener). Operations are intercepted by handler methods. If a handler method is missing, the corresponding operation is simply forwarded to the target. Therefore, if the handler is the empty object, the proxy should transparently wrap the target. Alas, that doesn’t always work, as this blog post explains. 另附：使用ES6的新特性Proxy来实现一个数据绑定实例

PHP 7 at Tumblr
https://engineering.tumblr.com/post/152998126990/php-7-at-tumblr
At Tumblr, we’re always looking for new ways to improve the performance of the site. This means things like adding caching to heavily used codepaths, testing out new CDN configurations, or upgrading underlying software. Recently, in a cross-team effort, we upgraded our full web server fleet from PHP 5 to PHP 7. The whole upgrade was a fun project with some very cool results, so we wanted to share it with you.

Seven years of Go
https://blog.golang.org/7years
Today marks seven years since we open-sourced our preliminary sketch of Go. With the help of the open source community, including more than a thousand individual contributors to the Go source repositories, Go has matured into a language used all over the world.

Logging Errors in Client-Side Applications
https://www.sitepoint.com/logging-errors-client-side-apps/
In this article I’ll look at some of the ways in which you can implement logging in a client-side application; particularly in a JavaScript-heavy, single-page application (SPA).

探秘 vue-rx 2.0
https://zhuanlan.zhihu.com/p/23575516
VueJS社区升级了vue-rx这个库，实现了比较方便地把VueJS和RxJS结合的能力，挺民工叔给我们详细介绍。另附：4 Things Vue.js Got Right 、前端开发之走进Vue.js

腾讯验证码的十二年
http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578147&idx=3&sn=94a8f8f8b4a23b2429ba18bd50c4e048&chksm=84b3b1a4b3c438b28476200037170798276cf7762a115dad9e4b49afeed3151955afe7cf82c4&scene=4#wechat_redirect
字符验证码越来越难阻挡了

使用浏览器的计算力，对抗密码破解
https://www.cnblogs.com/index-html/archive/2016/11/09/6045984.html
本文前半部分科普 KDF 函数的意义，后半部分探讨 KDF 在前端计算的可行性。

HTML可访问性fieldset,legend元素及CSS布局应用
http://www.zhangxinxu.com/wordpress/2016/11/html-fieldset-legend-element-css-layout/
可访问性还是挺重要的。

超小Web手势库AlloyFinger原理
https://segmentfault.com/a/1190000007448808
https://github.com/AlloyTeam/AlloyFinger
首先介绍了AlloyFinger 和 hammerjs 的区别，然后介绍AlloyFinger 是如何通过touchstart touchmove touchend touchcancel 这4个事件 来实现 Tap点按、longTap长按、swipe划、pinch捏、rotate旋转等手势动作的判断。

ES6 Features That Can’t Be Ignored
http://www.javascripttuts.com/es6-features-can-make-life-easy/
http://www.javascripttuts.com/es6-features-that-cant-be-ignored-final-part/
看看有没有你不会用的特性。另附：The Ultimate JavaScript Cheat Sheet

10 principles for smooth web animations
https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29
对于animation没有银弹，只能自己去花时间去测试去优化，本文根据自己的多年经验，提出一些针对 animation优化的一些tips

How to structure real world Redux/React application
https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36#.sn0rbwmxo
作者建议了一种代码组织形式

Developing a RESTful API With Node and TypeScript
http://mherman.org/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript
This tutorial details how to develop a RESTful API with NodeJS, ExpressJS, and TypeScript using test-driven development (TDD).

CSS Motion Path as of October 2016
http://codepen.io/danwilson/post/css-motion-paths-2016
本文通过demo讲述如何使用 OFFSET-PATH、OFFSET-DISTANCE、OFFSET-ROTATION等css特性来构建 Motion Path。

蘑菇街直播实践
http://blog.qiniu.com/archives/7463
蘑菇街直播的分享，比较全面的介绍了自己的一个直播形态及框架，遇到的一些难题以及所做的性能及稳定性等等的优化。

Mixin、多重继承与装饰者模式
https://github.com/youngwind/blog/issues/97
无论是复制类的mixin、多重继承的mixin、寄生式继承、ES7的装饰器、设计模式中的装饰者模式，它们都有一个共同点，那就是：在不修改原有的类/对象/函数的前提下，为新的类/对象/函数添加新的职责，以增强其功能。虽然现在react已经不再推荐使用mixin了，但在一些场景里，mixin还是会比hoc用起来更顺手。

XSS全解析—初探
https://segmentfault.com/a/1190000007433837
对XSS的含义以及分类做了一个介绍，同时列出了一些XSS的攻击方式。附上一个XSS过滤的库： https://github.com/leizongmin/js-xss

一个可供创业团队参考的微服务开发、部署和运维最佳实践
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659598436&idx=1&sn=6b30e5176ac15c8c85e3368a9f44cecd
本文作者是Enchant的架构师，他最近研究了Netflix、SoundCloud、谷歌、亚马逊、Spotify等公司的微服务实践，并根据自己的理解总结出了一套适用于现代Web和云技术的微服务实战经验。本文是其中的第三篇，也是最后一篇，将会重点介绍服务的开发、部署、运维，以及与人员有关的最佳实践。另附：从 MVC 到微服务，技术演变的必经之路

新鲜货

Blueprint – A React UI toolkit for the Web
http://blueprintjs.com/
Blueprint is a collection of React UI components, covering the majority of the common interface elements, patterns and interactions on the Web. Using Blueprint ensures that you’ll end up with an elegant, easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it.

Please stop worrying about Angular 3
http://www.infoworld.com/article/3139891/javascript/angular-3-is-hot-on-the-heels-of-angular-2.html
https://toddmotto.com/please-stop-worrying-about-angular-3
Angular 3 will not be the rewrite Angular 1.x to Angular 2 was

Homebrew 1.0.0
http://brew.sh/2016/11/07/homebrew-1.1.0/
Today I’d like to announce Homebrew 1.1.0. We’ve had a great response to Homebrew 1.0.0 and been iterating on our work there. That 1.1.0 follows 1.0.9 is a happy coincidence due to breaking changes; in the future we may have a e.g. 1.1.10.

Intercooler.js – Making AJAX as easy as anchor tags
https://github.com/LeadDyno/intercooler-js
Intercooler is a small (6.74KB gzipped) jQuery-based library that allows you to add AJAX to your application using HTML attributes.

A Dart implementation of Sass
https://github.com/sass/dart-sass
http://blog.sass-lang.com/posts/1022316-announcing-dart-sass
Dart Sass to the world. It’s a totally new implementation of Sass, designed to be fast, easy to install, and easy to hack on.

Kakapo.js
https://github.com/devlucky/Kakapo.js
Kakapo its a full featured http mocking library, he allows you to entirely replicate your backend logic in simple and declaritive way directly in the browser. This way you can easily prototype and develop the whole Application without backend and just deactivate Kakapo when you go production.

TypeScript 2.1 RC: Better Inference, Async Functions, and More
https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more
TypeScript 2.1发布，现在我们可以使用 async、await等新语法了。

Headless Browsers - A list of (almost) all headless web browsers in existence
https://github.com/dhamaniasad/HeadlessBrowsers
A web browser without a graphical user interface, controlled programmatically. Used for automation, testing, and other purposes.

iView - UI Components with Vue.js
https://github.com/iview/iview
另附作者的：Vue高效UI组件库—iView开发实践

EclairJS
https://developer.ibm.com/open/eclairjs/
EclairJS provides JavaScript and Node.js developers with an API for Apache Spark, and enables them to take advantage of Spark’s unique data-processing environment that includes streaming, SQL, Machine Learning, and a graph database.

Generating a PDF with Express & Node.JS
https://edgecoders.com/generating-a-pdf-with-express-in-node-js-d3ff5107dff1
一个在线导出PDF 的demo

rindle
https://rindle.com
Powerful workflow automation for professionals. Rindle centralizes info from the apps you already use, so you can focus on your work.

sf双十一解密答案及详解及分析思路
https://post.zz173.com/detail/sf1111.html
https://1111.segmentfault.com/
很有意思的一套题，用来打发双十一再合适不过了，有兴趣的同学可以先看第2条闯关链接，我表示将信息藏在HTTP头里，藏在注释里，解码md5发现规律等都可以接受，但是将二维码扫完后得到一句被耍了，真是厉害了我的哥。

Capturing an Image from the User
https://developers.google.com/web/fundamentals/native-hardware/capturing-images
文章比较详细的介绍了如何获取用户的图像，即主要通过2个API：getUserMedia 和 drawImage，这个流程就是：1.Create a canvas object that will hold the frame from the camera 2.Get access to the camera stream 3.Attach it to a video element 4.When you want to capture a precise frame, add the data from the video element to a canvas object using drawImage()

Rendering the Mandelbrot Set With WebGL
http://gpfault.net/posts/mandelbrot-webgl.txt.html
一个通过WebGL绘制一副曼德博集合图的demo

Multifactor Authentication in your React Apps
https://scotch.io/tutorials/multifactor-authentication-in-your-react-apps
Security can’t be overemphasized when it comes to developing software applications. A single authentication factor system (e.g username and password) is no longer safe enough. If credentials are stolen, a user can be impersonated. Implementing a multi-factor authentication system increases security by requiring the user to provide an additional sets of credentials before they are granted access. 思路可以借鉴。

whitestorm.js
https://github.com/WhitestormJS/whitestorm.js
一款开发3D web app 的框架，和three.js以及一些其它的框架相比，它的入门成本更低

The Missing Immutable.js Manual with all the Examples you’ll ever need
http://untangled.io/the-missing-immutable-js-manual
Immutable is a really good library with some excellent features for data manipulation, and great performance under the hood. If you’ve looked at it before but were turned off by the docs, give it another go with this series of tutorials, which hopefully make things much clearer.

gron - Make JSON greppable!
https://github.com/FGRibreau/gron
挺有用的一个工具，可以将一份json 数据 在控制台序列化输出，搭配grep或者diff 使用起来会很灵活。

turbo.js
https://github.com/turbo/js
turbo.js is a small library that makes it easier to perform complex calculations that can be done in parallel. The actual calculation performed (the kernel executed) uses the GPU for execution. This enables you to work on an array of values all at once.

Useful Pens for Everyday Front End Development
http://codepen.io/collection/nMgKxJ/2/
A large CodePen collection collated by Sarah Drasner featuring techniques that may prove useful in everyday front-end dev

npm-run-all
https://github.com/mysticatea/npm-run-all
A CLI tool to run multiple npm-scripts in parallel or sequential.

[译]赋予设计师创作灵感的 11 个顶尖网站
https://www.h5jun.com/post/the-best-inspiration-sites-for-inspiration.html

产品及其它

Google Data Studio
https://datastudio.google.com/
Google Data Studio (beta) turns your data into informative dashboards and reports that are easy to read, easy to share, and fully customizable. Start telling great stories with your data and make better business decisions. Create up to five free custom reports with unlimited editing and sharing with Data Studio.

Gartner最新2017十大战略技术趋势：以智能为中心实现万物互联
http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=2651989217&idx=2&sn=e93d8bdb51cbe9cfc3ac5f86ab4a00cd
http://www.gartner.com/technology/research/top-10-technology-trends/
Gartner 11月7日在西班牙巴塞罗那召开的全球峰会上发布了2017年十大战略技术：人工智能与机器学习、智能应用、智能事物、虚拟和增强现实、数字化双生、区块链和已分配分类账、对话式系统、格网应用和服务架构、数字化技术平台和自适应安全架构入选。与往年相比，本年度10大战略技术中智能化趋势明显，10项入选的技术都直接或间接与智能化相关。

如何识别牛逼的前端工程师
http://www.codeceo.com/article/how-to-know-front-developer.html
成为一名牛逼的前端工程师，你我共勉。

编程三年:我的程序员成长经历
https://luolei.org/how-i-became-a-programmer/
作者从一名文科生走向编程之路，以过来人的身份总结出来的一些经验还是挺不错的。另附：中国第一代程序员，一个时代的传奇人物，可以领略下先辈们的风采。

《人类简史》作者分析特朗普崛起：自由主义终结了么
http://mp.weixin.qq.com/s?__biz=MzI1ODE3MTI1Nw==&mid=2650622081&idx=1&sn=3c4d0ab05405dc022b018165a693ad53
美国大选备受关注，人类简史作者的分享相对专业。