Forem: Parsa Frahani

Difference between normal links & tag links in Next.js

Parsa Frahani — Sun, 30 Jun 2024 06:33:20 +0000

Today in this blog we will talk about the effect of using "a" tag & "Link" tag in Next.js. Are they really different from each other?
Sure they are, let me explain.

Normal Links

When you use normal links like this:

<a href="./users">Click Here</a>

every time that you click the link and navigate to other pages, you call a request to all the files and all of them will download again. That's something we don't want of course. so look at this folder structure that I have to understand better:

In this structure, as you can see in my app folder I have a page.tsx file and a folder named "folder" that contains F1.tsx.
In the page file, I have below code that is just a simple page:

import React from "react";

async function page() {
  return (
    <div className="p-[1rem]">
      <h1>Hello World</h1>
    </div>
  );
}

export default page;

And in the F1 file, I have this code that as you see it's just a simple button with "a" tag in it:

import Link from "next/link";
import React from "react";

function F1() {
  return (
    <button className="py-[0.5rem] px-[2.5rem] bg-gray-800 rounded-[0.75rem]">
      <a href="/users" className="text-white">
        click
      </a>
    </button>
  );
}

export default F1;

When you click that "a" tag you will navigate to the user's file page and everything should work fine. But let's open the Network tab real quick.

It's normal, right? we have all the necessary files in here.
OK now clear the Network log and click the button to navigate to the user page:

By clicking the button we go to "http://localhost:3000/users" & this is our Network log:

As I told you we redownloaded all the unnecessary files again. and we don't want that. So what is the solution?

Tag Links

Simple, we are just going to use "Link" instead of "a" tag. Like this:

import Link from "next/link";
import React from "react";

function F1() {
  return (
    <button className="py-[0.5rem] px-[2.5rem] bg-gray-800 rounded-[0.75rem]">
      <Link href="/users" className="text-white">
        click
      </Link>
    </button>
  );
}

export default F1;

Now again open the Network tab, we have our files downloaded once. Click clear log like before and navigate to the F1 file using the button. Now if you see the log we just downloaded our necessary files and not all of the files again.

So to wrap up by using the "a" tag we download all the files again & again but with the "Link" tag we just download all the files once and on every page we just download what we need.

This small change may not seem handy but in the big projects, it will help you build a website or app with better performance and of course a faster one!
If this blog helped you please like and also feel free to share ANY opinion in the comments section. Thanks for reading🙏.

3D Car Image Just With One API!

Parsa Frahani — Sat, 27 Apr 2024 08:07:33 +0000

Let me introduce an API that you just gave the car name and then you can have a 3D image of it in any color, angle, model, and so on, and that's imaging studio.
In this blog, I'll teach you how to use this API and how to customize the car in the way that you want. so let's go to VScode and learn while we are coding.

1- Where Can You Get The API?

Well, you can find the API on the RapidAPI website here. As you can see you have the code for calling the API that you can copy and paste but if you want to see what will you receive after fetching this API simply click the Test Endpoint button and it will show you the JSON format of the data.
By clicking the button you can see we have tons of options like fuel_type, drive, class, and a lot more. Keep in mind that this API is free and you don't have to pay any money to use it.

2- Get The Data

So here, I have a small project that I want to simply call the API and get the Supra image with a kind of green color. so let's make an index.ts file and copy these codes for calling the API.

export async function fetchCars() {
  try {
    const response = (
      await fetch(
        "https://cars-by-api-ninjas.p.rapidapi.com/v1/cars?model=supra",
        {
          headers: {
            "X-RapidAPI-Key":
              "fa5d9302b5msh316f633dd1fb958p111bedjsnb5ccf339adf5",
            "X-RapidAPI-Host": "cars-by-api-ninjas.p.rapidapi.com",
          },
        }
      )
    ).json();
    return response;
  } catch (error) {
    console.error(error);
  }
}

In the above code, I just fetched the API in an async function, and in the headers option, I gave it the same headers in the Rapid API (Just copy and paste the code). But did you notice something in the API?
After cars, I gave it the name of the car that I wanted like: [the API]?model=supra.
Or you can just give the params and then the car model that you want. like this:

So now how can we see it?
Let's go to our Hero.tsx file that we want to use this API to render our car image there. This is how Hero.tsx looks like:

import { BackgroundBeams } from "@/components/Aceternety-ui/HeroBeams";
import React from "react";
import styles from "./Hero.module.css";
import { fetchCars } from "@/utils";

async function Hero() {
  const allCars = await fetchCars();
  console.log(allCars);

  return (
    <div>
      <BackgroundBeams />
      <div className={styles.component}>


        <div className={styles.carImageComponent}>
             {/* HERE WE RENDER THE IMAGE */}
        </div>
      </div>
    </div>
  );
}

export default Hero;

Here we have BackgroundBeams it is a component from aceternity UI (it's okay if you don't use this one), then our styles, and finally imported the fetchCars from Index.ts in the utils folder.
So basically this file right here:

Then I await this fetchCars function and store it in a const name allCars. Now if you log this allCars maybe your log in your browser will throw an error but when you open your terminal in VScode you can see all of the data there:

Now that you have all of the data for the Supra car you can simply loop through the allCars array and use all of these parameters, but what about the image? there is no image in our data, right?
No worries, for getting the image we need to call another API provided by the imagin studio. So let's back to our index.tsx to call this API.

3- Get the Image

As I told you we need to fetch another API to get the images. Basically, these 2 APIs are for one company, one for getting data and the other one for getting the image.

So let's begin:

export const createCarImage = (car: any, angle?: string) => {
  const url = new URL("https://cdn.imagin.studio/getimage");

  const { make, year, model } = car;

  url.searchParams.append("customer", "hrjavascript-mastery");
  url.searchParams.append("zoomType", "fullscreen");
  url.searchParams.append("paintdescription", "radiant-green");
  url.searchParams.append("modelFamily", model.split(" ")[0]);
  url.searchParams.append("make", make);
  url.searchParams.append("modelYear", `${year}`);
  url.searchParams.append("angle", `${angle}`);

  return `${url}`;
};

In this code, I gave our createCarImage function two parameters one is the car which is an array of our data and the second one is the car angle which if it exists we use it otherwise, we don't need it. Then I created a new URL and gave it the API which you can see in the code above. After that, I take out the model, year, and make out of the car parameter so we don't need to write car.model or car.year every time. In the end, I set all the other parameters for our API like zoomType or modelYear, and finally returned the URL.
But to get the image you need to have a customer key. You may not be a company to email them for sending it to you, and it is totally okay cause as you can see I found a free customer key name as hrjavascript-mastery for you under one of the projects of js mastery channel on YouTube that you can use for your projects completely free!

Here we used our key that you can see in the above code too:

  url.searchParams.append("customer", "hrjavascript-mastery");

In the Hero file, we need to import this createCarImage function to use it in our JSX, like this:

import { fetchCars , createCarImage } from "@/utils";

Now to get the image we need to pass this function to its src and give it the allCars (our data that we had) at the position of 0 because I want the first car model in the array of our data. If you like to render all of the cars that you have in the allCars array you can simply loop over it and then use the data for it. So the code will look like this:

async function Hero() {
  const allCars = await fetchCars();
  console.log(allCars);

  return (
    <div>
      <BackgroundBeams />
      <div className={styles.component}>
        <h1>SUPRA!!!</h1>

        <div className={styles.carImageComponent}>
          <img className={styles.carImg} src={createCarImage(allCars[0], "")} />
        </div>
      </div>
    </div>
  );
}

As you can see I'm giving allcars at position 0 to my createCarImage function to look for the image of that car and also I gave it no angle (If you like to try another angle go for 29 or 13 for example). now you should see this:

At the angle of 29:

At the angle of 13:

4- Need docs?

If you need help with this API you can always read their docs here. You can find docs about subjects like changing colors or zooming and a lot more.

🔴Was This Blog Helpful?

If this blog was helpful to you like and follow🙏.
Also if you have any opinion or question feel free to comment it out.

Smarter Code With AbortController!

Parsa Frahani — Wed, 17 Apr 2024 10:06:47 +0000

For example, think that you fetched an API but for any reason, you want to cancel it. what will you do? or maybe you have an event on some button and you want that event don't work if something happens. what will do here? call another event?
All of these ideas that you have may work, but they are not smart!

With the help of ES6 now you can cancel your request or event at any time with better & also with smarter code. so without wasting any time let's get into it.

What is AbortController?

So basically as I said, AbortController is used for canceling events or requests easily. We have two parts to work with it, one is the usual AbortController and the other one is AbortSignal. With the use of AbortSignal we can have access to the API's signal and call our AbortController, then set some conditions that if X happens cancel fetching data. but to understand better and deeper let's see it in the code.

Using AbortController In JavaScript:

Take a quick look at the code below.

const controller = new AbortController();

const functionFetch = async () => {
  try {
    const url = await fetch("https://catfact.ninja/fact", {
      signal: controller.signal,
    });
    const todo = await url.json();
    console.log(todo);
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("this is an abort error ==>", error);
    }
  }
};
functionFetch();
controller.abort();

It's okay not to get it all, but let me break it down.

So first to start it we need to make a new AbortController as we did so. Then I fetched an API and got access to its signal like an object and gave it the property of controller.signal, but what does this signal do?

So basically we use this property to communicate with the outer abort (as we are setting it for our API).

After that, I made a Constance value and named it todo that simply holds the JSON version of our data. In the catch part, I checked if the error name is AbortError which means our API got canceled because of our abort I'll log and string with a text.

In the end, I called the function to make it work and also called the controller.abort to cancel the API. So if we wanted to cancel the API call we simply call the controller.abort anywhere we wanted. If you check the console we should have this text there:

And by the way, you can name the controller anything that you want as it's obvious or you can specify some conditions like if/else statements. and that's how you use AbortController in your Project. easy huh?

How To Use It In The Events?

Most programmers think that AbortController is just for API and they don't know they can use it to stop events too. before I explain how you should use it to stop events take a quick look at the code below.

const controller = new AbortController();
const { signal } = controller;

const log = function () {
  console.log("mouse moved");
};

const remove = function () {
  console.log("Event stoped");
  controller.abort();
};

window.addEventListener("mousemove", log, { signal });
window.addEventListener("mouseup", remove, { signal });

Understanding the code above got to be easy but I'll explain it as well.

So this is the code that we had before but now we are canceling the log event by clicking. But notice something in the events, I gave them a third property and that signal. By doing that I', telling them that on this event call our AbortController.

If you move the mouse it will log the string in the log function and if you click the AbortController will stop the log function and it's not going to work anymore (before stopping the log function we will see Event stopped as you can see).

If you click multiple times it will stop the event several times as you know (so the AbortController will be called several times).

But did you know that we have an event named abort?

Abort Event In JS:

Honestly, That was so interesting for me. so we have an event named abort that whenever we call AbrotController this event will call too. look here to understand better:

const controller = new AbortController();
const { signal } = controller;


const log = function () {
    console.log("mouse moved");
  };

  const remove = function () {
    console.log("Event stoped");
    controller.abort();
  };

  window.addEventListener("mousemove", log, { signal });
  window.addEventListener("mouseup", remove, { signal });

  // I ADDED THIS👇
  signal.addEventListener("abort", () => {
    console.log("this is abort event");
  });

This is the last part code but with a new event as you can see. So simply we call our event on the signal and we tell it whenever something aborted log this string. The output should be like this:

Conclusion

Now that you are at the end of this blog keep in mind that AbortControllers can be more complicated when you use libraries like Axios. I hope this blog helped you understand the basics of abort controllers and how to use them in real projects.

If you have any opinion feel free to share it in the comments🙏.
Thanks for your support.

Explanation of CSS Gradients

Parsa Frahani — Tue, 02 Apr 2024 11:32:29 +0000

You may ask yourself what is the difference between linear-gradient, radial-gradient & conic-gradient as they sound so confusing, but not after reading this blog!
In this blog, I'm going to explain the differences between these three gradients and how you can use them like a pro-CSS writer. so let's dive in.

1- Set Up Our Project

Before anything let's make our project and then work on it. so here I have an HTML & CSS file as you can see:

this is my simple HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./style.css" rel="stylesheet" />
    <title>Gradients</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello World</h1>
      <div class="tester"></div>
    </div>
  </body>
</html>

and CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  background-color: #333;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100vw;
}

.container h1 {
  color: white;
  font-weight: 400;
}

.tester {
  width: 10rem;
  height: 10rem;
  background-color: rgb(0, 208, 255);
  border-radius: 1rem;
}

Our goal is to style the taster div and try different gradients on it.
Well done, now we set up our project let me explain the first gradient.

2- Linear Gradient

As you may know for giving all the gradients you have to use background-image like here:

  background-image: linear-gradient(red, blue);

Now we are giving linear gradient to our taster div. linear-gradient will get two colors minimum and you can specify where the color should start or even how many degrees should it be. now our taster div looks like this:

Now I use to right, to left, to bottom, to top to specify where should the color start as I said.

  background-image: linear-gradient(to right, red, blue);

Now our div looks like this:

You can also add multiple colors:

  background-image: linear-gradient(to right, red, blue, green, yellow);

You can even give it a Percentage after the colors to say it should cover X% of the div.

  background-image: linear-gradient(to right, red 10%, blue 20%);

Now we are saying that from 0% to 10% should be red & after that from 20% to the end of the div (100%) should be blue. like this:

Or specify the start & the end percentage like this:

  background-image: linear-gradient(to right, red 0% 10%, blue 50% 100%);

Here the red color will start from 0% to 20% & blue will start from 50% & end in 100%. this gap between red & blue will fill with the transition that they have:

It's obvious that if you give the colors no space for transition they will just stick together. like this example:

  background-image: linear-gradient(
    to right,
    red 0% 10%,
    blue 10% 50%,
    green 50% 100%
  );

This code has no gap between the colors so it will be like this:

3- Radial Gradient

In radial-gradient the colors will start from the center of the page in the form of a circle & you can add colors to it. let's try it out:

  background-image: radial-gradient(red, blue);

Now we have this:

Exactly like linear that we had t*o bottom, **to top, ... in here we have **circle, **circle at bottom* or even** circle at bottom left**. It will give our colors a better circle shape:

  background-image: radial-gradient(circle, red, blue);

And this is what we have:

And you can give them percentages as well exactly like before:

  background-image: radial-gradient(
    circle at bottom left,
    red 0% 20%,
    blue 50% 100%
  );

That's it for radial gradients. let's move on to the next one.

4- Conic Gradient

In the conic gradient the colors rotate around a center on the page. for example with this line of code:

  background-image: conic-gradient(red, blue);

We will have this:

You can add more colors and it will add them clockwise or you can give them degrees like before.

Repeating Gradient's

As the name says it will repeat the linear, radial or conic gradient. here is an example of it:

  background-image: repeating-linear-gradient(
    red 50px,
    blue 50px 100px,
    red 100px 150px
  );

With this code we have this repeating blue & red gradient:

Final Thoughts

Great job! You've learned all about gradients and now you can use them like a CSS expert. With these skills, you can make your websites more colorful and attractive. you can read more in MDN website.

If you found this blog helpful let me know in the comments🙏.

For...of Loops Over Map in API Handling

Parsa Frahani — Sun, 07 Jan 2024 06:37:27 +0000

Introduction:

In the dynamic field of web development, interacting with APIs is a routine task for developers. When it comes to iterating through arrays, two commonly used methods are the traditional for...of loop and the higher-order function map(). While both methods have their merits, there are situations where using a for...of loop can be more advantageous, particularly in the context of API interactions. In this article, we'll delve into the reasons why developers often choose for...of loops over map() when working with APIs.

1. Clarity in Asynchronous Code:

API calls often involve asynchronous operations, and when dealing with promises, the clarity of code becomes crucial. The for...of loop provides a more straightforward syntax, making it easier to read and understand asynchronous code. It allows developers to express the logic of fetching and handling data in a sequential manner, enhancing code readability and maintainability.

// Using for...of loop
const fetchData = async () => {
  for (const item of data) {
    const response = await fetch(`https://api.example.com/${item}`);
    const result = await response.json();
    // Handle result
  }
};

// Using map
const fetchDataWithMap = async () => {
  await Promise.all(data.map(async (item) => {
    const response = await fetch(`https://api.example.com/${item}`);
    const result = await response.json();
    // Handle result
  }));
};

2. Fine-grained Control:

The for...of loop provides finer control over the iteration process. Developers can insert logic between iterations or implement custom error handling for each API call. This level of control is often more challenging to achieve with the concise and declarative nature of map().

// Using for...of loop
const fetchDataWithControl = async () => {
  for (const item of data) {
    try {
      const response = await fetch(`https://api.example.com/${item}`);
      const result = await response.json();
      // Handle result
    } catch (error) {
      // Handle error for this specific API call
    }
  }
};

3. Sequential Requests:

In certain scenarios, API requests must be executed sequentially, with the result of one request influencing the next. The for...of loop naturally enforces this sequential behavior, ensuring that each API call is made one after the other. This can be vital when dealing with APIs that have rate limits or dependencies between requests.

// Using for...of loop
const sequentialRequests = async () => {
  for (const endpoint of endpoints) {
    const response = await fetch(`https://api.example.com/${endpoint}`);
    const result = await response.json();
    // Process result and decide whether to proceed to the next request
  }
};

4. Reduced Complexity:

For simple iterations, using a for...of loop is often more concise and reduces the overall complexity of the code. The simplicity of the loop is especially beneficial when dealing with straightforward API interactions that don't require extensive transformation or mapping of data.

// Using for...of loop
const simpleApiInteraction = async () => {
  for (const id of userIds) {
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    // Handle user data
  }
};

----------------------------------SECTION2----------------------------------
If you're experiencing a situation where data from your API is continuously logged in an infinite loop, there are several potential reasons for this behavior. Here are some common causes and solutions:

1- Incorrect Use of Hooks or State:

If you are using React or another framework that utilizes state management, ensure that you are updating the state correctly. Continuous logging might occur if the state is being updated in a way that triggers re-renders in an infinite loop.

// Incorrect state update causing infinite loop
useEffect(() => {
  fetchData();  // Assuming fetchData triggers a state update
}, [data]);  // data is part of the dependency array triggering useEffect on state change

Ensure that you are updating state appropriately and that your dependencies in useEffect are set up correctly.

2- Infinite Fetch Requests:

Check your code for any unintentional recursive function calls or loops that repeatedly trigger API requests. Make sure that your API fetching logic is not creating an infinite loop.

// Example of unintentional infinite loop in fetching logic
const fetchData = () => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      fetchData();  // This creates an infinite loop
    });
};

Ensure that API fetching is performed only when necessary and that you are not triggering the same request repeatedly.

3- Incorrect Dependencies in useEffect:

If you are using useEffect in a React component, check the dependencies array to ensure that you are not inadvertently causing the effect to run infinitely.

// Incorrect dependencies leading to an infinite loop
useEffect(() => {
  fetchData();
}, []);  // Empty dependency array causing the effect to run on every render

Make sure to include only the necessary dependencies to prevent unnecessary re-execution.

4- Console.log Inside a Render:

If you have console.log statements inside your render method or JSX, they will be executed every time the component re-renders, potentially causing a large number of logs.

// Example causing continuous logging on each render
const MyComponent = () => {
  console.log('Rendering component...');
  return <div>Component content</div>;
};

Move console.log statements outside the render method or use them judiciously to avoid excessive logging.
By investigating these potential causes, you should be able to identify and resolve the issue of continuous logging of data from your API.

While the for...of loop has its strengths, it's essential to recognize that different looping constructs and higher-order functions, such as map(), forEach(), and others, also play crucial roles in JavaScript development. The key is to choose the looping mechanism that best fits the specific requirements of your task, promotes readability, and aligns with your team's coding style and preferences.

conclusion

In conclusion, while the map() function is a powerful tool for array transformations, the for...of loop offers distinct advantages when handling asynchronous API calls. Its clarity, fine-grained control, ability to execute sequential requests, and reduced complexity make it a preferred choice for developers aiming to write clean, readable, and maintainable code in the context of API interactions. The decision between for...of and map() ultimately depends on the specific requirements of the task at hand and the level of control and readability desired in the codebase.

All about RSS (Real Simple Syndication)

Parsa Frahani — Wed, 27 Dec 2023 21:08:48 +0000

In the ever-evolving landscape of the internet, staying updated with the latest information can be overwhelming. Whether you're an avid reader, content creator, or developer, managing a multitude of websites for updates can be time-consuming. This is where Really Simple Syndication (RSS) steps in as a game-changer. In this blog post, we'll dive into the world of RSS, exploring its significance & functionalities.

How I found RSS?

So from last month I was working on my own website & I was making a section that when you click on every platform the page will update & show all of my blog in DEV, Medium & LinkedIn.
I talked to my teammate which is a backend developer, & he told me that he can build an API that can get all of the data BUT it was illegal!

So I went through lots of blogs & YouTube videos till one of the Senior developers told me that I should search for something name RSS Feed. I got so excited when I worked with the API's that this platform provided for me to catch the feeds. & now I want to talk about this cool thing that I found! let's go.

Understanding RSS:

RSS, which stands for "Really Simple Syndication" or "Rich Site Summary," is a web feed that allows users to access updates to online content in a standardized, machine-readable format. The fundamental idea behind RSS is to simplify the process of distributing and consuming information on the internet. Instead of manually visiting multiple websites to check for updates, users can subscribe to RSS feeds and receive consolidated updates in one place.

How RSS Works:

RSS operates on a publish-subscribe model. Content publishers create an RSS feed containing a summary of their content, and users subscribe to these feeds using RSS readers. When new content is published on a website, the RSS feed is updated automatically. Subscribers receive these updates in their chosen RSS reader, providing a centralized hub for all the latest information.

Advantages of RSS:

Time Efficiency:
RSS streamlines the process of content consumption, saving time by presenting updates in a centralized location.
Customization:
Users have the flexibility to subscribe to specific feeds based on their interests, creating a personalized and tailored content experience.
Reduced Information Overload:
By aggregating content in one place, RSS helps users avoid information overload and focus on what matters most to them.
Consistent Format:
RSS feeds follow a standardized format, making it easier for developers to integrate and manipulate the data programmatically.

Does RSS Feeding have different functionality from Scripting a website?

Yes, RSS feeding is a specific mechanism designed for content distribution and consumption with a focus on updates and subscriptions. Website scraping, on the other hand, is a broader term that encompasses various methods for extracting data from websites, and it's not necessarily focused on real-time updates or a standardized format.

Main goal of RSS Feeding:
The primary goal of RSS feeding is to streamline content distribution and consumption, making it easier for users to stay informed without visiting each website individually.

Main goal of Scraping a website:
Website scraping is more flexible and can be used for various purposes, such as gathering pricing information, monitoring changes on a website, or extracting data for research and analysis.

Let's see it in real project

So we work with Medium API for getting feeds that you can access to all their RSS API's from this link.
First look at the code below & then I'll explain what is going on.

const [feedData, setFeedData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "https://api.rss2json.com/v1/api.json",
          {
            params: {
              rss_url: "https://medium.com/feed/@parsafarahani",
            },
          }
        );

        // Assuming the data structure from the Medium RSS feed is stored in response.data.items
        setFeedData(response.data.items);
      } catch (error) {
        console.error("Error fetching Medium feed:", error);
      }
    };

    fetchData();
  }, []);

First of all I made a state here to save & update my data so the site & data will always be update. as you can see I used UseEffect to update the data only one time when the browser loads. in our effect I called the current API that I get using chatGPT by Axios & give the feed API as params to it. then I update my state with the data I want & finally call the function.
now I can all of my data from my Medium profile and use it in my components.

You may ask me what exactly this "https://api.rss2json.com/v1/api.json" API will do?
Well this is an API endpoint provided by rss2json.com, and it converts RSS feeds into JSON format so with that we don't need to convert our data to JSON in our code.

At the end

In conclusion, RSS helps you to get any data from others or your profile and use it as you want. but keep in mind that that website should support RSS feature so that you can use it.
I hope this blog helped you to make more creative stuff!

Any opinion? let me know in the comments🙏.

Clean Code Is Not Quick Code!💻

Parsa Frahani — Wed, 13 Dec 2023 18:05:49 +0000

Good code Manners!
Most of us when we come back to our code after a 15m break, we can barely understand what is going on. or maybe if you change just one line the projects will stop working & you even don't know where you should fix. as Uncle Bob say's clean code is not quick code, it's smart code. so let me explain what I mean by smart.

What Is Smart Code

Have you ever rushed into writing code & feel lost when you come back to it later? It happens to the best of us. Deciphering your own quick code can be like solving a puzzle. But what if there were seven simple things you could do to make your code easy to understand at a glance?

Imagine looking at your code for just a moment and being able to continue where you left off. Picture your team feeling at ease while working on what you've created. In this blog, we'll explore these seven practices for smart & cleaner coding tips. Let's jump into the details:

1- Variable Naming:

Consider the importance of naming variables, especially in larger projects. Let's dive into an example. Imagine you have a variable that you want to pass as a parameter to a function and then log it. Here's the initial code:

const bb = "this is text";

const hrb = function (bbr) {
  console.log(bbr);
};

hrb(bb);

In this snippet, the variable names (like bb and hrb) lack clear meaning. Now, picture having tons of code like this – it becomes a puzzle to figure out which function does what and which variable it's working with. now let's make this code better:

const text = "this is text";

const textHandler = function (data) {
  console.log(data);
};

textHandler(text);

See? now we'll understand what is our function doing.

2- Small Refactors Are Way Better

So you are just coding without think about what the h*ll am I coding or will my team or even myself understand that last week what I worked on. new features will add to the project & it is getting bigger & bigger. then you realize what a mess! I can't figure out what is this code doing & it also got so much complicated. so now you do even a worse mistake. you plane to refactor all the project.
Think about it just for few seconds. wasn't it better to do small refactors as you go on with new features? you do a little coding then a little refactor and so on. so instead of ignoring your messy code, clean it as you go on!

3- Do Commenting Not Documenting

They are so different from each other & still some people mix these two things up.
You have to comment a little explonation about maybe a complicated functionality for your team or even yourself. not to explain the whole code! for example:

const text = "this is text";

// log what ever it gets
const textHandler = function (data) {
  console.log(data);
};

textHandler(text);

This is commenting. now look at this:

const text = "this is text";

// This function will get the data that we pass to it and log it in the console.
const textHandler = function (data) {
  console.log(data);
};

textHandler(text);

You are just overexplaining when you can simply just explain it with several words. this documenting will waste your team members & your time! try to explain the functionality a little bit & only do this if you think it will be confusing in the future.

4- Make Smart Functionalities For Your Project

Ever seen code with too many functions doing single tasks, making it unnecessarily complicated? That's what we call "beginner mode" coding – doubling the code length without a good reason. I'm not saying we shouldn't break down code (we'll talk about that in a bit), but let's avoid making things needlessly complex.
Imagine we're fetching data from an API, and for different button clicks, we want to show different things. Initially, our code looks like this:

import React, { useState } from "react";

function ShowActivity() {
   const [data, setData] = useState("");
  const [key, setKey] = useState();

  async function ShowActivity() {
    const response = await fetch("https://www.boredapi.com/api/activity");
    const activity = await response.json();
    console.log(activity);
    setData(activity);
  }

  const ShowKey = function () {
    setKey(data.key);
  };

  return (
    <div className="parent">
      <h1>{data.activity}</h1>
      <h1>{key}</h1>
      <button onClick={() => ShowActivity()}>Show Activity</button>
      <button onClick={() => ShowKey()}>Show Status</button>
    </div>
  );
}

export default ShowActivity;

in this React example we get a random activity and show it when we click the Show Activity button. this also will happen when we click the Key button too. it will show the activity key. It works, but we've created two separate functions for each button click, which is a bit repetitive. Now, let's make it simpler using one function:

import React, { useState } from "react";

function ShowActivity() {
  const [data, setData] = useState("");
  const [key, setKey] = useState();

  async function Checker(type) {
    const response = await fetch("https://www.boredapi.com/api/activity");
    const jsonData = await response.json();
    console.log(jsonData);

    if (type === "Activity") {
      return setData(jsonData.activity);
    } else if (type === "Key") {
      return setKey(jsonData.key);
    }
  }

  return (
    <div className="parent">
      <h1>{data}</h1>
      <h1>{key}</h1>
      <button onClick={() => Checker("Activity")}>Show Activity</button>
      <button onClick={() => Checker("Key")}>Show Key</button>
    </div>
  );
}

export default ShowActivity;

As I said that not always put all the functionalities in one function is good! sometimes it can be so difficult to understand what is going on, so you have to devide the code to different functions & components. you might also don't see a lot of change in these two codes but the second code can be a way better & cleaner style than the first one, because I use a single function except two different functions for each event & if you want to use another parameter from API you just have to give it a type and check if the type is true rather than writing another function for just that one parameter.

5- Devide Responsibilities

As I said sometimes you have to devide your code to smaller pieces. this division can help your team & also yourself to understand each function is doing what & you can edit or add new features to your project way easier. but you have to name your functions in a way that by reading it's name, you understand what this function is doing. for example look at this code:

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const [data, setData] = useState([
    {
      activity: "Take a shower",
      description: "6AM in the morning",
      id: Math.random(),
      done: false,
      editable: false,
    },
  ]);

  const DoneHandler = function (todoId) {
    console.log(todoId);
  };

  const formHandler = function (e) {
    e.preventDefault();
    console.log(value);
    setData([
      {
        activity: value,
        description: "6AM in the morning",
        id: Math.random(),
        done: false,
        editable: false,
      },
      ...data,
    ]);

    setValue("");
  };

  return (
    <div className="main-container">
      <form className="conatiner" onSubmit={formHandler}>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="container-input"
        />
        <button>Add</button>
      </form>
      <div>
        {data.map((i) => (
          <div className="todo" key={i.id} onClick={() => DoneHandler(i.id)}>
            <h1>{i.activity}</h1>
            <p>{i.description}</p>
            <label>{i.key}</label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

It's so hard to figure out what exactly this code is doing. but as soon as I start to folder my code & components right (that I talk about in next one), reading the code get so much simpler. like this:

and devide code to small piece's. I do the functionalities here:

import React from "react";
import { useState } from "react";

function TMain(props) {
  const [value, setValue] = useState("");
  const [data, setData] = useState([
    {
      activity: "Take a shower",
      id: Math.random(),
      done: false,
      editable: false,
    },
  ]);

  const formHandler = function (e) {
    e.preventDefault();
    setData([
      {
        activity: value,
        description: "6AM in the morning",
        id: Math.random(),
        done: false,
        editable: false,
      },
      ...data,
    ]);

    setValue("");
  };

  return (
    <div className="main-container">
      <form className="conatiner" onSubmit={formHandler}>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="container-input"
        />
        <button>Add</button>
      </form>
      <div>
        {data.map((i) => (
          <div
            className="todo"
            key={i.id}
            onClick={() => props.DoneHandler(i.id)}
          >
            <h1>{i.activity}</h1>
            <label>{i.key}</label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TMain;

Then if anything click I log that It has been done here:

import React, { useState } from "react";
import TMain from "../Todo-Main/TMain";

function TFunc() {
  const DoneHandler = function (todoId) {
    console.log(`${todoId} Has been done`);
  };

  return (
    <div>
      <TMain DoneHandler={DoneHandler} />
    </div>
  );
}

export default TFunc;

& finally I use it in my App.jsx:

import React from "react";
import TFunc from "./Components/Todo-Functionality/TFunc";

function App() {
  return (
    <div>
      <TFunc />
    </div>
  );
}

export default App;

In the store.js you can save your data in browser cache using Redux or Jotai or any library that you like.
This is an small example but in bigger projects it can really life saver!

6- Be Better At Foldering Your Components

Foldering is so important to find your code. for example think I foldered my components like this:

I really don't know each component is responsible for what task so I have to put a lot of time to read the code in each file & see if that is what I'm looking for. but I can manage it in a better way:

Now by just reading the folder's name I'll understand what each file is doing.

7- Do You Know How To Handle Errors?

So lot's of beginners just code without thinking about handling errors. but a pro coder think about this one too.
If our app runs to an error, the whole project will stops & you will see a blank page. this is so awful for user experience. you have to manage error somehow that the user still use the website. you can use try/catch functionality or error boundaries or use the react error boundaries package or any way that you are comfortable with.

Conclusion

What I tried to talk in this blog was all about experiences that most of programmers as well as me had all the time, also the most popular way that all of the programmers do to keep they code creative & clean is SOLID Principles. so it have 5 stages that help you write better code. if you are interested you can read about it here.
**

Was this blog helpful?
Or can it be better?
Let me know in the comments🙏.
**