Forem: Arjun Sharma

GIVEAWAY + GOOD BOY UPDATE!

Arjun Sharma — Thu, 25 Sep 2025 18:24:55 +0000

Hey everyone,

Time for another update on Good Boy. If you’ve been following along, you know the idea has always been pretty simple: a desktop pet that doesn’t demand your attention. He’s not an idle game with grindy loops, just a little companion that eats, naps, and hangs out while you work (or binge random YouTube videos).

Lately, I’ve been experimenting with new ways to show him off — and that led me to record a short YouTube video.
👉 Watch the video here

Where Good Boy is headed

Adding more unique interactions (the kind you’ll discover accidentally and laugh at).

A full customization system, so you can make him look like your own dog.

Fun cosmetics to dress him up.

Long-term: I want this to grow into something bigger than just a novelty — a cozy, supportive presence on your desktop.

But to get there, the project needs your support. Right now, Good Boy is available on Itch for just $2. Every adoption helps me keep working on new features.
👉 Itch.io link

🎁 The Giveaway

I know not everyone can support right away, so I’ve set up a small giveaway for the community.

How to enter:

Join our Discord → Discord Invite

Head to the #giveaway channel and react to the post.

I’ll be picking winners there soon, so make sure you hop in.

That’s all for this update. Thanks again to everyone who’s been playing, giving feedback, and just hanging out in the Discord — it really means a lot. I’ll see you in the comments (or the giveaway channel 👀).

Good Boy (v1.0) Release: Bringing a Lovable Desktop Pet to Life

Arjun Sharma — Fri, 19 Sep 2025 15:43:53 +0000

Good Boy (v1.0) Release: Bringing a Lovable Desktop Pet to Life
Hey everyone! I’m thrilled to announce the release of Good Boy (v1.0), a charming desktop pet for Windows that’s sure to steal your heart. Picture a cute, animated dog you can interact with, play with, and even feed, right on your desktop! This project has been a labor of love, built from the ground up in Godot, and I’m excited to share the journey, challenges, and what’s next.

Good Boy is a lightweight desktop companion that lives on your screen. You can pet your virtual pup, toss a ball for a game of fetch, or feed it treats to keep it happy. It’s designed to bring a bit of joy and whimsy to your workday without getting in the way. Think of it like those classic virtual pets but with a modern twist and a lot of personality.
For example, imagine you’re working on a spreadsheet, and your desktop dog nudges the corner of your screen, wagging its tail. You can drag a bone from its food bowl, and it’ll happily chomp away while you get back to work. It’s simple, fun, and surprisingly heartwarming.

The Development Journey

Building Good Boy in Godot was a blast, but it wasn’t without its hurdles. Here’s a peek into some of the challenges I faced:

Input Passthrough Woes: One of the trickiest parts was making sure the dog didn’t hog all your mouse clicks. I had to figure out how to let inputs pass through to underlying windows (like your browser or file explorer) when they weren’t interacting with the pet. This involved diving deep into Godot’s input handling system and tweaking the event propagation. After a lot of trial and error (and some frustrated debugging sessions), I got it working smoothly.
Collaborating with an Artist: Working with an artist to bring the dog’s animations and personality to life was amazing but challenging. I fumbled a few times when conveying my vision—like when I vaguely described “a happy wag” and got a tail that spun like a helicopter! Clearer communication and mood boards helped us align, and the final art is adorable (shoutout to my artist for their patience!).
Scoping to Meet Deadlines: Early on, I had big dreams—multiple pets, complex mini-games, you name it. But to hit the release deadline, I had to ruthlessly scope down to the core features: petting, feeding, and simple play. It was tough to cut ideas, but it ensured Good Boy launched as a polished, focused experience.

What’s Next for Good Boy?
The v1.0 release is just the beginning! I’m committed to keeping Good Boy alive and growing. Here’s what’s on the horizon:

Steam Release: I’m planning to bring Good Boy to Steam, making it easier for more people to discover and enjoy.
Bug Fixes & Polish: I’ll be squashing bugs and refining the experience based on your feedback.
New Content & Features: Expect more interactions, like new toys or tricks, and maybe even seasonal outfits for your pup.

Final Thoughts
Releasing Good Boy v1.0 feels like sending a beloved pet out into the world. It’s been a wild ride learning Godot’s quirks, collaborating with an artist, and making tough calls to meet deadlines. I’m proud of the result—a cute, interactive companion that I hope brings a smile to your face.
Try Good Boy today, and let me know what you think! Your feedback will shape its future. Stay tuned for updates, and thanks for joining me on this journey.
Happy petting! 🐶

How I Built My Portfolio Using NextJS and MDX

Arjun Sharma — Mon, 10 Jun 2024 04:42:10 +0000

Last year, I was inspired by amazing developers like Josh W Comeau and Kent C Dodds. I decided to make my own portfolio website with a blog to learn in the open and share my journey with the community. You can check it out here

Inspiration and Initial Research
Choosing Next.js and MDX
Setting Up the Project
Challenges with the Next.js App Router
Styling MDX Content
Using TailwindCSS and Tailwind Typography
Implementing Page Views with Redis
Taking a Break
Back with More Experience
Current State and Future Plans

Inspiration and Initial Research

Seeing how developers like Josh W Comeau and Kent C. Dodds shared their knowledge and projects,
I felt motivated to create something similar.
I wanted a platform where I could document my learning process and projects.
A blog integrated into my portfolio seemed like the perfect idea.

Choosing Next.js and MDX

After some research, I decided to use Next.js for its flexibility and performance.
For the blog, I chose MDX because it allowed me to write JSX in Markdown, giving me the power to create interactive content. I opted for next-mdx-remote for MDX compilation.

Setting Up the Project

Here's a step-by-step guide on setting up a Next.js project with MDX, TailwindCSS, and other packages.

Initialize Next.js Project

First, we need to create a new Next.js project:

npx create-next-app@latest my-portfolio
cd my-portfolio

Install Dependencies

Next, we install the necessary dependencies:

npm install @next/mdx next-mdx-remote tailwindcss @tailwindcss/typography sugar-high redis

Setup TailwindCSS

To set up TailwindCSS, follow these steps:

Initialize TailwindCSS:

npx tailwindcss init -p

Configure TailwindCSS:

Update tailwind.config.js:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './posts/**/*.{md,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

Add Tailwind Directives:

Update styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure MDX with next-mdx-remote

To set up MDX, create a lib/mdx.js file:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { serialize } from 'next-mdx-remote/serialize';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData() {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map(fileName => {
    const id = fileName.replace(/\.mdx$/, '');
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const matterResult = matter(fileContents);
    return {
      id,
      ...matterResult.data
    };
  });
  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1));
}

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.mdx`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const matterResult = matter(fileContents);
  const mdxSource = await serialize(fileContents);
  return {
    id,
    mdxSource,
    ...matterResult.data
  };
}

Create Blog Page

Create a pages/blog/[id].js file:

import { getPostData, getSortedPostsData } from '../../lib/mdx';
import { MDXRemote } from 'next-mdx-remote';
import Link from 'next/link';

export default function Post({ postData }) {
  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{postData.title}</h1>
      <MDXRemote {...postData.mdxSource} />
      <Link href="/blog">← Back to Blog</Link>
    </article>
  );
}

export async function getStaticPaths() {
  const paths = getSortedPostsData().map(post => ({
    params: { id: post.id }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData
    }
  };
}

Challenges with the Next.js App Router

Back then, the Next.js App Router was still new, and many packages hadn't been updated to work with it. I faced numerous issues and spent a lot of time on the next-mdx-remote GitHub repo discussing with the community. Eventually,
I discovered they had a different implementation for the App Router's React Server Components (RSC).

Styling MDX Content

Creating a blog page was a significant achievement, but styling the MDX content turned out to be tricky. As a newcomer, I found it challenging to make the content look good. After struggling for a while, I decided to pause the project because I needed to focus on my summer project for college.

Using TailwindCSS and Tailwind Typography

TailwindCSS and the Tailwind Typography plugin made styling much easier. By adding prose classes to my blog content, I could quickly achieve a clean and professional look.

For example, wrapping the MDX content with <article className="prose lg:prose-xl mx-auto"> applied beautiful default styles to all text elements.

Implementing Page Views with Redis

To track page views, I used the sugar-high npm package with Redis. Here's a basic implementation:

Install Redis
Ensure Redis is installed and running on your machine. For the setup, I used Docker:

docker run --name redis -d -p 6379:6379 redis

Create a lib/redis.js file:

import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

export default redis;

In your API route (e.g., api/view/route.ts), set up the endpoint to count views:

import redis from '../../lib/redis';
import {NextRequest, NextResponse} from 'next';

export default async function POST(req : NextRequest, res : NextResponse) {
  const { id } = req.query;
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress;

  const hasVisited = await redis.sismember(`views:${id}`, ip);
  if (!hasVisited) {
    await redis.sadd(`views:${id}`, ip);
    await redis.incr(`views-count:${id}`);
  }

  const views = await redis.get(`views-count:${id}`);
  res.json({ views },{staus : 200});
}

On the client side, you can fetch and display the views:

import { useEffect, useState } from 'react';

export default function PageViews({ id }) {
  const [views, setViews] = useState(0);

  useEffect(() => {
    fetch(`/api/views?id=${id}`)
      .then(response => response.json())
      .then(data => setViews(data.views));
  }, [id]);

  return <p>{views} views</p>;
}

Taking a Break

During the break, I continued working with Next.js on various projects, including a cool project called LinkME, you can learn more about it here. This experience gave me a lot more confidence and knowledge.

Back with More Experience

With the additional experience, I felt ready to tackle my portfolio website again. I decided to rebuild it from scratch. This time, everything went much smoother. Although it's not finished yet, I'm developing it iteratively based on feedback.

Current State and Future Plans

The portfolio now includes a Project Page where I post about the projects I've completed. While there's still a lot to do, I'm happy with the progress and look forward to improving it over time.

Thanks for reading about my journey in building my portfolio website. Stay tuned for more updates!

Handling Forms in React

Arjun Sharma — Sun, 04 Jun 2023 12:13:13 +0000

Hey there! So, let me tell you a little story. Once upon a time, I was trying to learn how to handle forms in React. And let me tell you, it was not a walk in the park. I found myself scratching my head and wondering why on earth it was so difficult to understand. But then, after many cups of coffee and some late nights, it finally clicked! And now, I want to share my knowledge with all of you lovely people out there who might be struggling just like I was. So buckle up and get ready for some form-handling fun (yes, that’s a thing)! 😂

Introduction to Forms

In HTML, forms are used to collect user’s input which is generally sent to a server to process. Form can be visualized as a container for all input elements such as : text-fields, radio buttons, checkboxes, etc.
You can learn more about forms here
For example,

<form>
  <label for="f-name">First name:</label>
  <input type="text" id="f-name" name="f-name">
  <label for="l-name">Last name:</label>  
  <input type="text" id="l-name" name="l-name">
</form>

Need for handling forms?

In HTML, when we submit a form, you will notice that the page refreshes itself.

However, since React stores the form data in state. If we don’t handle forms in React, the default behavior of the form will take place (i.e. it will refresh itself and the current state will be lost). This means that when the form is submitted the data entered by the user in the form will be lost forever.

Handling Forms in React

Now, that we know why Handling Form is so important, let’s get started on how to handle them.
In React, we can handle form using two ways :

Controlled Components
Uncontrolled Components

Let's see how they differ from each other and their working.

Controlled Components

An form whose data is being controlled in such a way that it’s data is stored in the React state using useState() and is updated using setState() which can only be triggered by the user.
To create your own controlled component, we need to use the value prop and the onChange prop of the form element.
For example ,

import { useState } from "react";
const Form=()=>{
  // To store data in state
  const [data,setData]=useState("") // If you provide a value to the component, it must remain a string throughout its lifetime.

  //To handle Submit
  const handleSubmit=(event)=>{
    event.preventDefault() //Prevents the default behaviour
    alert('You have entered the name: '+ data)
  }

  //To handle change of the input
  const handleChange=(event)=>{
    setData(event.target.value)
    event.preventDefault()  //Prevents the default behaviour
  }
  return(
    <form onSubmit={handleSubmit}>
      <label>
          Name:
          <input type="text" value={data} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
    </form>
  )
}
export default Form;

Handling Multiple Inputs

To handle multiple inputs, you can use name attribute of an input element to access it and let the handler function choose what to do with it.

Note : For checkboxes, use event.target.checked instead of event.target.value
Example:

import { useState } from "react";

const Form=()=>{
  const [state,setState]=useState({isGoing: true,numberOfGuests: 2})

  const handleInputChange=(event)=>{
    event.preventDefault();
    const target=event.target
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setState((prevState)=>{
      return {...prevState,[name]:value}
    })
    console.log(state)
  }

  return(
    <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={state.isGoing}
            onChange={handleInputChange} 
            />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={state.numberOfGuests}
            onChange={handleInputChange}
             />
        </label>
      </form>
  )
}
export default Form;

Using controlled components in React can be time-consuming because you have to write an event handler for every change in data. This can be frustrating when converting old code to React or using it with non-React libraries. In these cases, you might want to try uncontrolled components, which are another way to implement forms.

Uncontrolled Components

Even if you manage to create a form which can handle multiple inputs, it still wouldn’t solve the performance issues as the component would re-render after each state update.
Therefore, you may use uncontrolled components which makes use of useRef() to get form values from the DOM(Document Object Model).
Example :

import { createRef } from "react"

const Form=()=>{
  const input=createRef()

  const handleSubmit=(event)=>{
    event.preventDefault()
    alert('A name was submitted: ' + input.current.value);
  }
  return(
    <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" ref={input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
  )
}
export default Form

As we can see an uncontrolled component gets the form values from the DOM, and is much more easier to implement as well as much less code than controlled input.

However, it is still advised to use controlled components instead of uncontrolled components.

Conclusion

You can head over to all the Sandbox which I've embedded and try to understand the code more efficiently. Also, I suggest reading some official docs by React.

Farewell, my brave hobbits

How to create a simple Loading Screen in React

Arjun Sharma — Sat, 20 May 2023 19:47:44 +0000

Hey devs 👋
So, recently I was trying to figure out how to create an awesome looking Loading Screens in React without installing npm packages and also which are simple to use. And I came around something that I want to share with you guys.

Final Result

Creating SVG using Figma

Yes, we will be using Figma to create a SVG. Let's open up Figma in our desktop and create a new design file.

Now, create a Frame (by pressing F) and selecting any dimension. I will be using 1280 x 720.
After creating the Frame, let's make the background a bit darker so that we can see everything perfectly.
Now, create a Text in the Frame and increase it's font-size. I will be using 64px.(Make sure the text width and height perfectly fits)

Now, Right-click on the Text and select Outline Stroke

Now, let's remove the Fill color from the text and add a Stroke color having width of 5px. Now, it should look something like this...

Now, Right-click on the text and Copy as SVG.

Initial Project Setup

First, let's create the React app by using the following command
npx create-react-app loading-screen

Now, let's delete all the files in src directory inside the loading-screen app except the index.js, index.css, app.js

Loading Component

Let's begin by creating the Loading Component. So, in the src folder, create a new file named Loading.jsx and Loading.css

Create a div with id "loader-container" inside the Loading Component
Inside the div paste the SVG and add an id "loader"



import './Loading.css'
const Loading=()=>{
  return(
    <div id="loader-container">
      <svg id="loader" width="285" height="59" viewBox="0 0 285 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_1_6" maskUnits="userSpaceOnUse" x="0.636353" y="0.818176" width="284" height="58" fill="black">
<rect fill="white" x="0.636353" y="0.818176" width="284" height="58"/>
<path d="M5.63635 53V6.45454H11.2727V48H32.9091V53H5.63635Z"/>
<path d="M79.0966 29.7273C79.0966 34.6364 78.2102 38.8788 76.4375 42.4545C74.6648 46.0303 72.2329 48.7879 69.142 50.7273C66.0511 52.6667 62.5208 53.6364 58.5511 53.6364C54.5814 53.6364 51.0511 52.6667 47.9602 50.7273C44.8693 48.7879 42.4375 46.0303 40.6648 42.4545C38.892 38.8788 38.0057 34.6364 38.0057 29.7273C38.0057 24.8182 38.892 20.5758 40.6648 17C42.4375 13.4242 44.8693 10.6667 47.9602 8.72727C51.0511 6.78787 54.5814 5.81818 58.5511 5.81818C62.5208 5.81818 66.0511 6.78787 69.142 8.72727C72.2329 10.6667 74.6648 13.4242 76.4375 17C78.2102 20.5758 79.0966 24.8182 79.0966 29.7273ZM73.642 29.7273C73.642 25.697 72.9678 22.2955 71.6193 19.5227C70.286 16.75 68.4754 14.6515 66.1875 13.2273C63.9148 11.803 61.3693 11.0909 58.5511 11.0909C55.7329 11.0909 53.1799 11.803 50.892 13.2273C48.6193 14.6515 46.8087 16.75 45.4602 19.5227C44.1269 22.2955 43.4602 25.697 43.4602 29.7273C43.4602 33.7576 44.1269 37.1591 45.4602 39.9318C46.8087 42.7045 48.6193 44.803 50.892 46.2273C53.1799 47.6515 55.7329 48.3636 58.5511 48.3636C61.3693 48.3636 63.9148 47.6515 66.1875 46.2273C68.4754 44.803 70.286 42.7045 71.6193 39.9318C72.9678 37.1591 73.642 33.7576 73.642 29.7273Z"/>
<path d="M88.2954 53H82.3864L99.4773 6.45454H105.295L122.386 53H116.477L102.568 13.8182H102.205L88.2954 53ZM90.4773 34.8182H114.295V39.8182H90.4773V34.8182Z"/>
<path d="M144 53H129.636V6.45454H144.636C149.152 6.45454 153.015 7.38636 156.227 9.25C159.439 11.0985 161.901 13.7576 163.614 17.2273C165.326 20.6818 166.182 24.8182 166.182 29.6364C166.182 34.4848 165.318 38.6591 163.591 42.1591C161.864 45.6439 159.348 48.3258 156.045 50.2045C152.742 52.0682 148.727 53 144 53ZM135.273 48H143.636C147.485 48 150.674 47.2576 153.205 45.7727C155.735 44.2879 157.621 42.1742 158.864 39.4318C160.106 36.6894 160.727 33.4242 160.727 29.6364C160.727 25.8788 160.114 22.6439 158.886 19.9318C157.659 17.2045 155.826 15.1136 153.386 13.6591C150.947 12.1894 147.909 11.4545 144.273 11.4545H135.273V48Z"/>
<path d="M181.273 6.45454V53H175.636V6.45454H181.273Z"/>
<path d="M229.483 6.45454V53H224.028L198.665 16.4545H198.21V53H192.574V6.45454H198.028L223.483 43.0909H223.937V6.45454H229.483Z"/>
<path d="M272.58 21C272.08 19.4697 271.42 18.0985 270.602 16.8864C269.799 15.6591 268.837 14.6136 267.716 13.75C266.61 12.8864 265.352 12.2273 263.943 11.7727C262.534 11.3182 260.989 11.0909 259.307 11.0909C256.549 11.0909 254.042 11.803 251.784 13.2273C249.526 14.6515 247.731 16.75 246.398 19.5227C245.064 22.2955 244.398 25.697 244.398 29.7273C244.398 33.7576 245.072 37.1591 246.42 39.9318C247.769 42.7045 249.595 44.803 251.898 46.2273C254.201 47.6515 256.792 48.3636 259.67 48.3636C262.337 48.3636 264.686 47.7955 266.716 46.6591C268.761 45.5076 270.352 43.8864 271.489 41.7955C272.64 39.6894 273.216 37.2121 273.216 34.3636L274.943 34.7273H260.943V29.7273H278.67V34.7273C278.67 38.5606 277.852 41.8939 276.216 44.7273C274.595 47.5606 272.352 49.7576 269.489 51.3182C266.64 52.8636 263.367 53.6364 259.67 53.6364C255.549 53.6364 251.928 52.6667 248.807 50.7273C245.701 48.7879 243.276 46.0303 241.534 42.4545C239.807 38.8788 238.943 34.6364 238.943 29.7273C238.943 26.0454 239.436 22.7348 240.42 19.7954C241.42 16.8409 242.83 14.3258 244.648 12.25C246.466 10.1742 248.617 8.58333 251.102 7.47727C253.587 6.37121 256.322 5.81818 259.307 5.81818C261.761 5.81818 264.049 6.18939 266.17 6.93181C268.307 7.65908 270.208 8.69696 271.875 10.0454C273.557 11.3788 274.958 12.9773 276.08 14.8409C277.201 16.6894 277.973 18.7424 278.398 21H272.58Z"/>
</mask>
<path d="M5.63635 53V6.45454H11.2727V48H32.9091V53H5.63635Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M79.0966 29.7273C79.0966 34.6364 78.2102 38.8788 76.4375 42.4545C74.6648 46.0303 72.2329 48.7879 69.142 50.7273C66.0511 52.6667 62.5208 53.6364 58.5511 53.6364C54.5814 53.6364 51.0511 52.6667 47.9602 50.7273C44.8693 48.7879 42.4375 46.0303 40.6648 42.4545C38.892 38.8788 38.0057 34.6364 38.0057 29.7273C38.0057 24.8182 38.892 20.5758 40.6648 17C42.4375 13.4242 44.8693 10.6667 47.9602 8.72727C51.0511 6.78787 54.5814 5.81818 58.5511 5.81818C62.5208 5.81818 66.0511 6.78787 69.142 8.72727C72.2329 10.6667 74.6648 13.4242 76.4375 17C78.2102 20.5758 79.0966 24.8182 79.0966 29.7273ZM73.642 29.7273C73.642 25.697 72.9678 22.2955 71.6193 19.5227C70.286 16.75 68.4754 14.6515 66.1875 13.2273C63.9148 11.803 61.3693 11.0909 58.5511 11.0909C55.7329 11.0909 53.1799 11.803 50.892 13.2273C48.6193 14.6515 46.8087 16.75 45.4602 19.5227C44.1269 22.2955 43.4602 25.697 43.4602 29.7273C43.4602 33.7576 44.1269 37.1591 45.4602 39.9318C46.8087 42.7045 48.6193 44.803 50.892 46.2273C53.1799 47.6515 55.7329 48.3636 58.5511 48.3636C61.3693 48.3636 63.9148 47.6515 66.1875 46.2273C68.4754 44.803 70.286 42.7045 71.6193 39.9318C72.9678 37.1591 73.642 33.7576 73.642 29.7273Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M88.2954 53H82.3864L99.4773 6.45454H105.295L122.386 53H116.477L102.568 13.8182H102.205L88.2954 53ZM90.4773 34.8182H114.295V39.8182H90.4773V34.8182Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M144 53H129.636V6.45454H144.636C149.152 6.45454 153.015 7.38636 156.227 9.25C159.439 11.0985 161.901 13.7576 163.614 17.2273C165.326 20.6818 166.182 24.8182 166.182 29.6364C166.182 34.4848 165.318 38.6591 163.591 42.1591C161.864 45.6439 159.348 48.3258 156.045 50.2045C152.742 52.0682 148.727 53 144 53ZM135.273 48H143.636C147.485 48 150.674 47.2576 153.205 45.7727C155.735 44.2879 157.621 42.1742 158.864 39.4318C160.106 36.6894 160.727 33.4242 160.727 29.6364C160.727 25.8788 160.114 22.6439 158.886 19.9318C157.659 17.2045 155.826 15.1136 153.386 13.6591C150.947 12.1894 147.909 11.4545 144.273 11.4545H135.273V48Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M181.273 6.45454V53H175.636V6.45454H181.273Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M229.483 6.45454V53H224.028L198.665 16.4545H198.21V53H192.574V6.45454H198.028L223.483 43.0909H223.937V6.45454H229.483Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M272.58 21C272.08 19.4697 271.42 18.0985 270.602 16.8864C269.799 15.6591 268.837 14.6136 267.716 13.75C266.61 12.8864 265.352 12.2273 263.943 11.7727C262.534 11.3182 260.989 11.0909 259.307 11.0909C256.549 11.0909 254.042 11.803 251.784 13.2273C249.526 14.6515 247.731 16.75 246.398 19.5227C245.064 22.2955 244.398 25.697 244.398 29.7273C244.398 33.7576 245.072 37.1591 246.42 39.9318C247.769 42.7045 249.595 44.803 251.898 46.2273C254.201 47.6515 256.792 48.3636 259.67 48.3636C262.337 48.3636 264.686 47.7955 266.716 46.6591C268.761 45.5076 270.352 43.8864 271.489 41.7955C272.64 39.6894 273.216 37.2121 273.216 34.3636L274.943 34.7273H260.943V29.7273H278.67V34.7273C278.67 38.5606 277.852 41.8939 276.216 44.7273C274.595 47.5606 272.352 49.7576 269.489 51.3182C266.64 52.8636 263.367 53.6364 259.67 53.6364C255.549 53.6364 251.928 52.6667 248.807 50.7273C245.701 48.7879 243.276 46.0303 241.534 42.4545C239.807 38.8788 238.943 34.6364 238.943 29.7273C238.943 26.0454 239.436 22.7348 240.42 19.7954C241.42 16.8409 242.83 14.3258 244.648 12.25C246.466 10.1742 248.617 8.58333 251.102 7.47727C253.587 6.37121 256.322 5.81818 259.307 5.81818C261.761 5.81818 264.049 6.18939 266.17 6.93181C268.307 7.65908 270.208 8.69696 271.875 10.0454C273.557 11.3788 274.958 12.9773 276.08 14.8409C277.201 16.6894 277.973 18.7424 278.398 21H272.58Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
</svg>

    </div>
  )
}
export default Loading;

Implementing the Loading Component to the App

Let's begin with importing the Loading.jsx into the App.js import Loading from "./Loading";
Now, since a loading screen only appears in the beginning of the render we will make use of React.useState() and React.useEffect()
Let's create a local state called loading initialized to true and use setLoading to toggle it's value.
Using useEffect()and setTimeout() to change the value of loading to false.
After that, we will check if loading is true we will return <Loading/>



import Loading from "./Loading";
import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
  const [loading, setLoading] = useState(true)
    useEffect(() => {
        setTimeout(() => setLoading(false), 3300)
    }, [])
    if (loading) {
        return <Loading/>
    }
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

Styling the Page

Let's begin by styling the App.js and then move on to the Loading component.

Styling the Main App ```

body{
margin:0;
padding: 0;
box-sizing: border-box;
}
.App {
font-family: sans-serif;
text-align: center;
}

- Styling the Loader
Now, we will be using the [`stroke-dasharray`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) and [`stroke-dashoffset`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) property in CSS to animate our SVG. I highly advise learning about this property if you are not familiar with it. Basically, we will be playing the stroke of the individual child path of the SVG.

loader-container{

max-width:220px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}

loader path:nth-child(2){

stroke-dasharray: 200%;
stroke-dashoffset: 200%;
animation: strokeAnimate 2s 0s ease forwards;
}

loader path:nth-child(3){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 0.3s ease forwards;
}

loader path:nth-child(4){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 0.9s ease forwards;
}

loader path:nth-child(5){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.2s ease forwards;
}

loader path:nth-child(6){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.5s ease forwards;
}

loader path:nth-child(7){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.8s ease forwards;
}

loader path:nth-child(8){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 2.1s ease forwards;
}

@keyframes strokeAnimate{
to{
stroke-dashoffset: 0;

}
}

@media screen and (max-width: 768px) {
#loader-container{
max-width:150px;
}
#loader{
width:150px;
}
}

@media screen and (max-width:650px) {
#loader-container{
max-width:100px;
}
#loader{
width:100px;
}
}

## Result




### Final Thoughts
I think this method is pretty slick and easy to create awesome Loading Screens. Do let me know if you have any doubts or facing any problem implementing this. 

Adios Amigo 👋

![Tuco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7oq5poteafrau61bkbt.png)

Web Development: An Introduction to Working with REST APIs and JSON Data

Arjun Sharma — Thu, 20 Apr 2023 14:38:37 +0000

I still remember when I learned about APIs and the possibilities of using them in my projects made my mind boggle. It took me a lot of practice to understand it and I would always face some kind of issues while fetching the API into my web applications. So, I decided to share my knowledge to those who are new and interested in working with APIs.

Introduction

With the increasing use of REST APIs and web services in the industry, it's important for developers to have a good understanding of how to work with them. REST (Representational State Transfer) is an architectural style that defines a set of constraints to create web services. JSON (JavaScript Object Notation) is a lightweight data format that is easy to read and write which makes it a personal favorite of all the developers including me 😅. Together, REST APIs and JSON data are essential components of modern web development. In this blog post, we will provide an introduction to working with REST APIs and JSON data, covering the basics of how they work and how to use them.

What are REST APIs
How do REST APIs work?
What is JSON data?
Parsing JSON data with JavaScript
Retrieving data from a REST API
Integrating REST APIs into a web application.
Best Practices for Working with REST APIs and JSON data
Conclusion

1. What are REST APIs

REST APIs are a type of web service that uses HTTP requests to access and manipulate data. The data can be in any format, such as HTML, XML, or JSON. The most popular format however is JSON. REST APIs follow a set of constraints, known as the REST architectural style, to create scalable and maintainable web services.

According to MDN Web Docs,

The basic idea of REST is that a resource, e.g. a document, is transferred via well-recognized, language-agnostic, and reliably standardized client/server interactions. Services are deemed RESTful when they adhere to these constraints.

2. How do REST APIs work?

REST APIs use HTTP requests to perform operations on data. HTTP requests are made up of a URL, an HTTP method (such as GET, POST, PUT, DELETE), and headers. The HTTP response typically contains a status code, headers, and the requested data in the specified format (such as JSON).

3. What is JSON data?

JSON is a lightweight data format that is easy to read and write. It is based on a subset of the JavaScript programming language and is often used to transmit data between a server and a web application. JSON data is stored as key-value pairs, similar to JavaScript objects.

An Example of JSON would be :

{
"id": 1,
"name":"Arjun Sharma",
"enrolled":true,
"symptoms":["Coughing","Headache","Body Pain","Nausea"]
}

4. Parsing JSON data with JavaScript

When I was learning about JSON, I would always forget to parse them and would spend hours trying to figure out what went wrong and why I am getting [object Object] instead of some useful data, only to find my dumb mistake.
To work with JSON data in JavaScript, you need to parse it into a JavaScript object.This can be done using the built-in JSON.parse() method. Here's an example:

const jsonData='{"name":"Katy","age":30,"city":"Ohio"}'
const obj=JSON.parse(jsonData)
console.log(obj.city)

5. Retrieving data from a REST API

To retrieve data from a REST API, you need to make an HTTP request using the appropriate HTTP method (usually GET). Here's an example using the Fetch API:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Note : You could also use XMLHttpRequest(XHR) to retrieve data from a REST API but, I would advice not using it in your web applications ( but would recommend trying it out just to learn about it). You could research more on why the fetch() method is preferred instead of XMLHttpRequest().

6. Integrating REST APIs into a web application

To integrate a REST API into a web application, you need to make HTTP requests to the API and parse the JSON data. Here's an example of a web application that retrieves and displays data from a REST API:

<!DOCTYPE html>
<html>
  <head>
    <title>Web App</title>
  </head>
  <body>
    <div id="data"></div>
    <script>
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          const element = document.getElementById('data');
          element.innerHTML = `Name: ${data.name}, Age: ${data.age}, City: ${data.city}
data.name}<br>Age: ${data.age}<br>City: ${data.city}`;
})
.catch(error => console.error(error));
</script>

  </body>
</html>

In this example, the web application retrieves data from the URL https://api.example.com/data and displays it in an HTML element with the ID 'data'. The data is parsed using the response.json() method, and the JavaScript template literal syntax is used to format the data into an HTML string.

7. Best Practices for Working with REST APIs and JSON data

When working with REST APIs and JSON data, it's important to follow best practices to ensure that your web application is secure, scalable, and maintainable. Here are some best practices to keep in mind:

Use HTTPS to ensure secure communication between the web application and the API.
Validate user input to prevent malicious attacks such as SQL injection.
Use pagination to limit the amount of data returned by the API and improve performance. -_ Cache API responses to reduce the number of HTTP requests and improve performance._
Handle errors gracefully by displaying user-friendly error messages and logging errors for debugging purposes.

8. Conclusion

In this blog post, we provided an introduction to working with REST APIs and JSON data in web development. We covered the basics of how REST APIs work, how to parse JSON data with JavaScript, how to retrieve data from a REST API, and how to integrate REST APIs into a web application. We also discussed best practices for working with REST APIs and JSON data. By following these best practices, you can ensure that your web application is secure, scalable, and maintainable.

ReactJS Best Practices: Tips and Tricks for Writing Better Code

Arjun Sharma — Wed, 19 Apr 2023 18:48:45 +0000

ReactJS is a popular JavaScript library for building user interfaces. As with any technology, there are certain best practices that can help you write clean, efficient, and maintainable code when working with ReactJS. In this post, we will explore some practical tips and tricks for writing better code in ReactJS.

1. Use functional components and hooks:

React introduced hooks in version 16.8 which allows us to use state and other React features in functional components. Functional components are easier to read and test than class components, so it's a good idea to use them whenever possible. Additionally, functional components can help to reduce the amount of boilerplate code and make it easier to follow best practices such as keeping components small and focused.

2. Keep your components small and focused:

It’s easier to understand, test, and reuse small components that do one thing well. Try to break down your UI into small, reusable components that each have a single responsibility. By breaking down the user interface into small, reusable components, developers can create modular and maintainable code. Additionally, small components are easier to debug and optimize, as their behavior is more predictable and their scope is limited. Overall, using small and focused components can result in cleaner and more efficient code.

3. Use PropTypes for type checking:

PropTypes allow you to specify the types of props that a component should receive. This can help catch errors during development and make your code more readable. If a prop is passed to the component with an incorrect type, a warning will be displayed in the console during development. This can help developers to quickly identify and fix issues. Additionally, by specifying the expected prop types, developers can make their code more readable and easier to understand for others.

4. Write tests:

Writing tests for your components can help you catch errors early and ensure that your code is working as expected. There are several testing libraries available for React, such as Jest and React Testing Library. By writing tests, developers can have confidence that their code is reliable and will function correctly when deployed. Additionally, tests can help to prevent regressions when changes are made to the codebase. By running tests after making changes, developers can quickly identify and fix any issues that may have been introduced. Overall, writing tests can save time and effort in the long run and result in higher quality code.

5. Go through the Documentation at least once:

Going through the documentation at least once is a best practice for any technology, including ReactJS. The documentation provides a comprehensive guide to the features and capabilities of the technology. By reading the documentation, developers can gain a better understanding of how to use ReactJS effectively and avoid common pitfalls. Additionally, the documentation often includes examples and tutorials that can help developers get started quickly. By taking the time to read the documentation, developers can save time and effort in the long run and produce higher quality code.

Hope you gained something useful from this post 👋

Forem: Arjun Sharma

GIVEAWAY + GOOD BOY UPDATE!

Good Boy (v1.0) Release: Bringing a Lovable Desktop Pet to Life

The Development Journey

How I Built My Portfolio Using NextJS and MDX

Table of Contents

Inspiration and Initial Research

Choosing Next.js and MDX

Setting Up the Project

Initialize Next.js Project

Install Dependencies

Setup TailwindCSS

Initialize TailwindCSS:

Configure TailwindCSS:

Add Tailwind Directives:

Configure MDX with next-mdx-remote

Create Blog Page

Challenges with the Next.js App Router

Styling MDX Content

Using TailwindCSS and Tailwind Typography

Implementing Page Views with Redis

Taking a Break

Back with More Experience

Current State and Future Plans

Handling Forms in React

Introduction to Forms

Need for handling forms?

Handling Forms in React

Controlled Components

Handling Multiple Inputs

Uncontrolled Components

Conclusion

How to create a simple Loading Screen in React

Final Result

Creating SVG using Figma

Initial Project Setup

Loading Component

Implementing the Loading Component to the App

Styling the Page

loader-container{

loader path:nth-child(2){

loader path:nth-child(3){

loader path:nth-child(4){

loader path:nth-child(5){

loader path:nth-child(6){

loader path:nth-child(7){

loader path:nth-child(8){

Web Development: An Introduction to Working with REST APIs and JSON Data

Introduction

Table Of Contents

1. What are REST APIs

2. How do REST APIs work?

3. What is JSON data?

4. Parsing JSON data with JavaScript

5. Retrieving data from a REST API

6. Integrating REST APIs into a web application

7. Best Practices for Working with REST APIs and JSON data

8. Conclusion

ReactJS Best Practices: Tips and Tricks for Writing Better Code

1. Use functional components and hooks:

2. Keep your components small and focused:

3. Use PropTypes for type checking:

4. Write tests:

5. Go through the Documentation at least once: