Qia Base64 Helper

UUID: 1974a340-9c05-4c99-a949-244c3faf9453

Essentially, it is a tool I have made for myself to convert between base64 encoded data and decoded data. After having made it, I thought it would also sense to host it on the web (than only localhost), for general availability for myself as well as for people who may also just need it. It is available at JH-WWW: Qia Base64 Helper.

Background

It was made more or less because of a type of frustration I encountered repeatedly. For simple needs, it is usually takes too much to fulfill in today's digital world - tools are intentionally overcomplicated for various reasons including the need of commercializing.

Like when you (the "you" here also mean "I") need to decode a piece of base64 code. There are several ways to reach the target.

to use JavaScript global function atob() (if you know this, like for IT technitians)

but there are several obstacles
you need to have a JavaScript runtime called out
you need to know it is atob() - which is usually not so easy for many people to distinguish with btoa()
you need to type the proper function call
to use online web application

but there are several obstacles
you need to use a web browser and Internet (which is usually the case)
you need to find the web application (by googling or alternative ways but it is usually not that easy)
you need to know the found web application and learn to use it (which can be tricky if the app is not well made)
to use ChatGPT alike tools

but there are several obstacles
you need to find and open the certain ChatGPT tool (to be honest, this should not be here, as no matter what tool, this is needed)
you need to come up with proper prompt input

But as already noted, it is not plain direct. Therefore, I have just made my own tool - Qia Base64 Helper.

How is it made?

As already indicated by the "to use JavaScript global function atob()" above, I know there is a handy tool in JavaScript to do base64 things. So it makes sense just to implement it in JavaScript. And best thing of JavaScript also include the universal availability - it natively works in all web browsers and very easy to deploy.

And because of the reactive nature that the output changes according to input and input can switch role with output, naturally, I chose to use React.js.

React.js is great. But using React.js as of 2024 is still not simple. Involving a build process is definitely not something I want for such a small tool. (Well, another example of overcomplicated senario because of the need of commercializing.)

I don't like make a build project for such a simple application. Good for me is that, I have already had some base work done - my Qia-React-Components project. (Hard work in the past pays you back today. So does today's hard work will pay me back in the future.) So I wrote qia-base64-helper.tsx there, made the build output qia-x/base64-helper.js. And taking use of already made thing, qia.react.js, as qia-react-component loader, with the simple html as the following, I have made the Application usable.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qia Base64 Helper</title>
    <style>
        .container {
            margin: 1em auto;
            width: 960px;
            max-width: 96%;
        }

        form {
            margin: 1em;
        }

        @media (prefers-color-scheme: dark) {
            body {
                color: #f0f0f0;
                background-color: #505050;
            }
        }
    </style>
</head>

<body>
    <qia-user-consent>
        <template>
            <script src="https://data.johannhuang.com/www.johannhuang.com/i.20240104.js"></script>
        </template>
    </qia-user-consent>
    <script src="https://data.johannhuang.com/libs/[email protected]/react.min.js"></script>
    <script src="https://data.johannhuang.com/libs/[email protected]/react-dom.min.js"></script>
    <script src="https://data.johannhuang.com/javascript/qia.react.20240104.js"></script>
    <script src="https://data.johannhuang.com/javascript/qia-x/base64-helper.20240104.js"></script>
    <div class="container">
        <noscript>This application needs JavaScript to work.</noscript>
        <h1>Qia Base64 Helper</h1>
        <div class="qia-react-component">Base64Helper</div>
    </div>
</body>

</html>

And it is also more than just having the application usable - it is also fast, safe and sustainable.

Fast as the use of CDN alike hosting to take advantage of caching (including the browser caching). (And the scripts are also small.)

Of course, I can use react.js and react-dom.js from real CDN. But no, I prefer to have my website online based on whether my servers are online or not - not based on whether CDN works or not.

Safe and sustainable as there is qia-user-consent web component made and in use - after the user consent, there comes injected scripts for sustainability - I need some reason to keep the tool online and maintained. Well, I know it is not great to require users to give consent, but every thing comes with a cost. I am just being nice to let users to get awere of what I have taken use - there are tons of web pages which does not even inform users. (Like bad guys do not want you know what they have done to you in the dark space.)

And as you can already see, the whole application is super clean HTML - also with dark scheme support.

Bigger Picture

This is by far not the first tool I have made for myself which is shareable for the uses of others. But this can be viewed as the start of a new series of tools I am hosting. Therefore, I have grouped it into the so called "Qia Webized Tools". Basically, it means, the tools do not really need to be on the web, but I intentionally made them on the web (therefore, webized), available at https://www.johannhuang.com/applications/qia-webized-tools/. By the way, on the web as of 2024 is not the same as on the web as of 2004. As an exmaple, EU has GDPR, so I need to take care of more things.

* cached version, generated at 2024-01-12 15:26:10 UTC.