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:
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.
Khang
