{"id":357227,"date":"2021-11-19T13:18:50","date_gmt":"2021-11-19T21:18:50","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357227"},"modified":"2021-12-06T12:37:27","modified_gmt":"2021-12-06T20:37:27","slug":"coding-font-game","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/coding-font-game\/","title":{"rendered":"Coding Font Game"},"content":{"rendered":"\n

A tournament bracket UI<\/a> where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way to suss out your own taste and arrive at a choice.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

(P.S. We have our own little coding fonts website<\/a> to showcase some high-quality favorites.)<\/p>\n\n\n\n

Wenting Zhang documented in a newsletter<\/a> (update<\/strong>: that was originally published on the Retool blog, so updating the link) that she built it the whole thing with Retool<\/a>, meaning she had to write very little code directly, and instead used pre-built components. That’s kind of the point of Retool. It’s like a UI library with existing components for building stuff out quickly, but it goes the extra mile in connecting to your own data. <\/p>\n\n\n\n

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.<\/p><\/blockquote>\n\n\n\n

The two bits of code shared in that post look… pretty complicated. So, in this case, it’s a “low code” thing where those bits of code really hone in on the core functionality and experience, but a lot of the rest of the more mundane and boilerplate code is avoided. Seems compelling to me. In the end, the whole “game” is an <iframe><\/code> pointing to the Retool widget thing.<\/p>\n","protected":false},"excerpt":{"rendered":"

A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way to suss out your own taste and arrive at a choice.<\/p>\n","protected":false},"author":3,"featured_media":357229,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[19000,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-18-at-7.08.33-AM.png?fit=3036%2C2214&ssl=1","jetpack-related-posts":[{"id":325724,"url":"https:\/\/css-tricks.com\/a-microsite-showcasing-coding-fonts\/","url_meta":{"origin":357227,"position":0},"title":"A Microsite Showcasing Coding Fonts","date":"December 1, 2020","format":false,"excerpt":"We made one! It's open source if you want to make it better or fix things. There are quite a few purpose-built fonts for writing code. The point of this site is to show you some of the nicest options so you can be aware of them and perhaps pick\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-12-at-2.44.05-PM.png?fit=1200%2C881&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324911,"url":"https:\/\/css-tricks.com\/compute-cuter\/","url_meta":{"origin":357227,"position":1},"title":"compute cuter","date":"October 30, 2020","format":false,"excerpt":"Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and other accessories. These rainbow cables are great. And speaking of fonts, we're still plucking away at this microsite for coding fonts and it's ripe for contribution if\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/Screen-Shot-2020-10-30-at-12.17.39-PM.png?fit=1200%2C855&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350569,"url":"https:\/\/css-tricks.com\/some-typography-links-vii\/","url_meta":{"origin":357227,"position":2},"title":"Some Typography Links VII","date":"September 1, 2021","format":false,"excerpt":"All-things-typography, from a hard-edged monospaced variable font to fonts in the \"Twilight Zone\" ... and much, much more.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/tb-signs_1024x1024@2x-1.png?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304176,"url":"https:\/\/css-tricks.com\/just-dropping-some-type-links\/","url_meta":{"origin":357227,"position":3},"title":"Just Dropping Some Type Links","date":"March 3, 2020","format":false,"excerpt":"I've had a bunch of tabs open that just so happen to all be related to typography, so I figured I'd give myself the mental release of closing them by blogging them. How's that for a blog post format for ya: whatever random tabs you've had open for far too\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/font-directory.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":17,"url":"https:\/\/css-tricks.com\/designing-for-a-lightbox\/","url_meta":{"origin":357227,"position":4},"title":"Designing For A Lightbox","date":"July 25, 2007","format":false,"excerpt":"The 37 Signals Blog, Signal vs. Noise, has a post about a month ago with an interesting observation: \"Designing for the iPhone is like a hybrid of print and web design.\" Their point was with the iPhone, you know the exact size of the screen, you know the exact browser,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339574,"url":"https:\/\/css-tricks.com\/some-typography-links-iv\/","url_meta":{"origin":357227,"position":5},"title":"Some Typography Links IV","date":"May 7, 2021","format":false,"excerpt":"These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/system-fonts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-18-at-7.08.33-AM.png?fit=1024%2C747&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357227"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=357227"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357227\/revisions"}],"predecessor-version":[{"id":358525,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357227\/revisions\/358525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/357229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=357227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=357227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=357227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}