Blog Posts

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.

Blog Posts

How to Deploy Next.js on Vercel

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

Cara Menjalankan MySQL dengan Docker

Menggunakan Time Tracking Software untuk Bekerja