Top 5 Awesome Things to do in your README!
Tags: opensource, github
Published: 2020-02-10 10:16:12

**README.md is the landing page of your code.**

If you are building an open-source repository, README is the most important file in the whole repository.

It has to not just look good, but also read well. 

It should tell its readers everything.

- Usage

- Installation

- Website

- Version

- Are tests failing or passing?

- Average Activity

- User Testimonies

- License

- Star Gazers on GitHub

- And much more...

The good news is, most of the above information can be expressed in just a few dynamic SVG elements!

You have seen them already, everywhere... in every famous repository.

I really like how [Mr. Ahmed Awais](https://ahmadawais.com/) writes his READMEs. See an example [here](https://github.com/ahmadawais/create-guten-block).

# What are README Badges?

See this 👇

![Example Badges](https://i.ibb.co/9vc2JjR/Add-badges-for-Travis-CI-Coveralls-and-Code-Climate-to-your-Readme-ruby-4.png)

Your badges don't have to be that boring.

You can check out all the badges you can use [here](https://shields.io).

---

# Here are 5 must-have README badges!

### 1. **`🧪🧪🧪 Travis Tests Status`**

This is the current Travis status of [my NPM Package](https://www.npmjs.com/package/bulk-mail-cli) 🔰 

![Travis Status for bulk-mail-cli](https://img.shields.io/travis/adventmail/bulk-mail-cli)

You can get the badge in your readme by pasting the following syntax... 

Replace `:githubUsername` and `:repository` with real data.

```md
![Travis Status](https://img.shields.io/travis/:githubUsername/:repository)
```

---

### 2. **`⭐️⭐️⭐️ Rate on pkgreview.dev`**

[pkgreview.dev](https://pkgreview.dev) is an app where users can review and rate your NPM Package. Users can write testimonies of your package on the app.

To encourage them to write the testimonies/reviews... You can add this in the README 👇

[![Review us on pkgreview.dev](https://i.ibb.co/HPTDdXH/Screenshot-2020-01-28-at-6-36-44-PM.jpg)](https://pkgreview.dev/npm/react)

You can get the badge in your readme by pasting the following syntax...

Replace `<package-name>` with the real package name. You can check the package name and URL on [pkgreview.dev](https://pkgreview.dev).

```md
| **Like us a lot?** Help others know why you like us! **Review this package on [pkgreview.dev](https://pkgreview.dev/npm/<package-name>)** | ➡   | [![Review us on pkgreview.dev](https://i.ibb.co/McjVMfb/pkgreview-dev.jpg)](https://pkgreview.dev/npm/<package-name>) |
| ----------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------------------------------------------------------------------------------------------------- |
```

---

### 3. **`🔰🔰🔰 NPM Downloads Badge`**

The below image shows the number of times **React** was downloaded on NPM last week...

![times React was downloaded on NPM last week](https://img.shields.io/npm/dw/react)

You can get the badge in your readme by pasting the following syntax... 

Replace `:packageName` with the NPM Package slug/name.

```md
![NPM Downloads](https://img.shields.io/npm/dw/:packageName)
```

---

### 4. **`📝📝📝 License Badge`**

People should know what license your repository uses. If your repository uses NPM, you can fetch license dynamically and get a badge like this 👇

![bulk-mail-cli License](https://img.shields.io/npm/l/bulk-mail-cli)

You can get the badge in your readme by pasting the following syntax... 

Replace `:packageName` with the NPM Package slug/name.

```md
![NPM License](https://img.shields.io/npm/l/:packageName)
```

---

### 5. **`🐦🐦🐦 Twitter Badge`**

If you have a Twitter account for your repository, or if you have a Twitter Account as a maintainer of the repository, you gotta show a dynamic Twitter badge!

[![Twitter](https://img.shields.io/twitter/follow/kumar_abhirup.svg?style=social&label=@kumar_abhirup)](https://twitter.com/kumar_abhirup)

You can get the badge in your readme by pasting the following syntax... 

Replace `:twitterHandle` with your Twitter username.

```md
[![Twitter](https://img.shields.io/twitter/follow/:twitterHandle.svg?style=social&label=@:twitterHandle)](https://twitter.com/:twitterHandle)
```

---

### That was just a scratch on the surface!

The possibilities with READMEs are endless if you use SVGs by [shields.io](https://shields.io).

You can create all kinds of custom and dynamic README SVG badges with it... Take a look!

[![Shields.io Screenshot](https://i.ibb.co/r6239Bj/Screenshot-2020-02-10-at-3-26-55-PM.jpg)](https://shields.io)

### With it, you can create badges for the following...

- NPM Packages

- WordPress Plugins

- Travis Tests

- CircleCI tests

- Discord badge with live `online` count

- Twitter follower count

- GitHub Stats

- Funding by OpenCollective

- Uptime Monitors

- GitHub Stargazers

- And so much more!

---

# Conclusion

README badges are useful. They provide so many insights and also look cool on GitHub and Package Managers like NPM.

---

### About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

[Connect with me on Twitter 🐦](https://twitter.com/kumar_abhirup)
[My personal website and portfolio 🖥️](https://kumar.now.sh)

_Comment below your better ways, and suggestions to improve this post. :)_