DEV Community: Dakshim Chhabra

From "Under Promise, Over Deliver" to thinking in systems

Dakshim Chhabra — Thu, 26 Mar 2026 10:42:43 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

Back in 2019, Being an avid reader, I used to brag about having 120+ books in my mini library.

Yes a mini library, a quit, sacred space for an introvert me, It was my den; the place where I used to declutter my mind, recharge, and think.

Years of Chaos

Then came the year 2020, during Covid Lockdown, chaos happened, and there was uncertainty all around.

Amid fears of layoffs and ambiguity of working from home, collaborating remotely, I was promoted to lead a team of 4 entry-level developers.

I threw myself into it, by upskilling the team in modern web technologies and remote collaboration tools.

Word got out, People from other teams who wanted to learn JavaScript also joined my daily after-office classes.

But then, reality bit. My organization underwent a massive restructuring, and a team of 40 got downsized to 22; I survived, but that survival came with a hidden tax.

Cost of Survival

The survival comes with a cost, a cost where one event led to another,
where imposter syndrome entered, along with people pleasing.

As the only person left with full-stack experience in React and Laravel, my plate didn't just fill up; it overflowed. I was suddenly tasked with assisting Business Development to convert leads.

As a first-timer, I followed what everyone says, the standard industry mantra:

Under-promise and over-deliver.

What they don't tell you is that this advice comes with a "terms and conditions" clause.

When you over-deliver repeatedly to the same person, you aren't being a hero; you're setting a dangerous new baseline. You become taken for granted.

In my case, over-delivering led to massive scope creep. The team I was supposed to lead started feeling the heat.

I lost the mental space required to lead effectively.

The Breaking Point

The true cost of this "over-delivery" didn't just impact my code; it taxed my family.

In August 2023, my father suffered his first brain stroke. It was a terrifying, grounding moment that laid bare the fragility of my "hustle."

While I was busy over-delivering to clients who took me for granted, I was under-delivering to the people who actually mattered.

I had lost the mental and emotional space required to be a lead at work, but more importantly, to be a son at home.

The weight of being constantly "on" meant I was physically present but mentally absent when my family needed me most.

Reclaiming the Bookshelf

Today, I'm in the process of reclaiming my time and my mental "den." It's a slow build back to that 2019 peace of mind, and I'm doing it through a new set of operating principles:

Setting Hard Boundaries: My time is no longer an open-ended resource.
The Art of 'No': Learning that saying "no" to a feature is often saying "yes" to quality and family.
Promising Rightly: Moving away from the "over-deliver" trap and toward accurate, sustainable expectations.
Killing the Hype: Eliminating buzzwords and stopping the chase for every new shiny framework.
Rigid Scoping: Evaluating project boundaries with a critical eye before the first line of code is written.
Fundamentals First: Building strategies and systems that are reliable, not just fast.

My mini-library is still there. Now, I'm finally making sure I have the headspace to actually read the books in it and the time to be there for the people who hold my world together.

While setting up a Next.js project today, I noticed AGENTS & CLAUDE markdown files pointing to node_modules/next/dist/docs/. Fascinating how the ecosystem evolving from monolithic to micro frontends. and toward more integrated developer experiences.

Dakshim Chhabra — Sat, 21 Mar 2026 20:04:44 +0000

Observe, Ally and Grow : WeCoded Formula using SpinWheel

Dakshim Chhabra — Fri, 20 Mar 2026 06:01:29 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Ever wondered if our life, the situations we are in, Is it a lucky draw? Is it truly random, or is there some weighted randomness?

My submission is a "Spin Wheel | Wheel of Fortune" that celebrates the randomness, the diversity, and reminds us that:

Inclusiveness is not random. Gender Equity is not random. But a choice, a choice of actions.

The three core actions are:

Look Back and Observe: Observe and study the Legends, find the roadmap for innovation, the courage to raise our voice, and the fire to pioneer a revolution.

Look Out and act as an Ally: Do everything possible to uplift capable yet underrepresented peers, making sure the strongest ideas rise above the loudest voices.

Look In and Grow: When we encounter hurdles, we must draw on inner strength and a growth mindset; reminding ourselves that we belong here and refusing to surrender to the environment..

The Project: The Triple-Mode SpinWheel

To celebrate the randomness in diversity and the deliberated action, the choice of inclusion, I have created an interactive experience that allows you to "Observe, Ally and Grow".

How it works:

Use the central menu to toggle between three distinct modes of empowerment:

Observe Mode: Discover the 10 voices, from Ada Lovelace to modern-day pioneers, who shattered the glass ceiling and shaped the history of Tech.

Ally Mode: Step into a leadership role. This mode provides 10 actionable "micro-missions" to fight for diversity and equity within your organization.

Grow Mode: A toolkit for the soul. When imposter syndrome strikes, spin for 10 powerful affirmations designed to help you break free from the boxes the world tries to put you in.

"Unity in Diversity" Background

I want a background that reflects the unity in diversity of tech. A visual reminder of how people from every corner come together to make the world a better place.

First Thought, why not use Avatars?
Second Thought, Why not reuse Avataaars Sketch Library by Pablo Stanley that I have used earlier in TippyTippy Avatar Generator.

Initially, I imagined a scrolling background of randomly generated avatars. To keep things optimized, I settled on 16 diverse avatars displayed at once.

Still, in my pipeline is a more ambitious idea, a true random diversity background generator, continuously creating new faces to reflect the endless variety of people shaping tech.

Easter Egg

In mobile, I have included gesture support; you can switch between the modes by swiping left or right.

Show us your Art

Demo Url : https://wecoded-2026-spinwheel.netlify.app/

Inspiration

While creating a SpinWheel project this week, I was in deep thought. Is our life, the situation we are in, a lucky draw? Is it predictable as Math.random(), or is it truly random as crypto.getRandomValues()? Or is there a weighted randomness that decides our destiny?

I concluded that the randomness in the destiny is not truly random, but is weighted one. That cumulative weight is directly proportional to the action we take consciously or unconsciously.

Why not re-program the wheel of life by this simple motto: "We observe, we help, and we grow".

Why not add a background representing how endless people, in tech daily contributing to make the industry a better place.

My Code

Code Repository

Building a Spin Wheel - Part 2, Weighted Randomness: Cumulative Method

Dakshim Chhabra — Tue, 17 Mar 2026 13:23:53 +0000

In the last part, you have seen how we favored crypto.getRandomValues() than Math.random(). In this part, we'll be building a logic to provide us with weighted randomness using crypto.getRandomValues(),

For this, I started my logic by using Uint8Array, but during research for a perfect algorithm, I came across a term known as aliasing.

Though, I am still testing and researching on aliasing, but some discussions suggest that using low sample values while calculating the random value will impact the ability of the solution to be truly random.

Therefore, I proceeded with using Uint32Array

First, we'll be calculating a random value:

const cryptoArray = new Uint32Array(1);
window.crypto.getRandomValues(cryptoArray);
const randomFloat = cryptoArray[0] / (2**32);

Here, for the sake of optimization, we can precalculate 2*32 to be 4294967296 or create a constant that will hold the value of 2*32.

Second, let's define the items as an array of JSON:

const slices = [
  { id: 1, label: "Grand Prize", weight: 5 },
  { id: 2, label: "Better Luck Next Time", weight: 40 },
  { id: 3, label: "5% Discount", weight: 25 },
  { id: 4, label: "Free Shipping", weight: 30 }
];

Third, we'll be calculating the total weight of all the items:

const totalWeight = slices.reduce((sum, i) => sum + i.weight, 0);

To decide the winner, we are going to use the cumulative method.

How does it work?

Imagine we have a ruler or line of 100 units, where each item occupies its own length, respectively, of its weight.

Starting from 0, if the weight of the item is 5, then it will take 5 units of length on the scale, and its starting point and ending point become 0-5.

For the next item, we have a weight of 40; we'll be adding the same to the ending point of the previous item. The next item's starting point and ending point will become 5-45, and so on, as defined below:

0-5 -> Grand Prize,
5-45 -> Better Luck Next Time,
45-70 -> 5% Discount,
70-100 -> Free Shipping.

Now, we'll calculate a targetValue by multiplying the randomFloat (from First Step) by the totalWeight (from the third step), so that it comes between 0 and 100.

const targetValue = randomFloat * totalWeight;

If randomFloat comes out to be 0.42 and totalWeight to be 100, then our targetValue would be 42. Now we'll check where the 42 lies on the scale. It lies between 5-45, i.e., "Better Luck Next Time".

let cumulativeWeight = 0;
let winner = null;
let startWeight = 0;

for (const item of items) {
    startWeight = cumulativeWeight;
    cumulativeWeight += item.weight;

    if (targetValue <= cumulativeWeight) {
      winner = item;
      break;
    }
 }

What is Next?

In the next parts, I'll be converting this logic to canvas based SpinWheel, and then we'll be creating a visual builder to customize the SpinWheel according to the requirements.

Hopefully, if time allows, we'll be converting the same to the React Library, Shopify App and Wordpress Plugin.

Building a Spin Wheel - Part 1, Random Digits in Javascript: Crypto.getRandomValues()

Dakshim Chhabra — Sun, 15 Mar 2026 12:26:48 +0000

When building a Lucky draw system, whether it's a Jackpot machine, spin wheel, or roulette, the key ingredient is unpredictable randomness.

Most developers are naturally inclined to use Math.random(). Why? Awareness

It is one of the methods that is taught in every JavaScript class.
Many of us are not aware that it is not truly random and is predictable.

It's based on a pseudo‑random number generator (like xorshift128+), which means its sequence can be predicted. That's why secure systems, such as token generators, hashing methods, OTPs avoid it.

While creating a SpinWheel last week, I hit the same challenge, If not Math.random(), then how to get real randomness?

The answer : `window.crypto.getRandomValues()`

This API provides cryptographically strong random values, far more secure than Math.random(). It takes a typed array as input and returns a new array of the same type and length, filled with unpredictable numbers.

Usage

Getting the random values

let trulyRandom = new Uint8Array([0]); 
window.crypto.getRandomValues(trulyRandom) 
console.log(trulyRandom[0])

Getting random values from a set of values


// Example: Selecting from an array
let mySet = ['Try Again', '20% Discount', '30% Discount', '40% Discount', '50% Discount'];
let trulyRandomFromSet = new Uint8Array(1);
window.crypto.getRandomValues(trulyRandomFromSet);

// Map to index (0-4)
let randomIndex = trulyRandomFromSet[0] % mySet.length;
console.log(mySet[randomIndex])

If you're building anything where fairness or security matters, skip Math.random(), crypto is your friend.

Next Challenge: Weighted Outcomes

To align the SpinWheel with campaign goals, equal probability isn't enough.

I wanted 50% of users to land on "Try Again" and the other 50% on "Discount."

There are two ways to achieve this:

Add more "Try Again" slots to the wheel.
Or, implement weighted randomness in the logic, so results follow the desired distribution.

If I choose to add more "Try Again",

then

What about the weightage of other outcomes?
What if I want that '50% Discount' should be reserved for only 1% of users?

It will not be future compatible solution.

In the next part, let's discuss how I can build a weighted randomness logic.

If you can read the manual, you can change the world

Dakshim Chhabra — Thu, 12 Mar 2026 17:50:07 +0000

If you can blink an LED, you can change the world.
But I believe, If you can read the manual, you can change the world.

Back in my college days, I was interested in Embedded System and Internet of Things, and loves to spend my pocket money on building new things.

I used to run the simulation on Proteus, a software well known for simulating things and then on real device.

On one occasion, I was building a scrolling text animation on dot matrix display using Arduino, which was working fine on Proteus, but failed on real device.

Frustrated, I turned to my mentor, a seasoned veteran. His advice was simple:
"Dakshim, have you read the display manual".

Me: But it is working fine on Proteus.
He: Read the manual first.

It turns out to be a common issue with that specific display that was mentioned on the very first page of the manual.

Decade passed, but lesson remained. Read the Fabulous Manual

TippyTippy Pregnancy Companion built with Google Gemini

Dakshim Chhabra — Tue, 03 Mar 2026 11:54:29 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

As an expecting father, one of the biggest challenges I faced during my wife's pregnancy was keeping track of everything: daily medicines, doctor appointments, weight, blood pressure, and all the weekly milestones. While information is readily available online, I found myself constantly retyping the same details: LMP date, test results, weight updates, scans, and so on.

What I Built with Google Gemini

To simplify this journey, I created TippyTippy Pregnancy Companion using Gemini and Google AI Studio, a NextJS-based prototype app designed to streamline everything in one place.

The prototype currently includes:

Authentication & data storage (using local storage)
Appointment & medicine scheduling
Pregnancy timeline calculator based on LMP
Weekly milestone details with tips and expectations
Vitals logging (blood pressure and weight tracking)
AI-powered companion for insights and questions

Planned features for the next phase:

Google Health Companion integration to sync vitals from smartwatches
Image reader for scanning prescriptions and auto-filling details
Firebase integration for secure data storage and cloud sync
HIPAA compliance and other regulatory considerations
Refined AI prompts & edge-case handling

Demo

What I Learned

The things that I learned were beyond technology that evolved me to be a more empathetic being and humbled me as a person:

Seeing how a life evolves from the size of a pea to the size of a watermelon.
How do mood swings happen?
How can accidentally lifting a heavy object and suffering from typhoid put the whole journey at risk?
And why it is important to deal with situations with empathy and a positive manner, and why panicking can spoil things.
How to hold a baby? How to change a diaper and so on.

Apart from these, technically, I learnt:

Prompt Engineering: How adding a few details can change the output accuracy returned by Google Gemini.
UI/UX: While going through pregnancy, a couple is often in panic mode, I need to think as an expecting mother or as a father, who needs information at a glance, or needs to check schedule while going through day to day life, Though not quite right now in prototype version, an intuitive User Experience can make things accessible and easy.
Security: I learnt how important it is to secure the app and the data

Security is what held me back from releasing the App publicly. From other types of records, Health information is the most sensitive one.

There are practices such as Encryption at Rest, Encryption at Transfer, and End-to-End Encryption, and then HIPAA compliance. A minute leak about a health condition can be exploited and misused.

Currently, I am learning more about making things secure, and side by side implementing the same in the app.

Google Gemini Feedback

Google Gemini is an excellent pair programmer when used right and given the correct context. Though there is scope for improvement, the major areas that might need immediate attention are:

Dates: There are multiple methods to calculate expected due dates, Gemini seems to occasionally confuse between them.
Hallucination: Sometimes, it hallucinates that a fix has been implemented, but in reality, there is no change in the code.
Reinvent the wheels: Gemini by default shies away from popular npm packages and tries to recreate them from scratch, both in Google AI Studio and Google Anti-Gravity

I overcame these issues by proactively reminding the Gemini about the dates, the methodology, and to tackle the hallucination, I followed the Chain of Thought prompting technique.

NextJs v12 to NextJs v16 : Lesson learnt, Apart from following official method, check for dependencies upgrade guide.

Dakshim Chhabra — Fri, 27 Feb 2026 10:42:32 +0000

I was upgrading NextJS v12 to NextJS v16.
I followed the upgrade guide step by step.
I run all required codemods.

I upgraded all the dependencies to the latest versions by running yarn upgrade.

The app is running fine, but somewhere in the corner, there is this unknown bug, which is hard to trace.

Runtime Error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'N'.

Every test passed, but upon doing manual testing, there was an error upon clicking the subscribe button.

At this point, intuition kicks in. Why not pinpoint the problematic code?
Why not check all the libraries used in that piece of code?

Sometimes, In nextJs and reactJs the dependencies also have their own upgrade guides that we must follow.

In my case, it was react-toastify, upon subscription, I was using react-toastify to dispatch a toast notification, and I forgot to follow its upgrade guide during the migration. Have you ever faced such errors? How do you tackle them?

Research Before VibeCoding: Libraries and Frameworks

Dakshim Chhabra — Thu, 26 Feb 2026 14:57:17 +0000

Today, I was cleaning up a vibe-coded project in NextJS, with a custom hook for validating and handling Form Submission, i.e., useForm.

Form works? Yes, but only for small forms.
Is it maintainable? Might be.
Is it scalable? No.

For complex forms, it was giving an error related to rendering,

I failed to fix the issue

I tried for an hour to untangle the spaghetti, but failed.

Used AI tools, but was unable to fix it. Moreover, AI even hallucinated that it solved the issue.

The Last Resort

As a last resort, I have 2 choices:

either to recreate the custom hook from scratch,
or use well known library such as Formik and Yup.

I chose to go with libraries. Why?

I don't want to reinvent the wheel, solving every known edge case/corner case, and testing the forms in major browsers.
These libraries are well maintained from years.
Clear and easy to read documentation.
Easy to upgrade to future ReactJS versions

Verdict

Before diving into coding, make sure to research whether the feature you're building is already supported by any established libraries or frameworks.

Vibe coding React Color Picker using Google Antigravity

Dakshim Chhabra — Tue, 24 Feb 2026 08:27:14 +0000

I vibe-coded an MVP version of Color Picker this weekend for my ReactJS/NextJS projects using Google Antigravity. It was less of a self-test of JavaScript and more of a challenge to myself, to see if I can use Prompt Engineering to build something that is commonly used in my projects.

After initial research, to make it framework independent, and to keep everything in Shadow DOM, I finalized using Lit, Open Web Components, and Rollup module bundler.

Salient Features:

Eye Dropper using Chrome EyeDropper API
HTML Form Compatibility using ElementInternals Interface
HEX, RGBa output

Upcoming Features:

Canvas-based fallback EyeDropper for Firefox
Multiple layouts for better accessibility

Initial Prompt Used:

Role
Act as a senior frontend architect. Scaffold a universal UI library for a color picker using the Open Web Components generator and Lit

Instructions

Create a universal color picker library where output must be that works natively in jQuery, ReactJS (handle events via props), and NuxtJS, NextJS (handle window undefined checks) using Web Component API.
It should use Lit and the open web components generator as a starting point.
There must be no external dependencies. It should be compiler independent, should not use Vite, Babbel, or turbopack, or any kind of CSS loader.
All CSS must be self-contained, encapsulated within the component (no separate .css file)
Build output should be an ESM module and a UMD bundle
It should use the rollup, rollup.config.js must be configured to ensure this 'compiler-independent distribution.'
Implement a standard CustomEvent (e.g., color-change that bubbles and is composed to cross the Shadow root boundary
Implement a Web Test Runner, also use @open-wc/testing-helpers to run automated accessibility audits

Gaurdrails

NextJs and Nuxt execute code on the server where window and document do not exists, ensure all browser-specific API's (window, document, customElements are wrapped in checks or executed only after the component has mounted
The library must be importable in a Node.js environment without throwing "ReferenceError: window is not defined."
The component must use bubble: true and composed: true for all CustomEvents. For React, provide a small wrapper or using Ref to ensure seamless event binding in React 18/19
Avoid importing heavy external color-math libraries, write lightweight internal utilities instead
Strictly use shadow dom for style encapsulations
If user puts <color-picker> inside a <form>, it should behave like a native using ElementInternals API
Do not build a wrapper around the native color picker input element; it should be a custom HTML element with swatches, hue slider, and hex input

Refinements to the Journey

Initially, Google Antigravity got confused and tried adding all the OpenWebComponent tools independently, such as Lit, Rollup.

Therefore, I preferred to install the packages manually.

Initial UI from the above prompt was not user friendly, therefore I used other AI tools to create a simple HTML UI and passed the same to Google Antigravity.
The Gradient generation was not upto the mark, this is something that I have fixed manually

Further Steps

Over the next few days, I'll be refactoring the code to be more human-friendly and will spend time understanding the basic maths behind color conversion to make it scalable and maintainable in the future.

From Newspapers to Code Reviews: A Gratitude Story

Dakshim Chhabra — Thu, 04 Sep 2025 06:00:00 +0000

Back in 2018, when I joined Swap Development Pvt. Ltd., I expected my first tasks to revolve around Laravel development.

Instead, my Team Lead gave me something unexpected:

Read newspapers
Go through manuals & documentation
Rewrite them in a short and precise manner

At first, I wondered: "Why am I doing this instead of coding?"

But over time, I started noticing the impact.

My reading speed improved.
My writing became concise.
Most importantly, my critical thinking sharpened.

On some days, he even asked me to test my typing speed.
I began at 15 words per minute with 95% accuracy, and gradually reached 30 words per minute with 98% accuracy.

Looking back, those exercises weren't just tasks; they were the foundations of being a better developer.

Because in reality, software development isn't just about writing code.
It's about:

Reading documentation quickly
Understanding problems deeply
Writing solutions clearly

That early training turned me into an avid reader, and it still helps me review code more efficiently, debug more effectively, and learn from documentation without frustration.

I'm deeply grateful to my Team Lead for teaching me this lesson early in my career:

👉 Strong reading and writing skills make you a stronger developer and leader.

Retries, Dead Letter Queues & Parking Lot: API Integration Essentials

Dakshim Chhabra — Sat, 30 Aug 2025 10:55:50 +0000

Imagine

You created a Chat App using ReactJs or NextJs, built APIs using NodeJs, and integrated everything.

You're happy and excited to try it out with your best friend.

You type: If you can send data over API, you can change the world.

But then… your API throws an error.

Now what? Should you try again? Should you drop the message? Or maybe hold it for later?

In distributed systems, automations and frontend apps, error handling is as important as the successful transmission of data.

This is where concepts like Retries, Dead Letter Queue (DLQ), and Parking Lot come into play. Let's understand this using Courier service as an analogy.

Retries (Multiple Delivery Attempts)

Imagine a courier comes to your house with a parcel. You're not home.

They'll try again in the evening.
Maybe one more time the next day.

That's a retry.

In programming, retries handle temporary failures (like network glitches).

Dead Letter Queue (Return to Sender)

What if the courier tries 3 times but still can't deliver? (wrong address, recipient unknown).
The parcel is marked undeliverable and sent back to the sender.

That's a Dead Letter Queue (DLQ), a special place where failed messages live for inspection.

In backend systems, DLQs are common in RabbitMQ, Kafka, AWS SQS, etc.

Parking Lot (Delivery Paused Until You're Ready)

Now imagine this:
Courier calls you. You say,

I'm on vacation, deliver it Monday.

The parcel is held at the local hub until you're available.

That's a Parking Lot Queue, messages are not lost, just waiting to be retried later.

Takeaway

Next time you hear "Retries, DLQ, Parking Lot", just think of your courier guy:

Multiple delivery attempts = Retries
Return to sender = DLQ
Hold until Monday = Parking Lot

And remember: graceful error handling is just as important as success paths, whether you're building with React, Node.js, or distributed systems or an automation using n8n.io or make.com.