The Didact project is designed to fill a void in Visual Studio Code, but what exactly is it? And more importantly, why should you care?
Didact started as a "What if?" VS Code doesn’t provide a great way to walk users through a step-wise tutorial. "What if" we could meet that need by combining the following:
- A simple markup language (such as Markdown or AsciiDoc).
- The ability to render the markup as HTML using the VS Code webview.
- A way to invoke the commands we create for each VS Code extension.
And over the course of a day or so of coding, I had a working prototype.
Why Didact?
We needed a name, so after Googling for unique words I didn’t find in the VS Code Marketplace, I came across "Didact." A Didact is an individual gifted, trained, or intending to instruct—a perfect term to describe what we’re after.
At a high level, the Didact framework is meant to instruct users in a useful way regarding how to complete tasks. The project does this through a combination of text, images, and active links that show VS Code functionality in action. The tricky part is that Didact should make it easy for non-developers to not only write the tutorials but also to interact with the commands they want to invoke. That’s where markup languages like Markdown and AsiiDoc come into the picture. The power comes from pairing that simplicity with VS Code's simple command framework.
So what does Didact do?
When developers write a VS Code extension, they create commands and call them via menus, buttons, and the command palette. The API provides a great way to invoke them in other places, too. That’s what we leverage Didact.
The goal of Didact is to employ the "Tell Them, Tell Them Again, and then Tell Them What You Told Them" approach using a combination of text (or text and images) and actions. Imagine that you are presented with Figure 1 in VS Code.
This window offers a couple of things. At the top, it provides a brief description that explains what the Command Palette is used for and how to access it. Below, it includes a simple link that opens the palette with a click, showing what happens when you press the right series of keys (e.g., Ctrl+Shift+P).
If you click the link, it shows you how to invoke a command through the regular keys or menu items, as shown in Figure 2.
The text itself is written in Markdown and pulls in simple images plus a few links. All the "heavy lifting" behind the scenes in the active Didact link is provided through a simple URI:
didact://?commandId=workbench.action.showCommands&completion=Opened%20Command%20Palette.
If we unpack that URI, we find the command ID for showCommands in VS Code (which is triggered when you press Ctrl+Shift+P on your keyboard) and a completion message that shows what Didact did behind the scenes in a small information popup in the lower right corner, as shown in Figure 2.
So, in this case, we told you what we were going to tell you, told you, showed it in action, and then showed it again, reinforcing the effects of clicking the right keys.
What’s next for Didact?
We’re just getting started with Didact and have plans to expand in a variety of ways, including the project scaffolding functionality. Scaffolding lets you quickly create a folder/file structure with example files to get you started with the amazing technologies VS Code lets you access.
If you’re interested in checking out this evolving framework, or want to get involved, we encourage you to drop by our GitHub project page and poke around. Or, install the vscode-didact extension and play with it locally.
It’s early, but we’re excited to see where Didact evolves over the next few months. Have ideas for how this framework can be used? We’d love to hear from you!
Last updated: June 29, 2020