FEX 技术周刊 - 2019/08/12

深阅读

React v16.9.0 and the Roadmap Update
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html
It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release. New Deprecations: Renaming Unsafe Lifecycle Methods; Deprecating javascript: URLs. New Features: Async act() for Testing; Performance Measurements with <React.Profiler>;

Technical vision for Qt 6
https://blog.qt.io/blog/2019/08/07/technical-vision-qt-6/
Below are some of the key changes we need to make in Qt to make it fit for the next years to come: Next-generation QML, Next-generation graphics, Unified and consistent tooling.

Intl.NumberFormat
https://v8.dev/features/intl-numberformat
You might already be familiar with the Intl.NumberFormat API, as it’s been supported across modern environments for a while now. In its most basic form, Intl.NumberFormat lets you create a reusable formatter instance that supports locale-aware number formatting.

Apollo Client, now with React Hooks
https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2
A new, slimmer API designed for modern React. Apollo Client now includes three hooks that you can drop into your app, anywhere you currently use a corresponding higher-order component or render prop component: useQuery, useMutation, and useSubscription. These hooks are simple to get started with, and they have many advantages over the previous APIs, including bundle size reductions and less boilerplate code.

5 Tips to Help You Avoid React Hooks Pitfalls
https://kentcdodds.com/blog/react-hooks-pitfalls
Let’s look a bit at what pitfalls you could come across and how you can change your thinking so you avoid them.

• Pitfall 1: Starting without a good foundation;
• Pitfall 2: Not using (or ignoring) the ESLint plugin;
• Pitfall 3: Thinking in Lifecycles;
• Pitfall 4: Overthinking performance;
• Pitfall 5: Overthinking the testing of hooks.

Serverless For Frontend 前世今生
https://www.yuque.com/egg/nodejs/sff-history
作为一个前端，你可能一直在迷茫，Node.js 的定位是什么？为什么我们需要它？尤其是到了 2019 这个时间点，未来一段时间内，有一个词 – Serverless 你会听到想吐。所有人都在说 Serverless，几乎没有人知道如何落地 Serverless 但大家都觉得其他人在大力做 Serverless，所以大家都在宣传自己在做 Serverless。阿里作为 Node.js 国内的引航者，在该领域深度实践多年。在国内第一个引入 BFF 的概念，现在也是第一个提出 SFF（Serverless For Frontend）。笔者过去几年有幸参与到该演化进程中，在此分享给大家一些心得，抛砖引玉。

[译]摆脱JS框架，5年web组件开发经验总结
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247492121&idx=1&sn=866af57bc412fa277e28721e0d486168
Web 组件的出现让开发者可以使用 HTML、CSS 和 JavaScript 创建可复用的组件。这意味着无需使用框架也能创建组件。本文作者与大家分享了在零框架下，近五年来只使用web组件开发的经验。

抖音研发实践：基于二进制文件重排的解决方案 APP启动速度提升超15%
https://mp.weixin.qq.com/s/Drmmx5JtjG3UtTFksL6Q8Q
启动是App给用户的第一印象，对用户体验至关重要。抖音的业务迭代迅速，如果放任不管，启动速度会一点点劣化。为此抖音iOS客户端团队做了大量优化工作，除了传统的修改业务代码方式，我们还做了些开拓性的探索，发现修改代码在二进制文件的布局可以提高启动性能，方案落地后在抖音上启动速度提高了约15%。本文从原理出发，介绍了我们是如何通过静态扫描和运行时trace找到启动时候调用的函数，然后修改编译参数完成二进制文件的重新排布。

[译]WebAssembly - JS 的未来和 Web 多语言开发
https://juejin.im/post/5d4b17b0f265da03c926e436
这是一个由 simviso 团队对 JSConf.Asia 中关于 WebAssembly 相关话题进行翻译的文档，内容并非直译，其中有一些是译者自身的思考。分享者是 Kas Perch，Cloudflare 的一名开发人员。现在，让我们一起来了解下什么是 WebAssembly。另附：「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡。

Native lazy-loading for the web
https://web.dev/native-lazy-loading
Browser-level native lazy-loading is finally here! As of Chrome 76 (available now), you can use the loading attribute to natively lazy load resources, without the need for custom code or a separate JS library. This post dives into the details.

Writing Modes And CSS Layout
https://www.smashingmagazine.com/2019/08/writing-modes-layout/
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important.

Design Principles for Developers: Processes and CSS Tips for Better Web Design
https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/
Whenever you use HTML and CSS, you are designing—giving form and structure to content so it can be understood by someone else. People have been designing for centuries and have developed principles along the way that are applicable to digital interfaces today. These principles manifest in three key areas: how words are displayed (typography), how content is arranged (spacing), and how personalty is added (color). Let’s discover how to use each of these web design ingredients through the mindset of a developer with CSS properties and guidelines to take the guesswork out of web design.

Introducing Storybook Design System
https://medium.com/storybookjs/introducing-storybook-design-system-23fd9b1ac3c0
A reusable UI component library for Storybook contributors

How To Get Started With IPFS and Node
https://medium.com/better-programming/how-to-get-started-with-ipfs-and-node-fa04baec6b3a
Learn what the InterPlanetary File System is and how to store data with it.

Build Your Own Video Chat with Vue, WebRTC, SocketIO, Node & Redis
https://levelup.gitconnected.com/build-your-own-video-chat-with-vue-webrtc-socketio-node-redis-eb51b78f9f55
Nowadays, there are plenty of free applications out there in the market providing chat and video conference functionality. In almost one click we all are able to communicate with anyone in any part of the world but, why don’t we try to build our own app to make it even more real? Let’s do it!

Regex For Noobs (like me!) - An Illustrated Guide
https://www.janmeppe.com/blog/regex-for-noobs/
This blog post is an illustrated guide to regex and aims to provide a gentle introduction for people who never have fiddled with regex, want to, but are kind of intimidated by the whole thing.

Welcome to Serverless 2.0
https://www.youtube.com/watch?v=JvXm-oHi5Mg
This talk from the creator of OpenFaaS and CNCF Serverless workgroup member Alex Ellis explores what hype actually means for our industry and why it matters so much for serverless right now. You’ll learn why ThoughtWorks says multi-cloud portability is best achieved through containers and learn more about how the industry is shifting towards Kubernetes for container management. This has lead to what Alex is coining Serverless 2.0 - a truly portable experience built on battle-tested technology.

Stack Overflow: How We Do App Caching - 2019 Edition
https://nickcraver.com/blog/2019/08/06/stack-overflow-how-we-do-app-caching/
So…caching. What is it? It’s a way to get a quick payoff by not re-calculating or fetching things over and over, resulting in performance and cost wins. That’s even where the name comes from, it’s a short form of the “ca-ching!” cash register sound from the dark ages of 2014 when physical currency was still a thing, before Apple Pay. I’m a dad now, deal with it. Let’s say we need to call an API or query a database server or just take a bajillion numbers (Google says that’s an actual word, I checked) and add them up. Those are all relatively crazy expensive. So we cache the result – we keep it handy for re-use.

Unifying visual embeddings for visual search at Pinterest
https://medium.com/pinterest-engineering/unifying-visual-embeddings-for-visual-search-at-pinterest-74ea7ea103f0
In 2017, we launched Lens camera search, opening up Pinterest’s visual search to the real world by turning every Pinner’s phone camera into a powerful discovery system. And in 2019, we’ve launched Automated Shop the Look so Pinners can find and shop for exact products within a Pinterest home-decor scene. Visual search is one of the fastest-growing products at Pinterest with hundreds of millions of searches per month.

OpenCensus Web: Unlocking Full End-to-End Observability for Your Entire Stack
https://opensource.googleblog.com/2019/08/opencensus-web-unlocking-full-end-to.html
OpenCensus Web is a tool to trace and monitor the user-perceived performance of your web pages. It can help determine whether or not your web pages are experiencing performance issues that you might otherwise not know how to diagnose.

Life After Hadoop: Getting Data Science to Work for Your Business
https://towardsdatascience.com/life-after-hadoop-getting-data-science-to-work-for-your-business-c9ab6605733f
Traditional approaches like Apache Hadoop and CPU-based infrastructure aren’t up to the task — they pose too many bottlenecks and are too slow. NVIDIA and its partners are building GPU-based tools that let businesses unleash data science using AI. Below are five key elements to building AI-optimized data centers, but first let’s take a look at the crossroads data science is at.

Build Your Own Text Editor
https://viewsourcecode.org/snaptoken/kilo/index.html
Welcome! This is an instruction booklet that shows you how to build a text editor in C. The text editor is antirez’s kilo, with some changes.mI explain each step along the way, sometimes in a lot of detail. Feel free to skim or skip the prose, as the main point of this is that you are going to build a text editor from scratch! Anything you learn along the way is bonus, and there’s plenty to learn just from typing in the changes to the code and observing the results.

What Every Developer Should Learn Early On
https://stackoverflow.blog/2019/08/07/what-every-developer-should-learn-early-on/
Languages aren’t necessarily “Good” or “Bad”; Reading Other People’s Code is Hard; You’ll Never Write “Perfect” Code; Working as a Programmer Doesn’t Mean 8 Hours of Programming a Day.

How to Make Your Open Source Project Successful
https://dmitripavlutin.com/how-to-make-your-open-source-project-successful/
I’ve built an open source library vocajs.com that managed to rise to the top trending repositories on GitHub. Along the way, I learned some important principles of how to make a quality open source project. I want to share these ideas:

• 1. No one cares about your project
• 1. Solve a real problem
• 1. Put an accent on quality
• 1. Excellent README.md and documentation
• 1. Showcase with demos and screenshots
• 1. Try building a community
• 1. Let the world know

All the best engineering advice I stole from non-technical people
https://medium.com/@bellmar/all-the-best-engineering-advice-i-stole-from-non-technical-people-eb7f90ca2f5f
More often than not the best advice, the things that stuck with me, came from people who had no background at all in software. It’s intriguing that the stuff that really seems to make a difference in the quality of software never seems to be about software. These are five of my favorites: 1. “People like us make our money in the seams of things”; 2. “Know what people are asking you to be an expert in”; 3. “Before you can make things better, you have to stop making them worse”; 4. “To go left, turn right”; 5. “Thinking is also work”.

新鲜货

DC_OS - The Definitive Platform for Modern Apps
https://dcos.io/
DC/OS (the Distributed Cloud Operating System) is an open-source, distributed operating system based on the Apache Mesos distributed systems kernel. DC/OS manages multiple machines in the cloud or on-premises from a single interface; deploys containers, distributed services, and legacy applications into those machines; and provides networking, service discovery and resource management to keep the services running and communicating with each other.

2019 Google 中国开发者大会报名
https://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652050101&idx=1&sn=c4fc3a6e7780daf4dbbc49b01d7c5204
2019 谷歌开发者大会将于 9 月 10 日和 11 日在上海举办，感兴趣的同学可参加。

GitHub Actions now supports CI/CD, free for public repositories
https://github.blog/2019-08-08-github-actions-now-supports-ci-cd/
Since we introduced GitHub Actions last year, the response has been phenomenal, and developers have created thousands of inspired workflows. But we’ve also heard clear feedback from almost everyone: you want CI/CD! And that’s what we’re announcing today. We hope you’ll try out the beta before GitHub Actions is generally available on November 13. We can’t wait to hear what you think!

Chrome 77 Beta
https://blog.chromium.org/2019/08/chrome-77-beta-new-performance-metrics.html
New performance metrics: Largest Contentful Paint, new form capabilities, capabilities in origin trials and more…

ES proposal: globalThis
https://2ality.com/2019/08/global-this.html
The ECMAScript proposal “globalThis” by Jordan Harband provides a new standard way of accessing the global object.

Data Structures and Algorithms in JavaScript
https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
This is the coding implementations of the DSA.js book and the repo for the NPM package. In this repository, you can find the implementation of algorithms and data structures in JavaScript. This material can be used as a reference manual for developers, or you can refresh specific topics before an interview. Also, you can find ideas to solve problems more efficiently.

AnyChart 8.7.0 with New Awesome Features!
https://www.anychart.com/blog/2019/08/08/javascript-graph-visualization-libraries-new-features-anychart/
Client-Side Export, Stock UI Controls: Swap and Maximize, Stock Plot Splitter, Infinite Range Annotations…

Lightning Web Components
https://lwc.dev/
A Blazing Fast, Enterprise-Grade Web Components Foundation. Lightning web components are custom elements built using HTML and modern JavaScript. The Lightning Web Components UI framework uses core Web Components standards and provides only what’s necessary to perform well in browsers. Because it’s built on code that runs natively in browsers, the framework is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

react-archer
https://github.com/pierpo/react-archer
Draw arrows between DOM elements in React.

A History of Amazon Web Services (AWS)
https://www.awsgeek.com/pages/AWS-History/
A history of AWS service announcements (either pre-announced or in some form of limited preview, like beta) and releases (generally available in one or more AWS regions).

MC.JS
https://github.com/ian13456/mc.js
Open source Minecraft clone built with ThreeJS, ReactJS, GraphQL, and NodeJS. MC.JS brings the best-selling PC game “Minecraft” into the web with the power of javascript.

Photoronoi
https://wattenberger.com/photoronoi
Upload an image or grab from a url to turn an image into a voronoi SVG. Darker parts of the image result in smaller polygons - play around with the settings to see what works best for your picture! You might try removing the background of your image using remove.bg.

Silk
http://weavesilk.com/
Interactive generative art.

Pkg Stats
https://www.pkgstats.com/
npm package discovery and stats viewer.

Rust Language Cheat Sheet
https://cheats.rs/
Rust 语言就是这样一门哲学内涵丰富的编程语言。通过了解 Rust 遵循什么样的设计哲学，进一步了解它的语法结构和编程理念，就可以系统地掌握这门语言的核心，而不至于在其纷繁复杂的语法细节中迷失。另附：想要改变世界的 Rust 语言

设计

To Make Apps Accessible, Make Them Compatible with Different Devices
https://medium.com/google-design/to-make-apps-accessible-make-them-compatible-with-different-devices-11298c6d3f06
How to design with old operating systems, varying contrast, low battery life, and damaged screens in mind.

The Complete Guide to UX Research Methods
https://www.toptal.com/designers/user-research/guide-to-ux-research-methods
User experience (UX) design is the process of designing products that are useful, easy to use, and a pleasure to engage. It’s about enhancing the entire experience people have while interacting with a product and making sure they find value, satisfaction, and delight. If a mountain peak represents that goal, employing various UX research methods are the path UX designers use to get to the top of the mountain.

Gung Ho Predictions About the Future of AI: UX, Psychology, and Advertising
https://uxplanet.org/not-so-gung-ho-predictions-about-the-future-of-ai-ux-psychology-and-advertising-3c47f96c6ef4
As you surf the web for news and insight, AI is learning what you like to read, how long you like to read for, and it probably even knows if you’re one of those people that read articles with your mouse cursor. And with that information that AI learns, companies are turning a profit. AI software like Google Ads and Facebook Ads select advertisements to show you based upon your habits. And I believe these AI are only going to become more advanced.

产品及其它

解散匿名社交“一罐”后，创始人复盘：十倍目标是万恶之源
https://new.qq.com/omn/20190806/20190806A0E6S800.html
一罐创始人纯银整理了创业7年的教训：1）原型测试是万物之源；2）十倍目标是万恶之源；3）战略、策略与同伴。不讲big story吧，融不到资也组不了队，讲big story吧，又会因为过于激进而大涨仆街概率。难道真的没有解法吗？」解法是有的，我造了个词叫「原生创业家庭」，意思是满足如下四个条件的创业团队：天使轮融资；核心团队完整地覆盖产品研发运营；核心团队靠老交情黏合在一起创业；核心团队第一次创业。

关于字节跳动的神话与现实
https://mp.weixin.qq.com/s?__biz=MzIxMDgyMTM0NQ==&mid=2247488047&idx=1&sn=42f0cd0865c325b0ff007b7367d028cd
字节跳动，百度的 “威力加强版”：虽然媒体热衷于炒作“头腾大战”，字节跳动最贴切的对标其实是百度。它具备百度巅峰期的优点（技术领先、销售强势），又避免了导致百度衰落的缺点（不重视用户体验、执行力低下），从而最大限度的蚕食了百度的蛋糕。字节跳动的崛起史就是百度的坍塌史，而且这个过程还在持续；当然，微博、快手也从这个过程中受益了。

“新物种爆炸·吴声商业方法发布2019”3小时全文实录
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247510117&idx=2&sn=336326b443000dae1f63347cc78e9d16
声3小时不间断演讲“预测”依旧，首发“场景算法”解码数字商业新时代。场景实验室创始人吴声，以“真假吴声”对话开场，引出对数字生活态度和数字文明规则的探讨。他认为，随着“天生边缘、自组织、开放协作”的00后数字化原住民入场，商业规则正在被重新制定，所以我们说“数字商业正年轻”。场景算法是数字化商业的操作系统，系统化探寻年轻商业可能性。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-08-12·以人为本的正交网络布局、ggplot的台风可视化、字体关系分析