title: Week 16-2023
date: '2023-04-21'
tags: ['Weekly Learning-2023']
draft: false
summary: ''#
This weekly report mainly summarizes the content from various sources
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 whitelisted characters, without affecting character support.
Using this tool and technique can significantly reduce the page weight when using custom fonts on websites.
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.
Discussing the Implementation of GIF Video Transcoding with WebCodecs#
This article discusses how to convert GIF to video resources, with the challenge of doing so in a web environment. The article discusses two approaches:
- Implementing animation drawing through 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.
Summary of moduleResolution#
When JavaScript was initially 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.
exportsis a powerful module resolution standard widely supported by various frontend tools. When developing npm packages,exportsshould be used to manage its resolution rules.- The resolution rules of
exportsare complex, and many third-party implementations in the community have some bugs, especially those related to priority. - For many TypeScript projects that do not want to write file extensions, the
bundlerresolution strategy should be used. This allows third-party libraries to only writeexportswithouttypesVersions. - Many of TypeScript's designs are compromises between development efficiency and ECMAScript standards. For example, decorators and early decorators did not make it into 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 series of new features such as "Finding Arrays from the End," "Hashbang Grammar," "Symbols as WeakMap Keys," and "Copying Arrays to Modify."
- The proposal for finding arrays from the end 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 copying arrays to modify 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. It provides detailed code examples and explanations.
- Finally, it summarizes the differences between paid and free solutions and recommends using free solutions to build streaming services for programmers.
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 the user tries to leave a page with unsaved changes. The author discusses using the beforeunload event in pure JavaScript 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 and copy any element directly into your project. Markflow supports Figma, React, Webflow, Svelte, and more.
pretty-ts-errors#
Make TypeScript error messages in VSCode more visually appealing and understandable.
lazyrepo#
lazyrepo is a zero-config 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 interesting systems 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 performance of the development server. 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 to 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#
Comparable to Google Analytics