JavaScript on Simon's Blog

JavaScript Custom Event (Dispatcher and Listener)

Tue, 14 Apr 2026 00:00:00 +0000

Event Listener / Dispatcher

The addEventListener() method must have been familiar to you if you’ve worked with JavaScript, for instance:

1
2
3

document.addEventListener("DOMContentLoaded", (event) => {
	...
}); //Do something when the document finishes loading

const element_button = document.getElementById("example-button");
element_button.addEventListener("click", (event) => { 
	alert("Example Button Pressed");
    ...
}); //Show alert message when the button is pressed

You can find a full list of the DOM events in the below links:

Below are some of the most commonly used event:

Vue Component (Nuxt UI Component) on a Drupal Site

Wed, 04 Mar 2026 00:00:00 +0000

Vue in Drupal: Basic Component (Counter)

For reference purpose I have put the relevant files mentioned in this section in a .zip file: Archive-1.zip

Step-1: Installing and Configure Vue and Vite

To begin with, before we complicate things by bring the Nuxt UI component library into the equation, let’s first setup Vue framework and make sure it is operating properly by setting up a simple counter that uses ref() reactivity API.

JavaScript Event Bubbling (and Composed Property in Web Component)

Mon, 17 Nov 2025 00:00:00 +0000

Event Bubbling

Event bubbling is the default propagation mechanism (sequence) in the DOM, where an event first occurs on a targets element (e.g. <button>), it first runs on that element, then bubbles up to its parent, then grandparent (e.g <div>), and so on up the DOM three , until it reaches the root (i.e. <html>).

Event bubbling allows the parent elements to handle events that originate from their descendants, nesting element. By attaching event listeners to these elements, you can respond to user interactions, for instance: you can add event listener to a <div> with a <button> in it, such that when the <button> inside got clicked, the <div> border changes colour.

Skeleton Load Animation using Vanilla JavaScript

Wed, 03 Sep 2025 00:00:00 +0000

Introduction

Skeleton load animations are lightweight placeholders that mirror a page’s final layout, turning waiting into understanding. By revealing structure immediately, they set clear expectations, reduce perceived wait time, and prevent layout shifts.

This visual bridge helps users form a mental model of what’s coming, improves continuity, and feels faster even when the actual load time doesn’t change. When designed with subtle motion, progressive rendering, and accessibility in mind, skeletons signal polish and trust—far more reassuring than a generic spinner.

[PENDING] ECMAScript / Javascript New Feature

Tue, 29 Jul 2025 00:00:00 +0000

w3schools

https://www.w3schools.com/js/js_2025.asp https://www.w3schools.com/js/js_2024.asp https://www.w3schools.com/js/js_2023.asp https://www.w3schools.com/js/js_2022.asp https://www.w3schools.com/js/js_2021.asp https://www.w3schools.com/js/js_2020.asp …

Other

https://app.daily.dev/posts/4pzxsjQcM?utm_source=notification&utm_medium=email&utm_campaign=digest https://medium.com/@emre.deniz/es2025-the-evolution-of-javascript-93d9f6fd5f5b

Cross-Document View Transition for MPA - 101 with Examples

Thu, 10 Apr 2025 00:00:00 +0000

1. Basic Cross-Document View Transition

Earlier before this feature official go live, you have to add the meta-tag: <meta name="view-transition" content="same-origin"> , but this is no longer the case, as view transition api has been updated to use a css-based at-rule @view-transition.

In the @view-transition at-rule, set the navigation descriptor to auto to enable view transitions for cross-document, same-origin navigations. Also you might have noticed the @media at-rule wrapping the transition, this is for respcting user’s prefers-reduced-motion setting (e.g. MacOS when you have “Reduce Motion” on it will not use view transtion)

[Excerpt] JavaScript Fatigue: What is it ? and How to Manage it ?

Tue, 08 Apr 2025 00:00:00 +0000

What it means to have JavaScript Fatigue ?

JS fatigue is often linked with analysis paralysis (also called choice paralysis). JS analysis paralysis can occur because of the huge range of options when selecting a framework, tooling, testing suites, and more for a new application. Choosing the right framework or library can be challenging and occasionally even paralyzing, but having a wealth of tools at our disposal allows us to be more selective about what’s best for the job at hand. In some cases, options help us to avoid fatigue by supplying an ideal solution for a specific project.

[Note] NextJS Application in DDEV

Tue, 18 Mar 2025 00:00:00 +0000

Instruction

To begin with, navigate to the root directory of your NextJS application, and initialize the DDEV with the following:

1
2

cd ./example-path-next-js-app
ddev config --project-name="next-js-example" --project-type=generic --webserver-type=generic

Then you will need to modify DDEV to:

Run extra daemons using web_extra_daemons
Expose the extra daemons port using web_extra_exposed_ports (aka ddev-router)

Via appending th efollowing lines in the .ddev/config.yaml file:

...
web_environment: []
corepack_enable: false

+ # NEXT.JS RELATED CONFIGURATION -- [ START ]
+ web_extra_daemons:
+     - name: "nextjs-site"
+       command: "npm install && npm run dev"
+       directory: "/var/www/html"
+ web_extra_exposed_ports:
+     - name: NextJS Eagle OCR
+       container_port: 3000
+       http_port: 9998
+       https_port: 9999
+ # NEXT.JS RELATED CONFIGURATION -- [ END ]


# Key features of DDEV's config.yaml:
# name: <projectname> # Name of the project, automatically provides
#   http://projectname.ddev.site and https://projectname.ddev.site
...

Finally restart the DDEV project services and reveal the url of the new application:

JavaScript MutationObserver [PENDING]

Wed, 11 Dec 2024 00:00:00 +0000

MutationObserver

Example

https://nginx-feature-phase1-migrated-new-chiefscientist.govcms7.amazee.io/news/publications

// REMOVE TRAILING SPACE FOR AUTO COMPLETE ON PUBLICATION AND SPEECHES
    function addEventListener_removeAutoCompleteNumber(input_selector) {
      const removeTrailingNumberPattern = (str) => str.replace(/\s*\(\d+\)$/, '');

      const attachHandlers = (input) => {
          const updateValue = () => {
              setTimeout(() => {
                  input.value = removeTrailingNumberPattern(input.value);
              }, 0);
          };

          // Handle focusout for manual cleanup
          input.addEventListener('focusout', () => {
              input.value = removeTrailingNumberPattern(input.value);
          });

          // Handle dynamic autocomplete menu updates
          const observer = new MutationObserver((mutations) => {
              mutations.forEach((mutation) => {
                  if (mutation.addedNodes.length) {
                      document.querySelectorAll("ul.ui-menu.ui-autocomplete > li > a.ui-menu-item-wrapper").forEach((item) => {
                          item.onclick = () => updateValue();
                      });
                  }
              });
          });

          // Observe the autocomplete menu for changes
          const autocompleteMenu = document.querySelector(".ui-menu.ui-autocomplete");
          if (autocompleteMenu) {
              observer.observe(autocompleteMenu, { childList: true });
          }
      };

      // Attach handlers to all matching inputs
      document.querySelectorAll(input_selector).forEach((input) => {
          input.addEventListener('input', () => {
              setTimeout(() => attachHandlers(input), 500);
          });
      });
    }

    // Initialize on DOM load
    document.addEventListener('DOMContentLoaded', () => {
      addEventListener_removeAutoCompleteNumber(".path-news input[data-once='autocomplete']");
      addEventListener_removeAutoCompleteNumber(".path-speeches input[data-once='autocomplete']");
      addEventListener_removeAutoCompleteNumber(".path-publications input[data-once='autocomplete']");
    });

React/Vue Framework Component in Drupal

Wed, 13 Nov 2024 00:00:00 +0000

Intuition

The notion has repeatedly occurred to me since I first entered the Drupal industry, where I have observed numerous online tutorials and blog posts asserting the necessity of frameworks such as Vue and React. These resources often emphasize that beginners, like I was at the time, should familiarize themselves with these technologies. Amidst the enthusiasm for these new frameworks, there exists a tendency to disparage traditional content management systems (CMS) such as WordPress, which are frequently characterized in bleak terms as an “old, dying whale.” This idea raises significant concerns about my future in the field.

JavaScript Debugger [PENDING]

Sun, 16 Jun 2024 00:00:00 +0000

The Most Important Skill You Never Learned https://www.youtube.com/watch?v=l8pe_MSX4Lc&list=WL

JavaScript Promise 101 - Reasoning

Sun, 09 Jun 2024 00:00:00 +0000

Why Promise ?

To begin with, let’s understand what is ?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them.

– MDN Web Docs

and why we will need the concept of Promise ?

Promise provide you a way to reducing call-back hell

Promises give us the ability to write cleaner code

Promise allow you to handle error together (or optionally by each promise)

– ColorCode - JavaScript Promises

Difference of var, let, const in JavaScript

Sun, 12 May 2024 00:00:00 +0000

TLDR Take Away

Method-1

(easy to practice) Always use let !

Method-2

(most agreed in community) Use const by default, only change const to let if afterwards you find yourself in need to change/update the variable.

TLDR Comparison

var
- Declares a variable with function-scope or globally if declared outside of a function.
- It can be re-declared and can be updated.
let
- Declares a variable with block scope (i.e., confined to the block, statement, or expression where it is used)
- It cannot be re-declared within the same scope, but can be updated.
const
- Similar to let in terms of block scope
- The variables declared with const must be initialized at declaration,
- Const varaibels cannot be updated, and cannot be re-declared.

(If you are really into knowing the fine difference between each keyword, there’s plenty materials you can find online, I’ve put some of the MDN official documents in the reference section for reference purpose.)

jQuery dollar sign ($)

Fri, 08 Dec 2023 00:00:00 +0000

jQuery dollar sign

Why isn’t the dollar sign working ?

In the normal scenario we can use one of the following:

1
2

$("#element-name").xxx();      /* Normal jQuery */
jQuery("#element-name").xxx(); /* Safe   jQuery */

But in some area case the the “normal jquery” will not function anymore (for instance the below); After some quick research online, we found this has to do with the “jQuery compatiibilty mode”, which serves the purpose to avoid conflict with other javascript library. (other library may have also use the dollar sign, or extended the function of dollar sign, importing jquery with out the compatibility mode may override these functions).