Forem: RahulReddy

GSEO: How to Get Found in the AI Search World

RahulReddy — Tue, 27 Jan 2026 00:02:13 +0000

Search is no longer about finding the best page to click. It’s about getting the best answer instantly. Tools like ChatGPT, Perplexity, and Gemini are changing how people discover information, and this shift is forcing a new way of thinking about SEO.

1. From Links to Answers

For a long time, search worked in a very predictable way. You typed a query into Google, scanned through ten blue links, and clicked the one that looked most promising. Websites competed to rank higher because clicks were the goal.

That behavior is fading fast.

Today, when someone asks a question, they often receive a complete answer directly inside an AI interface. Instead of choosing between links, the user is given a summarized response that feels final and authoritative. In many cases, the user never visits a website at all.

Search has moved from “Which link should I click?” to “Here’s the answer you were looking for.”

2. How AI Picks an Answer

AI doesn’t rely on a single webpage when answering a question. It reads across many sources such as blog posts, documentation, tweets, and product pages, then combines what it learns into one clear response.

In simple terms, AI picks content it can summarize cleanly without guessing. The easier your content is to explain, the more likely it is to be used.

3. Perfect GSEO Page

A strong GSEO page is designed for understanding, not just ranking. It starts with a clear title that tells both humans and AI exactly what the page is about. Early in the content, it defines the topic in simple language so there is no confusion about the subject.

The goal of a GSEO page is not to impress with complexity. It is to teach so clearly that an AI can confidently repeat the explanation in its own words.

4. Old vs New Metrics

Traditional SEO success was measured using rankings, clicks, and impressions. While these still matter, they no longer tell the full story.

Success in GSEO is less about traffic volume and more about authority and influence.

Final Thought

GSEO is not about gaming algorithms. It’s about explaining things so clearly that machines and humans both understand you. When your content becomes easy to summarize, compare, and trust, AI systems naturally choose it.

The future of SEO belongs to those who focus less on ranking pages and more on becoming the answer.

SEO

Try free SEO tools https://www.useSEO.app

Art of creating accessible link

RahulReddy — Sun, 24 Sep 2023 11:46:21 +0000

Hyperlinks are the backbone of web navigation, allowing users to seamlessly move between web pages and access valuable content. However, creating accessible hyperlinks is essential to ensure that all users, including those with disabilities, can interact with your website effectively. In this blog post, we will explore best practices for creating accessible hyperlinks, providing examples that adhere to these guidelines.

The Importance of Accessible Hyperlinks

Accessible hyperlinks not only make your website more user-friendly but also contribute to better search engine optimization (SEO). They improve the overall user experience, leading to higher user engagement and satisfaction.

1. Use the Appropriate Role and Accessible Name

When marking up hyperlinks, it's crucial to specify the appropriate role and provide an accessible name. The role defines the nature of the element, such as whether it's a link, button, or image, while the accessible name is the text that is presented to screen reader users.

<a href="https://www.google.com" role="link" aria-label="Visit Google">Google</a>

2. Avoid Generic Link Text

Avoid using generic link text like "click here" or "read more." Instead, use descriptive and meaningful link text that conveys the link's purpose.

Bad practice:

<a href="mailto:info@example.com">Click here to get in touch</a>

Better Practice:

<a href="mailto:info@example.com">Contact us at info@example.com</a>

3. Provide Context and File Information

When linking to files, inform users of the file format and size. This helps users understand what to expect before clicking on the link and prevents unexpected changes in context.

<a href="documents/report.pdf">Download our annual report (PDF, 2.5 MB)</a>

4. Inform Users of New Windows or Tabs

When a hyperlink opens in a new window or tab, it's essential to inform users of this behaviour to prevent confusion.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com (opens in a new tab)</a>

5. Style Links for Clarity and Consistency

Use CSS to style links appropriately for different states (unvisited, visited, hovered, active, and focused). Clear and consistent link styling improves usability and helps users understand their current interaction state.

a:link {
    color: #0077cc; /* unvisited link */
}

a:visited {
    color: #551a8b; /* visited link */
}

a:hover {
    color: #ff6600; /* mouse over link */
}

a:active {
    color: #ff0000; /* selected link */
}

a:focus {
    outline: 2px solid #00f; /* keyboard focus */
}

FYI: Confusion of using buttons or links. If takes somewhere use links it the submitting form or run the javascript us button

Conclusion

Creating accessible hyperlinks is not only a best practice for web development but also a way to improve SEO and user satisfaction. By following these guidelines and examples, you can create a web environment that is welcoming and inclusive for all users, regardless of their abilities. Making your hyperlinks accessible is a small but significant step toward a more inclusive and user-friendly website.

If you would like to support my blogs/for a coffee - BuyMeCoffee

Referrences

Getting Started with GitHub Actions - Basics

RahulReddy — Thu, 23 Feb 2023 16:37:39 +0000

Automation is a key part of modern DevOps practices, allowing software development teams to quickly and efficiently develop, test, and deploy software. GitHub Actions is a powerful automation platform that can be used to automate tests, builds, and deployments.

With GitHub Actions, developers can create custom workflows to integrate with existing processes and automate their workflow from code to deployment.

Prerequisite

Though we will start exploring GitHub actions from the beginning. It is good to have some Basic understanding of,

GitHub
YAML(Yet Another Markup Language)

By the end of this post, you will be able to write a simple workflow which triggers whenever a user creates an issue in GiHub and it will auto-assign to the specified user.

So what are GitHub Actions?

In simple terms, GitHub Actions is a way to make your computer do things automatically. For example, you can make your computer check your code for errors every time you make a change, or you can make it automatically create a new version of your project when you're ready to share it with others. It's like having a robot helper to help you with your projects!

GitHub actions and its components

Before diving into creating workflow and actions it is good to know the key concepts involved in creating them.

1. Workflow

GitHub workflow is a configurable automated process defined by a YAML file that will run when any event is triggered in your repository.

Workflows are defined in the .github/workflows directory in a repository.

2. Events

GitHub Events are special triggers that can cause a workflow to run. For example, when someone pushes a change to a repository, that can trigger a workflow to run.

GH Actions are event-driven, which means you can define what happens after a specific event.

3. Jobs

GitHub Jobs are the individual tasks that make up a workflow. A job is a set of steps that run on the same runner.

4. Steps

Steps are individual tasks that can run commands, such as a shell command or an action, in a job within a workflow.

5. Action

Actions are the commands that define the steps of each job. They are combined into steps to create a job. Actions are standalone commands that can be portable.

Magic of Workflow:

Now we have a high-level understanding of different components, let us write and customize our first workflow.

First and foremost we need a .yml file to create our workflow.

All workflow files related to GitHub Actions must live in the .github/ workflows directory and must have either the .yml or .yaml file extension.

Note: gh-actions is my repository name created. You can name it as per your choice.

First Workflow

name: GH Actions
on:
    issues:
        types: [opened]
jobs:
    auto-assign:
        runs-on: ubuntu-latest
        steps:
            - name: 'Auto-assign PR'
              uses: pozil/auto-assign-issue@v1
              with:
                  assignees: deraowl
                  repo-token: ${{ secrets.GITHUB_TOKEN }}

Don't worry about the weird syntax, it is a YAML code and I will explain every line in-depth. So no worries :)

Specific keys that can be added to the workflow:

name:

We need to provide a meaningful full name as it will be visible on the actions tab in the GitHub repository.
As it is an optional field, If you do not add this key and a corresponding value, GitHub will set the name of your workflow to the file path relative to the root of the repository.

This mandatory key specifies which event or events will trigger the workflow.
This accepts a single event or an array of events.

jobs

Workflow runs can have one or more jobs.

job_id

Each job defined must have the job_id associated with it.
Each job ID must start with either an underscore (_) or with a letter and must be unique to that specific job.

runs_on

It is a required field, that specifies the type of machine that the job will run on.
In our case, we are using ubuntu-latest as a virtual environment.

steps

Steps are tasks that exist within a job. They can contain a series of tasks and run commands, set up tasks, or run an action.

To Summarise the above workflow,

The Issue assignment workflow will run every time an issue is opened. This will trigger a job called auto-assign, which will run on the latest version of Ubuntu, running on a GitHub-hosted runner.

The step within the job will use an action called Auto-assign issue, which can be found in GitHub Marketplace. This step will use a repository token (GITHUB_TOKEN), which is automatically created when GitHub Actions are enabled in a repository. Finally, the job will assign an assignee – in this case, deraowl – to the newly created issue.

Trigger the Workflow

To trigger the above-created workflow just open a new issue under the same repository and click on Submit a new issue. And that's it.

It will trigger the workflow which is mentioned above

If your workflow fails due to a For resources not accessible by integration, go to github.com/username/repository/actions and under the general section change Workflow permission to Read and write permissions. This should resolve the

Check Actions Live

Now navigate to the Actions section in the header. Here you can see the job auto-assign which will be executed successfully. It is a simple job created which will start executing as soon as an issue has been created.

This can be used to auto-assign the assignee or auto-create specific labels. We will explore multiple jobs and actions in upcoming posts.

Now if you check the issue which we created earlier named GH actions testing under the Assignees section is now assigned to DeRaowl which is me.

This name we defined in the job under assignees.

And it's a wrap

So that's it. How easy it is to create a workflow. In upcoming posts, we will explore and create much more complex jobs and also will explain how we can create our job as auto-assign and publish it to GitHub marketplaces.

You can check out my Repository for the code. And if you want to explore more about GitHub actions then GitHub has very good Documentation.

References

Automatic Batching in React 18

RahulReddy — Sun, 03 Jul 2022 16:02:55 +0000

Batching is when React groups multiple state updates into a single re-render for better performance. In React 17 and prior, updates inside React event handlers were batched. But updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default.

However, In React18 we are introduced to improved version of batching called Automatic Batching. It will enabled batching of all the state updates regardless of where they are called.

Let us break out this batching process React 17 and prior along with React 18 and understand the problems we faced earlier.

Problem with React 17 and Prior

Before looking into the issue, let us understand how batching works in React 17 and prior version. Our app contains two states to manage user name and city. onLoadUser function will be invoked on button click.

You can try the app in this @ StackBlitz . Click on a button and you will see console statement each time our App re-renders.

If you observe the browser console, you will see that state changed message is logged only once for both state updates. (PS: Initial log statement occurs when your app gets mounted for the very first time).

import React, { useState, useEffect } from 'react';

export default function App() {
  const [name, setName] = useState();
  const [city, setCity] = useState();

  // Sync Function call
  const onLoadUser = () => {
    setName('Rahul');
    setCity('Bangalore');
  };

  useEffect(() => {
    console.log(`UseEffect Called: userDeatils ${name} ${city}`);
  }, [name, city]);

  return (
    <div>
      <h1>Print User details</h1>
      <p>
        User Name: <strong>{name}</strong>
      </p>
      <p>
        City: <strong>{city}</strong>
      </p>
      <button onClick={onLoadUser}>Fetch user details</button>
    </div>
  );
}

Now you have seen that React batched both state updates and re-rendered the component only once.
But, what if we execute state updates in a context that is not associated with the browser?

For example, consider a fetch() call that asynchronously loads data:

If you observe the browser console after executing this example, you will see 2 messages. This indicates that two separate re-renders occur for each state update.

A fake API been used to fetch user details.

const onLoadUser = () => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((res) => res.json())
      .then((data) => {
        setName(data.name);
        setCity(data.address.city);
      });
  };

Any drawback here?

As observed. we see two different behaviors with synchronous and asynchronous functions . It is a performance bottleneck. If there are lot of states coming in and you are re-rendering fairly heavy there can be multiple re-renders.
That’s why React introduced Automatic Batching.

How Batching works in React18?

React v18 ensures that state updates invoked from any location will be batched by default. This will batch state updates, including native event handlers, asynchronous operations, timeouts, and intervals.

React version should be 18

If you observe the browser console after executing this example, you will see two messages. This indicates that only one re-render occurs as React batches all state updates regardless of where they are called.

Conclusion

To sum up that react 18 will batch the state updates for us no matter if it is in a simple function containing multiple state updates or a web API and interfaces like setTimeout, fetch or a promise containing multiple state updates.

To know more about Automatic batching, check out Discussions here

I write about the web; you can follow me on Twitter. If you liked the post, give some ❤️!! Cheers

SASS - CSS with super power

RahulReddy — Mon, 07 Jun 2021 11:32:30 +0000

Hi Folks,

If we work on small projects, there won't be a lot of need to maintain CSS, but if you're dealing with major projects? Maintaining CSS will be difficult. That's when SASS comes into play.

SASS or Syntactically Awesome Style Sheets is a scripting language and CSS preprocessor which compiles into CSS. This means when we write code in SASS, it automatically converts sass code into CSS.

Why SASS?

It follows, "Don't repeat yourself principle" also called DRY PRINCIPLE
Helps us to maintain our CSS code in a more organized manner.

SASS comes up with 2 syntaxes:

SCSS: Sassy CSS is a superset of CSS. In simple terms, a valid CSS file is a valid SCSS file. SCSS files have .scss file extension
Intended syntax: Intended syntax mainly focuses on indentation. Intended files have a .sass file extension.

SASS comes with a lot of features such as variables, nested rules, mixins, inline imports, built-in functions, etc. What we learn in detail.

SASS features.

Variable

You can declare variables globally and can use its placeholder at multiple places.

SCSS,

$color-primary: #000;
$color-secondary: #333;
.nav-links{
       background-color: $color-primary;
       color: $color-secondary;
}

CSS,

.nav-links{
          background-color: #000;
          color: #333;
}

Nesting

We can nest selectors which share the same parent name which makes CSS more readable.
SCSS,

li{
display: inline-block
margin-left: 30px;
&:first-child{
margin: 0;
}

CSS,

li{
display: inline-block;
margin-left: 30px;
}
li:first-child{
margin:0;
}

Mixins & Include - Mixins allow us to define CSS rules as a blueprint and we can use these rules in our selectors. To use mixins we have to use @ include followed by mixin name.
SCSS,

$color-primary: #333;
@mixin header-main($bg-color){
color: $color-primary;
font-size: 3rem;
border: 2px solid $color-primary;
background-color: $bg-color;
}
.header {
@include header-main(#2b2b2b);  /*We can use this statement at multiple places if 
required by passing different bg-color parameter*/
}

CSS,

.header {
color: #333;
font-size: 3rem;
border: 2px solid #333;
background-color: #2b2b2b;
}

Functions - Yes, SASS allows us to create functions. To use functions we prefix function keyword with @ symbol.

@function divide($a/$b){
@return $a/$b;
}
.header{
padding: divide(30,7);
}

Conclusion

These are some of the most useful features SASS comes with. You can read more about SASS here Official Doc. This is one of the good things about learning SASS as a developer that saves so much time. However, there are disadvantages too in SASS, which you can read here Disadvantages

Regarding SAAS, please let me know if this article was helpful in the comments. And your feedback is welcomed.

::Before and ::After in CSS made easy

RahulReddy — Sat, 05 Jun 2021 03:50:14 +0000

Hello, People

Today we are going to learn about pseudo-elements, one of the most useful CSS properties.
Pseudo-elements in CSS allow us to add content to a page without adding additional HTML elements.
Seems confusing? Okay, in simple terms.

Pseudo-elements are like a shadow, which can be seen but not able to touch.

I can assure you that if you master these topics, you will use them all over your project. Without wasting time let us dive in.

::Before

Before selector is used to position content before the content of the selected element.

Syntax

We need to add the item with the keyword ::before with the required content property. The content can be any string or even blank.

     element::before{
      content: "";
     }

Note: before and after pseudo-elements will not work without content property.

Example

::After

The after pseudo-element can be used to position content after the content of the selected element.

Syntax

We need to add the item with the keyword ::after with the required content property.

     element::after{
      content: "";
     }

Example

Note: These elements are inline by default

I Hope, the blog was useful. If there are any queries feel free to ping me on Twitter. Now as a task you can create the below image using before and after pseudo-elements.

The solution can be found here Codepen

For more about Pseudo Elements, refer below websites: