DEV Community: Rishi Raj

Modal with a Functional Component

Rishi Raj — Tue, 09 Feb 2021 17:32:21 +0000

Yes! yet another modal tutorial but there's a catch! This one attaches an event listener on a div container rather than the document or window. Let's see how:

We first create the basic Modal Functional component

import React, { useRef } from "react";

const Modal = ({ open, onClose, children }) => {
  const modalRef = useRef(null);

  return (
    open && (
      <div className="modal-overlay" ref={modalRef}>
        <div className="modal-content">{children}</div>
        <button className="close-btn" onClick={onClose}>
          Close
        </button>
      </div>
    )
  );
};

export default Modal;

We then attach our event listeners not to the document, or the window but to the div container for our Modal.

import React, { useCallback, useEffect, useRef } from "react";

const Modal = ({ open, onClose, children }) => {
  const modalRef = useRef(null);

  const handleKeyPress = useCallback(
    ({ keyCode }) => keyCode === 27 && onClose(),
    [onClose]
  );

  useEffect(() => {
    let target = modalRef && modalRef.current;
    if (target) {
      target.addEventListener("click", onClose);
      target.addEventListener("keydown", handleKeyPress);
    }

    return () => {
      if (target) {
        target.removeEventListener("click", onClose);
        target.removeEventListener("keydown", handleKeyPress);
      }
    };
  }, [modalRef, onClose, handleKeyPress]);

  return (
    open && (
      <div className="modal-overlay" ref={modalRef}>
        <div className="modal-content">{children}</div>
        <button className="close-btn" onClick={onClose}>
          Close
        </button>
      </div>
    )
  );
};

export default Modal;

We make sure to attach tabIndex="0" property on the container and focus on it as we attach the listeners. These are the two important steps to make the Modal close by pressing Èsc button.

import React, { useCallback, useEffect, useRef } from "react";

const Modal = ({ open, onClose, children }) => {
  const modalRef = useRef(null);

  const handleKeyPress = useCallback(
    ({ keyCode }) => keyCode === 27 && onClose(),
    [onClose]
  );

  useEffect(() => {
    let target = modalRef && modalRef.current;
    if (target) {
      modalRef.current.focus(); // important
      target.addEventListener("click", onClose);
      target.addEventListener("keydown", handleKeyPress);
    }

    return () => {
      if (target) {
        target.removeEventListener("click", onClose);
        target.removeEventListener("keydown", handleKeyPress);
      }
    };
  }, [modalRef, onClose, handleKeyPress]);

  // tabIndex on our div tag
  return (
    open && (
      <div tabIndex="0" className="modal-overlay" ref={modalRef}>
        <div className="modal-content">{children}</div>
        <button className="close-btn" onClick={onClose}>
          Close
        </button>
      </div>
    )
  );
};

export default Modal;

Click here to see the Full Demo

Fine Tuning Resnet34 for a 2 class, classification

Rishi Raj — Fri, 17 Apr 2020 08:34:37 +0000

This python demo notebook shows how to fine-tune a 1000 class output network to a 2 class output network. The dataset I have consists of 60 data points, 30 for each class (dog and cat images), and 24 data points for validation dataset, 12 for each class.

Python Notebook -
https://github.com/rishiraj824/MachineLearningAlgorithms/blob/master/resnet/resnet34-finetuning.ipynb

Dataset -
https://github.com/rishiraj824/MachineLearningAlgorithms/tree/master/resnet/data

Basic requirements for training a large network like resnet is that you have to choose a valid loss function and an optimizer. For this example, I have chosen a Cross-Entropy Loss which is minimized by my model. This is useful as it already comes with a Softmax layer in it, in the pytorch library.

I am using the SGD (Stochastic Gradient Algorithm) to solve for the minimization and to optimize the model. And then at the end of the trained model, I add a Linear layer which changes the feature sets to 2 classes

num_ftrs = model_conv.fc.in_features
model_conv.fc = nn.Linear(num_ftrs, 2)

Observations:

Plotting the Training Loss and the Validation Loss with the iteration shows us how quickly it converged. This was bound to happen as this is a large network and the dataset we used was very small. But since our main objective was to fine-tune the network we were able to achieve that. This code would work for any number of data size. I hope this helped to get a brief idea of how fine-tuning works.

Scheduling Algorithm

Rishi Raj — Wed, 15 Apr 2020 01:22:05 +0000

This Python Notebook (https://github.com/rishiraj824/scheduling/blob/master/scheduling.ipynb) demonstrates the scheduling algorithm for a list of activities provided through a CSV. It uses the dynamic programming approach to solve for the most compatible activities.

The above solution works for any given activity board as it takes into account the maximum earnings from those activities.

Step 1.
We first sort all our activities based on their finish times and compare the activities one by one to find the next compatible activity because activities cannot overlap each other.

Step 2.
We use a binary search to find the most compatible activity. This takes us O(lg n) time.

Step 3.
We do this n times and while we do this we save the activity names to output all the possible activities in the end.

Step 4.
Keep adding the reward of all the compatible, highest rewards and display the sum in the end.

Getting my hands dirty on Machine Learning Algorithms

Rishi Raj — Sun, 05 Apr 2020 17:22:23 +0000

Today I'm sharing how I implemented Perceptron and the major reasons why it doesn't work for XOR type classification problems. Check out this notebook for details.

https://github.com/rishiraj824/MachineLearningAlgorithms/blob/master/perceptron/perceptron.ipynb

It's okay to say "Yes"

Rishi Raj — Sun, 05 Jan 2020 21:58:19 +0000

I would never have come to believe it was true, but going forward I realized you do not need to know everything from before. Some things are just meant to be figured out and it's okay to say “Yes” even if you do not know everything about how it will be done.

While I was in college I used to freelance a lot and do a lot of projects. Trust me, most of the projects I said yes to were something I never had heard of before. That has helped me in learning so much that I wouldn’t have, had I not said yes. Sometimes it’s just about taking that extra step.

In a hindsight, I came to believe and even now that there is a difference between what you can do and what you are not familiar with but can do it if you do your homework.

As a developer, if you wait for an opportunity to adapt to your expectations, you will never test your boundaries.

There might be a case you might not be able to deliver it completely but I’m sure that is better than not attempting it at first.