https://futureofcoding.org/ logo
#share-your-work
Title
# share-your-work
d

Daniel Garcia

11/24/2023, 8:03 PM
Followup on my
Colorful types
project. I’m trying to create a
map
for a codebase with different zoom levels. I have been thinking about having 3 zoom levels: • Level 1: Only colors for both types & functions • Level 2: Colors and names for types, functions and parameters • Level 3: Shows the entire source file (maybe with some extra color sugar on top?) Here are a couple of screenshots of level 1 & 2, and video of the WIP interface. PS. Anyone have good recommendations of typescript codebases with a couple dozen source code files which I can use for testing?
k

Kartik Agaram

11/24/2023, 8:34 PM
Does it have to be any particular language? https://git.sr.ht/~akkartik/template-live-editor might be a good candidate if you can handle Lua.
d

Daniel Garcia

11/24/2023, 8:46 PM
Good question. It will work in any static language (I’m using tree-sitter for parsing), but I’m currently focusing only in typescript for now. I updated the post to mention it
o

oPOKtdJ4UbTdPaZig6jg

11/25/2023, 5:07 AM
I find that there are usually way too many types to make the colors meaningful. Grouping the types (containers / records / unions..) doesn't really make that much sense. So you just end up using up all colors.. starving the UI of any usable colors. Maybe a better approach is being able to highlight a certain type, and that one is colored throughout the program.
i

Ivan Reese

11/25/2023, 5:43 PM
Yeah, this feels like a really promising beginning of an exploration. If you keep pulling the thread, tuning the design, trying different approaches, I bet it'll lead somewhere compelling
d

Daniel Garcia

11/25/2023, 6:40 PM
@oPOKtdJ4UbTdPaZig6jg I agree that highlighting one type throughout the code base sounds useful for exploration. I’m still thinking of a good way to implement it. What do you mean by “starving the UI of any usable colors”?
o

oPOKtdJ4UbTdPaZig6jg

11/26/2023, 5:36 AM
You only have a limited number of distinguishable colors. If you use them all for types, you don't have any left for anything else. Such as: Error (red), Info (yellow?), Ok (green?), Link (blue?) etc. Maybe you even want to do some syntax highlight later on.