<h3>What are the API Architectural Styles?</h3>
The diagram below shows the common API architectural styles at a glance.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzqy8hg5qdi5yrljrvf6.png" alt="API">
🚀Let's take a closer look at the different architectural styles.
🤔How often do you know what architectural patterns are available?👀
<h4>🚀REST:</h4>
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:
<ul>
<li>Uniform interface</li>
<li>Stateless</li>
<li>Cacheable</li>
<li>Code on demand</li>
<li>Layered system</li>
<li>Client-server</li>
</ul>
<h4>🚀GraphQL:</h4>
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.
<h4>🚀WebSockets:</h4>
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.
<h4>🚀Webhooks:</h4>
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.
<h4>🚀gRPC:</h4>
Released in 2016, gRPC is used for communications among microservices. The gRPC library handles encoding/decoding and data transmission.
<h4>🚀SOAP:</h4>
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?
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more such content🔥😉

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.
<h3>💎Introduction to Serverless Functions in Next.js</h3>
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.
<h3>💎Pre-requisites</h3>
To benefit the most from this article, the following pre-requisites are required:
<ul>
<li>Basic understanding of JavaScript</li>
<li>Basic understanding of Next.js</li>
<li>Basic understanding of API design</li>
<li>The latest Node version is installed on your system.</li>
</ul>
<h3>💎Setting up our application</h3>
We will start by bootstrapping the Next.js application and using <code>create-next-app</code> to automatically set everything up. To create a Next.js project, run the following command:
<pre><code>yarn create-next-app
</code></pre>
After the installation is complete, start your app by running <code>yarn dev</code>. When you visit <a href="http://localhost:3000">localhost:3000</a> you will get:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiowl91ea6tq74725cnu.png" alt="Image">
<h3>💎Page routes in Next.js</h3>
In Next.js, each page is driven by a component. For example, an “About” page will have an <code>About</code> component. Each page component has a file inside a <code>page</code> 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 <a href="http://localhost:3000/about">localhost:3000/about</a> and you will get:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2sosevrruqdcm055nf9.png" alt="Image">
The <code>404</code> page shown above simply shows that Next.js cannot find a component in the <code>page</code> folder called <code>about</code>. This is because we have not created an <code>About</code> component in the <code>pages</code> folder.
To resolve this, create an <code>about.js</code> file inside the <code>pages</code> directory and add the following code:
<pre><code>const About = () => {
 return (
 &#x3C;div>
 &#x3C;h1>Hello World!&#x3C;/h1>
 &#x3C;/div>
 );
};
export default About;
</code></pre>
Now, revisit to <a href="http://localhost:3000/about">localhost:3000/about</a> and you get:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78artdnipioinba1bnln.png" alt="Image">
When we created the <code>About</code> component in the <code>pages</code> folder, Next.js automatically created a route to server the <code>About</code> component. Thus, the route name is tied to the filename.
<h3>💎Dynamic routes in Next.js</h3>
Next.js pages support <a href="https://nextjs.org/docs/routing/dynamic-routes">dynamic routes</a>. 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, <code>[param.js]</code> to create a dynamic route for example. The page can be accessed via its dynamic route: <code>pages/users/[param].js</code>. Here, <code>[param]</code> is the page’s id, slug, pretty URLs, etc. Any route like <code>/users/1</code> or <code>/users/abcdef</code> 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 <code>/users/abcdef</code> of dynamic route <code>pages/users/[param].js</code>, will have the query object:
<pre><code>{
 "param":"abcdef"
}
</code></pre>
Similarly, the matched route <code>/users/abcdef?foo=bar</code> of a dynamic route, <code>pages/users[param].js</code>, will have the following query object:
<pre><code>{
	"foo":"bar",
	"param":"abcdef"
}
</code></pre>
In your application, create a <code>user</code> folder, and inside it create a component named <code>[username].js</code>. Add the following code:
<pre><code>import { useRouter } from "next/router";
const User = () => {
 const router = useRouter();
 const username = router.query["username"];
 return (
 &#x3C;div>
 &#x3C;h1>Hello! Welcome {username} &#x3C;/h1>
 &#x3C;/div>
 );
};
export default User;
</code></pre>
Now, when you visit <a href="http://localhost:3000/users/ayushsoni1010">http://localhost:3000/users/ayushsoni1010</a>, you get the display content would be <code>Hello! Welcome ayushsoni1010</code>.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzab2gmroc2o9cj5vvhm.png" alt="Image">
From the above demonstration, you see that Next.js matched <code>/users/ayushsoni1010</code> with the dynamic route <code>pages/users/[username].js</code>. Thus whatever <code>username</code> 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.
<h3>💎 API Routing with Next.js Serverless Functions</h3>
<a href="https://nextjs.org/blog/next-9">API routes were introduced in Next.js v9</a>. 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 <code>/pages/api</code> folder and Next.js maps any file inside the folder to <code>/api/*</code> 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 <code>creat-next-app</code>, Next.js automatically creates an example API route, the <code>/pages/api/hello.js</code> file, for you. Inside <code>/pages/api/hello.js</code>, Next.js creates and exports a function named <code>handler</code> that returns a JSON object.
You can access this endpoint via the browser by navigating to <a href="http://localhost:3000/api/hello">http://localhost:3000/api/hello</a> and the following JSON is returned:
<pre><code>{
	"name": "John Doe"
}
</code></pre>
<h3>💎The request handler function</h3>
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:
<ul>
<li><code>req</code>: an object that is an instance of <code>http.IncomingMessage</code>, and some <a href="https://nextjs.org/docs/api-routes/request-helpers">prebuilt middlewares</a>.</li>
<li><code>res</code>: an object that is an instance of <code>http.ServerResponse</code>, and some <a href="https://nextjs.org/docs/api-routes/response-helpers">helper functions</a>.</li>
</ul>
To build an API with the API route, create a folder called <code>data</code> in the root directory. Create a <code>post.json</code> file inside the data folder with the following code:
<pre><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",
 },
];
</code></pre>
Now, in the <code>pages/api</code> folder, create a new file called posts.js with the following code:
<pre><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);
}
</code></pre>
In the API route above, the handler function imports the JSON data posts and returns them as a response to a <code>GET</code> request. When you query for this data by visiting <a href="http://localhost:3000/api/posts">http://localhost:3000/api/posts</a> from the browser, you get:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13p5l3prqj9c4rbwoef0.png" alt="Image">
You can use the <code>request.method</code> object as seen below to handle other HTTP requests:
<pre><code>export default (req, res) => {
 switch (req.method) {
 case "GET":
 //...
 break;
 case "POST":
 //...
 break;
 case "PUT":
 //...
 break;
 case "DELETE":
 //...
 break;
 default: // Method not allowed
 res.status(405).end();
 break;
 }
};
</code></pre>
<h3>💎Dynamic API routes</h3>
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 <code>posts</code> folder inside the <code>pages/api</code> folder. Create a file named <code>[postid].js</code> inside the <code>posts</code> folder and paste the following code to it:
<pre><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) {
 const { postid } = req.query;
 const post = posts.find((post) => post.id === parseInt(postid));
 res.status(200).json(post);
}
</code></pre>
In the above code, Next.js automatically matched the <code>/posts/2</code> with the dynamic route <code>pages/api/posts/[postid].js</code>. Whichever post <code>id</code> is passed to the route <code>/posts/[postid]</code>: <code>/post/2</code>, <code>/post/3</code>, <code>/post/4</code>, etc. will be available in the <code>req.query</code> object.
The request handler function above retrieves the passed post <code>id</code> from the <code>req.query</code> object, finds the post in the <code>posts</code> array, and sends it to the client.
So to get the post with an <code>id</code> of <code>2</code>, navigate your browser to <a href="http://localhost:3000/api/posts/2"><code>http://localhost:3000/api/posts/2</code></a>. You will get:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d205qnr9xad9hf5kqe83.png" alt="Image">
<h3>💎Advantages of API routes</h3>
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 <code>same-origin</code>, however, you can customize this behavior by using the <a href="https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts">CORS request helper</a>.
<h3>💎Over to you</h3>
Which APIs have you built with Next.js API routes?
<h3>💎Conclusion</h3>
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.
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

<h3>💡Introduction</h3>
Error messages are a common part of our online experience. Whenever a server is down, we lose an internet connection, or we forget to fill out the 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.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdok9fr0r0k0te4t3sax.png" alt="Image">
<h3>💡What makes a bad error message?</h3>
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 frustrated, confused, and unable to resolve the issue at hand.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giniabj0z2z0zwykbvy0.png" alt="Image">
<h4>💡Here are some common characteristics:</h4>
<ul>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
By avoiding these common pitfalls, we can create error messages that are clear, informative, and helpful for users.
<h3>💡What makes a good error message?</h3>
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.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0skmqazi4pktzspeyvo.png" alt="Image">
<h4>💡Here are some common characteristics:</h4>
<ul>
<li>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.</li>
<li>Reassure users: Let them know what was not affected by the error, such as saved drafts.</li>
<li>Be empathetic: Use "please" when appropriate to show understanding.</li>
<li>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?”</li>
<li>Always give way out: If the problem persists or could reoccur, give them a Customer Care contact option.</li>
</ul>
<h3>💡Over to you</h3>
What's the best and worst error message you've seen?👀
Wrong answers only🫠
Let me know in the comments😀
 
 
<blockquote>
🎯Article Reference: <a href="https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f">https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f</a>
</blockquote>
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

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.
<h3>📌Introduction</h3>
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.
<h3>📌Prerequisites</h3>
<ul>
<li>GitHub account</li>
<li>Install Git on your machine and set up Git.</li>
<li>Install Node.js</li>
</ul>
<h3>📌Step 1: Creating the repository</h3>
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.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntqn8waru8eb5dhu0oiz.png" alt="Image">
<h3>📌Step 2: Create your React app</h3>
After cloning your empty git repository, create a react app in the working of your git repository by the following command:
<pre><code>npx create-react-app ./
</code></pre>
<h3>📌Step 3: Add the dependencies to your app</h3>
Install the following package in your React app:
<pre><code>npm install gh-pages --save-dev
</code></pre>
<h3>📌Step 4: Add configs to your react app</h3>
Normally, our app will be deployed on a subdomain with our username on <code>github.io</code> like any other app, so to keep our app well-informed about our root URL, we need to add a <code>homepage</code> attribute to our <code>package.json</code> file and assign the URL to it.
<pre><code>"homepage": "https://{user-name}.github.io/{repo-name}",
</code></pre>
<h3>📌Step 5: Build your React app</h3>
Before you can deploy your React app to GitHub pages, you need to build it. In your <code>package.json</code> file, add the <code>predeploy</code> and <code>deploy</code> keys under scripts to create a production-ready build of your app. This will create a <code>build</code> directory in your project directory that contains the optimized and minified production build of your React app.
<pre><code>"predeploy": "npm run build",
"deploy": "gh-pages -d build",
</code></pre>
Your <code>package.json</code> file should be similar to this:
<pre><code>{
 "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"
 }
}
</code></pre>
<h3>📌Step 6: Deploy your React app</h3>
Now, all we need is to run <code>npm run deploy</code> 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.
<pre><code>npm run deploy
</code></pre>
This command will create a branch named <code>gh-pages</code>. After the build finishes, it pushes the changes to the <code>gh-pages</code> 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.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un94xuk86yp1cbbs6p1o.png" alt="Image">
<h3>📌Step 7: Commit and Push your changes to GitHub</h3>
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.
<pre><code>git add .
git commit -m "your commit message"
git push origin main
</code></pre>
<h3>📌Conclusion</h3>
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.
<h3>📌Over to you</h3>
Have you used <code>github-pages</code> to host your React applications?
Let me know in the comments😄
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

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.
<blockquote>
📘 Before you dive in:
</blockquote>
<blockquote>
- I have organised each sub-section on Branch Naming Conventions and Commit Message Conventions into basic, intermediate and advanced rules.
</blockquote>
<blockquote>
- 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.
</blockquote>
<blockquote>
- The content here is adapted and organised from various resources, which you’ll find listed in the Reference section.
</blockquote>
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.
<h3>Why should I follow the standards?</h3>
<ol>
<li>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.</li>
<li>Collaboration and Teamwork: Well-written messages help everyone on the team stay on the same page and work together more effectively.</li>
<li>Ease of Navigation and Maintenance: Following standards makes navigating and maintaining the codebase straightforward and less of a headache.</li>
<li>Documentation and Knowledge Transfer: Good commit messages act like mini-documents, helping new team members quickly get up to speed on the project history.</li>
<li>Project Quality: Consistent practices improve the overall quality and reliability of the project, making it stronger and more resilient.</li>
<li>Automated Changelogs: By sticking to standards, you can generate automated changelogs, making release management a breeze.</li>
<li>Optimizing CI/CD: Clear commit messages can enhance your continuous integration and continuous deployment processes, providing essential context for automated tools.</li>
<li>Debugging and Issue Resolution: When problems arise, standardised messages help quickly identify the cause, making debugging and issue resolution faster and easier.</li>
<li>Accountability: Clear messages document who made specific changes and why, adding. a layer of accountability to the project.</li>
<li>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.</li>
</ol>
<hr>
<h2>Branch Naming Conventions</h2>
<h3>Basics</h3>
<ol>
<li>
Descriptive Names: A well-named branch gives immediate context for its purpose. Instead of generic names, choose clarity.
For example:
<ul>
<li><code>feature/login</code></li>
<li><code>bugfix/navbar-overflow</code></li>
</ul>
</li>
<li>
Use Hyphens: Use hyphens (kebab case) to separate words in branch names for better readability.
For example:
<ul>
<li><code>bugfix/fix-login-issue</code> is more readable than <code>bugfix/fixLoginIssue</code> or <code>bugfix/fix_login_issue</code>.</li>
</ul>
</li>
<li>
Alphanumeric Lowercase Characters: Stick to alphanumeric lowercase characters (a-z,0-9) and hyphens. Avoid punctuation, spaces, underscores, or special characters whenever possible.
</li>
<li>
Avoid Unnecessary Hyphens: Don’t use unnecessary hyphens like subsequent or trailing hyphens.
For example:
<ul>
<li><code>feat/new—login—</code> is a bad practice.</li>
</ul>
</li>
<li>
Short and Effective: Keep branch names simple. They should be descriptive yet concise enough to convey the goal at a glance.
</li>
</ol>
<h3>Prefix or Type</h3>
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:
<ol>
<li>
feature/: For developing new features.
For example:
<ul>
<li><code>feature/new-dashboard</code></li>
<li><code>feature/user-profile-page</code></li>
<li><code>feature/new-feature</code></li>
</ul>
</li>
<li>
bugfix/: For fixing bugs in the code. Often associated with an issue. Examples:
For example:
<ul>
<li><code>bugfix/login-error</code></li>
<li><code>bugfix/incorrect-calculation</code></li>
</ul>
</li>
<li>
hotfix/: For addressing critical bugs in production.
For example:
<ul>
<li><code>hotfix/memory-leak</code></li>
<li><code>hotfix/urgent-security-patch</code></li>
</ul>
</li>
<li>
release/: For preparing a new release, typically used for final touches and revisions.
For example:
<ul>
<li><code>release/version-1.0.0</code></li>
<li><code>release/2.1.0-final</code></li>
<li><code>release/version-1.0.0</code></li>
</ul>
</li>
<li>
docs/: For writing, modifying, or correcting documentation.
For example:
<ul>
<li><code>docs/update-api-docs</code></li>
<li><code>docs/installation-guide</code></li>
</ul>
</li>
<li>
chore/: For routine tasks and maintenance that don’t affect the code’s functionality, like updating dependencies or building scripts.
For example:
<ul>
<li><code>chore/dependency-update</code></li>
<li><code>chore/refactor-build-scripts</code></li>
<li><code>chore/update-dependencies</code></li>
</ul>
</li>
<li>
test/: For adding or updating tests.
For example:
<ul>
<li><code>test/add-unit-tests</code></li>
<li><code>test/fix-integration-tests</code></li>
</ul>
</li>
<li>
style/: For changes that do not affect the code's functionality but improve formatting, like code style or linting fixes.
For example:
<ul>
<li><code>style/code-cleanup</code></li>
<li><code>style/fix-indentation</code></li>
</ul>
</li>
<li>
perf/: For performance improvements.
For example:
<ul>
<li><code>perf/optimize-loading-time</code></li>
<li><code>perf/reduce-memory-usage</code></li>
</ul>
</li>
<li>
revert/: For reverting previous changes.
For example:
<ul>
<li><code>revert/feature-branch-name</code></li>
<li><code>revert/hotfix-issue-123</code></li>
</ul>
</li>
<li>
refactor/: For code refactoring that doesn’t change functionality but improves code structure or readability.
For example:
<ul>
<li><code>refactor/optimize-helpers</code></li>
</ul>
</li>
<li>
experiment/: For experimental features or changes that are still in the testing phase.
For example:
<ul>
<li><code>experiment/new-algorithm-test</code></li>
</ul>
</li>
<li>
build/: For changes to the build process or configuration.
For example:
<ul>
<li><code>build/update-webpack-config</code></li>
</ul>
</li>
</ol>
<h3>Including Ticket Numbers</h3>
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.
<ul>
<li>Example: <code>feature/PROJ-123-footer-links</code></li>
</ul>
<h3>Additional Context</h3>
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.
<hr>
<h2>Commit Messages Convention</h2>
As an open-source contributor/maintainer who experienced these good practices at a startup, squash feature branches onto <code>master</code> or <code>main</code> 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:
<pre><code>&#x3C;type>[optional scope]: &#x3C;description>

[optional body]

[optional footer]
</code></pre>
<h3>Message Subject</h3>
<ol>
<li>
Imperative Mood: Write commit messages in the imperative mood. Start with a verb to indicate what the commit does.
For example:
<ul>
<li>Use <code>fix: correct typo in homepage</code> instead of <code>fix: Corrected typo in homepage</code></li>
</ul>
</li>
<li>
Short and Standardized: Keep the subject line within 50 characters to ensure readability in various Git tools, like when using <code>git log --oneline</code>. Avoid trailing periods and unnecessary words or symbols.
</li>
<li>
Capitalize the Description: Start the subject line with a capital letter.
</li>
</ol>
<h3>Type and Message Body</h3>
<ol>
<li>
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:
<ul>
<li><code>feat:</code> Summarizes a feature in the codebase.</li>
<li><code>fix:</code> Addresses a fix to the codebase.</li>
<li><code>build</code>, <code>chore</code>, <code>ci</code>, <code>style</code> and <code>refactor</code> are other examples.</li>
</ul>
</li>
<li>
Scope: Optionally add a scope to the commit’s type to provide additional context. Enclose the scope in parentheses.
For example:
<ul>
<li><code>feat(auth): add OAuth support</code></li>
</ul>
</li>
<li>
Message Body: Add detailed explanations in the commit body. Leave a blank line after the subject line to separate it from the body.
</li>
</ol>
<h3>Footer and Extended Message Body</h3>
<ol>
<li>
Footer: Use the footer to convey additional details regarding the commit like such as <code>Reviewed-by</code> or <code>Approved-by</code>, etc.
For example:
<ul>
<li><code>Signed-off-by: John &#x3C;john@example.com></code></li>
</ul>
</li>
<li>
Breaking change: Indicate breaking changes with a <code>“BREAKING CHANGE”</code> footer or by adding a <code>!</code> sign after the type/scope.
For example:
<ul>
<li>
Message: <code>chore!: drop support for Node 6</code>
</li>
<li>
Extended footer should be as follows:
<pre><code>BREAKING CHANGE: Remove support for Node 6 as it lacks necessary features.
</code></pre>
</li>
</ul>
</li>
<li>
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:
<pre><code>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.
</code></pre>
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.
</li>
</ol>
<hr>
<h2>Simplifying Commit Messages with Handy Tools</h2>
To make sure your commit messages are consistent and clear, you can use tools like <a href="https://github.com/Milo123459/glitter">Glitter</a> or <a href="http://commitizen.github.io/cz-cli/">Commitizen</a>. These tools help you stick to a standardized format for your commit messages.
For an extra layer of consistency, try <a href="https://commitlint.js.org/#/">Commitlint</a>. 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
<hr>
<h2>Conclusion</h2>
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🌱
<hr>
<h2>References</h2>
<ol>
<li>https://www.conventionalcommits.org/en/v1.0.0-beta.2/</li>
<li>https://www.geeksforgeeks.org/how-to-naming-conventions-for-git-branches/</li>
<li>https://se-education.org/guides/conventions/git.html</li>
<li>https://cbea.ms/git-commit/</li>
<li>https://git-scm.com/docs/git-interpret-trailers</li>
<li>https://phoenixnap.com/kb/git-branch-name-convention</li>
<li>https://gist.github.com/ayushsoni1010/cfc409ebabaae68b84a70306cc67c297</li>
</ol>
<hr>
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 <a href="https://x.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

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.
<h3>🚀Leveling up with the Hackathons</h3>
Hacking in the hackathons and working on the different projects hacks amazed me to love hackathons by <a href="https:mlh.io">Major League Hacking</a>. Attended the very first hackathon virtually with my team involving @<a href="https://linkedin.com/in/sehgalyash">Yash Sehgal</a>, and @<a href="https://www.linkedin.com/in/tanishajain11/">Tanisha Jain</a> 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.
<h3>🗣️Diving Deep into the Communities</h3>
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.
<h3>🎯The journey to HackCon India</h3>
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 <a href="https://linkedin.com/in/sehgalyash">Yash Sehgal</a> 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.
<h3>🤩It’s the HackCon day</h3>
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.
<h3>🤝Network - Inspire - Collaborate</h3>
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💜
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this 🔥 😉.

<h3>🚀Getting started with the Strapi</h3>
It is often confusing, how to deploy your strapi app by using cloud providers but we could not deploy it using static site hosting platforms such as <a href="http://vercel.com">Vercel</a>, <a href="http://netlify.com">Netlify</a>, <a href="https://www.notion.so/How-to-deploy-the-Headless-CMS-Strapi-app-on-Heroku-7f40b8f2d8414f3f81e8a0caccf9c1f1">Github Pages</a>, etc. because strapi runs an HTTP server based on Koa, a backend javascript framework. However, these are not that trivial for someone who is not into DevOps. I will walk you through how to install your Strapi instance on Heroku. In this article, I will demystify it through examples and code blocks.
<h3>🤩Introduction to Strapi</h3>
Strapi is one of the best and leading open-source headless CMS based on Node.js and is used in designing API’s and managing content. It’s 100% JavaScript and fully customizable. Strapi helps us scaffold our backend and provide admin tools to create an API both Restful and GraphQL quickly and consume the API’s from the client side.
Strapi contains both a server and a database. The server hosts the API’s and the database is used to store the applicant’s content. Strapi uses the Koa.js backend javascript framework to run the server.
In strapi, the API’s are created using the Strapi admin panel in which respective content-type maps and access by its endpoint.
<ul>
<li>GET</li>
<li>POST</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
<h3>🫣Introduction to Heroku</h3>
Heroku is a container-based cloud platform as a service (PaaS) that enables developers to run, build and operate applications entirely on the cloud and supports several programming languages like Java, Nodejs, PHP, Go, Python, Clojure, Ruby, and Scala. Heroku is part of the Salesforce platform and it is so easy to use that’s a top choice for many deployment projects. Heroku is managed on containers called dynos within the Heroku paradigm system.
<h3>✍️Prerequisites</h3>
To get started, we need to have the following in place:
<ul>
<li>You should have a GitHub account</li>
<li>You should have a Heroku account</li>
<li>Open any code editor for your repository</li>
<li>Git installed on your machine</li>
<li>Node.js v16+ installed</li>
<li>Strapi installed locally</li>
</ul>
<h3>🎯Goal</h3>
In this guide, we are going to:
<ul>
<li>Create a new GitHub repository</li>
<li>Create a new Strapi proejct</li>
<li>Configure the Heroku CLI login with your GitHub repository</li>
<li>Connect the Postgres add-on database with your Strapi project provided by Heroku</li>
<li>Configure PostgreSQL for the production environment</li>
</ul>
<h3>📝Installing Strapi locally</h3>
To install Strapi locally, run this command in your GitHub repository.
💡 npx create-strapi-app@latest my-project --quickstart
💡 yarn create strapi-app my-project --quickstart
When the dependencies are installed and the local setup completes, it will create a project my-project, then you should be redirected to admin access <a href="http://localhost:1337/admin">http://localhost:1337/admin</a> register an admin user using the form which opens in the browser.
If you’re redirecting for the first time then you’re redirecting to <a href="http://localhost:1337/admin/auth/register-admin">http://localhost:1337/admin/auth/register-admin</a>. This is because we have no super admin yet in the database. By default, Strapi uses SQLite as a file-based database.
When you are registered successfully, you’re the super admin of your app. You can invite other folks through email to get access to the super admin, author, and editor roles.
<blockquote>
Available commands in your project:
</blockquote>
<ul>
<li>yarn develop (Start Strapi in watch mode)</li>
</ul>
 
 
🛠️Under Construction

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.
<h3>📌Introduction</h3>
<code>fastn</code> 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.
<h3>📌What's ftd?</h3>
<code>ftd</code> 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.
<h3>📌What's fastn?</h3>
<code>fastn</code> is a web framework, a content management system, and even serves as an integrated development environment for <code>ftd</code>. It is a web server that compiles <code>ftd</code> 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 <a href="https://fastn.com/expander">fastn.com/expander</a>. This course provides a quick introduction to the basics of fastn and will help you get up to speed in no time.
<h3>📌Prerequisites</h3>
To benefit the most from this article, the following pre-requisites are required:
<ul>
<li>GitHub account</li>
<li>Install Git on your machine and set up Git</li>
<li>The latest cargo version is installed on your system.</li>
</ul>
<h3>📌Installation of fastn</h3>
Based on the machines, there are three ways to install fastn:
<ol>
<li>Install fastn through the pre-built binary on Windows (Recommended)</li>
<li>Install fastn through the pre-built binary on MacOS/Linux (Recommended)</li>
<li>Install fastn using cargo</li>
<li>Install fastn from source</li>
</ol>
 
 
<pre><code>💡 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.
</code></pre>
 
 
<h3>👉Install fastn through the pre-built binary on Windows</h3>
To install <code>fastn</code> through the pre-built binary, follow these steps:
<ul>
<li>Download the executable from the <a href="https://github.com/fastn-stack/fastn/releases">Releases</a> page</li>
<li>Click on the latest release</li>
<li>Get the executable file for Windows on the releases page under Assets</li>
<li>Create a folder named <code>FASTN</code> in your C drive</li>
<li>Go to Settings and search for Environmental Variable</li>
<li>Check for Path and double-click on it in the user variables</li>
<li>Click on the New button and set a path for FASTN in your machine's Environment Variable</li>
<li>The recommended path would be <code>C:\FASTN</code>, then apply settings.</li>
</ul>
 
 
<img src="https://fastn.com/-/fastn.io/images/setup/windows-fastn-installation.gif" alt="gif">
 
 
Installation of fastn is completed. To verify, open the command prompt and execute the command <code>fastn</code>.
If you face any difficulty while installing fastn, check out the <a href="https://youtu.be/lw-qVPCJgZs">youtube</a> video.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dchwhwnej9pllpjxysl9.png" alt="description">
 
 
<hr>
 
 
<h3>👉Install fastn through the pre-built binary on MacOS/Linux</h3>
For MacOS, we have an installer script, you just need to copy and paste the given below script into the terminal
<pre><code>
sudo bash -c "$(curl -fsSL https://raw.githubusercontent.com/fastn-stack/fastn/main/install.sh)"

</code></pre>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65mjgbmk4x258db13o2t.png" alt="Image">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i16h7i23cx390lyqn6gf.png" alt="description">
Installation of fastn is completed. To verify, open the terminal and execute the command <code>fastn</code>.
If you face any difficulty while installing fastn, check out the <a href="https://youtu.be/cWdivkyoOTA">youtube</a> video
 
 
<hr>
 
 
<h3>👉Install fastn using cargo</h3>
If you have <code>cargo</code> installed on your system, you can run the following command to install fastn.
For more details on how to install cargo are given <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html">here</a>.
<pre><code>
cargo install fastn

</code></pre>
 
 
<hr>
 
 
<h3>👉Install fastn from source</h3>
<code>fastn</code> is an open-source project. You can clone the fastn github repository:
<pre><code>
git clone https://github.com/fastn-stack/fastn.git

</code></pre>
fastn is implemented using Rust, using the 2021 edition, so the minimum supported Rust version (MSRV) is 1.65.0.
<pre><code>cd fastn
cargo test
cargo build
</code></pre>
 
 
Linux Dependencies
When building from source you will have to install SSL and SQLite dev packages:
Once you have installed the <code>fastn</code> you can start using <code>ftd</code> files.
<pre><code>
sudo apt-get install libsqlite3-dev libssl-dev

</code></pre>
 
 
<h3>📌Conclusion</h3>
<code>fastn</code> 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.
 
 
<h3>📌Over to you</h3>
Which static hosting providers do you use to host your fastn applications?
Let me know in the comments😄
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

<h3>What are the most common HTTP status codes?</h3>
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.
<h3>🎯HTTP response codes are categorized into five groups:</h3>
Informational (100-199)
Success (200-299)
Redirection (300-399)
Client Error (400-499)
Server Error (500-599)
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewwmocekdo8mme6dbi2a.png" alt="Image">
<h3>🎯Here are some of the most common HTTP status codes:</h3>
<ul>
<li>200 OK: This status code indicates that the request was successful.</li>
<li>404 Not Found: This status code indicates that the requested resource could not be found on the server.</li>
<li>500 Internal Server Error: This status code indicates that there was an error on the server that prevented the request from being fulfilled.</li>
<li>401 Unauthorized: This status code indicates that the client is not authorized to access the requested resource.</li>
<li>403 Forbidden: This status code indicates that the client does not have permission to access the requested resource.</li>
</ul>
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.
<h3>🤔Over to you:</h3>
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😀
<h3>🎯Conclusion</h3>
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.
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this 🔥 😉.

<h3>Let's Grow with LetsGrowMore</h3>
Learning Web Development is never been an easy task for me until I get some real hands-on experience. It all started in June 2021, I was exploring an open-source program on google, and 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 beginner to boost their skills. For beginners, I would first like to clear some things. Here we go 🚀
<h3>🤔What is Open Source?</h3>
I think you might’ve studied about this. There are generally two types of software that programmers code 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.
<h3>🚀What is LetsGrowMore?</h3>
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 LetsGrowMore aims for, their plans are much higher and they are working for it. Soon they are coming up with new projects which target future building.
<h3>🎯What are the main missions of LetsGrowMore?</h3>
<ol>
<li>
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.
</li>
<li>
Provide Learning Opportunity :
At LetsGrowMore they aim to provide as many opportunities as possible.
For now, they are offering many free opportunities such as :
<ul>
<li><a href="https://letsgrowmore.in/vip">LGMVIP</a></li>
<li><a href="https://letsgrowmore.in/soc">LGMSoC'21</a></li>
<li><a href="https://forms.gle/vi5YgBREv5LQ6CMw9">LGMWEP(For Girls-Only)</a></li>
<li><a href="https://letsgrowmore.in/vip/">Web Development</a></li>
<li><a href="https://letsgrowmore.in/vip/">Tech Intern</a></li>
<li><a href="https://docs.google.com/forms/d/1kfEcNyxKit0Ib8xV5sU4c4KI2fY9JcK8DvYklfQuOz0/viewform?edit_requested=true">Campus Ambassador</a></li>
<li><a href="https://docs.google.com/forms/d/1ZnAdbukXaTVj_S0sgn6PfJh1UwKlpX4tuD87mdRhO_8/viewform?edit_requested=true">Social Media Marketing</a></li>
<li><a href="https://docs.google.com/forms/d/12VyIWPh3bmE8SfkhOy7JrYWZjclzCOP_Gp4Tn4zFVZo/viewform?edit_requested=true">Content Writing Intern</a></li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSdXeL_soItd5fFZQByZeQyaceYPbEJoSf5Hx2W9XmAo0_m_sg/viewform?usp=sf_link">Graphic Designer</a></li>
</ul>
</li>
<li>
Build a better tomorrow
By investing in students, they not only provide students a platform, but they also focus on how students get all the in free of cost.
</li>
<li>
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.
</li>
</ol>
<h3>🛡How this community helps you?</h3>
<ol>
<li>They enhance your understanding and appreciation of diversity.</li>
<li>They provide various services within the community</li>
<li>They allow members to gain personal and professional skills in the area of leadership and development.</li>
<li>You can also grow within the community to become a mentor in the organization.</li>
<li>They support and encourage students to explore their multiple identities.</li>
<li>They provide convenient, up-to-date services to meet the current needs of the community.</li>
<li>They provide leisure learning and continuing education courses for the campus and community.</li>
</ol>
<h3>🧾What I have learned from this program?</h3>
Although I have learned many things but will emphasize some important points here. Having a huge team is a fantastic experience for me, more than 500+ contributors are working on several projects, which 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 to improve 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🙌
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this 🔥 😉.

<h3>Introduction</h3>
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?🤔
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it8fqk85nzhobvnnlbjc.png" alt="MVC">
<h3>⚡MVC (Model-View-Controller)</h3>
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.
<h3>⚡MVP (Model-View-Presenter)</h3>
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.
<h3>⚡MVVM (Model-View-ViewModel)</h3>
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.
<h3>⚡MVVM-C (Model-View-ViewModel-Coordinator)</h3>
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.
<h3>⚡VIPER (View-Interactor-Presenter-Entity-Router)</h3>
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.
<h3>🫡Common points to remember:</h3>
<ul>
<li>MVC, the oldest pattern, dates back almost 50 years</li>
<li>Every pattern has a “view” (V) responsible for displaying the user content interface and receiving the user input</li>
<li>Most patterns include a “model” (M) to manage the business data and logic</li>
<li>“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.</li>
<li>These translators can be quite complex to write, so various patterns have been proposed to make them more maintainable.</li>
</ul>
<h3>🤔Self Activity:</h3>
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?👀
<h3>Conclusion</h3>
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.
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this 🔥 😉.

<h3>🚩Introduction</h3>
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.
<h3>🚩Pre-requisites</h3>
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!
<h3>🚩How useSWR works</h3>
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.
<h3>🚩Getting started with useSWR</h3>
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:
<ul>
<li>Returns cached data first (stale)</li>
<li>Sends the fetch request (revalidate)</li>
<li>Returns the up-to-date data</li>
</ul>
The hook comes with a display of benefits which includes:
<ul>
<li>Simplicity of Logic</li>
<li>Lightweight</li>
<li>Offers revalidation</li>
<li>Easy pagination</li>
<li>Supports TypeScript and a host of other perks.</li>
</ul>
To get started with useSWR, you first need to install it as a dependency in your React or Next project:
<pre><code>yarn add swr
or
npm install swr
</code></pre>
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:
<pre><code>import useSWR from "swr";

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

 if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
 if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

 return (
 &#x3C;div>
 &#x3C;h1>{data.title}&#x3C;/h1>
 &#x3C;p>{data.description}&#x3C;/p>
 &#x3C;/div>
 );
}
</code></pre>
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.
<h3>🚩Pagination</h3>
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:
<pre><code>function Page({ index }) {
 const { data, error } = useSWR(`/api/data?page=${index}`, fetcher);

 // ... handle loading and error states

 return data.map((item) => &#x3C;div key={item.id}>{item.name}&#x3C;/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 (
 &#x3C;div>
 {data.map((item) => (
 &#x3C;div key={item.id}>{item.name}&#x3C;/div>
 ))}
 &#x3C;button onClick={() => setPageIndex(pageIndex - 1)}>Previous&#x3C;/button>
 &#x3C;button onClick={() => setPageIndex(pageIndex + 1)}>Next&#x3C;/button>
 &#x3C;/div>
 );
}
</code></pre>
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.
<h3>🚩Comparing useSWR and existing hooks</h3>
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:
<pre><code>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 &#x3C;div>Error fetching data&#x3C;/div>;
 if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

 return (
 &#x3C;div>
 &#x3C;h1>{data.title}&#x3C;/h1>
 &#x3C;p>{data.description}&#x3C;/p>
 &#x3C;/div>
 );
}
</code></pre>
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:
<pre><code>import useSWR from "swr";

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

 if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
 if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

 return (
 &#x3C;div>
 &#x3C;h1>{data.title}&#x3C;/h1>
 &#x3C;p>{data.description}&#x3C;/p>
 &#x3C;/div>
 );
}
</code></pre>
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.
<h3>🚩Performance comparison</h3>
To compare the performance of UseSWR with <code>useEffect</code> and <code>useState</code>, we'll use the same API endpoint for both approaches: <a href="https://jsonplaceholder.typicode.com/todos">jsonplaceholder.typicode.com/todos</a>. 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 <code>useEffect</code> and <code>useState</code>:
<pre><code>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 (
 &#x3C;ul>
 {todos.map((todo) => (
 &#x3C;li key={todo.id}>
 &#x3C;input type="checkbox" checked={todo.completed} />
 &#x3C;span>{todo.title}&#x3C;/span>
 &#x3C;/li>
 ))}
 &#x3C;/ul>
 );
}
</code></pre>
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:
<pre><code>import useSWR from "swr";

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

 if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
 if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

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

 return (
 &#x3C;ul>
 {todos.map((todo) => (
 &#x3C;li key={todo.id}>
 &#x3C;input type="checkbox" checked={todo.completed} />
 &#x3C;span>{todo.title}&#x3C;/span>
 &#x3C;/li>
 ))}
 &#x3C;/ul>
 );
}
</code></pre>
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 <code>useEffect</code> and <code>useState</code> in terms of speed, even though it handles caching and error handling automatically.
<h3>Over to you</h3>
Have you used the useSWR hook before?
Let me know in the comments😄
<h3>🚩Conclusion</h3>
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 <code>useEffect</code> 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 <a href="https://swr.vercel.app/docs/getting-started">official documentation</a> to learn more.
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

<h3>🔥Introduction</h3>
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.
<h3>🔥Overview of Forward and Reverse Proxy</h3>
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.
<img src="https://user-images.githubusercontent.com/76895975/228149345-fdbee27e-5628-40a9-9798-83663af68055.png" alt="image">
A forward proxy is commonly used for:
<ul>
<li>Avoid browser restrictions</li>
<li>Block access to certain content</li>
<li>Protect clients</li>
</ul>
A reverse proxy is good for:
<ul>
<li>Protect servers</li>
<li>Load balancing</li>
<li>Caching static contents</li>
<li>Encrypt and Decrypt SSL communications</li>
</ul>
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.
<h3>🔥Why is Nginx called a “reverse” proxy?</h3>
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.
<img src="https://user-images.githubusercontent.com/76895975/228149289-7627a407-ef54-497c-bd43-b037dd00a19b.png" alt="image">
<h3>🔥Benefits of using Nginx as a reverse proxy:</h3>
<ol>
<li>Enhanced security: Nginx can act as a firewall, blocking malicious traffic and protecting backend servers from attack.</li>
<li>High availability: Nginx can be configured to distribute traffic among multiple backend servers, ensuring high availability and reducing the risk of downtime.</li>
<li>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.</li>
<li>Load balancing: Nginx can distribute incoming traffic across multiple backend servers, which can improve performance and ensure high availability.</li>
<li>SSL/TLS termination: Nginx can terminate SSL/TLS connections, which can offload processing from backend servers and improve performance.</li>
</ol>
<h3>🔥Over to you:</h3>
Which proxy you will use: Reverse proxy or HAProxy?
Let me know in the comments: which and why🤔
 
 
<hr>
 
 
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 <a href="https://twitter.com/ayushsoni1010">@ayushsoni1010</a> for more content like this🔥😉.

API Architectural Styles

Build an API with Serverless Functions in Next.js

Crafting Effective Chaos Error Messages

Deploy your React app using GitHub pages

Git Together: Pro Tips for Commits and Branches

Hacking at MLH HackCon

How to deploy the Headless CMS Strapi app on Heroku

How to install fastn on your local machine

HTTP Status Codes

Lets Grow with LetsGrowMore

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

Supercharge your React app with useSWR

Why is Nginx called a “reverse” proxy?