DEV Community: Kamran Khan

What I Learned About Building a Fast, Mobile-Friendly Web Tool Without a Framework

Kamran Khan — Tue, 29 Sep 2026 02:46:17 +0000

What I Learned About Building a Fast, Mobile-Friendly Web Tool Without a Framework

When building a small web application, it is tempting to reach for a framework immediately.

React, Vue, Next.js, and other tools are excellent for many projects. But for smaller browser-based utilities, I found that plain HTML, CSS, and JavaScript can sometimes be enough.

While working on The Name Wheel, a browser-based random wheel tool, I learned a few practical lessons about building interactive web applications without unnecessary complexity.

1. Start With the User Interaction

One of the first things I learned was that the core interaction should be clear before worrying about the technology.

For a random wheel, the basic flow is simple:

User enters options
↓
User clicks Spin
↓
Wheel animates
↓
Random result is selected
↓
Result is displayed

Everything else is secondary.

This helped me avoid adding features before the primary experience worked properly.

2. JavaScript Doesn't Need to Be Complicated

For a small interactive tool, JavaScript can handle quite a lot.

For example, selecting a random item can be as simple as:


const randomIndex = Math.floor(Math.random() * items.length);
const selectedItem = items[randomIndex];

The interesting part isn't the random number itself.

The real challenge is connecting the logic to the user interface:

updating the wheel
starting an animation
preventing multiple clicks
displaying the selected result
handling empty input
resetting the tool

Small pieces of logic become important when they work together.

3. Mobile Design Shouldn't Be an Afterthought

A tool might look great on a desktop and still provide a poor experience on mobile.

For interactive tools, I pay attention to things such as:

large touch-friendly buttons
readable text
responsive layouts
avoiding horizontal scrolling
keeping important controls visible
making animations work smoothly on smaller devices

A simple CSS media query can make a significant difference:

@media (max-width: 600px) {
  .wheel-container {
    width: 90vw;
    height: 90vw;
  }

  button {
    width: 100%;
  }
}

The goal isn't simply to make the page "fit" on a phone.

The interaction should feel natural on a phone.

4. Performance Is a Feature

Users generally don't care what framework a website uses.

They care whether the website responds quickly.

For a small tool, I try to avoid unnecessary JavaScript, large assets, and complicated dependencies.

Some basic improvements can include:

compressing images
minimizing unnecessary scripts
using CSS animations where appropriate
loading only what is needed
avoiding unnecessary third-party libraries
keeping the DOM relatively simple

A lightweight application can often deliver a very responsive experience.

Empty States Matter

One of the easiest things to forget is what happens when the user hasn't provided any data.

For example, what should happen when someone clicks "Spin" without entering any options?

The application shouldn't simply fail.

Instead, provide a useful message:

if (items.length === 0) {
  showMessage("Please add at least one option.");
  return;
}

This is a small detail, but good empty-state handling makes an application feel much more polished.

6. Separate Logic From Presentation

Another lesson was keeping application logic separate from the visual layer as much as possible.

For example:

function getRandomItem(items) {
  const index = Math.floor(Math.random() * items.length);
  return items[index];
}

Then the interface can decide what to do with the result:

const winner = getRandomItem(items);
displayWinner(winner);

This makes the code easier to understand and easier to modify later.

If the visual design changes, the random-selection logic doesn't need to change with it.

7. Small Tools Can Solve Real Problems

One thing I particularly enjoy about web development is that an application doesn't have to be huge to be useful.

A simple randomizer can be useful for:

classroom activities
choosing teams
party games
brainstorming
decision making
giveaways
office activities

That was one of the reasons I built The Name Wheel — to create a simple browser-based way to make random selections without requiring complicated software.

You can see the project here:

https://thenamewheel.com/

8. Build First, Optimize Later

It's easy to spend too much time thinking about architecture before actually building anything.

For small projects, I've found it more productive to:

Define the main user interaction.
Build the simplest working version.
Test it on desktop and mobile.
Find the actual problems.
Improve performance and usability.
Add features based on real needs.

This approach also makes it easier to identify which features are actually useful.

Final Thoughts

Building a small web tool taught me that good web development isn't always about using the newest framework or the most complicated architecture.

Sometimes the important things are much simpler:

Fast loading.
Clear interaction.
Good mobile support.
Useful feedback.
Simple code.

A small application that solves one problem well can be more useful than a complicated application filled with features nobody needs.

I'm continuing to experiment with browser-based tools and improve what I've learned from building them.

I Built a Free Random Wheel Tool — Here’s What I Learned About Building Interactive Web Tools

Kamran Khan — Thu, 24 Sep 2026 02:43:06 +0000

I Built a Free Random Wheel Tool — Here’s What I Learned About Building Interactive Web Tools

Small interactive web tools look simple from the outside.

A user clicks a button, the wheel spins, and a result appears.

But building a good interactive tool involves more than just creating the visual interface. You also need to think about state management, randomness, accessibility, responsive design, performance, and the overall user experience.

I recently worked on a free random wheel tool called The Name Wheel, and these are some of the things I learned from building it.

1. Keep the Core Interaction Simple

The most important part of an interactive tool is the primary action.

For a random wheel, the user should immediately understand:

Add your options
Start the wheel
Wait for the animation
Get the result

There shouldn't be unnecessary steps between the user and the result.

This principle applies to many small web applications, including calculators, generators, randomizers, and productivity tools.

2. Randomness Needs to Be Handled Carefully

A randomizer shouldn't always appear random while actually favoring certain results.

For a simple implementation, JavaScript's random functionality can be used to select an index from an array:

javascript
const index = Math.floor(Math.random() * options.length);
const selectedOption = options[index];

console.log(selectedOption);

The important thing is to make sure every valid option has the intended probability of being selected.

For more advanced applications, you may also need to consider weighted probabilities or cryptographically secure randomness depending on the use case.

Animation and Logic Should Be Separated

One mistake developers can make is tying the result calculation too closely to the visual animation.

The application should know the selected result independently from the animation.

Conceptually:

User clicks Spin
↓
Choose result
↓
Calculate target position
↓
Animate wheel
↓
Display result

This makes the application easier to debug and modify.

4. Mobile Responsiveness Matters

A tool can work perfectly on desktop and still provide a poor experience on mobile.

Interactive tools should be tested at different screen sizes.

Important things to check include:

Button size
Text readability
Wheel dimensions
Touch interaction
Input fields
Scrolling
Animation performance

For a simple web tool, mobile users should be able to understand the interface without needing instructions.

5. Don't Underestimate Empty States

What happens when someone opens the application and there are no options?

That's an important state.

Instead of allowing the application to fail, provide a useful message:

Add at least two options before spinning the wheel.

Good empty states prevent confusing behavior and make small applications feel much more polished.

6. Small Tools Can Solve Real Problems

One thing I found interesting while working on a random wheel is how many situations can use the same basic interaction.

For example:

Choosing a random name
Selecting a team member
Classroom activities
Office icebreakers
Party games
Decision making
Brainstorming activities

The underlying technology can be relatively simple, but the usefulness comes from applying it to a real problem.

Try It

I built The Name Wheel as a free browser-based random wheel that can be used for these kinds of situations.

The interesting part isn't the wheel itself. It's the broader lesson:

Simple web applications can be surprisingly useful when they remove friction from a common task.

If you're building a small interactive tool yourself, focus first on the core interaction, then improve the edge cases, accessibility, mobile experience, and performance around it.