Resizing Image for Frontend with Python

We can optimise the load time by using different image sizes for different screen widths. There is no point in loading a huge image for a mobile when the width is only for 200px. Here is the quick Python script to resize images. By changing the array, you can output as many dimensions as you want.

It will work for both square and rectangle images. For rectangle images, it will keep the width: height ratio. We can pass multiple image files with multiple target widths.

That’s it. Pretty cool!

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 …