DEV Community: Kera Cudmore

GitHub README images based on prefers-color-scheme

Kera Cudmore — Sun, 27 Jul 2025 16:36:07 +0000

Have you ever been viewing a README on GitHub that blinds you due to a white background when you're in dark mode? Or had an image that didn't quite look right in dark mode due to the difference in background colors? Well suffer no more and implement images in your README best suited to the users color scheme.

To achieve this, you'll need two images - one suitable for display in a light color scheme, and one for dark color schemes.

Next, you'll want to include the following code in your README:

<picture>
    <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png">
    <img alt="Logo" src="light-mode-image.png">
</picture>

In the above code, we're using a picture element to allow us to display a different image dependent on the users preferred color scheme.

Our source element defines the image we'd like to use for dark mode. The image element is what the README will default to if there is an issue with supporting the picture element, or none of the source tags are applicable. In the example above, we are using the image element to define the image we want to use in light mode and the image we want to be our default image should there be an issue rendering any of the source images.

We could even take this a step further and define images for light and dark mode, and then a seperate image as our default backup image:

<picture>
    <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png">
    <source media="(prefers-color-scheme: light)" srcset="light-mode-image.png">
    <img alt="Logo" src="default-rainbow-image.png">
</picture>

And that's it! Now your README file will read the users preferred color scheme and display an image chosen for that theme.

Want to see an example in action? Check out my example repository below:

kera-cudmore/example-light-dark-github-readme-images

You can emulate a color scheme in Chrome by opening the Command Menu (Ctrl + Shift + P or Cmd + Shift + P) and then typing in emulate CSS prefers-color-scheme:dark and then enter.

Reusable GitHub Worfklows

Kera Cudmore — Mon, 24 Mar 2025 08:58:50 +0000

I was recently tasked with performing a spike at work to see if we could implement reusable workflows. My team maintain a large number of python repositories, each one containing several workflows to perform specific CI tasks (linting, code formatting etc) that must pass before a pull request can be reviewed.

With our current setup, making a change to the workflow, for example updating an action version, would require us to make the update in the workflow and create a pull request in each python repository. This however takes valuable developer time which could be used on more important tickets and created overhead as we would need to keep track of which repositories have been updated.

Reusable workflows looked like they may be a solution to our problem. A reusable workflow is pretty much what it says on the tin, a workflow that is declared, and can then be called from other repositories to run the jobs in the reusable workflow. By implementing reusable workflows, we would be able to save developer time as the change needed would only need to be made in one workflow, and make having to remember which repositories had been updated redundant, as no changes would be need to be made in the calling repositories, only the reusable workflow.

I'm pleased to say that my spike was a success, allowing us to drastically reduce the workflow files in our repositories to a single CI workflow that calls off to our reusable workflow repository. It has been a great learning experience to dive into workflows, jobs steps and actions, and even to work with conditional logic to only run certain jobs and steps in certain cases.

Obviously I can't share private work code, so I've written a simple reusable workflow below as an example of how you can set one up. For further information on setting up reusable workflows to be called from private reposititories, passing inputs or secrets, and more advanced usage etc see the GitHub official documentation in the resources section at the end of this post.

Setting up a simple reusable workflows for HTML validation

Create a reusable workflow

You can call reusable workflows from within the same repository where you will be calling the reusable workflow from, but for this example I've create a new repository to store all my reusable workflows in one central place.

In the repository create a .github folder and within that a workflows folder.
Create your reusable workflow file - I've called mine html_validation.yml

on:
  workflow_call:

jobs:
  html:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4.2.2

      - name: validate-html
        uses: Cyb3r-Jak3/html5validator-action@v7.2.0
        with:
          root: .

As this is the reusable workflow that will be called, we need to include the trigger on: workflow_call. This is what allows the workflow to be called from other repositories.

This is a simple workflow with one job called Validation, and two steps - the first performs a checkout of the repository, then we validate the HTML using the Cyb3r-Jak3/html5validator-action action.

Call a reusable workflow

Now we need to declare the calling workflow - this is the workflow in our repository that will calling the reusable workflow.

Provide the trigger you would like the workflow to be called on in the calling repository - this example is calling the workflow on a push to the main branch, but you could set this up for on a pull request, or other branches etc. Take a look at the GitHub documentation to get an idea of the types of triggers you could use for your own workflows.
Next we'll declare a job, Validate and call off to our reusable workflow with the uses.
The format for calling our reusable workflow is:

<GitHub Username> / <Repository Name> / .github / workflows / <filename> @ <branch>

name: CI

on:
  push:
    branches: [main]

jobs:
  Validate:
    uses: kera-cudmore/example-reusable-workflows/.github/workflows/html_validation.yml@main

Ok time for the results!

When we push a change in the calling repository, we can view the workflows runs in the actions tab, and then select the run with your commit message:

We are then shown a summary of the CI job - showing the workflow file that triggered the run ci.yml, and the jobs run, Validate and html.

Clicking on the validate/html jobs box will then show you the steps detail page. You can expand the steps to view more information, for example the inputs passed in or the commands run as part of the step.

This expanded view is very useful to debug when a job fails, as you can see at which step the job failed and view the logs. The example below shows that the html validation step failed as element p is not allowed as a child of element h1 - this gives us an area of the code to check, and points to the h1 tag not being closed.

I've included the two repositories I created for this post in the resources below, feel free to fork them and play with the workflows.

Resources

Do you use reusable workflows to do something fun in your repositories? Never used them before but think you'll give them a go? Let me know in the comments below 😊

Create sub-issues in GitHub issues

Kera Cudmore — Mon, 08 Jan 2024 10:56:44 +0000

I love utilising GitHub issues to organise a project, especially during a hackathon, and this little tip on how to create sub-issues may come in useful to break up larger tasks into smaller sections. This makes it easier than ever to track exactly what each team member is working on.

How to create a sub-issue

Create an issue in GitHub for the parent task.

In the body of the issue create a task list (checkboxes) for each item you want to make a sub-issue.
Create the issue. You will then be taken to the issue page.

Hover over a task list items you want to convert into a sub-issue. You should see the issue icon appear on the right hand side of the list. Click the icon to create a sub-issue. The task item should change to a link to the new issue.
Open the new sub-issue. Add a description , label, assignee etc.

Pro Tip:

If you want to save time and edit the sub-issues description etc before creating it you can hold the alt/option key and then click the issue icon. This will open the issue form allowing you to further edit the details before creation.

Navigating back to the parent issue is easy, just click the parent issue button located underneath the title on the sub-issues page.

Another fun feature is that the task in the parent will automatically be checked once you close the sub-issue - perfect for keeping track of what issues are left to complete.

Have you ever used sub-issues? I'm looking forward to giving them a spin during my next hackathon, and would love to know what you think of them if you do give them a try.

How to add budget alerts to your AWS account

Kera Cudmore — Wed, 06 Dec 2023 16:50:17 +0000

I'm writing this article to hopefully save someone else going through the pain I did earlier in the year when I received an email from AWS stating that my bill for that March was $14,890 😱

I have only dabbled with AWS a small amount and was only utilising AWS S3 buckets to store images for my full stack e-commerce project with the Code Institute at that point.

I naively thought that my account would be fine as I was on the free tier, and hadn't reached anywhere near the thresholds - I'd forgotten that nothing online is safe, and that you always need to make sure EVERYTHING is kept as secure as possible, especially anything connected to your billing information!

I'd fallen victim to someone who'd somehow managed to gain access to my account and was using it to stream massive amounts of video data, hence the pretty hefty bill. So lets learn how you can protect yourself from this happening to you by adding some budget alerts to your AWS account. 🚨

Add a Zero Spend Budget

Log into your AWS account as the root user.

Note: If you don't have MFA set up on your account, take a quick detour and get that set up now - it's another step that can really help keep your account as secure as possible.
In the top right hand corner click on your account name and then select Billing and Cost Management from the dropdown menu.

From the left hand menu, select budgets and then click the create budget button.

For this article we will be using a template to set up our budget alert, so select use a template, and then choose the Zero spend budget template. This budget which will notify you once your spending exceeds $0.01 for any AWS service (so anything over the free tier). Customise the budget name, add an email address to be notified on and then click the create budget button.

On the budget page you can now select the budget you just created and can view the alert by selecting the Alerts tab. You also have the option to add additional alerts - for example if you wanted to add a an alert for when you reach 75% of your budgeted amount (in this example that would be once our actual cost reaches $0.75). To add additional alerts click the edit alerts button.

On this page you can make further adjustments to the original alert - such as the threshold amount or notification preferences -and add further alerts. To add your second alert, scroll to the bottom of the page and select the Add alert threshold button.

Enter the new alert threshold and click the next button - confirm your alert parameters are correct and click the next button again.

The review page gives you an overview of the details and alerts set up for your budget. Once you have confirmed these details you can select save and this will add the additional alert to your budget. You will then be taken back to the budget overview page where you can once again click into your budget and the alerts tab to see your new alert.

You can now explore all that AWS has to offer, safe in the knowledge that you have budget alerts set up to let you know if you go over any free tier allowances 😊

Other Budgets

As you saw in an earlier step, there are a number of templates you can use to customise to your budget which may be better suited to your purposes - for example you are exceeding the free tier, the free tier period has expired or are paying to use AWS services in a professional capacity you may prefer to use the monthly cost budget template to set a monthly budget amount.

I'd love to know if you found this article helpful, and what you're currently using AWS for - leave your comments below ⬇️

Advent of Code

Kera Cudmore — Wed, 06 Dec 2023 16:47:32 +0000

It's that time of year again - Advent of Code starts! And if this is your first time hearing about Advent of Code, worry not and read on to find out all about it 😊

What is Advent of Code?

Advent of Code was created by Eric Wastl back in 2015 as an advent calendar - but instead of little chocolates you get little programming puzzles to solve instead!

The puzzles range from beginner friendly and become more advanced as time goes on. You can choose to solve them in any programming language you like.

But what's the point?

Advent of Code is a nice bit of fun over the Christmas period.

Make it a bit more of a challenge by competing with a group of friends, co-workers or community group, challenge yourself to complete the puzzles within a set amount of time, use them to boost your understanding while learning a new language, or complete them in each programming language you know - it really is whatever you make of it!

The site hosts a global leaderboard, and also allows you to create your own private leaderboards if you wanted to get competitive with them.

The puzzles can also be a nice way of preparing for interview style questions, and get you practicing that problem-solving mindset.

How can I get involved?

Head over to the calendar section on the Advent of Code website to find the days puzzle.

Puzzles are released daily starting on the 1st of December, midnight EST (5am GMT).

If you're a member of the Codú Discord community, I'll be popping a thread up everyday to allow the community to discuss the daily puzzle - so feel free to to drop a message in to let us know how you got on, what language you used to complete the puzzle, or if you need a bit of help 😊

One Advent not enough?

If you really want to challenge yourself this year, or you're more into cyber security, you may like TryHackMe's Advent of Cyber with the added motivation of prizes

And Scrimba are also joining in the advent fun with JavaScriptmas - which also has some prizes

Have you ever taken part in Advent of Code before? Or will you be giving it a go for the first time this year? Leave me a comment below ⬇️

Spaces vs Tabs: The Great Python Debate

Kera Cudmore — Tue, 21 Nov 2023 12:39:12 +0000

If you've ever used the Python language, you'll know that it is very particular about whitespace and indentation! Each nested block of code needs to be indented 4 spaces in from the last block of code, which is equivalent to a tab - or is it?

Python documentation, more specifically the PEP8 style guide, states that spaces should be used, and if you end up accidentally switching between spaces and tabs in your code Python 3 will throw a TabError. So why is this?

After doing some digging I found a Reddit thread that explains that a tab is actually a single character, despite it taking up the length of four spaces - check out the gif below to see what I mean - the first line is a tab, which when we use the arrow to move back is one character. The second line is 4 spaces, which are 4 separate characters that we can move back through individually.

This can cause issues when different IDE's interpret the characters differently to your IDE, or working within a team where some people tab and some people space - Madness and lots of errors!

Thankfully there is a workaround 🥳 Most IDE's allow you to customise your tab size, allowing you to specify the number of spaces a tab is equal to.

To adjust this in VSCode, open the settings and search for:

Editor: Tab Size

You can then adjust this to use 4 spaces each time you tab within a file. You can also adjust this in the settings.json file and configure the tab size for different languages - read more about this in my article Configure spacing in VSCode by Language

Let me know what camp you fall into in the comments below, and have a giggle at the clip below from Silicon Valley about tabs versus spaces 🤣

Brag documents & why you should have one!

Kera Cudmore — Thu, 10 Aug 2023 19:40:40 +0000

I'm currently participating in a Career MOOC hosted by Code First Girls and was introduced to the concept of using a Brag Document.

What is a brag document?

A brag document (also known as a shine document or hype document) is a small but mighty tool for your career advancement.

It's a way for you to record all your accomplishments, big or small, throughout the year.

So why should you use one?

Most of us can relate to that moment when our minds go blank when asked what we've accomplished during our yearly reviews, and if we can't remember our own accomplishments, it would be unfair to expect our line manager to remember them for us!

Enter the Brag Document!

By adding your wins to your brag document when they happen, you have something you can refer back to at review time to refresh your memory of all the amazing things you've achieved over the past year.

They can also be a fantastic tool to help you provide evidence during a pay or promotion review, or to utilise when refreshing your CV or LinkedIn profile when applying for new positions.

Another fantastic reason to keep a brag document is for your own self reflection and to help build your confidence. We've all had a day where we feel like we're stupid and can't understand even the simplest of things - so it can be great to give your brag document a look over to remind yourself of everything you’ve achieved and how far you’ve come!

What should you include and where to keep it?

There are no hard and fast rules for what should be included in a brag document, or where to keep it - it should be personalised to suit your circumstances and the reason why you're keeping the document.

Some people like to use a notebook, others prefer to use an online document or private GitHub repo - find what works best for you!

Some examples of what you can include are:

What are your goals for the year?
If you are working over several projects, make a section for each project.
Mentorship - are you providing mentorship (officially or not) to someone else?
Documentation - did you create or improve the documentation for a project?
Learning - what are your plans for further learning? Have you completed any courses?
Outside of work wins - do you write a tech blog, mentor someone outside of work? Do you participate in any tech communities, or contribute to open-source?

You can also be kind to your future self and write some entries using the STAR or CARL technique - this will be a big win for when you start thinking about applying for a new position, and have some examples ready to go!

When should you add to it?

Time is our enemy when it comes to remembering what we've accomplished - so the sooner we can get those accomplishments documented, the more we will remember about it!

It can be a good idea to make yourself a regular appointment, perhaps at the end of each week to fill out your brag document, while your wins are still fresh in your mind.

How should you share it?

It can be a great idea to let your line manager and team know you are using a brag document, and invite them to make suggestions on what you can add to it - as we all know we can be toughest on ourselves and only see our failures, so it can be great to get another perspective on our accomplishments.

You could also reciprocate to your teammates and point out when they do something that you feel they could add to their own brag documents - for example if a teammate provides you some mentorship on a project.

However when its time to utilise the document, its best to share the evidence from it rather than the actual document itself.

I'd love to know if you already keep a brag document, or if you plan to start one - I’ve shared some further reading below together with some templates - feel free to share in the comments 😊

What are node_modules in React?

Kera Cudmore — Mon, 24 Jul 2023 13:18:43 +0000

When creating a new React app your project will be populated with a bunch of new folders and files, and you may have noticed a node_modules folder that contains an insane amount of folders.

If you're nosy like me you may have wondered what is this node_modules folder, and what is its purpose? Well wonder no more!

What are node_modules?

node_modules are one of the most important directories in your React project as React requires node_modules to run. The node_modules directory is where all the dependancies packages are stored that are used to build and run your react project.

So this is you'll find packages like React and React-DOM, your build packages like Vite, Babal or Webpack, and linters like ESLint or Prettier to name just a few. This directory can contain hundreds of dependancies!

Why aren't they included in version control?

So if node_modules is such a crucial directory for your react project, why isn't it tracked with version control and included in the project repo?

The main reason is the sheer size of this directory. Rather than including hundreds of package dependancies in version control, we can instead track a file called package.json which contains information about the project, and a list of dependencies required by the app. Other developers can use the package.json file and npm install to regenerate the node_modules.

😱 I've accidentally tracked node_modules

Best practice would be to include the node_modules in the .gitignore file in your project before pushing any code, which will prevent version control from tracking this folder - but if you've accidentally tracked and pushed the node_modules to GitHub, like I did in my first project 🤦🏻‍♀️, simply follow the steps below.

Remove node_modules from version control

Create a .gitignore file in your project and add node_modules
Remove the node_modules:
```
 git rm -r --cached node_modules
```
Commit and push without the node_modules. The node_modules should now be deleted from your repository.

Podcasts for Pythonistas 🐍

Kera Cudmore — Mon, 17 Jul 2023 13:40:03 +0000

Following on from some of my previous articles: Podcasts for Junior Developers and Podcasts for React & JS Developers, I've compiled a list of 6 podcasts perfect for all you Pythonistas!

1. The Real Python Podcast

This weekly podcast airs every Friday morning - bringing you weekly interviews with guests from the python community along with some useful coding tips, career advice and best practices.

2. Python Bytes

Want to stay abreast of all the latest Python developer news, but don't want to spend hours scouring the internet for it? Tune into Python Bites every week and listen to the best picks curated by the hosts Michael Kennedy and Brian Okken.

3. Talk Python To Me

Another podcast hosted by Michael Kennedy, however Talk Python To Me is a more in-depth hour-long conversation with industry experts covering python and related topics.

4. Teaching Python

Kelly Paredes and Sean Tibor share their adventures of teaching middle school computer science using the Python programming language.

5. Pybites

PyBites is perfect for anyone interested in python and covers python Development, career advice and mindset skills along with lots of other tips and tricks. Hosted by the Co-Founders of PyBites, Bob Belderbos and Julian Sequeira.

6. Sad Python Girls Club

A podcast that gives you an insight into the VSCode python team - with their perspective on the python ecosystem and where VSCode fits in. Hosted by Kim-Adeline Miguel and Luciana Abud.

Are you a regular listener of any of the above, or have I missed a podcast that you think is a must listen? Let me know in the comments 😊

👩🏻‍💻 Favicon Generators

Kera Cudmore — Thu, 06 Jul 2023 09:18:11 +0000

What is a Favicon?

A favicon is a fun little icon that promotes brand recognition and trust in your website. It can also help users easily identify your site in their address bar, bookmarks or in the sea of tabs they have open.

A favicon can also indirectly affect your sites SEO. Some search engines display the favicon with the search results, and having an eye-catching favicon could improve your click through rate!

Adding a favicon to your site doesn't have to be difficult, and I've rounded up 5 sites for you to use to create your next custom favicon!

1. Favicon.io

This has been my go-to favicon generator, due to its ease of use.

You have a choice between text, image or emoji when generating your favicon, and they even give you the code to make adding a favicon to your static site a breeze!

2. Real Favicon Generator

Confused about which sizes and devices your favicon covers? Well Real Favicon Generator has got you covered! Real Favicon Generator have done all the research and testing and will craft the perfect favicon to suit each platform, and display a preview for you along with some settings that can be tweaked, allowing you to get your favicon right the first time.

Another really cool feature of Real Favicon Generator is check your favicon. This tool allows you to input your site and they will then an analysis of what platforms you have covered, and some you may have missed.

3. Favicon.cc

Favicon.cc allows you to import an image, or paint your own favicon in the style of pixel art, or choose from hundreds of user uploaded designs.

What makes favicon.cc interesting is their animation generator, which allows you to create an animated pixel-art styled favicon!

Favicons created on favicons.cc are currently only available in ico format.

4. Favic-o-matic

Favic-o-matic is a one stop shop that generates the favicon image and code required for your site. You can choose to create just an ico file, or create all the favicons for different platforms.

They also have the favic-o-meter, which reads your website URL and lets you know if you're missing any platform specific favicons which would improve user experience.

5. Fav.farm

Created by the awesome Wes Bos, fav.farm is the simplest favicon generator, but is a perfect tool for adding a quick favicon to your learning projects.

Wes also shares the code required to use this generator to create a custom cursor!

Do you have a go to favicon generator that isn't listed above? If you do, I'd love to hear about it in the comments 😊

Create a workflow to display your latest articles on your GitHub profile

Kera Cudmore — Tue, 20 Jun 2023 13:40:42 +0000

I recently added a workflow to list my 5 latest Codú articles in my profile, and thought I'd share how I did it to allow you to do the same 😊

Note: These instructions are for adding an RSS Feed for Codú articles specifically. If you would like to add a list for your dev.to articles, you can skip step 1 and use the following URL https://dev.to/feed/[your username here]

Part 1: Create your RSS URL

Copy the URL for your profile page on the Codú site.
Enter your URL into the RSS generator. I used FetchRSS to create my RSS URL as it is free to use. Another alternative would be rss.app
This will either automatically generate the URL for you, or ask you to mark up the parsing pattern. This is basically where you let the generator know which parts to map as the news item, headline, summary, date, author and link etc. On the right hand side you can see the results of the generator. Once you are happy with your selections, click the Generate Feed button for your URL.

Part 2: Create a GitHub Workflow

Open you GitHub profile repo and create a .github folder, and within that create a workflow folder.

In the workflow folder create a new file called blog-post-workflow.yml and insert the code below into the file. Update the feed_list value to be your RSS URL.

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 1 * * *' # Runs daily at 01:00
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
  contents: write # To write the generated contents to the readme

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Pull in codu posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "< ❗️INSERT YOUR RSS FEED URL HERE ❗️ >"

Note: This workflow contains a cron job which tells the workflow how often to run. The code above will run daily at 01:00. If you would like to change the timing of when this workflow runs, you may find crontab.guru a useful site to format your cron value.

In your GitHub profile README, add the following code where you want to see your articles list. You can change the heading to whatever you would like to display, but don't adjust the comments.
```
# 📰  My Latest Articles


```
Commit and push your changes to your repo.

Part 3: Manually Run the Workflow

Now that we have all the code in place, lets manually run the workflow to get our articles displaying in our profile 😊

In your GitHub profile repo, head on over to the actions tab.
On the left hand side, find and click the workflow we just created.
On the right hand side you will see a tab called Run Workflow. Click and select the run workflow button. You will only need to run this workflow using another branch if you have saved the workflow to a different branch within your repo.
Once the workflow has run successfully, head on over to your profile and you'll be able to see your articles list!

Resources

This Article was the inspiration for me adding a RSS feed to my profile.
Blog Post Workflow Repo by gautamkrishnar. The workflow used to update the articles list.
FetchRSS - Free RSS URL generator (login required).
crontab.guru - Easily create your cron schedule expressions using this generator.

Create your Own Code Snippets in VSCode

Kera Cudmore — Mon, 19 Jun 2023 13:11:15 +0000

Code snippets are similar to emmet abbreviations which allow you to insert a snippet of code completely customised to your requirements simply by typing a prompt. Want to join in on the snippet fun? Carry on reading to learn how to configure your own snippets file!

Creating the snippets file

In VSCode navigate to:

Mac: Code -> Settings -> Configure User Snippets

Windows: File -> Preferences -> Configure User Snippets
Decide on the scope of your snippets file:

A New Global Snippets File - which will make snippets available in all languages

A New Snippets File for 'folder Name'. This will allow you to make a snippets file for use in the folder than you have open. Note this option is only shown if you have a folder open in the workspace.

For a specific language - select the language from the dropdown list.
Type the name of your snippets file.
Add your snippets to the file. Snippets are written in JSON and there is no limit to the number of snippets you can define in the file.

Snippets syntax

The example below shows an example of the snippets file with one snippet declared:

{
    "Heading1":  {
        "prefix": "he1",
        "body": [
            "<Heading1 text={`$1`} />$0"
        ],
        "description": "Heading Level 1",
        "scope": "typescriptreact",
    },
}

So lets break down each part of the snippet.

Snippet Name

"Heading1": {
...
}

This is the name of the snippet that will show in intelliSense when you start typing the prefix which allows quick selection. The snippet name is an object that contains all the other pieces of the snippet.

Prefix.

"prefix": "he1"

This is the trigger word/s you want to type to display (and insert) the snippet.

Body.

"body": [
    "<Heading1 text={`$1`} />$0"
],

This is what you want to insert using the snippet. It can be made up of one or more lines.

We can also use $1 syntax to insert tabs to enable us to quickly tab through the snippet and insert the values once inserted in the file. These tabstops start at 1. $0 will always the last tab within a snippet, and so can be useful to use at the end of the code block, as shown in the example above.

Description.

"description": "Heading Level 1",

Optional. This is the description that will show in intelliSense for the snippet.

Language Scope.

"scope": "typescriptreact",

Optional. If defined, this will only enable the snippet to be used within files of the defined languages, so in the example above this snippet would only be available in typescript react files.

Additional Reading

This article only scratches the surface of what can be achieved with snippets. If you'd like to find out about some of the more advanced ways to use snippets I would recommend the following article from Microsoft: VSCode: Define your own snippets

DEV Community: Kera Cudmore

GitHub README images based on prefers-color-scheme

Reusable GitHub Worfklows

Setting up a simple reusable workflows for HTML validation

Create a reusable workflow

Call a reusable workflow

Resources

Create sub-issues in GitHub issues

How to create a sub-issue

How to add budget alerts to your AWS account

Add a Zero Spend Budget

Other Budgets

Advent of Code

What is Advent of Code?

But what's the point?

How can I get involved?

One Advent not enough?

Spaces vs Tabs: The Great Python Debate

Brag documents & why you should have one!

What is a brag document?

So why should you use one?

What should you include and where to keep it?

When should you add to it?

How should you share it?

Further Reading

What are node_modules in React?

What are node_modules?

Why aren't they included in version control?

😱 I've accidentally tracked node_modules

Remove node_modules from version control

Podcasts for Pythonistas 🐍

1. The Real Python Podcast

2. Python Bytes

3. Talk Python To Me

4. Teaching Python

5. Pybites

6. Sad Python Girls Club

👩🏻‍💻 Favicon Generators

What is a Favicon?

1. Favicon.io

2. Real Favicon Generator

3. Favicon.cc

4. Favic-o-matic

5. Fav.farm

Create a workflow to display your latest articles on your GitHub profile

Part 1: Create your RSS URL

Part 2: Create a GitHub Workflow

Part 3: Manually Run the Workflow

Resources

Create your Own Code Snippets in VSCode

Creating the snippets file

Snippets syntax

Snippet Name

Prefix.

Body.

Description.

Language Scope.

Additional Reading