Developer Tools to decode/encode text

Today, a little blog post to provide some developer tools.

I wanted to have a quick way to do some URI and Base64 encoding/decoding, as well as JSON pretty-printing/formatting.

You can either head over to the Developer Tools page in the secret Playground section of this blog, or use the tools below, with some contextual text.

Why?

Usually I would open a tab, hit inspect and type JavaScript code in the console to encode text.

Now I can use my own blog to do this.

Why? I don’t store anything; I could plug some local storage but I like it as is: no security issues — well, maybe I need to remove Google Analytics to be 100% sure.

Also I created Svelte components so that I could share the code between this blog post and the Playground page.

Thanks to MDsveX, this blog post’s markdown source is parsed and infused with Svelte components so that we can benefit from markdown with reactive Svelte content!

It enable my blog to work like a supercharged wiki website .

DISCLAIMER

• We do not steal your data.
• Use at your own risk.
• As always, The source code is available on github.

Encode/Decode URI Components

Sometimes, you need to pass an URL with query parameters inside another URL with query parameters.

Like Inception dreams or russian dolls.

If you do not want to use Base64, you can transform the few characters that would mess the main URL.

Encode/Decode Base64

Another alternative would be to encode this embedded URL in the Base64 format. This format only uses 64 characters, which means the resulting content will be slightly larger (about a third) than the original input; and can be safely used inside JSON data, as URL query parameters, HTTP headers, etc.

Please note that this component automatically converts base64url by replacing + and / characters with - and _, and removing padding with =. You can see the open sourced code.

Also I’m not a UX designer, congrats if you figure out how the checkboxes work below. Hint: you can test base64url encoding with the first, and the second detects when you use it.

Pretty-print JSON data

Sometimes you receive data from a server that is in JSON format and you want to format it to be more human-readable. The component below will use JSON.stringify(text, null, tabSize) to achieve this.

This is a very simple way to code a JSON formatter because it will break if your JSON data is not valid.

Just paste some JSON — Remember, always be careful of what you paste online, so no sensitive data — and hit the button. You can change the tab size.

Next

Next, I want to replace jwt.io with my own page.

I’m not a fan of pasting my sensitive JWT tokens on this website, so I might as well code my own.

Conclusion

Thank you for reading, It is a pleasure to share with you and I hope this post will be useful.

If you have any questions or feedback, or just want to say hi or thank you, my DMs are open on Twitter!