Santosh Bhandari — Blog https://www.santoshb.com.np/feed.xml RSS feed for my blog articles! Proper API Response structure {} importance-of-proper-api-response https://www.santoshb.com.np/blog/importance-of-proper-api-response/ API are core part of every dynamic website. Without proper communication everything can be mess. So here are my thoughts on having an proper API response structure. Thus, there are lots of things which I think we should consider when setting up API response. ### Do not use top level data Objects or Arrays I used to think it's easy to just send the data after fetching it directly from the Database.
For e.g. sending this response for API call `https://api.xyz.com/users/1` ```json { "fullName": "Full Name", "dateOfBirth": "2000-01-01" } ``` Or the e.g. below for API call `https://api.xyz.com/users` ```json [ { "fullName": "First User", "dateOfBirth": "2000-01-01" }, { "fullName": "Second User", "dateOfBirth": "1990-04-04" } ] ``` While it will be easy to return the data like this, it will cause a huge problem sooner or later.
The major problem being **We can't add extra information in the first response object, and it's not even possible in the second response array.** ### Use consistent variable name casing There are variable ways to name a variable: - **camelCase** being the popular one around JavaScript developers. - **snake_case** being the popular one around Python developers (_snake_case for Python developers... what a coincidence..._). - PascalCase - kebab-case I think it was not really necessary to mention about it, because developers using a specific language already have their own preference over variable name casing. _Just a note from my side; using multiple name casing in a single project is a big **NO**!_
If possible, I would even suggest everyone to grab a name casing technique and follow it throughout the entire journey of programming in life. ### Use proper variable names This is not just for the API response object, but also the codes itself and Database entity itself as well. I am pretty sure there are thousands of articles/notes motioning about how variable names should be written so I am not gonna go in depth, but I would like to attach a simple yet important note about this topic:
Variables name should be "**As short as possible, as long as required**"! ## Solution The simple yet powerful solution to API response structure is to simply have the data structure as follow: For e.g. sending this response for API call `https://api.xyz.com/users/1` ```json { "message": "Successfully fetched User data", "data": { "fullName": "Full Name", "dateOfBirth": "2000-01-01" } } ``` Or the e.g. below for API call `https://api.xyz.com/users` ```json { "message": "Successfully fetch Users data", "pagination": { "page": 1, "count": 2, "perPage": 10 }, "data": [ { "fullName": "First User", "dateOfBirth": "2000-01-01" }, { "fullName": "Second User", "dateOfBirth": "1990-04-04" } ] } ``` You might have already noticed that I am able to send message in the API response. And also in the second API usage example, I am even able to send pagination details.
There will be thousands of data processing happening, so pagination is obviously to be done sooner or later. However in the previous approach we could not properly mention about the pagination details. Which we have overcome. You might now be wondering, **Isn't it painful to access the data going one more level deep in the object?** i.e. `response.data` instead of `response`.
The answer is Yes, but apart from that downside, it's only good point I can think up of. For e.g. lets say we have to respond with error message if the API request is invalid. Following this approach, we can simply send the response like: ```json { "message": "Invalid email address" // or any other error message } ``` And now in the frontend/mobile app, we can always refer to `response.message` to get the information about the API usage. And to understand if the API call was a success or failure, we can use HTTP status code of the API call. ### The main point The major point of all this discussion is that the APi response should never be a top level data object itself. Instead use an object which contains all the information you want ot share from server to frontend (not related to API).
And within the top level object, include the data related to the API call inside a `result` or `data` key. This will result in **clean** and **consistent** API response across every API endpoint. And also you will be able to share extra information which is not related to the specific API call. ## Conclusion I have done this mistake in the past and learnt a hard way from it. That doesn't mean you have to make this mistake yourself to learn.
You can try implementing this approach I have mentioned in your next project (or even your current project if possible without major breaking changes). _If you are someone developing API, I would love to hear your thoughts about this approach and if you would like to switch to this approach (if not already using)._
_If you are someone who consumes API, I would love to hear your thoughts about how this change (if it is not what your current API provides) would affect you._ **If you are already using this approach, then cheers, you are making life of yourself and the frontend developer easy 😉**]]> Mon, 23 May 2022 00:00:00 GMT Brief Introduction to Hacktoberfest 2021 introduction-to-hacktoberfest https://www.santoshb.com.np/blog/introduction-to-hacktoberfest/ Hacktoberfest is an annually happening event for the whole month of October. If you know use github/gitlab and love open source projects then you should read this article. You will be able to get Free rewards! Thu, 09 Sep 2021 00:00:00 GMT Supercell Creator code program supercell-content-creation-and-creator-code https://www.santoshb.com.np/blog/supercell-content-creation-and-creator-code/ Creator codes are part of the special program being run by Supercell. You should start supporting your favourite supercell content creator right away! Also you can join the program yourself! Something interesting is on the bottom as well! **NOTE**: It took me really long to find all these codes and there are still many missing (_I am sure about that_), but it will take only about a minute to support your favourite content creator. So do support your favourite content creator! **NOTE2**: I have attempted to test all of the codes but if any are found to be wrong please inform me! ## Supercell MAKE Although this article is all about supercell creators, but I though Supercell Make deserves a mention as well. It is another of the supercell program that tries to involve it's users (_that's us_). They run various campaigns over there so that users can make various skins for brawl stars and the selected ones win amazing prize money! So if you are good at making 3D characters then you definitely need to head to the supercell make platform. Start making some amazing skins and get your hands on that prize money. All the best to you! Here is the link to the [Official website](https://make.supercell.com/)!]]> Fri, 12 Jun 2020 00:00:00 GMT Adding commenting system to website adding-user-engagement-with-comments-to-websites https://www.santoshb.com.np/blog/adding-user-engagement-with-comments-to-websites/ Engage the users in your community or website by providing awesome commenting system and more features. Choose any from this awesome list and start engaging your community with ease. commenting system disqus ### Facebook [Facebook](https://facebook.com) is a really well known global brand. Even if you don't user it you might have heard about it once in your lifetime. That already explains how famous it is. There are millions of people using facebook and that is one of the reason why facebook launched it's own commenting system. If your website is focused upon user base from facebook or if your site is related to facebook by any means then you should go for this system. If not I would suggest not to add extra pain in your life. Wonder why? Lets get to the feature and you will know by yourself! - **FREE** - Can be used with users registered on facebook only. _That's why not good for site targeting audience outside of facebook!_ - Facebook life feel. _It is exactly as what you would see in the platform itself, so gives the home like feeling to the users!_ - Admin panel for all moderation and related stuffs - Webhooks - And many more... Although facebook itself is really well known global brand, the commenting system provided by it is not good outside the scope of Facebook related stuffs. So better realize and think about it if you are planning to use it on your site already! ### Spot.IM [Spot.IM](https://www.spot.im/) is a really new thing for me as well. I had never heard about it till date. _**Thanks to you guys I learned something new**_ But after looking at it the only thing I can say is **WOW**. It looks really promising because of all the features it has, but I could not find any details about it's pricing so you guys got some task to do if you plan to use it! Lets dive into it's features: - Conversations; yeah thats simply commenting system but with really rich detailing though! - Community spotlight - Live blogs; to give real time updates to your users for anything critical, important or emergency - Reactions - Powerful moderation options with AI integrations - User profiles and notifications - Analytics and insight - And many more... All these features look really promising for sure. I am already thinking of doing a small project to test it out with amazing people like you. If you are eager just like me or if you already use it then let me know in the comments below.
commenting system spot.IM
### HTML Comment Box [HTML Comment Box](https://www.htmlcommentbox.com/) is simple yet powerful commenting system. There is nothing much to describe about it because it is just plug-and-play stuff. But if you have a look at the site you will see additional widgets available. Those are really awesome. So make sure to have look at them! ### Viafoura [Viafoura](https://viafoura.com/) is another of those promising looking commenting system I found while working on this article. Lets dig right into its features: - Real time conversations _Includes rich features display_ - Live stories for live streams - Community chat - Automated moderation - Moderation possibilities - Community reviews - Integrated login - User personalization - And many more... It is yet another of that amazing stuff which I want to try out someday.. Let me know in the comments below if you are impatient just like me to test it out!
commenting system viafoura
## List goes on The list goes on to be honest. There are lots and lots of free and paid commenting systems out there. But in the end it is your choice what you want to use! If I have to be honest the only ones I knew about are Disqus and Facebook commenting system. All the rest are the result of my research I did for this article alone. Usually most of the people prefer disqus for the first choice. So did I. But I know everyone is unique so everyone would not go for the same one I did, or others did. So in addition to all the sites listed above I wanted to notify the source that introduced me to these other sites. You can yourself check the ones listed here and more system from the link below: [g2.com/categories/commenting-systems](https://www.g2.com/categories/commenting-systems) ## Closing notes It was a really fun time writing article. And I learnt something new today about all the possibilities of commenting system. I did realize that disqus or facebook is not the only stuff that is taking the market. There are really awesome stuffs, _maybe even better than those existing_ that is still unknown to many people just like me. As I discussed in the entire article **Let me know about all your thoughts and feedbacks** about this article. I will be hearing them all and hopefully you will teach me something new as well. Until next time, farewell, Stay Safe!]]> Thu, 11 Jun 2020 00:00:00 GMT Creating markdown powered blog creating-markdown-powered-blog-with-ease https://www.santoshb.com.np/blog/creating-markdown-powered-blog-with-ease/ How to create a blog with markdown? How to use markdown to create a blog? If those are the question you have then with the awesome tools like Nuxt.js, nuxt-content and the awesome Jamstack concept the task gets easy like never before!
``` The above example will simply display the content of the fetched article. How you customize the page is completely upto you yet again. The article passed into the `document` prop is the object that we obtained after fetching specific article after the dynamic slug param. Theoretically that is all you should do to display the content of the article. But you would love to add more details right? You can simply modify the page template to show off your imagination! Furthermore your page design will not be included into the markdown content. Thus if you want to customize the markdown with custom style you will have to do that like: ```css /* Making the h2 component have red color. This is just me, you don't have be bad with examples! */ .nuxt-content h2 { color: red; } ``` A live example of the usage can be found [here](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue#L65-L191)! I too have used the same thing... _No copyright please!_ ### Working with dynamic routes The core concept of this article is working with static generate site. So we will have to specify all the routes (_the article list for us_) while generating the site. This too is really easy with the content module. With that simple addition of the code below to `nuxt.config.js` your site will be ready to handle the dynamic article page. ```js[nuxt.config.js] export default { modules: [ '@nuxt/content' ], generate: { async routes() { const { $content } = require('@nuxt/content'); const articles = await $content('blog').only(['slug']).fetch(); // Generating the routes for the unique page of each article... return articles.map((article) => `/article/${article.slug}`); } } } ``` **NOTE:** From 2.13+, `nuxt export` is said to have a crawler integrate to the core module. Which means the code above will not have to be injected into your config file! That has to be all with the development of a basic markdown powered blog using `nuxt` and `nuxt-content`. If you did everything right then your blog should be working as well. If not just tell me in the comments below! Also like any other module, content also provides customization options so that you can customize the behavior as you like. You can check about the customization options [here](https://content.nuxtjs.org/configuration)! ## Bonus It was a really long article to write and I am pretty sure it was hard to read it all as well. So I thought about sharing some interesting things with you guys. I actually wanted to list out points/stuffs which you might find interesting, and you can even integrate it with the blog you will be making with the awesome `content` module: - [Netlify](https://www.netlify.com/): Host the blog you created right away! - [Implement reading time](https://content.nuxtjs.org/advanced#contentfilebeforeinsert): You can implement reading time in your articles. _Details are from the official nuxt-content module!_ - [Sitemap](https://github.com/nuxt-community/sitemap-module): Let the web crawlers know each and every of your content! - [Blog feeds](https://github.com/nuxt-community/feed-module): Let your community know when articles are out! - [Nuxt color mode](https://github.com/nuxt-community/color-mode-module/): Which do you prefer, day or night ?? - [Nuxt components](https://github.com/nuxt/components): Get rid of those component imports that occur everywhere. _Comes with core nuxt 2.13+_ - [Disqus](https://disqus.com/): I love user engaged community! - [vue-disqus](https://www.npmjs.com/package/vue-disqus) to make things easy. - Optionally you can go for facebook comment plugin or other comment plugin provider! - [**This site**](https://github.com/TheLearneer/santoshb.com.np) is a live example and demo of using this article! _Lots of changes will be made to the site and article itself to show what more you can do with it!_]]> Sun, 31 May 2020 00:00:00 GMT How to earn money online working-methods-to-make-online-income-with-ease https://www.santoshb.com.np/blog/working-methods-to-make-online-income-with-ease/ It actually is possible to make income online with bit of effort and dedication. I am personally making some money online doing stuffs I like. So I thought to share this with you. I am pretty sure you will also be able to do so! Sun, 26 Apr 2020 00:00:00 GMT Working with Supercell API how-to-use-supercell-api-with-dynamic-ip https://www.santoshb.com.np/blog/how-to-use-supercell-api-with-dynamic-ip/ Using the supercell games' API requires a static IP, which means users doing hobby projects will not be able to use them. Not long after reading this article. I personally have got it working and so will you. Sat, 07 Mar 2020 00:00:00 GMT