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!
|
JavaScript Libraries and Frameworks
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
Catalyst
A small library of functions to make developing Web Components easier.
FoalTS
A TypeScript-based Node.js library for building web apps that includes read-made components and easy to use, expressive code.
Capacitor
An open source native runtime for building cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.
hyperscript
A small, open scripting language inspired by HyperTalk, an old discontinued programming language.
Opine
A fast, minimalist web framework for Deno ported from Express.
Dann.js
An easy-to-use neural network library for JavaScript that's easy to learn and acts as a playground for experimentation with deep neural networks.
 |
Eva.js
A front-end game engine specifically for creating interactive game projects. Includes out-of-the-box game components and strong performance.
Clio
A functional, distributed programming language that compiles to JavaScript, runs in the browser and on the server, and is suitable for scientific programming.
Nullstack
A full-stack JavaScript framework for building progressive web apps. Write the back-end and the front-end of a feature in a single component and let the framework decide where the code should run.
MikroORM
TypeScript ORM for Node.js, based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, PostgreSQL and SQLite databases.
Worktop
A next-generation web framework for Cloudflare Workers (the serverless code deployment platform).
Urban Bot
A universal chatbot library based on React with a declarative API and TypeScript support.
|
Build Tools, Bundlers, etc.
Nuxt Vite
A package that allows you to use Vite instead of webpack during development with Nuxt.js.
eslint-config-galex
A customizable ESLint config featuring modern best practices for JS, TS, Node, React, Next, Jest, testing-library, and Storybook.
Buddy
A powerful and easy-to-configure continuous integration and delivery platform that integrates with GitHub, Gitlab, and Bitbucket.
esmon
An esbuild-like version of nodemon, a utility to monitor for any changes in your source and automatically restart your server.
degit
Straightforward project scaffolding. Essentially it will make a copy of a Git repo similar to `git clone`, but without downloading the full Git history.
Kataw
A JavaScript toolchain focused on performance with JS parsing features, type checking, AST manipulation, linting, minifying, etc.
Preconstruct
Develop and build your code painlessly in monorepos. Uses Rollup for bundling and works with different kinds of monorepos.
Blazepack
Blazing fast development server powered by Sandpack (the browser bundler that powers CodeSandbox).
Client Generator
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.
mdx-bundler
Compile and bundle your MDX files and their dependencies.
eslint-plugin-regexp
ESLint plugin for finding RegExp mistakes and RegExp style guide violations.
wsrun
Dependency-aware command runner for Yarn workspaces.
|
React Tools
Grid.js for React
React component for Grid.js, the open-source JavaScript table plugin.
react-google-autocomplete
React package that provides three tools for working with Google Places Widgets, including autocomplete.
Mantine
An MIT licensed open source React components and hooks library with focus on usability, accessibility and developer experience.
raam
A set of 4 cosmetic-free React components for structure and layout.
react-markdown
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.
React Tilt
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.
react-use-wizard
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.
react-scanner
Statically analyzes the given code (TypeScript supported) and extracts React components and props usage.
ClickableBox
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.
react-functional-select
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
