FEX 技术周刊 - 2017/04/24

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

F8 2017
https://www.fbf8.com/
附：
Facebook and the Cost of Monopoly
Facebook’s new tech at F8 2017
Facebook open source at F8 2017
Facebook F8 年度大会最全盘点。
值得前端关注的：
Relay Modern: Simpler, faster, more extensible
Facebook announces React Fiber, a rewrite of its React framework
Building virtual reality experiences on the web with React VR

[报名]2017 JavaScript中国开发者大会
http://2017.jsconf.cn/ 7月15至16日在上海举行，赶紧抢票吧。

深阅读

LinuxKit: A Toolkit for Building Secure, Lean and Portable Linux Subsystems
https://blog.docker.com/2017/04/introducing-linuxkit-container-os-toolkit/
LinuxKit includes the tooling to allow building custom Linux subsystems that only include exactly the components the runtime platform requires. All system services are containers that can be replaced, and everything that is not required can be removed. All components can be substituted with ones that match specific needs. It is a kit, very much in the Docker philosophy of batteries included but swappable.

Hard-won lessons: Five years with Node.js
https://blog.scottnonnenberg.com/hard-won-lessons-five-years-with-node-js/
After five years working with Node.js, I’ve learned a lot. I’ve already shared a few stories, but this time I wanted to focus on the ones I learned the hard way. Bugs, challenges, surprises, and the lessons you can apply to your own projects!

Improving Startup Time
http://blog.atom.io/2017/04/18/improving-startup-time.html
Over the last months, the Atom team has been working hard on improving one of the aspects of the editor our users care about the most: startup time. We will first provide the reader with some background about why reducing startup time is a non-trivial task, then illustrate the optimizations we have shipped in Atom 1.17 (currently in beta) and, finally, describe what other improvements to expect in the future.

It’s Time To Start Using CSS Custom Properties
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. As a silver bullet for these and other problems, the community invented CSS custom properties. Essentially, these look and work like CSS variables, and the way they work is reflected in their name. Custom properties are opening new horizons for web development.

When Does a Project Need React
https://css-tricks.com/project-need-react/
I’m just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte… whatever. I understand they aren’t all the same, but when to reach for them I find equally nebulous. Here’s my take.
另附：Choosing between React and Angular: An in-Depth Comparison Things nobody will tell you about React.js

The Benefits of Server Side Rendering Over Client Side Rendering
https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Most of our pages on walmart.com are using server side rendering (henceforth SSR) with only a few unique exceptions. We are using server side rendering for two reasons: Performance benefit for our customers; Consistent SEO performance.

Modernizing the DOM tree in Microsoft Edge
https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/#rJS15V2JDdrG8i26.97
The DOM is the foundation of the web platform programming model, and its design and performance impacts the rest of the browser pipeline. However, its history and evolution is far from a simple story.
另附：Improved JavaScript performance, WebAssembly, and Shared Memory in Microsoft Edge

单页应用的数据流方案探索
https://zhuanlan.zhihu.com/p/26426054
民工叔叔在 Qcon 的分享：过去的3年里，前端开发领域可谓风起云涌，革故鼎新。除了开发语言的语法增强和工具体系的提升之外，大部分人开始习惯几件事：组件化、MDV（Model Driven View）。所谓组件化，很容易理解，把视图按照功能，切分为若干基本单元，所得的东西就可以称为组件，而组件又可以一级一级组合而成复合组件，从而在整个应用的规模上，形成一棵倒置的组件树。这种方法论历史久远，其实现方式或有瑜亮，理念则大同小异。而MDV，则是对很多低级DOM操作的简化，把对DOM的手动修改屏蔽了，通过从数据到视图的一个映射关系，达到了只要操作数据，就能改变视图的效果。

一种几乎无法被检测到的Punycode钓鱼攻击，Chrome、Firefox和Opera等浏览器都中招
http://www.freebuf.com/news/132240.html
使用肉眼没法区分的 unicode 域名

CSS Grid布局这样玩
https://www.w3cplus.com/css3/playing-with-css-grid-layout.html
自从去年下半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。就我个人而言，我也一直在不断的关注这个布局利器的相关更新，自从最初规范的出来，到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了，但各有千秋，我追求以最简单，最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

Node CTC Votes to Delay Node 8.x To May 30th
https://github.com/nodejs/CTC/issues/99
Following a [discussion] on how Node will deal with key changes to the V8 JavaScript engine, the CTC voted to delay Node v8 until the end of May.

Announcing Free Node.js Monitoring & Debugging with Trace
https://blog.risingstack.com/announcing-free-node-js-monitoring-and-debugging/
We launched Trace a year ago with the intention of helping developers looking for a Node.js specific APM which is easy to use and helps with the most difficult aspects of building Node projects, like: finding memory leaks in a production environment, profiling CPU usage to find bottlenecks, tracing distributed call-chains, avoiding security leaks & bad npm packages.

The Definitive Guide to Object Streams in Node.js
https://community.risingstack.com/the-definitive-guide-to-object-streams-in-node-js/
Node.js Streams come with a great power: You have an asynchronous way of dealing with input and output, and you can transform data in independent steps. In this tutorial, I’ll walk you through the theory, and teach you how to use object stream transformables, just like Gulp does.

Me and SVG
http://codepen.io/AmeliaBR/post/me-and-svg
For the past three-and-a-half years of my life, I have devoted a large portion of my time and creativity to the creature known as SVG. Whether that was a good choice or not, I do not know. But here I am. However, I’m not really sure where I’m going to go next. And I’m even less sure where SVG is going next. So I sat down to write out my thoughts about the future of SVG, and instead wrote about how I came to be so tangled up with it.

PhotoScan: Taking Glare-Free Pictures of Pictures
https://research.googleblog.com/2017/04/photoscan-taking-glare-free-pictures-of.html
One of the key features of PhotoScan is the ability to remove glare from prints, which are often glossy and reflective, as are the plastic album pages or glass-covered picture frames that host them. To create this feature, we developed a unique blend of computer vision and image processing techniques that can carefully align and combine several slightly different pictures of a print to separate the glare from the image underneath.

PHP 7 Virtual Machine
http://nikic.github.io/2017/04/14/PHP-7-Virtual-machine.html
深入解读 PHP 7 虚拟机的实现原理

新鲜货

Welcome home to the new Google Earth
https://blog.google/products/earth/welcome-home-new-google-earth/
Today we’re introducing a brand-new version of Google Earth—on the web and Android—two years in the making. With the new Earth, we want to open up different lenses for you to see the world and learn a bit about how it all fits together; to open your mind with new stories while giving you a new perspective on the locations and experiences you cherish. 体验 Web 版 https://earth.google.com/web/

Firefox faster and more stable with the first big bytes of Project Quantum
https://blog.mozilla.org/blog/2017/04/19/first-big-bytes-project-quantum/
In case you missed our Project Quantum announcement, we’re building a next-generation browser engine that takes full advantage of modern hardware. Today we’re shipping one of the first important pieces of this effort – what we’ve referred to as the “Quantum Compositor”. 另附：Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More.

Google - WebVR Experiments
https://www.webvrexperiments.com/
To explore what’s possible with WebVR, we’re launching WebVR Experiments, a showcase of the amazing experiences developers are already building.

Litho
http://fblitho.com/docs/getting-started
Facebook 新推出的 Android UI 框架

React Move
https://github.com/tannerlinsley/react-move
Beautifully and deterministically animate anything in react.

Recycle V2 - A functional and reactive library for React
https://github.com/recyclejs/recycle/
Convert functional/reactive object description into React component. You don’t need another UI framework if you want to use RxJS.

Chroma.js
https://github.com/gka/chroma.js
Chroma.js is a tiny JavaScript library (14kB) for all kinds of color conversions and color scales.

Web魔幻线条 - curvejs
https://github.com/AlloyTeam/curvejs
curvejs 中文读[“克js”]，是腾讯AlloyTeam打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，HTML5 Canvas就是舞台。

pwmetrics
https://github.com/paulirish/pwmetrics
Progressive web metrics at your fingertipz. CLI tool and lib to gather performance metrics via Lighthouse. IN BETA.

Tamper Chrome
https://github.com/google/tamperchrome
Tamper Chrome is a Chrome extension that allows you to modify HTTP requests on the fly and aid on web security testing. Tamper Chrome works across all operating systems (including Chrome OS).

68 Resources To Help You To Create Programming Languages
https://tomassetti.me/resources-create-programming-languages/
Creating a programming language is one of the most fascinating challenge you can dream of as a developer. We organized the resources around the three stages in the creation of a programming language: design, parsing, and execution.

tiny-care-terminal
https://github.com/notwaldorf/tiny-care-terminal
This is a little dashboard that tries to take care of you when you’re using your terminal. It tells you cute, self care things, and tries not to stress you out.

Java 微服务框架新选择：Spring 5
https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653548625&idx=1&sn=04467345d35dcf057d4bfe8f483c4bdb
Spring 5 引入了新的编程范式用来开发小型的、轻量级的、微服务式 Web应用程序。 我们显式得定义请求路由器和请求处理函数，在完全不需要应用上下文的情况下快速运行并部署。

那些让人惊艳的Python库
https://mp.weixin.qq.com/s?__biz=MzI3NTAxNjE0Ng==&mid=2650007219&idx=1&sn=de4f7fc20a12499cceecf95abb44b757
每一门技艺都是入门容易熟悉难，越是了解，越是感觉到自己的欠缺，在python博大精深的世界里，这些蔚为壮观的python库，也只能算是沧海一粟。

产品及其它

为什么说顺丰错过了成为更伟大企业的机会
https://mp.weixin.qq.com/s?__biz=MjM5OTM5OTAyMQ==&mid=2654431175&idx=2&sn=18ef9ca322b4cf6e068aababda54b9fc
今天的顺丰尽管高享两千多亿的估值。光鲜亮丽的财报难掩隐忧：B2B 商务件收入和利润增长滞后；在最热闹的电商市场被边缘化。这影响顺丰长远增长，也将决定顺丰行业地位。

聊聊【折腾】的重要性
https://program-think.blogspot.com/2017/04/The-Importance-of-Zheteng.html
“折腾”指的是：在你【不熟悉】的领域中干某些事情（如果是你【熟悉】的领域，那属于“轻车熟路”，不能算“折腾”）；这些事情通常带有某种“探索/钻研”的性质（通常颇费周折）；这些事情通常要耗费一定的时间和精力（能很快搞定的，就不能算“折腾”）；这些事情通常具有不确定的结果（你不清楚是否能得到期望的结果）。

这一波知识付费：一个机会，两种能力，三个要点
https://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=2652915461&idx=1&sn=ff6f41377960bfe2f6585f3bb8c5b1fa
“知识付费”其实可以算作是“内容付费”的一个最重要的分支，在这一波浪潮中，表现最抢眼的，也是“知识付费”，包括三节课在做的事，也与“知识付费”更近，因此，今日此文，我会更侧重于“知识付费”产品的角度来谈一些我自己的思考和见解，当中也会有一些观点和逻辑可以广泛适用于更为广阔的“内容付费”范畴。

Ptmind铂金智慧：像Excel一样，做一款人人都能用的数据产品
https://mp.weixin.qq.com/s?__biz=MzI3MDUyNjM2Ng==&mid=2247484685&idx=1&sn=10d90a64609cec343014a3548df3373d
在企业业务体系中，对数据分析有越来越多需求的销售人员、市场人员。所谓的普适性就是大家能够普遍的使用，实际上，目前世界上唯一普适性的数据工具只有一个，那就是excel，Ptmind要做的就是互联网数据分析领域的Excel。没有任何事情能够阻挡大家对数据价值的认可和利用，数据已经成为每个人都触手可及的，像空气和水一般的存在。

The Art of Writing One-Sentence Product Descriptions
https://medium.dave-bailey.com/the-magic-formula-to-describe-a-product-in-one-sentence-175ce38619c7
A look back at early interviews with Facebook and Uber CEOs illustrates an ingenious way to communicate hard-to-describe products. Your product will only come up in conversations when it’s perceived as being relevant to that conversation. Viral products tend to have a “lead feature”.