This post is written by Wenting Zhang, a Retool customer, who built a very cool Coding Font app. Read on to learn more.
As engineers, we spend a lot of time in front of our computer screens. The coding font that we spend 8 hours a day staring at has a lot to do with our productivity and comfort. I am very picky about coding fonts and like to experiment with that setting to find the best balance. You too? That's great because I made an app just for you! I will go through how we create CodingFont.com---a gamified experience that helps you find your true love amongst coding fonts.
First off, a little introduction. I am the co-founder and head engineer of Typogram. I write a weekly newsletter about my entrepreneur developer journey; check it out here. Typogram helps non-designers---especially startup founders and small business owners---create a brand identity system including logo, color palette, and typography, all without paying for an expensive designer, or having to learn fancy design tools.
Taking Coding Font from ideas to execution
As our company name suggests, our main product (currently under development) is heavily about typography, and indeed we spend most of our time dealing with fonts---validating them, tagging them, licensing them. Managing fonts internally was getting to be a challenge, to the point where we needed to build internal tools; that is when we met Retool.
After using Retool to create internal font management tools, we quickly realized how powerful it was. We came up with the idea to create fun, one-off, low-budget consumer-facing apps that will generate traffic to our main website and product newsletters. The fact that Retool is low code empowered our team to hack around new ideas without over-commitment. It is a nice way to think outside of the box and have a little engineers' fun!
This is what we did.
The first step was to get the fonts flowing in. With a fonts API, it is effortless to get the project off the ground by hooking up with the data source, and populating the data into Retool's standard table component:
The table is currently showing only raw metadata about the fonts, such as the font family name, font styles, category, etc. While the metadata provides supporting information, the essence of a font is its visual design, which needs to be visually showcased. We have a font file URL field among the data fields, which we can use to create a live preview of the font. Let's put that preview into a custom column.
Each column of the table component can be customized freely. There are two levels of customization:
- Standard options, including Boolean, Button, Checkbox, Date, Dropdown, Integer, URL, Object, String, Text Input...
- Customization by turning on "Render cell as pure HTML" provides almost unlimited possibilities
I like the convenience provided by #1---the long list of supported data formats and presentation styles solves for 90 percent of the use cases. I also enjoy the flexibility provided by #2, and it is what I used to render a live preview of the font using the font file URL. I created a @font-face using the font file URL, then applied this font to the HTML element:
Gamifying your coding font choices
However, simply previewing a list of coding fonts is not enough to attract users; I wanted to spice it up and provide a unique app experience to make it worth people's time. As trained as my eyes are after working with fonts for many years, I still feel helpless when choosing fonts from a long list. Some subtle differences between them are hardly noticeable. That rings especially true for coding fonts, as they inherently share the mono-spaced characteristics already.
But what if you could look at only two fonts at a time, picking the better one, then rinsing and repeating in a "tournament style" until you have the winner?
I assigned the fonts into pairs; just like in the Squid Game, if the total number of players (aka fonts) is odd, the unpaired player automatically wins that round and gets to the next.
Each pair is then battled out in a side by side UI for easy comparison:
After you select the round's winner, the button click will automatically trigger a query to fetch the next font pair recursively until there is only one font left, which is the winner and hopefully your next coding font!
Why I built it with Retool
Five years ago, if I wanted to build this coding font game, I would have had to spend days or weeks hand-coding it in React or other frameworks. But since then, I have discovered no code and low code apps which are essentially libraries of pre-existing informational or functional things. They can be powered by a database or an API, and the interaction layer is standard, often with minimal customization needs. That library of functional things in this case is coding fonts. Our idea was perfect for a low code execution.
Does that mean low code is replacing coding? In my opinion, low code platforms are not replacing coding. They are instead creating an entirely new market. Many products that would have never been developed in the traditional hand-coded way now have a chance to see the light of day. Some examples include apps serving a small number of users that would not be economical to hand-code from the ground up. Without low code, these problems are often not worth solving. In the banking and finance industry, there is "too big to fail"; in product making, there was "too small to exist." However, that is being changed by the no code / low code movement!
I am also seeing a new generation of platforms like Retool that are more open-minded and open-ended. They are not enclosed systems and offer freedom to go off the road by systematically allowing users to write custom code and components. They are endlessly configurable and expandable, intended for engineers and developers of all levels. I am looking forward to witnessing where low code takes us next!
Top comments (0)