8 Hobbies JavaScript Blog

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 to a productive and happy JavaScript development process. ...

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 backward compatible manner; PATCH version when you make backward-compatible bug fixes. Under the scheme of Semantic Versioning, how should we increment the version of a package after updating a dependency/optional dependency as specified in dependencies/optionalDependencies, a dev dependency as specified in devDependencies, or a peer dependency as specified in peerDependencies? ...

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

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