DEV Community: Raj Bhinde

Reviewing a Review

Raj Bhinde — Tue, 24 Feb 2026 00:56:52 +0000

Hello! Above is a review of using Oracle Database & I'll be reviewing this review.

I can relate with Abdul's review of Oracle. If you have a huge database, it definitely has features like - high availability, concurrency, scalability and much more. Performance wise, I've observed that the retrieval time for a set of data depends upon how optimal your query is. In my experience, even a large query which is medium optimal displays the result within few seconds.

On the flipside, setting up the database & the connection is little bit complicated. Depending upon the organization, you may need to tweak your settings as well. The User Interface feels like it never got an upgrade after early 2000's. Feature wise, they could add more exciting things especially in creating reports.

Overall, it's a robust database, and Oracle can work upon developing new exciting features to keep the customers happy.

Review Source

Useful VS Code Shortcuts That Would Save Your Time & Increase Productivity

Raj Bhinde — Fri, 23 Jun 2023 13:55:44 +0000

1.Command Palette
Windows: CTRL + SHIFT + P
MAC: CMD+SHIFT+P

This Shortcut opens up the command palette, you can access various commands as required. You just need to type the keyword related to the command and find it instead of navigating through menus

2.Toggle Sidebar
Windows: CTRL + B
MAC: CMD+B

Ever felt the VS code window to be too small even after using ALT + Z ? Try using this shortcut which will hide the Sidebar & give you full width of the editor.

3.Multi-Select Cursor
Windows: CTRL + D
MAC: CMD + D

Use this shortcut to select multiple tags & change them at once rather than going through one by one.

4.Copy Line
Windows: SHIFT+ALT+UP or SHIFT+ALT+DOWN
MAC: CMD + D

While writing the code, it is common for programmers to copy the lines & paste it elsewhere. This is used so frequently that there is a shortcut for this.

5.Show Errors & Warnings
Windows: CTRL + SHIFT + M
MAC: CMD + SHIFT + M

Check this shortcut out to look for any errors & bugs in your program. It opens up a panel where you can see the identified errors & warnings

6.Multi Cursor Selection
Windows: CTRL + SHIFT + L
MAC: CMD + SHIFT + L

What do you do when you have to change name of a particular tag (used everywhere throughout code) ? Most of the times, programmers go through each tag & change it. With this shortcut you can change the tag or tag name at once. Just select the code & use the shortcut. Note that this will change value of each & every tag name you selected

Bonus Shortcuts To Try :

A) Change Multiple Lines Together
Windows: CTRL + ALT + Arrow Keys
MAC: CMD + ALT + Arrow Keys

B) JUMP TO LINE
Windows: CTRL + P + Type " : "
MAC: CMD + P + Type " : "

C) JUMP TO HTML TAG
Windows: CTRL + P + Type " @ "
MAC: CMD + P + Type " @ "

D) Move your line of code up or down
Windows: ALT + UP/DOWN Arrow Keys
MAC: ALT + UP/DOWN Arrow Keys

I hope you find it useful :)

Comment down the shortcuts that you use daily, would love to see the replies

Rest Parameters & Spread Syntax

Raj Bhinde — Thu, 21 Jul 2022 20:54:00 +0000

Hi there! If you're looking to learn or just revise the REST Parameters & SPREAD syntax, then this blog is for you. We'll unfold both of the JavaScript concepts in a simple, easy to understand manner.

Let's Start with REST PARAMETERS

Imagine you're writing a function for adding two numbers in JavaScript. It would look something like this

  function addTheNumbers (numberOne, numberTwo)  {
    return numberOne + numberTwo;
  }
  // PRINTING THE VALUES

  console.log(addTheNumbers(2,3)); // expected output : 5

Works fine, yes! Now what if someone asks you to create a function for adding 5 numbers. It won't be convenient to manually add the numbers parameter till numerFive.

This is where REST parameters comes handy....

Let's quickly jump into how to use them. The REST parameter can be included in the function definition by using three dots ... followed by the name of the array that will contain them.

  function addTheNumbers (...args)  {
    let sum = 0;
    for (let arg of args){
        sum = sum + arg
    }
    return sum
  }

  // PRINTING THE VALUES

  console.log(addTheNumbers(1,2,3,4,1)); //expected output : 11

The dots literally mean “gather the remaining parameters into an array”.

Important note - The REST parameters must be at the end

Below is an Incorrect way of using REST parameters

function f(arg1, ...rest, arg2) { // arg2 after ...rest is incorrect
}

Let's look into one more example

const funcNames = (name, surname, ...args) => {
    console.log(name, surname, args);
}

funcNames("Raj", "Bhinde", "Dhaval","Bhinde")

Output - Raj Bhinde [ 'Dhaval', 'Bhinde' ]

Here, we saw that it took the name, surname & then condensed all the other parameters in one array. You can also access the index of these arrays using args[0]

Now before we move onto Spread syntax, considering the above examples let's keep in mind that REST syntax collects multiple elements and "condenses" them into a single element as we saw above.

SPREAD is opposite of rest syntax. Although the syntax looks the same, they come with slightly different semantics.

Before telling you what Spread does, we'll observe with the help of an example what SPREAD does-

Let's say we have a function which multiplies the numbers passed in arguments

const muliplyTheNumbers = (x,y,z) => {
    return x*y*z
}

console.log(muliplyTheNumbers(1,2,3)); //expected output : 6

This would work perfectly fine, but now let's say we have an array of numbers that we would like to multiply

const arrayOfNumbers = [2,3,5,2,2];

If you now pass the array in the function call it would give you a NaN. That is because the function expects a list of numeric arguments & not a single array.

Here's when Spread syntax comes to rescue!

console.log(muliplyTheNumbers(...arrayOfNumbers));

When ...arrayOfNumbers is used in the function call, it “expands” an iterable object arrayOfNumbers into the list of arguments.

We can also pass multiple arrays with the help of Spread syntax

const arrayOfNumbersTwo = [10,2]; can be passed as muliplyTheNumbers(...arrayOfNumbers,...arrayOfNumbersTwo); & is absolutely valid. We can also add normal values at the start/inbetween/end of function call.

Spread syntax can also be used to merge two arrays

const arr1 = ["1","2","3"];
const arr2 = ["4","5"]

console.log([...arr1,...arr2]); output: ['1', '2', '3', '4', '5']
console.log(...arr1,...arr2); output : 1 2 3 4 5

In the above examples we used an array, but spread works with any iterable.

let stringValue = "TheBoys";
console.log([...stringValue]); output : ['T', 'h', 'e', 'B', 'o', 'y', 's']

It can also be used to clone an object like this -

const obj1 = {
    firstName : "Raj"
}

const obj2 = {
    ...obj1,
    surname : "Bhinde"
}

console.log(obj2);// expected output : { firstName: 'Raj', surname: 'Bhinde' }

Similarly, we can merge two objects as well.

So, that was all folks! Thank you for reading so far. I hope it was a good read for you.

Here's a quick summary to not forget the difference between REST & SPREAD

REST OPERATOR -

The REST operator is known for de-structuring of elements, then it collects the leftover element to make it an array.
REST Operator must be at the end of the arguments else it doesn't work

SPREAD OPERATOR -

SPREAD Operator extracts the collected elements to a single element
SPREAD can be used anywhere irrespective of its position.

CSS Units Explained w/ Examples

Raj Bhinde — Thu, 21 Jul 2022 12:29:00 +0000

Hey there! Before writing this blog, I had a very little understanding of various CSS units & what they actually represent. And as they say -

If you don't understand a particular topic, write a blog about it!

So I put on my learning cap & here's what I understood so far-

The CSS Units are divided into 2 Categories - Absolute Units & Relative Units. But what do they mean ?

Absolute Units - The absolute units always indicate a fixed length. Units that are “absolute” are the same size regardless of the parent element or window size. This means that whenever an element is set with a property absolute, the size of that element would look the same when looked at on a phone or on a large monitor (and everything in between!)

Relative Units - Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport, etc. depending upon the unit used. Relative units are useful for styling responsive sites.

Now let's dive into the units & their examples.

Please Note - I've used Inline Styling only for the sake of convenience to know which css properties are applied. Always prefer using a separate stylesheet for your CSS

MASTER CSB For Examples - You can refer to this CSB after reading the description for respective units 😊

For Absolute Units, I'll only discuss about pixels, since it is a commonly used absolute unit

Pixels - Pixels are very straightforward, they say what they are going to do.

Take a look at the example below. This will render a 500px block with a red background that has a 14px & 30px font-size paragraph in it. Even if you change your font-size settings in chrome appearance settings, you can observe that the font size doesn't change, it stays fixed.

<div
        style={{ width: "500px", backgroundColor: "red" }}
        className="pixels-example"
      >
        <p style={{ fontSize: "14px" }}>Pixels Example</p>
        <p style={{ fontSize: "30px" }}>Pixels Example</p>
 </div>

Hence pixels are really bad for accessibility & will bite you if you continue to use it throughout your entire application. What pixels are good for is when you want something to look exactly the same width and height despite the user's browser settings. A good use case for pixels is when you are defining a border. You probably want that border to always be the same.

Now, let's look into Relative Units. Relative units can be a little more difficult than absolute units in determining which to use, so let’s go through your options in detail.

Percent (%) - Percent is Relative to the parent element’s value. Look at the example below to get a better understanding

<div className="percent-example">
        <p
          style={{
            fontSize: "1.6rem",
            width: "100%",
            backgroundColor: "black",
            color: "white"
          }}
        >
          This is the Parent Div
        </p>
        <div
          style={{
            fontSize: "1.6rem",
            width: "40%",
            backgroundColor: "black",
            color: "white"
          }}
          className="child-div"
        >
          <p>This is 40% of its parent div</p>
        </div>
</div>

Since we used percentages it is going to be responsive by default. Try resizing your browser’s width. This would not be responsive if you used pixels, rem or em to define the widths. What is nice about the usage of percentages, is that when you change the parent’s width the children will still behave in the same way. Percentages are very useful for defining layouts.

REM - In most cases you would want to use the rem unit. Rem is an absolute unit relative to the root element of the HTML document and is commonly used for font sizes. It is a scalable unit in which the browser renders into pixel values. The default root element font size is 16px. It is recommend for responsiveness with the help of @media & changing the html font-size for the required min/max widths.

In the following example- We have set the html font size as 10px in styles.css & set the font size as 1.6rem & 3rem respectively.
Now, if you inspect & check for the font size of the example, you can see that the font-size are now relative to the font-size of the html tag i.e 1rem = 10px

<div
        style={{ width: "50rem", backgroundColor: "red" }}
        className="rem-example"
      >
        <p style={{ fontSize: "1.6rem" }}>REM Example</p>
        <p style={{ fontSize: "3rem" }}>REM Example</p>
</div>

EM - em is also an absolute unit but unlike rem unit, it is relative to the immediate parent element. It can also be used for font sizes but can lead to unexpected results because it is relative to the immediate parent.

Let's look into the example -

There is a parent div with the font-size of 24px, we created a p tag with font-size of 2em, which would be 2x24 = 48px. Now, we created a child div with font-size of 12px which would be an immediate parent to our next p tag. Now giving the same font-size of 2em to this p tag, we can observe that it is relative to the immediate parent & not the top most parent div. When to use EM ? The only reason you’ll need to use em units is to scale an element which has non default font sizing. Design components like menu items, buttons, and headings may have their own explicitly stated font sizes. If you change these font sizes, you want the entire component to scale proportionately. Typically don’t Use em Units for font sizes, designs are more manageable if rem units are used for font sizing.

      <div style={{ fontSize: "24px" }} className="em-boxes">
        <p style={{ fontSize: "2em" }}>This is 2EM example</p>
        <div style={{ fontSize: "12px" }} className="immediate-parent">
          I am Immediate parent of below div
          <p style={{ fontSize: "2em" }}>This is also an 2EM Example</p>
        </div>
      </div>

If you've read so far till the blog, Congratulations! Now you know how the most recommended relative units work. Also, thank you for reading so far! But we're not just done yet- let's look into couple of more very interesting relative units

FR - fr stands for fractional unit. This unit is often used in combination with grids. Let’s take a look at the grid we defined in the example

      <div className="grid">
        <div>Div one</div>
        <div>Div two</div>
        <div>Div three</div>
      </div>

.grid {
  font-size: 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  background-color: red;
}
.grid div {
  background-color: red;
}

The column sizes get defined by the grid-template-columns property. There is a total of 5fr, which means that 1fr will come down to 20%. This means that the column widths will be 20%, 40%, and 40% respectively. Fr is a really nice unit to use because it takes a lot of the math out of the way. You can change the amount of fr’s in the grid and the size of 1 fr will automatically get figured out for you. This is why you could, and maybe should, prefer them over percentages when defining a grid.

And the last one......

VW & VH - The vw and vh units, stand for viewport width and viewport height. No matter where you are, inside a child div or in a grand grandchild div, the vw and vh will always be the width and height of the viewport. Viewport is the size of your window. In the example you can see that it took the width & height equivalent to that of your window / viewport

<div
        style={{ backgroundColor: "black", width: "100vw", height: "100vh" }}
        className="viewport-example"
      >
</div>

Thank you for reading this blog, I hope you learned something out of it or it was a good revision for you.

To be honest, I am at an Intermediate level when it comes to CSS, so I would be more than pleased to read your approaches & hack when it comes to using different CSS units for different elements.

Search Functionality using Formik

Raj Bhinde — Fri, 15 Jul 2022 20:01:14 +0000

Hi there! I have made this beginner friendly blog to create a simple search functionality where we would be getting the inputs from a form, and then by using a simple function we can sort the inputs received from the dummy data that we'll create.

While building this functionality, we're going to use useFormik() React hook as it makes the state handling of all the input elements easier especially when you have many input fields. You'll see the benefit of Formik further in the blog.

Enough talking, let's get coding!

Step 1- Create a dummy data

export const dummyObject = [
  {
    id: "1",
    firstName: "Raj",
    lastName: "Bhinde",
    userLocation: "Mumbai"
  },
  {
    id: "2",
    firstName: "Smrithi",
    lastName: "Mohandas",
    userLocation: "Bangalore"
  },
  {
    id: "3",
    firstName: "Dhaval",
    lastName: "Bhinde",
    userLocation: "New Jersey"
  },
  {
    id: "4",
    firstName: "Mohit",
    lastName: "Bhinde",
    userLocation: "Thane"
  },
  {
    id: "5",
    firstName: "Shubham",
    lastName: "Dawkhar",
    userLocation: "Pune"
  }
];

Step 2- Create the input elements

<form>
   <label htmlFor="firstName">First Name</label>
   <input type="text" />
   <label htmlFor="lastName">Last Name</label>
   <input type="text" id="lastName" />
   <label htmlFor="location">Location</label>
   <input type="text" id="location"/>
</form>

Step 3- Integrate useFormik() in our code

const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      userLocation: ""
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

Now, the changes in the input elements would look something like this

<form onSubmit={formik.handleSubmit}
<input
      aria-label="input-firstName"
      id="firstName"
      type="text"
      onChange={formik.handleChange}
      value={formik.values.firstName}
/>
</form>

You can continue using the same syntax of onChange & value for each & every input box irrespective of its type. This is where formik helps in getting rid of writing the spread operator & the syntax. It takes care of the state updates by itself.

Now, when we press the Submit button, we can see our input values in the console. That's happening because of the onSubmit functionality we passed in step 3 & console logging the values which got passed in the input.

Let's get rolling towards the next step!

Step 4- Get rid of the empty values.

Since we're creating a search functionality, we only want to filter using the values we provided in the input & get rid of the empty values which are returned by the formik. So let's create a function for that.

Before you look into the solution below, try to write a function for this by yourself. Basically you just have to delete the empty values of the keys in the JSON object.

const filterFunction = (values) => {
    const data = {...values};
     Object.keys(data).forEach((key) => {
      if (data[key] === "") {
        delete data[key];
      }
    });
}

Now, at the place of console.log at the onSubmit let's call this function with values as the argument. You'll be able to see that, we're getting a JSON, only of the values which we entered in the input.

Step 5 - Let's create a function to filter the data

Before you look into the solution below, try to write a function for this by yourself. Here, we are trying return the data where the key & value of our object matches with the dummyObject we created.

    var finalObject = dummyObject.filter(function (item) {
      for (var key in data) {
        if (item[key] !== data[key]) return false;
      }
      return true;
    });
    setSearchResults(finalObject);

Note that I've created a useState here to store the results of final Object & access it outside of the function to display the data.

Step 6 - Let's display the data. Write the below code outside of your form tag.

{searchResults.length !== 0 &&
        searchResults.map((value, key) => {
          return (
            <div key={key}>
              {value.firstName} {value.lastName} {value.userLocation}
            </div>
          );
        })}

Voila! We now have a form with a search functionality.

If you've reached this far, thanks for reading my first blog. Any kinds of queries & feedback are most welcome.

Embedding a CodeSandBox Link here incase anyone needs it -