bURL: A tiny web app for breaking down URLs
Tags: showdev, javascript, react
Published: 2021-04-19 16:01:20

---
title: "bURL: A tiny web app for breaking down URLs"
published: true
description: An introduction to a little web app I'm working on, reasons why I'm making it and how you can tune in for updates.
tags: showdev, javascript, react
//cover_image: https://direct_url_to_image.jpg
---

I've been building a little web app that would help you edit URLs more seamlessly. It gives you a breakdown of a URL so you could easily manipulate it. Here's the MVP version.

![App screenshot showing how it works with a URL to a Reddit post](https://mebble-town.s3.ap-south-1.amazonaws.com/posts/burl/burl-sample-reddit.png)

Check it out at [burl.bar](https://burl.bar/)

It's still an MVP at this point. I'm putting it out there now so I get feedback as I'm building it. Gonna spend the next couple of weeks prettying it up and putting in more features.

## Why Did I Make This?

### Reason One: Managing Permalinks
Some time ago I had to work with Grafana dashboards. I needed to work with permalinks to the dashboards that would encode a specific dashboard state. I needed to edit parts of the dashboard state like the time range using the "from" and "to" query parameters, and the dashboard refresh rate using the "refresh" parameter. A typical permalink would hence look something like this:

```
http://mydashboard.com/dashboard/service-metrics?orgId=101&from=now-6h&to=now&refresh=30s
```

It's possible to manually edit this if you need to, but if there are many more URLs and more query parameters involved, it gets tedious.

### Reason Two: Cleaning Up URLs

When you share a post from social media by obtaining a link to that post, the link will typically include `utm_*` query parameters so that the site could keep track of traffic to that post. I wanted an easy way to get rid of these parameters. Here's the URL used in the MVP screenshot above:

```
https://www.reddit.com/r/aww/comments/mtv5a3/this_german_shepherd_is_well_known_in_her/?utm_source=share&utm_medium=web2x&context=3
```

I thought it would be really nice if I could just click a couple of buttons to get rid of them.

So I decided to build a tool that would fulfil both the use cases above and any new use cases one could come up with!

## Updates

I'll be posting updates once or twice a week on [my Twitter](https://twitter.com/leesonHere) so you can follow me there for updates. I've posted two so far and I'm hoping for some good progress ahead.

{% twitter 1383705756407533569 %}

The repository is public. I'm open to any PRs, although I haven't been able to afford time to flesh out a contribution guide. But any kind of PRs/issues are welcome!

{% github mebble/burl %}

## Plans

### Pretty UI

I'm thinking of quickly patching up the UI using a React component library like [Ant Design](https://ant.design/docs/react/introduce) or [React Bootstrap](https://react-bootstrap.github.io/). Then later we could go completely custom by using our own CSS. For CSS in a React app, I think a CSS-in-JS solution provides a good dev experience. So I'm thinking [styled-components](https://styled-components.com/).

### Shareability

I want the app state to be shareable. If two people have to manipulate URLs for some reason, and they wanna share a broken-down view of a URL to one another, it should be as easy as sharing a link. So if you wanna share the broken-down Reddit post link to someone, you just prepend `burl.bar?u=` to it and you're good to go:

_This isn't implemented, so the following URL won't work **yet**._
Update: It works now!

[burl.bar?u=https://www.reddit.com/r/aww/comments/mtv5a3/this_german_shepherd_is_well_known_in_her/?utm_source=share&utm_medium=web2x&context=3](https://burl.bar?u=https://www.reddit.com/r/aww/comments/mtv5a3/this_german_shepherd_is_well_known_in_her/?utm_source=share&utm_medium=web2x&context=3)

### Many URL Formats

For now, the app supports only http and https URLs. I'm imagining it would later support other URL protocols as well, such as ssh, ftp, etc. The URL breakdown input fields would be based on the protocol of the URL input.

This tool has already come in handy to me since building the basic version. It might help you out someday too! Thanks for reading.