Coding Font Game

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Eine Turnierbaum-Benutzeroberfläche, bei der du deinen Favoriten zwischen zwei Coding-Schriftarten auswählst und deine Entscheidungen bis zum endgültigen Gewinner eingegrenzt werden. Eine clevere Methode, um deinen eigenen Geschmack herauszufinden und eine Wahl zu treffen.

(PS: Wir haben unsere eigene kleine Website für Coding-Schriftarten, um einige hochwertige Favoriten zu präsentieren.)

Wenting Zhang dokumentierte in einem Newsletter (Update: Dieser wurde ursprünglich im Retool-Blog veröffentlicht, daher wird der Link aktualisiert), dass sie das Ganze mit Retool erstellt hat, was bedeutet, dass sie nur sehr wenig Code direkt schreiben musste und stattdessen vorgefertigte Komponenten nutzte. Das ist irgendwie der Sinn von Retool. Es ist wie eine UI-Bibliothek mit vorhandenen Komponenten zum schnellen Erstellen von Dingen, geht aber noch einen Schritt weiter, indem es sich mit deinen eigenen Daten verbindet.

Vor fünf Jahren hätte ich, wenn ich dieses Coding-Font-Spiel erstellen wollte, Tage oder Wochen damit verbringen müssen, es in React oder anderen Frameworks von Hand zu codieren. Aber seitdem habe ich No-Code- und Low-Code-Anwendungen entdeckt, die im Wesentlichen Bibliotheken mit bereits vorhandenen informativen oder funktionalen Dingen sind. Sie können von einer Datenbank oder einer API angetrieben werden, und die Interaktionsebene ist Standard, oft mit minimalen Anpassungsanforderungen.

Die beiden Code-Schnipsel, die in diesem Beitrag geteilt werden, sehen… ziemlich kompliziert aus. In diesem Fall handelt es sich also um eine „Low-Code“-Sache, bei der diese Code-Schnipsel die Kernfunktionalität und das Erlebnis wirklich auf den Punkt bringen, aber ein Großteil des restlichen, eher mühsamen und standardmäßigen Codes wird vermieden. Erscheint mir überzeugend. Am Ende ist das ganze „Spiel“ ein <iframe>, der auf das Retool-Widget-Ding verweist.