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.
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:
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:
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!
In another terminal window, open the Cypress runner
yarn cypress:open
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.
You can also run the Cypress tests in headless mode:
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!
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.
