FEX 技术周刊 - 2019/07/01

深阅读

The cost of JavaScript in 2019
https://v8.dev/blog/cost-of-javascript-2019
One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant costs of processing scripts are now download and CPU execution time. User interaction can be delayed if the browser’s main thread is busy executing JavaScript, so optimizing bottlenecks with script execution time and network can be impactful.

The State of Angular in 2019
https://blog.bitsrc.io/the-state-of-angular-in-2019-b5fb7783a1c6
A detailed overview of the current state of Angular, from the latest features to the hottest topics and trends that you may have missed. 另附：Prototyping with Angular.

Status of JavaScript(ECMAScript): 2019 & beyond
https://medium.com/@alberto.park/status-of-javascript-ecmascript-2019-beyond-5efca6a2d233
In this article we will look at the key features of ECMAScript 2018 and the proposals expected to be included in the following specifications, ECMAScript 2019 and ECMAScript 2020.

Identity in the Decentralized Web
http://blog.archive.org/2019/06/28/identity-in-the-decentralized-web-2/
In July of 2018, more than 1000 people gathered at the Decentralized Web Summit to share the latest decentralized protocols for the Web. Over three days, groups took deep dives into the “roadblock” issues we must surmount to reach scale, including identity. The following report by Jim Nelson explains what identity might look like in a decentralized world.

The 10 Component Commandments
https://dev.to/selbekk/the-10-component-commandments-2a7f
Creating components that are used by a lot of people is hard. You have to think pretty carefully about what props you should accept, if those props are supposed to be part of a public API. This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.

HTML is the Web
https://www.petelambert.com/journal/html-is-the-web
What’s the story with Frontend Engineers and HTML these days? I’ve been speaking to quite a few recently who just don’t seem to understand it. I mean, they understand some of it. They understand what a div is and what a span is, and as long as it all looks good and works when they click on it, they’re happy enough. So many that I’ve spoken to have answered questions about HTML with things like “Oh, I do everything in React or Vue these days”. But really, it doesn’t matter if all you write is Javascript, because if you’re making websites then the most important thing you’re making is HTML. HTML is the Web. 另附：Writing HTML in HTML、I’m rewriting my book in HTML instead of Markdown. Here’s why.

GMTC 2019 - 蚂蚁金服的前端框架和工程化实践
https://github.com/sorrycc/blog/issues/85
在 Umi 和 Bigfish 时代，我们从刀耕火种的时代跨入了工业化时代。因为在此之前，用户需要接触很多技术栈和细节，在 Umi 和 Bigfish 中，用户只要知道一个框架，剩下的全部不用了解。框架像一个魔法球，把各种技术栈吸到一起，加工后吐给用户，以此来支撑业务。另附：GMTC 2019 参会感想。

How to Reuse Logic with React Hooks
https://rafaelquintanilha.com/how-to-reuse-logic-with-react-hooks/
React developers have designed all kinds of patterns for reusing logic, the most prominent being Higher-Order Components (HOC) and Render Props. They work and have been in use for quite a while. But still, those two approaches don’t feel quite right and have some shortcomings (which we will see soon). What could be a possible alternative? As of React 16.8, Hooks were introduced. Hooks are a way to reuse logic across applications. You write a specific behavior (logic) and “hook” it into any component. This component now can use this logic normally.

React Fiber Deep Dive with Dan Abramov
https://www.youtube.com/watch?v=aS41Y_eyNrU
Jani and Phil got a problem. There are too many damn divs! With the help of Jenn Creighton and special guest Dan Abramov, we learn how to hack React Fiber reconciler internals to make the world a less div-ided place. In this deep dive you’ll learn how to contribute to React Fiber, and implement a new rendering mode for React.

How we built a component library that people actually enjoy using
https://medium.com/styled-components/how-to-build-a-great-component-library-a40d974a412d
The design systems team at Sprout Social is relatively small. Our team of 3 (including myself) serves design and engineering teams of well over 30 people each. I want to share some of the tools that our team used to build a component library that all of those folks love using.

The rise of the NRG stack: Node.js, React and GraphQL
https://levelup.gitconnected.com/the-rise-of-the-nrg-stack-node-js-react-and-graphql-6dfba468ba8a
With GraphQL gaining the popularity, React becoming the front-end go-to framework, and after 10 years Node.js is proving it’s here to stay, it appears the NRG stack is becoming a standard for today’s web apps.

Design patterns in Node.js: a practical guide
https://blog.logrocket.com/design-patterns-in-node-js/
Design patterns are part of the day to day of any software developer, whether they realize it or not. In this article, we will look at how to identify these patterns out in the wild and look at how you can start using them in your own projects.

How To Create A PDF From Your Web Application
https://www.smashingmagazine.com/2019/06/create-pdf-web-application/
There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you.

The Secret of Good Electron Apps
https://jlongster.com/secret-of-good-electron-apps
Some people really hate Electron apps. The idea that an app includes an entire copy of the Chrome web browser sounds ridiculous. This feeling is validated when looking at the apps on your machine — they eat up memory, boot slowly, and aren’t very responsive. It’s hard enough to build good apps on web, why the heck are we bringing the web to desktop and causing even more problems?

I’ve spent 5 years writing a JavaScript framework on my own
https://medium.com/@jcormont/ive-spent-5-years-writing-a-javascript-framework-on-my-own-af1201f4075c
Typescene is a robust front end library written in TypeScript: strongly typed, no dependencies, no nonsense. It’s really great for desktop-like (or mobile) applications, not so great for blogs and other content. It isn’t backed by some major corporation, not even a startup, but it’s been built by me: one developer on a mission to build a no-nonsense dependency-less framework — not scared of rework and refactoring because not much was at stake all this time except my own dog food work, until now.

I’m Not Really A Good Web Developer, I’m Just Good At Googling Things
https://www.dev-diaries.com/blog/im-just-good-at-googling-things/
Khaliq Gant is the creator of this website and a full stack web developer of over 8 years. He thinks it’s weird to write in the third person about himself but will continue because it’s now too late since he started this way. He works for Happy Cog and currently resides in Paris where he enjoys a baguette at least once every three days.

Building Lyft’s Marketing Automation Platform
https://eng.lyft.com/lyft-marketing-automation-b43b7b7537cc
Part of our growth is improvements in our acquisition process — like launching region-specific ad campaigns that increase awareness, and consideration of our multi-modal offerings. Coordinating these campaigns to acquire new users at scale has become time-consuming, leading us to take on the challenge of automation.

How Verizon and a BGP Optimizer Knocked Large Parts of the Internet Offline Today
https://blog.cloudflare.com/how-verizon-and-a-bgp-optimizer-knocked-large-parts-of-the-internet-offline-today/
Massive route leak impacts major parts of the Internet, including Cloudflare.

Improving Instagram’s Music Audio Quality
https://instagram-engineering.com/improving-instagrams-music-audio-quality-284e555102e9
Instagram plays a critical part in forming meaningful communities where people can connect with each other and share what matters most to them. To help best facilitate these connections, we craft our app with high quality sharing experiences that we can take pride in. One way we work hard to improve the Instagram experience is by improving audio quality.

Neural Code Search: ML-based code search using natural language queries
https://ai.facebook.com/blog/neural-code-search-ml-based-code-search-using-natural-language-queries/
Engineers work best when they can easily find code examples to guide them on particular coding tasks. For some questions — for example, “How to programmatically close or hide the Android soft keyboard?” — information is readily available from popular resources like Stack Overflow. But questions specific to proprietary code or APIs (or code written in less common programming languages) need a different solution, since they are not typically discussed in those forums. To address this need, we’ve developed a code search tool that applies natural language processing (NLP) and information retrieval (IR) techniques directly to source code text. This tool, called Neural Code Search (NCS), accepts natural language queries and returns relevant code fragments retrieved directly from the code corpus. 另附：Microsoft makes AI debugging and visualization tool TensorWatch open source.

新鲜货

Fuchisa.dev
https://fuchsia.dev/
Documentation for developing for the open source operating system.

GeckoView in 2019
https://hacks.mozilla.org/2019/06/geckoview-in-2019/
Last September we wrote about using GeckoView to bring Firefox’s rendering engine to Android as a reusable library. By decoupling the Gecko engine from the Firefox application, we’ve created a newer, faster, and more maintainable way to create Android applications. This approach leverages Gecko’s excellent performance, privacy, and support for cutting-edge web standards. With today’s release of our GeckoView-powered Firefox Preview, we’d like to share an update on what we’ve accomplished and where GeckoView is going in 2019.

CSS Animation Worklet API - W3C First Public Working Draft
https://www.w3.org/TR/2019/WD-css-animation-worklet-1-20190625/
The Animation Worklet API provides a method to create scripted animations that control a set of animation effects. The API is designed to make it possible for user agents to run such animations in their own dedicated thread to provide a degree of performance isolation from main thread.

TypeScript playground
https://www.typescriptlang.org/play/index.html#example/using-inheritance
The online TypeScript sandbox has just had a major upgrade. It supports all compiler flags, different TS versions, has an built-in formatter, and more.

Elasticsearch 7.2.0 released
https://www.elastic.co/cn/blog/elasticsearch-7-2-0-released
We are pleased to announce the release of Elasticsearch 7.2.0, based on Lucene 8.0.0. This is the latest stable release, and is already available for deployment via our Elasticsearch Service on Elastic Cloud. 另附：Elastic Stack 7.2.0 released

Release: npm@6.9.1
https://npm.community/t/release-npm-6-9-1/8435
This release comes after a long delay. You can expect another release with more bug fixes and PRs sooner than our typical 2-week schedule. Thank you for your patience.

Riot.js - Simple and elegant component-based UI library
https://riot.js.org/
Riot.js is Web Components for everyone. Think React + Polymer but without the bloat. Its API is heavily inspired by Vue.js but it contains instead just the bare minimum to build a modern frontend project. It’s intuitive to use and it weighs almost nothing. And it works today. No reinventing the wheel, but rather taking the good parts of what’s there and making the simplest tool possible. The Riot.js design was driven by The Zen of Python, by Tim Peters philosophy. 另附关于 Web Components 的一篇文章：Why I don’t use web component.

Stencil.js
https://stenciljs.com/
Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser. 另附：An Introduction to Stencil.js

TWGL: A Tiny WebGL helper Library
http://twgljs.org/
This library’s sole purpose is to make using the WebGL API less verbose. If you want to get stuff done use three.js. If you want to do stuff low-level with WebGL consider using TWGL.

Bliss.js — Heavenly JavaScript!
https://blissfuljs.com/
Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you.

FarmHash
https://github.com/lovell/farmhash
Node.js implementation of Google’s FarmHash family of very fast hash functions. FarmHash is the successor to CityHash. Functions in the FarmHash family are not suitable for cryptography. A fast, cryptographically-secure alternative is HighwayHash.

git-js
https://github.com/steveukx/git-js
A light weight interface for running git commands in any node.js application.

Execa
https://github.com/sindresorhus/execa
Process execution for humans. 另附：Execa 2 release — process execution for humans

Tumult Hype 4.0
https://tumult.com/hype/
Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.

Analyzing the Cost of Your Serverless Functions Using Faast.js
https://www.cloudforecast.io/blog/Analyzing-cost-of-your-serverless-functions-using-Faast-js/
Faast.js is an open source project that streamlines invoking serverless functions like AWS Lambda. It allows you to invoke your serverless functions as if they were regular functions in your day to day code. But the benefits don’t stop there. It allows you to spin up your serverless infrastructure when the function is actually invoked. No more upfront provisioning of your serverless environments.

Mastery with SQL
https://www.masterywithsql.com/
A hands-on practical course for anyone who wants to learn modern SQL.

WSL2-Linux-Kernel
https://github.com/microsoft/WSL2-Linux-Kernel
The source for the Linux kernel used in Windows Subsystem for Linux 2 (WSL2). 另附：Microsoft Flight Simulator.

Http CATS
https://http.cat/
Usage: https://http.cat/[status_code]

BytePS
https://github.com/bytedance/byteps
BytePS is a high performance and general distributed training framework. It supports TensorFlow, Keras, PyTorch, and MXNet, and can run on either TCP or RDMA network. BytePS outperforms existing open-sourced distributed training frameworks by a large margin. For example, on a popular public cloud and with the same number of GPUs, BytePS can double the training speed (see below), compared with Horovod+NCCL.

Next steps toward Go 2
https://blog.golang.org/go2-next-steps
We’re well on the way towards the release of Go 1.13, hopefully in early August of this year. This is the first release that will include concrete changes to the language (rather than just minor adjustments to the spec), after a longer moratorium on any such changes. To arrive at these language changes, we started out with a small set of viable proposals, selected from the much larger list of Go 2 proposals, per the new proposal evaluation process outlined in the “Go 2, here we come!” blog post. We wanted our initial selection of proposals to be relatively minor and mostly uncontroversial, to have a reasonably high chance of having them make it through the process.

Raspberry Pi 4 on sale now from $35
https://www.raspberrypi.org/blog/raspberry-pi-4-on-sale-now-from-35/
This is a comprehensive upgrade, touching almost every element of the platform. For the first time we provide a PC-like level of performance for most users, while retaining the interfacing capabilities and hackability of the classic Raspberry Pi line. 另附：Building an LTE Access Point with a Raspberry Pi、What do you do with your Raspberry Pi?

Shadow
https://github.com/Tencent/Shadow
零反射全动态Android插件框架

设计

What I Learned Co-Founding Dribbble
http://simplebits.com/2019/06/25/dribbble.html
Last month, I gave a 30-minute talk at the Awwwards U+2008 conference in San Francisco. I used to give talks fairly often, mostly covering CSS and web design in general, but this one was a bit different. I decided to share 20 things I’ve learned by co-founding Dribbble over the last 10 years. The timing was cosmic, as I’d just made the decision to retire fully from Dribbble, stepping aside to figure out what’s next. More on that in a bit. Reflecting on what I’ve learned from building a community for designers, learning how to run a business, and navigating some tough life years proved both fun and difficult. I thought I’d share those thoughts in hypertext should they be useful. And so here we are.

The Ultimate Guide on Designing a Dark Theme for your Android app
https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637
In this article, I’m going to explain the step by step process of applying Dark Theme to your app based on the Material Design Guidelines by Google. 另附：用阿里巴巴APP的案例，教你如何快速适配「深色模式」。

Sketch to React and Developer-friendly Code. Announcing Anima 4.
https://medium.com/sketch-app-sources/sketch-to-react-and-developer-friendly-code-announcing-anima-4-e3ea591a3934
Anima is the fastest way from design to production. By converting web design to code, we bridge communication between designers and developers. This results in boosted productivity and high-performing teams.

Six Principles for Designing Any Chart
https://medium.com/google-design/redefining-data-visualization-at-google-9bdcf2e447c6
An introduction to Google’s new data visualization guidelines.

百度AR小游戏设计过程全揭秘——《砸金猪积福气》
http://mux.baidu.com/1184
019年春节，百度AR团队策划了一款砸金猪积福气的AR小游戏，助力百度地图“回家有图，一路是福”运营活动。项目历时两个月，从内容创意到设计开发，交互、视觉、模型、动画多个设计师高度配合，在春节来临前，给百度地图的用户带来了不一样的新奇游戏体验。当然在设计制作过程中也遇到了很多问题和困难，我们通过本次的流程梳理和问题思考，把AR设计师做项目时的设计过程总结下来，希望能对大家有一些帮助和启发。

为什么“中国式审美”被群嘲？因为我们缺乏真正的美感教育
https://www.uisdc.com/aesthetic-education
大陆可以让美感教育更多的普及，在人们从小的认知中，让美的意识能成为思考问题、观察世界的方式之一，从根本上让更多人拥有更深厚、更丰富的美学涵养。介绍了一个台湾美育网站 http://www.aade.org.tw/ 蛮有趣的。

产品及其它

What’s Salesforce?
https://tryretool.com/blog/salesforce-for-engineers/
Today, enterprise software has a reputation for being clunky, boring, and slow. But Salesforce, the archetype of enterprise software, actually pioneered much of what we now take for granted in tech, including selling software as a service (=> SaaS), and hosting software in the cloud (=> AWS), all while creating a massively valuable company. To understand how Salesforce took over the world, it helps to understand how sales worked, before Salesforce.

How to Manage Remote Engineering Teams
https://blog.newrelic.com/engineering/manage-remote-engineering-teams/
At New Relic, almost half of our engineering teams now include at least one remote member, and we’ve learned that building distributed teams requires focus on three key areas: Communication, Tooling, Culture. 另附：Zynga Engineering - Working Remotely.

蒂姆·库克传 - 我本可以救活乔布斯
https://new.qq.com/omn/20190626/20190626A0U6LU.html
Leaving things better than I found them. 让我所操劳的一切，比我刚刚接下它们的时候，变得更加美好。优化，Optimization，让这个世界变得更好，不仅是工业工程的核心，它是每一个职场人，每一个创业者内心洋溢着成就感的终极源泉。谋一份差事、挣大钱，固然重要。但心中总有一块地方，是金钱所满足不了的。我并不关心，苹果最新的财报数据有多么好看，库克 2019 年又要拿多少年薪，我也不在乎下一个十年，他要带苹果去哪儿。我只在乎每个人心里的那一团火，和每个人身上的那一束光。

每个极品背后，都有一个感知力与素养深刻的人
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247508954&idx=1&sn=5cb80e0fa03cb844c8dee7b3f109c6ad
很多人说：我对产品没有感觉，不知道是好是坏。为什么会这样？一个人对什么东西有敏锐的感知，一定是基于兴趣点和能力圈。对什么都没有感觉，是因为他还没有发现自己。但发现也不是终点，还需要再经训练和强化，才能转换成非常明显的优势性能力。今天，让我们回归到人，从个体的角度来探讨产品创新的根源。怎样才能让自己具备创新力？核心，是创新思维的建立。我把创新思维分成表层、中间层和底层：表层是感知力，是一个人对外界事物的感觉和判断。中间层是生活体验，是一个人接触各种信息后，将它们累加成的生活经验。底层是素养，是一个人在思维底层的知识性沉淀。

团队没有冲突，终将走向平庸
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654631504&idx=2&sn=d50204268c7ef391f0fe5bcd69728cf7
在团队管理过程当中，你会发现整个团队管理会变成两个极端。一个极端就是走向完全的控制，整个团队的运作状况，主管就相当于是团队的大脑，所有的成员就相当于手和脚，它是一个非常干瘪的机械地运作过程。这个过程有可能比较高效，但实际上几乎是没有创新可言的。很显然，我们很多时候对这个状态是不太满意的，所以我们希望能够激发团队成员的创造力和创新精神。怎么样才能够让团队既有创新，又有非常高的行动力，达成更好的结果？

别让无效努力毁掉你：如何从瞎忙族升级为高效牛人
https://mp.weixin.qq.com/s/OW6ES5i5hxpX6d-g057etQ
每天从早到晚忙不完，能写到月报里的工作成果却没多少；每天都困得不行，靠咖啡甚至抽烟来续命；总感觉很多工作都要做，焦头烂额，还越做越乱…时间永远不够用，个人生活总被加班占满，升职加薪永远轮不到自己。为什么呢？我们付出的大量时间精力，都是无效努力。这几天我读了一本书，叫《别让无效努力毁掉你》，作者克里斯贝利，研究了 10 年高效能，被 TED 称为“有史以来最高效能人士”，他提出高效能的三个要素：时间、能量、注意力。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-07-01·塑料河流、早起的鸟儿、强大的 Rappid、文本避让算法

– THE END –