DEV Community: Dicky Saputra

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

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

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