DEV Community: Neelesh Ranjan Jha

Pre Commit Checks using Husky

Neelesh Ranjan Jha — Tue, 23 Jul 2024 12:18:45 +0000

Introduction

Are you tired of pushing code that breaks down during build phase because some linting check or typescript check had failed? Well worry not because this post is going to ensure it does not happen again.

Pre Requisites

We need certain packages in our project before starting -

yarn add -D husky lint-stage

Husky is going to run the commands we specify before the commit happens.

Initialising Husky

In your project's terminal, type

npx init husky

You will see that a folder with the name .husky is created in your project's directory.

Editing Package.json

Add the following in the scripts part of your package.json

"postinstall": "husky install",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"tsc": "tsc --noEmit"

Also add this after the scripts part in package.json

"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
},

in the end, your package.json would like this

  "scripts": {
    "dev": "next dev -p 3001",
    "devEnv": "cpy .env.dev .env",
    "build": "next build",
    "start": "next start",
    "postinstall": "husky install",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  },

Editing the Pre-Commit file

There is a pre commit in the .husky folder. We need to edit it and add the following

yarn tsc
yarn eslint

Testing

Now in your code, create an intentional Typescript error or an disobey an ESLint Rule. Now try to commit the file and you will get an error and the code won't be committed and you will get an error in the git logs.

Edit: If you still want to commit your code, do the following

git commit -m "commit regardless of errors" --no-verify

Conclusion

Viola, that's it, now you won't be able to commit code with typescript errors and linting errors anymore and hopefully your build will stop failing as often.

Writing a middleware to upload files to Digital Ocean Spaces

Neelesh Ranjan Jha — Thu, 28 Mar 2024 07:01:17 +0000

Introduction

In the world of web development, handling file uploads efficiently and securely is a common challenge. Whether you're building a social media platform, an e-commerce site, or any application that requires user-generated content, you'll likely need to implement a robust file upload feature. Node.js, with its non-blocking I/O and event-driven architecture, offers a solid foundation for building such features. However, when it comes to actually storing these files, external storage solutions like Digital Ocean Spaces become invaluable due to their scalability, reliability, and cost-effectiveness.

Digital Ocean Spaces is an alternative to AWS S3 Bucket and follows the same format as the latter to promote data migration if needed. But the documentation might be vague or not beneficial. Well for a project I was working on I wrote a middleware for uploading the files from a frontend to the Digital Ocean Spaces using Node JS.

This is going to be a short tutorial with more commands and code and less explanation.

Installing the packages

I would be using yarn but you can use any package manager

yarn add multer multer-s3 @aws-sdk/client-s3

This installs our 3 main packages for writing the middleware.

Now for the main code of the middleware.

This goes out in a few steps.

Step 1 - Defining the S3 Client

import { S3Client } from '@aws-sdk/client-s3';

const s3Client = new S3Client({
  region: process.env.SPACES_REGION || '',
  credentials: {
    accessKeyId: process.env.SPACES_KEY || '',
    secretAccessKey: process.env.SPACES_SECRET || '',
  },
  endpoint: process.env.SPACES_ENDPOINT,
  forcePathStyle: false,
});

Here SPACES_KEY and SPACES_SECRET is the API key you generated in Digital Ocean for accessing your spaces. It is recommended to store it as an environment variable.

This can be exported an used anywhere else as well since we just need to initialise S3 client once throughout our code base.

Step 2 - Writing the file upload code

const fileUpload = (req, res, next) => {
  try {
    const uploadFile = multer({
      storage: multerS3({
        s3: s3Client,
        bucket: process.env.SPACES_BUCKET || '', //BUCKET NAME
        acl: 'public-read',
        metadata: (req, file, cb) => {
          cb(null, { fieldname: file.fieldname });
        },
        key: (req, file, cb) => {
          const fileName =
            'documents/' + // I AM STORING IT IN /documents folder, you can designate any other directory or just / for storing in root directory
            uuid() +
            '_' +
            file.fieldname +
            '_' +
            file.originalname;
          cb(null, fileName);
        },
      }),
      limits: {
        fileSize: 1024 * 1024 * 5, // 5 MB file uploads allowed. Increase according to your usage.
      },
    }).single('document');

    uploadFile(req, res, err => {
      if (err) {
        logger.error(err);
        return res.status(500).send({ message: 'File upload failed' });
      }
      next(); //  move to next function middleware or function when upload complete
    });
  } catch (error) {
    logger.error(error);
  }
};

That's it. Now this function can be exported and used as a middleware like

documentRouter.post('/upload-files', fileUpload, async (req, res) => 
{
//main code
});

This is taking the assumption that the files are being uploaded from using formData() from the frontend with the file being in the field like

This is example frontend code

const formData = new FormData();

formData.append("document", file); // assuming file is stored in a file variable with the appropriate data type

Publishing my own React Native Radio Buttons Package

Neelesh Ranjan Jha — Sun, 30 Jul 2023 10:37:52 +0000

Introduction

I was working on a project where I needed a simple radio button functionality but couldn't find something simple to use for React Native, so I decided to build one on my own!
So everyone who is reading this, I am going to create React Native Radio Button component package and publish it on npmjs.

You can get it going in 5 simple steps -

Set-up the custom package
Write the code for custom package
Install the package in a new or existing project
Test locally
Deploy on npmjs

Setting up your package

The first step to take is to set up a project for the package we are going to create. Go to your desired directory, open up your terminal or cmd/PowerShell and run:

npm init MyPackageName

This creates a blank package for you. Specify the details you are asked about and finally create an index.js file. (At the time of writing this package, I was not experienced in Typescript but I would 200% recommend to write the package in Typescript). Now, since this is going to be a React Native package, we need to add it as peer dependencies. Open up your package.json and add at the bottom:

"peerDependencies": {
    "react": "^17.0.1",
    "react-native": "^0.64.3"
}

Here the version should be latest or whatever version of React and React Native you are working on.

Your package is setup. Now we need to write the code for the radio button.

Code for the Package

It is a very simple package but achieves my use case so here goes the code. We are going to write our code directly in the index.js but you can follow whatever project structure you want just the entry file is going to be the index.js file.

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

export default function RadioButtons({
  text,
  setOption,
  selected,
  radioButtonBorderColor = "#000",
  radioButtonSize = 20,
  selectedRadioButtonColor = "#000",
  optionTextStyling,
}) {
  let selectedRadioButtonSize = parseInt(radioButtonSize)/2;
  return (
    <TouchableOpacity
      onPress={() => {
        setOption(text);
      }}
    >
      <View style={styles.option}>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Text style={optionTextStyling}>{text}</Text>
          <View
            style={[
              styles.radio,
              {
                borderColor: radioButtonBorderColor,
                height: radioButtonSize,
                width: radioButtonSize,
              },
            ]}
          >
            <View
              style={
                selected === text
                  ? [
                      styles.selected,
                      {
                        backgroundColor: selectedRadioButtonColor,
                        height: selectedRadioButtonSize,
                        width: selectedRadioButtonSize,
                      },
                    ]
                  : null
              }
            ></View>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  option: {
    paddingTop: 20,
    paddingBottom: 10,
  },
  radio: {
    borderRadius: 100,
    borderWidth: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  selected: {
    borderRadius: 100,
    backgroundColor: "#000",
  },
});

After we are done with the code, we are going to edit our package.json a bit. We will be adding a version, a description, keywords for SEO, author and license. It should look like the following -

{
  "name": "react-native-custom-radio-buttons",
  "version": "1.0.0",
  "description": "Add radio buttons to your react-native application",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "keywords": [
    "react-native",
    "radio-button"
  ],
  "author": "Neelesh Ranjan Jha",
  "license": "ISC",
  "peerDependencies": {
    "react": "^17.0.1",
    "react-native": "^0.64.3"
  },
}

Our package is ready to be installed locally in our projects.

Installing the package

To test our package, we need to install it, and this shall be done by running a simple command.

npm install --save ../path/to/custom-module

We can also add the package in the package.json under dependencies of the project and run npm i to install it. It would look like something like -

"dependencies": {
    "customPackage": "file:../path/to/custom-module"
  }

Your package will be installed now. Now we need to test it which is very simple.

Testing

To test, import the package like your normally do with other packages. For our case, it would go like -

import RadioButtons from "react-native-custom-radio-buttons"

Now you can just test it. What will be left is the uploading the package on npmjs and telling everyone to use it.

Deploying on npmjs

To deploy the package on npmjs, first create an account if you don't have one already and also create a GitHub repository for the package. Link it in the package.json by adding the following line-

  "repository": {
    "type": "git",
    "url": "https://github.com/Neeleshrj/react-native-custom-radio-buttons"
  }

Push the code to GitHub (After writing an amazing Readme of course) and then run a simple command in the local code to publish it to npm.

npm publish --access public

Horrah, you just published your first package. Now go on and share it with people, and give back to the community.

Remember, whenever you update the package, increase the version and publish to keep a history of older code and in case someone requires a specific version of it.

Important links

npmjs official doc on publishing packages

Link to the package repository

Link to package on npmjs

Do visit and use my package and consider giving this post and the repository a star.

Thank you <3

Local Notifications using Expo

Neelesh Ranjan Jha — Mon, 22 Nov 2021 06:40:56 +0000

Introduction

Expo is a very useful framework for developing Android Applications.
The documentation is clear and crisp, but I observed that no good write-ups or blogs exist for, so in this post I will explain how to get Local Notifications in your app.
I was developing a Timetable management application known as Timely , which sends a notification 5 minute prior to the starting time of a class.
I spent a lot of time going through GitHub and Stack Overflow, searching for some answer to find a way to send notifications every week at a certain time.

Expo Notification

We will be using Expo Notifications since the project is built on Expo.
The best method is to obviously read the documentation provided by
Expo

Note - Notifications do not work on an emulator, so make sure to use a Physical device.

Step 1: Install Expo Notifications

First step is to install the package

expo install expo-notifications

Step 2: Initialize the Notification Handler

import * as Notifications from "expo-notifications";

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

This will enable the notifications for the app.
This can be done in your entry point file like App.js or in a separate file, or you can even use Context API.

Now, how expo notifications work is that we create a Notification which is allotted a Unique ID, which can be used for deleting it later on. Every Push Notification is allotted a push token ID.

Step 3: Writing the Notifications function

This function adds the notification listener and subscriber and all the necessary things needed for getting Local notifications for your Expo App.

export default function Notification() {
  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then((token) =>
      setExpoPushToken(token)
    );

    notificationListener.current =
      Notifications.addNotificationReceivedListener((notification) => {
        setNotification(notification);
      });

    responseListener.current =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log(response);
      });

    return () => {
      Notifications.removeNotificationSubscription(
        notificationListener.current
      );
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  return (
    null
  );
}

This code can be used as it is for most projects.

Step 4: Schedule Notification function

This will be called to schedule a notification. Since I was developing a Timetable Organizer app, therefore the notifications require the day of the week, time in hours and minutes and other info to be displayed in the notification.

export async function schedulePushNotification(
  className,
  slot,
  type,
  time,
  day
) {
  time = new Date(time.getTime() - 5 * 60000);
  var days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  const weekday = days.indexOf(day) + 1;
  const hours = time.getHours();
  const minutes = time.getMinutes();
  const id = await Notifications.scheduleNotificationAsync({
    content: {
      title: className + " " + type,
      body: slot,
      // sound: 'default',
    },
    trigger: {
      weekday: weekday,
      hour: hours,
      minute: minutes,
      repeats: true,
    },
  });
  console.log("notif id on scheduling",id)
  return id;
}

The things you put up inside content will be the things shown to you in the notification.
The trigger object contains the necessary trigger conditions.
You can find more on here

Step 5: Register Push Notification Function

This function again can be used as it is, as it asks for permissions from the user to send the notification and registers the notification.

async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== "granted") {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== "granted") {
      alert("Failed to get push token for push notification!");
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert("Must use physical device for Push Notifications");
  }

  if (Platform.OS === "android") {
    Notifications.setNotificationChannelAsync("default", {
      name: "default",
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      sound: true,
      lightColor: "#FF231F7C",
      lockscreenVisibility: Notifications.AndroidNotificationVisibility.PUBLIC,
      bypassDnd: true,
    });
  }

  return token;
}

Inside the condition check for Android device, we can specify the various things we want for the notification like sound true or false or the vibration pattern, whether to bypass DND, etc which can also be found on the documentation provided for Expo Notifications.

Step 6: Cancelling Notifications

Assume that a user created a reminder for a class but later on want to switch it off. If we don't have this function, the user, even after deleting the reminder, would get the notifications forever as notification are registered with the device itself. (Probably wipe data and cache would work then) so this function will enable us to cancel any notification if we give it the notification ID generated on creating a notification.

export async function cancelNotification(notifId){
  await Notifications.cancelScheduledNotificationAsync(notifId);
}

Conclusion

Now we can call the create notification function or cancel notification function whenever we need to do so.
I will link the GitHub for the whole code of the app. Feel free to check it out and send any PR for improvements!
Also, I would be glad if you could suggest improvements to this post as well as the code for this.
Thank you!

GitHub Repo link for reference

Filtering in OpenCV

Neelesh Ranjan Jha — Fri, 22 Oct 2021 06:36:20 +0000

Introduction

In Today's OpenCV post, we will be performing Filtering Operations on Images.
Whenever some filtering need to be done on an Image, we first need to convert it from Spatial Domain to Frequency domain. The most common method for this process is Fourier Transform, but we will be using detail enhance filter by OpenCV for this.

Prerequistes

First we complete all the necessary imports



import cv2
from google.colab.patches import cv2_imshow
import numpy as np

No we can move towards reading the image-



img = cv2.imread('wild west.png')
cv2_imshow(img)

Applying Domain Filters

Now we apply the Enhance Detail filter by OpenCV. Here we specify the source image, sigma spatial value and sigma range.



dst = cv2.detailEnhance(img, sigma_s=10, sigma_r=0.15)
cv2_imshow(np.hstack((img, dst)))

This results in:

Smoothing

The next filter we need to apply is Smoothing filters.
We will be using Gaussian Filter for this.



blurimg = cv2.GaussianBlur(img,(5,5),cv2.BORDER_DEFAULT)
cv2_imshow(np.hstack((img, blurimg)))

The results-

Sharpening

No we will be applying the sharpening filter by using the Bilateral Filter. in the bilateralFilter() function, we specify the source image, d = 60 and sigma space = 60.



sharp = cv2.bilateralFilter(img, 60, 60, 60)
cv2_imshow(sharp)

High Pass and Low Pass Filters

Finally, we move onto applying Low Pass and High Pass filters on the image.
Low Pass Filter
We will be using a Kernel to apply the low pass filter. Our Low pass filter is a 5x5 array with all ones averaged.
We apply convolution between the Kernel and the Image using cv2.filter2D() function.



kernel = np.array([[1, 1, 1, 1, 1], 
                   [1, 1, 1, 1, 1], 
                   [1, 1, 1, 1, 1], 
                   [1, 1, 1, 1, 1], 
                   [1, 1, 1, 1, 1]])
kernel = kernel/sum(kernel)

#filter the source image
lpf = cv2.filter2D(img,-1,kernel)
cv2_imshow(np.hstack((img, lpf)))

This gives the output as:

High Pass Filter
For the High Pass filter, we will be subtracting the Gaussian Blur image from the actual image and adding 127 to it.



hpf = img - cv2.GaussianBlur(img, (0,0), 3) + 127
cv2_imshow(np.hstack((img, hpf)))

The result of applying a high pass filter is as follows-

Conclusion

So if you have reached this far, thank you for reading this.

Here is the Google Collab link for reference-
https://colab.research.google.com/drive/1uuX2ay3sfPw5mQAhOn6fE10cc6FlWjQG?usp=sharing

With this we found out the results of the various filters that can be applied on images and these can be used for further image processing operations.

Image Processing using OpenCV

Neelesh Ranjan Jha — Wed, 08 Sep 2021 20:06:57 +0000

Introduction

OpenCV is an open source and very powerful library when it comes to Image Processing. In the following post, I will do some basic Operations on Images using OpenCV

Prerequisite

Before we start, we need to specify the prerequisites

Google Collab or Jupyter Notebook
Basic Knowledge of Python

Required Imports

These are the imports we require to start our journey

import sys
import numpy as np
import cv2
from google.colab.patches import cv2_imshow
from PIL import Image 
import math

The next step we need to do is Import our image

img = cv2.imread("img1opencv.jpg", cv2.IMREAD_COLOR)
cv2_imshow(img)

This would Import the Image on which we will perform the Operations

1. Topological Operations

We need to find out the distance b/w 2 pixels
We do the following by finding colors at pixels and selecting a color (Note - The image is 3 Channel RGB image)

color1=np.array([169,169,169],dtype=np.uint8)
color1List=np.where(np.all((npimg==color1),axis=-1))
color1List

This selects pixels with the color code (169,169,169).
Now we need a second pixel, so we pick another color from the image from that.

color2=np.array([34,  35,  39],dtype=np.uint8)
color2List=np.where(np.all((npimg==color2),axis=-1))
color2List

Finally, we use the Euclidean formula to find the distance b/w 2 pixels.

dx2 = (color2List[0][0]-color1List[0][0])**2
dy2 = (color2List[1][0]-color1List[1][0])**2 
distance = math.sqrt(dx2 + dy2)
distance

2. Point Operations

a. Image Negatives

Finding Image Negatives is very easy with OpenCV. It can be done by a simple command of

L = npimg.max()
imgNeg = L-img
cv2_imshow(imgNeg)

Which results in this:

b. Image Transform - Power Law

Power Law deals with Gamma levels of Images. It can be done by

for gamma in [0.1, 0.5, 1.2, 2.2]:
  gamma_corrected_img = np.array(255*(npimg / 255) ** gamma, dtype = 'uint8')
  cv2_imshow(gamma_corrected_img)

We do this by changing the gamma levels to 0.1, 0.5, 1.2 and 2.2
which results in the following:

Gamma 0.1

Gamma 0.5

Gamma 1.2

Gamma 2.2

c. Piece Wise Linear Transformation Functions: Grey Level slicing, Contrast Stretching

We will first start with Grey level slicing.
We do the following by first specifying a min and max threshold values. Let's assume our values to be 100 and 180.

T1 = 100

T2 = 180 

h,w,c = img.shape

img_thresh_back = np.zeros((h,w), dtype = int)

for i in range(h):
    for j in range(w):  
        if (T1 < npimg[i,j]).any() and (npimg[i,j] < T2).any():  
            img_thresh_back[i,j]= 255
        else:
            img_thresh_back[i-1,j-1] = img[i-1,j-1]

cv2_imshow(img_thresh_back)

Which results in:

Now, we will move on to Contrast Stretching:
Contrast Stretching applies stretches the contrast across the image, which results in the image to look like this:

The code to do this is

def pixelVal(pix, r1, s1, r2, s2):
    if (0 <= pix and pix <= r1):
        return (s1 / r1)*pix
    elif (r1 < pix and pix <= r2):
        return ((s2 - s1)/(r2 - r1)) * (pix - r1) + s1
    else:
        return ((255 - s2)/(255 - r2)) * (pix - r2) + s2

r1 = 66
s1 = 0
r2 = 152
s2 = 255

pixelVal_vec = np.vectorize(pixelVal)

contrast_stretched = pixelVal_vec(npimg, r1, s1, r2, s2)

cv2_imshow(contrast_stretched)

3. Neighborhood Operation (neighbor size n*n)

This operation first requires us to crop the image in n*n size
We do so by

img.shape

Now we create a cropped image using the shape to create a square matrix

crop_img = img[0:2581, 0:2581]

There are a lot of operations that can be done using this, including using the Average neighbor value, but I was facing difficulty doing that, so we will proceed with using the Minimum neighbor.
This can be done using

for i in crop_img:
  for j in i:
    min = np.min(j)
    j[0] = min
    j[1] = min
    j[2] = min
cv2_imshow(crop_img)

which results in our cropped image to look like

4. Operations on set of Images

Now we move on to the most fun operations that can be done using OpenCV.

a. Arithmetic operations - Addition and Division

We will load a new image for this operation and resize both images to the same resolution.
I am going for 512 x 512

img1_resize = cv2.resize(img, (512,512))
img2_resize = cv2.resize(img2, (512,512))

Here img2 is the new image we loaded.
Now we can perform Addition on this image

imgAdd= cv2.addWeighted(img1_resize,0.5,img2_resize,0.5,0)
cv2_imshow(imgAdd)

Resulting in:

Now we move on to Division, dividing image 1 from image 2 and then image 2 from image 1

img1DivImg2 = cv2.divide(img1_resize, img2_resize)
cv2_imshow(img1DivImg2)

img2DivImg1 = cv2.divide(img2_resize, img1_resize)
cv2_imshow(img2DivImg1)

b. Logical Operations: XOR, NOT

XOR and NOT operation can be performed easily on any image using OpenCV's inbuilt functions

img_xor = cv2.bitwise_xor(img1_resize, img2_resize, mask = None)
cv2_imshow(img_xor)

And NOT operation can be done by

img_not = cv2.bitwise_not(img1_resize, img2_resize, mask = None)
cv2_imshow(img_not)

Geometrical Operations - Rotation, affine transformation

Rotation is a very basic transformation which can easily be done by OpenCV.

rows,cols, height = img.shape
M = cv2.getRotationMatrix2D(((cols-1)/2.0,(rows-1)/2.0),90,1)
dst = cv2.warpAffine(img,M,(cols,rows))
cv2_imshow(dst)

Affine Transformation is a little tedious task which requires some extra operations to be performed before on the image.
It results in changing the perspective of the image.

srcTri = np.array( [[0, 0], [img.shape[1] - 1, 0], [0, img.shape[0] - 1]] ).astype(np.float32)
dstTri = np.array( [[0, img.shape[1]*0.33], [img.shape[1]*0.85, img.shape[0]*0.25], [img.shape[1]*0.15, img.shape[0]*0.7]] ).astype(np.float32)
warp_mat = cv2.getAffineTransform(srcTri, dstTri)
warp_dst = cv2.warpAffine(img, warp_mat, (img.shape[1], img.shape[0]))
cv2_imshow(warp_dst)

This is the result of this operation

d. Statistical Operations - Mean and Variance

Finding mean and variance of an image is very easy since an Image is nothing but a NumPy array
Therefore, we can do this by

mean = np.mean(img)
mean
variance = np.var(img)
variance

e. Image Interpolation - Down Sampling

We move on to our last operation for today, which is down sampling.
This is required to decrease the overall resolution of the image.
It can be done by

print(img.shape)
img_down = cv2.pyrDown(img)
print(img_down.shape)

The resultant image has a smaller shape, but the visible result won't be a noticeable change.

Conclusion

This concludes my post about OpenCV. I hope you did enjoy going through it, although it being a bit lengthy.
Here is a Google Collab link for all the operations performed here.
Google Collab Link

DEV Community: Neelesh Ranjan Jha

Pre Commit Checks using Husky

Introduction

Pre Requisites

Initialising Husky

Editing Package.json

Editing the Pre-Commit file

Testing

Conclusion

Writing a middleware to upload files to Digital Ocean Spaces

Introduction

Installing the packages

Step 1 - Defining the S3 Client

Step 2 - Writing the file upload code

Publishing my own React Native Radio Buttons Package

Introduction

Setting up your package

Code for the Package

Installing the package

Testing

Deploying on npmjs

Important links

Local Notifications using Expo

Introduction

Expo Notification

Step 1: Install Expo Notifications

Step 2: Initialize the Notification Handler

Step 3: Writing the Notifications function

Step 4: Schedule Notification function

Step 5: Register Push Notification Function

Step 6: Cancelling Notifications

Conclusion

Filtering in OpenCV

Introduction

Prerequistes

Applying Domain Filters

Smoothing

Sharpening

High Pass and Low Pass Filters

Conclusion

Image Processing using OpenCV

Introduction

Prerequisite

Required Imports

1. Topological Operations

2. Point Operations

a. Image Negatives

b. Image Transform - Power Law

c. Piece Wise Linear Transformation Functions: Grey Level slicing, Contrast Stretching

3. Neighborhood Operation (neighbor size n*n)

4. Operations on set of Images

a. Arithmetic operations - Addition and Division

b. Logical Operations: XOR, NOT

Geometrical Operations - Rotation, affine transformation

d. Statistical Operations - Mean and Variance

e. Image Interpolation - Down Sampling

Conclusion

Thank You