Issue #408 (Docs Canvas, JS Libs, Build Tools, React)05/13/21
Google announced this week that Google Docs will now use canvas-based rendering "to improve performance and improve consistency in how content appears across different platforms."
If you're like me, then your initial reaction to this might be to wonder how canvas-based rendering would be more performant than plain DOM rendering. Fortunately, some smart people chimed in about this on Hacker News. Below are some interesting quotes from the discussion.
From one of the original authors of Google Docs (originally called Writely):
"Modern browser engines are amazing feats of engineering, but the feature set they provide, while enormous, is unlikely to exactly match the exacting requirements of a WYSIWYG word processor. As soon as your requirements differ even slightly from the feature set provided, you start tipping over into complex workarounds which impact performance."
From a former Mozilla employee:
"...there are absolutely tradeoffs in performance, accessibility, ease-of-development, internationalization, and likely other aspects. If raw performance is what you're going for, it's hard to beat just drawing on a canvas or using WebGL."
Another user makes a good point:
"HTML DOM rendering was never intended to give developers the control they need to build fully featured high performant applications, we just shoe horned things until they sort of work."
And the kicker might be the user who points out that in 2017
VS Code moved from DOM-based rendering to HTML canvas. That announcement post explained:
"Our benchmarks have measured that the Integrated Terminal now renders approximately 5 to 45 times faster than before, depending on the situation."
There's even a comment from a developer who wrote the terminal canvas renderers in VS Code, and who points out an important caveat:
"My opinion here is that canvas is a great technology, capable of speeding things up significantly and getting close to native app performance. It comes with very real trade offs though."
That developer goes on to explain what those caveats are, so check out the full discussion
for more on this subject.
It's great to see so many insightful comments for those of us who wouldn't know where to begin in dealing with an app as important as Google Docs.
Now on to this week's tools!
Learn How Remote Pair Programming Can Increase Your Team's Efficiency
Suddenly, the future of work materialized, and when your entire team is working from home, pair programming is not only possible but extremely valuable. Preparing yourself and your team for remote pairing will help prepare you for the future of work. sponsored
A small library of functions to make developing Web Components easier.
A TypeScript-based Node.js library for building web apps that includes read-made components and easy to use, expressive code.
A small, open scripting language inspired by HyperTalk, an old discontinued programming language.
A fast, minimalist web framework for Deno ported from Express.
A front-end game engine specifically for creating interactive game projects. Includes out-of-the-box game components and strong performance.
TypeScript ORM for Node.js, based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, PostgreSQL and SQLite databases.
A next-generation web framework for Cloudflare Workers (the serverless code deployment platform).
A universal chatbot library based on React with a declarative API and TypeScript support.
Build Tools, Bundlers, etc.
A package that allows you to use Vite instead of webpack during development with Nuxt.js.
A customizable ESLint config featuring modern best practices for JS, TS, Node, React, Next, Jest, testing-library, and Storybook.
A powerful and easy-to-configure continuous integration and delivery platform that integrates with GitHub, Gitlab, and Bitbucket.
An esbuild-like version of nodemon, a utility to monitor for any changes in your source and automatically restart your server.
Straightforward project scaffolding. Essentially it will make a copy of a Git repo similar to `git clone`, but without downloading the full Git history.
Develop and build your code painlessly in monorepos. Uses Rollup for bundling and works with different kinds of monorepos.
Blazing fast development server powered by Sandpack (the browser bundler that powers CodeSandbox).
Generate React or Vue.js-based Progressive Web Apps from an Hydra-enabled API. Also supports React Native, Next.js, Nuxt.js, Vuetify, and more.
Compile and bundle your MDX files and their dependencies.
ESLint plugin for finding RegExp mistakes and RegExp style guide violations.
Dependency-aware command runner for Yarn workspaces.
Grid.js for React
React package that provides three tools for working with Google Places Widgets, including autocomplete.
An MIT licensed open source React components and hooks library with focus on usability, accessibility and developer experience.
A set of 4 cosmetic-free React components for structure and layout.
Markdown component for React that uses remark (a popular Markdown processor).
React Idle Timer
A user activity timer component with cross-tab event reconciliation, support for Isomorphic React, and Hook implementation.
Lightweight React utility with no dependencies to easily apply a tilt/hover effect on React components.
React Cool Dimensions
A React hook that uses ResizeObserver to measures an element's size and can handle responsive components.
A dependency-free React component powered by hooks to let you build a wizard (e.g. "step 1", "step 2", etc.) for your React app.
Statically analyzes the given code (TypeScript supported) and extracts React components and props usage.
React component to add onClick to HTML elements without sacrificing accessibility.
Chat UI Kit React
An open source UI toolkit for developing web chat applications with a chat UI with React components in few minutes.
Micro-sized and micro-optimized select component for React.
A Tweet for Thought
Netflix recently started sending users a message for multi-home password sharing and Dan knows why it took so long.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
The portfolio of Xiaohan Zou does a really nice job of simulating the macOS GUI including window functionality, sleep/restart/shut down, a mock FaceTime that uses your camera, a working terminal, and lots more.
Thanks to all for subscribing and reading!