Before diving into useImperativeHandle, let’s first understand forwardRef, which plays a crucial role in making it work.

What is forwardRef?

forwardRef is a React function that allows a parent component to pass a ref down to a child component. Normally, ref is used to access DOM elements, but when combined with useImperativeHandle, it enables us to expose specific methods from the child component to the parent.

What is useImperativeHandle?

useImperativeHandle is a React hook that lets you customize the values exposed when using ref in a child component. Instead of exposing the entire component instance, it allows you to define specific functions or properties that the parent component can access.

Syntax for useImperativeHandle:

useImperativeHandle(ref, createHandle, [deps])

When to use useImperativeHandle?

You should use useImperativeHandle when:

• The parent component needs to call functions defined inside the child.
• You need to control imperative behaviors in the child from the parent.
• You want to expose specific methods without exposing the entire component.

Example:

Child Component:

import { Box, Button, Text } from "@chakra-ui/react";
import { useImperativeHandle, useState, forwardRef } from "react";

const count = forwardRef((_, ref) => {
  const [value, setValue] = useState(0);

  useImperativeHandle(
    ref,
    () => ({
      resetCount: () => setValue(0),
    }),
    []
  );
  return (
    <Box>
      <Text>{value}</Text>
      <Button onClick={() => setValue(value + 1)}>Increment</Button>
    </Box>
  );
});

export default count;

Parent Component:

import React, { useRef } from "react";
import Count from "./count";
import { Box, Button} from "@chakra-ui/react";

const ParentComponent = () => {
    const ref = useRef<{ resetCount: () => void }>(null);

  return (
    <Box>
       <Count ref={ref} />
       <Button onClick={() => ref.current?.resetCount()}>
           Reset Count
       </Button>
    </Box>
  );
};

export default ParentComponent;

The child component maintains a value state and provides a resetCount function to reset it. The parent component creates a ref, passes it to the child, and calls resetCount when needed.This approach avoids unnecessary prop-drilling and allows controlled interactions between components.

Conclusion

useImperativeHandle is a powerful React hook that enables controlled communication between child and parent components. By selectively exposing functions, it improves code structure, enhances maintainability, and simplifies interactions with external libraries. When used wisely, it can make your components more efficient and flexible. Start exploring it today to take your React development to the next level!

Welcome to the era where AI reshapes work. While concern about job displacement exist, AI is actually empowering humans to redefine their roles and boost productivity through collaboration.

Curious about AI’s impact on careers and industries?

Let’s get deeper into how AI is revolutionizing careers and industries by promoting collaboration between humans and machines.

Understanding AI:

AI involves the replication of human intelligence in machines, enabling them to perform tasks traditionally which is reliant on human cognitive abilities. This encompasses a wide array of capabilities, including learning, problem-solving, reasoning, and language comprehension. It’s crucial to grasp that AI isn’t positioned to replace humans but rather to enhance and amplify their capabilities.

AI: A Catalyst for Human Empowerment:

Rather than replacing humans, AI liberates time and creativity by performing some of the automating tasks. Humans offer unique qualities like empathy and creativity which the AI lacks! This collaboration allows for more meaningful work and higher-level problem-solving.

Harmonizing Humans and AI:

The future of work relies on seamless collaboration between humans and AI. This partnership leverages the strengths of both for better processes and decision-making. For instance, AI handles routine tasks while humans provide emotional intelligence and critical thinking.

AI won’t Replace you, Someone Using AI Will!

The AI Revolution: Capitalizing on Opportunities:

AI is reshaping industries, from healthcare to marketing, streamlining operations and driving innovation. Professionals embracing AI education are better prepared for this shift. Businesses that integrate AI effectively gain a competitive edge and drive growth.

Conclusion:

AI isn’t a threat but a catalyst for redefining work. Collaboration between humans and AI unlocks its potential for innovation and productivity. Mastering AI is key to navigating this transformation. Together, humans and AI can shape a brighter future where technology enhances rather than replaces human work.

Reference with:

AI won't take your place, but someone utilizing AI will

Happy Reading!

In this guide, we will have a look into the of Bootstrap 5’s grid system, exploring its features, syntax, and best practices for implementation.

Understanding the Bootstrap Grid System:

The Bootstrap grid system is based on a 12-column layout, allowing developers to create responsive designs that suits for various screen sizes. This grid system is built on flexbox, offering flexibilities. Each row in the grid consists of columns, and the width of each column can be adjusted based on the desired layout.

Basic Grid Structure:

To get started with the Bootstrap grid system, it’s necessary to understand its basic structure. A typical grid layout comprises rows and columns.

Here comes the basic syntax of the Grid System:

<div class="container">
    <div class="row">
        <div class="col">
            <!-- Content -->
        </div>
        <div class="col">
            <!--Content -->
        </div>
    </div>
</div>

.container:

The container provides a fixed-width space to correctly centre and pad the site’s contents.

.row:

The row acts as a wrapper for columns and ensures proper spacing and alignment.

.col:

Defines the column within a row.

Column Sizing:

The column sizes can be defined with an specific breakpoints like sm,md,lg,xl and other column numbers (ranging from 1 to 12).

Column sizing based on numbers:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- Content-->
        </div>
        <div class="col-md-6">
            <!-- Content-->
        </div>
    </div>
</div>

Column sizing based on breakpoints:

Breakpoints available in Bootstrap 5 include sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px).

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <!-- Content-->
        </div>
        <div class="col-md-6 col-lg-4">
            <!-- Content-->
        </div>
        <div class="col-md-12 col-lg-4">
            <!-- Content-->
        </div>
    </div>
</div>

Nested Columns:

In complex layouts, it’s often necessary to nest columns within columns to achieve the desired design. Bootstrap facilitates this by allowing developers to nest rows within columns accordingly.

Here comes the basic syntax of the Nested Columns:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!--Content-->
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col">
                    <!--Nested Content-->
                </div>
                <div class="col">
                    <!--Nested Content-->
                </div>
            </div>
        </div>
    </div>
</div>

Conclusion:

Mastering the Bootstrap 5 grid system is more important for creating responsive and visually stunning layouts. Whether you’re building a simple landing page or a complex web application, Bootstrap’s grid system offers the flexibility and versatility needed to bring your designs to life. Start experimenting with Bootstrap 5 today and elevate your web development projects to new heights!

Here a sample of my Bootstrap grid system!

Look into it👀:

E-Shopping

Any clarifications contact me!

Happy Coding!!

In the ever-evolving landscape of web development, creating dynamic and interactive user interfaces is more important than anything. One such tool that aids in achieving this goal is the React Slick component.

What is React Slick?

Ø React Slick is a React-based carousel component that provides a simple and flexible way to create stunning carousels with minimal effort.

Ø It is a feature-rich carousel component built for React applications, offering a seamless solution for displaying images, videos, or any other content in an elegant and customizable carousel format.

Ø React Slick provides a wide range of features and options for creating responsive and touch-friendly carousels.

Features of React Slick:

1. Responsive Design:

React Slick allows you to create carousels that adapt seamlessly to different screen sizes and devices. Whether your users are accessing your website on a desktop, tablet, or mobile device, the carousel will adjust accordingly for the best viewing experience.

2. Touch Support:

With built-in touch support, React Slick enables smooth navigation through the carousel on touch-enabled devices, providing a user-friendly experience for mobile users.

3. Accessibility:

React Slick provides built-in support for keyboard navigation and screen readers, ensuring that your carousel is accessible to all users.

Getting Started with React Slick!

To start using React Slick in your project, you can install it via npm or yarn:

Installation:

npm:

npm install react-slick --save

yarn:

yarn add react-slick

Include CSS:​

Install the slick-carousel package and import css into your slider component.

npm install slick-carousel --save

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Once installed, you can import the React Slick component into your project and start creating your carousel:

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

Finally,

React Slick is a powerful and versatile carousel component that simplifies the process of creating engaging and interactive carousels in React applications. With its rich feature set, ease of use, and extensive customization options, React Slick is an excellent choice for developers looking to enhance the user experience of their web applications.

Whether you’re building a portfolio website, an e-commerce platform, or a content-heavy blog, React Slick coverts the application into a responsive design, touch support, customization options, and accessibility features.

So why not give React Slick a try in your next project and take your carousels to the next level?

To get into React project installation, read my previous blog on:

Simple Tutorial to build your first React.js application!

Happy Coding!!

Ø Developed by Facebook in 2011.

Ø The entire React application can be modelled as a set of independent, isolated and reusable components.

Ø These components are put together to design the complex layout. In other words, the components can be defined as the building blocks of the React applications.

Ø To create React app, we write React components that correspond to various elements. We organize these components inside higher level components which define the application structure. For example, we take a form that consists of many elements like input fields, labels, or buttons. We can write each element of the form as React components, and then we combine it into a higher-level component, i.e., the form component itself. The form components would specify the structure of the form along with elements inside of it.

Here is a simple tutorial to build your first React.js appliaction:

STEP-1 :

Firstly, need to install Node.js and npm on your computer.

STEP-2 :

Create a new Repository in GitHub by naming it with the necessary name.

STEP- 3:

After creating the new repo, then open the folder in Visual Studio Code.

STEP-4 :

To check weather the node has installed successfully in your computer, use the command in your terminal:

node -v

STEP-5 :

Now you can create a new React.js app using the following command:

npx create-react-app demo-app

Here [demo-app] represents the folder name.

STEP-6 :

After the command, the folders will be created successfully as follows.

STEP-7 :

To navigate to this [created folder] folder using the command:

cd demo-app

STEP-8 :

Now, you can start the development server by running the command

npm start

This will open a new tab in your browser with your React.js app running.

STEP-9 :

Your output screen will be opened in any of the browsers like chrome as below:

STEP-10 :

You can now start editing the code in the

src

folder to customize your app.

I hope this helps! Let me know if you have any other questions. 😊

Happy Coding!

In this blog, we’re going to dig deep into the psychological reasons why we procrastinate and then look at some specific techniques on how you can overcome it and get things done now.

What is Procrastination?

It’s the end of your workday and you’re staring at the to-do list you made earlier. You have one project at the bottom of the list that you’ve been putting off. It’s already late — you still haven’t gotten to it. You tell yourself you’ll tackle the item tomorrow. You become increasingly frustrated with yourself for not getting it done.

It’s pretty common to procrastinate in all aspects of our lives.

Experts define procrastination as a self-defeating behavior pattern marked by short-term benefits and long-term costs. Many of us know it as putting off things that we need to get done, no matter the level of difficulty behind the task. We all procrastinate from time to time. However, when we develop a habit of putting off necessary actions, even when we face negative consequences, procrastination can affect our well-being.

So Why Do We Procrastinate?

Even though procrastination results in more stress in the long term, people may delay action with the idea that they will feel better in the short term.

There are a number of reasons why you may procrastinate.

§ Feeling Bored:

It makes sense that if you desire an activity to be boring or unpleasant, you will feel far to complete it and put it off later.

§ Lack of Belief in Your Abilities

You lack faith in your abilities. Believing that you can carry out tasks is essential to functioning. If your sense of self-efficacy is low, you’re less likely to begin a task or to see it through.

§ Lack of Motivation:

Procrastination can result from a lack of intrinsic motivation for a task. When a task lacks personal significance or immediate rewards, individuals may struggle to complete their tasks.

§ Distraction

Distractions in our environment can prevent us from focusing on the task at hand. Many of us can relate to the lure of social media over a dreaded activity, such as paying bills.

Researchers believe procrastination has increased in recent years. Technology has been a factor. However, procrastination has been reported as a human behavior throughout history.

How to overcome it!

“You have to learn that you don’t feel good all the time, and you’ve got to get on with it.”

1. Start small:

Break large tasks into smaller chunks and pick one that you can do now — so that you’re underway almost without realizing it!

“What is the smallest step I can take to move forward with this?”

2. Make a plan:

Put times or dates on the key tasks on your list, so that you know what to concentrate on and when.

“If you don’t want to do something, make a deal with yourself to do at least five minutes of it. After five minutes, you’ll end up doing the whole thing.”

3. Finish things:

When you spot a task that’s nearly done, put extra effort into getting it over the line. Don’t be tempted to leave lots of jobs almost finished: enjoy the satisfaction of ticking them off your list!

“The faster you complete a productive task, the more quickly your day develops an attitude of productivity and effectiveness.”

4. Deal with distractions:

What can you change about your environment to improve your focus? What needs to be put out of reach until this task is done?

5. Be kind to yourself:

No one ever gets to the end of their to-do list! Do your best to meet your deadlines, and celebrate your successes. But be realistic: you’ll always have more to do than there are hours in the day.

“The more frequently people experience that sense of progress, the more likely they are to be creatively productive in the long run. Whether they are trying to solve a major scientific mystery or simply produce a high-quality product or service.”

Don’t Delay — Start Today!

Most of us can relate to the boredom, frustration, and stress procrastination can cause. It’s important to realize that putting off projects is not a moral failing. Instead, it’s a very human tendency to avoid unpleasant feelings.

If we find ourselves frequently procrastinating, we’re likely caught up in an unhelpful cycle. We delay an activity to avoid stress, only to experience more stress when we confront the issue at the last-minute.

If we step back and consider the reasons we procrastinate, we can break this cycle. We can change our behaviors, try different approaches, and find the strength to get it all done.

Try not to Procrastinate and complete your tasks on line!

E-Vehicles:

· An Electric vehicle is being powered by an electric motor rather than the internal combustion of the engine that burns a mixture of gasoline and other gases to generate the power.

· As a result, these vehicles are being considered as a required replacement for the current-generation automobiles to solve issues such as various pollutions, global warming, natural resource depletion, and going on.

· Even though the concept of electric vehicles has been around for a long time, is has been created a lot of attention I the last decade as a result of the rising carbon footprint and other environmental implications of powered vehicles.

Challenges in India’s E-vehicle Transition:

1. Infrastructure:

One of the most important challenges being faced in eveloving to E-vehicles is the charging infrastructure. India needs to invest heavily in building a network of charging stations especially in cities. Without this infrastructure, consumers may be hesitant to switch to electric vehicles.

2. Affordability:

E-Vehicles are generally more expensive than their conventional automobiles due to the cost of batteries. The government can take various measures to reduce the cost of the subsidies and other attractive options.

3. Battery Technology:

The batteries to be used for the E-Vehicles should be designed in a way that the battery should withstand for a long time and should be cost effective.

4. Consumer Awareness:

Many Indian consumers are still unaware of the benefits of E-Vehicles. The government and manufacturers should work together to create awareness for emphasizing the environmental and economic advantages of making the switch to the EV.

Benefits of Electric Vehicles

There are numerous advantages to electric vehicles, including:

· No congestion fee means a cleaner environment.

· Operating costs are reduced.

· Tariffs for renewable energy

· An improved driving experience

· Funding from the government

· There is no charge for parking.

· Noise pollution is lessened.

· Boosted resale value

Is India Ready?

The question of whether India is ready for E-Vehicles is a complex one. Considering all the above factors, India is readily accepting the electric vehicles (EV), to control the fossil emissions and make the entire environment eco-friendly. It not only contributes to a healthier environment but also offers economic benefits by reducing the country’s dependence on fossil fuels. It is time for India to take the wheel and steer towards a more sustainable future on its roads.

Reference from Google Chrome.

To make all those dreams to a reality, the fact is that you need to put the work in order! With so much distraction and frankly, easier and less stressful things to turn your attention to, it can be extremely difficult to stay focused.

That is why it’s so important to set out some rules that you can follow. These rules will help to keep you on track, remain focused and ensure that your dreams are actually realized, and you can enjoy your many dreams. Here are some tips to help you maintain focus:

1. Set clear Goals:

Firstly, set your short-term goal and long-term goal. Then create a roadmap to achieve them. Having clear goals can keep you motivated and move on track.

2. Time Management:

Managing time is the most important factor for every individual who wish to achieve their goals. To manage your time efficiently, create a To-Do List, use time blocks, set deadlines and avoid Procrastination.

3. Minimize Distractions:

Create a distraction free environment by turning off mobile notifications, by not using unnecessary social applications and setting up a boundary with friends and family as well as colleague.

4. Self-care:

Don’t neglect your physical and mental well-being. Proper rest, exercise and relaxation are crucial for maintaining focus and avoiding burnout.

5. Celebrate Achievements:

Recognize and celebrate your career milestones to stay motivated and maintain focus.

Follow up all those tips and stay focused on your career path and achieve your big dreams!

“You don’t have to be great to start, but you have to start to be Great”

Spotknack!

Spotknack is a platform where students can enrich their future career. This platform works on various perspectives to get students know whom they are! More than 100+ students getting benefited by Spotknack. Students can start their first step towards their career by here.

My Six Months!

Through a webinar by Harshavarthan Maran I came to know about Spotknack. I started my successful first step of my career in Spotknack by 20–09–2022. The day I started was quite nervous as how do I can start my learning progress, but it was bit different from my thought!

I have joined Front-end development were I learnt some front-end properties like Html, CSS, JavaScript. By spotknack I came to know about LinkedIn and updated my learning progress by every week. And also I started using GitHub and Figma. In Spotknack we have both technical and non-technical sessions. We team of 8 students and my mentor Sujatha Krishnan used to connect by a meeting and she thought all the aspects of Frontend and gave weekly tasks to make us get engaged in learning more.

Doing tasks by own made me to learn by self. Completing every week tasks by self, made me to make my thrust of learning to be more. I started my first coding task of Hotstar Application. At first, I implemented my design outline by using Figma where it easier to get the CSS property. Then day by day I implemented my coding by referring various sites and getting my doubts cleared by my mentors. After implementing each segment of code, I used to push my code into GitHub. I can see my code through the repository created in GitHub. After, the output is being hosted by using Netlify. At first while implementing the code I got lots of errors and then by getting errors I started learning more. Completing the task as a part of my assignment can be a great way to gain practical experience.
Absolutely! working on the html, css and javascript tasks likely gave me an hands-on experience with various web development concepts and techniques like
→ Transitions
→ Transforms
→ Hover effects
→ Sliders
→ Animations

Though I have gone through various struggle at initial stage, it has given me a better feel of breath while completing my task.

Two main things which I have learnt in Spotknack is Time management and Self-learning. Managing time is being very difficult for every individual including me. But through Spotknack, now I could manage my time equally for studies and other part of life. The next thing is Self-learning. The main goal of Spotknack is to make the students to learn by self. Through the weekly tasks given, it made me to learn more by searching through the net. Self-learning makes me to be more curious on learning new aspects.

Every week a non-technical session is being conducted like Group discussion. A topic will be given and based on the topic the GD will be organized by students in their respective groups.

Through group discussion it made me to share my thoughts to everyone without any fear of speaking. Asking questions and giving a defencive point of view made me to improve my speaking skills.

Finally, Spotknack provided me a good environment where I can explore myself and whom am I to be in future. Now, Iam strong enough to handle a team in a working environment.

I would to extend a huge thanks to my mentors Harshavarthan Maran and Sujatha Santhana Krishnan for guidance and support for making me build my career.

Thank You.

Why study Java Script?

Java Script is one of the 3 Languages all web developers must learn:

1. HTML to define the content of web pages.

2. CSS to specify the layout of web pages.

3. Java Script to program the behavior of web pages.

How to save the JS file?

The JS file can be saved by using the extension .js

Example:

How to display the output screen in JS?

The output can be displayed by using the statement:

Variables and Data types in JS:

The variables can be declared as normal text format by using the statement var before

Example:

Var num1= 100;

Var name=”xxx”;

The data types supported in JS are:

1. Int

2. String

3. Boolean

Here we have various use cases such as:

· Camel case

(Example : var firstNum;)

· Pascal case

(Example : var FirstNum;)

· Snake case

(Example : var first_num;)

Rules for naming JS variables:

1) Name can contain letters, digits, _ and $ symbols

2) Name can’t start with a digit

3) Name ca start with _ or $

4) Names are case sensitive

5) Name cannot be reserved keywords

Command statement in JS:

Use the “ // “ to command a statement in the Java Script.

String in JS:

String in JS can be represented either in single or double quotes.

Example:

Var mystring = “This my JS project”;

(or)

Var mystring = ‘This my JS project’;

In-Build String methods in JS:

· Method.length();

· Method.indexOf();

· Method.lastIndexOf();

· Method.slice();

· Method.toUpperCase();

· Method.toLowerCase();

· Method.concat();

· Method.trim();

· Method.CharAt();

· Method.split();

Conditional Statements:

If, else if and else

Example:

Switch case:

Instead of using many else if statement the switch case can be used.

Syntax :

switch(expression){

case value 1:

//code

break;

case value 2:

//code

break;

}

Operators used in JS:

1) Arithmetic (+, -, *, /, %)

2) Assignment (=, +=, -=, *=, /=, %=)

3) Increment (x++, ++x)

4) Decrement (x — , — x)

5) Logical (&&, ||, !)

6) Comparison (<, >, <=, >=)

7) Ternary ( a<b ? console.log(true) : console.log(false) )

JS Objects:

Object is the collection of key value pair and enclosed within the brackets.

Syntax:

var Object_name={

“key” : “value”,

“key” : “value”

}

JS Array:

The Java script array stores list of data and it uses position to access data.

Example:

Var fruits=[“Apple”, “Orange”, “Mango”];

Console.log(fruits[2]);

In the JS array we can:

=>Update value

=> Add items

=> Delete value

=> Other methods in array:

· Splice(x,y) to delete particular item

· Concat() to add to array

· Sort() and reverse() to reserves the elements in the array.

Loops in JS:

For and while loops are being used in the Java script.

For loop:

It is being used for loop iteration

Example:

While loop:

It is used to stop the loop based on some condition

Example:

JS Functions:

Syntax:

function function_name(parameter){

//code;

}

Example:

Declaring Global variables:

Example:

var num1=10;

function sum(num2){

console.log(num1+num2);

}

Sum(5);

Hosting:

This mechanism where variables and function can be used before declaring them is called Hosting in Java Script.

Example:

num1=10;

console.log(num1);

var num1;

Code Execution:

The variables and function declarations are moved to the top of their scope before code execution. JS has two steps in executing a particular script:

1. Creation

2. Execution

DOM(Document Object Model):

When the web page is loaded, the browser creates a Document Object model of the page. It is a tree representation of HTML document. This DOM tree can be modified with help of JS.

Accessing DOM(HTML file) can be done by:

· Document.getElementById();

· Document.getElementByClassName();

· Document.getElementByTagName();

Querry Selectors:

They allow to use CSS selectors to select HTML elements. It is the new way in java script to select HTML elements. There are 2 such selectors:

1. querySelector()

2. querySelectorAll()

“All good and done with Java Script!”