DEV Community: Muslimat Mojeed

Why I want to be a Frontend Developer and How HNG Will Help Me Achieve My Goals

Muslimat Mojeed — Thu, 30 Jan 2025 18:54:35 +0000

After surveying several niches, I came to the conclusion that front-end development would be the best fit for me. But how did I come to that conclusion? 🤔
I engaged in a two-week session on front-end development and was fascinated by how code could be interpreted by the browser, transforming into stunning websites.

The desire to acquire a skill and become rich within a few months initially attracted me to tech. However, after a few months, I realized I had to let go of the unrealistic expectation of getting rich quickly. I initially thought front-end development was easy, but I soon discovered there was much more to it.

As I progressed in my career pursuit in both front-end development and Physiotherapy, I realized how I could actually use these skills to solve problems in the healthcare space. My enthusiasm for combining tech and health grew stronger, further fueling my zeal to become a developer—probably not just a front-end developer in the coming years. I’m staying motivated to learn these skills and apply them in the real world, if God permits.

How HNG Will Help Me Achieve My Goals as a Front-End Developer

Mentorship sessions, advice from experts, and webinars that will prepare me for the future.
Gaining real-world experience is another key aspect. I hope to work on real-world projects, collaborate with others in the tech space, and improve my skills.
Networking with like-minded people to grow and learn.
Building teamwork and strong communication skills.
Get updates on the latest technologies and learning how to evolve and grow in the tech space.
Most importantly, discover the best way to prepare for interviews and get hired as a React or JavaScript developer.

My Goals

I recently picked up React and would like to build real-world projects using this technology.
Build my portfolio and update my resume.
Gain hands-on experience.
Work on projects and brainstorm ideas with teammates.
Gain experience working in teams.

How Do I Plan to Achieve Them?

Actively contributing to projects, webinars, and other engaging sessions.
Being open to corrections in projects, writing, and other areas.
Continuously showing up and staying consistent.

Thank you HNG for the opportunity to be part of this.

5 Common Mistakes When Using useEffect Hook in React

Muslimat Mojeed — Thu, 30 Jan 2025 18:46:41 +0000

Introduction

Errors are inevitable in coding but can be avoided or managed. Bugs can be easily identified when encountered with a proper understanding of good coding practices.
One aspect where errors often arise is when using the useEffect Hook, typically due to mistakes made by some developers.
In this article, I will briefly discuss what useEffect entails, the common mistakes and best practices, and when to use the useEffect Hook.
You should be familiar with React and useEffect Hooks before reading this article. Whether you're just starting with React Hooks or you've been using them for a while, this article is for you.

What is useEffect?
useEffect(function () { }, []);

useEffect is a hook that allows us to handle a side effect.
Literally, side effects involve interactions between a React component and the world outside the component.

For example, fetching data from a server into your component is a side effect because there's an interaction between the server and the React component. The useEffect Hook serves as a connection between the two, allowing us to manage side effects efficiently.

It is a great Hook that helps prevent infinite re-fetching, ensuring data is fetched once after the component mounts.

Definition of Key Terms

Dependency Array ([]): This is an empty array that ensures fetched data runs only when the component renders for the first time. Infinite loops is halted using the dependency array.
Cleanup Function: In React, a cleanup function helps manage side effects effectively. The cleanup function resets a state/element back to its previous state, allowing developers to clean up resources such as canceling API requests, clearing timers, or removing event listeners. This prevents the persistence of certain actions and ensures optimal performance.

5 Common Mistakes

1.Missing Dependency Array:
Without a dependency array, data will be re-fetched after every render. HTTP requests will be sent to the server on every render, causing an infinite loop.
Example

Import {useEffect} from 'react';
function App(){
//Incorrect 
 useEffect(function () {
//Your Logic here }) 

//Correct 
useEffect(function () {
//Your Logic here }, [])
return <p> Hey Effects</p>;
}
export default App;

2.Incorrect or Missing Properties in the Dependency Array:
React would not be aware of any state variable or prop used inside an effect if it is not included in the dependency array. This could lead to a bug called "stale closure".

Stale Closure: A stale closure happens when a function remembers old values from its surrounding code instead of the most recent ones. Imagine React remembering the initial state or props but failing to recognize updates after each state change.
Example

//Incorrect
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    //Your logic here
  }, []);

 return <button>Increment</button>;
}

//correct
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    //Your logic here
  }, [count]);

 return <button>Increment</button>;
}

3.Overusing an Effect:
Writing excessive logic within a single useEffect is a bad practice.

Additionally, the useEffect Hook has its specific purpose in React. Using useEffect for actions that can be handled manually or with other hooks is considered a bad practice.

Overusing it can degrade performance, cause issues during cleanup, and introduce unnecessary bugs that might be difficult to identify.

Example

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [count, setCount] = useState(0);

  // Incorrect
  useEffect(() => {
    // Fetching data
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Setting up a timer
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(timer);
  }, []);

  return <div>{ data and count}</div>;
}

//Correct
import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [count, setCount] = useState(0);

  // Fetching data
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  // Setting up a timer
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{data and count }</div>;
}

4.Not Cleaning Up Effects:
Side effects (e.g., fetching data from an API) could persist after the component has been re-rendered or unmounted, causing performance issues like memory leaks or unnecessary data fetching.

//Incorrect
import { useState, useEffect } from 'react';

function App() {
  [count,setCount] = useState(0);

  // Setting up a timer
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
}, []);

 return <div>{ data and count 
}</div>;
}

//Correct
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

//Clean-up function 
    return () => clearInterval(timer);
  }, []);

 return <div>{data and count}</div>;
}

5.Storing useEffect in a Variable:
Storing a useEffect function in a variable can lead to loss of effect execution and stale closure.

If you store the effect function in a variable without calling it inside the useEffect, the side effect will not execute, leading to unintended behavior in your component.

Example

import { useEffect } from 'react';

function App() {
  // Incorrect 
 const effectData = function () {
       //Your logic here
     };

  useEffect(effectData
, []);

  return <div>Data...</div>;
}

//Correct
import { useEffect } from 'react';

function App() {
  useEffect(function () { 
       //Your Logic here
     }, []);

 return <div>Data..</div>;
}

Best Practices

Always add the dependency array to avoid infinite loops.
Add state or props you're currently using within the effect to the dependency array to avoid stale closure.
Avoid writing excessive logic within a single useEffect. Use multiple hooks to maintain good practices.
Use the useEffect Hook for its intended purpose such as setting up timers, subscriptions, fetching data, etc.
Ensure you clean up functions to avoid memory leaks or performance-related issues.
Don't store useEffect or effect functions in a variable.

Final Thoughts

Being mindful of these mistakes and following good practices while coding prevent unnecessary errors that could delay productivity.
This article has explored the common mistakes in useEffect and its best practices.
I hope you found the article insightful.
Have you encountered any mistakes aside from the ones mentioned above? Drop them in the comment box!

15 Essential JavaScript Concepts To Learn Before Starting React

Muslimat Mojeed — Tue, 03 Dec 2024 03:06:39 +0000

React is a popular Javascript library used to build real-world applications. To become a proficient React developer, understanding some fundamental Javascript concepts is important. For many, learning React can seem difficult, but understanding these basic concepts could ease one's learning process.
In this article, I will cover 15 essential concepts every developer should know before starting React. Each concept is explained with an example to show it's importance.
If you're just starting with React or you're about to explore the library, this article is for you.

15 Essential JavaScript Concepts

1.Callback Function
Functions are the building blocks of any program that allows code to be called multiple times without repetition.
One type of function is the Callback Function.
If you want a user to click on an arrow in the browser before any information is displayed or want some codes to be executed right after you're done fetching data from API, you can utilize the power of callbacks.
The callback function performs its task after a function or an event occurs and allows control over the execution of a function.
It's a function passed as an argument to another function and used to specify what should occur after the completion of an asynchronous operation or an event.

Example

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.Arrow Functions
Arrow Functions was introduced in ES6 and allows function syntax to be written more concisely. The arrow function are widely used in React due to its conciseness.

Example

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Array.Map() Method
Mutating the existing array is commonly discouraged in React as it could result in unnecessary bugs and performance issues. For that reason, developers employ the array methods. The functional array methods don't mutate the original array rather return a new array from the existing one.
One of the functional array methods is the Array.map() method.
Array.map() methods loop over an existing array and return a new array with the same length. Changes can be made to the new array without having any effect on the existing one.

Example

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Array.Filter() Method
The Array.filter() method works in an interesting and logical way. These methods can be used to filter out some elements of the array based on a true or false condition.
When a statement is false, it automatically gets filtered out and when it is true, it keeps it making it a suitable approach for removing unwanted elements from an array.

Example

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

5.Array.reduce() Method
As the name implies, array.reduce() method reduces an entire array to a single value. It's one of the best methods of summing or grouping elements of an array.

3 Important Keywords in Reduce Method

The initial Value (optional): A starting value for the accumulator. If not provided, the first array element is used as the initial value, and the iteration starts from the second element.
Accumulator (required):The accumulated result from previous iterations.
Current Value( required): The current element being processed.

Example

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

6.Template Literals
Template literals allow strings to contain Javascript variables or any JavaScript expression.
It provides a simple approach to create strings in JavaScript using the backticks and dollar with curly braces ${}.

Example

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

7.Ternary operators
Ternary operators are conditional operators that offer a simple and concise way of writing an if..else statement.
React doesn't directly support the if..else statement as it isn't suitable for the syntax expression known as JSX that exists in React.
JSX is a syntax extension of JavaScript that allows the embedding of Javascript, CSS and React Component into HTML.
React Syntax is considered more as an expression than a statement and the ternary serves as the suitable operator for it.

Example

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

8.Short-circuiting and Logical operators
Logical operators are used to combine multiple conditions into a single expression. The main logical operators that exist in JavaScript are:

AND- returns true only if both operands are true.
OR- returns true if at least one operand is true.
NOT- invert true values of its operand..

Short-circuiting is a behavior that occurs in logical operators where, under specific conditions, the second operand is not evaluated because the result of the entire expression can be determined solely by the first operand.

How Short-circuiting works

AND (&&)

if the first operand is false, the entire expression is false, so the second operand is not assessed.
if the first operand is true, the second operand is assessed to determine the value that will be returned.

OR (||)

if the first operand is true, the entire expression is true, so the second operand isn't evaluated.
if the operand is false, the second operand is assessed to determine the value to be returned.

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

9.RestSpread Operator
In instances when you want to add a new property to an existing array or merge a group of existing arrays, the spread Operator is the go-to operator.
Spread Operator (...) denoted by 3 dots expands an array into individual elements and is used at the beginning of an array. It is used to:

Merge array

const OriginalArray1 = [1, 2, 3];
const OriginalArray2 = [4, 5, 6];

const MergedArray = [...array1, ...array2];

console.log(MergedArray); 
// Output: [1, 2, 3, 4, 5, 6]

Copy array

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); 
// Output: [1, 2, 3]

add a new property to an existing array

const users = [
  { name: "John", age: 20},
];
const updatedUsers = users.map(user => ({ ...user, id: 001 }));

console.log(updatedUsers);
/*
Output:
[
  { name: "John", age: 20, id : 001 },
]
*/

pass an argument to a function

const numbers = [2, 4, 6];
const maxNumber = Math.max(...numbers);

console.log(maxNumber); 
// Output: 6

Rest Operator(...) is also denoted with the 3 dots but written at the end of an array. It is used to collect multiple properties from a destructured object/array.

Example

Const BookNumbers= [1,2,3,4,5];
const [first, second, ...rest] = BookNumbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5]

10.Optional chaining
Optional chaining handles null or undefined values in an easy way. It is used to access properties or any intermediate properties that appears to be null or undefined in the chain. It will automatically be short-circuited and rendered undefined. Ideally, without optional chaining, it returns an error.
In some instances you're not sure all the values exist in an object, consider using optional chaining as it is a syntax that offers checks for null and undefined values.

const user = {
  name: "John",
  World() {
    return "Hello World!";
  }
};

const greeting = user.greet?.();
console.log(greeting); 
 // Output: "Hello World!"

const farewell = user.farewell?.();
console.log(farewell); // Output: undefined

11.Destructuring Array
Codes can become cumbersome when multiple properties have to be called at once from an array. With destructuring, this can be prevented.
Destructuring allows assembling values from an array into a distinct variable.
Destructuring can be used to

Skip an element
Nest elements
Set default values.

An essential concept that shouldn't be ignored before start React is Destructuring.

Const Book = [ 
{title: 'Everyday Smile', 
Author: 'Pitty Butter'}
];
Const [title, author] = book;
Console.log(title);
 //Output Everyday Smile

12.Working With Immutable Arrays
Arrays can be mutated in JavaScript meaning properties can be added, removed or updated in an array.
However, in React, immutability is often preferred to preserve state integrity and ensure React can detect changes. To work with immutable arrays in React, methods like map, filter, and the spread operator are commonly used for adding, deleting, and updating items in arrays without mutating the original array.

Example

Adding an item

const Book = [ 
  { title: 'Everyday Smile', author: 'Pitty Butter' }
]; 
const newBook = [
  { title: 'Love', author: 'Pascal Rowland' }
];
// Combining two arrays immutably
const addBook = [...newBook, ...Book];
console.log(addBook);

To delete an item

const idToDelete = 1;
const books = [
  { id: 1, title: 'Everyday Smile', author: 'Pitty Butter' },
  { id: 2, title: 'Love', author: 'Pascal Rowland' }
];

// Using filter to remove a book by ID
const updatedBooks = books.filter((book) => book.id !== idToDelete);

console.log(updatedBooks);
//Output [
  { id: 2, title: 'Love', author: 'Pascal Rowland' }
]

To update an item

const idToUpdate = 1;
const books = [
  { id: 1, title: 'Everyday Smile', author: 'Pitty Butter' },
  { id: 2, title: 'Love', author: 'Pascal Rowland' }
];

// Using map to update a book by ID
const updatedBooks = books.map((book) =>
  book.id === idToUpdate ? { ...book, author: 'Pit Bren' } : book
);

console.log(updatedBooks);
//Output [
  { id: 1, title: 'Everyday Smile', author: 'Pit Bren' },
  { id: 2, title: 'Love', author: 'Pascal Rowland' }
]

13.Async/await function
Async JavaScript governs how tasks that take time to complete are being performed. JavaScript is a synchronous language i.e runs a code one after the other in a single thread.
In instances when you're fetching data from a database, some codes may be required to load before the fetching is completed.
With the async function, code can be executed without waiting for the operations to complete, thus improving user experience and overall performance.
In React, you'll frequently work with Application Programming Interface (API), thus, it is important have insight into how this function works.

Example

async function fetchData(){
Const res = await fetch(https://api.example.com);
Const data = await res.json();
return data;

14.Promises
Promises refers to built-in object that represents the eventual completion or failure of an asynchronous operation.
Promises exist in one of the three states:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: operation completed successfully
Rejected: The operation encountered an error.

Promises play a significant role in JavaScript, which makes it an important concept to learn about. It enables you to write cleaner code, systematically handle errors and boost overall performance.

15.Handling Errors using try.catch.finally
There are moments when errors pop up during data fetching leaving you pondering on how to find or fix these bugs.
With the use of the keywords, data fetching is handled in a more structured way.
Try..catch..finally block is a powerful error handling construct in JavaScript, that allows potential errors to be handled successfully and specific codes to be executed regardless of whether an error occurs.
It could be time-consuming to find certain errors in your code. By utilizing these blocks, it becomes easy.

Try- Encloses the code that might throw an error.
Catch- execute if an error is thrown within the try block. Receives error objects as an argument.
Finally - Execute regardless of whether an error occurs.

Example

async function fetchData() {
  try {
    const res = await fetch("https://API.example.com");
    if (!res.ok) {
      throw new Error("Error fetching data");
    }
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  } finally {
    console.log("Fetching completed");
  }
}
fetchData();

Conclusion

Gaining insights into the essential JavaScript concepts explained above will ease one's learning process and guide you toward becoming a proficient React developer.If you haven’t learned these concepts yet, make an effort to do so. Feel free to share your suggestions in the comment section!

Vite VS Create-React-App - What you need to know

Muslimat Mojeed — Sat, 02 Nov 2024 18:44:11 +0000

Over the years, Create-React-App(CRA) has been a go-to tool for building React applications.
Create-React-App is a popular command line tool that help developers quickly set up and build single-page React applications, especially for applications that don't require advanced customization. It solved the challenges of needing to set up React from scratch or writing React manually.

However, Create-React-App(CRA) still relies on slow and traditional technologies, making it more suitable for building smaller projects.
Building large modern real-world applications requires fast and modern technologies that improve the entire front-end development experience. This is where Vite comes in.

Vite is a modern build tool that contains templates of frameworks, including React, for setting up projects. It offers a faster development and deployment process.

Vite is a tool that addresses the major setbacks of the Create-React-App(CRA). It has gained popularity among developers and is now a recommended tool for building modern real-world applications.

A study showed that build time is 4 times, development time is 15 times, and hot reloading time is 10 times faster for the React application built with Vite than the application built with CRA (Gurung, Bhabishya, 2024).

You might be wondering—why is it recommended for modern real-world applications? What features makes it different from CRA?

This article has answers to these questions. While various tools for setting up React exist, this article aims to explore the built-in features of Vite that makes it a preferred choice, the differences between CRA and Vite, and the steps for setting up Vite using Node Package Manager (NPM).

Whether you're just starting with React, you want to switch to Vite or have an insight on what this tool is all about. This article is for you.

Built-in features of Vite

The features of Vite majorly focus on speed, configuration and flexibility.

Here are some of the key built-in features in Vite:

Fast Hot Module Replacement (HMR):
HMR is a development feature that allows update to module—which means small pieces of code, each managing a specific functionality in an application—to be introduced into a running application without a full reload of the browser.Vite has a fast Hot Module Replacement (HMR), enabling changes to appear on the browser instantly, thus speeding up development.
For instance, if you update the code in a module, Vite only reloads that modified module, not all the modules.
Create-React-App (CRA), on the other hand, relies on bundler that packages files together. All modules need to be compiled and bundled using the Webpack bundler before changes are seen in the browser, often leading to slower updates when working on large projects.
Use of native ES Modules:
Native ES modules are a standardized way to organize JavaScript code, introduced in ES6. They allow developers to structure code into separate modules that can be imported and exported, supporting reusability.
Vite uses native ES Modules, serving the modules directly to the browser without any initial bundling. Browsers can load modules independently as changes are made, thus speeding up development process.

Create React App (CRA) does support native ES modules but it relies on Webpack to bundle and serve these modules during development, instead of serving them directly in their native form as Vite does.
RollUp as it's Bundler:
RollUp is a bundler known for its exceptional function in producing a smaller and highly optimized bundler. RollUp also has tree-shaking features—a technique used in module bundlers to remove unused code, reducing the final bundle size. Vite relies on RollUp for its production builds as it create smaller bundles.
CRA uses the Webpack as its bundler, which also supports tree-shaking but can create larger bundles and may not be as efficient as RollUp.
Support Multiple Frameworks:
Vite supports multiple frameworks such as Svelte, Vue, Preact, etc, which makes it a multipurpose tool.
CRA is React-specific.
Built-in EsBuild tool:
Esbuild is an ultra-fast JavaScript bundler that hastens the building process in modern web development.
Vite uses the EsBuild tool for its development server and HMR and relies on RollUp for its production build.
CRA, by contrast, does not. Instead, it relies entirely on Webpack for bundling and development process.
Supports JavaScript and Typescript:
Vite has built-in support for modern JavaScript (JS), Typescript (TS), and additional features like CSS, JSX, and more plugins without requiring additional configuration.
CRA may require additional configuration to completely support some features.
PlugIn API:
One of the features that makes vite exceptional is the plugin API. Developers can customize Vite's functionality using the plugin API.
Additionally, the plugin API is compatible with the RollUp PlugIn.
There isn't a plugin API included with Create-React-App (CRA). The CRA offers a zero-configuration setup; although it permits some customization using environment variables, plugins are not supported natively.

Key Differences

Step-by-step guide using NPM

1.Open the terminal.


npm create vite@latest

2.Input the project name

project-name

It would display a list of frameworks. Select your preferred framework. In this case, its React

> React

4.Select JavaScript only from the list of languages provided if you'll be using JavaScript

> Javascript

5.Install the npm

npm install

6.Run the code on the server

npm run dev

`
Yay! You're good to go.

Tip

Vite's index.html file is located in the root directory, unlike in CRA, where the file is in the public folder. Avoid moving it, as this can disrupt the project's setup.

Final Thoughts

In conclusion, Vite is a tool well-suited for either small or large real-world applications, while CRA could be considered when building smaller applications. If you haven't tried Vite yet, ensure you give it a shot.
This article has covered the modern built-in features of Vite, its differences from CRA, and the steps for setting up Vite.
I hope you found this article useful. Feel free to drop your suggestions in the comment box.

Glossary

Modules: small pieces of code, each managing a specific functionality in an application
Hot Module Replacement(HMR): HMR is a development feature that allows update to module to be introduced into a running application without a full reload of the browser.
Native ES Modules: are a standardized way to organize JavaScript code, introduced in ES6. They use import and export statements to manage dependencies, allowing for better code organization and tree shaking.
Tree Shaking: is an optimization technique used in module bundlers to eliminate unused code, reducing the final bundle size and improving performance.

Creating Scroll Animations Using ScrollReveal

Muslimat Mojeed — Sun, 28 Apr 2024 15:32:01 +0000

As developers, we strive to create websites or applications that does not only deliver information but also engages and pleases users. One of the powerful ways in which this can be achieved is through the use of animation.
Animation in web development refers to the movement or transition of elements on a webpage, typically in response to user interactions (such as scrolling, clicking, or hovering) or as part of a visual effect to enhance the user experience.
Animations can change the static state of a website, convey information more effectively making interactions more intuitive and enjoyable for users and as well enhance the overall user experience.
In this article, we'll explore how you can effectively use the scrollReveal.js library to add scroll animations to web applications.
If you're an experienced JavaScript developer looking to spice up your projects, this article will provide the knowledge needed to create a beautiful scroll animations that will impress users and elevate your web pages.

Understanding ScrollReveal.js library

ScrollReveal.js is a JavaScript library that allows you to easily add scroll animations to elements on a web page.
With scrollReveal.js, you can define various animation properties such as duration, delay, easing, direction and more to create visually appealing effects.
One of the key features of scrollReveal.js is its ease of use. You can quickly set up animations with just few lines of code, making it accessible to both beginners and experienced developers.
Additionally, ScrollReveal.js is lightweight and efficient, ensuring that your animations run smoothly without impacting the overall performance of your website.

Installation

To install ScrollReveal.js, you can try out the following ways:

npm install scrollreveal

yarn add scrollreveal

You can also include the ScrollReveal.js directly in your HTML file using a CDN(Recommended for JavaScript project):

<script src="https://unpkg.com/scrollreveal"></script>

Customization

You can customize each element's animation by selecting it with a unique class and specifying its animation properties in the reveal method. Some common customization options include:

Duration: the duration of the animation is in milliseconds.
Origin: the starting point of the animation. It may be top, bottom, left, right.
Distance: the distance the element has to move during animation can be modified.
Delay: the time it takes before the animation starts.
Easing: it can be linear, ease-in, ease-out etc.
Reset: whether the animation should be reset when the element is not in view or not.

Usage

<h2 class="heading">
    Hi header!!!
</h2>

ScrollReveal().reveal('.heading',{origin: 'top', delay:200, interval:300,
duration:3000,
distance:'20px',
reset:true});

It is important to note that if you'll be using the same animation properties for multiple elements on your web page , you can declare the properties at the beginning of the code . This prevents the repetition and makes your code more efficient.
Reference Example

<div class="welcome">
    Welcome
</div>
<div class="contact">
    Contact Me
</div>

ScrollReveal({ distance:'120px' });
ScrollReveal().reveal('.welcome,.contact',{origin: 'left', delay:200, interval:300,
duration:3000,
reset:true});

Best Practices for using ScrollReveal.js

Use it Sparingly: Avoid overusing scroll animations, as they can distract users from your content if used excessively.
Customization: Customize animations to match the website's design and branding.
Accessibility: Ensure that the web page is accessible and usable even without animations.
Testing and Feedback: Test animations on different devices and screen sizes to ensure they work as expected. Solicit feedback from users to gauge the effectiveness of your animations in enhancing the user experience.

Common Errors and Issues with ScrollReveal.js:

Elements Not Revealing: Check if the elements that wants to be animated has been correctly selected. Ensure that the ScrollReveal instance is properly initialized and that the library is loaded before your script runs.
Animation Not Working as Expected: Double-check animation properties and syntax to ensure they are correctly set. Verify that there are no conflicting styles or JavaScript that might be interfering with the animations.
Performance Problems: If you experience performance issues, consider reducing the number of animated elements or simplifying the animations. Optimize your animations for performance by avoiding complex animations.
Compatibility Issues: Check the compatibility of ScrollReveal.js with the browsers and devices you are targeting. Consider using polyfills or alternative solutions for browsers that do not support the features used by ScrollReveal.js.
Debugging: Use browser developer tools to debug any issues with ScrollReveal.js implementation. Inspect the console for errors and log messages to help identify and fix problems.

By following these best practices and being aware of common errors, ScrollReveal.js can be used effectively.

Final Thoughts

In a nutshell, ScrollReveal.js is a powerful tool for adding scroll animations to elements on the web page. So, the next time you start a new project or refactor an existing one, try to explore the library and see the difference it can make in your project.
This article has explored the use of ScrollReveal.js for scroll animations.
I hope you gained from this article. Be free to drop your suggestions or questions in the comment box.

Understanding 'Use strict' in JavaScript

Muslimat Mojeed — Tue, 16 Apr 2024 21:54:23 +0000

Introduction to strict mode in JavaScript

Having written some lines of JavaScript code, you are probably familiar with the quirks and challenges of the language. Perhaps you've encountered those undeclared variables that cause silent errors in your code, leaving you puzzled about their origins.
In the dynamic realm of JavaScript, where creativity meets complexity, developers often encounter subtle bugs and unexpected behaviors. To address these challenges, ECMAScript 5 (ES5) introduced a feature known as 'use strict'. The 'use strict' perform additional checks and apply stricter rules to code, helping to catch programming errors and potentially improving performance. It was a significant update to the language and has been widely adopted by developers due to its benefits in catching errors and improving code quality.
Whether you're just starting out or have some experience in JavaScript, this article will explore the fundamentals of strict mode in JavaScript. The significance and why every developer should know how to use it effectively will also be discussed.

What is Strict Mode?

Strict mode is a special mode in JavaScript that allows developers to opt into a set of rules and restrictions that are not enforced by default.
Strict mode in JavaScript is like having a helpful friend who keeps an eye out for mistakes while you're coding. It's a special set of rules that make JavaScript more careful about how it reads and runs your code.
It helps catch errors that would otherwise go unnoticed, such as using variables without declaring them first or defining functions with duplicate parameter names. By enabling strict mode, developers can write code that is safer, easier to maintain, and more compatible with future versions of JavaScript.

Why Use Strict Mode in JavaScript

It assists in writing safer and more readable code.
Strict Mode helps catch common programming errors which can lead to a more predictable and reliable code.
Strict mode helps developers write code that is more compatible with future versions of JavaScript, as it encourages the use of modern language features and best practices.
Strict mode prohibits some syntax that could be misleading or problematic.
Due to modifications that facilitate JavaScript engines' optimisations, code in strict mode occasionally runs quicker than identical code that isn't in strict mode.

Enabling Strict Mode in JavaScript

To enable strict mode in JavaScript, simply add the following line of code to the beginning of your script or function:

'use strict';

This statement tells the JavaScript engine to enter strict mode for the current script or function, enabling the stricter rules and checks provided by strict mode.

Common errors and issues addressed by strict mode

The following are examples of some of the errors caught by strict mode:

Undeclared variables: In strict mode, trying to assign a value to a variable that has not been declared with var, let, or const will throw a ReferenceError. This helps catch potential issues with typos or variables that were intended to be declared but were missed.

   'use strict';
   x = 10; // ReferenceError: x is not defined

Function parameter name restrictions: In strict mode, defining a function with duplicate parameter names (e.g., function func(a, a)) will throw a SyntaxError. This helps enforce unique parameter names, which can prevent confusion and bugs.

   'use strict';
   function func(a, a) { // SyntaxError: Duplicate parameter name not allowed in this context
       return a + a;
   }

Duplicate property names: In strict mode, defining multiple properties with the same name in an object literal or function parameter list will throw a SyntaxError. This helps prevent accidental duplication of property names, which can lead to unexpected behavior.

   'use strict';
   var obj = {
       prop: 1,
       prop: 2 // SyntaxError: Duplicate data property in object literal not allowed in strict mode
   };

Using eval in a local scope: When you use eval in a specific part of your code (like inside a function) and you're in strict mode, it creates a sort of "bubble" where any new variables you create inside that eval don't affect the rest of your code. This can be confusing because changes you make inside eval don't carry over to the main part of your code.

   'use strict';
   var x = 10;
   function evalInLocalScope() {
       eval('var x = 20;');
       return x; // Returns 10 because eval creates its own scope in strict mode
   }

Octal syntax: In strict mode, octal literals (numbers with a leading zero, e.g., 012) are not allowed and will throw a SyntaxError. This helps prevent potential confusion with decimal numbers and improves code clarity.

   'use strict';
   var num = 012; //SyntaxError.

Delete of an undeletable property: Trying to delete a property that is not deletable (such as properties of built-in objects like Object.prototype ) will throw a TypeError in strict mode. This prevents unintended deletion of critical properties.

   'use strict';
   delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

These examples illustrate some of the ways strict mode in JavaScript helps catch common errors and enforce stricter rules, ultimately leading to more reliable and maintainable code.

Best practices for using strict mode in JavaScript

Just like any other tool, it's important to use strict mode judiciously and understand its implications. In this section, we'll discuss best practices for using strict mode effectively:

When to Use Strict Mode

Use Strict Mode Globally: It's a good practice to enable strict mode at the beginning of your scripts or modules to ensure that the entire codebase benefits from its advantages. This can be done by adding 'use strict'; at the beginning of your JavaScript file or function.

//  strict mode syntax at the beginning of the script 
"use strict";
const myScript = "Yo! I just got activated!";

Use Strict Mode in Functions: If you prefer to use strict mode only in specific functions, you can enable it at the beginning of those functions. This allows you to apply strict mode selectively, where it's most beneficial.

function myFunctionScript() {
  // Function strict mode 
  "use strict";
  function mySF() {
    return "Yo, I just got activated!";
  }

Use Strict Mode in Modules: When working with JavaScript modules (ES6 modules), enabling strict mode at the beginning of each module is a recommended practice. This helps maintain a consistent and predictable coding environment within each module.

Potential pitfalls to avoid

While strict mode offers many benefits, there are some potential pitfalls to be aware of:

Compatibility issues: Not all browsers support strict mode, so using it may cause compatibility problems with older browsers. It's important to test your code in different environments to ensure compatibility.
'use strict' is contagious: Once you enable strict mode in a script, all code within that script, as well as any other scripts included on the page, will run in strict mode. This can be problematic if other scripts are not intended to run in strict mode.
All or nothing: Once you enable it, it applies to all code within that scope. This means that if you only want to use strict mode for certain parts of your code, you'll need to separate those parts into different scripts or functions.
Performance impact: While enabling strict mode itself does not significantly impact performance, the additional error checking and restrictions imposed by strict mode can sometimes lead to slightly slower code execution. However, the benefits of catching errors early and writing more maintainable code often outweigh this minor performance impact.

It's important to weigh the benefits of strict mode against these potential pitfalls and use it judiciously in your projects. By understanding these details, you can leverage strict mode effectively to improve the quality and reliability of your JavaScript code.

Final thoughts

Conclusively, strict mode is a valuable tool that should be embraced by JavaScript developers. By enabling strict mode in your projects, you can write code that is more robust, reliable, and future-proof. So, the next time you start a new project or refactor an existing one, add 'use strict'; to the beginning of your scripts or functions and experience the benefits for yourself. It's a small step that can lead to significant improvements in your codebase.
This article has explored the fundamentals of using strict mode, it's significance and why it is essential for every JavaScript developer.

I hope a lot was gained from this article. Be free to drop your suggestions or questions in the comment box.

Using Git and GitHub for collaboration

Muslimat Mojeed — Sun, 07 Apr 2024 21:55:47 +0000

Overview of Git collaboration

Watching tutorials on Git and applying the knowledge to personal projects can be interesting, but collaborating using Git could present another challenge that one may face when the need arises.

As we continue to explore the field of software development, teamwork is essential to creating reliable and creative solutions. As projects get more complicated and involve more people, efficient teamwork becomes essential to maintainability and smooth development.

This article aims to extensively explain the guidelines of using Git for collaboration. It will delve into setting up a hosting platform like GitHub for collaboration, various branching strategies, collaborative Git workflows, different methods of cloning, as well as troubleshooting and resolving conflict techniques in Git collaboration.

It's important to note that knowledge of version control system(Git) and GitHub is required before reading this article, as this article mainly focuses on guidelines of using Git for collaboration.

Steps for setting up GitHub for collaboration

Creating a collaborative Git repository: Creating a collaborative Git repository (remote repository) is the foundational step towards effective teamwork. Whether your team is small or large, setting up the repository correctly ensures a smooth collaborative workflow. Quick guide on how to create a git repository:

Choose a hosting platform: Choose a hosting platform for your Git repository first. Popular options include Bitbucket, GitHub, GitLab, and so on. Because every platform has different features, take your team's demands and preferences into account. In the case of this article, we will be using GitHub.
Create a new repository
Initialize a README file: Add a README file to your repository for project documentation. This provides summary of goals and set-up instructions.
Invite collaborators: After creating the repository, add collaborators that will be contributing to the project to a repository.
To do this, navigate to settings, select collaborators, click on 'Add people'.

Configure repository settings: Repository changes can be made in the settings. Hosting platforms like GitHub enables you to choose who can see, clone, and contribute to the repository as well as set up access controls. It also enables branch protection rule to prevent unintentional pushes towards vital branches

2.Establish Branching strategies:
Branching strategies in Git collaboration refer to the practices and conventions used to manage code changes and collaboration among team members within a Git repository. These strategies define how branches are created, named, and merged to facilitate efficient development, testing, and deployment workflows. Here are some of the ways to establish branching:

Main based Branching: All developers work are done directly on the main branch. Developers make changes directly on the main branch. The main branching strategy simplifies the process of making changes, but it has disadvantages such as lack of isolation, limited review and testing of codes, difficulty in reverting some changes and increases the risk of unintended impacts on the codebase.

# Ensure you're on the main branch
git checkout main

# Make changes to the code directly on the main branch
# Add, commit, and push changes
git add .
git commit -m "Fix bug"
git push origin main

Feature branching: Each new feature is developed in a separate branch. Developers create feature branches off the main branch, work on their changes, and merge them back when ready. This provides isolation for development, allowing multiple features to progress simultaneously without interfering with each other.

# Create a new branch for a feature
git checkout -b feature/new-feature

# Make changes to the code
# Add, commit, and push changes to the feature branch
git add .
git commit -m "Implement new feature"
git push --set-upstream origin <branch-name>

Collaborative Git workflow

The collaborative Git workflow is a methodology for multiple developers to work together on a project using git as the version control system.

When it comes to Git collaboration, developers work together via a shared repository that is frequently housed on websites like Bitbucket, GitHub, and GitLab. A central hub where team members can push and pull changes is this repository. For various activities, like adding a feature or repairing a bug, developers make branches, which they later merge back into the main source.

Consider a scenario of three talented developers—Alice, Bob and Dave—were tasked with building a new web application for their client. Alice, with her strong leadership skills, volunteered to take on the role of team lead for the project. The following are the ways Alice and her teammates worked on building the project:

Alice sets up the repository, initialize a README file and invited her teammates as collaborators.
She designated the main branch as the primary development branch, setting the stage for collaborative work.
Bob and Dave each cloned the repository to their local machines and created feature branches for their respective tasks. Bob and clone can clone in three ways. It's either they clone using HTTPS,SSH Keys or Command Line Interface

  git clone git@github.com:username/repository.git

Bob and Dave decided to clone with SSH for efficiency and security reasons. The use of SSH, HTTPS or CLI for cloning will be discussed subsequently.

You need to note that as a collaborator, you don't fork a repository. Forking creates a copy of the repository in a new repository on your GitHub page. However, in the case of collaboration, you want to collaborate directly on the same GitHub repository with your teammates.

4.Over the following days, the team members worked diligently on their assigned tasks within their feature branches.

# Make changes to the code

5.They made frequent commits, pushing their changes to the remote repository to keep their codebase up to date.

# Add, commit, and push changes to the feature branch
git add .

git commit -m "commit changes"

git push --set-upstream origin <branch-name>

6.Once they completed their tasks, they pushed their changes. Bob and Dave created pull requests from their feature branches to the main branch on GitHub. On the GitHub page, they noticed a button labeled "Compare and pull request" after clicking on the pull request option. Bob and Dave clicked on this option to push the changes from their local repositories to the remote repository.

7.This took them to the “Open a pull request" page. From here, a brief description of what each of them changed was written. Each of them clicked on the “Reviewers” tab and Alice being the team lead was selected as the “Merge Master that is she will be in charge of merging the branches”. After that, they clicked on "“Create pull request”* from their ends.

8.When Alice logged into her GitHub account, she received notifications informing her that she had been assigned as a reviewer. A yellow bar appeared at the top of the pull request button, indicating that one of her teammates had "requested her review on this pull request." Alice, acting as the team lead, clicked on the "Add your review" button reviewed each pull request carefully, providing feedback and suggestions for improvement.

9.After thorough review and approval from Alice, She scrolled to the bottom of the pull requests and she clicked on the "Merge pull request". The branches was finally merged into the main branch.

10.Alice sees a “Pull request successfully merged and closed” message. She clicked on the button “Delete branch" to delete the feature branches.

Note: Deleting a branch is optional.

To learn a bit more about using Git for collaboration, check out this tutorial video below:
Git for collaboration

Ways of cloning

Repositories can be cloned using HTTPS, SSH or the Command Line Interface(CLI).

1.Cloning with HTTPS: When you clone a repository using HTTPS, you're getting its contents through a secure connection. You use your username, password, or a personal access token to prove you have the right to access the repository. This method is widely supported and easy to use, so most people find it convenient.

git clone https://github.com/username/repository.git
# Replace `username/repository` with the GitHub username and repository name

2.Cloning a repository using SSH: It involves using the Secure Shell (SSH) protocol for authentication and communication. When you clone a repository using SSH, you authenticate with the GitHub using an SSH key pair: a public key stored on the platform and a private key stored on your local system. SSH cloning is secure and efficient, especially for users who prefer no-password authentication and have configured SSH keys for Git operations. Let's walk through the process step by step:

Generating SSH Keys:

Open Terminal (Command Prompt on Windows): This is where you'll run the commands to generate your SSH keys. Run the ssh-keygencommand in the terminal

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
# Replace `"your_email@example.com"` with your actual email address.
# This command generates a new SSH key pair using the RSA algorithm with a 4096-bit key size.

Choose a Location and Passphrase (Optional): After running the command, you'll be prompted to choose a location to save the SSH keys. Press Enter to accept the default location (~/.ssh/id_rsa) or specify a different location if desired.

Passphrase: A passphrase is a sequence of words, characters, or symbols used to encrypt and protect sensitive information, such as private keys or encrypted files. It acts as an additional layer of security beyond just having the private key or encrypted data itself. When setting up certain security mechanisms, like SSH keys, users have the option to add a passphrase to enhance security. You can also choose to set a passphrase for added security. This is optional but recommended.

View and Copy the Public Key: Once the keys are generated, you'll see a message indicating where the keys were saved. To view your public key, use the following command:

cat ~/.ssh/id_rsa.pub

This will display your public key in the terminal. You'll need to copy this key to your clipboard and add the key to your GitHub as well.

Adding SSH Key to GitHub:

Log in to git hub.
Navigate to the repository on GitHub and click on the "code" button labelled.
Add SSH Key: Click on the "add a new public key" button.
Give your SSH key a descriptive title and paste your public key into the "Key" field.
Click the "Add SSH key" button to save your key.

Using SSH Keys for Git:
Clone Repositories:
Clone the repository by copying the SSH URL after adding the SSH key. In the terminal, navigate to the directory where you want to clone the repository and run the following command:

git clone git@github.com:username/repository.git

Once the repository is cloned, you can perform Git operations as usual, such as making commits, pushing changes, and pulling updates.
Note that each team member generate their own SSH key pair in which this allows them to authenticate individually and securely access the Git repositories hosted on GitHub. While each team member has their own separate SSH key pair for authentication, they can still collaborate and work together on the same repositories.

3.CLI cloning: Cloning a repository through the command-line interface (CLI) involves using a terminal or command prompt to run Git commands. Regardless of whether you choose HTTPS or SSH cloning, the process is initiated and managed using Git commands in the CLI. This allows you to clone repositories, manage branches, make commits, and perform other Git operations directly from the terminal, providing flexibility and control over your development workflow.

Troubleshooting and resolving conflict

Troubleshooting and resolving conflicts is an essential aspect of collaborative development. It is essential to adhere to certain procedures while troubleshooting and resolving issues in Git collaboration in order to guarantee a seamless resolution process. Here's a guide on how to effectively address conflicts that may arise during the development process:

Identify the merging conflict: Merge conflicts arise when Git is unable to automatically reconcile code discrepancies between two commits, usually as a result of numerous developers making simultaneous changes to the same lines in a file. Reviewing code changes, discussing discrepancies, and understanding the root cause of the conflict is the initial step in resolving merge conflict.

2.Resolving merge conflict: Opening the disputed file, making the required modifications, staging the new content with git add, and generating a new commit with git commit are the procedures involved in resolving merge conflicts.

3.Collaborative Conflict Resolution: Working in separate isolated branches to prevent conflicts and the use of the Git merge command to merge feature branches together and resolve conflicting changes.

4.Collaborate on solutions:
Collaborate to come up with a few possible solutions to the conflict. Promote original thought and investigate other strategies that successfully deal with the fundamental problems.

The Best Ways to Prevent Conflicts
To reduce conflicts, team members must communicate about the portions of the files they are working on, pull changes before committing or pushing, and use the appropriate Git commands and tools.

Conclusion

This article has explored the guidelines of using Git for collaboration, challenges of using Git in a collaborative context and offers advice on common issues and industry best practice for effective teamwork in software development.

I hope a lot was gained from this article. Be free to drop your suggestions or questions in the comment box.

DEV Community: Muslimat Mojeed

Why I want to be a Frontend Developer and How HNG Will Help Me Achieve My Goals

How HNG Will Help Me Achieve My Goals as a Front-End Developer

My Goals

How Do I Plan to Achieve Them?

5 Common Mistakes When Using useEffect Hook in React

Introduction

Definition of Key Terms

5 Common Mistakes

Best Practices

Final Thoughts

15 Essential JavaScript Concepts To Learn Before Starting React

15 Essential JavaScript Concepts

Example

Example

Example

Example

3 Important Keywords in Reduce Method

Example

Example

Example

How Short-circuiting works

Example

Example

Example

Example

Conclusion

Vite VS Create-React-App - What you need to know

Built-in features of Vite

Key Differences

Step-by-step guide using NPM

Tip

Final Thoughts

Further Reading

Glossary

Creating Scroll Animations Using ScrollReveal

Understanding ScrollReveal.js library

Installation

Customization

Usage

Best Practices for using ScrollReveal.js

Common Errors and Issues with ScrollReveal.js:

Final Thoughts

Further Reading

Understanding 'Use strict' in JavaScript

Introduction to strict mode in JavaScript

What is Strict Mode?

Why Use Strict Mode in JavaScript

Enabling Strict Mode in JavaScript

Common errors and issues addressed by strict mode

Best practices for using strict mode in JavaScript

Final thoughts

Further Reading

Using Git and GitHub for collaboration

Overview of Git collaboration

Steps for setting up GitHub for collaboration

Collaborative Git workflow

Ways of cloning

Troubleshooting and resolving conflict

Conclusion

Further Reading