DEV Community

Mastering JS
Mastering JS

Posted on

Why We're Focusing on Browser Tools in 2022

My biggest source of frustration earlier in my dev career was just how unbearably adhoc all the work was. Working at early stage startups meant constantly gluing disparate code together in unpredictable one-off ways: convert HTML to Pug here, build a Webpack config to compile a special script for a client there. It was a nightmare to try to find a working npm module and figure out how to use it.

What is a Browser Tool?

A tool that runs directly in your browser. No npm packages to install, no docs to read. Just type in Google, click link, copy/paste problem, and get solution.

Web UIs are ideally more intuitive, don't require installing anything, and get you from problem to solution faster.

Image description

Browser tools aren't great when you need to solve a problem as part of an automated process. You don't want to have to copy/paste your code into a browser for tasks that you need to do repetitively, like linting and compiling. But converting some HTML you got off of Fiverr into Pug, or converting a config from JSON to YAML, or converting decimal to binary? We definitely prefer browser tool to CLI.

The Mastering JS mantra has always been devs solve problems by Googling. Browser tools help developers get from problem to solution faster using their preferred method.

Challenges of Building Browser Tools

UI/UX is the primary goal. Specifically, get you from problem to solution as fast as possible, while minimizing any mental overhead. Performance is key to this goal, which is one of several reasons why we avoid adding a server component to our tools where possible. Most of the time, we can get away with just using Webpack to bundle an npm package to do what we want to do.

We're still learning the right UI/UX patterns, so please let us know what you think of our tools in the comments.

Top comments (0)