DEV Community: Yatrik Patel

Looking for some feedback on this Avatar-letter project I thought of sharing months ago

Yatrik Patel — Fri, 02 Apr 2021 23:38:05 +0000

I hesitated in sharing this and kept it a secret for a few months now for the following reasons:

Is this really going to help someone?
Is this worth the time and money?

When I first created this, I was super excited and thought I would make it open source and allow anyone to add their own avatar-letter sets to it. I had even put together the article below and was ready to share it, but after answering the questions above, I chose not to. But I cannot contain my thoughts and need to open up. Also, I want to know everyone else's thoughts about this.

So please just provide some feedback about this project and I would greatly appreciate it. And before you have to mention, let me share that I am already aware of many other avatar providers or libraries that exist.
Finally, please also share how to go about such ideas in the future. Should I keep thinking over and over again about what I am sharing or should I just share and get feedback for the pure joy of it?

What follows below is my article as it was originally written months ago (verbatim)

Wanting To Open Source But Need Guidance

Over the last 2-3 years, in my free time, I've been learning web and mobile development online. During that time, I've created several projects that live either on my computer, online, or both. These include projects made to solve a problem I encountered while working (for both past and current employers), tutorials I've followed while learning something new, and projects I'm passionate about. However, I've never really created a service or an API that is open to the public for use, and/or haven't created any open source projects myself. So, I wanted to give this a shot.

How This Idea Originated?

I originally came across this idea when working on a math project that I'm building. It involved getting a user picture or avatar to be displayed on the screen. To do this, I had several options to choose from like Avatars from Material UI, Chakra, and so on. However, I did not want to download any extra packages to my project. I also had the option to use placeholder images provided by sites like Robohash, but I've had problems with such services in the past and did not want to rely on them for the entirety of my project. This time, I wanted something I had more control over. So I decided to create my own Robohash-like site that returns images or avatars upon simply entering the proper URL in the image tag's "src" attribute or in the browser. I did not want the API to return images of avatars but instead images of "avatar-letters" or alphabets.

Here's an example image of what will be returned by set1 of avatar-letter:

Why I Felt This Was Needed?

I felt like this sort of a project was needed (maybe) because all the component libraries or avatars I've encountered typically return an image that is made using some sort of flat and simple typeface, font, or the like and NOT a stylish, 3D-ish font instead. What I wanted to return was an image containing alphabets that looked out of this world.

Oh wow, while typing this article, I have already come across so many new ideas and possibilities to extend this project.

Anyways, here are images of what most such avatar-letter libraries, sites, etc. return:

What I Have So Far?

The following is what I have, and let me just say that I have not used any fonts so far in creating the avatar-letter images that are being returned by this API. Instead, I chose some cool-looking alphabet images that I found for free on Freepik. I had to edit the images from Freepik further using PowerPoint and also using the Sharp library. The images weren't as editable as I wanted, so I just went with the best I could get.

Here's an example image of what will be returned by set2 of avatar-letter:

The following is a breakdown of what the avatar-letter API expects:

What I Need Help On?

I am wondering how to go about this project so I can make it available for anyone to contribute to while ensuring that I get the final say regarding what image sets are added to this project. Does anyone have experience in creating such services or projects?

Problems I Encountered

The biggest problem I encountered was being unable to have full control over editing the images and all their layers since I relied on the free images found on the internet.

Suggestions/Feedback

I am open to any suggestions, comments, feedback that you can provide on this project and how it can be improved.

Helpful Links

You can find the avatar-letter site at the following link:
Avatar-letter

Credits

I owe it to the following sites, people, authors, etc. for providing their resources for free:

Blue arrow was downloaded from Pixabay and created by Clker-Free-Vector-Images.
The alphabet images were downloaded from my site but were originally found on Freepik at the following links:

Having fun creating Ugly Christmas Sweaters with SVGs this Winter

Yatrik Patel — Mon, 28 Dec 2020 20:25:07 +0000

I have been wanting to share this for a while now. I must do it now. Waiting longer or waiting till it is nearly perfect might be a mistake, especially in this tech industry anyways. So let me just go ahead and share what I currently have via this CodePen. There is probably a lot that can be improved but hey, I am just doing this for fun!

Below is a short summary of my journey with these sweaters so far.

How I started

I started creating these using polygons, and no curves at all. So I had something crappy at first, like the following:

What I had after fooling with Quadratic Curves

I needed some curved lines and came across Quadratic Curves and started to modify the code accordingly. Here is what I had then:

What I have after incorporating SVG patterns

Later, I realized that I could use SVG patterns to draw the zigzag lines as a background to fill the entire sweater instead. So here is what I have now:

Conclusion

Using Quadratic Curves improved the quality of my canvas drawing a ton. I also realized that it is possible to use SVG patterns to create the zigzag background I was hoping to create. It was much harder or maybe inefficient with the "for-loops" I was originally using. Either ways, I have left both of them in there to fool with later on.

I hope you enjoy recreating some sweaters and keep doing so until you find the one you like. Feel free to share a picture of the one it made for you if you'd like 😉. At last, Stay Warm, Happy Holidays, and Happy New Year 🎉!

Credits

Automating Zoom Participation: From Manual Excel Grunt Work to Web App

Yatrik Patel — Thu, 03 Dec 2020 21:22:02 +0000

Disclaimer: This article was updated with the help of Gemini 3 Pro, an AI writing assistant from Google.

As an educator, tracking student participation is vital for engagement and grading, but the process can be incredibly tedious. This project was born out of the need to automate the manual grunt work of counting Zoom chat messages, allowing teachers to focus on teaching rather than administrative tasks.

The Context: Participation as a Grade

This application was built for a specific use case: a remote classroom where participation was graded based on chat activity.

As a remote teacher teaching children over Zoom, I set a requirement that participation via chat messages counted towards their participation grade. While answering math questions was the primary way to participate, a couple of greeting messages (like "Good morning") were acceptable as well. This meant every single message needed to be tracked to ensure students received the credit they earned.

The Challenge: Manual Tracking Overload

To count participation manually, I had to rely on Zoom's text logs. At the time I started, Zoom saved chat messages in a specific format:

The Excel Nightmare

My previous workflow involved copying the text into an Excel file, sorting it, and using formulas to count messages.

Copy text from the Zoom log.
Paste into Excel.
Sort column to group messages by sender ("From Person A...").
Use the countA function to tally participation.

For a single meeting, this took about 5 minutes. It was manageable, but inefficient.

Accounting for Weekly Participation

The real problem arose when trying to track participation over a full week or for multiple classes. If you have 5 classes a week, that 5-minute task turns into 25-35 minutes of mindless copy-pasting and sorting. As the number of students or meetings increases, the manual overhead becomes unsustainable.

Teachers simply don't have that kind of time to waste.

The Solution: Automating with JavaScript

I built this web app to reduce that weekly workload from 30+ minutes to just a few seconds. The app parses the Zoom chat logs, aggregates the data, and presents a clear count of participation for each student.

Key Benefits:

Speed: Instant results regardless of class size.
Reliability: Eliminates human error in counting.
Privacy: All processing happens locally in your browser. No data is sent to any external server.
Workflow: Frees up educators to focus on student engagement.

Live Demo | GitHub Repository

Technical Deep Dive: Parsing Zoom Logs

The core of the application is a string parser that normalizes the chat log formats.

Handling Zoom Format Changes

Zoom updated their chat log format during the development of this tool, which broke the initial version. The new format looks like this:

Whether the message is public or private, the relevant metadata is contained in the string segment starting with "From" and ending with a colon :.

Public: hh:mm:ss From Sender : message
Private: hh:mm:ss From Sender to Receiver(Direct Message) : message

The Parsing Logic

The application splits the log file by newlines and iterates through each line to extract the sender's information. Here is a snippet of the core logic from chatParser.ts:

export const hasCertainPattern = (data: string): string[] => {
  const result = splitByLine(data);
  const someArray: string[] = [];

  const fromIndex = result[0]?.indexOf("From") ?? -1;

  for (let i = 0; i < result.length; i++) {
    // Extract the substring starting from "From"
    let sub = result[i].substring(fromIndex);
    // Cut off at the colon to get just the meta info (e.g. "From John Doe to Host")
    sub = sub.substring(0, sub.indexOf(":"));

    if (sub !== "") {
      someArray.push(sub);
    }
  }

  return someArray;
};

This extracted array is then used to create a frequency map ({ 'From Student A': 5, ... }) which powers the final results table.

Sorting and Filtering

Beyond simple counting, the application offers sorting and filtering to make the data more usable.

Sorting by Participation

The primary goal is to see who participated the most. We can sort the frequency map by count in descending order:

/**
 * Converts word map to sorted array of results
 * Sorts by count in descending order
 */
export const sortByCount = (
  wordsMap: Record<string, number>
): ParticipantResult[] => {
  const finalWordsArray: ParticipantResult[] = Object.keys(wordsMap).map(
    (key) => ({
      name: key,
      total: wordsMap[key]
    })
  );

  finalWordsArray.sort((a, b) => b.total - a.total);

  return finalWordsArray;
};

Sorting Alphabetically

To find specific students easily, results can be sorted alphabetically. This uses a dynamic sort function:

/**
 * Dynamically sorts array by property
 * Use "-property" prefix to sort in reverse order
 */
export const dynamicSort = (property: string) => {
  let sortOrder = 1;
  let sortProperty = property;

  if (property[0] === "-") {
    sortOrder = -1;
    sortProperty = property.substring(1);
  }

  return (a: ParticipantResult, b: ParticipantResult) => {
    if (sortOrder === -1) {
      return b[sortProperty as keyof ParticipantResult]
        .toString()
        .localeCompare(a[sortProperty as keyof ParticipantResult].toString());
    } else {
      return a[sortProperty as keyof ParticipantResult]
        .toString()
        .localeCompare(b[sortProperty as keyof ParticipantResult].toString());
    }
  };
};

Filtering Host Messages

Sometimes, students message the host privately. We can filter for these messages specifically to see who is engaging directly:

  // this function will filter the messages and return only the ones sent to the host only
  const filterMessagesToHostOnly = () => {
    const data = readData();
    if (data) {
      const filteredArray = data.filter(
        (el) =>
          el.name.includes(`to  ${hostname}(Direct Message)`) ||
          el.name.includes(`to  ${hostname}(Privately)`)
      );
      const alphabetized = filteredArray.sort(dynamicSort("name"));
      updateSortedArray(alphabetized);
    }
  };

Adapting to Change

Software that relies on third-party output formats (like Zoom logs) is inherently fragile. When Zoom changed their output format, my app initially failed. Debugging this required analyzing the new text structure and updating the parsing logic to handle both "Direct Message" and standard formats.

Updates

The application was last verified to be in working condition in November 2025.

Credits

Author: Yatrik Patel
Created: November 4, 2020
Last Updated: December 30, 2025
Editorial Assistance: Gemini 3 Pro (for helping me update this article)
Images:
- Diagrams made with Excalidraw
- Chris Montgomery on Unsplash
- No-longer-here on Pixabay