Skip to content

Education

11 posts with the tag “Education”

How VS Code Snippets can improve your workflow when working with Astro

A collection of old newspaper sheets piled on a wooden table, displaying vintage articles and worn edges.

This article demonstrates how code snippets can be created in Visual Studio Code that can significantly boost your productivity when regularly working with Astro’s content collections.

The need for snippets

Astro supports schema validation for your frontmatter fields in Markdown and MDX files. Therefore, many content files of your collections will have the same structure between the code fences (---). If you are tired of typing the same frontmatter fields over and over again, you can create a code snippet that will automatically generate the basic structure of the desired frontmatter while letting you conveniently edit the fields with TAB ⇥ inputs.

Creating a snippet

You can create global snippets which can be scoped to multiple languages or language-specific snippets. Since we want the frontmatter snippet in Markdown and MDX files, we will create a global snippet under Code/User/snippets/markdown.code-snippets with the scope markdown,mdx. Follow the instructions in the official documentation for the correct steps for your Operating System.

Here is an example of how your snippet could look like. You can freely adjust the body or prefix as you see fit:

Code/User/snippets/markdown.code-snippets
{
"Add Markdown frontmatter": {
"scope": "markdown,mdx",
"prefix": "ffmt",
"body": [
"---",
"title: $TM_FILENAME_BASE",
"description: The description",
"---",
"",
"## ${1:Heading}",
"",
"$0"
],
}
}

The flexibility of snippets allows you to create powerful and bespoke productivity boosters. You can enhance the basic configuration from above with the specific frontmatter fields you need, change how the title gets generated, and more.

Using the snippet

Create an empty Markdown (.md) or .mdx file. Start typing ffmt and press TAB ⇥ to trigger the snippet. If you do not see any suggestions, you can manually trigger them with Ctrl + Space and select the "Add Markdown frontmatter" snippet. Depending on your exact configuration, you can now tab through the fields to edit them to your current use case. For example the snippet from above allows you to directly edit the heading and then jumps to the content. The title field of the frontmatter will be set to the file name without its extension.

Screenshot of the Visual Studio Code editor, displaying generated content from a code snippet.

Further resources

If you find snippets useful and want to explore a VS Code extension which includes a decent set of preconfigured snippets, check out Astro Snippets by Shelton Louis.

Read more tips and tricks for working with Astro and Starlight on HiDeoo’s blog.

Some aspects of creating a blog are really easy, and some are extremely difficult!

A wooden table displays a notebook, a pen, and a steaming coffee cup, suggesting a productive writing session.

Talk a little bit about how one can become better (not master by any means, nobody is perfect) in writing a blog post. These are just my thoughts after two awesome guys from the Astro Community (jdtjenkinsJacob and louisescherLou) decided to write blogs about how hard and easy it is to write blog posts.

Please read their posts first as this is the follow-up on both of them:

  1. “Why is writing blog posts so hard?” - Jacob Jenkins
  2. “Why Writing Blogs isn’t hard” - Louis Escher
  3. “Some aspects of creating a blog are really easy, and some are extremely difficult!” - Felix Schneider

After that you have successfully completed this awesome trilogy of blog posts about blog posts.

Setting up Kubernetes with Cilium and Cloudflare

A cube in 3D with a yellow and green sticker applied to its surface, showcasing a geometric design.

This blog posts describes the process of setting up a KubernetesKubernetes cluster with k3sk3s and CiliumCilium. We use HelmHelm as the package manager and CloudflareCloudflare as the certificate issuer. We used the tips and tricks from Vegard S. Hagen from his article. Essentially, this blog explains, how all the trueberryless.org websites are deployed (not any more).