FEX 技术周刊 - 2019/10/07

深阅读

Improving V8 regular expressions
https://v8.dev/blog/regexp-tier-up
In its default configuration, V8 compiles regular expressions to native code upon the first execution. As part of our work on JIT-less V8, we introduced an interpreter for regular expressions. Interpreting regular expressions has the advantage of using less memory, but it comes with a performance penalty. In this blog post we describe how we take advantage of the upsides of interpreting regular expressions while mitigating the downsides.

Preact X - Virtuous DOM and the Fragments of Suspense
https://github.com/preactjs/preact/releases/tag/10.0.0
https://preactjs.com/guide/v10/whats-new/
Preact X is the next major version of Preact fully packed with features like Fragments, Hooks, componentDidCatch, Test-Utils, Debug-Warnings, many compatibility fixes and so much more 🎉 It’s finally happening! After months of hard work we’ve crossed the finish line and are over the moon with excitement to finally mark Preact X as stable. We’d like to thank everybody who tested it and submitted bug reports.

Text Rendering Hates You
https://gankra.github.io/blah/text-hates-you/
Rendering text, how hard could it be? As it turns out, incredibly hard! To my knowledge, literally no system renders text “perfectly”. It’s all best-effort, although some efforts are more important than others. The topics I focus on here have no particular rhyme or reason, they’re just the ones that come to mind after a few years of working on rendering in Firefox. For instance, I don’t spend much time talking about the challenges of text-segmentation or managing the different platform-specific text libraries, because I don’t look at that much.

HTTP的前世今生
https://coolshell.cn/articles/19840.html
HTTP (Hypertext transfer protocol) 翻译成中文是超文本传输协议，是互联网上重要的一个协议，由欧洲核子研究委员会CERN的英国工程师 Tim Berners-Lee v发明的，同时，他也是WWW的发明人，最初的主要是用于传递通过HTML封装过的数据。在1991年发布了HTTP 0.9版，在1996年发布1.0版，1997年是1.1版，1.1版也是到今天为止传输最广泛的版本（初始RFC 2068 在1997年发布， 然后在1999年被 RFC 2616 取代，再在2014年被 RFC 7230/7231/7232/7233/7234/7235取代），2015年发布了2.0版，其极大的优化了HTTP/1.1的性能和安全性，而2018年发布的3.0版，继续优化HTTP/2，激进地使用UDP取代TCP协议，目前，HTTP/3 在2019年9月26日 被 Chrome，Firefox，和Cloudflare支持，所以我想写下这篇文章，简单地说一下HTTP的前世今生，让大家学到一些知识，并希望可以在推动一下HTTP标准协议的发展。
另附：Chrome - No More Mixed Messages About HTTPS.

在 UC 做的前端工程化探索
https://lutaonan.com/blog/what-i-have-done-at-UC/
我在 2016 年初加入 UC 的国际业务部，负责为 UC News 搭建运营后台。随着前端团队人数越来越多，我开始推动团队的前端技术栈统一以及前端工程化，开发了一个叫 Cans 用于快速搭建中后台前端应用的框架。直到了 2019 年我离开 UC, Cans 仍然服务于 UC 的国际业务。本文主要记录了我如何从 UC News 运营后台孵化出这个内部框架，以及其背后的设计理念。虽然 Cans 没有开放源代码。但我认为相比这些工具的源码，那些我在开发这些工具背后的理念、思考，更有被分享的价值。

Why we chose ECharts for data visualizations
https://about.gitlab.com/2019/09/30/why-we-chose-echarts/
Learn why GitLab switched from D3.js to ECharts as our library of choice for rendering data visualizations.

Want to Improve UI Performance? Start by Understanding Your User
https://engineering.shopify.com/blogs/engineering/improve-ui-performance-understanding-your-user
I’ll dive into a few key areas that we found made the biggest impact on UI performance: How to assess your current situation and spot areas that could be improved; Prioritizing the loading of components and data; Improving the perceived loading performance by taking a look at how the design of loading states can influence the way users experience load time. Our team has always kept performance top of mind. We follow industry best practices like route-based bundle splitting and are careful not to include any large external dependencies. Nevertheless, it was still clear that we had a lot of room for improvement. The front end of our application is built using React, GraphQL, and Apollo. The advice in this article aims to be framework agnostic, but there are some references to React specific tooling.
另附：Performance metrics for blazingly fast web apps

Middleware-based clipboard handling - meet clipboar
https://ckeditor.com/blog/Middleware-based-clipboard-handling-meet-clipboar/
In the newest version of CKEditor 4, we introduced a new mechanism of handling pasting into the WYSIWYG editor that is provided by the Paste Tools plugin. It is based on a battle-tested idea of middlewares and simplifies the process of adding new paste handlers. We have decided to play around a little bit more with this concept and created a simple library for handling pasting and dropping content into a web page. Read on for more!

Evaluating JavaScript code via import()
https://2ality.com/2019/10/eval-via-import.html
The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works.

I created the exact same app in React and Vue. Here are the differences
https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56
React vs Vue. Finally, a side-by-side code comparison between Vue and React! 🎉 [Updated and rewritten for 2019: Now with React Hooks] Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence - the grass in this scenario being React.

Don’t Sync State. Derive It!
https://kentcdodds.com/blog/dont-sync-state-derive-it
The fact is that you can really simplify your app’s state by considering whether the state needs to be managed by itself or if it can be derived. We learned that derived state can be the result of a single variable of state, or it can be derived from multiple variables of state (some of which can also be derived state itself). So next time you’re maintaining the state of your app and trying to figure out a synchronization bug, think about how you could make it derived on the fly instead. And in the few instances you bump into performance issues you can reach to a few optimization strategies to help alleviate some of that pain.

Avoid 100vh On Mobile Web
https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
Viewport units in CSS sound great. If you want to style an element to take up the full screen height, you can just set height: 100vh and voila - you have a perfect fullscreen element, which resizes as the viewport changes! Sadly, this is not the case. 100vh is broken in a subtle but fundamental way on mobile browsers that makes it nearly useless. It’s best to avoid 100vh and instead rely on javascript to set heights for a full viewport experience.

How to detect machine-translated webpages
https://www.ctrl.blog/entry/detect-machine-translated-webpages.html
There are two primary types of machine-translation services: proxy-based web-tools and web-browser based tools. The former type proxies pages through a translation-service and serves it up to the reader from their servers. These can be detected in JavaScript by reading the document.location property. The latter type is more difficult to detect as the text is translated and swapped in the web browser. However, these services can still be detected by looking for document object modification artifacts that create a recognizable fingerprint.

Why is CSS so Weird?
https://hacks.mozilla.org/2019/10/why-is-css-so-weird/
CSS is the design language of the web — one of three core web languages — but it also seems to be the most contentious and often perplexing. It’s too easy and too hard, too fragile and too resilient. Love it or hate it, CSS is weird: not quite markup, not quite programming in the common (imperative) sense, and nothing like the design programs we use for print. How did we get here?

How CSS Grid changes the way we think about structuring our content
https://www.freecodecamp.org/news/css-grid-changes-how-we-can-think-about-structuring-our-content/
With grid, we no longer have to rely on <div> s to create the structure of our page, or even a more complex component. The structure is literally defined by the parent and not how the content is organized within in. This means we can have nice, simple markup that sticks to the content itself without a reliance on organizing it through the use of <div> s.
另附：Layout-Fun with CSS Grid、Editorial Design Patterns With CSS Grid And Named Columns.

Build a PWA Using Only Vanilla JavaScript
https://levelup.gitconnected.com/build-a-pwa-using-only-vanilla-javascript-bdf1eee6f37a
In this tutorial, we are going to build a PWA using only vanilla JavaScript but to do that we’ll need to make a normal Web App first. Before proceeding any further, let’s have a look at what our final UI would look like and the functionality we are trying to achieve.
另附：Why Progressive Web Apps Are The Future of Mobile Web - 2019 Research.

Power of Protocol Oriented Programming
https://codeburst.io/in-this-article-we-will-talk-about-power-of-protocol-oriented-programming-e15f2b673d56
In this article, We will talk about the power of protocol-oriented programming. It is in talks after it has been introduced to the developer by Apple. Almost everyone in the developer’s community had heard it; at some point in time.

Solving documentation for monoliths and monorepos
https://labs.spotify.com/2019/10/01/solving-documentation-for-monoliths-and-monorepos/
At Spotify, we’re always trying to push the boundaries of the way the world experiences audio. In order to achieve this, our engineers need to learn and move quickly. It is the best way we believe we can achieve the Spotify company mission of unlocking the potential of human creativity. We have been trialling our Mkdocs Monorepo plugin for several weeks with internal squads and we’re happy to share this in beta with the greater open source community.

How to Make Good Code Reviews Better
https://stackoverflow.blog/2019/09/30/how-to-make-good-code-reviews-better/
Good code reviews are the bar that all of us should strive for. They cover common and easy to follow best practices that any team can get started with, while ensuring high-quality and helpful reviews for the long term. Better code reviews are where engineers keep improving how they do code reviews. These code reviews look at the code change in the context of the codebase, of who is requesting it and in what situation. These reviews adjust their approach based on the context and situation. The goal not only being a high-quality review, but also to help the developers and teams requesting the review to be more productive.

How Sqreen handles 50,000 requests every minute in a write-heavy environment
https://stackshare.io/sqreen/how-sqreen-handles-50000-requests-every-minute-in-a-write-heavy-environment
Sqreen is the industry’s first provider of Application Security Management (ASM), a unified platform for security, operations, and engineering teams to help them succeed in building and running secure applications together, without code changes, reduced engineering velocity, or added operational burden. To handle the needs of modern application security, Sqreen uses an agent-based solution that deals with a huge volume of writes.

Building Resilient Serverless Systems
https://www.infoq.com/presentations/serverless-resiliency-infrastructure-as-code/
John Chapin explains how to use serverless technologies and an infrastructure-as-code approach to architect, build, and operate large-scale systems that are resilient to vendor failures, even while taking advantage of fully managed vendor services and platforms. He leads an end-to-end demo of the resilience of a well-architected serverless system in the face of massive simulated failure.

Processing 40 TB of code from ~10 million projects with a dedicated server and Go for $100
https://boyter.org/posts/an-informal-survey-of-10-million-github-bitbucket-gitlab-projects/
There are two parts to this interesting study. First, the why and how of grabbing code from 10 million repositories, and secondly the results of his analysis over the downloaded code. There’s basically something for everyone in here, even if it’s just the most popular curse words in public repos(!)

新鲜货

Happy 25th anniversary, World Wide Web Consortium!
https://www.w3.org/blog/2019/10/happy-25th-anniversary-world-wide-web-consortium/
Since then we at the Web Consortium have led the Web to its full potential by convening industry, researchers, and the global community of Web developers to create freely available and open standards that ensure that the Web remains open, accessible, and interoperable for everyone around the globe. Software developers implement these standards in browsers, servers, blogs, graphic editors, search engines, and all the other software that powers the Web experience.

npm turns 10
https://blog.npmjs.org/post/188070866415/npm-turns-10
It’s our ten-year anniversary! To celebrate, we thought we’d share some milestones we’ve reached along the way. Thank you to all who have helped us get here.

TensorFlow 2.0.0
https://github.com/tensorflow/tensorflow/releases/tag/v2.0.0
TensorFlow 2.0 focuses on simplicity and ease of use, featuring updates like:

• Easy model building with Keras and eager execution.
• Robust model deployment in production on any platform.
• Powerful experimentation for research.
• API simplification by reducing duplication and removing deprecated endpoints.
  另附：Algorithmia is TensorFlow 2.0 Compatible.

Vue 3.0 终于来了
https://mp.weixin.qq.com/s?__biz=MzIyMjQ0MTU0NA==&mid=2247492553&idx=2&sn=82099b51ef8e9c25334b9654bac8c109
Vue 3.0 的想法是引入灵感来自于 React Hook 的 Function-based API，作为主要的组件声明方式。

Node-RED Version 1.0 released
https://nodered.org/blog/2019/09/30/version-1-0-released
Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click.

Hydra: A framework that simplifies development of complex applications
https://engineering.fb.com/open-source/hydra/
Hydra is a lightweight framework that simplifies the development of Python applications, especially complex ones, by introducing the ability to compose and override configurations. Hydra makes it easier to add functionality to projects to accommodate new use cases and requirements without having to rewrite significant portions of code.
另附：Fundamentals of Python Programming.

Mesh Spreadsheet
https://github.com/chrispsn/mesh
Mesh is a JavaScript code editor that feels like a spreadsheet. Specifically, Mesh is a spreadsheet UI wrapper around a text file editor. Actions on the grid are automatically translated to changes in the JavaScript code. Mesh helps people maximise their personal productivity and to share their work with others. Consider Mesh if you: use JavaScript, but want rapid visual feedback and a convenient grid UI use spreadsheets, but feel constrained by Excel’s limitations.

Bot Land - An online strategy game with a focus on automation
https://bot.land/
Design your bot, Choose your hardware, Tell it what to do, Battle other players!

HEAD
https://htmlhead.dev/
A list of everything that could go in the head of your document. A free guide to HTML5 <head> elements.

Zero Divs! Pure CSS pixel art animation!
https://codepen.io/ivorjetski/pen/xxKBWBN
This is a fun experiment in CSS art, using no HTML, JavaScript or images. Not practical in production of course as the resulting CSS file is massive.

X3DOM
https://www.x3dom.org/
Integrate 3D content seamlessly into your webpage - the scene is directly written into the HTML markup. No Plugins needed. Simply include a javascript file. Free for non-commercial and commercial purposes.
另附：How to Make 3D Charts for the Web Using D3 and X3DOM

OGL - Minimal WebGL framework
https://github.com/oframe/ogl
OGL is a small, effective WebGL framework aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders. With zero dependencies, the API shares many similarities with ThreeJS, however it is tightly coupled with WebGL and comes with much fewer features. In its design, the framework does the minimum abstraction necessary, so devs should still feel comfortable using it in conjunction with native WebGL commands. Keeping the level of abstraction low helps to make the framework easier to understand and extend, and also makes it more practical as a WebGL learning resource.

Ink 2.5
https://github.com/vadimdemedes/ink
React for CLIs. Build and test your CLI output using components.

NodeGUI
https://github.com/nodegui/nodegui
Build performant, native and cross-platform desktop applications with JavaScript + powerful CSS like styling.🚀 NodeGUI is powered by Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron.

Taiko
https://github.com/getgauge/taiko
A node.js library to automate chrome/chromium browser. Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks. Taiko is a node library with a clear and concise API to automate the chrome browser. Tests written in Taiko are highly readable and maintainable.

Carbon - Create and share beautiful images of your source code
https://github.com/carbon-app/carbon
You know all of those code screenshots you see on Twitter? Though the code’s usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.

KarelDB - A Relational Database Backed by Apache Kafka
https://github.com/rayokota/kareldb
https://www.datanami.com/2019/10/01/kafka-transforming-into-event-streaming-database/
KarelDB is a fully-functional relational database backed by Apache Kafka.
另附：PostgreSQL 12 Released!.

More Than a Query Language: SQL in the 21st Century
https://modern-sql.com/slides/MoreThanAQueryLanguage-2019-10-01.pdf
It’s rare we’d include an item that’s both a PDF and a slide deck as a featured item, but when it’s Markus Winand going deep on SQL’s history and developments in 21st century versions of the SQL spec, it’s a must see.
另附：SQL queries don’t start with SELECT.

Conventional Commits
https://www.conventionalcommits.org/en/v1.0.0/
A specification for adding human and machine readable meaning to commit messages.

Calibre 4.0
https://calibre-ebook.com/new-in/thirteen
It has been two years since calibre 3.0. This time has been spent mostly in making the calibre Content server ever more capable as well as migrating calibre itself from Qt WebKit to Qt WebEngine, because the former is no longer maintained. The Content server has gained the ability to Edit metadata, Add/remove books and even Convert books to and from all the formats calibre itself supports. It is now a full fledged interface to your calibre libraries. The change to use Qt WebEngine has entailed a complete rewrite of various parts of calibre, including the E-book Viewer, PDF Output, Book details etc.

hard-comp-fi-fiction-list
https://fiftysevendegreesofrad.github.io/hard-comp-fi-fiction-list/
This resource lists a bunch of stories which in some way, explore the beautiful ideas behind computer science, software engineering and even plain old programming.

20,000 Startup Ideas
https://unawaz.github.io/stochastic-hill-climbing/tasks/
This gives a kind of map of the territory of current economically important human activities. Therefore it represents a good source of startup ideas. It maybe is even the listing of approximately all startup ideas.
另附：Y - Combinator Logo Top Companies List - 2019.

设计

如何写出清晰易懂的交互文档？我整理了这份指南
https://www.uisdc.com/interactive-document
交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。工作上而言，有一份规范的文档可以让你的设计更有说服力，也易于工作对接，提高彼此之间的沟通效率。本文主要阐述以Axure软件为撰写工具，大家可以根据实际需求决定用什么软件（Sketch、PPT、Word、PS、AI 等）。比如小需求可以用Sketch，快而高效。如果是要给甲方爸爸/大老板看的，使用PPT会让他们更好理解。

Lets dive deep into Sketch2React 1.6+
https://medium.com/sketch-app-sources/lets-dive-deep-into-sketch2react-1-6-45c42ac790c5
Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.5 (pre-release). And a nice discount code on the bottom of this article.

The Obvious UI is Often the Best UI
https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd
Design clear interactions instead of clever ones, and users will follow. When we talk about common sense with product design, what we now see as strikingly obvious may not have been so apparent to designers when they first started. For a long time, designers have endeavored to make products as easy to use and navigate as possible. However, in order to highlight their products’ features, it has taken time for designers to understand users’ needs and challenges and iterate.

Reconciling the Differences in Our Data: A Mixed-Methods Research Story
https://medium.com/microsoft-design/reconciling-the-differences-in-our-data-a-mixed-methods-research-story-6c1a2fe2f9f4
Five steps for turning data discrepancy into better outcomes for customers.

How to Use Visual Hierarchy to Create Impactful Interfaces
https://uxplanet.org/how-to-use-visual-hierarchy-to-create-impactful-interfaces-cea400b6eea5
Visual hierarchy is about prioritizing design elements to effectively communicate information to users. What makes effective communication? It’s when a business delivers the right message about product purpose and philosophy, ensuring that people can easily explore and use a product. So, it’s crucial to align visual emphasis with the goal of a specific page or content.

Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force
https://www.smashingmagazine.com/2019/10/inspired-design-decisions-bea-feitler/
In this fifth installment of Inspired Design Decisions, Andy Clarke will teach you about Bea Feitler, who directed Harper’s Bazaar throughout the 1960s and has been described as “the pioneering female art director you’ve never heard of.” Andy will teach you about Feitler’s confident work and show you how to apply some of her design techniques to the work you make for the web. In this article, you’ll learn how to emphasize scale and maintain its contrast on even the smallest screens. Andy will teach you how to make confident color choices, and how to use pattern and texture to add depth to your designs.

产品及其它

What are weird and/or novel ways to do web UIs?
https://news.ycombinator.com/item?id=21144228
Do you know any websites that have weird UIs ? Something like a ZUI for example.

Why you shouldn’t ignore your competitors
https://producthabits.com/stop-ignoring-competitors/
This post is written by Marie Prokopets, co-founder of Product Habits and FYI, and features slides presented by her co-founder Hiten Shah at the 2019 Appealie SaaS Conference. I’ve been told countless times to ignore my competitors. Don’t waste time thinking about what they are doing. Don’t look at their latest features. Don’t worry about them. Basically, pretend they don’t exist. Instead, I’m told to focus on my customers.

世界上没有技术驱动型公司
https://mp.weixin.qq.com/s?__biz=MzA3NDQyNDM5NA==&mid=2650429654&idx=1&sn=a89286d212cd64e546ea2f41f715deb5
世界上没有技术驱动型公司，不论Google、Facebook，还是腾讯、阿里，都不是技术驱动型公司。因为技术不是源头，需求才是。因此一切技术问题，都要服从产品交付和市场反馈。所以，任何公司都不可能以技术去驱动自身。人可以以技术驱动自己进步，但公司不行。一家公司可以以技术切入某个市场，但如果它想生存下去，就一定不能以技术为导向，坚持以技术为导向的公司的生命力为零，其下场有两个：破产或者在破产之前被收购。

跟共产党学创业
https://mp.weixin.qq.com/s?__biz=MjM5ODAxODQ0MA==&mid=2651133477&idx=1&sn=d8c260f6f3964b10bb7d5279b293bccb
新中国成立70周年，也是中国共产党近百年的风雨兼程。每一步都留有痕迹。2月13日，在致良知四合院“春雷浩荡”直播学习会上，国防大学金一南教授发表了特邀演讲——《团队的灵魂与血性》。昨日之历史，今日之借鉴。金一南教授用2小时，历数中国近代以来那些深刻影响历史进程的队伍与将领，揭示背后的秘密。

– THE END –