top | item 39832840

(no title)

tip_of_the_hat | 1 year ago

I'm working https://annotate.dev, a tool inspired by the Stripe documentation, to let anyone create step by step code walkthroughs. Here's a sample of a walkthrough you can create: https://annotate.dev/p/hello-world/learn-oauth-2-0-by-buildi...

Would love to hear any feedback thoughts!

discuss

order

roijaboc|1 year ago

This is a great app, especially in this age of AI code generation, I am already using it. Looking forward for features such as light mode and exportability among other things.

orblivion|1 year ago

This seems like a cool idea but I'd have to see it in action for something I need to learn.

The first thing that jumps to mind is that I want to click on a piece of code and see the explanation for it. It seems that it only goes in the other direction. I could imagine looking at the code and understanding most of it and just wanting to understand part of it.

I could anticipate an issue though - it could be many-to-one from explanation to code. The UI for that would be complicated.

williamdclt|1 year ago

If you’ve not seen it, there’s a vscode extension called CodeTour that does something similar, could be good inspiration (or maybe you already do better!)

tip_of_the_hat|1 year ago

It's the first time I've heard of CodeTour, I'm really impressed from what I've seen thus far. Digging a bit deeper now, thanks for sharing!

trenchgun|1 year ago

This is great idea!

I actually have several potential improvement ideas.

1. Put the walkthrough it in a graph, or a minimap to see the whole picture easily? Or in a https://c4model.com/ visualization 2. Why not make clickable code references visually stand out? 3. Make a VScode extension for it

tip_of_the_hat|1 year ago

Thanks for taking a look and sharing feedback!

I'm not familiar with the c4 model, I'll need to investigate.

> Why not make clickable code references visually stand out

Is the goal here that you want to know that a specific text block annotates a part of the code?

> Make a VScode extension for it

I think I will! I need to noodle a bit on the user experience here

ch1234|1 year ago

This is awesome!! I can see a major use case for enterprise or government but along with that would come the desire for on-prem. Any chances of that happening?

tip_of_the_hat|1 year ago

Thanks for checking it out!

I'd be happy to build and support an on-prem solution, but I'd a need commitment from an enterprise/government org. If that's something you're interested in, shoot me an email at alex@annotate.dev!

sentientslug|1 year ago

This is a really clever idea, and worked great on mobile as well. Is there a way to choose to display the code window underneath the documentation instead of on top?

tip_of_the_hat|1 year ago

Thanks for the kind words!

Not currently, can you elaborate why you'd want to the code window at the bottom?

entropie|1 year ago

This is really cool. I wish there was something like that when I learned to code.

Kkoala|1 year ago

That's a cool idea!

rafbgarcia|1 year ago

Great idea! What did you use for designing the UI?

tip_of_the_hat|1 year ago

Thank you for checking it out!

I use Figma to get a proof of concept of how I want things laid out. From there it's more tinkering at the code level.

mclightning|1 year ago

can this be self-hosted?

tip_of_the_hat|1 year ago

Not yet, what use case do you have in mind for self hosting?