FEX 技术周刊 - 2020/03/02

深阅读

Rome
https://github.com/facebookexperimental/rome
Rome is an experimental JavaScript toolchain. It includes a compiler, linter, formatter, bundler, testing framework and more. It aims to be a comprehensive tool for anything related to the processing of JavaScript source code. Rome is not a collection of existing tools. All components are custom and use no third-party dependencies. Rome is experimental and in active development. It’s open for contributors and those interested in experimental tools. It is not ready for production usage. The only way to use it is to build from source. Rome aims to be a replacement for many existing JavaScript tools. We will, however, offer integrations for components in other tools. For example, using the Rome compiler as a plugin for another bundler.

Wildcard: Spreadsheet-Driven Customization of Web Applications
https://www.geoffreylitt.com/wildcard/salon2020/
Many Web applications do not meet the precise needs of their users. Browser extensions offer a way to customize web applications, but most people do not have the programming skills to implement their own extensions. In this paper, we present spreadsheet-driven customization, a technique that enables end users to customize software without doing any traditional programming. The idea is to augment an application’s UI with a spreadsheet that is synchronized with the application’s data. When the user manipulates the spreadsheet, the underlying data is modified and the changes are propagated to the UI, and vice versa.

Ant Design 4.0 正式版来了！
https://www.yuque.com/ant-design/ant-design/ant-design-4.0-released
我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后，我们终于迎来了 4.0 的正式版！感谢在此期间每一位提供反馈、建议以及贡献的人。我们会结合 rc 版本已经涉及的更新以及一些比较重要的新增内容于此进行列举。完整的更新文档可以点击此处。v4 文档地址：https://ant.design 需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并进入维护状态。我们仍然会为 v3 版本进行半年的维护工作。维护截止日期为 2020 年 5 月。

与程序员相关的CPU缓存知识
https://coolshell.cn/articles/20793.html
这篇文章比较长，主要分成这么几个部分：基础知识、缓存的命中、缓存的一致性、相关的代码示例和延伸阅读。其中会讲述一些多核 CPU 的系统架构以及其原理，包括对程序性能上的影响，以及在进行并发编程的时候需要注意到的一些问题。这篇文章我会尽量地写简单和通俗易懂一些，主要是讲清楚相关的原理和问题，而对于一些细节和延伸阅读我会在文章最后会给出相关的资源。

一文道尽软件架构及前端架构演进
https://mp.weixin.qq.com/s/qOjpR1qrKgBRF90ea5mkyA
软件界的人们长期以来一直在争论架构的定义。对于某些人来说，这就像是系统的基本结构，或者是将最高级别的组件连接在一起的方式。但Martin认为没有客观的方法来定义基本的或高级的组件，软件架构的更多是专家开发人员对于系统的设计的共同理解。架构的第二种常见定义是，它是“需要在项目早期就做出的设计决策”，但是Martin觉得更像是在项目开发过程中你期望能够早日做出的正确决策。因此，软件架构是关于软件开发中重要的事情。思考软件架构其实就是思考哪些是最重要的事情，并且要保持这些部分始终运行在良好的状态下。

微前端在美团外卖的实践
https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html
微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。随着前端业务场景越来越复杂，微前端这个概念最近被提起得越来越多，业界也有很多团队开始探索实践并在业务中进行了落地。可以看到，很多团队也遇到了各种各样的问题，但各自也都有着不同的处理方案。诚然，任何技术的实现都要依托业务场景才会变得有意义，所以在阐述美团外卖广告团队的微前端实践之前，我们先来简单介绍一下外卖商家广告端的业务形态。

How Autotracking Works
https://www.pzuraq.com/how-autotracking-works/
This blog post is the third in a series on autotracking, the new reactivity system in Ember.js. I also discuss the concept of reactivity in general, and how it manifests in JavaScript.

Vue.js: The Documentary
https://www.youtube.com/watch?v=OrxmtDw4pVI
A well produced 30 minute documentary (from the creators of the previously popular Ember.js documentary) focused on Evan You, the development of Vue.js, its position in our ecosystem, and the userbase.

Gutenberging
https://css-tricks.com/gutenberging/
While I think there are still rough edges (like why can’t I put a list in a blockquote? Why can’t I add a class to a link? Why can’t I arrow-key through the block chooser?), I’m a big fan overall. And not just conceptually anymore. I made it one of my 2020 goals to get CSS-Tricks onto Gutenberg, and so I hopped to that right away in January.

How I used React-Loadable to more than halve my React app’s load time
https://dev.to/rozenmd/how-i-used-react-loadable-to-more-than-half-my-react-app-s-load-time-299c
React-Loadable provides you with a component you can use to load a React component later, rather than immediately as you load the React app.

Why the GOV.UK Design System team changed the input type for numbers
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
To provide users with a good service, government organisations usually need to collect data. Lots of data. The GOV.UK Design System team creates patterns and components that let users enter their data in an easy and accessible way. The last thing we want to do is create barriers to users completing a task and force them to find an alternative method of using the service, such as phoning a helpline.

Should you self-host Google Fonts?
https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/
To answer the question in the title of this post: yes it’s better to self-host as the performance gains are substantial. Of course your mileage may vary as it will depend on your exact site so test, test, test, but I would imagine it would be the better option, from a performance perspective, for most sites. 另附：Routed Gothic Font

Where JavaScript is Used?
https://areknawo.com/where-javascript-is-used/
From an almost-dead to a thriving, omnipresent language, JavaScript has come a long way. Thanks to the growth of the World Wide Web (WWW) and a lot of new features being added, JS is currently one of the most popular and in-demand programming languages out there.

Serverless Attack Vectors
https://www.youtube.com/watch?v=Zv2jFISTHuE
This ~50 minute talk explores what sort of attacks you may come up against when working with serverless architectures and what can be done to defend such infrastructures/apps. 另附：Why the ‘WHY’ matters more than the ‘WHAT’ in Serverless!.

Mathematics for the adventurous self-learner
https://www.neilwithdata.com/mathematics-self-learner
Self-studying mathematics is hard - it’s an emotional journey as much as an intellectual one and it’s the kind of journey I imagine many people start but then drop off after a few months. So I also share (at the end) the practices and mindset that have for me allowed this hobby to continue through the inevitable ups and downs of life (raising two young boys, working at a startup, and moving states!)

Exploring Transfer Learning with T5: the Text-To-Text Transfer Transformer
https://ai.googleblog.com/2020/02/exploring-transfer-learning-with-t5.html
In “Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer”, we present a large-scale empirical survey to determine which transfer learning techniques work best and apply these insights at scale to create a new model that we call the Text-To-Text Transfer Transformer (T5). We also introduce a new open-source pre-training dataset, called the Colossal Clean Crawled Corpus (C4). The T5 model, pre-trained on C4, achieves state-of-the-art results on many NLP benchmarks while being flexible enough to be fine-tuned to a variety of important downstream tasks. In order for our results to be extended and reproduced, we provide the code and pre-trained models, along with an easy-to-use Colab Notebook to help get started.

新鲜货

V8 release v8.1
https://v8.dev/blog/v8-release-81
Intl.DisplayNames.

React v16.13.0
https://reactjs.org/blog/2020/02/26/react-v16.13.0.html
Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

Fuchsia Programming Language Policy
https://fuchsia.googlesource.com/fuchsia/+/refs/heads/master/docs/project/policy/programming_languages.md
Dart 入选 https://mp.weixin.qq.com/s/I8_yHsH1vUIOyXFJ6XBBAQ

Go 1.14 is released
https://golang.org/doc/go1.14
The latest Go release, version 1.14, arrives six months after Go 1.13. Most of its changes are in the implementation of the toolchain, runtime, and libraries. As always, the release maintains the Go 1 promise of compatibility. We expect almost all Go programs to continue to compile and run as before. Module support in the go command is now ready for production use, and we encourage all users to migrate to Go modules for dependency management.

CouchDB 3.0 Now Available
https://blog.couchdb.org/2020/02/26/3-0/
CouchDB is a mature, JSON-document oriented NoSQL database, and one of the earlier modern generation of databases to be called ‘NoSQL’. 3.0 is an interesting release designed to path the way to a FoundationDB-powered version 4.0, with a curious side effect being a drop in the default maximum document size from 4GB to 8MB. 另附：StormDB: A Tiny, Lightweight, JSON-Based ‘Database’.

The Facts: Mozilla’s DNS over HTTPs (DoH)
https://blog.mozilla.org/netpolicy/2020/02/25/the-facts-mozillas-dns-over-https-doh/
The current insecure DNS system leaves billions of people around the world vulnerable because the data about where they go on the internet is unencrypted. We’ve set out to change that. In 2017, Mozilla began working on the DNS-over-HTTPS (DoH) protocol to close this privacy gap within the web’s infrastructure. Today, Firefox is enabling encrypted DNS over HTTPS by default in the US giving our users more privacy protection wherever and whenever they’re online. 另附：Securing Firefox with WebAssembly.

Let’s Encrypt Has Issued a Billion Certificates
https://letsencrypt.org/2020/02/27/one-billion-certs.html
We issued our billionth certificate on February 27, 2020. We’re going to use this big round number as an opportunity to reflect on what has changed for us, and for the Internet, leading up to this event. In particular, we want to talk about what has happened since the last time we talked about a big round number of certificates - one hundred million.

Your new web notifications experience is here
https://github.blog/2020-02-25-your-new-web-notifications-experience-is-here/
At Universe, we introduced a new web notifications experience for GitHub. After months of testing, learning, and iterating, the new web notifications is now the default experience on GitHub.com.

The fastai book - draft
https://github.com/fastai/fastbook
These draft notebooks cover an introduction to deep learning, fastai, and PyTorch. fastai is a layered API for deep learning; for more information, see the fastai paper. Everything in this repo is copyright Jeremy Howard and Sylvain Gugger, 2020 onwards. These notebooks will be used for a course we’re teaching in San Francisco from March 2020, and will be available as a MOOC from around July 2020. In addition, our plan is that these notebooks will form the basis of this book, which you can pre-order. It will not have the same GPL restrictions that are on this draft.

VS Code Debug Visualizer
https://github.com/hediet/vscode-debug-visualizer
An extension for VS Code that visualizes data during debugging.

React Query 1.0
https://github.com/tannerlinsley/react-query
Hooks for fetching, caching and updating asynchronous data in React.

Blisk: A Developer-Oriented Browser for Faster App Testing
https://blisk.io/
Blisk is the first developer-oriented browser. It provides businesses with a development workspace for the teams and freelancers to develop and test modern web applications twice faster.

react-beautiful-dnd 13.0
https://github.com/atlassian/react-beautiful-dnd/releases/tag/v13.0.0

Electron React Boilerplate 1.0
https://github.com/electron-react-boilerplate/electron-react-boilerplate
A Foundation for Scalable Cross-Platform Apps

exifr
https://github.com/MikeKovarik/exifr
The fastest and most versatile JS EXIF reading library.

Curveball - A typescript microframework
https://evertpot.com/curveball-typescript-framework-update/
At Bad Gateway we’ve been using this in a variety of (mostly API) projects for the past few years, and it’s been working really well for us. We’re also finding that it tends to be a pretty ‘sticky’ product. People exposed to it tend to want to use it for their next project too.

NodeCG
https://nodecg.com/
NodeCG is a broadcast graphics framework and application. It enables you to write complex, dynamic broadcast graphics using the web platform. NodeCG has no graphics or drawing primitives of its own. Instead, NodeCG provides a structure for your code and an API to facilitate moving data between the dashboard, the server, and your graphics. It makes no assumptions about how to best code a graphic, and gives you complete freedom to use whatever libraries, frameworks, tools, and methodologies you want.

Hex Engine
https://github.com/suchipi/hex-engine
Hex Engine is a 2D Game Engine for the browser, written in TypeScript. It is designed to feel similar to React. Hex Engine implements a variant of the popular Entity-Component-System model, adapting it to make Components radically composable. In Hex Engine, every Component is a function, and Components can call special Hook functions to define their behavior in the game engine.

Panolens.js - Javascript 360 Panorama Viewer
https://github.com/pchen66/panolens.js
Panolens.js is an event-driven and WebGL based panorama viewer. Lightweight and flexible. It’s built on top of Three.JS.

Gestalt
https://github.com/pinterest/gestalt
Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

Neutralinojs
https://neutralino.js.org/
Portable and lightweight cross platform application development framework. In electron and NWjs you have to install NodeJs and hundreds of dependency libraries. Embedded Chromium and Node creates large overhead and makes even simple apps like “hello world” considerable in size. Neutralino offers a lightweight and portable SDK which is an alternative for Electron and NW.js also with many advantages. Neutralinojs vs Electron vs NW.js

Tailwind UI
https://tailwindui.com/
Beautiful UI components, crafted by the creators of Tailwind CSS. Fully responsive HTML components, designed and developed by Adam Wathan and Steve Schoger.

The Simpsons in CSS
https://pattle.github.io/simpsons-in-css/
Below are some Simpsons characters made in pure CSS - Made by Chris Pattle.

MSPaint in JavaScript
https://jspaint.app/#local:611a60ff59e93

M3
https://www.m3db.io/
The fully open source metrics platform built on M3DB, a distributed timeseries database

设计

People + AI Guidebook
https://medium.com/google-design/https-medium-com-jessholbrook-people-ai-guidebook-41ec2ee5ec3f
This Guidebook will help you build human-centered AI products. It will enable you to avoid common mistakes, design excellent experiences, and focus on people as you build AI-driven applications.

Make Use of AI in 2020
https://uxplanet.org/make-use-of-ai-in-2020-5f536fde7bba
Why we should not be afraid of AI-driven software and how we can take away the threat of AI for our users. 另附：How Salesforce is using AI to create a more hyper-informed, more adoptable design system

Understanding the rules of Composition in interface design
https://uxplanet.org/composition-and-its-rules-in-the-design-of-interfaces-2fbd5ca99158
The rules of composition are used by people in many spheres, the most basic of them — painting, music, literature, architecture — but how does that concept apply to UI design? For all the time I’ve read about Composition, I especially liked the book “Typography” from Emil Ruder.

「云游敦煌」小程序背后的产品故事
https://cdc.tencent.com/2020/02/26/design-story-of-dunhuang-trip/
在工作中遇到了自己的兴趣，是一件非常有缘分的事情。与石窟的缘分，起源于二零一六年的夏天。我前往位于印度马哈拉施特拉邦的 Ajanta Caves 和 Ellora Caves，追寻佛教艺术。当我在 Ajanta 看到 1号石窟「莲花手菩萨」的蛋彩画时，心中不禁难过了。这令人平静的艺术，竟落到如此残败。阴暗中，潮湿混合着浓烈的蝙蝠尿味。从那时起，总想着在未来的旅行中，能够为石窟艺术做些什么。机缘总是悄然而来。四年后，部门决定团建去敦煌。那是我第一次去莫高窟，背着赵声良院长《敦煌石窟艺术简史》就出发了。

产品及其它

The eight factors of happiness for developers
https://stackoverflow.blog/2020/02/27/the-eight-factors-of-happiness-for-developers/
I recently came across this sketchnote by Tanmay Vora, and it really resonated with me. As a developer it got me thinking about how this might translate into the life of a developer and our happiness. Based on this sketchnote here are the eight factors of happiness applied to developer life. 1. Resentment Harboring resentment…

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2020-02-23 · 图解各省志愿湖北医疗队信息

– THE END –