FEX 技术周刊 - 2018/07/23

业界会议

极客公园 - Rebuild 2018
http://rebuild.geekpark.net/
附：贝壳 VR 看房落地如何走过从零到一
大疆工业级野望的下一程，铺路、搭桥与催化
会后空翻的机器人 VS 四仰八叉的斗牛犬，谁才拥有真正的「智能」
19 岁的科大讯飞，想用 AI 打开新世界的大门

深阅读

Building the Google Photos Web UI
https://medium.com/google-design/google-photos-45b714dfbed1
We wanted to try something ambitious and simultaneously support a full-width (justified) layout, preserve the aspect–ratio of each photo, be scrubbable (ie let you jump to any section of your archive), handle hundreds-of-thousands of photos, scroll at 60fps, and load near instantly. At the time no other photo gallery supported all of this, and to the best of my knowledge they still don’t. While many other galleries now support some of these features they usually square crop each photo to make the layout work. Here is a technical write up about how we solved those challenges, and a peek under the hood of how the web version of Google Photos works.

The future of WebAssembly - A look at upcoming features and proposals
https://blog.scottlogic.com/2018/07/20/wasm-future.html
WebAssembly is a performance optimised virtual machine that was shipped in all four major browsers earlier this year. It is a nascent technology and the current version is very much an MVP (minimum viable product). This blog post takes a look at the WebAssembly roadmap and the features it might be gain in the near future. I’ll try to keep this blog post relatively high-level, so I’ll skip over some of the more technical proposals, instead focusing on what they might mean for languages that target WebAssembly.

Webmentions: Enabling Better Communication on the Internet
https://alistapart.com/article/webmentions-enabling-better-communication-on-the-internet
Over 1 million Webmentions will have been sent across the internet since the specification was made a full Recommendation by the W3C—the standards body that guides the direction of the web—in early January 2017. That number is rising rapidly, and in the last few weeks I’ve seen a growing volume of chatter on social media and the blogosphere about these new “mentions” and the people implementing them.

A one year PWA retrospective
https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
The idea of building a “Progressive Web App” (PWA) is not new, but its definition has changed with the emergence of key technologies like service workers. Now it’s finally possible to build great experiences in a mobile browser. Being an early adopter can be scary, so we’d like to share a brief overview of our experience building one of the world’s largest progressive web apps.

CSS-in-JS: FTW || WTF?
https://vimeo.com/278439003
Everyone’s talking about CSS-in-JS. It’s the Kim Kardashian of web development. And, as with Kimmie, opinions are polarised. To some, CSS in JS just makes sense: it’s local to your component, it can’t leak and, hey, I know how to write JavaScript and CSS is weird. To others, CSS-in-JS is an abomination that makes them want to emulate Kimmie and “release a fragrance” in disdain. Why are scripters so afraid of the cascade? Why the hesitance about inheritance? Let’s look at what CSS seems to lack, what the CSS-in-JS libraries can teach us, so we don’t do as Kim’s buttocks did and “Break the Internet”.

可视化图形语法 G2 3.2 迭变
https://yuque.com/antv/blog/g2-3.2-release
G2 是蚂蚁金服体验技术部 AntV 团队的重要产品之一，3.2 三大特性：让图表会讲故事，信息获取效率更高，图表一键换肤。

美团客户端响应式框架 EasyReact 开源啦
https://tech.meituan.com/react_programming_framework_easyreact_opensource.html
EasyReact 是一款基于响应式编程范式的客户端开发框架，开发者可以使用此框架轻松地解决客户端的异步问题。目前 EasyReact 已在美团和大众点评客户端的部分业务中实践，并且持续迭代了一年多的时间。近日，我们决定开源这个项目的 iOS Objective-C 语言部分，希望能够帮助更多的开发者不断探索更广泛的业务场景，也欢迎更多的社区的开发者跟我们一起加强 EasyReact 的功能。

WebIDE：在浏览器中写代码的时代即将来临
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651008292&idx=1&sn=9ea83174885b14d39ba75e9cdc60f075
在开发工具中，IDE 一向只是开发工具提供商的自留地，但它现在俨然已成为云计算厂商的目光焦点。WebIDE 到底是什么？它和以前的 IDE 有什么区别？它背后的技术是什么样的？为什么云计算厂商这么重视它？本文将对这些问题一一梳理。

Operationalizing Node.js for Server Side Rendering
https://medium.com/airbnb-engineering/operationalizing-node-js-for-server-side-rendering-c5ba718acfc9
As Airbnb builds more of its Frontend around Server Side Rendering, we took a look at how to optimize our server configurations to support it.

N-API: Next generation APIs for Node.js native addons available across all LTS release lines
https://medium.com/the-node-js-collection/n-api-next-generation-apis-for-node-js-native-addons-available-across-all-lts-release-lines-4f35b781f00e
N-API was put in as an experimental feature in Node.js 8.0, and after meeting a rigorous exit criteria defined by the community, it has been promoted to a supported feature in Node.js 10. It has also been backported to all LTS release lines. Having N-API with the same API across all LTS releases is a great milestone and we believe this is a significant step towards enabling its adoption. Many thanks to Gabriel Schulhof who put in a tremendous amount of effort to backport this feature across these versions.

Location-Aware Distribution: Configuring servers at scale
https://code.fb.com/data-infrastructure/location-aware-distribution-configuring-servers-at-scale/
In this post, we describe Location-Aware Distribution (LAD), a new peer-to-peer system that handles the distribution of configuration changes to millions of servers. We find that LAD is dramatically better at distributing large updates, 100 MB for LAD versus 5 MB previously, and also scales to support around 40,000 subscribers per distributor versus 2,500 subscribers before.

Productivity at Scale: How We Improved Build Time by 400% at LinkedIn
https://engineering.linkedin.com/blog/2018/07/how-we-improved-build-time-by-400-percent
One source of the productivity loss was the build system. Play Framework uses SBT as its default build system. SBT had served us well for a couple of years, however the growing size of our applications and LinkedIn’s scale started to push the build system to its limits. So, we started to look for alternatives and eventually decided to move to Gradle. A year later, as of this post, our largest Play app takes less than 5 minutes for IDE refresh, and build times are down from 60 minutes to 15 minutes. Here’s the story of how we got to this point.

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/
This article looks at augmenting HTML with components that have built-in functionality and styles. We’ll also learn how to make these custom elements reusable across projects using NPM.

The Best Explanation of JavaScript Reactivity
https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d
Many front-end JavaScript frameworks (Ex. Angular, React, and Vue) have their own Reactivity engines. By understanding what reactivity is and how it works, you can improve your development skills and more effectively use JavaScript frameworks. In the video and the article below, we build the same sort of Reactivity you see in the Vue source code.

JavaScript fundamentals before learning React
https://www.robinwieruch.de/javascript-fundamentals-react-requirements/
After all my teachings about React, be it online for a larger audience or on-site for companies transitioning to web development and React, I always come to the conclusion that React is all about JavaScript. Newcomers to React but also myself see it as an advantage, because you carry your JavaScript knowledge for a longer time around compared to your React skills. 另附：How Fast Can You Learn React?

Reflectly — From React Native to Flutter
https://medium.com/reflectly-engineering/reflectly-from-react-native-to-flutter-2e3dffced2ea
Why we moved 500.000+ users to Flutter

Reddit’s Voting UI in Vanilla vs React vs Vue vs Hyperapp
https://itnext.io/reddits-voting-ui-in-vanilla-vs-react-vs-vue-vs-hyperapp-shedding-light-on-the-purpose-of-spa-ee6b6ac9a8cc
Many beginners may wonder what the purpose of SPA (Single Page Application) libraries/frameworks is. Why can’t they just use plain old JavaScript since it can achieve the same thing without the bloat? What is the purpose of them, and why are they so hyped up?

REST was NEVER about CRUD
https://tyk.io/blog/rest-never-crud/
A popular myth is that REST-based APIs must be CRUD-based – that couldn’t be further from the truth. It is simply one pattern in our API design toolbox. This article outlines a variety of additional patterns available for REST-based APIs. The intent isn’t to be fully exhaustive, but to open the options for API designers uncertain about how to apply designs beyond CRUD to REST-based APIs. 另附：Tutorial: Designing a GraphQL API.

SRE fundamentals: SLIs, SLAs and SLOs
https://cloudplatform.googleblog.com/2018/07/sre-fundamentals-slis-slas-and-slos.html
The concept of SRE starts with the idea that metrics should be closely tied to business objectives. We use several essential measurements—SLO, SLA and SLI—in SRE planning and practice.

Into the Borg – SSRF inside Google production network
https://opnsec.com/2018/07/into-the-borg-ssrf-inside-google-production-network/
In March 2018, I reported an XSS in Google Caja, a tool to securely embed arbitrary html/javascript in a webpage. In May 2018, after the XSS was fixed, I realised that Google Sites was using an unpatched version of Google Caja, so I looked if it was vulnerable to the XSS. However, the XSS wasn’t exploitable there.

Windows Command-Line: Inside the Windows Console
https://blogs.msdn.microsoft.com/commandline/2018/07/10/windows-command-line-inside-the-windows-console/
Welcome to the third post in the Windows Command-Line series. In this post, we’ll start to dig into the internals of the Windows Console and Command-Line, what it is, what it does … and what it doesn’t do. Posts in this series: Command-Line Backgrounder, The Evolution of the Windows Command-Line(https://blogs.msdn.microsoft.com/commandline/2018/06/27/windows-command-line-the-evolution-of-the-windows-command-line/), Inside the Windows Console (this post).

Getting to Go: The Journey of Go’s Garbage Collector
https://blog.golang.org/ismmkeynote
This is the transcript from the keynote I gave at the International Symposium on Memory Management (ISMM) on June 18, 2018. For the past 25 years ISMM has been the premier venue for publishing memory management and garbage collection papers and it was an honor to have been invited to give the keynote.

How to take 7 years to ship a beta
https://medium.com/@eigenbom/how-to-take-7-years-to-ship-a-beta-4fcfc2428d88
It’s been almost 7 years since I quit my last job. Back in 2011 I was a freshly baked postgraduate in Melbourne. I was entering my 30’s and the indie game renaissance was in full swing. When my contract ended I decided to leave academia and pursue my own path in game development. I then began working on a game called Moonman. Fast forward some long years and that game, now called MoonQuest, has just been released on Steam Early Access and itch.io. So how can you take 7 years to make your game? Here are some important tips and tricks for taking your sweet time.

新鲜货

ndb
https://github.com/GoogleChromeLabs/ndb
ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools. ndb requires Node >=8.0.0. It works best with Node >=10.

npm v6.2.0
https://blog.npmjs.org/post/175871462900/v620
In case you missed it, we moved!. We look forward to seeing future PRs landing in npm/cli in the future, and we’ll be chatting with you all in npm.community. Go check it out! This final release of npm@6.2.0 includes a couple of features that weren’t quite ready on time but that we’d still like to include. Enjoy!

Introducing Data Transfer Project: an open source platform promoting universal data portability
https://opensource.googleblog.com/2018/07/introducing-data-transfer-project.html
We’re taking our commitment to portability a step further. In tandem with Microsoft, Twitter, and Facebook we’re announcing the Data Transfer Project, an open source initiative dedicated to developing tools that will enable consumers to transfer their data directly from one service to another, without needing to download and re-upload it. Download Your Data users can already do this; they can transfer their information directly to their Dropbox, Box, MS OneDrive, and Google Drive accounts today. 另附：Google AI - Announcing Cirq: An Open Source Framework for NISQ Algorithms

2018 Serverless Community Survey
https://serverless.com/blog/2018-serverless-community-survey-huge-growth-usage/
huge growth in serverless usage.

CanJS 5.0
https://www.bitovi.com/blog/canjs-5
CanJS 5.0 is out with what you’ve been asking for — faster setup, webpack support, configure-less models, more powerful query logic, and dynamic components. Read on to find out how you can take advantage of these features in your app. 另附：Use React in Cycle.js and vice-versa

Animating SVG Files With SVGator
https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/
We’re pretty excited by tools such as SVGator, which really speed up the process when you’re making simple SVG animations. Here’s how easy it is to use and how you can get a great-looking animation in no time.

TOAST UI Grid
http://ui.toast.com/tui-grid/
A powerful widget which allows you to visualize and edit data via its table representation. The TOAST UI Grid is a component that can display, edit, add, and delete multiple data. You can append units to the data shown and use html to represent images and links instead of textual data.

Phenomenon
https://github.com/vaneenige/phenomenon
Phenomenon is a very small, low-level WebGL library that provides the essentials to deliver a high performance experience. Its core functionality is built around the idea of moving millions of particles around using the power of the GPU.

localForage
https://github.com/localForage/localForage
localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API. localForage uses localStorage in browsers with no IndexedDB or WebSQL support.

asciichart
https://github.com/kroitor/asciichart
Console ASCII line charts in pure Javascript (for NodeJS and browsers) with no dependencies. This code is absolutely free for any usage, you just do whatever the fuck you want.

signale
https://github.com/klauscfhq/signale
Hackable and configurable to the core, signale can be used for logging purposes, status reporting, as well as for handling the output rendering process of other node modules and applications.

react-flame-graph
https://github.com/bvaughn/react-flame-graph
React components for efficiently rendering large lists and tabular data.

Polly.JS
https://github.com/Netflix/pollyjs
Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions. Polly taps into native browser APIs to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.

Nock - HTTP server mocking and expectations library for Node.js
https://github.com/nock/nock
Nock can be used to test modules that perform HTTP requests in isolation. For instance, if a module performs HTTP requests to a CouchDB server or makes HTTP requests to the Amazon API, you can test that module in isolation. 另附：Mocking HTTP requests with Nock

v8n
https://github.com/imbrn/v8n
The ultimate JavaScript validation library you’ve ever needed. Dead simple fluent API. Customizable. Reusable.

Z - Pattern Matching for Javascript
https://z-pattern-matching.github.io/
The pattern matching is basically a switch on steroids, you can create powerful conditions such based on Object properties or Array content without manipulating the Object or Array itself. That amount of power leads you write functional, immutable, and expressive code instead imperative, which reduces a lot of complexity and bugs.

Fastpack
http://fastpack.io/
Why? JavaScript bundling can be faster. We can critically re-think the building infrastructure. We have proper tools. Writing OCaml is fun! 又一个轮子，不过这个的确是非常必要：JavaScript bundling can be faster.

Scrolling Gradient
https://codepen.io/MadeByMike/pen/eKPZZz
I decided to adapt the CSS Only Scroll Indicator technique to make a background gradient that canges with scroll position. The top right corner of the gradient changes while the bottom right remains the same. This works by overlaying 2 gradients, The first is a top-to-bottom gradient with a height of the content. This contains the colors you want to cycle through. The other is a top-left, to bottom-right gradient from transparent to a solid color. This gradient is fixed to the viewport dimensions and pulled behind text, similar to the scroll indicator.

Teach Yourself Computer Science
https://teachyourselfcs.com/
There are plenty of resources out there, but some are better than others. You don’t need yet another “200+ Free Online Courses” listicle. You need answers to these questions: Which subjects should you learn, and why? What is the best book or video lecture series for each subject? This guide is our attempt to definitively answer these questions.

设计

Mobbin - Latest Mobile Design Patterns
https://mobbin.design/
Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 130 iOS apps and 6,000 patterns (screenshots from iPhone X) available on the platform. Sign up to save your favorite patterns.

Your Body Text Is Too Small
https://blog.marvelapp.com/body-text-small/
Why website body text should be bigger, and ways to optimize it.

Mobile product designers will shape the future of 3D application design
https://www.invisionapp.com/blog/ux-designers-mobile-ar/
When Google and Apple launched their mobile augmented reality (AR) platforms last summer, they effectively shifted the center of gravity for 3D application design and development. Before these launches, the main hardware platform focus had been virtual reality headsets and use cases that tended heavily toward gaming, filmmaking, architecture, and engineering.

What I learned from chatting with 7,000 strangers on the internet
https://redditblog.com/2018/07/18/what-i-learned-from-chatting-with-7000-strangers-on-the-internet/
our feedback helped us reshape the direction of chat on Reddit from one-to-one chat to private group chats and eventually to community-based chat rooms (and your jokes helped me get through many a long day). Chat rooms are now in beta and being released to more subreddits daily. Check out r/subchats or this post if you’d like to see how it works!

What’s Appening? Gamification and Playfulness in Headspace
https://uxplanet.org/whats-appening-gamification-and-playfulness-in-headspace-f9cabfab6690
Gamification is about using elements from game design in non-game situations to increase engagement and encourage desirable behaviors from users. What so many gamification designers seem to miss is that games aren’t just about points and achievements. They’re about being fun and playful. Headspace is a guided meditation app that uses game elements that increase and enable intrinsic motivation to create long-term change. In this article, I’m going to look at how they do that, as well as how they might be able to do that better.

起点读书APP，背后的改版设计实录
https://www.uisdc.com/qidian-app-revised-design
于一个较大型且历史包袱比较重的项目我们是如何去做改版的。

产品及其它

Kiwix
http://www.kiwix.org/
In many places internet can be slow, unreliable or even censored. Kiwix is an offline solution that allows you to access educational content like Wikipedia, the Wiktionary, TED talks and many others on any computer or smartphone - without the need for a live internet connection. We bring internet content to people without internet access. In schools, universities, prisons, and of course at home. Locally-stored content saves bandwidth and download time. Kiwix is small and efficient, works on low power or old computers. It also runs on a wide range of operating systems, from Android and iOS to Microsoft Windows, macOS and GNU/Linux distributions. 另附：Wikimedia Foundation and Kiwix partner to grow offline access to Wikipedia.

PeerTube, the “Decentralized YouTube”, succeeds in crowdfunding
https://quariety.com/2018/07/20/peertube-the-decentralized-youtube-succeeds-in-crowdfunding/
It is done. With 53,100 euros collected in forty-two days, the PeerTube project originating in France blows through its initial goal. The principle is intriguing: a fully decentralized version of YouTube , whose computer code is freely accessible and editable, and where videos are shared between users without relying on a central system. Online since March 2018 in a beta version, the project should definitely take off by October, based on the money raised.

How the Nintendo Entertainment System lives on in open source
https://blog.github.com/2018-07-16-how-the-nintendo-entertainment-system-lives-on-in-open-source-game-bytes/
The NES was released 35 years ago today. While official NES games haven’t been released in over 20 years, a “homebrew” scene exists where developers are still creating NES games (playable on the original hardware or on emulators) in the original 6502 Assembly Language. Whether you grew up playing NES games, or your parents did, you’re bound to find something of interest—either in the gameplay or in the code—for some of these games below.

网易云音乐王诗沐：方法论其实没那么重要
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247497915&idx=1&sn=46c2e72460e26100f35627457be81e7c
对于一个产品经理来讲，最重要的不是抽象地去学习别人的方法论，而是通过自己的深度思考和用户洞察，不断总结和迭代自己的方法论，不断的形成闭环。网易云音乐上线这几年来，收到了很多赞誉。很多用户感觉云音乐特别懂用户的心，比他的妈妈还要懂，不仅能找到他喜欢的歌，还能通过音乐的互动与其他人产生共鸣。