DEV Community: Gobinath Mallaiyan

What is a Webhook?

Gobinath Mallaiyan — Sun, 24 Sep 2023 14:49:43 +0000

Before developing webhooks in any system, any new bee should take a tiny refresher on this topic. Webhooks are used in web application development to integrate multiple systems for real-time communication. It sends automated notifications and data via HTTP to another system based on a preconfigured trigger. Below is the list of everyday use cases of webhooks in modern application development.

Real-Time Updates: We can send real-time updates and push notifications, ensuring that Information is delivered as soon as an event happens, rather than relying on periodic polling for change. A simple use case could be an e-commerce website that can use a webhook to inform a fulfillment service whenever an order is placed, ensuring timely order processing.
**Integration: **Webhook enables the integration of different applications, services, and platforms. For example, a CRM system may use webhooks to update customer records whenever a user fills out a contact form on a website.
Notifications: The information we receive on our mobile devices (or) web browsers. For example, when you receive a new message on your Instagram Chat, a microservice on their server would trigger a webhook to notify your mobile IG client.
Data Synchronization: It can keep data synchronized between systems.
Automation: Webhooks are integral to automation processes. When an event occurs, a webhook can automate actions in response. For instance, a content management system can automatically use a webhook to share newly published articles on social media platforms.

High-level Information on how webhooks typically work:

Configuring Webhook: A developer configures a webhook that generates events in an application. This typically involves providing an endpoint URL where the webhook payload will be delivered on the occurrence of an event.
Event Trigger: Any event, such as user registration, order placement, chat message and similar action, occurs in a source system.
HTTP Request: The source system will be configured to send an HTTP request with a payload to the endpoint URL. Typically, these payloads are in the form of JSON XML.
Receiver: The destination application receiving the webhook listens for any incoming requests at the endpoint URL. It gets the data & processes the payload, and will perform any required answers.
Response: The receiving system acknowledges the receipt of the webhook by sending an HTTP response back to the source, confirming that the data was successfully received and processed.

Webhooks are highly versatile and widely used in modern software development, enabling efficient communication between components, services, and platforms. They provide a more efficient and scalable alternative to traditional polling-based methods for retrieving and reacting to data changes and events.

Image Credit:
Photo by Julian Christ on Unsplash

Effective Comments in React.js Code for PHP/Drupal Developers

Gobinath Mallaiyan — Sun, 05 Sep 2021 10:40:30 +0000

React.js is an incredibly powerful JavaScript library that has gained immense popularity for its ability to build dynamic and interactive user interfaces. It is widely used for developing robust and efficient single-page applications as a PHP or Drupal developer. Venturing into React, it becomes paramount to possess a deep understanding of how to write comprehensible and compelling comments. These comments contribute to the codebase's maintainability and promote effective collaboration within the development team.

When it comes to commenting in React.js, developers have various options at their disposal. Function comments play a crucial role in explaining a particular function's purpose, expected inputs, and return values. By providing insightful comments, developers can ensure their operations are self-explanatory and produce more readable and understandable code. These comments can also serve as a helpful guide for future developers who might need to work on the codebase.

In addition to function comments, file comments are equally crucial in React.js development. These comments provide an overview of the entire file, highlighting its purpose, dependencies, and other relevant information. By including well-written file comments, developers can provide context and guidance to their colleagues, making it easier for them to understand the purpose and structure of the file.

It is worth noting that while comments are highly beneficial in enhancing code clarity, they should only be used when necessary. Comments should focus on explaining the why rather than the what, as the code should be self-explanatory. Moreover, comments should be written concisely and precisely, avoiding unnecessary verbosity.

Regular Comments Styles

Single-line Comments are helpful for brief explanations within the code.

    // This is a single-line comment
    const variable = 'value';

Multi-line Comments are suitable for providing more extensive explanations

    /*
      This is a multi-line comment.
      It can span multiple lines to provide detailed information.
    */
    const anotherVariable = 'another value';

Use TODO Comments to highlight areas that need special attention (or) future improvements (or) marking a pending task.
```
// TODO: Implement error handling for edge cases
const getData = () => {
  // Implementation details...
};
```
Commenting Out Code when temporarily disabling code that’s not in use. Use comments to explain the reason.

   // The following line is commented out for debugging purposes
    // someFunctionToDebug();

Divider Comments can help separate sections of your code for better organization. This is done differently by different developers, as there is no specific standard.

```// ======= Helper Functions =======
const helperFunction1 = () => {
// Implementation details...
};

// ======= Main Logic =======
const mainFunction = () => {
  // Implementation details...
};```

By incorporating these regular comment styles, you enhance the overall clarity of your React.js code, making it easier to understand for both yourself and your team.

Function Comments

When writing comments for a function with no arguments, it’s essential to describe the purpose of the function and any expected output.

// Retrives User details and Display const getAndDisplayUserDetails = () => { // Implementation details... };

For functions with arguments, include comments for each parameter, specifying their purpose and expected types.

 * Renders a user profile card
 * @param {string} username - The username of the user
 * @param {string} displayname - The displayname of the user
 * @param {number} age - The age of the user
 */
const displayUserProfile = (username, displayname, age) => {
  // Implementation details...
};```

When a function has default arguments, comment on the defaults and their impact.

 * Displays a welcome text message
 * @param {string} name - The name to welcome
 * @param {string} message - The message (default: 'Hello')
 */
const welcomeUser = (name, message = 'Hello') => {
  // Implementation details...
};```

For functions with a mix of arguments and default arguments, comment on each parameter’s role.

```/**
 * Calculates the total cost
 * @param {number} quantity - The quantity of items
 * @param {number} price - The price per item
 * @param {number} discount - The discount percentage (default: 0)
 */
const calculateCost = (quantity, price, discount = 0) => {
  // Implementation details...
};```

File Comments

General File Comments: Provide an overview of the file’s purpose and significant functionalities at the top of the file.
```
  File: User.js
  Description: This file contains components & functions related to users.
*/```
```

Import Comments: when importing external modules (or) components, briefly comment on their role in the file context.

import React from 'react'; // Import the React library import PropTypes from 'prop-types'; // Import PropTypes for type checking

Component Comments: Explain their role and any prop types.

 * UserCard Component
 * Displays user information in a card format.
 */
const UserCard = ({ user }) => {
  // Implementation details...
};
UserCard.propTypes = {
  user: PropTypes.object.isRequired,
};```

Additional Resources

React.js Official Documentation

JavaScript Standard Style

Airbnb JavaScript Style Guide

Remember that clear and concise comments are invaluable for understanding code, especially when transitioning between PHP/Drupal and React.js development. By wholeheartedly embracing these commenting practices, you truly enhance the maintainability and readability of your React.js projects. So, let your passion drive you and make your code speak volumes through thoughtful and expressive comments!

To conclude, precise and effective commenting in React.js is crucial to code maintainability and team collaboration. By utilizing various commenting techniques, such as function and file comments, developers can ensure that their codebase remains understandable and approachable even as it grows in complexity. By investing time and effort into writing thoughtful comments, developers can contribute to the success of their React.js projects and foster a collaborative development environment.

Originally published at http://gobinathm.com on September 5, 2021.

Fixing a shallow GIT repo 💻

Gobinath Mallaiyan — Fri, 01 May 2020 01:49:49 +0000

Sometimes, a developer might intentionally (or) unintentionally end up with a shallow GIT Repo. And this can be a pain for those who unintentionally end up with shallow Repo.

You need to unshallow your local Repo. Following these simple steps can help you out of this situation.

Step 1: You must update/fix your origin remote repo.

git remote add origin <path-to-old-remote>

Step 2: You would need to perform a git fetch with an unlike option (as suggested below)

git fetch — unshallow origin

Just these two steps would restore your repo to the normal state. After this, you can perform all options, like push into your new remote repository.

Initially, this was posted as a GIST @ https://gist.github.com/gobinathm/96e27a588bb447154604963e09c38ddc