Frontend

In a project built by Vite, index.html is usually the entry point of the project. While we can put the copyright notice in the JavaScript bundle, it is often desirable to add it directly to the HTML file for various reasons. For example, maybe the copyright notice is entangled with the privacy policy or terms of service links, which we usually want to make visible even when the user turns off JavaScript. A straightforward solution is to add a copyright notice with a fixed year to the footer like: <footer> Copyright &copy; 2024 My Name </footer> However, it can be quite annoying to bump the year in every project, even though it’s only once per year. In this post, we present a simple and clean solution to address this problem using the HTML transformation hook of Vite. This solution does not use in-page JavaScript so that users can see them even without JavaScript enabled. We have also created a package @8hobbies/vite-plugin-year that uses the solution from this post for your convenience. ...

HTML attributes are name-value pairs, separated by =, in the start tag of an element after the element name, such as id=blog-link and href="https://8hob.io" below: <a id="blog-link" href="https://8hob.io">8 Hobbies JavaScript Blog</a> How do we add, update, and remove an HTML attribute in JavaScript (JS)? ...

Besides many tricks that improve the performance from within a React app, there are also tricks to improve the loading speed from the HTML document in which the React app is embedded. In this post, we will walk through some of these tricks. ...

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

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