Coding Fonts Playground
Day 24 of #30DaysOfStartingUp
In this issue, I will share one lesson I learned today.
Storytime!
Yesterday, I wrote a tutorial about Retool, demoing a process to rebuild the Google Fonts website within 30 minutes. Retool’s Twitter account picked it up and shared it! I was pleased with the project and continued to hack around it today, even though I was not supposed to.
Seeing what Google Fonts API and Retool can do together, I came up with an idea to create a “Coding Fonts Playground” to help programmers pick coding fonts easily. My secret goal is to make a traffic magnet to promote my product and newsletters because my last growth hack project has been successful.
I had most of the functionalities done from yesterday’s tutorial piece. All I need to do is to:
Filter the table to show monospaced fonts only.
Add a code preview window.
I blazed through #1 by altering the data transformer in Retool:
I get stuck at #2. I wanted the code preview to look very fancy with syntax highlighting and color theme “Cobalt,” like what I had in my other project CSS Mono microsite:
I need to use javascript like prism.js to achieve syntax highlighting; however, I found out Retool blocked all javascript in the iFrame component. I have to write a custom Retool component using react.js to perform syntax highlighting.
I entertained the direction for two hours until dinner time when I paused my work to cook. Cooking is a great time to think. It hits me: I just need a code preview window. Syntax highlighting adds flair, but it is hardly necessary. I could get #2 done in a few minutes, but instead, I spent hours!
After dinner, I wrapped up #2 with nothing fancy but <pre>
<code>
tags and simple CSS:
“If users like a particular font, they may want to download it.” I thought. So I added another requirement to the app feature list:
3. Add download fonts button
It surprised me how little it takes to add such a crucial feature. I just add a button to open this link:
https://fonts.google.com/download?family={{encodeURIComponent(table_fonts.selectedRow.data.family)}}
You can play with my current progress at:
https://wentin.github.io/coding-font/
So there it is my story: what I spent most of my day doing is essentially worthless, and what I spent 5 mins doing makes the app become useful. It is a real-life example of the 80/20 rule: 80% of the value to the customer comes from 20% of the effort, and vice versa!
What I could do better next time: prioritize and put my effort into high return over investment features. Because it is a fun mini-project, I let go of product management and work rather linearly.
I was also overly stubborn on getting the syntax highlighting to work. I started to implement it because it was easy to do last time, thinking it would be low-hanging fruit. I forgot to re-adjust my plan when I found out it was not easy because of how Retool handles iFrame. I got lost in my train of thought and was mindlessly fixated to get it to work.
Have you had similar moments? Let me know your story!