15
15 Comments

Show IH: WalkThru - a better way to explain your code for docs, tutorials, and teaching

https://walkthru.netlify.app

Hey IH,

I'm Anthony and I've created "WalkThru".

It’s like a tutorial blog post except the code is:

  • Focused ⇒ easier to read.
  • Compiled from GitHub ⇒ accurate, well-formatted, and up-to-date.

I’d love to hear your feedback

submitted this linkon June 27, 2022
  1. 3

    I like this idea a lot! is there any way we could integrate it with our Docusaurus (we use it for https://wasp-lang.dev/docs)? This might be a nice power-up for our "Build a Todo app" tutorial

    1. 1

      Yeah, it's a React component so it should work just fine with Docusaurus. I'd be happy to provide any assistance you need with integrating it. Feel free to DM me here or on twitter @anthonygore

  2. 1

    Wow, I love this concept. I'm a principal software developer in a team of 12 and we struggle with code documentation within the team as well as with clients. Deploying this sort of instruction with the app seems very useful.

    The particular use case I'm focused on is configuration. We deploy machine automation with a boatload of various configuration instructions and setup that can take days. I can see using this for guiding the startup engineers for sure.

    A brief comment about the tutorial. I am not familiar with React or FrontMatter, so it would be helpful to see a simple explanation of those as well as a tree structure of all assets deployed for the tutorial.

    1. 1

      Thanks for the feedback!

      I'd be happy to assist you in setting it up if you need. Feel free to connect with me here or through Twitter @anthonygore

      1. 1

        Thanks, We do not have any React apps running in the field, are there other options?

        1. 1

          It would be possible if I provided a build with React bundled that could be embedded as an iframe.

          I think it's a good feature so I've created an issue to track development. Might take me a few days to get it done.

          https://github.com/walkthru/walkthru/issues/2

          1. 1

            I'll be happy to test drive it when you are done, but don't rush on my account.

  3. 1

    This is a really interesting idea! I'm not quite sure how I'd use it, though. It's kind of like Storybook, but for code. I'd be interested in hearing about real-world implementations and how it would fit in with codebases.

    1. 1

      Thanks for the feedback!

  4. 1

    This might be interesting for API and library docs. Most of the WBE Members are developers, I will ask around to see what they think

    1. 1

      This comment was deleted 4 years ago

  5. 1

    I like the idea of highlighting code portion in examples.

    Few notes:

    1. Option to highlight related code block on mouse over a specific paragraph/phrase.
    2. A step may has multiple highlightable sections.
    3. And, I think, this one is the most important one - think how this can be integrated into an existing non-React website/blog.
    1. 1

      Thanks for the feedback!

      For 1. you mean if the user hovers over a code block there would be a copy option shown?

      P.S. I'm looking for contributors if you or anyone is interested https://github.com/walkthru/walkthru

      1. 1

        For 1. you mean if the user hovers over a code block there would be a copy option shown?

        I mean situation when step text has two paragraphs, explaining different portions of code. So hovering on first paragraph or key phrase will highlight first code block and hovering over second paragraph/key phrase will highlight second code block. Something like this.

        P.S. as for contribution - I'm glad to help, but it is not my tech stack.

        1. 1

          Okay I get you now. Thanks, I'll definitely keep it in mind.

  6. -1

    This comment has been voted down. Click to show.