2023-Week 16 - AgedCoffee

This weekly report mainly summarizes the content from various sources

Technology
Tools
Updates
- Vite 4.3
- vercel-web-analytics

Technology#

glyphhanger #

Glyphhanger is a web font tool that optimizes font file size through character subsets and whitelists.
The author reduced the size of the Roboto font to less than half by shrinking it to the ASCII character set and other whitelist characters, without affecting character support.
Using this tool and technique can significantly reduce the page weight when using custom fonts on a website.
The author tried variable fonts but found that the file size was too large. They used the Glyphhanger tool to shrink the font to only include necessary characters and included custom characters with the --whitelist parameter. Glyphhanger can also evaluate and subset fonts based on the characters used on the page. The author successfully reduced the file size of website components using optimized fonts. They recommend using this tool to optimize font files.

WebCodecs Implementation of GIF Video Transcoding #

This article describes how to convert GIFs into video resources, with the challenge of doing so in a web environment. The article discusses two approaches:

Drawing animations using Canvas.
Using FFmpeg for transcoding. The article provides a detailed explanation of how to use ffmpeg.wasm to achieve transcoding in a browser environment, which is a convenient FFmpeg WebAssembly implementation.

moduleResolution Summary #

When JavaScript was designed, it did not have the concept of modules. ESM has only been officially implemented in the past two years, and module resolution strategies have been standardized and can meet various scenario requirements with the introduction of exports. It is estimated that in a year or two, many newly released npm packages will not even include the main field.

exports is a powerful module resolution standard widely supported by various frontend tools. When developing npm packages, exports should be used to manage their resolution rules.
The resolution rules of exports are complex, and many third-party implementations in the community have more or less bugs, especially those related to priority.
For many TypeScript projects that do not want to write file extensions, the bundler resolution strategy should be used. This allows third-party libraries to only write exports without typesVersions.
Many of TypeScript's designs are compromises between development efficiency and ECMAScript standards. For example, decorators, early decorators were not included in the ECMAScript stage3 standard, so TypeScript implemented its own set. In other words, TypeScript chose development efficiency over ECMAScript standards at that time.

What's new in ECMAScript 2023 #

The upcoming ECMAScript specification, expected to be released at the end of June, includes a range of new features such as "Find Last in Array," "Hashbang Grammar," "Symbols as WeakMap Keys," and "Change Array by Copy."

The proposal for finding the last element in an array adds the findLast() and findLastIndex() methods to the Array and TypedArray prototypes, allowing searching from the last element.
The Hashbang Grammar proposal specifies the use of hashbang at the beginning of executable scripts.
The proposal for using Symbols as WeakMap keys allows the use of unregistered Symbols as keys in WeakMaps. The proposal for changing arrays by copy adds some methods that return a new copy instead of mutating the original array.

Best Practices for Web RTSP Streaming #

This article introduces two solutions for playing RTSP streams on the web.

First, it explains the principle of converting RTSP streams to WebSocket/WebRTC and then to WebVideo.
Then, it introduces the backend streaming solution based on ffmpeg, the frontend video display solution based on jsmpeg/flv.js, and the streaming solution based on WebRTC. Detailed code examples and explanations are provided.
Finally, the article summarizes the differences between paid and free solutions and recommends using free solutions to build transcoding services.

Display Warning for Unsaved Form Data on Page Exit #

This article explains how to implement a FormPrompt component to improve the user experience of web applications. The component can display a warning when users try to leave a page with unsaved changes. The author discusses using the pure JavaScript beforeunload event to handle such cases, as well as React-specific solutions using the Prompt component in React Router v5 and the useBeforeUnload and unstable_useBlocker hooks in React Router v6.

Tools#

Markflow #

Revolutionize your workflow and create more and faster work.
Say goodbye to development tools, copy any element and paste it directly into your project. Markflow supports Figma, React, Webflow, Svelte, and more.

pretty-ts-errors #

Make TypeScript error messages in VSCode more beautiful and understandable.

lazyrepo #

lazyrepo is a zero-configuration cache task runner for npm/pnpm/yarn monorepos. It is suitable for the domain pioneered by turborepo: extending package.json "scripts" without adopting large-scale industrial-grade build systems like nx, bazel, rush, or buck. Despite being written in TypeScript instead of some young, handsome, smart, and fun system language, lazyrepo is very fast and much faster than turborepo.

Updates#

Vite 4.3 #

Vite 4.3 has been released with a focus on improving the development server's performance. Compared to Vite 4.2, this update has shown significant speed improvements in various benchmarks.
The Vite team is committed to further performance improvements and has developed an official benchmarking tool for Vite, adding more performance-related features in vite-plugin-inspect.
The Vite team plans to release a major update this year, aligned with the end-of-life (EOL) of Node.js 16 in September. This version will stop supporting Node.js 14 and 16.

vercel-web-analytics #

A Google Analytics alternative.