FEX 技术周刊 - 2019/07/15

深阅读

QuickJS Javascript Engine
https://bellard.org/quickjs/
QuickJS is a small and embeddable Javascript engine. It supports the ES2019 specification including modules, asynchronous generators and proxies. It optionally supports mathematical extensions such as big integers (BigInt), big floating point numbers (BigFloat) and operator overloading. 作者很厉害，见：FFmpeg 开发者徒手撸了一个 JS 引擎. 另外，Facebook 也搞了一个 js engine：Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native.

What’s Deno, and how is it different from Node.js?
https://blog.logrocket.com/what-is-deno/
Ryan Dahl, creator of Node.js, has spent the last year and a half working on Deno, a new runtime for JavaScript that is supposed to fix all the inherent problems of Node. Don’t get me wrong, Node is a great server-side JavaScript runtime in its own right, mostly due to its vast ecosystem and the usage of JavaScript. However, Dahl admits there are a few things he should have thought about more — security, modules, and dependencies, to name a few.

Announcing Flutter 1.7
https://medium.com/flutter/announcing-flutter-1-7-9cab4f34eacf
Flutter 1.7 contains support for AndroidX and for updated Play Store requirements, a number of new and enhanced components, and bug fixes to customer-reported issues.

Extending Atomic Design
http://bradfrost.com/blog/post/extending-atomic-design/
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. Of course over these last 6 years, the language and tactics around design systems has evolved (even the term “design systems” wasn’t really a thing back in 2013!), so I thought I’d share how some of these other concepts interact with atomic design.

技术路线：前端开发已进入深水区
https://www.yuque.com/sxc/front/kvokg4
新的商业环境下就有新的公司组织架构形态，以及新的产品研发流程和合作模式，这些也对今日的前端开发工程师提出更新更高的要求，无论是技术层面还是意识层面，如今的前端开发已经进入深水区，要在深水区中生存以及捕捞猎物，就需要有深水区所需要的系统化的技能体系以及配套的软硬件能力，以及从浅水区进往深水区所需要的进阶方法论，本文试图向大家传达这样一种观点，希望带给大家一些启示，无论是新人老人都要居安思危，提前做出储备，以应对新的职场挑战，更灵活的延展自己的职业路线。

Tubi 敏捷开发之道
https://mp.weixin.qq.com/s?__biz=MzU4NzYxOTkyOQ==&mid=2247484183&idx=1&sn=ebb2906bff3006cfeccbfbcb906e8884
随着 Tubi 团队的发展，我们发现自己有时迷失在确定优先级、识别关键任务、检查疏漏以及其他种种发展痛点中。鉴于此，一群工程师自愿开始为期三个月的尝试，期望构建出一个目前适合我们、并且在可预见的未来能够适应公司扩展的的系统。这篇文章将带你一览我们为什么以及如何构建该系统，及其践行效果。

在阿里一年，我颠覆了曾经坚信不疑的技术思维
https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA==&mid=2655825436&idx=1&sn=25becac0f083ef9fac254807ae555402
2018.5.31~2019.5.31，一段精彩的旅程，渡过了在阿里一年的时光，这段时光有快乐、有焦虑、有迷茫、更有思考。思考的是自己过去的种种不足、思考的是一些现在看来之前错误的想法、思考的是如何成为一个更好的技术人，将这一些思考分享给看到这些文字的每个人，共勉。

How do JavaScript’s global variables really work?
https://2ality.com/2019/07/global-scope.html
In this blog post, we examine how JavaScript’s global variables work. Several interesting phenomena play a role: the scope of scripts, the so-called global object, and more.

Improve Your JavaScript Knowledge By Reading Source Code
https://www.smashingmagazine.com/2019/07/javascript-knowledge-reading-source-code/
When you are still early on in your programming career, digging into the source code of open source libraries and frameworks can be a daunting endeavor. In this article, Carl Mungazi shares how he got over his fear and began using source code to improve his knowledge and skills. He also uses Redux to demonstrate how he approaches breaking down a library.

Why every Vue developer should be excited by Quasar 1.0
https://medium.com/quasar-framework/quasar-1-0-4bc696d60c1b
We’re publishing the first stable release of Quasar: A full-featured and extensible open-source framework founded on top of the highly popular VueJS that leverages the power of Node, Webpack and Babel.

The Future of Websites: Headless CMSs
https://scotch.io/bar-talk/the-future-of-websites-headless-cmss
Since their introduction, content management systems (CMS) have made life easier for website developers, site owners, and administrators alike. Platforms like WordPress, Joomla, and Drupal account for more than 60% of all web content platforms. The only problem is their relative lack of flexibility. This is mainly due to the fact that the front and back end functionalities are deeply coupled. With the rise in popularity of decoupled architectures like the JAMstack, CMS’s have been increasingly shunning traditional database-driven systems in favor of API driven ones, known as the “Headless CMS”.

A Deep Dive into React-Redux | React Next 2019
https://www.youtube.com/watch?v=yOZ4Ml9LlWE
Redux and React are frequently used together, and many people are familiar with the “Provider” and “connect” APIs from React-Redux. But how does React-Redux work, and why do we even need it in the first place? Join Redux maintainer Mark Erikson on a journey through the history and internals of React-Redux. React Next 2019 其它视频：https://www.youtube.com/playlist?list=PLMYVq3z1QxSrtc-VmYeAoBwVJZFYMkovU

How to build great React search experiences quickly
https://www.elastic.co/cn/blog/how-to-build-great-react-search-experiences-quickly
We’ll walk through how to build excellent, React-based search experiences using Elastic’s open source Search UI library. It’ll take about 30 minutes, and afterwards you’ll be ready to bring search to any application which needs it.

Developers don’t understand CORS
https://fosterelli.co/developers-dont-understand-cors
One of the best things about working in full stack consulting is that I get to work with a great number of developers with different skill levels in companies from various sizes and industries. This provides an opportunity to see what universal struggles come up. One that seems common and relevant recently is this: Too many web developers do not understand how CORS works.

When SQL Isn’t the Right Answer
https://medium.com/better-programming/when-sql-isnt-the-right-answer-7d06902bc940
Personally, I have a love-hate relationship with relational databases. When they are structured properly and abstracted just enough for the solution rather than for the sake of architectural purity, they can be fun to work with. However, for many of us, this is often not the case.

Re-Architecting the Video Gatekeeper
https://medium.com/netflix-techblog/re-architecting-the-video-gatekeeper-f7b0ac2f6b00
This is the story about how the Content Setup Engineering team used Hollow, a Netflix OSS technology, to re-architect and simplify an essential component in our content pipeline — delivering a large amount of business value in the process.

Details of the Cloudflare outage on July 2, 2019
https://blog.cloudflare.com/details-of-the-cloudflare-outage-on-july-2-2019/#appendix-about-regular-expression-backtracking
An update contained a regular expression that backtracked enormously and exhausted CPU used for HTTP/HTTPS serving. This brought down Cloudflare’s core proxying, CDN and WAF functionality. The following graph shows CPUs dedicated to serving HTTP/HTTPS traffic spiking to nearly 100% usage across the servers in our network.

Democratizing data analysis with Google BigQuery
https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/democratizing-data-analysis-with-google-bigquery.html
Last year, we announced a new collaboration with Google and are migrating parts of our data infrastructure to the Google Cloud Platform (GCP). This blog post talks about our experience with these tools: what we did, what we learned, and what we’ll do next. Here, we focus on batch and interactive analytics. We’ll discuss real-time analytics in a future blog post. 另附：Goodbye Hadoop. Building a streaming data processing pipeline on Google Cloud.

Visualizing City Cores with H3, Uber’s Open Source Geospatial Indexing System
https://eng.uber.com/visualizing-city-cores-with-h3/
In 2018, Uber open sourced H3, our hexagonal grid system for visualizing geospatial data, enabling the broad adoption of this powerful and easy-to-use software. In the videos below, members of our engineering and data science teams discuss how to most effectively use H3 for geospatial indexing.

Code Reviews at Medium
https://medium.engineering/code-reviews-at-medium-bed2c0dce13a
Engineering teams have different norms and policies when it comes to code reviews. It can be frustrating to join a team and not know what is expected, or to operate with old assumptions and discover that they are at odds with a new team. In an effort to make it easier for engineers who come from companies with different practices, we wrote down some of the features of our code review culture.

Scaling and improving at Sqreen: a frontend team retrospective
https://blog.sqreen.com/scaling-and-improving-at-sqreen-a-frontend-team-retrospective/
At Sqreen, our company has evolved and changed a lot since we began this journey. Our frontend team is no exception, and as a member of that team, I wanted to take a moment to do a frontend team retrospective and reflect on how we’ve scaled, the mistakes and improvements we’ve made, and generally share what we’ve learned. I hope that this post may help you if you’re undertaking a similar journey. In this post, I’ll explore what we did wrong, right, and how we tackle our weaknesses.

Ten Years of Erlang
https://ferd.ca/ten-years-of-erlang.html
In this post, I’ll cover a few things such as hype phases and how this related to Erlang, the ladder of ideas within the language and how that can impact adoption, what changed in my ten years here, and I’ll finish up with what I think Erlang still has to bring to the programming community at large.

Clear is better than clever
https://dave.cheney.net/2019/07/09/clear-is-better-than-clever
Readability is often cited as one of Go’s core tenets, I disagree. In this article I’ll discuss the differences between clarity and readability, show you what I mean by clarity and how it applies to Go code, and argue that Go programmers should strive for clarity–not just readability–in their programs.

What We Can Learn From Software History
https://www.hillelwayne.com/talks/software-history/
Talk is not up yet, Slides are here.

新鲜货

AI poker bot is first to beat professionals at multiplayer game
https://www.nature.com/articles/d41586-019-02156-9
Triumph over five human opponents at Texas hold’em brings bots closer to solving complicated real-world problems. 另附：DeepMind’s StarCraft II agent will play anonymously on battle.net、Facebook, Carnegie Mellon build first AI that beats pros in 6-player poker.

Next.js 9
https://nextjs.org/blog/next-9
After 70 canary releases we are pleased to introduce Next.js 9, featuring: Built-in Zero-Config TypeScript Support; File system-Based Dynamic Routing; Automatic Static Optimization; API Routes; More Production Optimizations; Improved DX.

Blazor, a new framework for browser-based .NET apps
https://www.youtube.com/watch?v=uW-Kk7Qpv5U
Blazor is a new experimental web UI framework from the ASP.NET team that aims to brings .NET applications into all browsers (including mobile) via WebAssembly. It allows you to build true full-stack .NET applications, sharing code across server and client, with no need for transpilation or plugins. In this talk I’ll demonstrate what you can do with Blazor today and how it works on the underlying WebAssembly runtime behind the scenes. You’ll see its modern, component-based architecture (inspired by modern SPA frameworks) at work as we use it to build a responsive client-side UI.

Firefox 68: BigInts, Contrast Checks, and the QuantumBar
https://hacks.mozilla.org/2019/07/firefox-68-bigints-contrast-checks-and-the-quantumbar/
Firefox 68 is available today, featuring support for big integers, whole-page contrast checks, and a completely new implementation of a core Firefox feature: the URL bar.

Announcing Docsy: A Website Theme for Technical Documentation
https://opensource.googleblog.com/2019/07/announcing-docsy-website-theme-for.html
Google supports over 2000 open source projects, and there has been growing demand from these projects for tooling and guidance to help them write and publish their documentation. To meet this need we created Docsy: a documentation website with templates and guidance for documentation, which we’re open sourcing to the public to use and help improve the tool.

abcjs
https://abcjs.net/
javascript for rendering abc music notation.

Marked
https://github.com/markedjs/marked
A markdown parser and compiler. Built for speed.

jest-dom
https://github.com/testing-library/jest-dom
Custom jest matchers to test the state of the DOM.

Vimeo Player API
https://github.com/vimeo/player.js
The Vimeo Player API allows you to interact with and control an embedded Vimeo Player.

3D Wireframes in SVG
https://prideout.net/blog/svg_wireframes/
SVG is great for line art. It scales nicely for high DPI displays without using much bandwidth. However SVG was not designed for 3D, so it does not provide mechanisms for applying perspective transformation or hidden surface elimination. These limitations can be overcome for simple meshes by baking the perspective transformation, carefully ordering the paths within the SVG document, and paying attention to the winding direction of projected polygons. In this post I will show how to use Python to generate vector art as seen at the top of the page, including the fully lit 3D Möbius tube.

Pie Chart Maker
https://beautifuldingbats.com/graph-makers/pie-chart-maker/
Use this tool to generate custom pie charts. Choose colors, patterns, and lots more to better illustrate your data. Once your pie is done, convert it to jpg, png, or even embed an animated version in your website. It’s free.

Hostyoself: Server in a browser
https://github.com/schollz/hostyoself
Host yo’ self from your browser, your phone, your toaster.

Stein – Use Google Sheets as a No-Setup Database
https://steinhq.com/
Ship fast and manage your data with ease. Connect to Google Sheets. Use Google Sheets as your no-setup data store. Build fast and get a familiar interface for managing the data, with the open source Stein. 另附：How to recreate the GitHub contribution graph with Node.js and Google Sheets.

hub: USE GITHUB FROM THE COMMAND-LINE
https://hub.github.com/
hub is an extension to command-line git that helps you do everyday GitHub tasks without ever leaving the terminal.

设计

不要总叫人买买买，好的设计要“走心”
https://mp.weixin.qq.com/s/Lhcs78tFRBLRahor2UpddQ
设计是什么？其实，经过100多年的发展，设计的内涵不再单纯是物的设计，或是产品的设计，而是进化为一个事的设计。设计是一个过程，需要发掘真正问题的根本，然后提供解决方案。而在即将到来的数字化时代，设计将进化到第三步，心的设计。为什么？因为“心”的设计会告诉你，什么是你的底线，什么事情是我要做的，什么事情虽然可以赚钱的，但是我不该做。无论时代如何变化，对人的关怀和观察，永远不会过时，我们必须要进入到“心”的设计。

百度AI交互设计院发布NIRO2.0自然情感交互系统
http://mux.baidu.com/1194
为了提升机器人的人机交互能力，在去年AI Creat 2018我们发布了机器人的自然情感交互系统NIRO1.0，NIRO1.0包含三个层次-机器人自然语言交互模型、人类情绪应对模型、机器人主动交流交互模型，通过这三个模型可以让机器人的语音交互更高效、能主动服务、有情商。推动行业进步的根本途径是提升体验，人机交互系统只是体验的一环，只有和硬件能力相互结合发生化学反应，才能更有效的提升机器人的体验。因此在过去一年里我们与百度内部多个团队进行合作，通过软硬一体化打造了多款机器人产品。MUX 网站还有不百度AI开发者大会上关于设计相关的话题的分享。

UXPA 2019 见闻
https://www.yuque.com/lyndon/daylesson/kw1z2m
6 月底，非常有幸被公司选中，派往美国 Scottsdale 参加 UXPA 会议。在接下来的文章，会和大家分享一些在 UXPA 的所见所闻，主要内容会分成两大趴：

• 印象最深一堂课：比较完整、全面的分享一个 Workshop，以及结合自己工作的感悟。
• 会议日程和有趣见闻：以流水账的方式，记录会议中和会议外的趣闻。
• AR，我们从设计说起
  https://isux.tencent.com/articles/ar-design.html
  希望大家通过这个分享能够快速了解AR的实现原理，AR的设计流程，以及在设计过程中遇到的问题，在最后会分享我这些年做AR设计的一些心得和技巧。

Why we built a UX Research Insights repository
https://about.gitlab.com/2019/07/10/building-a-ux-research-insights-repository/
Enter the UX Research repository and research reports. As the Product and UX/Product Design teams grew, so did the demand for UX research. Product managers and UX/product designers needed greater visibility into what I was working on so they had a sense of my availability for projects, and I needed a way to manage incoming research requests. We had success by creating a dedicated repository for UX Research requests and then using checklists within issues to track my progress against each request.

A New System for Designing Motion With Both Sketch and Figma
https://medium.com/google-design/aeux-f79e06e01594
Introducing AEUX, a tool for integrating motion design into a UX workflow—with fewer speed bumps than ever.

产品及其它

A worrying change in Open Source perception
https://christianheilmann.com/2019/07/11/a-worrying-change-in-open-source-perception/
Open Source is an excellent idea. It proved itself to create large and complex products with a shared workforce. It also allows products to follow the input and guidance from several players. Products don’t have to follow the demands of one company or their stakeholders. We build for the platform and the community, not for the next financial quarter.

社群经济注定是“历史”，而不是未来
https://36kr.com/p/5223692
“社群”这个词已经和“区块链”、“IP”一样，变成了一个扭曲的商业词汇。我们提及“社群”时，常常弄不清这到底是一种趋势还是一阵烟雾？跟我谈“社群”的人或组织到底是专家还是骗子？我想，是时候该理清“社群”这个概念了。大多时候，当我们说不清一个概念时，往往不是它很复杂，而是因为我们认知不到位。而一旦我们认知不到位，我们的实践成本就会增大。今天，我们用常识去理解一下社群经济：到底如何理解社群？如何理解社群经济？社群到底有什么特性？如何打造一个社群组织？社群思维的商业应用？

做最难的事，或许相遇最大的蓝海
https://mp.weixin.qq.com/s/MLu197ZO3a61XG15wAgJJg
内容行业，一直都是一个竞争极为激烈的赛道，特别是随着流量红利见顶，优胜劣汰的残酷景象正在轮番上演。那么，在当下这个时代，究竟什么才是内容型产品长久生存的最优路径？“凯叔讲故事”创始人王凯老师讲述了他的“极致”心法：“要把内容型产品打造成工艺品”，“不为场景打造出来的产品同垃圾无异”，“资本不能催化的往往才是你的核心竞争力……”

任正非：人感知到自己的渺小，行为才开始伟大
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654632714&idx=2&sn=a1c50004fb1dd2ceb5c3b7a8bc5e0c22
个人是历史长河中最渺小的，这是人生真谛。历史的灾难经常是周而复始的，人们的贪婪从未因灾难改进过，过高的杠杆比推动经济的泡沫化，总会破灭。我们唯有把握更清晰的方向，更努力地工作，任何投机总会要还账的。我们既要有信心，也不要盲目相信未来，历史的灾难都是我们的前车之鉴。我们对未来的无知是无法解决的问题，但我们可以通过归纳找到方向，并使自己处在合理组织结构及优良的进取状态，以此来预防未来。死亡是会到来的，这是历史规律，我们的责任是应不断延长我们的生命。

学习的智慧
http://www.yinwang.org/blog-cn/2019/07/12/learning-philosophy
很多人坚信“知识就是力量”，可是他们不知道，知识和知识是不一样的。大部分人从学校，从书籍，从文献学知识，结果学到一堆“死知识”。要检验知识是不是死的，很简单。如果你遇到前所未见的问题，却不能把这些知识运用出来解决问题，那么这些知识就很可能是死的。活知识必须靠自己创造出来，要经过许许多多的失败。如果没有经过失败，是不可能得到活知识的。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-07-15·Bubble Treemap、图的三种可视化方式、Tableau 的信息可视化作品

– THE END –