DEV Community

loading...
Cover image for Top 5 Awesome Things to do in your README!

Top 5 Awesome Things to do in your README!

Kumar Abhirup
I am a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day. 😍 Twitter: @kumar_abhirup Website: kumar.now.sh
・3 min read

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 writes his READMEs. See an example here.

What are README Badges?

See this πŸ‘‡

Example Badges

Your badges don't have to be that boring.

You can check out all the badges you can use here.


Here are 5 must-have README badges!

1. πŸ§ͺπŸ§ͺπŸ§ͺ Travis Tests Status

This is the current Travis status of my NPM Package πŸ”°

Travis Status for bulk-mail-cli

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

Replace :githubUsername and :repository with real data.

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

2. ⭐️⭐️⭐️ Rate on pkgreview.dev

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

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.

| **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

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

Replace :packageName with the NPM Package slug/name.

![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

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

Replace :packageName with the NPM Package slug/name.

![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

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

Replace :twitterHandle with your Twitter username.

[![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.

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

Shields.io Screenshot

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 🐦
My personal website and portfolio πŸ–₯️

Comment below your better ways, and suggestions to improve this post.Β :)

Discussion (2)

Collapse
loq24 profile image
Lougie

Nice! Thanks for this!

Collapse
maheshthedev profile image
Mahesh Sv

Thanks for Sharing