Frontend Framework Comparison: Choosing the Right Framework for Your Project
Introduction: When it comes to developing modern web applications, choosing the right frontend framework is essential. With numerous options available, each with its own strengths and weaknesses, it’s important to evaluate and compare different frameworks to find the best fit for your project. In this blog post, we will compare …
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 …
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 …
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 …
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. …
Using Parcel Bundler for TypeScript React App
Parcel is a relatively new JS bundler that promises zero configuration. I heard a lot of good things about this new bundler. So, I decided to give it a go. Here is the project that I created with Parcel, parcel-ts-react. In short, Parcel is great for small personal projects. However, …
Adding Custom Font to Storybook
Most of the design systems have custom fonts. Let’s see how we can bring them to Storybook. Once the font is in, we can start using it in canvas by adding CSS. My example storybook repo is here. First of all, we need to add a font folder and add …
Using Font Files Downloaded From Google Font
When you download a font family from Google Fonts, it contains multiple files, each corresponding to a different style. It is common to just import a regular 400 with the font face declaration. The better practice is to use the method called style linking. In @font-face, we can use the …
What You May Not Know About Jest’s Mount Method
If you are a React developer, you probably know the difference between mount and shallow when you are unit testing react components with jest. Mount renders full DOM. We use it when the component interacts with DOM Api or require a full lifecycle to fully test the component. On the …
Executing Web Skimmers Inside CSS and SVG files
A web skimmer is a piece of malicious JS code embedded in web payment pages to skim customer’s payment information. There are a few tricks to embed malicious scripts. In this post, we’ll discuss how it can be done in CSS file and SVG file as well as what works …