FEX 技术周刊 - 2020/03/09

深阅读

CLUI: Building a Graphical Command Line
https://blog.repl.it/clui
https://repl.it/
At Repl.it, where our goal is to build a simple yet powerful programming environment, we run into UI scalability issues every time we have an IDE feature to add. So when it came to building our admin tools, we decided to explore a new UI paradigm. We often need to do simple things like changing single values in the database, so it’s usually easier to connect to the database directly and run some SQL than build new UI for it. But that’s both unsafe and excludes anyone unfamiliar with SQL or the CLI. So we asked ourselves, “how can we marry the conciseness of CLIs with approachability of GUIs in the same interface?”

Please stop recommending Git Flow!
https://georgestocker.com/2020/03/04/please-stop-recommending-git-flow/
Git-flow is a branching and merging methodology popularized by this blog post, entitled “A Successful Git branching model”. In the last ten years, countless teams have been snookered by the headline and dare I say lied to. If you read the blog post, the author claims they successfully introduced it in their projects, but purposefully doesn’t talk about the project details that made it successful. The end, right? Well, not quite. I can tell a few of you are unconvinced by this line of reasoning, so let’s dig deeper into why the gitflow branching model should die in a fire. 另附来自 GitLab 的 The problem with Git flow.

The Elephant in the Architecture
https://martinfowler.com/articles/value-architectural-attribute.html
why business value should be treated as an architectural attribute

The History of the URL
https://blog.cloudflare.com/the-history-of-the-url/
In the world of web applications, it can be a little odd to think of the basis for the web being the hyperlink. It is a method of linking one document to another, which was gradually augmented with styling, code execution, sessions, authentication, and ultimately became the social shared computing experience so many 70s researchers were trying (and failing) to create. Ultimately, the conclusion is just as true for any project or startup today as it was then: all that matters is adoption. If you can get people to use it, however slipshod it might be, they will help you craft it into what they need. The corollary is, of course, no one is using it, it doesn’t matter how technically sound it might be. There are countless tools which millions of hours of work went into which precisely no one uses today.

G2 4.0 正式版发布！
https://www.yuque.com/antv/blog/g2-4.0-released
G2 是一套面向常规统计图表，以数据驱动的高交互可视化图形语法。经历了为期半年的大规模底层重构和开发迭代，G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以来 G2 的第二次大版本发布，4.0 版本仍坚守着『打造数据驱动的高交互图形语法』的初心，在图形语法的基础上，新增了交互语法，同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

发布 UMI 3，插件化的企业级前端应用框架
https://github.com/sorrycc/blog/issues/92
Umi 2 发布已经是一年半之前的事了，在这段时间里，我们发现之前的架构正逐渐不能满足业务飞速发展的需要，于是我们重写了一遍 Umi。经过几个月的 “007 ” 研发，Umi 3 在今天正式和大家见面了，并调整 slogan 为“插件化的企业级前端应用框架”。

What React Does (and Doesn’t Do)
https://daveceddia.com/what-react-does/
React doesn’t do a whole lot. Don’t get me wrong – it’s great at what it does! But the things React is actually responsible for, in a fully-functioning production app? That list is pretty small. The universe of things you might call “a React problem” or “a React thing” is probably smaller than you think.

Building with Web Components
https://blog.heroku.com/building-with-web-components
Web components seeks to tilt the balance of web development back towards a standard agreed upon by browser vendors and developers. Various polyfills and proprietary frameworks have achieved what web components are now trying to standardize: composable units of JavaScript and HTML that can be imported and reused across web applications. Let’s explore the history of web components and the advantages they provide over third-party libraries.

Flutter + Dart, or how to quickly build a mobile app without losing (too much of) your hair
https://altkomsoftware.pl/blog/flutter-dart-quickly-build-mobile-app-without-losing-much-hair/
In this day and age there’s a steady influx of new, revolutionary frameworks, be it frontend-related or mobile. If one has been active in web development, she or he should be well acquainted with the constant oversupply of fresh, ingenious approaches and lightweight solutions to complex problems. This usually solves one issue and creates another – instead of wondering whether there is a technology that’s viable for us to use, we are currently left with the equally frustrating choice of which one of them we should pick. This is why when I stumbled upon Flutter, I was quite interested in giving it a go – could it be a viable contender, or maybe even serve as a go-to solution that would give this dilemma at least a moment’s pause?

Collaborative writing and how to implement it in your application
https://ckeditor.com/blog/Collaborative-writing-and-how-to-implement-it-in-your-application/
In the rest of this article, we are going to focus on the type of collaboration environment where the rules are yours to make. Writing is a creative process, the workflow and writing style depend on each case and individual. We believe modern content creation and collaboration need to be flexible to fit these individual workflow needs.

Introducing Alpine.js: A Tiny JavaScript Framework
https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/
Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface.

An Interactive Introduction to D3
https://observablehq.com/@mitvis/introduction-to-d3
D3, the JavaScript library for producing interactive data visualizations, has just turned 9 years old so you’re probably familiar with it by now.. but this introduction is particularly neat as it’s an example of a live, interactive ‘notebook’ style tutorial.

3 Rules of React State Management
https://dmitripavlutin.com/react-state-management/
State inside a React component is the encapsulated data that is persistent between renderings. useState() is the React hook responsible for managing state inside a functional component.

Stop Using ‘Drop-down’
https://adrianroselli.com/2020/03/stop-using-drop-down.html
Stop using the word drop-down. Instead choose a term that accurately describes the control you want.

ES modules in Node today
https://blog.logrocket.com/es-modules-in-node-today/
In Node.js, the module system has come a long way from its earlier adoption of CommonJS. Today, ECMAScript modules (ES modules), though still experimental at the time of writing, are the official standard for packaging code for reuse in both client- and server-side JavaScript.

Understanding the ECMAScript spec, part 2
https://v8.dev/blog/understanding-ecmascript-part-2
In part 1 of this series we read through a simple method — Object.prototype.hasOwnProperty — and abstract operations it invokes. We familiarized ourselves with the shorthands ? and ! related to error handling. We encountered language types, specification types, internal slots, and internal methods.

In favor of small modules and plumbing
https://blog.webb.page/2020/small-modules-and-plumbing
In the JavaScript/Node.js community there have been fiery debates over whether publishing super-focused modules to npm is a positive thing or not. Installing a module that consists of maybe 50 lines of code or so but does a specific thing you need well is a good thing. No need to copy/paste the same lines of code in all of your projects. Then again, does publishing such modules pollute the world’s most popular JavaScript package manager and snatch awesome package names away from multi-faceted modules? As with most things, it boils down to perspective. This post examines how I used to be of the mindset that publishing a plethora of “focused” modules is a waste of time but now think is a fantastic idea.

Best practices for REST API design
https://stackoverflow.blog/2020/03/02/best-practices-for-rest-api-design/
In this article, we’ll look at how to design REST APIs to be easy to understand for anyone consuming them, future-proof, and secure and fast since they serve data to clients that may be confidential.

Simple vs. Complicated vs. Complex vs. Chaotic
https://medium.com/better-programming/simple-vs-complicated-vs-complex-vs-chaos-737b5964849d
What do these have to do with systems and software projects?

Moving Fast At Scale
https://www.youtube.com/watch?v=suOjtOFfyZg
An engaging 35 minute talk from a senior technology leader (and now VP Engineering at WeWorkd) and the art of building teams to work on large scale technology engineering challenges. No raw tech here, this is all about organization.

Formal Foundations of Serverless Computing
https://arxiv.org/pdf/1902.05870.pdf
This academic paper focuses on the semantics of serverless computer and veers off into mathematical terminology pretty quickly. There’s definitely some interesting bits and pieces in here but admittedly goes over my head quite fast(!) 另附：The 3 Laws of Serverless.

Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app
https://engineering.fb.com/data-infrastructure/messenger/
To build this new version of Messenger, we needed to rebuild the architecture from the ground up and rewrite the entire codebase. This rewrite allowed us to make use of significant advancements in the mobile app space since the original app launched in 2011. In addition, we were able to leverage state-of-the-art technology that we’ve developed over the intervening years. Starting today, we are excited to roll out the new version of Messenger on iOS globally over the next few weeks. Compared with the previous iOS version, Messenger is twice as fast to start* and one-fourth the size. With this new iteration, we’ve reimagined how Messenger thinks about building apps and started from the ground up with a new client core and a new server framework.

Why Graph Will Win
https://medium.com/terminusdb/why-graph-will-win-703373bb5c41
It’s important to be frank about the problems of graphs and RDF and not just whistle the marketing tune because as soon as the technology is out there in the hands of developers, they will find the problems and will be inclined to reject the technology as pure hype if all they have heard are songs of breathless wonder. In the last couple of years, while trying to sell graph databases into bricks and mortar companies, by far the most hostile reactions I’ve come across have been from technologists who got bitten by the Semantic Web bug in the early 2000s. Once bitten twice shy. However, if you were to assume that I’m a critic of graph databases, you would be very wrong. I’ve spent most of the last decade building graph database management systems because to me it’s incredibly obvious that in the long run graph is going to win and here’s why.

Baidu Migrates Off Sharded MySQL to CockroachDB
https://www.cockroachlabs.com/case-studies/baidu-cockroachdb/
Baidu migrated from sharded MySQL to CockroachDB to automate operations of two production applications that access 2TB of data with 50M inserts a day.

What’s so hard about PDF text extraction?
https://www.filingdb.com/pdf-text-extraction
There is a common view that extracting text from a PDF document should not be too difficult. After all, the text is right there in front of our eyes and humans consume PDF content all the time with great success. Why would it be difficult to automatically extract the text data?

I want off Mr. Golang’s Wild Ride
https://fasterthanli.me/blog/2020/i-want-off-mr-golangs-wild-ride/
This article is going to have a different tone from what I’ve been posting the past year - it’s a proper rant. And I always feel bad writing those, because, inevitably, it discusses things a lot of people have been working very hard on. In spite of that, here we are.

新鲜货

Four First Public Working Drafts published by the CSS Working Group
https://www.w3.org/blog/news/archives/8343
CSS Color Module Level 5 extends CSS Color [css-color-4] to add color modification functions. Media Queries Level 5 allows authors to test and query values or features of the user agent or display device, independent of the document being rendered. CSS Transforms Module Level 2 allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space. CSS Conditional Rules Module Level 4 contains the features of CSS for conditional processing of parts of style sheets, conditioned on capabilities of the processor or the document the style sheet is being applied to. 另附：Why Are We Talking About CSS4?.

Node.js Best Practices
https://github.com/goldbergyoni/nodebestpractices
The Node.js best practices list (March 2020).

p5.js 1.0 is Here!
https://medium.com/processing-foundation/p5-js-1-0-is-here-b7267140753a
We are excited to announce the 1.0 Release of p5.js! p5.js is a JavaScript library that aims to make creative expression and coding on the web accessible and inclusive for artists, designers, educators, and beginners.

rollup 2.0
https://github.com/rollup/rollup/releases/tag/v2.0.0
As any major, it is first and foremost about getting rid of old, deprecated, rotting and smelling stuff. But there are some cool things hidden as well…

Immer V6.0
https://github.com/immerjs/immer/releases/tag/v6.0.0
Create the next immutable state tree by simply modifying the current tree.

styled-icons
https://github.com/jacobwgillespie/styled-icons
Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components.

Edtr.io
https://edtr.io/
Edtr.io is a WYSIWYG in-line web editor written in React. Content created with Edtr.io looks just like the final page - select any editable element on the page, edit it in-place or drag ’n’ drop it around.

react-mosaic
https://github.com/nomcopter/react-mosaic
react-mosaic is a full-featured React Tiling Window Manager meant to give a user complete control over their workspace. It provides a simple and flexible API to tile arbitrarily complex react components across a user’s view. react-mosaic is written in TypeScript and provides typings but can be used in JavaScript as well.

isomorphic-git
https://isomorphic-git.org/en/
A pure JavaScript implementation of git for node and browsers!

Qoa
https://github.com/klaussinani/qoa
Minimal interactive command-line prompts

Radiooooo – The Music Time Machine
http://radiooooo.com/

设计

The Designer’s Edge – An Overview of Photoshop Plugins
https://www.toptal.com/designers/photoshop/photoshop-plugins
Photoshop plugins are used by designers in multiple disciplines. They add functionality, increase efficiency, and enhance creativity. But there’s a problem. With so many options, it’s hard to know which plugins are worthwhile (even more so when they cost money). To help, we’ve curated a collection of the finest Photoshop plugins available and summarized the strengths of each.

Voice First Design: A Movement Toward Voice-Based Interaction
https://www.uxpin.com/studio/blog/voice-first-design-a-movement-toward-voice-based-interaction/
As voice interactions and voice searches are increasingly becoming commonplace, leading companies around the world are increasingly embracing the voice-first design principle. To understand the revolutionary role played by voice-first design in the process mobile app design passes through, we need to explain how it works and what are the fundamental principles and effective practices for this design principle to work consistently.

5 Principles of Visual-Design in UX
https://www.nngroup.com/articles/principles-visual-design/
The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly.

比《山海经》还全面！这个中国古今妖怪百科网太良心了！
https://www.uisdc.com/cbaigui
如果要做中国风题材的海报？还要求有深厚的文化底蕴和神话色彩。那么，你最先想到的参考是什么呢？《山海经》？年兽？都不错。但是如果想要找寻中国神话故事里多样的角色，找寻一些少为人知的妖怪形象，不仅需要翻阅大量书籍，还要阅读大段较为晦涩的文言文，费时又费脑。那么怎样才能够让设计更加独特？今天就为你推荐一个专门收集中国古今妖怪的网站，希望能够为你的设计带来一些灵感和文化底蕴。

产品及其它

The Secret to Enjoying Nature Is … Your Phone
https://www.wired.com/story/inaturalist-app-disconnection/
https://www.inaturalist.org/
I was spending way too much time staring at outdoorsy influencers on Instagram. So I downloaded the iNaturalist app—and stepped outside myself.

How to Make Yourself Into a Learning Machine
https://superorganizers.substack.com/p/how-to-build-a-learning-machine
Shopify’s Director of Production Engineering explains how reading broadly helps him get to the bottom of things

好领导是造钟人
https://mp.weixin.qq.com/s/kxUIaNy2c2OJvk_65VT2YA
《从优秀到卓越》的作者吉姆•柯林斯将领导者分成两类，一类称作“报时者”，一类叫做“造钟人”。所谓“报时者”，是指所有的下属都不知道时间，只有领导者知道，于是就不停地催促下属到这个时间点该干什么，到那个时间点要怎么去做。“造钟人”是指在一个组织当中从不指手画脚、发号施令，而是确立一种制度、营造某种氛围，让大家在共同目标的指引和某种气氛的推动下实现自组织、自管理，激发员工由内而外的自发动力。

长期主义：以微盟事件透视「SaaS精神」
https://mp.weixin.qq.com/s/A8dm9Fm7FhBfN_QA9FVH-A
黑天鹅带来的线上化骤然提速，考验的是所有「参与者」的道路坚定性与反脆弱能力。不仅在于朝夕之间被推到聚光灯下成为破圈话题，形成更好市场教育，而是更要明确在数字商业的「不确定」进程中，扮演关键助力角色的企业级服务公司们，天然应当笃信「长期主义」。放眼更长的周期，发力更长的陪伴，保持长线的应变，洞察始终的需求。唯此方知「长期主义」不仅是价值观，更是新游戏规则的方法论——穿越轻与重，拥抱危与机，陪伴成长的道路并非坦途，只有长期不懈地「输出价值」才是最艰难的捷径。

10 年，千亿，美团这家公司为什么有点「不一样」
http://www.geekpark.net/news/256466
科学和技术，一个是告诉你该做什么，一个告诉你该怎么做。至于追求真理，就是为了追求对的事情，符合规律的事情，而不是沉浸于惯性和自我执着之中。你看我们今天谈到这么多算法，其实都在不断印证美团「以科学技术追求真理」这个底层的共性的东西。这个世界观就是美团所有算法的算法。 「按照规律做事情」这句看上去很虚的话，美团显然是超级相信并实践的。而且我们看到这样一套按照规律做事情的「算法」是很有效的。从美团身上，我们能感受到这种追求科学做事的方法，就是他能发展壮大根本的原因。甚至不止美团，我们在拼多多、字节跳动等一大批企业身上也看到了这些共性。 为什么这些新生代企业会有这样的共性呢？我想，或许是因为他们的创始人都关注如何去构建一套生生不息，更大影响的系统，而不是他们内心一个什么特定的梦想。也因为他们这种强调「把自己放小，把规律和事情放大」，所以这些公司才能够最有效地利用各种资源来不断实现目标。 另附：美团技术十年：让我们感动的那些人那些事。

– THE END –