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 laptop monitors. The coding font that we spend eight hours a day watching 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 steadiness. 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 event First off, a little creation. 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 trade house owners—create a emblem id device together with brand, colour palette, and typography, all with out paying for a dear designer, or having to be informed fancy design gear. Taking Coding Font from concepts to execution As our corporate identify suggests, our primary product (recently beneath 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 temporarily discovered how tough it was once. We got here up with the theory to create amusing, one-off, low-budget consumer-facing apps that can generate visitors to our primary website and product newsletters. The undeniable fact that Retool is low code empowered our workforce to hack round new concepts with out over-commitment. It is a great option to assume out of doors of the field and feature a little engineers’ amusing! 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 mission off the bottom by way of hooking up with the knowledge supply, and populating the knowledge into Retool’s same old desk part: Populate desk with font knowledge The desk is recently appearing most effective uncooked metadata in regards to the fonts, such because the font circle of relatives identify, font types, class, and many others. While the metadata supplies supporting data, the essence of a font is its visible design, which must be visually showcased. We have a font report URL box a few of the knowledge fields, which we will use to create a reside 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 by way of turning on “Render cellular as natural HTML” supplies nearly limitless chances I like the benefit supplied by way of #1—the lengthy listing of supported knowledge codecs and presentation types solves for 90 % of the use instances. I additionally benefit from the flexibility supplied by way of #2, and it’s what I used to render a reside preview of the font the usage of the font report URL. I created a @font-face the usage of the font report URL, then implemented this font to the HTML component: Gamifying your coding font alternatives 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.