DEV Community: Ayush Soni

Git Together: Pro Tips for Commits and Branches

Ayush Soni — Mon, 22 Jul 2024 11:29:27 +0000

Hey everyone, In today's blog, I want to share some best practices for using Git more effectively. You know Git, right? Yes, the Git that you’re already familiar with and that amazing tool which makes our coding journey smooth. Git is like your trusty sidekick in coding, making project collaboration a breeze.

When a developer looks back at commits from 6–8 months ago, it’s often hard to remember why a particular commit was made. This usually happens because the commit message wasn’t clear. Following commit message standards is key. By adopting these practices, your commits will be clear and easy to understand for you or anyone reviewing them later.

A well-written Git commit message is the best way to convey the context of changes to other developers. Also, the team should agree on a commit message convention that clearly specifies the version control history of the project/product they are building.

👀 Before you dive in:
- I have organised each sub-section on Branch Naming Conventions and Commit Message Conventions into basic, intermediate and advanced rules.
- Feel free to follow the rules up to whichever level suits your needs, but I recommend sticking to at least the intermediate level for the best results.
- The content here is adapted and organised from various resources, which you’ll find listed in the Reference section.

Do you often create branches without knowing why, struggle to understand your own commits or find yourself digging through file changes to make sense of a commit? If that sounds familiar, don't worry. I've got some easy-to-follow tips to help you out.

Why should I follow the standards?

Clarity and Understanding: Ever looked at a commit from months ago and wondered, “What was I thinking?”. Clear commit messages make it easy to understand the purpose of changes, even after a long time.
Collaboration and Teamwork: Well-written messages help everyone on the team stay on the same page and work together more effectively.
Ease of Navigation and Maintenance: Following standards makes navigating and maintaining the codebase straightforward and less of a headache.
Documentation and Knowledge Transfer: Good commit messages act like mini-documents, helping new team members quickly get up to speed on the project history.
Project Quality: Consistent practices improve the overall quality and reliability of the project, making it stronger and more resilient.
Automated Changelogs: By sticking to standards, you can generate automated changelogs, making release management a breeze.
Optimizing CI/CD: Clear commit messages can enhance your continuous integration and continuous deployment processes, providing essential context for automated tools.
Debugging and Issue Resolution: When problems arise, standardised messages help quickly identify the cause, making debugging and issue resolution faster and easier.
Accountability: Clear messages document who made specific changes and why, adding. a layer of accountability to the project.
Consistency Across Projects: Adhering to commit message standards ensures consistency across different projects, making it easier for the developers to switch between projects and understand their histories.

Branch Naming Conventions

Basics

Descriptive Names: A well-named branch gives immediate context for its purpose. Instead of generic names, choose clarity.

For example:

- `feature/login`
- `bugfix/navbar-overflow`

Use Hyphens: Use hyphens (kebab case) to separate words in branch names for better readability.

For example:

- `bugfix/fix-login-issue` is more readable than `bugfix/fixLoginIssue` or `bugfix/fix_login_issue`.

Alphanumeric Lowercase Characters: Stick to alphanumeric lowercase characters (a-z,0-9) and hyphens. Avoid punctuation, spaces, underscores, or special characters whenever possible.
Avoid Unnecessary Hyphens: Don’t use unnecessary hyphens like subsequent or trailing hyphens.

For example:

- `feat/new—login—` is a bad practice.

Short and Effective: Keep branch names simple. They should be descriptive yet concise enough to convey the goal at a glance.

Prefix or Type

Prefixing branches helps to organise them according to their purpose. This not only improves clarity but also aids in automating workflows.

Here are some common branch type prefixes and their usage:

feature/: For developing new features. For example:
- feature/new-dashboard
- feature/user-profile-page
- feature/new-feature
bugfix/: For fixing bugs in the code. Often associated with an issue. Examples:

For example:

- `bugfix/login-error`
- `bugfix/incorrect-calculation`

hotfix/: For addressing critical bugs in production.

For example:

- `hotfix/memory-leak`
- `hotfix/urgent-security-patch`

release/: For preparing a new release, typically used for final touches and revisions.

For example:

- `release/version-1.0.0`
- `release/2.1.0-final`
- `release/version-1.0.0`

docs/: For writing, modifying, or correcting documentation.

For example:

- `docs/update-api-docs`
- `docs/installation-guide`

chore/: For routine tasks and maintenance that don’t affect the code’s functionality, like updating dependencies or building scripts.

For example:

- `chore/dependency-update`
- `chore/refactor-build-scripts`
- `chore/update-dependencies`

test/: For adding or updating tests.

For example:

- `test/add-unit-tests`
- `test/fix-integration-tests`

style/: For changes that do not affect the code's functionality but improve formatting, like code style or linting fixes.

For example:

- `style/code-cleanup`
- `style/fix-indentation`

perf/: For performance improvements.

For example:

- `perf/optimize-loading-time`
- `perf/reduce-memory-usage`

revert/: For reverting previous changes.

For example:

- `revert/feature-branch-name`
- `revert/hotfix-issue-123`

refactor/: For code refactoring that doesn’t change functionality but improves code structure or readability.

For example:

- `refactor/optimize-helpers`

experiment/: For experimental features or changes that are still in the testing phase.

For example:

- `experiment/new-algorithm-test`

build/: For changes to the build process or configuration.

For example:

- `build/update-webpack-config`

Including Ticket Numbers

If your project uses an issue tracking system like Jira, GitHub Issues, or another tool, include the issue token in the branch name. This practice makes it easy to track and reference related tasks.

Example: feature/PROJ-123-footer-links

Additional Context

Using a consistent branch naming convention helps everyone on the team understand the purpose of each branch at a glance and streamlines the development workflow. It also makes it easier to integrate with CI/CD pipelines and automated tools, as well as to maintain a clean and organized repository.

Commit Messages Convention

As an open-source contributor/maintainer who experienced these good practices at a startup, squash feature branches onto master or main and write a standardized commit message while doing so. Writing clear and effective commit messages is crucial for maintaining a well-documented codebase. Here’s how you can structure your commit messages for maximum clarity and consistency:

<type>[optional scope]: <description>

[optional body]

[optional footer]

Message Subject

Imperative Mood: Write commit messages in the imperative mood. Start with a verb to indicate what the commit does.

For example:

- Use `fix: correct typo in homepage` instead of `fix: Corrected typo in homepage`

Short and Standardized: Keep the subject line within 50 characters to ensure readability in various Git tools, like when using git log --oneline. Avoid trailing periods and unnecessary words or symbols.
Capitalize the Description: Start the subject line with a capital letter.

Type and Message Body

Type Prefix: Use a type prefix in the subject line to represent the nature of the changes included in the commit. The commit type should include:
- feat: Summarizes a feature in the codebase.
- fix: Addresses a fix to the codebase.
- build, chore, ci, style and refactor are other examples.
Scope: Optionally add a scope to the commit’s type to provide additional context. Enclose the scope in parentheses.

For example:

- `feat(auth): add OAuth support`

Message Body: Add detailed explanations in the commit body. Leave a blank line after the subject line to separate it from the body.
💡 **Wrap the body at 72 characters:** Use multiple lines of body text, ensuring each line does not exceed 72 characters limit.

Footer and Extended Message Body

Footer: Use the footer to convey additional details regarding the commit like such as Reviewed-by or Approved-by, etc.

For example:

- `Signed-off-by: John <john@example.com>`

Breaking change: Indicate breaking changes with a “BREAKING CHANGE” footer or by adding a ! sign after the type/scope.

For example:

- Message: `chore!: drop support for Node 6`
- Extended footer should be as follows:

    ```markdown
    BREAKING CHANGE: Remove support for Node 6 as it lacks necessary features.
    ```

Multi-paragraph Body: Use multiple paragraphs in the body to explain the what, why and how of the commit changes in greater detail.

For example:
```
fix: Resolve issue with user login

The previous implementation caused a login failure when the
user had special characters in their password. This commit
refactors the login validation to properly handle special 
characters.

Additional tests have been added to cover edge cases.
```
By following these conventions, you ensure your commit messages are informative, consistent, and helpful for anyone working on the project now and in the future.

Simplifying Commit Messages with Handy Tools

To make sure your commit messages are consistent and clear, you can use tools like Glitter or Commitizen. These tools help you stick to a standardized format for your commit messages.

For an extra layer of consistency, try Commitlint. I had personally utilized this and found it right for standardized commit messages. This tool checks your commit messages and throw an error if someone does not follow the guidelines, ensuring everyone on the team stays on the same page.

Many companies uses JIRA, ClickUp or any other project management tool for ticket IDs as commit message. This practice makes it easy to link and trace changes, keeping the codebase maintainable for future developers.

Adding emojis to commit messages is also popular. I have put together a list of emojis and their meanings that you can use to make your commit messages more expressive. Check it out here: https://gist.github.com/ayushsoni1010/cfc409ebabaae68b84a70306cc67c297

Conclusion

Mastering the art of writing effective commit messages is an invaluable skill that enhances collaboration and maintains the integrity of your codebase. By following these conventions, you ensure that your commit history is clear, informative, and easy to navigate. Whether you’re working alone or as part of a team, these practices will make your version control process more efficient and your codebase more maintainable.

Remember, a little attention to detail in your commit messages can save countless hours in the future and contribute to a smoother development workflow for everyone involved.

Happy committing🌱

References

That's all for today.
If you enjoyed this content, please share your feedback.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.

Follow @ayushsoni1010 for more content like this🔥😉.

How to install fastn on your local machine

Ayush Soni — Wed, 03 May 2023 16:04:58 +0000

After gaining experience in website development, it's time to broaden your skills and learn how to develop, build, and deploy your fastn apps to showcase your work to the world. Let's explore the installation process.

📌Introduction

fastn is a powerful web framework written in Rust that allows you to build interactive user interfaces, full-stack web applications, and content-centric websites. For developers and non-developers, building websites and framing the user interface using HTML, CSS, and JavaScript can sometimes be troublesome.

What if a non-programmer wants to build their portfolio or any website? It would take a lot of time to learn these languages while building the overall project or any websites. In this blog, we will delve into the installation process of fastn in various ways based on different machines and explore the functionalities of both fastn and ftd.

📌What's ftd?

ftd is a programming language for building beautiful user interfaces and content-centric websites. It is easy to learn and designed for everyone, not just for programmers, especially for non-programmers. Building websites and creating interfaces using HTML, CSS, and JavaScript can sometimes be challenging for both developers and non-developers.

However, fastn provides a solution by offering a programming language called ftd that is designed with minimal syntax and is user-friendly that everyone can understand at first glance. It does not even look like a programming language and even non-programmers can quickly grasp its minimal syntax, which resembles markdown syntax and makes it highly human-readable and accessible.

📌What's fastn?

fastn is a web framework, a content management system, and even serves as an integrated development environment for ftd. It is a web server that compiles ftd to HTML, CSS, and JS. It allows you to deploy fastn applications on any static hosting provider, such as GitHub Pages, Vercel, fastn Cloud, or your own server.

It also provides a lot of ready-made UI components that help to develop your websites faster in no time, and you can even create your custom components. fastn is used to work with ftd files, and it ships pre-built binaries for Linux, Mac, and Windows.

To kickstart your journey with fastn, I recommend checking out the short video course available at fastn.com/expander. This course provides a quick introduction to the basics of fastn and will help you get up to speed in no time.

📌Prerequisites

To benefit the most from this article, the following pre-requisites are required:

GitHub account
Install Git on your machine and set up Git
The latest cargo version is installed on your system.

📌Installation of fastn

Based on the machines, there are three ways to install fastn:

Install fastn through the pre-built binary on Windows (Recommended)
Install fastn through the pre-built binary on MacOS/Linux (Recommended)
Install fastn using cargo
Install fastn from source

💡 Recommendation

We recommend you install fastn through pre-built binary.

This is the preferred method as it only requires downloading the binary and installing it on your local system.

👉Install fastn through the pre-built binary on Windows

To install fastn through the pre-built binary, follow these steps:

Download the executable from the Releases page
Click on the latest release
Get the executable file for Windows on the releases page under Assets
Create a folder named FASTN in your C drive
Go to Settings and search for Environmental Variable
Check for Path and double-click on it in the user variables
Click on the New button and set a path for FASTN in your machine's Environment Variable
The recommended path would be C:\FASTN, then apply settings.

Installation of fastn is completed. To verify, open the command prompt and execute the command fastn.

If you face any difficulty while installing fastn, check out the youtube video.

👉Install fastn through the pre-built binary on MacOS/Linux

For MacOS, we have an installer script, you just need to copy and paste the given below script into the terminal

sudo bash -c "$(curl -fsSL https://raw.githubusercontent.com/fastn-stack/fastn/main/install.sh)"

Installation of fastn is completed. To verify, open the terminal and execute the command fastn.

If you face any difficulty while installing fastn, check out the youtube video

👉Install fastn using cargo

If you have cargo installed on your system, you can run the following command to install fastn.

For more details on how to install cargo are given here.

cargo install fastn

👉Install fastn from source

fastn is an open-source project. You can clone the fastn github repository:

git clone https://github.com/fastn-stack/fastn.git

fastn is implemented using Rust, using the 2021 edition, so the minimum supported Rust version (MSRV) is 1.65.0.

cd fastn
cargo test
cargo build

Linux Dependencies

When building from source you will have to install SSL and SQLite dev packages:

Once you have installed the fastn you can start using ftd files.

sudo apt-get install libsqlite3-dev libssl-dev

📌Conclusion

fastn is a powerful web framework that helps developers and non-developers create interactive user interfaces, full-stack web applications, and content-centric websites. Its ftd programming language has minimal syntax and is user-friendly. fastn comes with many ready-made UI components, and developers can create custom components too. It's a great tool for showcasing work to the world.

Overall, the article provides a comprehensive guide to installing fastn on Windows, MacOS, and Linux. The guide recommends using the pre-built binary method for installation. It also covers how to install fastn using cargo or from source code.

📌Over to you

Which static hosting providers do you use to host your fastn applications?

Let me know in the comments😄

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸

Follow @ayushsoni1010 for more content like this🔥😉.

Deploy your React app using GitHub pages

Ayush Soni — Tue, 04 Apr 2023 06:11:54 +0000

After gaining experience in creating React apps, it's time to explore various deployment options available to showcase your work to the world. We have been using Create React App to develop our React applications, so let’s see what it has to offer for our deployment process.

📌Introduction

React is a powerful JavaScript library for building interactive user interfaces. Once you have created your React app, the next step is to deploy it to a server so that it can be accessed by the users.

Assuming you have built a React app and are now searching for a means to share it with the rest of the world, there are numerous options available to deploy a React app and it’s always good to try something new. One popular and feasible option is to make use of GitHub Pages.

GitHub Pages is a free hosting service that allows you to easily deploy and share your web projects. So, why not take advantage of this option and give it a shot?

In this blog post, we will go through several steps to deploy your React app using Github Pages.

📌Prerequisites

GitHub account
Install Git on your machine and set up Git.
Install Node.js

📌Step 1: Creating the repository

The first step is to create a new repository on GitHub for your React app. Once you have created your repository, clone it on your local machine using the Git command line tool for a Git GUI client.

📌Step 2: Create your React app

After cloning your empty git repository, create a react app in the working of your git repository by the following command:

npx create-react-app ./

📌Step 3: Add the dependencies to your app

Install the following package in your React app:

npm install gh-pages --save-dev

📌Step 4: Add configs to your react app

Normally, our app will be deployed on a subdomain with our username on github.io like any other app, so to keep our app well-informed about our root URL, we need to add a homepage attribute to our package.json file and assign the URL to it.

"homepage": "https://{user-name}.github.io/{repo-name}",

📌Step 5: Build your React app

Before you can deploy your React app to GitHub pages, you need to build it. In your package.json file, add the predeploy and deploy keys under scripts to create a production-ready build of your app. This will create a build directory in your project directory that contains the optimized and minified production build of your React app.

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Your package.json file should be similar to this:

{
  "homepage": "https://ayushsoni1010.github.io/test-react-app-deploy",
  "name": "test-react-app-deploy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^5.0.0"
  }
}

📌Step 6: Deploy your React app

Now, all we need is to run npm run deploy command in the terminal every time we make changes and want to deploy our app with the latest changes and it will be up and running on the server.

npm run deploy

This command will create a branch named gh-pages. After the build finishes, it pushes the changes to the gh-pages branch on the remote repository and hosts your app.

Now, it should be deployed to your GitHub repository after some time. To acquire the URL, go to your repository and click on Settings and go to Pages.

Boom! Your site is live on GitHub Pages.

📌Step 7: Commit and Push your changes to GitHub

Once you committed the changes, you need to push your changes to GitHub.

Run the following commands to push your changes to the remote repository.

git add .
git commit -m "your commit message"
git push origin main

📌Conclusion

Deploying your React app to GitHub Pages is a simple and easy way to share your app with the world. By following these steps, you can quickly deploy your app and make it available to anyone with an internet connection. GitHub Pages is a great option for small projects, personal websites, or demo sites. If you have a complex app or need more control over your hosting environment, you may want to consider other hosting options. But for simpler React apps, GitHub Pages is an excellent choice that is both free and easy to use.

📌Over to you

Have you used github-pages to host your React applications?

Let me know in the comments😄

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.

Follow @ayushsoni1010 for more content like this🔥😉.

Build an API with Serverless Functions in Next.js

Ayush Soni — Sat, 01 Apr 2023 05:49:37 +0000

Next.js is a React framework that provides two ways of rendering React components into HTML pages - server-side rendering(SSR) and static site generation(SSG).

In SSR, React components are rendered into HTML pages on the server after a page request comes from the browser, while in SSG, React components are rendered into HTML pages at build time.

Regardless of which method is used, the rendered HTML pages are sent to the browser, making the app behave like a single-page application(SPA). This is in contrast to client-side rendering, where components are rendered in the browser. With Next.js, you can enjoy the benefits of both SSG and SSR, such as improved performance and better SEO. In addition to these features, Next.js also offers Serverless Functions, which we’ll be covering in this article.

We'll cover the Next.js page and dynamic routes and learn about Next.js API and dynamic API routes, all while running Serverless Functions on Vercel, a platform designed specifically for Next.js applications.

💎Introduction to Serverless Functions in Next.js

The term “serverless functions” is just a naming convention. AWS calls it Lambda Functions, but Vercel calls them their Serverless Functions, they are the same thing.

Serverless Functions are not directly a part of the Next.js API. However, Next.js provides developers with API routes that can be deployed as Vercel Serverless Functions and this is the crux of this article.

💎Pre-requisites

To benefit the most from this article, the following pre-requisites are required:

Basic understanding of JavaScript
Basic understanding of Next.js
Basic understanding of API design
The latest Node version is installed on your system.

💎Setting up our application

We will start by bootstrapping the Next.js application and using create-next-app to automatically set everything up. To create a Next.js project, run the following command:

yarn create-next-app

After the installation is complete, start your app by running yarn dev. When you visit localhost:3000 you will get:

💎Page routes in Next.js

In Next.js, each page is driven by a component. For example, an “About” page will have an About component. Each page component has a file inside a page folder, thus, the file name and location of each page component are tied up to the particular page’s route.

To elaborate on this, navigate your browser to localhost:3000/about and you will get:

The 404 page shown above simply shows that Next.js cannot find a component in the page folder called about. This is because we have not created an About component in the pages folder.

To resolve this, create an about.js file inside the pages directory and add the following code:

const About = () => {
    return (
        <div>
            <h1>Hello World!</h1>
        </div>
    )
};
export default About;

Now, revisit to localhost:3000/about and you get:

When we created the About component in the pages folder, Next.js automatically created a route to server the About component. Thus, the route name is tied to the filename.

💎Dynamic routes in Next.js

Next.js pages support dynamic routes. This is useful because complex applications require more than just defining routes by using predefined paths.

In Next.js, you can add brackets to a page component name, [param.js] to create a dynamic route for example. The page can be accessed via its dynamic route: pages/users/[param].js. Here, [param] is the page’s id, slug, pretty URLs, etc. Any route like /users/1 or /users/abcdef can be matched.

Next.js will send the matched path parameter as a query parameter to the page and if there are other query parameters, Next.js will link the matched path parameter with them.

To elaborate on this, the matched route /users/abcdef of dynamic route pages/users/[param].js, will have the query object:

{
        "param":"abcdef"
}

Similarly, the matched route /users/abcdef?foo=bar of a dynamic route, pages/users[param].js, will have the following query object:

{
    "foo":"bar",
    "param":"abcdef"
}

In your application, create a user folder, and inside it create a component named [username].js. Add the following code:

import { useRouter } from "next/router";
const User = () => {
    const router = useRouter();
    const username = router.query["username"];
    return (
        <div>
            <h1>Hello! Welcome {username} </h1>
        </div>
    );
};
export default User;

Now, when you visit http://localhost:3000/users/ayushsoni1010, you get the display content would be Hello! Welcome ayushsoni1010.

From the above demonstration, you see that Next.js matched /users/ayushsoni1010 with the dynamic route pages/users/[username].js. Thus whatever username is passed in the route will be displayed on the page. You can try out different usernames.

In addition to it, creating and serving pages with the page routes, Next.js can create APIs with the API routes. Based on our knowledge gained so far, let’s learn about Next.js API routes in the next section.

💎 API Routing with Next.js Serverless Functions

API routes were introduced in Next.js v9. They enable us to build backend application endpoints, leveraging hot reloading, and a unified build pipeline in the process.

What this means is that Next>v9 encapsulates both the frontend and backend. We can rapidly develop full-stack React and Node.js applications that scale effortlessly.

While the page routes serve Next.js pages as web pages, Next.js API routes are treated as an endpoint. The API routes live inside the /pages/api folder and Next.js maps any file inside the folder to /api/* as an endpoint.

This feature is very interesting because it enables Next.js to render data on the frontend that is sorted in the Next.js app or render data that is fetched using Next.js API routes.

By bootstrapping your application with creat-next-app, Next.js automatically creates an example API route, the /pages/api/hello.js file, for you. Inside /pages/api/hello.js, Next.js creates and exports a function named handler that returns a JSON object.

You can access this endpoint via the browser by navigating to http://localhost:3000/api/hello and the following JSON is returned:

{
    "name": "John Doe"
}

💎The request handler function

As seen above, to create a Next.js API route, you need to export a request handler function as default. The request handler function receives two parameters:

req: an object that is an instance of http.IncomingMessage, and some prebuilt middlewares.
res: an object that is an instance of http.ServerResponse, and some helper functions.

To build an API with the API route, create a folder called data in the root directory. Create a post.json file inside the data folder with the following code:

[
  {
    "id": 1,
    "title": "I am title 1",
    "body": "Hello from post 1"
  },
  {
    "id": 2,
    "title": "I am title 2",
    "body": "Hello from post 2"
  },
  {
    "id": 3,
    "title": "I am title 3",
    "body": "Hello from post 3"
  },
  {
    "id": 4,
    "title": "I am title 4",
    "body": "Hello from post 4"
  },
  {
    "id": 5,
    "title": "I am title 5",
    "body": "Hello from post 5"
  }
]

Now, in the pages/api folder, create a new file called posts.js with the following code:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import posts from "../../data/posts.json"
export default function handler(req, res) {
    res.status(200).json(posts)
}

In the API route above, the handler function imports the JSON data posts and returns them as a response to a GET request. When you query for this data by visiting http://localhost:3000/api/posts from the browser, you get:

You can use the request.method object as seen below to handle other HTTP requests:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    case 'PUT':
      //...
      break
    case 'DELETE':
      //...
      break
    default:
      res.status(405).end() // Method not allowed
      break
  }
}

💎Dynamic API routes

Like page routes, Next.js API routes support dynamic routes and dynamic API routes follows the same file naming conventions and rules as page routes.

To elaborate more on this, create a posts folder inside the pages/api folder. Create a file named [postid].js inside the posts folder and paste the following code to it:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import posts from "../../../data/posts.json"
export default function handler(req, res) {
    const { postid } = req.query;
    const post = posts.find((post => post.id === parseInt(postid)));
    res.status(200).json(post)
}

In the above code, Next.js automatically matched the /posts/2 with the dynamic route pages/api/posts/[postid].js. Whichever post id is passed to the route /posts/[postid]: /post/2, /post/3, /post/4, etc. will be available in the req.query object.

The request handler function above retrieves the passed post id from the req.query object, finds the post in the posts array, and sends it to the client.

So to get the post with an id of 2, navigate your browser to http://localhost:3000/api/posts/2. You will get:

💎Advantages of API routes

Next.js API routes are deployed as Serverless Functions in Vercel. This means they can be deployed to many regions across the world to improve latency and availability.

Also, as Serverless Functions, they are cost-effective and enable you to run your code on demand. This removes the need to manage infrastructure, provision servers, or upgrade hardware.

Another benefit of API routes is that they scale very well. Finally, they do not specify CORS by default because they are same-origin, however, you can customize this behavior by using the CORS request helper.

💎Over to you

Which APIs have you built with Next.js API routes?

💎Conclusion

In this article, we learned about an interesting and powerful Next.js feature — API routes. We began by learning about the Next.js page route and delved into API routes. We also learned how to build an API using Next API routes, deployed as Vercel’s Serverless Functions.

I do hope that at the end of this article, you can build APIs using Next.js APIs Route.

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.

Follow @ayushsoni1010 for more content like this🔥😉.

Supercharge your React app with useSWR

Ayush Soni — Wed, 29 Mar 2023 23:04:42 +0000

🚩Introduction

As a developer, you might find it challenging to handle error cases while writing code. Fetching and caching data efficiently is essential for improving app performance and reducing loading time. Whether you are working with APIs, remote data fetching, or from other sources, getting data into your app quickly and reliably can be a major challenge. In this blog, we will explore how to use useSWR, compare its existing hooks, and show why it's better.

🚩Pre-requisites

This article assumes that you are familiar with JavaScript, React, and Next.js. It would be helpful to have a good understanding of hooks, asynchronous JavaScript, and creating custom hooks. Let's dive straight in!

🚩How useSWR works

The useSWR
hook takes two parameters: key and fetcher. The key is something that uniquely identifies the data to be fetched, usually the API URL, while the fetcher is a function that returns the data. The hook returns two values: data and error, representing the request's status. These two values can be used to set a loading state and an error fallback, respectively. The significant perk of the useSWR
hook offers is how it simplifies the data fetching logic, delivering API data or returning an error response with just two lines of code. Furthermore, for each request made, a cached version is first returned while the server revalidates the request and returns updated data immediately after revalidation, helping optimize the web app and improve speed.

🚩Getting started with useSWR

The name SWR is derived from the concept called "stale-while-revalidate," which is an HTTP cache invalidation strategy popularized by HTTP RFC 5861. It performs data fetching in 3 steps:

Returns cached data first (stale)
Sends the fetch request (revalidate)
Returns the up-to-date data

The hook comes with a display of benefits which includes:

Simplicity of Logic
Lightweight
Offers revalidation
Easy pagination
Supports TypeScript and a host of other perks.

To get started with useSWR, you first need to install it as a dependency in your React or Next project:

yarn add swr 
or
npm install swr

Once installed, you can import the useSWR hook and use it in your components to fetch and cache data.

Let’s understand it through an example:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data');

  if (error) return <div>Error fetching data</div>;
  if (!data) return <div>Loading data...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

As you can see, useSWR provides a more straightforward and concise way to fetch and cache data in React. It handles caching and error handling automatically and provides options for polling and deduplication.

🚩Pagination

Pagination is a crucial feature of modern web applications. It helps users to navigate through large amounts of data with ease. In React, the SWR library provides an API called useSWRInfinite for implementing complex pagination patterns. However, for common pagination patterns, useSWR is sufficient.

Let’s take an example below:

function Page ({ index }) {
  const { data, error } = useSWR(`/api/data?page=${index}`, fetcher);

  // ... handle loading and error states

  return data.map(item => <div key={item.id}>{item.name}</div>)
}

function Pagination () {
  const [pageIndex, setPageIndex] = useState(0);

  // The API URL includes the page index, which is a React state.
  const { data, error } = useSWR(`/api/data?page=${pageIndex}`, fetcher);

  // ... handle loading and error states

  return <div>
    {data.map(item => <div key={item.id}>{item.name}</div>)}
    <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
    <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
  </div>
}

Of course, this works if the API has a provision for pagination. Also, since SWR provides caching, the preceding and previous pages are pre-fetched or preloaded when rendered in the abstracted div element. Other types of pagination such as Infinite Loading can also be achieved easily using SWR.

🚩Comparing useSWR and existing hooks

One common approach to fetching and caching remote data in React and Next is to use useEffect and useState hooks.

Let’s understand it through an example:

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then(setData)
      .catch(setError);
  }, []);

  if (error) return <div>Error fetching data</div>;
  if (!data) return <div>Loading data...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

While this approach works, it has some limitations. For example, it requires more code to handle caching and error handling. It also doesn't provide options for polling or deduplication.

Now let’s compare this with useSWR:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data');

  if (error) return <div>Error fetching data</div>;
  if (!data) return <div>Loading data...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

As you can see that useSWR provides a simpler and more concise way to fetch and cache data in React or Next. It handles caching and error handling automatically and provides options for polling and deduplication.

🚩Performance comparison

To compare the performance of UseSWR with useEffect and useState, we'll use the same API endpoint for both approaches: jsonplaceholder.typicode.com/todos. We'll measure the time it takes to fetch and display 100 to-do items from the API.

Here's the code for fetching and displaying todo items using useEffect and useState:

import { useEffect, useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((response) => response.json())
      .then((data) => setTodos(data.slice(0, 100)))
      .catch((error) => console.error(error));
  }, []);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.completed} />
          <span>{todo.title}</span>
        </li>
      ))}
    </ul>
  );
}

Using this approach, it took an average of 150-200 milliseconds to fetch and display the 100 to-do items.

Now let's compare this with UseSWR:

import useSWR from 'swr';

function TodoList() {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos');

  if (error) return <div>Error fetching data</div>;
  if (!data) return <div>Loading data...</div>;

  const todos = data.slice(0, 100);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.completed} />
          <span>{todo.title}</span>
        </li>
      ))}
    </ul>
  );
}

Using UseSWR, it took an average of 100-150 milliseconds to fetch and display the same 100 to-do items.

As you can see, UseSWR performs better than useEffect and useState in terms of speed, even though it handles caching and error handling automatically.

Over to you

Have you used the useSWR hook before?

Let me know in the comments😄

🚩Conclusion

The SWR hook saves us the stress of writing our own logic for data fetching, making our code a lot cleaner and simpler. A better option is to use the useEffect hook which perfects for static generated sites. Furthermore, it offers revalidation, and even more advanced options such as custom caching, middleware, and TypeScript support. Feel free to check out the official documentation to learn more.

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.

Follow @ayushsoni1010 for more content like this🔥😉.

Why is Nginx called a “reverse” proxy?

Ayush Soni — Tue, 28 Mar 2023 06:41:32 +0000

🔥Introduction

Nginx is a highly performant, scalable, and reliable open-source web server software that is frequently utilized as a "reverse proxy.” But why is it labeled as a "reverse" proxy which raises the question?

Many companies use proxy servers to route and secure traffic between networks. There is often confusion, however, on how this differs from a reverse proxy. In this blog, we will be exploring the origins of the term “reverse” and “forward” proxy and understanding how Nginx functions as a reverse proxy.

🔥Overview of Forward and Reverse Proxy

First, let's start with the basics of what a proxy server is. A proxy server, sometimes referred to as a “forward” proxy, is a server that acts as an intermediary between clients and other servers on the network. When a client makes a request, the forward proxy intercepts the request and forwards it to the appropriate server on behalf of the client. By doing so, the client’s identity and location are hidden, convert and mask IP addresses, block unknown traffic from the server and the server’s response is sent back to the forward proxy, which in turn forwards it back to the client.

Now, let's dive into the concept of a "reverse" proxy. A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers. A reverse proxy is not used to serve client requests directly. Instead, it acts as a gateway to servers that are behind it, allowing those servers to receive client requests without directly exposing them to the internet.

The diagram below shows the differences between a forward proxy and a reverse proxy.

A forward proxy is commonly used for:

Avoid browser restrictions
Block access to certain content
Protect clients

A reverse proxy is good for:

Protect servers
Load balancing
Caching static contents
Encrypt and Decrypt SSL communications

In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP/2, TCP, and UDP protocols.

🔥Why is Nginx called a “reverse” proxy?

Nginx is called a reverse proxy because it acts as an intermediary server between clients and backend servers, intercepting responses from the backend servers and forwarding them to the appropriate clients. In this way, Nginx functions as a reverse proxy.

🔥Benefits of using Nginx as a reverse proxy:

Enhanced security: Nginx can act as a firewall, blocking malicious traffic and protecting backend servers from attack.
High availability: Nginx can be configured to distribute traffic among multiple backend servers, ensuring high availability and reducing the risk of downtime.
Simplified management: Nginx can be used to serve multiple domains or applications from a single server and making it a highly efficient solution for managing complex web environments.
Load balancing: Nginx can distribute incoming traffic across multiple backend servers, which can improve performance and ensure high availability.
SSL/TLS termination: Nginx can terminate SSL/TLS connections, which can offload processing from backend servers and improve performance.

🔥Over to you:

Which proxy you will use: Reverse proxy or HAProxy?

Let me know in the comments: which and why🤔

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey🌸.

Follow @ayushsoni1010 for more content like this🔥😉.

Crafting Effective Chaos Error Messages

Ayush Soni — Sun, 26 Mar 2023 19:19:25 +0000

💡Introduction

Error messages are a common part of our online experience. Whenever a server is down, we lose internet connection, or we forget to fill out information on a form, we receive an error message. However, the classic "Something went wrong" message is not very informative. What exactly went wrong?

It's important to understand what happened and how to fix it. Therefore, in chaos engineering, error messages should be more meaningful and provide clear instructions on how to resolve the issue.

💡What makes a bad error message?

Error messages are part of our daily lives online. They inform us when something goes wrong, and help us understand what happened and how to fix it. However, not all error messages are created equal. A bad error message can leave us frustated, confused, and unable to resolve the issue at hand.

💡Here are some common characteristics:

Uninformative: Error messages that simply state "Something went wrong" or "Error 404" without any further explanation or context are not helpful. They don't tell us what went wrong or how to fix it.
Technical jargon: Error messages that are full of technical terms or jargon that the user may not be familiar with can be intimidating and confusing. Users shouldn't need a degree in computer science to understand what went wrong.
Blaming: Error messages that blame the user for the issue can be frustrating and unhelpful. Instead of pointing fingers, error messages should focus on providing solutions and clear next steps.
Inconsistent: Error messages that look different from the rest of the website or application, or that are poorly designed, can be confusing and unprofessional. They should be consistent in style and design, and should be easy to read and understand.

By avoiding these common pitfalls, we can create error messages that are clear, informative, and helpful for users.

💡What makes a good error message?

A good error message should be clear and concise, explaining what went wrong in a way that the user can understand. It should also suggest a solution or actions the user can take to resolve the issue. Additionally, a good error message should be friendly and not use technical jargon that the user may not be familiar with.

When crafting error messages, it's important to consider the context in which they will be displayed. For example, an error message displayed to a client user may need to be worded differently than an error message displayed to a developer.

By carefully considering the content and tone of error messages, we can create a better user experience and help users troubleshoot issues more effectively.

💡Here are some common characteristics:

Clarify what happened and why: Make it super clear what did or didn’t happen. This can be done with a combination of visuals and text to explain errors and their causes.
Reassure users: Let them know what was not affected by the error, such as saved drafts.
Be empathetic: Use "please" when appropriate to show understanding.
Help users fix the issue: Give them clear instructions for fixing the issue or direct them to a knowledge base resource or article with a descriptive link like, “Learn how to resolve this” or “How do I fix this?”
Always give a way out: If the problem persists or could reoccur, give them a Customer Care contact option.

💡Over to you

What's the best and worst error message you've seen?👀

Wrong answers only🫠
Let me know in the comments😀

💡 Article Reference: https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet 😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey 🌸.

Follow @ayushsoni1010 for more content like this 🔥 😉.

HTTP Status Codes

Ayush Soni — Sat, 25 Mar 2023 20:11:24 +0000

What are the most common HTTP status codes?

HTTP status codes are essential in understanding the response returned by a server after making an HTTP request. They provide the information about the status of the request and response from the server.

🎯HTTP response codes are categorized into five groups:

Informational (100-199)

Success (200-299)

Redirection (300-399)

Client Error (400-499)

Server Error (500-599)

🎯Here are some of the most common HTTP status codes:

200 OK: This status code indicates that the request was successful.
404 Not Found: This status code indicates that the requested resource could not be found on the server.
500 Internal Server Error: This status code indicates that there was an error on the server that prevented the request from being fulfilled.
401 Unauthorized: This status code indicates that the client is not authorized to access the requested resource.
403 Forbidden: This status code indicates that the client does not have permission to access the requested resource.

These codes are just a few examples of the many HTTP status codes that exist. The exact list of most common HTTP status codes can vary depending on the context and the specific application.

🤔Over to you:

HTTP status code 401 is for Unauthorized. Can you explain the difference between authentication and authorization, and which one code 401 check for?👀

Let me know in the comments😀

🎯Conclusion

HTTP status codes are essential in understanding the response returned by a server after making an HTTP request. By categorizing the codes and having a clear set of definitions for each, developers can quickly identify and troubleshoot issues with their applications.

That's all for today.

If you enjoyed this content, please share your feedback and consider retweeting the first tweet 😀.

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet and document my coding journey 🌸.

Follow @ayushsoni1010 for more content like this 🔥 😉.

MVC, MVP, MVVM, MVVM-C, and VIPER architecture patterns

Ayush Soni — Fri, 24 Mar 2023 13:20:25 +0000

What distinguishes MVC, MVP, MVVM, MVVM-C, and VIPER architecture patterns from each other?

Introduction

When it comes to software development, choosing the right architecture pattern can make a huge difference in the quality and maintainability of the codebase. There are several architecture patterns to choose from, including MVC, MVP, MVVM, MVVM-C, and VIPER. While all of these patterns share some similarities, they each have their own unique characteristics and are best suited for different types of applications. These architectural patterns are among the most commonly used in development.

Developers have introduced them to overcome the limitations of earlier patterns. So how do they differ?🤔

⚡MVC (Model-View-Controller)

MVC is one of the most well-known and widely used architectural patterns. It separates the application into three main components: the model, the view, and the controller. The model represents the data and the business logic, the view is responsible for rendering the user interface, and the controller acts as the intermediary between the model and the view.

⚡MVP (Model-View-Presenter)

MVP is similar to MVC, but with a slightly different approach. In MVP, the presenter acts as an intermediary between the model and the view, rather than the controller. The presenter is responsible for updating the view with data from the model, and for handling user input and events.

⚡MVVM (Model-View-ViewModel)

MVVM is another architectural pattern that is gaining popularity. It is similar to MVP, but with the addition of a view model. The view model is responsible for managing the state of the view, as well as providing data from the model to the view. This pattern is often used in applications that require complex user interfaces.

⚡MVVM-C (Model-View-ViewModel-Coordinator)

MVVM-C is a variation of MVVM that adds a coordinator to the mix. The coordinator is responsible for handling navigation between different screens or views within the application. This pattern is useful for applications that have multiple screens or views that need to be managed.

⚡VIPER (View-Interactor-Presenter-Entity-Router)

VIPER is a relatively new architectural pattern that has gained popularity in recent years. It is similar to MVC, but with the addition of several new components, including the interactor, entity, and router. The interactor is responsible for handling business logic, the entity represents the data, and the router handles navigation between different screens or views.

🫡Common points to remember:

MVC, the oldest pattern, dates back almost 50 years
Every pattern has a “view” (V) responsible for displaying the user content interface and receiving the user input
Most patterns include a “model” (M) to manage the business data and logic
“Controller”, “Presenter”, and the “View-Model” are translators that mediate between the views and the model. Other than this, the VIPER pattern contains the “entity” and “router” translator which represents the data and network routing.
These translators can be quite complex to write, so various patterns have been proposed to make them more maintainable.

🤔Self Activity:

Over to you: keep in mind that this is not an exhaustive list of architectural patterns. Other notable patterns include Flux and Redux. How do they compare to the ones mentioned here?👀

Conclusion

In conclusion, while all of these architectural patterns share some similarities, they each have their own unique characteristics and are best suited for different types of applications. Choosing the right architecture pattern can make a huge difference in the quality and maintainability of the codebase, so it's important to take the time to understand the pros and cons of each pattern before making a decision.

That's all for today.

Share your feedback, and if you like it, then kindly retweet the first tweet😀

New to my profile?🎉

Hey! I am Ayush, a full stack developer from India. I tweet and document my coding journey🌸

Follow @ayushsoni1010 for more such content🔥😉

API Architectural Styles

Ayush Soni — Thu, 23 Mar 2023 17:37:01 +0000

What are the API Architectural Styles?

The diagram below shows the common API architectural styles at a glance.

🚀Let's take a closer look at the different architectural styles.

🤔How often do you know what architectural patterns are available?👀

🚀REST:

Proposed in 2000, REST is the most commonly used style. It is often used between frontend clients and backend services. It is compliant with 6 architectural constraints. The common payload formats can be JSON, XML, HTML, or plain text.

The six architectural constraints are:

Uniform interface
Stateless
Cacheable
Code on demand
Layered system
Client-server

🚀GraphQL:

GraphQL was proposed in 2015 by Meta. It provides a schema-based and type system suitable for complex systems where the relationships between entities are graph-like.

Let's understand it through the diagram. GraphQL can retrieve user and order information in one request, whereas in REST, it requires multiple calls to get the information for user and order.

GraphQL is not a replacement for REST. It can be built upon existing REST services.

🚀WebSockets:

WebSockets are a protocol that provides full-duplex communication over TCP. Clients establish WebSockets to receive real-time updates from the backend services.

Unlike REST, which always pulls data, WebSockets enable pushing.

🚀Webhooks:

Webhooks are usually used for third-party asynchronous API calls.

Let's understand how it works under the hood.

As shown in the diagram, we use Stripe and PayPal for payment channels and register a Webhook for payment results. When a third-party payment service is done, it notifies the payment service if the payment is successful or failed. Webhook calls are usually part of the system's state machine.

🚀gRPC:

Released in 2016, gRPC is used for communications among microservices. The gRPC library handles encoding/decoding and data transmission.

🚀SOAP:

SOAP stands for Simple Object Access Protocol. Its payload is XML only, suitable for communications between internal systems.

🤔Over to you: What API architectural styles have you used?

Share your feedback, and if you like it, then kindly retweet the first tweet😃

New to my profile? 🎉

Hey! I am Ayush, a full-stack developer from India. I tweet about my coding journey.

Follow @ayushsoni1010 for more such content😉

Hacking at MLH HackCon

Ayush Soni — Sat, 17 Dec 2022 01:32:25 +0000

At the beginning of 2021, I started my developer journey, meeting with such amazing people virtually was by no chance by getting involved and active in the tech communities during pandemics. In the meantime, building skills and collaborating with different people around the world makes me more inclined to tech communities and software products.

🚀Leveling up with the Hackathons

Hacking in the hackathons and working on the different projects hacks amazed me to love hackathons by Major League Hacking. Attended the very first hackathon virtually with my team involving @Yash Sehgal, and @Tanisha Jain ranked in the top 11 in the Abracadabra Hacks by MLH. In the initial days of programming, I was a noob, Yash mentored us and we build the amazing hack project in the last minute of the submission period, but we lagged with the submission of the project, though we did a lot of hard work that symbolized us rude and mute.

After some time, I connected with one of the MLH coaches and had a great conversation with him. With all the efforts and conversations with Stephen from MLH turned our project into the top-ranked list. At this incredible stage, we are so happy that we finally submitted it and the struggle pays it off.

🗣️Diving Deep into the Communities

Participating in several hackathons and open-source contribution programs made me so consistent within the open-source and tech communities to build something. In mid-2021, mentored many people related to technology, took sessions, and get involved in many communities by leveling up personal branding. These results made me shine as a Microsoft Learn Student Ambassador. A community leader building various open source and tech communities.

🎯The journey to HackCon India

Getting so curious to attend my very first tech conference by Major League Hacking Community in Delhi. It’s the first HackCon conference in India organized by MLH. The way to Delhi with my friend Yash Sehgal was really exciting and my first experience in a metro.

Before the conference, we are full of pre-planned todos. We have visited and explored so many beautiful places like Jantar Mantar, Rajghat, Cannaught Place, Agrasen ki Baoli, etc.

On the second day, when arriving back at the hotel due to heavy rain, all around us was full of water and the auto-rickshaw gas was going to be empty soon. After some time, we lost the route to the hotel, this moment made us frightened and it was hard to find the route due to the heavy rain. Finally, we struggled to find the way and reached to hotel.

🤩It’s the HackCon day

Finally, the wait is over, and heading toward attending HackCon was a full of exciting journey so far. Got to know about so many folks out there and met different people, what they’re doing and hacking these days, taking selfies with the people around us, meeting with the community leaders, GitHub Campus Experts, and to whom I interacted virtually get connected in real life.

Let's go a bit back on how I ended up attending HackCon India. Being joined by around 200 hackers/organizers HackCon started around 8 am with the Keynote session by Mike Swift (CEO of MLH) followed by many other community leaders/builders and hackathon organizers.

GitHub Education being the sponsor of the event conducted various interesting activities and giveaway cool swags, involving polaroid photos, developer badges, stickers, etc.

🤝Network - Inspire - Collaborate

At HackCon, my curiosity level and the way of talking with the folks out there amazed me, and the accent while having the conversation is so fantastic. The conference made me in that state in which my energy for networking with people, learning something new from them, and deeper talks on developer terminology, being a community leader how to lead the community, various techniques and ways to organize hackathons in a pre-planned timeline for a successful event, and learned about different technologies and companies.

There were amazing workshops by great leaders and planned breakout time to interact with the attendees. This conference inspired me to attend various conferences/events, community building, and keep hacking at amazing hackathons.

Last but not the least, could not express more about the learnings in words, I learned a lot of things.

💡 The best way to get help is to make it easier for people to help you.

Happy Hacking💜

Ayush Soni

Let's Grow with LetsGrowMore ✨

Ayush Soni — Mon, 20 Sep 2021 09:09:26 +0000

Learning Web Development is never been an easy task for me until I get some real hands-on experience. It's all started in June 2021, I was exploring an open-source program on google, I was also using LinkedIn for finding such technically experienced people. Suddenly, a post comes into my feed and that was about LetsGrowMore. And, then I was come to know that day LetsGrowMore is not just providing open-source enthusiasts a platform to showcase their skills in a different field but also provides an opportunity to undergraduates to work together with them as an intern in various fields.
I grabbed the opportunity with both hands and applied and thus opening the gateway to the Open Source world!

So, Now let's talk about What community is this and how they help the beginner to boost their skills. For beginners, I would first like to clear some things. Here we go:

What is Open Source🤔?

I think you might’ve studied about this. There are generally two types of software that programmers code a closed source software, and open-source software. open-source software is the one for which the source code is made freely available and may be redistributed and modified. This is done to accept bugs, issues, and other features from around the world helping the open-source software community. So next time when you’re on a website like Github, working on a project (repository), and contributing your code to it, consider yourself to be a lucky person because you’re now an open-source contributor, Open source has become a movement and a way of working that reaches beyond software production. The open-source movement uses the values and decentralized production model of open-source software to find new ways to solve problems in their communities and industries.

What is LetsGrowMore🚀?

LetsGrowMore is a ground-based organization that aims at building the future through nourishing the present. LetsGrowMore believes in making our youth especially the students self-aware and exploring the untouched world of technology and tremendous growth-making fields and our belief finally took us where we are standing today. Today LetsGrowMore is an officially MSME registered start-up with nearly 100+ people working under the same establishment.
Well, this is not what LetsGrwMore aims for, their plans are much higher and they are working for it. Soon they are coming with new projects which target the future building.

What are the main missions of LetsGrowMore🎯?

1. Help Everyone To Grow
Learning is a never-ending process! To make sure everyone will learn new things in the right way LetsGrowMore provides a healthy community where everyone can share.

2. Provide Learning Opportunity
At LetsGrowMore they aim to provide as many opportunities as possible.
For now, they are offering many free opportunities such as :

3. Build a better tomorrow
By investing in students, they not only providing students a platform, but they also focus on how did students get all the in free of cost.

4. Knowledge grows by sharing
Creating an educational open-source community will help beginners to build a solid network with more experienced individuals and under their guidance, they can pave their path in the field of development.

How this community helps you🛡?

They enhance your understanding and appreciation of diversity.
They provide various services within the community
They allow members to gain personal and professional skills in the area of leadership & development.
You can also grow within the community to become a mentor in the organization.
They support and encourage students to explore their multiple identities.
They provide convenient, up-to-date services to meet the current needs of the community.
They provide leisure learning, continuing education courses for the campus and community.

What I have learned from this program 🧾?

Although I have learned many things but will emphasize some important points here. Having in a huge team is a fantastic experience for me, more than 500+ contributors are working on several projects, invokes teamwork within us which is a very important soft skill a student much have I'm also an introvert before joining this awesome community but after joining I learned many things like how to express my views with others, solving problems, helping new programmers, managing projects. Apart from the art of taking help from others, the art of helping others is also a silent feature of this program.

Please forgive me if I have done any grammatical errors in this article as I’m yet improving my English.

“If everyone is moving forward together, then success takes care of itself.”
— Henry Ford

Good luck to everyone who’s about to decide between contributing to this amazing and open world of coders. 🙌

DEV Community: Ayush Soni

Git Together: Pro Tips for Commits and Branches

Why should I follow the standards?

Branch Naming Conventions

Basics

Prefix or Type

Including Ticket Numbers

Additional Context

Commit Messages Convention

Message Subject

Type and Message Body

Footer and Extended Message Body

Simplifying Commit Messages with Handy Tools

Conclusion

References

How to install fastn on your local machine

📌Introduction

📌What's ftd?

📌What's fastn?

📌Prerequisites

📌Installation of fastn

👉Install fastn through the pre-built binary on Windows

👉Install fastn through the pre-built binary on MacOS/Linux

👉Install fastn using cargo

👉Install fastn from source

📌Conclusion

📌Over to you

Deploy your React app using GitHub pages

📌Introduction

📌Prerequisites

📌Step 1: Creating the repository

📌Step 2: Create your React app

📌Step 3: Add the dependencies to your app

📌*Step 4: Add configs to your react app*

📌Step 5: Build your React app

📌Step 6: Deploy your React app

📌Step 7: Commit and Push your changes to GitHub

📌Conclusion

📌Over to you

Build an API with Serverless Functions in Next.js

💎Introduction to Serverless Functions in Next.js

💎Pre-requisites

💎Setting up our application

💎Page routes in Next.js

💎Dynamic routes in Next.js

💎 API Routing with Next.js Serverless Functions

💎The request handler function

💎Dynamic API routes

💎Advantages of API routes

💎Over to you

💎Conclusion

Supercharge your React app with useSWR

🚩Introduction

🚩Pre-requisites

🚩How useSWR works

🚩Getting started with useSWR

🚩Pagination

🚩Comparing useSWR and existing hooks

🚩Performance comparison

Over to you

🚩Conclusion

Why is Nginx called a “reverse” proxy?

🔥Introduction

🔥Overview of Forward and Reverse Proxy

🔥Why is Nginx called a “reverse” proxy?

🔥Benefits of using Nginx as a reverse proxy:

🔥Over to you:

Crafting Effective Chaos Error Messages

💡Introduction

💡What makes a bad error message?

💡Here are some common characteristics:

💡What makes a good error message?

💡Here are some common characteristics:

💡Over to you

HTTP Status Codes

What are the most common HTTP status codes?

🎯HTTP response codes are categorized into five groups:

🎯Here are some of the most common HTTP status codes:

🤔Over to you:

🎯Conclusion

📌Step 4: Add configs to your react app