Open Source Friday with Demo Time - A VS Code extension

Key Concepts

• Open Source Contribution: Ways to contribute to open source projects, including issue triage and tackling "good first issues."
• Live Coding Demo Challenges: Common issues faced during live coding demos, such as forgetting settings, typos, and losing focus.
• Demo Time: A Visual Studio Code extension for scripting and automating live coding demos and presentations.
• Scripting Demos: Preparing demos in advance to ensure confidence and repeatability.
• Focus Management: Keeping the audience focused on the content by automating tasks and highlighting specific code sections.
• Markdown Slides: Creating slides using markdown within Visual Studio Code for seamless integration.
• Attendee Experience: Enhancing the attendee experience by providing tangible resources and allowing them to explore the demo at their own pace.
• Configuration Editor: A user-friendly interface for configuring demo steps and actions.
• Engage Time: A tool for interactive presentations with polls, Q&A, feedback, and networking features.
• Web Views: Using web views within Visual Studio Code to display slides and other interactive elements.

Open Source Contribution and GitHub Universe

The video begins by addressing the question of how to get started contributing to open source projects. It suggests:

• Issue Triage: Helping maintainers by identifying and verifying bugs.
• "Good First Issues": Many repositories, like Home Assistant (which has 2.9K issues), label issues as "good first issues" for newcomers.

The video also promotes GitHub Universe, an event for open-source enthusiasts, featuring workshops, panels, demos, and networking opportunities. Super early bird tickets were available until July 8th.

Introduction to Demo Time and the Problem It Solves

Andrea Griffith introduces Elio Struyf, a GitHub Star and Microsoft 365 influencer, to discuss Demo Time, a tool designed to alleviate the stress of live coding demos.

Elio explains that Demo Time originated from his own need to streamline repetitive presentations. He wanted a way to script demos and manage slides without losing focus or context switching between applications.

Challenges of Live Coding Demos

Elio highlights common problems encountered during live coding demos:

• Forgetting Settings: Speakers often forget to adjust font sizes, color themes, or turn on "do not disturb" mode.
• Typos: Live coding often leads to typos, disrupting the flow of the presentation.
• Losing Focus: Technical difficulties can cause speakers to lose their train of thought and struggle to recover.

A poll reveals that many viewers have experienced or witnessed live demos going wrong.

What is Demo Time and Why Use It?

Demo Time is presented as a "safety net" for live coding, offering the following benefits:

• Scripting Confidence: Pre-scripting demos provides confidence and reduces the risk of errors.
• Integrated Slides: Presenting slides within the code editor eliminates context switching.
• Audience Focus: Automation allows speakers to focus on storytelling rather than typing or clicking.

Elio contrasts the traditional PowerPoint script with a Demo Time script, which integrates code, slides, and automated actions.

Scripting Demos and Code Automation

Elio demonstrates how Demo Time automates code typing and highlighting:

• Automated Typing: The tool can automatically type code snippets, eliminating typos and saving time.
• Code Highlighting: Specific lines of code can be highlighted to draw the audience's attention, while other lines are blurred.
• Confidence Boost: A poll shows that viewers believe automation would make them more confident in presenting.

Beyond Code: Automating Visual Studio Code

Demo Time can automate any action within Visual Studio Code, including:

• Command Palette: Executing commands from the command palette, such as toggling full-screen mode.
• Terminal Commands: Running build scripts and executing applications within the terminal.

Elio demonstrates how to run a build process and start a Node.js application using Demo Time.

Slides as Markdown

Elio explains why he prefers to create slides using markdown within Visual Studio Code:

• No Context Switching: Staying within the editor eliminates distractions.
• Markdown Simplicity: Markdown is easy to use and provides full control over formatting.
• Custom Themes: Slides can be styled with custom themes to match branding.

He shows the markdown source code for a slide and emphasizes that the slides are also part of the demo time experience.

Benefits for Attendees

Demo Time benefits attendees by:

• Focused Speaker: The speaker is more focused and less likely to make mistakes.
• Tangible Resources: Attendees receive a repository containing the entire presentation, including code and slides.
• Self-Paced Learning: Attendees can explore the demo at their own pace after the presentation.

A poll confirms that most viewers would download and reuse the demos afterward.

Configuration Editor and Actions

Elio introduces the configuration editor, a user-friendly interface for creating and editing demo scripts:

• YAML/JSON Files: Demos can be defined using YAML or JSON files.
• Steps and Actions: Each demo consists of multiple steps, each containing one or more actions.
• Predefined Actions: A variety of predefined actions are available, including opening files, setting themes, and running commands.
• Co-pilot Integration: Demo Time integrates with GitHub Co-pilot, allowing users to generate code and text using AI.

He demonstrates how to use the configuration editor to create a demo that interacts with GitHub Co-pilot.

Finding and Contributing to Demo Time

Elio provides information on where to find Demo Time:

• demotime.show: The official website for Demo Time.
• GitHub Repository: The source code is available on GitHub under the NX monorepo.

He encourages viewers to contribute to the project by reporting issues, suggesting features, or submitting code.

Key Quotes

• "PowerPoints is typically created or used for making your talks repeatable... Now, demo time makes your technical talks repeatable because you script it once, you can use it any time." - Elio Struyf
• "Let's make your next demo be remembered for what you said and not the mistakes that you actually made during the demo." - Elio Struyf

Demo Time Architecture and Usage

Elio clarifies that the slides are displayed using web views within Visual Studio Code, not a separate browser. He demonstrates how to initialize Demo Time and create a new demo file from a sample template. He also shows how to set zoom levels and highlight code snippets.

Integrating Demo Time with Existing Projects

Elio shares an example of how to integrate Demo Time with an existing code base. The demo files live at the root of the project, allowing them to be easily reused in other presentations.

Future Roadmap and Community Contributions

Elio discusses the future roadmap for Demo Time, including:

• Chrome Extension: An extension for interacting with Chrome tabs.
• Web Components: Support for custom web components in slides.
• PowerPoint Converter: A tool for converting PowerPoint presentations to Demo Time slides.
• Snippets Gallery: A repository of reusable code snippets and scripts.

He emphasizes the importance of community contributions and encourages viewers to submit their ideas and feedback.

Engage Time: Interactive Presentation Tool

Elio introduces Engage Time, a tool for creating interactive presentations with features such as:

• Q&A: A Q&A section where attendees can ask questions and upvote others.
• Polls: Various poll types, including multiple choice, word clouds, and scoring.
• Feedback: A feedback form for attendees to provide feedback to the speaker.
• Connections: A feature for attendees to connect with the speaker after the presentation.
• Analytics: Data on attendee engagement, such as the number of participants and their activity.

He demonstrates the attendee experience and the speaker's view of the Engage Time dashboard.

Conclusion

Andrea Griffith summarizes the benefits of Demo Time and encourages viewers to support the open-source project. She highlights the time-saving and stress-reducing aspects of the tool, as well as its potential for enhancing presentations and training sessions. She also encourages viewers to contribute to the project and share their experiences.