Forem: Neweraofcoding

Getting Started with Unit Testing in a Node.js Project with Jest

Neweraofcoding — Sun, 03 May 2026 12:55:51 +0000

When building backend applications with Node.js, most developers focus heavily on APIs, databases, and business logic—but often skip testing until bugs start showing up.

Unit testing helps you catch bugs early, improve code quality, and refactor with confidence.

In this blog, we’ll learn how to set up unit testing in a Node.js + TypeScript project using Jest.

What is Unit Testing?

Unit testing means testing small isolated pieces of code (functions, services, controllers) to verify they work as expected.

Example:

Instead of testing the full API flow:

Client → Route → Controller → Database

We test only:

Function → Input → Expected Output

This makes debugging faster and easier.

Why Use Jest?

Jest is one of the most popular testing frameworks because it provides:

✅ Zero-config setup
✅ Fast execution
✅ Mocking support
✅ Built-in assertions
✅ TypeScript support
✅ Code coverage reports

Step 1: Create a Node.js Project

Initialize a project:

npm init -y

Install TypeScript:

npm install typescript ts-node @types/node -D

Initialize TypeScript config:

npx tsc --init

Step 2: Install Jest

Install Jest and TypeScript support:

npm install jest ts-jest @types/jest -D

Initialize Jest config:

npx ts-jest config:init

This creates:

jest.config.js

Step 3: Configure TypeScript

Update tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true
  }
}

Important settings:

target → JavaScript version output
module → module system
esModuleInterop → better import compatibility

Step 4: Create Sample Code

Project structure:

src/
 ├── controllers/
 │   └── itemController.ts
 ├── models/
 │   └── item.ts
tests/
 └── itemController.test.ts

Create model:

// src/models/item.ts

export const items: string[] = [];

Create controller:

// src/controllers/itemController.ts

import { Request, Response } from 'express';
import { items } from '../models/item';

export const getItems = (
  req: Request,
  res: Response
) => {
  res.json(items);
};

Step 5: Write Your First Test

Create:

// tests/itemController.test.ts

import { Request, Response } from 'express';
import { getItems } from '../src/controllers/itemController';
import { items } from '../src/models/item';

describe('Item Controller', () => {
  it('should return empty array', () => {
    const req = {} as Request;

    const res = {
      json: jest.fn()
    } as unknown as Response;

    items.length = 0;

    getItems(req, res);

    expect(res.json).toHaveBeenCalledWith([]);
  });
});

Understanding the Test

describe()

Groups related tests.

describe('Item Controller', () => {})

it()

Defines a single test case.

it('should return empty array', () => {})

jest.fn()

Creates a mock function.

json: jest.fn()

Useful for checking:

was it called?
how many times?
what arguments?

expect()

Assertion API.

expect(res.json).toHaveBeenCalledWith([]);

Verifies output.

Step 6: Add Test Script

Update package.json

{
  "scripts": {
    "test": "jest"
  }
}

Run tests:

npm test

Output:

PASS tests/itemController.test.ts

Common Jest Matchers

Check equality

expect(value).toBe(10);

Check object equality

expect(obj).toEqual({});

Check if function was called

expect(mockFn).toHaveBeenCalled();

Check call count

expect(mockFn).toHaveBeenCalledTimes(1);

Mocking Dependencies

Suppose your controller calls a service:

import { getData } from './service';

Mock it:

jest.mock('./service');

Set return value:

(getData as jest.Mock).mockReturnValue([]);

This isolates your unit.

Running Coverage

Generate coverage report:

npm test -- --coverage

Output:

Statements   : 95%
Branches     : 90%
Functions    : 100%
Lines        : 96%

Aim for good coverage, not just high numbers.

Best Practices

Keep tests isolated

Each test should run independently.

Mock external dependencies

Avoid hitting real databases or APIs.

Use descriptive test names

Good:

should return empty items array

Bad:

test 1

Follow AAA Pattern

Arrange → Act → Assert

Example:

// Arrange
const req = {};

// Act
getItems(req, res);

// Assert
expect(res.json).toHaveBeenCalled();

Final Thoughts

Unit testing is not optional in production-grade applications.

With Jest, getting started is simple:

Install Jest
Configure TypeScript
Write tests
Mock dependencies
Run coverage

Start small.

Test one controller.

Then one service.

Then one utility.

Over time, your project becomes safer, cleaner, and easier to maintain.

Your future self will thank you.

Building for the Next Billion Users: Engineering for Emerging Markets

Neweraofcoding — Mon, 27 Apr 2026 07:14:04 +0000

The next wave of internet users will not come from highly connected urban centers.

They will come from emerging markets.

From small towns, rural areas, and mobile-first populations across India, Indonesia, Brazil, Nigeria, and beyond.

And building for them is very different.

Because the assumptions most products make—fast internet, expensive smartphones, stable payments, high digital literacy—often don’t hold.

If you want to build for the next billion users, you’re not just solving software problems.

You’re solving infrastructure problems, trust problems, accessibility problems, and affordability problems.

This is what engineering for emerging markets really looks like.

The Reality of Emerging Markets

When engineers build products in mature markets, they often assume:

Reliable 4G/5G
High-end devices
Unlimited storage
Digital payment adoption
English proficiency

But emerging markets look different.

Reality:

Low-end Android devices
Limited RAM
Unstable internet
Expensive mobile data
Multiple languages
Shared devices
Cash-first economies

This changes everything.

Challenge 1: Low Bandwidth and Unstable Networks

One of the biggest mistakes?

Designing for perfect internet.

In many places:

Network drops frequently.

Bandwidth is expensive.

Latency is high.

Users may switch between Wi-Fi, 3G, and weak 4G constantly.

Engineering implications:

Your app must work in unreliable conditions.

Best practices:

Offline-first architecture

Store critical data locally.

Tools:

SQLite
IndexedDB

Example:

Cache product catalogs locally so browsing works offline.

Smart synchronization

Sync only deltas.

Not full payloads.

Bad:

{
  "products": [10000 records]
}

Good:

{
  "changes": [5 updated records]
}

Smaller payloads = faster experience.

Aggressive compression

Use:

Gzip
Brotli
Image compression

Every KB matters.

Challenge 2: Low-End Devices

Not everyone has flagship phones.

Many users use:

2–4 GB RAM
Limited storage
Older processors

Heavy apps fail here.

Problems:

Slow startup
App crashes
Battery drain

Solutions:

Reduce app size

Apps like Facebook Lite and YouTube Go proved this model.

Strategies:

Lazy loading
Code splitting
Tree shaking

Especially in frameworks like Angular and React.

Optimize rendering

Avoid unnecessary re-renders.

Reduce heavy animations.

Prioritize responsiveness.

Performance is UX.

Challenge 3: Language Diversity

English is often not enough.

In countries like India:

Users interact in many languages.

Examples:

Hindi
Tamil
Bengali
Marathi

Localization isn’t optional.

It’s product infrastructure.

Best practices:

Internationalization (i18n)
Dynamic translations
Regional formatting

Tools:

ngx-translate
i18next

Challenge 4: Trust Deficit

In emerging markets, trust is harder to earn.

Users may ask:

Is this safe?

Will my money disappear?

Will my data be misused?

Trust-building strategies:

Transparent UI

Show:

Payment confirmation
Order tracking
Transaction history

Visibility builds trust.

OTP-based authentication

Phone numbers often matter more than email.

Popular in markets like India.

Services like Twilio help scale this.

Challenge 5: Payment Infrastructure

Credit card penetration may be low.

Cash remains important.

Digital payments vary by region.

Examples:

Google Pay
PhonePe
Paytm

Engineering challenge:

Support multiple payment methods.

Need:

Wallets
UPI
Cash on delivery
Bank transfer

Payment flexibility improves conversion.

Challenge 6: Shared Devices

In many households:

One device, multiple users.

Challenges:

Privacy
Session management
Personalization

Solutions:

Quick logout
PIN lock
Device-bound sessions

Design matters here.

Challenge 7: Digital Literacy

Not every user is tech-native.

Complex UX creates drop-offs.

Design principles:

Simplicity first

Reduce steps.

Use clear CTAs.

Avoid complex forms.

Visual guidance

Icons > text.

Progress indicators help.

Visual confidence matters.

Infrastructure Challenges

Backend systems must also adapt.

Edge delivery

Use CDNs like Cloudflare.

Reduce latency.

Regional deployments

Deploy closer to users.

Cloud providers:

Amazon Web Services
Google Cloud
Microsoft Azure

Reduce network hops.

Efficient APIs

Prefer smaller responses.

Use pagination.

Avoid over-fetching.

Metrics That Matter

Traditional metrics:

Pageviews
Retention

Emerging market metrics:

App size
Crash rate on low-end devices
Data usage per session
Offline success rate
Time to first interaction

Different market.

Different metrics.

Lessons Learned

Build for constraints, not ideal conditions

Constraint-aware engineering wins.

Performance is accessibility

A fast app is a more inclusive app.

Trust is a product feature

Especially in payments and commerce.

Localization is growth

Language expands reach.

Final Thoughts

The next billion users will redefine the internet.

But they will not use products the same way current users do.

They will challenge assumptions.

They will expose engineering shortcuts.

And they will reward products built with empathy for constraints.

Building for emerging markets isn’t about making a cheaper version of your app.

It’s about building the right version.

Because the future of the internet is not just bigger.

It’s broader.

And the teams that understand this will build the next generation of global products.

Getting Started with ChatGPT Codex: Your First Step into AI-Powered Coding

Neweraofcoding — Sat, 25 Apr 2026 05:21:30 +0000

AI is changing how developers build software, and one of the most exciting tools in that shift is ChatGPT + Codex.

If you’ve used ChatGPT for coding help, debugging, or brainstorming, Codex takes it further — from suggesting code to actually working on your codebase.

In this guide, we’ll explore what ChatGPT Codex is, how to set it up, and how to use it effectively in real-world development.

What is ChatGPT Codex?

Codex is OpenAI’s AI coding agent designed for software engineering workflows.

Unlike normal chat-based coding assistance, Codex can:

✔ Understand your codebase
✔ Edit files
✔ Run terminal commands
✔ Execute tests
✔ Fix bugs
✔ Create features
✔ Answer codebase-related questions

OpenAI introduced Codex as an agentic coding tool integrated into ChatGPT and standalone environments, allowing developers to assign tasks directly to an AI agent. ([OpenAI][1]) ([OpenAI][2])

Think of it like:

ChatGPT = AI pair programmer
Codex = AI software engineer

Why Use Codex?

Traditional AI coding tools mostly work like autocomplete.

Codex works differently.

Instead of:

"Write me a login page"

You can say:

"Add authentication to my React app using JWT and protect routes."

And Codex can:

inspect your project structure
create files
update existing code
run tests
verify implementation

That’s a major productivity shift.

How to Access ChatGPT Codex

There are currently multiple ways to use Codex:

1. Inside ChatGPT

Open ChatGPT and look for the Codex option in the sidebar.

This lets you assign tasks directly.

Examples:

Build a feature
Refactor code
Debug issues

OpenAI provides Codex directly through ChatGPT for coding workflows. ([OpenAI][1])

2. Codex Desktop App

Install the Codex app:

Sign in with ChatGPT
Connect your project folder
Start assigning tasks

OpenAI’s official onboarding flow includes selecting a folder/repository where Codex works locally. ([OpenAI][2])

3. Codex CLI

Terminal-first developers can install:

npm install -g @openai/codex

Then:

codex

Perfect for developers who love terminal workflows.

Setting Up Your First Project

Let’s build a small example.

Suppose you have a React app:

npx create-react-app my-app
cd my-app

Open Codex and connect this folder.

Now give it tasks.

Example:

Create a reusable Navbar component with responsive mobile menu

Codex will:

generate component
create styles
connect routes

Your First Prompts

Good prompts make a huge difference.

Feature Building

Bad:

Build auth

Good:

Add JWT authentication with login, register, protected routes, and logout functionality

Debugging

Bad:

Fix bug

Good:

Fix why form validation is failing when email input is empty

Refactoring

Good:

Refactor this component into reusable hooks and optimize performance

Real Use Cases

1. Build Features Faster

Example:

Add dark mode support

Codex handles:

state management
styling
persistence

2. Bug Fixing

Example:

Find why API calls are failing after token refresh

Codex investigates dependencies and code flow.

3. Writing Tests

Example:

Write unit tests for the auth service

It can generate:

Jest tests
integration tests
edge case coverage

4. Documentation

Example:

Generate README with setup instructions and architecture overview

Useful for open-source projects.

Best Practices for Using Codex

Be Specific

Context matters.

Instead of:

Improve code

Use:

Optimize API calls and reduce duplicate requests

Work in Small Tasks

Avoid:

Build complete ecommerce app

Break it down:

product listing
cart
checkout

Review Everything

Codex is powerful, but always review:

business logic
security
performance

AI writes fast. You approve quality.

Use Version Control

Always commit before major Codex tasks.

Recommended workflow:

git commit -m "before codex changes"

This makes rollback easy.

Codex vs GitHub Copilot

Feature	Codex	GitHub Copilot
Full task execution	Yes	Limited
File editing	Yes	Partial
Terminal commands	Yes	No
Test execution	Yes	No
Codebase understanding	Strong	Medium

Copilot helps write.

Codex helps ship.

Common Mistakes Beginners Make

1. Vague prompts

Be precise.

2. Blindly accepting changes

Always review.

3. Giving too much at once

Break tasks down.

4. Ignoring test results

Run everything.

The Future of AI Development

We’re moving from:

Autocomplete → AI Assistant → AI Agent

Codex represents that transition.

Developers who learn agentic workflows early will have a strong advantage.

Not because AI replaces developers.

But because developers using AI will outperform those who don’t.

Final Thoughts

ChatGPT Codex is more than a coding assistant.

It’s an engineering workflow accelerator.

Start small:

fix bugs
build components
write tests
refactor modules

Then scale up.

The best way to learn Codex?

Use it daily.

Your future workflow may look like this:

You define → Codex builds → You review → Product ships.

And honestly?

That’s a powerful future.

Have you tried ChatGPT Codex yet? What was your first use case?

Scaling to Billions: The Backend Behind Large Systems

Neweraofcoding — Tue, 14 Apr 2026 03:09:03 +0000

Going from zero to your first thousand users is an exhilarating milestone. But what happens when that thousand turns into a million, and eventually, a billion? The systems that worked flawlessly for a small user base will inevitably buckle, bottleneck, and break under the immense pressure of global, concurrent traffic.

In the world of high-scale engineering, building for billions requires a fundamental shift in how we think about architecture, data, and performance. It demands abandoning a single monolithic structure in favor of resilient, distributed ecosystems.

Here is a deep dive into the core strategies tech giants use to scale their backends to handle astronomical traffic, focusing on the three pillars of scale: distributed systems, database sharding, and caching.

1. Embracing Distributed Systems: From Monoliths to Fleets

When a traditional web application starts to slow down, the instinct is often to practice vertical scaling (scaling up)—buying a more expensive server with more CPU and RAM. However, vertical scaling has a hard physical limit and becomes cost-prohibitive.

To reach a billion users, you must rely on horizontal scaling (scaling out)—distributing the load across hundreds or thousands of smaller, commodity servers. This is the foundation of a distributed system.

Key Concepts in Distributed Architecture:

Stateless Services: For horizontal scaling to work seamlessly, backend API servers must be stateless. This means no single server holds unique session data. Any server in the fleet should be able to handle any incoming request. Session state is offloaded to a shared, high-speed datastore (like Redis).
Load Balancing: A fleet of servers requires a traffic cop. Load balancers distribute incoming network traffic across multiple backend servers to ensure no single machine is overwhelmed, significantly improving responsiveness and availability.
Microservices (with caution): Large teams often break a monolith down into microservices—independent services handling specific domains (e.g., Billing, User Auth, Notifications). While this allows isolated scaling and faster deployments, it introduces network latency and complex failure modes.

2. Database Sharding: Dividing and Conquering Data

Compute is relatively easy to scale horizontally. State—the database—is where the real engineering challenges begin. A single primary database can only handle so many concurrent reads and writes before it becomes the ultimate bottleneck.

When read replicas (copies of the database that handle read-only queries) are no longer enough to handle the write load, the solution is sharding.

How Sharding Works

Sharding is the process of horizontally partitioning your database. Instead of holding all 1 billion user records in one massive database, you split them across 100 separate databases (shards), each holding 10 million users.

The Shard Key: This is the most critical decision in a distributed database. The shard key determines how data is distributed. For example, if you shard by user_id, user 123 might live on Shard A, while user 456 lives on Shard B.
The Danger of Hotspots: If you choose a poor shard key—like country—and 80% of your users are in one country, that specific shard will be overwhelmed while the others sit idle. This is known as a database hotspot. A good shard key ensures an even distribution of data and traffic.

The Trade-off: Sharding solves write bottlenecks, but it makes cross-shard operations painfully difficult. Performing a standard SQL JOIN across two different physical databases is slow and complex, often forcing engineers to handle data aggregation at the application level.

3. Caching Strategies: The Fastest Query is the One You Don't Make

Even with a perfectly sharded database, hitting the disk for every user request is too slow for global scale. Caching is the secret weapon of high-performance systems. By storing frequently accessed data in high-speed, volatile memory (RAM), you bypass the database entirely.

Layers of Caching

Content Delivery Networks (CDNs): The first line of defense. CDNs cache static assets (images, videos, JavaScript) at edge servers physically located near the user. If a user in Tokyo requests a video, it is served from a server in Tokyo, not a data center in Virginia.
In-Memory Datastores (Redis/Memcached): Used for caching dynamic data, session states, and API responses.

Common Caching Patterns

Cache-Aside (Lazy Loading): The application first checks the cache. If the data is there (a cache hit), it returns it immediately. If not (a cache miss), it queries the database, saves the result to the cache for next time, and then returns it.
Write-Through: Every time data is written to the database, it is simultaneously written to the cache. This ensures the cache is never stale, though it adds slight latency to write operations.

The hardest part of caching isn't setting it up—it is cache invalidation. Knowing exactly when to delete or update cached data so users don't see outdated information is notoriously one of the most difficult problems in computer science.

The Reality of Scale

Building for a billion users is not about finding a single silver-bullet technology. It is about identifying bottlenecks, introducing decoupling, gracefully degrading services during failures, and accepting trade-offs—like choosing eventual consistency over immediate consistency to gain massive availability.

Scale is a journey of continuous architectural evolution. The system you build for one million users will not be the system that serves one billion.

To make these architectural concepts concrete, let's look at how they are actually implemented in the codebase. Moving from theory to practice requires specific design patterns.

Here are the practical code snippets and relevant implementations that power the systems discussed in the previous sections.

1. Implementing the Cache-Aside Pattern

As mentioned in the caching section, the cache-aside (or lazy loading) pattern is the industry standard for reducing database load. The application is responsible for reading from and writing to the cache.

Here is how this looks in Python using Redis:

import redis
import json

# Connect to Redis cluster
cache = redis.Redis(host='redis.internal.network', port=6379, db=0)

def get_user_profile(user_id):
    cache_key = f"user_profile:{user_id}"

    # 1. Check the cache first (Cache Hit)
    cached_data = cache.get(cache_key)
    if cached_data:
        print("Served from Redis Cache!")
        return json.loads(cached_data)

    # 2. If not in cache (Cache Miss), query the primary database
    print("Cache miss. Hitting the database...")
    user_data = db.execute("SELECT * FROM users WHERE id = %s", (user_id,))

    # 3. Populate the cache for the next request
    if user_data:
        # Crucial: Always set a TTL (Time To Live) so stale data eventually expires
        cache.setex(cache_key, 3600, json.dumps(user_data)) # Caches for 1 hour

    return user_data

Why this is relevant: Notice the setex function. Setting a TTL (Time To Live) is mandatory at scale. Without it, your Redis cluster will eventually run out of memory, and updates to the user's profile in the database will never be reflected in the cache.

2. Application-Level Shard Routing

When you shard a database, your application needs to know which database to connect to before it can execute a query. This is called routing logic.

Here is a simplified example in Node.js using a Modulo Sharding strategy, where the shard is determined by dividing the user ID by the total number of shards and using the remainder:

// A registry of our physical database shards
const DB_SHARDS = [
    'postgres://shard-00.db.internal/users',
    'postgres://shard-01.db.internal/users',
    'postgres://shard-02.db.internal/users',
    'postgres://shard-03.db.internal/users'
];

/**
 * Determines which physical database holds the user's data
 */
function getDbConnectionForUser(userId) {
    // Modulo arithmetic to find the correct shard index
    const shardIndex = userId % DB_SHARDS.length;
    const connectionString = DB_SHARDS[shardIndex];

    console.log(`Routing User ${userId} to Shard ${shardIndex}`);
    return new DatabasePool(connectionString);
}

// Execution
async function fetchUser(userId) {
    // 1. Get the correct shard connection
    const db = getDbConnectionForUser(userId);

    // 2. Query that specific shard
    const user = await db.query('SELECT * FROM users WHERE id = $1', [userId]);
    return user;
}

// User 10452 % 4 = Shard 0
// User 10453 % 4 = Shard 1

The danger of this approach: While modulo sharding is fast and easy to write, it has a fatal flaw known as the Resharding Problem. If you need to add a 5th shard to handle more traffic, userId % 5 will yield completely different results than userId % 4. This means almost all your data will suddenly be on the "wrong" shard and must be physically migrated. Modern systems often use Consistent Hashing or directory-based routing (a lookup table) to mitigate this.

3. Protecting the Backend: Rate Limiting

Scaling isn't just about handling legitimate traffic; it is about surviving malicious traffic, scrapers, and accidental DDoS attacks from your own frontend retrying failed requests.

At a massive scale, APIs must protect themselves using Rate Limiting. Redis is frequently used for this due to its atomic operations.

Here is an example of a Token Bucket rate limiter in Python:

import time
import redis

redis_client = redis.Redis(host='localhost', port=6379, db=0)

def is_rate_limited(user_id, limit=100, window_in_seconds=60):
    """
    Allows a user to make 'limit' requests per 'window_in_seconds'.
    """
    current_time = int(time.time())
    window_key = f"rate_limit:{user_id}:{current_time // window_in_seconds}"

    # INCR is an atomic operation in Redis. It increments the value and returns it safely 
    # even if thousands of requests hit this exact line simultaneously.
    request_count = redis_client.incr(window_key)

    if request_count == 1:
        # If it's the first request in this window, set the key to expire 
        # to clean up memory
        redis_client.expire(window_key, window_in_seconds)

    if request_count > limit:
        return True # User is rate limited

    return False # Request allowed

# API Middleware logic
if is_rate_limited(user_id=8847):
    return "HTTP 429: Too Many Requests", 429
else:
    return process_api_request()

Additional Relevancy: The Shift to Asynchronous Processing

When systems scale, you can no longer process everything synchronously during the HTTP request cycle. If a user uploads a video, you do not keep their browser loading for 10 minutes while you compress the file.

Large systems rely heavily on Message Queues (like RabbitMQ, Apache Kafka, or AWS SQS).

Producer: The API receives the request, saves the raw data, and pushes an event like {"task": "compress_video", "video_id": 123} to the queue. It immediately returns an HTTP 202 Accepted to the user.
Message Broker: Kafka holds the message safely.
Consumer (Worker): A separate fleet of backend servers constantly polls the queue. They pull the message, do the heavy CPU work in the background, and update the database when finished.

Redefining the Next Decade of Cybersecurity: AI-Powered Security Built to Empower Developers

Neweraofcoding — Sat, 11 Apr 2026 03:15:27 +0000

Cybersecurity is no longer a reactive discipline—it’s becoming predictive, intelligent, and deeply integrated into the way software is built. As artificial intelligence reshapes industries, it is also ushering in one of the most transformative eras in application security.

At the forefront of this shift is GitHub and its vision through GitHub Advanced Security: to empower developers to take ownership of security from the very first line of code.

This isn’t just evolution—it’s a redefinition of how we think about security altogether.

The Shift: From Reactive Security to AI-Driven Prevention

Traditionally, security has been treated as a checkpoint at the end of the development lifecycle:

Code is written
Features are shipped
Security teams step in

This model is slow, expensive, and often too late.

AI changes this paradigm.

With AI-powered security tools:

Vulnerabilities are detected in real time
Code suggestions include secure patterns
Risks are identified before they reach production

Security is no longer a gate—it becomes a continuous, intelligent layer embedded in development.

What “Shifting Left” Really Means in the AI Era

“Shift left” has been a buzzword for years. But with AI, it finally becomes actionable.

Instead of relying on periodic scans or manual reviews:

Developers receive instant feedback while coding
Security checks are automated and context-aware
Fixes are suggested, not just problems identified

This fundamentally changes developer behavior. Security is no longer an afterthought—it becomes a natural part of coding.

GitHub Advanced Security: A Mission for Developer-Centric Security

GitHub Advanced Security is built on a simple but powerful idea:

Developers should be the first line of defense, not the last.

Over the past year, GitHub has made significant strides in:

Code scanning powered by intelligent analysis
Secret detection to prevent credential leaks
Dependency vulnerability alerts for open-source risks

What makes these capabilities transformative is their integration into the developer workflow:

Inside pull requests
Within IDEs
Embedded in CI/CD pipelines

Security meets developers where they already work.

AI as a Security Co-Pilot

AI doesn’t just detect vulnerabilities—it guides developers toward better decisions.

Imagine:

Writing code and receiving a suggestion that avoids a known vulnerability pattern
Getting an explanation of why a piece of code is insecure
Automatically generating secure alternatives

This turns AI into more than a tool—it becomes a security co-pilot.

The impact?

Faster remediation
Better learning for developers
Stronger, more secure codebases

The Developer as a Security Leader

One of the most important shifts in this new era is cultural.

Security is no longer owned solely by security teams.

Developers are now:

Decision-makers in security architecture
Owners of code-level risk
Contributors to global security strategy

AI enables this transition by lowering the barrier to understanding and implementing security best practices.

It democratizes security knowledge.

Reflecting on the Past Year: Progress and Impact

The past year has shown how impactful integrated security can be:

Faster detection of vulnerabilities in open-source ecosystems
Increased awareness of security among developers
Reduced time to fix critical issues

GitHub’s approach has proven that when security is:

Embedded
Automated
Developer-friendly

…it actually gets adopted.

And adoption is everything.

What’s Next: The Future of AI in Security

As AI continues to evolve, we can expect:

1. Predictive Vulnerability Detection

AI models will anticipate vulnerabilities before they are even introduced.

2. Autonomous Security Fixes

Systems will not only detect issues but also generate and apply fixes automatically.

3. Context-Aware Risk Analysis

Security tools will understand business logic, not just code patterns.

4. Continuous Learning Systems

AI will adapt based on:

Past vulnerabilities
Developer behavior
Emerging threats

The New Security Equation

The future of cybersecurity can be summarized as:

Security = Developer Experience + AI Intelligence

If security tools slow developers down, they will be ignored.
If they empower developers, they become indispensable.

AI bridges this gap.

Challenges Ahead

This transformation is not without challenges:

Over-reliance on AI-generated fixes
False positives and trust issues
Evolving threat landscapes targeting AI systems themselves

Organizations must balance:

Automation with human oversight
Speed with accuracy
Innovation with responsibility

Final Thoughts

We are entering a decade where security is no longer a bottleneck—it’s a built-in feature of development.

AI-powered security is:

Proactive, not reactive
Embedded, not external
Developer-driven, not siloed

By empowering developers and integrating intelligence into every stage of the lifecycle, platforms like GitHub are helping redefine what it means to build secure software.

The Call to Action

As developers, architects, and leaders, the question is no longer:

“When should we think about security?”

But rather:

“How can we make security an invisible, intelligent part of everything we build?”

The answer lies in AI—and the future is already being written, one secure line of code at a time.

Difficult-to-Debug Rendering Bugs in Frontend — How to Actually Fix Them

Neweraofcoding — Wed, 25 Mar 2026 15:13:24 +0000

Rendering bugs are the worst.

They’re inconsistent.
They disappear when you open DevTools.
They only happen “sometimes”… usually in production.

If you’ve ever said:

“It works on my machine”

This guide is for you.

🚨 What Are Rendering Bugs?

Rendering bugs happen when:

The UI does not reflect the actual state of your application

Examples:

UI not updating after data change
Flickering components
Stale values in templates
Race conditions in async flows
Components rendering twice (or not at all)

🔍 Why They’re So Hard to Debug

Rendering bugs sit at the intersection of:

State management
Async operations
Framework rendering lifecycle
Browser rendering pipeline

👉 Which means:
The bug is rarely where it appears

⚠️ Common Root Causes

1️⃣ Stale State / Mutations

this.user.name = 'John'; // mutation

❌ Problem:

Framework may not detect change

✅ Fix:

this.user = { ...this.user, name: 'John' };

2️⃣ Async Race Conditions

loadUser();
loadPermissions();

👉 If order matters → UI breaks unpredictably

✅ Fix:

Use chaining or combineLatest / forkJoin

3️⃣ Missed Change Detection (Zoneless / OnPush)

UI not updating after async operation

👉 Especially common in:

Angular with OnPush
Zoneless apps

4️⃣ Over-rendering / Double Rendering

Effects firing multiple times
Duplicate API calls

5️⃣ Incorrect Keys (React/Vue) or Tracking Issues

DOM reused incorrectly
UI mismatch

🛠️ The Best Debugging Strategy (Real-World)

🧩 Step 1: Reproduce Reliably

👉 If you can’t reproduce it → you can’t fix it

Add artificial delays
Throttle network (Slow 3G)
Repeat user flows

🔬 Step 2: Log the Timeline (Not Just Values)

Bad:

console.log(data);

Better:

console.log('User loaded at', Date.now());

👉 You’re debugging order of events, not just data

📊 Step 3: Visualize State Changes

Add temporary UI:

<pre>{{ state | json }}</pre>

👉 Helps catch:

stale values
unexpected overwrites

🔁 Step 4: Trace Rendering Triggers

Ask:

“What caused this render?”

In Angular:

Signal update?
Input change?
Manual trigger?

🧠 Step 5: Isolate the Component

Remove dependencies
Mock inputs
Rebuild minimal version

👉 If bug disappears → integration issue
👉 If not → component logic issue

⚡ Angular-Specific Fixes

✅ Use Signals for Predictable Rendering

count = signal(0);

this.count.set(1);

👉 Eliminates hidden triggers

✅ Avoid Manual Subscriptions

Use:

async pipe
takeUntilDestroyed()

✅ Use `trackBy` in Lists

<li *ngFor="let item of items; trackBy: trackById">

👉 Prevents DOM reuse bugs

✅ Debug Zoneless Issues

If UI not updating:

Check if state change is signal-based
Or manually trigger update

🔥 Advanced Debugging Techniques

1️⃣ Break on DOM Changes

Chrome DevTools:

Right-click element → Break on → subtree modifications

👉 See what code changes DOM

2️⃣ Use Performance Profiler

Record render timeline
Identify unnecessary re-renders

3️⃣ Add “Render Logs”

constructor() {
  console.log('Component rendered');
}

👉 Helps detect:

unexpected re-renders
missing renders

4️⃣ Use Strict Mode / Dev Mode

Frameworks often expose hidden issues in dev mode.

🧩 Real-World Bug Example

Problem:

Dashboard shows stale data after fast navigation

Root Cause:

API calls racing
Old response overwriting new state

Fix:

switchMap(() => this.api.getData())

👉 Cancels previous requests

🧠 Mental Model

Rendering bugs are timing + state problems, not UI problems

⚡ Golden Rules

Never mutate state blindly
Always control async flows
Make rendering predictable
Prefer reactive patterns

🏁 Final Thoughts

Rendering bugs don’t require more tools—they require better mental models.

Once you start thinking in:

state flows
render triggers
timing

…these bugs become much easier to kill.

🔥 TL;DR

Rendering bugs = UI ≠ state
Root causes = async + mutation + missed triggers
Best fix = control state + control timing
Debug = trace events, not just values

If you're building complex frontend apps, mastering this skill separates average devs from great ones.

Stay sharp ⚡

Getting Started with Replit: Build, Run, and Deploy Code in Minutes

Neweraofcoding — Sat, 21 Mar 2026 08:47:10 +0000

If you’ve ever wanted to start coding instantly—without setting up environments, installing dependencies, or configuring tools—Replit is one of the fastest ways to do it.

Whether you're a beginner learning to code or an experienced developer protyping ideas, Replit lets you go from idea → running app in minutes.

🚀 What is Replit?

Replit is a cloud-based development environment (IDE) that allows you to:

Write code directly in your browser
Run applications instantly
Collaborate in real-time
Deploy apps with minimal setup

Think of it as:

VS Code + Hosting + Collaboration — all in one place

⚡ Why Developers Love Replit

No setup required – start coding instantly
Supports multiple languages – Python, JavaScript, Go, Java, and more
Built-in hosting – deploy apps without DevOps headaches
AI-powered coding – Ghostwriter helps you write and debug code
Great for prototyping – perfect for hackathons and experiments

🛠️ Creating Your First Repl

Step 1: Sign Up

Go to Replit and create an account using Google, GitHub, or email.

Step 2: Create a New Project (Repl)

Click “Create Repl”
Choose a language (e.g., Node.js, Python)
Give your project a name

👉 Example: Create a Node.js Repl

Step 3: Explore the Interface

Here’s what you’ll see:

Editor – where you write code
Console – where your program runs
File tree – manage project files
Packages tab – install dependencies

✍️ Your First Program

Example: Hello World (Node.js)

console.log("Hello, Replit!");

Click Run, and you’ll instantly see the output in the console.

🌐 Building a Simple Web App

Let’s create a basic Express server.

Step 1: Install Dependencies

Use the Packages tab or run:

npm install express

Step 2: Write Code

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from Replit!');
});

app.listen(3000, () => {
  console.log('Server is running');
});

Step 3: Run the App

Click Run → Replit will automatically:

Start the server
Give you a public URL

🎉 Your app is live!

🤖 Using AI in Replit

Replit includes an AI assistant (Ghostwriter) that helps you:

Generate code snippets
Debug errors
Explain code
Refactor functions

This makes it especially powerful for:

Beginners learning concepts
Developers building fast prototypes

🤝 Collaboration Made Easy

Replit allows real-time multiplayer coding:

Share your Repl link
Invite teammates
Code together like Google Docs

Perfect for:

Pair programming
Teaching
Hackathons

🚀 Deploying Your App

Replit makes deployment extremely simple:

Click Deploy
Choose deployment type (autoscale, static, etc.)
Your app gets a live URL

No need for:

Docker
Cloud setup
CI/CD pipelines

💡 Real-World Use Cases

Replit is great for:

Rapid prototyping
Learning programming
Building side projects
Creating APIs
AI experiments
Teaching & workshops

⚠️ Limitations to Keep in Mind

Not ideal for large-scale production systems
Limited control compared to custom cloud setups
Performance constraints for heavy workloads

🧭 When Should You Use Replit?

Use Replit when you want to:

Validate an idea quickly
Build MVPs fast
Teach or learn coding
Avoid local setup

Avoid it when:

You need deep infrastructure control
You're building high-performance systems

🎯 Final Thoughts

Replit removes one of the biggest barriers in development: setup friction.

Instead of spending hours configuring environments, you can focus on what actually matters—building and shipping ideas.

If you're exploring AI, rapid prototyping, or developer tools, Replit can become your go-to playground.

🔥 What to Try Next

Build a REST API
Create a real-time chat app
Integrate an AI model
Connect a database (MongoDB/Postgres)
Share your app publicly

Getting Started with Gemini Code Assist: AI Pair Programming by Google

Neweraofcoding — Tue, 17 Mar 2026 15:17:51 +0000

AI is rapidly transforming how we write code — and Gemini Code Assist is Google’s answer to intelligent, context-aware development.

Whether you're building Angular apps, backend APIs, or full-stack systems, Gemini Code Assist acts like a real-time coding partner inside your IDE.

In this guide, you’ll learn:

What Gemini Code Assist is
How to set it up
Key features and workflows
Real-world usage tips

🧠 What is Gemini Code Assist?

Gemini Code Assist is an AI-powered coding assistant developed by Google, built on the Gemini model family.

It helps you:

Generate code from natural language
Autocomplete entire functions
Refactor and optimize code
Explain complex logic
Debug issues faster

👉 Think of it as:

GitHub Copilot (Microsoft)
but powered by Google’s Gemini AI ecosystem

⚙️ Where Can You Use It?

Gemini Code Assist integrates with:

VS Code
JetBrains IDEs (IntelliJ, WebStorm, etc.)
Google Cloud environments

🛠️ Prerequisites

Before you start:

A Google account
Access to Google Cloud (for enterprise features)
VS Code or JetBrains IDE

🚀 Installation (VS Code)

1. Install Extension

Open VS Code
Go to Extensions
Search for “Gemini Code Assist”
Install the official Google extension

2. Sign In

Log in with your Google account
Authorize permissions

3. Enable in Workspace

Open your project
Ensure extension is active

✨ Core Features

🧩 1. Smart Code Completion

Start typing:

function calculateTax(income: number) {

👉 Gemini suggests full implementation:

Handles edge cases
Adds logic intelligently

💬 2. Natural Language to Code

Write a comment:

// create a function to debounce API calls

👉 Gemini generates full function instantly

🔍 3. Code Explanation

Select code → Ask:

“Explain this function”

👉 Great for:

onboarding
debugging legacy code

🔄 4. Refactoring & Optimization

Example:

Convert callbacks → async/await
Optimize loops
Improve readability

🐞 5. Debugging Assistance

You can ask:

“Why is this throwing undefined error?”

👉 It analyzes and suggests fixes

🧪 Example Workflow (Angular Developer)

Since you work with Angular, here’s a real scenario:

Input

// create a service to fetch users with retry logic

Output (Gemini)

Generates Angular service
Adds RxJS retry()
Handles HTTP errors

👉 Saves 10–15 minutes per task easily

⚡ Best Practices

✅ Be Specific

❌ "create function"
✅ "create Angular service with RxJS retry and error handling"

✅ Use Context

Keep related files open
Gemini uses context to improve suggestions

✅ Review Before Accepting

AI is powerful, not perfect
Always validate logic

✅ Combine with Your Architecture

Follow your existing patterns
Don’t blindly accept generated code

🧱 Real Use Cases

🚀 Rapid prototyping
🧩 Boilerplate generation
🔧 Debugging production issues
📚 Learning new frameworks
🔄 Migrating legacy code

⚖️ Gemini vs Other Tools

Feature	Gemini Code Assist	GitHub Copilot
AI Model	Gemini	OpenAI Codex / GPT
Cloud Integration	Deep (GCP)	Limited
Context Awareness	Strong	Strong
Enterprise Focus	High	High

🚨 Common Pitfalls

Over-reliance on AI
Accepting incorrect logic
Ignoring performance issues
Not understanding generated code

🔮 What’s Next?

Once you’re comfortable:

Integrate with Google Cloud workflows
Use for full-stack scaffolding
Combine with Gemini APIs for AI apps
Automate repetitive engineering tasks

🏁 Conclusion

Gemini Code Assist is more than autocomplete — it’s a developer productivity multiplier. When used correctly, it can significantly speed up development while improving code quality.

For modern developers (especially Angular/full-stack), this is a tool worth mastering.

💡 Next step: Try building a small feature using only prompts — you’ll quickly understand its real power.

AI: Superhero or Supervillain? Understanding Generative AI as Developers

Neweraofcoding — Sun, 15 Mar 2026 06:31:55 +0000

Generative AI has taken the tech world by storm.

Every few weeks it feels like a new large language model (LLM) is announced — more powerful, faster, and smarter than the last. Developers, companies, and creators are rushing to integrate AI into everything from chatbots to code editors.

But this raises an important question:

Is AI a superhero helping us build better software — or a supervillain replacing developers and spreading misinformation?

The reality is more nuanced. Generative AI is a powerful tool, but like all tools, its impact depends on how we understand and use it.

In this article, we’ll explore:

What generative AI actually is
How large language models work
What AI can and cannot do
How developers can use AI responsibly and effectively

The Rise of Generative AI

Over the last few years, models like ChatGPT, Claude, and Gemini have transformed how people interact with technology.

Instead of writing precise commands, users can simply ask questions in natural language.

For example:

“Explain TypeScript generics”
“Generate an API server”
“Summarize this research paper”

Within seconds, the AI produces useful output.

This shift from command-based computing to conversation-based computing is one of the biggest changes in software interfaces since the web.

What Is a Large Language Model?

A large language model (LLM) is a machine learning model trained on massive amounts of text.

These models learn statistical patterns in language and use them to predict the next word in a sentence.

For example, if the model sees:

JavaScript is a programming ___

It predicts the most likely next word:

language

By repeating this process billions of times during training, the model becomes capable of generating paragraphs, code, or entire articles.

Modern LLMs like GPT-4 contain hundreds of billions of parameters that capture complex relationships in language.

What Generative AI Is Good At

Despite the hype, generative AI is not magic. It excels in specific types of tasks.

1. Generating Code

AI tools can generate boilerplate code quickly.

For example:

API endpoints
UI components
configuration files
test cases

For developers, this means less time writing repetitive code and more time focusing on architecture and problem solving.

2. Explaining Complex Concepts

AI can simplify technical ideas.

For example:

explaining TypeScript errors
summarizing documentation
breaking down algorithms

It acts like an on-demand tutor for developers.

3. Accelerating Prototyping

Generative AI can help quickly prototype ideas.

Instead of spending hours building a basic structure, developers can ask AI to generate:

starter templates
example APIs
sample datasets

This dramatically reduces the time from idea to prototype.

4. Improving Developer Productivity

AI tools integrated into editors such as GitHub Copilot help developers write code faster by suggesting completions.

These tools can:

autocomplete functions
suggest algorithms
generate tests

Developers still review the code, but AI speeds up the process.

What AI Is NOT Good At

Despite impressive abilities, generative AI has clear limitations.

Understanding these limitations is crucial.

1. AI Does Not Understand Like Humans

LLMs generate text based on patterns — not true understanding.

They don’t:

reason like humans
possess real-world awareness
understand consequences

This is why AI sometimes produces confident but incorrect answers, known as hallucinations.

2. AI Can Produce Incorrect Code

AI-generated code often looks correct but may contain:

subtle bugs
inefficient logic
security vulnerabilities

Developers must always review and validate AI-generated code.

AI is an assistant, not a replacement for engineering judgment.

3. AI Struggles with Complex Context

Large projects require deep architectural understanding.

AI can generate pieces of code but may struggle with:

complex system design
long-term maintainability
business logic nuances

These still require human expertise.

The Real Role of AI for Developers

Instead of replacing developers, AI is becoming a productivity multiplier.

Think of it as a superpower for developers, not a replacement.

Developers who learn how to use AI effectively will gain advantages such as:

faster prototyping
better documentation
quicker debugging
improved learning speed

The developers who struggle are not those replaced by AI — but those who refuse to adapt to new tools.

How Developers Should Use AI Responsibly

To get the best results from AI, developers should follow a few principles.

Treat AI as a Co-Pilot

AI should assist your workflow, not control it.

Use it for:

brainstorming solutions
generating starting points
explaining unfamiliar code

But always make the final decisions yourself.

Verify Everything

Never blindly trust AI-generated output.

Always:

review the logic
run tests
validate security

Think of AI suggestions like Stack Overflow answers — useful but not guaranteed to be correct.

Use AI to Learn Faster

One of the best uses of AI is accelerating learning.

You can ask:

“Explain this TypeScript error”
“Why is this algorithm slow?”
“How does this framework work internally?”

This transforms AI into a personal learning assistant.

Focus on Problem Solving

If AI writes more of the basic code, developers should focus more on:

architecture
user experience
performance
system design

In other words, AI shifts developers toward higher-level thinking.

AI: Superhero or Supervillain?

The truth is that AI is neither.

AI is a powerful tool.

Like any tool, its impact depends on how we use it.

Used responsibly, generative AI can:

increase productivity
unlock creativity
reduce repetitive work
make development more accessible

But if used carelessly, it can also lead to:

misinformation
buggy software
overreliance on automation

The future of AI is not about replacing humans — it is about augmenting human intelligence.

Final Thoughts

Generative AI is transforming the way developers work.

But the most important thing to remember is this:

AI is not the hero of the story. Developers are.

AI simply gives us new tools to build better software, solve bigger problems, and create better experiences for people.

The developers who succeed in the AI era will be those who learn how to collaborate with AI, not compete with it.

TypeScript Type Guards for Discriminated Unions (Best Practices for Scalable Code)

Neweraofcoding — Sat, 14 Mar 2026 17:27:13 +0000

TypeScript is powerful because it helps us write safer code with strong type checking. One of the most useful patterns for handling complex data structures is Discriminated Unions combined with Type Guards.

If you’re building large frontend apps (Angular, React) or API-driven applications, this pattern makes your code predictable, readable, and type-safe.

In this guide, we'll cover:

• What discriminated unions are
• Why type guards matter
• Best practices for using them in real applications
• Common mistakes developers make

The Problem: Handling Multiple Data Shapes

In many applications, a variable can represent different types of objects.

Example: API response states.

type ApiResponse =
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; message: string };

This is a union type.

But how does TypeScript know which properties exist?

If we try this:

function handleResponse(res: ApiResponse) {
  console.log(res.data);
}

TypeScript throws an error:

Property 'data' does not exist on type 'ApiResponse'

Because not every union member has data.

Solution: Discriminated Unions

A discriminated union uses a common property to identify the type.

In our example:

status

Now TypeScript can narrow types safely.

function handleResponse(res: ApiResponse) {
  if (res.status === "success") {
    console.log(res.data);
  }
}

TypeScript automatically knows:

res is { status: "success"; data: string[] }

This is called type narrowing.

What Are Type Guards?

A type guard is logic that helps TypeScript determine the exact type.

Example:

if (res.status === "error")

This acts as a type guard.

But we can also create custom type guards.

Creating Custom Type Guards

Custom guards improve readability and reusability.

Example:

function isSuccess(res: ApiResponse): res is { status: "success"; data: string[] } {
  return res.status === "success";
}

Usage:

if (isSuccess(res)) {
  console.log(res.data);
}

Now TypeScript automatically narrows the type.

This is very useful in large applications.

Real World Example: Payment System

Consider a payment system where responses differ.

type PaymentResult =
  | { type: "success"; transactionId: string }
  | { type: "failed"; error: string }
  | { type: "pending"; estimatedTime: number };

Using discriminated union:

function handlePayment(result: PaymentResult) {
  switch (result.type) {
    case "success":
      console.log(result.transactionId);
      break;

    case "failed":
      console.log(result.error);
      break;

    case "pending":
      console.log(result.estimatedTime);
      break;
  }
}

The type field acts as the discriminator.

Best Practice 1: Always Use a Single Discriminator Property

The most common property names:

type
kind
status
variant

Example:

type Shape =
  | { type: "circle"; radius: number }
  | { type: "square"; size: number };

Avoid multiple discriminators like:

{ kind: "circle", shape: "circle" }

Stick to one clear property.

Best Practice 2: Use `switch` Instead of Multiple `if` Statements

Switch statements improve readability and maintainability.

Bad:

if (shape.type === "circle") {}
if (shape.type === "square") {}

Better:

switch (shape.type) {
  case "circle":
    break;

  case "square":
    break;
}

This also enables exhaustive type checking.

Best Practice 3: Use Exhaustive Checks

A powerful TypeScript technique.

function assertNever(x: never): never {
  throw new Error("Unexpected type");
}

Example:

switch (shape.type) {
  case "circle":
    break;

  case "square":
    break;

  default:
    assertNever(shape);
}

If a new type is added:

{ type: "triangle" }

TypeScript throws an error immediately.

This prevents silent bugs.

Best Practice 4: Avoid Optional Fields in Union Types

Bad design:

type ApiResponse = {
  status: "success" | "error";
  data?: string[];
  error?: string;
};

This creates unclear states.

Better:

type ApiResponse =
  | { status: "success"; data: string[] }
  | { status: "error"; error: string };

Now the type system enforces valid states only.

Best Practice 5: Use Discriminated Unions for UI State

This pattern works extremely well for frontend state management.

Example:

type LoadingState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User[] }
  | { status: "error"; message: string };

Usage in UI:

switch (state.status) {
  case "loading":
    return "Loading...";

  case "success":
    return state.data;

  case "error":
    return state.message;
}

This prevents invalid UI states.

Best Practice 6: Create Reusable Type Guards

Instead of repeating logic everywhere.

Example:

function isError(res: ApiResponse): res is { status: "error"; message: string } {
  return res.status === "error";
}

Usage:

if (isError(response)) {
  console.log(response.message);
}

Reusable guards improve clean architecture.

Best Practice 7: Keep Union Types Small and Focused

Avoid extremely large unions like:

50 different variants

Break them into logical groups.

Example:

UserState
OrderState
PaymentState

This keeps code maintainable.

Common Mistakes Developers Make

1. Using `any`

Bad:

function handle(res: any)

This removes TypeScript safety.

2. Forgetting Exhaustive Checks

Developers often forget to handle new union cases.

Always use:

assertNever()

3. Mixing unrelated unions

Bad:

type Result =
  | { type: "user" }
  | { type: "product" }
  | { type: "error" }

Separate domain concerns.

Why Discriminated Unions Are Powerful

They help you:

• Prevent impossible states
• Write self-documenting code
• Catch errors at compile time
• Improve maintainability in large codebases

This is why discriminated unions are heavily used in:

• Angular state management
• Redux / NgRx
• API response modeling
• Domain-driven design

Final Thoughts

Discriminated unions + type guards are one of the most powerful patterns in TypeScript.

They allow you to model real-world state transitions safely, while keeping your code readable and scalable.

If you're building large TypeScript applications, mastering this pattern will significantly improve your code quality and reliability.

Migrating from Create React App to Vite (Complete Guide)

Neweraofcoding — Tue, 10 Mar 2026 15:13:41 +0000

Modern React development has evolved significantly. Many projects that were initially created using Create React App (CRA) are now migrating to Vite for faster builds, improved developer experience, and fewer dependency issues.

If your project uses react-scripts and you’re facing slow startup, build issues, or vulnerability warnings, migrating to Vite can be a great improvement.

This guide explains how to migrate a React project from Create React App to Vite, including all common pitfalls such as environment variables, public assets, scripts, and configuration changes.

Why Move from Create React App to Vite?

Create React App was once the standard way to start a React project. However, it has several limitations today:

Slow development server startup
Large dependency tree
Frequent npm audit vulnerabilities
Webpack-based builds that are slower than modern bundlers
Limited customization without ejecting

Vite solves these problems by using ESBuild for development and Rollup for production builds.

Key benefits include:

Instant dev server startup
Faster hot module replacement (HMR)
Smaller dependency tree
Simpler configuration
Modern tooling

Step 1: Remove Create React App Dependencies

CRA projects depend on react-scripts, which powers the development and build processes.

Remove it from your project:

npm uninstall react-scripts

You may also remove testing libraries if you plan to configure testing later:

npm uninstall @testing-library/jest-dom @testing-library/react @testing-library/user-event

Step 2: Install Vite and React Plugin

Install Vite and the React plugin required to support JSX and React Fast Refresh.

npm install -D vite @vitejs/plugin-react

If your project uses TypeScript:

npm install -D typescript

Step 3: Update Package Scripts

In CRA projects, scripts look like this:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Replace them with Vite scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Now the development server will run using:

npm run dev

Step 4: Create the Vite Configuration

Create a file named vite.config.ts in the project root.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

This enables React support and hot module reloading.

Step 5: Move index.html to the Root Folder

In Create React App, index.html is located inside the public folder.

public/index.html

In Vite, index.html must be placed in the project root.

project
 ├─ index.html
 ├─ src
 └─ public

Step 6: Replace index.tsx with main.tsx

CRA uses:

src/index.tsx

Vite typically uses:

src/main.tsx

Rename the file and update the content:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Step 7: Fix PUBLIC_URL Assets

One of the most common migration issues is the use of:

%PUBLIC_URL%

Example from CRA:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

Vite does not support %PUBLIC_URL%.

Instead, place assets inside the public folder and reference them directly:

public/
 ├─ favicon.ico
 ├─ logo192.png
 └─ manifest.json

Then update the HTML:

<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/logo192.png" />

Step 8: Update Environment Variables

CRA environment variables use the prefix:

REACT_APP_

Example:

REACT_APP_API_URL

In Vite, environment variables must start with:

VITE_

Example:

VITE_API_URL

Access them using:

import.meta.env.VITE_API_URL

Step 9: Clean Install Dependencies

After making configuration changes, perform a clean install.

rm -rf node_modules
rm package-lock.json
npm install

Then start the dev server:

npm run dev

The app will run on:

http://localhost:5173

Step 10: Fix React Version Compatibility

Create React App works best with React 18. If your project contains an unsupported version, update it:

"react": "^18.2.0",
"react-dom": "^18.2.0"

Then reinstall dependencies.

Common Issues During Migration

Blank Page in Browser

Check the browser console for errors and verify that:

index.html is in the root folder
the script path is correct

<script type="module" src="/src/main.tsx"></script>

Static Files Not Loading

Ensure assets are inside the public folder and referenced with /.

Incorrect:

%PUBLIC_URL%/image.png

Correct:

/image.png

Environment Variables Not Working

Make sure variables use the correct prefix.

Incorrect:

process.env.REACT_APP_API

Correct:

import.meta.env.VITE_API

Recommended Folder Structure

project
 ├─ public
 │   ├─ favicon.ico
 │   └─ manifest.json
 │
 ├─ src
 │   ├─ components
 │   ├─ pages
 │   ├─ App.tsx
 │   └─ main.tsx
 │
 ├─ index.html
 ├─ package.json
 └─ vite.config.ts

Final Thoughts

Migrating from Create React App to Vite can dramatically improve development speed and simplify project maintenance. The process mainly involves replacing build tools, updating environment variables, fixing public assets, and adjusting the project structure.

Once migrated, developers benefit from faster builds, modern tooling, and a cleaner dependency ecosystem.

If you are starting a new React project today, Vite is widely considered one of the best options available for building modern web applications.

Getting Started with Fireside Chats: A Complete Guide for Tech Communities and Professionals

Neweraofcoding — Wed, 25 Feb 2026 10:19:57 +0000

Fireside chats have become one of the most powerful formats for sharing knowledge, inspiring professionals, and fostering meaningful conversations in the tech industry. Unlike traditional presentations, fireside chats focus on informal, engaging, and insightful discussions between a moderator and an expert.

Whether you're organizing a developer event, mentoring session, or community meetup, fireside chats can create memorable and impactful experiences.

In this guide, you’ll learn:

What a fireside chat is
Why fireside chats are effective
How to organize a fireside chat
How to moderate effectively
Best practices for successful fireside chats
Tips for speakers and organizers

What is a Fireside Chat?

A fireside chat is an informal, conversational discussion between a moderator and a guest speaker, often focused on sharing experiences, insights, lessons learned, and industry knowledge.

Unlike formal presentations:

It is conversational, not scripted
It focuses on storytelling and real experiences
It encourages audience engagement
It feels more personal and authentic

The term originated from informal radio talks designed to connect directly with audiences in a relaxed manner.

Today, fireside chats are widely used in:

Tech conferences
Developer meetups
Leadership events
Community sessions
Corporate knowledge sharing

Why Fireside Chats Are Powerful

Fireside chats offer several benefits compared to traditional talks.

1. Authentic Knowledge Sharing

Speakers share real experiences, challenges, and lessons learned—not just theory.

This makes the session more relatable and valuable.

2. Encourages Open Conversations

The conversational format makes speakers more comfortable, leading to deeper insights and honest discussions.

3. Engages the Audience More Effectively

Audiences connect more easily with stories and experiences than slides and formal lectures.

4. Ideal for Mentorship and Career Guidance

Fireside chats are perfect for topics like:

Career growth
Leadership journeys
Technical decision-making
Real-world challenges

Common Fireside Chat Topics in Tech

Some popular topics include:

Becoming a senior developer
Transitioning into leadership roles
Building scalable applications
DevOps and cloud transformation
AI and the future of software development
Real-world system architecture experiences
Lessons learned from production failures

How to Organize a Successful Fireside Chat

Follow these steps to organize an effective fireside chat.

Step 1: Define the Objective

Ask yourself:

What should the audience learn?
Is the goal mentoring, inspiration, or technical knowledge?

Example objectives:

Help junior developers grow their careers
Share real-world enterprise architecture experience
Discuss AI adoption in enterprise development

Step 2: Choose the Right Speaker

Select speakers who:

Have real-world experience
Are comfortable sharing stories
Can provide valuable insights

Ideal speakers include:

Senior engineers
Tech leads
Architects
CTOs
Microsoft MVPs
Community leaders

Step 3: Select a Moderator

The moderator plays a critical role.

A good moderator:

Guides the conversation
Asks meaningful questions
Keeps the discussion engaging
Ensures smooth flow

The moderator should understand the topic and speaker’s background.

Step 4: Prepare Discussion Topics and Questions

Prepare guiding questions such as:

Career-focused:

How did you start your career in software development?
What challenges did you face early on?

Technical-focused:

How do you design scalable applications?
What are common mistakes developers make?

Leadership-focused:

How do you lead engineering teams effectively?
How do you make architectural decisions?

Avoid making it feel like an interview—keep it conversational.

Step 5: Structure the Fireside Chat

A typical structure:

Introduction (5 minutes)

Introduce speaker
Provide context

Main discussion (30–45 minutes)

Moderator asks prepared questions
Speaker shares experiences

Audience Q&A (10–20 minutes)

Audience asks questions

Closing (5 minutes)

Final advice from speaker

Tips for Moderators

Moderators are key to a successful fireside chat.

Best practices:

1. Focus on Stories, Not Just Facts

Instead of asking:

"What is microservices architecture?"

Ask:

"What challenges did you face when implementing microservices?"

Stories are more engaging.

2. Encourage Real Experiences

Ask questions like:

What was your biggest failure?
What did you learn from it?
What would you do differently?

3. Keep the Conversation Natural

Avoid rigid interview-style questions.

Let the conversation flow naturally.

4. Involve the Audience

Encourage audience questions to increase engagement.

Tips for Speakers

If you are a fireside chat speaker:

1. Share Real Experiences

Talk about:

Challenges
Failures
Lessons learned
Real-world examples

This makes your talk authentic.

2. Be Honest and Authentic

Audiences value honesty more than perfection.

3. Provide Actionable Advice

Help the audience with practical takeaways.

Example:

Skills to learn
Career advice
Technical best practices

Fireside Chats in Developer Communities

Fireside chats are widely used in:

Microsoft developer communities
Angular meetups
Azure and cloud events
GitHub and open-source communities

They help developers learn from real-world experts.

Virtual vs In-Person Fireside Chats

Both formats work well.

Virtual fireside chats:

Microsoft Teams
Zoom
YouTube Live

In-person fireside chats:

Conferences
Meetups
Corporate events

Both formats encourage meaningful discussions.

Real Example: Developer Community Fireside Chat

Topic:

"Journey from Junior Developer to Software Architect"

Discussion areas:

Career progression
Learning strategies
Real-world project challenges
Advice for developers

Audience takeaway:

Clear roadmap for career growth.

Benefits for Organizers

Fireside chats help organizers:

Build strong communities
Increase engagement
Provide high-value learning
Create memorable events

They are easier to organize than full technical workshops.

Best Practices Checklist

Use this checklist:

Define clear objective
Choose experienced speaker
Select good moderator
Prepare guiding questions
Encourage audience interaction
Focus on real experiences

Why Fireside Chats Are Growing in Popularity

In modern tech communities, people want:

Real experiences
Practical insights
Career guidance
Authentic conversations

Fireside chats provide all of these.

Conclusion

Fireside chats are one of the most effective ways to share knowledge, inspire professionals, and build strong tech communities.

They create meaningful conversations, provide real-world insights, and help developers learn from experienced professionals.

Whether you are an organizer, moderator, or speaker, fireside chats are a powerful format to foster learning, mentorship, and community engagement.

If you’re involved in tech communities, meetups, or developer events, organizing a fireside chat is an excellent way to create impactful and memorable experiences.

Fireside Chat Complete Template for Developer Communities

Topic Example: Building Modern Enterprise Applications with Angular, Microsoft 365, and AI

1. Moderator Opening Script

Use this to open the session.

Good evening everyone, and welcome to today’s Fireside Chat.

Thank you all for joining us. Today’s session is focused on Building Modern Enterprise Applications using Angular, Microsoft 365, and AI.

Fireside chats are different from traditional presentations. This is an open and informal conversation where we’ll explore real-world experiences, lessons learned, challenges, and practical insights from our speaker.

Whether you're a beginner, intermediate, or experienced developer, this session will provide valuable insights into modern application development, productivity tools, and AI integration.

We’ll begin with a discussion between myself and our speaker, followed by an interactive Q&A session where you can ask your questions.

Let’s get started.

2. Speaker Introduction Template

Use this template to introduce the speaker professionally.

It is my pleasure to introduce our speaker today, [Speaker Name].

[Speaker Name] is a [Job Title] with extensive experience in building enterprise-scale applications using technologies such as Angular, Microsoft 365, Azure, and AI-powered solutions.

They have worked on designing scalable systems, implementing secure authentication, and helping organizations improve productivity through modern development practices.

They are also actively involved in the developer community, contributing through mentoring, speaking engagements, and technical content.

Today, they will share their journey, experiences, and practical insights into building modern applications and leveraging Microsoft and AI technologies.

Please join me in welcoming [Speaker Name].

3. Core Fireside Chat Questions (Moderator Guide)

You do NOT need to ask all questions. Select relevant ones based on time and audience.

Section 1: Career Journey Questions

Start with personal journey questions to make the session relatable.

Questions:

Can you tell us about your journey into software development?
How did you get started with Angular and Microsoft technologies?
What were some of the biggest challenges you faced early in your career?
What helped you grow from a developer to working on enterprise-level applications?

Section 2: Angular and Enterprise Development

Relevant to your Angular expertise.

Questions:

Why is Angular a strong choice for enterprise applications?
What architecture patterns do you recommend for scalable Angular applications?
What are common mistakes developers make when building Angular apps?
How do you handle authentication and security in Angular applications?

Optional follow-up:

Can you share a real-world Angular project experience?

Section 3: Microsoft 365 and Enterprise Integration

Since you work with Microsoft 365, this is highly relevant.

Questions:

How can developers integrate their applications with Microsoft 365?
What role does Microsoft Graph API play in enterprise development?
How does Microsoft 365 improve productivity for developers and organizations?
Can you share real-world examples of Microsoft 365 integrations?

Section 4: AI in Modern Application Development

Very important and modern topic.

Questions:

How is AI changing software development today?
How can developers integrate AI into their applications?
What are practical use cases of AI in enterprise apps?
How do tools like GitHub Copilot improve developer productivity?

Follow-up:

How should developers start learning AI today?

Section 5: Real-World Lessons and Experiences

This is the most valuable section.

Questions:

What was one of the most challenging projects you worked on?
What mistakes taught you the most valuable lessons?
How do you approach system design and architecture decisions?

Section 6: Career Advice Section

Highly valuable for audience.

Questions:

What skills should developers focus on in 2026 and beyond?
How can developers grow from junior to senior roles?
What advice would you give to developers working with Angular and Microsoft technologies?

4. Audience Q&A Transition Script

Use this to transition to audience questions.

Thank you so much for sharing those valuable insights. It was really inspiring and insightful.

Now, we would like to open the session for audience questions.

If you have any questions related to Angular, Microsoft 365, AI, career growth, or enterprise development, please feel free to ask.

You can raise your hand or post your question in the chat.

5. Closing Script

Use this to close professionally.

Thank you everyone for joining today’s Fireside Chat.

And special thanks to [Speaker Name] for sharing their valuable experiences, insights, and practical advice.

I hope this session provided useful guidance and inspiration for your development journey.

We encourage you to continue learning, building, and contributing to the developer community.

Thank you again, and we look forward to seeing you at our future events.

Have a great day/evening everyone!

6. Optional Rapid-Fire Questions (Fun Section)

These make the session engaging.

Ask quick questions like:

Favorite programming language?
Angular or React?
GitHub Copilot — Yes or No?
Tabs or Spaces?
Cloud or On-Premise?
Best advice you ever received?

7. Recommended Duration

Ideal session structure:

Introduction: 5 minutes
Fireside chat discussion: 30–40 minutes
Audience Q&A: 15–20 minutes
Closing: 5 minutes

Total: 45–60 minutes

8. Pro Tips for Moderators

Do this:

Keep conversation natural
Ask follow-up questions
Focus on real experiences
Encourage storytelling
Involve audience

Avoid:

Asking too many technical theory questions
Interrupting speaker frequently
Making it feel like an interview

9. Example Event Titles You Can Use

Microsoft-focused:

Building Enterprise Apps with Angular and Microsoft 365
Modern Development with Microsoft Technologies and AI

Angular-focused:

Scaling Enterprise Applications with Angular

AI-focused:

How AI is Transforming Modern Software Development

Career-focused:

From Developer to Architect: Lessons and Insights

10. Perfect for Microsoft Community Events

This template works perfectly for:

Microsoft Reactor
Microsoft Learn Student Ambassadors events
Angular community meetups
Azure developer groups
Corporate tech talks
University tech events