Introduction: In today’s digital age, frontend development has emerged as a dynamic and in-demand field. As a frontend developer, you have the power to shape the user experience and bring creative designs to life. If you’re aspiring to embark on the journey of becoming a frontend developer, this blog aims …

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 …

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 …

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

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 …

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 …

When you want to specify which Node version to use in your Github Actions, you can use actions/setup-node@v2. The alternative way is to use a node container. When you try to use a publicly available node container like runs-on: node:alpine-xx, the pipeline gets stuck in a queue. runs-on is not …

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 …

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": {   …

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 …