FEX 技术周刊 - 2019/06/17

深阅读

From design patterns to category theory
https://blog.ploeh.dk/2017/10/04/from-design-patterns-to-category-theory/
Design Patterns was a great effort in 1994, and I’ve personally benefited from it. The catalogue was an attempt to discover good abstractions. What’s a good abstraction? As already quoted, it’s a model that amplifies the essentials, etcetera. I think a good abstraction should also be intuitive. What’s the most intuitive abstractions ever? Mathematics.

Micro Frontends
https://martinfowler.com/articles/micro-frontends.html
Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this article we’ll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. As well as talking about the various benefits and costs, we’ll cover some of the implementation options that are available, and we’ll dive deep into a full example application that demonstrates the technique.

Why tools like Flutter need to succeed
https://chimon.hashnode.dev/why-tools-like-flutter-need-to-succeed-cjw23fso8000gn9s1p5t78gfd
Flutter started as an experiment to see what Chrome would look like as a development ecosystem without the technical debt accumulated over the years. It was carefully constructed based on the past learnings of several minds that spent the better parts of their careers contributing to the web platform. These engineers are passionate about both the tools and the community that they are building. 另附：How Much Does It Cost to Develop a React Native Mobile App?、The Power of the Flutter’s Transform and GestureDetector Widgets.

The future of React, unfolding with Suspense
https://blog.logrocket.com/the-future-of-react-unfolding-with-suspense/
This won’t be just another article on how to write Hooks, but rather what to expect in the future of React! If you have never heard of Hooks, or any other new API in React, this article will be a great start to get you excited about the future.

我叫死月，我在蚂蚁写 Node.js
https://www.yuque.com/xadillax/koumakan/xadillax-in-alipay
前两天，我因为知乎上一个中二魂满满的问题《为什么强如『死月』在阿里也只有 P6？》而躺枪。没错，我就是故事里的男主角。本来一开始我还没当一回事，但自从 Winter、贺老、狼叔等人回了这个问题之后，就一发不可收拾。本来我不是很想回答这个问题的，毕竟是天外飞锅，但是后来想想，借这个机会自我批判一番也挺好，看看是否能“洗刷”一下自己“网红”的名头。其实我对“网红”还是略有排斥的，一个是本身我就是一个小透明，另一个总觉得现如今意义上“网红”总归不是一个很好的褒义词。于是，搞了篇文章，在批判之余，我也为自己正个名。

Jeecg-Boot：基于代码生成器的 Java 快速开发平台
https://mp.weixin.qq.com/s/eEh37wPYDDIY5G-m5Vo9bw
Jeecg-Boot 是一款基于代码生成器的智能开发平台！采用前后端分离架构：SpringBoot、Mybatis、Shiro、JWT、Vue & Ant Design。强大的代码生成器让前端和后台代码一键生成，不需要写任何代码，保持 jeecg 一贯的强大，绝对是全栈开发福音！！JeecgBoot 在提高 UI 能力的同时，降低了前后分离的开发成本，JeecgBoot 还独创在线开发模式（No 代码概念），一系列在线智能开发：在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。

Taro 1.3 ：全面支持 JSX 语法和 HOOKS
https://aotu.io/notes/2019/06/13/taro-1-3/
Taro 1.3 的特性包括但不限于：支持快应用和 QQ 小程序的开发；全面支持 JSX 语法和 React Hooks；大幅提高 H5 性能和可用性；Taro Doctor.

从9102年的CSS状态报告中看CSS特性的使用
https://www.w3cplus.com/css/2019-state-of-css.html
在9102年终于有了一份属于 CSS状态的报告。对，这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有JavaScript相关的状态报告，对于CSS的状态报告并无了解（那是以前没有）。正如报告开篇所说，在Web开发家族中，JavaScript更似一位愤怒、叛逆的少年，每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学，举止得体的少年，他总是保持礼貌，从不草率的做出任何决定。

Drawing Realistic Clouds with SVG and CSS
https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/
For this article, we will focus on learning to use these SVG filters to get spectacular results. We don’t need to delve too deeply into what is happening behind the scenes algorithmically, much in the way an artist isn’t required know the molecular structure of paint to render a stunning landscape.

Styling In Modern Web Apps
https://www.smashingmagazine.com/2019/06/styling-modern-web-apps/
In this article, we welcome you to take a detailed dive into the different ways of organizing styling in modern applications which often have complex interfaces and design patterns. Let’s walk through BEM, preprocessors, CSS-in-JS and even design systems to find out what works best for you.

Video Upload Latency Improvements at Instagram
https://instagram-engineering.com/video-upload-latency-improvements-at-instagram-bcf4b4c5520a
In June 2013 Instagram introduced video uploads. At the time the system was simple. To ingest video and make it available for playback, we had the Instagram app upload the entire video file to the server once the client had finished recording it. Then we would transcode the video to a controlled set of video versions of different qualities to make sure the video file was playable on as many devices as possible. Once all the video versions were available, we “published” the video and made it available for viewing.

A Look Back At WWDC 2019
https://nshipster.com/wwdc-2019/
Now the dust has settled here’s a look back at a the “mind-blowing week for Apple platform developers”, and a look ahead at the future for software development.

When should you be using Web Workers?
https://dassur.ma/things/when-workers/
You should always use Web Workers. And in our current landscape of frameworks it’s virtually impossible.

The reduce ({…spread}) anti-pattern
https://www.richsnapp.com/blog/2019/06-09-reduce-spread-anti-pattern
reduce …spread belongs to a different complexity class than the optimal solutions, which is bad. javascript engines will probably never optimize this code. if you’re using reduce …spread for reasons of immutability, you should copy once or use immutable helper libraries.

Observable’s not JavaScript
https://observablehq.com/@observablehq/observables-not-javascript
At first glance, Observable appears to be vanilla JavaScript. This is intentional: by building on the native language of the web, Observable is more familiar and you can use the libraries you know and love, such as D3, Three, and TensorFlow. Yet for dataflow, Observable needed to change JavaScript in a few ways.

Software below the poverty line
https://staltz.com/software-below-the-poverty-line.html
I decided to collect data from OpenCollective and GitHub, and take a more scientific sample of the situation. The results I found were shocking: there were two clearly sustainable open source projects, but the majority (more than 80%) of projects that we usually consider sustainable are actually receiving income below industry standards or even below the poverty threshold.

Five Things You Can Do with Serverless
https://channel9.msdn.com/Shows/5-Things/Five-Things-You-Can-Do-with-Serverless
Serverless is like CrossFit: The first rule is to never stop talking about it. In this episode, Eduardo Laureano from the Azure Functions team brings you five things you can do with Serverless that you might not realize are even possible. Also, Burke wears a sweater vest and Eduardo insinuates that there is a better candy than Goo Goo Clusters. The nerve.

RSocket: Solving Real-World Architectural Challenges
https://www.infoq.com/presentations/rsocket-cloud-native/
Ondrej Lehecka of Facebook, Robert Roeser of Netifi, and Andy Shi of Alibaba explain the use cases for RSocket within their companies, as well as how it can be used by enterprises to simplify the way they build and operate cloud-native applications.

You (probably) don’t need ReCAPTCHA
https://kevv.net/you-probably-dont-need-recaptcha/
Google’s ReCAPTCHA is often the first tool that many webmasters reach for when confronted with the need to stop spam and automated malicious traffic from harming their services. In this post I explain several reasons why ReCAPTCHA is usually not the best solution to use for this purpose, as it is often unnecessary, inconveniences users, and subjects users to intensive tracking and fingerprinting that they are not able to opt-out of. Several alternative solutions to ReCAPTCHA for various threat models are presented as well as best practices for implementing captchas in general.

Lerner — using RL agents for test case scheduling
https://medium.com/netflix-techblog/lerner-using-rl-agents-for-test-case-scheduling-3e0686211198
The Partner Device Ecosystem organization in Netflix is responsible for ensuring successful integration and testing of the Netflix application on all partner devices. Netflix engineers run a series of tests and benchmarks to validate the device across multiple dimensions including compatibility of the device with the Netflix SDK, device performance, audio-video playback quality, license handling, encryption and security. All this leads to a plethora of test cases, most of them automated, that need to be executed to validate the functionality of a device running Netflix.

From Jupyter Notebook to Fully Scalable Model—Now a Reality
https://blog.algorithmia.com/from-jupyter-notebook-to-fully-scalable-model-now-a-reality/
When we work in Jupyter Notebook—an open-source project tool used for creating and sharing documents that contain live code snippets, visualizations, and markdown text—we are reminded how easy it is to use our API to deploy a machine learning model from within a notebook.

The Wolfram Function Repository: Launching an Open Platform for Extending the Wolfram Language
https://blog.stephenwolfram.com/2019/06/the-wolfram-function-repository-launching-an-open-platform-for-extending-the-wolfram-language/
The Wolfram Function Repository is something that’s made possible by the unique nature of the Wolfram Language as not just a programming language, but a full-scale computational language. In a traditional programming language, adding significant new functionality typically involves building whole libraries, which may or may not work together.

A bird’s eye view of Go
https://blog.merovius.de/2019/06/12/birdseye-go.html
I provide a very high-level overview of what Go-the-language means vs. Go-the-ecosystem vs. Go-an-implementation. I also try to provide specific references to what documentation is most useful for what purpose. See the bottom-most section for that. 另附：GoJay.

新鲜货

Practical Deep Learning for Coders, v3
https://course.fast.ai/index.html
This site covers the new 2019 deep learning course. 另附：MATLAB–Python–Julia cheatsheet.

Desktop Neo - Rethinking the desktop interface for productivity
https://desktopneo.com/
The desktop computer hasn’t changed much in the last 30 years. It’s still built on windows, folders and mouse input. But we have changed. We now use smartphones and tablets most of the time, since they are much easier to use. The traditional desktop computer is struggling to adapt the simple interfaces of mobile devices while also keeping its focus on productivity. With people switching to mobile devices for mundane tasks, we have the opportunity to rethink the desktop computer with a focus on getting professional work done.

Introducing Matrix 1.0 and the Matrix.org Foundation
https://matrix.org/blog/2019/06/11/introducing-matrix-1-0-and-the-matrix-org-foundation
Matrix is an open source project that publishes the Matrix open standard for secure, decentralised, real-time communication, and its Apache licensed reference implementations. Maintained by the non-profit Matrix.org Foundation, we aim to create an open platform which is as independent, vibrant and evolving as the Web itself… but for communication. 另附：IPFS, Again.

Introducing the new HTML element - welcome <clippy>!
https://shkspr.mobi/blog/2019/06/introducing-the-new-html-element-welcome/
Me and my colleagues at Microsoft have decided that the world needs more Clippy - the adorable animated paperclip. To help with that, we’re bringing a new feature to Edge 6.0. Web Developers can now use <clippy> to call up an animated virtual assistant.

Create 3D games with friends, no experience required
https://www.blog.google/technology/area-120/create-3d-games-friends-no-experience-required/
What if creating games could be as easy and fun as playing them? What if you could enter a virtual world with your friends and build a game together in real time? Our team within Area 120, Google’s workshop for experimental projects, took on this challenge. Our prototype is called Game Builder, and it is free on Steam for PC and Mac. 另附：Level Design Patterns in 2D Games.

Opera GX Gaming Browser
https://www.opera.com/zh-cn/gx#start
Opera GX is a special version of the Opera browser built specifically to complement gaming. The browser includes unique features to help you get the most out of both gaming and browsing.

What’s New in Nuxt JS 2.8.0
https://blog.bitsrc.io/whats-new-in-nuxt-js-2-8-0-4e2d793d90c0
All the good-to-know new features in version 2.8.0 of Nuxt JS, with examples.

CKEditor 5 v12.2.0 with mobile-friendly comments mode
https://ckeditor.com/blog/CKEditor-5-v12.2.0-with-mobile-friendly-comments-mode/
We are happy to announce the release of CKEditor 5 v12.2.0. This time we focused on bug fixes and improvements to existing rich-text editor features. We also worked on the contextual balloon functionality in order to provide inline annotations for comments and suggestions as well as a mechanism to easily navigate between the balloons.

react-redux 7.1 Released: It Now Supports Hooks
https://github.com/reduxjs/react-redux/releases/tag/v7.1.0
After much discussion, we’ve decided these Hook things are probably going to stick around, so we might as well add some. 另附：React DnD: Utilities to Create Drag and Drop Interfaces support hooks

React Images
https://github.com/sindresorhus/awesome-nodejs
A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS.

React Hot Loader 4.11.0
https://github.com/gaearon/react-hot-loader/releases/tag/v4.11.0
Tweak React Components in Real Time.

chessboard.js
https://github.com/oakmac/chessboardjs
chessboard.js is a JavaScript chessboard component.

urql v1.1.0 – Server-side Rendering Support!
https://github.com/FormidableLabs/urql/releases/tag/v1.1.0
A highly customizable and versatile GraphQL client for React.

readme-md-generator
https://github.com/kefranabg/readme-md-generator
CLI that generates beautiful README.md files.

VuePress 1.x
https://v1.vuepress.vuejs.org/
Vue-powered Static Site Generator.

Pika
https://www.pika.dev/
Pika’s mission is to make modern JavaScript more accessible by making it easier to find, publish, install, and use modern packages on npm. The Pika CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax. This module syntax runs natively in the browser, so you can build for the web without a bundler.

List of (Advanced) JavaScript Questions
https://github.com/lydiahallie/javascript-questions
A long list of (advanced) JavaScript questions, and their explanations.

Awesome Node
https://github.com/sindresorhus/awesome-nodejs
Delightful Node.js packages and resources.

Lightweight Charts
https://github.com/tradingview/lightweight-charts
Financial lightweight charts built with HTML5 canvas.

React-Leaflet
https://react-leaflet.js.org/
React-Leaflet provides an abstraction of Leaflet as React components. Leaflet is an open-source JavaScript library for mobile-friendly interactive maps.

cube.js Open Source Analytics Framework
https://cube.dev/
A complete open source analytics solution: visualization agnostic frontend SDKs and API backed by analytical server infrastructure.

Luna – A WYSIWYG language for data processing
https://www.luna-lang.org/
Luna is also a powerful data flow modeling whiteboard, allowing you to literally draw components and the way data flows between them. However, instead of being hard coded, components in Luna are simply nested data flow graphs. You can enter into any component or into its subcomponents to move seamlessly from high through to low levels of abstraction at will. You can move all the way down, from a painting canvas to its underlying bitwise operations.

设计

Meet the new Dropbox
https://blog.dropbox.com/topics/product-tips/new-dropbox
We’re unveiling the new Dropbox. It’s the Dropbox you know and love, but better. It’s a single workspace to organize your content, connect your tools, and bring everyone together, wherever you are. The first thing you’ll notice is an all-new Dropbox desktop app that we’re introducing today through our early access program. It’s more than an app, though—it’s a completely new experience.

A Content Strategist’s Guide to Using Tone in Products
https://medium.com/facebook-design/a-content-strategists-guide-to-using-tone-in-products-bae168b6534c
What you say matters, and how you say it can make all the difference.

A Recipe for Designing Animations—Without Sacrificing Performance
https://medium.com/google-design/a-streamlined-workflow-for-performative-animations-be0a6ff3df7a
For a redesign of the Google Chrome homepage, I took on the challenge of producing high-quality animations without contributing to latency。

QQ8.0有生机的设计
https://mp.weixin.qq.com/s?__biz=MjM5NzQxMDkwMg==&mid=2655408655&idx=1&sn=6f7f0130ccbc7876aab461b5a8c4f5d5
用户的核心行为场景早已迁移到移动平台，随着年轻用户在互联网的影响力逐步提升，QQ有意加大“娱乐化”属性在产品功能，设计体验上的比重。既有火爆一时的“坦白说”，年轻用户“处Q友”的“QQ扩列”，宣泄情感的“轻互动”，也有融合前沿技术体验的“QQ红包”、“AR穿越”等狂欢活动。为了吸引年轻用户的眼光，不断刷新更酷炫的体验，升级更大规模的活动占据了版本规划的大部分内容。另附：腾讯设计团队在儿童节打造的这款行李箱，回头率超高、沉浸式新媒体 .

产品及其它

Always Own Your Platform
http://www.alwaysownyourplatform.com/
The original dream of the web is dying. Facebook, Google, Twitter, Medium, and YouTube entice us to give them our creative work. They control what gets amplified and what gets monetized. A few conference rooms in Silicon Valley dictate our online culture. It’s time to take it back.

How to Be Great? Just Be Good, Repeatably
https://blog.stephsmith.io/how-to-be-great/
Over the years, we’ve all encountered our fair share of successes and failures. As I’ve acquired more of both under my name, I’ve started to contemplate which experiences were truly “great” and why.

隐形天花板
https://mp.weixin.qq.com/s?__biz=MzIwNzYxNDQ1Mg==&mid=2247484902&idx=1&sn=18d936e128a34747d589dff13ed5b10a
本文作者Eugene Wei是亚马逊战略部门的首位分析师。他认为，战略规划中最重要的就是提前找到并消灭所谓的隐形天花板。本文分析了亚马逊，Facebook，Snapchat，Instagram, Twitter等巨头的天花板与化解之道。详尽缜密，值得深思。原本最核心的优势，到某个节点上却变成了最大的阻碍。有些受限于产品本身，有些却输给了时代。消灭一个天花板，解锁新一轮增长。永远有下一个天花板，但强者永不止步……附：打破天花板的绝佳案例 - 微软，夺回王位

2019互联网女皇报告（中文版）
https://mp.weixin.qq.com/s/cuhIZUmHBjIC8HChoXNPBQ
互联网人口红利持续衰减；非洲、中东或是“新大陆”；电商增幅放缓，但仍侵蚀实体零售份额… 另附：艾瑞：2019年中国企业级SaaS行业研究报告.

Google Maps的故事
https://mp.weixin.qq.com/s?__biz=MzA3MDMwOTcwMg==&mid=2650006958&idx=1&sn=7f91d56c1ae69bb17b75fdad6ccfaf8a
去年，我读完了Bill Kilday回忆Google Maps前世今生的《Never Lost Again》，觉得这本书相比各种“精益创业”的教材毫不逊色，而且更引人入胜。说它好看，主要是因为真实。正是因为这本书好看，又没有中文版，所以当时我写了一系列“Google Maps的故事”，许多读者反馈还算不错。今天，中信出版社已经出版了《Never Lost Again》的中文版《谷歌方法》。 另附：谷歌能做出10亿月活的产品，不是爆款网文教的

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-06-17·几何原本、Time Curve、皇氏星图、高维数据可视化