DEV Community: Vivek Mittal

Generative Engine Optimization (GEO): The New Frontier Beyond SEO

Vivek Mittal — Mon, 02 Jun 2025 15:17:24 +0000

As generative AI platforms like ChatGPT, Claude, Gemini, and Perplexity become primary gateways to information, a new paradigm is emerging: Generative Engine Optimization (GEO). Much like SEO revolutionized the way we approached web visibility in search engines, GEO is poised to do the same for generative platforms.

🧠 What Is Generative Engine Optimization (GEO)?

Generative Engine Optimization (GEO) refers to the strategic creation and structuring of content so that it is effectively surfaced, cited, or embedded by Generative AI (GAI) systems when users ask questions.

Unlike SEO, where the goal is to rank higher in a list of web links, GEO aims to:

Be referenced or quoted in LLM-generated responses
Influence what LLMs present as answers
Gain visibility inside the generated content — not just as a clickable link

🔍 How GEO Differs from Traditional SEO

Aspect	GEO	SEO
Target System	Generative AI tools like ChatGPT, Gemini, Perplexity	Search engines like Google, Bing
Goal	Be referenced or quoted in AI-generated responses	Appear in top results for keyword queries
Ranking Signals	Data quality, authority, clarity, embedding proximity, model training	Backlinks, metadata, keyword density, page speed
Content Format	Plain-language clarity, Q&A style, unambiguous facts	Keyword-optimized blogs, landing pages, structured schema
Indexing	Fine-tuned training data, retrieval-augmented generation (RAG)	Crawlers and sitemaps

🛠️ How Generative Engines Retrieve Information

Modern LLMs rely on:

Training data: Websites, forums, Wikipedia, docs, etc.
Retrieval-augmented generation (RAG): External databases for grounding
Trust signals: Citation density, clarity, formatting, consistency

So, your content must be not only discoverable — but memorable, factual, and semantically clear to LLMs.

🚀 7 Strategies to Optimize for Generative Engines

1. Write Clear, Direct Answers

Use short, declarative sentences. Structure your content to directly answer questions.

2. Use Structured Data & Schema Markup

Implement FAQPage, Organization, and Article schemas. Structured content makes it easier for LLMs to extract and prioritize information.

3. Earn Trust and Citations

Publish on reputable domains
Get backlinks from trusted websites
Mention your brand clearly in quotes and statistics

4. Keep Content Fresh and Updated

Generative platforms (especially real-time ones like Perplexity) favor recent content. Add timestamps and update indicators.

5. Optimize for Brand Mentions

Phrase sentences in a way that can be directly quoted by AI:

6. Publish Long-Form Authoritative Content

In-depth explainer content, whitepapers, and knowledge bases often become source material for LLM fine-tuning or memory.

7. Use Embeddings and APIs to Feed Data

Leverage vector databases and embedding APIs to serve your own chatbot or AI assistant with accurate, updated, and branded content.

📈 How to Measure GEO Effectiveness

While GEO lacks official dashboards (like Google Search Console for SEO), you can:

Ask ChatGPT, Claude, or Gemini about topics in your niche — are you cited?
Use Perplexity.ai to test which sources are referenced
Track referral traffic from AI-based platforms
Set up Google Alerts for your key content phrases

📌 Final Thoughts

Generative Engine Optimization is not just a buzzword — it's a strategic shift in how information is distributed and consumed. As AI tools become dominant interfaces for knowledge, GEO is the new SEO.

🖼️ Bonus: GEO vs SEO Infographic

Understanding JavaScript's Object-String Comparison

Vivek Mittal — Mon, 04 Dec 2023 16:55:49 +0000

JavaScript's loose equality operator (==) often leads to intriguing comparisons due to its type coercion. One such comparison involves an empty object and a string. Let's delve into this scenario to understand the underlying principles.

Consider the code snippet:

const x = {};
console.log(x == "1");

One might intuitively expect this to output true. However, in JavaScript, this results in false. Why does this happen?

Type Coercion in JavaScript

JavaScript employs type coercion when using the loose equality operator (==). It attempts to convert operands to a common type for comparison.

In this case, the empty object x and the string "1" are inherently of different types. JavaScript attempts to coerce these values to a common type for comparison but fails to equate them.

Understanding the Comparison

An empty object, {}, doesn’t naturally convert into a string resembling "1". Therefore, the comparison using == returns false.

However, we can explore other ways to achieve a true comparison.

String Conversion and Equality

To explicitly convert an object to a string for comparison, you can use the toString method or the String() function:

console.log(String(x) === "1"); // Outputs: false

This will return false because an empty object converted to a string results in "[object Object]", not "1".

Overriding toString Method

To make the comparison x == "1" evaluate to true, we can override the toString method of the object:

const x = {
  toString: function() {
    return "1";
  }
};

console.log(x == "1"); // Outputs: true

Here, the toString method explicitly returns "1", causing the comparison to yield true.

Conclusion

JavaScript's loose equality operator can produce unexpected results, especially when comparing different data types. Understanding type coercion and the behavior of specific data types is crucial to anticipate and manage these scenarios effectively.

While an empty object and the string "1" are inherently dissimilar, explicit type conversion or method overriding can alter how these values are compared.

By grasping these intricacies, developers can write more predictable and robust JavaScript code.

JavaScript's type coercion is a powerful feature but requires careful handling to ensure accurate comparisons and operations.

Understanding these nuances enables developers to navigate JavaScript's quirks and write more reliable and maintainable code.

Efficient DOM Manipulation with document.createDocumentFragment()

Vivek Mittal — Sat, 04 Nov 2023 10:04:48 +0000

When working with the Document Object Model (DOM) in web development, efficient manipulation of DOM elements can significantly impact the performance of your web applications. One of the tools that can help you achieve more efficient DOM manipulation is document.createDocumentFragment(). In this article, we will explore the problem with the traditional approach to DOM manipulation and the benefits of using document.createDocumentFragment().

The Problem with Traditional DOM Manipulation

In the traditional approach to DOM manipulation, developers often create a series of DOM elements and append them to the document one by one. While this approach is straightforward, it can lead to performance issues, especially when adding a large number of elements to the DOM. The key problems with this approach are:

Frequent Reflows and Repaints
Each time you append an element to the document, the browser performs a reflow and a repaint operation. A reflow calculates the layout and position of elements in the DOM, and a repaint updates the visual representation of the page. These operations can be computationally expensive, and when performed frequently, they can lead to a noticeable degradation in performance.
Increased JavaScript Execution Time
Appending multiple elements one by one in the traditional way requires a series of JavaScript function calls. Each call comes with a certain level of overhead, and the cumulative effect can lead to increased JavaScript execution time, causing slower response times in your web application.
Reduced Responsiveness
The user experience can suffer when a web page becomes less responsive due to slow DOM manipulation. Long-running JavaScript operations can make the page appear unresponsive or even freeze, negatively impacting user engagement.

Benefits of `document.createDocumentFragment()`

To address these problems, the DOM API provides a helpful tool called document.createDocumentFragment(). This method allows developers to create a lightweight, in-memory container for storing and manipulating DOM elements before appending them to the actual document. The benefits of using document.createDocumentFragment() include:

Minimized Reflows and Repaints
With a DocumentFragment, you can construct your desired DOM structure without affecting the document's layout and rendering performance. You can append child nodes to the DocumentFragment without triggering reflows and repaints. Only when you append the entire DocumentFragment to the document do the reflow and repaint operations occur, which can significantly reduce their frequency.
Improved Performance
By building and manipulating your DOM structure within a DocumentFragment, you reduce the number of reflows and repaints in the browser, resulting in better performance. The reduced computational overhead leads to a smoother and more responsive user experience.
Simpler Code
Using document.createDocumentFragment() often leads to more concise and readable code. You can structure your DOM manipulation logic within the DocumentFragment, making it easier to manage and understand, especially when dealing with a complex hierarchy of elements.

How to Use `document.createDocumentFragment()`

Here's a simple example of how to use document.createDocumentFragment():

// Create a DocumentFragment
var fragment = document.createDocumentFragment();

// Create some DOM elements and add them to the fragment
var div1 = document.createElement("div");
div1.textContent = "Element 1";
fragment.appendChild(div1);

var div2 = document.createElement("div");
div2.textContent = "Element 2";
fragment.appendChild(div2);

// Append the entire fragment to the document
document.body.appendChild(fragment);

In this example, we create a DocumentFragment, add two div elements to it, and then append the entire fragment to the document. This approach minimizes reflows and repaints, resulting in improved performance.

Conclusion

Efficient DOM manipulation is crucial for creating high-performance web applications. document.createDocumentFragment() is a valuable tool that allows developers to construct and manipulate DOM elements without causing unnecessary reflows and repaints. By using DocumentFragments, you can improve the performance, responsiveness, and readability of your code, enhancing the overall user experience on your website or web application. Consider incorporating this technique into your web development toolkit to achieve more efficient DOM manipulation.

Understanding the Difference Between compose() and pipe() in JavaScript

Vivek Mittal — Thu, 26 Oct 2023 02:44:13 +0000

JavaScript is a versatile and expressive language that allows developers to manipulate data and create complex functions. In functional programming, two essential concepts for data transformation and function composition are compose and pipe. Both of these functions are used to combine multiple functions to create new, more complex functions. However, they differ in the order in which they execute the functions and their overall behavior. In this article, we'll explore the differences between compose and pipe in JavaScript.

The Basics of Compose and Pipe

Before delving into the differences, let's first understand what compose and pipe are and how they work.

Compose

compose is a function often found in functional programming libraries like Ramda or Lodash. It takes multiple functions as arguments and returns a new function that is the composition of those functions. The order of composition is from right to left, meaning that the rightmost function is executed first, and its result is passed as an argument to the next function to its left.

Here's how compose works:

const compose = (...functions) => input => functions.reduceRight((acc, fn) => fn(acc), input);

Pipe

pipe is quite similar to compose in its purpose, but it differs in execution order. It also takes multiple functions as arguments and returns a new function, but the execution order is from left to right. In other words, the leftmost function is executed first, and its result is passed as an argument to the next function to its right.

Here's how pipe works:

const pipe = (...functions) => input => functions.reduce((acc, fn) => fn(acc), input);

Key Differences

Now that we understand how compose and pipe work, let's dive into the key differences between them:

Execution Order

The most significant difference between compose and pipe is the order in which they execute the functions. Compose executes functions from right to left, while pipe executes functions from left to right. This order can have a profound impact on the output of the composed function.

For example, consider the following functions:

const addTwo = x => x + 2;
const double = x => x * 2;

Using compose:

const composedFunc = compose(double, addTwo);
composedFunc(3); // Output: 10

Using pipe:

const pipedFunc = pipe(addTwo, double);
pipedFunc(3); // Output: 10

In the compose example, addTwo is applied first, followed by double, resulting in 10. In the pipe example, addTwo is applied first, resulting in 5, and then double is applied, resulting in 10.

Use Cases

The choice between compose and pipe depends on the specific use case and the order in which you want to apply your functions. Compose is often used when you want to apply functions from right to left, which can be useful when you have a series of transformations or filters that you want to apply in a particular order.

Pipe, on the other hand, is ideal when you want to apply functions from left to right. This can be helpful when you want to build up a transformation step by step, where the output of each function is fed into the next one.

Readability

Another consideration is code readability. Depending on the situation, one of the functions might make your code more readable than the other. If you find that one order of function application makes the code more intuitive and easier to understand, it's advisable to use that approach.

Conclusion

In JavaScript, compose and pipe are powerful tools for function composition, enabling you to create complex functions from simpler ones. The main difference between them lies in the order in which they execute the functions, with compose working from right to left and pipe working from left to right. Choosing between the two depends on your specific use case and readability preferences. Understanding these differences will help you write more efficient and maintainable code in your JavaScript applications.

An In-Depth Guide to HTTP Methods for frontend developers

Vivek Mittal — Wed, 18 Oct 2023 03:12:07 +0000

Introduction

The Hypertext Transfer Protocol (HTTP) is the foundation of data communication on the World Wide Web. It's the protocol that enables your web browser to fetch and display web pages, and it's used for many other purposes, including RESTful API interactions. HTTP methods, also known as HTTP verbs, play a crucial role in this protocol, defining the actions a client can perform on a resource. In this article, we will explore the various HTTP methods and their uses.

HTTP Methods: A Brief Overview

HTTP defines several methods, each with a specific purpose. These methods provide a standardized way for clients, such as web browsers or applications, to interact with web servers. Here are some of the most common HTTP methods:

GET: The GET method is used to request data from a specified resource. When you enter a URL in your browser, it sends a GET request to the server, which then responds with the requested web page. GET requests are typically read-only and should not have any side effects on the server.

POST: The POST method is used to submit data to be processed by a resource. It's commonly used when you submit a form on a web page. POST requests can have side effects, such as creating a new resource or updating existing data on the server.

PUT: The PUT method is used to update a resource or create it if it doesn't exist. Unlike POST, which might have side effects, a PUT request is idempotent, meaning that making the same request multiple times has the same result as making it once.

PATCH: The PATCH method is used to apply partial modifications to a resource. It's often used to update specific fields within an existing resource, without affecting the rest of the resource's data.

DELETE: The DELETE method is used to request the removal of a resource. It's a way to delete data on the server. Like PUT, DELETE requests are idempotent.

HEAD: The HEAD method is similar to GET but doesn't return the response body. It's used to retrieve metadata about a resource, such as headers, without transferring the actual data.

OPTIONS: The OPTIONS method is used to request information about the communication options available for a resource. It's often used to check the server's capabilities.

CONNECT: The CONNECT method is primarily used to establish a network connection to a resource, typically for the purpose of setting up a tunnel for secure communication.

TRACE: The TRACE method is used for diagnostic purposes, allowing clients to see what changes have been made to a resource as it's been passed through intermediaries.

Common Use Cases

Each HTTP method serves a specific purpose and is suitable for various use cases:

GET: Retrieving web pages, fetching data, or reading information from a server.

POST: Submitting forms, sending data for processing, or creating new resources on the server.

PUT: Updating resources on the server, including replacing the entire resource.

PATCH: Making partial updates to resources, such as modifying specific fields in a database record.

DELETE: Removing resources from the server.

Conclusion

Understanding HTTP methods is fundamental for web developers and anyone working with web services. These methods dictate how clients interact with servers, making it possible to retrieve, modify, and delete resources while maintaining a standardized and secure approach.

When developing web applications or working with RESTful APIs, it's essential to choose the appropriate HTTP method for the task at hand. GET, POST, PUT, PATCH, DELETE, and the other HTTP methods each have their own role and implications. Properly using these methods ensures efficient and reliable communication between clients and servers, contributing to the overall functionality and security of web-based systems.

Understanding Object.seal(), Object.freeze(), and Object.preventExtensions() in JavaScript

Vivek Mittal — Sun, 15 Oct 2023 10:01:51 +0000

Introduction

JavaScript is a versatile and powerful programming language, known for its ability to manipulate and manage objects. Three essential methods for controlling the mutability of objects in JavaScript are Object.seal(), Object.freeze(), and Object.preventExtensions(). These methods play a crucial role in ensuring the integrity and immutability of objects, providing developers with the tools they need to maintain data consistency and security. In this article, we'll explore each of these methods in detail and understand their use cases.

1. Object.seal()

The Object.seal() method is used to seal an object, which means that it prevents the addition or removal of properties from that object. It also makes all existing properties non-configurable, meaning they cannot be reconfigured or deleted. However, the values of the existing properties can still be modified.

const sealedObject = {
  name: 'John',
  age: 30
};

Object.seal(sealedObject);

// Adding a new property is not allowed
sealedObject.location = 'New York'; // Error

// Deleting properties is not allowed
delete sealedObject.age; // Error

// Modifying existing properties is allowed
sealedObject.name = 'Jane';

Use cases for Object.seal():

When you want to prevent the addition or deletion of properties, but still allow property value changes.
Ensuring that certain properties remain consistent and unaltered throughout the object's lifetime.

2. Object.freeze()

The Object.freeze() method takes the concept of immutability a step further. When you freeze an object, it becomes completely immutable. This means that not only can you not add or delete properties, but you also cannot modify the values of existing properties.

const frozenObject = {
  name: 'Alice',
  age: 25
};

Object.freeze(frozenObject);

// Adding a new property is not allowed
frozenObject.location = 'Paris'; // Error

// Deleting properties is not allowed
delete frozenObject.age; // Error

// Modifying existing properties is not allowed
frozenObject.name = 'Bob'; // Error

Use cases for Object.freeze():

When you need to create objects with constant, unchanging data.
Ensuring that data remains consistent and cannot be unintentionally modified.

3. Object.preventExtensions()

The Object.preventExtensions() method is used to prevent the addition of new properties to an object. While it doesn't affect the configurability or writability of existing properties like Object.seal(), it stops the object from being extended with new properties.

const extendedObject = {
  name: 'Eve',
  age: 28
};

Object.preventExtensions(extendedObject);

// Adding a new property is not allowed
extendedObject.location = 'Berlin'; // Error

// Deleting properties is allowed
delete extendedObject.age;

// Modifying existing properties is allowed
extendedObject.name = 'Charlie';

Use cases for Object.preventExtensions():

When you want to prevent new properties from being accidentally added to an object while still allowing modification and deletion of existing properties.
Ensuring that an object has a fixed set of properties without any extensions.

Conclusion

In JavaScript, the Object.seal(), Object.freeze(), and Object.preventExtensions() methods provide developers with ways to control the mutability of objects, based on their specific requirements. By applying these methods appropriately, you can enhance the security and stability of your code, reduce the risk of unintentional data changes, and ensure that your objects behave as expected throughout their lifecycle. Understanding when and how to use these methods is essential for mastering JavaScript's object manipulation capabilities.

Unveiling Interaction to Next Paint (INP): A Vital Web Metric

Vivek Mittal — Tue, 10 Oct 2023 13:26:10 +0000

Introduction

In the ever-evolving landscape of web development and user experience, metrics like Core Web Vitals have gained immense importance. These metrics provide insights into how users perceive the speed and usability of a website, which can significantly impact its success. One such metric that has emerged as a critical indicator of user experience is "Interaction to Next Paint" (INP). INP is a component of the larger set of Core Web Vitals and is designed to measure the time it takes for a webpage to become interactive after the user's initial interaction.

Understanding INP

To comprehend INP, it's essential to break down its name. "Interaction" refers to any user-initiated action on a webpage, such as clicking a link, tapping a button, or scrolling. "Next Paint" refers to the moment when the browser begins rendering the next visible frame, essentially indicating that the webpage is responding to the user's interaction. INP measures the time between these two events, providing web developers with a crucial metric to assess the responsiveness of their websites.

INP is part of the Core Web Vitals initiative, which aims to provide a set of metrics that reflect the real-world user experience when interacting with web pages. Other components of Core Web Vitals include Largest Contentful Paint (LCP) and First Input Delay (FID), which together provide a comprehensive picture of web performance and user satisfaction.

Why INP Matters

User Experience: A website's responsiveness directly impacts the user experience. Slow interaction times can lead to user frustration, decreased engagement, and higher bounce rates. INP helps developers identify areas where improvements are needed to enhance user satisfaction.
SEO Rankings: Search engines, particularly Google, consider web vitals like INP as a ranking factor. Websites with better performance are more likely to rank higher in search results, leading to increased organic traffic and visibility.
Conversion Rates: Slow INP can adversely affect conversion rates, especially on e-commerce websites. Users are more likely to abandon their shopping carts or leave a site if they experience delays when interacting with it.
Competitive Advantage: Websites that prioritize user experience and achieve better INP scores can gain a competitive edge in their respective niches. Improved performance can lead to increased user loyalty and positive word-of-mouth.

Improving INP

To improve INP scores and enhance overall website performance, web developers can consider the following strategies:

Efficient Code: Optimize the website's codebase to reduce unnecessary processing and rendering times. Minimize JavaScript execution, eliminate render-blocking resources, and utilize browser caching effectively.
Content Delivery Network (CDN): Implement a CDN to deliver content to users from servers geographically closer to them, reducing latency and improving response times.
Lazy Loading: Implement lazy loading for non-essential resources such as images and videos, ensuring that only the necessary content loads initially.
Prioritize Critical Resources: Load critical resources first to ensure a faster initial rendering and interaction time for users.
Server Response Time: Improve server response times by optimizing database queries, utilizing content compression, and employing efficient server-side caching.

Conclusion

Interaction to Next Paint (INP) is a vital web metric that plays a significant role in user experience, SEO rankings, and overall website success. Web developers and site owners should prioritize INP optimization as part of their broader strategy to improve Core Web Vitals. By focusing on reducing the time between user interactions and the subsequent rendering of the webpage, they can enhance user satisfaction, increase conversions, and gain a competitive edge in the digital landscape. As the web continues to evolve, INP will remain a critical indicator of a website's performance and its ability to meet user expectations.

Choosing the right JS framework for your next project is now easy!

Vivek Mittal — Sun, 29 Jan 2023 15:43:24 +0000

JavaScript (JS) is one of the coolest and most used programming language which tops the charts as the most popular technology with over 65% of developer using it for development according to the StackOverflow Developer Survey 2022

Does you and your team find it difficult in choosing the right JS framework for your next project? Do you spend more time in deciding the right framework more than you should’ve been?
If the answer to these questions is YES, then my friend this article is for you.

In this article, I’ll help you in deciding your perfect JS framework for your next project.

What we’ll be going through?

What are the core features the framework offers?
How popular is the JS framework and is it actively developed?
Does the framework provide good documentation?
Can you find enough learning resources on the framework?
Does the framework integrate well with third-party tools?

1. What are the core features the framework offers?

Go through the documentation well and know the core features the framework has to offer. Is the framework only a view layer or is it fully-fledged?

Apart from this there are other following features that you should look for in a framework:

Templating
Routing
State Management
Forms integration and validations

Here is the summary of the core features of the four popular JS frameworks:

2. How popular is the JS framework and is it actively developed?

This is one of the key points to remember while selecting the right framework. Imagine a scenario where you’re liking the idea of staying at a hotel nearby beach on a vacation but your travel buddies are more inclined towards staying at the centre of the city as its got some good reputed hotels.

The same works for JS frameworks. You might like a framework but your colleagues and the client are more into choosing a well reputed framework. Here are some points as to why they’re right:

If the framework is supported by less number of developers, then you’ll have to abandon the project midway or have to start from scratch with another framework.
Once your project grows and you need more developers to work on it, then it might be difficult to find a developer who’s got the core knowledge of that framework.
If you’re working with a less popular framework, then the chances are that it’s got a small community which might be a blocker for you because you’re unable to find the solution to the issue.
Nevertheless, if you want to receive better opportunities in future, then mastering a popular framework will help you get your dream job faster.

You can determine the popularity of the framework by quickly looking at how well the project is doing on Github.

Here are the popularity statistics for the four popular frameworks:

3. Does the framework provide good documentation?

While going through a new codebase just after you’ve joined an organisation, you might find it difficult to understand especially if it's a legacy code and not properly documented. You might feel frustrated and have to depend on others to help you understand the code which was written way back.

Same happens with the frameworks, you’re always reading and implementing someone else’s code. So choosing the right framework which is well documented with proper examples can help you utilise the framework to its full potential.

4. Can you find enough learning resources on the framework?

Documentation can help you understand the framework upto some extent. For mastering the framework you’ll be relying on other resources as well such as video tutorials, articles, books, etc.

So whenever you’re choosing a framework, always go through the internet to check if there are enough resources available. If there are not much resources available then either the framework is new or it’s not maintained anymore. If you decide to go forward with these kind of frameworks then they might hurt you in the long run and you’ll be in deep waters.

5. Does the framework integrate well with third-party tools?

A framework itself is not enough. Even a feature rich JS framework will require additional tools. Third-party tools can help you solve the problems which the framework itself cannot solve such as DOM manipulation, rich text editing, date time formatting, state manipulation. However these tools and libraries won’t even matter if you can’t integrate them with the chosen framework.

Somehow if you’re able to integrate the tools but that’s costing you a lot of time then you’ll be in deep trouble. Hence, the ease of integration should be tested before choosing the framework.

For example, you can directly install libraries using npm for React.

References:

7 different JavaScript console methods you never knew existed 🤯

Vivek Mittal — Sat, 28 Jan 2023 12:01:14 +0000

So being a JavaScript developer whenever I have to debug my code, the first thing that comes to my mind is adding a console.log(). Is this the only way of debugging using a console object? Why all my console data looks similar? What if I can add some colors to my console data? What if I can organize my data correctly?

UGHHH!!!!

JavaScript console methods to the rescue

Apart from the log() method, the console object provides us with some more useful methods which we can use to boost our productivity and take our debugging skills to the next level. So in this article, we’ll briefly understand 7 of the many different JavaScript console methods that remain hidden to most of the developers.

#1 console.table()

You as a developer must have put an array or object inside a console.log() . Well there’s a better way of doing it by using console.table() which will structure your code for better readability. You can also sort your table in any way you like without adding any extra piece of code.

Code

Output

#2 console.assert()

console.assert() comes in handy when you want to print some data on the basis of a certain condition, if the assertion is false then it’ll be printed otherwise nothing will be printed in case it’s true.

Code

Output

#3 console.dir()

The console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. This method is very much similar to console.log() but the key difference is visible when we start playing with DOM nodes. console.log() prints the element in an HTML-like tree while console.dir() prints the element in a JSON-like tree.

console.log() gives special treatment to DOM elements, whereas console.dir() does not. This is often useful when trying to see the full representation of the DOM object.

#4 console.count()

Let’s say you want to see how many times a certain part of your code is being run, console.count() can help you out as it prints the number of times a part of your code for example a function runs.

Code

Output

#5 console.time()

To become a better JavaScript developer, one should understand the performance impact of different types of loops. console.time() can help you as it prints the amount of time taken by a particular section of your code to execute.

Code

Output

#6 console.group()

This method is helpful when you want to group your console data which is similar. We can even do nesting and show relationship among them.

Code

Output

#7 console.trace()

Dealing with bugs in a large and complex codebase where you don’t exactly know the root cause of it can quickly become frustrating and time consuming. Understanding the code execution flow can help you quickly deal with those bugs and console.trace() helps you deal with those bugs better.

In simple terms it logs to the console the call stack that exists at the point console.trace() is called.

Code

Output

How I built my portfolio using Next.js, TailwindCSS, TypeScript and Framer Motion

Vivek Mittal — Mon, 21 Mar 2022 11:29:49 +0000

By mid february'22 while serving my notice period I decided to migrate my portfolio from CRA to next.js and also gave a thought about adding the blogs to my own portfolio website. So I decided to go with the following tech stack listed below:

Next.js
TypeScript
Framer Motion
TailwindCSS
SendGrid

Next.js

Next.js is a production ready framework for React. It comes with some great features out of the box like SSR/SSG/ISR, route pre-fetching, file system based routing, and most importantly SEO. So when I created my portfolio with CRA the TypeScript support is not good along with poor SEO. The need to have a separate backend server just to make your contact form working was a nightmare (if one is not using Netlify).
Due to all the above problems I decided to go with Next.js

TypeScript

TypeScript is a superset of JavaScript which provides optional typing and compiles down to JavaScript. While working with JavaScript I would occasionally struggle with type of a variable/object or any data type. That's where TypeScript comes to the rescue and let's us make our application type safe from the beginning itself.
Once you're introduced with TypeScript, you will never go back to writing JavaScript.

Framer Motion

Framer Motion is a production ready animation library for React. I felt the need to add some "cool" animations to my portfolio so that it looks more alive and interactive. One can argue between choosing React Spring or React Motion but that depends on the use-case and since I've already worked with Framer motion before so I went with this.

TailwindCSS

TailwindCSS is a utility first CSS framework which is highly customisable and can be optimised using PurgeCSS. It helps in building complex responsive layouts easily.

SendGrid

So I've a contact form in my portfolio website and I was going to host it on Vercel and not Netlify so I was in need of an emailing service to work flawlessly with my contact form which can be customised according to my needs as well. Then I did some research and came across SendGrid which can be easily integrated with Next.js (thanks to the ability of Next.js to add server code) and decided to use this.

Miscellaneous

There are some other packages such as remark-prism, react-toastify, react-icons and next-pwa which I used to add syntax highlighting, notifications, icons and make my application a progressive web app (PWA) respectively.

Conclusion and what's next?

It took me around 2 weeks on and off to complete my portfolio website.
Down the road, I'll add sitemap, optimise it further for mobile devices, add reactions to blog-posts, add a CDN to serve static-images and maybe use a CMS to store and fetch all my blogs/projects data.

DEV Community: Vivek Mittal

Generative Engine Optimization (GEO): The New Frontier Beyond SEO

🧠 What Is Generative Engine Optimization (GEO)?

🔍 How GEO Differs from Traditional SEO

🛠️ How Generative Engines Retrieve Information

🚀 7 Strategies to Optimize for Generative Engines

1. Write Clear, Direct Answers

2. Use Structured Data & Schema Markup

3. Earn Trust and Citations

4. Keep Content Fresh and Updated

5. Optimize for Brand Mentions

6. Publish Long-Form Authoritative Content

7. Use Embeddings and APIs to Feed Data

📈 How to Measure GEO Effectiveness

📌 Final Thoughts

🖼️ Bonus: GEO vs SEO Infographic

Understanding JavaScript's Object-String Comparison

Type Coercion in JavaScript

Understanding the Comparison

String Conversion and Equality

Overriding toString Method

Conclusion

Efficient DOM Manipulation with document.createDocumentFragment()

The Problem with Traditional DOM Manipulation

Benefits of document.createDocumentFragment()

How to Use document.createDocumentFragment()

Conclusion

Understanding the Difference Between compose() and pipe() in JavaScript

The Basics of Compose and Pipe

Compose

Pipe

Key Differences

Execution Order

Use Cases

Readability

Conclusion

An In-Depth Guide to HTTP Methods for frontend developers

Introduction

HTTP Methods: A Brief Overview

Common Use Cases

Conclusion

Understanding Object.seal(), Object.freeze(), and Object.preventExtensions() in JavaScript

Introduction

1. Object.seal()

2. Object.freeze()

3. Object.preventExtensions()

Conclusion

Unveiling Interaction to Next Paint (INP): A Vital Web Metric

Choosing the right JS framework for your next project is now easy!

1. What are the core features the framework offers?

2. How popular is the JS framework and is it actively developed?

3. Does the framework provide good documentation?

4. Can you find enough learning resources on the framework?

5. Does the framework integrate well with third-party tools?

7 different JavaScript console methods you never knew existed 🤯

JavaScript console methods to the rescue

#1 console.table()

#2 console.assert()

#3 console.dir()

#4 console.count()

#5 console.time()

#6 console.group()

#7 console.trace()

Further Reading

How I built my portfolio using Next.js, TailwindCSS, TypeScript and Framer Motion

Next.js

TypeScript

Framer Motion

TailwindCSS

SendGrid

Miscellaneous

Conclusion and what's next?

Benefits of `document.createDocumentFragment()`

How to Use `document.createDocumentFragment()`