FEX 技术周刊 - 2017/07/03

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

深阅读

Building the Web of Things
https://hacks.mozilla.org/2017/06/building-the-web-of-things/
Mozilla is working to create a Web of Things framework of software and services that can bridge the communication gap between connected devices. By providing these devices with web URLs and a standardized data model and API, we are moving towards a more decentralized Internet of Things that is safe, open and interoperable.
另附：Mozila - Introducing HumbleNet: a cross-platform networking library that works in the browser.

Security updates for all active release lines
https://nodejs.org/en/blog/vulnerability/july-2017-security-releases/
All current versions of v4.x through to v8.x inclusive are vulnerable to an issue that can be used by an external attacker to cause a denial of service. The severity of this vulnerability is high and users of the affected versions should plan to upgrade when a fix is made available.

Turbocharge React With GraphQL
https://www.infoq.com/articles/turbocharge-react-graphql
Is GraphQL production ready? It was a fair question, since he never worked with GraphQL. Let’s be honest, GraphQL was only open sourced in 2015 and really just created as a standard in 2016. Is anyone besides Facebook really using GraphQL? Greg and his team were intimately familiar with REST and had built several apps in the last few years with REST. They leveraged Swagger for validation and documentation and it worked well for them. Hence the skepticism if GraphQL could really best REST as the communication conduit for apps.
附：VulcanJS: An Open-Source Project to “Meteorize” GraphQL.

Choosing a frontend framework in 2017
https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341
React is a library that’s designed to be one piece of the puzzle. React provides a thin view layer and leaves it to the developer to choose the remaining pieces of the architecture; Ember.js is a framework that optimizes the productivity of small teams and highly skilled individual developers; Angular is a platform that’s very well suited to enterprise developers who are coming from Java or C# background; Polymer is a framework that is particularly well positioned for large organizations that wish to create a single style guide and a collection of components to be used across the entire organization.

Any web site can become a PWA – but we need to do better
https://christianheilmann.com/2017/06/27/any-web-site-can-become-a-pwa-but-we-need-to-do-better/
Suffice to say, I am not telling anyone not to use great, modern technologies to the benefit of their end users and their own publishing convenience. And the stack that make up PWA are great to make either more successful than it is now.

Building m.uber_ Engineering a High-Performance Web App for the Global Market
https://eng.uber.com/m-uber/
In this article, we describe how we built m.uber (pronounced moo-ber) and explore the challenge of implementing the native app experience in a super-lightweight web app.

大前端开发者需要了解的基础编译原理和语言知识
https://mp.weixin.qq.com/s?__biz=MzI0NzI1NzU5NA==&mid=2247483740&idx=1&sn=ed505ededdbb970a9094b34c829f25d5
当程序员讨论一门语言的时候，默认的上下文经常是:“用 xxx 语言来完成 xxx 任务”。所以一直困扰着的我的一个问题就是，为什么完成某个任务，一定要选择特定的语言，比如安卓开发是 Java，前端要用 JavaScript，iOS 开发使用 Objective-C 或者 Swift。这些问题的答案非常复杂，有的是技术原因，有的是历史原因，有的会考虑成本，很难得出统一的结论，只能 case-by-case 的分析。这篇文章并非专门解答上述问题，而是希望通过介绍一些通用的概念，帮助读者掌握分析问题的能力

文本数据可视化 - 一图胜千言
http://geekplux.com/2017/06/26/text-data-visualization.html
「一图胜千言」我们从小就有体会，教材里的解释图、自己笔记里总结的知识结构图，一直到现在经常用的思维导图等，其实都是简单、实用的文本可视化。本文将简单介绍文本可视化的基础概念，然后重点通过各类文本可视化的案例来阐述可视化之美

Redux 使用可变数据结构
https://zhuanlan.zhihu.com/p/27658983
redux 核心能力是不可变数据带来的，mobx 的核心能力是可变数据带来的，如果使用动态修改数据的方式，使用 immutablejs 将其低成本转化为不可变数据，就可以接入 redux 并享受其生态了。

孵化业务快速落地与优化
http://tech.meituan.com/fuhua-haiwai.html
海外酒店是酒旅事业群第一个孵化的业务，从2016年9月份开始到现在已经半年多的时间。在业务后台搭建、成长、优化过程中，经历了很多的思考与选择。主要分为下面几个阶段：初建：调研、落地，合理复用，高效自建；优化：量化、决策，寻找瓶颈，优化性能；展望：梳理、规划，业务展望，未雨绸缪。本文将分别介绍这几个阶段后台系统相关的思考，此外还会在最后总结团队建设方面的经验。

Node.js Performance Monitoring with Prometheus
https://blog.risingstack.com/node-js-performance-monitoring-with-prometheus/
This article helps you to understand what to monitor if you have a Node.js application in production, and how to use Prometheus - an open-source solution, which provides powerful data compressions and fast data querying for time series data - for Node.js monitoring.

Is it possible to host Facebook on AWS?
http://blog.sqlizer.io/posts/facebook-on-aws/
To answer this question we need to break it down into four separate parts: Server capacity, Server hardware, performance, Software Cost.Now remember, we’re not asking if Facebook should host on AWS - we’re just asking if it’s possible.

Versioning APIs at Google
https://cloudplatform.googleblog.com/2017/06/versioning-APIs-at-Google.html
Versioning APIs is difficult, and everyone in the API space has opinions about how to do it properly. It’s also almost impossible to avoid. As teams build new software, occasionally they need to get rid of a feature (or provide that feature in a different way). Versioning gives your API users a reliable way to understand semantic changes in the API.

Delivering Billions of Messages Exactly Once
https://segment.com/blog/exactly-once-delivery/
In the past three months we’ve built an entirely new de-duplication system to get as close as possible to exactly-once delivery, in the face of a wide variety of failure modes. The new system is able to track 100x the number of messages of the old system, with increased reliability, at a fraction of the cost. Here’s how.

Serving 39 Million Requests for $370/Month, or: How We Reduced Our Hosting Costs by Two Orders of Magnitude
https://trackchanges.postlight.com/serving-39-million-requests-for-370-month-or-how-we-reduced-our-hosting-costs-by-two-orders-of-edc30a9a88cd
使用 Serverless 来节省成本

Why I’m Switching from React to Cycle.js
https://www.sitepoint.com/switching-from-react-to-cycle-js/
Most people start to use React without thinking that there might be a better way to build a web app. That reflection made me try Cycle.js, a new reactive framework that is becoming more popular every day. In this article, I want to explain what reactive programming is, how Cycle.js works, and why I think it’s better than React. So let’s start!

Why Serverless?
http://developer.telerik.com/topics/cloud/why-serverless/
In this article, I want to explain what serverless is, why I think it is an important new development, and where I think it will be the most impactful. This article will not focus on any one platform (my own experience is with Apache OpenWhisk), but rather keep things at a mostly generic level.

Why We Chose Typescript
https://redditblog.com/2017/06/30/why-we-chose-typescript/
Using a typed language in our frontend has already paid dividends: our code has fewer type-related bugs, we are more confident making large refactors, and our inline documentation is focused around concepts instead of object shapes and function parameters.

Thoughts on Self-Documenting CSS
http://keithjgrant.com/posts/2017/06/self-documenting-css/
Every comment represents a failure to make the code self explanatory - Robert C. Martin. However, this thinking raises interesting questions when it comes to a declarative language like CSS. Well… maybe. We use comments different ways for a variety of reason. Let’s look at some comments, and consider what they add (or not) to the code. I’ll start with some low-hanging fruit, then move on to the less obvious stuff.

I decided to disable AMP on my site
https://www.alexkras.com/i-decided-to-disable-amp-on-my-site/
The decision to turn AMP off was a long time coming. Thankfully it was almost as easy to disable AMP on WordPress as it was to enabled it. I just had to disable the AMP plugin. Less than 24 hours later Googled stopped showing the AMP version of my site in their search results.

Everything I Wish I’d Known Before I Started Demoing SaaS
https://thebetterstory.co/everything-i-wish-id-known-before-i-started-demoing-saas-f83c1c4fad99
I had spent 25 minutes showing a content team the many ways Airstory would improve their lives when their manager looked at me and said: But you guys aren’t funded. It was then — in that moment — that I realized this: I suck at demos. Poor demoing leaves the viewer with BS objections like “you’re not funded.”

Exactly-once Semantics are Possible: Here’s How Kafka Does it
https://www.confluent.io/blog/exactly-once-semantics-are-possible-heres-how-apache-kafka-does-it/
I’m thrilled that we have hit an exciting milestone the Kafka community has long been waiting for: we have  introduced exactly-once semantics in Apache Kafka in the 0.11 release. In this post, I’d like to tell you what exactly-once semantics mean in Apache Kafka, why it is a hard problem, and how the new idempotence and transactions features in Kafka enable correct exactly-once stream processing using Kafka’s Streams API.

How to Interview Engineers
http://blog.triplebyte.com/how-to-interview-engineers
In this blog post, I’m going to present what we’ve learned so far from this data. Technical interviewing is broken in a lot of ways. It’s easy to say this. (And many blog posts do!) The hard part is coming up with what to do about it. My goal for this post is to take on that challenge, and lay out specific advice for hiring managers and CTOs. Interviewing is hard. But I think that many of the problems can be fixed by running a careful process.
另附：The Best Frontend JavaScript Interview Questions

Possible future directions for data on the Web
https://www.w3.org/blog/2017/06/possible-future-directions-for-data-on-the-web/
As I enter my final days as a member of the W3C Team*, I’d like to record some brief notes for what I see as possible future directions in the areas in which I’ve been most closely involved, particularly since taking on the ‘data brief’ 4 years ago.

新鲜货

ECMAScript 2017 Language Spec Published
https://www.ecma-international.org/publications/standards/Ecma-262.htm
This Standard defines the ECMAScript 2017 general-purpose programming language.
另附：TC39, ECMAScript, and the Future of JavaScript.

Announcing TypeScript 2.4
https://blogs.msdn.microsoft.com/typescript/2017/06/27/announcing-typescript-2-4/
Dynamic import() expressions; String enums; Improved checking for generics; Return types as inference targets; Stricter checking for generic functions; Strict contravariance for callback parameters; Stricter checks on “weak types”.

Google Web Starter Kit
https://developers.google.com/web/tools/starter-kit/
Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google’s Web Fundamentals. A solid starting point for both professionals and newcomers to the industry.

Announcing Docker 17.06 Community Edition (CE)
https://blog.docker.com/2017/06/announcing-docker-17-06-community-edition-ce/
We released Docker CE 17.06 with new features, improvements, and bug fixes. Docker CE 17.06 is the first Docker version built entirely on the Moby Project, which we announced in April at DockerCon. You can see the complete list of changes in the changelog, but let’s take a look at some of the new features.

sonar – JS Foundation Welcomes Newest Project
https://js.foundation/announcements/2017/06/22/sonar-js-foundation-welcomes-newest-project
We are excited to announce the latest project to join the JS Foundation is sonar, a linting tool for the web. The concept for sonar was originally created by the Microsoft Edge team. As they started working on the project, it quickly became apparent that a tool meant to serve the entire web should be built in an openly governed and neutral home, which is why they have come to the JS Foundation.

Server Rendering React on Rails
https://www.webcodegeeks.com/ruby/server-rendering-react-rails/
In this article, we are going to talk about doing server rendering with our React components inside of Rails. An article by Tom Dale talks about misconceptions about server rendering. With so many misconceptions, what is it and why would you want it?

GitHub for Unity is now open source
https://github.com/blog/2385-github-for-unity-is-now-open-source
The GitHub for Unity extension we announced at the Game Developers Conference last March is now open source!

ECharts v3.6 发布：自定义系列、极坐标柱状图
http://efe.baidu.com/blog/echarts-3-6-0/
在 ECharts 新发布的 3.6 版本中，新增了 自定义系列（custom series），能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。

Rax
https://github.com/alibaba/rax
Rax is a universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax. Fast: blazing fast virtual DOM. Tiny: 8.0 KB minified + gzipped. Universal: works in browsers, Weex, Node.js and could works more container that implement driver specification.

Automated testing with Headless Chrome
https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai
If you want to run automated tests using Headless Chrome, look no further! This article will get you all set up using Karma as a runner and Mocha+Chai for authoring tests.

An Image-Diff Is Worth 1,000 Words
https://blog.usebutton.com/an-image-diff-is-worth-1-000-words-e03a4b682cea
使用 image-diff 来做测试

Node.js Will Overtake Java Within a Year: Analysis
http://blog.builtinnode.com/post/node-js-will-overtake-java-within-a-year-analysis
Node.js went from 8% in 2013 to 26% in 2017 and Java went from 42% to 39% in the same period (% of respondents that use the language). Considering the trend(s), even with just a slight drop for Java, Mikeal’s prediction might be true if the Node.js 100% growth rate carries on. That means that Node.js in on the right track to take over Java in terms of users.

Gathering weak npm credentials
https://github.com/ChALkeR/notes/blob/master/Gathering-weak-npm-credentials.md
Or how I obtained direct publish access to 13% of npm packages (including popular ones). The estimated number of packages potentially reachable through dependency chains is 52%.

The Ultimate List of 38 JavaScript Tools
https://hackernoon.com/the-ultimate-list-of-javascript-tools-e0a5351b98e3
Below you’ll find the ultimate list of JavaScript tools for web developers to help you with various coding tasks. You’ll discover helpful instruments to boost the development flow, reduce risks, optimize code, enhance security, and even more. It is a useful guide for business owners to understand their dev teams better.

Five Huge CSS Milestones
http://mediatemple.net/blog/tips/five-huge-css-milestones/
I figured I could weigh in as well, focusing on around the last decade, which, coincidentally, is how old CSS-Tricks is. That just about matches up with my experience in the industry. Firebug, Chrome, CSS3, Preprocessing, Flexbox & Grid.

pnpm version 1 is out!
https://medium.com/pnpm/pnpm-version-1-is-out-935a07af914
使用硬链的方式来节省空间

RE:DOM
https://redom.js.org/
RE:DOM is a tiny DOM library by Juha Lindstedt and contributors, which adds some useful helpers to create DOM elements and keeping them in sync with the data. Because RE:DOM is so close to the metal and doesn’t use virtual dom, it’s actually faster and uses less memory than almost all virtual dom based libraries, including React. It’s also easy to create reusable components with RE:DOM. Another great benefit is, that you can use just pure JavaScript, so no complicated templating languages to learn and hassle with.

Infinite Scroll V3.0
https://github.com/metafizzy/infinite-scroll/releases/tag/v3.0.0
nfinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.

Kitten Trick
https://github.com/akveo/kittenTricks
A react native mobile starter kit with over 40 screens and theme hot reload support.

Go Language – Web Application Secure Coding Practices
https://checkmarx.gitbooks.io/go-scp/
The main goal of this book is to help developers avoid common mistakes while at the same time, learning a new programming language through a “hands-on approach”. This book provides a good level of detail on “how to do it securely” showing what kind of security problems could arise during development.
另附： AWS Security Primer.

DIDI-VirtualAPK
https://github.com/didi/VirtualAPK
VirtualAPK is a powerful yet lightweight plugin framework for Android. It can dynamically load and run an APK file (we call it LoadedPlugin) seamlessly as an installed application. Developers can use any Class, Resources, Activity, Service, Receiver and Provider in LoadedPlugin as if they are registered in app’s manifest file.

base64-async
https://github.com/lukechilds/base64-async
Base64 in Node.js is already crazy fast. Breaking the work up into chunks and adding async logic adds overhead. If you aren’t dealing with large files it will probably be more efficient to just block the event loop for the small amount of time it takes Node.js to process Base64 synchronously.

Over 150 of the Best Machine Learning, NLP, and Python Tutorials I’ve Found
https://unsupervisedmethods.com/over-150-of-the-best-machine-learning-nlp-and-python-tutorials-ive-found-ffce2939bd78
After finding over 25 ML-related “cheat sheets”, I created a post that links to all the good ones. To help others that are going through a similar discovery process, I’ve put together a list of the best tutorial content that I’ve found so far. It’s by no means an exhaustive list of every ML-related tutorial on the web — that would be overwhelming and duplicative. Plus, there is a bunch of mediocre content out there. My goal was to link to the best tutorials I found on the important subtopics within machine learning and NLP.

产品及其它

Why Quip doesn’t have platform-specific engineering teams
https://quip.com/blog/quip-engineering-team-structure
通过搭建好底层，让所有人都能参与所有部分的开发

Four Ways to Deflate the Discord that’s Killing Your Team
https://alistapart.com/article/team-conflict-four-ways-to-deflate-the-discord-thats-killing-your-team
Start talking, Have a clear purpose, Plan conversations, Require accountability.

为什么Netflix的企业文化会备受整个硅谷的推崇
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650996669&idx=1&sn=bb3aeb93df929d7f2ad6a9ce3543731b
Netflix 在 2009 年释出了一份 100 多页的 PPT，讲述的企业文化精髓。这份 PPT 被 Facebook 公司的 COO 桑德伯格称为“硅谷最重要的文件”。Netflix 的工程文化，被很多国内一线互联网公司研究借鉴，这个外国的月亮，究竟圆在哪里？

马云谈人工智能
https://mp.weixin.qq.com/s?__biz=MzA3Mjc3NTQxMQ==&mid=2650408990&idx=1&sn=c48a5b26b6055992469a14edb1d41d7b
机器不应该成为人的对手，机器和人只有合作在一起，才能解决未来，就像竞争对手一样，我们不应该联合对抗，我们应该联合起来对抗人类未来共同的问题，共同的麻烦，只有这样，竞争只是乐趣。

稻盛和夫 - 让我成功做出2大世界级企业的思维方式
http://www.iheima.com/zixun/2017/0630/163880.shtml
成功和失败都是一种磨难。有人成功了，觉得自己了不得，态度变得令人讨厌，表示其人格堕落了；有人成功了，领悟到只凭自己无法有此成就，因而更加努力，也就进一步提升了自己的人性。而真正的胜利者，无论是成功或者失败，都会利用机会，磨炼出纯净美丽的心灵。