DEV Community: Dicky Saputra

How to Make Rank Math Sitemap Pages Load Faster

Dicky Saputra — Fri, 10 Jul 2026 10:00:10 +0000

One common issue on WordPress websites with a large number of posts is that the Rank Math XML Sitemap can become slow to load. This happens because the sitemap is generated dynamically every time a visitor or search engine bot requests it.

A simple solution is to use a static sitemap cache, allowing the web server to serve pre-generated XML files directly without executing PHP for every request. This significantly reduces server load and improves crawling performance.

Benefits of Using a Static Sitemap

Using a static sitemap cache provides several advantages:

Faster sitemap loading times.
Lower CPU and PHP worker usage.
Improved crawling efficiency for Google and other search engines.
Ideal for websites with thousands or even millions of URLs.
Reduced server load when search engine bots frequently request sitemap files.

1. Setting RankMath Sitemap Cache

The first step is to enable static sitemap generation using the Rank Math Sitemap Tweak plugin.

The plugin automatically creates static copies of your XML sitemaps and stores them in the following directory:

/wp-content/uploads/rank-math/

Instead of generating the sitemap dynamically through WordPress, your web server can serve these static files directly.

2. Configure Apache (.htaccess)

If your website is running on Apache, add the following rules to your .htaccess file.

# ==========================
# XML cache
# ==========================
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{QUERY_STRING} ^$
RewriteCond %{HTTP:Cookie} !wordpress_logged_in
RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads/rank-math/%{HTTP_HOST}%{REQUEST_URI} -f
RewriteRule ^(.*)$ /wp-content/uploads/rank-math/%{HTTP_HOST}/$1 [L]

These rules check whether a cached sitemap file exists. If it does, Apache serves the static file immediately without loading WordPress.

3. Configure Nginx

If your server is using Nginx, add the following configuration inside your server block.

#
# Static cache
#
location / {

    try_files \
        /wp-content/uploads/rank-math/$host$uri \
        $uri \
        $uri/ \
        @wordpress;

    autoindex on;
}

#
# WordPress
#
location @wordpress {
    rewrite ^ /index.php?$args last;
}

With this configuration, Nginx will always try to serve the cached sitemap first. If the file does not exist, the request is passed to WordPress as usual.

How It Works

The process is straightforward:

The plugin generates static XML sitemap files.
The files are stored in the wp-content/uploads/rank-math/ directory.
When Google or another search engine requests a sitemap, the web server checks whether the cached file exists.
If it exists, the server serves the static file immediately.
If not, the request is forwarded to WordPress, which generates the sitemap dynamically.

This approach dramatically reduces response time while minimizing PHP execution and server resource usage.

Conclusion

Using a Static Sitemap Cache for Rank Math is a highly recommended optimization, especially for websites with a large amount of content.

By combining a static sitemap cache plugin with either Apache (.htaccess) or Nginx configuration, your XML sitemaps can be served directly as static files. This results in faster sitemap delivery, lower server resource consumption, and improved crawling efficiency for search engines.

Improve WordPress Server Response Time by Optimizing Apache and Nginx Configuration

Dicky Saputra — Fri, 10 Jul 2026 06:57:50 +0000

One of the most important performance metrics for a WordPress website is Server Response Time, commonly measured as Time to First Byte (TTFB). While caching plugins like WP Rocket significantly improve performance, many server configurations still route every request through PHP before serving the cached page.

In reality, cached HTML files can be delivered directly by the web server (Apache or Nginx), completely bypassing PHP and WordPress. This approach reduces CPU usage, lowers the PHP-FPM workload, and improves overall server response time.

This guide explains how to optimize both Apache (.htaccess) and Nginx so they can serve WP Rocket's static HTML cache directly.

Why Is This Optimization Important?

By default, a typical WordPress request follows this flow:

Visitor 
│ 
▼ 
Apache/Nginx 
│ 
▼ 
PHP 
│ 
▼ 
WordPress 
│ 
▼ 
WP Rocket Cache 
│ 
▼ 
HTML Response

Even when a page has already been cached, the request still passes through PHP before the cached content is returned.

With the following configuration, the request flow becomes:

Visitor 
│ 
▼ 
Apache/Nginx 
│ 
▼ 
WP Rocket HTML Cache 
│ 
▼ 
HTML Response

PHP and WordPress are only executed when a cached file does not exist.

Benefits

Lower Time to First Byte (TTFB)
Reduced CPU usage
Less PHP-FPM processing
Better performance during traffic spikes
Ideal for VPS and dedicated servers
Improved scalability with minimal configuration changes

Apache (.htaccess) Optimization

If your server runs Apache, insert the following block inside the WordPress rewrite section, immediately after:
RewriteBase /
and before:
RewriteRule ^index\.php$ - [L]
The resulting configuration should look like this:

# BEGIN WordPress
# Die Anweisungen (Zeilen) zwischen „BEGIN WordPress“ und „END WordPress“ sind
# dynamisch generiert und sollten nur über WordPress-Filter geändert werden.
# Alle Änderungen an den Anweisungen zwischen diesen Markierungen werden überschrieben.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /

RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{QUERY_STRING} =""
RewriteCond %{HTTP:Cookie} !wordpress_logged_in
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index.html -f
RewriteRule ^(.*)$ /wp-content/cache/wp-rocket/%{HTTP_HOST}/$1/index.html [L]

RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>

# END WordPress

How It Works

This rewrite rule performs several checks before serving a cached page:

Only processes GET requests.
Ignores requests containing query strings.
Skips logged-in WordPress users.
Verifies that a cached HTML file exists.
If the cache is available, Apache serves the static HTML file immediatel

Because the request never reaches PHP, WordPress is completely bypassed, resulting in significantly faster response times.

Nginx Optimization

For Nginx users, replace your existing location / block with the following configuration:

#
# Static cache
#
location / {

    try_files \
        /wp-content/cache/wp-rocket/$host$uri/index.html \
        /wp-content/cache/wp-rocket/$host$uri.html \
        $uri \
        $uri/ \
        @wordpress;

    autoindex on;
}

#
# WordPress
#
location @wordpress {
    rewrite ^ /index.php?$args last;
}

How It Works

The try_files directive checks each location in order:

Cached directory
index.html
Cached HTML file
Original requested file
Directory
Finally, falls back to WordPress

If a cached page is found, Nginx returns it immediately without invoking PHP-FPM.

This makes the request handling process considerably more efficient than routing every request through PHP.

Expected Performance Improvements

After applying these optimizations, you can typically expect:

Lower Server Response Time (TTFB)
Reduced CPU utilization
Fewer PHP worker processes
Better performance under high traffic
Improved PageSpeed Insights and GTmetrix scores, particularly for the "Reduce initial server response time" metric

The actual improvement depends on your server specifications, installed plugins, and traffic volume, but websites with moderate to high traffic often experience noticeable gains.

Things to Keep in Mind

Before enabling these configurations, make sure:

WP Rocket is installed and HTML page caching is working correctly.
Cache files have already been generated through preload or user visits.
Your website doesn't rely heavily on dynamic content that changes for every visitor.
You back up your .htaccess or Nginx configuration before making changes.

Conclusion

Serving cached HTML files directly from Apache or Nginx is one of the simplest yet most effective ways to improve WordPress performance. By eliminating unnecessary PHP and WordPress processing for cached pages, your server can respond faster, consume fewer resources, and handle significantly more concurrent visitors.

If you're already using WP Rocket, adding these rewrite rules to Apache or the appropriate try_files configuration to Nginx is a straightforward optimization that can deliver measurable improvements in server response time with minimal effort.

Creating a Campaign in Mailchimp with an MJML Email Template

Dicky Saputra — Sun, 13 Jul 2025 17:00:00 +0000

Email marketing remains one of the most effective ways to engage with your audience. Mailchimp is a popular platform for creating and managing email campaigns, and MJML (Mailjet Markup Language) is a powerful tool for designing responsive email templates. Combining the two can help you create visually appealing and functional email campaigns. Here’s a step-by-step guide on how to create a campaign in Mailchimp using an email template from MJML.

Step 1: Prepare the mjml file that has been built into html

You need to create the MJML file inside a project folder like this:

| ProjectA
| - image.jpg
| - index.html
| - index.mjml

Step 2: Import Your HTML Template into Mailchimp

2.1. Log in to Mailchimp

2.2. Navigate to Champaign page

2.3. Click "Create"

)

2.4. Fill the `Internal email name` And Click `Create email`

2.5. After that you can fill the information

the information like to, from, subject, send time & etc

2.6. Upload your design email

you can choose the content section by click the Design email, after that you can choose the Code your Own and choose the import zip. Before this, make sure you have compressed the project folder into zip

2.6. Upload your file

2.6. Click `Continue` to finish your campaign setup

2.7. Review and Send

Review your campaign to ensure everything looks correct. You can send a test email to yourself to double-check the design and content. Once you’re satisfied, click the “Send” button to launch your campaign.

Conclusion

Creating a Mailchimp campaign with an MJML email template combines the best of both worlds: the flexibility and responsiveness of MJML with the powerful email marketing capabilities of Mailchimp. By following these steps, you can design beautiful email templates in MJML, import them into Mailchimp, and create effective email campaigns that engage your audience. Happy emailing!

Manage stock calculation product variation package in WP

Dicky Saputra — Sun, 06 Jul 2025 17:00:00 +0000

Managing stock for product variations in WordPress, particularly when dealing with bundled products, can be a bit tricky. However, with the right approach and tools, you can efficiently track and reduce the stock of individual items included in a package. This guide will walk you through the process of setting up a product variable as a bundle product in WooCommerce, ensuring that stock levels are accurately maintained.

The cases

there is product (Supplement) and the supplement has package inside, the package is A, B, and C

A: contains 12 supplements
B: contains 6 supplements
C: contains 1 supplements if user buy one package A, The stock of supplements must be reduced by 12 instead of 1, because in the package there are 12 supplements but in their order or invoice they only show 1 package A, So, all we have to do is reduce product stock for the number of products in the package

Steps

First, I will add a field in the product variation to indicate how many products the variation (package) contains. here I named the field weight

<?php


/**
 * filename: class-product-variation-field.php
 * Used for Default Component of Pagination
 *
 * Author: Dicky Saputra
 * Author Url : https://dicky54putra.github.io/
 *
 */

defined('ABSPATH') || die("Can't access directly");

class SingleProductVariationField
{
    public function __construct()
    {
        add_action('woocommerce_product_after_variable_attributes', [$this, 'variation_settings_fields'], 10, 3);
        add_action('woocommerce_save_product_variation', [$this, 'save_variation_settings_fields'], 10, 2);
    }

    public function variation_settings_fields($loop, $variation_data, $variation)
    {
        woocommerce_wp_text_input(
            array(
                'id'          => '_mi_weight[' . $variation->ID . ']',
                'label'       => __('Weight', 'woocommerce'),
                'placeholder' => '2',
                'value'       => get_post_meta($variation->ID, '_mi_weight', true) ?? 1
            )
        );
    }

    public function save_variation_settings_fields($post_id)
    {
        $mi_weight = isset($_POST['_mi_weight'][$post_id]) ? sanitize_text_field($_POST['_mi_weight'][$post_id]) : null;
        if (!empty($mi_weight)) {
            update_post_meta($post_id, '_mi_weight', esc_attr($mi_weight));
        }
    }
}

new SingleProductVariationField();

in wp-admin a field like this will appear

after that, I will execute stock reduction in the hookwoocommerce_order_item_quantity

<?php

/**
 * filename: class-overide-hook.php
 * Used for Default Component of Pagination
 *
 * Author: Dicky Saputra
 * Author Url : https://dicky54putra.github.io/
 *
 */

defined('ABSPATH') || die("Can't access directly");

class OverideHookProductVariation
{
    public function __construct()
    {
        add_filter('woocommerce_order_item_quantity', [$this, 'handle_qty'], 10, 3);
    }

    public function handle_qty($qty, $order, $item)
    {
        $product = $item->get_product();
        $weight = get_post_meta($product->get_id(), '_mi_weight', true) ?? 1;

        $real_qty = $qty;
        try {
            $real_qty = $qty * $weight;
        } catch (\Throwable $th) {
            //throw $th;
        }

        return $real_qty;
    }
}

new OverideHookProductVariation();

don't forget to call these 2 functions in function.php

<?php

/**
 * filename: functions.php
 * Used for Default Component of Pagination
 *
 * Author: Dicky Saputra
 * Author Url : https://dicky54putra.github.io/
 *
 */

defined('ABSPATH') || die("Can't access directly");
require_once __DIR__ . '/class-product-variation-field.php';
require_once __DIR__ . '/class-overide-hook.php';

Conclusion

By following these steps and using the appropriate WooCommerce extensions, you can efficiently manage stock for product variation packages in WordPress. This setup ensures that your inventory remains accurate, even when selling bundled products.

For further customization and advanced features, consider exploring additional WooCommerce plugins and extensions that cater to your specific eCommerce needs

How to Hide the Title from an Embedded YouTube Video

Dicky Saputra — Mon, 30 Jun 2025 17:00:00 +0000

Embedding YouTube videos on your website is a great way to enhance your content and engage your audience. However, sometimes you might want to hide the video title for a cleaner look. While YouTube’s standard embed code includes the video title, there are a few workarounds to hide it. Here’s a step-by-step guide on how to hide the title from an embedded YouTube video.

Using CSS and JavaScript

This time I will use the CSS method to overcome this. because I have tried with parameters but it doesn't work. so, I used the css method. I think this is effective in overcoming it

Step 1: Prepare your HTML script

make the html structure like this.

<div class="Iframe">
  <div class="Iframe__Wrapper">
    <img
      src="/app/assets/images/yt-logo.webp"
      class="Iframe__Button js-iframe-yt"
      width="120"
      height="120"
      alt="Button"
    />
    <img
      src="https://img.youtube.com/vi/__VIDEO_ID__/maxresdefault.jpg"
      alt="Youtube Video"
      class="Iframe__Thumbnail js-iframe-yt"
      width="1280"
      height="720"
    />
    <iframe
      frameborder="0"
      allowfullscreen=""
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      width="640"
      height="360"
      src="https://www.youtube-nocookie.com/embed/__VIDEO_ID__?controls=0&rel=0&playsinline=0&modestbranding=0&start&end&showinfo=0&autohide=0&modestbranding=0"
    ></iframe>
  </div>
</div>

Step 1: Styling the component

@use "./abstract/variables" as v;

.Iframe {
  padding: 12px;
  background-color: v.$base-white;
  border-radius: 36px;

  &__Wrapper {
    border-radius: 36px;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;

    .Iframe__Button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    .Iframe__Thumbnail {
      object-fit: cover;
    }

    iframe {
      margin-block: 0;
      aspect-ratio: 16/9;
      width: 300%;
      height: 100%;
      margin-left: -100%;
      max-width: unset;
    }
  }
}

Step 3: Add javascript

javascript to run when the button is clicked the video will play

import $ from "jquery";

const componentsIframeYt = () => {
  const init = () => {
    execute();
  };

  const execute = () => {
    const el = {
      main: ".js-iframe-yt",
    };
    if ($(el.main).length === 0) return;

    $(document).on("click", el.main, function (e) {
      e.preventDefault();
      $(this).hide();
      $(this).siblings("img").hide();
      const iframe = $(this).siblings("iframe");

      iframe.attr("src", `${iframe.attr("src")}&autoplay=1`);
    });
  };
  init();
};

try {
  componentsIframeYt();
} catch (error) {
  console.error("componentsIframeYt", error);
}

Conclusion

Hiding the title from an embedded YouTube video can help maintain a clean and professional look on your website. While direct support for hiding titles is limited, using URL parameters, CSS/JavaScript overlays, or third-party tools can achieve the desired effect. Experiment with these methods to find the best solution for your needs.

Simple validation with Javascript & JQuery

Dicky Saputra — Sat, 28 Jun 2025 13:39:29 +0000

Form validation is an essential aspect of web development that ensures users provide the correct and expected input before submitting a form. Implementing validation on the frontend improves user experience by providing immediate feedback and reducing the need for server-side validation alone. Here's a step-by-step guide on how to set up frontend validation for a form.

Step 1: Wrap the Form with a `<form>` Tag and Add novalidate Attribute

The first step is to create your form structure in HTML and add the novalidate attribute. This attribute disables the browser's default validation, allowing you to implement custom validation.

<form action="" class="Form js-form" method="POST" novalidate>
  <div class="Form__Field ">
    <label for="locationsingle-question_type"
      >Location type: <span>*</span></label
    >
    <select
      name="locationsingle-question_type"
      id="locationsingle-question_type"
      class="js-select2"
      required
    >
      <option value="Trainingen">Trainingen</option>
      <option value="Lidmaatschap">Lidmaatschap</option>
      <option value="Reserveren">Reserveren</option>
      <option value="Vrijwilligers">Vrijwilligers</option>
      <option value="Sponsoring">Sponsoring</option>
      <option value="Overige">Overige</option>
    </select>
    <span class="body-text-sm-medium primary-500 Form__Field__HelperText"
      >veld vraag type niet geldig</span
    >
  </div>

  <div class="Form__Field Form__Field--50">
    <label for="locationsingle-email">Email<span>*</span></label>
    <input
      id="locationsingle-email"
      name="locationsingle-email"
      type="email"
      placeholder="email@gmail.com"
      required
    />
    <span class="body-text-sm-medium primary-500 Form__Field__HelperText"
      >veld email niet geldig</span
    >
  </div>

  <div class="Stack Stack--JustifyCenter w-100">
    <button type="submit" class="Button Button--Primary Button--Xl">
      Submit
    </button>
  </div>
</form>

Note: make sure your structure field is like this:

-field wrapper [Form__Field]
-- label (optional)
-- input
-- helper text [Form__Field__HelperText]

Step 2: Styling the Form and Invalid State

Next, let's add some CSS to style the form and the error messages. We'll also style the invalid state of the input fields

@use "/assets/css/src/abstracts/typo-mixins" as t;
@use "/assets/css/src/abstracts/variables" as v;
@use "/assets/css/src/abstracts/mixins" as m;

.Form {
    ...

    &.Form--Validated {
        ...
    }

    &__Field {
        ...

        &__HelperText {
            display: none;
        }


        label {
            ...
        }

        input,
        textarea,
        select {
            ...

            &:focus {
                ...
            }

            &:disabled,
            &.disabled,
            &:read-only {
                ...
            }

            &:invalid,
            &.invalid {
                ~ .Form__Field__HelperText {
                    .Form--Validated & {
                        display: inline;
                    }
                }
            }
        }
    }
}

Step 3: Write JavaScript to Handle Validation and Add Additional Rules

Now, let's write the JavaScript to handle the validation. This script will check the form fields, display error messages, and prevent form submission if there are validation errors.

import $ from "jquery";
import { emailRules, floatRules, phoneNumberRules } from "../abstract/regex";

const componentsForm = () => {
  const init = () => {
    execute();
  };

  const execute = () => {
    const el = {
      main: ".js-form",
      btnOpenFile: ".js-button-open-file",
    };
    if ($(el.main).length === 0) return;

    $(document).on("submit", el.main, function (e) {
      const form = e.target;

      const input = $(this).find(`input`);

      let isValid = {};
      input.each(function () {
        const type = $(this).attr("type");
        const c_type = $(this).data("type");
        const isRequired = $(this).prop("required");
        const isDisabled = $(this).prop("disabled");

        if (isDisabled) return;

        const value = $(this).val();
        const id = $(this).attr("id");

        const handleCondition = (condition) => {
          if (condition) {
            isValid[id] = "invalid";
          } else {
            delete isValid[id];
          }
        };

        switch (c_type) {
          case "float":
            handleCondition(!floatRules.test(value));
            break;

          default:
            break;
        }

        switch (type) {
          case "email":
            handleCondition(!emailRules.test(value));
            break;
          case "tel":
            handleCondition(!phoneNumberRules.test(value) && value !== "");
            break;
          case "file":
            if (isRequired)
              handleCondition(!this.files || this.files.length === 0);
            break;

          default:
            break;
        }
      });

      if (!form.checkValidity() || Object.values(isValid).length > 0) {
        e.preventDefault();
        e.stopPropagation();
      }

      form.classList.add("Form--Validated");
    });

    $(document).on(
      "input",
      `${el.main} input, ${el.main} select, ${el.main} textarea`,
      function () {
        const c_type = $(this).data("type");
        const type = $(this).attr("type");
        const value = $(this).val();

        const handleCondition = (condition) => {
          if (condition) {
            $(this).addClass("invalid");
          } else {
            $(this).removeClass("invalid");
          }
        };

        switch (c_type) {
          case "float":
            handleCondition(!floatRules.test(value));
            break;

          default:
            break;
        }

        switch (type) {
          case "email":
            handleCondition(!emailRules.test(value));
            break;
          case "tel":
            handleCondition(!phoneNumberRules.test(value) && value !== "");
            break;

          default:
            break;
        }
      },
    );
  };
  init();
};

try {
  componentsForm();
} catch (error) {
  console.error("componentsForm", error);
}

How to use it

Basic

You can use it like you use HTML's built-in validation, such as involving type, required, etc

Custom validation

You can add a data-type attribute to the input. like code below

<input
  id="locationsingle-email"
  name="locationsingle-email"
  type="text"
  data-type="float"
  placeholder="email@gmail.com"
  required
/>

then you can write rules in javascript according to your wishes. in this case I use regex to write the rules

const floatRules = /^\d+(\.\d+)?$/;
// edit the js on this part

$(document).on("submit", el.main, function (e) {
   ...
  switch (c_type) {
    case "float":
      handleCondition(!floatRules.test(value));
      break;

    default:
      break;
  }
  ...
});

$(document).on(
  "input",
  `${el.main} input, ${el.main} select, ${el.main} textarea`,
  function () {
    ...
    switch (c_type) {
      case "float":
        handleCondition(!floatRules.test(value));
        break;

      default:
        break;
    }
    ...
  }
);

Conclusion

Implementing frontend validation enhances user experience by providing immediate feedback and reducing errors before data reaches the server. By following these steps—wrapping the form with a form tag and adding the novalidate (novalidate will deactive validation default. and we override via javascript) attribute, styling the form and its invalid state, and writing JavaScript to handle validation—you can create robust and user-friendly forms. This approach ensures users provide the correct input, ultimately leading to better data quality and smoother interactions.

How I use React Hook Form with Yup and TypeScript

Dicky Saputra — Fri, 24 May 2024 09:33:36 +0000

React Hook Form is a powerful library for managing forms in React applications. When combined with Yup for schema validation and TypeScript for type safety, it provides a robust solution for building and validating forms. This article will guide you through the process of integrating React Hook Form with Yup and TypeScript.

Install the package into your project

To get started, create a new React project and install the necessary dependencies.

npm install react-hook-form yup @hookform/resolvers

Example

import Button from "@atoms/Button";
import Container from "@atoms/Container";
import InputField from "@atoms/InputField";
import TextAreaField from "@atoms/TextAreaField";
import Typography from "@atoms/Typography";
import { submitFormService } from "@features/contact/services/submitForm.service";
import { yupResolver } from "@hookform/resolvers/yup";
import { emailRules, phoneNumberRules } from "@utils/generalRegex.utils";
import handleError from "@utils/handleError.utils";
import { notifySuccess } from "@utils/notify.util";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import s from "./ContactForm.module.scss";

interface IInitialValue {
  email: string;
  firstName: string;
  lastName: string;
  phoneNumber?: string;
  question?: string;
}
const initialValue: IInitialValue = {
  email: "",
  firstName: "",
  lastName: "",
  phoneNumber: "",
  question: "",
};
const ContactForm = () => {
  const resolver = yup.object({
    email: yup
      .string()
      .matches(emailRules, {
        message: "E-mail moet een geldig e-mailadres zijn!",
      })
      .required("Vul alstublieft dit veld in!"),
    firstName: yup.string().required("Vul alstublieft dit veld in!"),
    lastName: yup.string().required("Vul alstublieft dit veld in"),
    phoneNumber: yup
      .string()
      .test(
        "matches-phone",
        "Het mobiele telefoonnummer moet een geldig mobiel nummer zijn!",
        (value) => {
          if (!value) return true;
          return phoneNumberRules.test(value);
        }
      ),
    question: yup.string(),
  });

  const form = useForm({
    defaultValues: initialValue,
    resolver: yupResolver(resolver),
  });

  const onSubmit = async (data: typeof initialValue) => {
    try {
      await submitFormService({
        data: data,
      });
      form.reset();
      notifySuccess("Het contact is succesvol verzonden!");
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <section className={s._Root}>
      <Container className={s._Container}>
        <form
          className={s._Card}
          onSubmit={form.handleSubmit(onSubmit)}
          method="post"
        >
          <Typography component="h2" variant="h2">
            Neem contact met ons op
          </Typography>
          <div className={s._Card__Row}>
            <InputField
              {...form.register("firstName")}
              id="voornaam"
              label="Voornam"
              helperText={form.formState.errors.firstName?.message}
              error={Boolean(form.formState.errors.firstName?.message)}
              required
            />
            <InputField
              {...form.register("lastName")}
              id="achternaam"
              label="Achternaam"
              helperText={form.formState.errors.lastName?.message}
              error={Boolean(form.formState.errors.lastName?.message)}
              required
            />
          </div>
          <div className={s._Card__Row}>
            <InputField
              {...form.register("phoneNumber")}
              id="telefoonnummer"
              label="Telefoonnummer"
              helperText={form.formState.errors.phoneNumber?.message}
              error={Boolean(form.formState.errors.phoneNumber?.message)}
            />
            <InputField
              {...form.register("email")}
              id="e-mail"
              label="E-mail"
              helperText={form.formState.errors.email?.message}
              error={Boolean(form.formState.errors.email?.message)}
              required
            />
          </div>
          <div className={s._Card__Row}>
            <TextAreaField
              id="jouwVraag"
              label="Jouw vraag"
              {...form.register("question")}
            />
          </div>
          <Button
            component="button"
            type="submit"
            disabled={form.formState.isSubmitting}
          >
            {form.formState.isSubmitting ? "Bezig met laden..." : "Verzend"}
          </Button>
        </form>
      </Container>
    </section>
  );
};

export default ContactForm;

Let's breakdown part by part

1. setup the initial value with the type or interface

define the default value of the form that you will create

...
interface IInitialValue {
  email: string;
  firstName: string;
  lastName: string;
  phoneNumber?: string;
  question?: string;
}
const initialValue: IInitialValue = {
  email: "",
  firstName: "",
  lastName: "",
  phoneNumber: "",
  question: "",
};
...

2. setup the handle form with useForm

const form = useForm({
  defaultValues: initialValue,
  resolver: yupResolver(resolver),
});

3. write the resolver or validation

...
const resolver = yup.object({
  email: yup
    .string()
    .matches(emailRules, {
      message: "E-mail moet een geldig e-mailadres zijn!",
    })
    .required("Vul alstublieft dit veld in!"),
  firstName: yup.string().required("Vul alstublieft dit veld in!"),
  lastName: yup.string().required("Vul alstublieft dit veld in"),
  phoneNumber: yup
    .string()
    .test(
      "matches-phone",
      "Het mobiele telefoonnummer moet een geldig mobiel nummer zijn!",
      (value) => {
        if (!value) return true;
        return phoneNumberRules.test(value);
      }
    ),
  question: yup.string(),
});
...

email field use the custom rules for email, in this case I use the regex from emailRules
firstName & lastName field is required
question is not required and only allow string value
phoneNumber is not required but the value should the correct phoneNumber in this case I use regex to handle the rules

4. register each field to useForm

I register each field like below. I not only register, I also put the error state and error message when the value not match with the rules. and make the field disabled when the form submiting

...
<InputField
    {...form.register("firstName")}
    id="voornaam"
    label="Voornam"
    helperText={form.formState.errors.firstName?.message}
    error={Boolean(form.formState.errors.firstName?.message)}
    disabled={form.formState.isSubmitting}
    required
/>
...

5. Handle submit

...
const onSubmit = async (data: typeof initialValue) => {
  try {
    await submitFormService({
      data: data,
    });
    form.reset();
    notifySuccess("Het contact is succesvol verzonden!");
  } catch (error) {
    handleError(error);
  }
};
...
<form className={s._Card} onSubmit={form.handleSubmit(onSubmit)} method="post">
  ...
</form>;
...

6. Add state to Button

Add state text if necessary, and make the button disabled while submitting

...
<Button component="button" type="submit" disabled={form.formState.isSubmitting}>
  {form.formState.isSubmitting ? "Bezig met laden..." : "Verzend"}
</Button>
...

Conclusion

combining React Hook Form with Yup and TypeScript, you can create powerful, type-safe forms with robust validation. This integration allows you to leverage the strengths of each library: React Hook Form for efficient form management, Yup for schema-based validation, and TypeScript for static type checking.

This setup ensures that your forms are not only functional but also maintainable and easy to debug, providing a solid foundation for building complex forms in your React applications.

Setup | MacOsvirtual host nginx

Dicky Saputra — Sun, 18 Sep 2022 12:41:53 +0000

note :

Set up local server separately using homebrew
maybe the location of the file is different

First, create the conf file at

\opt\homebrew\etc\nginx\servers

and then fill the content, ex:

# Upstream to abstract backend connection(s) for php

server {
        ## Your website name goes here.
        server_name project.local;
        ## Your only path reference.
        root /opt/homebrew/var/www/project;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;
        location = /favicon.ico {
                log_not_found off;
                access_log off;
        }
        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }
        location / {
                # This is cool because no php is touched for static content.
                # include the "?$args" part so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php?$args;
        }
        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
        }
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                log_not_found off;
        }
}

Second, add the hostname to

\private\etc\hosts

127.0.0.1   localhost
127.0.1.1   dicky54putra

127.0.0.1   project.local

# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1   kubernetes.docker.internal
# End of section

Restart the nginx

sudo nginx -s reload

note: if there is error 403 nginx, try to run this command
chmod -R 755 project

Finally, the virtual host can be use and finished

Edited

12 december 2024

I just setup in my device but I have a trouble like this: the virtual host just shown the default page (welcome to nginx). to fix this: I add listen 80; in the top of config like

server {
    listen 80;
    server_name project.local;
...
}

Force linux to shutdown or restart

Dicky Saputra — Sat, 28 May 2022 19:17:07 +0000

A solution for your PC when feel lag and freeze

Sometimes restart PC with

ctrl + alt + delete

not working and you should to press the power button but this is not recommended because can damage computer performance

Usually I use this way to resolve that:
Holding down

ALT + PrntSct/SysRq

(which is the Print Screen key) while slowly typing

R+E+I+S+U+B

will get you safely restarted.

R+E+I+S+U+O

will do a shutdown rather than a restart.

Here are the steps each button performs:

R: Switch the keyboard from raw mode to XLATE mode
E: Send the SIGTERM signal to all processes except init
I: Send the SIGKILL signal to all processes except init
S: Sync all mounted filesystems
U: Remount all mounted filesystems in read-only mode
B: Immediately reboot the system, without unmounting partitions or syncing

source codepolitan blog.kember.net

Setup virtual host ubuntu nginx

Dicky Saputra — Mon, 23 May 2022 15:12:05 +0000

First, create the conf file at

\etc\nginx\sites-available

and then fill the content, ex:

# Upstream to abstract backend connection(s) for php

server {
        ## Your website name goes here.
        server_name project.local;
        ## Your only path reference.
        root /var/www/project;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;
        location = /favicon.ico {
                log_not_found off;
                access_log off;
        }
        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }
        location / {
                # This is cool because no php is touched for static content.
                # include the "?$args" part so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php?$args;
        }
        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
        }
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                log_not_found off;
        }
}

after that run the symlink

sudo ln -s /etc/nginx/sites-available/project /etc/nginx/sites-enabled/project

Second, add the hostname to

\etc\hosts

127.0.0.1   localhost
127.0.1.1   dicky54putra-X441UA

127.0.0.1   project.local

# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1   kubernetes.docker.internal
# End of section

Restart the nginx

sudo service nginx restart

Finally, the virtual host can be use and finished

Loop an Array JS

Dicky Saputra — Tue, 23 Nov 2021 10:15:37 +0000

DEV Community: Dicky Saputra

How to Make Rank Math Sitemap Pages Load Faster

Benefits of Using a Static Sitemap

1. Setting RankMath Sitemap Cache

2. Configure Apache (.htaccess)

3. Configure Nginx

How It Works

Conclusion

Improve WordPress Server Response Time by Optimizing Apache and Nginx Configuration

Why Is This Optimization Important?

Benefits

Apache (.htaccess) Optimization

How It Works

Nginx Optimization

How It Works

Expected Performance Improvements

Things to Keep in Mind

Conclusion

Creating a Campaign in Mailchimp with an MJML Email Template

Step 1: Prepare the mjml file that has been built into html

Step 2: Import Your HTML Template into Mailchimp

2.1. Log in to Mailchimp

2.2. Navigate to Champaign page

2.3. Click "Create"

2.4. Fill the Internal email name And Click Create email

2.5. After that you can fill the information

2.6. Upload your design email

2.6. Upload your file

2.6. Click Continue to finish your campaign setup

2.7. Review and Send

Conclusion

Manage stock calculation product variation package in WP

The cases

Steps

Conclusion

How to Hide the Title from an Embedded YouTube Video

Using CSS and JavaScript

Step 1: Prepare your HTML script

Step 1: Styling the component

Step 3: Add javascript

Conclusion

Simple validation with Javascript & JQuery

Step 1: Wrap the Form with a <form> Tag and Add novalidate Attribute

Step 2: Styling the Form and Invalid State

Step 3: Write JavaScript to Handle Validation and Add Additional Rules

How to use it

Basic

Custom validation

Conclusion

How I use React Hook Form with Yup and TypeScript

Install the package into your project

Example

Let's breakdown part by part

1. setup the initial value with the type or interface

2. setup the handle form with useForm

3. write the resolver or validation

4. register each field to useForm

5. Handle submit

6. Add state to Button

Conclusion

Setup | MacOsvirtual host nginx

First, create the conf file at

Second, add the hostname to

Restart the nginx

Finally, the virtual host can be use and finished

Edited

12 december 2024

Force linux to shutdown or restart

A solution for your PC when feel lag and freeze

Setup virtual host ubuntu nginx

First, create the conf file at

Second, add the hostname to

Restart the nginx

Finally, the virtual host can be use and finished

Loop an Array JS

2.4. Fill the `Internal email name` And Click `Create email`

2.6. Click `Continue` to finish your campaign setup

Step 1: Wrap the Form with a `<form>` Tag and Add novalidate Attribute