Front-End

How to set up auto-fix on save by using the project’s Eslint config with VS Code

This is a quick instruction to set up auto-fix on save by using the project’s eslint config with VS Code. It works for both TS and JS. 1. Install ESLint plugin for VS Code. 2. Add config to VS code Go to Code -> Preference -> Settings (or press cmd …

Front-End

How to configure debugger when running jest for React unit tests with VS Code

We can debug the jest test with console.log (make sure to remove the -silent option). But, attaching a debugger and stepping through the tests sometimes may help us to troubleshoot quicker under certain circumstances. 1. Install Jest Plugin Install Jest plugin. 2. Configure Press cmd + shift + p. Find …

Front-End

Unable to Get Local Issuer Certificate for installing Npm Modules

unable to get local issuer certificate error with yarn install from a private npm repository (such as JFrog), you can try running this command: yarn config set “strict-ssl” false yarn install Error message example error An unexpected error occurred: “https://npco.jfrog.io/artifactory/api/npm/npm-mdh/@mdh/my-library/-/@mdh/my-library-3.21.0.tgz: unable to get local issuer certificate”.

Front-End

Moving away from React.FC and React.VFC

Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more. See this pull request. It states: Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff". As …

Front-End

How to fix react-day-picker flickering hover state between mouseenter and mouseleave

I had an issue with react-day-picker flickering hover state between mouseenter and mouseleave when the cursor was on the edge of the day I was trying to select. This is not a bug in the library. It was the custom style I added to the hover state that was causing …

Front-End

Using yarn link to develop React library locally

When you develop a react library locally, you can use yarn link to link the repo for the react module to the react app. In this way, the react app will use the local version of the module. 1. Go to the module source repo. 1yarn link 2. Go to …

Front-End

Running Jest when you are importing a file which Jest cannot parse

When you are running jest and encounter the error below, the solution is simple. You need to add transformIgnorePatterns in the jest config. For example, you can simply add this in your package.json. This is usually caused by using a third party library that uses ES module. 12345"jest": {   …

Node.js

10 Tips for using Semantic Release

1. Make sure to have the correct name value for the module in package.json. Include a prefix if it is necessary like this, “name”: “@mdhnpm/react-cube-loading-spinner” 2. Make sure to add publishConfig in package.json “publishConfig”: { “registry”: “https://registry.npmjs.org/” }, 3. Do not set “private”: true if you want to publish the …

Front-End

What is the best module system for a React component library?

JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library. The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the …

Front-End

Learning CSS Grid

CSS Grid can be scary. It looks complicated and you might not even know where to start. If you want to get started quickly with CSS grid, I highly recommend Grid Garden. It an interactive learning module for CSS grid. It covers a lot of important concepts about CSS grid. …