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…
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.
Top comments (6)
This is awesome! Excellent work.
Is the pie chart still in progress or did I configure something wrong?
Thanks for checking it out.
I have corrected the source since there was an update in the QuickChart.io. If you deployed my source code, the change will take effect automatically after some time, otherwise, you will need to update your source code.
Thanks for the update! Somehow going through vercel's deploy process selecting to "fork" the repo just copied it instead of doing a properly linked fork. It's now properly linked and showing that beautiful pie chart (I did have to edit the link on DEV; it seems to do some pretty hefty caching of images based on link address).
Thanks for the info Nathan, it seems I need to correct the steps in the guideline. And yes, you're right, the images here appear to be cached, though the workaround is rather simple.
Just stumbled upon this project, I find your work to be really useful for new writers on Dev.to to showcase their work and view stats! 😄
Thank you, and of course, anyone is welcome to stuff in more features, so feel free if you've got some more ideas.