FEX 技术周刊 - 2020/04/13

深阅读

The JavaScript Framework That Puts Web Pages on a Diet
https://www.wired.com/story/javascript-framework-puts-web-pages-diet/
Svelte, created by a graphics editor for The New York Times, has attracted a following among programmers who want their pages to load faster. 另附：The Svelte Compiler Handbook.

A practical guide to writing technical specs
https://stackoverflow.blog/2020/04/06/a-practical-guide-to-writing-technical-specs/
Writing a technical spec increases the chances of having a successful project, service, or feature that all stakeholders involved are satisfied with. It decreases the chances of something going horribly wrong during implementation and even after you’ve launched your product.

What are your favorite low-coding apps / tools as a developer?
https://news.ycombinator.com/item?id=22786853
Since low-coding is super trendy these days, I was wondering if there are actually useful apps not only for non-devs but also for lazy-devs? I tried couple of no-code apps, but found them inflexible –not really giving you the opportunity to dive-in and customize.

Ant Design 开源项目经验分享，你想知道的都在这儿了
https://mp.weixin.qq.com/s/qpZB9tPiLrHIbJnwi-8KKg
Ant Design 在 2015 年 5 月 7 日第一次提交代码，全部提交和讨论都在 GitHub 进行，无内网版本，是一个完全开源的前端项目。本文基于 Ant Design 多年来的项目运作，与大家交流开源项目的运作经验，主要内容围绕项目文档、网站、代码规范和风格、单元测试、发布规范、开源项目运营等几大方面，为大家提供实用的指引。另附：Useful Tips for a Successful Open-Source Project.

前端智能化：人机协同的编程方式
https://www.yuque.com/zhenzishadow/tx7xtl/xhol3k
在imgcook.com发布之后，我们在掘金、知乎、微信朋友圈和公众号发表了很多文章，收获最多的反馈是：前端要失业了。按照现在的趋势来看，对P5左右前端工程师的需求将大幅度降低。imgcook.com 官网底部有统计，从数据分析智能生成UI和逻辑代码的情况，imgcook 已经可以替代P5前端工程师完成工作的80%。无论趋势还是数据，都能看到传统前端低技术价值、高重复的工作正走向消亡。

Electron 在 Taro IDE 的开发实践
https://aotu.io/notes/2020/04/07/electron-in-taro-ide/index.html
Taro IDE 是一款我们正在精心打造的一站式移动端研发工作台。除了需要实现 Taro 从创建项目到预览、编译的全部能力，还需要打通用户测试、调试、监控等一系列流程。为了提升开发体验，仅仅一个命令行工具是远远不够的，我们需要开发一款桌面客户端，并同时提供 Windows、MacOS 等不同系统的版本。

探索 webpack5 新特性 Module federation 在腾讯文档的应用
http://www.alloyteam.com/2020/04/14338/
webpack5 的令人激动的新特性 Module federation 可能并不会让很多开发者激动，但是对于深受多应用伤害的腾讯文档来说，却是着实让人眼前一亮，这篇文章就带你了解腾讯文档的困境以及 Module federation 可以如何帮助我们走出这个困境。

React Folder Structure in 5 Steps
https://www.robinwieruch.de/react-folder-structure
How to structure large React apps into folders and files is a highly opinionated topic. I struggled for a while writing about this subject, because there is no right way to do it. However, every other week people ask me about how I structure my React projects. Not only about folder structures for small React projects, but more importantly about scalable React applications. After implementing React applications for a few years now, I want to give you a breakdown on how I approach this matter for my personal projects, for my client’s projects, and for my React workshops. It only takes 5 steps, and you decide what makes sense to you and how far you want to push it. So let’s get started.

Tips for Writing Animation Code Efficiently
https://css-tricks.com/tips-for-writing-animation-code-efficiently/
I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!

Rapid, enterprise-class development with UmiJS
https://blog.logrocket.com/rapid-enterprise-class-development-umijs/
Umi provides out-of-the-box tools and plugins to aid rapid development of scalable applications. Coupled with its server-side implementation of routing and content delivery, Umi makes for a really attractive tool for frontend development.

Building dark mode on Stack Overflow
https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/
The work I’m about to talk about was never about dark mode specifically, even though countless users asked for it. By solving everything along the way to dark mode, Stack Overflow would modernize its front-end codebase, enable accessibility-conscious theming, and push for adoption of our design system. We could give our users dark mode and offer future accessibility modes for free?

From 48k lines of code to 10—the story of GitHub’s JavaScript SDK
https://github.blog/2020-04-09-from-48k-lines-of-code-to-10-the-story-of-githubs-javascript-sdk/
@octokit/rest wasn’t originally created by GitHub. Instead, @bkeepers decided to adopt the package that was the most popular back in 2017: github. In this post, we’ll cover the story of @octokit/rest—the official JavaScript SDK for GitHub’s REST APIs. 另附：GitHub Protips: Tips, tricks, hacks, and secrets from Lee Reilly, Celebrating 15 years of Git: An interview with Git maintainer Junio Hamano.

Understanding (all) JavaScript module formats and tools
https://weblogs.asp.net/dixin/understanding-all-javascript-module-formats-and-tools
JavaScript language was initially invented for simple form manipulation, with no built-in features like module or namespace. In years, tons of terms, patterns, libraries, syntax, and tools are invented to modularize JavaScript. This article discusses all mainstream module systems, formats, libraries, and tools in JavaScript.

Why you should stop using Google Analytics on your website
https://plausible.io/blog/remove-google-analytics
More recently my thinking about this has changed. Using Google Analytics is a habit website owners, bloggers and web developers should try to stop. Here’s a look at why you should remove Google Analytics from your website and help create a more open, independent web that’s more friendly to the visitors.

Working With PDFs in Node.js Using pdf-lib
http://thecodebarbarian.com/working-with-pdfs-in-node-js.html
The pdf-lib npm module is a great tool for creating and editting PDFs with Node.js. Puppeteer is a great tool for generating PDFs from HTML, but unfortunately browser support for print layouts in CSS is not very good in my experience. The pdf-lib module gives you very fine grained control over PDFs, and is great for tasks like merging PDFs, adding page numbers and watermarks, splitting PDFs, and basically anything else you might use the ILovePDF API for.

LEGO.com - Accelerating with Serverless!
https://medium.com/lego-engineering/accelerating-with-serverless-625da076964b
To set the context to what we are going to discuss here, LEGO.com was migrated to serverless from a typical legacy monolith ecommerce platform in July 2019. It was a fast paced 10 months journey and serverless made this migration a success. The implementation included many microservices and over 100 lambda functions in addition to many other AWS services.

On ‘Good Enough’ Architecture
https://www.youtube.com/watch?v=PzEox3szeRc
A 40 minute talk on software architecture looking at situations where architecture was too elaborate or too simple and how we can learn to hit the ‘sweet spot’ for our own projects. As one commenter says: “One of the best talks I heard about the important balance between centralization and autonomy in the age of DevOps and microservices.

TiDB 4.0 - A Peek into the Future of Database: A Unified Infrastructure to Adapt Intelligently
https://pingcap.com/blog/future-of-database-unified-infrastructure-to-adapt-intelligently/
The future of the database is about unification, adaptiveness, and intelligence. I believe when we face the uncertainties and the unpredictables in the future, we will have the unified infrastructure to adapt intelligently.

Data Science: Reality Doesn’t Meet Expectations
https://dfrieds.com/articles/data-science-reality-vs-expectations.html
Over the past few years, I’ve worked as a Data Scientist, a Data Engineer, and as an industry consultant. I’ve also learned from the stories of dozens of data scientists and similar professions, actively read articles on data science and followed data science thought leaders on Twitter. Across these diverse data experiences, I have noticed common themes. Below are seven most common (and at times flagrant) ways that data science has failed to meet expectations in industry. Throughout each section, I’ll propose solutions to these shortcomings.

Dataviz and the 20th Anniversary of R, an Interview With Hadley Wickham
https://medium.com/nightingale/dataviz-and-the-20th-anniversary-of-r-an-interview-with-hadley-wickham-ea245078fc8a
Catching up with the creator of ggplot and tidyr about community, Tidyverse, and what’s in store for R over the next 20 years

Pros and Cons of Rust and Go
https://dmv.myhatchpad.com/insight/choosing-between-rust-or-go/
One expert’s take on the Pros, Cons, and Controversies of each language. 另附：Iced - A cross-platform GUI library for Rust, inspired by Elm, Rust vs. Go and What Makes Live-Coding So Compelling.

Reimagining ReadMe’s Markdown Engine
https://blog.readme.com/readme-flavored-markdown/
The result of this work is our ReadMe-flavored syntax extension and a brand spanking new Markdown engine to go with it! Let’s look a bit deeper at how this works in practice, and why it’s so useful. Say we had some docs we were syncing to ReadMe from our repo. In one of them, we might want to display a set of tabbed code blocks. Sure, we could handwrite the magic block, but honestly even I wouldn’t know how to do that off the top of my head! Let’s take the lazy route, and rip the generated source code for this component directly out of ReadMe’s raw editor. 另附：6 Things Markdown Got Wrong.

新鲜货

New Google SRE book: Building Secure and Reliable Systems
https://landing.google.com/sre/books/
Can a system be considered truly reliable if it isn’t fundamentally secure? Or can it be considered secure if it’s unreliable? Security is crucial to the design and operation of scalable systems in production, as it plays an important part in product quality, performance, and availability. In this book, experts from Google share best practices to help your organization design scalable and reliable systems that are fundamentally secure.

Qt Roadmap for 2020
https://www.qt.io/blog/qt-roadmap-for-2020
2020 will be an exciting year for Qt, as we have so many great things shaping up to be released. The baseline is Qt 5.15 LTS coming in May with pre-releases already available. A lot of new functionality for increased productivity is coming for our tools for both designers and developers. With Qt for MCU we can address a whole new range of target devices. On top of it all, we have the next major release of Qt – Qt 6 – coming at the end of the year.

jQuery 3.5.0 Released!
http://blog.jquery.com/2020/04/10/jquery-3-5-0-released/
The main change in this release is a security fix, and it’s possible you will need to change your own code to adapt. With what we call “positional selectors” being deprecated and slated for removal in jQuery 4.0, we’ve added the last two necessary replacement methods.

Some of What’s Coming in Vue 3
https://alligator.io/vuejs/whats-coming-in-vue-3/
A summary of features in the next major release of Vue, still upcoming.

Playwright
https://github.com/microsoft/playwright
Playwright is a Node library to automate the Chromium, WebKit and Firefox browsers with a single API. It enables cross-browser web automation that is ever-green, capable, reliable and fast.

这个程序员写的免费在线 PS，让他三十岁前财务自由
https://zhuanlan.zhihu.com/p/70636726
家住捷克的伊万·库茨基尔 (Ivan Kutskir) 是个 90 后自由职业程序员。虽然伊万从来没有公司的正式工作，但这不是因为他太菜了，而是因为他太强了：他就读于捷克最好的大学。自学生时代起，他就靠着自己的编程天赋挣零花钱养活自己。他每月只需工作大约 20 小时，就能赚够一个月 300 美元的生活费——这大致已经相当于国内不加班月薪三万的水平。这样的自由生活给了他极大的空间做自己喜欢的事。在这期间，他写了许多试验性的个人项目，从 Flash 小游戏到 3D 模型渲染工具等等不一而足。这之中一个名叫 Photopea 的图片编辑器项目，让今天的他过上了每月被动收入上万美元的「财务自由」生活。

Preact 10.4
https://github.com/preactjs/preact/releases/tag/10.4.0
This release contains some very amazing improvements to hydration and to performance when memoized vnodes are used.

ReactAdmin
https://marmelab.com/react-admin/
A Web Framework for B2B applications.

React Trello
https://github.com/rcdexta/react-trello
Pluggable components to add a Trello (like) kanban board to your application

MVP.css - Minimalist stylesheet for HTML elements
https://andybrewer.github.io/mvp/
No class names, no frameworks, just semantic HTML and you’re done.

Franc
https://github.com/wooorm/franc
Natural language detection.

node-notifier
https://github.com/mikaelbr/node-notifier
Send cross platform native notifications using Node.js. Notification Center for macOS, notify-osd/libnotify-bin for Linux, Toasters for Windows 8/10, or taskbar balloons for earlier Windows versions. Growl is used if none of these requirements are met. Works well with Electron.

Quakejs.com
http://www.quakejs.com/
QuakeJS is a port of ioquake3 to JavaScript with the help of Emscripten. This project started to demonstrate the feasibility of browser-based gaming, and what better way than with a classic game whose core gameplay revolves around the kind of responsive APIs that are available with HTML5 today.

markmap-lib - markdown + mindmap + library
https://markmap.js.org/ Markmap is a combination of Markdown syntax and mindmap. It is first implemented by markmap. markmap-lib is a reimplementation of markmap, with some additional features. Mark it up! Visualize your Markdown with mindmaps.

FreeRDP: A Remote Desktop Protocol Implementation
https://www.freerdp.com/
FreeRDP is a free implementation of the Remote Desktop Protocol (RDP), released under the Apache license. Enjoy the freedom of using your software wherever you want, the way you want it, in a world where interoperability can finally liberate your computing experience.

Rclone
https://github.com/rclone/rclone
Rclone (“rsync for cloud storage”) is a command line program to sync files and directories to and from different cloud storage providers.

Open Source Virtual Background
https://elder.dev/posts/open-source-virtual-background/
Unfortunately, Zoom’s linux client only supports the “chroma-key” A.K.A. “green screen” background removal method. This method requires a solid color backdrop, ideally a green screen with uniform lighting. Since I do not have a green screen I decided to simply implement my own background removal, which was obviously better than cleaning my apartment or just using my laptop all the time. It turns out we can actually get pretty decent results with off the shelf, open source components and just a little of our own code.

This Video Has X Views
https://www.youtube.com/watch?v=BxV14h0kFs0
The title of this video should change with the times. But nothing lasts forever: here’s the story of how I made it work, why it used to be easier to make that work, and how it all ties in to the White Cliffs of Dover and the end of the universe.

Codeberg.org: A Free, Non-Commercial GitHub Alternative
https://codeberg.org/
It’s built on top of Gitea, a Go-powered self-hosted Git service.

WhyTheName
https://wiki.debian.org/WhyTheName
An IT-etymology/linuxguistics page for people wondering “how come the package yasysmand-cling has such a strange name?” Giving cryptic names to software is a well-established UNIX tradition, and the explanations are often missing from the documentation, either because the developers imagine it’s obvious (usually wrongly) or because they think nobody cares (and here they’re usually right, or it would turn up as FAQ material).

设计

编辑器设计系列｜每天都在用，你真的了解它么？
https://www.yuque.com/elevenyang/tvy47l/qdugkw
提起编辑器，你会想到什么？也许你从来没有意识到，但是从接触计算机开始，你就和各种编辑器打上了交道。Windows 98 中的画图软件也许是你的启蒙。计算机课上当你敲下第一个五彩斑斓的字，作出第一张会动的幻灯片，画出第一个图表，Office 三件套开启了一扇新的大门。再后来，你学会了用记事本写下第一行 if…else…， 但始终没能学会怎么用 PS 修图，不过幸好很快学会了用美图秀秀。现在的你，可能在各行各业，你的电脑上装满各种专业软件，每天一打开它们，可能一天就过去了。你依赖着这些专业软件完成工作赚钱养家，如果哪天它们不小心崩了，丢失了辛苦一天的成果，你大概可以问候遍所有它的亲戚。百年以前，人们的生产工具还都是实实在在看得见摸得着的物品。可现在，就在一方小屏幕中，通过各种各样的虚拟工具，尤其是其中的编辑器，你的生产力得到了翻天覆地的提升。生产力工具的好用与否，直接关系到每个人的工作和生活。这，就是编辑器设计的意义所在。

设计师要懂的微文案设计
https://mp.weixin.qq.com/s/AVyUQb-hjqQKong-dn9aUg
“微文案”这个概念其实在国内是没有官方的称呼，它是由Microcopy直译过来的。Micro - 微小的，Copy - 文本，所以合并润色后即为“微文案”。微文案简单理解就是App页面中，帮助用户更好的理解服务以及辅助他们作出抉择的文案。例如：错误提示文案，按钮文案，点击触发器，弹窗文案等等，都属于微文案的范畴。可以这样理解，除了和产品直接相关的文案（例如产品名称，产品介绍，产品价格等等），其他在页面中出现的文案都可以属于微文案设计的一部分。

Office 改版背后，藏着的这套超全面的宝藏设计系统
https://www.uisdc.com/fluent-design-system
如果你是 Windows 10 系统的用户，那么最近应该会注意到 Windows 系统的图标正在逐步地被替换，升级，（在忽略广大国内全家桶软件影响的情况下）Windows 10 正在随着 Fluent Design 的注入而正在变得越来越优雅。

Everyday Color Theory
https://medium.com/google-design/everyday-color-theory-59c1ca0770cb
A poetic crash course on the history of color.

How People Read Online: New and Old Findings
https://www.nngroup.com/articles/how-people-read-online/
Summary: Looking back at findings from a series of eyetracking studies over 13 years, we see that fundamental scanning behaviors remain constant, even as designs change.

产品及其它

Good Product Managers, Great Product Managers
https://threader.app/thread/1249039638829793280
How to properly manage a product roadmap https://news.ycombinator.com/item?id=22827275
There are Good Product Managers and there are Great Product Managers. There are also Okay Product Managers and Bad Product Managers, but we will focus on the Good and the Great here.

英国全能数学家John Conway因新冠去世，他曾发明风靡一个时代的电脑游戏，还能心算万年历
https://mp.weixin.qq.com/s?__biz=MzIzNjc1NzUzMw==&mid=2247540018&idx=1&sn=13e41619f7e3e0a320b6df8e9e6c7e9f
当代最有趣的数学家John Horton Conway，因为新冠肺炎逝世了，享年82岁。有人评价他，世界上可能有比他更厉害的数学家，但是在顶尖的数学家里，没有人能比他科普做得更好。他在数学领域多点开花，是一个在组合博弈论、几何、数论、群论、算法甚至量子力学理论等多个方面都做出贡献的天才数学家。他发明的一款生命游戏，在上世纪70年代占据了1/4的计算机，成为那时极客的最爱。他还算出在24维空间的球迷密堆积中，每个球体都和196560个球体接触。

万字长文实录：消费者变了！
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247516976&idx=1&sn=5a38a1f52be133e409a20ceb4de3de04
这个世界上只有两种产品：解决问题的和创造独特体验的，如果你的产品两种都不是，那要赶紧想办法再创业和找工作了。产品和服务的边界越来越模糊，产品即服务，按需订阅，这是大的产品革新方向。我们的产品需要升级，升级的动力来自于消费者全新的购买标准和偏好。Z世代买东西有全新的标准，比如我吃马卡龙是因为颜色好，我使用这个手机是因为科技感。工艺、审美和包装，构成了产品升级换代的核心动力。产品的升级，最终导致平均单价升高。学习营销只学习一个月，而实践和优化营销，是一辈子的事。在这个过程中，希望大家坚守价值观，善良是我们唯一常胜不败的价值投资。

陆奇万字演讲：通讯、娱乐和 B 端获客是产业创新三大机会
https://mp.weixin.qq.com/s/Fov9tYoAZK3EkmJnFwwzNQ
目前我们经历的AI+边缘计算+5G通讯技术的阶段，不再使用手指录入信息，而是使用传感器；不再使用显示器输出信息，而是采用深度学习来完成自动化过程。因此这一次数字化的广度和深度都将非常巨大。要抓住这一波机会，陆奇认为在C端，娱乐、通讯、社交都是关注重点。B端的根本需求是降低成本、提高产出，大B的主要需求是信息化的大量应用，小B的主要需求是获客。任何一个技术启动的企业分种子期、早期、成长期、成熟期。一个早期创业公司只有两件事，找到市场匹配的产品、活下去，别的什么都不重要。 对于C端产品，核心是用户，流程是关键，另外是获客和变现，增长模式必须要有裂变。只有把这四个核心要素协调好，快速迭代才能跑通一个模式。在B端，产品上的客户满意度是关键，销售上一定要找到可行的消费模式，保证高的毛利。最重要的是要保持盈利模式，是要全方位的产品和业务一起开发，快速迭代。比较好的例子是Zoom，为什么它到40分钟开始收费，就是不断迭代和测试出来的。另外，在早期一定要活下去。任何一家公司的收入不到一定阶段，没法养活自己。

陈春花：协同管理的挑战不在技能，在于心性
https://mp.weixin.qq.com/s/edT8eb_OLg657yoP5-xpIA
以前很多人认为数字化是一部分企业、一部分领域需要的技术能力，还有一些行业和领域不着急应用数字化，但这次非常特殊的疫情危机让我们突然明白，在线化、数字化是个必选项，会对每一个组织管理行为和组织效率带来很大的变化。面向未来，领导者一定要做出正确的决定：致力于消除复杂性、创新客户体验；致力于系统整体效率、成为伙伴。所以最有效的管理者是不断重新审视自己的信仰，不是关心自己是不是正确，而是如何服务于公司业务、服务于公司客户。坦白讲在数字化进程中，我被很多人问到底有什么方法、到底有什么技术能解决。我研究到最后发现，对于管理者来讲，最大的挑战不是技能而是心性的问题。你要真心愿意去理解、帮助别人，去利他、欣赏、接受，你才真正能够获得系统整体最大效率，这也是数字化对管理者的基本要求。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2020-04-12 · G6 中的样式定义及状态管理、what is a bar chart、Where Innovation Happens、Breaking the wave、How to Lie With Maps

– THE END –