JavaScript

Semantic Versioning (semver) is a versioning scheme that is officially recommended by npm. It recommends every package to be versioned in the format MAJOR.MINOR.PATCH and to follow 3 basic principles of incrementing/bumping (Quoted from https://semver.org/): MAJOR version when you make incompatible API changes; MINOR version when you add functionality in a backward compatible manner; PATCH version when you make backward-compatible bug fixes. Under the scheme of Semantic Versioning, how should we increment the version of a package after updating a dependency/optional dependency as specified in dependencies/optionalDependencies, a dev dependency as specified in devDependencies, or a peer dependency as specified in peerDependencies? ...

React allows specifying the style of an HTML element from within the app, which is a powerful tool when the style depends on the data or logic of the app. On the other hand, CSS variables, also known as CSS custom properties, provide great flexibility for CSS. For example, the following code specifies a CSS variable of the h1 element: export default function App() { return <h1 style={{ "--component-style": "classical" }}>Hello World!</h1>; } However, the TypeScript compiler will complain: src/App.tsx:2:23 - error TS2353: Object literal may only specify known properties, and '"--component-style"' does not exist in type 'Properties<string | number, string & {}>'. 2 return <h1 style={{ "--component-style": "classical" }}>Hello World!</h1> ~~~~~~~~~~~~~~~~~~~ node_modules/@types/react/index.d.ts:2908:9 2908 style?: CSSProperties | undefined; ~~~~~ The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>' In this post, we discuss how to properly type CSS variables in React. Here, we avoid using type assertions and strive for type safety by typing as narrowly as possible. ...

Node.js allows defining scripts in package.json. This feature often constitutes a major component of a developer’s workflow. For example, developers can define procedures such as building, testing, and deployment as scripts in package.json. If the project is intended to be cross-platform, the scripts should also be cross-platform. In this post, we discuss guidelines and tips on how to create Node.js scripts that work on both Windows and POSIX systems (e.g., GNU/Linux, MacOS). The central tenet is using cross-platform Node.js features instead of POSIX/Windows-specific commands. ...

Vite is a modern tool for frontend development. One of Vite’s functionalities is to deploy the app for production, including bundling all JavaScript (JS) files. Although Vite supports building for a particular browser target, it only transforms syntax with the help of ebuild, but does not perform any JavaScript polyfill. However, polyfill is essential for many projects. On the one hand, it’s often error-prone to manually polyfill, such as using core-js manually. On the other hand, an on-demand polyfill service like polyfill.io bears its own limitations and security risks. Therefore, it is ideal to use an automatic polyfill mechanism that is integrated with Vite. In this post, we discuss how to automatically polyfill JavaScript APIs in a Vite project with the help of the Vite legacy plugin. ...

Npm allows multiple types of dependencies, two of which are dependencies and peerDependencies. Semantically, they refer to different things: peerDependencies expresses the compatibility of a package with a host tool or library, usually referred to as a plugin, while dependencies expresses dependencies in the general sense. Despite being two distinct types of dependencies, since v7, npm installs both types of dependencies by default. In this post, we explore the answer to the question: What are the differences between the effects of the two types of dependencies? ...