2022.03.07 - Working together on Interop 2022

Title: 2022.03.07 - Working together on Interop 2022

This Week’s Highlights

Working together on Interop 2022 https://webkit.org/blog/12288/working-together-on-interop-2022/ https://hacks.mozilla.org/2022/03/interop-2022/ https://web.dev/interop-2022/
From the very beginning, the web was always intended to work in any browser, on any computer. This is possible through interoperability—when each underlying web technology is implemented in the same way in every browser. To reach interoperability, it takes a commitment from all browser engineers to implement web technology according to web standards—the incredibly detailed specifications where new technology is defined. In 2022, Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla have come together to commit to improve interoperability in 15 key areas that will have the most impact on web developer experience, in a project called Interop 2022.

Monorepos are changing how teams build software https://vercel.com/blog/monorepos-are-changing-how-teams-build-software
The largest software companies in the world use monorepos. But historically, adopting a monorepo for anything other than at a Facebook or Google scale was difficult, time‑consuming, and often filled with headaches. Since Turborepo joined Vercel, we’ve seen development teams of all sizes adopt Turborepo for faster builds and save over 200 days worth of time by remotely caching their deployments on Vercel. Turborepo takes the lessons and development workflows from the giants of the Web and brings them to open source for every developer. It lowers the barrier to entry for using monorepos and makes it accessible to everyone. Let’s explore how monorepos can improve your development workflow.

A new year, a new MDN https://hacks.mozilla.org/2022/03/a-new-year-a-new-mdn/
In mid‑2021 we started to think about modernizing MDN’s design, to create a clean and inviting website that makes navigating our 44,000 articles as easy as possible. We wanted to create a more holistic experience for our users, with an emphasis on improved navigability and a universal look and feel across all our pages. Related: Is Firefox OK? Mozilla’s privacy‑heavy browser is flatlining but still crucial to future of the web.

The Future of User Interface Design: Next‑generation UI Tools https://www.toptal.com/designers/ui/future-ui-design
The next wave of UI design tools will fully integrate design and code to provide a seamless experience for designers and developers.

Google Docs New Feature: Pageless https://support.google.com/docs/thread/150905607/google-docs-new-feature-pageless?hl=en
We're excited to announce a new feature on Google Docs: pageless! You can now experience a new way to work with documents that is built for the screen! Pageless format allows you to remove the boundaries of a page to create an infinite surface to work on. In this setting, there are no page breaks, images adjust to your screen size, and wide tables are viewable by scrolling left and right. Line breaks for text will adjust to screen size and as you zoom in and out.

The Ukraine War – and Its Impact on the Tech Industry https://blog.pragmaticengineer.com/the-ukraine-crisis-impact-on-tech/
We are not living in usual times, and so this is not the usual Pragmatic Engineer article. Russia launched a full‑scale invasion of Ukraine on Thursday, 24 February. This event has started the largest war in Europe since World War II, and is the biggest geopolitical event in Europe since the breakup of the USSR in 1990‑1991. This article covers the impact of the war on the tech world.

Deep Reads

10 React Antipatterns to Avoid – Code This, Not That! https://www.youtube.com/watch?v=b0IZo2Aho9Y
React looks minimal on the surface, but it’s actually a highly complex JavaScript UI library with many potential pitfalls. In this tutorial, we look at 10 antipatterns in React, along with tips and tricks to improve our code.

Web3 in Progress – Collapse, Fusion, and Rebirth https://mp.weixin.qq.com/s/09WJf08EUpAf3tlwtb73jw
The convergence of Web 2 and Web 3 is irreversible and inevitable; a limitless incremental market will emerge in the metaverse, and the battle for rules, standards, and narrative control will become the main front of Web 2/Web 3 integration. Chaos is a ladder, and blockchain entrepreneurs are facing a final window of opportunity.

Defensive Design and Development https://mp.weixin.qq.com/s/G4pME9xFHdWnFckgytnofQ
In short, defensive programming in front‑end development means preventing errors. Here “errors” include not only code exceptions but any issues that affect user experience. “Defending” goes beyond prevention to also pursue resilience—the ability of a system to recover from failures and maintain reliable service (see: https://www.bmc.com/blogs/resilience-engineering/). Front‑end work should go beyond merely reproducing a design; it must deliver a better user experience, otherwise it becomes “pretty but useless.” The impact of front‑end work must reach from the implementation layer (looks) to the experience layer (usability).

Edge Intelligence in Meituan‑Dianping Search Re‑ranking: A Practical Guide https://tech.meituan.com/2022/02/24/edge-search-rerank.html
Search is a crucial channel that connects users with merchants in the Meituan‑Dianping app. More and more users rely on search in various scenarios to find the services they want. Understanding user intent and surfacing the most desired results at the top is the core of any search engine. To further improve personalized ranking and user experience, the Search Technology Center explored deploying deep personalization models on the client side. This article shares the practice of edge‑based re‑ranking in the Meituan‑Dianping app, covering three parts: (1) the problems and overall workflow addressed by edge re‑ranking; (2) the exploration of on‑device re‑ranking algorithms; (3) the system architecture, deployment, and optimization, followed by a summary and outlook.

It’s Always Been You, Canvas 2D https://developer.chrome.com/blog/canvas2d/
In a world of shaders, meshes, and filters, Canvas 2D might not get you excited. But it should! 30–40 % of web pages contain a <canvas> element and 98 % of all canvases use a Canvas 2D rendering context. Canvas 2D appears in cars, on fridges, and even in space (really).

5 Things You Don’t Need JavaScript For https://lexoral.com/blog/you-dont-need-js/
JavaScript can do a lot, but it’s often over‑used. HTML and CSS are surprisingly powerful on their own, so let’s look at some things you can achieve without JavaScript (or a backend)—from animated diagrams to dark mode.

Accessibility for Real‑time Web Apps https://fly.io/blog/intro-to-accessibility/
Doing accessibility well isn’t difficult, especially if you plan ahead. So I’d like to talk a bit about what accessibility is, why you should care, and a few common missteps teams make on their journey.

Running Commands with execa in Node.js https://blog.logrocket.com/running-commands-with-execa-in-node-js/
The execa library provides a wrapper around the child_process module for ease of use. This popular library was created and is maintained by prolific open‑source developer Sindre Sorhus, and it’s downloaded millions of times every week. In this article we’ll learn about the benefits of execa and how to start using it. We’ll also dive into error handling, process control, and options for handling child‑process output.

Why I Invented “Dash Encoding”, a New Encoding Scheme for URL Paths https://simonwillison.net/2022/Mar/5/dash-encoding/
Datasette now includes its own custom string‑encoding scheme, which I’ve called dash encoding. I really didn’t want to have to invent something new here, but unfortunately I think this is the best solution to my very particular problem. Some notes on how dash encoding works and why I created it.

A Decade of Deep Learning: How the AI Startup Experience Has Evolved https://future.a16z.com/a-decade-of-deep-learn
(content truncated)

---

Originally written by Ping Xia (平侠) and published in Chinese on Web技术周刊 (Web Tech Weekly). Translated and adapted for DriftSeas with permission.