FEX 技术周刊 - 2020/05/11

本期看点

Driving engineers to an arbitrary date is a value destroying mistake
https://iism.org/article/driving-engineers-to-an-arbitrary-date-is-a-value-destroying-mistake-49
In this article we’ll be concentrating on high value software projects and why driving engineers to create detailed estimates for these projects, and then pressuring them to complete the software according to those estimates, is a value destroying mistake.

Rebuilding our tech stack for the new Facebook.com
https://engineering.fb.com/web/facebook-redesign/
译文 https://www.yuque.com/docs/share/6aee9dd5-da3f-462b-b4bd-caec0ec6f60e
When we thought about how we would build a new web app — one designed for today’s browsers, with the features people expect from Facebook — we realized that our existing tech stack wasn’t able to support the app-like feel and performance we needed. A complete rewrite is extremely rare, but in this case, since so much has changed on the web over the course of the past decade, we knew it was the only way we’d be able to achieve our goals for performance and sustainable future growth. Today, we’re sharing the lessons we’ve learned while rearchitecting Facebook.com, using React (a declarative JavaScript library for building user interfaces) and Relay (a GraphQL client for React).

Introducing Web Vitals: essential metrics for a healthy site
https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html
译文 https://mp.weixin.qq.com/s/BSlOnrmDLWhzpCWAuTOulw
Optimizing for quality of user experience is key to the long-term success of any site on the web. Through our ongoing engagement and collaboration with millions of web developers and site owners, we’ve developed many helpful metrics and tools across Google to help business owners, marketers, and developers alike identify opportunities to improve user experiences. However, abundance of metrics and tools creates its own set of prioritization, clarity, and consistency challenges for many. Today we are introducing a new program, Web Vitals, an initiative by Google to provide unified guidance for quality signals that, we believe, are essential to delivering a great user experience on the web. 另附：Is it time for a Web Performance rebrand?.

GitHub - Codespaces - Your instant dev environment
https://github.com/features/codespaces
https://github.blog/2020-05-06-new-from-satellite-2020-github-codespaces-github-discussions-securing-code-in-private-repositories-and-more/
Get the full Visual Studio Code experience without leaving GitHub. Develop from anywhere, anytime. With your development in the cloud, you can contribute code from any device, using VS Code or your browser. Contribute to projects without complicating your local setup. Spin up dev environments with a click—even for projects you haven’t worked on before—and switch between them with ease.

从「物种起源」到「设计进化论」- 阿里云设计语言哲思
https://mp.weixin.qq.com/s/IOu_IRbhXmTr_SUKyzDveA
10万年前，语言第一次出现的时候，茹毛饮血的智人一定没有想到，地球的文明，原来从这样简单的咿咿呀呀悄然开始；5100多年前，文字就在尼罗河畔的纸草上开始若隐若现，彼时的他们也一定没有猜到，有一种东西竟然可以超越时空，将不同的咿咿呀呀记录下来，为后续持续传承的文明推开大门；也许就在几年前，我们也未曾妄想，原来“语言”还有更多元的承载方式，它可以融入任何一种形态，在产品间进行沟通与表达，完成「真实世界」和「虚拟世界」的对话。

深阅读

Write Libraries, Not Frameworks
https://www.brandonsmith.ninja/blog/libraries-not-frameworks
Frameworks aren’t always bad, but they are a much bigger risk - for both the creators and the users - than libraries are. If your framework can be a library without losing much, it probably should be. If you don’t work at a major tech company, you probably don’t have the time or energy to give a framework all of the attention it requires. Libraries aren’t everything, but they should be preferred.

Deno 1.0: What you need to know
https://blog.logrocket.com/deno-1-0-what-you-need-to-know/
After almost two years, the wait is nearly over. The API has been frozen, and the countdown to Deno 1.0, officially scheduled for release on May 13, has begun. Due to its famous creator and forward-thinking vision, Deno is sure to be the most exciting and controversial JavaScript-related release in recent memory. Deno is a general-purpose JavaScript/TypeScript programming environment. It brings together many of the best open-source technologies and offers a comprehensive solution in one small executable file.

PHP showing its maturity in release 7.4
https://lwn.net/SubscriberLink/818973/507f4b5e09ab9870/
This year PHP turned 25 and, as with all things, the hope is that with age comes wisdom and maturity. Often derided as a great way to write bad (and insecure) code, PHP is hard to ignore completely when it is used in nearly eight out of ten websites. With PHP 7.4.5 released in April, it’s worthwhile to take a look at modern PHP, how it has evolved to address the criticisms of the past, and what lies ahead in its future.

6 Faux Pas of HTTP API Design
https://blog.readme.com/http-api-faux-pas/
HTTP APIs are very loose by definition: there’s no standards body, no API validator and not always someone there to tell you when you may be doing something incorrect. At ReadMe we have lots of experience in building, consuming and viewing APIs created by others. I asked engineers in the ReadMe team, “What are some common issues or pitfalls you see when using APIs?” This is a definitely a non-exhaustive list, but avoiding some of these pitfalls will make your APIs more “standard,” intuitive, and easy to use. We came up with the following faux pas.

Continuation 在 JS 中的应用
https://zhuanlan.zhihu.com/p/94611888
React 新近发布的 Hooks、Suspense、Concurrent Mode 等新功能让人眼前一亮，甚至惊叹 JS 居然有如此魔力。同时，这几个功能或多或少附带一些略显奇怪的规则，没有更深层次理解的话难以把握。其实这里面并没有什么“黑科技”，就大的趋势来讲，前端整体上还是在不断借鉴计算机其它领域的优秀实践，来帮助我们更方便地解决人机交互问题。本文着眼于支撑这些功能的一个底层编程概念 Continuation（译作“续延”），期望能够在了解它之后，大家对这几个功能有进一步的理解和掌握。当然，Continuation 在 React 之外也有很多的应用，可以一眼窥豹。

useRequest- 蚂蚁中台标准请求 Hooks
useRequest 是一个超级强大，且生产完备的网络请求 Hooks，目前已经成为蚂蚁中台最佳实践内置网络请求方案。在蚂蚁内部中台应用，写网络请求，都推荐用 useRequest。useRequest 可能是目前社区中最强大，最接地气的请求类 Hooks 了。可以覆盖 99% 的网络请求场景，无论是读还是写，无论是普通请求还是分页请求，无论是缓存还是防抖节流，通通都能支持。只有你想不到，没有它做不到（吹牛 ~）。另附：useWorker - A React Hook for Blocking-Free Background Tasks

SuperCell的中台你们学不会
https://mp.weixin.qq.com/s/3AnS2I8fM6pat8vNN0586w
2018 年以来，中台概念横扫整个中国信息化行业，成为了所有企业都在追捧的超级新星。如今，你不提中台都不好意思跟人说你是做信息化的。任何一个企业不立个中台项目，感觉就是已经落伍，跟不上时代潮流了。传说中台的概念的起源于一次偶得，马云在一次出访过程中，进入了一个世外桃源之地（芬兰），获得了高人指点（SuperCell），从而悟出了“中台”这门绝世武功，带回中土，掀起了“中台风暴”。但在我对 SuperCell 的模式进行深入研究以后发现：SuperCell 的中台，大部分企业是学不会的。

对于走专业路线还是管理路线的看法
https://mp.weixin.qq.com/s/mGVduRcOpO92pO7wE0tKBg
眼界很重要，这样看问题会在高处，脚下的路会更清晰，不容易做出错误的决定。对于走专业路线还是走管理路线这件事情，我觉得大家需要跳出来，从外部好好审视下自己以及自己所处的环境。认清现实，做出合理的决定。

2020 有哪些不容错过的前端技术趋势
https://mp.weixin.qq.com/s/baLi6j9Kw0tqXHTfiHPcPQ
四位技术人不四、杜欢、海波和堂主对 2020 年前端发展趋势进行了展望，同时也阐述 2020 年前端从业者可能将要面临的挑战。

A Complete Guide to CSS Functions
https://css-tricks.com/complete-guide-to-css-functions/
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration.

Virtual Reality in 2020
https://www.sitepen.com/blog/virtual-reality-in-2020/
Virtual reality (VR) is one of the most interesting emerging technologies for the web in 2020. Recently at HalfStack Phoenix I shared insights on VR, WebVR, the web, and what makes VR a lasting technology that will change the way we interact with information over the coming decade.

Qt and Android, Which is the Best Framework for Your Embedded Software?
https://www.qt.io/blog/qt-or-android-which-is-the-best-framework-for-your-embedded-software
A new white paper from Witekio has finally identified an answer to a question pondered by software engineers the world over: In which cases should I use Qt, Android, or even both?

Common mistakes with React Testing Library
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
Some mistakes I frequently see people making with React Testing Library.

How application performance metrics helps developers
https://about.gitlab.com/blog/2020/05/07/working-with-performance-metrics/
Automatically detect and monitor Kubernetes Clusters and deployed applications from the GitLab interface with application performance metrics (APM).

How Khan Academy Successfully Handled 2.5x Traffic in a Week
http://engineering.khanacademy.org/posts/handling-2x-traffic-in-a-week.htm
In this post I’ll discuss architectural aspects that play a key role in the scalability of our site. Two fundamental components of our architecture serve us particularly well here. We use Google Cloud, including AppEngine, Datastore, and Memcache, and Fastly CDN, and they were the backbone of the serverless and caching strategy that’s key to our scalability.

Rewriting the heart of our sync engine
https://dropbox.tech/infrastructure/rewriting-the-heart-of-our-sync-engine
Rewriting the sync engine was really hard, and we don’t want to blindly celebrate it, because in many environments it would have been a terrible idea. It turned out that this was an excellent idea for Dropbox but only because we were very thoughtful about how we went about this process. In particular, we’re going to share reflections on how to think about a major software rewrite and highlight the key initiatives that made this project a success, like having a very clean data model.

Serverless Needs Standardization to Be the Future of Application Infrastructure
https://thenewstack.io/serverless-needs-standards-to-be-the-future-of-application-infrastructure/
Serverless gives developers the freedom to focus on building functionality into their code, rather than managing the servers on which those functions run. This liberation from mundane yet vital operational responsibility has the potential to unlock significant innovation and business value for application developers, but the lack of standardization risks fragmenting the serverless ecosystem and creating winners and losers. With standardization comes the power of open source collaboration that has fueled innovation since the dawn of the computing era.

What Netlify’s Infrastructure Team Learned as It Increased Deploy Speed by up to 2x
https://www.netlify.com/blog/2020/05/05/what-netlifys-infrastructure-team-learned-as-it-increased-deploy-speed-by-up-to-2x/
What if you realized you could optimize the structure of an existing system by doing less work? We can probably all attest that it’s one thing to notice an opportunity, and an entirely different beast to actually roll it out into production. This is the story of how the infrastructure team at Netlify took a 4 year old codebase and isolated an issue, tested a few different solutions (with some interesting stumbling blocks along the way), and eventually improved observability while rolling it out to production. The result of this work is what we’re fondly calling “nitro deploys”, a 2x increase in the speed of our deploy mechanism.

We Chat, They Watch
https://citizenlab.ca/2020/05/we-chat-they-watch/
How International Users Unwittingly Build up WeChat’s Chinese Censorship Apparatus

0X10 RULES
https://fabiensanglard.net/ilike/index.html
The site started in a world before smartphones and tablets at a time where Apple products still used PowerPC processors. The hand-crafted framework to run it grew organically over the years and remarkably followed the path of most software. It became bloated and obsolete. In 2018, it was time to revise the engine. I wanted to build something rooted in simplicity, responsiveness, and speed. I opted for a drastic approach where instead of starting from my existing framework and removing/fixing features, I started from scratch and added only what I needed.

Human Programming Interface
https://beepb00p.xyz/hpi.html
I’m using HPI (Human Programming Interface) package as a means of unifying, accessing and interacting with all of my personal data. HPI is a Python package (named my), a collection of modules for: social networks: posts, comments, favorites; reading: e-books and pdfs; annotations: highlights and comments…

新鲜货

V8 release v8.3
https://v8.dev/blog/v8-release-83
Faster ArrayBuffer tracking in the garbage collecto; Bigger Wasm memories…

npm v7 Series - Introduction
https://blog.npmjs.org/post/617484925547986944/npm-v7-series-introduction
npm v7 is based on a handful of technical and user experience principles, and each post in this series will tie back to one or more of these in some way.

Announcing Flutter 1.17
https://medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e
Includes Metal support for faster iOS performance, new Material components, new Network tracking tooling and more!

Visual Studio Code April 2020 Released
https://code.visualstudio.com/updates/v1_45

Jest 26: Tick Tock
https://jestjs.io/blog/2020/05/05/jest-26
One of the instrumental releases was Jest 15 which tied everything together and provided good defaults that allowed people to run Jest often without any setup. However, this approach has a big downside as Jest installs a lot of dependencies into your projects that you may not need. We are now beginning to address this shortcoming and are working on reducing Jest’s install size while keeping it approachable and extensible. We have made the following breaking changes in Jest 26. 另附： Majestic - Zero config GUI for Jest

ESLint v7.0.0 released
https://eslint.org/blog/2020/05/eslint-v7.0.0-released
We just pushed ESLint v7.0.0, which is a major release upgrade of ESLint. This release adds some new features and fixes several bugs found in the previous release. This release also has some breaking changes, so please read the following closely.

Q
https://quantumjavascript.app/
似乎是个量子计算的设计器，没看懂怎么用

React Flow - A Library for Rendering Interactive Graphs
https://webkid.io/blog/react-flow-node-based-graph-library/
We just open sourced React Flow : A library for rendering interactive node-based graphs with a smooth panning and zooming behaviour and lots of nice features and even some useful plugins like a mini map!

React Cool Inview
https://github.com/wellyshen/react-cool-inview
A React hook that monitors an element enters or leaves the viewport (or another element) with performant and efficient way, using Intersection Observer. It’s lightweight and super flexible, which can cover all the cases that you need, like lazy-loading images and videos, infinite scrolling web app, triggering animations, tracking impressions, and more.

Pico - Take browser screenshots in Javascript
https://github.com/nikersify/pico
Pico’s goal is to produce high precision screenshots of any viewport entirely client side. This is different from simply capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side. The viewport screenshots include scrolled element scroll states, cross-origin images, input states, web fonts, canvas contents, current video frame contents, and much more information that you wouldn’t be able to get using something like a headless browser.

nut.js (Native UI Toolkit)
https://github.com/nut-tree/nut.js
nut.js is a cross-platform native UI automation / testing tool. It allows for native UI interactions via keyboard and / or mouse, but additionally gives you the possibility to navigate the screen based on image matching.

Start Profiling - Fast or Slow
https://www.fastorslow.com/
Fast or Slow is a global performance monitoring solution for your websites that detects and reports on the most important factors in your users’ experience of your website. Fast or Slow measures this experience from a variety of locations, giving you a wide overview of how site visitors experience your site.

GeckoView
https://mozilla.github.io/geckoview/
Android offers a built-in WebView, which applications can hook into in order to display web pages within the context of their app. However, Android’s WebView is not really intended for building browsers, and hence, many advanced Web APIs are disabled. Furthermore, it is also a moving target: different phones might have different versions of WebView, all of which your app has to support.

Miniblink
https://miniblink.net/
https://www.zhihu.com/question/290767285/answer/1200063036
miniblink是一个开源的、单文件、且目前已知的最小的基于chromium的，浏览器控件。通过其导出的纯C接口，几行代码即可创建一个浏览器控件。

Rich
https://github.com/willmcgugan/rich
Rich is a Python library for rendering rich text and beautiful formatting to the terminal. The Rich API makes it easy to add colorful text (up to 16.7 million colors) with styles (bold, italic, underline etc.) to your script or application. Rich can also render pretty tables, progress bars, markdown, syntax highlighted source code, and tracebacks – out of the box.

Caddy2 - A new kind of extensible platform for server apps
https://caddyserver.com/v2
https://news.ycombinator.com/item?id=23070567
Caddy is a single, self-contained, static binary with zero external dependencies because it’s written in Go. These values comprise important parts of the project’s vision because they simplify deployment and reduce tedious troubleshooting in production environments.

Introducing Scylla Open Source 4.0
https://www.scylladb.com/2020/05/07/introducing-scylla-open-source-4-0/
Scylla (a Cassandra-compatible NoSQL data store aiming to be the “world’s fastest column-store database”) now provides production-ready lightweight Transactions (LWT), a DynamoDB-compatible API (Alternator), and operator for Kubernetes, and more.

TileDB 2.0 and the Future of Data Science
https://medium.com/tiledb/tiledb-2-0-and-the-future-of-data-science-929cdcfe95ed
TileDB is an open-source and cloud-native storage engine for chunked, compressed, multi-dimensional arrays. It introduces a universal data format, general enough for all application domains, and with built-in data versioning. It offers many APIs and data science tool integrations. Today we announce TileDB 2.0, a huge milestone for our community and company.

OpenCV directly in the browser (webassembly + webworker)
https://aralroca.com/blog/opencv-in-the-web
OpenCV is the most popular library of Computer Vision, and has existed since 1999! What it does is providing a user-friendly and highly efficient development environment. It is a library written in C and C++ by Intel. We’ll see how to use the OpenCV library directly on the browser! To do this, we will compile OpenCV to webassembly and then run it inside a webworker.

SIGGRAPH 2020 Technical Paper: N-Dimensional Rigid Body Dynamics
https://marctenbosch.com/news/2020/05/siggraph-2020-technical-paper-n-dimensional-rigid-body-dynamics/
Excited to announce that my technical paper “N-Dimensional Rigid Body Dynamics” was accepted to SIGGRAPH 2020! Very proud to present research developed for 4D Toys & Miegakure at such a prestigious conference.

Orca: an esolang for audio-visual live coding
https://git.sr.ht/~rabbits/orca
Orca is an esoteric programming language designed to quickly create procedural sequencers, in which every letter of the alphabet is an operation, where lowercase letters operate on bang, uppercase letters operate each frame. This application is not a synthesizer, but a flexible livecoding environment capable of sending MIDI, OSC & UDP to your audio/visual interfaces, like Ableton, Renoise, VCV Rack or SuperCollider. The livecoding environment for the C implementation runs in a terminal. It’s designed to be power efficient. It can handle large files, even if your terminal is small.

Pose Animator
https://github.com/yemount/pose-animator/
Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.

Lite – A small, fast text editor
https://github.com/rxi/lite
lite is a lightweight text editor written mostly in Lua — it aims to provide something practical, pretty, small and fast, implemented as simply as possible; easy to modify and extend, or to use without doing either.

Inkscape 1.0
https://inkscape.org/release/inkscape-1.0/
Inkscape is a Free and open source vector graphics editor for GNU/Linux, Windows and MacOS X. It offers a rich set of features and is widely used for both artistic and technical illustrations such as cartoons, clip art, logos, typography, diagramming and flowcharting. It uses vector graphics to allow for sharp printouts and renderings at unlimited resolution and is not bound to a fixed number of pixels like raster graphics. Inkscape uses the standardized SVG file format as its main format, which is supported by many other applications including web browsers.

Making Emacs popular again
https://lwn.net/SubscriberLink/819452/1480c3a59d3d9093/
The Emacs editor predates Linux, and was once far more popular, but it has fallen into relative obscurity over the years. In a mega-thread on the emacs-devel mailing list, participants discussed various ideas for making Emacs more “attractive”, in both aesthetic and in “appealing to more users” senses of that term. Any improvements to Emacs in that regard have numerous hurdles to overcome, however. There are technical questions and, naturally, licensing considerations, but there is also the philosophical question of what it is, exactly, that stops the venerable text editor from being more popular.

设计

The Past Is Still Present – An Overview of Timeless Design
https://www.toptal.com/designers/ux/timeless-design
Digital designers would be wise to recognize the value of creating work that maintains relevancy for years to come. Maybe instead of obsessing over the latest trends, the industry ought to applaud work that has stood the test of time. User interfaces may never hold the nostalgic charm of a rugged, old Vespa scooter, but digital products can still improve lives. The longer they do, the more likely they are to leave a legacy that lasts for decades to come.

Task-Oriented Design — more than Mobile First and RWD
https://blog.prototypr.io/task-oriented-design-more-than-mobile-first-and-rwd-712bd5e4ca52
Now you already know that Task-Oriented Design is a natural trend that already exists and becomes more popular in recent years. I described this type of thinking in my blog article — this story is its extension. I hope it will help you to design more consciously. When you create a solution for multiple devices, it is crucial to know the specific device’s abilities and limitations. This will let you design the best user experience.

Benchmarking UX: Tracking Metrics
https://www.nngroup.com/articles/benchmarking-ux/
Quantitatively evaluate a product or service’s user experience by using metrics to gauge its relative performance against a meaningful standard.

Reducing Design Risk
https://www.smashingmagazine.com/2020/05/reducing-design-risk/
The pressure to rush market and usability research carries risk. We’ll offer four practical techniques to mitigate this risk and create designs that better serve customers and the company: context over convenience, compromise, better design decisions, design reduction.

产品及其它

Surprising Things About Working at Well-Known Tech Unicorns
https://blog.pragmaticengineer.com/surprising-things-about-working-at-tech-unicorns/
My past few companies - Skype, Skyscanner, Uber - have been well-known companies that I’ve joined in their “unicorn” phase. Unicorns are private companies that have reached the $1B valuation - and they usually do this in less than ten years. All of these companies were well-known consumer brands by the time I joined, many of my friends using them daily. As such, I had high expectations and was excited to start. But expectations and reality don’t always match. Here are the 13 most unexpected things I’ve learned from these working experiences.

How Apple reinvented the cursor for iPad
https://techcrunch.com/2020/05/06/how-apple-reinvented-the-cursor-for-ipad/
Apple SVP Craig Federighi talks about the iPad’s new cursor and Magic Keyboard. The new iPad cursor is a product of what came before, but it’s blending, rather than layering, that makes it successful in practice. The blending of the product team’s learnings across Apple TV, Mac and iPad. The blending of touch, mouse and touchpad modalities. And, of course, the blending of a desire to make something new and creative and the constraint that it also had to feel familiar and useful right out of the box. It’s a speciality that Apple, when it is at its best, continues to hold central to its development philosophy.

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2020-05-10 · 可视化700年的利率下降情况、Famous Hope Quotes as Charts、手画线算法、CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE BY NATION

– THE END –