Bytekit: jq, awk and a responsive design

I released version 0.3.0 of a bytekit.app, which is a privacy oriented AGPLv3 Web application for developers that I had been working on.

There are a few new features to highlight:

• AWK, which is based on the impressive goawk package from Ben Hoyt.
• jq, which is based on the pure Go version of jq
• new design, logo and responsive layout and a footer

I must admit that ChatGPT helped me generate ideas for the logo and its color scheme. My minuscule Inkscape skills handled the rest then.

Responsive design

However much bigger change than visual was a responsiveness. Bytekit is intentionally light on elements. I wanted to have something, which just works and to not overwhelm users or myself with UI options. Additionally writing UI elements is not a funniest or most creative part of the work. So once I made elements like

working. Well then every other problem can be solved by adding a new input box, right?

However, the most significant change was the responsiveness. Not the visuals. Bytekit intentionally uses only a few elements. I wanted something that just works and to not overwhelm users or myself with UI options. And I must admit that writing UI elements is not the most funnies part of the work. Quite the opposite. So once I made elements like the InputBox work. Then every problem became a nail. Or something input box can solve.

Let’s say the awk page.

1. Command line parameters? InputBox!
2. Program itself? Well InputBox, of course.
3. Input?
4. Output?

You get it. The Input Box has a consistent layout, the copy and paste buttons, can display an error like a wrong AWK program being passed and can be bind to on text changed event providing an interactivity. And as most of the pages are based on this element, this helps a lot with a consistent user experience.

Despite using light HTML or using a CSS framework, the design was not well-suited to the smaller screens. The biggest culprit was the <aside> menu, which got rendered at the top of the screen every time, making the site next to useless on mobile. Fortunately Bulma.css, the CSS framework behind the page, supports a responsiveness.

Menu is twice

The problem is how to ensure that mobile users gets no menu and can show one, while desktop users has their menu always displayed as they do have much free space. The solution was to render the menu twice and use CSS to hide/show it depending on a screen size.

Bigger screens are now defined with is-hidden-touch CSS class, which ensures it gets hidden on a smaller screens.

The menu for smaller screens is inside the navbar and has the class is-hidden-desktop. This means, that by default, the aside and navbar menus are hidden. In order to display it, there is a button which on a click pass the is-active class to the proper element. This is a few lines of Go and this is basically what drives a lot of interactivity of the bytekit itself.

There are still areas to improve, such as the aforementioned InputBox which has too much padding on a mobile devices. In overall the site looks much better now.

Better footer

Last but not least change is the new footer. Previously, it displayed a nerdy sha256 hash to everyone, making it unpleasant and especially on a mobile. This has been changed, it got a name, em dash, short description, links to source code and hashes are hidden for those interested.

Logo for the article is remixed https://github.com/egonelbre/gophers/blob/master/vector/science/power-to-the-linux.svg with https://upload.wikimedia.org/wikipedia/commons/c/cd/IPhone_size_comparison.svg.