DEV Community: Surbhi Dighe

Understanding Params and Query Params: A Simple Guide

Surbhi Dighe — Thu, 21 Dec 2023 17:31:07 +0000

Have you ever looked at a web address and felt like what are these jumble of letters and symbols? These are nothing but the two friendly helpers called "params" and "query params".

In the context of web development and APIs, "params" and "query params" generally refer to different aspects of passing information in a URL or web address, particularly in the context of HTTP requests.
Understanding these terms is easier than you might think.

Let's take an example of a library website so that it will be easier to understand.

Params - They are the parameters that are part of the URL path itself. Let's imagine, if a website is like a library, the params are like telling it which book you want to read.

For example - in below URL, "bookname" is a param in the path.

https://library.com/book/bookname

Query Params - They are included in the URL after a question mark (?) and are used to pass key-value pairs as part of the URL query string.

For example - in below URL, the author and category parameters are part of the query string. It is like Hey, can you show me books about action by surbhi?"

https://library.com/book?author=surbhi&category=action

In summary, "params" generally refer to the parameters that are added in the path of the URL, while "query params" refer to the parameters in the query string. Both are different ways to pass data to a server or application, but they serve different purposes and are used in different parts of the URL.

Happy Reading!!

Creating Stylish Initial-Based Avatars in React

Surbhi Dighe — Thu, 24 Aug 2023 10:53:58 +0000

Have you ever noticed those little images on websites or apps that show the first letters of people's names? These are called "letter avatars." They're handy when users haven't uploaded a profile picture yet, and they add a nice touch to the interface.

What are Letter Avatars?

Letter avatars are like visual shortcuts for names. They're usually made up of the initial letters of a user's name or their first and last names. You might have seen single letters, two letters (for first and last names), or even three letters (for first, middle, and last names). These initials are often inside colored shapes like circles or squares, making them look cool and distinctive.

In this blog post, we're going to learn how to create these letter avatars using ReactJS. Yes, you heard it right! Let's dive in.

Before We Start

Before we get into the technical stuff, make sure you have a basic understanding of React and JavaScript. Also, grab a code editor and set up your React development environment.

Building the ProfileImage Component

We're going to build a component called ProfileImage. This smart component takes the user's name as input and generates a profile image using their initials.



import React from "react";

const ProfileImage = ({ name }) => {
  const nameParts = name.split(" ");
  const firstNameInitial = nameParts[0] ? nameParts[0][0] : "";
  const lastNameInitial = nameParts[1] ? nameParts[1][0] : "";

  return (
    <span className="user-profile-image">
      {firstNameInitial}
      {lastNameInitial}
    </span>
  );
};
export default ProfileImage;

Adding Some Style

To make these avatars visually appealing, we'll apply some basic CSS. Of course, you can tweak the CSS to match your project's design.



.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  flex-direction: column;
}
.user-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: brown;
  color: #ffffff;
  font-size: 30px;
  border-radius: 50%;
  font-weight: 800;
}

Now that we have our ProfileImage component, let's use it in our app.



import "./styles.css";

import ProfileImage from "./ProfileImage";

const App = () => {

  return (

    <div className="main">

      <h1>User Profiles</h1>

      <ProfileImage name="Surbhi Dighe" />

    </div>

  );

};

export default App;

The Final Result

Ta-da! We're done. You've just learned how to create those nifty letter avatars using React. Now your user profiles will look more lively and engaging.

Experience the live demo of initial-based avatars in action by clicking on the sandbox link: Letter Avatars React - Live Demo

You also have the option to utilize the npm package for achieving the same functionality. The react-name-initials-avatar library offers a user-friendly solution to generate lettered avatars derived from usernames. This package is designed to produce visually pleasing avatars adorned with initials, thereby simplifying user identification at a quick glance.

Remember, this is just a starting point. You can expand and customize these avatars as you see fit. Happy coding! 🚀

Why I Chose to Start My Career in Frontend Development: A Personal Journey

Surbhi Dighe — Mon, 15 May 2023 09:28:41 +0000

From a young age, I’ve always been fascinated by design.🎨

I found joy in drawing pictures, creating handmade cards, and experimenting with different fonts and colors on my computer. I was always seeking out new ways to express my creativity. As I grew older, this passion only intensified, and it eventually led me down the path of becoming a front-end developer.💥 💥

Growing up, I was constantly creating things with my hands. I loved drawing, painting, and making crafts, and I was always eager to learn new techniques and styles.

While studying computer science in college, I discovered the world of frontend development and was immediately hooked. The ability to create beautiful, interactive interfaces using code was like magic to me. I loved being able to take my designs and turn them into fully functioning websites and applications. I began experimenting with different software programs and online tools.

After completing my graduation, I pursued my post-graduation. During this time, I became increasingly interested in frontend development. I was fortunate enough to be placed through college placements as a trainee software engineer and Guess what happened next!! 🚀🚀

I got my first opportunity to work in frontend development. It was an exciting and challenging experience, as I was tasked with creating interfaces that were not only aesthetically pleasing but also user-friendly and accessible. I spent countless hours researching and experimenting with different design principles, tools, and techniques to improve my skills and create better designs.

Over the years, I’ve honed my skills in frontend development, working on a wide range of projects and collaborating with talented designers and developers. It has allowed me to combine my passion for design and technology, and has provided me with endless opportunities for growth and learning. I love being able to make someone’s experience online more enjoyable and seamless. The thrill of seeing a design concept come to life through code was unparalleled, and I knew that this was the career path I wanted to pursue.

One of the things I love most about frontend development is the constant evolution of technology. There is always something new to learn, whether it’s a new JavaScript framework or a new design trend. It’s a field that requires both creativity and technical skill, which keeps me engaged and challenged.

Reflecting on my journey, I’m thankful for the first chance I had to work in frontend development. It not only allowed me to gain new skills, but also opened up a world of possibilities that I could never have imagined. For anyone considering a career in this field, I urge you to take the leap and discover the exciting opportunities that await you. You never know, you might just find your true calling as I did!

Thank you for reading!! 😃

Understanding the Difference Between == and === in JavaScript

Surbhi Dighe — Thu, 06 Apr 2023 18:27:21 +0000

JavaScript provides two comparison operators, namely '==' and '==='. Both are used to compare two values, but they work differently.

Double Equals (==) Operator

It is also known as loose equality operator. It compares two operands for equality after converting them to a common type.

For Example - If the two operands are of different types, then the JavaScript engine will convert one of the operands to the same type as the other operand.

10 == '10'     // output=========> true 

//Reason - because the number 5 is converted to the string 5

Triple Equals (===) Operator

It is also known as strict equality operator. It compares two operands for equality without converting them to a common type.

For Example - If the two operands are of different types, then it will return false.

10 == '10'     // output=========> false 

//Reason - because both the operands are of different data types

It is generally recommended to use the triple equal operator whenever possible to avoid unexpected behavior due to type coercion.

Thank you for reading!!

Different Ways to Access Object Properties in JavaScript

Surbhi Dighe — Sun, 02 Apr 2023 14:28:08 +0000

There are different ways to access object properties in JavaScript

1. Dot notation - One common way to access object properties in JavaScript is through dot notation. This involves specifying the property name after the object name, with both separated by a dot.

const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
console.log(name.firstName);  // Output: "Surbhi"
console.log(name.lastName);   // Output: "Dighe"

2. Bracket notation - Another way to access object properties is through bracket notation, which involves specifying the property name as a string inside square brackets.

const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
console.log(name["firstName"]);  // Output: "Surbhi"
console.log(name["lastName"]);   // Output: "Dighe"

3. Object destructuring - It allows you to create variables that correspond to the properties of an object. By using object destructuring, you can easily extract specific values from an object and use them in your code.

const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
const { firstName, lastName } = name;
console.log(firstName);  // Output: "Surbhi"
console.log(lastName);   // Output: "Dighe"

Although there are various ways to access object properties in JavaScript, the dot notation and bracket notation are the most frequently used.

Object destructuring is useful when you need to create variables from object properties.

JavaScript program to find Unique elements from an array

Surbhi Dighe — Sat, 15 Jan 2022 10:53:41 +0000

Following are the 2 ways to find distinct or unique elements from an array

Using ES6 new Set

var array = [3,7,5,3,2,5,2,7]; var unique_array = [...new Set(array)]; console.log(unique_array); // output = [3,7,5,2]

Using For Loop

var array = [3,7,5,3,2,5,2,7]; for(var i=0;i<array.length;i++) { for(var j=i+1;j<array.length;j++) { if(array[i]===array[j]) { array.splice(j,1); } } } console.log(array); // output = [3,7,5,2]