DEV Community

Cover image for Top 5 Awesome Things to do in your README!
Kumar Abhirup
Kumar Abhirup

Posted on

Top 5 Awesome Things to do in your README!

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)


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

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.ย :)

Top comments (2)

Collapse
 
loq24 profile image
Lougie

Nice! Thanks for this!

Collapse
 
maheshthedev profile image
Mahesh Sv

Thanks for Sharing