DEV Community: Elio Struyf

Introduction to Demo Time – Use Visual Studio Code as your presentation tool

Elio Struyf — Fri, 11 Apr 2025 11:07:47 +0000

Demo Time v1.1.0 Released: Now with Animations and Mermaid Diagrams!

Elio Struyf — Fri, 11 Apr 2025 10:30:39 +0000

I'm excited to share that Demo Time just reached version 1.1.0 — and it's packed with features to help you run smoother, more dynamic live presentations directly from Visual Studio Code.

💡 What's Demo Time?

Demo Time is a VS Code extension built to simplify live coding demos, workshops, and technical presentations. It helps you control the pace, structure your flow, and keep everything running stress-free — all within your editor.

✨ What’s New in v1.1.0?

🎬 Slide Animations

You can now animate slide content using:

fade-in: For a smooth entrance
text-typewriter: Type text one character at a time
text-highlight: Highlight important phrases with emphasis

These are great for storytelling, guiding your audience's attention, or adding that little extra polish.

📊 Mermaid Diagram Support

We now support Mermaid.js syntax directly in slides! That means you can:

Sketch flowcharts
Show sequence diagrams
Visualize architecture
And more...

All without leaving VS Code.

Example:

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

This will render directly on your slide during the demo!

📦 How to Get It

📥 Install or update from the Visual Studio Code Marketplace

📖 Full docs: demotime.elio.dev

📹 Bonus: See It In Action

I created a short demo video showing the animations and Mermaid integration in action.

🙌 Feedback Welcome!

I’d love to hear what you think if you try it out!

Have ideas or run into bugs? Open an issue on GitHub or drop a comment here on DEV.

Thanks for supporting Demo Time, and happy presenting!

🧑‍💻🎤✨

👉 Get Demo Time for VS Code

Check out this post to present your code demos without stress

Elio Struyf — Mon, 06 Jan 2025 09:42:53 +0000

Making Live Coding Demos Easier with Demo Time

Elio Struyf ・ Dec 28 '24

#speaking #webdev #programming #vscode

[Boost]

Elio Struyf — Sat, 28 Dec 2024 18:05:07 +0000

Making Live Coding Demos Easier with Demo Time

Elio Struyf ・ Dec 28 '24

#speaking #webdev #programming #vscode

Making Live Coding Demos Easier with Demo Time

Elio Struyf — Sat, 28 Dec 2024 17:02:19 +0000

Live coding demos can be one of the most engaging ways to share knowledge, showcase skills, and teach others. However, they come with their fair share of challenges—technical hiccups, time constraints, or simply the fear of something going wrong in front of an audience. Enter Demo Time, a tool I created to make live coding demos easier and stress-free. From creating files, to inserting code, or highlighting certain code blocks, these actions are all possible with Demo Time.

What is Demo Time?

Demo Time is a Visual Studio Code extension to streamline your live coding presentations. It helps you focus on what truly matters—delivering value to your audience—by automating mundane tasks, organizing your scripts, and ensuring you’re always prepared.

Key Features

Step-by-step guidance: Organize your demos into clear, manageable steps, so you never lose track of where you are.
Automation ready: Run your demos with just a click, saving time and avoiding errors.
Visual indicators: Highlight where you are in your demo flow to keep both you and your audience aligned.
Customizable: Tailor it to fit your demo style, project needs, and preferences.
Visual Studio Code commands support: Beside the Demo Time actions, you can also configure your demos to run Visual Studio Code commands.

Why Did I Create Demo Time?

As someone who often presents live demos in sessions, I know the pressure of balancing technical accuracy with audience engagement. I wanted a tool that could act as my co-pilot, reducing the chance of errors while enabling me to deliver a polished presentation.

How to Get Started

Visit the Demo Time site and explore its features.
Install the extension in your IDE.
Create a demo script, define your steps, and customize the flow to your liking.
Practice with Demo Time to ensure seamless execution during your presentation.

On the website, you can find some example projects and showcases of where Demo Time is used.

Use Cases

Conferences: Simplify coding demonstrations.
Workshops: Guide attendees through hands-on exercises.
Internal Training: Make onboarding or knowledge-sharing sessions smoother.

Feedback and Collaboration

Demo Time is a project close to my heart, and I’d love to hear your thoughts. Whether it’s ideas for new features or stories of how Demo Time helped your presentations, let’s connect and make this tool even better together.

Feel free to submit your feedback to the Demo Time - GitHub repository.

Final Thoughts

Live demos don’t have to be nerve-wracking. With Demo Time, you can focus on sharing your expertise while letting the tool handle the logistics. Give it a try, and experience the difference in your next presentation!

Front Matter version 4 coming soon

Elio Struyf — Mon, 20 Sep 2021 20:13:58 +0000

Currently, I'm preparing the next major version of Front Matter - a full CMS running in Visual Studio Code. Front Matter allows you to customize it to your needs, like adding your own custom Node.js scripts to automate additional tasks.

A big PRO about Front Matter is that you get a CMS that doesn't require any account or APIs to manage your content.

In version 4 there will be a couple of big changes like:

Content-Type support with new fields types: image, choice, date, ...
Image selection support for your articles
Team level settings: move your settings from the user workspace level to a higher level to share with the rest of your editors.

It would be great if you would give Front Matter a try and a GitHub ⭐️ the repo.

Check out the beta release notes: v4.0.0 release notes.

frontmatter.codes

Creating a VSCode extension for all other extensions

Elio Struyf — Thu, 08 Jul 2021 12:32:11 +0000

Earlier this week, I wanted to a couple of action buttons to the Visual Studio Code sidebar. To do this, you will need to register a button for the activity bar and create a view panel to show your sidebar actions.

As this extension would only have two to three actions, it would be a bit overkill, but the use case was still there. A button makes it easier than searching the command in the command palette. This use case made me wonder, can I create an extension that another extension can use to share or enhance their experience.

I wanted to make it easier for extensions to add their actions to a side panel without too much overhead. With this idea in mind, I started developing.

The extension

The extension I created is the Extension panel, and it offers a sidebar view panel which allows other extensions to link their actions to it.

The communication flow

As extensions run in their context, I needed to find a simple way to make it possible to share the configuration between them.

The trick here is to use a VSCode command. The extension panel code, will try to execute the <publisher>.<your-extension-name>.panel.registration command. To register your extension, all you need to do is specify this command with a configuration like this:

context.subscriptions.push(vscode.commands.registerCommand('<publisher>.<your-extension-name>.panel.registration', () => {
        return {
            id: '<your-extension-name>',
            title: 'Extension actions',
            description: 'Actions for testing purposes only.',
            actions: [{
                title: 'Action 1',
                command: 'vscode-extension-panel.panel.test',
                data: true,
                type: "checkbox"
            }, {
                title: 'Action 2',
                command: 'vscode-extension-panel.panel.test',
                data: 'Just extra text',
                type: "button"
            }]
        };
    })
);

When the extension panel's code executes the registration command, it will retrieve the specified configuration and show the defined actions.

When there is no registration command present, it will fail internally and skip the extension.

If you are an extension developer for Visual Studio Code, add your actions without writing a whole new sidebar panel. I recommend you to give the Extension Panel a try.

PS: If you would use the extension, please submit a PR to add your extension to the README.

Deploy your Azure Functions as a package from GitHub Actions

Elio Struyf — Mon, 03 May 2021 07:45:37 +0000

For Squarl, I started to implement a couple of improvements for the back-end running on Azure Functions. I created these functions with TypeScript. In the past, I used webpack and later Azure Funcpack to bundle my functions to one file per function. That way, the host does not have to do all those read actions for retrieving the dependencies.

As I wanted to do the same thing, I read using Azure Funcpack is not supported/maintained anymore. Instead, you should use the run from package functionality.

What is the run from package option?

Instead of bundling, you install your dependencies, build your solution, and compress the directory as a ZIP file.

No significant changes, but now comes the cool part. The ZIP package gets used by the Azure Functions to run the function's logic. Instead of pushing your files to the wwwroot directory, the app service loads the ZIP package as a virtual directory.

This option improves the load times, deployment times, and more.

If you want to use this functionality, you will have to set the WEBSITE_RUN_FROM_PACKAGE setting on your function app.

The value for this can refer to where the function app can find the ZIP package, or it can just be 1. This option is the recommended approach when running apps on Windows.

When using 1 as the value, the function app will run the data from a local package. The ZIP package needs to be deployed to d:\home\data\SitePackages as this improves the cold-start.

Info: You can read more at: run your Azure Functions from a package file

How do you use it on GitHub Actions?

Important: Make sure to first set the WEBSITE_RUN_FROM_PACKAGE to 1 in the function app configuration.

The steps which you need to perform to deploy your code to the functions app are the following:

Check out your code
Specify the Node.js version to use
Install your dependencies
Build your project
Create the ZIP
Perform the deployment with the webapps-deploy action

My GitHub Actions workflow looks as follows:

deploy_az:
  runs-on: windows-latest
  name: "Deploy back-end"
  if: ${{ !contains(github.event.head_commit.message, '#frontend') }}

  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: '12'
        registry-url: https://registry.npmjs.org/

    - name: "Install and build"
      run: |
        npm ci
        npm run build
        npm prune --production

    # You can also make use of a ZIP GitHub Action
    - name: "Create ZIP"
      run: |
        Get-ChildItem $pwd | Compress-Archive -Destination .\backend.zip
      shell: pwsh

    - name: 'Deploy the ZIP to the app'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_FUNCTIONAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE_DEV }}
        package: ./backend.zip

Once this workflow ran. Your function app will now run from the package you deployed. You can verify this if you take a look in the wwwroot directory. This directory should now contain the files from the package. Be aware; this directory is now read-only.

Info: The packagename.txt file contains the name of the ZIP package which needs to be used.

Deploy your site to Vercel using GitHub Actions and Releases

Elio Struyf — Tue, 27 Apr 2021 06:56:15 +0000

One of my favorite hosting companies is Vercel as they can provide simplicity and flexibility at the same time. I wanted to control my site's deployment process on Vercel entirely for a new product I am building.

Usually, when you use Vercel in combination with GitHub. It will automatically trigger new deployments when you push code. You can configure it to your needs, but the main issue is when you want to work with GitHub releases. Vercel cannot yet deploy on new releases.

There are a couple of ways to overcome this. You can, for instance, start a build by calling Vercel with a deploy hook. That way, you can call the hook from within your GitHub Actions workflow.

Another approach is to make use of the Vercel CLI and the combination of GitHub Actions. This approach is the one I used, as this gave me all the flexibility I needed during my CI/CD process.

Prerequisites

Before you start, you need to know your project ID and org ID from Vercel. The simplest way to get this is to link your project to Vercel. You can do this by using npx vercel link.

Info: You read more about the CLI here: Vercel CLI. When you have not used it yet, it will first ask you to sign in.

When you ran the command, it will create a .vercel folder in your project with a project.json file. In that file, you will find the projectId and orgId, which you can use later in your GitHub Actions workflow.

Something else you need to configure is to disable GitHub for your project on Vercel. That way, you let Vercel know that you want to take over control, and it will not trigger when you push your code to GitHub.

To disable GitHub, you create a vercel.json file in the root of your project (if it does not yet exist), and add the following contents to it:

{
  "github": {
    "enabled": false,
    "silent": true
  }
}

One more thing, a token is required to use the CLI on GitHub Actions.

Go to Vercel Tokens, and create a new token. Keep this token safe, as you will need it later.

GitHub Secrets to configure

In your GitHub project, go to settings and add the following secrets:

VERCEL_ORG_ID: Value is the orgId from the JSON file created with the vercel link command.
VERCEL_PROJECT_ID: Value is the projectId from the JSON file created with the vercel link command.
VERCEL_TOKEN: Value is the token you created previously.

The GitHub Workflow

The last step is to add the job to your GitHub workflow. Here is an example of how you could do this:

name: "Deploy"

on:
  release:
    types:
      - published
  push:
    branches:
      - dev
  workflow_dispatch:

jobs:
  vercel: 
    runs-on: ubuntu-latest
    name: "Deploy front-end"

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/

      - name: "Deploy to Vercel"
        run: |
          prodRun=""
          if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
            prodRun="--prod"
          fi

          npx vercel --token ${VERCEL_TOKEN} $prodRun
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

Info: When the action runs for any other branch than my main branch, it will not deploy to production.

As you can see from the above workflow, the GitHub Actions workflow only gets triggered when there is a release, push to dev, or manual trigger on the workflow.

Once you put this workflow in place, you are in control over all deployments to Vercel.

Article first published on eliostruyf.com

New VSCode extension that takes automation to the next level

Elio Struyf — Thu, 22 Apr 2021 08:14:32 +0000

Recently I switched from using Alfred over to Raycast. What convinced me of Raycast is the simplicity the tool provides, plus the ability to simply create your custom commands/scripts.

Info: I already wrote about it: Using Raycast to speed up my productivity.

The more I use Raycast, the more I want to automate. A script I created was to start up my daily development tasks:

Open my VSCode editor with the right project loaded
Open my terminal to the right folder
Open Microsoft Edge to the Azure Portal
Open Google Chrome with my application URL

These tasks typically do not take a lot of time, but automating this by one command is so easy.

Taking it to the next level

To take it to the next level, I wanted to start my commands in VSCode as well. For my project I use two terminals:

Open ngrok as my application needs to be accessible remotely.
Start the local development server (Next.js in my case).

Unfortunately, you can only trigger certain actions in VSCode by shortcuts. That is why I thought to create a new VSCode Remote Control extension which allows you to send commands from anywhere on your device to the running VSCode instance.

Info: Check out the extension here: VSCode Remote Control.

The extension spins up a WebSocket server. By default, it will start it on port: 3710, but is configurable from the settings.

Show me what it can do

To speed up my process, I wanted to open two terminal instances in VSCode and run my commands in each of them.

In my Raycast script, all I had to do is add the following code:

echo "{ \"command\": \"workbench.action.terminal.newWithCwd\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.sendSequence\", \"args\": { \"text\": \"npm run ngrok\\n\" } }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.split\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.focusAtIndex2\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.sendSequence\", \"args\": { \"text\": \"cd solutions/msteams/webapp && npm run dev\\n\" } }" | websocat ws://localhost:3710

Important: this is not only created for Raycast. Once installed, you can run commands from anywhere on your device.

Here the result of this script:

Check out the VSCode extension here: VSCode Remote Control.

#DevHack: Using Raycast to speed up my productivity

Elio Struyf — Mon, 12 Apr 2021 08:04:24 +0000

It does not happen often I write an article about a tool, but this time, I felt this tool deserved some extra attention.

Raycast is a tool that you can compare to Spotlight from macOS and Alfred, and yes, it is macOS only.

Many people use Alfred, and I have been using Alfred since I had my first Macbook. The biggest advantage of these applications is that you can quickly search your apps or execute tasks. What differentiates Raycast is that it is free, and it is straightforward to add custom scripts. You can write these scripts in bash, python, nodejs, and more.

Important: They listen to feedback. I submitted feedback about the font size. In my opinion, it was a bit too small. In less than a week, the Raycast team released an update with this functionality implemented. Not only that, the team even sent an email thanking me for the feedback. ❤️

How I got interested

It all started with an order on Pimp Your Own Device. There was a bug in the search React I wrote for the site. Luckily, the person who wanted to place an order was so nice to send us a message.

We talked a bit, and I saw she was working at Raycast, so I asked what it was. That is how it got me interested in testing out the product. I removed Alfred and installed Raycast instead.

How can it help you

Apart from searching your applications, the most significant productivity boost it will give you is the custom scripts you can add. For sure, you will have many manual tasks you have to do daily to start your work.

Info: Follow the steps in the following repository to get started with custom script creation for Raycast: Raycast Script Commands.

For instance, what I do frequently is open the Azure Portal. As I have various accounts, I always need to open the correct browser with the right profile.

My first improvement would be to create a script to open the portal in the right browser and profile.

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Open Azure Portal (personal)
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🚀
# @raycast.packageName estruyf.azure.portal

# Documentation:
# @raycast.author Elio Struyf

hs=`hostname`
if [[ $hs == "ninja.local" ]]
then
  open -a "Google Chrome" 'https://portal.azure.com' --args --profile-directory=Default
else
  echo "Implementation for second machine"
fi

Info: The script is simple. In my case, I check my hostname to know where I am running the script as I work on two machines.

That is not it. Another improvement that makes things even quicker is to get my development flow started just by running the script. Why? In my case, when I am developing for a Microsoft Teams project, I need to open:

Browser with the right profile for Microsoft Teams
Browser with the right profile for the Azure Profile (another account)
Visual Studio Code with the project
Terminal opened in the project folder

The script for this looks as follows:

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Open Squarl project
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🚀
# @raycast.packageName estruyf.code.squarl

# Documentation:
# @raycast.author Elio Struyf

hs=`hostname`
if [[ $hs == "ninja.local" ]]
then
  code ~/<path-to-project>
  hyper ~/<path-to-project>
  open -a "Google Chrome Canary" 'https://teams.microsoft.com/' --args --profile-directory="Profile 9"
  open -a "Google Chrome" 'https://portal.azure.com' --args --profile-directory=Default
else
  echo "Implementation for second machine"
fi

Now I can just run my command, and it will automatically open all these instances.

One more, for my blog, I place all the images in a year/month folder. This structure is still leftover from the WordPress days. I just kept the format. Each time I write an article like this one and want to add an image, I have to open that particular folder. With a custom script, I can now quickly open that folder, and if it does not exist, it will be created. Great for when we started a new month.

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Open blog screenshots
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🏙
# @raycast.packageName estruyf.code.squarl

# Documentation:
# @raycast.author Elio Struyf

crntYear=$(date +'%Y')
crntMonth=$(date +'%m')

monthDir=~/blog/web-eliostruyf-hugo/static/uploads/$crntYear/$crntMonth
[ ! -d "$monthDir" ] && mkdir -p "$monthDir"
open $monthDir

Tip: For the icon, you can add a base64 encoded image. That way, you do not have to link it to a local or online file.

I hope Raycast will improve your flow as well. Article first published on eliostruyf.com

#DevHack: Caching data for your VSCode extension

Elio Struyf — Wed, 24 Mar 2021 13:55:26 +0000

For my Visual Studio Code extension to autocomplete the Microsoft Graph APIs, I wanted to improve the speed of the suggestions by implementing a cache. That way, you would not have to do the same API calls each time.

In-memory cache has its limits

Initially, I started with just an in-memory cache. An in-memory cache is easy to establish, but whenever you close your VSCode session. The cache will be gone. Next time, the cache has to be created all from scratch.

What are the options?

Luckily VSCode provides you a couple of options to cache data for your extension. There are two places where you can cache data:

workspaceState: When you want to cache data for the current workspace/project.
globalState: When you want to cache data independent of your current project.

Both of these states are a Memento object, which allows you to get and update a value.

Info: There is also a SecretStorage which can be used to set/retrieve/delete secrets.

Using the VSCode state

For my extension, I choose to use the globalState, as I want to cache the Microsoft Graph data independently from the current project. Using the workspaceState is similar to the globalState.

Start by creating the cache as follows:

export async function activate(context: vscode.ExtensionContext) {

  const defaultData: CacheObject = { v1: {}, beta: {} };
  const cacheName = `${EXTENSION_NAME}_cache`;
  const cache = context.globalState.get<CacheObject>(cacheName, defaultData);

  ...
}

Once created, you can put data into the cache:

// Add API response to the right API version of the cache
cache[version][path] = apiData;
await this.context.globalState.update(cacheName, cache);

When you added the data. You can start retrieving it as follows:

cache = context.globalState.get<CacheObject>(cacheName);

Currently, you can only get and update data, you cannot clear/delete the cache. If you can override the cache with a default value.

const clear = () => {
  cache = {};
  await context.globalState.update(cacheName, {});
}

Info: You can find a complete example of using the VSCode state here: CacheProvider.ts.

Article first publish on eliostruyf.com