
For the past 4 months, I have been working in a legacy MERN stack project that is a booking system for a sports complex in Malaysia where I developed the website, backend API and an admin panel using AdminJS. It was all functional and allowed rapid iterations for requirements until a new one was added: export data as CSV.

The API and the admin panel are all using CommonJS modules. If you have ever written code using `require()` and `module.exports`, then you have already been using CommonJS. However, this is no longer the standard approach to developing modern Node.js applications and you need to use ESModules. So instead of `require()` and `module.exports`, you need to use `import` and `export` statements. Unfortunately, many npm packages are being migrated to ESModules and this is an issue for legacy projects built with CommonJS. ESModules are backwards compatible with CommonJS but its not the same way around. This has been a big issue in the Node.js ecosystem and it can be quite difficult to migrate large codebases to ESModules.

The admin panel built with AdminJS was in version 6.x which still has support for CommonJS. As I tried to implement the import/export plugin, there was this issue I couldnt resolve at all. I knew this was something to do with the AdminJS version so I upgraded to version 7.x, only to realize that this version dropped support for CommonJS completely. So the only option I had was to use the unmaintained [cjs-to-es6](https://www.npmjs.com/package/cjs-to-es6) package to rewrite all CommonJS code with ESM. Then I saw the bun's announcement: [It got released on Windows!](https://www.youtube.com/watch?v=yXTFOeGly9o).

When I saw the release of bun six months ago, I was not that hyped as I saw a tool similar to this that tried to do pretty much the the same, [Rome](https://github.com/rome/tools), and dissapointed many. But it was different this time. It really is a drop in replacement for Node.js so you can start using it by replacing the npm and node commands in your package.json file. The main feature that captured my interest was the ability to use require and import statements in the same file. This allows you to keep using CommonJS modules and use import statements for any new modules that drop support for it. The only catch I could find so far is that if you decide to mix import and require statements, you cannot use module.exports but instead use export statement. I did exactly that and now I have a fully functional backend with admin panel that won't make your head scratch fighting with CommonJS and ESModules.

Saving legacy Node.js projects with Bun


This is the first time I am writing a birthday blog. I am writing this for my future self.

My birthday was on November 17, a day full of hardship. It was a life lesson for me: "Never consider outsiders as family.".

This birthday happened two weeks after the first death anniversary of my late father. It was a time of mourning and remembering the things he had done for me to be where I am today. It is natural for me to be sad and distance myself from people I know. But the majority of the ones I know did not go through these things.

Back in 2022, 5 hours after he was buried, I heard the news of his death. I called the president of ISS-BD UTM. He had also suffered this, but at a younger age, and knew what I was going through. A lot of students came to my dorm and gave me hope to go through this.

The next day was my presentation for the Programming Techniques 2 course. I did not take leave and attended the presentation as a way to cope with the trauma.

Months pass by, and I get a freelancing job from one of the founding members of SPEEDHOME in January. I did not hesitate to work and built an MVP with React Native and Apollo GraphQL that functioned as a vet-on-Call pet telehealth app. He was very impressed and decided to make me lead the development of this MVP that would later be part of the Furtory superapp. I had two other developers working with me; one of them was doing an internship and learned things very fast.

While doing freelancing, I was studying hard. I did the work on time and finished the programming projects for my team, as well as the project for four of my classmates, with whom I would be most of the time. I couldn't resist their request to help them, as without my help, they would have surely failed due to their lack of knowledge of programming. I gave them a treat at Woodfire JB with my first income from freelancing and gave a birthday surprise to one of the four with the most expensive cake I could find in the shop.

Later that semester, two of them requested that I stay at their apartment as they wanted to take a semester gap in order to apply to German universities, and they went back to their country. I moved in and continued my freelancing job until the third semester, where I lost over USD 1000 simply because I listened to the advice of one of the two, who also does freelancing but already dropped out of university twice. I was advised to take payment outside of Upwork, and I complied. Then the client vanished. My sister was against this from the beginning, but I just didn't listen to her. She took responsibility for me and my mother after my father's passing and is working day and night to run her business. I was too stupid to realize that I have a mother and a sister, both of whom have completed their bachelors, and instead of listening to them, I was following instructions from a failure who had 5 years to finish the degree on time and doesn't have any future plans.

They came back after one semester to give an interview at the German Embassy. The chances of them getting in were very low, and they got rejected simply because they tried to play the system, as told by the officer in the embassy. You are not supposed to be outside of the country you are applying from for 6 months. They did not even get a chance to attend the interview.

They enrolled back at UTM and took only 12 credits to barely pass. They had a lot of time to be outside and opted to do that. While I, with 17 credits, was busy studying and finishing assignments, Although they used to ask me when they hung out, I kept saying no, as I did not want to spend my money like that. It's not black money that I can just throw away and get more without doing a day's worth of honest work.

They later started to play cards, and that was when I decided to get away from them as soon as possible. I knew they would later start gambling, and they did so. People in Malaysia view it as a bad thing, and I did not want to be part of the people you would consider third-class, the ones who don't live their lives with honesty. I did not talk to them that often, not even a greeting. There is another reason why I didn't do that. They also started to distance themselves from me, as I would not be informed when they hung out.

On my birthday, they told me to pack my stuff and leave. I was devastated. I felt very sad that after all I have done for them, they decided to get me out of the house, two weeks after my late father's first death anniversary and on my birthday. Their reason? I was selfish. I accepted my fate and moved out. But it wasn't enough for them, as they are still trying to harass me in the courses I took with them.

A lot has happened in November. They tried their best to make every Friday of the month bad for me. But I have my mother, my aunt, whom I consider my second mother, my uncle, who is serving his country as a police officer, my sister by my side, and most importantly, Allah.


21 - Resilience


For the past couple of months, one thing has worried me quite a lot: the C drive was taking up too much space. I have a 240GB SSD and was left with only 20GB of free space. I was wondering what was taking up so much space.

During that time, I was learning Docker by doing Brian Holt's Complete Intro to Containers course on [FrontendMasters](https://frontendmasters.com/courses/complete-intro-containers/) as well as [Part 12](https://fullstackopen.com/en/part12/introduction_to_containers) on Full Stack Open and blamed the Docker images for taking up so much space, as well as WSL. I was wrong. It was the cache of Yarn and NPM.

Just by running the following commands, I was able to free up 27GB of space:

```javascript
yarn cache clean

npm cache clean --f
```

I couldn't believe my eyes when I saw the amount of space I was able to free up. It is now a habit of mine to run these commands every now and then.

As I am focusing on containerizing everything these days, I find it inconvenient to install anything locally. I have begun to appreciate the under-the-hood workings of Docker. To my understanding, the essence of containers consists merely of a few Linux kernel capabilities duct-taped together. It is merely a way to combine a few Linux features to create isolation.

Got Yarn and NPM installed? Remove cache!


Imagine this: You have completed 3 projects on Upwork worth over USD 3000, where you had to use the tools Next.js, React, Astro, Apollo GraphQL, all of MERN, and Python for web scraping. All of your efforts led to the creation of an MVP that began an entire startup, founded by one of the founding members of SPEEDHOME. You worked so well that you got invited to the head office, did meetings with senior developers, and even with folks at Alicloud. You were the youngest and first employee at the startup and had to manage a team while working on 3 projects at the same time and meeting deadlines.

All of this happened 3 months after my father passed away. I found hope and was able to finally live on my own. I was paying for my living costs, invested in my sister's online business to bring new products, and could finally see a smile on my mother's face after a long time. After the contracts ended, I had to take a long break as I was completely burned out. I bought an electric guitar, and to this date, I believe it is the best investment I ever made. It helped me get back on track, and I started to focus on my studies. 

In the past 5 months, I worked on stuff I didn't know about enough: headless CMSes, Tensorflow, and Hydrogen. I was surprised at how fast you can make graphql and rest APIs with CMS. I spent an entire week fully understanding authentication and authorization with popular tools like NextAuth, Clerk, Firebase and made [this sequence diagram](https://github.com/SadmanYasar/sadman-yasar-blogs/assets/67522140/10f285fc-a715-43fe-a5fe-6e9d31c84e34) while learning Auth0 implementation with Prisma and Graphql. You can learn more [here](https://www.prisma.io/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv). Then my mind shifted to a completely different sector: machine learning. As of today, I am still learning it with Tensorflow and making a smart webcam with a pre-trained model.

I am not afraid of using tools where I have more room to learn, unless it doesn't run on my machine due to hardware limitations or poor documentation. Both happened today for a project I got at Fiverr. This morning, I was asked several questions about what I know. I was asked to setup nestjs with React Native and [did](https://github.com/SadmanYasar/nest-graphql-expo-template) so as it is necessary to make sure the developer can setup the environment on their machine. Keep in mind that nowhere in this conversation was Docker mentioned. I joined an interview and displayed the code to prove that I am able to setup the environment according to the specifications.

Let's assume that the clown we are talking about is named Jeff. So Jeff begins to tell that the code I am displaying is too simple. SIMPLE FOR A TASK THAT WAS UNPAID! Then I was asked to show a more complex project, and I showed it. It was a React Native project with GraphQL that was set up with Typescript and Codegen, enough to get the job done. It still wasn't enough, according to him. His pronunciation was so bad that I was confusing 'Docker' with ['Pothos'](https://en.wikipedia.org/wiki/Pothos_(plant)). I finally understood it and then got access to the source code.

It was a disaster. There were .sh files, but no instructions were provided to set it up, not even on a README.md. The accent was so confusing that I felt like I was listening to two rocks hitting each other. Somehow I understood what he wanted me to do: create a database image, then a container, and then run it. Simple, right? NO. I had to run another .sh file that I wasn't informed of or written on any piece of text provided by him. When I asked for another meeting, he replied, "You are supposed to configure it yourself," and he was busy. I understand that you are busy, but leaving a new developer regardless of experience with poor documentation is one of the worst experiences in this field.

I described the root cause, which was the container stopping after starting it. Instead of a consise soultion, he started to question my experience and started to belittle me. The amount of unprofessionalism and rude behaviour baffled me. Right at that point, I knew this was a red flag and left the project immediately. Although he tried to convince me to stay, I finalised my decision and left.

I have successfully completed my previous contracts simply because the project managers and the CEO himself provided requirements and setup instructions such as deployment guidelines, publishing app to play store etc that was clear to read and to the point.

I sat next to the CEO of Furtory, the company whose MVP I made, and he told me, "It is always 80% planning and 20% coding. Every single step must be well documented and code reviewed." I took his piece of advice to the deepest part of my brain and have always practised this. Since that day, I have promised myself to always think about how the future developer will adapt and maintain my code when I leave an organization.

This experience made me see the dark side of freelancing. I hope no one has to experience this.


My Worst Experience At Fiverr


So I just tried [ChatGPT](https://chat.openai.com/) and I was shocked! It was able to solve all the problems that I gave it, be it a C++ problem or even a full stack [React](https://reactjs.org/) project with [Firebase](https://firebase.google.com). No matter how tough the problems were for me, it was solving it right after I hit enter on my keyboard. Although I saw many being afraid of it taking our jobs in the future, I see it as a way to develop applications way faster than it is humanly possible, currently.

Whenever I face a problem that I cannot solve, I spend about 15-30 minutes to figure it out. If the problem still persists, I go to [Stackoverflow](https://stackoverflow.com/users/14602088/sadman-yasar-sayem) to find out the solution. This is a five step process - 1) Search on browser 2) Click on the stackoverflow link 3) Go through all the possible answers 4) Understand the code 5) Implement it on the codebase.

But imagine this: you can ask an AI system about the problem and it gives you not only a very accurate answer, but also a brief explanation behind it. This is a 2 step process. This is [ChatGPT](https://chat.openai.com/)!

As I was exploring this game changer, I was also learning about [Firebase Authentication integration with NextJS](https://github.com/SadmanYasar/react-auth-learn) by following [developedbyed's](https://www.youtube.com/@developedbyed) tutorial. During that time, I opened up Firebase console, created a new app and copied the credentials on the project. It is a good practice to store the credentials as environment variables. Thus, I began to copy each field on the .env file.

Suddenly, I realised that there must be someone who made a tool to convert Javascript objects to environment variables. Unfortunately, I could not find a working solution. So I knew I had to make one! Let's see how I made it using ChatGPT and Svelte. You can try it [here](https://svelte.dev/repl/187f2c56f22c428fa14c7043906878d3?version=3.55.0)

---
## Initial Setup

To get started, go to Svelte [REPL](https://svelte.dev/repl/hello-world) and name your project. Setup App.svelte as follows:

```html
<script>
</script>

<main>
</main>

<style>
</style>
```

For the application, we need one textarea for pasting the javascript object and another to show the output as .env variables.

Let's now add two textareas in App.svelte:

```javascript
<script>
    let text = '';
    let output = '';
</script>

<main>
    <textarea 
        bind:value={text} 
        placeholder='Enter JS object'>
    </textarea>
    <textarea 
        bind:value={output} 
        placeholder='ENV Output' 
        disabled={true} 
        readonly={false}>
    </textarea>
    <button>
		Convert
	</button>
</main>

<style>
    main{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
    textarea { 
		flex-grow: 1;
		height: 300px;
		padding: 20px;
		margin: 10px;
	}
    button {
		width: 200px;
	}
</style>
```

Here I have added styles for the main as well as for the textareas so that these two are next to each other using <code>flex-direction: column</code>. I also added a button that we will later use to convert the object.

## Using ChatGPT to create the function

Now comes the fun part! On ChatGPT, I asked the following questions:

- algorithm to convert javascript object to .env values
- javascript convert string to object where keys do not have double quotes in string
- regex delete text and everything after it until a character is reached
- how to add double quotes to keys in a string then convert to object in Javascript?
- javascript convert each key in an object to have underscore after each capital letter then convert to uppercase

Using the answers provided by ChatGPT, I was able to come up with a function that did the conversion: 

```
const objectToEnvString = () => {
		try {
			errorMsg = '';
			output = '';
			// adds double quotes to each key
			// removes semicolon
			const str = text.trim()
						.replace(/([\{,]\s*)([A-Za-z_$][A-Za-z_$0-9]*)\s*:/g, '$1"$2":')
                        .replace(/;/g, '');
			const obj = JSON.parse(str);
			
			// adds underscore after each capital letter
			// converts each key to uppercase
			const formattedObj = Object.keys(obj).reduce((acc, key) => {
				const modifiedKey = key.replace(/([A-Z])/g, '_$1').toUpperCase();
				acc[modifiedKey] = obj[key];
				return acc;
			}, {});
			
			for (const [key, value] of Object.entries(formattedObj)) {
				output += `${key}=${typeof value === 'string' ? value : JSON.stringify(value)} \n`;
			}
		} catch (error) {
			errorMsg='Invalid Object';
		}
	}
```
I asked ChatGPT to explain this code. Here is what it said:
- The function starts by defining an empty string called errorMsg and another empty string called output.
- It then uses the trim and replace methods to modify the input string (stored in the variable text). The trim method removes leading and trailing white spaces from the string, and the replace method adds double quotes to each key and removes semicolons from the string.
- The modified string is then parsed into a JavaScript object using the JSON.parse method.
- The object is then transformed into a new object called formattedObj using the Object.keys and reduce methods. The Object.keys method returns an array of the object's keys, and the reduce method iterates over the array and modifies the keys by adding an underscore after each capital letter and converting them to uppercase.
- Finally, the function uses a for-of loop to iterate over the key-value pairs of the formattedObj object and build a string in the format of an environment variable. The string is stored in the output variable and returned by the function.

Well, this explained it all. Without ChatGPT, it would have taken me quite a while to come up with this function.

Thoughts on ChatGPT/ how to make a JS object to .env variables converter in Svelte


After 3 months of waiting, I finally attended my first lecture at UTM. Even though the classes started at 8am MYT, I had to wake up at 6am due to time zone difference. You may wonder why time zone can be an issue if my university is in Malaysia. Well, the whole semester was in online mode due to the pandemic and travel restrictions. It was not so difficult to adapt, after all, as during my gap year after finishing my ALevels, I was an online math tutor for OLevels.
<br />
As time went by, I got to meet students from many different countries like UK, Egypt, Yemen, Sudan, Saudi Arabia, China and of course, Malaysia. We worked together in group projects, prepared slides for presentation, designed an elevator system using Deeds software for our Digital Logic course. I learned to use Matlab in our Linear Algebra course. The language is syntactically similar to Python but the best feature I enjoyed was how easy it is to write matrices and assign it to a variable. For other languages like C++, it can get cumbersome to use multidimentional arrays as matrices. The programming course was the easiest for me as I already knew the concepts that were taught.
<br />
Overall, I will say the experience was great. The professors provided guidance whenever we got stuck in a problem. The students were very friendly and we helped each other by doing group discussions to prepare well for examinations.
<br />
I got my results at the beginning of this August. With a CGPA of 3.89, I am now in the Dean's list. I hope I can keep this result in the next semester.


Sadman Yasar Sayem

Blog