AI resembles a junior developer collaborating with you. It's not about asking a single question and moving on; it's about engaging in a dialogue. You provide context, review its responses, correct any errors, and steer it toward your requirements. Clearly explaining your ideas enhances its performance.

Unlike traditional programming, where you must know the exact syntax and write everything yourself, AI shifts your role. You become the director rather than the coder. You set the vision, review the output, and ensure the project stays on track. While understanding programming basics is still necessary, you no longer need to memorize syntax or manage every small detail on your own.

Plan before you Code

Avoid attempting to build everything at once. Begin with your MVP, the simplest functional version. Avoid trying to build everything simultaneously; proceed step by step. Provide AI with examples such as mockups, screenshots, or code samples to clarify your vision. You can also use AI to assist in planning. Share your idea, let it help refine it, and break it into phases. A bit of planning upfront can save countless hours of revisions later.

For a task manager, this could mean just adding, viewing, and deleting tasks—nothing more. Then, divide the rest into phases: phase two might involve user accounts, and phase three could include notifications. This approach ensures you always have a working product, and AI performs better with smaller, focused tasks rather than tackling an entire app at once.

Work step by step rather than trying to build all at once

Develop one feature at a time. Request the AI to implement it, test it, ensure it functions correctly, and then proceed to the next feature. If you ask AI to handle too many tasks simultaneously, issues will arise, and identifying the cause will be challenging. Taking small steps simplifies debugging, as changes are isolated, making it easy to pinpoint problems.

Illustrate AI with Examples

Always provide AI with visual references, not just text. Include existing files, screenshots, or reference links. The more relevant material you supply, the less guessing is required, resulting in better output.

Implement Spec-Driven Development (SDD)

Spec-driven development involves creating a detailed document outlining what you intend to build before initiating any prompts. Rather than immediately asking AI to generate code, begin by describing the features, user flows, data structure, and key rules. Provide this document to the AI at the start of each session to ensure it has a comprehensive understanding.

Tech Stack and Coding

Use well-known tech stacks such as React, Next.js, Tailwind, and Supabase. AI is trained extensively on these tools, leading to improved results. For mobile, desktop, or hardware projects, the same principle applies: rely on established tools. Using niche or very new technologies increases the likelihood of errors and requires more time for corrections. Popular stacks also offer more tutorials and community support, which is beneficial when encountering challenges.

If you have style/coding preferences, document them for AI

Document your preferences—such as folder structure, naming conventions, and coding patterns—in a dedicated file (e.g., a CLAUDE.md). Share this with AI at the beginning of each session to avoid repetitive corrections and ensure consistent code throughout the project.

Ask AI to keep the code modular and aim for smaller modules/files

Right from the beginning, instruct AI to divide the code into small, focused files instead of consolidating everything in one place. Smaller files are easier to read, fix, and allow AI to work more effectively in future sessions without confusion.

Regularly ask the AI to review and refactor the codebase

Every few sessions, take a break from developing new features and ask the AI to tidy up the existing code. As time passes, code can become disorganized, so regular cleanups help maintain the project's integrity and ensure continued development without unexpected issues.

Use skills created by others

A growing ecosystem of skills—pre-built AI capabilities developed as an open standard—can be integrated into your AI tool to enhance its functionality. Before creating something new, see if an existing skill can meet your needs. This approach saves time and often yields better results than starting from scratch.

Security Best Practices

Before making anything public, ensure the AI reviews the code for security vulnerabilities such as unprotected routes, missing input validation, exposed data, and other potential exploits. Consider this a mandatory step, not optional.

API keys, passwords, and tokens should never appear directly in your code. Store them in a .env file using environment variables, and make sure that file is listed in .gitignore so it never gets pushed to GitHub accidentally.

Prompting Best Practices

Ask for one task at a time

Keep your prompts focused. Request the AI to perform a single task, review the outcome, and then proceed to the next. Combining multiple requests in one prompt can cause the AI to lose focus, leading to errors across all tasks.

Be specific about what you want

Describe exactly what you want — layout, behavior, content, constraints. The more detail you give, the less the AI has to guess. Vague prompts produce vague results, and you end up spending more time correcting than if you had been specific from the start.

Regularly update your context document

Whenever you make a significant decision about your project, include it in your context document, such as your CLAUDE.md. This practice shortens sessions, minimizes repeated explanations, and conserves tokens, ultimately saving money, particularly when using agents that quickly consume tokens.

Explicitly tell AI to "think" or "brainstorm"

For tricky problems, don't ask AI to jump straight to a solution. Tell it to think through the options first and explain its reasoning before writing any code. This simple instruction often leads to much better results on complex tasks.

Context

When working with AI, context is crucial. The AI only understands what you communicate; it lacks memory of your project, past decisions, or preferences unless you provide that information during the current session. Keep sessions focused, begin anew for unrelated tasks, and use subagents when possible to maintain clarity and reduce costs.

Leverage long context windows

Certain AI tools enable you to input a large amount of information simultaneously. For complex tasks, provide the AI with all pertinent files, notes, and context at once. The more the AI comprehends your project from the start, the better decisions it will make during the session.

If AI fails after 3 prompts, stop

If the AI continues to make errors after three attempts, it's advisable to stop and try a different approach. Begin a new session and rephrase your request entirely. Starting fresh is often more effective than attempting to correct a conversation that has derailed.

For unrelated tasks, clean and start new sessions

When transitioning to a different task, initiate a new chat. Continuing context from an unrelated session confuses the AI, diminishes response quality, and wastes tokens on irrelevant information.

Use subagents

Subagents are specialized agents designed to manage specific tasks within their own isolated context. Employing them ensures each task remains focused, minimizes token usage, and yields cleaner results compared to handling everything in a single extended conversation.

Debugging

AI excels at correcting errors when provided with accurate information. Directly paste the error message for diagnosis, and if it continues to fail after a few tries, request a list of all possible causes instead of guessing. Utilize logs to pinpoint where issues arise, and when possible, use MCP tools to grant AI real-time insight into your app's internal processes.

Install and ask AI to use MCP

MCP tools enable AI to interact directly with your app, such as using Playwright to test it in a real browser. This provides AI with actual visibility into the app's operations, enhancing the speed and accuracy of debugging by eliminating reliance on code-based assumptions.

In this blog, we’ll walk through how to set up an AWS WebSocket API using API Gateway and Lambda, including connection handling, messaging, and deployment.

Create a API Gateway Websocket based endpoint

Open the API Gateway on aws console and create a websocket api.

Then give your api a name and add the route selection expression (i’m going to leave it with the default request.body.action).

The way route selection works is when someone sends a message to your api gateway websocket endpoint, they pass an action along with the message. This action determines what lambda function we invoke in the backend (It’ll make more sense further into the blog).

Next, setup the predefined and custom routes. In addition to $connect and $disconnect routes I’m going to define a sendMessage route.

In an API Gateway WebSocket API, routes define what code runs when something happens on a WebSocket connection. Unlike REST APIs (which respond to HTTP methods like GET or POST), WebSocket APIs respond to connection events and messages.

Now we’re going to add integrations for all of our routes. As the blog title suggests the integration type will be Lambda. We’ll see what goes into the lambda functions in detail further into the blog.

Finally name your stage, create and deploy the websocket.

Let’s Explore the Websocket

Go to the API Gateway home page and open the Demo api we just created. Here you’ll see all the routes we configured. Make sure to deploy the api if you make any changes to the routes in the future.

To start messing with the websocket we’ll need the websocket endpoint. Go to stages > production (or whatever the name of your stage is).

Now, to test the websocket URL you can use any of the online websocket testing tools or postman. I’m using https://piehost.com/websocket-tester. Paste the websocket URL and connect.

Now let’s talk Lambdas

Now that we are connected to the websocket let’s define our lambdas and how we want them to respond to the sendMessage route and broadcast messages to all active connections. Just go ahead and create 4 basic lambdas. I’m using Node.js, you can use the Runtime of your choice.

We have 4 functions here, we’ve already mapped three(connect, disconnect and sendMessage) of them to the routes while creating the websocket. broadcast is how we’ll communicate with all active connections.

Always remember to return as statusCode 200 from your lambda function. This indicates to the API Gateway that the function executed successfully and the data should be passed back to the connected client as a message.

export const handler = async (event) => {
  console.log('event', event);
  // TODO implement
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

As we are already connected, So let’s go to the monitor tab and check the cloud watch logs for the connect function.

And open the latest log stream

What we are looking for here is the event and the requestContext. We are looking for the connectionId in particular:

The connectionId will be unique for each connection. When you are dealing with applications where there are multiple users connnected at a point, you might want to save these connectionId’s to a database to keep a track of all the connections that are active.

SendMessage Lambda

The following is the code for SendMessage Lambda. We’ll use the ApiGatewayManagementApiClient to respond to messages. Get the endpoint URL from API Gateway, and PostToConnectionCommand is used to post message back to the connected client. Remember to return a statusCode of 200 at the end of every lambda.

import {
  ApiGatewayManagementApiClient,
  PostToConnectionCommand
} from "@aws-sdk/client-apigatewaymanagementapi";

const client = new ApiGatewayManagementApiClient({
  endpoint: "https://xxxxxxxxxx.com/production"
});

export const handler = async (event) => {
  console.log(event);

  // Extract connectionId from incoming event
  const connectionId = event.requestContext.connectionId;

  // Do something interesting...
  const responseMessage = "responding...";

  // Post message back to the connected client
  const command = new PostToConnectionCommand({
    ConnectionId: connectionId,
    Data: Buffer.from(JSON.stringify(responseMessage))
  });

  await client.send(command);

  return {
    statusCode: 200
  };
};

In addition to this, any lambda function that uses ApiGatewayManagementApiClient to post back to an endpoint needs to have the AmazonAPIGatewayInvokeFullAccess permission policy, Add the AmazonAPIGatewayInvokeFullAccess permission policy to the SendMessage-role under lambda permissions. Don’t forget to redeploy your lambda after adding any new policies to the function’s role.

Now to send the message, remember the Route selection expression we used in the start while creating the API gateway endpoint? That is what we’ll use. The request goes something like this:

{"action": "sendMessage", "message": "hello"}

You’ll see the “responding…“, which means your message has been received.

Broadcast Lambda

This is what we’ll use to push messages to all the available clients that are currently connected. If you look at the code this does something very similar to the SendMessage lambda. We’ll pass the connectionId of the user in the event along with the message.

import {
  ApiGatewayManagementApiClient,
  PostToConnectionCommand
} from "@aws-sdk/client-apigatewaymanagementapi";

const client = new ApiGatewayManagementApiClient({
  endpoint: "https://xxxxxx.com/production"
});

export const handler = async (event) => {
  // Extract connectionId and message from input
  const { connectionId, message } = event;

  // Send message to the given connectionId
  const command = new PostToConnectionCommand({
    ConnectionId: connectionId,
    Data: Buffer.from(JSON.stringify(message))
  });

  const response = await client.send(command);
  console.log(response);
};

This is how the request looks like, (You can get the connectionId from request in the Cloudwatch logs, when the user connected or during sendMessage):

{
  "connectionId": "WfPxee4tvHcCJIw=",
  "message": "Is anyone online?"
}

Once you deploy the function, Create a new test event. Add the above request to Event JSON and Invoke. Don’t forget to apply the same permission policy to Broadcast function that we applied to SendMessage (AmazonAPIGatewayInvokeFullAccess).

The End

AWS API Gateway WebSockets combined with Lambda offer a powerful, fully serverless way to build real-time applications. Once you understand how $connect, $disconnect, $default, and custom routes work together, the overall model becomes surprisingly simple and flexible.

In this guide, we covered how to set up a WebSocket API, route messages correctly, and send responses back to connected clients using the API Gateway Management API. From here, you can extend this foundation with authentication, DynamoDB-backed connection management, broadcasting, or more advanced message routing.

If you’re building chat systems, live dashboards, multiplayer features, or real-time notifications, this architecture gives you a scalable solution without the operational overhead of managing servers.

Happy building!

Keep in mind that local overrides are stored on your computer and do not affect the website or its files on the server. Also, local overrides are only active when DevTools is open, and the changes apply only to the browser profile you are using.

Remember to remove or disable local overrides when you no longer need them, as they can interfere with the website's normal behavior if left active.

Setup Overrides

First, you'll have to create a folder to store your override files. To do this go to overrides under the sources tab and add a folder.

Once you've selected a folder to store your overrides you'll be prompted to give Chrome full access to the folder.

Now go to the network tab, choose the request you want to mock, right click, and "override content".

Then you'll have a local version of the same file you can open this with your favourite editor and start playing.

Override Response Headers

Using overrides you can mock response headers as well. This is helpful for testing CORS issues or any other header changes.

Select the network call you want to mock and click the edit icon next to the header you want to edit.

once you edit the header a override file for headers will be added and you can edit the existing headers or add new ones.

Conclusion

“Local overrides” are a useful tool for developers to debug functions that act differently in local environments compared to production or staging. By taking the time to learn and use this feature, developers can save a lot of time when fixing code problems.

The JavaScript ecosystem has grown rapidly, with new ECMAScript features being added every year through ES6, ES7, ES8, and beyond. Recent statistics show that about 83% of web browsers now support ES6+ features. However, developers still need to consider the 17% of users who use older environments. This situation requires strategies to use modern JavaScript while ensuring wide compatibility.

Polyfills

A polyfill is a piece of code that adds modern features to older browsers that don't support them natively. The term "polyfill" refers to code that "fills in" the gaps where certain features are missing. Unlike transpilers, which change the syntax, polyfills add missing functionality while the code is running.

Polyfills work by checking if a feature or API is missing in a browser and then providing a custom implementation using existing JavaScript capabilities. This lets developers use the latest JavaScript features and APIs without worrying about browser compatibility problems.

How Polyfills Work

The fundamental mechanism of polyfills involves feature detection followed by implementation. Here's the typical pattern:

javascript// Feature detection
if (!Array.prototype.includes) {
  // Polyfill implementation
  Array.prototype.includes = function(searchElement) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] === searchElement) {
        return true;
      }
    }
    return false;
  };
}

// Now safe to use
console.log([1, 2, 3].includes(2)); // true

This example demonstrates polyfilling the Array.prototype.includes() method, which determines whether an array includes a specific element but isn't supported in Internet Explorer 11.

Common Polyfill Examples

Array Methods

Modern JavaScript introduced several array methods that require polyfilling for older browsers:

javascript// Array.prototype.find polyfill
if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    for (var i = 0; i < this.length; i++) {
      if (predicate(this[i], i, this)) {
        return this[i];
      }
    }
    return undefined;
  };
}

// Array.prototype.filter polyfill
if (!Array.prototype.filter) {
  Array.prototype.filter = function(callback) {
    var filtered = [];
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i, this)) {
        filtered.push(this[i]);
      }
    }
    return filtered;
  };
}

Promise API

The Promise API, fundamental to modern asynchronous JavaScript, requires comprehensive polyfilling for older environments:

javascript// Promise.all polyfill
if (!Promise.all) {
  Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
      const result = [];
      let count = 0;

      if (promises.length === 0) {
        resolve(result);
        return;
      }

      for (let i = 0; i < promises.length; i++) {
        Promise.resolve(promises[i]).then((res) => {
          result[i] = res;
          count++;
          if (count === promises.length) {
            resolve(result);
          }
        }, reject);
      }
    });
  };
}

Fetch API

The Fetch API provides a modern alternative to XMLHttpRequest but requires polyfilling for older browsers:

javascript// Basic fetch polyfill concept
if (!window.fetch) {
  window.fetch = function(url, options) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(options?.method || 'GET', url);

      Object.keys(options?.headers || {}).forEach(key => {
        xhr.setRequestHeader(key, options.headers[key]);
      });

      xhr.onload = () => {
        resolve({
          ok: xhr.status >= 200 && xhr.status < 300,
          status: xhr.status,
          json: () => Promise.resolve(JSON.parse(xhr.responseText)),
          text: () => Promise.resolve(xhr.responseText)
        });
      };

      xhr.onerror = () => reject(new Error('Network error'));
      xhr.send(options?.body);
    });
  };
}

Popular Polyfill Libraries

core-js

Core-js is the most comprehensive polyfill library, offering modular support for ECMAScript features up to 2025. It lets you include only the polyfills you need:

javascript// Import specific polyfills
import 'core-js/actual/array/flat-map';
import 'core-js/actual/promise';
import 'core-js/actual/array/includes';

// Or import all stable features
import 'core-js/stable';

Transpilers

A transpiler (or transcompiler) is a special type of compiler that converts source code written in one programming language into equivalent source code in another language at a similar level of abstraction. In JavaScript contexts, transpilers convert modern JavaScript syntax (ES6+) into older versions (typically ES5) that older browsers can execute.

How Transpilers Work

Transpilers operate through three main phases:

1. Parse: The transpiler analyzes the source code and generates an Abstract Syntax Tree (AST)

2. Transform: The AST is traversed, and nodes are modified, added, or removed as needed

3. Generate: The modified AST is converted back into executable code

Here's how modern syntax gets transformed:

// ES6+ Input
const greet = (name) => `Hello, ${name}!`;
class User {
  constructor(name) {
    this.name = name;
  }
}

// ES5 Output
var greet = function(name) {
  return "Hello, " + name + "!";
};

function User(name) {
  this.name = name;
}

Popular Transpilers

Babel

Babel is the most prominent JavaScript transpiler, providing comprehensive ES6+ to ES5 transformation capabilities. Setting up Babel involves several steps:

bash# Install Babel core packages
npm install --save-dev @babel/core @babel/cli @babel/preset-env

Configuration through .babelrc:

json{
  "presets": ["@babel/preset-env"]
}

Advanced configuration with specific browser targets:

json{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 0.25%, not dead"]
      }
    }]
  ]
}

TypeScript Compiler (tsc)

TypeScript provides both type checking and transpilation capabilities:

bash# Install TypeScript
npm install --save-dev typescript

# Create tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "lib": ["ES2015", "DOM"]
  }
}

Modern Alternatives

Recent transpilers like SWC and esbuild offer significantly improved performance:

• SWC: Written in Rust, provides 20x faster compilation than Babel

• esbuild: Go-based bundler with extremely fast transpilation

• Sucrase: Focuses on speed for modern browser targets

Conclusion

Polyfills and transpilers are two helpful solutions for modern JavaScript development across various browser environments. Transpilers are excellent at converting syntax, enabling developers to write modern JavaScript that runs on older engines. Polyfills provide runtime functionality by adding missing APIs and methods that older browsers lack.