I'm Speaking at CodeMash 2023

I am very excited and honored to announce that 2 of my workshops have been accepted at CodeMash 2023! This will be my 10th year speaking at CodeMash (including times as a secondary speaker). I’m looking forward to making it back to this event, which I’ve not attended for years due to the global pandemic.

If you’ll be attending the event, be sure to say “hello” to me in the hallways of the event or before/after one of my pre-compiler workshops.

Session Details

If you’re wondering about my workshops for the event, I’ll be doing 2 workshops to help people build up their TDD skills, and I’ll have an awesome co-speaker helping me make these workshops awesome!

Establishing Good TDD Habits - Workshop at CodeMash 2023

Learn fundamental techniques to improve your code through TDD and Pair Programming. You’ll sharpen your skills working with your peers on programming exercises designed to instill good techniques that you’ll be ready to apply on your current and future projects.

Establishing Good TDD Habits by Brendan Enrick - CodeMash Banner

Mastering TDD in Legacy Code - Workshop at CodeMash 2023

Learn to effectively use the principles and practices of increasing the reliability and maintainability of your code through testing and pair programming. Sharpen your skills working with your peers on programming exercises designed to instill good practices that you’ll be ready to apply to non-trivial code-bases.

Mastering TDD in Legacy Code by Brendan Enrick - CodeMash Banner

3 Things You Didn't Know VS Code Can Do - Part 3, Color Theme, Settings Search, and Settings Sync

Did you know that you can change your themes in VS Code, use a keyboard shortcut to open the VS Code settings, make changes by searching the settings window, and synchronize your settings across multiple instances of VS Code?

I've been creating a series of videos on YouTube about cool things in VS Code that you may not know about. Check out the [DevChatter YouTube Channel](https://www.youtube.com/c/devchatter) if you want to see all of my videos, or you can see the [VS Code Tips](https://youtube.com/playlist?list=PLfRLz7YT8uz36VdgSMATJj2chNtbixokI) Playlist.

Changing the Theme in VS Code

You can change the theme in VS Code by opening up the Color Theme menu. You can open it in one of 3 ways: opening it from the manage menu (the gear in the sidebar), opening it with the keyboard shortcut [Ctrl] + [K] + [T], or opening the commands menu [F1] or [Ctrl] + [Shift] + [P] and searching for “Color Theme”.

Opening Theme Menu from Manage Menu

Opening Theme Menu from Manage Menu

Opening Theme Menu from Command Menu

Opening Theme Menu from Command Menu

Searching the Settings in VS Code

There are many settings built into VS Code, and many others included as part of extensions. For this reason, it can be hard to keep track of and know all of the different settings, which is why VS Code allows you to search for settings. You can open the Settings window from the manage menu (the gear in the sidebar), from File -> Preferences -> Settings, or by using the keyboard shortcut [Ctrl] + [,].

Opening Settings from Manage Menu

Opening Settings from Manage Menu

Opening Settings from Command Menu

Opening Settings from Command Menu

Opening Settings from File Menu

Opening Settings from Command Menu

Once you’ve opened the settings screen, you can use the search box to search for a term and it will filter the results to those settings matching your search term. In addition, notice that the left navigation of settings also filters down to the settings matching your search.

Search VS Code Settings

Syncing the Settings in VS Code

I’m writing this post on my laptop using VS Code. On a daily basis, I work on multiple laptop computers and desktop computers. Each of these machines has VS Code installed on it. If I make changes to the settings in one, it would be nice if that replicated to the others. In years past, many of us found ways of automating this process in our various editors using cloud file storage to transfer settings file changes (and similar solutions).

No longer must we implement our own syncing, since VS Code has a built-in settings synchronization system. As long as you have a GitHub or Microsoft account to log into, you can have VS Code sync your settings.

Open up your settings menu as we did above and click on the Turn on Settings Sync button in the upper right side of the Settings window.

Turn on Settings Sync in VS Code Button

Once open, you’ll need to choose which settings you want to sync and then click the button to log into your account to sync the settings.

Settings Sync Options in VS Code

After clicking log in, you’ll need to choose which type of account to log into.

Settings Sync Options in VS Code

This should now open a browser that takes you to the appropriate authentication screen and allows you to login. After logging in through the browser, it should share that permission with VS Code and syncing should now be happening.

Have fun!

Migrating Blog to Jekyll on GitHub Pages

I recently moved my blog (this one) from BlogEngine.NET to a Jekyll site on GitHub Pages. I tried to keep all of my posts working with the same URLs for the content. I didn’t worry about the tags, categories, etc. pages remaining the same. I figured that no one linked to those anyway, so the redirects would only be important on the posts.

Hopefully this post will help you migrate an old site from any platform (not just BlogEngine.NET) to Jekyll on GitHub Pages.

Exporting Existing Blog Content

Before we can create all of the posts on the new site, we’ll need to export the posts from our existing site. For this, most sites have an export function. In BlogEngine.NET, you’ll want to got to the Admin Dashboard by navigating to /admin/ or clicking on Dashboard in the Admin widget.

Administration Widget in BlogEngine.NET

From here, we need to open up Settings -> Import export then click on the Export button in the Export section of that page.

Export Screen in BlogEngine.NET

When we click this button, the site will create a BlogML.xml and your browser will download it. That’s an XML containing your posts, comments, metadata, etc. from your site.

I exported my comments, since I didn't care about preserving them. I did some googling and found that some people created tools to assist in moving this data to Disqus, but I haven't bothered with that yet.

Setting Up Jekyll Site on GitHub Pages

Now I needed a new GitHub repository to host the content for my site, so I created benrick.github.io to host my site.

Types of GitHub Pages sites

For GitHub Pages, you can set up User, Organization, or Project sites to be hosted by GitHub Pages.

I did a user site with repository name benrick.github.io, which followed the required repository name pattern of [username].github.io (will be the same as the address).

If I’d done a site for my DevChatter organization, it would’ve been devchatter.github.io, following the [organization].github.io pattern.

If I did a project site, it could’ve had any name, but would be hosted at [username].github.io/[project-name] or [organization].github.io/[project-name]. So if you’re going to do this, be warned of the subfolder, which can be avoided with a custom domain (discussed below).

Configuring the Repository as a GitHub Pages Site

Navigate to the Settings of the repository and click on the Pages menu item in the Code and automation section of the sidebar navigation.

Settings page showing Pages in sidebar

  • Source should be set to Deploy from a branch for our simple case.
  • I set Branch to main and I keep the site in the root, so folder of /(root).
  • Don’t fiddle with the Custom domain yet, we’ll come back to that later.

Now that it’s configured, make sure that everything is working. Create an index.md file in the root of your GitHub repository with anything you like. Here’s an example:

<p>Hello World!</p>

Next, we’ll make our _config.yml file in the root of your GitHub repository with these initial values:

title: Your Site
description: A site you built on GitHub Pages!
theme: jekyll-theme-minimal

If you created these files directly on GitHub, you can just wait, but if you created these locally, push them to GitHub. Now you’ll want to wait a few minutes for it to deploy, and try to visit your site at the *.github.io address that you chose earlier. If all is set up, you’ll see your

Official GitHub Page Get Started Documentation

Choosing and Customizing a Theme

Selecting a theme can offer a lot of benefits. Setting it up to work locally will require setting up ruby, installing the gems for the theme and its dependencies, etc.

If you’re just planning to deploy without running it locally, you can skip those for now (you can add local running later).

Here are a few places to find free themes (there are many more):

  • https://pages.github.com/themes/
  • https://jekyllthemes.io/free
  • https://jekyll-themes.com/free/

And if you want to (and have the money to) support content creators, there are many paid Jekyll themes as well.

Once you’ve chosen a theme, you’ll either be setting the theme: or remote_theme: in the _config.yml file in the root of your site. Most of the themes you find will have their own instructions, which are often for running it locally. Setting these properties will let it work with the GitHub Pages workflow.

Converting Blog Posts to Jekyll Markdown Posts

After exporting your content from your previous blog, check to see if there’s a tool created to convert that export into markdown files. Once completed, you’ll put all of those markdown files (if the tool didn’t do it) into the _posts directory in your repository.

For my conversion from BlogML.xml (the data exported by BlogEngine.NET), I started with this blogml.rb file and made a few tweaks to it. You can start with that one, but it’s written for Octopress, a framework based on jekyll. It’s close enough to Jekyll to get you started. Alternately, you can use my tweaked version of the BlogML.xml to Jekyll import script.

Regardless of the one you’re using, with ruby installed on your computer and the BlogML.xml file and the blogml.rb file in the same folder, run the following command in that folder.

ruby -r './blogml.rb' -e Jekyll::BlogML.process('BlogML.xml')

After running this, you should have a _posts folder full of your posts.

Content Fixes

Be sure to check through your pages, articles, etc. since you’ll want to be sure they transferred correctly. There could be issues in the “frontmatter” (metadata at the top of the file), so be sure to check titles, permalinks, and tags.

Some of these issues can be fixed by hand, but anything that happened in a large number of files will require some clever finding and replacing.

Migrating Files and Images from BlogEngine.NET to Jekyll

In the root of your new site, create two folders named files and images. These are where your files and images will go.

Download the /App_Data/files folder from your old BlogEngine.NET site. Use whatever means you have of accessing your old site’s file system. I used FTP access to it.

You now need to split the files and images into their respective folders, maintaining the original structure.

To make this easier, I recommend that you put a copy of the files into each of the two folders. Then delete the images from the /files folder and the files from the /images folder.

Deploying and Verifying

Commit your changes and push them all to the GitHub repository. As we’re using GitHub Pages default deployment, you should be able to navigate to the Actions section on the repository before it completes the deployment to see that it is building and deploying the static site.

Nav to GitHub Actions in Repository

You should see deployments from our previous changes to the repository.

After confirming that it has a deployment (it should be green), you’ll want to navigate to your *.github.io site as we did earlier and confirm that the site has your content.

Setting up Custom Domain (Optional)

If you want to have a custom domain, you’ll need to set up your DNS to point to your GitHub Pages and then tell your GitHub Pages repository about your custom domain. By doing it in this order, GitHub will be able to verify that your DNS settings are pointing to the GitHub Pages site.

Set Up DNS A Records

TO set up the A Records for your domain, create it with these IP Addresses pointing at GitHub Pages, so it looks like these:

Google Domains Custom Records View

For the first record, leave the Host name blank, set the Type to “A”, and the Data to the first IP Address. In some DNS systems you add more records (like this one), but in other systems, you create 4 separate A records with these addresses.

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

You can check the GitHub Pages Custom Domain Docs for the most up-to-date list of IP Addresses.

Set Up DNS CNAME Record

Next, you’ll set up a CNAME Record to point to the subdomain you have at GitHub, mine is benrick.github.io. Create the CNAME record like this:

Google Domains Custom Records Edit

Just be sure that you set the Host name to “www”, the Type to “CNAME” and the Data to your “*github.io” subdomain.

Set Custom Domain in GitHub

After configuring DNS, we need to tell GitHub by going to the Settings tab in your repository, and clicking on the “GitHub Pages” link in the sidebar navigation.

GitHub Settings Side Nav

Now change the Custom domain to your domain name that we just configured and save that change, which causes GitHub to run a check of the DNS settings.

GitHub Pages Settings Custom Domain

After verification, the page will look like this:

GitHub Pages Settings Custom Domain Verified

Additional Resources

If you want full instructions for setting up the custom domain name for GitHub using Google Domains, check my post about how to set up a custom domain from google domains for GitHub pages.

3 Things You Didn't Know VS Code Can Do - Part 2, Customizing Sidebar and Going to Definition in VS Code

Did you know, you can customize the sidebar’s position and contents in VS Code, create files immediately without deciding their location fro the home screen, and go to definition in almost anything in VS Code?

I’ve been creating a series of videos on YouTube about cool things in VS Code that you may not know about. Check out the DevChatter YouTube Channel if you want to see all of my videos, or you can see the VS Code Tips Playlist.

Customizing the VS Code Sidebar

Not only can you decide whether you want the VS Code Sidebar on the left or the right, you can decide what to include in the sidebar.

Moving the Sidebar to the Right or Left in VS Code

To move the sidebar to the left or the right, simply right click on the sidebar to open this context menu.

VS Code Sidebar Context Menu

Once you’ve made the change, either of these are possible:

VS Code Sidebar on the Right

VS Code with Sidebar on the Right

VS Code Sidebar on the Left

VS Code with Sidebar on the Left

Removing Items from VS Code Sidebar

Each of the items in the sidebar of VS Code can also be hidden, so you don’t have a cluttered sidebar where you can’t find the section you’re looking for. To remove the items, right-click on the sidebar to open the same context menu we used to move the sidebar from side to side.

VS Code Sidebar Context Menu

From this context menu, you can click on each item to show or hide it from the list. All with a checkmark are shown on the sidebar. Here’s a nice, clean sidebar.

VS Code with Clean Context Menu

Create Files with Double Click in VS Code

When you have no files open in VS Code, you can double click on the empty background to immediately open a new editor. At any point, you can save the text in the editor to a file.

This is a quick, easy way to get an editor open to type something, even just to hold onto for a minute.

Go to Definition with Ctrl-Click in VS Code

In VS Code, you can go to definition in many different contexts by holding the Ctrl key and left-clicking on things in the editor.

  • Clicking on a type name takes you to the type definition.
  • Clicking on a type members like methods, properties, or fields takes you the their definition on the type.
  • Clicking on a variable takes you to the declaration of that variable.

3 Things You Didn't Know VS Code Can Do - Part 1, JSON as Classes, Search By Words, and Visible Whitespace

Did you know, you can create types from sample JSON VS Code, search for files based on the first letter of each word, and view the whitespace in VS Code?

I’ve been creating a series of videos on YouTube about cool things in VS Code that you may not know about. Check out the DevChatter YouTube Channel if you want to see all of my videos, or you can see the VS Code Tips Playlist.

Paste JSON as Code in VS Code

While VS Code doesn’t have a built-in way of pasting json from clipboard as code, there is an extension that will do it. Grab the Paste JSON as Code Visual Studio Code Extension.

Paste JSON as Code in VS Code Extension

Copy the JSON you want code of onto your clipboard, and open the file where you want to paste the types. Then press F1 or Ctrl + Shift + P to open the commands menu, and search for “paste” to find the commands for Paste JSON as....

Commands Menu Showing Paste JSON as Results

If it can’t infer the language from the file extension you’re pasting into, it will ask you to choose a language. If it did know, it will skip this question.

Selection View for Languages in Paste JSON as Code

JSON always has a root object (the outer curly braces), but that object doesn’t have a name, so the extension will now ask you to name that root object.

Top-Level Type Naming In Paste JSON as Code

After clicking enter, there will be one or more types created in your file, depending on the complexity of the JSON you were using. It will try to detect types and includes metadate. You can change this data as you like. The command was just to help get you started.

Sample JSON Code Created by Paste JSON as Code

Search for Files By Word in VS Code

When you’re looking for a file using the search in VS Code, you can search based on the first letters of the words in the name of the file.

To see this in action, open up the file search using Ctrl P. Then type in upper case letters, only the first letter of each word, so if you wanted to find SpecialBikeFactory.cs, you might type “SBF” into the search box.

File Search Results in VS Code with First Word Letters Only

In addition, you can continue searching more of the word after each of those capitals, so “SpBiFa” would be a great search term if your codebase is large and has more than one type for “SBF”.

File Search Results in VS Code with Starting Word Letters

Make Whitespace Visible in VS Code

In some languages, like Python, whitespace matters. In languages where whitespace matters less, it’s still important for formatting. In Visual Studio Code, you can make the whitespace visible. To do this, go to the View menu and select Render Whitespace. Doing this will show spaces as dots and tabs as arrows.

Visible Whitespace in Visual Studio Code