This content originally appeared on DEV Community and was authored by Khang
So, I'm back again with another pet project I have just finished and would like to share with everyone in this article:
? This is it, an image generated dynamically from a RESTful service that allows me to easily display my statistics from DEV.to anywhere. Interesting? Read on to see some background and what I learned from making this, or if you want yours, head right to my repo for instructions on how to deploy one for your own:
DEV Stats
? That's mine, want yours? It's easy! Follow these steps:
-
Star this repo (optional, but it makes me ?)
-
Select one below to deploy this repo to your platform of choice
-
Generate your DEV API key
-
Add it as an environment variable named
API_KEY(for Heroku you need to configure this variable in the settings after deployed) -
Deploy and enjoy the result!
Options
The service accepts these query parameters as inputs to customize the stat card:
-
lang=en- localize the card. Add your language in i18n.json -
background=fff- set the card's background color -
text=000- set the card's text color -
chartColors=dc67ab,dc67ce,a367dc,6771dc,67b7dc,fff- set the chart colors, the last one is the labels' color
Examples:
Dark theme:
Customized chart colors:
Contributing
I would appreciate it, feel free to open pull requests to contribute if you like it and have more amazing ideas for further features.
The inspiration
Yes, I believe some people should have realized it, this was inspired by the amazing idea from anuraghazra which allows us to dynamically generate our Github stats and display it easily anywhere as an SVG image. I find it interesting how he could manage it, so I went and checked out his source code, and attempted the same method for my DEV stats.
The techs
As a developer with little experience in backend, I'm just simply amazed by the idea of using the RESTful API as such, to generate an SVG image that is capable of dynamically display your data from other sources.
This is also a great start for me to get into the world of server-side JS, powered by NodeJS and Express. So thanks to the love for JS, I was familiar with most of the things already, and after taking some hours to learn the basics about Node from a 1-hour course by Mosh (which I really recommend), and read through some docs and articles, I got things up and running without so much trouble.
The data for my DEV stats are provided thanks to the DEV API. Though still in a beta stage, the API is already capable of providing a handful of information that, after some simple processing, can be displayed as statistics.
The key factor for the success of this idea is how to represent the data dynamically, in the simplest way where it may be used anywhere, and that factor is by using SVG. I also went through some guides and articles about SVG to proceed and in the end, from making this, I got to learn the basic structure of an SVG document and some common elements. The pie chart, which shows the most commonly used tags in the articles, is a little tough for my current capability, so I went and picked a simpler workaround by using the awesome QuickChart service offered by Ian Webster. QuickChart is really convenient, be sure to check it out.
Deploying to Vercel/Heroku was also not so bad of an experience for a beginner. I also created 2 buttons for convenient instant deployment in the repository. So in summary, check out the repo and I would welcome any contribution to improve or extend it. Thank you for reading, and see you in the next post.
This content originally appeared on DEV Community and was authored by Khang
Khang | Sciencx (2021-03-11T23:41:58+00:00) A simple RESTful service to display DEV.to stats. Retrieved from https://www.scien.cx/2021/03/11/a-simple-restful-service-to-display-dev-to-stats/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.