I am a highly skilled Software Engineer with professional experience since 2019, specializing in backend technologies. My core expertise includes working with PHP, Node.js, Python, and JavaScript, complemented by proficiency in other programming languages tailored to project-specific needs.

I’m Ismail Jamil Jauhari

Featured Posts


**browser-use/web-ui** is an open-source project that provides a web-based interface for running AI agents inside a real web browser. Built on top of the **browser-use** framework, this project makes it easy to control, observe, and experiment with browser-based AI agents without relying solely on command-line tools.

This Web UI is designed for developers, researchers, and AI enthusiasts who want to explore **agentic AI**, web automation, and autonomous browsing in a visual and user-friendly way.

## What Is Browser-Use Web UI?

Browser-Use Web UI is a **graphical dashboard** that allows users to:

- Launch AI agents that can browse the web
- Watch browser interactions in real time
- Configure models, prompts, and browser behavior
- Manage persistent browser sessions

Instead of running everything headlessly, the UI exposes the agent’s actions visually, making debugging, demos, and experimentation much easier.

---

## Core Technologies

The project is built using:

- **browser-use**  
  A framework that enables AI agents to control real browsers (commonly via Playwright).

- **Gradio**  
  A Python UI framework that makes it simple to expose interactive web interfaces.

Together, these tools allow AI agents to interact with live websites just like a human user.

---

## Key Features

### Multi-LLM Support

The Web UI supports multiple Large Language Models (LLMs), including:

- OpenAI
- Azure OpenAI
- Anthropic
- Google
- DeepSeek
- Ollama (local models)

This flexibility lets users switch between cloud-based and local models depending on cost, privacy, or performance needs.

---

### Real Browser Control

Unlike purely simulated environments, the agents operate inside a **real browser**. This enables:

- JavaScript execution
- Handling dynamic websites
- Interaction with modern web apps

---

### Persistent Sessions

Browser sessions can persist across tasks. This means:

- Tabs remain open
- Cookies and sessions are reused
- Long, multi-step workflows are possible

This is especially useful for research, scraping, or authenticated workflows.

---

### Custom Browser Integration

Users can connect the UI to their **own browser profile**, allowing AI agents to access websites that require login without re-authentication.

---

### Docker Support

The project includes Docker and Docker Compose configurations, making it easy to:

- Deploy in isolated environments
- Run on servers or cloud instances
- Use VNC to visually watch the agent’s browser actions

---

## Installation Overview

### Local Installation

1. Clone the repository
2. Create a Python virtual environment
3. Install dependencies
4. Configure environment variables (API keys, model settings)
5. Run the Gradio Web UI

Once running, the UI is accessible via a local web address.

---

### Docker Installation

Using Docker Compose, you can:

- Build the image
- Start the Web UI
- Access the browser session via VNC or browser preview

This is the recommended option for consistent environments and easier setup.

---

## Use Cases

Browser-Use Web UI is useful for:

- Testing AI web agents
- Demonstrating agent behavior live
- Automating repetitive browser tasks
- Researching autonomous web navigation
- Learning how LLMs interact with real websites

---

## Why This Project Matters

This project lowers the barrier to experimenting with **browser-capable AI agents**. Instead of complex scripts and hidden automation, users get:

- Transparency
- Visual feedback
- Easier debugging
- Faster iteration

As AI agents increasingly move toward real-world interaction, tools like Browser-Use Web UI play a key role in making this technology accessible.

---

## Summary

**browser-use/web-ui** is:

- A web-based interface for AI browser agents
- Built with Gradio and browser-use
- Compatible with many LLM providers
- Designed for real browser interaction
- Easy to deploy locally or with Docker

It is a powerful tool for anyone exploring the future of autonomous AI on the web.

---

## Project Link

GitHub Repository:  
https://github.com/browser-use/web-ui

Browser-Use Web UI: Running AI Agents Directly in Your Browser

Getting your website indexed by Google is the first step to appearing in search results. If your website isn’t indexed, no one will find it via Google search—even if your content is amazing. In this tutorial, you’ll learn practical, technical, and strategic steps to make sure Google indexes your website quickly.

### 🔍 What is Google Indexing?

Google uses _web crawlers_ (like Googlebot) to explore websites, read their pages, and store them in a massive index—essentially a database of all web content it has discovered.

### ✅ Steps to Get Your Website Indexed Quickly

#### 1. Make Sure Googlebot Can Access Your Site

Check _robots.txt_
Ensure your _robots.txt_ file doesn’t block important pages.

```

# This allows all bots to crawl everything
User-agent: *
Disallow:

```

Check _robots meta tag_
Make sure your pages do not have this tag:

```

<meta name="robots" content="noindex">

```

#### 2. Submit Your Website to Google Search Console

- Visit https://search.google.com/search-console

- Add a new property (domain or URL prefix).

- Verify ownership (via DNS or HTML file upload).

- Once verified, submit your sitemap (sitemap.xml).

#### 3. Submit a Sitemap

A sitemap helps Google understand your site’s structure.

- Create a sitemap.xml (use a plugin like Yoast SEO if you use WordPress).
- Example:

 ```

 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 <loc>https://example.com/</loc>
 <lastmod>2024-06-16</lastmod>
 <changefreq>daily</changefreq>
 <priority>1.0</priority>
 </url>
 </urlset>

 ```

- Submit it in Search Console _→ Sitemaps →_ Enter the URL → Submit.

#### 4. Use “URL Inspection” Tool (Fetch as Google)

In Google Search Console:

- Enter the URL of a new page.
- Click **“Inspect URL.”**
- If it’s not indexed yet, click **“Request Indexing.”**

#### 5. Speed Up Your Website

Page speed affects your crawl budget and search ranking:

- Use a CDN (like Cloudflare).
- Compress images and minify CSS/JS.
- Enable caching.

Check your speed with https://pagespeed.web.dev

#### 6. Create Strong Internal Linking

Internal links help Google discover other pages on your site.

Example:

```

<a href="/blog/how-to-write-seo-content">Also read: How to Write SEO Content</a>

```

#### 7. Build Backlinks from External Websites

Google indexes pages faster if they’re linked from other websites.

Ways to get backlinks:

- Share content on social media.
- Submit your site to directories.
- Write guest posts.
- Comment on blogs (use links wisely and ethically).

#### 8. Update Your Website Regularly

Google favors active websites. Regularly add new content or update old pages so crawlers revisit your site more often.

How to Get Your Website Indexed Quickly by Google


Laravel provides a powerful query builder and Eloquent ORM that allow developers to build complex SQL queries in a clean and expressive way. One of the lesser-known yet highly powerful features is subqueries.

In this article, we'll explore how to use subqueries in Laravel using both the Query Builder and Eloquent, with practical examples.

### 🔍 What is a Subquery?

A subquery is a SQL query nested inside another query. It's used to return data that will be used in the main query as a condition or value.
Example in raw SQL:

```

SELECT * FROM users
WHERE id IN (SELECT user_id FROM orders WHERE status = 'completed');

```

### 🛠️ Using Subqueries in Laravel Query Builder

#### 1. Where In Subquery

```

use Illuminate\Support\Facades\DB;

$users = DB::table('users')
    ->whereIn('id', function ($query) {
        $query->select('user_id')
              ->from('orders')
              ->where('status', 'completed');
    })
    ->get();

```

This is equivalent to the SQL shown above.

#### 2. Select with Subquery as Column

```

$users = DB::table('users')
    ->select('name')
    ->selectSub(function ($query) {
        $query->from('orders')
              ->selectRaw('count(*)')
              ->whereColumn('orders.user_id', 'users.id');
    }, 'orders_count')
    ->get();

```

In this case, each user record will contain an **orders_count** field representing the number of orders they have.

#### 3. Join with Subquery

```

$latestOrders = DB::table('orders')
    ->select('user_id', DB::raw('MAX(created_at) as last_order_date'))
    ->groupBy('user_id');

$users = DB::table('users')
    ->joinSub($latestOrders, 'latest_orders', function ($join) {
        $join->on('users.id', '=', 'latest_orders.user_id');
    })
    ->select('users.*', 'latest_orders.last_order_date')
    ->get();

```

Here, you're joining a subquery that calculates the latest order date per user.

### 🧠 Using Subqueries in Eloquent

#### 1. Select Subquery in Eloquent

```

use App\Models\User;
use Illuminate\Support\Facades\DB;

$users = User::select('name')
    ->selectSub(function ($query) {
        $query->from('orders')
              ->selectRaw('count(*)')
              ->whereColumn('orders.user_id', 'users.id');
    }, 'orders_count')
    ->get();

```

This allows you to stay within Eloquent while using subqueries effectively.

#### 2. Eloquent with Exists Subquery

```

$users = User::whereExists(function ($query) {
    $query->select(DB::raw(1))
          ->from('orders')
          ->whereColumn('orders.user_id', 'users.id')
          ->where('status', 'pending');
})->get();

```

The **whereExists** method is helpful when you just need to check for the presence of related data.

### ✅ Tips

- Use _selectSub_, _joinSub_, _whereIn_, _whereExists_, _addSelect()_ for adding subqueries in different parts of the query.
- You can always fall back to raw queries using _DB::raw()_ when needed.


Mastering Subqueries in Laravel Eloquent & Query Builder

Laravel provides a powerful queue system that allows you to run time-consuming tasks like sending emails, resizing images, or processing payments in the background. But in a production environment, we need a reliable way to **keep the queue worker running 24/7**.

That’s where **Supervisor** comes in — a Linux process monitor that ensures your Laravel queue worker keeps running and automatically restarts it if it crashes.
In this article, you’ll learn:

- ✅ What Supervisor is and why you need it
- ✅ How to configure Laravel for queues
- ✅ How to create and dispatch a real job
- ✅ How to set up Supervisor on Ubuntu
- ✅ How to monitor and control the worker

### What Is Supervisor?

Supervisor is a process control system for Unix-like operating systems.
It allows you to:

- Run background tasks (like Laravel queue workers)
- Restart them automatically if they crash
- Launch them on system boot
- Manage them from the terminal (start, stop, restart)

### Why Laravel Needs Supervisor

When you run a Laravel worker with:

```

php artisan queue:work

```

…it will stop if:

- The SSH session ends
- The server restarts
- An error crashes the process

With Supervisor, your worker will:

- Run in the background
- Restart automatically if it fails
- Start at boot
- Be monitored and controlled easily

### 📚 Study Case: Background Email After User Registers

#### 🎯 Problem

You want to send a welcome email every time a user registers. But you don’t want to make the user wait while the email is being sent.

#### ✅ Solution

Use Laravel’s queue system to defer the email to a background process. Supervisor will keep that process running in production.

#### Step 1: Setup Queue Driver in Laravel

Open your _.env_ file and set:

```

QUEUE_CONNECTION=database

```

Then run:

```

php artisan queue:table
php artisan migrate

```

This creates a _jobs_ table to store pending background tasks.

#### Step 2: Create a Job to Send Email

Create the job class:

```

php artisan make:job SendWelcomeEmail

```

Update _app/Jobs/SendWelcomeEmail.php_:

```

use App\Models\User;
use App\Mail\WelcomeMail;
use Illuminate\Support\Facades\Mail;

class SendWelcomeEmail implements ShouldQueue
{
 use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

 public function __construct(public User $user) {}

 public function handle()
 {
 Mail::to($this->user->email)->send(new WelcomeMail($this->user));
 }
}

```

Now create the mailable class:

```

php artisan make:mail WelcomeMail --markdown=emails.welcome

```

Update the email template in _resources/views/emails/welcome.blade.php_:

```

@component('mail::message')
# Welcome, {{ $user->name }}

Thanks for joining our platform.

@component('mail::button', ['url' => url('/login')])
Login Now
@endcomponent

Thanks, 
{{ config('app.name') }}
@endcomponent

```

Then, in your controller (e.g. _RegisterController_):

```

use App\Jobs\SendWelcomeEmail;

public function register(Request $request)
{
 $user = User::create($request->all());

 // Dispatch job to queue
 SendWelcomeEmail::dispatch($user);

 return response()->json(['message' => 'User registered successfully.']);
}

```

#### Step 3: Test Locally

Try running the worker manually:

```

php artisan queue:work

```

Register a new user. You should see the job being processed, and the email sent in the terminal.

#### Step 4: Install Supervisor on Ubuntu

On your Ubuntu server, run:

```

sudo apt update
sudo apt install supervisor

```

Then create a config file:

```

sudo nano /etc/supervisor/conf.d/laravel-worker.conf

```

Add the following config:

```

[program:laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /var/www/your-laravel-app/artisan queue:work --sleep=3 --tries=3 --timeout=90
autostart=true
autorestart=true
user=www-data
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/your-laravel-app/storage/logs/worker.log

```

**Notes:** Replace _/var/www/your-laravel-app_ with the actual path to your Laravel project.

- **--sleep=3** : Wait 3 seconds before checking again if no jobs are available
- **--tries=3** : Retry a failed job 3 times before marking it as failed
- **--timeout=90** : Kill the job if it runs longer than 90 seconds (useful for stuck jobs)

#### Step 5: Start and Monitor Supervisor

Reload the config:

```

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start laravel-worker:*

```

Check status:

```

sudo supervisorctl status

```

Monitor logs:

```

tail -f /var/www/your-laravel-app/storage/logs/worker.log

```

### Conclusion

Using Laravel queues with Supervisor gives you a **powerful, scalable, and production-ready** solution for handling background jobs.
**Supervisor** ensures that your queue worker:

- Runs in the background
- Recovers automatically from failure
- Keeps your app fast and reliable

With this setup, you're ready to confidently handle tasks like email sending, notifications, file processing, and more — all asynchronously.

How to Set Up Laravel Queue Worker on Ubuntu with Supervisor (With Study Case & Implementation)

Monitoring system performance and application health is crucial for maintaining reliability and efficiency. This article walks through setting up Grafana, Prometheus, and Node Exporter using Docker.

### Prerequisites

- Docker and Docker Compose installed on your system

### Docker Compose Configuration

Below is a docker-compose.yml file that sets up Grafana, Prometheus, and Node Exporter:

```

services:
 grafana:
 image: grafana/grafana-enterprise
 container_name: grafana
 restart: unless-stopped
 ports:
 - '3000:3000'
 environment:
 - GF_SECURITY_ADMIN_USER=admin
 - GF_SECURITY_ADMIN_PASSWORD=admin
 - GF_PLUGINS_PREINSTALL=grafana-clock-panel
 - GF_SERVER_ROOT_URL=http://localhost:3000/
 volumes:
 - grafana_data:/var/lib/grafana

 prometheus:
 image: prom/prometheus
 container_name: prometheus
 restart: unless-stopped
 ports:
 - '9090:9090'
 volumes:
 - ./prometheus.yml:/etc/prometheus/prometheus.yml
 - prometheus_data:/prometheus

 node-exporter:
 image: prom/node-exporter
 container_name: node-exporter
 restart: unless-stopped
 ports:
 - '9100:9100'

volumes:
 grafana_data: {}
 prometheus_data: {}


```

#### Explanation of Services

1. Grafana
 - Runs on port 3000
 - Uses admin/admin as the default credentials (can be changed).
 - Preinstalls the grafana-clock-panel plugin.
 - Stores data in a named volume grafana_data.
2. Prometheus
 - Runs on port 9090.
 - Uses a configuration file prometheus.yml (to be created separately).
 - Stores data in prometheus_data volume.
3. Node Exporter
 - Runs on port 9100.
 - Collects system metrics (CPU, memory, disk, network, etc.).

### Setting Up Prometheus Configuration

Create a prometheus.yml file in the same directory as docker-compose.yml:

```

global:
 scrape_interval: 15s

scrape_configs:
 - job_name: 'prometheus'
 static_configs:
 - targets: ['prometheus:9090']
 - job_name: 'grafana'
 static_configs:
 - targets: ['grafana:3000']
 - job_name: 'node-exporter'
 static_configs:
 - targets: ['node-exporter:9100']

```

### Running the Setup

Navigate to the directory containing docker-compose.yml and run:

```

docker-compose up -d

```

### Accessing the Services

- Grafana: http://localhost:3000/ Default credentials: admin / admin.
- Prometheus: http://localhost:9090/.
- Node Exporter: http://localhost:9100/metrics.

### Adding Prometheus as a Data Source in Grafana

1. Open Grafana at http://localhost:3000/.
2. Log in with admin / admin.
3. Go to Configuration > Data Sources.
4. Click Add data source and choose Prometheus.
5. Set http://prometheus:9090 as the URL
6. Click Save & Test.

Setting Up Grafana and Prometheus for Monitoring


When writing conditional logic in JavaScript, developers have multiple choices, including `if-else`, `switch-case`, and `object lookup`. Each method has its advantages and disadvantages depending on readability, maintainability, and performance. This article compares these three approaches to determine which is best for different scenarios.

### 1. if-else

The `if-else` statement is the most commonly used conditional structure in JavaScript. It executes code blocks based on whether a condition evaluates to `true` or `false`.

#### Example

```

function getUserAccessLevel(role) {
  if (role === 'admin') {
    return 'Full Access';
  } else if (role === 'editor') {
    return 'Edit Access';
  } else {
    return 'Read-Only Access';
  }
}
console.log(getUserAccessLevel('admin')); // Full Access

```

#### Pros

- Simple and easy to understand.
- Works well with multiple conditions.
- Supports complex conditions involving logical operators.

#### Cons

- Becomes less readable with too many conditions.
- Performance can degrade if many conditions need to be checked sequentially.

### 2. switch-case

The `switch-case` statement is useful when dealing with multiple discrete values. It improves readability by reducing repetitive `if-else` statements.

#### Example

```

function getHttpStatusMessage(statusCode) {
  switch (statusCode) {
    case 200:
      return 'OK';
    case 400:
      return 'Bad Request';
    case 404:
      return 'Not Found';
    case 500:
      return 'Internal Server Error';
    default:
      return 'Unknown Status';
  }
}
console.log(getHttpStatusMessage(404)); // Not Found

```

#### Pros

- More readable than multiple if-else blocks when dealing with fixed values.
- Can be more performant when compiled into jump tables in certain engines.

#### Cons

- Only works well with discrete values (e.g., strings, numbers).
- Requires explicit break statements to avoid fall-through behavior.
- Less flexible than if-else when dealing with complex conditions.

### 3. object lookup

Object lookup is an alternative to `if-else` and `switch-case`, offering a cleaner and more performant way to map inputs to outputs.

#### Example

```

const paymentFees = {
  credit_card: 2.5,
  paypal: 3.0,
  bank_transfer: 1.0,
};

function getPaymentFee(method) {
  return paymentFees[method] || 0;
}
console.log(getPaymentFee('paypal')); // 3.0

```

#### Pros

- More readable and concise than if-else and switch-case.
- Faster lookup performance, as accessing an object property is generally fast.
- Easily extendable without modifying control structures.

#### Cons

- Not suitable for complex conditions or computations.
- Requires prior knowledge of the keys.

### Conclusion: Which One Is Best?

| Criteria            | if-else                | switch-case            | Object Lookup          |
| ------------------- | ---------------------- | ---------------------- | ---------------------- |
| Readability         | Good (few conditions)  | Good (discrete values) | Best (simple mappings) |
| Maintainability     | Poor (many conditions) | Moderate               | Best (scalable)        |
| Performance         | Moderate               | Good                   | Best lookup            |
| Complexity Handling | Best                   | Limited                | Poor (only key-value)  |

- Use `if-else` when dealing with complex conditions or logical expressions.
- Use `switch-case` when checking discrete values and needing better readability.
- Use `object lookup` for key-value lookups to improve performance and maintainability.

Choosing the best approach depends on the specific use case, but object lookup is often the most efficient for simple value mappings.


Comparing if-else, switch-case, and Object Lookup in JavaScript


PHP 8.4 has arrived with exciting new features that make coding easier and boost performance. This article breaks down the key updates with clear examples, helping developers of all skill levels understand and apply them effortlessly.

#### Currently Supported Versions

![Currently Supported Versions](https://www.ismailjamil.com/images/post/241125/php-currently-supported-versions.png)

source [PHP Supported Versions](https://www.php.net/supported-versions.php)

### 1. New Array Functions

PHP 8.4 adds new array functions that save you from writing manual loops.

#### Example:

```PHP

$arrayNumbers = [1, 2, 3, 4, 5];

/**
 * Find the first even number
 */
$firstEven = array_find($arrayNumbers, fn($n) => $n % 2 === 0);
echo $firstEven; // Output: 2

/**
 * Check if any number is greater than 2
 */
$hasBigNumber = array_any($arrayNumbers, fn($n) => $n > 2);
var_dump($hasBigNumber); // Output: bool(true)

/**
* Check if all numbers are positive
*/
$allPositive = array_all($arrayNumbers, fn($n) => $n > 0);
var_dump($allPositive); // Output: bool(true)

```

### 2. Simplified Object Instantiation

You can now create an object and call a method on it immediately, without wrapping the instantiation in parentheses.

#### Example:

```PHP

class Logger {
    /**
     * Logging info message
     * @param $message string
     */
    public function info(string $message): void {
        echo $message;
    }

    /**
     * Logging error message
     * @param $message string
     */
    public function error(string $message): void {
        echo $message;
    }
}

/**
 * Create an object and call a method in one step
 */
new Logger()->info('Logging info message'); // Output: Logging info message

```

### 3. Property Hooks

Property hooks let you customise what happens when you get or set a property. This removes the need for separate getter and setter methods.

#### Example:

```

class User {
    private string $name;
    private int $lastName;

    public function __construct(string $name, string $lastName) {
        $this->name = $name;
        $this->lastName = $lastName;
    }

    /**
     * This property combines first and last name
     */
    public string $fullName {
        get => $this->name . ' ' . $this->lastName;
        set => [$this->name, $this->lastName] = explode(' ', $value, 2);
    }
}

$user = new User('John', 'Doe');
echo $user->fullName; // Output: John Doe

$user->fullName = 'Jane Smith'; // Updates first and last names
echo $user->fullName; // Output: Jane Smith

```

### 4. Asymmetric Visibility

You can now set different levels of visibility for reading and writing a property. For example, a property can be readable by everyone but only writable by the class itself.

#### Example:

```PHP

class Wallet {
    /**
     * Public read, private write
     */
    public private(set) float $balance;

    public function __construct(float $initialBalance) {
        $this->balance = $initialBalance;
    }

    public function deposit(float $amount): void {
        $this->balance += $amount;
    }
}

$wallet = new Wallet(100.0);
echo $wallet->balance; // Output: 100

$wallet->deposit(50.0); // Adds 50 to the balance
echo $wallet->balance; // Output: 150

/**
 * The following line will cause an error:
 */
$wallet->balance = 200.0;

```

### 5. Deprecation of Implicit Nullable Types

PHP 8.4 requires you to explicitly declare when a parameter can be `null`. This makes code easier to understand and maintain.

#### Example:

```PHP

/**
* PHP 8.4 (Recommended):
*/
function process(?string $data = null) {
    echo $data ?? 'No data provided';
}

```

### 6.Lazy Objects

Lazy objects let you delay creating an object until it's actually used, which can save resources.

#### Example:

```PHP

class ExpensiveResource {
    public function __construct() {
        // Simulate a time-consuming setup
        sleep(2);
    }

    public function doWork(): void {
        echo 'Working...';
    }
}

/**
 * Use a lazy object to delay creation
 */
$initializer = fn() => new ExpensiveResource();
$reflector = new ReflectionClass(ExpensiveResource::class);
$resource = $reflector->newLazyProxy($initializer);

/**
 * The object isn't created yet
 */
$resource->doWork(); // Now the object is created and "Working..." is printed

```


Whats new in PHP 8.4


In modern software development, APIs (Application Programming Interfaces) serve as the backbone of communication between different applications. They enable seamless data exchange and integration across various platforms. However, to ensure reliability, security, and efficiency, it is crucial to implement robust validation mechanisms within an API.

### 1. Ensuring Data Integrity

Validation helps maintain the consistency and correctness of data flowing through an API. By enforcing data types, formats, and constraints, APIs prevent the storage or transmission of invalid or corrupted data. For instance, requiring a valid email format for user registration ensures that incorrect entries do not compromise the database's integrity.

### 2. Enhancing Security

APIs are often targeted by malicious attacks, including SQL injection, cross-site scripting (XSS), and request forgery. Input validation serves as a first line of defense against such threats by rejecting unexpected or harmful inputs. For example, validating and sanitizing user inputs can prevent attackers from injecting malicious SQL queries into database transactions.

### 3. Preventing System Crashes

Invalid or unexpected data can lead to API failures, causing downtime and disrupting services. Proper validation mitigates these risks by rejecting improper requests before they reach the core application logic. This is particularly important for mission-critical APIs, such as those in financial transactions or healthcare applications.

### 4. Improving User Experience

APIs that enforce proper validation provide better error handling and informative feedback to clients. Instead of allowing faulty requests to process and fail unexpectedly, validation mechanisms return meaningful error messages that help developers and users correct their inputs. For example, returning a _400 Bad Request_ response with specific error details helps clients understand what needs to be fixed.

### 5. Ensuring Compliance with Standards

Many industries have strict regulations regarding data handling, such as GDPR (General Data Protection Regulation) and HIPAA (Health Insurance Portability and Accountability Act). Proper validation ensures that API requests comply with these standards, reducing legal risks and enhancing data protection.

### 6. Reducing Server Load

Invalid API requests can consume unnecessary server resources, leading to performance degradation. By validating input at an early stage, the system prevents invalid data from consuming processing power, thus optimizing overall API performance and scalability.

### 7. Impact of Not Using Validation

Failure to implement validation in APIs can lead to severe consequences, including:

- **Data Corruption**: Inconsistent or malformed data can compromise database integrity.
- **Security Vulnerabilities**: APIs become susceptible to attacks like SQL injection, XSS, and remote code execution.
- **System Downtime**: Unchecked invalid inputs can cause unexpected crashes, affecting service availability.
- **Poor User Experience**: Users may receive unclear error messages or experience failed transactions without proper feedback.
- **Compliance Violations**: Organizations risk non-compliance with legal and industry regulations, leading to potential fines and reputational damage.

#### Example of Impact When Validation is Not Used

Consider an API endpoint that registers users without validation:

```

const express = require('express');
const app = express();
app.use(express.json());

app.post('/register', (req, res) => {
    const { email, password } = req.body;

    // No validation applied
    if (!email || !password) {
        return res.status(400).json({ error: 'Missing fields' });
    }

    // Email should be valid, but there's no validation, allowing incorrect formats
    // Password should be at least 6 characters, but there's no enforcement

    res.status(200).json({ message: 'User registered successfully' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

```

Possible Issues Without Validation:

- Users can register with an invalid email format (e.g., "user@invalid").
- Weak passwords (e.g., "123") can be accepted, leading to security vulnerabilities.
- Malicious users can inject harmful payloads.
- The API logic must handle invalid cases manually, leading to inconsistent responses and errors.

### Best Practices for API Validation

- **Use Proper Data Types**: Define and enforce strict data types for each request parameter.
- **Implement Input Length Restrictions**: Prevent excessively long inputs that could lead to buffer overflows.
- **Sanitize Inputs**: Remove unwanted characters or potential malicious content.
- **Utilize JSON Schema Validation**: Use schema validation libraries to enforce structured input formats.
- **Provide Meaningful Error Messages**: Help clients understand why a request was rejected.
- **Log Validation Failures**: Track rejected requests to analyze potential security threats.

### Sample Implementation in Express.js

Below is an example of how to implement input validation in an Express.js API using [express-validator](https://express-validator.github.io/docs/)

```

const express = require("express");
const { body, validationResult } = require("express-validator");

const app = express();
app.use(express.json());

app.post(
  "/register",
  [
    body("email").isEmail().withMessage("Invalid email format"),
    body("password")
      .isLength({ min: 6 })
      .withMessage("Password must be at least 6 characters long"),
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    res.status(200).json({ message: "User registered successfully" });
  }
);

app.listen(3000, () => console.log("Server running on port 3000"));

```

### Conclusion

Validation is a fundamental aspect of API development that ensures data integrity, security, and efficiency. Implementing robust validation mechanisms not only enhances system reliability but also improves user experience and compliance with industry standards. By prioritizing validation in API design, developers can create secure, resilient, and high-performing applications.


The Importance of Validation in APIs


In today's digital world, where applications and APIs serve millions of users simultaneously, implementing a robust rate-limiting mechanism is crucial. Rate limiting is a technique used to control the number of requests a user or system can make to a server within a specific time frame. This article explores the importance of rate limiting and how it helps ensure system stability, security, and fair resource allocation.

### 1. Preventing Server Overload

One of the most critical reasons for implementing rate limiting is to protect servers from being overwhelmed by excessive requests. Without rate limiting, a surge in traffic—whether legitimate or malicious—could exhaust system resources, causing slow responses or complete downtime. By setting request thresholds, servers can maintain optimal performance and availability for all users.

### 2. Mitigating DDoS Attacks

Distributed Denial of Service (DDoS) attacks attempt to flood a system with traffic, rendering it inaccessible. Rate limiting helps mitigate such attacks by restricting the number of requests an entity can make. By identifying unusual request patterns and blocking excessive traffic, rate limiting acts as a first line of defense against cyber threats

### 3. Ensuring Fair Resource Distribution

Rate limiting ensures that no single user or client monopolizes server resources, allowing equitable access for all users. This is especially important for APIs that provide limited computing power or have usage quotas. Fair distribution prevents abuse and ensures a smooth experience for everyone.

### 4. Reducing API Abuse and Misuse

APIs are often targets for abuse, including web scraping, credential stuffing, and bot-driven attacks. Rate limiting helps prevent these issues by enforcing request limits per user, IP address, or access token. This not only secures APIs but also ensures legitimate users can access the services without disruption.

### 5. Improving Cost Efficiency

Cloud-based services often charge based on the number of requests or data consumed. Without rate limiting, excessive usage could lead to unexpected costs. Implementing rate limits helps control operational expenses by preventing unnecessary or excessive API calls, thereby optimizing cost efficiency.

### 6. Enhancing User Experience

Unregulated traffic spikes can degrade the user experience by slowing down response times or causing service outages. Rate limiting helps maintain a predictable and stable environment, ensuring consistent performance for users. By managing request flows effectively, applications can provide a seamless experience.

### How to Implement Rate Limiting

There are several methods to implement rate limiting, depending on the use case:

- **Fixed Window**: Limits requests within a predefined time window (e.g., 100 requests per minute).

- **Sliding Window**: Uses a moving time window to distribute requests more evenly.

- **Token Bucket**: Allocates a set number of tokens that replenish over time, allowing bursts within limits.

- **Leaky Bucket**: Processes requests at a fixed rate, queuing excess requests.

### Conclusion

Rate limiting is an essential feature for any modern application or API, playing a critical role in system stability, security, and resource management. By implementing effective rate-limiting strategies, businesses can prevent downtime, mitigate cyber threats, reduce costs, and enhance user experience. As applications continue to scale, adopting rate limiting becomes not just beneficial but necessary for long-term success.


The Importance of Rate Limiting in Modern Applications


JSON Web Token (JWT) is a widely used method for securely transmitting data between parties. While JWTs offer security through signing and encryption, the payload is often exposed when using JSON Web Signature (JWS) with common algorithms like HS256 or RS256. This means that sensitive data in the payload can be read if the token is intercepted. To mitigate security risks, it is crucial to avoid including certain types of data in the JWT payload.

### Forbidden Data in JWT Payload

Here are some types of data that should never be included in a JWT payload:

#### 1. User Passwords

Storing plaintext passwords in a JWT payload is a severe security risk. Even if hashed, passwords should never be included because they can be extracted if the JWT is exposed.

#### 2. Sensitive Personal Identifiable Information (PII)

Avoid including personal data such as:

- Social Security Numbers (SSNs)
- Full names and addresses
- Credit card numbers
- Phone numbers

If any PII must be included, consider encrypting the payload rather than relying solely on signing.

#### 3. Session Identifiers or API Keys

JWTs are often used for authentication, but embedding session IDs or API keys within the token can expose them to attackers. Instead, store such information securely on the server side.

#### 4. Sensitive Business Data

Do not include proprietary or confidential business data, such as:

- Trade secrets
- Internal algorithms
- Financial reports

#### 5. Database Identifiers (e.g., User IDs)

Including raw database IDs can lead to enumeration attacks where attackers iterate through possible values to extract user data. Instead, use opaque tokens or UUIDs.

#### 6. JWT Expiration (exp) Far into the Future

Setting an expiration date (exp) too far into the future increases the risk of long-lived tokens being abused. Always use short-lived tokens and refresh them as needed.

#### 7. Roles & Permissions in Public JWTs

If the JWT is being used in a public setting (such as browser storage), avoid storing role-based access control (RBAC) permissions within the payload, as this information can be tampered with.

### Best Practices to Secure JWTs

- **Use Short Expiry Times**: Limit the lifespan of tokens to reduce exposure.

- **Implement Refresh Tokens**: Use refresh tokens to generate new access tokens without exposing sensitive data.

- **Use Encrypted JWTs (JWE)**: When transmitting sensitive information, use JWT encryption instead of relying only on signing.

- **Store Tokens Securely**: Avoid storing JWTs in local storage; use HTTP-only cookies for enhanced security.

- **Verify Token Signatures**: Always validate JWTs on the server to prevent tampering.

### Conclusion

JWTs are powerful tools for authentication and authorization, but improper use can lead to security vulnerabilities. By ensuring that forbidden data is never included in the payload, developers can enhance security and reduce risks associated with token exposure.


JWT Payload: Forbidden Data You Should Never Include


JSON Web Token (JWT) is an open standard (RFC 7519) used to securely transmit information between parties. JWT is widely used for authentication and authorization, especially in web applications and APIs.

A JWT consists of three main parts separated by dots (.):

1. Header: Contains the token type and the algorithm used.
2. Payload: Contains claims or user-related information.
3. Signature: Used to verify the authenticity of the token.

### Symmetric vs Asymmetric Algorithms in JWT

JWT can be signed using two types of algorithms:

#### 1. Symmetric Algorithm (HMAC)

A symmetric algorithm uses a single secret key for both signing and verification processes. A commonly used symmetric algorithm is HMAC with SHA-256 (HS256).

#### Advantages:

- Faster encryption and decryption compared to asymmetric algorithms.
- Easier to implement since it requires only one key.

##### Disadvantages:

- Security depends on the confidentiality of the single key.
- If the key is compromised, unauthorized parties can sign their own tokens
- The same key must be shared between the signing and verifying servers, increasing security risks.

#### 2. Asymmetric Algorithm (RSA & ECDSA)

An asymmetric algorithm uses two keys: a **private key** for signing and a **public key** for verification. Commonly used asymmetric algorithms include RSA (RS256) and ECDSA (ES256).

##### Advantages:

- More secure as the private key does not need to be shared.
- Prevents forgery: The recipient only needs the public key for verification, preventing token fabrication.
- Ideal for distributed systems, as only the entity with the private key can sign the token.

##### Disadvantages:

- Slower compared to symmetric algorithms due to complex mathematical computations.
- More complex implementation as it requires two keys.

### Why Choose Asymmetric Algorithms?

Although symmetric algorithms are faster, asymmetric algorithms offer better security for JWT, especially in the following scenarios:

- **Distributed systems**: When backend and frontend servers operate separately, asymmetric encryption allows the backend to sign tokens while the frontend verifies them using the public key.
- **Higher security**: As long as the private key remains secure, no unauthorized entity can sign valid tokens.
- **Reduced key leakage risk**: The public key can be shared without security risks, while the private key remains confidential.

### Conclusion

The choice of algorithm in JWT depends on security requirements and application needs. If authentication is handled by a single party, a symmetric algorithm might be sufficient. However, if multiple systems are involved and security is a priority, an asymmetric algorithm is the best choice as it ensures that only entities with the private key can sign valid tokens.


JWT: Why Asymmetric Algorithms Are Better Than Symmetric


HTTP methods define the actions an API client wants to perform on a resource. Each method corresponds to a specific operation—such as creating, reading, updating, or deleting data—and must be included in every request to a REST API.

Out of the 39 HTTP methods, developers primarily use **GET, POST, PUT, PATCH, and DELETE**.

In this article, I'll break down the key differences between these five methods and explain when to use each one effectively.

### 1. GET

The **GET** method retrieves resources from a server without modifying them, making it a **safe** operation. It is also **idempotent**, meaning multiple requests will always return the same result.

#### Example URIs

```js

HTTP GET 'http://www.sample-domain.com/users'
HTTP GET 'http://www.sample-domain.com/users?limit=20&page=2'
HTTP GET 'http://www.sample-domain.com/users/123'
HTTP GET 'http://www.sample-domain.com/users/123/address'

```

### 2. POST

POST method is used to create a new resource into the collection of resources on a server.

> It is important to note that POST is Non-idempotent. Thus invoking two identical POST requests will result in duplicate information being created on the server.

#### Example URIs

```js

HTTP POST 'http://www.sample-domain.com/users'
HTTP POST 'http://www.sample-domain.com/images'

```

### 3. PUT

PUT is used to update the existing resource on the server and it updates the full resource.
If the resource does not exist, PUT may decide to create a new resource.
PUT method is idempotent Thus calling this method multiple times will always update the same resource multiple times.

### Example URIs

```js

HTTP PUT 'http://www.sample-domain.com/users/123'
HTTP PUT 'http://www.sample-domain.com/images/123'

```

### 4. PATCH

PATCH is used to update the existing resource on the server and it **updates a portion** of the resource.

#### Example URIs

```js

HTTP PATCH 'http://www.sample-domain.com/users/123'
HTTP PATCH 'http://www.sample-domain.com/images/123'

```

### 5. DELETE

DELETE Method is used to delete the resources from a server. It deletes resource identified by the Request-URI.

### PATCH vs PUT

PUT method primarily **fully replaces** an entire existing resource but PATCH **partially updates** an existing resource.


5 HTTP methods in RESTful API development


Have you built your Next.js web app? Deployment is a crucial step, but it doesn’t have to be complicated. Vercel simplifies the process by connecting to your repository and automating deployment. It supports GitHub, GitLab, and Bitbucket, making deployment seamless.

### What is Vercel ?

Vercel is a cloud platform that makes it easy to build, host, and scale web applications. Designed for modern web development, it's widely used for hosting static sites and single-page applications (SPAs).

They make it easy for Front-end teams to develop, preview and ship delightful user experiences where performance is the default.

Here’s a simple diagram to show how Vercel’s deployment works.
![Vercel Development](https://www.ismailjamil.com/images/post/240415/vercel-development-diagram.webp)

### Why use Vercel?

Vercel simplifies the continuous deployment (CD) process, saving developers time and effort. Unlike traditional CI/CD tools like Jenkins, which require setting up an instance and configuring a Jenkinsfile, Vercel automates deployment with minimal setup.

If a build fails, errors are displayed in the deployment logs. For the latest failed build, you’ll find the error below the deployment preview on the project’s overview page, with a direct link to the specific deployment details.

With Vercel, developers can focus more on building their applications rather than managing the CD process.

### How to Deploy Next.js on Vercel?

Deploying with Vercel is simple! We’ll grant Vercel the necessary permissions to manage our application and handle deployment seamlessly.

For this tutorial, you can use any Next.js project. To keep things straightforward, I'll be using a basic Next.js project running on version 13.1.5

#### Follow these steps:

1. Make sure to put your code into the repository, and we will use GitHub in this tutorial.
2. Create an account in Vercel.
3. Once you've created an account, go to your Vercel dashboard. If you already have projects, click **Add New**. If not, select **Create a New Project** to get started.

![Vercel Dashboard](https://www.ismailjamil.com/images/post/240415/vercel-dashboard.webp)

4. On this page, we need to import your Git Repository first. Just follow the simple steps that they provide. After it’s connected to our repository, choose the project we want to deploy. We will need to sign in to our repository and allow the required access to enable Vercel to read our project in our repository.

![Vercel Import from Github](https://www.ismailjamil.com/images/post/240415/vercel-import-from-github.webp)

5. After successfully importing our project from our repository, you will be redirected to this page. Here, we can click on the Deploy button to deploy our application. For now, leave the rest to default. We can check our deployment process at the bottom of the page later. If any errors are found, we can see the cause. The error message that Vercel provides is easy to understand.

![Vercel Set Project](https://www.ismailjamil.com/images/post/240415/vercel-set-project.webp)

6. Your code should be successfully deployed after a few minutes and will be redirected to this page. To see/access our deployed application, click Go to Dashboard to find the deployment link


How to Deploy Next.js on Vercel


Secara default, macOS sudah memiliki PHP yang terinstal, tetapi terkadang dengan keterbatasan versi OS maka versi PHP yang dapat di install pun terbatas. Artikel ini akan membahas langkah-langkah mengganti PHP default macOS dengan PHP Verision dari **MAMP**.

### Mengubah Path ke Instalasi PHP

Untuk menggunakan Versi PHP dari **MAMP**, Anda perlu mengubah konfigurasi path sistem. Berikut adalah langkah-langkah megubah default versi PHP dengan menggunakan versi PHP yang ada pada MAMP :

1. Edit File Konfigurasi Shell

   Jika Anda menggunakan Bash, buka file `.bash_profile`

   ```
   vim ~/.bash_profile
   ```

2. Tambahkan Path PHP Version dari MAMP

   Disini sata menggunakan php versi **8.2**

   ```
   export PATH=/Applications/MAMP/bin/php/php8.2.0/bin:$PATH
   ```

3. Simpan Perubahan

   Tekan **ESC**, ketik **:wq**, lalu tekan Enter untuk menyimpan perubahan.

4. Terapkan Perubahan
   Muat ulang konfigurasi shell dengan menjalankan

   ```
   source ~/.bash_profile
   ```

5. Check Versi PHP
   Untuk melihat apakah versi PHP sudah beribah atau belum gunakan perintah
   ```
   php -v
   ```
   Maka akan muncul seperti berikut
   ```
   PHP 8.2.0 (cli) (built: Dec  9 2022 09:00:24) (NTS)
   Copyright (c) The PHP Group
   Zend Engine v4.2.0, Copyright (c) Zend Technologies
   ```


Cara Mengubah Default PHP Version menggunakan PHP Version dari MAMP di macOS


Docker adalah tools yang sangat berguna untuk menjalankan berbagai aplikasi dalam lingkungan terisolasi (container). Salah satu aplikasi yang sering dijalankan di Docker adalah MySQL. Dalam artikel ini, kita akan membahas cara menjalankan MySQL versi terbaru di Docker dengan port 3330.

## 1.Menjalankan MySQL Terbaru di Docker

Untuk menjalankan MySQL di dalam kontainer Docker, gunakan perintah berikut:

```
docker run -d --name mysql-latest-port-3330 -e MYSQL_ROOT_PASSWORD=admin123 -p 3330:3306 mysql:latest
```

## 2.Memeriksa Kontainer yang Berjalan

Setelah menjalankan perintah di atas, Anda bisa memeriksa apakah kontainer berjalan dengan benar menggunakan:

```
docker ps
```

## 3. Mengakses MySQL Menggunakan Database Client

Selain menggunakan terminal, Anda juga dapat mengakses MySQL dengan database client seperti MySQL Workbench, DBeaver, atau HeidiSQL. Berikut langkah-langkahnya:

1. Buka aplikasi database client.
2. Buat koneksi baru dengan konfigurasi berikut :
   1. Host: `127.0.0.1`
   2. Port: `3330`
   3. Username: `root`
   4. Password: `admin123`
   5. Database: (jika sudah ada, pilih database yang ingin diakses)
3. Klik "Test Connection" untuk memastikan koneksi berhasil.
4. Jika koneksi berhasil, simpan pengaturan dan mulai menggunakan database client.


Cara Menjalankan MySQL dengan Docker

Sebagai seorang fullstack developer freelance, mengatur waktu dengan efisien adalah hal yang sangat penting. Salah satu tantangan utama yang saya hadapi adalah memastikan bahwa saya bekerja dengan produktif dan mendapatkan bayaran yang sesuai dengan waktu yang saya habiskan. Setelah mencoba berbagai metode pencatatan waktu, saya akhirnya menemukan <a href="https://toggl.com/" target="_blank">Toggl</a>, sebuah alat time tracking yang membantu saya meningkatkan efisiensi dan transparansi dalam pekerjaan saya.

### Awal Mula Menggunakan Toggl

Ketika saya pertama kali mulai bekerja sebagai freelancer, saya sering kali kesulitan dalam menghitung jumlah jam kerja saya. Saya bekerja dengan berbagai klien dan proyek yang berbeda, sehingga mencatat waktu secara manual terasa merepotkan. Saya pernah mencoba menggunakan spreadsheet, tetapi sering kali lupa untuk mencatat waktu secara akurat. Akibatnya, saya kesulitan menentukan jumlah jam kerja yang harus saya tagih ke klien.

Kemudian, saya menemukan <a href="https://toggl.com/" target="_blank">Toggl</a> saat mencari aplikasi pencatat waktu yang sederhana dan mudah digunakan. <a href="https://toggl.com/" target="_blank">Toggl</a> menawarkan fitur time tracking yang intuitif, sehingga saya bisa mulai dan menghentikan pencatatan waktu hanya dengan satu klik. Selain itu, saya bisa mengelompokkan waktu berdasarkan proyek dan klien, yang sangat membantu dalam mengatur pekerjaan saya.

### Manfaat Menggunakan Toggl

1. Meningkatkan Akurasi Pencatatan Waktu

 Sebelum menggunakan <a href="https://toggl.com/" target="_blank">Toggl</a>, saya sering kali memperkirakan waktu kerja saya secara kasar, yang bisa menyebabkan saya kehilangan pendapatan atau justru menagih terlalu banyak. Dengan <a href="https://toggl.com/" target="_blank">Toggl</a>, saya bisa mencatat waktu secara real-time dan mendapatkan laporan yang lebih akurat tentang berapa jam saya habiskan untuk setiap tugas.

2. Memudahkan Penagihan ke Klien

 Salah satu fitur yang paling saya sukai dari <a href="https://toggl.com/" target="_blank">Toggl</a> adalah kemampuannya untuk menghasilkan laporan waktu kerja. Saya bisa mengunduh laporan dalam format PDF atau CSV dan menggunakannya sebagai bukti untuk penagihan ke klien. Dengan begitu, klien bisa melihat dengan jelas bagaimana waktu saya digunakan dan tidak ada perdebatan terkait jumlah jam kerja yang ditagihkan.

3. Meningkatkan Produktivitas

 Menggunakan <a href="https://toggl.com/" target="_blank">Toggl</a> membantu saya menjadi lebih sadar tentang bagaimana saya menghabiskan waktu saya. Saya bisa melihat pola kerja saya dan menemukan waktu-waktu di mana saya kurang produktif. Dengan informasi ini, saya bisa mengatur ulang jadwal saya agar lebih efisien, misalnya dengan menetapkan blok waktu fokus tanpa gangguan.

4. Membantu Menentukan Tarif Per Jam yang Tepat

 Dengan melihat data historis dari <a href="https://toggl.com/" target="_blank">Toggl</a>, saya bisa mengetahui berapa banyak waktu yang saya habiskan untuk proyek tertentu dan membandingkannya dengan bayaran yang saya terima. Hal ini membantu saya dalam menentukan tarif per jam yang lebih akurat dan menghindari bekerja dengan bayaran yang terlalu rendah.

Hi

I’m Ismail Jamil Jauhari

Featured Posts

Recent Posts