2019.11.18 - Moving towards a faster web

========

深阅读

Chrome Dev Summit 2019 - All Sessions
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr
We’ll be diving deep into what it means to build a fast, high quality web experience using modern web technologies and best practices, as well as looking at the new and exciting capabilities coming to the web platform. 另附:Elevating the Web Together, Making new experiences possible on the web, Moving towards a faster web.

New from Universe 2019: GitHub for mobile, GitHub Archive Program, and more
https://github.blog/2019-11-13-universe-day-one/
https://github.com/mobile
https://archiveprogram.github.com/
It’s our favorite time of year: GitHub Universe gives us all two days to celebrate 40+ million developers and their contributions to the open source community. In the past year alone, over 10 million developers have joined from nearly three million organizations in over 70 countries. We also made several exciting announcements.

WaterfallProcess
https://martinfowler.com/bliki/WaterfallProcess.html
In the software world, “waterfall” is commonly used to describe a style of software process, one that contrasts with the ideas of iterative, or agile styles. Like many well-known terms in software it’s meaning is ill-defined and origins are obscure - but I find its essential theme is breaking down a large effort into phases based on activity.

Build your own React
https://pomb.us/build-your-own-react/
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes.

How Concurrent React changes the game for data-heavy UI
https://medium.com/@winwardo/how-concurrent-react-changes-the-game-for-data-heavy-ui-a0f432655625
Concurrent React and Suspense are shaping up to heavily change how dynamic data-driven UIs are built.

云凤蝶可视化搭建的推导与实现
https://zhuanlan.zhihu.com/p/90746742
本文将以概览性的视角来介绍云凤蝶在 低代码+可视化搭建 这条路上遇到的问题与解决方案,包括:中后台 Web 应用搭建有哪些关键要素?可视化编辑器如何对齐 Pro Code 下视图 DSL 的表达能力?交互逻辑与状态如何进行组织与聚合?如何基于可视化底盘去探索 10 倍效能提升?

CSS值类型文档大全
https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/
以前介绍过CSS单位大全,这里介绍下CSS值类型大全。CSS值类型都是用 <> 括起来表示。

OutSystems UI Framework: Past, Present, and Future
https://www.outsystems.com/blog/posts/ui-framework-future/
With the release of OutSystems UI, a single UI framework that supports both mobile and web applications, we took a significant step towards achieving our vision for the front-end of the platform. Launching this unified framework was a very challenging process, and here I’ll provide a developer’s perspective of what was the past and present, and what you may expect from future UIs at OutSystems.

Responsible JavaScript: Part III
https://alistapart.com/article/responsible-javascript-part-3/
In this installment of Responsible JavaScript, we’ll take a slightly less technical approach than in the previous installment. We are going to talk more about the human side of third parties. Then, we’ll go down some of the technical avenues for how you might go about tackling the problem.

How Discord achieves native iOS performance with React Native
https://blog.discordapp.com/how-discord-achieves-native-ios-performance-with-react-native-390c84dcd502
We knew that our app was once fast, and we wanted to more deeply understand if the problems we were seeing could be tackled on our end, or if the issue was more deeply rooted in React Native itself. With this in mind, we created a mobile performance squad, whose mission was to execute a deep dive into driving top tier performance on across all supported iOS devices. We would like to share what we have learned! 另附:Microsoft looks to React Native as a way to tackle the cross-platform development puzzle.

Semantic sidenotes for the web
https://www.kooslooijesteijn.net/blog/semantic-sidenotes
On this website, sidenotes appear next to the article when there’s enough space. On small screens, they’re hidden by default and can be made visible with a tap. The problem is, it’s hard to find a properly semantic HTML solution to do this.

instant.page 3.0 — incorporating the best from quicklink
https://instant.page/v3
instant.page makes your site’s pages instant — in 1 minute of effort — by preloading pages right before a user clicks on them: when they hover over a link for 65 ms; there’s one chance out of two that they will click then. On mobile, it preloads when they start touching their display, before releasing it.

Page Simulation for Better Offline Metrics at Netflix
https://medium.com/netflix-techblog/page-simulator-fa02069fb269
At Netflix, we spend a lot of effort to make it easy for our members to find content they will love. To make this happen, we personalize many aspects of our service, including which movies and TV shows we present on each member’s homepage. Over the years, we have built a recommendation system that uses many different machine learning algorithms to create these personalized recommendations.

Why is the Migration to Python 3 Taking So Long?
https://stackoverflow.blog/2019/11/14/why-is-the-migration-to-python-3-taking-so-long/
In Pycon in 2014, Guido van Rossum, the creator of Python and, at the time, the Benevolent Dictator For Life of the language, stood on stage in a shirt that had a large 2.8 written on it in block letters, with a big red no entry sign through it. “It’s time to move on to Python 3,” he said, telling the audience that they should start adopting the new version of the language into their workflows. 另附:My Python Development Environment, 2020 Edition.

新鲜货

The Front-End Tooling Survey 2019 - Results
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
It’s been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here!

Cloud Run, a managed Knative service, is GA
https://cloud.google.com/blog/products/serverless/knative-based-cloud-run-services-are-ga
we’re announcing that Cloud Run is generally available, helping developers focus on writing high-value code, regardless of where their organizations are on the path to the cloud. Specifically, we’re announcing: Cloud Run, a fully managed serverless execution environment that lets you run stateless HTTP-driven containers, without worrying about the infrastructure.

Brave Launches Next-Generation Browser that Puts Users in Charge of Their Internet Experience with Unmatched Privacy and Rewards
https://brave.com/brave-launches-next-generation-browser/
Brave Software, makers of the innovative Brave browser which combines privacy with a blockchain-based digital advertising platform, today announced the official launch of Brave 1.0. The Brave open source browser fundamentally shifts how users, publishers, and advertisers interact online by giving users a private, safer, and 3-6x faster browsing experience, while funding the Web through a new attention-based platform of privacy-preserving advertisements and rewards. In addition to desktop and Android devices, Brave’s private ads and payment platform (Brave Rewards) is now available for iPhones and iPads. 另附:Brendan Eich, inventor of JavaScript and cofounder of Mozilla, and I’m doing a new privacy web browser called “Brave” to END surveillance capitalism.

Announcing the Bytecode Alliance: Building a secure by default, composable future for WebAssembly
https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/
The Bytecode Alliance is a new industry partnership (originally between Mozilla, Fastly, Intel, and Red Hat) designed to forge WebAssembly’s ‘outside-the-browser’ future. If you’re not yet in sync with why WebAssembly outside the browser makes sense, this announcement should give you a good idea. 另附:Thermostats, Locks and Extension Add-ons – WebThings Gateway 0.10.

chart-parts - A flexible, React-friendly, Grammar of Graphics for data visualization
https://microsoft.github.io/chart-parts/
The vision of chart-parts is to implement a grammar of graphics in JavaScript in a flexible, architecture-agnostic way while dovetailing nicely with frameworks application developers use such as React. To date, implementations of the Grammar of Graphics have tended to exist as closed systems. While a closed system can be useful for certain categories of users, we believe that these systems should provide escape hatches and flexibility.

Redux Toolkit
https://redux-toolkit.js.org/
The official, opinionated, batteries-included toolset for efficient Redux development

html-react-parser
https://github.com/remarkablemark/html-react-parser
HTML to React parser that works on both the server (Node.js) and the client (browser): It converts an HTML string to one or more React elements.

react-interactive-paycard
https://github.com/jasminmif/react-interactive-paycard
Inspired from a vue project vue-interactive-paycard, I decided to recreate the same on React as a part time fun project. I did some minor changes on the animations and optimizations on the code. A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive.

Fabric
https://github.com/fabricjs/fabric.js
Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

ky
https://github.com/sindresorhus/ky
Tiny & elegant HTTP client based on window.fetch.

Ajv: Another JSON Schema Validator
https://github.com/epoberezkin/ajv
The fastest JSON Schema validator for Node.js and browser. Supports draft-04/06/07.

PM2 4.2
https://github.com/Unitech/pm2/releases/tag/4.2.0
Node.js Production Process Manager with a built-in Load Balancer.

linkinator
https://github.com/JustinBeckwith/linkinator
A super simple site crawler and broken link checker.

Botpress — The open-source Virtual Assistant platform
https://github.com/botpress/botpress
Botpress is an open-source all-in-one bot creation platform that provides all the tools you need to build, debug and deploy AI-based conversational assistants.

NodeBB
https://github.com/NodeBB/NodeBB
NodeBB Forum Software is powered by Node.js and built on either a Redis or MongoDB database. It utilizes web sockets for instant interactions and real-time notifications. NodeBB has many modern features out of the box such as social network integration and streaming discussions, while still making sure to be compatible with older browsers.

The Maturing of QUIC
https://www.fastly.com/blog/maturing-of-quic
It’s no secret Fastly loves QUIC. Not only because we believe it is a necessary step toward a better, more trusted internet. But also because some of us here have been actively involved in the process of taking QUIC from an experiment to an internet standard for more than six years.

Go.dev: a new hub for Go developers
https://blog.golang.org/go.dev
we are launching go.dev, a new hub for Go developers, to help answer those questions. There you will find a wealth of learning resources to get started with the language, featured use cases, and case studies of companies using Go. 另附:10 things I like about Go, The Value in Go’s Simplicity.

Introducing Basecamp Personal
https://basecamp.com/personal
The free way to run Basecamp for freelancers, students, families, and personal projects. Give it a try.

设计

Better Design With Deep Thinking
https://www.smashingmagazine.com/2019/11/better-design-deep-thinking/
Task switching is a design killer. Find out why switching and interruptions are even more serious than you think and how biology makes it difficult to resist the temptation to just check your email every few minutes. Learn how to slay the distraction dragon with five practical tips for increasing focus as you tackle challenging design problems.

Web Animation In The Post-Flash Era
https://www.toptal.com/designers/web/animating-the-web-in-the-post-flash-era
HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solutions for web animation. Using these modern web technologies and languages will help tackle most, but not all, of the above problems. But it’s always a good idea to tread carefully, especially when in uncharted territory, and extensive QA and testing is a must.

Sketch 60 — Let’s talk about the awesome, new Components panel
https://medium.com/sketch-app-sources/sketch-60-lets-talk-about-the-awesome-new-components-panel-dd7c4a3b292b
Working with Symbols is now better than it’s ever been with this latest Sketch release.

Five Traits of Great User Researchers
https://medium.com/microsoft-design/five-traits-of-great-user-researchers-1bb843230c7a
Advice for taking your UX research career to the next level.

看完Adobe Max 2019,90%的设计师都把电脑砸了…
https://www.uisdc.com/2019-adobe-max
https://mp.weixin.qq.com/s?__biz=MzIzNjc1NzUzMw==&mid=2247532898&idx=1&sn=7f6297f5e4d4bbe083634b4ce889948c
本次 Max 大会的主题就是:全面解放设计师的生产劳动力。更快、更强、更带劲的设计工具;随时随地、随便谁都能肆意创作;新的创作维度,让绘画超越平面。

产品及其它

Microsoft previews the future of Office documents with Fluid Framework for the web
https://www.theverge.com/2019/11/4/20942031/microsoft-fluid-framework-office-web-preview
https://www.uisdc.com/fluid-framework
You can now play around with Microsoft’s vision for the future of the web.

21岁的腾讯,价值观变了!任宇昕与张小龙在思考什么
https://mp.weixin.qq.com/s/cRTrUQXA_KV_91aUdQepUg
11月11日,腾讯迎来了21岁生日,并正式对外公布了新使命愿景“用户为本,科技向善”。这是腾讯自2003年以来,对企业文化进行的第三次升级。早在5月,马化腾就通过朋友圈透露了“科技向善,我们新的愿景和使命”,所以外界的关注点也都聚焦于使命和愿景的变化上。事实上,腾讯的价值观也发生了“一点变化”,从过去的“正直、进取、合作、创新”,更新为“正直、进取、协作、创造”。据21Tech独家获悉,腾讯将价值观中的“合作”变为“协作”、“创新”变为“创造”,其实是来自于腾讯COO任宇昕和腾讯高级执行副总裁张小龙的推动,而这背后,是他们对腾讯公司管理运营乃至工作方式的观察和思考。

增长过后,如何留住你的用户?
https://mp.weixin.qq.com/s/d3o1lgcdd7wew7QCQxYyqA
在流量红利已不明显的今天,对于创业公司来说,找到可执行的、有效的增长途径非常重要。但与此同时,很多人都忽视了对客户流失的管理。数据显示,获得一个新客户的费用要比留存一个旧客户的成本高7倍。当客户留存率提高5%时,收益可以增加25%到95%。由此可见,提高客户留存率是企业最重要的目标之一。今天分享的这篇文章,分享了客户流失的两种原因,希望能为你带来一些可供借鉴的启发。

专访曾鸣:下沉是中国过去创新模式的最后一次爆发,往后大家都得做更辛苦的事
https://mp.weixin.qq.com/s?__biz=MzU4MTY0NzE5NQ==&mid=2247484959&idx=1&sn=e7bee17a9e22ac8bc1bf2afec07bde06
《智能商业》一书探讨了未来的商业模式,即网络协同和数据智能共同构成了新商业生态系统的DNA。在《智能战略》中,曾鸣进一步讨论了数据和网络如何重塑商业战略,并提供了组织企业、创造价值以及打造竞争优势的全新思路和可行方法。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-11-18·再创经典 ghost map、性别工资差距、故宫的历史、声音可视化

- 百度数据可视化
- 百度智能建站