Issue #83  (Screencast Mode)11/22/23

Advertisement
Learn AI in 5 Minutes a Day
We'll teach you how to save time and earn more with AI. Join 70,000+ free daily readers for trending tools, productivity-boosting prompts, the latest news, and more.

If you're wondering how all the cool kids create fancy animated code GIFs in their text editor, look no further than VS Code's Screencast Mode. This feature was added in 2019 and has a few features that are similar to what you'd find in screencast software.

You can enable Screencast Mode by searching for "Screencast Mode" in your command palette, then choosing the option "Developer: Toggle Screencast Mode".
 
Toggle Screencast Mode in VS Code

With that enabled, you won't notice anything until you start fiddling around inside one of your editors in an open file.

First, in Screencast Mode, VS Code will display a red circle indicator that appears anytime you use your mouse to change the position of the cursor in the editor. You can see this in the screenshot below. The cursor indicator is the red circle, the red arrow is a graphic I added to show you where the circle currently is.
 
Mouse Indicator with Screencast Mode in VS Code

In addition to that, VS Code's Screencast Mode will also display in large text any key that's pressed on your keyboard.
 
Keyboard Text Overlay with Screencast Mode in VS Code

Both these features are useful for doing live presentations, code mentoring sessions, recording screencasts, recording animated GIFs or videos of code snippets, etc.

And usefully, you can customize these Screencast Mode features. Search for "Screencast Mode" in your Settings and you'll see 6 different categories of settings including:
  • Font size of the keyboard text overlays
  • Various customizations for the keyboard text
  • How many milliseconds to show the keyboard text overlay
  • The color of the mouse indicator
  • Size of the mouse indicator
Overall, the Screencast Mode feature is a nice addition that could come in handy in a number of circumstances.

Now on to this week's hand-picked links!
 

VS Code Tools

Code Diagram — A VS Code extension that lets you build a visual diagram of any large code base, helpful for getting to know new code, and shareable outside of VS Code.

Cosine — An AI-based co-developer that understands your codebase better than you do. Ask any question about your codebase, get explanations about any feature and get suggestions on how to write new code.

Dominate Online This BFCM With Cloudways Exclusive Deals — Cloudways is a managed cloud hosting platform with an extensive feature set that allows you to scale effortlessly, boost site performance, and grow on a budget. Enjoy a FLAT 40% off on all plans for 4 months in this limited time offer. Start a 3-day free trial today, no credit card required.  Sponsor 

Better Comments — A popular VS Code extension that helps you create more human-friendly comments in your code, allowing you to categorize your annotations into alerts, queries, TODOs, highlights, and more.


VS Code Theme of the Week

Dracula — Dracula is one of the most popular themes and is available for just about any app, IDE, platform, terminal, etc. The link is for the VS Code version of the theme but you can find themes for other apps here.

Dracula Theme for VS Code

The VS Code version comes with two themes installed: Dracula (shown above) and Dracula soft. It's one of the most popular themes, and for good reason. I wouldn't say it's my favourite, but it's certainly a nice option for those who like dark themes.

VS Code Articles & Videos

Vertical Tabs in Visual Studio Code — From 2022, a quick tip on hacking VS Code's settings to make your tabs vertical instead of horizontal. Well, it's not exactly vertical tabs, but the closest you'll get to it.

Getting Started with Playwright in VS Code — Part of a 4-part series from Debbie O'Brien, a Senior Technical Program Manager at Microsoft, covering the basics to writing tests with Playwright in VS Code.

The Smartest Use of Screentime Yet — With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.   Sponsor 

Run Collections in the Postman VS Code Extension — An announcement on the Postman covering the new Collection Runner feature in their VS Code extension.
 

Best of the Rest

Hackreels — A platform to create beautiful, animated code snippets that you can share in docs, social media, etc.

Kapeta — A drag-and-drop software development and deployment platform with support for REST, Web, MongoDB, PostgreSQL, and more.

Easytables — Easily insert and edit Markdown tables using Neovim with a live preview and useful helpers.


Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.