Recent content on 8 Hobbies JavaScript Blog
Single instruction, multiple data (SIMD) instructions , such as AVX on x64 processors,
are designed to improve performance. In some areas, such as numerical computation, they offer
significant performance gains. In some other areas, they provide less gain or even performance loss. 
 Do they improve the performance of Node.js? We ran some experiments.
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…
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…
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…

 Traditionally, C, C++, and Python are popular choices for writing command line utilities . With
the rise of Node.js , many people have turned to Node.js for writing command line utilities.
Should you base your next command line utility on Node.js? We believe it’s a good idea to follow a
holistic approach that considers multiple factors. In this post, we discuss the factors…

 Bitwise operators in JavaScript are fundamental to the language. These operators apply logical
operations to each bit of the operands. They consist of bitwise NOT ( ~ ), bitwise AND 
( & ), bitwise OR ( | ), and bitwise XOR ( ^ ), as well as their assignment variations &= ,
 |= , and ^= . This post discusses what they are and the best practices around them. 
 The shift…
Whenever I’m learning or using an unfamiliar programming language, I often find that even some
common tasks can become overwhelming. A quick reference table that refers back to my familiar
programming language often helps me carry over tricks that I already know, at least initially. 
 The tables below are intended to help JavaScript/Python programmers learn and quickly find…
Assertions, such as expect in vitest and jest , are an indispensable part of unit tests.
However, assertions inside loops risk being silently skipped. In this post, we discuss some tips
and best practices to avoid situations where assertions live in loops.
Assertions, such as expect in vitest and jest , are an indispensable part of unit tests.
However, assertions inside if -clauses risk being silently skipped. There is even an ESLint rule
 no-conditional-expect that checks conditional
assertions .
In this post, we discuss some tips and best practices to avoid situations where assertions live in
 if -clauses.
Array.includes is a commonly used function in JavaScript . However, in TypeScript , its
typing is quite strict: The element being searched for must have the same type as that of the array
element .
This causes type errors if the array is of a literal type. For example, with the following code
snippet: 
 const okNumbers = [ 1 , 3 , 5 , 7 ] as const ; 
 console . log ( `2 is…
A literal is a textual representation (notation) of a value as it is written in source code.
Many people generally associate the concept of literals with performance “cheapness”: A literal
always seems to consume very little resource. Is this true? This post discusses the hidden
performance cost of literals in JavaScript.
Git is an open source distributed version control system . It is currently the most popular
version control system according to various surveys ,
and has been the core driver of many popular development platforms, such as GitHub , GitLab ,
 Bitbucket , etc. 
 Many JavaScript developers also use Git as their main version control system. Therefore, improving
Git experience is key…
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.
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…
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 () {…
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…
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…
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,…
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 > 
…
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…
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…
Git is an open source distributed version control system . It is currently the most popular
version control system according to various surveys ,
and has been the core driver of many popular development platforms, such as GitHub , GitLab ,
 Bitbucket , etc. 
 While Git comes with a decent default configuration, it is far from the full power of Git. In this
post, we will walk…
Motivation 
 TypeDoc is a document generator that, among other things, converts comments in TypeScript 
source code into rendered HTML documentation. The generated HTML documentation can be hosted on
static website hosting services, such as GitHub Pages , GitLab Pages , Netlify , and
 CloudFlare Pages . All of them by default use a 404.html file as the content of the 404 page…
Motivation 
 Very often in TypeScript , we would like to wrap an existing function into a wrapper function,
with some additional preprocessing or postprocessing. For example, 
 function existingFunc ( arg1 : number , arg2 : string ) : number { 
 return arg1 + arg2 . length ; 
 } 
 
 function wrapperFunc ( arg1 : number , arg2 : string ) : number { 
 // Preprocess…
Testing the presence of a Material UI Icon in Jest / Vitest can be done by using the
 Testing Library . 
 First, in the production code, assign a titleAccess attribute to the icon. For example, if the
icon of interest is AddIcon , the code would look like: 
 < AddIcon titleAccess = 'My Add Icon' /> 
 This attribute would also surface to the user
interface .