FEX 技术周刊 - 2020/03/16

深阅读

GitLab’s Guide to All-Remote
https://about.gitlab.com/company/culture/all-remote/guide/
GitLab is the world’s largest all-remote company with over 1,200 team members located in more than 65 countries around the world. On this page and subpages, we’ll share what “all-remote” really means, how it works at GitLab, some tips and tricks for remote teams, and resources to learn more.

How Websites Evolved Back to Static HTML/CSS/JS Files
https://paramaggarwal.substack.com/p/how-websites-evolved-back-to-static-html-css-js-files-57ce549f81db
https://news.ycombinator.com/item?id=22519090
I find it fascinating that we are back to generating separate HTML/CSS and JS files and then putting them on a static file server — the CDN. It has been a decade long effort and as we come back to where we started, I feel like we are at a whole another level (a spiral?). At the end of the day, the output remains the same, but we have much more sophisticated tooling similar to many other things in life. Imagine the complexity involved in converting your voice into bits and transmitting it over a combination of wires and air spectrum to reach the other person contrary to the past where we would just travel and meet people. Over time the outcome remains the same, but by introducing complexity and then effectively abstracting it away, we are able to accomplish things indistinguisable from magic.

Why Svelte is our choice for a large web project in 2020
https://github.com/feltcoop/why-svelte
Svelte is a JavaScript framework for building user interfaces. Its compiler architecture enables amazing tradeoffs for UX and DX. Svelte might be worth your attention, especially if you pine for the web of yore and future.

We made SQL visual - why and how
https://chartio.com/blog/why-we-made-sql-visual-and-how-we-finally-did-it/
we’re excited to announce that we have—through thousands of design iterations, dozens of functioning prototypes, several hundred user tests, and countless hours of development—created an interface that truly enables the business user to work with data. We call the interface Visual SQL.

Ready for changes with Hexagonal Architecture
https://netflixtechblog.com/ready-for-changes-with-hexagonal-architecture-b315ec967749
We needed to support the ability to swap data sources without impacting business logic, so we knew we needed to keep them decoupled. We decided to build our app based on principles behind Hexagonal Architecture. The idea of Hexagonal Architecture is to put inputs and outputs at the edges of our design. Business logic should not depend on whether we expose a REST or a GraphQL API, and it should not depend on where we get data from — a database, a microservice API exposed via gRPC or REST, or just a simple CSV file. The best part of Hexagonal Architecture is that it keeps our application flexible for future requirements to come.

前端页面仔的祖传技术 JS 终于有史书了
https://zhuanlan.zhihu.com/p/113079856
我说的是真正的史学……屌炸天的 190 页 JS 历史论文： JavaScript: The First 20 Years ，这篇论文属于即将在 6 月召开的第四届『编程语言历史大会』（HOPL），这个活动每隔十几年才举办一次。

有赞零售中台建设方法的探索与实践
https://tech.youzan.com/zhong-tai-jian-she-fang-fa/
有赞的技术博客这周分享了大量实践成果，这是其中一篇。有赞零售SaaS业务整体业务架构概览，大体上可以分为前台业务、中台业务、后台业务。前台业务主要是面向前端消费者，包含全渠道销售、各业务单元的商品、订单、会员、营销、进销存、智能导购等业务。前台业务的特点是变化快、差异性大；细节性体验、综合性体验；跨平台、多触点。中台业务承担承上启下、数据打通、业务单元协同的职责。后台业务主要是面向企业的业务，包括企业内部成熟、稳定的业务，例如生产制造、供应链管理、财务总账等。

Ant Design核心作者谈4.0版本更新背后的故事
https://juejin.im/post/5e68c3bb6fb9a07cba0ef93e
Ant Design 是蚂蚁金服推出的一套企业级 UI 设计语言和 React 组件库，从 2015 年推出开始便受到广泛的关注与使用，目前在 GitHub 上已收获超过 5.7 万个 star。近日，Ant Design 发布了 4.0 版本，带来了一些重大更新。前端之巅采访了 Ant Design 团队的核心作者之一的蒋吉麟，聊了聊 4.0 版本更新背后的一些故事。

JDRD开发小结
https://aotu.io/notes/2020/02/21/jdrd-summary/index.html
经过一个月的时间，在我遇到了很多“这个我不会做啊？”，“这个到底怎么做“的问题后，它终于成功上线了！下面总结一下整整一个月的时间我是如何开发JDRD，遇到的各种问题以及解决方案。

你以为文言编程只是闹着玩？三个月后，人家IDE、教程、包管理器都有了
https://mp.weixin.qq.com/s/8HvF5GU9iWdvhiX-TlqjkA
用文言文写的官方编程教程《文言陰符》，类似 pip 那样的包管理工具「文淵閣」，还有文言编程开源 IDE「文言齋」，文言编程语言已经这么成熟了？

React Single File Components Are Here
https://www.swyx.io/writing/react-sfcs-here/
The launch of RedwoodJS today marks a first: it is the first time React components are being expressed in a single file format with explicit conventions. I first talked about this in relation to my post on React Distros, but I think React SFCs will reach standardization in the near future and it is worth discussing now as a standalone post.

BEM CSS in React
https://levelup.gitconnected.com/bem-css-in-react-e0d4a4721872
In this post, I aim to answer two questions: What is BEM? How should BEM be applied to styling React components? BEM is an acronym for Block Element Modifier. It’s not a framework or library. It is but a small piece of a larger CSS architecture puzzle. Specifically, BEM is a strict CSS selector naming convention that provides a valuable mental model for component composition.

How I made a 3D game in only 2KB of JavaScript
http://frankforce.com/?p=7427
Months ago, when I heard that the legendary JS1k game jam would not be continuing, I talked it over with some other devs and decided to help fill the void we would host a 2k game jam on itch called 2kPlus Jam. The primary goal of this comp was to create a game that fits entirely in a 2 kilobyte zip file. That is incredibly small, for point of reference a 3.5 floppy disk could hold over 700 of these games.

Choosing the Right Database for Your Applications
https://pingcap.com/success-stories/choosing-right-database-for-your-applications/
Shopee is the leading e-commerce platform in Southeast Asia and Taiwan. It is a platform tailored for the region, providing customers with an easy, secure, and fast online shopping experience through strong payment and logistical support. There are so many databases available in the market. How do you choose the right one? In this post, I’ll share our thoughts with you. I hope this post can help you when you’re comparing multiple databases and looking for the right fit for your application.

Defunctionalisation – an underappreciated tool for writing good software
https://www.gresearch.co.uk/article/defunctionalisation/
We have talked about “initial algebras” at some length; this post is to discuss defunctionalisation as a complementary technique. Defunctionalisation is a well-known technique among compiler writers, but I consider it to be under-appreciated as a tool for writing good software more generally. It pairs up particularly well with the “initial algebra” pattern.

The Life of a Data Byte
https://blog.jessfraz.com/post/the-life-of-a-data-byte/
In this issue we move from URLs to mere bytes. This is a fun trip through time of various storage technologies and how bits and bytes have formed our storage world.

Retail Graph — Walmart’s Product Knowledge Graph
https://medium.com/walmartlabs/retail-graph-walmarts-product-knowledge-graph-6ef7357963bc
At Walmart we are working on building a Retail Graph that captures the knowledge about product and its related entities to help our customers better discover products in our catalog. It’s a product knowledge graph that can answer questions about products and related knowledge in the retail context. Such a system can be used to power semantic search, recommendation system etc. This article further expounds on what is Retail Graph, how we built it, tech choices around graph model, db and some use cases.

新鲜货

Happy 31st birthday, World Wide Web!
https://www.w3.org/blog/2020/03/happy-31st-birthday-world-wide-web/
https://webfoundation.org/2020/03/web-birthday-31/
If you are part of our community, helping to develop technologies for the web with the Web Consortium, thank you. Let others know that the Web was made to work for everyone. Let your family and friends know why your work at the Web Consortium –to make a web for all– matters. Thank you again, Tim! Happy Birthday, World Wide Web! Let’s all keep doing our part to keep making the Web and the world better.

Announcing mobile first indexing for the whole web
https://webmasters.googleblog.com/2020/03/announcing-mobile-first-indexing-for.html
It’s been a few years now that Google started working on mobile-first indexing - Google’s crawling of the web using a smartphone Googlebot. From our analysis, most sites shown in search results are good to go for mobile-first indexing, and 70% of those shown in our search results have already shifted over. To simplify, we’ll be switching to mobile-first indexing for all websites starting September 2020. In the meantime, we’ll continue moving sites to mobile-first indexing when our systems recognize that they’re ready.

Announcing TensorFlow Quantum: An Open Source Library for Quantum Machine Learning
https://ai.googleblog.com/2020/03/announcing-tensorflow-quantum-open.html
we announce the release of TensorFlow Quantum (TFQ), an open-source library for the rapid prototyping of quantum ML models. TFQ provides the tools necessary for bringing the quantum computing and machine learning research communities together to control and model natural or artificial quantum systems; e.g. Noisy Intermediate Scale Quantum (NISQ) processors with ~50 - 100 qubits.

The (Ongoing) Node 14.0 Pull Request
https://github.com/nodejs/node/pull/32181
Wondering what’s going on with the road to Node 14? The cut off date for new features making it in is coming up later this month with the eventual release due in late April (and running V8 8.1). 另附：Delightful Node.js packages and resources.

Announcing Rust 1.42.0
https://blog.rust-lang.org/2020/03/12/Rust-1.42.html
The highlights of Rust 1.42.0 include: more useful panic messages when unwrapping, subslice patterns, the deprecation of Error::description, and more. See the detailed release notes to learn about other changes not covered by this post.

Memcached 1.6.0 Release
https://github.com/memcached/memcached/wiki/ReleaseNotes160
1.6.0 brings significant new features and fixes to memcached.

Search all projects for code or files
https://cs.opensource.google/

MIT moves all classes online for the rest of the semester
https://web.mit.edu/covid19/update-from-president-l-rafael-reif-to-the-mit-community/
http://teachremote.mit.edu/tools-tutorials
在线授课的阵营越来越强了，期待后续这些课程开放。

Twilio releases open source video conferencing apps for iOS, Android and web
https://www.twilio.com/blog/open-source-video-apps-reactjs-ios-android
we are excited to announce that we are open sourcing three video collaboration applications, one for iOS, one for Android, and a ReactJS one for the Web. Whether you are building a healthcare, education, or general video collaboration solution, these apps can accelerate development by providing you with a fully functioning video app that can be deployed to the cloud in minutes. In addition, they provide a canonical reference for developers building out their communication solutions by showcasing the Programmable Video capabilities.

Announcing PowerShell 7.0
https://devblogs.microsoft.com/powershell/announcing-powershell-7-0/
新生代 Windows 终端：Windows Terminal 的全面自定义 https://sspai.com/post/59380
For those unfamiliar, PowerShell 7 is the latest major update to PowerShell, a cross-platform (Windows, Linux, and macOS) automation tool and configuration framework optimized for dealing with structured data (e.g. JSON, CSV, XML, etc.), REST APIs, and object models. PowerShell includes a command-line shell, object-oriented scripting language, and a set of tools for executing scripts/cmdlets and managing modules.

RedwoodJS: Bringing Full-Stack to the JAMstack
https://redwoodjs.com/
A new, opinionated framework that combines React, GraphQL, Prisma2, and lots more out of the box. Notably it comes from Tom Preston-Werner, one of the original founders of GitHub and the creator of Gravatar.

React NodeGUI
https://github.com/nodegui/react-nodegui
React NodeGUI is powered by React ⚛️ and Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. React NodeGUI is essentially a React renderer for NodeGUI. 另附：Build a Native Desktop GIF Searcher App Using NodeGui.

react-calendar - v3.0
https://github.com/wojtekmaj/react-calendar/releases/tag/v3.0.0
Ultimate calendar for your React app.

React Table 7.0
https://github.com/tannerlinsley/react-table/releases/tag/v7.0.0
React Table v7 marks the culmination of over a years worth of work to refactor the entire library to a hooks-only UI/Style/Markup agnostic table building utility. This latest version is a collection of React hooks and plugins (which are also hooks!) that help you flexibly compose logical features of the most complex data grids into a single API returned by the primary useTable hook. This API is performant, extensible, and unopinionated about markup, styles or rendering.

Turndown
https://github.com/domchristie/turndown
An HTML to Markdown converter written in JavaScript.

ioredis
https://github.com/luin/ioredis
A robust, performance-focused and full-featured Redis client for Node.js.

uid
https://github.com/lukeed/uid
A tiny (134B) and fast utility to randomize unique IDs of fixed length

WatermelonDB - A reactive database framework
https://github.com/Nozbe/WatermelonDB
Reactive & asynchronous database for powerful React and React Native apps. Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast.

Browser-Based SVG Editors
https://css-tricks.com/browser-based-svg-editors/
Most of the following require very little explanation. The toolbars give you access to drawing and manipulation tools. You change colors and drag things around and most of what you’d expect to be able to do. Of course, some of the features vary. If you’re serious about finding one to do big work in, you should experiment with all of them.

OpenSilver
https://www.opensilver.net/
OpenSilver is a modern, plugin-free, open-source reimplementation of Silverlight, that runs on current browsers via WebAssembly. It uses Mono for WebAssembly and Microsoft Blazor. It brings back the power of C#, XAML, and .NET to client-side Web development.

dangerzone
https://github.com/firstlookmedia/dangerzone
Take potentially dangerous PDFs, office documents, or images and convert them to a safe PDF. Dangerzone works like this: You give it a document that you don’t know if you can trust (for example, an email attachment). Inside of a sandbox, dangerzone converts the document to a PDF (if it isn’t already one), and then converts the PDF into raw pixel data: a huge list of of RGB color values for each page. Then, in a separate sandbox, dangerzone takes this pixel data and converts it back into a PDF.

Linux Kernel Teaching
https://linux-kernel-labs.github.io/refs/heads/master/index.html
This is a collection of lectures and labs Linux kernel topics. The lectures focus on theoretical and Linux kernel exploration. The labs focus on device drivers topics and they resemble “howto” style documentation.

设计

阿里巴巴语雀文档大屏适配背后的设计思考
https://www.yuque.com/yuque/blog/zsrkzw
语雀是阿里巴巴人手必备的办公软件，阿里同学日常的周报日报、产品文档、开发文档等等都依赖语雀完成。随着正式发布对外后，用户规模逐渐壮大，我们在讨论区（语雀一对一与大家沟通需求的用户反馈专区）陆续收到很多对宽屏适配的需求。作为一款知识沉淀型产品，大家打开语雀后都会进入长时间的编写或阅读。如果显示器适配不佳，就会大大降低用户体验。本文将和大家分享语雀此次大屏适配设计改版背后的一些思考。

From 2D To 3D Illustration – Design Trend
https://www.themasterpicks.com/from-2d-to-3d-illustration/
We have seen quite a few styles and trends of illustration such as isometric illustration, Abstract, Broken Proportions, Surrealistic characters and more. Now we can see the beginning of something new and fresh, a transition from 2D to 3D illustration.

The Psychology of Color and Emotional Design
https://www.uxbooth.com/articles/the-psychology-of-color-and-emotional-design/
Every so often psychologists change their minds about what drives human behavior. Early in my career, psychologists claimed that people made rational decisions. Today, thanks to neuroscience, the prevailing view is that we make irrational, emotionally-driven decisions.

How Design Thinking Can Benefit Education
https://blog.marvelapp.com/how-design-thinking-benefit-education/
Adopting a beginner’s mindset early unlocks unlimitless possibilities.

Tools for Remote UX Workshops
https://www.nngroup.com/articles/tools-remote-ux-workshops/
Summary: The type of workshop will dictate which tools your team should use. Ultimately, with limited time and budget, your best bet is to use a tool your team already knows how to use. 另附：The 3 problems everyone has when first working remotely (and how to solve them).

产品及其它

The Uncanny Keyboard
https://thereader.mitpress.mit.edu/the-uncanny-keyboard/
Lin Yutang’s MingKwai typewriter is perhaps the most well-known — and most poorly understood — Chinese typewriter in history.

School’s Out… Or Is It?
http://blog.archive.org/2020/03/11/schools-out-or-is-it/
The Internet Archive’s mission is Universal Access to All Knowledge, and that includes making it possible for anyone to receive a quality education, anytime, anywhere. School closures are a perfect time to take advantage of online learning—any student with an internet connection can enjoy a huge variety of books on virtually any subject, even accessing the collections of other schools and public libraries.

Do whatever you can’t stop thinking about
https://shime.sh/do-whatever-you-can%27t-stop-thinking-about
Another useful tool, for deciding what to work on is the Regret Minimization Framework: Project yourself being 80 years old and thinking whether you would regret your current decision. That’s how Jeff Bezos decided to work on Amazon. It’s a useful tool for prioritizing over long-term and rationalizing decisions that make no sense in the short-term. Never work on anything you would regret looking back on your deathbed and spend as much time you can on doing whatever you can’t stop thinking about.

电子工程师也有“鄙视链”！软件硬件无一幸免！
https://mp.weixin.qq.com/s?__biz=MzI0ODU0NDI1Mg==&mid=2247493009&idx=1&sn=a9323607a0753a11cd971f9ede422c47
自古以来，文人相轻，而这股风气如今也在电子工程师的圈子里蔓延开来，影响者众多。从程序语言、工具、OS、硬件、到职场，根据你所学东西的不同，被划分为不同的阵营。仿佛是文人特有的傲气在作祟，出于对所学东西的坚持，对其他东西的轻视，分属不同阵营的人都鄙视来鄙视去，甚至形成一条鄙视链，不过最后发现也就只剩下自己才不鄙视自己。想知道工程师的鄙视链到底有多惨烈，看完本文你就懂了，一定会吓坏不少小伙伴的。