DEV Community

loading...

bURL: A tiny web app for breaking down URLs

mebble profile image Neil Syiemlieh ・Updated on ・3 min read

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

Check it out at 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 so you can follow me there for updates. I've posted two so far and I'm hoping for some good progress ahead.

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 logo mebble / burl

Breaking URLs

burl

CI Status Netlify Status

Break up URLs at burl.bar

Requirements

  • Node.js
  • npm or yarn

Setup

Clone the project, cd into the project's root directory and install the project's dependencies

cd burl
yarn install  # or npm install
Enter fullscreen mode Exit fullscreen mode

Testing

Run the application in development mode

# with npm
npm run dev
# with yarn
yarn dev
Enter fullscreen mode Exit fullscreen mode

In another terminal window, open the Cypress runner

# with npm
npm run cypress:open
# with yarn
yarn cypress:open
Enter fullscreen mode Exit fullscreen mode

In the Cypress runner, select the test file you want to run. This test will be run in a Cypress-controlled browser. Then as you update your tests and the corresponding application code, you can re-run the tests from the Cypress browser.

Before committing your code, run all the tests of the application

# with npm
npm run cypress:run
# with yarn
yarn cypress:run
Enter fullscreen mode Exit fullscreen mode

TODOs

  • Critical

    • a11y & keyboard navigation
    • Handle url encoding
  • Bonus

    • Dark/light theme
    • i18n and l10n
    • SEO
…

Plans

Pretty UI

I'm thinking of quickly patching up the UI using a React component library like Ant Design or React Bootstrap. 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.

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

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.

Discussion (4)

pic
Editor guide
Collapse
skorotkiewicz profile image
Sebastian Korotkiewicz

Interesting idea!

If anyone wants more information about URI please visit this great article on wikipedia: wikipedia.org/wiki/Uniform_Resourc...

And as for site styles, I recommend checking out my favorite Semantic UI. Comfortable React components, nice and clean looking.

Wikipedia URI

Collapse
mebble profile image
Neil Syiemlieh Author

Thanks for the suggestion. Gonna check out semantic and see if it fits

Collapse
daviddalbusco profile image
David Dal Busco

Nice, keep going πŸ’ͺ

Collapse
mebble profile image