In today’s world, where performance and user experience are top priorities, selecting the right library is crucial. A solution that minimizes bundle size and enhances mobile usability while providing robust validation can make a huge difference in your project.

Popular Libraries and Their Limitations

If you’ve needed input masking for forms, you’ve likely come across libraries like Inputmask, Cleave.js, and IMask. These libraries are really great, but they come with trade-offs:

Inputmask:

• Powerful and flexible, but significantly increases bundle size (~20 KB gzipped).
• Lacks features like inputmode for better mobile experiences.

Cleave.js:

• Simple and supports dynamic masks.
• However, it lacks built-in validation or automatic configurations like minlength and maxlength.

IMask:

• Offers great features with a moderate size (~5 KB gzipped).
• It’s powerful but can be overkill for simpler use cases.

While these are solid tools, I felt there was room for a solution that’s lighter, flexible, and focused on mobile usability.

Introducing Masky.js

That’s why I built Masky.js: an ultra-lightweight (just 1.3 KB gzipped) alternative that prioritizes performance without sacrificing flexibility or essential features.

Super Lightweight:

• At just 1.3 KB gzipped, it’s one of the smallest solutions on the market.
• Perfect for projects where bundle size is critical.

Mobile-Friendly:

• Automatically sets the inputmode attribute based on the mask, ensuring a better typing experience on mobile devices.

Fully Customizable:

• Supports custom masks with prefixes, suffixes, and even reverse masks.

Built-In Validation:

• Native support for CPF and CNPJ (Brazilian IDs) validation.

Automation:

• Automatically calculates and applies minlength and maxlength based on the mask.

Zero Dependencies:

• 100% Vanilla JS, making it easy to integrate with any environment or framework.

Comparison

Feature	Masky.js	Inputmask	Cleave.js	IMask
Size (Gzipped)	1.3 KB	20 KB	8 KB	5 KB
Dependencies	None	None	None	None
Custom Masks
Prefixes/Suffixes
Built-in CPF/CNPJ Validation
inputmode for Mobile
Automatic Min/Max Length Validation
Reverse Masks

Usage Example

Simplicity is key. Just add the data-mask attribute, and let Masky.js handle the rest—prefixes, suffixes, validations, and even automatic inputmode and minlength adjustments.

<!-- Simple Phone Mask -->
<input type="text" data-mask="(00) 00000-0000" />

<!-- Add Prefix and Suffix -->
<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />

<!-- Built-in CPF Validation -->
<input type="text" data-mask="000.000.000-00" data-mask-validation="cpf" />

<script src="https://cdn.jsdelivr.net/npm/masky-js/dist/masky.min.js"></script>

Check more details of how to use on the documentation.

Try it Out

If you’re looking for a fast, flexible, and performance-focused input masking solution, give Masky.js a shot!

GitHub: https://github.com/eduardovillao/masky-js

npm: https://www.npmjs.com/package/masky-js

I’d love to hear your thoughts or suggestions!

The post Masky.js: A Lightweight Alternative to Inputmask, Cleave.js, and IMask appeared first on Eduardo Villão - EN.

What’s New in the PRO Version?

Our PRO users now have access to a range of powerful new features designed to enhance your forms and improve data accuracy:

Prefix and Suffix Options

Add prefixes (e.g., $, +, or #) or suffixes (e.g., %, lbs, or km) to your masks for better user guidance. These additions make it easier for users to understand the type of data they need to input.

Min and Max Character Validation

Ensure users provide data that meets your exact requirements. With this feature, you can define minimum and maximum character limits to prevent incomplete or invalid submissions.

Inputmode Control

Customize the keyboard type based on the input field’s context. For example:

• Open a numeric keypad for phone numbers.
• Open a text keyboard for alphanumeric data.

New Masking Library: Built by Us, for You

We’ve replaced the old jQuery dependency with a lightweight, vanilla JavaScript masking library developed entirely by our team.

Why This Change?

Our custom library is:

• Super Lightweight: Minimal impact on your website’s performance.
• Highly Performant: Optimized to handle complex masking scenarios effortlessly.
• Independently Maintained: No external dependencies mean we have complete control over updates and improvements.

By switching to our own library, we’ve made Form Masks for Elementor faster, smoother, and future-ready. This update ensures that you get the best masking experience without relying on bulky third-party code.

Code Improvements

Our team has fine-tuned the code for better efficiency and reliability, ensuring a seamless experience for all users.

Upgrade to the PRO version today!

Updates for the Free Version

We haven’t forgotten our Free users! The latest update includes:

New Masking Library: Built by Us, for You

We’ve replaced the old jQuery dependency with a lightweight, vanilla JavaScript masking library developed entirely by our team.

Why This Change?

Our custom library is:

• Super Lightweight: Minimal impact on your website’s performance.
• Highly Performant: Optimized to handle complex masking scenarios effortlessly.
• Independently Maintained: No external dependencies mean we have complete control over updates and improvements.

By switching to our own library, we’ve made For

Support for PRO Controls

Enjoy enhanced compatibility and integration with PRO features, making it easier to upgrade when you’re ready.

Code Enhancements

We’ve optimized the codebase for improved stability, usability, and performance.

Download the latest Free version now!

Why Upgrade to PRO?

The PRO version takes your forms to the next level with unmatched flexibility and control. Whether you need custom masks, advanced validation, or improved user input guidance, the PRO version has you covered.

Your Feedback Matters

We’re constantly improving and adding new features based on your feedback. If you have ideas, suggestions, or questions, feel free to reach out to us at [email protected].

Thank you for being a valued part of the Form Masks for Elementor community. We can’t wait to see how you’ll use these new features to build even better forms!

The post Exciting Updates for Form Masks for Elementor Free and PRO Versions! appeared first on Eduardo Villão - EN.

With the MutationObserver API, you can monitor changes to the DOM and detect when an Elementor popup modal is injected into the <body>. This allows you to execute custom actions without relying on additional libraries.

Why Use MutationObserver?

The MutationObserver API is a native JavaScript feature that lets you observe DOM changes, such as:

• Adding or removing elements.
• Modifications to attributes of existing elements.

In the case of Elementor popups, it’s perfect for detecting when the popup modal is dynamically added to the DOM.

Code to Detect Elementor Popups Show

Here’s a complete code snippet that you can use in your project:

// Select the <body> element
const body = document.body;

// Create a MutationObserver
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // Check if new nodes were added
        if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
                // Check if the added node is an Elementor popup modal
                if (node.classList && node.classList.contains("elementor-popup-modal")) {
                    console.log("Elementor popup detected:", node);
                    // Add your custom logic here
                }
            });
        }
    });
});

// Configure the observer to monitor the <body>
observer.observe(body, { childList: true });

// Stop observing when no longer needed (optional)
// observer.disconnect();

How It Works

• Monitoring <body>:
  • The <body> element is observed because Elementor injects its popups as child nodes of the <body>.
• MutationObserver:
  • We use the MutationObserver to watch for changes in the child nodes of <body> by setting { childList: true }.
• Filtering Added Nodes:
  • For each added node, we check if it has the class elementor-popup-modal, which identifies Elementor’s popups.
• Custom Actions:
  • When the modal is detected, you can execute any logic in the block where the console.log statement is located.

Practical Use Case

Suppose you want to apply a custom animation when an Elementor popup appears. You can modify the code like this:

if (node.classList && node.classList.contains("elementor-popup-modal")) {
    console.log("Elementor popup detected:", node);
    node.style.opacity = 0; // Start invisible
    setTimeout(() => {
        node.style.transition = "opacity 0.5s";
        node.style.opacity = 1; // Fade-in effect
    }, 0);
}

Why Choose Vanilla JS?

• No Dependencies:
  • Reduces the overall project size by eliminating libraries like jQuery.
• Improved Performance:
  • Vanilla JavaScript is generally faster since it doesn’t have the overhead of handling selectors and events.
• Modern Compatibility:
  • MutationObserver is supported in all modern browsers, including Edge and Safari.

That’s it!

Using MutationObserver to detect Elementor popups is an elegant and efficient solution, especially for developers who prefer not to rely on jQuery. With this code, you can fully customize how you interact with Elementor popups, whether it’s adding animations, tracking events, or implementing other custom logic.

If you found this tip helpful, share it with other developers and leave your ideas for popup customization in the comments!

The post Handle Elementor Popup Events Without jQuery appeared first on Eduardo Villão - EN.

In this guide, I’ll walk you through a simple yet powerful solution that adheres to WordPress’s standard for updates, making the process completely transparent for your users. To make this possible, I’ve developed a custom GitHub Action and a PHP script that work together to handle updates effortlessly. This is the same solution I use for some of my own plugins, and now I’m sharing it with the community so you can benefit from it too.

No extra dependencies, no fuss—just GitHub and a bit of PHP magic. Let’s get started!

What is self-host plugins?

Before diving in, let’s take a step back: self-hosting plugins means managing your plugin’s storage and updates independently, outside the WordPress.org repository. So you take control of where your WordPress plugins are stored and how updates are delivered, without relying on the official WordPress Plugin Repository. Instead of hosting your plugin on WordPress.org, you use your own infrastructure—such as GitHub, a private server, or any other file host—to manage your plugin’s lifecycle.

In essence, self-hosting empowers developers to build, distribute, and update plugins on their own terms, while still providing users with a seamless and familiar update experience.

What is required to self-host plugins on Github and deliver updates?

Now that we understand the basics of self-hosting plugins, let’s discuss what’s needed and how the process works. At a high level, you’ll need:

1. A server (in our case Github):

Provide plugin details: The server hosts metadata about your plugin, including the latest version, download URL, and other required information.

Store distribution files: This includes the .zip file of your plugin, which will be downloaded during the update process.

2. An Update Checker Script in Your Plugin

Fetch data from the server: The script communicates with your server (GitHub in this case) to retrieve the latest plugin details.

Compare versions: It checks whether the version installed on the user’s site is outdated by comparing it with the latest version available on the server.

Forward updates: If a new version is available, the script seamlessly integrates with WordPress’s default update system, making the process transparent for the user.

With these two components working together, you can deliver a smooth and automated update experience for your plugins, all while retaining full control over the distribution process.

So, based on this structure, let’s talk about the GitHub Action and custom PHP script that I developed to simplify everything. These will be the focus of the next sections, and I’m excited to share how you can implement them for your own projects!

The server side on Github

The goal here isn’t to dive deeply into how GitHub Actions that I developed work or cover every technical detail. For that, I’ll create a separate, more technical post. Instead, let’s take a step back to understand the big picture of the action’s workflow and why it’s so essential to our solution.

At its core, the GitHub Action automates the creation of everything needed for the plugin update process. Here’s the high-level flow:

1. Generate JSON Metadata

The action parses your readme.txt and other relevant files to create a JSON file containing metadata about your plugin, such as version, download URL, description and much more. These metadata are essential for the PHP script on plugin side to query the server and make the checks to verify if is updated.

The key detail here is that the download URL is automatically generated to point directly to the .zip file in the release created by the action. This means WordPress and your plugin will fetch updates directly from GitHub, ensuring a seamless and efficient update process.

2. Prepare the Distribution Package

The action compiles your plugin files into a .zip package, ready for distribution. During this process, specific rules can be defined to exclude unnecessary folders or files—such as development directories, test cases, or build artifacts—that shouldn’t be included in the final plugin package. This ensures a clean and optimized distribution file, reducing its size and avoiding unnecessary files being downloaded by users.

3. Release Creation

Once the metadata and distribution package are prepared, the action automates the creation of a new GitHub Release. This release serves as the hosting point for the .zip file. The release is tagged with the corresponding plugin version, ensuring WordPress and the PHP script can correctly fetch the latest version. This streamlined process makes the release instantly accessible, ensuring smooth updates for your users.

This streamlined process ensures that every time you create a new tag/version of your plugin, all required files and metadata are automatically prepared and hosted, ready to deliver updates to your users.

If you’d like to dive into the complete implementation, check the GitHub repository. The README provides detailed examples and instructions to guide you through the implementation process: https://github.com/eduardovillao/wp-self-host-updater-generator.

The plugin side – update checker file

As with the previous section, I’ll create a dedicated post to dive deeper into the technical aspects of this PHP file. For now, let’s focus on understanding the overall flow and what this script does to ensure plugin updates work seamlessly.

The PHP script serves as the “bridge” between the plugin installed on the WordPress site and the server-side metadata hosted on GitHub. Here’s a high-level view of how it operates:

1. Add a Simple PHP File to Manage Updates

The update checker script is integrated directly into your plugin. It listens for WordPress’s native update events and hooks into filters like plugins_api and site_transient_update_plugins to manage and provide update information dynamically.

2. Request JSON Data from the GitHub Repository

The script queries the GitHub-hosted JSON metadata file for the latest information about your plugin, including the current version, description, download URL, and other important details. This step ensures the site always has access to accurate, up-to-date plugin information.

3. Compare Current Version vs. Latest Version

Once the JSON data is retrieved, the script compares the currently installed version of the plugin with the version available in the metadata. If the versions match, no action is taken. If a newer version exists, the script forwards the update information to WordPress’s built-in update system.

4. Follow the Default WordPress Flow to Upgrade

If a new version is available, WordPress takes over using its default upgrade mechanism. This ensures a seamless and familiar experience for end users, who can update the plugin just like they would with any other WordPress plugin.

If you’d like to find the complete code along with examples of how to implement check here the repository’s README: https://github.com/eduardovillao/wp-self-host-updater-checker

This simple yet powerful script is what makes self-hosted updates possible. For those who want to dig deeper, the accompanying code and the flowchart above illustrate the inner workings in greater detail. Stay tuned for a more technical post that will break down this script line by line!

And that’s it!

If you have any questions, need help with implementation, or have tested this solution and want to share feedback, feel free to drop a comment below. I’d love to hear from you and have a conversation about your experience. Let’s collaborate and make this solution even better together!

FAQ

1. Will this works with mu-plugins?

Partially! The “server” side on GitHub is fully capable of managing MU-Plugins as well. However, since MU-Plugins don’t follow the same update flow as regular WordPress plugins, the PHP script will require some adjustments to handle them. I’m already working on these changes and will share the solution for MU-Plugins soon.

2. Will this works with Themes?

Not yet! Some modifications are needed to support themes. For now, this solution works exclusively with plugins. But don’t worry—I’m already working on it, and I’ll share updates on theme support soon.

3. Can I validate the user license before delivering updates?

This flow is designed for “free” plugins, so license validation isn’t currently supported. However, I’m exploring ways to incorporate this feature, and I’ll likely share updates about it in the near future.

4. Will this work with private repositories?

Almost! The action don’t need any change and is working now, but the php script need some changes because to use private repositories, a token is required to authenticate requests for the JSON data. I’ll share more details on how to implement this soon.

The post How to Self-Host WordPress Plugins on Github and Deliver Updates appeared first on Eduardo Villão - EN.

How to create action after payment confirmed on WooCommerce?

Snippet to start specific function after payment is confirmed on WooCommerce. In this example, after payment is confirmed set the new value to user.

function checkPayment ($order_id) {
    
    ///get the order
    $order = new WC_Order($order_id);
    $user_id = $order->get_user_id();

    ///check for set info
    update_user_meta( $user_id, 'field_name', 'field_value' );
    
}

add_action( 'woocommerce_payment_complete', 'checkPayment' );

Important

This Snippet requires the payment method to call woocommerce_payment_complete() / $order->payment_complete(). Most payment methods do this already because is default on woocommerce payment method.

Do you like the post? Please, leave your comment!

The post Action after confirm payment on WooCommerce appeared first on Eduardo Villão - EN.

Add a mask to the Elementor form

Just download the plugin in the WordPress directory and install it on your website: https://wordpress.org/plugins/form-masks-for-elementor/

See how the plugin works in this video:

Do you see how easy it is?

Do you like the post? Please, leave your comment!

The post How to add a mask to the Elementor form [FREE] appeared first on Eduardo Villão - EN.

Did you ever need to use the Elementor tabs widget (or Tabs), and needed to center the tabs, but did not find these options in the widget? (unfortunately this option does not even exist in the Widget).

Yeah, you’re not the only one. I have received this doubts on social networks and through our consultancy. So, without much fanfare, let’s get the solution!

How to center the tabs?

It’s simple, you’ll need to use CSS code that can be inserted into the Elementor widget itself (if you’re using the PRO version) or the CSS editor for your theme.

.elementor-tabs-wrapper {
    display: flex;
    justify-content: center;
}

Ready, the result will be this:

I hope that you enjoyed.

Do you like the post? Please, leave your comment!

The post How to center Tabs on Elementor appeared first on Eduardo Villão - EN.

It’s easier than you think. I’ll show below.

How to center the Contact Form 7 submit button

To do this is very simple. You just need to create your contact form the way you want it, and add the following code in your CSS editor or theme editor:

input.wpcf7-form-control.wpcf7-submit {
   display: block;
   margin: 0 auto;
}

Ready, the result will be this:

I hope that you enjoyed.

Do you like the post? Please, leave your comment!

The post How to center the Contact Form 7 submit button appeared first on Eduardo Villão - EN.