How I Created a Coding Font Game with Low Code
Wenting Zhang 28 October 2021 • five min learn As engineers, we spend a lot of time in entrance of our pc monitors. The coding font that we spend eight hours a day observing has a lot to do with our productiveness and luxury. I am very choosy about coding fonts and love to experiment with that atmosphere to seek out the most efficient stability. You too? That’s nice as a result of I made an app only for you! I will undergo how we create CodingFont.com—a gamified enjoy that is helping you in finding your real love among coding fonts. The profitable display screen of the coding font match First off, a little advent. I am the co-founder and head engineer of Typogram. I write a weekly publication about my entrepreneur developer adventure; test it out right here. Typogram is helping non-designers—particularly startup founders and small industry homeowners—create a emblem identification gadget together with emblem, colour palette, and typography, all with out paying for a dear designer, or having to be told fancy design gear. Taking Coding Font from concepts to execution As our corporate title suggests, our primary product (these days underneath building) is closely about typography, and certainly we spend maximum of our time dealing with fonts—validating them, tagging them, licensing them. Managing fonts internally was once attending to be a problem, to the purpose the place we had to construct inner gear; this is once we met Retool. After the usage of Retool to create inner font control gear, we briefly discovered how tough it was once. We got here up with the theory to create a laugh, one-off, low-budget consumer-facing apps that can generate visitors to our primary website and product newsletters. The proven fact that Retool is low code empowered our workforce to hack round new concepts with out over-commitment. It is a great technique to assume out of doors of the field and feature a little engineers’ a laugh! This is what we did. The first step was once to get the fonts flowing in. With a fonts API, it’s easy to get the undertaking off the bottom by way of hooking up with the information supply, and populating the information into Retool’s same old desk part: Populate desk with font knowledge The desk is these days appearing most effective uncooked metadata concerning the fonts, such because the font circle of relatives title, font kinds, class, and so on. While the metadata supplies supporting knowledge, the essence of a font is its visible design, which must be visually showcased. We have a font document URL box a number of the knowledge fields, which we will be able to use to create a are living preview of the font. Let’s put that preview into a customized column. Customize desk column to render font preview Each column of the desk part can also be custom designed freely. There are two ranges of customization: Standard choices, together with Boolean, Button, Checkbox, Date, Dropdown, Integer, URL, Object, String, Text Input… Customization by way of turning on “Render mobile as natural HTML” supplies nearly limitless probabilities I like the benefit supplied by way of #1—the lengthy checklist of supported knowledge codecs and presentation kinds solves for 90 % of the use circumstances. I additionally benefit from the flexibility supplied by way of #2, and it’s what I used to render a are living preview of the font the usage of the font document URL. I created a @font-face the usage of the font document URL, then carried out this font to the HTML part: Gamifying your coding font…
Like to keep reading?
This article first appeared on retool.com. If you'd like to keep reading, follow the white rabbit.