DEV Community: Akbar Ali

Translate apps in one command

Akbar Ali — Wed, 13 Aug 2025 06:04:17 +0000

Check out the package first:
@pulimoodan/localiser

Features

Translate i18n locales with one command
Translate only required languages (only the ones we changed)
Translate only the required namespaces (yeah, same as above: only the ones we changed)
Translate any language, with any iso codes: like pt or pt-BR (because, we're using AI. Not a flex btw)

Concerns to be addressed

Optimise the Open AI requests with the only the required keys, instead of whole json file
An init command to generate the project configuration
Doesn't support different types of folder structures, only: lang/namespace.json
Configure different types of models

Contribute (or detract)

If you've got an idea to improve or play around with this:

Fork the repo
Work your magic, cook well
Slam a PR
And I will think about it (kidding, we need those contributions)

Link to GitHub repo: Localiser

Code pollution

Akbar Ali — Sun, 03 Aug 2025 06:04:11 +0000

The list of PRs to be reviewed, getting long and long each day in numbers.

The dashboard, looking at me with that weird devil laugh every time I open the Github.

It's not me, being lazy and stubborn to keep reviewing everything consistently (maybe).

It's some dry dreaded lines of waste, of code changes being written in those files that make the stubborn I am.

The AI slop, waiting on those changes to get refuge in our codebases are becoming a nightmare day by day.

The Cause

Developers being lazy to write code. They're not here for passion (or they lost it), just for money.
They don't care about what they (or the agent) write, they're just focused on completing the task due to work pressure.
They're not good at this, maybe they're some product managers who focus on the app but not technology under the hood.
The FOMO of using AI to get tasks move quickly and wasting time (most of the medias are responsible for this, the me before a few months would assure this).
People being developers instead of poets (The art of beautiful code is long gone).

The Solution

Review PRs effectively (I used to rewrite some my own, instead of educating the PR author)
Talk to your teammates and motivate them (there had been one of my friends who quoted about a fellow's code: I got goosebumps reading it)
As a developer, think about a problem before asking it to the agent. Share your thoughts and get feedback.
Try to use AI for automation, not to be dumb day by day (The ability to think will fade away, aware of that).
Proofread the code written by the agent, and instruct how to make it well written.
Sometimes writing with your own hands feels like greatness being achieved (don't listen to the FOMO creators).
Learn to code or learn to prompt (be good at it, sometimes it is easier to express in code than in natural language).

I could have become a project manager 20 years ago if I didn’t care to write code myself and I just wanted outcomes.
-- DHH

Common JS library import in ES Module

Akbar Ali — Mon, 21 Jul 2025 07:15:13 +0000

Spent a lot of time debugging this.

I was using react color library from NPM in a project and my project was in ES module scope.

Problem

import reactColor from "react-color";

TypeError: Cannot read properties of undefined (reading 'displayName')

Fix

import * as reactColor from "react-color";

const { SketchPicker } = reactColor;

Prisma: Could not parse schema engine response

Akbar Ali — Thu, 19 Dec 2024 08:13:48 +0000

Problem

Recently encountered this error while deploying our app to production:

Error: Could not parse schema engine response: SyntaxError: Unexpected token E in JSON at position 0

There is no more explanation why this occurred, just this line. In the recent merge commit we had only changed a couple of locale keywords, that's it.

Figuring out

Searched all over the internet and found nothing.

Then, I noticed a warning a couple lines of above the error, like this:

prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to "openssl-1.1.x".

I searched about this on GitHub and found this:
Prisma fails to find openssl 3.0.x on new bookworm

I realised that for some reasons, the new version of the alpine docker image I was using doesn't come with the openssl package - Which was required for Prisma engine.

Solution

The issue discussion I shared above said that use node version 18.5.something and we can temporarily resolve this or use a different docker image.

But, I don't have to use a different version of node and make conflicts to other packages.

So, I should install the package manually.

This is the docker image I was using:

FROM node:18-alpine

I added these lines to it:

# install openssl
RUN apk update && apk upgrade
RUN apk add --no-cache openssl

And, that solved the problem.

Importing from GitLab to GitHub

Akbar Ali — Fri, 17 May 2024 07:19:17 +0000

In GitLab:

Profile -> Preferences -> Access tokens -> Add new token
Name it, select all permission that apply, click create.
Now you get a token, copy it.

In GitHub

Create new repository.
On the create page, right below the heading there is a text saying import a repository.
Click it, copy the repo url from Gitlab and paste it there.
Add your gitlab username and the access token.
Name the repository.
Click begin import.
It will take some time, sit tight.

Object memory reference in JS

Akbar Ali — Tue, 12 Mar 2024 20:05:52 +0000

const person1 = {
    name: "Alex",
    address: "Toronto"
}

const person2 = person1;
person2.name = "John";

console.log(person1);

What would be the output of the above code?

Does that look like this:

{
    name: "Alex",
    address: "Toronto"
}

You're wrong. It would look like this:

{
    name: "John",
    address: "Toronto"
}

Yes, that's the correct output. But that was not what we ought to do. We need the name of the person1 to stay like whatever it was before. We changed the name of person2.

Then, where did it go wrong?

The problem is with the JavaScript's object memory reference. We only assigned the person1 variable to the person2 variable. Javascript keeps the memory reference of the variable in the place for both of them. That's why when we changed the name of person2, it affected person1.

How to overcome this bug?

Even, I had spent a full day debugging a commercial app and banged my keyboards due to frustration to find out it's just a memory reference bug.

Here's a solution:
Spread operator

const person1 = {
    name: "Alex",
    address: "Toronto"
}

const person2 = {...person1};
person2.name = "John";

console.log(person1);

Here, we are spreading the person1 variable to create a new one. Now it would work fine as we expected. But, it has an exception.

What if our code was like this:

const person1 = {
    name: {
        first: "Alex",
        last: "Telles"
    },
    address: "Toronto"
}

const person2 = {...person1};
person2.name.first = "John";

console.log(person1);

This is our expected output:

{
    name: {
        first: "Alex",
        last: "Telles"
    },
    address: "Toronto"
}

But, what we get:

{
    name: {
        first: "John",
        last: "Telles"
    },
    address: "Toronto"
}

The person1 also got changed even if we used spread operation to create a new object.

This is because, the spread operator only affects the first level properties and it won't clone the deep level key values. So, the first in the name property still has the memory reference to its parent.

Here is the solution to deep clone JS objects:

JSON stringify

const person2 = JSON.parse(JSON.stringify(person1));

Converting the object to string and then into JSON resolves the problem.

But still, we have a problem.

function test() { console.log("This is a Test") }

const person1 = {
  name: {
    first: "Alex",
    last: "Telles"
  },
  f: test,
  address: "Toronto"
}
person1.f()

const person2 = JSON.parse(JSON.stringify(person1));

person2.f()

This code will return an error saying TypeError: person2.f is not a function. This is because, we had a memory reference to the function in the parent object and when we converted it into string for cloning, that reference got lost.

thanks to @efpage for the feedback.

So, there are some ways to overcome this:

Using loadash

const _ = require('lodash');

function test() { console.log("This is a Test") }

const person1 = {
  name: {
    first: "Alex",
    last: "Telles"
  },
  f: test,
  address: "XYZ"
}

const person2 = _.cloneDeep(person1);
person2.f();

lodash library has a cloneDeep function which will help to deep clone object with all memory reference.

Structured clone function

const person2 = structuredClone(person1);

The structuredClone function will be available in the new version of JavaScript and it will deep copy the parent object.

Hope this articles helped you. Drop your feedbacks in comments.

This or that?

Akbar Ali — Wed, 06 Dec 2023 09:07:49 +0000

Have you ever ended up in a situation where you have many images of something but hard to choose the perfect one?

Like, if we have two images, it's easy to choose the best one. But when it's 5 or 10 or 50 images, the process becomes more difficult.

The solution is to take the first two pictures, find the best one. Now take the third picture and cross check with the best one and it continues.

I made a simple web app which helps to do this. Simply, we upload a bunch of images and click start. The program shows us a pair of images and we have to choose the best one. It repeats until the best one finally being found.

Dot-poll is a simple web app with basic html and js which delivers this solution. See the live version here: Demo

There is a lot of features we can add to this app and I am looking for developers who are interested working on this. Leave a comment or a pull request if you find this worth a try.

An alternative for Render?

Akbar Ali — Tue, 05 Dec 2023 09:17:32 +0000

I have been using Render for hosting my side projects. It's flawless, easy to connect GitHub projects and deploy with just a click.

I switched to render because I was fed up with the hard and weird deployment process of Heroku. Render has some amazing features and easy to use.

But recently, I faced this problem of services getting suspended if they are in free tier. Somehow, it's hard to afford some side projects in a paid plan. I share my side projects with my friends and they say it's not loading. I ask them to wait for couple of minutes and they usually stop trying after some time.

Currently, I am searching for a better alternative which provide full time serving of the web app we deploy. I really liked the workflow of Render and hope to find something similar.

A platform to share jokes

Akbar Ali — Mon, 04 Dec 2023 09:00:39 +0000

I was totally inspired by the dev.to and twitter platforms due to their engagements and user interactions.

So, sharing jokes and reacting to them is a pretty entertaining medium and thought about building a platform for that.

I am planning to add more interactive features to the app and expecting more public opinions.

Feel free to try the app here: Chali App and share your feedbacks.

View the source code if you are interested to know how I built it: GitHub

Also, I am trying to work on the android and IOS apps.

Anyone using Fiverr?

Akbar Ali — Wed, 19 Jul 2023 09:03:06 +0000

Is there anyone working with Fiverr as a freelance developer or designer. I used to be a freelancer at Fiverrr before I ended up in a job. Only worked with a bunch of clients and hard some bad and good experiences.

Share your experience with Fiverr or other freelancing platforms.

A Live Auction Market

Akbar Ali — Tue, 18 Jul 2023 14:46:35 +0000

Introduction

What if there is an online platform where only one auction takes place at a time and the users can bid for the product in live. You have to wait in the queue for placing your product for the auction.

The queue strategy

Of course, everyone will think like why the queue in this modern technology era where you can handle each auction separately in a server. But, here comes the catch. It's hard to get your product noticed while submitting for auction in a platform like eBay or other web apps.
Our app makes one auction live at the home page and others have to wait. So, every users can engage in a certain auction at a time.

UX design

There should be only one page for the app where an auction would be going live. A button in some corner will let you create your own auction and after creation, it will show the position in the queue. Also the app will show the number of users online.

There would be a notification system through email or other contact medium which will let the user know if their auction is about to go live.

User credentials

We have to collect user credentials like name, age, and contact details to let them enrolled in the auction.

Share you ideas

Share your ideas to develop this insight and let me know in the comments if you are interested in this project.

Thanks.

Nest and Next JS configured together for full stack applications.

Akbar Ali — Thu, 01 Sep 2022 07:30:33 +0000

Do you love Typescript ?
Do you love Nest JS ?
Do you love Next JS ?
Do you love Prisma ?

The problem

Sometimes we need to work with all of this in a full stack application. But we always configure and build our frontend and backend separately. Then we connect the using APIs.

But it's hard to configure Nest and Next JS together since it takes time.

The solution

What if I told you that I made a boiler plate configured with Typescript, Nest JS, Prisma and Next JS together. We don't have to start our client and server separately and we don't have to worry about the build process. It's only a single command :

yarn start:dev
# or
yarn start

The process

I faced an issue like this in the last week and I surfed through the GitHub all the way which ended up finding nothing useful. Well I love these frameworks and was trying to configure Nestand Nexttogether reading different articles those I found at some corners of the internet.

The result

Finally I completed the boiler plate and named it TNPN (Typescript, Nest JS, Prisma, Next JS). I found it helpful for many projects where I don't want to configure everything from scratch.

Here is the GitHub repo link : TNPN

The conclusion

Hope you find this helpful. Don't forget to leave your comments and contribute to the project if you wish.