Forem: Barnabas Ukagha

Setup React With Vite on VSCode: A Step-by-Step Tutorial

Barnabas Ukagha — Thu, 15 Feb 2024 21:41:35 +0000

Vite is a fast and efficient build tool that delivers a high performance, flexible, and leaner development experience for modern web projects.

Creating a React project can be slow and would take a couple of minutes, thereby slowing the development process. It's even worse with an older machine.

Vite will make your project faster than usual. It also allows you to select the framework you want to work with.

In this step-by-step tutorial, you will learn how to install React with Vite on your VSCode editor.

This article is best suited for beginner front-end developers.

Step 1: Open your VScode (Visual Studio Code) editor and open a new terminal.
To do this, click on the three white dots at the top left area of your screen and select “Terminal” and “New Terminal”.

or press ```Ctrl

Shift + {% raw %}`` and select the folder you want your project to be in. A new terminal will open at the bottom of your VScode editor.

Step 2: Inside your terminal, type npm create vite@latest and press enter.

It will ask for permission to download create-vite@latest packages.

Press y and click enter.
It will download the create-vite@latest packages; it will only take 2 or 3 seconds.

Step 3: Vite allows you to give a name to your project. The default name is vite-project.

In this step, you can change the name to whatever you want or leave it as the default name and press enter.

I will leave mine in the default name.

Step 4:You will see a list; use the arrow keys to move up and down the list, click enter to choose your preferred option.
In this step, we will select React

Next, You will see four options to choose from, Navigate to and select JavaScript.

And that's it; you now have your Vite project. Easy peasy, lemon squizy.

But we still haven't finished yet; you have to run your project and make it live.

Step 5: Enter your Vite project with the name you saved it with in Step 3.

Look at your terminal, and you will see a list of three commands. Type in the first command exactly as it is written, and press enter. Look at the image below to better understand it.

In the image above, I typed in the first command on the list. Your command will be different if you had saved your project with a different name from mine.

Type it as you see it written on your terminal and press enter to access your project.

Step 6: Next, type the second command on that list, npm install and click enter.

That will install all the dependencies inside the Vite project.

It will take 3 seconds to 1 minute to complete the installation, depending on the speed of your machine and the internet.

Step 7: Type the third command on the list, npm run dev. Remember to type it exactly as you see it written on the list.

Type npm run dev and press enter. It will start your Vite project.

On your terminal, you will see a blue link; click on it to open your Vite project in your web browser.

Your Vite React project will look like this;

Step 8: To access your project files, go to your VScode editor and click Explorer at the top left corner of your screen.

A panel will open, and you will see your project folder with all the Vite and React packages.

You can now start working on your project.

Conclusion:
See, that wasn't hard at all, and the whole process didn't take too long to complete. With time and practice, it will become faster and more intuitive.

Now that you have learned to install React with Vite on your VSCode editor, I advise that you keep practicing and learn to install other libraries and frameworks. Remember, practice makes perfect.

Thank You
And
Happy Coding.

Difference between props and state in React.js

Barnabas Ukagha — Thu, 08 Feb 2024 14:38:03 +0000

When learning React.js, some of the first and most important concepts you will learn are props and state. One of the issues faced by beginners is not knowing the difference between props and state and when to use them.

This article will teach us the difference between props and state and when to use them.

Difference between props and state

Props

Props are like arguments used to pass data from parent to child components.
Props are immutable; they can't change once they've been set.
Props are used in both functional and class components.
You use this.prop to access props in class components as well as an argument in functional components.

State:

A state is like a component memory used to store and change data within a component.
State is mutable; its data can change at any time.
State is only present in class components. Functional components can only use state using React hooks.
You use this.state = {...} to initialize the constructor of a class component and the useState() method to change it.

When to use props and state

You use props whenever you want to parse data from parent to child components. You use state to store and change data within a component.

You can use Props to parse state data from parent to child components.

Conclusion

Now that you know the difference between props and state and when to use them, I urge that you practice using them on many easy projects. You might not get the hang of it at first, but with continuous practice, you will get better and master using them in no time.

Also, learn and practice other React concepts like events, conditionals, and hooks to get better at React.js.
Thank you
And
Happy Hacking.

jQuery cross-browser compatibility: fixing JavaScript cross-browser incompatibility using jQuery

Barnabas Ukagha — Mon, 29 Jan 2024 12:21:50 +0000

JavaScript oversaw the evolution of web development. It allowed developers to build more functional and dynamic websites. JavaScript is very popular and favored developer community that over 95% of the websites are powered by it. However, JavaScript faced the challenge of inconsistent output across different browsers until jQuery was introduced to bring cross-browser compatibility to web development.

jQuery improved the use of JavaScript in web development in multiple ways, but in this article, we will be talking about how jQuery made JavaScript cross-browser compatible.

What is cross-browser compatibility?
Challenges of JavaScript cross-browser compatibility in web development
- Some of the reasons for JavaScript inconsistencies are
Introduction of jQuery and its contribution to improving cross-browser compatibility in web development.
- jQuery's Universal API for Cross-Browser Compatibility

Prerequisite

To get the most out of this article, you should understand HTML, CSS, and JavaScript at the base level. If you are unfamiliar with these technologies, we recommend taking some time to familiarize yourself before proceeding.

What is cross-browser compatibility?

In web development, cross-browser compatibility refers to a website's or function's ability to function consistently across various browsers and devices. Cross-browser compatibility is when there are no changes in the result or behavior of a written script in different browsers.

In web development, some syntaxes behave differently in different browsers or that some browsers do not support, which causes our codes to behave differently in some browsers. Achieving cross-browser compatibility gives our project a consistent output across different browsers.

Challenges of JavaScript cross-browser compatibility in web development

JavaScript is the powerhouse language of the web. It is currently being used on more than 90% of all websites. JavaScript makes building functional and dynamic websites easy, which is difficult to achieve without JavaScript. With JavaScript's success and popularity, it still faces the challenge of inconsistencies across different browsers due to how browsers process, interpret, and execute code.

Some of the reasons for JavaScript inconsistencies are:

Rendering Differences: Due to how different browsers render JavaScript, it may lead to unexpected behavior, styling discrepancies, and layout issues on a website.

JavaScript API Variations: Some browsers may have different levels of support for JavaScript API features and implement them differently, requiring developers to write different codes for these browsers.

Event Handling Discrepancies: Some browsers have different ways of triggering events on JavaScript, such as clicks, hovers, or keypresses. Developers have to account for this when building websites. We have to modify event handlers for these specific websites.

Performance Variance: Optimizing performance with JavaScript can be challenging because of JavaScript inconsistencies among browsers. Code that works well in one browser may perform poorly in another.

Introduction of jQuery and its contribution to improving cross-browser compatibility in web development.

jQuery was introduced in 2007 as a JavaScript library to streamline the use of JavaScript in web development. jQuery simplifies JavaScript Dom manipulation, animations, and Ajax, and it is cross-browser compatible.

jQuery cross-browser compatibility simplifies and speeds up the production process of a website by reducing the amount of brainpower and time developers would spend thinking about writing different codes for different browsers. Without using special coding techniques to modify your code, jQuery will have consistent output across all major browsers, which makes it easier and faster to build websites.

jQuery quickly became an essential tool because developers no longer had to worry about their code being compatible across browsers; they just had to write their codes, and the jQuery API would compile them across all browsers with a consistent output.

jQuery's Universal API for Cross-Browser Compatibility

jQuery has a standard and simple JavaScript API that is uniform across various browsers. It takes away many of the challenges that developers face from various browsers. With this, you can rely on a uniform syntax to perform common tasks that work on all browsers.

Conclusion

jQuery brought cross-browser compatibility to web development. With jQuery, there is no need to write different functions for specific browsers.
Now that you understand how easily jQuery brings cross-browser compatibility to web development, consider exploring other ways jQuery can enhance the ease of using JavaScript for web development.

Enhancing jQuery DOM Manipulation: Best Practices for Optimal Performance.

Barnabas Ukagha — Tue, 26 Dec 2023 05:25:19 +0000

Enhancing jQuery DOM Manipulation: Best Practices for Optimal Performance.

DOM (Document Object Model) manipulation is the changing of the properties( shape, size, color, position, text, sound, etc.) of an element in a web document without refreshing the page.
Manipulating the DOM successfully is one of the most important tasks in web development. It enables developers to dynamically change the HTML elements, content, and style of a web page using JavaScript.

Optimizing DOM manipulation ensures faster load-time, lower server costs, a smoother and better user experience, and improves the performance of your website. There are many methods to optimize the DOM manipulation of a web page. Some different libraries and frameworks specialize in easing the task of manipulating the DOM, but in this article, we will be looking at jQuery.

jQuery's Role in DOM Manipulation

jQuery is a lightweight JavaScript library. It allows developers to write shorter codes to accomplish simple tasks that require many lines of native JavaScript code by replacing common JavaScript tasks with simple and easy-to-remember methods that can be called using a few lines of code. Among other libraries, jQuery is a popular choice due to its simplicity and extensive support for DOM manipulation, making it accessible to developers on all levels.

Using native JavaScript to manipulate the DOM would require more time, syntax, lines of code, and thinking power. jQuery makes all that hard work simple by reducing the need for all that syntax, reducing the number of codes for common tasks, and offering cross-browser compatibility, which cancels the need to write different functions for specific browsers.

The Best Practices For Simplified DOM Manipulation

It has been established that jQuery makes it easier to manipulate the DOM in JavaScript, but there are still strategies and practices to follow to make the operations of your website run even smoother. Below are the best practices to follow to make it even better.

Minimize DOM Operations

Reducing activities on the DOM to the minimum makes it more efficient, and efficiency is critical to a responsive website. Here is how to minimize operations.

Bundle multiple DOM changes into one method. Too many single changes to the DOM would make your web page slower. Combining style, content, and attribute changes would make a responsive website even smoother.
Utilize selectors such as IDs and classes to target element selection. By using these selectors wisely, you can precisely pick elements without traversing the entire DOM, leading to quicker operations.

Efficient jQuery Object Caching

Object caching is the storage of references to frequently accessed DOM elements into variables for easy access. Instead of querying the DOM for the same element multiple times, you can store it in a variable using $.cache and then use that variable whenever you need to access the element.

Caching your DOM elements drastically improves the speed of your code execution.

Optimized Selector Usage

jQuery selectors are methods used to directly select HTML elements from the DOM using attributes, values of attributes, names, classes, IDs, types, and so on to identify the specific element that is selected.

Selectors are categorized into three types: basic CSS selectors, positional selectors, and custom jQuery selectors.

Basic CSS selectors: use standard CSS rules, syntax, and semantics to select HTML elements. Examples are using . and * to call classes and IDs, respectively.

Positional selectors: are methods that use the position of an element in the DOM to select it. Positional selectors also use the relationship of an element with another element in the DOM to select it, like parents, children, and siblings.

Custom JQuery selectors: are methods that were created by JQuery to give developers more selector options than just CSS positional selectors. It allows developers to pick elements based on their header, checkbox, image, file, etc.

To find out more about jQuery selectors, check here.

Techniques for Performance Optimization

Utilizing Event Delegation: Event delegation is when the event listener of a parent element is shared by the child element. You simply attach an event listener (click, hover, keypress, etc.) to a parent element, and it will be used by the child element instead of attaching the same event listener to multiple elements.
Syntax

$(selector).delegate(childSelector,event,data,function)

To find out more about the jQuery delegate() method, check here.

Efficient Handling of DOM Insertions and Removals: When adding new elements to the DOM, you should use methods that are optimized for insertions into the DOM, such as .after(), .before(), .insertAfter(), etc, and when removing elements from the DOM, use methods that are also optimized for removals, such as .detach(), .empty(), .remove(), etc, to improve the performance of your website.

Below is a table that highlights methods for insertions

Methods	Uses
.append()	Add content to the end of an element.
.prepend()	Add content to the beginning of an element.
.after()	Add content right after an element.
.before()	Add content just before an element.

Optimal Animation With Minimal DOM Manipulation:
jQuery has convenient animation methods, but excessive animations can negatively impact performance. Here are some ways to optimize animations for enhanced performance.

Limit animations by avoiding unnecessary animations, especially indefinite loops. Decide whether an animation is necessary and how it affects the user experience.
Use animate() to pile and queue multiple animations into one batch of operations.
Use CSS transitions more frequently. Since they are GPU-accelerated and offloaded to the browser's rendering engine, they are more efficient than jQuery animations.

Avoiding Overly Nested Method Chaining:
Method chaining is simply writing multiple jQuery functions (in the same element) in a single line.

While method chaining has its merits, having too many jQuery statements in our code can cause performance degradation because it has to continuously re-access the same elements and use the same selectors, which slows down the execution of your code.

Summary

To enhance DOM manipulation and optimize operations on your website, you're going to have to write shorter and cleaner codes. But first, you are going to have to write your code the way you learned how to and ensure it works. Then you can go through your code and ask yourself, “Is this short and clean enough?”. If not, then you can begin editing your code to be shorter and cleaner using the strategies and best practices listed above.

Writing optimized, shorter, and cleaner code would make your code easy to read, more scalable, and easier to maintain. It would also improve the performance of your web page, which would in turn enhance the user experience.

Difference Between Vanilla JavaScript & jQuery, And When Best To Use Them.

Barnabas Ukagha — Mon, 18 Dec 2023 14:48:31 +0000

JavaScript is a basic scripting language and the foundation of web interactivity. It has undergone a lot of changes since it was first introduced.

Vanilla JavaScript simply refers to using pure, standard JavaScript without any additional libraries or frameworks like jQuery, React, or Vue.js.

JQuery is a JavaScript library that simplifies the writing of JavaScript code. It has become very popular for this reason.

However, with the advent of modern browsers and the development of vanilla JavaScript, things have changed. In this article, we will discuss the differences between vanilla JavaScript and jQuery, and when best to use them.

The Growth And The Importance of Vanilla JavaScript To Web Development.

In its early days, vanilla JavaScript was only being used to perform simple tasks on web pages, but grew and evolved, and became integral in the creation of dynamic and interactive web experiences.

Vanilla JavaScript played a significant role in the growth of web development, due to how easily interactive and functional it made web pages. It is so favored by web developers, that over 90% of the web is powered by JavaScript.

Despite its growth and favoritism by web developers, vanilla JavaScript still had its difficulties, which was why jQuery was introduced in 2006. jQuery eased the challenges faced by web developers when using vanilla JavaScript.

The Emergence Of jQuery.

jQuery was presented as the solution to JavaScript's many challenges such as the inconsistencies and complexities with vanilla JavaScript when dealing with DOM(Document Object Model) manipulation and event handling across different web browsers.

In a short amount of time, jQuery was recognized as a fast, small, and feature-rich JavaScript Library, that was also easy to learn and use. It made writing JavaScript with fewer codes and provided an easy-to-use API for developers.

Difference between vanilla JavaScript and jQuery.

Criteria	Vanilla JavaScript	jQuery
Cross-browser compatibility	Vanilla JavaScript tends to be inconsistent across different browsers.	By addressing inconsistencies across browsers, jQuery ensured a uniform experience.
Development time	With Vanilla JavaScript, Some tasks might require more lines of code to achieve, which will take a lot of time to write.	jQuery allows developers to achieve more with fewer lines of code, facilitating faster development.
Performance	Vanilla JavaScript tends to execute faster since it interacts directly with the browser API, and it has no overhead library to slow it down.	jQuery adds another layer of files to the JavaScript, which will in turn impact its speed and performance.
Learning progress	Using Vanilla JavaScript gives one an improved understanding of the core concept of JavaScript.	Using jQuery makes writing JavaScript a lot easier, which will in turn stall the learning progress of a developer.
Mistakes	It is easier to make mistakes or miss something while writing vanilla JavaScript code, due to how long it can be.	jQuery code is mostly short, it is easy to find mistakes and correct them.
Beginner-friendly	Vanilla JavaScript is less beginner-friendly and will require one to write more code than jQuery.	jQuery is a lot friendlier to beginners by requiring very short and easy-to-remember syntax.

Making The Right Decision.

One needs to know when best to use either vanilla JavaScript or jQuery.

Vanilla JavaScript

For big & complex projects where performance will be important.
When building projects to learn to understand JavaScript better.
When building a server-side application with node.js.

jQuery

When you need to build a small project quickly or test ideas, jQuery would prove to be quite useful.
Already existing large project that relies on jQuery, migrating out would be difficult, but it will be better to just stick with it.
When building small projects for fun.

Conclusion

Choosing between vanilla JavaScript and jQuery is dependent on the needs of the project and the skill set and preference of the developer involved in the project.

Vanilla JavaScript is more suitable for new major projects that require fast performance, while jQuery is for legacy projects that were already built with jQuery.

With all that has been said, it is still best for a web developer to master both vanilla JavaScript and jQuery, and understand when best to use them, to ensure the best outcome of their project.

Create a Simple Random Quote Generator Using Jquery and Advice Slip Api

Barnabas Ukagha — Fri, 08 Dec 2023 16:24:26 +0000

The task is to create a simple random quote generator using Jquery, with the help of advice slip api. This tutorial will guide you on how to build a quote generator and how to use api’s with Jquery.
You only need a basic knowledge of HTML5, CSS, JavaScript, and Jquery.

HTML

In this tutorial, we have created a div with class “wrapper” in our HTML file.



<div class=”wrapper”></div>

This will be a container for our main content.

In the div, we have inserted four different tags.



     <div class="wrapper">
      <h5 class="header"></h5>
      <p class="quote"></p>
      <img src="" alt="" srcset="" class="divider" />
      <div class="dice-btn">
        <img src="style/images/icon-dice.svg" alt="dice image" srcset="" />
      </div>
     </div>

The class "header" will contain the quote number.

The class "quote" will contain the random generated quotes.

The img tag is for decoration.

the class "dice-btn", will be the button with the function to generate new quotes when clicked. we chose to use this particular image because it looks cool, you can use any image of your choice or a button tag, if you want to stick to traditions.

CSS

Further, we have included some CSS codes to style our project.



 * {
  box-shadow: none;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

@media (min-width: 200px) {
  body {
    background-color: hsl(218, 23%, 16%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
    padding-top: 35%;
  }
  body .wrapper {
    position: relative;
    background-color: hsl(217, 19%, 24%);
    border-radius: 0.8em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6%;
    margin-bottom: 6em;
  }
  body .wrapper .header {
    color: hsl(150, 100%, 66%);
    letter-spacing: 0.2em;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  body .wrapper p {
    color: hsl(193, 38%, 86%);
    font-size: x-large;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.5em;
  }
  body .wrapper .divider {
    padding-bottom: 3em;
  }
  body .wrapper .dice-btn {
    position: absolute;
    bottom: -2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(150, 100%, 66%);
    height: 4em;
    width: 4em;
    border-radius: 50%;
  }
}
@media (min-width: 1020px) {
  body {
    padding-top: 10%;
  }
  body .wrapper {
    width: 40%;
    margin-bottom: 3em;
  }
  body .wrapper .header {
    font-size: medium;
    padding-top: 0;
    padding-bottom: 0;
  }
  body .wrapper p {
    font-size: larger;
  }
  body .wrapper .divider {
    padding-bottom: 0em;
  }
  body .wrapper .dice-btn {
    cursor: pointer;
    transition: 0.3s ease;
  }
  body .wrapper .dice-btn:hover {
    box-shadow: 1px 1px 10px 3px hsl(150, 100%, 66%);
  }
}
@media (min-width: 1440px) {
  body {
    padding-top: 20%;
  }
  body .wrapper {
    width: 30%;
    margin-bottom: 8em;
  }
  body .wrapper .header {
    font-size: large;
  }
  body .wrapper p {
    font-size: x-large;
  }
}

We also made it responsive to mobile and desktop screen size's.

Jquery

We included the Jquery codes by CDN. in-between the head tags, we created two <script> tags, which specifies the src attributes for linking the Jquery file to our HTML.



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="script.js"></script>

And then, we added the following paths in the src attributes.

The CDN path in the first <script> tag , will make it possible to write jquery codes in out JavaScript file.

Now we move onto our script.js file, and begin to write our jquery codes to make our project functional.

First we added the ready() method in jquery.



 $(document).ready(function () {}

The ready() method is used to make a function available after the document is loaded. Whatever code one writes inside the $(document).ready() method will run once the page DOM is ready to execute JavaScript code.

Then we added a function called getAdvice().



  $(document).ready(function () {
   const getAdvice = async () => {};
 }

getAdvice function will be responsible for generating our random quotes using the get advice api.

Then we added two lines of codes into getAdvice.



  $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();
  };
 }

The first line of codes in getAdvice function creates a variable "res", which holds the link to the get advice slip api, and will send a request using the fetch method.
The second line creates a variable "data", that receives the response of the advice slip api.

Then we added two more lines of codes to the getAdvice function.



 $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();

    $(".header").html(`ADVICE #${data.slip.id}`);
    $(".quote").html(`"${data.slip.advice}"`);
  };

  getAdvice();
 }

This function sends a request to the advice slip api and appends its response to both the "header" and "quote" class in the HTML.

Then we added an onClick event to the dice button image (class="dice-btn") that calls up the getAdvice() function whenever the button is clicked.



 $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();

    $(".header").html(`ADVICE #${data.slip.id}`);
    $(".quote").html(`"${data.slip.advice}"`);
  };

  getAdvice();

  $(".dice-btn").click(function () {
  getAdvice();
 }

Now we have a working quote generator.

Below is the result of our code.

You can visit the live site here.

My first post

Barnabas Ukagha — Fri, 08 Dec 2023 15:35:54 +0000

Hello everyone, my name is Barnabas, and I'm new here.

I'm really excited to make my first post on dev.to.

I'm a newbie in the world of technical writing, and would be glad to make as many friends as possible in said field.

Your guidance would be appreciated, thank you.

Forem: Barnabas Ukagha

Setup React With Vite on VSCode: A Step-by-Step Tutorial

Difference between props and state in React.js

Difference between props and state

Props

State:

When to use props and state

Conclusion

jQuery cross-browser compatibility: fixing JavaScript cross-browser incompatibility using jQuery

Table of contents

Prerequisite

What is cross-browser compatibility?

Challenges of JavaScript cross-browser compatibility in web development

Some of the reasons for JavaScript inconsistencies are:

Introduction of jQuery and its contribution to improving cross-browser compatibility in web development.

jQuery's Universal API for Cross-Browser Compatibility

Conclusion

Enhancing jQuery DOM Manipulation: Best Practices for Optimal Performance.

jQuery's Role in DOM Manipulation

The Best Practices For Simplified DOM Manipulation

Minimize DOM Operations

Efficient jQuery Object Caching

Optimized Selector Usage

Techniques for Performance Optimization

Summary

Difference Between Vanilla JavaScript & jQuery, And When Best To Use Them.

The Growth And The Importance of Vanilla JavaScript To Web Development.

The Emergence Of jQuery.

Difference between vanilla JavaScript and jQuery.

Making The Right Decision.

Vanilla JavaScript

jQuery

Conclusion

Create a Simple Random Quote Generator Using Jquery and Advice Slip Api

HTML

CSS

Jquery

My first post