Collection: Build Badges

Badges on source code repositories are important to first-time users. In today's collection, I focus on using build badges along with ways to get started

Written by Jonathan "JD" Danylko • Last Updated: • Develop •

Ceramic Police on a sidewalk

On a developer's journey, your skills grow from building your first application with code check-in to creating unit tests and deploying your application using DevOps.

DevOps gives developers the ability to off-load certain tasks to let the system build the code for you and, optionally, deploy it to certain environments automatically. This is called Continuous Integration/Continuous Delivery, or CI/CD.

Every task added to a DevOps pipeline is meant to automate what developers experience when building software. This includes building the software, running unit tests, pushing a completed build to an environment (dev, QA/staging, or Prod), or even creating release notes.

After your build completes and more codebases become public, users of the codebase sometimes want to know the status of an open-source project.

Did it complete? Is it unit tested? Is it still compiling/building?

This is where badges come into play.

Badges fall into two categories: dynamic and static.

  • Dynamic - These convey a state to your users whether a build or unit tests completed successfully.
  • Static - Lets the user know the type of licensing for your projects, the language it uses, or can be just a fun little badge for entertainment purposes.

Whether dynamic or static, they are extremely easy to use in your repositories.

How to Use Badges

Badges are easy to include in any source code repository. Usually, they are available on the README page when visiting a GitHub repository.

Also, each badge in this list has their own installation method. You may need to register for a key or follow additional instructions to make it work.

Honestly, it's simply a snippet of either markdown, HTML, or image URL you copy-and-paste into your README document.

For example, if you want to display the size of your GitHub repository:

GitHub Code Size

Place an image into your markdown pointing to this image file (taken from shields.io).

https://img.shields.io/github/languages/code-size/badges/shields.svg

The image URL will call the server and automatically generate the image related to the repository.

Follow the badge instructions on how to include them in your README, but don't go crazy. I've seen "badge saturation" on a couple repositories. Only include the relevant and important information for each repository.

The list below may be small (only 5), but as with every collection, I like to grow each collection with user contributions on their favorite to make the collection more valuable. 

Shields.IO

The majority of badges I've seen around the Internet come from shields.io mainly because of their large catalog of badges.

This is a great place to start.

They even have a way for you to build your own badges.

List of Badges in Markdown

There are references to Shields.IO in here, but there are a couple not related that I thought would be useful as well.

ShadyNagy

If you're looking for a snazzy badge for your Github profile page, check out ShadyNagy's profile page. Everyone has a README on their profile and what better way to let everyone know what kind of repositories and languages you support.

His README is here in raw form.

If you'd like to manage your own profile page, Github provides a guide on how to create a profile README.

Awesome GitHub Badges

Of course, I had to mention "a collection in my collection."

BadGen

BadGen is another service to create your own badges based on URL. Quite extensive as well.

Conclusion

With all of the repositories out there, badges allow first-time users to get a "dashboard" view of your project based on the badges.

What kind of license is it? Is it broken? Is there a community behind this project? It's something you want to convey to users as a professional developer.

Again, I want to grow this list. If you have a favorite badge site not listed here, let me know and I'll add it to the collection.

Other Collections

Did you like this content? Show your support by buying me a coffee.

Buy me a coffee  Buy me a coffee
Picture of Jonathan "JD" Danylko

Jonathan Danylko is a web architect and entrepreneur who's been programming for over 25 years. He's developed websites for small, medium, and Fortune 500 companies since 1996.

He currently works at Insight Enterprises as a Principal Software Engineer.

When asked what he likes to do in his spare time, he replies, "I like to write and I like to code. I also like to write about code."

comments powered by Disqus