In this blog, we'll walk through the entire process of setting up the p5.js Web Editor locally, breaking it down into digestible steps—each explained with the “why,” not just the “how.” Whether you're contributing to open source for the first time or just want to tinker with a cool tool, this guide is for you.

If you want the official guide, you can visit this link: https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/README.md. If you have a problem with this, follow this guide.

Why Set It Up Locally?

Running the p5.js Web Editor locally can benefit you in many ways:

• ✅ Customize or extend its features

• ✅ Contribute back to the open-source project

• ✅ Debug and explore the code (understand how real software is written)

• ✅ Work offline or in educational settings with limited (unstable) internet access

Let’s get started!

Step 1: Prerequisites – Tools You Need

Before starting, please make sure you’ve a few tools installed on your system. These are the foundational pieces every JavaScript developer should be familiar with.

1. Node.js and npm

The editor is a Node.js application, so make sure you have:

• Node.js v16.14.2

• npm v8.5.0

To check the versions of node, use this command:

node -v

To check the version of npm, use this command:

npm -v

If you see a different version than the versions mentioned above, I recommend that you change to the mentioned version. There are multiple ways to do that. If you’re on linux, you might like this article:

Or, take this article and video attached as a guide.

However, I highly recommend using nvm (Node Version Manager) so you can manage multiple Node versions with ease.

To install nvm, open your terminal and run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

After installing nvm, restart your terminal and then:

nvm install 16.14.2
nvm use 16.14.2

Verify:

node -v    # Should show v16.14.2
npm -v     # Should show v8.5.0

Step 2: Fork and Clone the Repository

We’ll work with a fork of the original p5.js Web Editor repository so you can push your changes later if you want.

1. Go to https://github.com/processing/p5.js-web-editor

2. Click the Fork button (top right)

3. After forking, clone your copy to your machine:

git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git

Replace YOUR_USERNAME with your github account username that you used to fork the repository.

After you clone the repository on your local system, let’s move to the folder inside:

cd p5.js-web-editor

Now, to view the code or to perform any operations on it, we need to open it up the code in an editor. I prefer VS Code, which is free to use. If you don’t have download it from here. However, if you have then you can use the following command on your terminal to open up the project inside the code editor.

Once you press Enter, you should see something like this:

Step 3: Understanding the basic Project Structure

Here’s a quick overview to make you feel at home in the codebase:

• server/: Express backend server for authentication, file handling, etc.

• client/: React-based frontend for the web editor

• .env: Environment variables for sensitive settings

• package.json: Declares dependencies, scripts, and metadata

Step 4: Install Dependencies

If you try to start the server, you’ll receive an error message. That’s because the editor uses many libraries and dependencies. Installing them is straightforward:

npm install

This reads the package.json file and downloads all required modules into the node_modules directory.

If you run into issues, try cleaning the cache and reinstalling:

npm cache clean --force
rm -rf node_modules
npm install

Now that we have all the required packages, we can try starting the server. If you look at the package.json file, then you’ll find the start command:

npm start

However, this will give you some error. At the end of the message, you’ll find this: [nodemon] app crashed - waiting for file changes before starting... and on top it says: Error: Parameter "key" is required. To resolve this problem, you need to follow the following steps.

Step 5: Setting Up the Database (MongoDB)

The Web Editor stores sketches and user information in a MongoDB database.

Option 1: Install MongoDB Locally

Follow the official guide for your OS:
👉 https://docs.mongodb.com/manual/installation/

Once installed, start the service:

mongod --dbpath /your/custom/path

Or, if you’ve a Mac, then you can install Homebrew to install any packages. If you don’t have Homebrew, paste the following command on your terminal to install it:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Or, you can install the homebrew with the new .pkg installer. The instructions are here.

Here is how you can install and run MongoDB using brew:

brew tap mongodb/brew

Then

brew install mongodb-community

Finally, start the server with

brew services start mongodb-community

🧪 Tip: You can use MongoDB Compass to visually inspect your database and collections.

Step 6: Configure Environment Variables

The project uses a .env file to store settings like database connections and GitHub OAuth credentials.

You don’t have to configure everything to run the app locally, but you still need a .env file.

cp .env.example .env

The above command makes a copy of .env.example file into .env file. You can open .env in a text editor and make changes later if you need GitHub login or production features.

Step 7: Launching the App

With everything set, you can now start the server:

npm start

By default, the app will be available at:

👉 http://localhost:8000

You should see a fully working p5.js Web Editor interface!

Optional: Resetting the Local Database

During development, you might want to reset your database:

npm run reset-local-db

This clears all data and resets the state. Very handy for testing new features!

Common Issues and Fixes

❌ Error: Permission Denied on npm install

✅ Try:

sudo chown -R $USER:$GROUP ~/.npm

❌ MongoDB Not Connecting?

✅ Check if MongoDB is running:

ps aux | grep mongod

✅ Or try restarting:

brew services restart mongodb-community

❌ GitHub Login Doesn’t Work

✅ You need to register a GitHub OAuth App and add your CLIENT_ID and CLIENT_SECRET to your .env.

Contributing to the Project

If you’re planning to contribute, here are a few bonus tips:

• Follow the code style and naming conventions in the existing codebase.

• Open pull requests only after thoroughly testing your changes.

• Be respectful and follow the code of conduct.

Final Thoughts

The p5.js Web Editor is more than just a playground—it's an ecosystem that empowers artists, students, and coders to express themselves through code. You gain full access to its engine room by running it locally, and play with it.

💬 Got stuck or found a bug in this guide? Feel free to leave a comment or contact me. If you find a bug in the p5.js web editor, open an issue on GitHub.

Happy hacking! 💻✨

Open codesandbox.io or visit gsap-svg-path-animation.netlify.app.

Seems interesting, let's start.

Introduction

You might have visited some websites where when you scroll, things move; some elements move up, some sideways, and sometimes move down also. The elements follow a path when they move and often the path they follow is drawn using <path> element in SVG.

Brief overview of SVG animation

Unlike raster images, the SVGs don't lose their quality on zooming because SVGs are just a bunch of coordinates to make mathematical polygons. Also, unlike raster images, SVGs can be animated. We can change color, change size, change shape, and do more cooler stuff. That's all about the SVG animation.

Now let me explain what an SVG path animation means. So, if you've worked with SVGs before, there are different shapes that you can draw. There are ellipses, lines, polygons, rectangles, circles, and many others. You can find the complete list here. In particular, there is something called path that is used to draw lines, irregular lines; as you do with your hands. Unlike hand-drawn lines, the lines drawn with path elements can be animated. The path is used to guide some elements to move in a specific direction, basically a path and sometimes used to animate the line itself.

Introduction to Next.js

I assume you know Next.js. If you don't that's ok. You'll get almost everything out of this article. So, for those who don't know what Next.js is, let me quickly share about the most loved framework by lazy developers (I don't know if it's most loved or not; I love it).

Next.js is a javascript framework, like React.js but better. Next. js supports Server-Side Rendering (SSR), whereas React. js supports client-side rendering. Doesn't sound like a big deal but it is. SSR improves the application performance and speed and that's the reason I love Next.js.

Introduction to GSAP (GreenSock Animation Platform)

Unlike Next.js, I don't assume you know GSAP. So, GSAP which stands for GreenSock Animation Platform is another javascript framework (yes, there are millions of javascript frameworks) that is used to animate elements on websites. Open their website (gsap.com) to explore the type of animations you can make using GSAP.

Purpose and scope of the article

The article's purpose is to help you make GSAP animations in your Next.js project. It's the same for React also. In particular, we'll be looking at SVG path animation on scroll. I assume you saw the demo above.

Setting Up the Development Environment

Now let's move on to the actually stop so we are going to set up our development environment and we will be using the npm package manager and create our next application, and use the GSAP library.

Installing Node.js and npm

I assume you already have nodejs installed. If you don't then head over to not nodejs.org and download the latest version. Remember I want you to download the long-term support (LTS) version. If you're on Linux then this:

or this: https://dev.to/aashishpanthi/3-easy-ways-to-install-nodejs-in-linux-lc4 article will help you.

To confirm you've installed node.js, run this command on your command prompt or terminal:

node --version

And you should be seeing some numbers on the screen that represent the version of node.js installed on your machine. It looks like this:

Now that you have installed the node.js, you need to take for the npm. In most of the cases, the npm gets installed automatically but if it does not, you can install it manually. So let's check if the npm is installed or not. Run the following command on your terminal:

npm --version

And if the npm is installed then, you'll see the version like this:

The basic setup is complete. Now let's move on to nitty-gritty.

Setting up a new Next.js project

If you would love to read the official documentation on installing nextjs then here it is. Otherwise, I'm here to help.

Now, to install next.js we need to run this command on our terminal:

npx create-next-app@latest

Now, it'll ask a few questions. These questions are important and carefully answer them.

• First, you'll be asked to name the project. Please name it.

• You'll be asked if you want to use typescript or not. I prefer typescript but it's your call. (In the rest of the article, we'll be using typescript but I'll provide the javascript code at the end).

• I like to use Eslint.

• Also, I'll be using tailwind CSS. If you want to sit and write your custom CSS then you've a right to opt out.

• Next, it will ask if you'd like to have a src directory or not. It's more of a personal preference and I would say yes here.

• And please use the app router. Please...

• The final question asks you about the default import alias. We don't want to do that so select no.

So, after a few seconds, your project will be ready and I would love if you open the project on some code editor. I'll be using Visual Studio Code.

Go inside of the project and open the terminal. Run the start command to start the project:

npm run dev

And visit http://localhost:3000/ to see your project running.

Installing GSAP

Let's quickly install the GSAP packages also. Use the following command to install gsap and @gsap/react packages:

npm i @gsap/react gsap

That's all. First, let's have our SVG ready and then we'll animate. Alright?

Creating SVG Graphics

I assume you already have your SVG element ready. If you have it on your figma, export it as SVG. If you don't have you can make one.

Designing SVG graphics

I quickly made this shape in Figma using pen tool. It is basically the path over which we'll be moving stuff on the scroll event. I still don't know what I'll be moving.

To export your SVG from Figma, select the shape you want to export. If you have more than one shape, select the shapes and group them then export them as SVG. You'll see the export option at the right end of the screen:

Well, if you would like to use mine then here is the SVG code:

<svg width="462" height="829" viewBox="0 0 462 829" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.4996 4L429.5 238C449.666 250 479 284.9 435 328.5C391 372.1 151 480.333 36.4996 529C12.1662 545.167 -21.9004 587.7 36.4996 628.5C94.8996 669.3 326.5 776.167 435 824.5" stroke="#0000FF" stroke-width="8"/>
</svg>

Ok, that's the path and let's move a card along that path. Sound great? I've made a car. I'm not a designer. Please don't judge me:

I've grouped the two items and exported them as SVG. If you want the code, here it is:

<svg width="462" height="844" viewBox="0 0 462 844" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5" stroke="#0000FF" stroke-width="8"/>
    <path d="M37.7316 37.3941L46.4471 37.0985C46.7214 37.0872 46.9392 36.9896 47.1001 36.8317L60.2671 45.3825C62.7497 46.9947 65.6719 46.8955 66.7971 45.163L73.9314 34.1771C75.0579 32.4425 73.9598 29.7326 71.4773 28.1204L58.3102 19.5696C58.3877 19.3605 58.3896 19.1198 58.2883 18.8645L55.0122 10.7844C54.706 10.0288 53.6614 9.44663 52.673 9.47815C51.6862 9.51362 51.134 10.152 51.4373 10.9057L53.7501 16.6082L41.4135 8.59676C38.9339 6.98646 36.0087 7.08368 34.8822 8.81829L27.7479 19.8042C26.6228 21.5367 27.7237 24.2485 30.2034 25.8588L42.5399 33.8703L36.387 34.081C35.5765 34.1085 35.2193 34.8705 35.5882 35.7864C35.9614 36.7022 36.9182 37.4197 37.7316 37.3941ZM56.9649 23.0482L56.3711 23.9626L46.2266 17.3747L46.8204 16.4603L56.9649 23.0482ZM40.0447 12.0601L43.6442 15.6977L37.5977 25.0085L32.8092 23.2018L40.0447 12.0601ZM39.5849 27.602L40.1801 26.6855L50.3246 33.2734L49.7294 34.1899L39.5849 27.602ZM52.8688 34.9256L58.9153 25.6149L63.7025 27.4236L56.467 38.5653L52.8688 34.9256Z" fill="#E52A2D"/>
</svg>

Importing SVG files into the Next.js project

No, we are not going to import the SVG file. Rather we will have SVG inside our JSX file with other react neety-greety.

Let's create a separate component for the Animation thing and we'll import it inside of our page.tsx file. And the root page.tsx file should look like this:

import PathAnimation from "@/components/PathAnimation";

export default function Home() {
  return (
    <main className="flex-col min-h-screen w-full dark:text-white">
      <div className="h-screen w-full flex flex-col items-center justify-center">
        <h1 className="text-[#432826] text-[24px] leading-[36px] font-[400] text-center dark:text-white">
          SVG Path Animation
        </h1>
        <p className="text-[16px] leading-[27px] text-[#432826] font-[400] text-center dark:text-white">
          This is a simple animation of a bee following a path using GSAP
          MotionPath plugin.
        </p>
      </div>

      <PathAnimation />

      <div className="h-screen w-full flex flex-col items-center justify-center">
        <h1 className="text-[#432826] text-[24px] leading-[36px] font-[400] dark:text-white">
          You saw that?
        </h1>
        <p className="text-[16px] leading-[27px] text-[#432826] font-[400] dark:text-white">
          The bee is following the path. Isn't that cool?
        </p>
      </div>
    </main>
  );
}

And let's have our PathAnimation.jsx file separately (create a components folder and place it there). The component looks like this:

function PathAnimation() {
  return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full"
        >
          <path
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            d="M37.7316 37.3941L46.4471 37.0985C46.7214 37.0872 46.9392 36.9896 47.1001 36.8317L60.2671 45.3825C62.7497 46.9947 65.6719 46.8955 66.7971 45.163L73.9314 34.1771C75.0579 32.4425 73.9598 29.7326 71.4773 28.1204L58.3102 19.5696C58.3877 19.3605 58.3896 19.1198 58.2883 18.8645L55.0122 10.7844C54.706 10.0288 53.6614 9.44663 52.673 9.47815C51.6862 9.51362 51.134 10.152 51.4373 10.9057L53.7501 16.6082L41.4135 8.59676C38.9339 6.98646 36.0087 7.08368 34.8822 8.81829L27.7479 19.8042C26.6228 21.5367 27.7237 24.2485 30.2034 25.8588L42.5399 33.8703L36.387 34.081C35.5765 34.1085 35.2193 34.8705 35.5882 35.7864C35.9614 36.7022 36.9182 37.4197 37.7316 37.3941ZM56.9649 23.0482L56.3711 23.9626L46.2266 17.3747L46.8204 16.4603L56.9649 23.0482ZM40.0447 12.0601L43.6442 15.6977L37.5977 25.0085L32.8092 23.2018L40.0447 12.0601ZM39.5849 27.602L40.1801 26.6855L50.3246 33.2734L49.7294 34.1899L39.5849 27.602ZM52.8688 34.9256L58.9153 25.6149L63.7025 27.4236L56.467 38.5653L52.8688 34.9256Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );
}

export default PathAnimation;

Now, if you save and look at the browser, you should be able to see the SVG covering up the whole screen.

Integrating GSAP with Next.js

Oh the juicy part, let's start with the animation. We got to move that car along the path, right? Let's do that.

Importing GSAP into Next.js components

First we need to import the gsap and then import the useGSAP hook. The useGSAP hook is fairly new release and you don't find it around the internet (as of early 2024).

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

After that, we need to import the plugins and register those plugins:

import MotionPathHelper from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(useGSAP, ScrollTrigger);
gsap.registerPlugin(MotionPathHelper);

That's all about importing and registering stuffs related to GSAP. Now, let's move on to the next part.

Using useRef to handle events

You know in react and next.js, we cannot directly manipulate the elements. So, we need to use useRef hook. We're going to have four refs:

  const lineRef = useRef<SVGPathElement>(null);
  const carRef = useRef<SVGPathElement>(null);
  const container = useRef<SVGSVGElement>(null);
  const sectionRef = useRef<HTMLDivElement>(null);

As you might have already guessed where you need to place these refs. Well, here it is:

return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
      ref={sectionRef}
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full overflow-visible"
          ref={container}
        >
          <path
            ref={lineRef}
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            ref={carRef}
            d="M45.5126 32.8551L52.6609 27.8605C52.8849 27.7015 53.0143 27.5011 53.0633 27.281L68.7632 27.281C71.7233 27.281 74.1201 25.6064 74.1201 23.5405V10.4414C74.1201 8.37307 71.7233 6.69838 68.7632 6.69838L53.0633 6.69838C53.0143 6.4808 52.8849 6.27788 52.6609 6.11897L45.5126 1.12674C44.8442 0.659786 43.6511 0.740459 42.8393 1.3052C42.0311 1.87239 41.9156 2.70852 42.5804 3.17547L47.6259 6.69838L32.9163 6.69838C29.9596 6.69838 27.5593 8.37307 27.5593 10.4414L27.5593 23.5405C27.5593 25.6064 29.9596 27.281 32.9163 27.281L47.6259 27.281L42.5804 30.8088C41.9156 31.2734 42.0311 32.107 42.8393 32.6742C43.6511 33.239 44.8442 33.3196 45.5126 32.8551ZM53.8296 10.3485V11.4388L41.7337 11.4388V10.3485L53.8296 10.3485ZM33.6545 10.3485L38.6546 11.4388L38.6546 22.5406L33.6545 23.6334L33.6545 10.3485ZM41.7337 23.6334V22.5406L53.8296 22.5406L53.8296 23.6334L41.7337 23.6334ZM56.8632 22.5406V11.4388L61.8632 10.3485L61.8632 23.6334L56.8632 22.5406Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );

The svg code for car has been changed. Basically, I rotated the card. That's all.
So, after changing the path element, import the useEffect hook from react and we are going to set the position of the car.

useEffect(() => {
    gsap.set(carRef.current, {
      yPercent: 0,
      xPercent: 20,
      rotate: 30,
    });
  }, []);

The above code positions the car at y=0%, x=20% and rotation=30deg (property names aren't exactly the same, it's used to just explain)

So, our path is there, car is there. And our code looks like this:

"use client";
import { useEffect, useRef } from "react";

//gsap
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import MotionPathHelper from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(useGSAP, ScrollTrigger);
gsap.registerPlugin(MotionPathHelper);

function PathAnimation() {
  const lineRef = useRef<SVGPathElement>(null);
  const carRef = useRef<SVGPathElement>(null);
  const container = useRef<SVGSVGElement>(null);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    gsap.set(carRef.current, {
      yPercent: 0,
      xPercent: 20,
      rotate: 30,
    });
  }, []);

  return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
      ref={sectionRef}
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full overflow-visible"
          ref={container}
        >
          <path
            ref={lineRef}
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            ref={carRef}
            d="M45.5126 32.8551L52.6609 27.8605C52.8849 27.7015 53.0143 27.5011 53.0633 27.281L68.7632 27.281C71.7233 27.281 74.1201 25.6064 74.1201 23.5405V10.4414C74.1201 8.37307 71.7233 6.69838 68.7632 6.69838L53.0633 6.69838C53.0143 6.4808 52.8849 6.27788 52.6609 6.11897L45.5126 1.12674C44.8442 0.659786 43.6511 0.740459 42.8393 1.3052C42.0311 1.87239 41.9156 2.70852 42.5804 3.17547L47.6259 6.69838L32.9163 6.69838C29.9596 6.69838 27.5593 8.37307 27.5593 10.4414L27.5593 23.5405C27.5593 25.6064 29.9596 27.281 32.9163 27.281L47.6259 27.281L42.5804 30.8088C41.9156 31.2734 42.0311 32.107 42.8393 32.6742C43.6511 33.239 44.8442 33.3196 45.5126 32.8551ZM53.8296 10.3485V11.4388L41.7337 11.4388V10.3485L53.8296 10.3485ZM33.6545 10.3485L38.6546 11.4388L38.6546 22.5406L33.6545 23.6334L33.6545 10.3485ZM41.7337 23.6334V22.5406L53.8296 22.5406L53.8296 23.6334L41.7337 23.6334ZM56.8632 22.5406V11.4388L61.8632 10.3485L61.8632 23.6334L56.8632 22.5406Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );
}

export default PathAnimation;

Now, the only thing remaining is the ignition of the engine and letting the car move.

Creating animation timelines

It's time to use useGSAP hook provided by gsap to create an animation timeline.

useGSAP(
    (context, contextSafe) => {
      let tl = gsap.timeline({});

      tl.to(carRef.current, {
        motionPath: {
          path: lineRef.current || "",
          align: lineRef.current || "",
        },
        ease: "power1.inOut",
      });

      return tl;
    },
    {
      scope: container,
    }
  );

The above timeline is a basic timeline. If you want to dive deep into the useGSAP hook then I recommend this official documentation. Allow me to simplify further.

First, we are creating a timeline with gsap.timeline({}) and we're passing empty object because we don't want to pass anything right now (we'll do in a few seconds). Then the timeline is stored in tl variable, tl is short for the timeline. We're storing the timeline on a variable to easily access the timeline in the future.

Then, we're passing the actual props to animate the stuff. The animation is targeted to the car path, we're using carRef to point to our car. Then, we're proving motionPath, inside of the motionPath, we can provide the path (along which the car moves) and another path (along which the car aligns).

At the end, we're providing the scope also. It's helpful when you've multiple animations and you don't want to mess up.

Now, let's make a final timeline.

useGSAP(
    (context, contextSafe) => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          scrub: true,
          start: "top center",
          end: "bottom center",
        },
      });

      tl.to(carRef.current, {
        motionPath: {
          path: lineRef.current || "",
          align: lineRef.current || "",
          alignOrigin: [0.2, 0.5],
          autoRotate: true,
          start: 0,
          end: 1,
        },
        ease: "power1.inOut",
      });

      return tl;
    },
    {
      scope: container,
    }
  );

Here, we're triggering the animation on scroll with scrollTrigger. Inside scrollTrigger, we're passing a trigger prop; trigger prop is used to identify by with element the animation is going to trigger. Here we're triggering or starting the animation when the section is scrolled halfway to the screen from the top and stops when the bottom end of the section goes halfway through the screen. scrub is set true to allow animation to take place both forward and backward.

Next, we're aligning the car to perfectly center in that path and also allowing the car to autoRotate so that the car makes a smooth turn. And, you can add a lot of transitions. Choose the one that suits you best.

Conclusion

In this article, you learned how to create SVG path animations using GSAP in a Next.js project. We covered setting up the development environment, installing necessary packages, creating and importing SVG graphics, and integrating GSAP for smooth animations triggered by scroll events. By the end, you have a car following a path on your webpage, showcasing the power of SVG and GSAP animations.

I would like to end this article with a few resources:

• GitHub repository -> https://github.com/aashishpanthi/svg-path-animation

• CodeSandBox -> https://codesandbox.io/p/github/aashishpanthi/svg-path-animation/main

The beauty of being a programmer is that you can build anything, not a money machine of course - that's illegal.

The idea

The whole idea of this project is to make a dynamic OG(open-graph) image. When I say open graph image, I mean the image that displays above the title and description when you share the link in chat or somewhere on social media that has a link preview.

Despite a static image, I wanted to build an image that changes, like really changes over time. Something like this:

Yes, I wanted to build a countdown timer and just throw it up into social media and see the clock ticking - tic tic tic,

So this type of dynamic og image isn't just a crazy idea it's helpful too. I want you to think a situation like you have your birthday comming up and you want to do something awesome like making a website for invitation and when you share the invitation on chat then instead of just good old boring og:title and og:description, you now have a damn big og:image with some text like "my dear boy George you suck at your life but you're invited to my birthday party."

Think how quickly George notices his name on the OG image. Although he won't be happy reading that but hey we just sent an extraordinary invitation.

Goal

So the goal of this project would be to build a countdown timer instead of the birthday invitation OG image. We're going to do that in typescript and will be using @vercel/og. And that's it.

Prerequisites

• You've time and an eagerness to learn.

• You should be somewhat familiar with Nextjs because we're going to use that. You can just go through this article even if you only know React.

• I expect you to know TypeScript but if you don't it's fine. Even I suck with typescript. Also, for you plain JavaScript lovers out there, I'll be leaving the JavaScript code at the end.

Building the Dynamic Countdown OG Image with Vercel OG

Now, let's dive into the code implementation!

Project Initialization

First, we need to create a next application which we can do with the following command:

npx create-next-app vercel-og

Now configure the nextjs application just how you prefer. If you want to do it like me then here is what I did.

You gotta wait some time for the dependencies to be installed. Once that happens, you can see the success message that looks exactly like this:

Let me show you a quick hack to open our project in VS Code editor. Surely, I don't expect you to know this. Please, I just want to look cool for real.
To open the project in VS Code, the first thing you need is the VS Code which you can download from code.visualstudio.com. Once you have the editor you need to move to the project directory with the cd command.

cd vercel-og

Then to open the project inside of the VS Code editor, you run the following command:

code .

If you're lazy like me, instead of the two separate commands that we discussed above we can use only one. Let me show you:

code ./vercel-og/

And that works.
So, now we need to see if we successfully initialized a next application or not. To run the application, you the npm run dev command:

npm run dev

And you need to open up a browser and visit localhost:3000. Then you need to wait for the code to compile. I've been there so I know how painful it is but just wait and after a minute or so you will see the website that looks something like this (it really depends on which version of nextjs you're installing):

Generate dynamic image

So, if you remember I said we are going to use vercel/og package to generate a dynamic image. Lets install the package. You can run the npm install command to install the package:

npm i @vercel/og

If you don't know about this package then you can learn more about it on vercel's website or on the npmjs.com.

One thing I forgot to remind you is that App router includes @vercel/og. So no need to install it. But if you aren't using the app router or doing this on your react app, install the package.

And we're using the App router in this example.

Now let's create a file inside of our project. Just go inside of the app folder and create an api folder, inside that create another folder named of then create a new file inside the og folder and name it route.tsx

The project tree looks like this:

And inside of that route.ts file, the magic happens; the magic of dynamic image generation.

First, let's just try pasting the code vercel provided as an example.

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 40,
          color: 'black',
          background: 'white',
          width: '100%',
          height: '100%',
          padding: '50px 200px',
          textAlign: 'center',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        👋 Hello
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

And those freaking out thinking the above code is in typescript, just look at it dude that's just the plain javascript. No type declaration is done.

Now try opening localhost:3000/api/og on your browser and you can see an image there. Hey, that's a sweet hello right there.

Now that we know how we can generate the dynamic image, we need to do some customization and then we'll end up with the perfect OG image we need. So, to style the components we can use style attribute. We can also use the tailwind css but it's in the experimental phase and just to be on safe side, I'm going to use the style attribute.

But before that let's play with date and time for a bit. So, we will have eventDate which of course is the date of the event that is happening and currentDate which is the date when the OG image gets generated. Then we will calculate the time difference between the eventDate and currentDate and try to come up with numbers in days, hours, minutes and seconds. And the code below works flawlessly.

  const eventDate = new Date("May 4, 2024");
  const currentDate = new Date();
  const timeRemaining = eventDate.getTime() - currentDate.getTime();

  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

Now that we have the numbers to present. We will make a place to present, basically we will make a skeleton with some styling and just place the variables we created above into that. So, the HTML or so called JSX that is used to generate the yellow OG countdown time is this:

const Time = () => (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        fontSize: 40,
        color: "black",
        background: "#ffd54f",
        width: "100%",
        height: "100%",
        padding: "20px",
        border: "3px solid #ddd",
        borderRadius: "10px",
      }}
    >
      <h1
        style={{
          fontWeight: "normal",
          letterSpacing: ".125rem",
          textTransform: "uppercase",
          fontSize: "3rem",
        }}
      >
        Countdown to my event
      </h1>
      <div
        style={{
          display: "flex",
          maxWidth: "100%",
        }}
      >
        <ul>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="days"
            >
              {days < 10 ? `0${days}` : days}
            </span>
            days
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="hours"
            >
              {hours.toString().padStart(2, "0")}
            </span>
            Hours
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="minutes"
            >
              {minutes.toString().padStart(2, "0")}
            </span>
            Minutes
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="seconds"
            >
              {seconds.toString().padStart(2, "0")}
            </span>
            Seconds
          </li>
        </ul>
      </div>
    </div>
  );

Now, that we have date and image, we need to return the image as a response on GET request. To do that we'll create a function like this:

import { ImageResponse } from "next/og";
export const runtime = "edge";

export async function GET() {
 // all the date and tme calculation stuffs we did should be here

 // the Time component

  return new ImageResponse(<Time />, {
    width: 1200,
    height: 630,
  });
}

So, the whole code of the route.tsx file looks like this:

import { ImageResponse } from "next/og";
export const runtime = "edge";

export async function GET() {
  const eventDate = new Date("May 4, 2024");
  const currentDate = new Date();
  const timeRemaining = eventDate.getTime() - currentDate.getTime();

  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

  const Time = () => (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        fontSize: 40,
        color: "black",
        background: "#ffd54f",
        width: "100%",
        height: "100%",
        padding: "20px",
        border: "3px solid #ddd",
        borderRadius: "10px",
      }}
    >
      <h1
        style={{
          fontWeight: "normal",
          letterSpacing: ".125rem",
          textTransform: "uppercase",
          fontSize: "3rem",
        }}
      >
        Countdown to my event
      </h1>
      <div
        style={{
          display: "flex",
          maxWidth: "100%",
        }}
      >
        <ul>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="days"
            >
              {days < 10 ? `0${days}` : days}
            </span>
            days
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="hours"
            >
              {hours.toString().padStart(2, "0")}
            </span>
            Hours
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="minutes"
            >
              {minutes.toString().padStart(2, "0")}
            </span>
            Minutes
          </li>
          <li
            style={{
              display: "block",
              fontSize: "1.5rem",
              listStyleType: "none",
              padding: "1em",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                display: "block",
                fontSize: "4.5rem",
              }}
              id="seconds"
            >
              {seconds.toString().padStart(2, "0")}
            </span>
            Seconds
          </li>
        </ul>
      </div>
    </div>
  );

  return new ImageResponse(<Time />, {
    width: 1200,
    height: 630,
  });
}

And if we visit the same route again or do a quick GET request to our API route, we get the image that should look like this:

Link the image to meta tag

Now that we've our image ready, what about using it. So, head to layout.tsx file and in here, we'll create some meta tags. The most important one is this one:

<meta property="og:image" content="https://vercel-og-teal.vercel.app/api/og" />

If you are wondering that what type of image ends without .jpeg, .png, .svg extensions then you've every right to wonder. Basically, in here the api route we are setting as a content have ImageResponse so that route is essentially giving us an image to use. Now, we have our first meta tag ready, let's add more:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "OG Image Generator",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="icon" href="/favicon.ico" />

        {/* Rest of the meta tags */}

        <meta
          property="og:image"
          content="https://vercel-og-teal.vercel.app/api/og"
        />
        <meta
          name="twitter:image"
          content="https://vercel-og-teal.vercel.app/api/og"
        />
      </head>

      <body className={inter.className}>{children}</body>
    </html>
  );
}

That file above my dear is our layout.tsx file and we're done with our OG image generation and linking that image kind of things.

Also, the https://vercel-og-teal.vercel.app points to the version I deployed on vercel so don't forget to replace this link with the base URL of your site.

Dealing with cache

Did you try deploying the site and actually sharing it on social media? Didn't get what you expected? Well, blame caching for that. There are basically four types of caching that are playing role in raising this problem:

1. Nextjs Caching:

   By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. You can read more about it here.

2. Vercel Caching:

   So, remember we used edge runtime in the code above. Vercel's Edge Cache is used for caching entire static assets at the edge, such as images, fonts, and JavaScript bundles. The Vercel Data Cache is used for caching data fetched during a function's execution, such as API responses. You can read more about it here. This caching won't be a problem if you aren't using nextjs to deploy your application but there can be similar server caching, so beware of that.

3. Browser Caching:

   So your beloved browser also cache your image and doesn't load up the new data. I found this great article online that explains the browser caching very well.

4. Social Media site's own caching:

   When you share the link for the first time, the social media sites like facebook, discord get the og:image and they cache it. Literally, the image might be changing on our server but the social media sites cache the image and give us our old image back. You can find each social media's own article to understand how they cache. But sadly, I have to say that our countdown thing won't work while sharing the link in chat.

Now, that we know there are things like caching and all. So, let's try to remove them.

Note: I couldn't find a way to remove the social media site caching.

On your next.config.mjs file, you basically say don't cache. That's gonna prevent nextjs caching. Here is how you say it:

const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "no-store",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Saw a strange path up there? So, that's what I'll try to explain next.

We're going to change the folder structure. We previously had src/app/api/og/route.tsx. Now, we'll change it to src/app/api/[id]/route.tsx. No, we aren't using id inside of the route.tsx file. We're just using the dynamic routing so that the user can have the different URL while accessing the same image, and that bypasses browser caching and also the vercel one.

Next thing you can do to be extra safe is to use this line of code on your route.tsx file:

export const dynamic = "force-dynamic";

This will force not to cache the response. You can learn more about vercel caching here: https://vercel.com/docs/edge-network/caching

And I've also rendered the image in the lading page of the site and the image looks like this: https://vercel-og-teal.vercel.app/. Yes, go visit and see the countdown.

Conclusion

This type of dynamic og:image generation comes in handy in a lot of place. We discussed two scenarios and really build one of them. Of course, it didn't work out as expected. So, countdown isn't really possible wherever and wherever the social media caching exist. So, at the end all I want to say is just have fun coding and...

Subscribe to my newsletter below. You know what type of content you can expect from me :)

Why Loading Animations Matter

Loading animations not only serve a practical purpose by indicating to users that your page is loading, but they also contribute to the overall aesthetics of your website. A well-designed loading animation can create a positive first impression, keeping users engaged during the brief loading period.

The Tools We'll Use

Before we dive into the tutorial, let's briefly go over the tools we'll be using:

• HTML: The structure of our web page.

• CSS: Styling to make our loading animation visually appealing.

• JavaScript: Dynamic behavior to control when the loading animation appears and disappears.

Before starting:

If you prefer watching videos then you can watch this video to understand how the loader is integrated seamlessly into a website.

But if you prefer reading then let's code the loader together.

Step 1: Setting Up the HTML

Start by creating the HTML structure of your page. For simplicity, we'll create a loading div that will house our animation:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Your Website</title>
    </head>
    <body>

        <div class="loader-wrapper">
            <div class="loader"></div>
        </div>

        <div id="content-container">
            <!-- Your website content goes here -->
            <h1>Hi, there</h1>
            <p>I am the content.</p>
        </div>

        <script src="script.js"></script>
    </body>
</html>

In the above code, you see we have a loader with a loader-wrapper and a content-container. The loader is the loader and the content-container houses all of your code that you use while making a website.

Step 2: Styling with CSS

Now, let's add some styles to make our loading animation visually appealing. Create a new file called styles.css:

.loader-wrapper{
    height: 100vh;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    display: grid;
    place-items: center;
    background-color:#fff;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

The above CSS code will make a simple CSS loading animation. If you want a more customized and modern loader on your website then you can code your own or use from https://css-loaders.com/ website. They have hundreds of great CSS animations, with source code folk.

Now that you have a loader with loading animation, we need to hide the content container i.e. the div with the id content-container:

#content-container {
    display: none; /* Hide the loading container by default */
}

Now when the loading animation is complete or when our HTML page is completely loaded, we need to show the content, right? I think so.

So to show the content, you can use display property with any values except none. For now, we are going to use the block value:

#content-container.show {
    display: block; /* Display the loading container when 'show' class is added */
    /* Add your animation styles here; this is great if you want to show content with animation/transition */
}

So our final CSS file AKA style.css should look like this:

.loader-wrapper{
    height: 100vh;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    display: grid;
    place-items: center;
    background-color:#fff;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#content-container {
    display: none; /* Hide the loading container by default */
}

#content-container.show {
    display: block; /* Display the loading container when 'show' class is added */
    /* Add your animation styles here */
}

Step 3: Adding JavaScript Logic

Time to add dynamic behavior! Create a new file called script.js and add this code to your new file.

const content = document.getElementById("content-container");
const loader = document.querySelector(".loader-wrapper");

window.onload = function () {
    content.classList.add("show");
    loader.style.display = "none"
};

So what the above code does is: There is a function that runs when the page is fully loaded. When the function is executing, we'll add show class to the content-container which will make the content visible (refer to CSS code if you don't understand). Then we add a style property of display: none; to our loader-wrapper that will just make our loader go kaboom; in other words, make it disappear. Now we have a complete CSS loader on our website.

Step 4: Customize Your Animation

Feel free to customize the loading animation by adding your styles and adjusting the timing. Again, I am referring to https://css-loaders.com/ website. They really have good CSS animations.

And this is what our final product looks like (play with pen and reload to see loader):

Conclusion

Congratulations! You've successfully implemented a loading animation on your website using HTML, CSS, and JavaScript. By providing users with a visually pleasing loading experience, you've taken a significant step toward enhancing your website's overall appeal.

Remember, a positive user experience goes a long way in retaining visitors and encouraging them to explore your site further. Happy coding!

But I'm not going to let that slow me down! Countless other code paths still need to be explored, and I'm committed to finding them. Join me as I explore the nuances of programming, create apps, and even complete my dream project. Grab your virtual popcorn because everything from monumental failures to minor triumphs will soon be revealed. Let's start this coding adventure together!

So, what did I do these 6 months?

Believe it or not, I went on a journey down memory lane, scouring my tweets, Google photos, and GitHub profile to unearth what I've actually been up to in the last 6 months. With high school now behind me for 2 months, you can imagine the immense pressure I've faced lately. Despite all the odds stacked against me, my progress outside of academics has been, well, a tad bit modest. But fear not, dear reader, for in the rest of this article, you won't be the only one getting to know about me. I'll be spilling the beans and reflecting on my hilarious and not-so-glamorous coding journey!

Next, Step by step, we'll traverse my eventful coding journey, starting from the early months of the year, as we dive into each task, accomplishment, and adventure! 🌟

Hardware project

This was my first hardware project. I participated in a science exhibition organized by my school. Technically it was in 2022 as it got finished in the last week of 2022. Alright, I am going to drop some memories below then I will explain more.

In our country, the election had concluded, but concerns about vote rigging persisted. Reports had surfaced of votes being cast on behalf of absent individuals, including those who had already passed away or lived abroad. This situation poses a significant challenge to the integrity of the electoral process. To address this issue, my friends and I devised a compelling idea for a hardware project that would ensure vote authenticity and read the fingerprint of the voters.

To summarize the project in short, we took a fingerprint scanner, wrote an Arduino program, and integrated it with other hardware components like LCD, buzzer, and LEDs. And we measured the authenticity of the votes. The experience was really interesting in itself. Interesting in the sense that it was my first time playing with Arduino and I got a lot of problems and the wires created a complete mess but at the same time, we were gathering the experiences and really enjoying the process leaving aside the thought that it was a competition.

Develevate platinum winner

You know I also love to write technical articles. Obviously, you are reading this article because I love to write, no? So, showwcase.com organized a blogging competition at the start of this year and I participated. If you want to take a look at my blogs, you can visit this link: https://show.aashish-panthi.com.np/shows.

But this was one of the good news that I received in the past 6 months. And the news was that I became the platinum winner of Dev Elevate by showwcase. Don't believe it? Here you go:

National hackathon

Alright, it was a hectic experience. So, to attend an offline Hackathon, my friends formed a team and named it Debugging army. It was our first Hackathon and we were excited about it. After all, we traveled around 500 kilometers to participate in that hackathon. Things weren't that smooth. I talked about my horrific experience in one of my previous articles also. I am going to link that, you can read it out.

This opportunity taught me many things about the competition, how to travel, and care for my health. This was the first time I traveled with my friends a very long distance and I stayed there for more than a week.

We actually visited a lot of beautiful places. I guess it is one of the most visited destinations by national and international tourists in my country. I really want to share my memories with you. So here it is:

Oh, haven't I talked about what we built? So I and my team choose the agriculture track there and made a mobile application and named it CattleCare. So here is its short description:

CattleCare is the all-in-one solution for managing your cattle. With features like insurance management, vaccination, milk production tracking, etc. Say goodbye to scattered records: hello CattleCare.

If you are curious to know about it more then we can get a lot more information here:

I am not faking it, you really get to know your strength, how collaborative you are with the team, and how good you are at task management. This event has changed some of my perceptions. This time I was really stuck for 4 hours during the 24-hour hackathon due to a silly bug that was just mysterious. The process of debugging can be both challenging and rewarding. While it requires dedication, hard work, and a lot of critical things, the happiness you get after solving the error is on the next level.

And one more thing I am going to share about the hackathon is the design of our application. This design was made by Saroj Regmi.

My team didn't win, the friends that were with us won the hackathon and became the national champions. Despite the odds, we managed to get some swags and stickers.

Desk setup

I am not joking before February 1, 2023, I had a very bad posture. I used to sit like a snake while coding. I found a perfect image of my posture before the desk setup.

Yes, I really had a bad posture and suffered from back pain. My back still hurts man😞. But with the end of January 2023, my bad posture also ended cause I got a new desk and chair for myself.

After bragging this much, how can I not share a picture? Before sharing it, I knew the setup is temporary and it was great having that setup for the next 4 months. So, I didn't go for super expensive, I just bought whatever was cheap.

Actually, it turns out, I didn't click many photos of the setup. So, this was one of the best photos I clicked, I know it's terrible😔.

Now I am back to my original position cause I left the city after finishing high school. And currently, I am in a city of opportunities.

Freelancing

Although I didn't get an expansive setup, still I spent some money. After the desk setup, I felt like I was being more productive. Right then, I also got an offer to work as a freelancer which I immediately accepted. I built some front-end components for him in React using Tailwind CSS. Though it wasn't my first freelancing project, I worked way more this time and earned a few dollars also.

Sorry, I can't drop any pictures about this.

Received swags

Your boy received swags from showwcase. As a platinum winner, I was supposed to receive a T-shirt, a cap, and a hoodie but I received only a T-shirt and a cap. It turns out they had problems shipping the hoodie but they are still working on it.

So, here is what I received :)

They hadn't only sent me these swags but they also sent me two showwcase stickers. So here was my laptop's lid after attaching the sticker.

Alright, I am not going to brag anymore about this.

Exams

I think I shouldn't be talking about exams but it followed me everywhere so I have to talk at least a paragraph about it. So, I had the final exams in May 2023. I had to prepare for my exam. After all, I had studied for 12 years straight for this event so you realize how much pressure I felt for this.

Yes, I couldn't learn new technologies or build projects due to exams. Technically, I had time to do all these because only in my mind I was preparing for the exams but the reality was that I was watching some youtube videos and Facebook videos all day long. But sometimes, I also studied and I have that footage.

Yes, I even recorded myself studying. Now think yourself how much I might have studied.

Club Assembly

How could I even forget about it? So, we had an ICT club in our school. I was serving as IT Head in that club. Basically, I was handling the website of the club and sometimes social media also. And under this immense pressure of the board exam, I even made a website for the club, then for the hackathon which was supposed to happen this June but got canceled.

For those who want to take a look at the club's website, it's here.

While returning from the national hackathon that I discussed earlier, we thought why not organize a similar hackathon in our school also? So, we started preparing for the hackathon. Some of us reached out to companies asking for sponsorships, some of us invited guests and judges, some started searching for the venue, some started to prepare the designs for the event and I started working on the website.

Back to back, a lot of things we did but our exams got in between and we had even collected more than 50% of the fund for the hackathon but we couldn't progress more because everyone had their own plans after the exams. So the program which was supposed to happen after the board exam got canceled. And I kindly put a canceled watermark on the website also. Here it is:

Oh, Grammarly just suggested that I spelled the cancelled word wrong.

Despite all odds, our first club assembly happened which was also our official end of tenure. And I received a certificate of appreciation signed by our president Sushil Bhattarai.

So, with this smile, I finished high school and tenure of the ICT Club of KMGSS.

Surakshya

The project on which I am currently working is called Surakshya. It is a React Native app that will provide safety resources for women in an accessible, simplified manner. You can know more about this project here.

I am working on mobile application development and again I am facing a lot of problems. I am getting errors time and again. And one of the things I hate about react native is debugging. In fact, I don't like mobile application development just because I can't right-click and inspect.

I am not working alone on this app. This is not a small application to build. It has a lot of parts that have to be combined together. In this Instagram post, you can get more information about the project and team members.

Overall, this application is totally a real-world application. It contains real data. It has real contacts and even helps women in need to contact organizations that are working for women's safety in Nepal. The application is in its final stage and will be available in the play store and app store soon.

And just now I learned to export designs like this🙃.

I learned a lot of new things in this application development process. And I am still learning new things every single day. I am working with map integration in this application and highlighting the regions and handling different events. Another very new thing that I am learning is app localization. We think language shouldn't be a barrier for anyone who wants to use this application. So, I am working on making this application available in different languages.

I am also learning to handle a large dataset. And how to render that immense amount of data on the screen with no lag at all. Also, this is the first time I am using Team, Azure, and other Microsoft developer tools.

Soon, I will be sharing the application.

Articles

I have already written 12 articles in the past 6 months. Some are tutorials, some are just reflections on the year 2022. I also took part in DevRetro this year where I received a special mention but no more than that.

You can visit https://blog.aashish-panthi.com.np/ to read my articles. I have discussed my problem and also shared how I overcome that and also shared some technical articles and experiences there.

GitHub Contribution

If you take a look at my previous year's contributions on GitHub and compare it with this year's then it's a lot less. I am going to drop two images here:

Contribution graph of 2022:

Contribution graph of 2023:

One of the reasons why I didn't write much code this year is due to my board exam. You can clearly see I didn't do many things in April and May caused my final exam ended on 19th May. And the source code of the mobile application Surakshya that I talked about is not stored in GitHub.

We are using Azure DevOps to store files. And sometimes the tree structure gets really complicated.

A short video

I also prepared a short introduction video for Incubate Nepal showing my passion for computer science. I made this video just a fortnight before my board examination.

Conclusion

I wish I had other things to talk about but these are all of the things that I did in the past 6 months. I have shared almost all the work I did and all of the achievements and learning I had in the first half of the year 2023.

I am also working on a new website at the moment. Truly, I got a chance to reflect on myself and realize what I did in almost 200 days. Looking at my schedule, I wonder how I could have even managed to do all these things but it turns out it was not that difficult at all.

Now, I don't have any exams and am free to do things so I am continuously learning new things. Currently, I am learning about the next js and I wish to learn typescript in the near future. I hope that the near future would in the next few months.

I still have a long list of to-dos and I will make sure I will check all of them out by the end of this year. I specifically didn't have new year's resolution but I had previously mentioned some technologies that I want to learn this year. And definitely, I will do that.

If you read my full article and liked it, we can connect on Linkedin and/or Twitter. Thank you for going through this long article about a boring guy.

Bye!👋

Overview of Hashnode

Before diving into my experience with Hashnode AI tools, it's important to understand the platform's background and the value it brings to developers. Hashnode is a thriving community platform designed explicitly for developers, where they can connect, collaborate, and learn from one another. With a vast and active community of developers, Hashnode fosters an environment that encourages knowledge sharing and growth.

Hashnode, a thriving community platform for developers, offers a user-friendly interface that streamlines publishing and sharing technical content, allowing developers to effortlessly create and customize blogs, share projects and experiences, and engage in meaningful discussions. The platform also integrates seamlessly with popular version control systems like GitHub, making it easy to showcase code repositories.

Moreover, Hashnode provides a range of advanced AI tools, utilizing artificial intelligence, natural language processing, and machine learning to offer intelligent code completion, simplified documentation access, bug detection, and community insights. This combination of a vibrant developer community, intuitive interface, and cutting-edge AI tools makes Hashnode a preferred choice for developers seeking to accelerate growth, collaborate with peers, and stay current with industry trends.

Getting started with Hashnode AI

So I am very new to hashnode AI but not with AI in general. I was one of the users who got to use the AI feature in beta mode but the past few months were really hectic. I was too busy but looking back on that, I question why I was so busy. But leaving things aside, I accessed Hashnode's AI just yesterday. I didn't subscribe the premium plan instead I got a 3-day free trial.

So I wrote one article yesterday about client-side form validation. I heavily used Hashnode's AI in that article. And I am quite excited to share that I am using Hashnode's AI to share my experience with Hashnode AI.

Understanding key features

So I got a quick tour of how to use Hashnode's AI just after subscribing to it. It was kind of useful, but it wasn't very intense to understand how to use Hashnode's AI. I found three main features:

• Generate article outline

• Summarize article

• Generate code

I thought this was it. But when I selected a few lines of text, I got various other features of Hashnode AI. Yes, I started experimenting with all of the features. I liked many of them but I felt some are just not necessary. Anyways, I will be sharing my personal experience using many features.

Writing and publishing articles

Utilizing AI to generate an outline

Most of the time when I think of writing an article, I don't get the topic on which the article is to be written, and when I do, I have a hard time defining the structure of the article. If you look at my previous blogs, you will find without any structured approach, I was writing whatever comes to my mind. So, in my opinion, this particular feature is a game changer.

Editing and formatting articles

After generating an outline, I have an approach to follow. Now I can write my full article. Then I can use Hashnode AI to polish my article.

All I had to do is just select the text, or paragraph of text that I want to polish and I get a Ask AI thing popping up on top which I can click on to get different options. I can now perform tens of operations on that.

For example, I can let AI rewrite the selected portion. Hasnode AI checks and correct my spelling and grammatical errors if exist in that portion. I can simplify the language, or convert it into English if the article is in another language.

Similarly, there are other various operations to perform. They are listed as follows:

• Modify -> It helps expansion, summarization, shortening of text, etc.

• Tone -> Can change the tone of a particular portion

• Transform -> Turn into numbered or bullet list

Also, how can I forget about the alt text generator? But I am not quite happy with it because the alt text generated for the images I have used in this article wasn't satisfactory to me.

Publishing articles

It is impressive that the Hashnode team really decided to facilitate the use of AI from start to finish while writing an article. Hashnode AI can now write a blog title, if you are running out of time, it can summarize your article.

Better, the AI can generate an SEO title and SEO description of the article just before publishing the article. Before this, I used to copy the title of my article and use it as the SEO title and just leave the description blank. And most of the time, I used to leave both fields blank but with this AI, things have changed.

Challenges and limitations

1. Heading tags convert into normal text, causing no distinction between normal and head tags.

   

   So, I wanted to simplify the highlighted area all at once but when I did that, all of the styling was removed. I like to style the article while writing and proofread it later and polish it. So this problem must be fixed soon.

2. Limited to correcting grammar or spelling mistakes for only around 100 words, making it difficult to spell-check the entire blog.

   %[https://www.youtube.com/watch?v=4kzbkTfr63Y]

3. Inability to see what was wrong or changed during spelling and grammar checks, only the updated text is visible.

   

   In the above screenshot, I am not sure what was really changed. I have to compare both texts myself. Maybe an indicator would greatly make this feature awesome. For example, an underline could be used.

4. 

   Difficulty in reading existing text due to pop-up blockades, suggesting Grammarly as a better alternative for saving time.

   

   In the above example, I cannot even compare the two texts. I appreciate Hashnode team is aware of this. They have tried to minimize this problem and it has worked but not completely eliminated.

5. Occurrence of styling problems.

   I have already mentioned above about this problem but I want to talk more about this in a different scenario: during Expansion. So during the expansion, the AI-generated different topics and explained them below. So I wanted the topics in the form of headings (yes, already styled) but I had to style them as headings individually. The video of this problem is provided below:

   %[https://www.youtube.com/watch?v=G1wbFGNPJkM]

6. Slower performance.

   

7. Generated alt text for images being significantly off from the original image, indicating a need for improvement in this area.

8. I think the AI summarized the article from the reader's perspective, not from the writer's perspective which I think is a problem. Just read the summary below:

   

Conclusion

Hashnode AI is a tool that uses artificial intelligence, natural language processing, and machine learning to offer intelligent code completion, simplified documentation access, bug detection, and community insights. This article explores the features of Hashnode AI and how they have revolutionized the way developers work and collaborate, although there are some challenges and limitations.

Note: The above summary was also generated using Hashnode AI which I liked the most part about but my inner self is saying me that there is something off.

In conclusion, my experience with Hashnode AI has been quite remarkable, and I eagerly anticipate exploring more features on the final day of the 3-day trial. However, I remain uncertain about whether I will invest in this tool in the future. I kindly request the Hashnode team to address any potential issues, and please feel free to correct me if I have inadvertently misused the tool in any way.

I would like to draw the attention of Eleftheria Batsou and Ayodele Samuel Adebayo to look at the challenges I face. Overall, Happy coding.

Introduction

Definition of Client-Side Form Validation

Client-side form validation refers to the process of validating user input directly in the browser before submitting the form to the server. It allows us to provide instant feedback to users, reducing server load and improving data integrity.

Importance of Client-Side Form Validation

Client-side form validation is essential for creating user-friendly and error-free web forms. It helps prevent invalid data from being submitted, improves the overall user experience, and reduces the server's workload by minimizing unnecessary requests.

Comparison with Server-Side Validation

While server-side validation is necessary for ensuring data integrity on the server, client-side form validation has its advantages. It provides real-time feedback to users, minimizing round trips to the server and enhancing the overall responsiveness of the form.

HTML5 Form Validation

Given the context of comparing client-side validation with server-side validation and the introduction of HTML5 form validation, let's delve deeper into the text and expand upon it to provide more detail and length.

Comparison with server-side validation

Server-side validation is an essential component of web applications, as it ensures data integrity and security on the server. However, client-side form validation offers some distinct advantages that complement server-side validation. By providing real-time feedback to users as they fill out a form, client-side validation minimizes the number of round trips to the server, which in turn reduces server load and enhances the overall responsiveness and user experience of the form.

HTML5 Form Validation

HTML5, the latest iteration of the HTML standard, introduces a variety of built-in form validation attributes that greatly simplify the process of validating user input on the client side. These attributes make it easier for developers to implement client-side validation without relying on complex JavaScript code or third-party libraries. In this section, we will explore some of these attributes and discuss their usage in greater detail.

1. Required Attribute: The 'required' attribute can be added to input fields to indicate that a value must be provided before the form can be submitted. This helps ensure that users do not accidentally leave important fields blank.

2. Pattern Attribute: The 'pattern' attribute allows developers to specify a regular expression that the input value must match in order to be considered valid. This is particularly useful for validating data formats such as email addresses, phone numbers, and postal codes.

3. Min and Max Attributes: The 'min' and 'max' attributes can be applied to numeric input fields to define the minimum and maximum acceptable values, respectively. These attributes help ensure that users enter values within the desired range.

4. Step Attribute: The 'step' attribute can be used with numeric input fields to specify the acceptable increments for the input value. This is useful for fields that require values in specific intervals, such as time or date inputs.

5. Type Attribute: The 'type' attribute can be used to specify the type of data expected in an input field, such as 'email', 'url', 'number', or 'date'. This attribute provides built-in validation for the specified data type, making it easier for developers to ensure that users enter the correct format.

By leveraging these HTML5 form validation attributes, developers can create more user-friendly and responsive forms that provide immediate feedback to users, while still maintaining the necessary server-side validation for data integrity and security.

required

The required attribute ensures that a field must be filled out before the form can be submitted.

<input type="text" required>

pattern

The pattern attribute allows us to specify a regular expression pattern that the input value must match.

<input type="text" pattern="[A-Za-z]+" title="Only alphabets are allowed">

minlength and maxlength

The minlength and maxlength attributes define the minimum and maximum lengths of the input value.

<input type="text" minlength="6" maxlength="12">

min and max

The min and max attributes are used to specify the minimum and maximum values for numeric inputs.

<input type="number" min="18" max="99">

type

The type attribute enables specific input validation based on the input type, such as email, URL, date, etc.

<input type="email">

Custom validation messages

We can customize the validation messages that appear when a field fails validation using the setCustomValidity() method in JavaScript.

<input type="text" oninvalid="setCustomValidity('Please enter a valid name')" oninput="setCustomValidity('')">

Styling invalid form elements with CSS

By leveraging the :invalid and :valid CSS pseudo-classes, we can style invalid form elements to provide visual feedback to users.

input:invalid {
  border: 2px solid red;
}

JavaScript Form Validation

JavaScript allows for more advanced form validation techniques. Let's explore various aspects of JavaScript-based form validation.

Event handling

To perform validation, we need to handle form events such as the submit and input events.

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  validateForm();
});

form.addEventListener('input', function(event) {
  validateField(event.target);
});

Submit event

The submit event is triggered when the form is submitted, either by clicking a submit button or pressing Enter on a form field.

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  validateForm();
});

In the above code, we prevent the default form submission behavior using event.preventDefault() to perform custom validation.

Input event

The input event is triggered when the user interacts with an input field, such as typing or pasting text.

form.addEventListener('input', function(event) {
  validateField(event.target);
});

The input event allows us to validate individual fields as the user enters data, providing real-time feedback.

Validation methods

JavaScript provides useful methods for form validation.

checkValidity()

The checkValidity() method checks if the form is valid and returns a boolean value.

const form = document.getElementById('myForm');
const isValid = form.checkValidity();

We can use checkValidity() to validate the entire form before submission.

setCustomValidity()

The setCustomValidity() method allows us to set a custom validation message for a specific form element.

const field = document.getElementById('name');

field.setCustomValidity('Please enter your name');

By calling setCustomValidity() with a custom message, we can provide specific feedback to the user when the field is invalid.

Accessing form elements

To perform validation, we need to access form elements.

getElementById()

The getElementById() method allows us to access form elements using their unique id attribute.

const username = document.getElementById('username').value;

In the above code, we access the value of an input field with the id attribute of "username".

querySelector()

The querySelector() method enables us to access form elements using CSS selectors.

const email = document.querySelector('#email').value;

Here, we use a CSS selector to access the value of an input field with the id attribute of "email".

Displaying error messages

When a form field fails validation, we need to display appropriate error messages to the user.

Inserting elements

We can dynamically create error message elements and insert them into the DOM.

const errorDiv = document.createElement('div');
errorDiv.textContent = 'This field is required';

const field = document.getElementById('name');
field.parentNode.appendChild(errorDiv);

In the above example, we create a div element, set its text content as the error message, and append it as a child of the field's parent node.

Modifying existing elements

Alternatively, we can modify existing elements to display error messages.

const field = document.getElementById('name');
field.classList.add('error');
field.setAttribute('aria-invalid', 'true');
field.setAttribute('aria-describedby', 'name-error');

In the code snippet above, we add the error class to the field to apply specific styling and set ARIA attributes to indicate the field's error state.

JavaScript form validation provides flexibility and control in validating form input. By utilizing event handling, validation methods, and accessing form elements, we can create robust form validation experiences for our users.

Regular Expressions

Regular expressions (regex) are powerful patterns used to match and manipulate strings. They play a crucial role in form validation. Personally, I feel regex is complex. Although regex can be complex, you can leverage existing code snippets from the internet to simplify the process, even if you're not familiar with regex.

Introduction to regular expressions

Regular expressions consist of a combination of characters, metacharacters, and quantifiers. They allow you to define patterns that can be used to match and validate specific input formats.

Common patterns for form validation

Here are some common form validation patterns that can be implemented using regular expressions:

Email address

Validating an email address is a common use case in form validation. You can use the following code snippet, which utilizes a regex pattern specifically designed for email validation:

const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
const isValidEmail = emailRegex.test(email);

The emailRegex variable contains the regular expression pattern for validating an email address. The test() method is used to check if the email value matches the pattern.

Phone number

Validating a phone number is another common scenario. Here's an example of a regex pattern for a phone number in the format of XXX-XXX-XXXX:

const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
const isValidPhone = phoneRegex.test(phoneNumber);

The phoneRegex variable holds the regular expression pattern, which verifies if the phoneNumber matches the desired format.

Password

Validating password strength is often necessary for user registration or account creation. The following regex pattern ensures the password contains at least one letter, one digit, and is at least eight characters long:

const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
const isValidPassword = passwordRegex.test(password);

The passwordRegex the variable contains the regular expression pattern, which checks if the password satisfies the required conditions.

Testing regular expressions with JavaScript

To test regular expressions using JavaScript, you can utilize the test() method available on regex objects. It returns a boolean value indicating whether the provided string matches the regex pattern.

Here's an example of how to use the test() method:

const regex = /^[A-Za-z]+$/;
const isValid = regex.test(inputValue);

In this example, the regex variable contains a regular expression pattern, and the test() method is used to validate inputValue against that pattern.

Hey there! When working with regular expressions, it's totally okay to borrow code snippets from the internet, especially if you're not super comfortable creating complex regex patterns on your own. Just make sure you get to know the patterns you're using and test them well to make sure they fit your specific form validation needs. Happy coding!

Accessibility Considerations

Ensuring accessibility in form validation is crucial to provide an inclusive experience for all users. Let's explore some key aspects of accessible form validation.

Importance of accessible forms

Accessible forms ensure that users with disabilities can navigate and interact with them effectively. By following accessibility guidelines, you can make your forms more usable and inclusive for everyone.

ARIA attributes for form validation

ARIA (Accessible Rich Internet Applications) attributes play a significant role in enhancing the accessibility of form validation. You can use ARIA attributes to provide additional information to assistive technologies and improve the user experience for people with disabilities.

For example, you can use the aria-required attribute to indicate that a field is required for form submission:

<input type="text" aria-required="true">

Screen reader compatibility

When implementing form validation, it's essential to ensure compatibility with screen readers. Screen readers are assistive technologies used by individuals with visual impairments to access web content. By structuring your form elements properly and providing descriptive error messages, you can make your forms more accessible to screen reader users.

To ensure screen reader compatibility, follow these best practices:

• Use semantic HTML elements such as <label> and <fieldset> to provide context and structure to your form.

• Associate labels with form controls using the for attribute or by nesting them within the control's parent element.

• Use descriptive error messages that clearly indicate the error and provide instructions for correcting it.

Best Practices

To enhance the effectiveness and usability of client-side form validation, consider following these best practices:

Progressive enhancement

Implementing progressive enhancement ensures that even if JavaScript is disabled, server-side validation can still validate the form. By starting with basic HTML5 form validation and enhancing it with JavaScript, you provide a fallback mechanism for users with JavaScript-disabled browsers.

Fallback to server-side validation

While client-side validation provides real-time feedback, server-side validation should always be performed to ensure data integrity. Client-side validation can help improve the user experience, but it's important to perform server-side validation to validate data securely on the server before processing it further.

User-friendly error messages

Clear and concise error messages help users understand what went wrong and how to correct it. Provide meaningful error messages that describe the issue and offer guidance on how to fix it. Avoid technical jargon and use plain language to ensure users can easily comprehend the error and take appropriate action.

Real-time validation feedback

Providing real-time validation feedback as users interact with the form can greatly enhance the user experience. Instead of waiting until the form is submitted to display validation errors, validate input on the fly and provide immediate feedback. This approach allows users to correct errors instantly and prevents them from submitting the form with invalid data.

By considering these best practices, you can create more accessible and user-friendly form validation experiences.

Conclusion

In the end, checking forms on the user's side is very important for making websites. We talked about the basics of doing this with JavaScript, like using HTML5 features, JavaScript ways to check, simple codes, making it easy for everyone, and good ideas to follow.

By doing this, you can make your website better for users, keep the information right, and make forms easy to use. Don't forget to also check on the server side for strong and safe checking.

Start using this in your web work now and make your forms better and easier to use. Enjoy coding!

What I did on holiday⚒

At the start of my holiday, I attended an online hackathon, I built a project. Most of the technologies used in the project were new to me and I had a bit of trouble learning and using them. I have heard many people saying you should use the technologies/languages that you already know in a hackathon but in the case of an online hackathon, things differ, I mean things differ by a large margin.

To better understand the later part of the story, I think you need to understand the context really well. I mean the project which I was making and the technologies I was going to use.

The project

I was going to make a price tracker. Initially, I wanted it to be only for Amazon but later on, I tried to diversify it and also use it to track product prices on Flipkart and the stock price on CNBC.

Tech stack 👩‍💻

• Reactjs -> For frontend

• MongoDB Atlas -> For MongoDB database

• Express.js -> For API

• Linode -> Deployment

• Puppeteer/Cheerio -> Getting Price

• Nodemailer -> To send email

Functions:

It checks the price of the product specified. Not only it checks the price, but it also extracts the name and information of the product from the website. It gathers information at regular intervals of fifteen minutes and stores it inside the database. If the current price is found to be less than the specified price by the user then, the user will be updated with an email. And the user can also check the history of the price fluctuation through the nice little dashboard.

I have written a detailed article about it here, I later updated it in December.

Or there is a short video also.

The problem😞

What was the problem I faced during this hackathon? As I said earlier, I tried out many new technologies and languages during this hackathon. I didn't have much time to learn these things as I had just finished my exams. Yes, I only had like 6 days left for the hackathon. I had to do it all during this time.

I had to learn about web-scraping, using a Linode server to host a MERN application, making a bot that runs automatically in a fixed interval of time, setting up a domain to my app hosted on a Linode Linux server, setting up an email using your domain address and sending an email to update them about the price drop.

Believe each of these things was completely new for me. I already had some knowledge about Linux so the Linux commands didn't freak me out but setting up a domain, DNS configuration, and email setup was a thing that I never tried and I didn't have any knowledge about it.

The result🏆

It was a June hackathon, so I was expecting the result in July. Around July 20, I go the result. Guess what, I was among the 5 winners in the hackathon. It was one of the biggest moments for me that has happened to me in my entire life but I wasn't much excited.

By the way, the hackathon was conducted by Linode and Hashnode, and here is the result of the hackathon. I was among the top 5 winners in a total of 60 submissions.

The Burnout😔

I don't have an absolute idea of what caused burnout but I feel the intense amount of work I had to do in that small amount of time is the reason for the burnout.

I didn't have any interest to learn more. I was spending all my day watching youtube videos and also Facebook videos, surely not the cat videos but other videos. I completely wasted my month-long vacation. I had a long list of things I wanted to do during the month-long vacation but when the vacation ended up.

I didn't realize what was wrong with me. My school reopened, and I started going back to school every day. And after a few days, I sat down and I really had a good talk with myself about what is wrong with me. I noted down all of the things that were happening to me in the hope I could figure out what has happened to me.

After going through the list of problems I curated, I realized that it's the symptoms of burnout.

The recovery💊

After I found out about the problem, I decided to do something. Of course, I had to do it, right? So, I decided to slowly and steadily. One thing I do most of the time is that I don't jump straight into any problem or solution, I love going slowly into it.

Starting from that day, I reduced my screen time and eventually reduced my screen time. Since I live alone, I started cooking out some really good things, and just started out enjoying every moment. I went and met with some relatives, and spent good times everywhere. I even tried to do better in my studies but this is one thing I fail at every single time. Still, I am trying different ways to resolve these things.

It was just a matter of days and just enjoyment in every single thing I did, I was back at every single thing as I used to be back a month ago.

Conclusion

Burnout is not a good thing to have. I have had this thing only a single time and I don't want this in my future. As I can't control it but I can surely reduce a lot with the steps I took in the recovery stage onto the prevention stage.

If you have read through this then let me know if you had a similar experience or not. And if you want to know more about my recovery, my DM is always open here.

Prerequities📖

I expect you to know what e-commerce means and the types of e-commerce business models. If you don't know then let me provide a short description.

E-commerce in its literal sense is just the trade(the process of buying and selling) of goods online. Just like a grocery store or a fashion store situated far from you and you have access to the items at your fingertips.

There are 6 types of e-commerce business models. And they are:

• Business to Business

• Business to Consumer

• Consumer to Business

• Consumer to Consumer

• Consumer to Government

• Business to Government

If you want to get detailed information about each of them then I recommend you to visit a blog on the medium by Techi Khusi.

Let the fun begin

Ok, these are the few companies that I am going to explore today.

1. Ebay.com

2. Flipkart.com

3. Snapdeal.com

4. daraz.com.np

5. sastodeal.com

6. hamrobazaar.com

7. Amazon.com

8. khalti.com.np

One thing to note here is that I already have accounts on few of them. So I might miss some process or get biased about them.

eBay

We are starting with eBay. I know it as an online marketplace where one user can list a product and another user can view and order the product if they like it. Let's do some research.

I am already greeted with a list of products on the home screen. I haven't used it yet so first I am going to create an account. These are basically the steps that I followed to sign up, buy an item and sell an item.

I know the sign-up flow was pretty smooth and straightforward forward but the buying process was a little bit tedious. I was greeted with one page after another even though I selected a specific product. Simply put, there were a lot of products.

Since eBay is C2C (Consumer-to-Consumer) e-commerce site. So I tried buying up the item. It wasn't much different from any other sites and I even tried to list a product on sale. A lot of fields are to be filled when an item has to be listed. So you need to separate a good amount of time for it, probably more information helps consumers find their actual needs.

And now coming to the UI. It wasn't totally revolutionary. It was good, satisfactory but not excellent to be praisable. Pretty old-school UI is there but with significantly great page load time.

Till now, I think somewhere in your mind you were thinking, I am going to rate the websites but no, I am not going to do that.

Flipkart

Oh boy here comes the neighbor with the never-ending offers on their websites. I have used this website pretty much a lot. No no not for ordering any items but for the learning process. I really admire the UI of this e-commerce site. Just have a look, it is far better than old-fashioned eBay.

I know it is not completely revolutionary and at the same time, I cannot also say it is worse than eBay. Yes, I might be biased on this as I have already built a price tracker for Flipkart. Do you want to check it out? Well, here it is.

I am quite familiar with the colors and UI but I have never actually tried being a part/member of Flipkart. Today, I want to sign-up on Flipkart.

I tried only creating an account but was unsuccessful because I am just a neighbor. I mean I am in a neighboring country where Flipkart is registered i.e. India. And I wasn't able to change the country code on the mobile number.

Flipkart follows a B2C(Business-to-Consumer) e-commerce model. It is one the most popular model out there in the market and the most used one also.

And the ordering process is also pretty smooth. Although I was unable to go through the process as I can't make an account but looking from the outside, it isn't really a pain.

Snapdeal

I don't know what it is actually for. But as far as I know from some social media posts and videos, it is the same as eBay.

Ok, there is always a first time for doing all things. Here is my first time knowing snap deal and being a member of it.

My genuine first reaction after visiting snapdeal.com was

I am really impressed with the simple user interface. I mean just look at this, it is simple to use, and just feels good to use it.

Alright, let's try to use the platform by creating an actual account. That is an actual way to know better about an app.

Yet another only for India product. I can't use my phone number from outside India. Alright, I think it is made only for India. Made in India and only for India product. Good for them.

Moving on, it follows a C2C(Consumer-to-Consumer) e-commerce model. So I can actually sell the products in theory but first I have to get an Indian SIM. And the process of selling an item involves slightly different steps than eBay. It is only for India e-commerce sites so to sell the product, you need to have a GST number.

Because I am not an Indian. So, let's check out more e-commerce sites.

Daraz.com.np

Alright, I used to think that it is an e-commerce model founded and used in Nepal. But no, it was founded in another country, used in different other countries, and registered in another country.

The e-commerce site I will be visiting is only for my country as it has a specific domain name. It was founded in Pakistan way back in 2012 and is now acquired by one of the e-commerce giants Alibaba a few years ago. Daraz is one of the most popular e-commerce platforms in most south Asian developing countries. Actually, it is now in operation in four countries: Nepal, Pakistan, Bangladesh, and Sri Lanka.

I already have an account on daraz.com.np. So, I am not going to register it again. I can explain the login flow. I was first asked for my email and password and then I filled up more details like the phone number, address, etc. I can be a little biased about it😅

I tried buying one item but this time I faced some issues during the checkout. Overall, the buying process was pretty smooth when I used it in past. I hope it hasn't changed much.

Daraz follows B2C(Business-to-Consumer) business model just like Flipkart and amazon. I find the UI of this website quite good except for the hero section, the images, popups, and nav all look like spam to me. And also inner me feels like the loading time of daraz is pretty high compared to the same type of e-commerce sites.

That's it

Alright, we explored a few of the e-commerce sites and will be exploring more in the future. Overall, all of the e-commerce sites basically have the same buying process. And the UI is similar, the only difference there is the color and a little bit of tweaking of elements here and there. And we also realized that some sites are still national and haven't expanded to wide international audiences.

A little later I got this message from eBay:

"We wanted to let you know that your eBay account has been permanently suspended because of activity that we believe was putting the eBay community at risk. We understand that this must be frustrating, but this decision was not made lightly and it’s important that we keep our marketplace safe for everyone. Learn more about how and why accounts can be suspended"

Oh gosh, I was just testing out the site. There was absolute no need to ban me premanently.

Some say debugging is fun, some say it isn't but I say it depends on the situation you are on. Let me share my story of debugging with you guys.

How it all started?

So, to attend an offline Hackathon, my friends formed a team and named it Debugging army. It was our first Hackathon and we were excited about it, it didn't matter what the name is. The name was chosen by my teammate Rajesh Khadka and during the hackathon, we had regret the name. The reason might seem a bit silly but 2 hours into the hackathon, here we are with the name Debugging Army and got the bug. Actually, the bug arose on my PC, and that too after executing the git pull command.

The bug

The error was saying something on the red text but when I checked it, there was not anything bad as the error mentioned. Yep, that is the worst thing that can happen when you are debugging. And within a couple of hours of getting started on the hackathon, I was struck by a stupid error.

The error was there due to the expo as we were making a mobile application using React Native. Believe me or not, when a web developer tries to make a mobile application he really cries for hours. Yes, I faced it 🐱 Anyways here is the screenshot of the error.

I was getting this error every time I was trying to start my expo app. Yep that shitty expo start command didn't work.

Debugging

It is said that a developer spends his maximum time debugging and I realized that things were very well after a couple of hours of getting started in the hackathon.

Why not if I share with you that are the really stupid things I did during the hackathon to resolve this error? First of all, as mentioned in the error, I tried finding the JSON file to resolve the error. So after many unsuccessful attempts, I tried other approaches which I am going to lay down as follows.

Deleting the files

Alright, the very first thing I did was deleted the node_modules folder and reinstalled the packages. Since the error looked like this:

Starting project at C:\Users\Admire\OneDrive\Documents\Projects\project-dharan\app
JsonFileError: Error parsing JSON: 
└─ Cause: SyntaxError: Unexpected token  in JSON at position 0
1 | 
    | ^
JsonFileError: Error parsing JSON: 
└─ Cause: SyntaxError: Unexpected token  in JSON at position 0
1 | 
    | ^
    at parseJsonString (C:\Users\Admire\AppData\Roaming\npm\node_modules\expo\node_modules@expo\json-file\build\JsonFile.js:160:19)
    at Function.readAsync (C:\Users\Admire\AppData\Roaming\npm\node_modules\expo\node_modules@expo\json-file\build\JsonFile.js:139:12)
    at async getPackageVersionAsync

I thought the error is due to the package.json file so I deleted my project completely from my PC. And then cloned the project from GitHub. I reinstalled all of the dependencies. And all I had to see was the same error. So I tried deleting the project multiple times but it didn't work. Later on, I decided to clone the repository in a separate location and still slammed up by the same error just straight on my face.

Deleting the expo globally

Yep, I really thought that error might be there because the expo-cli freaked out unnecessarily. So I deleted the expo-cli globally and reinstalled then again ran the very important at the same time the most depressing command and that command is: yes, you guessed it

expo start

My bad luck was with me this time also. So I decided to get bigger. So now

Deleting the Nodejs

Nothing was working. That's the reason why I uninstalled the node js completely from my PC then installed the latest LTS version which was 18.x then I tried cloning the project again and reinstalling the packages again.

Then I asked my friends which version they were using. They were actually using 16.x so the version wasn't the problem so I reverted back to nodejs 16.x and continued with other ways to resolve the error.

Getting help from others

Look I was frustrated and tired. Now it was the time to go out, grab some coffee and chill out. Just in that time, my friend hopped in to help me out. So I stayed there looking at the ways he is trying to fix the problem. Ok the bug won, he was also unsuccessful to figure out what the error was and what the heck was the source of the error.

It's time to get some help from mentors. There were many mentors out there in hackathons to help anyone out in case they get into any error. So we called for one. We had to wait just a minute and the mentor arrived but with no luck. Well, he was getting late for his home as it was almost midnight so I still had the bug but the mentor left.

Changing the platform

At this time, I was pretty sure that the error I am getting is because of my PC. It wasn't the problem with my teammate's computer. So, I tried to change the environment of my project development.

In short, I download the ubuntu 20.04 LTS ISO and fired it up with Oracle Virtual Box. I set up nodejs and installed the android studio as I was using an android emulator for testing out my mobile application.

In the meantime, I got another mentor so I handed over my laptop to try his luck. He wasn't confident if he can solve the bug or not. Surely there can't be any expectations to solve any error if you haven't used react-native in past. Still, he tried. The first thing he did was used npm to manage the dependencies of the project. I was using yarn as I had faced really bad problems with npm in past.

He started shooting up different commands to start the project. He even helped me to set up the android device manager for the android emulator on Linux.

Just when we completed setting up the Linux development environment, he fired up the npm start command on the project again. Strangely, this time it worked. No, I am not kidding, seriously it worked. My project started and after many hours of struggle, I was finally able to view the app on my phone.

The struggle

It is still super mysterious and I am still trying to understand why I got the error and what file actually was causing the error. One of the really interesting things I forgot to share here is that my friend asked for the solution to this error on StackOverflow for over 100 bounties.

You can still find the question on StackOverflow. But seriously I am still amazed at how the hell my project started.

Conclusion

I got to learn a lot of things due to this bug. But everything is not there to learn and you cannot take everything as a good thing. It depends upon the situation. This time I was really stuck for 4 hours during the 24-hour hackathon due to a silly bug that was just mysterious.

In conclusion, the process of debugging can be both challenging and rewarding. While it requires dedication, hard work, and a lot of critical things, the happiness you get after solving the error is on the next level.

Why not end the blog with a good memory? A photo from the hackathon:

Let's connect on Twitter. My DMs are always open.

I have tried different platforms, and also had a conversation with many developers. So let me present to you the communities that I will be part of in the future and also the communities that I don't want to be a part of in the future. Let's start with some good things:

Best Communities

Just straight out of the box, let me present to you the communities that I think being part of is worth it.

1. Discord community

2. Twitter

3. Instagram design pages

4. NotJust dev community

5. Sagarmatha Development Community

6. ICT club at my school

Now that I mentioned these communities, let me share why I love these communities. And I want to go serially from top to bottom.

1. Discord Community

   I like discord. I like the fact that it is simple to use and the notification sound that I hear just feels good. I am a part of my communities on discord. Some of the communities are WeMakeDevs, Hashnode, ReactPlay Blog, Appwrite.

   

   You may ask what is so special about discord. There are other platforms too like Reddit. My answer to that is yes there are platforms like Reddit but the friendliness I have with discord is on the next level. The fact that you have a bot integrated, you have voice channels, and you have different channels inside of a single server. These all are quite a few reasons.

   Not only that, but I have also helped and taken help from a few other discord users who are also developers.

2. Twitter

   One thing to note is that Twitter is not only for politicians to make announcements or for celebrities to spread controversies, it is also a platform that has helped many developers grow in their life. On Twitter, I have the freedom to ask anything to any developer that can be an intern of MAANG or a senior developer of a startup next door with just one tweet.

   I can follow my role models, reach out to them if I need some assistance, or can ask them for referrals to get my new job. Also, Randal Kanna mentioned in her book Standout Developer how she got a boost from Twitter. If you want to check it out, here it is

   

   Not going to lie, one of the reasons why I am on Twitter is because of Elon, and another because of the free tips and resources that are being served on Twitter thread for free.

3. Instagram Design Pages

   

   While you don't talk a lot on those pages but you really get inspired by those designs that are sick. Yep, I get jealous of the designs there is more that I learn. Yet I think I can improve a bit by continuously following some UI/UX tips from those talented designers.

4. NotJust dev community

   It is more of a closed community that you get access to once you buy one of the courses from NotJust Academy. And a quick disclaimer I have not purchased any courses and I don't motivate or influence you to buy one. I have go the course as a prize.

   

   You can ask any questions about mobile application development using React Native and the community will help you out.

5. Sagarmatha Developer Community

   Sometimes when you talk with folks outside of your country, they don't know about the market condition near you. What are the technologies that are being used around you also don't have connections to get a quick job near you live, so it is always better to have a local/national community of developers that know each other better.

   

   This group has helped me a lot in the past and I am sure this will help me in a near future also.

6. ICT club at my School

   While it is good to have a local/national developer community but nothing can be compared to a physical group of nerds like you roaming around and organizing events. So we have a club in our school and I feel great to be a part of it. In the past also, we have organized some events and in the future also we have big plans

   

   Just feels great to be part of the journey to make changes in so many lives of the locals. And it is one of my best offline developer communities.

Worst communities

I think it is common to disagree with certain views of some communities. And there can be an instance where you might not be happy but in my case, there is one community that I never feel is a very good one. To be very real, I cut off my relations with the community where I used to be a member.

And ladies and gentlemen, that community is Facebook groups. I don't think there is any point in joining those communities. At the end of the day, you will see posts full of promotions of a blog post or youtube channels that fill up your news feed. And sometimes people start throwing words at each other.

Yes, I am biased. I am not so big fan of Facebook. And I don't think I will be in near future. But the thing that happens in the developer group on Facebook is shit on a whole new level.

Conclusion

The communities I mentioned above have played a crucial role in my life and they have shaped me to be the one that I am today. I hope I will be an active member of these communities and want to contribute to these developer communities as much as possible. But if I have to pick the best community out of the communities I have discussed above it will be non-other than the discord family. And the servers I am part of.

As we know Twitter is a great place for developers too. So let's have a chitchat.

Oh look, it's a frustrated developer. Tired of debugging the whole day now saw an announcement from Hashnode Townhall.

Yes, it's me. And I was frustrated the whole day and still, I am and in this frustration, I don't know if I will be funny or just throw up some garbage about programming. Anything can happen, but before that let me give you an idea of why I am so frustrated.

The context

Look, I have made an API using c#. And before you make a meme out of me for using c# ko make an API. Please let me inform you that I know and I can make a REST API using nodejs and express. So there is a reason why I chose c# for the API. It was my assignment to use c# and make something out of it. Being very lazy and clever, I thought making an API would be very easy to do.

If you have made an API using c#, I feel sorry for you. And you should also feel the same for me😥. Please.

I didn't know heck many things are involved in making a REST API using c#. First of all connect it to a database, which is a nightmare in itself. And second of all, I need to test it out. I wonder if there would be something that would automatically correct my program's bug before I test. Encountering a bug in a code is really painful, trust me😅 And especially when you don't know that is the reason, then it gets juicy.

Debugging

Welcome to the most confusing word of my life after being a developer cause I don't know when I hear this word if I need to be sad or get excited. Debugging is really that pain that you can't get rid of and that you also don't want at the same time. But our loved god just likes to drop it in our career and if it is a coincidence or not, there is literally a gap of 5 minutes between two moments: the bug is resolved, and shit, another one.

Also when the bug is resolved, you really get happiness on another level. And god, this debugging thing really teaches me the things that I never learned in my programming class and not even on youtube from an Indian guy.

My pain 😨

Ok, I can't still get out of it. So, allow me to throw all of my pain here. Somehow, I managed to make the API and but when I tried to host it creating a droplet on digitalocean, I got million other errors. And again when I successfully deployed it, I of course needed a frontend to do the request. GET request worked, but POST didn't. I want to be a kind guy, but the words I got in my mind, I just can't write them up here.

The present pain🥱

Yes, I am still in pain. In fact, the intensity is much higher. Yesterday, I slept in a chill thing my project is done. Yes, I completed the front end and hosted it successfully using netlify. And my friend Rajesh Khadka asked me to provide a URL of my app to try out. I gave him and he told me things are not working well.

Inside of my brain, there was a red alarm that was ringing just like the red alarm⏰ that buzzed on Google Headquarters after the success of chatGPT. So leaving my all other work aside, I jumped right into it. And it is dark now. Meaning it's evening and I am debugging from the morning. Oh hell, I spent more than 10 hours and still I am getting more and more new bugs.

I hate those bugs but to name some

• CORS error

• API endpoint mismatch error

• UI not being refreshed error

• If your front end has https, you can't request HTTP. Yes, that's also a bug in my app.

• Unknown bug

• Unnamed bug

and many more.

Conclusion

I would have written the conclusion but my boy I need to go debug. Who knows I might resolve those things now🤷‍♂️.

Bye

To use Joi, you first need to install it using npm:

npm install joi

Schema

Once installed, you can import Joi into your JavaScript code and use it to define a schema for your form values. For example, if your form has a field for a user's name, you could define a schema that requires the value to be a non-empty string:

const Joi =require('joi');

const schema = Joi.object({
    name: Joi.string().required()
});

Validation

You can then use the schema to validate user input. For example, the following code checks if the user's input for the name field is valid according to the schema:

const { error } = schema.validate({name:'John Doe'});

if(error){
    // The user's input for the name field is not valid
}

Joi offers a wide range of options for defining and validating your form values. For example, you can specify the minimum and maximum length of a string, the minimum and maximum value of a number, or the presence of specific characters in a string. You can also specify that certain fields are required, or that they must match a specific pattern.

Required

You can make an email required as follows:

const schema = Joi.object({
    email: Joi.string().required()
});

Of course, you need to validate it afterward as we did above. Let's just see the code anyways.

const { error } = schema.validate({email:'john@example.com'});

if(error){
    // The user's input for the email field is not valid
}

Optional

o specify that a field is optional in a Joi schema, you can use the optional method. This method allows a value to be either provided or left undefined.

For example, if your form has a field for a user's phone number, you could define a schema that allows the value to be either a string or undefined:

const schema = Joi.object({
    phone: Joi.string().optional()
});

You can then use the schema to validate user input. For example, the following code checks if the user's input for the phone field is valid according to the schema:

const { error } = schema.validate({phone:'123-456-7890'});

if(error){
    // The user's input for the phone field is not valid
}

If the user does not provide a value for the phone field, the validation will still pass, since the field is optional according to the schema.

In addition to the optional method, Joi also provides the allow method, which allows you to specify a list of specific values that are considered valid for an optional field. For example, you could use the allow method to specify that an optional field can only be null or undefined:

const schema = Joi.object({
    phone: Joi.string().allow(null,undefined)
});

This can be useful for cases where you want to explicitly differentiate between a field that has been left empty and a field that has been explicitly set to a null or undefined value.

Min and max

To specify a minimum or maximum value for a field in a Joi schema, you can use the min and max methods. These methods allow you to specify the minimum and maximum allowed values for a field, respectively.

For example, if your form has a field for a user's age, you could define a schema that requires the value to be a number between 18 and 99:

const schema = Joi.object({
    age: Joi.number().min(18).max(99)
});

You can then use the schema to validate user input. For example, the following code checks if the user's input for the age field is valid according to the schema:

const { error } = schema.validate({age:25});

if(error){
    // The user's input for the age field is not valid
}

In addition to the min and max methods, Joi also provides the greater and less methods, which allow you to specify a minimum or maximum value, respectively, that a field must be strictly greater or less than.

For example, you could use the greater and less methods to specify that a field must be a number strictly greater than 0 and strictly less than 100:

const schema = Joi.object({
    age: Joi.number().greater(0).less(100)
});

These methods can be useful for defining more precise and specific constraints on the values allowed for a field in your form.

Check the presence of specific character

To check for the presence of specific characters in a string field in a Joi schema, you can use the regex method. This method allows you to specify a regular expression that the value must match in order to be considered valid.

For example, if your form has a field for a user's password, you could define a schema that requires the value to contain at least one lowercase letter, one uppercase letter, and one number:

const schema = Joi.object({
    password: Joi.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/)
});

You can then use the schema to validate user input. For example, the following code checks if the user's input for the password field is valid according to the schema:

const{ error }= schema.validate({password:'p@ssw0rd'});

if(error){
    // The user's input for the password field is not valid
}

The regex a method is a powerful tool for defining complex constraints on the values allowed for a field in your form. You can use it to check for the presence of specific characters, patterns, or combinations of characters in a string value.

Conclusion

By using Joi to validate your form values, you can ensure that the data you collect is accurate and reliable. This can be especially important when working with sensitive data, such as personal information or financial transactions.

Git

Git is a free, open-source version control system that allows you to save different versions of your code and track changes. This means you can easily revert to previous versions of your code if something goes wrong, or collaborate with other developers on a project.

Why Git?

One of the main advantages of using Git is that it allows you to work on multiple branches of your code at the same time. For example, you can work on a new feature in one branch, while another developer works on a bug fix in another branch. These branches can then be merged together when they are ready, without affecting the rest of the code. This allows for a flexible and efficient workflow, as multiple team members can work on different aspects of a project simultaneously.

Another advantage of using Git is that it allows you to collaborate with other developers on a project. You can share your code with others and easily merge their changes into your code. This makes it easy for teams of developers to work together on a project, and reduces the risk of conflicts or overwriting each other's work. Git also enables developers to review each other's code and provide feedback, making it a valuable tool for code review and quality assurance.

Git also allows you to save different versions of your code, so you can easily roll back to a previous version if something goes wrong. This is particularly useful when working on large projects, where it can be difficult to keep track of changes. Git also allows you to see the history of the changes that were made, who made them and when. This enables developers to understand how the codebase progressed over time and fix issues that may have happened in the past.

Using Git also allows you to make use of a remote repository, such as GitHub, GitLab, and Bitbucket. This enables you to store your code remotely and access it from anywhere, making it easier to collaborate with other developers and share your work with others. This also allows for backup and disaster recovery in case something happens to the local copies of your code.

Another great feature of Git is its ability to handle merge conflicts. Merge conflicts can occur when two different branches of code are merged together and there are changes in the same lines of code. Git will automatically detect these conflicts and prompt the developer to resolve them. This can be done by manually editing the code or by using Git's built-in merge tool. This process may seem daunting at first, but with practice, it becomes a straightforward task.

In addition to these features, Git also offers a wide range of plugins and integrations that can be used to enhance its functionality. For example, you can use Git hooks to automate tasks such as running tests or deploying code to a live server. You can also use Git with various IDEs and text editors, such as Visual Studio Code, Sublime Text, and Atom, to make your workflow even more efficient.

Furthermore, Git is widely used in the open-source community. This means that as a web developer, you have access to a large number of open-source projects that you can use and contribute to. This can be a great way to learn and improve your skills, as well as to give back to the community.

One important thing to keep in mind when using Git is the importance of good commit messages. A good commit message should be clear, concise, and informative. It should explain what changes were made and why. This can be especially helpful when working in a team or when reviewing code.

Conclusion

In summary, Git is an incredibly powerful tool for web developers that can help to improve organization, collaboration, and efficiency in your projects. With its ability to track changes, work on multiple branches, and handle merge conflicts, Git can streamline your workflow and make it easier to manage your code. Additionally, the ability to use remote repositories and access a wide range of plugins and integrations can enhance your productivity and make it easier to share your work with others. And with its widespread use in the open-source community, you have the opportunity to learn and contribute to a wide range of projects. By taking the time to learn and master Git, you can take your skills as a web developer to the next level.

I'm Aashish Panthi, and 2022 was my third year in development, but my first year as a serious developer. This year was a whirlwind of new experiences and growth for me, and I'm excited to share my journey with you in this blog post.

My Open-Source Contributions

To start, 2022 was the most productive year as a developer for me. I made more than 1,000 contributions to open-source projects, and I learned how to open issues, create pull requests, and even merge pull requests. Overall, I learned how to contribute to open-source projects in a meaningful way.

One of the highlights of my open-source journey this year was participating in my first Hacktoberfest. For those who don't know, Hacktoberfest is a month-long celebration of open-source contributions, and it's a great way to get involved with open-source projects and learn new skills. I was thrilled to see my contributions spike in October, and I'm already looking forward to participating in Hacktoberfest again next year.

My Learnings in 2022

This year, I dove headfirst into the world of programming and learned a wide variety of new technologies. I started experimenting with markup languages like HTML and CSS, and then moved on to high-level programming languages like JavaScript and Python. I also learned about cloud computing and the importance of using free services to avoid surprise billing.

I also gained experience with open-source projects by both using them in my projects and contributing to them. And I started creating videos for the community to share my knowledge and help others learn.

Looking back on the year, I feel like I've come a long way. I've added a lot of new technologies to my skillset, and I've got even more on my bucket list for 2023.

My First Hackathons

As a serious developer, I knew that I wanted to challenge myself and learn new technologies by participating in hackathons. I took part in more than 15 online hackathons this year and won quite a few prizes. I even became a winner of one of the hackathons organized by Hashnode, and I was the runner-up in another one.

Participating in hackathons was a great learning experience for me. I had to think quickly and work efficiently to develop a solution to a problem in a short amount of time. I also had the opportunity to work with new technologies and collaborate with other developers.

My Projects in 2022

This year, I built a lot of projects, and I'm most excited to share my experience building two mobile applications. Prior to this year, I had no experience with mobile app development, but I took the fear out of me and developed two mobile applications.

Here's a list of my projects, organized by the date of creation:

Among these,

• I faced the most issues in mobile application development.

• I got stuck for a longer time during the Hardware project.

• The most amount of mental pressure I put on was over Search Engine.

• The projects that are very useful and working perfectly fine are lootle and mailsbe.

In conclusion, it's important to keep track of your projects and organize them in a way that makes sense for you. Whether it's by date of creation, type of project, or any other method, having a clear system in place can help you stay on top of your work and easily reference past projects. Additionally, sharing your projects with others can not only showcase your skills and accomplishments but also potentially lead to new opportunities or collaborations. Overall, taking the time to document and organize your projects is a valuable investment in your professional development.

Conclusion

The thing which I am the proudest about in 2022 is doing good projects and learning from them. Also, joining developer communities, asking questions, and answering some questions there was very effective for me to grow as a developer.

What is an open source?

"Open source refers to a type of software that is released under a license that allows the source code to be freely accessed, used, and modified by anyone. This means that anyone can view, modify, and distribute the source code for an open source software program, as long as they follow the terms of the license."

If you currently search on google, you will find the definition filled with technical words as above. If I have to explain it. Then I would explain open source like this:

An open source is a project/software whose source code is public and you can use that code to learn, customize and earn without getting into trouble. By trouble, I mean legal trouble.

Why should we contribute to open source?

There are a number of reasons why you might want to contribute to open-source projects. For one, contributing to open source can be a rewarding and fulfilling experience, as it allows you to contribute to projects that are important to you and make a positive impact on the world.

Additionally, contributing to open source can also be a great way to learn and develop new skills. By collaborating with other volunteers on open source projects, you can learn from their expertise and experience, and gain valuable knowledge and experience in areas such as software development, project management, and collaboration.

Another reason to contribute to open source is that it can help to build your professional reputation and network. Many open source projects are highly visible and well-respected in the tech industry, and participating in these projects can help to showcase your skills and expertise to potential employers and colleagues.

Furthermore, contributing to open source can also provide opportunities for professional growth and advancement. Many open source projects offer leadership and mentorship opportunities, which can help you to develop your skills and advance your career.

In summary, contributing to open source projects can be a rewarding and valuable experience that offers a range of benefits, including the opportunity to learn, grow, and make a positive impact on the world.

My story of open source contribution

The first time I contributed to open source is during hacktoberfest 2022. If you don't know about hacktoberfest then it is a global event where developers across the world, no matter if they are experienced or just starting out contribute to open-source projects via code or no code. And every year, it is conducted by the digital ocean.

I started out with some open-source projects. I remember I opened my first-ever pull request in a repository that wasn't super popular. It was a weather app. And the thing I did over there was, I changed the default city of the app and made it display the weather about that city.

And there was another project, I think it was something called 'TextUtils'. It was a web application made in react that featured all of the operations we can perform with text inside of a browser. For example:

I actually added a paste from the clipboard button there. Yes, it worked. And when I opened it up on firefox, the app crashed and I opened up the console, I found an error.

And that right there I opened up the first issue. I opened up the pull request with the paste button implemented and went to sleep. The next day I found out the maintainer of the repository wanted to solve the bug and she asked if I can solve the bug. I agreed and I was assigned the bug. I tried hard to fix it only to realize that SpeechRecognition isn't supported in Firefox. Then I just remove the feature on firefox. And yes the bug was fixed.

After that, I continued contributing to some more projects and started opening up issues in the open-source projects that I actually use like material UI.

Conclusion

To conclude my whole experience, I can say that collaborating on some projects that have different coding standards and that have a huge impact on developer society is a big opportunity. Also, the real perk that comes when engaging with an open-source community is awesome.

And at last, I want to show my contribution graph for 2022 where you see a huge spike after October.

• Copying text on the clipboard

• Pasting text from the clipboard

• Changing the case of the string

• Using speech recognition to take input

• Text to speech

First of all, COVID disappeared completely which was the happiest moment of my whole year 2022.

Let's get the context

Just like I learned some words in Spanish, I learned quite a few words in the programming world. This is my third year in development if I have to start from the beginning but my first year as a serious developer. And I want to give you the context of what I will discuss.

• My open-source contribution

• My learnings in 2022

• My participation in Hackathons this year

• My projects this year

Little spoiler ahead, I am new to the programming world and got a lot of exposure this year. So from right on, a nerd developer will be the one taking with you, sound good?😅.

I have a lot to share today and I am in a good mood for writing, so only one blog to reflect on my whole year's journey will not be enough (in my opinion). So, I might break it down into 3 - 4 blog articles.

1. My open-source contribution

To start, 2022 was the most productive year as a developer for me. I mean just look at my contribution graph.

Yes, I have made more than 1,000 contributions this year. I learned how to open up issues, how to open a pull request, and also to merge the pull request. Overall, I learned how to contribute to open source. I have shared more of it here.

2. My learnings in 2022

No, I didn't learn any blockchain technology this year but made a project using thirdweb this year. Not very much that's just a fanboy trying out hot in tech.

From markup languages to high-level programming languages, from localhost to cloud, from free services to surprise billing, from using open source projects to contributing to them, and from watching videos to creating them for the community, I have come a long way and when I look back, I don't feel like it was just another year with only 365 days. I feel like the year was long.

I have added quite a few good technologies to my skills list on my CV and also put a few more on my bucket list for 2023. But I want to reflect more on my learnings this year. So, I decided to go for a separate article.

3. My first Hackathons

As I mentioned, this is my first year as a serious developer which definitely means I did a lot of good things that developers do. And one of them is to challenge themselves to learn new technologies and develop a solution for a problem in a very less amount of time.

Yes, according to me, Hackathons are no more than (mostly) the use of new technology to solve a particular program in the minimum time possible.

I have won quite good prizes from taking part in hackathons this year. And learned heck lot of things just because I took part in hackathons. I took part in more than 15 online hackathons and I am on the way to the offline hackathon in 2023.

Among those 15 hackathons, 5 of them were organized by Hashnode with some sponsors. And I became a winner on one of them while I became runner up in the next one.

Earlier this year, I wrote an article sharing my online hackathon experience but this one might cover all of the experiences I want to share.

4. My projects this year

This is by far the most interesting section of my article and I am also most interested to share about it. Throughout this year, I build many projects. I built 2 mobile applications this year.

As you already might have guessed, I didn't know a bit about mobile application development prior but this year I took the fear out of me and developed two mobile applications.

You can just look at my projects by going to my GitHub profile. But let me share all of my projects here with short descriptions.

The projects are organized according to the date of creation.

Among these,

• I faced the most issues in mobile application development.

• I got stuck for a longer time during the Hardware project.

• The most amount of mental pressure I put on was over Search Engine.

• The projects that are very useful and working perfectly fine are lootle and mailsbe.

5. The things I am proud of

• The projects -> I am proud of most projects I built in 2022

• Blogs -> I have written some great blogs in 2022

• Videos -> Learned to edit more cool videos

• Client communications -> English is my second language so trying to use it for work also.

Conclusion

The thing which I am the proudest about in 2022 is doing good projects and learning from them. Also, joining developer communities, asking questions, and answering some questions there was very effective for me to grow as a developer.

I even wrote 35+ blogs this year and completed 10000+ page views on Hashnode.

In the end, I just want to say that, I am hyperactive on Twitter. We can chit-chat if you want to collaborate with me or simply have a conversation with me.

On this new year's eve, I want to reflect on what I have learned in 2022. And also what I have planned to learn in 2023 as a developer.

So, I am still in High School. It's a senior year, I am not that young 😅. And I have a pressure of an examination that I have to take while wrapping up High school. Therefore, the words you are going to be reading can be written by a frustrated high scholar.

Things I wanted to learn in 2022

I know many people have a new year's resolution. I am also planning to have one this year. But when starting out in 2022, I didn't have one so I struggle to find a path and learn the exact things I wanted to learn in 2022.

During and after COVID-19, there was a boom in blockchain and cryptocurrency. I was even curious to learn about it. I wanted to get my hands dirty with web3.

And that's all I had for a new year's resolution.

Things I learned in 2022

I didn't have anything on my bucket list but I think at the end of this year I have half filled my bucket with new technologies and languages. So, let's get to them one by one.

1. React

First and foremost, I can't forget about react. It's not like I didn't know anything about react in 2021. I have built some projects using it but they were simple. But by the start of 2022, I tried building some notorious things using this beast.

I have learned about Context API, UseEffect hooks, and other hooks. New ways of files and folder structuring. Serving the static, making a PWA with react, and also configuring the app before build to make sure it will work after build.

Still I struggle to reload the UI after some updation in page. Please help me through that.

2. Express

Ok, this is another beast on the backend side. I think I didn't have a complete idea about this one. I started out with this guy in 2022 and I am still going with this guy and don't have any plans to leave this guy in near future.

Express with Joi validation and mongoose makes a complete backed application in half time.

3. MongoDB

I love this database, I abandoned MySQL when I started out with this and now I am in a situation where if anyone asks me to do a project using MySQL, I will have to spend a whole day relearning its syntax of it.

Still, I have installed MongoDB on my machine but I am using MongoDB atlas which works fine on database requests but is a painful experience to browse collections through the dashboard.

4. Redis

I think I wouldn't have learned Redis. I had to learn it because I wanted to give a try to one of the hackathons organized by Redis and Dev.to on dev.to platform. I had to build something using Redis so I did build a project.

The project I built using Redis was a Search Engine. Yes, I also learned how the search engine works in 2022 and also build a search engine this year that give me a satisfactory result for my search query.

Eventually, I woke up one day to be a runner-up in the hackathon. So, it was worth it to learn Redis. Although, I didn't find the documentation I was searching for.

5. DNS mapping

I was curious to learn how the domain works. How do we hide our IP address with some random texts that we had to buy for an unreasonable about? And yes, I am talking about the domain names being extremely expensive.

I got a domain from namecheap and also from name.com and played with them a lot. And I used Cloudflare for DNS mapping. It was free, fast, secure, and easy to use. A thumbs up for cloudflare.com.

6. Linode

How can I forget about the linode. I have learned to map domains from linode server. I have learned to access the linode server from a remote place using SSH and a password. And felt the pain to install of the dependencies from scratch instead of going for popular alternatives like netlify.com or heroku.com that come feature packed with everything.

7. Sending emails

While learning to send emails through a web app, I got to learn about the mailing ports. I found out that 25 is the default mailing port and Linode by default blocks the mailing ports. I struggle to debug my application and after days of debugging, I finally found that solution. Or indeed a problem that was causing that problem.

8. Digital Ocean

Of course, the digital ocean provides credit to students but linode doesn't so I had to migrate to digital ocean after completing two months of free trial on linode.

And I got quite familiar with the digital ocean as it is similar to Linode. The only main difference is that digital is better in UI and documentation than Linode.

9. Web3

No, I am not so familiar with web3 but it is one of the things I touched on in 2022. I built a project using thirdweb.com.

I actually built an NFT marketplace called NFTque where you can mint, buy and sell your nfts.

10. Web Scraping

What is better than a puppeteer when web scraping? I used puppeteer to scrape data from websites in two of my projects and actually deployed them on digitalocean on a raw Linux server💪.

Conclusion

Well, there are many things I learned in 2022. But as a developer, I think these are the things I learned. But as a non-developer, I learned to write blogs and learned to edit some cool videos. That is how I crossed 1k subscribers in my channel this year.

I didn't have a clear plan about what I wanted to do this year. But I will surely write down what I want to achieve in 2023 in my note and follow that. Right now, here are my rough estimates:

• I want to go for ML

• I want to make an active open-source project with an active community

• I will be taking my 1k subscriber channel to 50k

• I will be learning python in 2023

• I will be taking a gap

Just look at my contributions spike in October month.

The first time I contributed to open source is during hacktoberfest 2022. If you don't know about hacktoberfest then it is a global event where developers across the world, no matter if they are experienced or just starting out contribute to open-source projects via code or no code. And every year, it is conducted by the digital ocean.

I started out with some open-source projects. I remember I opened my first-ever pull request in a repository that wasn't super popular. It was a weather app. And the thing I did over there was, I changed the default city of the app and made it display the weather about that city.

And there was another project, I think it was something called 'TextUtils'. It was a web application made in react that featured all of the operations we can perform with text inside of a browser. For example:

• Copying text on the clipboard

• Pasting text from the clipboard

• Changing the case of the string

• Using speech recognition to take input

• Text to speech

I actually added a paste from the clipboard button there. Yes, it worked. And when I opened it up on firefox, the app crashed and I opened up the console, I found an error.

And that right there I opened up the first issue. I opened up the pull request with the paste button implemented and went to sleep. The next day I found out the maintainer of the repository wanted to solve the bug and she asked if I can solve the bug. I agreed and I was assigned the bug. I tried hard to fix it only to realize that SpeechRecognition isn't supported in Firefox. Then I just remove the feature on firefox. And yes the bug was fixed.

That right there, I completed my first, second, third, and fourth pull requests. And I got this badge:

And after a week of verification. I got holopin badges. Yes, I want to show you them here:

Ans in tweet 😅

After that, I continued contributing to some more projects and started opening up issues in the open-source projects that I actually use like material UI.

Achievement

I didn't get a T-shirt. The thing is I wanted to have a T-shirt this year and I wanted to plant some trees the next year, yes I will take part again. But the T-shirts were finished as my final pull request was verified on 1st November.

Anyways, it feels great thinking I lifted up 120kg CO2 from the atmosphere.

Conclusion

This was my first hacktoberfest but this will not be my last. I learned more about the open-source community and how spam projects exist. I know I didn't contribute to some real-world projects this year but will be doing surely next year.

Thank you for your time :).

Introduction

According to me, Hackathons are no more than (mostly) the use of new technology to solve a particular program in the minimum time possible. Also, most of them have swags and prizes.

Nah Nah Nah, It isn't that much money, but you get in a fair amount. Let me now share my participation and achievements.

My participation

I have won quite good prizes from taking part in hackathons this year. And I learned a heck lot of things just because I took part in hackathons.

Let me just create a timeline of hackathons:

1. Thirdweb x Hashnode

It was organized by our very own thirdweb and hashnode. I didn't have any idea but it was on January 2022. Meaning I started hackathons at the beginning of 2022. Yes, it feels strange now knowing when I started.

It was my first hackathon so I just wrote a lot of thing, now let me just wirte in short.

• Date: January 2022

• Duration: 1 month

• Won? -> Nah

• Tech to use: Thirdweb

• Project: A NFT marketplace (Buy, sell and mint NFT)

  • Live website

  • Source code

Learnings:

It was my first web3 project. I learned about metamask wallet, and how to use the Ethereum network. And most important of all, I learned data once written can't be erased from the blockchain. This is the only reason why I haven't continued in web3 afterward.

2. Netlify x Hashnode

• Date: February 2022

• Duration: 1 month

• Won? -> Nah

• Tech to use: Netlify

• Project: A place to write your last wish and fulfill others

  • Live website

  • Source code

Learnings

I learned to use netlify better. I used netlify form submissions with React. I used firebase, I used to be scared of it at that time. Also, learned to edit videos (for demo).

3. Hasura x Hashnode

• Date: March 2022

• Duration: 1 month

• Won? -> Yes, Runner up

• Tech to use: Hasura

• Project: Learn programming while typing or vice-versa

  • Live website

  • Source code

Learnings

The very new thing I learned during this hackathon is that fonts have different widths . Also, monospace letters have equal width.

4. Linode x Hashnode

• Date: June 2022

• Duration: 1 month

• Won? -> Yes, Winner

• Tech to use: Linode

• Project: Track price of your product or stock

  • Live website

  • Source code

Learnings

In this hackathon, I learned web scraping using puppeteer. Also, to host a MERN web app on a raw linux server and map to a domain using Nginx.

Two hackathons in a row. Oh boy, that was epic.

5. Redis x Dev.to

• Date: August 2022

• Duration: 1 month

• Won? -> Yes, Runner up

• Tech to use: Redis

• Project: Search Engine

  • Live website

  • Source code

Learnings

In this hackathon, I enhanced my learning of web scraping using puppeteer. Also, to host a MERN web app on a raw digital ocean droplet and map it to a domain using Nginx. And using Redis as a database on its top.

Wow, three in a row 😅

6. Aws Amplify x Hashnode

• Date: September 2022

• Duration: 1 month

• Won? -> Nah

• Tech to use: AWS Amplify

• Project: Generate a dev card with the number of lines of code you have written

  • Live website

  • Source code

7. NASA Spaceapps hackathon

• Date: October 2022

• Duration: 36 hours

• Won? -> Nah

• Tech to use: NASA APIs

• Project: International Space Station tracker

  • Live website

  • Source code

After this, Hacktoberfest started and I started taking part in a lot of hackathons. Let me share only few of them in details.

8. Nhost x ReacPlay

• Date: October 2022

• Duration: 14 days

• Won? -> Yes, Third

• Tech to use: Nhost

• Project: Know if your email was read or not

  • Live website

  • Source code

Learnings

In this hackathon, I learned pixel tracking. Also, to use Nhost as a database, doing Graphql requests, and use Nhost serverless functions.

9. Notjust.dev x Nhost x Stream

• Date: November 2022

• Duration: 48 hours

• Won? -> Yes, Special price winner

• Tech to use: Nhost or Stream

• Project: A mobile app that gives you updates on the world cup 2022 match

  • App download

  • Source code

Learnings

In this hackathon, I learned to build a mobile application with React Native. Also, to use Stream for chat messaging.

10. Steel city code

11. Findcoder.io x locofy.ai

12. Medusa js hackathon

13. Inov-8-hackathon

14. MongoDB x Dev.to

I don't even remember other hackathons😅.

Yes, I don't have any experience with offline hackathons, I know some of the rules and time periods but for the most, I have only participated in a 5-hour-long offline competition (which I will not call a hackathon). At least I have participated in some online hackathons, so here is my experience with online hackathons.

Achievements

I feel great looking at my hackathon journeys, I built a lot of good projects this year. And want to build a lot more. Before that let me share some of my achievements here:

Got featured in Linode's craft of code

Got a participation certificate from steel city codes

120kg CO2 offset

Special prize from Notjust.dev

Got a participation certificate from the Medusa hackathon

Third position

Findcoder.io hackathon participation certificate

NASA Spaceapps participation certificate

Linode hackathon winner

Summary

To summarize the whole journey, I got various opportunities to learn more stuffs, explore new technologies, and engage with the community. Most importantly I was able to manage some time for these events. I don't know how but I passed two exams during these hackathons. I have also participated in other hackathons but I didn't find any room to fit that in here so I left it.