Forem: Bansal

[Boost]

Bansal — Tue, 17 Feb 2026 12:06:34 +0000

Turning Missing Avatars into a Design Opportunity

Bansal ・ Feb 17

Turning Missing Avatars into a Design Opportunity

Bansal — Tue, 17 Feb 2026 11:59:53 +0000

We’ve all seen it — the awkward blank circle, the grey silhouette, or the predictable two-letter initials when someone hasn’t uploaded a profile photo.

Missing avatars feel like a tiny detail, but they influence how polished a product appears. When an interface handles these moments thoughtfully, it feels intentional. When it doesn’t, it feels unfinished.

While building UI components recently, I found myself wanting something better than initials.

That’s how the mesh gradient placeholder idea began.

The Problem with Initials

Initial-based avatars are everywhere because they’re simple.

But after working with dense lists and profile-heavy interfaces, the drawbacks become obvious. They look repetitive. They add visual noise. Multiple users with the same initials become indistinguishable. And visually, they feel purely functional rather than pleasant.

When a screen fills with identical “JS” or “AK” bubbles, the placeholder stops helping.

I wanted something that felt cleaner, more distinctive, and easier on the eyes.

A Different Approach

Instead of showing initials when an avatar is missing, I tried replacing them with soft mesh gradients.

The idea was simple: map a gradient to the first letter of a name and keep it consistent. “A” always receives the same gradient, “B” another, and so on through the alphabet.

This preserves recognizability while making the interface feel more alive. The result doesn’t feel like a fallback — it feels like a design decision.

Why Mesh Gradients Work

Mesh gradients have a softness that flat colors lack. They feel organic and modern without demanding attention. The gentle blending avoids harsh edges and sits comfortably within both light and dark themes.

More importantly, they introduce variation without adding clutter. Instead of repeating identical shapes, the interface gains subtle depth and warmth.

It’s a small change, but it removes the mechanical feel that placeholders often introduce.

Creating a Set That Feels Balanced

To make this practical, I generated hundreds of mesh gradients and curated a set of twenty-six — one for each letter. The goal wasn’t randomness; it was harmony. Each gradient needed to feel calm, distinct, and consistent with the others.

I used a mesh gradient generator to explore variations and refine the palette

Once mapped to letters, missing avatars retained a visual identity without requiring any extra input from users.

Beyond Avatars

After using gradients for avatars, I began noticing other places where the same idea worked just as well.

Blog cards without thumbnails no longer looked broken. Link previews and OG images felt complete instead of empty. Even loading states felt calmer when a subtle gradient filled the space.

These small adjustments improved the visual rhythm of the interface. Nothing felt missing; everything felt intentional.

Designing for Interfaces with People

If you’re building anything centered around people — comments, teams, founder communities like PitchWall, or collaboration tools — identity cues become important very quickly. When many profiles appear together, identical placeholders blur into each other. Subtle gradient variations provide differentiation without adding labels, badges, or extra visual clutter.

Designing for Absence

Good interface design isn’t only about what is present. It’s also about how the system behaves when something is missing.

Users may never consciously notice avatar placeholders. But they do feel the difference between an interface that looks incomplete and one that feels thoughtfully finished.

Sometimes, improving a product isn’t about adding more — it’s about handling the empty spaces better.

pattern.css

Bansal — Wed, 29 Apr 2020 05:48:47 +0000

Last week I made CSS only library to fill empty background with beautiful patterns.

Features

Only CSS. No JavaScript!
< 1KB minified and gzipped!
Supports all modern browsers
Built Using SCSS.
Full color control.

Documentation and demo: https://bansal.io/pattern-css
Github: https://github.com/bansal-io/pattern.css

Hope you enjoy this product and please let us know what you think.

I made this css framework

Bansal — Tue, 07 Apr 2020 06:05:32 +0000

Hello devs,
Last month I launched first version of shorthand css framework. Although I'm still working to make it better, but you can give your feedback.

https://github.com/shorthandcss/shorthand

Serverless contact form handling for static websites

Bansal — Mon, 29 Jul 2019 12:54:21 +0000

When you’re making a static website, it means you don’t want to manage the server or want to save on costs. However, a static website can’t process contact forms, meaning you need a backend server to handle contact form requests. But if you need a server, then what is the logic of making a static website? So the simple solution is serverless contact forms.

Why go serverless?

There are many benefits of making serverless applications, but in short, the main benefits are easy setup, no management, and less cost (free).

Platform Selection

There are many ways to run serverless code like aws lambda, Google cloud functions, cloudflare workers. But I have selected the easiest way to run serverless code i.e. Google cloud functions.

Google Cloud functions allows you to trigger a function via HTTPS Request. It can also be done with aws lambda, but you need to set up API Gateway additional to trigger the function.

Cost

Google cloud offers free 200,000 GHz-seconds of compute time, 5GB of Internet egress traffic, and 2 million invocations per month.
https://cloud.google.com/functions/pricing

I’m using 256MB/0.4GHz runtime and it takes ~800ms to process a form.

This free quota is too much to handle a contact form submission.

0.4 x 0.8s = 0.32 GHz-seconds per invocation
200,000 / 0.32 = 625,000

You can handle 625,000 Successful form submissions per month for free*.

*This is just a sample calculation and does not include email cost. Free resources are subjected to Google cloud policies.

Setup

Step 1: Create Project

(If you don’t have a Google cloud account, create one then create project)

Step 2: Create Function

Click on the menu icon on the left top corner. Scroll down and find Cloud Function under COMPUTE section.

Then click on the ‘Create Function’ button.

Step 3: Configure Cloud function

Set function name (contact-form).

Allocate Memory (256MB is enough)

Set Trigger ‘HTTP’ — it works for https also.

Authentication is not required, so keep it checked to accept unauthenticated requests.

Source code can be added inline or ZIP file can be uploaded. You can find zip file here https://github.com/bansal-io/serverless-contact-form/tree/master/dist

I have selected inline editor option here.

Step 4: Add code to editor

Open the repository https://github.com/bansal-io/serverless-contact-form
Copy the code of index.js and package.json files and paste it to respective code editor tabs.

In the field Functions, to execute type onSubmit

Step 5: Set Environment Variables

All the Environment Variables Related to SMTP are required. The rest of the variables are optional. Check the configuration details https://github.com/bansal-io/serverless-contact-form/#configure
Click on ‘Create’ button and your function is ready.

Note: Instead of setting environment variables, you can also change the config values in index.js file.

Get http endpoint

Once function is deployed, click on the function name (contact-form) then Trigger tab to find the url.

Your url will look like this.

https://YOUR_REGION-YOUR_PROJECT_ID.cloudfunctions.net/FUNCTION_NAME

Now you can set this url in action attribute in your HTML form

Here is a working example of contact form with Google cloud function https://serverless-contact-form.netlify.com/

Note: This code allows to accept requests from any domain. To restrict this with your domain only, you can also change ‘Access-Control-Allow-Origin’ value from ‘*’ to ‘https://your-website.com’.