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 displays. The coding font that we spend eight hours a day gazing has a lot to do with our productiveness and luxury. I am very choosy about coding fonts and love to experiment with that surroundings to search out the most productive 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 revel in that is helping you to find your real love among coding fonts. The profitable display of the coding font match First off, a little creation. I am the co-founder and head engineer of Typogram. I write a weekly e-newsletter about my entrepreneur developer adventure; test it out right here. Typogram is helping non-designers—particularly startup founders and small industry house owners—create a logo id gadget together with emblem, colour palette, and typography, all with out paying for a pricey designer, or having to be told fancy design equipment. Taking Coding Font from concepts to execution As our corporate identify suggests, our primary product (lately 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 used to be attending to be a problem, to the purpose the place we had to construct inner equipment; this is after we met Retool. After the use of Retool to create inner font control equipment, we temporarily learned how robust it used to be. We got here up with the theory to create a laugh, one-off, low-budget consumer-facing apps that may generate visitors to our primary website and product newsletters. The indisputable fact that Retool is low code empowered our group to hack round new concepts with out over-commitment. It is a great approach to assume outdoor of the field and feature a little engineers’ a laugh! This is what we did. The first step used to be to get the fonts flowing in. With a fonts API, it’s easy to get the undertaking off the bottom through hooking up with the knowledge supply, and populating the knowledge into Retool’s same old desk part: Populate desk with font information The desk is lately appearing handiest uncooked metadata concerning the fonts, such because the font circle of relatives identify, font kinds, class, and so forth. While the metadata supplies supporting data, the essence of a font is its visible design, which must be visually showcased. We have a font record URL box a few of the information 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 may 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 through turning on “Render cellular as natural HTML” supplies nearly limitless chances I like the ease equipped through #1—the lengthy checklist of supported information codecs and presentation kinds solves for 90 % of the use circumstances. I additionally benefit from the flexibility equipped through #2, and it’s what I used to render a are living preview of the font the use of the font record URL. I created a @font-face the use of the font record URL, then carried out this font to the HTML part: Gamifying your coding font possible choices However, » Read More
Like to keep reading?
This article first appeared on retool.com. If you'd like to keep reading, follow the white rabbit.