8 Hobbies JavaScript Blog

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

You just have created a new JavaScript open source project. Now you wonder, how do I promote it? Having been devoted to open source for over a decade, I’d like to share how I usually approach it. Many of these ideas apply to not only JavaScript projects but also open source software projects in general. There are 4 aspects to focus on: Value Addition High Code Quality More Exposure to Potential Users Lower Barrier to Use the Project ...

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

Linked lists are fundamental data structures frequently used in computer science. Often, programmers need to directly implement them. How can we implement an error-free linked list quickly, especially under time pressure and mental stress during job interviews? This post discusses an important trick: Using a dummy head/tail node. ...

TypeScript allows programmers to define type guards so that programmers have more control over the dynamic nature of the typing of JavaScript. Since type guards are completely defined by the programmer, they also evade type checking from the TypeScript compiler: Type checking won’t catch any error if the type guard doesn’t correctly determine the type. This can be caused by typos, updating the type without updating the type guard, etc. For example, consider the following interface and its well-written type guard: ...