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 and security risks. 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 July 8, 2024) · 4 min · 702 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 29, 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 29, 2024) · 4 min · 735 words

Set an Attribute Without Value in JavaScript

Often, we see HTML code snippets that set an attribute of an element without any value, like the following: <button id="my-button" disabled>I'm a button</button> In the HTML code snippet above, the id attribute has a value of "my-button", while the disabled attribute is present without any specified value. Many of us may wonder: How can I add such an attribute without a value like disabled above in JavaScript? The answer is probably trickier than most of us may have thought: This is impossible, and you may have been misled by the appearance of the HTML code. ...

May 1, 2024 · (Updated July 3, 2024) · 3 min · 551 words

Maintaining an Open Source JavaScript Project? Help Dependents Retain Notices

This post is not legal advice. By reading this post, you agree and acknowledge that this post does not advise you on how to properly license your work and you would not rely on this post to license your work; that this post does not advise licensees of open source work on how to comply with the licenses; and that this post only provides technical guidance on programming tasks that are common to licensing open source projects. Most popular open source licenses require redistributors to retain the copyright and permission notices, among other things. For example, even the brief MIT License explicitly requires so: …The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software… However, without any automation, this simple task is not so simple for a browser (front-end) JavaScript project: Tens and even hundreds of open source dependencies are often bundled and minified into a single .js file. Then, this .js file is commonly distributed to browsers via the Internet. As maintainers of open source JavaScript projects, what can we do to make retaining copyright and permission notices easier for dependent browser JavaScript projects? ...

April 20, 2024 · (Updated June 29, 2024) · 3 min · 574 words