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 …
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 …
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. …
How to Make Scalable SVG React Components
SVG stands for Scalable Vector Graphic. The svg image can scale up and down according the size of the outer container as long as the image width is set to 100%. Let’s explore how we can make a React illustration component that supports multiple size by scaling up and down. …
Using act() in Jest Unit Tests with React-Dom
react-dom/test-utils provides a helper, act() to make sure all the tasks like rendering, user events, and data fetching (these are considered as units of interaction with a user interface) to be processed and applied to the DOM before making an assertion. We use act() when we are using jest with …
Data Provider Pattern with Jest
Jest has the for method that enables us to do a data provider pattern. for works on both describe and it. It is better to use it in describe so that the assertion messages in it can be dynamically generated.
How to fix ChromeDriver version mismatch error when you run Behat tests
When the chrome browser gets updated automatically on your computer, the ChromeDriver version is not going to be updated. Therefore, it causes the mismatch between the chrome browser and the ChromeDriver version. In the context of Behat tests, ChromeDriver allows Behat to control Chrome (e.g. enabling it to move around …
How to Avoid Async Try-Catch Hell
This post is based on this excellent short youtube video.. Let’s see async try-catch hell. If we do try-catch on every single async function, it creates a tower of terror. Welcome to try-catch hell. async function towerOfTerror() { let a; let b; let c; try { a = await step1(); …
Using React.VFC Instead of React.FC
When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use …
Quickest Way to Add Eslint to JavaScript and TypeScript Projects
The quickest way to add eslint to your project is using eslint init command. ./node_modules/.bin/eslint –init will create eslintrc.js and install dependencies automatically. (1) Getting started for JavaScript Application It is super simple. Just install eslint, use eslint tool with a init flag and follow the command line instruction. npm …