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

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.

1. 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.