FEX 技术周刊 - 2018/08/13

深阅读

V8 release v6.9
https://v8project.blogspot.com/2018/08/v8-release-69.html
This post provides a preview of some of the highlights in anticipation of the release: Memory savings through embedded built-ins; Liftoff, WebAssembly’s new first-tier compiler; Faster DataView operations; Faster processing of WeakMaps during garbage collection;

Announcing Dart 2 Stable and the Dart Web Platform
https://medium.com/dartlang/dart-2-stable-and-the-dart-web-platform-3775d5f8eac7
We’re announcing the immediate availability of the stable release of Dart 2, including a rewrite of the Dart web platform that offers a unique combination of productivity, performance and scalability. With the release of Dart 2, web developers can now leverage the same language, libraries and tools along with a number of web-specific enhancements. 附：Dart重启！Dart 2正式发布，目标成为移动与Web开发主流语言.

New version of the Roadmap of Web Applications on Mobile
https://www.w3.org/blog/news/archives/7227
W3C has published a new version of its Roadmap of Web Applications on Mobile, an overview of the various technologies developed in W3C that increase the capabilities of Web applications, and how they apply more specifically to the mobile context. The contents of the roadmap have been updated to follow the evolution of the Web platform since April 2018.

Community questions following the eslint security incident
https://blog.npmjs.org/post/176488970320/community-questions-following-the-eslint-security
Following the eslint incident on July 12, 2018, the community reached out to us with a few follow-up questions. This post will answer those questions as well as provide some additional technical insight into the eslint-scope malware that we haven’t seen discussed elsewhere.

从前端技术进化到体验科技
https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg
玉伯分享了他从前端一路进阶升级到体验科技的个人思考，并详细介绍了体验科技的历史及未来发展，以及本次体验科技开放的愿景。前端的本质是什么？随着移动和物联网的发展，前端技术又会有哪些变化？希望通过本文内容大家能对这些问题以及体验科技有更进一步的了解。

聊聊CSS中的层叠相关概念
https://www.w3cplus.com/css/understand-css-stacking-context-order-z-index.html
对于众多CSSer来说，阅读CSS的规范和理解相关的概念都是枯燥无味的。而且很多同学理解一些概念都比较吃力。比如这篇文章中提到的相关概念： 文档流（Normal Flow）、格式化上下文（Formatting Context）、层叠上下文（Stacking Context）、层叠水平（Stacking Level） 和 层叠顺序（Stacking Order）。虽然这些概念是CSS的基础，但很多同学都一直不愿去触碰，因为它们看起来简单，事实上还是较为复杂的。如查我们花一定的时间理解了这些概念，能帮助我们更好的理解CSS中其他相关的概念和知识点，特别是z-index的运用。

美团扫码付的前端可用性保障实践
https://tech.meituan.com/qrcode_web_availability_guarantee.html
2017年，美团金融前端遇到了很多通用性问题，特别是在保障前端可用性的过程中，我们团队也踩了不少“坑”，在梳理完这些问题以后，我们还专门做了一期线下沙龙给大家进行了分享。不管是在面试过程中与候选人讨论，还是在团队内的和我们前端小伙伴讨论，都能发现很多同学有一个共同点，对所做的工作缺乏判断，包括如何评判工作交付的质量，如何评判产品与客户之间的触达率等等，这些问题其实比“埋头敲代码”重要很多。今天抛砖引玉，分享一下我们团队的思考，希望能帮助更多的同学对前端可用性的保障工作，有一个更全面的认识。

为什么现在的前端开发工程师都只在提技术和造轮子，并不怎么关注UI和UX相关的东西
https://www.zhihu.com/question/288641999
这是一个值得思考的问题。其实 UI 是可以成为产品核心竞争力的，比如 Apple。

精读 The Cost of JavaScript
https://zhuanlan.zhihu.com/p/41292532
作者首先将全文的内容压缩成几条观点总结出来，之后从用户体验为 Web 带来的变化开始说起，到 JavaScript 的成本有哪些、它们为何如此高昂、如何降低开销以及持续集成，全文形成一个非常完整的优化流程。

Pseudo Localization @ Netflix
https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe
In the past 8 years Netflix has transformed from an English-only product, to now supporting 26 languages and growing. As we add language support for our members residing in 190 different countries, scaling globalization at Netflix has never been more important. Along the way we’ve built out countless solutions to help us achieve globalization at scale. In this article we’ll focus on one my team has been working on, Pseudo Localization.

A Breath of Life: Welcome the Brand New Mobile Web Dashboard
https://engineering.tumblr.com/post/176808165864/javascript-a-breath-of-life-welcome-the-brand
We rebuilt another piece of the site with React. And the rewrite turned out really well. Even with more features like pull-to-refresh, a new activity popover, and modern audio and video players, we sped up our DOM content loaded time by 35%! The new page has a lot of modern web standards in it too like srcsets, flexbox, asynchronous bundle loading, and a web app manifest.

Webhint.io – hinting at a better web
https://christianheilmann.com/2018/08/07/webhint-io-hinting-at-a-better-web/
we released a new, rebranded version of the tool. It is now called Webhint and you can find it on GitHub, use it at webhint.io or use it as a node module using npm, yarn or whatever other package installer you want to use. By default webhint tests for these features of great web products: Performance, Accessibility, Browser Interoperability, Security, Sensible configuration of build tools and PWA Readiness.

How to deal with dirty side effects in your pure functional JavaScript
https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/
ow, when I say they cheat, they technically follow the rules. But they find loopholes in those rules and stretch them big enough to drive a herd of elephants through. There’s two main ways they do this: Dependency injection, or as I call it, chucking the problem over the fence; and Using an Effect functor, which I think of as extreme procrastination.

GLB: GitHub’s open source load balancer
https://githubengineering.com/glb-director-open-source-load-balancer/
GLB Director is a Layer 4 load balancer which scales a single IP address across a large number of physical machines while attempting to minimise connection disruption during any change in servers. GLB Director does not replace services like haproxy and nginx, but rather is a layer in front of these services (or any TCP service) that allows them to scale across multiple physical machines without requiring each machine to have unique IP addresses.

GraphQL on the server
https://www.joyent.com/blog/graphql-on-the-server
In the following post we’ll quickly explain what GraphQL is and why you might want to consider it. GraphQL is a querying language for APIs, and we have been using it as an alternative to REST. 另附：graphqurl - a curl like CLI for GraphQL、Moving beyond REST vs. GraphQL to platform thinking.

Two Years Later: APIs are the Destination
https://www.ebayinc.com/stories/blogs/tech/two-years-later-apis-are-destination/
eBay speaks API! Two years ago, we started a journey to deliver a new, modern family of APIs to expose marketplace capabilities to sellers and buyers. The APIs evolved and grew with the business and enabled expansion to new experiences. They are built by developers for developers and treated as first-class products at eBay. We delivered a simple, consistent, and well-documented API portfolio rather than an API maze where it is challenging to discover capabilities.

Why Status Codes Matter in Data Delivery
https://segment.com/blog/why-status-codes-matter-in-data-delivery/
Segment engineering has taken lengths to operate reliably in this environment. Our latest efforts have been around visibility into the HTTP response codes from destinations. We spent the last few months adding hooks to measure everything from the volume of events, how quickly they are sent to destinations, and what HTTP status code and error response body, if any, occurred for every request. This instrumentation is ultimately for Segment users to see into the black box to answer one question: how do delivery challenges affect my data? To this end, we built an event delivery dashboard around the data.

Use Cloudflare Stream to build secure, reliable video apps
https://blog.cloudflare.com/why-use-stream/
If I had to summarize what we’ve learned as we’ve built Stream it would be: Video streaming is hard, but building a successful video streaming business is even harder. This is why our goal has been to take away the complexity of encoding, storage, and smooth delivery so you can focus on all the other critical parts of your business.

If You’re Not Monitoring Your Resource Pools, You’re Doing It Wrong
https://blog.newrelic.com/engineering/monitor-resource-pools/
In my four years at New Relic I’ve been responsible for the health of dozens of different services. Something they all had in common was that when they failed you could always see something going on in their resource pools.

Prometheus - transforming monitoring over the years
https://coreos.com/blog/prometheus-transforming-monitoring-over-years
Prometheus is easy to set up as a single, statically linked binary that can be downloaded and started with a single command. In tandem with this simplicity, it scales to hundreds of thousands of samples per second ingested on modern commodity hardware. Prometheus’ architecture is well suited for dynamic environments in which containers start and stop frequently, instead of requiring manual re-configuration. M3: Uber’s Open Source, Large-scale Metrics Platform for Prometheus.

Writing Good Documentation for Your Open-Source Library
https://brainhub.eu/blog/writing-good-documentation-open-source-library/
There are many parts to a documentation, among others: Readme, Reference, Guide, Cookbook, Blog post. Each of these fulfills different purposes, and the boundary between kinds of docs is sometimes blurred. 另附：如何才能写出好的软件设计文档.

新鲜货

Julia 1.0
https://julialang.org/blog/2018/08/one-point-zero
Scientific computing has traditionally required the highest performance, yet domain experts have largely moved to slower dynamic languages for daily work. We believe there are many good reasons to prefer dynamic languages for these applications, and we do not expect their use to diminish. Fortunately, modern language design and compiler techniques make it possible to mostly eliminate the performance trade-off and provide a single environment productive enough for prototyping and efficient enough for deploying performance-intensive applications. The Julia programming language fills this role: it is a flexible dynamic language, appropriate for scientific and numerical computing, with performance comparable to traditional statically-typed languages.

Vue CLI 3.0 is here!
https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb
Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI 3.0 and all the exciting features that come with it. 另附：Vue技术内幕、VUE.js 技术揭秘、Vue SSR不可不知的问题.

First Babel 7.0 Release Candidates
https://github.com/babel/babel/releases/tag/v7.0.0-rc.1
附：Planning for 7.0

Ultralight - HTML UI Engine
https://ultralig.ht/
Ultralight is the lighter, faster option to integrate HTML UI in your C++ app.

WebReplay
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/WebReplay
介绍 firefox 新版重放功能的实现，可以支持 JS、DOM、图形的重放，看起来很厉害

The Transport Layer Security (TLS) Protocol Version 1.3
https://tools.ietf.org/html/rfc8446
This document specifies version 1.3 of the Transport Layer Security (TLS) protocol. TLS allows client/server applications to communicate over the Internet in a way that is designed to prevent eavesdropping, tampering, and message forgery. 附：Facebook - Deploying TLS 1.3 at scale with Fizz, a performant open source TLS library、A Detailed Look at RFC 8446 (a.k.a. TLS 1.3).

Internet Archive, decentralized
https://dweb.archive.org/
A goal in creating a Decentralized Web is to reduce or eliminate such centralized points of control. That way, too, if any player drops out, the system still works. Such a system could better help protect user privacy, ensure reliable access, and even make it possible for users to buy and sell directly, without having to go through websites that now serve as middlemen, and collect user data in the process. 另附：Nile: decentralized, commission-free, local-economy focused ecommerce、Dweb: Social Feeds with Secure Scuttlebutt.

Mavo - A new, approachable way to create Web applications
http://mavo.io/
Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend. 另附：Retool - Build custom internal tools faster， Retool makes building internal software faster by pre-building common components.

Introducing Android 9 Pie
https://android-developers.googleblog.com/2018/08/introducing-android-9-pie.html
Android 9 harnesses the power of machine learning to make your phone smarter, simpler, and tailored to you. Read all about the new consumer features here. For developers, Android 9 includes many new ways to enhance your apps and build new experiences to drive engagement.

Introducing Electron Fiddle
https://medium.com/@felixrieseberg/introducing-electron-fiddle-1de2be1ba6e7
We’re releasing a first version of Electron Fiddle, an attempt to bring the same playfulness to cross-platform desktop development with Electron. Electron Fiddle lets you create, share, and play with small Electron experiments. It greets you with a quick-start template after opening — change a few things, choose the version of Electron you want to run it with, and play around.

Pts
https://github.com/williamngan/pts
Pts is a typescript/javascript library for visualization and creative-coding.

Angular Console — The UI for the Angular CLI
https://blog.nrwl.io/angular-console-the-ui-for-the-angular-cli-a5d0924240b7
We realized that most developers don’t need more sophisticated commands — they need a more approachable way to use what the Angular CLI already does. And that’s what Angular Console is.

react-day-picker
https://github.com/gpbl/react-day-picker
Flexible date picker component for React. Highly customizable, localizable, with ARIA support, no external dependencies, 9KB gzipped. 另附：React Timekeeper - Time picker based on the style of the Android Google Keep app

Dumper.js
https://github.com/zeeshanu/dumper.js
dumper.js is a better and pretty variable inspector for your Node.js applications.

franc - Detect the language of text
https://github.com/wooorm/franc
What’s so cool about franc? franc can support more languages(†) than any other library; franc is packaged; with support for 82, 188, or 402 languages; franc has a CLI.

camaro
https://github.com/tuananh/camaro
camaro is an utility to transform XML to JSON, using Node.js binding to native XML parser pugixml, one of the fastest XML parser around.

Got - Simplified HTTP requests
https://github.com/sindresorhus/got
Got is a human-friendly and powerful HTTP request library. It was created because the popular request package is bloated.

Teutonic CSS
https://teutonic.co/
A modern CSS framework — versatile, well documented.

Bash Infinity
https://github.com/niieani/bash-oo-framework
Bash Infinity is a standard library and a boilerplate framework for writing tools using bash. It’s modular and lightweight, while managing to implement some concepts from C#, Java or JavaScript into bash. The Infinity Framework is also plug & play: include it at the beginning of your existing script to import any of the individual features such as error handling, and start using other features gradually. The aim of Bash Infinity is to maximize readability of bash scripts, minimize the amount of code repeat and create a central repository for well-written, and a well-tested standard library for bash. Bash Infinity transforms the often obfuscated “bash syntax” to a cleaner, more modern syntax.

设计

Building a Design Culture of Inclusion
https://medium.com/google-design/building-a-design-culture-of-inclusion-6cb0bf7a927f
Design=Empathy, Empathy=Understanding, Understanding=Exposure, Exposure=Meaning, Meaning=Inclusion, Inclusion=Design. And so you can see that a truly inclusive environment does not come together without thought or deliberate effort, and really takes an exercise in design thinking to bring a great team together.

Introducing Supernova V4
https://medium.com/sketch-app-sources/introducing-supernova-v4-d21cd8c7a7e
Forget what you’ve been told. Design to code is finally possible. Ever since the first beta of Supernova, we’ve dreamed about the day when it would be possible to blend the world of design and code just so that people can work better, together. Today, we are unveiling Supernova V4, the most advanced design to code tool, available now! 另附：Framer X Preview.

Flow 1.0.0 – All the Polish
https://blog.prototypr.io/flow-1-0-0-all-the-polish-6ff708d788ea
Flow is a production tool that lets you animate static designs in seconds, then export those animations to either HTML5 / CSS or Swift / iOS code.

Utilizing Micro-interactions to Enhance Your UX Design
http://www.uxbooth.com/articles/utilizing-micro-interactions-to-enhance-your-ux-design/
A website that works across all devices is also key to having a high conversion rate and building loyalty. For those striving for success, effectively enhancing UX micro-interactions—which are often overlooked—can make the difference between a customer that stays and a customer that hits the X button on their browser.

Whatever The Approach, It’s The 4I’s!
http://moha.studio/labs/whatever-the-approach-its-the-4is.html
Okay, if you did not read “Design Introduction — We Are Designers By Nature!” Read it and back again. As a reminder, you are reading this article as a part of the 4I’s serious: Whatever The Approach, It’s a 4I’s!. The 4I’s – Introduction to Inspiration. The 4I’s – Introduction to Ideation. The 4I’s – Introduction to Implementation. The 4I’s – Introduction to Iteration.

How System Thinking Will Improve Your Product Design
http://sherif-amin.com/system-thinking-improve-product-design/
I recognized it was a very complex challenge and unless I change my way of thinking about products and treat them as systems, I will never be able to solve these complexities.

What is Typesetting?
https://alistapart.com/article/flexible-typesetting
Typesetting is the most important part of typography, because most text is meant to be read, and typesetting involves preparing text for reading. 另附：Web Typography Resources.

产品及其它

OpenAI Five Benchmark: Results
https://blog.openai.com/openai-five-benchmark-results/
OpenAI Five won a best-of-three against a team of 99.95th percentile Dota players: Blitz, Cap, Fogged, Merlini, and MoonMeander — four of whom have played Dota professionally — in front of a live audience and 100,000 concurrent livestream viewers. 另附：Why we need to think differently about AI.

Where Vim Came From
https://twobithistory.org/2018/08/05/where-vim-came-from.html
Vim is everywhere. It is used by so many people that something like HEX file support shouldn’t be a surprise. Vim comes pre-installed on Mac OS and has a large constituency in the Linux world. It is familiar even to people that hate it, because enough popular command line tools will throw users into Vim by default that the uninitiated getting trapped in Vim has become a meme. There are major websites, including Facebook, that will scroll down when you press the j key and up when you press the k key—the unlikely high-water mark of Vim’s spread through digital culture.

7 open web champions on the greatest web challenges
https://webfoundation.org/2018/08/7-open-web-champions-on-the-greatest-web-challenges/
Along with other digital rights organisations, our team attended the Internet Freedom Forum in Abuja in April. We took this opportunity to speak to our peers about the biggest issues we all face online today. Here’s what they said. 另附：Securing Web Sites Made Them Less Accessible

Get to Know Our New Code of Conduct
https://stackoverflow.blog/2018/08/07/get-to-know-our-new-code-of-conduct/
Stack Overflow began with a community of folks that were avid readers and pundits of Joel On Software and Coding Horror. As the initial community had some experience interacting with one another, “Be nice” was sufficient as a beacon to pull people back from over-enthusiastically critiquing other user’s contributions.

拼多多为什么崛起
https://mp.weixin.qq.com/s/8C4aCqFhXjw9yMjUlWGKzQ
拼多多为什么崛起？拼多多的用户体验有何不同？对拼多多用户有怎样的洞察？8 月 2 日，《产品经理 30 讲》作者梁宁在得到 APP 上，就最近最火的拼多多展开了一系列分析。经梁宁授权，首席品牌官把直播内容整理后，分享给大家。可以说，这绝对是目前市场上面对于拼多多的解读和研究最深刻的一次。拼多多包括低端供应链也好，怎么着也好，大家在这个过程中叫做过程的机会，或者叫过程的原罪。但最终的终局一定是体验的平等。另附：美团的成功，是因为“农村包围城市”的战略吗.

知乎的「好恶」
http://www.geekpark.net/news/231818
在目前互联网社区运营中，普遍被认可的做法是不断扩展用户边界，做大流量，拿到好看的日活、月活数据。知乎却反常地用一些可量化的指标来肯定符合其所认可价值观的用户，这种做法既让人意外，又好像很「知乎」。

— THE END –