Category: Visual Studio

Presenting and Creating Great Tech Demos

How to Create Great Tech Demos and Presentations

I didn’t keep track of the exact number, but I did many presentations at different conferences around the world. Since I am doing a lot of tech presentations and demos, I am always looking at how I can improve and get better. I start to realize that there are a lot of things you need to consider when delivering tech demos during presentations, to make it better for the audience. I started to work on my demos a lot, and I realized that these things also work when you are recording demo videos or screencasts. That is why I came up with the idea to write this blog post with tips and tricks on how you can create great tech demos and presentations.

Create and tell a story, make sure people can see the result 🎬

People have a short attention span, so if you are switching to your tech demo, and in the first couple of seconds, your audience is already lost because they cannot read what is on the screen or they have no context at all, you lost them for good. You need to make sure you create and tell a story, and you show them how to solve a specific challenge. A tech demo is not just good if you can show how you address a particular challenge, but people need to understand it. For example, I have seen many tech demos, that tell you here is the problem, here is the setting to solve it, and done. They didn’t complete the full demo and showed that it is now working. Yes, of course, sometimes showing the setting is enough, but a lot of times you want to show here is the challenge, it is not working now, I do this, and now you can see it is working. This gives attendees a way better experience and understanding of your demo.

Create video recordings of your demos 📽

Live demos are great, but sometimes it is just not possible, or the experience of the attendees isn’t great. For example, if you start a task that takes 5-10 minutes to complete, you don’t want to wait for it to complete as your time is limited in a session. Which leaves you with three options. The first option, you prepare an already finished scenario to jump on like they do in cooking shows. Secondly, you show something else and let the task complete in the background, and jump back to it once it’s done. And the third one, you cut a video before and use your video editing skills to make the waiting time shorter. While option one and two, often work, I realized that jumping away from a specific scenario or using another object which already completed, may confuse people, they lose context and doesn’t give them a great experience. Recording a video can help with that. For example, one of my demos is replicating a virtual machine named VM1, and these can take 30mins to even a couple of hours. I could have prepared a VM2, which would have been already replicated and move on with that one. However, during a lot of presentations, I realized it makes it easier to follow for people if I can use the exact same VM name, during the whole demo.

Creating videos also has an advantage when you run into issues. This can be due to lousy conference Wi-Fi or something just broke out of your control. Even if you plan to do the demo live, it is always great to have a backup, especially if you are doing a demo-heavy presentation, where things build on top of each other.

Resolution and Scaling 💻

You can have the most fabulous demo of all time, but if people can’t see it, it doesn’t matter at all. Rule number one, if you have to ask if people can read it, people can’t read it. So make sure that you are 100% sure that people can see what is going on. My recommendation is, please set your screen resolution to whatever the projector supports. Most of the time, this will be Full HD 1080p (1920×1080) resolution.

Presentation Demo Screen Resolution and Scaling

Presentation Demo Screen Resolution and Scaling

Early in the days, we didn’t have scaling in Windows, so people were using lower resolutions to make everything appear bigger. Guess what, Windows 10 supports scaling, so I usually use Full HD (1920×1080) and 150% scaling, this makes an excellent size to see what is going on the screen but also makes the picture sharp and not blurry. Most of the applications can handle it, and most of the web portals also work the ways they should. That said, I know that not all applications and scenario scale very well. Depending on what you are showing, you need to decide how you want to present it.

Use ZoomIT, and use it wisely 🔎

One of the most excellent tools for presentations is Sysinternals ZoomIT by Mark Russinovich (not PowerShell this time, sorry Jeffrey 😉). ZoomIT is a screen zoom and annotation tool for technical presentations, and as the name says, it lets you zoom. This helps you not just to make things more readable, but also to highlight a specific part of the screen, to show people where they need to focus on.

ZoomIt is a screen zoom and annotation tool for technical presentations that include application demonstrations. ZoomIt runs unobtrusively in the tray and activates with customizable hotkeys to zoom in on an area of the screen, move around while zoomed, and draw on the zoomed image. I wrote ZoomIt to fit my specific needs and use it in all my presentations.

ZoomIt works on all versions of Windows and you can use pen input for ZoomIt drawing on tablet PCs.

ZoomIt

ZoomIt

While ZoomIT is excellent, you need to know how to use it right. Place the mouse where you want to zoom and then zoom in, don’t move the mouse too much after you have zoomed in, you don’t want people to become sick 😵. As you can see, ZoomIT also allows you to do screen annotations, to mark specific things on the screen. Again, use this feature wisely before you start painting on the screen. The great thing about it, you can also use a pen, like the Surface Pen, to draw on your screen.

Font Size and Editor Light Theme 🔠

Okay, one of the many problems I see with many tech presentations is happening when people show code. Coming back to what I said earlier, if you have to ask the audience if they can read it, they can’t read it, so please use a font size they can easily read. Even in Notepad and Terminal, you can easily zoom these days with CTRL + Mousewheel.

Notepad Zoom

Notepad Zoom

If you are showing code in an editor or even in a web portal, a dark theme makes you look cool. However, it is horrible to read. So please help the audience and use a light theme in your editor like Visual Studio Code or in the Azure portal.

Light Theme Editor

Light Theme Editor

By the way, I am not saying that you only should use light PowerPoint slides. Dark PowerPoint slides can be a very powerful tool if they are used right. However, for editors, it is just very simple and way better to view if you are using a light theme. One of my favorite Visual Studio Code themes to present is the PowerShell ISE theme. This theme gives you a simple and light theme, with great color options for syntax highlighting.

Clean up 🧹

You want to make sure that people in your presentation and during your demonstration are focusing on the right thing and don’t get distracted by any clutter. So before your presentation, make sure you clean up:

Close all unnecessary applications

Especially any messengers like Microsoft Teams or Slack, you don’t want to receive any notifications at all during your presentation (Except you are showing Microsoft Teams demos 😉). By shutting down all these applications, you also make sure that you have enough resources like Memory available.

Turn off notifications

Focus assist

Focus assist

In Windows 10, you have a feature called Focus assist, and this allows you to pause all notifications on your PC.

Hide all icons from your desktop

Hide Desktop Icons

Hide Desktop Icons

Yes, there is an option for that! Right-click on your desktop -> View -> Show Desktop Icons.

Browser

Browser

Browser

If you are doing a demo using a browser, make sure your browser is also cleaned up, hide your Favorites Bar, and any additional browser extensions, which might take the focus away.

Taskbar

Keep your taskbar clean, you don’t want people to focus on all the icons there and the program you have installed. You want to make sure there is as little distraction as possible.

Hide System Icons and Time

Windows 10 Turn system icons off

Windows 10 Turn system icons off

This might not always be needed, but if you want to make it cleaner and especially during video recordings, you can also hide the system icons and time. If you are opening the settings app and search for system icons, you can go and hide them.

Full screen

This is a simple one, but if you do a presentation, you don’t want your windows overlapping each other and be confusing, so run your applications in full screen. Exception for this is when you want to show two things in comparison to each other.

Use the Azure Mask browser extension for your Azure demos

If you are doing demos in the Microsoft Azure Portal, you want to have a look at the Azure Mask browser extension. This is a browser extension that will mask GUIDs (such as Subscription IDs), email addresses, keys, and connection strings with a blur. The extension intends to make it easier to do screen recordings without revealing sensitive personal account information that may show up on the screen. It will only run and apply against Azure portal URLs. It’s available in Chrome, Firefox, and also works with the new Microsoft Edge (Chromium).

Virtual Desktops to switch to your tech demo 💻

I am a huge fan of the Virtual Desktop feature in Windows 10. This basically gives you unlimited desktops on your Windows 10 PC, which is excellent for productivity. But I am also using Virtual Desktops during presentations, for example, for switching between the PowerPoint deck to a demo. One the first desktop, I keep my PowerPoint presentation in full screen open, and with CONTROL + WINDOWS + ARROW RIGHT/LEFT, I can switch to other desktops where I, for example, already have my demos ready. You can create new Virtual Desktops by pressing WINDOWS + TAB. This makes switching between PowerPoint and demonstrations, less messy.

Virtual Desktop

Virtual Desktop

If you are presenting somewhere, where you can plug in two devices, you can also use the display switch to switch from your presentation machine to your secondary demo machine, which will have a similar effect. However, a lot of smaller events, don’t have that setup. By using the Virtual Desktops feature, you can clean up the process of switching to different technical demonstrations.

Change Desktop Backgrounds and console colors 🎨

Use different Colors

Use different Colors

If you do a presentation with multiple systems or consoles, you want to make sure people can follow on which system you are working. For example, if you have two different systems deployed to servers, you want to make sure people can easily identify which server runs which application. For example, you can change the color of the terminal or desktop background of VM1 to blue and the one of VM2 to red. If you are working with Windows, you might also use Sysinternals BgInfo, to write the name of the system on the desktop wallpaper.

The mighty Mouse pointer 🖱

Mouse Pointer

Mouse Pointer

If you want to explain something and point to something on the screen, the mouse cursor is a natural option. However, you can also do a lot of damage by using it wrong. First, make sure people can see the mouse pointer. In Windows 10, you can change the size and color of the mouse pointer, so people can easily identify it on the screen. Next, don’t move it fast and don’t go crazy. Move the mouse cursor slow and don’t try to circle things or jump around the screen with it; people will go nuts.

In many cases, it is better to use a tool like ZoomIT, to annotate on the screen.

Laser pointer in PowerPoint 👉

PowerPoint Laser Pointer

PowerPoint Laser Pointer

Many people use PowerPoint for their presentations. However, not many people know that PowerPoint can be an excellent presentation tool. It comes with a lot of features people don’t even know about, and with many of them, it is with any tool in the world; if you are using it wrong, it will not help you at all. One of the tools I want to highlight is the laser point feature in PowerPoint. If you are a presenter, you might have these remote presenters with a laser pointer on it, where you can point on a wall or projected screen. However, in many cases, that is not a good idea. Often the laser pointer is too small for people to see it or in some locations, you have multiple projectors, and you can’t point at all of them at once. PowerPoint can help you with that. You can use a simple on-screen laser pointer to highlight parts of your slides. This comes handy when you show a large technical diagram, which we often try to avoid, but in some cases, it is necessary.

Get prepared 🔧

To deliver great demos, you will need to practice them. First of all, you need to make sure that they actually work, but also that the timing is right. No one wants to wait and watch at the screen for five minutes until something has completed. I usually run through the demo at least twice before my presentations, to make sure that the demo also works multiple times. I usually also run through it a couple of minutes or hours before I go on stage. Especially with demos running in the cloud, I want to make sure that they are still working. It is not just about cloud technologies that can change fast; for example, I also saw software and container images expire.

What if something goes wrong? 👻

Even if you did prepare like crazy, there can always something go wrong. Don’t worry, people understand that things can break. As long as you are prepared, handle it the right way and have a backup plan, you will be fine. If something doesn’t work, you can try to troubleshoot it quickly. But don’t spend too much time on it and move on to the next one, because the audience doesn’t want to see you troubleshooting for minutes. In some cases, the audience can’t even see or doesn’t even realize that the demo didn’t work. In that case, don’t point it out, just move on if the demo is not essential to your presentation.

Conclusion to create Tech Demos and Presentations 😎

I hope you enjoyed my tips on how you can create great technical (tech) demonstrations (demos) and presentations. Let me know what your favorite tips and tricks for great tech demos are!



Cascadia Code in Windows Terminal

New Microsoft Code and Terminal Font Cascadia Code

Cascadia Code is the latest monospaced font shipped from Microsoft focusing on delivering an excellent font for command-line experiences and code editors like Visual Studio Code. The Cascadia Code font was first announced at the Microsoft Build conference in May 2019. And yesterday, Microsoft just released Cascadia Code version 1909.16 and it is available publicly on GitHub. Cascadia Code makes an excellent font for the Windows Terminal, and you can download it today.

It is the latest monospaced font shipped from Microsoft and provides a fresh experience for command line experiences and code editors. Cascadia Code was developed hand-in-hand with the new Windows Terminal application. This font is most recommended to be used with terminal applications and text editors such as Visual Studio and Visual Studio Code.

I took some time to install Cascadia Code font on my Surface Book 2 and it works great with application like Visual Studio Code and the Windows Terminal running PowerShell. To start using it, simply download the font, install it, and configure the application to use is. In the Windows Terminal app, open the settings.json file and change the font in the specific terminal profile.

VS Code Cascadia Code setting for Windows Terminal

VS Code Cascadia Code setting for Windows Terminal

  "profiles" : 
    [
        {
            "acrylicOpacity" : 0.5,
            "closeOnExit" : true,
            "colorScheme" : "VibrantInk",
            "commandline" : "C:\\Program Files\\PowerShell\\6\\pwsh.exe",
            "cursorColor" : "#FFFFFF",
            "cursorShape" : "bar",
            "fontFace" : "Cascadia Code",
            "fontSize" : 12,
            "guid" : "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
            "historySize" : 9001,
            "icon" : "ms-appx:///ProfileIcons/{574e775e-4f2a-5b96-ac1e-a2962a402336}.png",
            "name" : "PowerShell Core",
            "padding" : "0, 0, 0, 0",
            "snapOnInput" : true,
            "startingDirectory" : "%USERPROFILE%",
            "useAcrylic" : true,
            "backgroundImage": "C:/Users/thoma/OneDrive/Pictures/Me/Thomas Maurer Logos 2016/WindowsTerminal/Black Cloud Robot.png",
            "tabTitle": "PowerShell Core "
        },

If you want to know more about customizing the Windows Terminal, check out my blog post. If you are optimizing and customizing your code editor experience, you should also have a look at my favorite themes for Visual Studio Code.

The font is open source and licensed under the SIL Open Font license on GitHub, so it is easy to contribute. Have you tried the Cascadia Code font, and what do you think about the new coding font? Do you like it? And if you have any questions, please let me know in the comments.

If you are looking for some other cool Microsoft coding projects, have a look at Azure Cloud Shell and PowerShell 7.



SSH Remote Edit File with Visual Studio Code

Remote Edit Files on Azure Linux VMs using VS Code

There are a lot of different ways to remote manage your Azure virtual machines using various tools and technics. In this blog post, I am going to show you how you can remotely edit files on Azure Linux virtual machines using Visual Studio Code. Visual Studio Code has a new Remote Development Extention which allows you to open any folder in a container, on a remote computer, or in the Windows Subsystem for Linux (WSL) and take advantage of the VS Code feature set. With the Remote – SSH extensions, you can easily browse and edit files on an Azure VM or any other system where you can connect using SSH.

Installation

As mentioned to edit the files on the Azure Linux virtual machine remotely, we are using the light-weight, cross-platform, opensource editor Visual Studio Code. You can download and install VS Code from the official website.

Visual Studio Code Remote Development Extension

In addition to Visual Studio code, we need to install the Remote – SSH extension, which comes with Remote Development Extension Pack. This also includes remote extensions for containers or the Windows Subsystem for Linux (WSL).

If you are running on a Windows 10 machine, you will also need to install the OpenSSH client on your machine. You can do that going through this blog post, or by running this command.

# Install the OpenSSH Client
Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

Azure VM connection using SSH

The Remote – SSH extensions currently only supports connecting to x86_64 Linux-based SSH servers using key-based authentication.

Optional: Create Azure Linux VM with key-based SSH authentication using the Azure CLI

Create Azure Linux VM Azure CLI SSH Keys DNS Name

If you want to try it out, and you haven’t set up a Linux VM SSH and key-based authentication. This Azure CLI command here helps you to create a new Azure virtual machine and sets up ssh keys as well as an optional unique Azure DNS name.

az vm create --resource-group demosshvm --name tomsVM --image UbuntuLTS --admin-username thomas --generate-ssh-keys --public-ip-address-dns-name tomsazurelinuxvm

In this example, you can use the public IP address or the Azure FQDN to connect to the Azure VM. If you have a VPN or Express Route set up, you can also use private IP addresses and DNS names. If you are using public IP addresses in production, make sure you are using a service like Azure Just in Time VM access.

Connect Visual Studio Code to Azure VM using SSH

After you have installed Visual Studio Code, the Remote – SSH extension, the SSH client and have a VM with key-based authentication, you can now easily connect. Open Visual Studio Code, on the bottom left, you see the Remote connection button. If you press it, you will find the remoting options. Select “Remote-SSH: Connect to Host…

Visual Studio Open Remote SSH Connection

This will ask you for the username and IP address or DNS name of the virtual machine. In my case, I am going to use the DNS name.

Visual Studio Code SSH Remoting Connection

 

After pressing enter, this will connect your Visual Studio Code environment to the Azure virtual machine.

Visual Studio Code SSH Connection

 

Remote edit files on Azure Linux VMs using VS Code

You can start opening folders and files on the remote Azure Linux VM and begin browsing the file system. On the bottom left, you see the name or IP address of the machine you are connected with.

SSH Remote File System Visual Studio Code

You can also open files and start remote edit files on your Azure Linux VM. If you save the changes you made to the file, this is directly saved on the remote Azure virtual machine.

SSH Remote Edit File with Visual Studio Code

You get all the advanced VS Code features you know from your local Visual Studio Code like syntax-highlighting and more.

I hope this shows you an easy way to remotely edit files on your Azure Linux virtual machines using Visual Studio Code and SSH. If you have any questions, please let me know in the comments.



Mastering Azure with Cloud Shell

Mastering Azure with Cloud Shell

There are multiple ways to interact and manage resources in Microsoft Azure. You can use the Azure Portal or command line tools like the Azure PowerShell module or the Azure CLI, which you can install on your local machine. However, to set up a cloud management workstation for administrators and developers can be quite a lot of work. Especially if you have multiple computers, keeping consistency between these machines can be challenging. Another challenge is keeping the environment secure and all the tools up to date. The Azure Cloud Shell addresses this any many more things.

Cloud Shell is not brand new, Microsoft announced Cloud Shell at Build 2017. This blog post is about how you can master Azure with Cloud Shell and give you an overview of the possibilities of Cloud Shell.

 

What is Cloud Shell

Cloud Shell Azure Portal

Cloud Shell offers a browser-accessible, pre-configured shell experience for managing Azure resources without the overhead of installing, versioning, and maintaining a machine yourself. Azure Cloud Shell is assigned per unique user account and automatically authenticated with each session. This makes it a private and secure environment.

You get a modern web-based command line experience which can be accessed from several endpoints like the Azure Portal, shell.azure.com and the Azure mobile app, Visual Studio Code or directly in the Azure docs.

In the backend, Azure uses containers and automatically attaches an Azure File Share to the container. You can store the data on it, so your data is persistent. This persists your data across different Cloud Shell sessions.

Cloud Shell Bash and PowerShell

You can choose your preferred shell experience. Cloud Shell supports Bash and PowerShell and included your favorite third-party tools and standard tools and languages. If something like a module is missing, you can add it.



WLinux WSL Setup Wizard for Windows 10

WLinux – The best WSL for Windows 10

A couple of Windows 10 releases back, Microsoft delivered the Windows Subsystem for Linux. The Windows Subsystem for Linux allows you to run Linux distros, like Ubuntu, Debian, Suse, and others, on Windows 10. Around the Microsoft Ignite 2018 timeframe, another distro was released to the Windows Store called WLinux. WLinux is a Linux environment for Windows 10 built on work by Microsoft Research and the Debian project. WLinux is a custom Linux distro built from Debian specifically for use on the WSL. While other distros are available for WSL, WLinux is the first optimized for use by users of WSL for WSL. It helps developer run Linux tooling on Windows and integrates into perfectly into Windows.

With the latest Windows 10 Insider builds, you can also run the Windows Subsystem for Linux 2 (WSL 2).

WLinux Setup

WLinux WSL Setup Wizard for Windows 10

WLinux comes with a custom setup to prepare your environment in a straightforward and easy wizard. It lets you set up some predefined software and settings and configure integration into Windows.

WLinux WSL Docker Bridge to Windows

WLinux Docker Bridge

If you want to run Docker in the Windows Subsystem for Linux, you can bring the Docker Client to the Windows Docker Engine. This allows you to run Docker directly from WSL and PowerShell at the same time.

Microsoft Tooling

WLinux Installing Azure CLI

Of course, WLinux brings the usual Linux development tools and easy setup for Ruby, NodeJS, Go, Java, Python, editors like emacs and even different shells. You can also easily add Microsoft tooling by adding Azure CLI, PowerShell Core, and even Visual Studio Code.

Windows Explorer Integration and WSL Utilities (wslu)

It easily lets you set up Windows Explorer integration and brings wslu, a collection of utilities for WSL, preinstalled. Wslu brings the following features to the WSL

  • wslusc This is a WSL shortcut creator to create a shortcut on your Windows 10 Desktop.
  • wslsys This is a WSL system information printer to print out some basic system information.
  • wslfetch This is a WSL Screenshot Information Tool to print information elegantly.
  • wslupath This is a WSL Windows path Converter that can convert Windows path to other styles of path.
  • wslview This is a fake WSL browser that can help you open link in default Windows browser.

WSLfetch

If you want to know more about WLinux, check out the website Whitewater Foundry.

Or download WLinux from the Microsoft Store.

You can also contribute to the project on GitHub.



VSCode in Azure Cloud Shell

You can now run a Visual Studio Code based editor in Azure Cloud Shell

Azure Cloud Shell, a browser-accessible shell for managing Azure resources, just got even more powerful. Today Microsoft added a new Visual Studio Code editor to Azure Cloud Shell. Okay, it is not the real Visual Studio Code, it is an editor based on the Visual Studio Code open-source project Monaco. Monaco is the same web-standards based editor that powers Visual Studio Code, and the editor is now integrated directly into Cloud Shell.

Now you not only have editors like vim, emacs or nano, you also able to run code, directly with in the Azure Cloud Shell. This is pretty handy when it comes to quickly edit some files like scripts or ARM templates.

This is not the first time the Azure Cloud Shell team and the Visual Studio Code team collaborated: Azure Cloud Shell in Visual Studio Code



Azure Stack Azure Cloud Shell

Connect to Azure Stack from Azure Cloud Shell

A little while ago, Microsoft announced the Azure Cloud Shell. The Azure Cloud Shell is a perfect tool to manage your Azure resources using the Azure CLI or Azure PowerShell. Wouldn’t it be great also to manage your resources running on Azure Stack? Thanks to the consistency between Microsoft Azure and Microsoft Azure Stack, you can use the same tools to manage your hybrid cloud. In this blog, I am going to show you how you can connect to Azure Stack from Azure Cloud Shell.

First of all, login to your Azure Cloud Shell on shell.azure.com or in the Azure Portal.

Azure Cloud Shell

After the login you have to register Azure Stack as a new cloud by running the following command:

az cloud register \
-n AzureStack \
--endpoint-resource-manager "https://management.region.url.com" \
--suffix-storage-endpoint "region.url.com" \
--suffix-keyvault-dns ".vault.region.url.com"

Azure Stack Cloud List Azure CLI

Now you can list the new Azure Stack cloud by using:

az cloud list -o table

To switch to the Azure Stack Cloud, use the following command:

az cloud set -n AzureStack

If you are doing this the first time and you use another account, you can use az login to login.

az login

One thing you should do is to switch the profile version to an Azure Stack compatible version

az cloud update --profile 2017-03-09-profile

Azure Cloud Shell Azure Stack

Now you can start using the Azure CLI in the Azure Cloud Shell to manage your Azure Stack. First of all, yes this works also if you use the Azure CLI. In that case, Azure Stack needs to be accessible from the internet. If your Azure Stack is not accessible from the internet, you can use the Azure CLI directly from your management machine.

Azure Stack Cloud Shell Visual Studio Code

Azure Cloud Shell is very powerful; you can run Azure CLI as well as Azure PowerShell. Fun Fact, since you can also run the Azure Cloud Shell directly in Visual Studio Code, you can also open up the shell session and start working from Visual Studio Code.

You can learn more in my blog post: Mastering Azure with Cloud Shell.