8 Hobbies JavaScript Blog

JavaScript, TypeScript, and Open Source

Typing CSS Variables in React

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": "classics" }}>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. ...

June 17, 2024 · (Updated June 18, 2024) · 3 min · 513 words

Guides to Creating Cross-Platform Node.js Scripts

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. ...

June 9, 2024 · (Updated June 11, 2024) · 3 min · 565 words

Automatic Polyfill for Modern Browsers With Vite

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, manual polyfill can be error-prone. On the other hand, an on-demand polyfill service like polyfill.io bears its own limitations. It is ideal to use a 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. ...

May 28, 2024 · (Updated June 4, 2024) · 4 min · 699 words

Exploring the Difference Between the Effects of Dependencies and Peer Dependencies after NPM v7

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? ...

May 19, 2024 · (Updated June 4, 2024) · 7 min · 1426 words

Restrict Access to a JavaScript Application Embedded via an iframe

One common way to embed a JavaScript application in a web page is using iframe. Assuming the application is accessible from https://example.com/my-app and the embedding page is https://example.com/content, the embedding code in the embedding page would look like this: <body> <!-- Other content... --> <iframe src="https://example.com/my-app"><iframe> <!-- Other content... --> </body> This approach works for an application written in either vanilla JavaScript or any frameworks, like React or Vue. However, this risks two potentially undesired effects: Other websites may embed this application with iframe without permission. The visitor may visit the embedded iframe directly and thus have skipped the content of the parent page. This post discusses solutions that address these two problems. ...

May 13, 2024 · (Updated June 4, 2024) · 4 min · 735 words