2019.11.25 - The Firefox UI is now built with Web Components

深阅读

The Firefox UI is now built with Web Components
https://briangrinstead.com/blog/firefox-webcomponents/
The Firefox UI can be thought of as a very large single page app. It was built with DOM and JS from the start, which was a bold technology choice for a native application 20+ years ago. Because of this, Mozilla implemented some features necessary to build complex web applications way before the Web platform supported them. Over time, these features have evolved into specifications like CSS flexbox and Web Components. When this happens, it’s easy to allow the existing codebase to continue to use the original version, and require the platform supports both features. This makes sense - rewriting legacy code that already works is difficult and not always cost effective. But we made a decision while Web Components were being implemented in Firefox to start a parallel project in which we would migrate our existing UI components to use them.

V8 release v7.9
https://v8.dev/blog/v8-release-79 Removed deprecation for Double ⇒ Tagged transitions; Handle API getters in builtins; OSR caching. 另附：Outside the web: standalone WebAssembly binaries using Emscripten, How We Compiled a Golang Database in the Browser Using WebAssembly, Multi-Value All The Wasm!.

JavaScript 2019 - The Web Almanac by HTTP Archive
https://almanac.httparchive.org/en/2019/javascript
The HTTP Archive crawls millions of pages every month and runs them through a private instance of WebPageTest to store key information of every page. (You can learn more about this in our methodology). In the context of JavaScript, HTTP Archive provides extensive information on the usage of the language for the entire web. This chapter consolidates and analyzes many of these trends. 另附：CSS - 2019.

Highlights from Chrome Dev Summit 2019
https://bitsofco.de/chrome-dev-summit-2019/
I’ve been going to Chrome Dev Summit for a couple of years now (2016 & 2018) and I always like to do this roundup article, highlighting what I thought were the most interesting ideas and projects from the conference. So let’s get into it!

知源 · 致远 - AntV 11.22 年度发布
https://www.yuque.com/antv/blog/2019-release
AntV 是一个数据可视化项目，也是一个团队，蚂蚁金服数据可视化团队，一群有爱有梦的人，怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行， 希望成就智能时代全球领先的数据可视化解决方案，满足与日俱增的数据洞察需求。AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化多个领域，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑起阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验，是阿里经济体数据可视化最重要的基础设施。

蚂蚁前端研发最佳实践
https://mp.weixin.qq.com/s/BlbXnt-TRGxQwklV87IkzA
以下是云谦在 2019.11.15 成都全栈大会分享的文字稿，介绍了蚂蚁前端研发的最佳实践，其中提取了三个比较重要的点，每个点都是蚂蚁实践和深入思考后的结果，希望能对大家有所启发。

双11模块79.34%的前端代码是怎样智能生成的？
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247493193&idx=1&sn=068cb894b3b6064e1173ee911eb03190
最近几年，AI 渗透到开发领域的方方面面。在前端领域，设计稿生成代码（简称 D2C）就是一个例子。其目标在于通过 AI 助力前端提效升级，杜绝简单重复性的工作内容。今年“双十一”，阿里的 D2C 覆盖了天猫淘宝会场的新增模块，包含了视图代码和部分逻辑代码的自动生成。在可统计范围内，D2C 代码生成占据了相当大的比例。那么，这 79.34% 的前端代码是如何智能生成的？在实践过程中存在哪些技术痛点，开发人员又形成了怎样的思考？你的企业是否也可以落地 D2C？本文将通过阿里的实践案例为你解答。

2019 TWeb 腾讯前端技术大会精彩回顾
https://mp.weixin.qq.com/s/RKgnFiCdOhtiBbEjawAAAA
TWeb 腾讯前端技术大会的总结，为了更清晰地阐述一些技术点，我会加上自己的理解介绍大会中的重点内容和相关技术落地的成果或进度.

来聊聊面向模板的前端开发
https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651234675&idx=2&sn=83c4d76abfd06284b770432829624da8
面向模板的开发方式很好，能够大幅度提高业务前端开发效率，一定程度上减少了业务系统的搭建速度；作为核心的模板和节点树是保持中立的，大大降低了运行时技术栈的迁移成本，且能够应对多端等场景。为了效率，一家公司里的业务前端开发到最后一定是面向模板，而非面向组件。

Jupyter在美团民宿的应用实践
https://tech.meituan.com/2019/11/21/application-practice-jupyter.html
本文我们将分享美团民宿团队是如何搭建自己的「Kaggle Kernels」—— 一个平台化的Jupyter，接入了大数据和分布式计算集群，用于业务数据分析和算法开发。希望能为有同样需求的读者带来一些启发。

Request with Intent: Caching Strategies in the Age of PWAs
https://alistapart.com/article/request-with-intent-caching-strategies-in-the-age-of-pwas/
To provide the best possible experience for our users without abusing their network connection or their hard drive, it’s time to put a spin on some classic best practices, experiment with media caching strategies, and play around with a few Cache API tricks that Service Workers have hidden up their sleeves.

6 Patterns for Microfrontends
https://blog.bitsrc.io/6-patterns-for-microfrontends-347ae0017ec0
An overview of microfrontend patterns: advantages, drawbacks and implementation.

Is Flutter ready for Enterprise mobile apps?
https://medium.com/digio-australia/is-flutter-ready-for-enterprise-mobile-apps-e3e9a0f11bea
My aim here is to find at least one Flutter solution for each requirement, hopefully to show that Flutter is now ready to build Enterprise apps with little to no hybrid coding required. You may have unique requirements beyond these so of course your results may vary!

Local-first software: you own your data, in spite of the cloud
https://blog.acolyer.org/2019/11/20/local-first-software/
The authors coin the phrase “local-first software” to describe software that retains the ownership properties of old-fashioned applications, with the sharing and collaboration properties of cloud applications. Great local-first software should have seven key properties.

I created the exact same app in React and Svelte. Here are the differences.
https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-svelte-here-are-the-differences-c0bd2cc9b3f8
React vs Svelte. Finally, a side-by-side code comparison! Because you’ve heard the fuss about Svelte, and now you want to know what the hype is all about.

Ultimate list of all tools we used to create a hit HTML5 game on Steam
https://www.codecks.io/blog/2019/creating-a-hit-steam-game-in-html5/
In 2012 we started working on Curious Expedition. Back then HTML5 was a different landscape, but the idea of being on the forefront of this tech was exciting to me. I started building a custom engine using HTML5’s 2D Canvas support with the understanding that we would switch over to a proper engine once we hit a boundary for our vision of the game. Turns out that we never did and we ultimately ended up shipping a true HTML5 premium game on Steam, GOG and the HumbleStore. It has sold over 200,000 units to this date and features a strong 89% rating on Steam. This page features the ultimate list of every single tool and platform that we used during the development of Curious Expedition together with a verdict of if I would use it again or not.

Uber Visualization Highlights: How Urban Symphony Adds an Audio Dimension to Visualization
https://eng.uber.com/urban-symphony/
Uber’s Data Visualization team builds software that enables us to better understand how cities move through dynamic visualizations. The Uber Engineering Blog periodically highlights visualizations that showcase how these technologies can turn aggregated data into actionable insights.

Modern Data Practice and the SQL Tradition
https://tselai.com/modern-data-practice-and-the-sql-tradition.html
A specter is haunting Data Science—the specter of SQL. All the powers of new Data Management have entered into a holy alliance to exorcise this specter; Data Scientists and engineers, managers and developers, hipsters and disruptors. Especially among the young breeds of data practitioners, there is a growing consensus that SQL is not “cool”, not good enough or even worse “SQL is not professional enough and real data scientists should code”. My own experience, however, has taught me otherwise. Whether it is at the first stages of the pipeline like data collection and cleaning or the latter ones like feature engineering and report generation, I have come to appreciate the power and versatility of SQL and the effectiveness of RDBMS. In this essay, I collected some of my thoughts on the topic of SQL and how it fits into modern data practice. 另附：Modern SQL - A lot has changed since SQL-92.

Microsoft REST API Guidelines
https://github.com/Microsoft/api-guidelines/blob/master/Guidelines.md
The Microsoft REST API Guidelines, as a design principle, encourages application developers to have resources accessible to them via a RESTful HTTP interface. To provide the smoothest possible experience for developers on platforms following the Microsoft REST API Guidelines, REST APIs SHOULD follow consistent design guidelines to make using them easy and intuitive. This document establishes the guidelines Microsoft REST APIs SHOULD follow so RESTful interfaces are developed consistently.

Successfully Merging the Work of 1000+ Developers
https://engineering.shopify.com/blogs/engineering/successfully-merging-work-1000-developers
Collaboration with a large team is challenging, and even more so if it’s on a single codebase, like the Shopify monolith. Shopify changes 40 times a day. We follow a trunk-based development workflow and merge around 400 commits to master daily. There are three rules that govern how we deploy safely, but they were hard to maintain at our growing scale.

A Philosophy of Software Design: My Take (and a Book Review)
https://blog.pragmaticengineer.com/a-philosophy-of-software-design-review/
I was somewhat skeptical when starting to read a Philosophy of Software Design, despite having it recommended by a friend. The book does a delightful job underselling itself. This post summarizes key takeaways of the book and my take on these principles, drawing from my professional and industry experience.

The Rise of Serverless Computing
https://cacm.acm.org/magazines/2019/12/241054-the-rise-of-serverless-computing/fulltext
Cloud computing in general, and Infrastructure-as-a-Service (IaaS) in particular, have become widely accepted and adopted paradigms for computing with the offerings of virtual machines (VM) on demand. By 2020, 67% of enterprise IT infrastructure and software spending will be for cloud-based offerings.1 ExploratoryTesting
https://martinfowler.com/bliki/ExploratoryTesting.html
Exploratory testing is a style of testing that emphasizes a rapid cycle of learning, test design, and test execution. Rather than trying to verify that the software conforms to a pre-written test script, exploratory testing explores the characteristics of the software, raising discoveries that will then be classified as reasonable behavior or failures.

Developer Roadmaps
https://roadmap.sh/roadmaps
Step by step guides and paths to learn different tools or technologies.

The Architect of Modern Algorithms
https://www.quantamagazine.org/barbara-liskov-is-the-architect-of-modern-algorithms-20191120/
Barbara Liskov pioneered the modern approach to writing code. She warns that the challenges facing computer science today can’t be overcome with good design alone.

I heard the Full-stack position is a lie
https://cheesecakelabs.com/blog/heard-full-stack-position-lie/
This post isn’t about a brand new discussion. I’ve seen this topic later on Twitter, blog posts, tech conferences – like FloripaJS – in my city, as well as other social networks. So I felt I could bring some of my thoughts about it, because I’ve worked as a Full-stack developer for a long time, and am I living a lie?

5 Things I’ve Learned in 20 Years of Programming
https://daedtech.com/5-things-ive-learned-in-20-years-of-programming/
I’m now pushing 20 years in the industry. I spent about 10 of those in roles where my primary function was to write code. The other 10 have involved managing programmers, coaching them, consulting with organizations about how to manage them, running a codebase assessment practice and these days, well, actually content marketing. This made me wonder to myself, “if I could summarize this experience into succinct bits of advice, and assuming that anyone actually cared, what would I tell these folks?” And that’s the premise for this post. The following are the things I consider to be the most important lessons and takeaways from a 20 year programming career.

新鲜货

Announcing core Node.js support for ECMAScript modules
https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
Node.js 13.2.0 ships support for ECMAScript modules, known for their import and export statements. This support was previously behind the–experimental-module flag, which is no longer required; however the implementation remains experimental and subject to change.

webOS Open Source Edition 2.0 Released
https://www.qt.io/blog/webos-open-source-edition-2.0.0-released
Among many of the updates, the highlights are as follows: Upgrade of reference hardware to Raspberry Pi 4; Passenger-friendly reference UI/UX; Support for dual-displays; Firmware-Over-the-Air (FOTA)…

GitLab 12.5 with EKS Cluster Creation & Environments Dashboard
https://about.gitlab.com/blog/2019/11/22/gitlab-12-5-released/
https://about.gitlab.com/blog/2019/11/20/from-idea-to-production-on-thousands-of-clouds/
To deliver high-quality software as efficiently as possible, enterprises need to support a wide range of infrastructure, across multiple clouds. This month’s GitLab 12.5 release makes it even easier to configure, monitor, and manage projects across a variety of configurations.

Meet Doctor, a new React Native command
https://facebook.github.io/react-native/blog/2019/11/18/react-native-doctor.html
After over 20 pull requests from 6 contributors in the React Native Community, we’re excited to launch react-native doctor, a new command to help you out with getting started, troubleshooting and automatically fixing errors with your development environment. The doctor command is heavily inspired by Expo and Homebrew’s own doctor command with a pinch of UI inspired by Jest.

Real web development on iPad
https://notebook.lachlanjc.me/2019-11-05_real_web_development_on_ipad/
As a web designer-developer, I’ve been doing all my work from a MacBook Pro since the beginning. But as a student carrying & using my iPad Pro for 95% of my work, I wanted a portable coding setup I could use from my iPad. Full-stack web development on iPad comes with many constraints, but it enables creating all kinds of custom workflows fairly simply.

Creating UI Extensions for WebThings Gateway
https://hacks.mozilla.org/2019/11/ui-extensions-webthings-gateway/
Version 0.10 of Mozilla’s WebThings Gateway brings support for extension-type add-ons. Released last week, this powerful new capability lets developers modify the user interface (UI) to their liking with JavaScript and CSS.

Pika Registry - The JavaScript package registry for the modern web
https://www.pika.dev/registry
Pika is a new kind of package registry for the modern web. 100% ESM. Write once, run natively on every platform.

Facebook and Microsoft Partnering on Remote Development
https://developers.facebook.com/blog/post/2019/11/19/facebook-microsoft-partnering-remote-development
We’re making Visual Studio Code the default development environment at Facebook and teaming with Microsoft to help enhance their remote development extensions in an effort to enable engineers to do remote development at scale.

Time Traveling State Debugger — Reactime — Now Supporting Concurrent Mode, Routers, and more
https://blog.usejournal.com/time-traveling-state-debugger-reactime-now-supporting-concurrent-mode-routers-and-more-56f9ca6f7601
Reactime is an open-source Chrome developer tool — inspired by Redux DevTools — which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state, persist state across refreshes, yada yada yada… you get the idea. 另附：11 Top React Developer Tools for 2020.

React Admin - A Web Framework for B2B applications
https://marmelab.com/react-admin/
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design.

Postwoman - API request builder
https://github.com/liyasthomas/postwoman
A free, fast, and beautiful alternative to Postman. Helps you create your requests faster, saving you precious time on your development.

jQuery Core Migrating from AMD Modules to ES Modules
https://github.com/jquery/jquery/commit/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07
Before you say jQuery isn’t relevant, the HTTP Archive has revealed that it’s being used on ~85% of around 6 million sites.

React-Datasheet
https://github.com/nadbm/react-datasheet
Excel-like data grid (table) component for React.

ScrollTrigger
https://github.com/terwanerik/ScrollTrigger Let your page react to scroll changes. The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the viewport (e.g. always trigger after the element reaches 20% of the viewport)

What’s next for CSS?
https://cssdb.org/
cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards

Nodemon https://nodemon.io/
Monitor for any changes in your node.js application and automatically restart the server - perfect for development. nodemon does not require any additional changes to your code or method of development. nodemon is a replacement wrapper for node, to use nodemon replace the word node on the command line when executing your script.

EasyDB - A one-click database. No server required.
https://easydb.io/
EasyDB is a one-click, hosted database provider. We give you a database for the programming language of your choice, you build something cool. It’s that simple.

Django 3.0 release candidate 1 released
https://www.djangoproject.com/weblog/2019/nov/18/django-30-release-candidate-1-released/
Django 3.0 will be released on or around December 2.

Sourcetrail is now free and open-source software
https://www.sourcetrail.com/blog/open_source/
Sourcetrail, our cross-platform source explorer, into free and open-source software. The source code is now available on GitHub and we aim to fund further development and maintenance via Patreon. In this post I will explain the issues we faced with commercial licensing and why we think this change will improve the situation and benefit everyone.

chatwoot
https://github.com/chatwoot/chatwoot
Opensource alternative to Intercom, Drift, Zendesk, FreshChat.

设计

What Newspapers Can Teach Us About Web Design
https://www.smashingmagazine.com/2019/11/newspapers-teach-web-design/
Before the home page, there was the front page. From the Gutenberg Principle to grid systems to above the fold, newspapers teach us much about the foundations of web design.

解读Fiori 3.0
https://mp.weixin.qq.com/s/oUVNkNGqGmruB-Ui8zm3OQ
今年9月，随着SAP S/4 HANA 1909版本的更新，Fiori3.0引入到正式的产品线中。面向开发的SDK在UI5 1.65版本中也支持了Fiori 3.0的theme。在很多的行业大会上面，Fiori 3.0的内容都有面向开发者和Partner展示，Github也已经有开源的内容，很多第三方实施公司有针对Fiori 3.0写过一些文章，但都不是设计师的视角。所以本文将会基于已经公开的内容，以B端设计师的视角，剖析Fiori 3.0设计方向和理念。

The Quest for Simplicity
https://blog.marvelapp.com/the-quest-for-simplicity/
Designing a great UI is not rocket science. It has to be as simple as possible for the people to perform a task at hand and understand/get the information they need — fast. But we keep making them more complicated. We make them feel like a “software” rather than a “human interface”.

The Next Chapter of Collaborative Experiences
https://medium.com/microsoft-design/the-next-chapter-of-collaborative-experiences-bdbf73670385
At Microsoft Design, we know collaboration to be much more than the visual evidence that someone else has worked on a document. We operate as a close-knit creative collective and work across myriad geographies, so we know firsthand the importance of understanding, supporting, and enhancing digital collaboration processes. To build more dynamic collaborative experiences across Microsoft 365, we’ve focused on thoughtful creation points to help people foster meaningful and organic connections, build on each other’s ideas, and carry creative momentum forward.

产品及其它

Celebrating the Web Foundation’s 10th Birthday
https://webfoundation.org/2019/11/celebrating-the-web-foundations-10th-birthday/
Ten years ago, Sir Tim Berners-Lee and Rosemary Leith established the World Wide Web Foundation to advance their vision of the open web as a public good and a basic right. We’ve come a long way in the past decade. 50% of the world is now online and billions are able to access information and use technology to solve problems in their communities. 另附：We need a better web to help secure children’s basic rights

把自己当成一家企业，思考你该如何工作
https://mp.weixin.qq.com/s?__biz=MzA5MTAxNDg0OQ==&mid=2247484322&idx=1&sn=22593db2bee1423f2bdc88526a4be7e4
最好的职场生存之道就是像「公司做生意」一样工作，把你的专业知识「产品化」，把你的工作「服务化」，克服人性的脆弱与短视，用商业决策的思维来指引自己的行为。另附：鹅厂9年老鹅致新人：比能力更重要的，是这7个职场素质.

曾鸣：互联网商业仅是智能商业的前奏
https://mp.weixin.qq.com/s?__biz=MzU4MTY0NzE5NQ==&mid=2247484963&idx=1&sn=d0f0486e03c57ab71b1d5541df8dde6d
当下，我觉得大部分人还是低估了智能商业的冲击力。我把它定义为一个范式革命，互联网阶段仅是智能商业浪潮的一个前奏而已；一个互联网公司只有真正进入智能时代才算成功。如今市场对想做平台或生态型的企业提出了更高要求，比如创业者是不是自己Truly Believe，能不能把这个Believe传递给投资人 、合作伙伴、员工等。所以寒冬时期孕育出好企业不只是说说而已，面对当前环境，创业者要有向死而生的决绝与信仰，要有勇气成为少数派。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-11-25·「知源 · 致远」AntV 年度发布、地球的光汇山脉、RunWay 上的维也纳分离派