DEV Community: Szikszai Gusztáv

7GUIs in Mint

Szikszai Gusztáv — Fri, 11 Jul 2025 09:16:00 +0000

Since I learned about 7GUIs I wanted to implement them in Mint. I've tried a few times but always stopped at some point and there were changes in Mint, so I started again and then stopped again.

When recently I've added examples to the website, it presented a good opportunity to finally implement and showcase them on the website.

I'm not going to explain all the tasks, but instead what was easy and what was hard to do in Mint.

Counter

The counter task is a pretty easy one, not much to tell here. It's almost the same as the plain JavaScript version would be.

Temperature Converter

This was also easy. The tricky part was handling the invalid states, but having a type for it (Field) with variants describing them makes it simple.

Flight Booker

Tasks start getting interesting with this one.

there was a need for parsing a date in a specific format - a regexp was a good solution here
the buttons need to be disabled in multiple conditions - matching on a three element tuple makes this a breeze

Timer

This wasn't that difficult in Mint since we have some built in entities that does the heavy lifting.

We have the animation frame provider, which calls a function on every animation frame. This allows us to track the elapsed time. Having the duration wired up was easy with the range slider.

CRUD

This wasn't particularly difficult either, since we have some functions for updating and deleting entities at a specific index in an array. It's basically pretty straight forward.

A nice side effect of implementing this resulted in a detecting a subtle bug which needs fixing.

Circle Drawer

This task is the second-hardest one. I needed to create more components (the previous ones only needed the one) and an extra module to handle history - Undoable(a) - fortunately I was able to port an Elm module I used to use.

The built-in outside click provider was used to close the panels that show up when a circle is clicked. Also, alternative patterns in case branches provided useful in many cases here.

Cells

Now this one was the hardest one because you basically need to write a very simple spreadsheets clone. Implementing this one has taken me three sessions at least (the other tasks I was able to do in a single session).

Formula

Cells in spreadsheets are either texts or formulas. A formula is basically starts with an equal sign and have multiple variants. I needed to write a parser for it and then an evaluator which calculates the numeric values of the cells.

To make a little optimization in the parser, I needed to use inline JavaScript, which I didn't need to do in the previous tasks. Other than that it was fun to write a parser in Mint - a thing I didn't do before. ADTs were very useful in this task.
Evaluator

The evaluator is a combination of recursive reduce functions. If a cell depends on another cell, we need to evaluate that cell first and so on for its dependencies.

This gets especially complicated for the functions (sum, prod) which can take many arguments, where any of which can be a range (which also needs to be evaluated). I went with the naive approach, but it also caches values, and I'm sure that there are other algorithms which are better.
UI

The actual UI was the least time-consuming part of this task. Mint makes it easy and very enjoyable.

I enjoyed working on these tasks, and finally showcasing the Mint implementations feels great! If you find ways to improve them, drop me a pull request on the mint-website repository.

P.S. Writing this blog post uncovered a bug in the website code which is now fixed and prompted a change in the example component to maximize the editor height since the examples are so big and a limit wasn't set.

Front End Language Feature Matrix

Szikszai Gusztáv — Tue, 08 Jul 2025 13:55:32 +0000

Hi! I've created a page to showcase the features of Mint (a programming language for single page applications) and their corresponding versions in other languages which can be used for single page applications. I hope it can help you choose a programming language for your next project!

It took some time to track down the features for each language. I'll keep expanding this with other languages in the space, so if you have any that you would like to see, let me know.

Anyhow, here is the link: https://mint-lang.com/feature-matrix

🍃 Mint Reborn

Szikszai Gusztáv — Tue, 03 Dec 2024 12:26:28 +0000

Howdy folks 👋, long time no see!

Today, I'd like to reintroduce you to the Mint, which is a programming language for specifically writing single page applications.

I've introduced Mint 6 years ago 🤯 in this post and a lot of things happened since then, but I feel like that the described day is still something that a lot of developers don't experience. The state of frontend development is still messy and complex. Mint is here to help with that.

To be frank, I'm not that versed in what folks are using now to build webpages. I lost track a while ago (specifically 2 kids ago 👶 yes, I'm a dad). Then, React was the primary way of building single page apps. Svelte and Next.js was pretty new, and we believed that Elm will save us (that didn't happen). What I see nowadays seems overly complex and still carries the same warts that plagued the previous technologies (constant rewrites, projects don't work after running npm install a year later, etc...).

In the last year having found some inspiration I worked more on Mint than in the previous years. I rewrote a lot of its internal code (which I'll detail briefly at the end of this post), the website and I think it's in a state where it can be used for some production use cases. I wouldn't call it 1.0 – we are still a bit from that, but the language won't change drastically going forward.

So what is Mint, and how can it help me?

Think of Mint as a thing that has everything that you need to build frontend heavy websites (if I forgot something, let me know 😉):

After reading through that list, just as an optional exercise, try to check off every item on it with your current stack 😉

Mint has everything (well, except the online stuff) on that list built in the language. One language, one command to rule them all, and one place for the documentation.

It sounds nice, but what it looks like? I might not like it!

Here is the famous counter example, which showcases a tiny portion of the features:

Not that bad, can it actually help me in my current situation, though?

I can't answer that. Mint is a fairly new language with a small community. There are people who write things in it and seem to like it.

At this stage, it is mostly good for greenfield projects or hobby projects, but it is capable - enterprise software can be built with it now. I built (and keep building) more than 100K LOC desktop / SaaS application in it (I will not name it here, but you can easily find out what it is), with many pages and it supports different languages.

Also, there is the Mint website which is also a bigger project (more than a hundred pages) loading each page's content (mostly markdown) asynchronously, so it can be used to build documentation websites or landing pages. It also has the sandbox, which is a small CRUD app and the tutorial which is another small app. All of these are in a single codebase using a single language.

Why are you telling me this now?

As I mentioned in the beginning, I rewrote / refactored a lot of the code.

For example, in 0.19.0 the components were compiled to class components, after the rewrite they are now compiling to functional components. Stores were using a hand made system now they are using signals. But the beauty of it is that it's all internal, it doesn't affect the way you write code.

Previously the outputs were a single JavaScript file, now it will output different files depending on the use of defer and async components. It outputs now JavaScript modules, so it's easier to integrate with.

The website was rebuilt from scratch to include the documentation, tutorial and the sandbox and to showcase Mint usage in the wild.

Mint has better documentation, performance and features than ever, and it won't change much syntax wise in the future.

OK, so where can I try it out?

I suggest that you start with the online tutorial. It shows all the features in an interactive way, without having to install anything.

After that, installing Mint is just downloading a binary file, but we have other ways. If you have questions or just want to chat, you can join the Discord server.

Thank you for reading 🙏 and stick around for more Mint posts.

DevBox Showcase: CSS Shadow Generator

Szikszai Gusztáv — Tue, 28 Jun 2022 14:44:39 +0000

Hi 👋,

This is the next post in the series showcasing tools from DevBox 🎉, an application (desktop, browser extension or web) that contains many useful tools and cheat-sheets.

Have you ever needed a nice looking CSS shadow? DevBox has a tool to generate one! Here is a short video to about it:

It has some handy gizmos to tweak the shadow:

Light position using a 2D interactive field.
Color picker for the background.
A toggle to so the shadow matches the background.
Sliders for opacity, elevation and resolution.

More DevBox showcases are coming, so follow me here if you want to be notified!

DevBox Showcase: JSON Explorer

Szikszai Gusztáv — Mon, 13 Jun 2022 15:14:59 +0000

Hi 👋,

This is the next post in the series showcasing tools from DevBox 🎉, an application (desktop, browser extension or web) that contains many useful tools and cheat-sheets.

Did you ever had to dive deep into a JSON file? DevBox has a tool for that: you can check a JSON object interactively using a column based UI.

Here is a short video about it:

Some notable features:

Clicking on a field will open up a column on the right side with its information or it's child fields in the case of an object or array.
It can detect non-standard fields such as colors and URLs.
Show statistics for strings (words, lines, bytes).
Show different formats of the color (RGBA, HSLA).
Show parts of the URL (origin, host, path, etc...).

More DevBox showcases are coming, so follow me here if you want to be notified!

DevBox 2.1.0 🎉

Szikszai Gusztáv — Tue, 31 May 2022 15:25:08 +0000

Hi 👋

This is a post about a DevBox release (2.1.0) 📦

DevBox is a desktop application / browser extension / web application of 50+ useful tools for developers 👷 like generators ⚙️, converters 🔀 and more.

This release brings 5 new tools and 5 new cheat-sheets.

CSS Shadow Generator

This tool allows you to generate CSS shadows (box-shadow) by using intuitive controls for light position, resolution, opacity and elevation:

Regexp Tester

DevBox now finally has a tool to test regular expressions which shows the matches and their positions:

JSON Explorer

This tool allows you to explore JSON files using a multi-column interface:

clicking an object or array in a column shows a new column with its contents
clicking a value in a column shows information about it on the right side

Structured Code Generator

With this tool, you can create the structure of data and populate it with fake data:

Markdown to HTML

This tool allows you to convert Markdown to HTML:

Cheat-Sheets

Cheat-sheets for regular expressions, Redis, SSH, Subversion and URL Encoding were added.

For the full list of changes, check the changelog and the and website.

Let me know your feedback in the comments 🗨️ 🙏

DevBox 2.0

Szikszai Gusztáv — Thu, 28 Apr 2022 15:18:25 +0000

Hi 👋

It's been a while since I posted an update here about DevBox, so this post will summarize the new things that have been added since the last few updates 😎

DevBox is a desktop application / browser extension / web application of useful tools for developers. If you are curious, check out the introductory post and website.

The two new bigger features are localization and cheat-sheets 🎉

Localization

All labels and content has been translated to Hungarian and Spanish in addition to English:

Cheat-Sheets

10 cheat-sheets of 5 package managers and 5 common command line tools:

More cheat-sheets are coming in future updates 🚧

New Tools

2 new tools were added in the last releases.

Code Snippet to Image

This tool allows you to save an image of a code snippet which can be shared online:

Color Information

This color gives information about a color, shows it's parts in different color spaces, CSS representations and related colors (complementary, analogous, etc...):

For the full list of changes, check the changelog and the and website.

Let me know your feedback in the comments 🗨️ 🙏

DevBox 1.4.0 & 1.5.0 🎉

Szikszai Gusztáv — Thu, 17 Feb 2022 17:31:27 +0000

Hi 👋

It's been a while since I posted an update here, so I'm excited to announce that DevBox 1.4.0 and 1.5.0 is out!

DevBox is a desktop application / browser extension / web application of useful tools for developers. If you are curious, check out the introductory post and website.

Syntax Highlighting

All content in textareas are syntax highlighted (using Monaco Editor) when appropriate 🎉

The old plain textareas are still an option which can be toggled in the settings page.

New Dashboard

The dashboard has been redesigned, instead of colors there are now icons for each tool:

This gives the dashboard a modern unifined look.

New Tools

There are 3 new tools in these releases:

Added CSS Formatter tool.
Added CSS Minifier tool.
Added Unit Converter tool.

Behind the Scenes

Development wise, the hardest part here was to implement Monaco Editor. Since it uses its own loader, there was a conflict with third party JavaScript.

There is no good way of resolving this unless we use ECMAScript modules, which is not really an option for DevBox.

The solution here was to manually patch the third party JavaScript.

Let me know your feedback in the comments 🗨️ 🙏

DevBox Showcase: Image Extractor

Szikszai Gusztáv — Tue, 23 Nov 2021 05:16:11 +0000

Hi 👋,

This is the fifth post in the series showcasing tools from DevBox 🎉, an application (desktop, browser extension or web) packed with everything that every developer needs.

DevBox now has a tool to extract images from websites, here is a short video on how to use it.

Or you can follow this step-by-step tutorial.

Once DevBox is opened search for the tool and click on its card:

It will show you the interface:

After filling in the URL and clicking on the button you will see all images on the page in a grid:

You can now download the images one by one.

More DevBox showcases are coming, so follow me here if you want to be notified!

DevBox 1.3.0 🎉

Szikszai Gusztáv — Tue, 16 Nov 2021 16:33:58 +0000

Hi 👋

I'm excited to announce that DevBox 1.3.0 is out! It's a big milestone for the project, with 4 new tools, bug fixes and the web application.

DevBox is a desktop application / browser extension / web application of useful tools for developers. If you are curious, check out the introductory post and website.

Web Application

DevBox is now available as a web application on app.dev-box.app with 10 tools to use for free 🎉 the other 30 tools that can be used with a subscription.

New Tools

There are 4 new tools in this release:

Added Color Contrast Calculator tool.
Added Data URI Generator tool.
Added Hash Generator tool.
Added HMAC Hash Generator tool.

My favorite new tool is the Color Contrast Calculator with which you can calculate if the given text is readable on a background:

Behind the Scenes

Development wise this release had its challenges:

Make sure that the application works in different platforms / environments (web application, desktop applications, extensions)

I needed to separate the source code for the core of the application - basically the tools. Once that done, I could build separate versions of it: desktop application / extension, public web application (with the free tools), private web application (all tools)

Make sure that the web application loads fast.

Previously the application's size wasn't a factor since all the assets were bundled for the desktop application.

I refactored the code to only load scripts when they are needed. This makes the initial loading times fast. Once a script is loaded then it's cached, so future uses are instantaneous.

Allow users to subscribe to the application.

This was the biggest part. I've built a web server in Crystal which is basically serves the public application (free tools only) when logged out and the private application (all tools) when logged in.

Payment wise I've implemented Stripes checkout sessions - they provide a nice UI to purchase and manage subscriptions.

Users don't need to have passwords instead they log in with a link sent through an email which they used to pay for the subscription.

Let me know your feedback in the comments 🗨️ 🙏

DevBox Showcase: CRON Explorer

Szikszai Gusztáv — Wed, 03 Nov 2021 12:57:14 +0000

Hi 👋,

This is the fourth post in the series showcasing tools from DevBox 🎉, a desktop application or browser extension packed with everything that every developer needs.

DevBox has a CRON Explorer tool, which is useful for checking CRON Expressions.

Once DevBox is opened, click on its card:

It will show you the interface:

In the Expression section you can write your CRON expression and will show a readable version of it.
In the Next 10 Occurences - Calendar section you can see the dates of the next 10 occurrences of the expression.
In the Next 10 Occurences section you can see the next 10 exact occurrences of the expression.
In the Examples section you can see and click on some basic CRON expressions.

You can still buy DevBox here for a lifetime price of ~~$25~~ $20 💰, get it while it's available!

More DevBox showcases are coming, so follow me here if you want to be notified!

DevBox 1.2.0 🎉

Szikszai Gusztáv — Sun, 31 Oct 2021 08:45:04 +0000

Hi 👋

I'm happy to announce that DevBox 1.2.0 is out! It adds 6 new tools and bug fixes!

DevBox is a desktop application / browser extension of useful tools for developers. If you are curious, check out the introductory post and website.

You can read full change log below:

Fixed some tools not working in the extension.
Fixed a bug in PDF merger tool.
HTML previews background is defaults to white and full HTMLs can be previewed.
Added search input to search for tools.
Added HTML To Markdown tool.
Added HTML To Text tool.
Added QueryString Parser tool.
Added URL Parser tool.
Added Image Extractor tool.
Added SVG Extractor tool.

You can still buy DevBox here for a lifetime price of ~~$25~~ $20 💰 - with these new tools included.