FEX 技术周刊 - 2020/02/17

深阅读

What is CSS4?
https://www.quirksmode.org/blog/archives/2020/02/what_is_css4.html
https://css-tricks.com/css4-update/
If we want CSS4 to be a thing it is necessary to define it a little more. However, that does not mean it’s necessary to divide all existing CSS modules into CSS3 and CSS4 buckets. This article discusses these issues, and goes through some of the feedback to my original article.

Why JavaScript is Eating HTML
https://css-tricks.com/why-javascript-is-eating-html/
As a JavaScript developer on a cross-functional team, I get this question occasionally and I often have trouble answering it. All of the materials I’ve found on this topic are written for an audience that is already familiar with JavaScript — which is not terribly useful to those who focus on HTML and CSS. But this HTML-in-JS pattern (or something else that provides the same benefits) will likely be around for a while, so I think it’s an important thing that everyone involved in web development should understand. This article will include code examples for those interested, but my goal is to explain this concept in a way that can be understood without them.

Why is swc fast?
https://swc-project.github.io/blog/2020/02/16/why-is-swc-fast.html
swc is fast. Very fast. It’s 18x faster than babel on a single-core benchmark, and on a parallel benchmark, it’s 68x faster than babel on a 4 core (8 HT) machine. Why? Just because it’s written in rust? No. Its fundamental design differs from any other tool. 另附：esbuild - An extremely fast JavaScript bundler and minifier written in Go.

IPFS Project Focus for 2020
https://blog.ipfs.io/2020-02-10-our-focus-for-2020/
“The mission of IPFS is to create a resilient, upgradeable, open network to preserve and grow humanity’s knowledge.” It’s a new year, and with it time to update the IPFS Project Roadmap with our focus for 2020. As part of that, we also want to reflect on our successes, challenges, and learnings from 2019 to help us stay on track to achieve our mission, and maximize the value and utility we create in the world.

7 really good reasons not to use TypeScript
https://medium.com/javascript-in-plain-english/7-really-good-reasons-not-to-use-typescript-166af597c466
Everyone loves TypeScript. It “solves” many problems JS has, it is a “superset” of JS, it will make your code error-prone and pleasant to read. There are a lot of good reasons to use TypeScript, but I am going to give you 7 really good reasons not to.

G6 3.3 性能战斗机解析
https://www.yuque.com/antv/blog/wqas6s
图——实体与关系的集合，往往具有庞大的数据量。最常见的图可视化将关系数据绘制为大量节点和边元素，而每一个元素也可能由多种图形复合而成，例如最为常见的带文本节点。图元素的样式变化万千，渲染、交互性能一直是关系数据可视化中最为棘手问题之一。特别是在前端计算资源有限的情况下，如何提升图可视化的性能，成为 G6 一大难题。2020 年伊始，我们终于向着这一难题跨出了第一步 —— 性能卓越的 G6 3.3 正式发布。让我们一睹性能战斗机的究竟吧。

React Hooks的体系设计之一 - 分层
https://zhuanlan.zhihu.com/p/106665408
React内置的hook提供了基础的能力，虽然本质上它也有一些分层，比如：useState是基于useReducer的简化版。useMemo和useCallback事实上可以基于useRef实现。但在实际应用时，我们可以将这些统一视为一层，即最基础的底层。因此，如果我们在实际的应用开发中，单纯地在组件里组合使用内置的hook，无疑是一种不分层的粗暴使用形式，这仅仅在表象上使用了hook，而无法基于hook达到逻辑复用的目标。

得到 Hybrid 架构的演进之路
https://mp.weixin.qq.com/s/TsFGkLeOMGloa-0bs_5PuA
得到 APP 是一个三年多的产品，最初采用纯 Native 的方式开发，在 18 年初，我们开始了 Hybyid 开发技术方案的探索和实践， 目前得到 APP 共包含了 ReactNative 和 Webview 两套 Hybrid 方案。本文从时间维度上，重点回顾一下 Webview Hybrid 方案在得到 APP 从 0 到 1 的过程，也希望我们的经历可以给一些想落地 Hybrid 方案的团队一点启发。

美团外卖持续交付的前世今生
https://tech.meituan.com/2020/02/13/meituan-waimai-continuous-delivery.html
美团外卖自2013年创建以来，业务一直在高速发展，目前日订单量已突破3000万单，已成为美团点评最重要的业务之一。美团外卖所承载的业务，从早期单一的美食业务发展成为了外卖平台业务。目前除餐饮业务外，闪购、跑腿、闪付、营销、广告等产品形态的业务也陆续在外卖平台上线。参与到美团外卖平台的业务团队，也从早期的单一的外卖团队发展成为多业务团队。每个业务团队虽然都有不同的业务形态，但是几乎都有相同的诉求：需求能不能尽快地上线？然而，Native应用的发布依赖于应用市场的更新，周期非常长，非常不利于产品的快速迭代、快速试错。同时，作为平台方，我们需要考虑到各个业务团队的诉求，统筹考虑如何建立怎么样的模型、配套什么样的技术手段，才能实现最佳的状态，满足各业务更短周期、高质量的交付业务的诉求。本文会首先回顾美团外卖从早期的月交付，逐渐演变成双周交付，再从双周交付演变成双周版本交付配合周动态交付的过程。然后从外卖的历史实践中，浅谈一个好的持续交付需要综合考虑哪些关键因素，希望对大家有所帮助或启发。

5 ways SaaS companies can benefit from collaborative editing with CKEditor 5
https://ckeditor.com/blog/5-ways-SaaS-companies-can-benefit-from-collaborative-editing-with-CKEditor-5/
Since SaaStr Annual is there to help SaaS businesses scale up, we are going to be there to show how a good WYSIWYG editor can contribute to that. We want to show that CKEditor 5 Collaboration Features can provide a modern writing experience for every application. Whether you would like to spice up the software you create or your internal team dynamic, here are five reasons why SaaS companies should choose a collaborative rich text editor like CKEditor 5. 另附：The easiest way to customize a WYSIWYG editor - CKEditor 5 online builder.

The state of web development on mobile
https://areknawo.com/the-state-of-web-development-on-mobile/
Let me ask you a question - what kind of a machine do you code on? I bet it’s one of desktop, laptop, or maybe even a remote server with SSH connection. That’s the standard these days, but I think that there are some passionate (and crazy in a sense) people (like me) who’d like to stretch it even further. Those who’d like to be able to code literally anywhere, no matter what kind of a device they have available. So, is it possible to do web dev on mobile?

How Sustainable is a Solar Powered Website
https://www.lowtechmagazine.com/2020/01/how-sustainable-is-a-solar-powered-website.html
Our self-hosted, solar-powered, off-grid website has been running for 15 months now. In this article, we present its energy and uptime data, and calculate the embodied energy of our configuration. Based on these results, we consider the optimal balance between sustainability and server uptime, and outline possible improvements.

Where are all the animated SVGs?
https://www.getmotion.io/blog/where-are-all-the-animated-svgs/
Animated SVGs just make sense. There are lots of articles explaining why you should be using SVG. There’s even scientific evidence(!) that says animated icons are better than static ones. So… where are all the animated icons? Why isn’t the web filled with these amazing, accessible, performant animations? I have some ideas…

Performant front-end architecture
https://www.debugbear.com/blog/performant-front-end-architecture
This post describes some techniques to make front-end apps load faster and provide a good user experience. We’ll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache?

Under Discussion: The Maintenance of Large Open-Source Projects
https://www.welcometothejungle.com/en/articles/btc-discussion-open-source-maintenance
Behind the Code got together with former Node.js core team member Bert Belder and creator of the JavaScript library Leaflet, Vladimir Agafonkin, to talk about what it takes to maintain large open-source projects. While at Node.js, Belder was the person mainly responsible for creating the platform abstraction layer Libuv, and co-created the open-source API framework LoopBack, as well as the open-source library Deno.

6 things I wish I knew about state management when I started writing React apps
https://medium.com/@veeralpatel/things-ive-learned-about-state-management-for-react-apps-174b8bde87fb
I have a lot more blog posts like this I plan to write. If you like this, follow me on Twitter to make sure you don’t miss any. Think about the most complex frontends you’ve used. Frontends that made you wonder — “how did they create this”? Here are some of mine.

Fix the “not wrapped in act(…)” warning
https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
There are a few reasons you’re getting this warning. Here’s how you fix it.

Serverless Side Rendering — The Ultimate Guide
https://blog.webiny.com/serverless-side-rendering-e1c0924b8da1
Learn how we’ve achieved great SEO support for every Webiny website and made them run super-fast, using SSR in a serverless environment.

JuliaLang: The Ingredients for a Composable Programming Language
https://white.ucc.asn.au/2020/02/09/whycompositionaljulia.html
One of the most remarkable things about the julia programming language, is how well the packages compose. You can almost always reuse someone else’s types or methods in your own software without issues. This is generally taken on a high level to be true of all programming languages because that is what a library is. However, experienced software engineers often note that its surprisingly difficult in practice to take something from one project and use it in another without tweaking. But in the julia ecosystem this seems to mostly work. This post explores some theories on why; and some loose recommendations to future language designers.

Let’s Encrypt: an automated certificate authority to encrypt the entire we
https://blog.acolyer.org/2020/02/12/lets-encrypt-an-automated-certificate-authority-to-encrypt-the-entire-web/
This paper tells the story of Let’s Encrypt, from it’s early beginnings in 2012/13 all the way to becoming the world’s largest HTTPS Certificate Authority (CA) today – accounting for more currently valid certificates than all other browser-trusted CAs combined. Beyond the functionality that Let’s Encrypt provides, the story stands out to me for two key ingredients.

The History of Git: The Road to Domination in Software Version Control
https://www.welcometothejungle.com/en/articles/btc-history-git
In 2005, Linus Torvalds urgently needed a new version control system to maintain the development of the Linux Kernel. So he went offline for a week, wrote a revolutionary new system from scratch, and called it Git. Fifteen years later, the platform is the undisputed leader in a crowded field.

AutoFlip: An Open Source Framework for Intelligent Video Reframing
https://ai.googleblog.com/2020/02/autoflip-open-source-framework-for.html
AutoFlip, an open source framework for intelligent video reframing. AutoFlip is built on top of the MediaPipe framework that enables the development of pipelines for processing time-series multimodal data. Taking a video (casually shot or professionally edited) and a target dimension (landscape, square, portrait, etc.) as inputs, AutoFlip analyzes the video content, develops optimal tracking and cropping strategies, and produces an output video with the same duration in the desired aspect ratio.

新鲜货

OpenChakra is an open-source visual editor for React
https://openchakra.app/
OpenChakra is a visual editor for the best component library in town: Chakra UI 🤗. Quickly draft components with the simple drag and drop UI.

Supercharge your command line experience: GitHub CLI is now in beta
https://github.blog/2020-02-12-supercharge-your-command-line-experience-github-cli-is-now-in-beta/
We’re introducing an easier and more seamless way to work with GitHub from the command line—GitHub CLI, now in beta. Millions of developers rely on GitHub to make building software more fun and collaborative, and gh brings the GitHub experience right to your terminal. 另附：Shit – An implementation of Git using POSIX shell.

Mozilla lost the browser wars. It still thinks it can save the internet
https://www.protocol.com/mozilla-plan-fix-internet-privacy
The inside story of a very long, sometimes lonely and totally quixotic quest. 另附：Firefox 73 is upon us.

Announcing Ionic 5!
https://ionicframework.com/blog/announcing-ionic-5/
Today, I’m thrilled to announce Ionic Framework 5 (Magnesium)! 🎉 This release includes iOS 13 design updates, a brand new API for creating your own custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization, and more!

Announcing .NET Interactive - Try .NET includes .NET Notebooks and more
https://www.hanselman.com/blog/AnnouncingNETInteractiveTryNETIncludesNETNotebooksAndMore.aspx
At Microsoft Ignite 2019, we were happy to announce that the “Try .NET global tool” added support for C# and F# Jupyter notebooks. Last week, the same team that brought you .NET Notebooks announced Preview 2 of the .NET Notebook.

10 Useful React Components for 2020
https://blog.bitsrc.io/10-useful-react-components-for-2020-35fd6af56909
Different React components for different occasions.

Type Routebeta
https://www.type-route.org/
A flexible, type safe routing library. This is a beta release. The Type Route API has been vetted with production code but the library has not yet reached version 1.0. More community feedback is needed to validate the project’s maturity. Use the issue tracker to communicate this feedback in the form of bugs, questions, or suggestions.

React Navigation 5.0 - A new way to navigate
https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html
Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.

FullCalendar - JavaScript Event Calendar
https://fullcalendar.io/
Full-sized drag & drop event calendar. 另附：react-big-calendar.

Legra.js
https://legrajs.com/
egra (Lego brick Graphics) is a small (3.36KB gzipped) JavaScript library that lets you draw using LEGO® like brick shapes on an HTML <canvas> element. This library defines basic graphics primitives like lines, rectangles, polygons, ellipses, bézier curves, etc. All shapes are drawn either outlined or filled in.

Request - Simplified HTTP client is Now ‘Fully Deprecated’
https://github.com/request/request#deprecated
As of Feb 11th 2020, request is fully deprecated. No new changes are expected to land. In fact, none have landed for some time. Alternative libraries to request.

Agenda 3.0
https://github.com/agenda/agenda/releases/tag/3.0.0
Lightweight job scheduling for Node.js

Swift Playgrounds for macOS
https://apps.apple.com/us/app/swift-playgrounds/id1496833156?mt=12%22
Swift Playgrounds is a revolutionary app for Mac and iPad that makes it fun to learn and experiment with code. You solve interactive puzzles in the guided “Learn to Code” lessons to master the basics of coding, or experiment with a wide range of challenges that let you explore many unique coding experiences.

Fyne - Cross platform GUI in Go based on Material Design
https://github.com/fyne-io/fyne
Fyne is an easy to use UI toolkit and app API written in Go. It is designed to build applications that run on desktop and mobile devices with a single codebase.

SciPy 1.0: fundamental algorithms for scientific computing in Python
https://www.nature.com/articles/s41592-019-0686-2
SciPy is an open-source scientific computing library for the Python programming language. Since its initial release in 2001, SciPy has become a de facto standard for leveraging scientific algorithms in Python, with over 600 unique code contributors, thousands of dependent packages, over 100,000 dependent repositories and millions of downloads per year. In this work, we provide an overview of the capabilities and development practices of SciPy 1.0 and highlight some recent technical developments.

Linux 5.6 Is The Most Exciting Kernel In Years With So Many New Features
https://www.phoronix.com/scan.php?page=article&item=linux-56-features&num=1 The quick summary of Linux 5.6 changes include: WireGuard, USB4, open-source NVIDIA RTX 2000 series support, AMD Pollock enablement, lots of new hardware support, a lot of file-system / storage work, multi-path TCP bits are finally going mainline.

18-year-old personal website, built with Frontpage and still updated
http://www.fmboschetto.it/
怀旧一下…

Ultimate Electronics Book - 134+ interactive schematics & simulations
https://ultimateelectronicsbook.com/
Electronic systems rule our modern world, bridging the gap between software and physical reality. From communication to industrial process control to transportation to entertainment, the field of electronics continues to grow in reach and complexity. A working knowledge of basic electrical engineering concepts is now a powerful tool in many fields, and this value is likely to grow in the coming decades.

Tiny helpers
https://tiny-helpers.dev/
A collection of free single-purpose online tools for web developers…

The Map of Mathematics
https://www.quantamagazine.org/the-map-of-mathematics-20200213/
A project by Quanta Magazine. Text by Kevin Hartnett. Design and visualizations by Kim Albrecht and Jonas Parnow. Here is a map of mathematics as it stands today, mathematics as it is practiced by mathematicians. From simple starting points — Numbers, Shapes, Change — the map branches out into interwoven tendrils of thought. Follow it, and you’ll understand how prime numbers connect to geometry, how symmetries give a handle on questions of infinity.

To become a good C programmer (2011)
http://fabiensanglard.net/c/
Every once in a while I receive an email from a fellow programmer asking me what language I used for one of my games and how I learned it. Here is an entry that list the best things to read about C. If you know of other gems, please email me or add a comment at the bottom of the page.

设计

Material Design Components for Android 1.1.0 Are Now Available
https://medium.com/google-design/material-design-components-for-android-1-1-0-are-now-available-45e1d576037c
Material Theming, new components, dark theme support, and more. 另附：Why Use Material Design? Weighing the Pros and Cons.

Why UX is so hard in Digital workplaces
https://uxplanet.org/why-ux-is-so-hard-in-digital-workplaces-b19c550c7f9
Digital revolution has been a boon for both the employees and organisations. It is so liberating as we have more flexibilities and freedom. We have option to work from home, organisational hierarchies are slowly diminishing, open office culture is becoming a trend and many digital tools make our lives easier.

Sketch 63 — What’s new?
https://medium.com/sketch-app-sources/sketch-63-whats-new-98481f15455b
Sketch is much more than UI Design Tool. I create not only all my UI Designs there but also images for blogs, banners, ebooks, Instagram posts, Dribbble shots, Images for Twitter, and Facebook. I suppose that you also use Sketch for multiple other digital design things. Sketch Team noticed that and with this update they prepared stuff to help us work faster with social media images!

What is Atomic UX Research?
https://blog.marvelapp.com/atomic-ux-research/
A new way to organise UX knowledge in an infinitely powerful manner

产品及其它

让爱你的人深爱你，恨你的人远离你，这样你就能赢了
https://mp.weixin.qq.com/s/SlR9Gbkv0ALaceDXJVu1LQ
作为任何人（任何产品、任何内容、任何公司），如何赢得自己所需的大众支持。如果你在运营一种产品、一种内容、一个平台，你应该选择“尽可能争取中立者”，尽可能扩大自己的用户基础；还是应该选择“尽可能动员基本盘”，在垂直或特色领域里面做出尽可能大的文章呢？很多应用已经证明，若能充分动员基本用户、垂直用户，那么 1 亿人可以打败 3 亿人，3000 万人可以打败1亿人，500 万人又能打败 3000万人。在收入环节尤其如此：“为爱付费”不是一句空话。这个世界上，永远有人爱你、有人恨你、有人对你没感觉。你可以说服尽可能多的人爱你，也可以说服爱你的人更爱你。最终，你可能发现：爱你的人都是你的死忠粉丝，而“恨你”的人其实也不希望你死，他们只想远离你而已。

互联网30年，泡沫如梦
https://mp.weixin.qq.com/s/KJVxNkcZdpbUBOYIejDk6Q
人人都说互联网改变世界，这话没错。但我认为互联网改变的方式，是泡沫。资金，资源，人才因为一堆概念聚在一起，形成一个又一个的泡沫，然后泡沫破裂，大部分人失败，少数能够留下来的，会成为下一个世界的基石。然后再有新的泡沫产生。互联网的历史，就是泡沫浮起和破灭的历史。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2020-02-16 · 世界上航空母舰的可视化、How to visualize very large networks and still uncover insight、See How the World’s Most…

– THE END –