Simon's Blog

[Note] Drupal Module for Developers: Devel

Mon, 11 May 2026 00:00:00 +0000

[TOC]

Commonly Used Features

Inspect Variables via DPM

After installing Devel, you get access to the dpm() function, where you can use to dump/inspect variables in your PHP scripts:

Comparing to dump() which output the variable data directly into page content at the exact location where this function is called, dpm() sends the output to the standard Drupal “message” area only

Sometimes the variable you want to dump is too big to be dumped with the page itself (the page may either take a long time to load or simply freeze), in that case, you can also use the dd() function provided by Devel, which will replace the whole original page content with just the dump result (but it only supports Symfony styled dump):

Drupal View - Contextual Filter

Sat, 09 May 2026 00:00:00 +0000

Introduction

In Drupal Views, you can apply filters to display only results that match specific criteria—for example, content type = “Standard Page” and published = “Yes.” You can also expose these filters so that users are able to adjust them.

A contextual filter is a specific type of filter that derives its criteria dynamically from the surrounding context. Unlike regular filters, which use either a fixed criterion defined when the view is built or an exposed filter provided by user input, a contextual filter adapts based on external context. Most commonly, this context comes from the URL, but it can also originate from other sources, such as the logged-in user’s ID.

Drupal View - Relationships

Wed, 06 May 2026 00:00:00 +0000

When you first create Drupal view, you will get to pick the “type of entity” that you want the view to be showing (Show setting) , for instance: Content, Taxonomy Terms, Media, Users, Paragraph, etc.

Once this setting selected, and the view is saved, it becomes effective locked, because it defined the view database base table, for instance:

when you select “media” as your “type of entity” to show, Drupal View will join the multiple “media” related tables (e.g. media, media__field_data, media__field_media_image, media_field_media_video_file, etc) and use that as the base table:

[Headless Drupal 101] Astro + Drupal Basic Setup

Thu, 23 Apr 2026 00:00:00 +0000

Executive Summary

This guide demonstrates how to build a decoupled Drupal site using Astro as the frontend. By separating backend content management from the presentation layer, you can leverage Drupal’s robust modeling while utilizing modern JavaScript frameworks for a faster, component-based user experience.

Step 1: Backend Setup (Drupal)

Environment: Install Drupal using DDEV.Modules:

Enable JSON:API and Serialization core modules.

Content: Create a sample “Article” and verify the output at https://[base-url]/jsonapi/node/article.

Step 2: Frontend Setup (Astro)

Git Hooks (and Pre-Commit Hook to Check Formatting)

Wed, 22 Apr 2026 00:00:00 +0000

Like many other Version Control Systems, Git has a way to fire off custom scripts when certain important actions occur. There are two groups of these hooks: client-side and server-side. Client-side hooks are triggered by operations such as committing and merging, while server-side hooks run on network operations such as receiving pushed commits. You can use these hooks for all sorts of reasons.

Null Checker / Null Coalescing Operator (in Twig and PHP)

Wed, 22 Apr 2026 00:00:00 +0000

Check if Variable is Null (`isset()`)

You can use isset() to determine if a variable is declared and is different than null. It returns false when checking variables that has been assigned to null, this exclude the false boolean value; i.e. isset(false) will return true.

You can perform ternary operation using isset() to set value if it is null:

# Assign default value using Standard if-conditional
if (is_null($var)) { $var = 'default'; } 
# Assign default value using Short-hand ternary operation 
$var = isset($var) ? $var : 'default';

(*There’s also empty() and is_null() but they have some slightly difference , you can refer to the following table I copied from this stack-overflow post for reference:

Drupal Theme -- Import Default Configuration on Theme Install

Thu, 16 Apr 2026 00:00:00 +0000

Theme Import Configuration on Install

Firstly before we proceed to importing some default configuration on theme enabling, we must know what default configuration to import. In Drupal, this is usually defined as a YML file with certain schema, for instance, below an example of a node’s configuration, specified in its corresponding schema node.type.article.yml: FILE node.type.example_mytype.yml

type: example_mytype
name: Example
description: 'Use <em>example</em> content to get to Drupal 8 development better.'
help: ''
new_revision: false
display_submitted: true
preview_mode: 1
status: true
langcode: en
dependencies:
  module:
    - example
  enforced:
    module:
      - example

Though you can write it manually like the above example, it is both trivial to write and check to ensure its schema aligns with what Drupal consider as valid. I would much more recommend using the drush cex command to export the configuration and sanitise them to be available importable configuration yml files.

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:

Drupal Icon API - Example with HeroIcon

Wed, 08 Apr 2026 00:00:00 +0000

Introduction

Drupal 11.1 introduced the new Icon API, which allows modules and themes to define icon packs. An icon pack consists of a series of icons, each with a unique identifier that the system can then use. Modules and themes can alter icon packs.

– Ref: Drupal.org > Develop > Drupal APIS > Icon API

It is highly recommended that you read the offical documentations (above) and experiment yourself, once you have a rough understanding you can continue via trying out the below example.

Vite Pre-Bundle Process & JavaScript Module System (CommonJS,AMD,UMD,ESM)

Fri, 27 Mar 2026 00:00:00 +0000

On the feature page of the Vite’s Documentation, on the upper-most section, titled: “npm Dependency Resolving and Pre-Bundling”, it says:

Native ES imports do not support bare module imports like the following:
1
import { someMethod } from 'my-dep' 
The above import will throw an error in the browser. Vite will detect such bare module imports in all served source files and perform the following:

Pre-bundle them to improve page loading speed and convert CommonJS / UMD modules to ESM. The pre-bundling step is performed with esbuild and makes Vite’s cold start time significantly faster than any JavaScript-based bundler.

Rewrite the imports to valid URLs like /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd so that the browser can import them properly.

There are many terminologies mentioned here: “Native ES import”, “CommonJS/UMD/ESM modules”, “pre-bundling”, without understanding towards these, I don’t think I can justify the above paragraph, so in this post I’ll delve into the details about these concepts and why one may need Vite for the next project.

Drupal Custom Module -- Configuration and Settings Form

Thu, 19 Mar 2026 00:00:00 +0000

Introduction

Using a dedicated settings form to control the configurations for a Drupal custom module centralizes and simplifies configuration. Comparing to hard-written configuration/variable that can only changed by modifying code, this approach is more maintainable, it allows the administrator to make run-time teaks on the website through a consistent, user-friendly UI.

Below is an example of the “configuration + settings form page” provided by “drupal/coffee” module:

Configuration API

To begin with, custom module may have configuration but without having a corresponding settings form, to do that you’ll need to create a config folder to contain the following files (refer to this post for more details):

Drupal Custom Module -- Cron Job (Drupal Cron API)

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

Introduction

Customisable cron hooks in Drupal provides the flexibility for modules to schedule and run periodic tasks without manual triggering, when you implements the hook_cron() function in module’s module_name.module file, the engine will call the hook whenever a cron run happens, in an interval as per defined by administrator OR manually triggered via “Run CRON” button in the backend or drush cache:clear command.

This will enable varies use cases, most commonly periodic maintenance work, for instance:

Why and when should I be using Flash's HSS (High-Speed-Sync) Mode ?

Thu, 05 Mar 2026 00:00:00 +0000

Why should I use HSS ?

To begin with, we must revise how the flash works:

When the flash is triggered (either when front curtain fully opens, or just before rear curtain starts drops), it sends a single, instantaneous burst of light (with the percent of energy that you set on the flash, usually from 1/256 to 1/1 percent), and this happens in usually less than 5 ms OR 1/200 second (this usually differs depending on the manufacture of the flashlight, and the power level; For instance, the Sony HVL-F60RM II have a flash duration in less than 2.8ms OR 1/350 second at 1/1 Manual Power Level).

GovCMS Error - Module were not Loaded because of Security Advisory

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

**Warning **⚠️

Do NOT push the updated composer.json to the production environment !

You should only ignore security advisory on local development environment, NOT the production !

I got the following error when running ahoy build for a SaaS GovCMS client:

>    ahoy build  
	 => [cli 8/9] RUN mv /tmp/composer.json /app/composer.json 
     => ERROR [cli 9/9] RUN rm composer.lock && composer install -d /app && composer clearcache                                                                                                                                                                                              24.3s
     => CANCELED [nginx stage-1 3/3] COPY redirects-map.conf /etc/nginx/govcms-redirects-map.conf                                                                                                                                                                                             0.7s
     => CANCELED [test stage-1 3/3] COPY tests /app/tests/                                                                                                                                                                                                                                    0.7s
     => CANCELED [php] exporting to image                                                                                                                                                                                                                                                     0.5s
     => => exporting layers                                                                                                                                                                                                                                                                   0.5s
    ------
     > [cli 9/9] RUN rm composer.lock && composer install -d /app && composer clearcache:
    0.370 No composer.lock file present. Updating dependencies to latest instead of installing from lock file. See https://getcomposer.org/install for more information.
    0.382 Gathering patches from patch file.
    0.382   - Removing drupal/core (10.5.6)
    0.382 Removing package drupal/core so that it can be re-installed and re-patched.
    7.900 Deleting /app/web/core - deleted
    7.907 > DrupalProject\composer\ScriptHa

According to the error, we can see it is caused by drupal/captcha[2.0.9] no being loaded because of a security advisory (potential vulnerability I assume), for local development purpose, we can ignore this via the following steps:

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.

Photography - How to use CPL Filter ?

Mon, 23 Feb 2026 00:00:00 +0000

What is CPL Filter ? How does it Work ?

A CPL (or Circular Polarising Filter) is a filter often placed in front of a camera lens in order to darken skies, manage reflections, or suppress glare from surface of lake, sea or glossy objects.

The lights comes from sun or artificial light source are usually non-polarised, however, when they reflects from (non-metal) glossy surface, the reflected light becomes partially polarised, this effects is maximum at Brewster’s angle (the angle differs depending on the density of the medium, The Brewster’s angle for glass is about 56°, for air-water is about 53°).

Drupal AI Search View (using Pinecone Vector Database)

Tue, 03 Feb 2026 00:00:00 +0000

Overview / Flowchart

(* to my current understanding….)

Flow1: Index Content (Text Embedding Generation and Storage): Content will be passed from “search api” to “ai search” module to be transformed into vector embedding. The transformation will be performed by text embedding modal (there’re usually service/api provided by LLM companies such as “text-embedding-3-small” provided by ChatGPT), these vector embeddings are stored into vector database for future usage.

Flow2: Search via Query (Compare Vector Similarity and Return Top-K Result): User will enter a search query from a “search view”, the entered query will be transformed into vector embedding using the same text embedding model used (earlier in the indexing process). The vector representation of the query will then be compared with the vectors in the vector database to compute to come up with the top-k most similar results (using algorithm such as: cosine similarity, euclidean distance, or dot product). The index of these top-k most similar results will be returned and Drupal search API will translate those to search outcomes.

[Note] Drupal Cleanup Private Files After Submission (After Sending Email / Handler)

Mon, 26 Jan 2026 00:00:00 +0000

Drupal Delete Files (Purge Private File) After Submission after sending Email (via extending / altering sendMessage() function in /WebformHandler/EmailWebformHandler.php)

闪光灯色片以及色温法 (Flash Color Balance Technique)

Tue, 20 Jan 2026 00:00:00 +0000

闪光灯+色片对画面色温的影响

首先我们要了解一下闪光灯本身, 和闪光灯色片对画面色温的影响:

⬇️ 关闭闪光灯(无色片) + 自动白平衡 (Auto)

⬇️ 打开闪光灯(无色片) + 自动白平衡 (Auto)

可以看到闪光灯本身是有点偏冷色的, 所以我个人的习惯一般是会在打开闪光灯(无色片)的情况下, 把白平衡调成偏暖色的daylight或者shade, 来中和闪光灯的冷色调:

⬇️ 关闭闪光灯(无色片) + 阴天白平衡 (Shade)

⬇️ 打开闪光灯(无色片) + 阴天白平衡(Shade)

闪光灯 + 橙色/黄色色片

接下来我们给闪光灯加上橙色的色片, 可以发现都是自动挡的情况下, 加了橙色色片的图片会变的更暖;

因此这个时候我一般这个时候会用手动的Incandescent设置的白平衡(白炽灯), 用偏冷的设置来中和闪光灯的冷色;

⬇️ 关闭闪光灯(无色片) + 自动白平衡 (Auto)

⬇️ 打开闪光灯(橙色色片) + 自动白平衡 (Auto)

⬇️ 打开闪光灯(橙色色片) + 白炽灯白平衡 (Incandescent)

⬇️ (不推荐) 打开闪光灯(橙色色片) + 阴天白平衡 (Shade)

闪光灯 + 绿色色片

如果你使用闪光灯+绿色片, 会发现已有的预设白平衡档位基本上都实现不了正确的白平衡:

自动白平衡(auto)会显得主体偏绿
白炽灯白平衡(Incandescent) 会显得主题过冷
阴天白平衡(Shade) 也会显得偏绿

这个时候就要祭出自定义白平衡设置了, 可以使用镜头盖矫正白平衡, 设置一个偏洋红色(绿色色片的互补色)的自定义白平衡; 如果你有幸使用的是索尼的原厂闪光灯, 你也可以使用他的“闪光灯自动白平衡”设置. 原厂的闪光灯色片里会有一个小磁铁让机器识别现在装的色片从而自动设置白平衡.

[Code Snippet] Drush SQL Commands

Mon, 19 Jan 2026 00:00:00 +0000

TLDR;

Export Database: drush sql:dump --result-file="$(date +'%Y%m%dT%H%M%S') [Database] $(drush status --field=db-name).sql"

Export Filebase: zip -r -0 "$(date +'%Y%m%dT%H%M%S') [Filebase] path$(drush status --field=root|sed 's%/%-%g').zip" .

Import Database: drush sql:drop -y && drush sql:cli < example.sql

Drush Dump Database (sql:dump)

Export Drupal’s (default) database as SQL fiel using mysql dump or equivalanet command: (*here drush status --field=db-name is used to get the default database’s name

`1`	`drush sql:dump --result-file="$(date +'%Y%m%dT%H%M%S') [Database] $(drush status --field=db-name).sql"`

Similarly I use the following command to zip all files in public_html folder (as filebase backup): (*here drush status --field=db-name is used to get the root folder’s path, and -0 is used to let zip command run without compression (fastest)

[Lazygit] Fixup Commits and Auto-Squash

Thu, 15 Jan 2026 00:00:00 +0000

TLDR;

Lazygit simplifies the fixup commit and squash process by the following keybinding:

F create fixup commit - create a new !fixup commit with your current changes (these fixup changes will be used later by the auto squash)

S autosquash - squashes all the !fixup commits above the selected commit into their respective target commits

Fixup vs Squash

The difference between squash and fixup, is that squash let’s you edit the resulting commit log message; fixup, on the other hand, defaults to using the previous commit’s log message.

Git Reflog - references log

Thu, 15 Jan 2026 00:00:00 +0000

Introduction

What is Git reflog

The Git reflog is a reference log file that stores a chronological list of all changes made to the HEAD pointer in your Git repository. HEAD always points to the most recent commit, and the reflog essentially tracks every previous commit ever made in the repo.

Think of the reflog as a logbook for your Git branches and other references. It records every change made to these references, enabling you to rewind time and undo any potentially unwanted actions. This can be incredibly helpful when you:

Drupal Installation Profile (& Distribution)

Wed, 14 Jan 2026 00:00:00 +0000

Introduction

Basically an installation profile is a preset of modules/themes/configuration that allows you to skip the trivial and repetitive tasks during the installation phase of the website:

Installation profiles are pre-defined packages that can include core Drupal modules, third party modules, themes and other pre-configurations to get a site working quickly. Profiles can speed up development by reducing some initial processes like configuring text formats / editors, module views, basic templates, content types etc. This provides a big head start when it comes to customising a site based on project requirements. Installation profiles are perfect when you need to create multiple sites with similar functionality.

Drupal Watchdog and Drush Watchdog Command

Tue, 13 Jan 2026 00:00:00 +0000

Quick Peek into “Watchdog” Table

(inside the drupal database)

The watchdog table is Drupal’s system log table. It stores runtime messages generated by Drupal core, (contributed/custom) modules and themes—things like cron activity, errors, warnings, notices, and user actions.

What Each Column in Watchdog Table Means ?

wid: Unique ID for each log entry.
uid: The user ID responsible for the action. (0 = system / anonymous)
type: The source module or category of the message. (For instance: cron → Drupal cron job, webform → Webform module, user → User login/session activity, access denied → Permission issues, php → PHP-level log)
message: The log message itself (Often contains placeholders like: @module, %time, @form in their code, which gets replaced at runtime using variables stored in the variable column)
variable: To store variables/placeholder such as @module, %time, @form mentioned previously (Serialized data (BLOB))

Watchdog Logs in Drupal Backend

In the admin UI, this data appears as Reports → Recent log messages (/admin/reports/dblog)

Drush archive:dump & archive:restore

Tue, 13 Jan 2026 00:00:00 +0000

⚠️ WARNING ⚠️

Use of drush archive:dump and drush archive:restore command on production/sandbox VPS server is discouraged, because they are heavy, intrusive operation that bundle code, files and database together. Because is resource heavy, it may result in long processing time, or memory exhaustion that causes the website to freeze !

Backup Drush Commands - drush archive:dump

1
2
3

drush archive:dump --db   --destination=./20XX-XX-XXTYYYYYY-[database].tar.gz -vvv # Backup Database Only
drush archive:dump --code --destination=./20XX-XX-XXTYYYYYY-[codebase].tar.gz -vvv # Backup the codebase (excluding the file directory)
drush archive:dump --file --destination=./20XX-XX-XXTYYYYYY-[filebase].tar.gz -vvv # Backup Drupal File Directory

Note that:

Terminal Tips - Redirection, Pipe, and More

Mon, 12 Jan 2026 00:00:00 +0000

Command Substitution - `$(comand)`

You can use “output” of certain command as the “input” of other command:

Method-1: via $(command) expression (what’s inside the $() will get evaluated / run first)

1
2

echo "Content of the file temp.md: \n$(cat temp.md)"
vi $(fzf) #FZF will be open first, and the stdout will of FZF will be use as input for vi command

Method-2: via set _var_=$(command) expression (it just a variant of the above, by saving output of certain command to a variable, personally speaking, i feel like this method is mentally easier to comprehend and easier to debug)

[MacOS] Solution for Slow Finder Panel

Fri, 09 Jan 2026 00:00:00 +0000

Solution for laggy, slow finder upload panel or save panel

Pass Variables from Twig Template to JavaScript

Wed, 07 Jan 2026 00:00:00 +0000

Intuition

Think of Twig templates and JavaScript as two different worlds that need to communicate. Twig lives on the server side, where it has access to all your application data, database results, and configuration settings. JavaScript, on the other hand, lives in the browser, where it handles user interactions and dynamic updates. And oftentimes to make some interactable components, we’ll need to pass information from one world to another in order to make that happen.

[Lazygit] Filter Commits by Path (Directory or File)

Tue, 06 Jan 2026 00:00:00 +0000

Method-1: Using Keyboard Shortcut

To filter commit history (3rd / 4th panel) by certain file or directory in LazyGit, first focus on commits/reflog panel, then use <ctrl + s> keyboard shortcut to reveal filter option; Then choose Enter path to filter by, enter the path to your file or directory, and press <Enter>.

Method-2: Using `-f` Flag to Launch

Alternatively you can also specify a path with the -f when launching lazygit: lazygit --filter="content/posts/2021"

[Note] Drush Site:Aliases (with DDEV)

Mon, 29 Dec 2025 00:00:00 +0000

(*this post focuses on the usecase of using drush within a DDEV hosted docker container, i.e. running ddev drush ... command, if you are using globally installed drush a portion of this post may not apply to you.)

TLDR;

STEP-1: Add localhost’s SSH private key to the ddev-ssh-agent container via running:
1
2
3
4
5
>  ddev auth ssh
		Adding 1 SSH private key(s)... 
        Adding key id_rsa
        Identity added: id_rsa (XXXX@YYYYYY.local)
        Successfully added 1 SSH private key(s).
STEP-2: Create file ``$PROJECT/drush/sites/self.site.yml` with the following content

[Scribble] Fluid Sizing using Clamp (inc Fluid Typograph)

Wed, 24 Dec 2025 00:00:00 +0000

Clamp Overview

For the longest time, I have always mistakenly thought that there’s some super-power in the clamp() function, that it “automatically” picks a best number based on min, max, and preferred value given (e.g. if we have clamp(10px, 15px, 20px), the value can be any value between 10px ~ 20px )

But the truth is that clamp doesn’t have ANY magics in it !

The clamp(MIN, PREFERRED, MAX); function is equivalent as: max(MIN, min(PREFERRED, MAX))

GovCMS Maillog on Local Environment

Wed, 24 Dec 2025 00:00:00 +0000

⚠️ Direct Excerpt from:

GovCMS Service Desk Article - Testing emails on a local environment with Mailhog

https://www.govcms.support/support/solutions/articles/51000370643-testing-emails-on-a-local-environment-with-mailhog

By default, if you are on a Ubuntu/MacOS environment, as you run pygmy up you will have maillog service running:

> pygmy up
  Successfully started haproxy
  Successfully created amazeeio network
  Successfully connected haproxy to amazeeio network
  Successfully started mailhog
  Successfully started ssh-agent

When you run pygmy status you can view its status and URL:

Synology Git Service (using SSH Key to Authenticate)

Wed, 17 Dec 2025 00:00:00 +0000

Preliminary Setups

Step 1: Enable SSH Service from DSM

Enable SSH service from Your Synology DSM’s Control Panel (* for security consideration, I would strongly suggest you to change the port away from the default 22, here for showcase purpose I’m using 2222)

Step 2: Install and Enable Git Server

Install and run the “Git Server” package from your Synology DSM’s Package Center:

(Optional) Step 3: Create a New Shared Folder

I’d like to clean my directories clean, my rule is that directory segregate the file of different purpose, hence I’ll create a new “Shared Directory” under DSM to store Git related repositories. (*this step may be optional for you)

[HTMX in Drupal] Client-Side-Tempalte Component using Drupal JSON-API as Data

Thu, 11 Dec 2025 00:00:00 +0000

Introduction

Starting from Version 11.2, Drupal core will include HTMX as a part of its core dependencies, you can attach it to any twig template via the {{ attach_library('core/htmx') }} statement, for instance to achieve the following accordion component using HTMX, simply create the following SDC component:

FILE: olivero/component/htmx_accordion.twig

{{ attach_library('core/htmx') }}
{% set container_id = "content-wrapper-" ~ random() %}
<div class="htmx-accordion active" id="{{ container_id }}">
    <div>   
        {{accordion_title}}
        <button hx-on:click="htmx.toggleClass(htmx.find('#{{ container_id }}'), 'active')">BUTTON</button> <!-- Reference: https://htmx.org/api/#toggleClass -->
    </div>
    <div> 
        {{accordion_body}}
    </div>
</div>

FILE: olivero/component/htmx_accordion.component.yml: only required for SDC component discovery pupose, can leave empty

[Snippet] ddev drupal code snippet (creates experimental site)

Thu, 11 Dec 2025 00:00:00 +0000

This code snippet will help you get a (init/demo/experimental) drupal site you can use for experiment running on your local using ddev in a snap.

[Scribble] Resolve 403 Forbidden Error on Sandbox Server

Wed, 10 Dec 2025 00:00:00 +0000

Just to keep a note for future reference only.

(I’ve encountered this issue several times, but my short memory means I always spend a few minutes figuring out the solution again.)

Nothing to dig into really on this matter ….

What Happened ?

After deploying my website from the local environment to a sandbox for UAT purposes—including creating, importing, and configuring the database—I noticed that some required resources were failing to load. For example, JavaScript and CSS files located in /libraries/drupal-superfish return a “403 Forbidden” error, which causes the menu to function abnormally.

SDC using twig function html_cva()

Mon, 08 Dec 2025 00:00:00 +0000

CVA in React

Class Variance Authority (CVA) is a utility for managing CSS class names based on various conditions. It helps create consistent and maintainable styles in ~~React~~ components by defining variants and conditional classes in a structured manner.

Why Use CVA?

Consistency: Ensures consistent styling across your application.

Maintainability: Simplifies managing conditional class names.

Readability: Improves the readability of your components’ styling logic.

In React you can implement a CVA component via the class-variance-authority library:

[Note] Drupal Module for Developers: WebProfiler

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

WebProfiler adds a toolbar at the bottom of every page and shows you various stats, such as the number of database queries loaded on the page, which services are used, and more.

Ref: Drupal Module - WebProfiler

By default, WebProfiler comes with a toolbar with clickable buttons to reveal some extra information about the website that’s currently running, and its configuration panel you have a lot of other additional toolbar items you can enable, that will greatly improve your developer experience.

[Scribble] GovCMS Non-Production Only Configuration File (via config/dev)

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

What has been discovered ?

My colleague recently come across a GovCMS website that for some reason: doesn’t have a shield on the its production website, however, upon installing the website codebase on local and running ahoy refresh db && ahoy build , a shield magically appeared out of nowhere.

After some investigation, he find that upon putting configuration yml files in the config/dev folder, these files will ONLY be imported on local, as well as on sandbox/development environments on Lagoon (as long as LAGOON_ENVIRONMENT_TYPE!=production)

[Note] Drupal Webform Auto-complete via Google Place API

Mon, 01 Dec 2025 00:00:00 +0000

DEMO: using Google Maps AutoComplete to auto-fill street, suburb, state, postal cost upon search.

Method-1: via Webform JavaScript

As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. Although this API is not scheduled to be discontinued, but google.maps.places.PlaceAutocompleteElement is recommended over google.maps.places.Autocomplete.

Method-1a: via google.maps.places.PlaceAutocompleteElement

Create any field that will later be replaced with the PlaceAutocompleteElement, here I’ll create a search field to showcase, see screenshot
For all the address related fields (e.g. street, suburb, city, country) add custom element CSS classes respectively to be later used by JavaScript to fill their values, see screenshot
Add the following JavaScript to the Webform’s settings: demo-autocompelte-using-PlaceAutocompleteElement.js (Replace API_KEY on the bottom of the file with your Google Maps API key)
Review the outcome of step1 to step3: outcome-gif (if your API key is invalid you’ll get the following warning as you start typing in the address: Google Maps JavaScript API warning: InvalidKey in your console)

Method-1b: via google.maps.places.Autocomplete (deprecated)

~~Create a plain text field in webform to use as the “search field” for address, see screenshot~~

Drupal Interactive Table (via TableField & DataTable)

Fri, 28 Nov 2025 00:00:00 +0000

Intuition

The client requires a table with the following features:

Search functionality via an input field
Column-based sorting
Pagination support

The table should accept a CSV file as input. The CSV data may include HTML tags such as <b>, <i>, or <sup>, which must be rendered correctly with their respective styles.

We were originally was using the DVF (Data Visualisation Framework) modules to achieve this feature, along with some other stuff like charts and graphs, but since it is a modules only used by few, the maintainers don’t seems to have intention of making it Drupal 11 compatible (despite the fact there’s already a merge request).

CSS attr() and if() function

Thu, 20 Nov 2025 00:00:00 +0000

🚨 Warning !

Till this date (2025-11-20), the if() function still only have limited availability across some browsers. This includes: Chrome/Edge 137+ and Opera 121+ Versions; And it is not yet supported by Safari and Firefox !

Introduction

`if()` - Conditional Property Value in CSS

The if() CSS Function allows different values to be set for a property depending on the result of a conditional test. The test can be based on a style query, a media query, or a feature query. (More test may be supported in the future)

CSS Anchor Positioning

Wed, 19 Nov 2025 00:00:00 +0000

Basic Anchor Positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Elements can be defined as anchor elements and anchor-positioned elements. Anchor-positioned elements can be bound to anchor elements. The anchor-positioned elements can then have their size and position set relative to the size and location of the anchor elements to which they are bound.

– MDN Documents: Using CSS anchor positioning

Here for demonstration purpose, I have created a HTML document with a draggable area with a button that will trigger a popover menu. The popover menu will later be positioned relative to the button.

[Scribble] Use CSS Containment (to Improve Render Performance)

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

⚠️ Disclaimer:

I’m NOT too deep in exploring this topic yet, so my understanding at this point may not be 100% accurate… But the performance bump is true, so I think it is worth taking a note at least for my future reference (to revisit this topic one day)

Explanation

CSS containment (contain) enables performance improvement by providing predictable isolation of a DOM subtree (an element + its descendant elements) from the rest of the page. With this property, a developer can declare some parts of the page to be encapsulated as a set of content, and when this encapsulated part is off-screen, the browser won’t need to consider its states (size/layout/style/paint)

[PENDING] Exporting Ulysses to Markdown Format

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

Emma Goto

https://www.emgoto.com/ulysses-to-markdown/

https://dev.to/emma/how-to-export-from-ulysses-to-markdown-13pi

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.

[Scribble] GovCMS D11 Compatibility - Migrate GovCMS8 Modifier to Theme

Tue, 11 Nov 2025 00:00:00 +0000

In order to make a project compatible with D11, the govcms8_modifier module needs to be removed; But in some cases the website might be using the modifier features provided by this module, so below are the steps to migrate these features to the custom theme (such that this deprecated module can be gracefully removed without causing styling issue).

https://github.com/govCMS/GovCMS8/tree/1.x/modules/custom/core/govcms8_foundations/modules/govcms8_modifiers

Step1: Bring Over the xxyyzz.modifier.yml File

Firstly, you need to bring over the govcms8_modifiers.modifiers.yml file to your custom theme:

[Scribble] Run CRON Jobs (Scheduled Tasks) in CPanel

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

In the below example, I will create a executable #cron-job-delete-file.sh bash script file to hold the scheduled tasks commands; change its file permission to be “executable by admin/user”; and add it to cpanel cron job to be ran every 1 minutes:

create the following #cron-job-delete-file.sh in ~/public_html

create the folder #cron-sample-directory at ~/public_html

change the file permission and test the execution via terminal

add the cron job (optionally, you can also add an email to notify you every time when cron job executes)

[Scribble] Web Component - 101 Examples

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

(Source code: example-1-web-comopnent-confetti-and-counter-button.html)

(Source code: example-2-web-component-fancy-tabs.html)

[Scribble] Web Component - Opponent & Proponents

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

Notes and takeaway from DrupalSouth Canberra Nov-2025

BackstopJS Visual Regression Testing (in lagoon/ahoy and ddev)

Sun, 09 Nov 2025 00:00:00 +0000

Notes and takeaway from DrupalSouth Canberra Nov-2025

[Quick Note] Access Database in Docker Container (for GovCMS Local Dev)

Thu, 30 Oct 2025 00:00:00 +0000

Find the exposed port and MySQL database name/password

(I chose to use the TUI LazyDocker, but you can use other approach as you prefer)
Use database management software to open it

(Personally I like to use ones with GUI, hence Navicat Premium (Lite))

[Drupal] Webform - Generate PDF and Attach in Email upon Submission

Wed, 29 Oct 2025 00:00:00 +0000

Intuition

A client of mine requested the feature in their existing webform (on a Drupal10 website) to be able to generate an PDF print-out of the user’s input upon their every submission, and attach the generated PDF to the with the e-mail trigger by the webform’s handler.

This will ensure they have a copy of the user’s input as the ground truth to be referenced in the future, and the signature in the webform can be shared via the email as a part of the PDF, because by default the webform only allows you to attach the link of signature’s PNG image, which means (if you want any user who receive the email to be able to download the signature without a Drupal authenticated account) you will have to expose via a public link.

[Pearson PTE] English Test Note - 全题型考试要点 - (Nydia笔记整理)

Wed, 22 Oct 2025 00:00:00 +0000

本篇笔记整理自 Nydia PTE 机构的第一堂介绍课 (Nago老师)。

课程录像可在此处查看：https://youtu.be/WGdJllc4oz4

写作 Writing

SWT - Summarise Written Text - 27%
- 给一些文字，然后用你的语言回答 (10分钟/题)
- 不需要全部用自己的话，建议找重要的话一模一样抄下来
  - 比如第一句话 /中心句 / 重复的句子
  - 连接词根据是否转折选择, and 或者 , but 然后链接找的下一个句子，
  - 要注意考试的时候不能复制黏贴，需要手动打出来，千万不要拼错
- 字数限制很重要，尽量贴75个词，不要超75个词，到76个词就没有分了
- 只能写成一句话的形式，只有一个首字母大写, 不能有一个以上的句号！
WE - Write Essay - 24%
- 🎯百分百命中! 可以用萤火虫，总共只有16篇作文但是100%命中，一模一样的题目
- 字数尽量要超过250个词，但绝对不能超过限制的300个单词 (20分钟/题)
（其他占分的部分在听力里）
- SST - Summarize Spoken Text - 23%
- WFD - Write from Dictation - 26%

口语 Oral

所有口语相关的题目发音和流利度很重要（如果读错了继续读就好）
RS - Repeat Sentence - 21%
- 最好的联系方法是练习，靠命中55%+（其他题型命中率就很低，没必要刷）
RA - Read Aloud - 10%

[Pearson PTE] English Test Note - 全题型考试要点 - (个人笔记整理)

Wed, 22 Oct 2025 00:00:00 +0000

Self-Introduction

25sec准备，30sec 说话时间，不计入分数统计，但也不能乱说

Please introduce yourself. 
For example, you could talk about one or more of the following:
- Your interests 
- Your plans for future study 
- Why you want to study abroad 
- Why you need to leam English
- Why you chose this test

Answer: Good morning/afternoon, my name is Suowei Hu and I’m currently working as a web developer at a local agency in Fyshwick. During my leisure time I am interested in video games and photography. The main driving force behind my English learning is to develop better people skills at work. The primary reason I am taking this exam is to qualify for a new visa so I can continue working in Australia after my current visa expires.

[Note] Drupal Sandbox Prevent Google Index

Tue, 21 Oct 2025 00:00:00 +0000

Prevent Crawler from Indexing Sandbox

via robots.txt file:

1
2

User-agent: *
Disallow: /

(Apache) via .htaccess file:

`1`	`Header set X-Robots-Tag "noindex, nofollow, noarchive"`

(Nginx) via nginx.conf file:

`1`	`add_header X-Robots-Tag "noindex, nofollow, noarchive" always;`

(Optional) Extra Steps if File/Page Already Indexed

If one of the page or file can already be seen on the Google Search result, and you want to remove it, and forbid random user from accessing it, you can do the following:

[Note] Test Website before Pointing Domain to Server (DNS)

Sun, 19 Oct 2025 00:00:00 +0000

Scenario to Use This Technique ?

When you happen to know the IP address of a domain, but have not assigned a domain for it, AND/OR the website is down due to unknown reason, you are suspecting the issue is domain/DNS resolution, but want to check if the website hosting is working.

Steps to Setup local DNS name resolution ?

(via editing /etc/hosts file directly)

open terminal, and navigate to the user root folder (~ directory)

[Note] Connect to Server using SSH Key (& 1Password agent)

Wed, 15 Oct 2025 00:00:00 +0000

TLDR;

Step1: obtain an public SSH key (either one stored in your password manager or local machine, or generate a new one)

Step2: login normally with username/password for the first time: ssh -p 2222 admin@example.com.au

Step3: edit ~/.ssh/authorised_keys file on the server to add the public key obtained in step1

Step4: edit ~/.ssh/config on your local machine
(if you are using 1Password SSH Key Agent:
1
2
3
4
5
Host example.com.au
  HostName example.com.au
  Port 2222
  User example_user
  IdentityAgent "~/Library/Group Containers/XXXXXXXXXXX.com.1password/t/agent.sock"
(if you are using your locally stored ssh key:

[Note] Local Development: Install Community Contributed Module in GovCMS

Wed, 15 Oct 2025 00:00:00 +0000

When working on GovCMS site uprgade, I found very benefitial to take advantages of some reporting modules from the community. For instance, via installing the Upgrade Status (upgrade_status) module, I can quickly figure out what modules are no longer supported in the newer version of Drupal (and why, see screenshot):

Similarly, if I want to figure out if certain paragraph/modifier is used, I can install Paragraphs Stats (ps) modules and from a glance, figure out the instances a paragraph is getting used, and where exactly (which node) based on its usage report:

[Note] VSCode Terminal Jump To Start/End-of-the-line using Keyboard Shortcut

Fri, 10 Oct 2025 00:00:00 +0000

In your .zshrc or .bashrc file, add the following:

`1`	`bindkey -e`

In VSCode’s “Preferences: Open Keyboard Shortcuts.” (keybindings.json) add the following:

{
    "key": "ctrl+u",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": " \u0015" },  // clear current line in terminal, sends ctrl+u to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+backspace",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": " \u0015" },  // clear current line in terminal, sends ctrl+u to terminal
    "when": "terminalFocus"
},
{
    "key": "ctrl+a",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0001" },  // move cursor to start of line, sends ctrl+a to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+left",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0001" },  // move cursor to start of line, sends ctrl+a to terminal
    "when": "terminalFocus"
},
{
    "key": "ctrl+e",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0005" }, // move cursor to end of line, sends ctrl+e to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+right",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0005" }, // move cursor to end of line, sends ctrl+e to terminal
    "when": "terminalFocus"
}

Reference

https://code.visualstudio.com/docs/terminal/advanced https://stackoverflow.com/questions/48980499/how-do-i-move-the-cursor-to-the-beginning-of-the-line-in-vscodes-terminal

Drupal Post Update (add_lange_code) memory exhausted issue fix

Thu, 09 Oct 2025 00:00:00 +0000

Original Error

After updating to Drupal 10.3.0, there’s this system_post_update_add_langcode_to_all_translatable_config function added to the web/core/modules/system/system.post_update.php update file, which will get triggered when running post update via drush updb or visiting /update.php.

For some site, this seem to run without any hiccups, but for some others, when running drush updb, I got the following:

 -------- ----------------------------------------- ------------- ------------------------------------------------------ 
  Module   Update ID                                 Type          Description                                           
 -------- ----------------------------------------- ------------- ------------------------------------------------------ 
  system   add_langcode_to_all_translatable_config   post-update   Adds a langcode to all simple config which needs it.  
 -------- ----------------------------------------- ------------- ------------------------------------------------------ 


 Do you wish to run the specified pending updates? (yes/no) [yes]:
 > yes

>  [notice] Update started: system_post_update_add_langcode_to_all_translatable_config
> PHP Fatal error:  Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in /var/www/html/web/core/lib/Drupal/Core/Plugin/DefaultPluginManager.php on line 211
> PHP Fatal error:  Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in Unknown on line 0

In ProcessBase.php line 171:
                                                                                                                                                   
  Unable to decode output into JSON: Syntax error                                                                                                  
                                                                                                                                                   
  Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in /var/www/html/web/core/lib/Drupal/Core/Plugi  
  n/DefaultPluginManager.php on line 211                                                                                                           
                                                                                                                                                   
  Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in Unknown on line 0                             
                                                                                                                                                   

Failed to run drush updb: exit status 1

And updating via the GUI interface at update.php will just end up in infinite loading.

[Scribble Note] Source of CivicTheme Paragraph Variable?

Thu, 02 Oct 2025 00:00:00 +0000

The curiosity came from when I was trying to remove the auto-truncate behaviour from a Promotional Card component, that is setup via the Paragraph Type. After inspecting its corresponding paragraph--civictheme-promo-card.html.twig file, it seems the paragraph uses the SDC civictheme:promo-card directly, without any with statement to assign the variables/slots?

Adding {{dump()}} statement shows that the variables used by the promo-card component somehow magically, are already in-place:

So after some digging, I found the place where the variables gets declared:

[Note] Drupal Set Retrieve Cookie (version 8 ~ 11)

Tue, 23 Sep 2025 00:00:00 +0000

Depending on the version of Drupal you are using, you can achieve the below set/retrieval of cookie slightly differently using different library either in/outside the core

Drupal 11

Starting from Drupal 10.1.0 it is indicated that the core/js-cookie will be refactored out of Drupal 11, and hence instead we should install the contributed module “JS Cookie” and use js_cookie/js-cookie instead for the future support. (see: drupal-change-record-3322720)

`1`	`composer require 'drupal/js_cookie'`

my_library_using_cookie:
  js:
    src/js/my_library_using_cookie.js: {}
  dependencies:
    - core/drupal
    - js_cookie/js-cookie
    
(* theme_or_module.libraries.yml

((Drupal, Cookies) => {
    Drupal.behaviors.myModule = {
        attach: () => {
            // ------------------------------------------------
            // Set a cookie.
            Cookies.set('cutest', 'red panda');
            // ------------------------------------------------
            // Retrieve a cookie.
            const myCookieValue = Cookies.get('cutest');
            // ------------------------------------------------
            // Remove a cookie.
            Cookies.remove('cutest');
            // ------------------------------------------------
            // Store and retrieve as a JSON object. Use of the getJSON method should be avoided as that will be deprecated in js-cookie 3.0.0.
            Cookies.set('cutest', JSON.stringify({ animal: 'red panda' }));
            const cutest = JSON.parse(Cookies.get('cutest'));
            // ------------------------------------------------
        },
    };
})(Drupal, window.Cookies);

(* src/js/my_library_using_cookie.js

Drupal 9 & 10

Starting from Drupal 9.0.0, in order to set Cookie values we will need to use core/js-cookie instead of the core/jquery.cookie, which will be completed removed at Drupal 10.0.0 (see: drupal-change-record-3104677):

[Note] Why Drupal needs jQuery.noConflict() ?

Tue, 23 Sep 2025 00:00:00 +0000

⚠️ WARNING ⚠️

Below are just a assumption I made upon searching some online blog post and Drupal documentation, I really can’t say for sure it is accurate considering how surface level I am with PHP and Drupal

Intuition of the search

If you have read the “JavaScript API Overview” under Drupal API documentation you will have already come across this statement about Drupal uses jQuery.noConflict():

Since Drupal uses jQuery.noConflict() and only loads JavaScript files when required, to use jQuery and the $ shortcode for jQuery you must include jQuery and Drupal as dependencies in the library definition in your MODULE.libraries.yml and add a wrapper around your function. So the whole JavaScript file would look something like this:

[Note] How is a SSH secure connection established (simplified) ?

Mon, 22 Sep 2025 00:00:00 +0000

This post is for people who want to quickly get up to speed with how SSH connection work under the hood with some visuals to assist with understanding. If you want for rigid explanation regarding to this, please refer to the referenced YouTube video and articles.

Overall, it is important to understand that SSH uses asymmetric (public-private) key only for verifying if the client (developer’s machine) is allowed to connect to the host (the VPS), once the verification successes it uses Diffie-Hellman key exchange to establish a shared private key, then after that they use a generated and shared symmetric (private) key that is used only for this session.(i.e. public-private key is NOT used anymore once the connection is established)

[Scribble Note] For CSS Handbook 2025 edition (by Flavio Copes)

Thu, 18 Sep 2025 00:00:00 +0000

Blow are some quick scribble notes after skimming through Flavio Copes’s CSS Handbook, 2025 edition:

CSS Function: clamp()

By using the clamp(minimum, preferred, maximum) function, you can clamp a value within a range specified by min and max provided:

(Example can be found at: index-clamp.html)

You can also use clamp to specify font-size in certain range using, you can generate this using this tool: Font-size Clamp Generator - Generate linearly scale font-size with clamp()

[GovCMS Error] cli warning: pull access denied

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

Issue Encountered

When running ahoy up I got the following error (see screenshot example):

> ahoy up
  [+] Running 1/1
   ! cli Warning pull access denied for govcms-project-name, repository does not exist or may require 'docker login': denied: requested access to the resourc...              4.3s
  [+] Building 2.5s (18/18) FINISHED
   => [internal] load local bake definitions                                                                                                                     0.0s
   => => reading from stdin 2.44kB                                                                                                                               0.0s
   => [cli internal] load build definition from Dockerfile.cli                                                                                                   0.0s
   => => transferring dockerfile: 439B                                                                                                                           0.0s
   => [php internal] load build definition from Dockerfile.php                                                                                                   0.0s
   => => transferring dockerfile: 244B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [test internal] load build definition from Dockerfile.test                                                                                                 0.0s
   => => transferring dockerfile: 286B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [nginx internal] load build definition from Dockerfile.nginx-drupal                                                                                        0.0s
   => => transferring dockerfile: 347B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest                                                                                       1.1s
   => [php internal] load metadata for docker.io/govcms/php:10.x-latest                                                                                          1.0s
   => ERROR [nginx internal] load metadata for docker.io/library/govcms-project-name:latest                                                                                   2.3s
   => [nginx internal] load metadata for docker.io/govcms/nginx-drupal:10.x-latest                                                                               1.1s
   => [test internal] load metadata for docker.io/govcms/test:10.x-latest                                                                                        1.1s
   => [cli internal] load .dockerignore                                                                                                                          0.0s
   => => transferring context: 231B                                                                                                                              0.0s
   => CACHED [cli 1/4] FROM docker.io/govcms/govcms:10.x-latest@sha256:5d87738ba91-LoremIpsumDolorSitAmetConsectet                          0.0s
   => [cli internal] load build context                                                                                                                          0.0s
   => => transferring context: 109.49kB                                                                                                                          0.0s
   => [cli 2/4] COPY themes/ /app/web/themes/custom                                                                                                              0.1s
   => [cli 3/4] COPY config /app/config                                                                                                                          0.0s
   => [cli 4/4] COPY favicon.ico /app/web                                                                                                                        0.0s
   => [cli] exporting to image                                                                                                                                   0.1s
   => => exporting layers                                                                                                                                        0.0s
   => => writing image sha256:5d87738ba91-LoremIpsumDolorSitAmetConsectet                                                                   0.0s
   => => naming to docker.io/library/govcms-project-name                                                                                                                      0.0s
   => [cli] resolving provenance for metadata file                                                                                                               0.0s
  ------
   > [nginx internal] load metadata for docker.io/library/govcms-project-name:latest:
  ------
  Dockerfile.php:8
  --------------------
     6 |     ARG GOVCMS_IMAGE_VERSION=10.x-latest
     7 |
     8 | >>> FROM ${CLI_IMAGE} as cli
     9 |     FROM govcms/php:${GOVCMS_IMAGE_VERSION}
    10 |
  --------------------
  target php: failed to solve: govcms-project-name: failed to resolve source metadata for docker.io/library/govcms-project-name:latest: pull access denied, repository does not exist or may require authorization: server message: insufficient_scope: authorization failed
  View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/4v338vq-LoremIpsumDolorSitAmetConsectet

Solution-0

This solution worked for me, but I am not so certain as to why it worked …. so use it with caution ! The solution is simple, just run docker compose build cli to build cli service separately first, then run ahoy up as usual.

[Note] Resolve Error 1050 (42S01) Table 'xxyyzz' already exists

Tue, 16 Sep 2025 00:00:00 +0000

This issue happens when I perform “quick export” to acquire a database backup of the Drupal website, and attempts to import it via the “mysql” command (or ahoy import or ddev import-db command):

Solution-1: use custom method to export database

Use custom method to export database, and check “Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement” toggle before clicking “export” at the bottom.

[Note] Web Safe Font (Font-Family)

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

My Intuition

If you have ever worked on any website that required non-standard font family, have the font installed on your machine, but forgot to import it, and ends up getting the website rendering in a complete different look in your client’s browser (this is not me i promise 👀).

You will probably understand how beneficial it would be to just use a set of standardized font families that is widely supported on all devices, no more hustle of setting up your own font using tens of lines of @font-face declaration, and the performance won’t suffer from font loading (some true-type font ttf files can become huge, especially if it includes a wide range of characters and glyphs).

Format Twig File with Tailwind Utility Class via Prettier

Tue, 09 Sep 2025 00:00:00 +0000

TLDR;

Install prettier npm packages and plugins:

npm install -D prettier \
               prettier-plugin-tailwindcss \
               @ttskch/prettier-plugin-tailwindcss-anywhere \
               @zackad/prettier-plugin-twig

Create prettier configuration file for “twig formatting” & “tailwind utility classes ordering”:

//.prettierrc-twig
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "bracketSameLine": true,
    "trailingComma": "all",
    "useTabs": false,
    "plugins": [
        "@zackad/prettier-plugin-twig"
    ]
}

//.prettier-tailwind
{
    "tailwindStylesheet": "./src/css/tailwind-css-input.css",
    "plugins": [
        "@zackad/prettier-plugin-twig",
        "prettier-plugin-tailwindcss",
        "@ttskch/prettier-plugin-tailwindcss-anywhere"
    ],
   "overrides": [
      {
       "files": "*.twig",
          "options": {
              "parser": "anywhere"
          }
      }
   ]
}

Add the formatting command as npm scripts for convinient of access:

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.

[Note] VSCode Tasks.json - for reference purpose

Thu, 21 Aug 2025 00:00:00 +0000

In order to create your custom tasks runable through VSCode’s command palette, create a tasks.json file inside the .vscode folder for the current working directory (or workspace root).

... -- workspace
         |_______.vscode
                   |_______tasks.json   <--- create this file
         |         |_______launch.json 
         |________...

TLDR - Demo `task.json` file

With comment on the possible values for parameters and purpose each one of them serve:

[Drupal Patch] getCacheMaxAge() error When Accessing 'Recent Log Messages' Page

Tue, 19 Aug 2025 00:00:00 +0000

Original Error

When visiting the “recent log message” page for a drupal 10.5.2 client website, this is what I am seeing:

The website encountered an unexpected error. Try again later.

Error: Call to a member function getCacheMaxAge() on null in Drupal\views\Plugin\views\query\Sql->getCacheMaxAge() (line 1735 of core/modules/views/src/Plugin/views/query/Sql.php).
Drupal\views\Plugin\views\cache\CachePluginBase->getCacheMaxAge() (Line: 676)
Drupal\views\Plugin\views\style\StylePluginBase->renderFields() (Line: 574)
Drupal\views\Plugin\views\style\StylePluginBase->renderGrouping() (Line: 462)
Drupal\views\Plugin\views\style\StylePluginBase->render() (Line: 2177)
Drupal\views\Plugin\views\display\DisplayPluginBase->render() (Line: 1593)
Drupal\views\ViewExecutable->render() (Line: 201)
Drupal\views\Plugin\views\display\Page->execute() (Line: 1690)
Drupal\views\ViewExecutable->executeDisplay() (Line: 81)
Drupal\views\Element\View::preRenderViewElement()
call_user_func_array() (Line: 113)
Drupal\Core\Render\Renderer->doTrustedCallback() (Line: 886)
Drupal\Core\Render\Renderer->doCallback() (Line: 431)
Drupal\Core\Render\Renderer->doRender() (Line: 248)
Drupal\Core\Render\Renderer->render() (Line: 238)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 637)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 231)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare() (Line: 128)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse() (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray()
call_user_func() (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch() (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 116)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 90)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 741)
Drupal\Core\DrupalKernel->handle() (Line: 19)

Error Resolution

Resolved via applying patch on comment-#2 on issue-3169694:

[Patch] Drupal 10.3 not used/recognised

Wed, 13 Aug 2025 00:00:00 +0000

Issue / Problem

I faced this issue when working with a “radix” theme on a druapl 10.3.2 website. Upon inspecting the status message block, instead of desired outcome shown in the green rectangle in the screenshot; that is: with hook suggestion and override twig template name suggestion). I’m getting what’s shown in the red rectange.

The issue issue as “prashant.c” described in issue 3456176 - #10:

Mitigation/Solution 1 - Theme Hook

The first solution is proposed in #17 comment under the issue, via creating a theme hook to control the rendering of the system message block:

Drupal - Available Update Page: 'No available releases found'

Thu, 07 Aug 2025 00:00:00 +0000

Condition-1: Contributed module (with update) not being identified

Solution-1: SQL Query

While checking updates Drupal creates some rows inside the key_value table which should be deleted after checking is complete but looks like they doesn’t for some reason. So deleting the related rows manually solved my problem:
1
DELETE FROM key_value WHERE collection = 'update_fetch_task';
Tou can attempt to resolve it via running the below command in terminal:

CSS @font-face (custom font-family)

Wed, 06 Aug 2025 00:00:00 +0000

TL;DR; Screenshot

@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

body{
    font-family: 'MyCustomFont', san-serif;
}

Comparison of the CORRECT and WRONG approach

(you can find this file at: Archive.zip)

Drupal Theme Import Paragraph Configuration upon installation

Wed, 06 Aug 2025 00:00:00 +0000

Intuition

When setting up a new Drupal site, one of the key tasks is configuring the theme to suit your design and content needs. Paragraphs, a popular module in Drupal, allows you to create flexible and reusable content components, and is used extensively in many of the projects.

Althought we could adhere the look of the pargraph through preserving the paragraph--xxyyzz.html.twig file, the configuration including ranging from the machine name, help text, fields, views, are not captured in the paragraph--xxyyzz.html.twig file, and require some effort to setup from the Drupal backend. Hence if we could include those as a part of the sub-theme’s configuration to be installed with the theme, this could save the devs heaps of time.

[Note] CSS Color Options: Why is OKLCH better ?

Mon, 04 Aug 2025 00:00:00 +0000

TLDR;

Use OKLCH over HSL/HSV/RGB/HEX because:

Readable and Predictable: OKLCH is human-readable and offers predictable results for color transformations, unlike RGB or hex.
Perceptual Lightness: OKLCH provides consistent perceived lightness, unlike HSL, which improves color modifications and accessibility.
Palette Generation: Designers can define formulas to automatically generate color palettes, simplifying design systems.

Why is OKLCH better than other colours?

Readable and Predictable (OKLCH vs HEX, RGB, OKLAB)

Compared to other colour options such as RGB and Hexadecimal, OKLCH, HSL (and OKLAB, HSV) is much more readable and predictable by the human brain if you are familiar with the cylindrical colour model, hence making it convenient for colour modification.

[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

Emmet Syntax and Wrap with Abbreviation

Mon, 28 Jul 2025 00:00:00 +0000

Introduction

Emmet is a common built-in software for text editors that dramatically speeds up coding in HTML (or XML, XSLT, and other structured formats) by using CSS-like abbreviations and shortcuts that expand into full code blocks. It essentially allows developers to write less code while still achieving the same output.

– Wikipedia Emmet

Expand Abbreciation

You may use emmet to write very short abbreviated snippet that will expand to a proper HTML element(s), listed below are some of the very common use cases:

VSCode Keyboard Shortcut When Clause

Mon, 28 Jul 2025 00:00:00 +0000

Introduction

If you’ve come across the configuration panel for keyboard shortcuts in VSCode (or Cursor), you must have notices the column titled with When. This is the “when clause context” which is used to determine when a keyboard shortcut should take effect, usually assembled via context keys such as isDebugMode, editorReadonly. (In another word it is like a pre-condition if-statment for keyboard shortcut.) With this feature you can potentially have multiple command triggerable through the same keyboard shorcut depending on the active panels or states in VSCode.

[Note] Drupal Animated Custom Cursor (via SDC)

Fri, 25 Jul 2025 00:00:00 +0000

Showcase Video

SDC Component

cursor-animated-custom.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: cursor-opc
status: experimental
description: 'A custom cursor component that follows mouse movement with smooth animation'
props: {}

cursor-animated-custom.twig

1
2
3

<div id="cursor-custom" class="cursor-custom">
  <div class="cursor-custom__dot"></div>
</div>

_cursor-animated-custom.js

/**
 * Custom cursor functionality
 */
(function () {
  'use strict';

  // Initialize once DOM is fully loaded
  document.addEventListener('DOMContentLoaded', () => {
    const cursor = document.querySelector('.cursor-custom__dot');

    if (!cursor) return;

    let mouseX = 0;
    let mouseY = 0;
    let cursorX = 0;
    let cursorY = 0;

    // Smooth animation function
    const animate = () => {
      const diffX = mouseX - cursorX;
      const diffY = mouseY - cursorY;

      cursorX += diffX * 0.1;
      cursorY += diffY * 0.1;

      // Use translate3d for better performance and combine with scale if active
      const scale = cursor.classList.contains('is-active-dot') ? 'scale(2)' : 'scale(1)';
      cursor.style.transform = `translate3d(${cursorX}px, ${cursorY}px, 0) ${scale}`;
      requestAnimationFrame(animate);
    };

    // Track mouse movement
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });

    // Handle cursor scale/color on clickable elements
    document.querySelectorAll('a, button, [role="button"], input[type="submit"]').forEach(el => {
      el.addEventListener('mouseenter', () => cursor.classList.add('is-active-dot'));
      el.addEventListener('mouseleave', () => cursor.classList.remove('is-active-dot'));
    });

    // Handle cursor on hover of the iframe
    document.querySelectorAll('iframe').forEach(el => {
      el.addEventListener('mouseenter', () => cursor.classList.add('is-dot-in-iframe'));
      el.addEventListener('mouseleave', () => cursor.classList.remove('is-dot-in-iframe'));
    });

    // Start animation
    animate();
  });
})();

cursor-animated-custom.scss

[Note] Using Figma MCP in Agent Code Editor

Thu, 24 Jul 2025 00:00:00 +0000

Introduction

In this post, I’ll explore how to use Figma’s MCP (Model Context Protocol) in the Agent Code Editor. We’ll cover the basic setup, available MCP tools, and best practices for efficiently using this powerful combination of design and development tools.

Setup Steps

Step 1: Enable MCP Server in Figma

Step 2: Configure Your MCP Client (IDE)

Step 3: Start Using MCP in Your Client

[Note] Single-Directory-Component in Drupal Core | Lullabot

Mon, 21 Jul 2025 00:00:00 +0000

SDC in Drupal Core | Lullabot

Drupal JavaScript API (Drupal Behavior)

Fri, 18 Jul 2025 00:00:00 +0000

⁉️ Intuition: Weird JavaScript Behaviour in SDC

When working on a project, I’ve setup this SDC named test-js in a Radix theme with the following files: (see: test-js-sdc-example-files.zip)

theme\component\test-js
                  |_______test-js.twig
                  |_______test-js.component.yml
                  |_______test-js.js

The content of the files are as follows:

{# [test-js.twig] #}
<div class="test-js opc:p-0 opc:bg-black opc:text-white opc:mb-[2px]!">
  <p class="opc:pb-0! opc:mb-0!">[Test-JS-SDC]: {{ "now"|date("h:i:s.v A") }}</p>
</div>

# [test-js.component.yml]
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: test-js
status: experimental
description: 'The test-js component auto-generated by drupal-radix-cli'

// [test-js.js] 
//          (OR [_test-js.js] when in Radix Theme)
((Drupal) => {
    // Print current time with milliseconds gainularity
    console.log(
        '[test-js.js] \t',
        new Date().toLocaleTimeString() + '.' + new Date().getMilliseconds().toString().padStart(3, '0')
    );
})(Drupal);

I then did some editing to the page-content.twig component, to replace the default {{content}} block with a multiple of this test-js SDC component like the following, so the SDC I declared earlier can be used (for quick testting purpose):

Laravel Mix Watch Files Changes and Execute ZSH/Bash Command When Change Detected

Thu, 17 Jul 2025 00:00:00 +0000

Laravel Mix is a powerful tool that is included as a part of the Radix Drupal theme, it simplifies the process of compiling and optimizing assets in your Laravel applications. While it is primarily used for compiling CSS and JavaScript, you can extend its functionality to watch file changes and execute custom shell commands using ZSH or Bash.

Install additional watcher library via npm install

`1`	`npm install chokidar-cli --save-dev`

Modify webpack.mix.js configuration file (for this instance I will run ddev drush cr when any of the theme or SDC’s php/yml file is changed)

const mix      = require('laravel-mix');
const { exec } = require('node:child_process');

// Declare the files that need to be watched
const watching_SdcAllFiles        = 'components/**/*';
const watching_SdcComponentFiles  = 'components/**/*.component.yml';
const watching_ThemeConfigFile    = 'theme_name.info.yml';
const watching_ThemeLibraryFile   = 'theme_name.libraries.yml';
const watching_ThemePhpFile       = 'theme_name.theme';

// Declare the watcher for the files that need to be watched
const watcher = require('chokidar').watch([
    watching_SdcComponentFiles,
    watching_ThemeConfigFile,
    watching_ThemeLibraryFile,
    watching_ThemePhpFile
]);

// Watch the files and run 'ddev drush cr' when detected
watcher.on(
    'change',
    (path) => {
        console.log(`File ${path} has been changed, running 'ddev drush cr'...`);
        exec('ddev drush cr', (error, stdout, stderr) => {
            if (error) { console.error(`Error executing 'ddev drush cr': ${error}`); return; }
            console.log(`OUTCOME:\t'ddev drush cr' executed successfully: ${stdout}, "\n OUTPUT:\t${stderr}`);
        });
    }
);

Reference

Chokidar: Minimal and efficient cross-platform file watching library

Druapl Radix Theme Share BrowserSync with Ngrok

Wed, 16 Jul 2025 00:00:00 +0000

Intuition

When you have the browser-sync running on http://localhost:3000 in radix sync after running npm run watch, attempt of shareing the http://localhost:3000 via ngrok http https://localhost:3000 seems to succeed, but does not will not have browser-sync enabled:

Resolution

To resolve this, we will need to add a environmental variable in the .evn.local file and add a variable pointing to the domain of your ngrok. (First run ngrok as you would usually do to get the URL)

Druapl Radix Theme with Tailwind CSS

Wed, 16 Jul 2025 00:00:00 +0000

In this post, we explore the integration of the Drupal Radix theme with Tailwind CSS, a utility-first CSS framework that enhances the design and responsiveness of web applications. The article delves into the benefits of using Tailwind CSS within the Radix theme, including improved styling capabilities and a streamlined development process.

Introduction

What is Radix Theme ?

According to the project page of the Druapl radxi theme: link

Radix is the original component-based theme for Drupal. It comes with Bootstrap 5, Sass, ES6, BrowserSync, BiomeJS built-in.

SDC: Tailwind Logo Cloud

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

File: logo-cloud-opc.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: logo-cloud-opc
status: experimental
description: 'The logo-cloud-opc component auto-generated by drupal-radix-cli'
props:
  type: object
  required:
    - title
    - logos
  properties:
    title:
      type: string
      description: 'The title of the logo cloud'
    logos:
      type: array
      description: 'The logos to display in the logo cloud'
      items:
        type: object
        properties:
          image:
            type: string
            description: 'The image of the logo'
          url:
            type: string
            description: 'The url of the logo'
          alt:
            type: string
            description: 'The alt text of the logo'
          width:
            type: integer
            description: 'The width of the logo'
          height:
            type: integer
            description: 'The height of the logo'

File: logo-cloud-opc.twig

Popular CSS Classname Conventions

Mon, 30 Jun 2025 00:00:00 +0000

Choosing the Right Convention

Project Type	Recommended Approach	Why
Rapid prototyping	Utility-first/Atomic	Fast development and iteration
Large-scale applications	BEM or SUIT CSS	Clear hierarchy and maintainability
Design systems	ITCSS + BEM	Scalable architecture with component clarity
Small websites	Semantic/Kebab-case	Simple and sufficient
Component frameworks	Hybrid (Component + Utility)	Leverages framework benefits
Team projects	SMACSS	Clear categorization and rules

The key is consistency within your project and team alignment on the chosen methodology. Consider your project’s scale, team size, maintenance requirements, and tooling when making your choice.

[Note] CSS Cascade Layer Priorities

Thu, 12 Jun 2025 00:00:00 +0000

TLDR;

Explaination

User-Agent Stylesheets

User-agents, or browsers, have basic stylesheets that give default styles to any document. These stylesheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.

Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as normalize.css, which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs.

[Note] Popover vs Dialog Web-API

Thu, 12 Jun 2025 00:00:00 +0000

Demonstration

(in browser that does NOT support the anchor position API: 2025-06-12T115714.gif)

(the source code of the above can be found at: index-dialog-popover.html.zip)

Differences

The Popover API always creates non-modal overlays. This means users can continue interacting with the rest of the page even when a popover is open
The <dialog> element supports both modal and non-modal dialogs. A modal dialog prevents interaction with the rest of the page until it is dismissed, making it suitable for critical interactions or required user input

Implementation

The Popover API is an attribute (popover) that can be added to any HTML element, making it flexible for various UI needs
The <dialog> is a dedicated HTML element with a JavaScript API for showing and hiding dialogs, and can also be combined with the popover attribute if needed

Positioning

Popovers are typically anchored to a trigger element and support implicit anchor positioning via the anchor position api, making them ideal for context-sensitive overlays.
Dialogs are generally centered or fixed in the viewport and do not have built-in anchor positioning

Usage and Typical Scenarios

Use the Popover API for lightweight, contextual UI components such as tooltips, dropdown menus, teaching bubbles, or notifications—where the user should not be blocked from interacting with the rest of the page.
Use <dialog> for modal interactions that require user attention and input before proceeding, such as confirmation dialogs, forms, or alerts

Reference

[Code Snippet] CSS enter/exit animation for [display:none]

Wed, 11 Jun 2025 00:00:00 +0000

using [@starting-style] and [transition-behavior:allow-discrete]

[Code Snippet] CSS relative color syntax (HSL and RGB)

Wed, 11 Jun 2025 00:00:00 +0000

to apply darken/lighten/transparency to any existing color

Ways of Importing CSS and JS Assets in Drupal

Fri, 06 Jun 2025 00:00:00 +0000

This post is mostly based on the live-stream session from WebWash: https://www.youtube.com/live/IYuQh1zRwz0. So, if you have the time to watch this genius’s video, definitely check it out instead - you will learn much more compared to reading this post.

1. Asset Injector Module (Not Recommended)

If all you need is some customization using CSS and JS without modifying the actual Drupal theme, you may use the Asset Injector (asset_injector) module (see: https://www.drupal.org/project/asset_injector). Notice that at the very bottom of each injector, you get to select the condition where the injection would occur, for instance, when on a page of content type “Standard page”.

[Note] Deplying Drupal Website Living in [.\web] folder

Thu, 05 Jun 2025 00:00:00 +0000

What happened ?

(how did my drupal have this web folder)

I sometimes install drupal via the composer command as suggested in the official install method, as shown below:

And as a result I get a file hierachy alike the following:

/public_html $ ls -al
drwxr-xr-x  6 u236049598 o1006024984      4096 Jun  5 04:17  .
drwxr-xr-x  4 u236049598 o1006024984      4096 Jun  5 03:50  ..
-rw-r--r--  1 u236049598 o1006024984      3938 Jun  5 04:06  composer.json
-rw-r--r--  1 u236049598 o1006024984    269988 Jun  5 04:06  composer.lock
-rw-r--r--  1 u236049598 o1006024984       135 Jun  5 04:06  .cursorignore
-rw-r--r--  1 u236049598 o1006024984       357 Jun  5 04:06  .editorconfig
-rw-r--r--  1 u236049598 o1006024984      4222 Jun  5 04:06  .gitattributes
-rw-r--r--  1 u236049598 o1006024984       230 Jun  5 04:11  .htaccess
drwxr-xr-x 28 u236049598 o1006024984      4096 Jun  5 04:06  vendor
drwxr-xr-x  7 u236049598 o1006024984      4096 Jun  5 04:06  web

(*Whilst if you would download it via the zip or tar option, you have something like this: screenshot)

[GovCMS Error] Pipeline Failure due to Secret Detection (in theme library)

Mon, 19 May 2025 00:00:00 +0000

Intuition

One of my master branch deployment pipeline failed due to the following:

1
2
3

$ if [ -f "$SECRET_DETECTION_REPORT_FILE" ]; then # collapsed multi-line command
Vulnerabilities detected. Please analyze the artifact gl-secret-detection-report.json produced by the 'secret-detection' job.
Exiting with status 80 due to detected vulnerabilities.

You can find information about this pipline validation failure on this post of GovCMS knowledge base: https://www.govcms.support/support/solutions/articles/51000438343-secret-detection-and-troubleshooting. In general, GovCMS checks your filebase to verify if it contains a “secret”, a secret can be one of the following:

[Note] Accordion using HTML 'details' and 'summary' elements

Mon, 19 May 2025 00:00:00 +0000

The OLD way of Accordion

When building an accordion without the <details> and <summary> elements, the traditional approach involves creating a collapsible div next to a button that triggers the collapse/expand behavior. Check out this example from w3school: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

<body>
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
<script>
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
</script>

[Note] Popup Modal using HTML 'dialog' Element

Sun, 18 May 2025 00:00:00 +0000

The OLD way of building Popups

(aka: Custom Modal Implementation)

When building a popup modal without the HTML <dialog> element, it typically involves creating a div that expands to full screen width and height, and toggling its visibility using display:none and display:block. An example can be found in this W3Schools post: https://www.w3schools.com/howto/howto_js_popup.asp.

*full code can be found at: index-custom-modal.txt

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

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] Diagram for Frontend Developers

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

1. Use Case Diagram

A use case diagram is a behavioral UML (Unified Modeling Language) diagram that visually represents the interactions between users (actors) and a system to achieve specific goals. It depicts the functional requirements of a system from an external perspective, showing what the system does rather than how it does it. Use case diagrams consist of actors (represented as stick figures), use cases (represented as ovals), and the relationships between them (shown as lines). These diagrams help stakeholders understand the system’s scope, identify key functionality, and communicate requirements in a simple, accessible format. They serve as an excellent communication tool during requirements gathering and analysis phases of software development, allowing both technical and non-technical stakeholders to grasp the system’s purpose and functionality without delving into implementation details.

[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.

Debug using Devel Module with Symfony and Kint Dumper (dpm/dpr/kint/ksm)

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

Intuition

Debug without Devel Module and DPM()

For a long time, before knowing the existing of devel module, I have been debugging on Drupal website via the use of dump and var_dump; For instance, if I would need to checkout a variable on a hook_preprocess_html theme hook, I would have write the following in php code and twig template respectively:

function hook_preprocess_HOOK(&$variables) : void {
    ...
    dump($variables);        # OR var_dump($variables)
    die();                   # OR exit();
    ...
}

...
<pre>
  dump($content["values"]["field_xxyyzz"]);
  {# OR var_dump($content["values"]["field_xxyyzz"]) #}
</pre>
...

Whilst var_dump can work in the majority of the scenario, its output are raw and can sometimes yeild to memory overflow issue if the variable gets to big, and by default their ouput only allows certain levels of nesting; So if you need to drill down the variable values, you will have to change the dumping variable on trials: var_dump($variable) → var_dump($variabel["html"]) → var_dump($variable["html"]["context"]) → ..., which is not very efficient.

Drupal Module: Entity Class Formatter

Fri, 04 Apr 2025 00:00:00 +0000

Intuition

For the longest time I have been re-creating the this same feature that’s provided by this “Entity Class Formatter” module via a lengthy coupled, challenging way of:

creating field of “List (String)”, of values such as btn-primary-light, box-bg-yellow, card-vertical-layout-blue

overriding the twig template, that will “read” the field values, and manually put the class name (either directly or through twig variable)

# =========================
# === Peseudo Code only ===
# =========================

field_option_variant = content['data']['field_option_variant'][...]

...

    {% if field_option_variant == "option_1" %}
       <div class="option_1 ...">
         ...
       </div>
    {% else if field_option_variant == "option_2" %}
       <div class="option_2 ...">
         ...
       </div>
    {% else if field_option_variant == "option_3" %}
       <div class="option_3 ...">
         ...
       </div>
    {% endif %}

...

write in style.css to have give slghtly different styling for different options (classname)

Drupal Module: Modifier, Modifer Pack

Fri, 04 Apr 2025 00:00:00 +0000

Overview

The Modifiers module defines a system for defining how modifications can be consistently applied to elements on a page. In short the modules provides a way to alter the look and feel of entities on the page. Modifiers work by leveraging the power of the Drupal theming system - altering the render array of entities before they are rendered to the page.

– Modifier: Overview

Below is an example of a image parallex modifier provided by the “Modifiers Pack” module:

[Note] Drupal Batch Update Entity Field

Wed, 26 Mar 2025 00:00:00 +0000

Intuition

I recently received a request from a client to add two additional boolean fields to the user entity type in Drupal. This change can be easily implemented via the path “/admin/config/people/accounts/fields/add-field”. However, I encountered an issue: for all existing users, the values for the newly added fields will be empty (none/na/undefined). Although I attempted to set a default value when adding the new boolean fields, Drupal seems to ignore this default value for existing users. The default value is only applied for new users or if you manually enter the user’s profile and re-save it. The same issue will apply for content types: if you add new fields of an existing content type, the values for these new fields for the old content will be empty.

[Note] Setup Drupal Symfony Mailer with SendMail Transport

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

What is SendMail Application

Sendmail is a server application that gives businesses a way to send email using the Simple Mail Transfer Protocol (SMTP). It’s typically installed on an email server on a dedicated machine that accepts outgoing email messages and then sends these messages to the defined recipient. It queues messages if a recipient is not immediately available and offers authentication as a method to prevent spam. –ProofPoint: What Is Sendmail?

Cache Busting Drupal Theme Libraries (via setting 'version:-1' in 'xxyyzz.libraries.yml')

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

Cache Busting via setting `VERSION: -1` in `xxyyzz.libraries.yml`

The version key in libraries.yml is primarily used for cache-busting static assets like CSS and JavaScript files. By setting version: -1, Drupal will automatically generate a query string for the asset filenames, ensuring that the latest version of the assets is always served to users. This approach avoids relying on manual version increments and simplifies cache managemen

In the meanwhile, using -1 bypasses the default behavior where the version key might depend on Drupal core’s version (e.g., when set to VERSION). This ensures independence from core updates and avoids unintended conflicts or reliance on core versioning.

Media Library Thumbnail Not Showing (GD2: Error generating image, missing source file.)

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

Issue Encountered

I came across this issue when I was adding a media item on a client site, for some reason all the “document” media item have lost its thumbnail; After inspecting via the “Network” panel in the developer tools, it is found that the media-icons genereated by the GD2 Toolkit at url /sites/default/files/styles/thumbnail/public/media-icons/generic/generic.png?itok=xxyyzz have gotten a 404 not found error with respond body being Error generating image, missing source file .

(GovCMS) Drupal JSON:API (using Basic Auth or Simple OAuth)

Thu, 20 Mar 2025 00:00:00 +0000

Intuition

Drupal is a content-management-system, it gives the website admins (and content authors) the convinience to access and editing the content via the backend console, whilst provide the ability to render these contentt into visually appealing pages for visitors. However, what if one would to try to access the website content from a third-party software, and to manage the content via those softwares (let’s say for instance, a NextJS web application, or IOS/Android app).

[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:

XDebug with DDEV + VSCode

Sat, 15 Mar 2025 00:00:00 +0000

TLDR

Download this vscode folder, rename it to .vscode, then put it in your project root folder.

Quick Setup Guide

Install the VSCode Extension “PHP Debug”
Create a directory .vscode for upcoming configuration file to be placed in
Create custom task configuration file .vscode/tasks.json file and paste the following

(Alternatively you may also turn xdebug on and off via running ddev xdebug on / ddev xdebug off / ddev xdebug toggle, the reason we have it automatically on/off instead of leaving it always on is because of ites performance impact)

Integrating Solr with Search API in a DDEV Drupal Setup

Fri, 14 Mar 2025 00:00:00 +0000

🚨 Disclaimer: This post will guide you through the steps to set up Solr Search as the backbone of a Drupal Search API. This setup is specifically for scenarios where Drupal is running locally on your machine using Docker through DDEV. I might mention some concept during this post, but since I am relatively new to this topic, they are likely just rip-off from Google or Perplexity, and might nto be correct

GovCMS Stage File Proxy

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

TLDR;

STEP-1: Ensure Private & Tmp Directory Exists in File Hierarchy

<my-project> 
	files 
		private  ←----- create if doesn't exist
			tmp  ←----- create if doesn't exist

STEP-2: Install Stage File Proxy

1
2
3

# only required if in non-GovCMS environment
composer require drupal/stage_file_proxy             
drush en stage_file_proxy

STEP-3: Set Stage File Proxy URL

1
2

# or visit "/admin/config/system/stage_file_proxy"
drush config-set stage_file_proxy.settings origin "https://nginx-master-myproject.govcms5.amazee.io"

1
2

# also alter the environmental variable in "<my-project>/.env"
+ STAGE_FILE_PROXY_URL=https://nginx-master-myproject.govcms5.amazee.io

(you can get the remote url via accessing the GovCMS project panel: sample screenshot)

[Note] Drupal Prepend .htaccess using Composer

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

Step-1

Create .htaccess_prepend file (or really any file name, that will later be used in composer.json file)

# =======================================================================
# HTACCESS PREPENE START

<IfModule LiteSpeed>
    CacheDisable public /
    CacheDisable private /
</IfModule>

# HTACCESS PREPEND END
# =======================================================================

Step-2

Add the following in composer.json

{
    "name": "XXX",
    "description": "XXX",
    "type": "project",
    "license": "GPL-2.0-or-later",
    "homepage": "https://www.example.com"
    ...
    ...
    "extra": {
        "drupal-scaffold": {
+           "locations": {
+               "web-root": "./"
+           },
+           "file-mapping": {
+               "[web-root]/.htaccess": {"prepend":"./.htaccess_prepend"}
+           }
        },
        "installer-paths": {
            "core": ["type:drupal-core"],
            "libraries/{$name}":["type:drupal-library"],
            ...
     ...
     ...
}

Step-3

Then when you run any composer related command, such as composer update, composer install, the composer will automatically append the .htaccess_prepend in to the “head” of the .htaccess:

Prevent User from accessing Certain Page/Content via Theme Hook

Fri, 14 Feb 2025 00:00:00 +0000

Intuition

I received an unusual yet reasonable request from a client regarding the handling of “sensitive content” in their system. The client wants this specific content type to be visible once published, with strict editorial control limiting modifications to users with specific role permissions. When the content is in a published state, it should be accessible to all users, including those working within the Drupal backend. However, for unpublished content, visibility in the Drupal backend should be restricted exclusively to the user of role “sensitive content author.” This creates a clear workflow where content visibility is controlled by publication status while maintaining appropriate access controls throughout the content lifecycle.

Drupal Migrate Data vis JSON:API

Thu, 13 Feb 2025 00:00:00 +0000

Intuition

The need to understand this feature of Drupal stems from client requests for the ability to migrate data from JSON:API to Drupal. This includes tasks such as creating nodes or entities and synchronising content based on the API. By having this capability, clients can store sensitive content on their own servers, keeping it private and under their control. They can conduct reviews internally and publish the content via APIwhen ready (either using Drupal contributed module: JSON:API, or end-point of their own), using the Migration module to transfer it to the production website. This workflow ensures complete protection against data leaks by avoiding storage on the production server. Additionally, it reduces the risk of errors during the editorial process, which is crucial in scenarios where clients do not fully trust their hosting provider and cannot afford any mistakes with their content.

[Note] What is Schema Markup (schema.org) ? Why is it important for SEO ?

Wed, 12 Feb 2025 00:00:00 +0000

TLDR;

Schema markup (schema.org) is a agreed structured data format that exposes the context and content of website to the search engine; One of the most common practice to add schema markup to websites is through json-ld data wrapped in <script> tag ; With the addition of these structured markup data, the search engine will then be able to understand the website, and provide additional feature such as rich-style interactive component like card, carousel, accrodion, etc, making your website stand-out amongst the other search result in organic search.

Drupal's Data Flow in Layers

Tue, 11 Feb 2025 00:00:00 +0000

Explaination from Drupal.org

Drupal Data Flow Layers

If you want to go deeper with Drupal, you should understand how information flows between the system’s layers. There are five main layers to consider:

At the base of the system is the collection of nodes, the data pool. Before anything can be displayed on the site, it must be input as data.

The next layer up is where modules live. Modules are functional plugins that are either part of the Drupal core (they ship with Drupal) or are contributed items that have been created by members of the Drupal community. Modules build on Drupal’s core functionality, allowing you to customize the data items (fields) on your node types; set up e-commerce; programmatically sort and display content (custom output controlled by filters you define); and more. There are thousands of different options within the fast-growing repository of contributed Drupal modules. They represent the innovation and collaborative effort of everyone from individuals to large corporations.

At the next layer, we find blocks and menus. Blocks often provide the output from a module or can be created to display whatever you want and then can be placed in various spots (Regions) in your template (theme) layout. Blocks can be configured to output in various ways, as well as only showing on certain defined pages, or only for certain defined users. Menus are navigators in Drupal, which define the content coming in each defined menu path (relative URL). Menus are a core element of Drupal that provide links to all the pages created in Drupal.

Next are user permissions. This is where settings are configured to determine what different kinds of users are allowed to do and see. Permissions are defined for various roles and in turn, users are assigned to these roles in order to grant them the defined permissions.

On the top layer is the site theme (the “skin”). This is made up predominantly of HTML5 and CSS, with some Twig variables intermixed, so Drupal-generated content can go in the appropriate spots. Also included with each theme is a set of functions that can be used to override standard functions in the modules in order to provide complete control over how the modules generate their markup at output time. Templates can also be assigned on-the-fly based on user permissions.

This directional flow from bottom to top controls how Drupal works. Is some new functionality you want not showing up? Perhaps you uploaded the module into the system but have not activated it yet and this is making everything downstream non-functional (as in “A” in the diagram above).

[Note] Compile SCSS file using Laravel Mix

Mon, 10 Feb 2025 00:00:00 +0000

Steps Reproduced

Install Laravel Mix and SASS Dependencies

1
2

npm install laravel-mix sass sass-loader  --save-dev #install in current directory
npm install laravel-mix sass sass-loader  --global   #install in gloabal directory

Create Larvel Mix Configuration File

create a new file webpack.mix.js in the root of the project

const mix = require('laravel-mix');
mix.sass('scss/style.scss', 'css/style.css');
mix.options({processCssUrls: false});
if (!mix.inProduction()) { mix.sourceMaps(); }  // Enable source maps for development

Create Package.json File

create a new file package.json in the root of the project

Use Contributed Theme's Build-in Single-Directory-Component

Mon, 10 Feb 2025 00:00:00 +0000

Intuition

As I download some contributed theme from the Drupal.org, I found the majority of these contributed themes are holding a component directory with in their theme root folder:

Inside this <theme-root>/component folder seems to be dozens built-in of single-directory component (SDC) provided by theme, which makes me wonder if we are allowed to reuse these to our advantage. It turns out you can use the {% include %} or {% embed %} keyword to re-use these component in any twig template, and I’ll demonstrate how in this blog post.

Drupal Disable Cache from Custom Theme Hooks

Tue, 04 Feb 2025 00:00:00 +0000

Intuition

I was working with a GovCMS SaaS environment where I have no control over the core code or modules, in another word, the only thing I can play around with is the custome theme. And the client requested for an cache invalidation mechnism, that they want remove the cachability feature from a portion of the website, as the follows:

Content Type: for instance content type of machine name article_noCache, will not retain cache
Node ID / Url: certain node of ID (e.g. node=1), or certain url (e.g. http://<root-url>/example-standarg-page , will not retain cache
Field Value: disable cache for node if they have certain field equaling to a pre-defined value (e.g. boolean field field_toggle_cacheDisable == 1, so they can turn on/off cache for pages on the admin backend)

Disclaimer (& Confession)

During the time writting this post, I do not actually fully understand how the caching in drupal works, all I understand is there’s a drupal-side caching for render-array, and caching on the browser-side; And setting http-header to disable cache (i.e. Cache-Control: max-age=0, no-cache, must-revalidate) only disbale the browser-side caching; The drupal-side render-array-cache expiry is controlled by: cache tags, cache context. If a browser keep any of the two caching mentioned, it may potentially hold a historical/outdated version of the page.

Drupal Private Upload Destination

Mon, 03 Feb 2025 00:00:00 +0000

Steps to Setup Private Upload Destination

Step-1: Activate Private File

To begin with you will need to configure private file directory, by defining file_private_path in settings.php:

...
/**
 * Private file path:
 *
 * A local file system path where private files will be stored. This directory
 * must be absolute, outside of the Drupal installation directory and not
 * accessible over the web.
 *
 * Note: Caches need to be cleared when this value is changed to make the
 * private:// stream wrapper available to the system.
 *
 * See https://www.drupal.org/documentation/modules/file for more information
 * about securing private files.
 */
$settings['file_private_path'] = 'web/private';
...

It is recommended to keep the “private files” outside the “public file folder”; For instance, if the public file folder is <root>/public_html/sites/default/files, then you may put it somewhere else outside this directory, for instance <root>/public_html/web/private.

[GovCMS Error] str_replace(): Passing null to parameter

Sun, 02 Feb 2025 00:00:00 +0000

Error Reproduced

This eror happen amongst many of the SaaS GovCMS websites, where after the after installing the site locally, imported the production database, and login as administrator using pygmy & ahoy, the first thing you see is:

1
2

DEPRECATED FUNCTION: STR_REPLACE: PASSING NULL TO PARAMETER #3 ($SUBJECT) OF TYPE ARRAY | STRING IS DEPRECATED IN CONFIG_PERMS_PARSE_ PATHO (LINE 41 OF MODULES/CONTRIB/CONFIG_PERMS/CONFIG_PERMS.MODULE).
(* the same message got printed for multiple times

Also refer to the following screenshot:

Image Format: Lossless vs Lossless (L/M/S) vs Compressed

Thu, 16 Jan 2025 00:00:00 +0000

Difference in Image Format for Sony A7M4

XDebug with MAMP + VSCode

Thu, 09 Jan 2025 00:00:00 +0000

*p.s. please utilise PHP version 8.2.13 or earlier, as XDebug compatibility issues have been identified (on my end) with PHP ≥8.3.0 versions at the time of writing.

1 - Configurae MAMP

To begin with you will need to configure your php.ini file, here different resource I found online claims that you should edit at different localtion, for your reference, the version that worked for me is to edit it directly in MAMP’s PHP Configuration Panel clicking on the Open Template… button will take me to the edit panel of php.ini file for the current running instance of the php.

[Note] 摄影备忘录 (Photo Ideas)

Mon, 06 Jan 2025 00:00:00 +0000

泛用

几何的绝对中心（例如窗户的中心）
散点构图（注意里被各种有意思的东西分散）
鲜艳的颜色（突出的主体）
框式的前景，突出主体。比如，通过车窗后视镜拍摄的风景。

街拍

圆形反光镜
透过地面水坑拍天空/建筑（二分构图）
垂直笔直的建筑（类似移轴效果，让梯形变成矩形）
透过商店橱窗的玻璃反光拍人物
透过雾蒙蒙/带着雨滴/刮花的亚克力的玻璃
主体静止，环境拖影（例如十字路口站立的一个人，和周围走动的人和行驶的车）

驾车

透过交通工具的窗（窗户作构图/画框）
车里邦相机拍第三视角

风景

地平线（四六/二分构图）
冷暖对比（冷色会显得轻且远，暖色会显得重且近，可以通过这点加强空间感）

Reference

https://www.yeeyi.com/news/details/1544969/

[PENDING] Drupal Hook (Theme Hook & Module Hook)

Mon, 06 Jan 2025 00:00:00 +0000

Drupal Hook & Theme Hook

Drupal official “File“ module overview, how to add file field to a content type, managing its location and access, how to access private files, and how to delete files.

https://www.drupal.org/docs/8/core/modules/file/overview

The difference between public and private folder in drupal file system, and overriding the behavior of the private files via hook_file_download() to allow guest user to download the private files based on conditions.

https://www.lucius.digital/en/blog/always-secure-files-your-website-properly-why-and-how-do-it-drupal

Drupal 10 theme system overview, the twig engine, the theme hooks, the preprocessing for template files (THEME_preprocess_HOOKsuch as olivero_preprocess_page)

Hosting Drupal 7,8,9,10 Locally using DDEV

Mon, 06 Jan 2025 00:00:00 +0000

TLDR Code Snippet

> cd $your_project_path
> ddev config --project-type="drupal" --php-version="8.2"

> ddev start
> ddev composer install
> ddev composer require drush/drush
> ddev drush cr
> ddev launch

> ddev drush user-login
> ddev launch $(ddev drush uli)
> ddev import-db --file="$your_db_file_path"

DDEV with Drupal 8,9,10

(complete step-by-step breakdown screenshot can be found at: here)

[Note] 日落怎么拍 - 彩蜂摄影

Thu, 02 Jan 2025 00:00:00 +0000

Note

1. 为什么要拍日出日落？ 日出日落时段的光线最柔和、色彩最丰富，是拍摄高质量照片的最佳时机。这段时间的光线变化不仅有助于记录更多细节，还能激发您的创作灵感。

2. 日落拍摄的最佳时间段 日落前1小时：光线由白变金，拍摄背光方向的景物效果尤佳。日落时刻：放下相机，用肉眼欣赏大自然的美。日落后10-15分钟：天空渐暗，云彩与地平线交相辉映，是最精彩的时段。日落后30分钟：蓝调时刻，光比适中，适合记录场景所有细节。日落后45分钟：夜色渐浓，捕捉余晖和灯光结合的画面，效果尤为动人。

3. 拍摄小技巧 时间规划：提前1小时到达拍摄地，错过最佳时刻会遗憾不已。光线观察：使用手机App（如PhotoPills）精准预测日落时间和轨迹。设备准备：滤镜和三脚架能助您事半功倍，但最重要的是对光线的理解。

4. 创意提示 观察维纳斯带：日落后180°方向的淡蓝至粉色渐变天空，效果惊艳。留意云彩：高空云能形成金灿灿的彩霞，而晴天则更适合拍摄清晰轮廓。

5. 日落拍摄的意义 透过镜头记录日落，不仅是技法的提升，更是对自然、时间和生命的深刻体悟。希望通过本次分享，能让您感受到拍摄日落的独特魅力，激发更多创作灵感。

Reference

[Note] 烟花怎么拍 - 出发前的笔记

Thu, 02 Jan 2025 00:00:00 +0000

新年快乐！ Happy New Year ！

出发前的笔记

器材选择

三脚架 + 蓝牙快门（万一要用B门）
50mm自动头（OR 50mm手动头（使用估焦计算APP+泛焦））
开车的话 70-200 也带上
记得去掉黑柔和UV滤镜！！！！！！（以避免鬼影现象）

曝光模式ISO光圈和构图

使用AEL/AF找一次烟花的绽放瞬间，锁定曝光和对焦，然后再调三要素（OR 使用手动模式（M档）或B门模式。（B门模式允许你在烟花升空时打开快门，绽放后再关闭，以捕捉完整的光轨。）
ISO设置在100到400之间以减少噪点
记得关闭/禁用HDR模式！！！！！！！！！！
开启曝光优先模式！！！！！！！！！！！！！
尽量选择小光圈（如F8到F16）以增加景深/对焦范围，增加成功率（除非你要拍人物）
考虑使用竖构图增加成功率，尽量不要clip掉烟花

拍照选位和走路路线

尽量选择上风处拍摄，不然会吃烟雾，影响画面的锐度
如果要去近一点的地方观看
- 建议提前一个小时到达找位置
- 今天的风向为东南/东北风（从东吹向西边），今天放烟花的位置为Central Basin和 Commonwealth Bridge，所以最好的位置为Queen Elizabeth Terrace
- 今天Parks Way，Commonwealth Ave， Northborne Ave都要关闭（https://www.cityservices.act.gov.au/news/news-and-events-items/january-2025/new-years-eve），所以去湖边最好的方式为走路，可以参考这条路线：https://screenshot.opc.com.au/zg9PTRQG90F4kbffQS4c
如果要避免人群可以去山上看
- Mount Ainslie Lookout / Nature Reserve 在Parks way北，比较方便 https://screenshot.opc.com.au/3Gv3hvhkZFmGXdsjQFY4
- Red Hill Nature Reserve 要通过common wealth ave 和parks way，可能会堵车
- Mount Taylor Nature Reserve 也要通过common wealth ave 和parks way，可能会堵车

结果展示

最终还是太懒没去到最好的拍摄点哈哈，也是玩小姐牌出发太晚了计划赶不上变化就在公寓的楼顶拍了，但器材参数什么还是根据上面记录的做到了，下面就是我拍到的烟花啦：

[Excerpt] 如何看待重复/堆砌构图

Tue, 31 Dec 2024 00:00:00 +0000

作为一个摄影初学者，我应该如何看待重复/堆砌构图的行为 ?

今年九月，我有幸在悉尼的MCU参观了杉本博司的《时间机器》（Time Machine）摄影展。杉本的作品挑战了摄影的传统界限，邀请观众与时间、记忆和存在的本质进行互动。他的技法通常涉及长时间曝光，创造出既空灵又引人深思的图像。

这是我第一次亲自参观摄影大师的系列展览。参观后，我心中一直萦绕着一个问题：杉本博司的知名作品在网上通常只有几幅，但在展览中，每个系列的图片实际上有很多幅。后来我在网上查找他的作品资源，发现同一个构图和影调的照片竟有十多张。这些照片在主体和环境的比例、拍摄角度乃至曝光方面基本一致。虽然我明白摄影是一个没有所谓抄袭或复制的领域，毕竟各种设置的组合很可能在历史上已被尝试过。作为现代人，我们拍摄的照片即使再有创意，也很难是全世界第一个拍这类照片的人。然而，这种单纯的重复，尤其是构图的相似，真的能拍出“好”的照片吗？复制他人的漂亮构图是否可以提升我单张图片的质量？

我认为自己尚未达到那个水平，因此不打算给出自己的结论。接下来，我将收集一些网上大家的意见，希望能为大家提供参考

正面评价

构图基础价值：对于初学者来说，掌握基本构图规则如三分法、引导线等，可以帮助创作出更有平衡感和视觉吸引力的作品。多种构图准则的结合使用（如三分法结合引导线）能够强化照片的表现力。
构图的实用性：这些构图方法简单易用，已在实际生活中被广泛应用，即使没有明确定义也能产生效果。通过基本的构图设定和技巧运用，可以实现非常好的摄影效果。
历来大师观点：
- 布列松派（亨利·卡蒂埃·布列松）：认为好的照片构图就是”几何图形“；提出”重叠正方形”构图法，将画面切割成两个重叠的正方形；强调对角线构图，主体通常落在对角线上。
- 现代派（克雷格·赖利）：善于将多种构图元素组合使用，如光影分割、视觉引导线、剪影等；认为构图元素的组合就像建筑材料，可以搭建出不同形态的视觉效果。
- 现代派（亚历克斯·韦伯）：将画面填满但不重叠；主张通过有序的混乱来创造层次感；认为构图需要与世界合作，包括光线、场景、人物等所有元素。
- 极简派（劳拉）：擅长运用城市元素和极简美学；注重简单细节和对称美学的堆砌。

负面评价

过度的机械化：过分依赖固定的构图模式可能会限制创作的自由度和创新性；单纯堆砌构图技巧而忽视画面内容的表达,容易使作品缺乏深度和情感
表达的局限性：仅仅依靠构图规则无法保证创作出优秀的作品,还需要考虑光线、色彩、情感等多个层面；过度追求构图的完美可能会使画面显得刻意和生硬,失去自然感和真实感
历来大师观点：
- 布列松派（亨利·卡蒂埃·布列松）：等待”决定性瞬间”，反对刻意安排。
- 现代派（亚历克斯·韦伯）：构图不应该是刻意堆砌，而是要”与世界合作”；好的摄影作品需要与光线、场景、人物等所有元素自然配合。
- 纪实派（萨尔加多）：即使拍摄灾难题材，也要保持画面的自然美感；反对为了构图而刻意安排场景。

综合评价

构图规则应该作为创作的参考和工具,而不是限制创作自由的枷锁。真正优秀的摄影作品需要在技术和艺术表达之间找到平衡

[Note] Parameters to assess ChatBot products ?

Tue, 24 Dec 2024 00:00:00 +0000

alais:
- how to compare ai models
- how to assess chatbot products
- how to choose the best ai model

Quick Comparison

Here’s a table of spec comparsion for the most current model:

Feature	Claude 3.5 Sonnet	OpenAI o1	DeepSeek R1
Model Size	Unknown	2.8T parameters (unconfirmed)	671B parameters (37B active per token)
Context Window	200K tokens	128K tokens	128K tokens
Max Output	4K tokens	32K tokens	32K tokens
Vision Capability	Yes	No	No
Knowledge Cutoff	April 2024	Oct 2023	Unknown
Cost (Input)	$3/1M tokens	$15/1M tokens	$0.55/1M tokens
Cost (Output)	$15/1M tokens	$60/1M tokens	$2.19/1M tokens
Open Source	No	No	Yes (MIT License)
Hallucination Rate	Unknown (Lower than previous models	Unknown (Lower than GPT-4 (0.44 on SimpleQA)	Unknown (4x higher than DeepSeek V3
Performance	40% success on autonomy tasks	High performance on AIME, Codeforces, GPQA-Diamond	Comparable to o1 on math and coding tasks
Special Features	Constitutional AI framework, near-perfect recall	Advanced reasoning capabilities, high accuracy on complex tasks	Resource-efficient MoE architecture, self-discovering reasoning strategies

(updated on “2025-02-05T144338”, generated using perplexity)

CSS Grid (and Sub-Grid) Layout

Mon, 23 Dec 2024 00:00:00 +0000

Disclaimer: This post is primarily written as a personal reference note and is not intended as professional or formal content. Much of the material has been directly copied from various sources for my own learning purposes. The language used is casual and unpolished. This is essentially my digital notebook - use at your own discretion. All credit goes to the original sources referenced below.

Intuition

The concept of CSS Grid gained prominence during discussions about its sub-grid functionality, which enables precise alignment of elements within multiple uniform components. Upon investigating the principles of grid layout and comparing it to Flexbox, Codedamn’s article highlights several advantages of implementing Grid over Flexbox:

Problems and Workarounds for Flex-Wrap

Thu, 19 Dec 2024 00:00:00 +0000

[TOC]

Problem-1: odd looking last row….

Problem

This issue appear to be most common for me, when having items wrapping in a flex layout, the look of the last row is always somwhat non ideal (assuming you are using flex-direction:row):

Problem-1a: If you would want all the childrens in the same column to align up, then you may face the condition where the last column of have a bigger right gutter then the remainder of the columns; (see: screenshot or file)
Problem-1b: If you come from problem-1a and solves it with justify-content:space-between, then the problem of the big gutter for last column will be fixed, however the gutter in the middle seems to get to big, and the last row have a empty space in the middle (see: screenshot or file)
Problem-1c: if you come from problem-1b and solves it with flex-grow:1, congratulations you solved all the probelm in 1a and 1b, but then again, the last column looks over-sized and doesn’t quite fit in the morder design styles. (see: screenshot or file)

Of course you may play around and fix it with many method, to name a few:

Drupal Search Page (using Search API Module)

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

*Note: This is just a quick note for myself in order to get my head around the topic, maybe I’ll formulate this into a more structured post one day … but for now if you are looking for something formal Search API’s documentation is your goto.

Step-1: Preliminary Setup

Install and enable the following modules in your website :

Search API: Provides a generic framework for modules offering search capabilities.
Database Search: Offers an implementation of the Search API that uses database tables for indexing content.

Prepare at least content type (or media/file/taxnonomy/etc) that have your desired search field in it.

Explaining Tone Curve Tool (via bottom-left anchor)

Tue, 17 Dec 2024 00:00:00 +0000

RGB Tone Curve

Movement for Bottom-left Anchor

RIGHT
- When you move the bottom-left anchor of the RGB tone curve right
  - you are clipping the shadow of the original image (on the left of the anchor)
    
    (i.e. you are making a portion of the shadow in the image to become completly black)
  - you are increasing the brightness midtone and highlight (or increasing contrast) of the original image
    
    (i.e. you are mapping the remaining luminance range from the right of the anchor to 100% to the 0%~100% range )

Process Color Negative in Lightroom

Tue, 17 Dec 2024 00:00:00 +0000

Illustration for TLDR

Steps-Breakdown

Import the Scanned Negatives: Start by importing your scanned negatives into Lightroom. Ensure that the scans are free of dust, scratches and interference of ambient light for better results.
- Ideally the film should be the only thing shining in the image, all other area in the lightbox should be tapped/covered
- If you are using a macro lens (or filter), please use smaller aperture such as f11 or smaller to ensure the largest depth-of-field.
- If you don’t have a macro lens (or filter) and is only using the center of the image, then you may use larger aperture such as f5.6 ~ f4.0
- Try capture using exposure bracket setting such that you have more choice the the lightroom (and you can stack them into HDR if you want)
Switch to Tone/Point Curve: In the right sidebar, click on the “Light” panel to expand, and scroll down to the “tone curve” or “point” curve section, and select any of the “Red”, “Green”, “Blue” color (we will repeat the same steps 3-4 for each of the R/G/B-curve; But if you are aiming for quick preview, you can also do step 3-4 only on the RGB-curve only)

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']");
    });

Quick Look at the Drupal Module: Field Group

Tue, 10 Dec 2024 00:00:00 +0000

Intuition

The “Field Group” module can come in handy when you have huge amount of fields, for instance let’s say you have a website that collects the statistics for the average salary for every single region for every single state within Australia, and every content item is a average salary data for a date data-point. Potentially your content type could have insamely amount of fields like the following, and we can use some help of the module to group the regions by state.

Keyboard Tab Focus for Accessibility (tabindex)

Mon, 09 Dec 2024 00:00:00 +0000

Introduction to Concept

According to MDN-tabindex, tabindex is a global DOM element attribute used to indicate if the element is keyboard focusable (via tab) or not:

By setting tabindex="-1", element is not reachable via sequential keyboard navigation.
By setting tabindex="0" , the element should be focusable in sequential keyboard navigation.

(*p.s. You may also set other positive values such as tabindex="2/3/4/5/...", to indicate the order/sequance for the focus, but generally this should be AVOIDED, due to its potential of causing difficulty for people solely relying on keyboard for navigation and those who are using other assistive technology to navigate around the page)

CSS Function Light-Dark

Sat, 07 Dec 2024 00:00:00 +0000

Version 1: JavaSctipt Toggler + CSS Class-name

For the longest time, I never know about the media query or light-dark function, so here’s the approach I’ve been going with:

Below are the most relevant code snippets:

...
<!-- TOGGLER FOR CALSSNAME & ITS SCRIPT -->
<button onclick="toggleTheme()">Toggle Dark/Light</button>
<script> toggleTheme = () => {
    document.querySelector("body").classList.toggle("theme-light");
    document.querySelector("body").classList.toggle("theme-dark");
}</script>
...
<!-- THEME SPECIFIC STYLE (LIGHT/DARK MODE WILL DIFF) -->
    <style>
        body.theme-light                 { background: white; }
        body.theme-dark                  { background: black; }
        body.theme-light h1              { color:black;       }
        body.theme-dark  h1              { color:white;       }
        body.theme-dark  .card-container {
                                           color:white;
                                           background: rgb(29, 29, 29);
                                           box-shadow: rgba(215, 215, 239, 0.4) 0px 7px 29px 0px; }
...

The complete code can be found at: version-1.html

Code on Multiple Device and Browser via Browser-Sync (sharing across network, and watch changes to reload)

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

Intuition

For the longest time, I’ve been waiting to have the local envrionemnt running version of the website to be accessed from my varying devices and browsers, not only because I can put the mobile, tablet, and desktop devices side-by-side and test their responsiveness, but also to test some of the browser/device specific feature and make sure they are enabled properly via browser preflexed properties such as -webkit-xxyyzz.

The ways I’ve been trying till this point all seems to fail, either because they are too trivial to setup (MAMP + NAMO), or too complicated for me the understand (Docker + DDEV + Tailscale), or network evironment dependent and potentially dangerous (Disabling the firewall via pf/ipfw, directly exposing the port).

Drupal Layout Paragraph Module

Tue, 26 Nov 2024 00:00:00 +0000

Step to install the Layout Paragraph Module

Step-0: below is how the paragraph component by default looks like in the drupal admin backend:

Step-1: Install and enable the “drupal/layout_paragraph” module, and configure view of the content/paragraph to use “Layout Paragraph”:

Step-2: add the paragraph--name--xxyyzz.html.twig to the administration theme (we are using claro as admin theme in this case), you would need to keep the {% block paragraph %}, {% block content %}, and <div {{ attributes.addClass(classes) }} ... > in order for the paragraph layout to work:

Drupal Settings.php Snippets for Debug

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

Usage (TLDR;)

You can simply copy <CTRL-C> + <CTRL-V> the following into your public_html/site/default/settings.php, and toggle on/off those that are relevant to you based on your need:

$config['system.logging']['error_level'] = 'verbose';                        // [A] (For Drupal 8+) Turn on verbose debug message reporting
//$conf['error_level'] = 2;                                                  // [A] (For Drupal 7)  Turn on verbose debug message reporting (Equivalant to navigate to Administration→ Configuration→ Development → logging and errors and select "All messages".)
																			 // [A] -------------------------------------------
error_reporting(E_ALL);													     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_errors', TRUE);                                             // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_startup_errors', TRUE);                                     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors

$settings['twig_debug'] = TRUE;                                              // [B] Twig Debug       - Turn on  twig debug mode
$settings['twig_auto_reload'] = TRUE;                                        // [B] Twig Debug       - Turn on  twig template auto reload
$settings['twig_cache'] = FALSE;                                             // [B] Twig Debug       - Turn off twig cache
																			 // [B] ------------------------------------------
$settings[‘cache’][‘bins’][‘render’] = ‘cache.backend.null’;                 // [B] Disable Caching  - Disable render caching.
$settings[‘cache’][‘bins’][‘page’] = ‘cache.backend.null’;                   // [B] Disable Caching  - Disable page cache.
$settings[‘cache’][‘bins’][‘dynamic_page_cache’] = ‘cache.backend.null’;     // [B] Disable Caching  - Disable dynamic page cache.
$settings[‘cache’][‘default’] = ‘cache.backend.null’;                        // [B] Disable Caching  - Disable backend cache.

$config['system.performance']['css']['preprocess'] = FALSE;                  // [C] Turn off agrregated css      (see: https://www.drupal.org/docs/develop/development-tools/disabling-and-debugging-caching)
$config['system.performance']['js']['preprocess'] = FALSE;                   // [C] Turn off agrregated js       (see: https://www.drupal.org/docs/develop/development-tools/disabling-and

$settings['update_free_access'] = FALSE;                                     // [D] Enable access to /update.php
$settings['rebuild_access'] = TRUE;                                          // [D] Enable access to /rebuild.php                    (This setting can be enabled to allow Drupal's php and database cached storage to be cleared via the rebuild.php page. Access to this page can also be gained by generating a query string from rebuild_token_calculator.sh and using these parameters in a request to rebuild.php.

$settings['skip_permissions_hardening'] = TRUE;                              // [E] Skip file system permissions hardening.          (The system module will periodically check the permissions of your site's site directory to ensure that it is not writable by the website user. For sites that are managed with a version control system, this can cause problems when files in that directory such as settings.php are updated, because the user pulling in the changes won't have permissions to modify files in the directory.
$settings['extension_discovery_scan_tests'] = TRUE;                          // [E] Allow test modules and themes to be installed.   (Drupal ignores test modules and themes by default for performance reasons. During development it can be useful to install test extensions for debugging purpose.
$settings['trusted_host_patterns'] = array();                                // [E] Turn off trusted host

(for instance verbose debug required then turn comment all lines except for $config['system.logging']['error_level'] = 'verbose';)

Single Directory Component with Drupal

Thu, 14 Nov 2024 00:00:00 +0000

Step Progress Breakdown

Level-1: Component using Paragraph Twig Tempalte

To begin with, let’s start by building a simple component using drupal paragraph module:

We create the paragraph type paragraph_cardtile with one field field_title only (see screenshot)
Turn on twig debug, create a demo content item, f12 inspection over it to get the overriding twig file name
Create that twig template, in this case paragraph--paragraph-cardtile.html.twig and write related html code to make it look like a “card tile” component, and you can have its associated js/css included in the global css/js library(won’t go into detail in this post)

When you complete all the steps above, the code you have in your theme folder should be something like the following:

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.

CSS Container Query

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

Why we need container query ?

Intuition - What does it differs to Media Query (`@media`)

You might be very familiar with controlling the style of the component depending on the device width via the @media query, for instance I’ve been using the following code snippets to style full-width component for all device endpoints in Drupal:

@media                         (min-width: 1200px)  { _PASTESELECTOR_HERE_ {padding-inline:30px; width:1176px;} }
@media (max-width: 1199px) and (min-width:  992px)  { _PASTESELECTOR_HERE_ {padding-inline:30px; width: 968px;} }
@media (max-width:  991px) and (min-width:  768px)  { _PASTESELECTOR_HERE_ {padding-inline:30px; width: 744px;} }
@media (max-width:  767px)                          { _PASTESELECTOR_HERE_ {padding-inline:30px; width:  100%;} }

Media Query is very handy for most cases, with a slight draw back that one will have to cater for every single relevant components’ style along with the styling for component of interest. Let me explain - say for instance you have two container both in a flex layout, you only care about the style for the first component, you want it to hide the long description text whenever its width is too narrow.

Drupal Webform "File Upload Element" Not Apeparning

Thu, 31 Oct 2024 00:00:00 +0000

Issue Repeated

I am in the process of creating a form in Drupal 10 utilizing the Webform module. I can successfully add elements such as “Textfield” and “TextArea.” However, when I attempt to add the “File upload” field, it does not appear in the list of available options. Please refer to the attached screenshot for clarification. I would appreciate your assistance in resolving this issue and enabling the file upload field in the form.

GovCMS Docker Issue Fallback Solution

Thu, 17 Oct 2024 00:00:00 +0000

Issue Repeated

The other day I was encountering a GovCMS PaaS client with very odd code-base, deplpying on my local computer first require my GitHub ghp_xxxxxxxx authentication key (solved via adding docker-compose.override.yml file), then it raised an issue of "/usr/local/bin/drush": not found (solved via uncommenting lines in Dockerfile.cli file), then I found its scaffold to be outdated (solved via updating .version.yml scaffold version number) …

Even after all these patches, once I run ahoy up, the website still cannot run properly. All the associated docker container starts as I run pygmy up && ahoy build as expected, but soon as the build process finishes, the nginx-1 container magically kills/pauses itself with the following error:

GovCMS PaaS (Platform as a Service) Update

Wed, 16 Oct 2024 00:00:00 +0000

As mentioned in a earlier post “GovCMS SaaS vs PaaS”, in SaaS website, the client is responsible for all the patching including security updates (unlike SaaS environments which does it all automatically). This post will guide you through on how to perform these update yourself.

Introduction

To begin with, we’ll need to differntiate the compositional part of the GovCMS PaaS website that will need update:

govCMS/govCMS : the main repository for the Drupal-based GovCMS distribution, which provides a content management system tailored for Australian government websites. It includes core functionality and modules necessary for compliance and accessibility standards. (GitHub, Packagist)
govCMS/scaffold-tooling: comprises a collection of standard configurations, scripts, and packages designed to support the GovCMS scaffold. It includes tools for continuous integration and testing, enhancing development and deployment processes. (Github, Packagist)
custom/patch : some PaaS website also have custom module (contributed module) installed, or patches serve as temporary fixes or modifications to the website’s existing codebase. They are utilized to rectify bugs that may emerge during regular operation, ensuring the site maintains optimal performance and user experience.
govcms/scaffold: serves as a template for creating GovCMS projects. It helps streamline the setup process by providing a predefined structure and configuration for new projects, ensuring consistency and best practices. (Github)

Composer

Likewise explaied in this knowledge base post by GovCMS: link. You will need to update all the dependencies via altering the version number in the composer.json and patch.json files, and run composer update (resolve dependency issue that arises).

Reoslution for ["/usr/local/bin/drush": not found"]

Wed, 16 Oct 2024 00:00:00 +0000

Error Repeated

For some of the GovCMS client, I ran into this problem while trying to install the client website on my local computer: after running pygmy up to crank up the amazie container, composer install to install the package, I got the following error while running ahoy build (same for ahoy up):

> ahoy build
[+] Building 1.0s (29/37)                                                                                                     docker:desktop-linux
 => [php internal] load build definition from Dockerfile.php                                                                                  0.0s
 => => transferring dockerfile: 244B
 ...
 ...
 ...
 => CACHED [test stage-1  8/12] RUN composer --working-dir=audit-site update --ignore-platform-reqs --no-interaction --no-suggest             0.0s
 => CACHED [test stage-1  9/12] WORKDIR /app                                                                                                  0.0s
 => ERROR [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/                                                           0.0s
 => CANCELED [nginx stage-1 1/2] FROM docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76  0.2s
 => => resolve docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677              0.0s
 => => sha256:ee1752d59231d421688bce9acc6f031f70dababa0e22f963a9ab9f8de0acdbfb 8.42kB / 8.42kB                                                0.0s
 => => sha256:4e8b32b7ceed2273f0a46cfa7750ab6d83eb8c59186ec29a4103a9747a43e50d 32.19kB / 32.19kB                                              0.0s
 => => sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677 1.61kB / 1.61kB                                                0.0s
 => CANCELED [php stage-1 1/2] FROM docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6  0.1s
 => => resolve docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6                       0.0s
 => => sha256:86d49b3929177bc771c7c46842bbe2dead6fc633aba216231353326b5c525884 24.94kB / 24.94kB                                              0.0s
 => => sha256:59fd0b12489ee3c2a16122c0a1b0ee06882ca6d355aefbd20bd904b49b377e06 6.55kB / 6.55kB                                                0.0s
 => => sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6 1.61kB / 1.61kB                                                0.0s
------
 > [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/:
------
failed to solve: failed to compute cache key: failed to calculate checksum of ref 0402bcea-675b-4e70-bf0f-dfa57911b0c1::ph76omges2o2rc5qsj75n5txc: "/usr/local/bin/drush": not found

See screenshot of this at: this link.

Drupal Tailwind CSS / Tailwind UI

Mon, 14 Oct 2024 00:00:00 +0000

Introduction

This post will provide a quick guidance on:

how-to for installing the “Tailwind CSS” on to your custom drupal theme/sub-theme,
how to create a reusable component styled based on “Tailwind UI” using paragraph module

Resources referenced in this post includes:

Tailwind CSS - Official Installation Guide: https://tailwindcss.com/docs/installation
Tailwind UI - Official Installation Guide: https://tailwindui.com/documentation
Theme Drupal - Adding assets: https://www.drupal.org/…/asset
Web Developer Jones - Install Tailwind CSS in Drupal 10: https://www.youtube.com/watch?v=kzmjUmTBVnI

Step-1: Initialization of Sub-Theme

To begin with, you can refer to this post on how to create a sub-theme based on any contributed theme, for my instance I am creating my sub-theme of machine name tailwind-civic based on the CivicTheme, which has its special provided script to generate sub-theme (see screenshot):

[Note] Lightroom - 后期必做动作

Sun, 13 Oct 2024 00:00:00 +0000

① 矫正透视 + 重新构图

② 提高鲜艳度 + 降低饱和度

③ 颜色校准 - 右右左

④ 曲线工具: 提升黑点 + 降低白点 (模拟胶片)

[Note] 阳光十六法则 (Sunny 16 rule)

Tue, 01 Oct 2024 00:00:00 +0000

阳光16法则

阳光16法则是摄影术中不借助电子测光表来估计照相机的光圈大小和快门长短的法则

阳光16的基本法则如下：

在室外阳光下，如果光圈是f/16，则快门速度应是所用胶片的国际感光度指数的倒数 (例如，在室外阳光下，如用光圈是f/16，而所用胶片的感光度为ISO100，则快门应为1/100秒)

口诀中的“16”，并不是光圈非f/16不可，如选用f/11，则快门速度当提高一倍成为1/200秒

基础光圈需要根据天气状况作调整，如多云，用ISO100胶片，如果快门速度仍旧取1/100秒，则光圈应从f/16开大一倍到f/11

Reference

https://zh.wikipedia.org/wiki/%E9%98%B3%E5%85%8916%E6%B3%95%E5%88%99

https://www.dujingtou.com/article_387.shtml

GovCMS Update Scaffold (PaaS only)

Wed, 25 Sep 2024 00:00:00 +0000

How to update the GovCMS scaffold?

To keep your scaffold up to date, changes to the GovCMS scaffold must be merged with your site’s master branch via a merge request. This requires development effort to ensure your site remains up to date.

When a new version of the Scaffold is released, developers should merge a copy of the new scaffold with their site, noting any differences, testing, confirming, fixing conflicts and then merging as required.

CSS Functional Pseudo-Classes: :is and :where

Tue, 24 Sep 2024 00:00:00 +0000

TLDR

Always use :is , never use :where

The only exception is that if you are writting your own “CSS Reset” file, then you may use :where.

Similarities

Both :is and :where peseudo selector matches element based on a list of selectors, they allow you to group selectors together and apply styles to any element that matches any of the selectors in the list. For instance imagine we have multiple <input> child component wrapped in two different <form> parent comopnent, and we want to select them all based on their the form’s classname and input’s type attribute.

HTML/CSS Data Attribute

Tue, 24 Sep 2024 00:00:00 +0000

Intuition

It is very commmon for frontend developer like me to encounter screnario where they need to display the same component in very different style, and toggle them via javascript. Before knowing the concept of data-attirbute, often times I will perform the style change via toggling the class-name, for instance:

<!-- HTML -->
<div id="demo">HELLO WORLD</div>

<!-- CSS -->
<style>
    div#demo:not(.active) { border-color: red;   }
    div#demo.active       { border-color: green; }
</style>

<!-- JavaScript -->
<script>
	document.querySelector('div#demo').onclick = () => {
		document.querySelector('div#demo').classList.toggle('active');
	}
</script>

This work well for the simple “toggling” screnario, in such screnario, it is sufficient to use the class-name to control the styling of the component (via triggering different css rule-set).

快门科普 - 总结

Fri, 20 Sep 2024 00:00:00 +0000

能用机械快门就用机械快门！(除非你有全域快门)

仅仅在需要几倍于机械快门最快快门速度的快门速度，且不使用闪光灯的情况下，可以考虑使用电子快门电子快门的缺点有：

因人造光源频闪产生的光栅现象（包括闪光灯），
因逐行读取延迟产生的滚动快门效应/果冻效应
因非均匀曝光产生的切光斑现象（尤其是在大光圈下的大弥散斑）
因噪点劣化的画质（尤其是高ISO设置下）
因降低的码率所变小的动态范围（此向根据厂商/相机不同不一定会出现）

Reference

快门科普 - 电子快门

Thu, 19 Sep 2024 00:00:00 +0000

电子卷帘快门 (electronic rolling shutter)

电子卷帘快门是一种通过电子方式控制曝光的快门类型，常见于数码相机和智能手机中。其工作原理是逐行读取感光元件上的像素数据，而不是一次性读取整个图像。这意味着曝光是按行顺序进行的，从图像顶部逐行扫描到底部。这种快门的主要特点是可以实现非常高的快门速度，因为没有机械运动部件。此外，电子卷帘快门可以在无声模式下工作，适合需要安静拍摄的场景。然而，由于逐行扫描的特性，快速移动的物体可能会出现变形或扭曲的现象，这被称为“卷帘快门效应”。尽管如此，电子卷帘快门在现代数码摄影中仍然非常普及，尤其是在需要高速度和低噪音的情况下。

特点：使用电子模拟的前后帘控制曝光

优点：

无机械部件：电子卷帘快门没有机械运动部件，因此更加耐用，减少了磨损和故障的可能性。

安静操作：由于没有机械部件的运动，电子卷帘快门在拍摄时几乎没有噪音，非常适合需要安静环境的拍摄场景，如野生动物摄影或某些室内活动。

高速连拍：电子卷帘快门可以实现非常高的连拍速度，因为它不需要机械快门的复位时间。这对于捕捉高速运动的场景非常有用。

缺点: - 卷帘效应：电子卷帘快门在逐行读取传感器数据时，可能导致“卷帘效应”（rolling shutter effect），即快速移动的物体会出现变形或倾斜。这在拍摄高速运动的物体或快速移动的相机时尤为明显。 - 闪光灯同步问题：电子卷帘快门的闪光灯同步速度较低，通常无法在高快门速度下同步闪光灯，这限制了在某些拍摄条件下的使用。 - 图像失真：在某些情况下，电子卷帘快门可能会导致图像失真，特别是在拍摄快速移动的物体或使用广角镜头时。 - 动态范围限制：电子卷帘快门的动态范围可能受到限制，因为传感器的逐行读取方式可能无法捕捉到极端光照条件下的细节。 - 曝光不均匀：在某些光照条件下，电子卷帘快门可能会导致曝光不均匀，特别是在使用高快门速度时。

电子前帘快门 (electronic front shutter)

电子前帘快门是一种结合了电子和机械快门优点的快门技术。其工作原理是在曝光开始时使用电子方式逐行激活感光元件，从而取代传统机械快门的前帘动作。曝光结束时，机械快门的后帘则会关闭以结束曝光。这种快门的主要特点是减少了机械前帘的移动，从而降低了相机的震动和噪音，提高了拍摄的稳定性和安静性。此外，电子前帘快门还能实现更快的响应时间和更高的快门速度，适合快速连续拍摄。不过，由于电子前帘快门依然依赖机械后帘，因此在某些极端拍摄条件下，可能会出现轻微的曝光不均匀现象。但总体来说，它在提高拍摄效率和图像质量方面有显著优势。

特点：使用电子模拟的前帘+使用机械结构的后帘控制曝光

优点

减少快门震动：电子前帘快门在曝光开始时使用电子方式，避免了机械快门启动时的震动。这对于长曝光时间或使用高倍放大镜头时非常有利，有助于提高图像的清晰度。

更安静的操作：由于曝光开始时没有机械运动，电子前帘快门的操作噪音较低，这在需要安静环境的拍摄场景中非常有用。

延长机械快门寿命：电子前帘快门减少了机械快门的使用频率，从而延长了机械快门的使用寿命。

提高连拍速度：通过减少机械快门的动作，电子前帘快门可以提高连拍速度，因为相机不需要等待机械快门复位。

减少黑影效应：在使用闪光灯拍摄时，电子前帘快门可以减少由于机械快门启动延迟而产生的黑影效应。

缺点

高快门速度限制：在使用非常高的快门速度时（如1/2000秒以上），电子前帘快门可能会导致曝光不均匀或图像失真。

闪光灯同步速度：虽然电子前帘快门可以提高闪光灯同步速度，但在某些情况下，其同步速度仍然不如全机械快门。

图像失真：在某些高动态范围的场景中，电子前帘快门可能会导致轻微的图像失真，特别是在使用广角镜头时。

兼容性问题：并非所有镜头都完全兼容电子前帘快门，某些老旧镜头或第三方镜头可能会出现问题。

全域电子快门 (electronic global shutter)

全域电子快门是一种先进的快门技术，通过电子方式同时激活感光元件上的所有像素，从而实现瞬间曝光。与传统的电子卷帘快门不同，全域电子快门不会逐行扫描，而是一次性读取整个图像数据。这种快门的主要特点是能够消除“卷帘快门效应”，即快速移动的物体不会出现变形或扭曲现象。这使得全域电子快门特别适合拍摄高速运动的物体或在需要高精度曝光的场景中使用。此外，由于没有机械部件的移动，全域电子快门可以实现完全无声的拍摄，并且减少了机械磨损，提高了相机的耐用性和可靠性。总体来说，全域电子快门在速度、精度和安静性方面具有显著优势，广泛应用于高端数码相机和专业摄影设备中。

特点：没有前后帘全传感器同时开始曝光，同时结束曝光

优点

无卷帘效应：全域电子快门可以同时捕捉所有像素，消除了“卷帘效应”（rolling shutter effect），因此在拍摄快速移动的物体时，不会出现变形或倾斜。

高闪光同步速度：全域电子快门可以在任意快门速度下同步闪光灯，提供了更大的创作自由度，特别是在需要使用闪光灯的高速摄影中。

无机械部件：与传统机械快门相比，全域电子快门没有机械运动部件，因此更加耐用，减少了磨损和故障的可能性。

安静操作：由于没有机械部件的运动，全域电子快门在拍摄时几乎没有噪音，非常适合需要安静环境的拍摄场景，如野生动物摄影或某些室内活动。

高速连拍：全域电子快门可以实现非常高的连拍速度，因为它不需要机械快门的复位时间。这对于捕捉高速运动的场景非常有用。

缺点

成本较高：全域电子快门的技术复杂度和制造成本较高，因此配备这种快门的相机通常价格较贵。

功耗较高：全域电子快门的操作可能比传统电子卷帘快门和机械快门更耗电，这可能会影响电池续航时间。

动态范围和噪声控制：尽管全域电子快门在消除卷帘效应方面表现出色，但其在动态范围和噪声控制方面可能不如一些高端机械快门或卷帘快门传感器。

技术成熟度：全域电子快门技术相对较新，尚未在所有类型的相机中普及，尤其是在消费级市场中。某些型号可能在技术上还不够成熟。

快门科普 - 机械快门

Wed, 18 Sep 2024 00:00:00 +0000

焦平面快门 (mechnical shutter)

焦平面快门又叫幕帘快门。早期的焦平面快门是一条长型涂胶黑布，上面排了几个长方形孔，一个比一个窄。当一个长方形孔以均匀的速度移过感光胶卷时，胶卷便曝光。孔越窄，胶卷上的光越少，快门的等效速度越高。下一步的发展是用两片幕帘构成一个宽窄可以变化的孔。幕帘的材料有涂胶黑布和金属；金属焦平面快门的幕帘，由多片狭长金属薄片组成，各相邻金属薄片略微重叠，不漏光线。幕帘快门开启时的运行方向，有横向和纵向两种。今日多数幕帘快门是用薄铝合金片制成的，也有一些是由钛合金制造。(注意：有些机器为了增加机械快门的速度，会使用马达或电磁铁提供额外动力，有些时候这些机器的快门也被称作“电子快门”，请注意区分这些快门与以下的"电子断流快门"并非同一种快门。) 由于焦平面帘幕快门在超过全开速度后是使用控制曝光范围区来达成等效速度的结果，因此在这种快门运作过程中任一时间快门帘都未全开的状况下，搭配使用发光时间极短的电子闪光灯时会产生无法同时照亮整个画面的问题，该快门帘能维持快门全开的最高快门速度称为闪灯同步速度上限。

特点：使用机械结构的前后帘控制曝光

优点：

高快门速度：焦平面快门可以实现非常高的快门速度，现代相机常见的最高快门速度可以达到1/8000秒甚至更快。这对于捕捉高速运动的物体非常有用。

简单的镜头设计：由于快门位于相机机身内，镜头设计可以更加简单，不需要集成快门装置。这通常意味着镜头更轻、更便宜。

可靠性：机械焦平面快门经过多年发展，技术成熟，可靠性高，适合各种拍摄条件。

缺点：

闪光同步速度低：焦平面快门的闪光同步速度通常较低，常见的同步速度为1/200秒或1/250秒。这限制了在高速快门下使用闪光灯的能力。

卷帘效应：在高速快门速度下，焦平面快门可能会产生“卷帘效应”（rolling shutter effect），导致快速移动的物体出现变形或倾斜。

操作噪音大：焦平面快门的操作通常比镜间快门更响，这在需要低噪音的拍摄环境中（如野生动物摄影或安静的室内环境）可能是个问题。

震动影响：焦平面快门的操作可能会引起相机震动，尤其是在使用长曝光时间或高倍放大镜头时，这可能会影响图像的清晰度。

镜间快门(leaf shutter)

镜间快门是一种安装在相机镜头内部的快门机制。它由几片金属叶片组成，这些叶片在快门关闭时完全遮挡住镜头，阻止光线进入相机。当按下快门按钮时，这些叶片会迅速打开，允许光线通过镜头进入相机的感光元件（如胶片或数字传感器）。在设定的曝光时间结束后，叶片会迅速关闭，结束曝光。镜间快门的一个显著优点是它可以在任何快门速度下与闪光灯同步，这使得它在需要使用闪光灯的摄影中非常有用。此外，由于叶片的运动距离较短，镜间快门的操作通常比其他类型的快门更安静，震动也较小，有助于提高拍摄的稳定性。

特点：使用镜头内的机械叶片控制曝光

优点：

无卷帘效应：由于镜间快门在整个画面上同时开启和关闭，不会出现焦平面快门在高速拍摄时常见的“卷帘效应”（rolling shutter effect），即画面变形或倾斜。

闪光同步速度高：镜间快门可以在任何快门速度下同步闪光，因此适合需要使用闪光灯的拍摄场景，如人像摄影和静物摄影。

安静操作：镜间快门通常比焦平面快门更安静，这在需要低噪音的拍摄环境中（如野生动物摄影或安静的室内环境）非常有用。

减少震动：镜间快门的操作通常比焦平面快门更平稳，减少了快门震动对画质的影响。

缺点：

快门速度限制：镜间快门的最高快门速度通常低于现代焦平面快门，常见的最高速度在1/500秒或1/1000秒左右，而焦平面快门可以达到1/8000秒甚至更快。

复杂性和成本：镜间快门的设计和制造较为复杂，通常会增加镜头的成本和维修难度。

镜头依赖性：镜间快门集成在镜头中，这意味着每只镜头都需要一个快门装置，增加了镜头的重量和成本。

镜头选择受限：由于镜间快门的存在，镜头选择可能受限于特定品牌或型号，特别是在中画幅和大画幅相机系统中。

旋转快门（Rotary Shutter）

旋转快门是一种机械快门，通常由一个带有开口的圆盘组成。它的工作原理是，当按下快门按钮时，圆盘开始旋转。当圆盘上的开口旋转到感光元件（如胶片或数字传感器）前时，光线通过开口进入相机，完成曝光。当开口离开感光元件后，曝光结束。旋转快门的结构相对简单，主要由一个带有开口的圆盘和驱动圆盘旋转的机械装置组成。这种设计使得旋转快门的制造和维护成本较低，因此常见于一些低成本相机中。然而，旋转快门的快门速度受限于圆盘的旋转速度，通常无法达到非常高的快门速度。此外，由于旋转快门的开口在旋转过程中逐渐暴露感光元件，曝光时间的精度相对较低，因此不适合需要高精度曝光控制的场景。尽管如此，旋转快门在早期的电影摄影机和一些特殊用途的照相机中有着广泛应用，适合某些特定的拍摄需求。总体来说，旋转快门是一种设计简单、成本较低的机械快门，但其快门速度和曝光精度有限，适用于一些特定的拍摄场景和应用。

特点：通过圆盘的缺口曝光，可以在曝光的同时通过取景器取景 (*摄像机中多见

优点：

高同步速度：旋转快门可以实现较高的闪光同步速度，因为它在整个曝光过程中保持一致的开合方式。

无卷帘效应：由于旋转快门的设计，它不会像焦平面快门那样产生“卷帘效应”（rolling shutter effect），因此在拍摄快速移动的物体时不会出现变形或倾斜。

连续曝光：旋转快门可以实现连续曝光，这在电影摄影中尤为重要，因为它允许每帧画面在相同的时间间隔内曝光。

结构简单：旋转快门的机械结构相对简单，可靠性高，适合长时间连续拍摄。

缺点：

体积和重量：旋转快门通常体积较大，重量较重，这在便携性和相机设计上可能是一个限制。

复杂的机械设计：尽管结构简单，但旋转快门的机械部分需要精确的制造和维护，这可能增加相机的成本和维修难度。

曝光控制有限：旋转快门的曝光时间受限于其旋转速度和开口大小，调整曝光时间可能不像其他类型的快门那样灵活和方便。

能量消耗：旋转快门的操作需要一定的机械能量，这在电力驱动的相机中可能会增加能量消耗。

Drupal Debug Twig

Thu, 12 Sep 2024 00:00:00 +0000

Intuition

I come across twig template development a lot due to the need of developing styled component around “Paragraph” module. During the process, in order to get the required values from the twig variables, I always found myself endlessly trying difference combination of key/filter by using dump() or var_dump().

For instance, to get the url of a media entity field, I’ll need to write the following twig expression: {{content['field_footer_image'].0["#media"]|file_uri|file_ur}} . And in order to get to this long long expression, I will need to use dump() on every single key/filter.

CSS Selector’s Specificity

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

Why does it matter ?

When writing new styles for a functioning website, it is common for individuals to override CSS styles above the existing ones. For example, if one aims to emphasize the <h2> heading on the FAQ card below, it is likely necessary to override its style settings to increase the font-weight and font-size values.

When a specific HTML element, such as an <h2>, already possesses predefined styles, it becomes necessary to craft new CSS rules that are sufficiently robust to supersede the current styling in effect. An example of this scenario is the CSS rule .slide_content .slide_caption a h2 (Rule-A)which is being applied to the upper FAQ card (this can be observed within the style panel situated on the right side of DevTools in Chrome)

Ahoy Build - ERROR [cli internal] load metadata for docker.io/govcms

Tue, 10 Sep 2024 00:00:00 +0000

Original Error

I was encountering this issue as I run ahoy build:

> ahoy build
[+] Building 12.5s (2/2) FINISHED                                                                      docker:desktop-linux
 => [cli internal] load build definition from Dockerfile.cli                                                           0.0s
 => => transferring dockerfile: 1.43kB                                                                                 0.0s
 => ERROR [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest                                        12.4s
------
 > [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest:
------
failed to solve: govcms/govcms:10.x-latest: failed to resolve source metadata for docker.io/govcms/govcms:10.x-latest: failed to do request: Head "https://registry-1.docker.io/v2/govcms/govcms/manifests/10.x-latest": net/http: TLS handshake timeout

[Note] Drupal Apply Patch via Composer

Wed, 28 Aug 2024 00:00:00 +0000

TLDR;

Install cweagans/composer-patches module via composer:

`1`	`composer require cweagans/composer-patches`

Modify <root>/composer.json to include the core/module/theme patch:

...
"require": {...},
"require-dev": {...},
"extra": {
+    "patches": {
+        "drupal/pathauto": {
+            "Issue #3275041": "https://www.drupal.org/files/issues/2022-04-13/add_bypass_uniquifier_settings-3275041-2.patch"
+        }
    },
    "drupal-scaffold": {...},
    "installer-paths": {...}
}
...

Run corresponding composer update command (e.g. for the above we applied patch for pathauto module):

`1`	`composer update drupal/pathauto`

Clear cache via druah command

`1`	`drush cr`

Reference

PENDING TO READ THESE PAGES FOR MORE DETAILS

Drupal Debug PHP File

Wed, 28 Aug 2024 00:00:00 +0000

Method-1: PHP (print_r / var_dump / var_export)

You may use a combination of the print_r(), var_dump(), var_export(), and always end with die() to break the logic flow, such that the function hault on your debug code and print out:

  print_r    ("HELLO WIRLD from PRINT_R");
  dump       ("HELLO WORLD from DUMP");
  var_export ("HELLO WORLD from VAR_EXPORT");
  var_dump   ("HELLO WORLD from VAR_DUMP");
  die();

For instance you can have the following code to debug print in custom_theme_name.theme file:

影调 - 明度基调 101

Fri, 09 Aug 2024 00:00:00 +0000

曝光分区

明度区域划分理论

借鉴亚当斯的区域曝光法，黑白照片的色调或灰调可以分为十一个“区域”，由零区域（相纸能够表现出的最黑的部分）至第十区域（相纸的底色——白色）。

直方图有长有短（X轴），有高有低（Y轴），我们根据直方图X轴的长短还可以把影调细分为长调、短调、和中调。对于长、短、中的明度分区跨度并没有明确规定，我大致的归纳一下，直方图跨越小于等于4个明度区间的影调可以称为短调。直方图跨越大于4个明度区间而又小于等于7个明度区间的的影调可以称为中调。直方图跨越大于7个明度区间的我们可以称为长调。

---500px-Joyous周游

明度基调

根据亚当斯分区曝光法，以“高中低”和“长中短”作为两个方向的坐标轴，我么可以获得九种不同的调性组合如下图所示。(明度基调)

看似复杂调性，实际上是从直方图为分类基准的。接下来我们对九种不同的调子进行讨论。

高调

高长调 (案例)

直方图显示明度信息集中在亮部，且明度信息遍布全长（从最亮部到最暗部都有信息），对比强烈。

高短调的片子比较难拍，也比较难后期

高中调 (案例)

直方图显示明度信息集中在亮部，且明度信息绵延较长（从较亮部到较暗部都有信息），对比度介于高长调和高端调之间。

**高短调 ** (案例)

直方图显示明度信息集中在亮部，且明度信息也只集中在较小的范围内，体现为对比度较小。

中调

中长调 (案例)

大多数时候，被摄对象都是很复杂的，因此中长调是最为常见的调性。

中中调 (案例)

有雾，不通透，但是作者逆来顺受，顺势而为，用中中调，表达了这样一个灰色的世界，风光摄影，不仅要记录大自然的火烧云、雷暴等极端天气，雾也是大自然更为常见而平凡的一面。

中短调 (案例)

对比很不明显的灰色调。

游走与黑与白之间的灰，给人更多的遐想，这种灰调的片子也通常用来表达情绪非常适合。

低调

低长调 (案例)

片子整体偏暗。

低中调 (案例)

片子整体偏暗，且对比不明显。

低短调 (案例)

片子整体偏暗，且对比不明显。

*低中调、低长调最为难调，但是却是目前摄影作品中的主流。

---摸着羊的笔记本 / 500px-Joyous周游

引用资料

[Joyous周游] https://500px.com.cn/community/v2/graphic/detail/dfd8efca14e34cdfa72f2e251c304313
[摸着羊的笔记本] https://www.mozheyang.top/2018/06/03/PhotographyTone/
[阿布相机手册] https://www.youtube.com/watch?v=be_dFpjz7Fk
[CKO养成计划] https://www.shangyexinzhi.com/article/435428.html

Lightroom - Saturation vs Vibrance

Wed, 07 Aug 2024 00:00:00 +0000

Saturation

TLDR: uniform adjustment

Adjust all color evenly
- For example, when in the HSV color space when you turn saturation down by 10%, all the colors’ saturation will move towards the center by 10%;
- Similarly, when you eventuallu reduce all the color’s saturation down by 100%, all the colors on all hue, will reach the center, that is pure black/white/gray.
Adjust all brightness evently:
- No matter it is black, shadow, mid-tone, highlight or white, the saturation will adjust them all without distinguishing.

Vibrance

TLDR: selective adjustment

Lightroom - Keyboard Shortcut

Mon, 05 Aug 2024 00:00:00 +0000

①

View Mode

Toggle Side Panel: Tab
Toggle Zoom (Un-zoom): Space
Toggle Bottom Film Strip: /
Toggle View Original: \
Toggle Clipping: j (White-Clipping-Red, Black-Clipping: Blue)
Toggle Histogram: ⌘ 0

Picture Mode

Photo Grid: g
Compare: ⌥ c
Detail (for editing): d
Full Screen (for preview): f
Zoom in/out/reset: ⌘ +/⌘ + -/space

Panel Toggle

Toggle Photo Panel: p
Toggle Preset Panel: ⇧ p
Toggle Edit Panel: e
Toggle Crop/Geometry Panel: c
Toggle Healing Panel: h
Toggle Masking Panel: m

②

Metadata and Keyword

Metadata Information: i
Keyword Labeling: k
Add Keyword: ⌘ k

Flagging (Raise/Drop = Pick/Reject)

Raise Flag (=Pick): ⌘ ↑
Drop Flag (=Reject): ⌘ ↓

Flagging (Pick/Reject)

Pick: z
Reject: x
Unflag: u
Pick and next: ⇧ z
Reject and next: ⇧ x
Unflag and next: ⇧ u

③

Adjust Modifier

Auto-adjustment: ⌥ (option) + click (when trial change)
Fine-adjustment: ⌥ (option) (when make small change)
Leap-adjustment: ⇧ (shift) (when make big change)
Change paint size: scroll (up/down = bigger/smaller)

Zoom

Default Zoom in/out: click
Zoom to default view: space
Zoom via selection: ⌥ drag
Reset zoom (to default): space

Picker Adjustment (Click+Drag)

Guided Upright: ⇧ g
Picker - None: ⌥ ⇧ ⌘ n
Picker - White Balance (Neutral-Gray Picker): j
Picker - Point-Color (Color-Mixer Picker): ⇧ h
Picker - Curve: ⌥ ⇧ ⌘ t
Picker - Hue: ⌥ ⇧ ⌘ h
Picker - Saturation: ⌥ ⇧ ⌘ s
Picker - Luminance: ⌥ ⇧ ⌘ l

④

Section Toggle

Light: ⌘ 1
Color: ⌘ 2
Effects: ⌘ 3
Detail: ⌘ 4
Optics: ⌘ 5
Lens Blur: ⌘ 6
Geometry: ⌘ 7

Crop Geometry

Toggle Composition Guideline: o (e.g. rule-of-third to golden-rectangle)
Rotate Left (Clockwise): ⌘ [
Rotate Right (Anti-clockwise): ⌘ ]
Flip Horizontal: ⇧ ⌘ [
Flip Vertical: ⇧ ⌘ ]
Toggle Composition Guide o (e.g. rule of third to diagonal)

Healing

Toggle Healing Panel: h
Cycle Remove Type: ⇧ t
Toggle spot: a
Refresh: /

Mask

Toggle Masking Panel: m
Toggle Mask Overlay: o
Cycle Mask Overlay Colors: ⇧ o
Show Pins and Tools: ⌘ o
Paint Invert tool (addition/subtraction): ⌥(hold) paint
Paint Join Point with Line (connect the dot): first paint, then ⇧(hold) click
Invert selected mask: ⌘ i

Lightroom - Texture vs Clarity vs Dehaze

Mon, 05 Aug 2024 00:00:00 +0000

Introduction

In Adobe Lightroom, under the “Effect” section of the “Edit” panel, you can see four options: Texture, Clarify, Dehaze

All of which make the image “sharper/clearer” when tuned up and “hazier/softer“when tuned down, so there must be some reason behind Lightroom seperating these similar setting into three different sliders, and that’s what we will discuss in this post.

Texture

Texture effect the mid-high frequency part of the image (for instance, texture of a sand paper), turning it up will increase the details of the mid-high frequency part of the image, put it simply, make it more obvious; And turning it down will do the opposite.

Regular Expression 101

Mon, 05 Aug 2024 00:00:00 +0000

Regular Expression Tester

Regular Expressions 101

Example match: screenshot
Example mis-match: screenshot

CheatSheet

Breakdown

Square Brackets (`[]`)

The name might sound scary, but it is nothing but the symbol: []. Some people also refer to square brackets as character class – a regular expression jargon word that means that it will match any character inside the bracket.

For instance:

Pattern	Matches
[Pp]enguin	Penguin, penguin
[0123456789]	(This will match any digit)
[0oO]	0, o, O

Disjunction (`|`)

The pipe symbol means nothing but either ‘A’ or ‘B’, and it is helpful in cases where you want to select multiple strings simultaneously. For instance:

Oh-my-posh Configuration File

Thu, 01 Aug 2024 00:00:00 +0000

{
    "version": 2,
	"$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
    "final_space": true,
    "auto_upgrade": true,
    "disable_notice": true,
    "transient_prompt": {
        "background": "#363039",
        "foreground": "#F3AF31",
        "template": "<#363039,transparent>\ue0b6</><#F3AF31,#363039>{{.Folder}} </>\u276f<#363039,transparent>\ue0b4 </>",
        "type": "text"
    },

	"blocks": [
        {
			"alignment": "left",
			"segments": [
				{
					"background": "#F3AF31",
					"foreground": "#363039",
					"leading_diamond": "\ue0b6",
					"style": "diamond",
					"template": "{{ .Folder }} \u276f",
					"trailing_diamond": "\ue0b4",
					"type": "text"
				}
			],
			"type": "prompt"
		},
		{
			"alignment": "right",
			"segments": [
				{
					"background": "#F3AF31",
					"foreground": "#363039",
					"foreground_templates": [
						"{{ if or (.Working.Changed) (.Staging.Changed) }}#363039{{ end }}",
						"{{ if and (gt .Ahead 0) (gt .Behind 0) }}#363039{{ end }}",
						"{{ if gt .Ahead 0 }}#B388FF{{ end }}",
						"{{ if gt .Behind 0 }}#B388FF{{ end }}"
					],
					"leading_diamond": " \ue0b6",
					"properties": {
						"branch_max_length": 25,
						"fetch_stash_count": true,
						"fetch_status": true,
						"fetch_upstream_icon": true
					},
					"style": "diamond",
					"template": " {{ .UpstreamIcon }}{{ .HEAD }}{{if .BranchStatus }} {{ .BranchStatus }}{{ end }}{{ if .Working.Changed }} \uf044 {{ .Working.String }}{{ end }}{{ if and (.Working.Changed) (.Staging.Changed) }} |{{ end }}{{ if .Staging.Changed }} \uf046 {{ .Staging.String }}{{ end }}{{ if gt .StashCount 0 }} \ueb4b {{ .StashCount }}{{ end }} ",
					"trailing_diamond": "\ue0b4",
					"type": "git"
				}
			],
			"type": "rprompt"
		}
	]
}

DDEV - failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?

Fri, 26 Jul 2024 00:00:00 +0000

Intuition

Getting the following error when running ddev start:

> ddev start
Starting my-site...
Mutagen sync session 'my-site' exists but unable to get sync label 'com.ddev.volume-signature': '' This is normal on upgrade from v1.21.6; error=Mutagen sync session for app 'my-site' does not exist or is not enabled; status=not enabled; err=<nil>
Building project images...
.Project images built in 1s.
 Network ddev-my-site_default  Created
 Container ddev-my-site-db  Created
 Container ddev-my-site-web  Created
 Container ddev-my-site-web  Started
 Container ddev-my-site-db  Started
Starting Mutagen sync process...
Mutagen sync flush completed in 1s.
For details on sync status 'ddev mutagen st my-site -l'
Waiting for containers to become ready: [web db]
Starting ddev-router if necessary...
 Container ddev-router  Created
Error response from daemon: Ports are not available: exposing port TCP 127.0.0.1:443 -> 0.0.0.0:0: failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?: dial unix /var/run/com.docker.vmnetd.sock: connect: no such file or directory
Failed to start my-site: failed to start ddev-router: composeCmd failed to run 'COMPOSE_PROJECT_NAME=ddev-my-site docker-compose -f /Users/suowei_hu/.ddev/.router-compose-full.yaml -p ddev-router up --build -d', action='[-p ddev-router up --build -d]', err='exit status 1', stdout='', stderr=' Container ddev-router  Creating
 Container ddev-router  Created
 Container ddev-router  Starting
Error response from daemon: Ports are not available: exposing port TCP 127.0.0.1:443 -> 0.0.0.0:0: failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?: dial unix /var/run/com.docker.vmnetd.sock: connect: no such file or directory'

Solution

Start by vmnetd running:

[Bug Fix] Composer Unpin Drupal Core From Certain Version

Wed, 24 Jul 2024 00:00:00 +0000

#Unpinning from a specific version of core

If you are running a pinned version of Drupal core, and want to update your site to another version, you have two choices.

You can run the composer require command above to specify a new, pinned version of core. You can unpin your core version, and update to the latest version of Drupal. To unpin your version of Drupal, run this command:

`1`	`composer require drupal/core-recommended drupal/core-composer-scaffold drupal/core-project-message --update-with-all-dependencies`

Reference

GovCMS - theme changes are not updating on live site

Fri, 19 Jul 2024 00:00:00 +0000

(Production Website does not change Upon Successful Deployment)

Incident Happened ?

I come acorss this incident whilst updating a banner image for a GovCMS website client, the client would like to replace the image from image-a to image-b. After some quick investigation, I found the image to be applied via css styling: background-image: url(/site/../../image-a), so I simply changed the line to ``background-image: url(/site/../../image-b)`, made some adjustment to the position/cover etc, and have everything merged & deployed onto the production.

Drupal - TFA Moduel Setup

Mon, 08 Jul 2024 00:00:00 +0000

This post records steps that I’ve went through to setup the TFA feature on drupal website, so I can quickly reproduce the step quickly without wondering around like a fly.

Step-1: Module Installation & Environental Setup

To begin with, it is always recommended to take a backup of your server (filebase/database/htaccess file) before doing everything, this ensures you have a second chance when something went wrong in the upcoming process

Flashlight - TTL Mode

Wed, 03 Jul 2024 00:00:00 +0000

The break-through that made us all …. unable to do math: TTL Mode

In the previous post, I’ve explained in a very primitive scenario, where there is an object with infinitely far background, camera’s on auto, and flashlight is non-TTL; Without any human intervension to adjust the explosure compensation setting on camera, the camera will over-expose the object.

And in order to ensure the correct explosure of the object with the flashlight, one will need to adjust the on-camera explosure compensation, and how this can be troublesome in the condition where the object is moving.

What is Pan-Focus ? - Scribble Note

Wed, 03 Jul 2024 00:00:00 +0000

Why using Pan-Focus

Use as intro:

说到这里我就举例说了一个比较特别的例子，叫做“不能对焦的泛焦机”，它也是不能手动对焦的，但只不过它并不是“不能自动对焦”而是“不能对焦”。那不能对焦的相机到底怎么拍照呢？其实泛焦机它指的就是景深特别大的那些相机，景深已经大到了“超焦距”，已经不用再对焦的那些相机。

比如说我们能花几十块钱去买一台傻瓜机，那机器什么功能都没有，你不能对焦，但它会在说明书上告诉你说，你拍照必须在1.2米（或某个距离）以外到无穷远，这一段距离内所有事物都是清楚的。你看，这就是典型的超焦距，它的景深范围近的这头可能是1米左右远，远的那头跨度到了无穷远，它是通过一个广角的小光圈的镜头来实现的，所以这种相机就不再需要对焦了。它的缺陷就是特别近的事物是没有办法拍清楚的。

https://www.sohu.com/a/367387870_419981

Priliminary Knowledge: DoF

Explain what the ∞ mean in the DoF table ?

Depth of Field (DoF) Tablehttps://www.dofmaster.com/doftable.html

Depth-of-field Scale (on-Lense)

鏡頭景深表尺 / Depth of field scale

例如：徕卡M 35mmF2镜头，第一圈数字为光圈指数，第二圈数字是英尺，第三圈数字是公尺，第四圈三角头两边是相对应的数字，这就是景深表和表示的景深范圈。假如设定的光圈为F8上，然后转动调焦环，使镜头第三圈上的公尺数1.2mm标记对准第四圈三角箭头的左边数字8上，这时再看三角箭头右边数字8相对第三圈公尺数应是2-3m之间，也就是2.2m时的景深范围是1.2-2.2m，也就是说，在这个范围内的景物，在此种情况下，不管取景框中的双影重叠与否，所拍出的景物都是清晰的。

依此类推，也可以先找我们要拍的最远距离点，如还用F8光圈，先用第四圈（三角箭头右边）数字标记8对准第三圈公尺无限远标记，再看第四圈三角箭头的左边第四圈标记8，这时8标记指在第三圈公尺环2.5mm上，也就是说从最近点2.5——无限远，在这种情况下不用对焦所摄景物都清晰。

https://www.sohu.com/a/115496803_417563

Hyperfocal Distance

What is the definition of in foucs ?

在焦点前后，光线开始聚集和扩散，点的影像变成模糊的，形成一个扩大的圆，这个圆就是弥散圈。在现实当中，如果弥散圈的直径小于人眼的鉴别能力，在一定范围内实际影像产生的模糊是不能辨认的，这个不能辨认的弥散圈就称为容许弥散圈。从焦点到近处容许弥散圈的距离叫做前景深，从焦点到远处容许弥散圈的距离叫做后景深。实际上是弥散圈的存在形成了景深，容许弥散圈直径也是影响景深的一个要素，不同相机的画幅大小、照片的放大倍率等不同导致容许弥散圈直径是不同的。为什么解释容许弥散圈直径，因为这个是和景深的利用休戚相关。

https://www.douban.com/note/195947395/?_i=12888672lJNnYN

What is / How to calculate Hyperfocal Distance

什麼是超焦距(Hyperfocal Distance)

「超焦距」指相機對焦於那個距離時，能把可接受的清晰範圍最大化，使其由該距離的一半延伸至無限遠。這簡直是令人摸不著頭腦的定義，是不？看上圖，再閱讀多次，大家便能掌握個中的奧秘。

既然，焦距、光圈等因素會改變超焦距的位置，那麼是否很難找出超焦距 (Hyperfocal Distance)？

Flashlight - Use S/A/I to Balance Ambient and Flash-lit Object

Tue, 02 Jul 2024 00:00:00 +0000

Since this concept is well explained by others, I won’t delve into a lot of detail on this. To understand the concept, you can either find one of the flashlight 101 video on YouTube, or read one/some of the resource I’ve went through to understand it:

YouTube Video
Sony Flashlight Manual
- HVL-F43M (EN)
- HVL-F32M (ZH)

S/A/I Difference

Overview

Flashlight - Manual Mode (Basic Explosure)

Mon, 24 Jun 2024 00:00:00 +0000

An very old-fashioned scenario: Manual Flash

Assumption: Ignore Background

For the sake of simplicity, let’s consider a simple situation in this post, imagine a perfectly manual situation where you are shooting a main object without background or background that is infinitely far in a B&W setting. (i.e. let’s dis-egard the difference between object/background)

Ambient Light

Normally when you try to shoot a photo without the flash, you are only dealing with the ambient lighting: the lights get ejected from the light source, reflect from the main object, go into lense, land onto CMOS sensor, and triggers electrical signal of variying voltage corresponding to the strength of light (Flux? Luminosity? Maybe a topic for another day…).

GovCMS Docker - No space left on device

Thu, 20 Jun 2024 00:00:00 +0000

Error Reproduced

I come across this error when trying to do ahoy up on one of the GovCMS client project, whilst the command successes without throwing any error:

> ahoy up

WARN[0000] /Users/suowei_hu/Documents/é GitHub/example/docker-compose.yml: `version` is obsolete
[+] Running 8/0
 ✔ Container example-av-1       Running                                                                                                                   0.0s
 ✔ Container example-mariadb-1  Running                                                                                                                   0.0s
 ✔ Container example-cli-1      Running                                                                                                                   0.0s
 ✔ Container example-solr-1     Running                                                                                                                   0.0s
 ✔ Container example-test-1     Running                                                                                                                   0.0s
 ✔ Container example-php-1      Running                                                                                                                   0.0s
 ✔ Container example-nginx-1    Running                                                                                                                   0.0s
 ✔ Container example-chrome-1   Running                                                                                                                   0.0s
2024/06/19 22:36:30 Waiting for: tcp://mariadb:3306
2024/06/19 22:36:30 Connected to tcp://mariadb:3306
Project                  :  example
Site local URL           :  http://example.docker.amazee.io
WARN[0000] /Users/suowei_hu/Documents/é GitHub/example/docker-compose.yml: `version` is obsolete
DB port on host          :  50658

when I visit the given url I see the following

GitHub Programmable AI ? [PENDING]

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

https://github.com/JushBJJ/Mr.-Ranedeer-AI-Tutor https://www.youtube.com/watch?v=gLATieOIv64

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

[GovCMS PaaS] ahoy error: you must use a personal access token instead of a password

Fri, 14 Jun 2024 00:00:00 +0000

Issue Reproduced

...
WARN[0000] /Users/admin/sites/XXXXX/docker-compose.yml: `version` is obsolete
[+] Running 2/2
✘ mariadb Error Head "https://gitlab-registry-productio...                0.4s
! cli Warning   context canceled                                          0.4s
Error response from daemon: Head "https://gitlab-registry-production.govcms.amazee.io/v2/xxxxxx/xxxxxx/mariadb-drupal-data/manifests/latest":
unauthorized: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password.
See https://projects.govcms.gov.au/help/user/profile/account/two_factor_authentication#troubleshooting
...

Resolution of Error

First get a personal acecss token with the proper privilledge, if you are unsure, select all privilledge: (your personal access token should look somthing like glpat-XXXXXXXXXXXXXXXXX)

[GovCMS SaaS] Configure Pathauto Pattern: [node:menu-link:parents:join-path]/[node:title]

Fri, 14 Jun 2024 00:00:00 +0000

Issue Reproduced

I was going to make a node’s url match with its menu configuration, this causes me having to go to the configuration page: “Admin > Config > Url-Alias > Pattern” (/admin/config/search/path/patterns), and add a pattern “[node:menu-link:parents:join-path]/[node:title]”.

As I try to add the new pattern as described above, I’ve got the error: “Path pattern is using the following invalid tokens: [node:menu-link:parent:join-path].”

After some investigation, I findout this issue only happens on GovCMS SaaS Platform; The Venilla Drupal 10 works fine (adding the pattern “[node:menu-link:parents:join-path]/[node:title]”) without this issue and same does the PaaS version of the platform. (Hopefully this can get patched soon…. ?)

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

HTML APIS (PENDING)

Thu, 06 Jun 2024 00:00:00 +0000

https://www.w3schools.com/html/html5_webworkers.asp https://www.w3schools.com/html/html5_webstorage.asp https://www.w3schools.com/html/html5_draganddrop.asp https://www.w3schools.com/html/html5_geolocation.asp

Reflection on Toby's Talk on DrupalACT Meet-up (2024-June-05)

Thu, 06 Jun 2024 00:00:00 +0000

Overview

Yesterday, I attended an offline meetup where three presentations were given. The first was on handling misaligned user data through a data pipeline and storing it in a solar database by Brynn Briedis (gumnut). The second focused on replacing paragraph type and twig template with vue components as the render template by Alex Monaghan. The final, and most enjoyable, presentation by Toby Wild discussed improving user experience for those working 8 hours in the Drupal admin backend, specifically for content authors. (p.s. he have a blog too !)

Awk command 101

Tue, 04 Jun 2024 00:00:00 +0000

PENDING - YouTube Series about AWK command

Overview

What is AWK command ?

The basic function of awk is to search files for lines (or other units of text) that contain certain patterns. When a line matches one of the patterns, awk **performs specified action**s on that line. awk continues to process input lines in this way until it reaches the end of the input files.

– GNU General Instruction for AWK

Disable Shield via Drush

Tue, 04 Jun 2024 00:00:00 +0000

In Drupal, the “Shield” module is used to protect your site with a simple HTTP authentication prompt, which is typically needed during development to prevent unauthorized access to the site.

Disable Shield via Drush

To disable the Shield module using Drush (Drupal’s command-line shell), you can use the following command:

For Drupal 8 and later:

From Drupal 8 onwards, modules are no longer disabled—they are uninstalled if you need to remove them. If you simply want to disable the Shield authentication (and not uninstall the module), you might need to change its configuration instead. However, if uninstalling is your aim:

List/Mount/Unmount SMB Drive on CLI

Thu, 30 May 2024 00:00:00 +0000

List/Mount/Unmount network drive via cli

Drupal Database Logging [PENDING]

Wed, 29 May 2024 00:00:00 +0000

To view the log, navigate to the Recent log messages page (http://example.com/admin/reports/dblog) You can see things like when a content is deleted, created, by who…..

https://drupal.stackexchange.com/questions/48645/how-to-show-admin-reports-dblog-in-terminal-cli https://www.drupal.org/docs/8/core/modules/dblog/overview

IP Address Cannot Access Website (How does DNS server work behind the theme to protect your website)

Wed, 22 May 2024 00:00:00 +0000

Expected Behavior

If one have taken a network related course in their university, then he/she might comprehend the process website opening be like:

Enter Url/Domain in the browser address bar (www.example.com)
The browser resolve the DNS record and retrive its IP address (100.100.100.100)
The browser establish the TCP connection with the server of IP address using HTTP port 80 (or HTTPS port 443)
The browser sends an HTTP (or HTTPS) request to the server and retrive the (source) html code code
The browser render the website using its engine and display the website

So in theory, if we would be able to get the IP address of the target server, we can skip step 1, and everything else would work as anticipated as above ? WRONG ! There are many other factors affecting the certain details of the above process.

Synology SSH Login as Root User

Wed, 22 May 2024 00:00:00 +0000

(This only works for my DSM 6.0, at the time where you read this post, it may be outdated)

First launch the terminal application on the computer
Type in the following command and press enter: ssh admin@255.255.255.255 -p 22 -t "cd ~/../../../../volume1/; bash --login;" (change the ip and port to match your configration)
Enter the password of the admin user (this is the default administration user of your synology server)
Type sudo -i and press Enter.
Enter the password of your DSM/SRM’s administrator account again, and press Enter.
You are now signed in to your DSM/SRM with root privilege via SSH

Reference

https://kb.synology.com/en-global/DSM/tutorial/How_to_login_to_DSM_with_root_permission_via_SSH_Telnet#anchor1

GovCMS Forklift

Tue, 21 May 2024 00:00:00 +0000

!!!!

This Post is simply a copy-paste from the GocCMS knowledge archive https://www.govcms.support/support/solutions/articles/51000095221-forklift-basics

(If there is any infringement, please contact me, and I’ll delete the post.)

!!!!

What is a forklift & what is not?

What is a forklift ?

A forklift is the process of copying a database and/or files (CMS media assets) from a source environment/site into an existing target environment/site. This includes:

Moving a site built locally from a developer onto the GovCMS platform
Moving a site from one project to another
Moving a database/files in the same project from a lower environment to Master

What is not a forklift ?

In some instances forklifts are not needed or not warranted. This includes:

子弹笔记-初心者学习笔记 (Bullet Note-101)

Tue, 21 May 2024 00:00:00 +0000

为什么考虑子弹笔记？

电子产品使用的界限往往模糊不清，用户容易从关注“如何利用工具提升效率”转而过度关注“软件的高级功能”，甚至无意中频繁打开社交媒体或视频平台。

以我为例，我喜欢购买软件以融入我的工作流程。因为花了钱，我便会试图充分利用这些软件的每一个功能，经常不自觉地花费大量时间探索软件的各种细致设置和功能；我常问自己，“如何才能最大化利用这个软件？”尽管实际上，大多数高级功能对我而言并非必需，有时甚至会使原本简单的任务变得复杂。由于我的收集癖，我还会在小红书、哔哩哔哩、YouTube和知乎等平台上保存大量可能永远用不到的教程。这导致我每次查阅这些笔记或尝试学习新东西时都得分出心力来抵制打开其他娱乐链接的诱惑。

截至目前，我仍然认为使用纸笔是更佳的笔记方法。纸笔的局限性其实是一种优势，它固定了行为范围：你只能写字或画图，使用符号和文字来记录内容。没有任何链接可供点击，无需添加任何附件，也不需设置繁复的选项或记住各种快捷键。所有功能仅依赖于条件映射（符号XX=含义YY）以及行为模式的培养（例如定时更新任务状态），可能正是因为这些，纸笔才是我理想中的完美任务追踪工具。

常用标记/子弹短句

基础

• 任务（需要采取行动
○ 事件（明确了时间、地点等信息，可以直接参加的
- 笔记（需要记录下来的内容，不一定具有可操作/完成性

状态

× 完成的
~ 取消的（亦可以直接划去
> 推迟的（今天完成不了，推迟到明天
< 不在日期范围的（最近都完成不了，推迟到下个日期

意符

★ 非常重要的
⦿ 需要调查的 (需要进一步确认/研究

引用内容

Address Input Auto-Complete (via Google Place API)

Fri, 17 May 2024 00:00:00 +0000

PENDING EXPLAINATION ….

index.md

<html>

<head>
    <title>Place Autocomplete Address Form</title>
    <script type="module" src="./index.js"></script>
    <style>
        .full-field {
            width: 400px;
            display: flex;
            justify-content: space-between;
        }

        .full-field>.form-label {
            display: block;
            text-align: left;
            margin-right: 10px;
        }

        .full-field>input {
            width: 250px;
        }
        .pac-container:after {
            background-image: none !important;
            height: 0px;
        }
    </style>
</head>

<body>
    <form id="address-form" action="" method="get" autocomplete="off">
        <label class="full-field">
            <span class="form-label">Search</span>
            <input id="search" name="search" required autocomplete="off" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Address1</span>
            <input id="address1" name="address1" required autocomplete="off" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Address2</span>
            <input id="address2" name="address2" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">City*</span>
            <input id="locality" name="locality" required />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">State/Province*</span>
            <input id="state" name="state" required />
        </label>
        <br>
        <label class="full-field" for="postal_code">
            <span class="form-label">Postal code*</span>
            <input id="postcode" name="postcode" required />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Country/Region*</span>
            <input id="country" name="country" required />
        </label>
    </form>

    <!-- dont worry if you see the below key .... it been removed from my account already .... -->
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0q7MRzP5phqe8r26v9qi_rEoCwFFrXck&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>
</body>

</html>

index.js


let form_search;                // field for address search
let form_address1;              // field of address 1
let form_address2;              // field of address 2
let form_city;                  // field of city
let form_stateProvince;         // field of state/province
let form_country;               // field of country
let form_postal;                // field of postal code
let gpla_autocomplete;         // auto complete object

function gpla_initAutocomplete() {
	form_search        = document.querySelector("#search");
	form_address1      = document.querySelector("#address1");
	form_address2      = document.querySelector("#address2");
    form_city          = document.querySelector("#locality");
    form_stateProvince = document.querySelector("#state");
	form_country       = document.querySelector("#country");
	form_postal        = document.querySelector("#postcode");

    // Initialize the auto-complete api and its cooresponding listener
	gpla_autocomplete  = new google.maps.places.Autocomplete(
        form_search, {
            componentRestrictions: { country: ["au", "nz"] },                         //restricting addresses in the Australia and New Zealand.
            fields:                ["name","address_components", "geometry", "icon"], //specify field needed (https://developers.google.com/maps/documentation/javascript/place-autocomplete#specify-data-fields)
            types:                 ["address"],
        }
    );
	gpla_autocomplete.addListener("place_changed", gpla_fillInAddress);
}

function gpla_fillInAddress() {
    // Initialize the values which
    // will later be filled into the fields
	let place_address1      ="";
	let place_address2      ="";
    let place_city          ="";
    let place_stateProvince ="";
    let place_country       ="";
    let place_postcode      ="";

    // `Extract address components from place details and populate corresponding form fields.
    // The place.address_components are google.maps.GeocoderAddressComponent objects. (http://goo.gle/3l5i5Mr)
	const place = gpla_autocomplete.getPlace();
	for (const component of place.address_components) {
		switch (component.types[0]) {
            case "street_number":               {place_address1      = `${component.long_name} ${place_address1}`;   break;}
			case "route":                       {place_address1      += component.short_name;                        break;}
			case "subpremise":                  {place_address2      = `${component.long_name}`;                     break;}
			case "postal_code":                 {place_postcode      = `${component.long_name}${place_postcode}`;    break;}
			case "postal_code_suffix":          {place_postcode      = `${place_postcode}-${component.long_name}`;   break;}
			case "locality":                    {place_city          = component.long_name;                          break;}
			case "administrative_area_level_1": {place_stateProvince = component.short_name;                         break;}
			case "country":                     {place_country       = component.long_name;                          break;}
		}
	}

    // Filling the retrived value from google place api
    // into the cooresponding field in the webform
	form_address1.value       = place_address1;
	form_address2.value       = place_address2;
	form_postal.value         = place_postcode;
	form_city.value           = place_city;
    form_country.value        = place_country;
    form_stateProvince.value  = place_stateProvince;
}

window.initAutocomplete = gpla_initAutocomplete;

Reference

DVF (Data Visualization Framework) Quick Guidance

Thu, 16 May 2024 00:00:00 +0000

Introduction

Data Visualisation Framework (DVF) is a Drupal 8/9 module designed to turn data sets into visualisations. In summary, it reads data from a source, such as CSV, JSON or even a remote CKAN instance. It then provides the tools for content authors to turn that data into a visualisation that is easily digestible for the website users.

In this documentation, we will demonstrate how we can utilise the DVF to create different types of interactive charts, how we can use different types of charts, and how to configure the DVF field to enable customised colours, styles, and labels.

LLM - Useful Prompt & Prompt Generation

Tue, 14 May 2024 00:00:00 +0000

Useful Prompt

Reading

Summarize Article (in Chinese)
- As an academic researcher, I request that you write a summary in Chinese that meets the standard of a Master’s degree thesis. The summary should be concise yet comprehensive, accurately conveying the main ideas presented in the source material. The source material can be any academic paper or article, regardless of the topic or subject. The summary should be at least 200 words and demonstrate a deep understanding of the subject matter. Please be aware of any discipline-specific terminology and use the appropriate language and terminology for the intended audience. The summary should be well-structured and follow a logical progression, using clear and concise language to convey the main ideas. Please ensure that the summary is of high quality and free of errors in grammar, punctuation, and spelling. Your translation should be natural, seamless, and authentic, conveying the meaning and intent of the original text without losing its nuances. Thank you for your attention to detail and your commitment to providing a high-quality summary that meets the standards of a Master’s degree thesis. if you know,answer me"sure,sir.“then I will give you the original article.
- ★★☆☆☆ (REF)

Translate

Chinese Language Translator
- Act as a Chinese language translator. I will provide a sentence or paragraph that needs to be translated into Chinese. Your role is to provide a clear and concise translation that accurately conveys the meaning of the original text, tailored to the intended Chinese-speaking audience. Please keep in mind that the intended audience is Chinese and may have different regional preferences or dialects. Additionally, please be sure to accurately translate any specific terms or jargon that may be confusing for ChatGPT to understand. Finally, please evaluate the quality of the translation based on its accuracy, readability, and relevance to the original text.
- ★★☆☆☆ (REF)

Understand

Deep Understand Topic (Understand Topic By Asking Questions)

搬运：作为 IT 行业的过来人,你有什么话想对后辈说的?

Tue, 14 May 2024 00:00:00 +0000

以下是午休时间意外发现的一个 Github 仓库。其中一些博主的观点我觉得自己不久的将来会逐渐理解。

在此做个小记录。

本文章集合搬运自 GitHub - 程序员修炼之路

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.)

Fields pending deletion stopping module unistall

Tue, 07 May 2024 00:00:00 +0000

Error/Issue Encountered

When I am attempting to uninstall one of the modules, it says The following reason prevents XXXX from being uninstalled: Fields pending deletion, like the following screenshot shows:

Resolution Approach - 1

Method proopsed by naomi:

It turns out that deleted fields in Drupal 8 are stored in the key_value table.

To find them you can do that via the command
1
select * from key_value where name = "field.field.deleted" or name = "field.storage.deleted"
The values are stored as a blob, but can be viewed (e.g. in phpmyadmin you can click on it to download, and view in vim or similar). The value does not make much sense to a human, but having gone through the code printing and error-logging various things it was clear to me that these entries were what was holding up the uninstall. I backed up the table and deleted the entries, and then was able to uninstall the module.

Prettier 101 - [PENDING]

Tue, 07 May 2024 00:00:00 +0000

THIS POST IS PENDING MORE EXPLORATION….

My `.prettier` file

"tabWidth": 4              # How many spaces is used for a single tab
"useTabs": true            # Use tab instead of space for indentation
"singleQuote": false       # Convert all single quote into doubel quote if possible
"insertPragma": false      # Do not insert the relevant @format/@prettier marker at the top of files when formatting
"requirePragma": false     # Does the file need to have @format/@prettier marker to be formatted ?
"arrowParens": "always"    # Transform any single parameter function such as x=>x into (x)=>x
"bracketSpacing": true     # If true: { foo: bar }; If false: {foo: bar}

Prettier vs. Linters

How does it compare to ESLint/TSLint/stylelint, etc.?

Drush list module/theme (via pm:list command)

Mon, 06 May 2024 00:00:00 +0000

Basic Usage

List installed theme, list intstalled modules

1
2

drush pm-list --type=Theme
drush pm-list --type=Module --status=enabled

Exporting to File

List the installed modules using debug verbose mode, and export into csv format into file enabled_modules.csv:

`1`	`drush pm-list --type=Module --status=Enabled -vvv --format=csv >> enabled_modules.csv`

(noting that the --type and --status option have to be in front of the --format option, otherwise it will not work)

[GovCMS SaaS] ahoy error: github-outh.github.com is not defined

Thu, 02 May 2024 00:00:00 +0000

Issue Reproduced

I run into this issue while performing ahoy build command for a client site, which will initiate the GovCMS environment, including running the composer install command inside the docker container to the install the required modules from the drupal modules repositories. And that have triggered the error: In ConfigCommand.php Line 322: github-oauth.github.com is not defined and process "/bin/sh -c composer config -global github-oauth.github.com $GOVCMS_GITHUB_TOKEN" did not complete successfully: exit code: 1.

✅ Dart Sass ❌ LibSass ❌ Ruby-Sass

Thu, 02 May 2024 00:00:00 +0000

TL;DR

Dart Sass

Active maintenance/development
Dart Sass is 5-10x faster than Ruby Sass and only about 1.5x slower than LibSass.
Dart is easy to work with + JavaScript compatibility
Dart is garbage collected (unlike LibSass which is written in C++)

LibSass (Node Sass)

Deprecated on 2019-Mar-26;
LibSass’s low-level language makes it substantially harder to add new features
LibSass’s feature surface was static in practice (no one is developing new feature in the community)

How does Auto-ISO work?

Sun, 28 Apr 2024 00:00:00 +0000

My false assumption ?

I never thought too hard about this topic before. What I used to falsely assume was that the camera is smart enough to detect the brightness of the scene and adjust the ISO accordingly. For instance, if the camera detects that I am outside the door, where the incoming light is presumably abundant (very bright), it will set the ISO to a low value before making any adjustments to the shutter speed and aperture.

LLM: Prompt Engineering

Sun, 28 Apr 2024 00:00:00 +0000

Intuition Behind this Post ?

The reason I wanted to know a little more about how this topic (Prompt Engineering) is getting scoped, and how people in the area have contributed till this date, is because I wanted to utilise one of the super-search tool I’ve been using since the past fre year: Raycast, just a little bit better.

I know Raycast have been having the feature of “AI Command” for almost around 1 year now, of which allows you to use any of the AI prompt as a “command” to run; On the raycast community I saw people using it for change tones, enhanec writting, find synonyms, and etc, but for me personally, its just extremely weird having to use it as a one-time command, my experience with the ChatGPT before it came out is usually more towards a continues, step-by-step process.

[Lazygit] Command Reference

Fri, 26 Apr 2024 00:00:00 +0000

Global Shortcuts

common

p pull
P push
q quit
z undo
<c+z> redo
/ search (regex match)

less common

shift+plus/minus next/previous layout
@ toggle command log panel
: execute custom command (shell commands)
R refresh git stauts (git stauts && git brach &&)
<c+r> open recent git repositories

Panel ① - File Staging Area

common

<space> stage file selected
o open file selected
a stage all files
d discard changes of file selected
D advanced discard change options
Dx nuke working tree = git reset (git reset --hard HEAD) + remove unwanted files from your working directory (git clean -fd)

less common

[Lazygit] Interactive-Rebase (e) - [PENDING]

Fri, 26 Apr 2024 00:00:00 +0000

PENDING TO COMPLETE

Steps Overview

Boot lazygit cli, and navigate to the panel-3, where the commits are located (screenshot)
Use the key e to enter interactive rebase mode (screenshot)
You can then use different keys to toggle rebase options for each commit (screenshot)
Use the key m to show rebase option, and choose c to continue rebase (screenshot)

Rebase Options

pick (`p`)

pick simply means that the commit is included. Rearranging the order of the pick commands changes the order of the commits when the rebase is underway. If you choose not to include a commit, you should delete the entire line.

Drupal "Entity Reference" field vs "Entity Reference Revision" field vs "Dynamic Entity Reference"

Mon, 22 Apr 2024 00:00:00 +0000

Comparison

Overview

According to the project page for Entity Reference Revision module:

Entity Reference Revisions adds an Entity Reference field type with revision support, allowing specific entity revisions to be references. This is useful for modules like Paragraphs and Inline Entity Form
According to the project page for Dynamic Entity Reference module:

Dynamic Entity Reference provides a field type/widget/formatter combination for Drupal 8 that allows an entity-reference field to reference more than one entity type.

Drupal Error: attempt to create field when field storage does not exist

Tue, 23 Apr 2024 00:00:00 +0000

Resolution for error"Attempted to create an instance of field with name field_name_xxyyzz on entity type node when the field storage does not exist."

Leaflet vs Mapbox (mapbox-tile, mapbox-js, mapbox-gl-js)

Mon, 22 Apr 2024 00:00:00 +0000

(p.s. The comparison based on project status, statistics, and data collected at: 2024-04-22, It may be out-dated at the date you view the article

Comparison - Overview

Leaflet	Mapbox.js	Mapbox GL JS
Active maintenance	Project deprecated	In active development.
Supports raster tiles.	Supports raster tiles.	Supports raster tiles, vector tiles.
Map tiles are generated by server.	Map tiles generated by server.	Maps rendered client-side by browser.
Static data and style	Static data and style	Dynamic data and style
39.9k star	1.9k star	10.7 star

Comparison - In Depth

Leaflet

GeoJSON - [PENDING]

Sun, 21 Apr 2024 00:00:00 +0000

PENDING !!!!!!!!!!!

https://en.wikipedia.org/wiki/GeoJSON https://geojson.org/ https://leafletjs.com/examples/geojson/ https://github.com/tonywr71/GeoJson-Data

Leaflet 101

Sun, 21 Apr 2024 00:00:00 +0000

What is Leaflet ?

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

Mapbox 101

Sun, 21 Apr 2024 00:00:00 +0000

What is Mapbox ?

Mapbox GL JS is a client-side JavaScript library for building web maps and web applications with Mapbox’s modern mapping technology. You can use Mapbox GL JS to display Mapbox maps in a web browser or client, add user interactivity, and customize the map experience in your application.

Advantages comparing to other JavaScript map library:

Support both raster tiles and vector tiles
Utilize WebGL (enabling 3D interactivity)
API integration (with the mapbox tiling service)
Compatible with other Mapbox tols

Disadvantages comparing to other JavaScript map library:

Drupal Error: Module ... has an entry in the system.schema key/value storage

Mon, 08 Apr 2024 00:00:00 +0000

Error Found

After performing composer update, and during the execution of /update.php to update database, the following was observed:

Error Resolution

To repair these sorts of errors, you must remove the orphaned entries from the system.schema key/value storage system. There is no UI for doing this. At this point, the simplest solution is to use drush to evaluate some PHP code to invoke a system service to manipulate the system.schema table. For example, to clean up these two errors:

Drupal Custom Module: Logging Message using PHP (PHP Debug Message)

Fri, 15 Mar 2024 00:00:00 +0000

Step-1: Get instance of messenger service

Method 1

Standard way to get messenger service, in case you want to pass it using dependency injection.

$messenger = \Drupal::service("messenger");

Method 2

Fast way to use helper function.

$messenger = \Drupal::messenger();

Also in the form object or controller we don’t have include it using dependency injection. We can us directly

$messenger = $this->messenger();

Step-2: Adding info/warn/error message

Add message. Allows to send a message of any type, the second parameter accepts the type: $meesenger->addMessage(t('Your message.'), MessengerInterface::TYPE_WARNING);; But in most of the cases it is better to use directly specific method:

GovCMS Drupal CLI Command (Drush Command) - Backup

Thu, 14 Mar 2024 00:00:00 +0000

Logging in without username / password

1
2
3

ahoy drush uinf --uid=1        # Getting the first user created in the db
ahoy drush uublk [user-name*]  # Unblock that user’s name (overwrite name)
ahoy login                     # The generic drush login thing

Enabling / Disable two-factor-authenticator module

1
2

drush config-set tfa.settings enabled 0
drush config-set tfa.settings enabled 1

Importing database to WHM / VPS server

1
2

mysql –username=[USERNAME] –password [DBNAME] < [FILE_REALPATH]
# (Then enter password for user USERNAME)

Composer Package Manager

CSS Unit Reference

Tue, 12 Mar 2024 00:00:00 +0000

Unit	Explaination
`rem`	root `em`, used when you want to size component relative to the root `em` 16px size
`em`	relative version of `rem` (em=emphasis), used when you want tor size component relative to its parent’s `em` size
`%`	relative to the width/height of its parent component, mostly used in flex/grid container sizing
`ch`	size relative to the character width of character `0`, mostly used when defining the max character length
`vw/vh`	relative to the width and height of the viewport, aka the sceen width and height
`px`	absolute unit of measurement used to specify sizes, when no zoom ratio applied, `1px` is one physical pixel on the user’s device.

Reference

https://www.freecodecamp.org/news/css-units-when-to-use-each-one/

Drush Login (on Local/CPanel)

Mon, 11 Mar 2024 00:00:00 +0000

First you will open your terminal and navigate to the root directory of the website, then execute the drush user-login command (or its abbreviated version: drush uli). For instance here I will be using CPanel:

Some similar commands are:

1
2

drush uli --name=admin
drush uli --uid=1

Once you’ve got the login url from the terminal, for instance:

`1`	`http://default/user/reset/1/0123456789/0D_CraSDdasdaa432s2DSAJDKLJASKLD_0A/login`

You will need to copy the bit after the default/ starting with /user , and paste them after the base url of your drupal website (or in another word, replace default with the base-url of your website), for instance:

Anti-aliasing vs Subpixel Anti-aliasing

Tue, 05 Mar 2024 00:00:00 +0000

What is anti-aliasing

Anti-aliasing is quite straight forward, it is a technique used in computer graphics to smooth out the appearance of edges in images or text. It works by adding semi-transparent pixels along the edges to simulate a smoother transition between the foreground and background colors. This process helps reduce jagged or pixelated edges, resulting in a more visually appealing and polished look.

Note that one such semi-transparent pixel is made up by three sub pixels: one red, one blue, one green, they work together to produce a color that forms the pixel. Consequently, while visually appearing as multiple pixels, in essence, it remains the same pixel as the original screen resolution.

CSS Reset

Tue, 05 Mar 2024 00:00:00 +0000

CSS Reset

Initially, upon exploring the web developer community using the search query “CSS Reset,” you will encounter two distinct categories of articles:

Hard CSS Reset:
- The first type does a complete reset so that the whole website is free from the default styling algorithm of the client browser, as a result all components are styled the same way.
Soft CSS Reset:
- The second type aims to normalise the styles across browsers, this is to mitigate the issue caused by different browser applying different default rules. Such reset tries ti achieve a consistent default stylesheet throughout browser.

CSS Reset Examples

Hard CSS Reset: Eric Meyer’s reset

1
2

/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

Comparison:

Website Page Patterns

Tue, 05 Mar 2024 00:00:00 +0000

Single Column Layout

A single column layout in web design is a basic layout structure that features content arranged in a single vertical column. This design approach is straightforward and typically used for websites that prioritize simplicity and readability. Single column layouts are common in blogs, portfolios, and other content-focused websites where a clean and linear presentation is desired.

<!doctype html>
<title>Example</title>
<style>
   .main-column{width:50%;margin:0 auto;border:1px solid #ddd;border-radius:4px;padding:20px;font-family:sans-serif;color:#3a3a3a}.post{margin:30px 0 10px}
</style>
<body>
  <section class="main-column">
    <div class="post">
      <h3>Title</h3>
      Bacon ipsum dolor sit amet swine biltong hamburger kevin shoulder short loin leberkas. Boudin tenderloin pork
      belly chuck turducken leberkas meatball pork chop fatback ham hock meatloaf tail short ribs brisket. Turducken
      bacon, jowl ribeye beef ribs pork belly rump. Turkey filet mignon capicola, frankfurter cow strip steak pastrami
      swine prosciutto kielbasa.
    </div>
    <div class="post">
      <h3>Title</h3>
      Bacon ipsum dolor sit amet swine biltong hamburger kevin shoulder short loin leberkas. Boudin tenderloin pork
      belly chuck turducken leberkas meatball pork chop fatback ham hock meatloaf tail short ribs brisket. Turducken
      bacon, jowl ribeye beef ribs pork belly rump. Turkey filet mignon capicola, frankfurter cow strip steak pastrami
      swine prosciutto kielbasa.
    </div>
    <div class="post">
      <h3>Title</h3>
      Bacon ipsum dolor sit amet swine biltong hamburger kevin shoulder short loin leberkas. Boudin tenderloin pork
      belly chuck turducken leberkas meatball pork chop fatback ham hock meatloaf tail short ribs brisket. Turducken
      bacon, jowl ribeye beef ribs pork belly rump. Turkey filet mignon capicola, frankfurter cow strip steak pastrami
      swine prosciutto kielbasa.
    </div>
  </section>
</body>

Holy Grail Layout

The Holy Grail layout is a popular web design pattern featuring a header and footer that stick to the top and bottom of the page, with three columns in the middle that are equal in height. This layout is challenging due to achieving equal-height columns and maintaining responsiveness. (example screenshot: screenshot)

Resolve error: 'anti-virus scanner could not check the file'

Wed, 28 Feb 2024 00:00:00 +0000

Issue Found

Drupal Core: 8.7.8
Lightning: 4.0.5
PHP: 7.2

Steps to reproduce.
- Enable ClamAV and leave "host" field blank.
- Go to Content > Add Media > Image.
- Upload an image.
- An error should be returned reading: "The anti-virus scanner could not check the file, so the file cannot be uploaded. Contact the site administrator if this problem persists." This is the expected result since we did not configure the clamav host.
- Create a content type with an image field. In form display set the widget as Entity Browser with Image browser in settings.
- Go to Content > Add Content > Content type - with the image field that has entity browser widget configured.
- Click Select Images
- Click Upload tab
- Upload image.

Resolution Approah

First find the “ClamAV Anti-Virus” panel via searching over the module admin page:

Common CSS Media Query Breakpoint

Mon, 26 Feb 2024 00:00:00 +0000

Breakpoint in Drupal CMS

(The below breakpoint are concluded only from my expereience, and is not found anywhere on the standardized documentation

Device	Upper bound (px)	Lower bound (px)	Container Width (px)	Media Query
`desktop-lg`	∞	1400	1320	`@media (min-width:1400px) {...}`
`desktop-md`	1399	1200	1140	`@media (max-width:1399px) and (min-width:1200px) {...}`
`desktop-sm`	1199	1024	960	`@media (max-width:1199px) and (min-width:1024px) {...}`
`mobile-lg`	1023	768	720	`@media (max-width:1023px) and (min-width:768px) {...}`
`mobile-md`	767	576	540	`@media (max-width:767px) and (min-width:576px) {...}`
`mobile-sm`	575	0	Auto (100%)	`@media (max-width:575px) {...}`

Combined Version for ease of Ctrl+C and Ctrl+V:

Web-Safe Font Family

Tue, 20 Feb 2024 00:00:00 +0000

Intuition

I ran acorss this issue when I was testing a client’s website acorss different browsew, we use a font-family of Barlow Bold across the website for <b> or <strong> component to add a bit of visual highlight to the audience. After completed the development of the whole site mainly using chrome, I tested for the responsiveness and cross-browser via firefox and edge, of which all looks fine; Until I opened the website using safari, all the sudden all the text starting to look bolder and blurried.

CSS Vendor Prefix (-webkit-, ms-, or moz-)

Sun, 18 Feb 2024 00:00:00 +0000

What is vendor prefix ?

According to web.simmons.edu , vendor prefix are:

The process of introducing new CSS properties and HTML elements can be a long and convoluted process. Sometimes changes are proposed by “standards committees “(like the W3C) and other times “browser vendors” create their own properties. Browser vendors needed a way to add support for new features that were not yet standardized, but without messing up later changes or creating incompatibles. To solve this issue Vendor Prefixes were created. A vendor prefixes is a special prefix added to a CSS property. Each rendering engine has it’s own prefix which will only apply the property to that particular browser.

Find filename and file content via GREP

Wed, 14 Feb 2024 00:00:00 +0000

Intuition

I was working on two projects of whcih are comparable to each other, and I found some pattern that persists in one project-A that would be helpful for the other project-B, and for that I will need to find a specific file (either through its filename or content), however I found in project-B has its majority of the directorites hidden within the docker container.

With that pre-condition given I cannot navigate project-B’s filebase using a GUI file explorer like finder, or perform global search with GUI interface like VS-code. Consequently I will have to work around the linux command line interface, and use that to find the files I need.

Shell Assign Command Output to Varibale

Tue, 13 Feb 2024 00:00:00 +0000

Usage

In case you want to have the output of a command in the CLI in bash or zsh saved into a variable, you can do that via the following:

1
2
3

variable_name____=$(your_command_here)
npm_package_list_=$(npm list -g &> /dev/null)
admin_username___=$(ahoy drush uinf --uid=1 --fields=name --format=string)

And you can re-use these variables in the command like, for example

1
2
3

admin_username=$(ahoy drush uinf --uid=1 --fields=name --format=string)
ahoy drush uublk $admin_username
ahoy login

Reference

https://stackoverflow.com/questions/16967982/zsh-shell-how-to-assign-something-to-a-variable-quietly

Hugo PowerMod: Custom CSS

Mon, 12 Feb 2024 00:00:00 +0000

(From official document) Bundling Custom css with theme’s assets

For adding custom css to be bundled inside one minimized css: Create folder & file in your project directory as

.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
    └── css/
        └── extended/  <---
            ├── custom_css1.css <---
            └── any_name.css   <---

(All css files inside assets/css/extended will be bundled !)

Note: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended

Drupal Module Installed but Missing

Sun, 11 Feb 2024 00:00:00 +0000

Error Encountered

1
2

The following module is marked as installed in the core.extension configuration, but it is missing:
* xxyyzz_module_name

Solutions

Solution 1: Remove from core.extension

If you have access to the command-line-interface and drush command, you can do it via:

`1`	`$ drush cdel core.extension module.MYMODULE`

(OR) If you have acccess to the configuration synchronization, you can also do that via exporting the configuration, manually changing the core.extension, then importing the modified configruation again.

Replace whiteness with transparency (via Photoshop)

Sun, 11 Feb 2024 00:00:00 +0000

Intuition

Got a client photo, he would like use it for both header and footer, but he only provided the light version of the image to use on the white background header, but not the inverted+transparent version of which used on footer. Instead of going forward-and-backward email asking him for the asset, I believe it is better to spend a few minutes of mine and create the inverted+transparent version myself.

Git Another Git Process Seems to be Running

Thu, 08 Feb 2024 00:00:00 +0000

Error Happened

In my case, this error happens when I force quit editor when writting commit message using the code editor, or ctl+d force quit terminal after running the lazygit tui command.

Error Message:

Another git process seems to be running in this repository, e.g.
an editor opened by 'git commit'. Please make sure all processes
are terminated then try again. If it still fails, a git process
may have crashed in this repository earlier:
remove the file manually to continue.

Resolution

1
2

rm -f .git/index.lock;
rm -f .git/COMMIT_EDITMSG;

.git/index.lock: When you perform a Git command that edits the index, Git creates a new index. lock file, writes the changes, and then renames the file. The index. lock file indicates to other Git processes that the repository is locked for editing
.git/COMMIT_EDITMSG: This file contains the commit message of a commit in progress. If git commit exits due to an error before creating a commit, any commit message that has been provided by the user (e.g., in an editor session) will be available in this file, but will be overwritten by the next invocation of git commit.

Reference

CSS Media Query

Wed, 07 Feb 2024 00:00:00 +0000

Media Query Usage Syntax

When used inside a CSS file ?

A media query is composed of a media type and can include one or more media features that evaluate to true or false. (The mediatype is optional, if omitted, it will be set to all. However, if you use not or only, you must also specify a mediatype.) Whenever a media query is evaluated to be true, the corresponding style rules inside it will be applied.

GovCMS PaaS vs SaaS

Tue, 23 Jan 2024 00:00:00 +0000

What is PaaS and SaaS ?

PaaS stands for Platform as a Service.
- It is a cloud computing model where: a service provider offers a platform for developing, running, and managing applications. PaaS provides a pre-configured environment with resources such as operating systems, development tools, and databases.
- Usually more configurable, but more time-consuming to setup.
SaaS stands for Software as a Service.
- It is a cloud computing model where: a service provider hosts software applications and makes them available to users over the internet. Users can access and use these applications through web browsers without the need for installation or maintenance on their local devices.
- Usually less configurable, but much easier to setup.

GovCMS PaaS vs SaaS

GovCMS Software as a Service (SaaS) customers get high quality security protection and compliance. Our services include website protection and ongoing website security assessments including IRAP. We also provide security patching, support and 24/7 monitoring. You are responsible for staff user accounts and content.

Drupal get URL from media entity in twig

Fri, 12 Jan 2024 00:00:00 +0000

PENDING

https://www.drupal.org/project/media_entity_image/issues/2856093

{# The field name in the content is "field_image2" #}
{% for key, image in content.field_image2  %}
    {% set media = image.entity %}
    {# The field name in the referenced entity is "field_image_file #}
    {% set file = media.field_image_file.entity | merge({'#image_style': 'thumbnail'}) %}
    {% set uri = file_url(file.uri.value)  %}
    <img src="{{ uri }}" alt="{{ media.name.value }}" />
{% endfor %}

Drupal Error: Update No available releases found

Sun, 07 Jan 2024 00:00:00 +0000

Error Update Not Found

(Drupal 10)

When inspecting one of my client’s website, of “update manager” fails to check the pending update module/core. In my case at the time, Drupal core is 10.2.1 is already available, however, the website with Drupal core 10.2.0 does not show there’s this available update in the “update manager” panel.

(Drupal 11)

For some Drupal 11 clients I also got similar issue that can be fixed with the same method below, but the symptom is slightly different:

Photography - Chromatic Aberration

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

What is Chromatic Aberration

The term can be separated into two parts:

Chromatic: Relating to color or the way colors appear.
Aberration: An optical flaw or distortion that deviates from the ideal conditions and affects the quality of an image or focus.

In simple words, optical phenomenon in which different wavelengths of light do not converge at the same point after passing through a lens or other optical system, resulting in color fringing and blurred edges in the image. This is usually due to lens’s inability to focus all colors of light at a single point due to their different wavelengths.

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).

Drupal X-Debug Twig Template 1: Turning on X-Debug

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

Turning on X-Debug for PHP (Pro MAMP)

If you are developing using a Pro MAMP: simply turn the the “Xdebug (Debugger)” setting under the “Language > PHP” tab (on the sidebar):

Drupal X-Debug Twig Template 2: Setup of PhpStorm

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

In the previous post we have successfully turn on the xdebug in php, and now we will setup the PhpStorm, and using it to add a breakpoint on the php file index.php, and use it to inspect the variables in the scope of the breakpoint.

Drupal X-Debug Twig Template 3: Using Debugger for Twig Template

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

In the previous post we have successfully turn on the xdebug in php, and setup the PhpStorm to import the project, and using the debugger to add a breakpoint on the index.php; now in this post we will guide you through how to use the debugger on the process of developing twig template.

Student Visa (Subclass 500) - Policy 8105 (Working restriction)

Thu, 23 Nov 2023 00:00:00 +0000

Caution

This post should not be your reference material or proof for “why I can work right now” to your boss, it is solely for the purpose of tracking some material on the internet. And this post was written on date: “2023-11-23”, policies and definitions quoted in this post may change as time go on.

Working Restriction

According to “4.7.3.2. Condition 8104/8105 – Limited work (students and family members)” the following condition must be met in the period of stay for student visa holder subclass 500:

Twig - Debug/Development Environment - Get Variable - [PENDING]

Wed, 22 Nov 2023 00:00:00 +0000

DUMP()

PENDING…

{{dump( )}}                    // Will list all twig variables in the current twig template
{{dump( content )}}            // Will list all twig variables in the current content
{{dump( variable_name )}}      // Will list all twig variables in the your variables
{{dump( variable_name.0.entity["#items"].0.field.value|raw)}}    // Another example

https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/debugging-twig-templates

PHP X-debug

PENDING…

https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/debugging-twig-templates https://xdebug.org/docs/step_debug https://chromewebstore.google.com/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc?pli=1 https://www.youtube.com/watch?v=HrQWtbxY1Hs https://xdebug.org/wizard http://localhost:8888/MAMP/phpinfo.php

Twig - Debug/Development Environment - Setting Configuration

Wed, 22 Nov 2023 00:00:00 +0000

Enable Twig Debug (Show source file)

In order to have the output such as:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'paragraph' -->
<!-- FILE NAME SUGGESTIONS:
   * paragraph--accordion-single--default.html.twig
   x paragraph--accordion-single.html.twig
   * paragraph--default.html.twig
   * paragraph.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/XXXX/templates/paragraph/paragraph--accordion-single.html.twig' -->

printing in the terminal (this is good to help identifying the source of twig template file current node is rendering from).

Twig - Generate Unique ID for Component

Wed, 22 Nov 2023 00:00:00 +0000

Intuition

Some time you would like to have id in the twig template component to enable say: precise query/selector targeting with css, or setting attributes to enable certain behavior for javascript frameworks such as bootstrap:

For example: the example from Bootstrap Accordion

<!-- Notice the #collapseOne below  -->
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            <strong>This is the first item's accordion body.</strong>
        </div>
        </div>
    </div>
  </div>

Method-1: random

Simply set the unique id using {% set unique-id = random() %}, then use it as the attribute for id or data selector, such as below:

Twig - Twig Filters/Modifier (Universal & Drupal Specific)

Wed, 22 Nov 2023 00:00:00 +0000

Twig filter: universal filters

* striptags:    removing html syntax tag from from the string
                {{ content.variable.0.value | striptags }}             //REMOVE ALL TAGS
                {{ content.variable.0.value | striptags('<br><p>') }}  //REMOVE <br> and <p> TAGS
other filter:   abs batch capitalize column convert_encoding country_name currency_name currency_symbol data_uri date date_modify default escape filter first format format_currency format_date format_datetime format_number format_time html_to_markdown inline_css inky_to_html join json_encode keys language_name last length locale_name lower map markdown_to_html merge nl2br number_format raw reduce replace reverse round slice slug sort spaceless split striptags timezone_name title trim u upper url_encode

Link to Post/Documentation

Twig filters: drupal specific filters

* raw           : This filter should be avoided whenever possible, particularly if you're outputting data that could be user-entered.
* clean_class   : This filter prepares a string for use as a valid HTML class name. (for instance "txt/raw" to "txt-raw")
* render        : This filter is a wrapper for the render() function. It takes a render array and outputs rendered HTML markup. This can be useful if you want to apply an additional filter (such as stripping tags), or if you want to make a conditional based on the rendered output (for example, if you have a non-empty render array that returns an empty string). It also can be used on strings and certain objects, mainly those implementing the toString() method.
trans           : This filter (alternatively, t) will run the variable through the Drupal t() function, which will return a translated string. This filter should be used for any interface strings manually placed in the template that will appear for users.
placeholder     : This filter escapes content to HTML and formats it using drupal_placeholder(), which makes it display as emphasized text.
format_date     : This filter prepares a timestamp for use as a formatted date string
safe_join       : The safe_join filter joins several strings together with a supplied separator
without         : The without filter creates a copy of the renderable array and removes child elements by key specified through arguments passed to the filter. The copy can be printed without these elements. The original renderable array is still available and can be used to print child elements in their entirety in the twig template.
add_suggestion  : The add_suggestion filter allows adding a theme suggestion to a render array rendered with #theme.
clean_unique_id : A new clean_unique_id Twig filter has been added to Drupal 10.1 and later. This can be used for getting a unique ID.

Link to Post/Documentation

Twig filters: add(), set(), recursive_merge()

1
2
3

set() filter             : `{{ form|set( 'element.#attributes.placeholder', 'Label' ) }}`
add() filter             : `{{ form|add( 'element.#attributes.class', 'new-class' ) }}`
recursive_merge() filter : `{{ form|recursive_merge( {'element': {'#attributes': {'placeholder': 'Label'}}} ) }}`

Link to Post/Documentation

ISO 8601 Time Encode

Sat, 18 Nov 2023 00:00:00 +0000

Quick Reference Sheet

Datetime - Basic Notation
- `yyyymmddThhmmss
- 20120915T155300
Datetime - Extended Notation
- Date and time in UTC
  - 2023-11-17T23:17:30Z
- Date and time with the offset
  - yyyy-mm-ddT hh:mm:ss+|– hhmm
  - 2012-09-15T15:53:00+04:30 (UTC+04:30)
  - 2023-11-17T16:17:30−07:00 (UTC−07:00)
  - 2023-11-17T23:17:30+00:00 (UTC+00:00)
  - 2023-11-18T06:17:30+07:00 (UTC+07:00)

BTT Configuration

(BTT)@dateformat:yyyy-MM-dd(BTT)
(BTT)@dateformat:yyyy-MM-dd'T'HHmmss'AEST'(BTT)

Reference

Why SCSS ? (SCSS vs CSS)

Fri, 17 Nov 2023 00:00:00 +0000

TLDR; SCSS is a super-set of CSS

Intuition

To begin with, why would a person be interested in this SCSS style-sheet that cannot be directly interpreted by the browser engine, but rather require extra “compilation” into the CSS style-sheet before use? This is of course because SCSS have some advanced features to CSS, however as time goes, some of the concept from SCSS also gets penetrated and adopted by the CSS standards (For instance: CSS has no nesting feature until 2023 March, CSS has no variables until 2014, for reference SCSS dates back to as far as 2007).

Drupal Debug Trick: debug_backtrace / debug_print_backtrace - [PENDING]

Thu, 16 Nov 2023 00:00:00 +0000

PENDING …

ORIGINAL POST ↓

I find this useful as a less memory intensive Drupal-friendly way to backtrace PHP as a one-off code snippet to temporarily drop into a troublesome location without installing modules or server-side tools:

 $trace = debug_backtrace();
  $backtrace_lite = array();
  foreach( $trace as $call ) {
    $backtrace_lite[] = $call['function']."    ".$call['file']."    line ".$call['line'];
  }
  debug( $backtrace_lite, "TRACE", true );

It gets the backtrace into Drupal’s debugging system, but strips it down to the essentials to avoid failures when massive objects are involved. For handy reference, the other keys within each row of the debug_backtrace() object are: class, object, type, args.

Drupal CLI - reading database configuration (at CPanel)

Wed, 15 Nov 2023 00:00:00 +0000

Version-1

settings=$( echo "sites/default/settings.php" );
database=$( cat "${settings}" | grep "'database' =>" | grep -v "*" | grep -v "#" | sed -n "s/'database' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
username=$( cat "${settings}" | grep "'username' =>" | grep -v "*" | grep -v "#" | sed -n "s/'username' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
password=$( cat "${settings}" | grep "'password' =>" | grep -v "*" | grep -v "#" | sed -n "s/'password' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
echo -en "\n" && \
echo -en "\n" && \
echo -en "\n \e[1;31m Settings: [\e[1;33m${settings}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Database: [\e[1;33m${database}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Username: [\e[1;33m${username}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Password: [\e[1;33m${password}\e[1;31m] \e[0m" && \
echo -en "\n" && \
echo -en "\n";

Example output:

The 'entity:user' context is required and not present

Wed, 15 Nov 2023 00:00:00 +0000

Error Message

Drupal\Component\Plugin\Exception\ContextException: The 'entity:user' context is required and not present. in Drupal\Core\Plugin\Context\Context->getContextValue() (line 73 of core/lib/Drupal/Core/Plugin/Context/Context.php).

Working Solution for Me

File: public_html/core/lib/Drupal/Core/ParamConverter/EntityConverter.php b/core/lib/Drupal/Core/ParamConverter/EntityConverter.php

-    if (isset($contexts[$context_id])) {
-      $account = $contexts[$context_id]->getContextValue();
-      unset($account->_skipProtectedUserFieldConstraint);
-      unset($contexts[$context_id]);
-    }
+    if (isset($contexts[$context_id]) && $contexts[$context_id]->hasContextValue()) {
+        $account = $contexts[$context_id]->getContextValue();
+        unset($account->_skipProtectedUserFieldConstraint, $contexts[$context_id]);
+    }

Reference

Community Solution 1

File: public_html/core/lib/Drupal/Core/ParamConverter/EntityConverter.php b/core/lib/Drupal/Core/ParamConverter/EntityConverter.php

VS Code Custom Color Theme

Tue, 14 Nov 2023 00:00:00 +0000

Customizing Color Theme

Themes from the market

Keeping this section for the sake of clean article structure, I will not spend any words on this one, if you have any questions simply refer to Google or the following official documentation:

Reference:

VS Code Documentation - Color Themes from the Marketplace

VS Code Documentation - Selecting the Color Theme

VS Code Documentation - Auto Switching based on OS Color Theme

Theme Customization in Settings.json

The main focus of this section will be explaining how to customize your existing theme (ones you downloaded and installed from the market place), and list some of the most commonly customized components. The official documentation is here for a quick reference purpose: Customizing Color Theme.

What/Why Google Tag Manager (GTM)

Tue, 14 Nov 2023 00:00:00 +0000

Intuition

To begin with, I looked for the definition of “tag” in the Google Tag Manager’s context, according to their official documentation, they refer tags as “segments of code provided by analytics, marketing, and support vendors to help you integrate their product into your website or mobile apps”, so bascially you can think of tag like a chunk of script for third party plug-in (like for example: HotJar (a digital expereience insight and behavior analytics tool))

Export Google Analytics to Google Sheets (Manual)

Mon, 13 Nov 2023 00:00:00 +0000

In this tutorial I will guide you through how to export google analytics data manually on the Google Analytics page

Step-1: open panel exporting from

First, proceed to the page you would like to export. For instance in thise example I want to export the “all page’s views and performances”, (located at “behavior > site content > all pages”).

Step-2: narrow down the records

Second, you will need to narrow down the number of records you would like to export via selecting a desired “date range” and “row, page”. The export will only happen on the data that is currently getting displayed, if you want to export more data, you’ll either have to change the date, or the number or rows and pages. Depending on the quantity of your data, you might need to narrow it down for the sake of processing efficiency, otherwise the web application might get stuck.

Export Google Analytics to Google Sheets (using Add-on)

Mon, 13 Nov 2023 00:00:00 +0000

Step-1 : Google Account Logged-in

To begin with, make sure you are logged in the proper google account, we will use the same account for all of the Google related product in the upcoming steps, including “Other” and “Google Sheets”.

Step-2: Install Add-on

Secondly, with the same google account open “google sheet”, then open “extension > add-on > get add-on" and install the google analytics add-on as denoted in the screenshot:

My Vim Learning Diary 2

Mon, 13 Nov 2023 00:00:00 +0000

LazyVim Command / Keybinding

<leader> default = space
<leader>gg = lazygit
<ctrl-o> got to last buffer (could be file explorer or last cursor location)
:! ls -al example of running terminal command in vim
<leader>- to split panel hotizontally
<leader>| to split panel vertically
:Lazy to show lazy vim package manager’s GUI
<leader>uD toggle dimming
<leader>wz toggle zen mode
<leader>wZ toggle zoom mode
<leader>space using telescope to file file
<leader>, open other batch/cache file
<leader>sr replace using grug-far

Vim Motion / Keybinding

Here I will keep some of the vim motion & keybinding. (meanwhile I will keep updating this to remove those that I got very familiar, and add those that I found useful along the journey):

Shield for Apache Server using htaccess/htpasswd

Mon, 13 Nov 2023 00:00:00 +0000

Intuition

In some cases, drupal shield may not be available, or is very risky to use; I’ve ran into occasions where I’ve enabled drupal shield, and get compeltely blocked out of the system. (Trust me, I’ve tried putting numerous different “disable shield” command in the settings.php, and in those occasions none of them worked !).

That brings me to the good old apache method of htpasswd of which: is used to create and update the flat-files used to store usernames and password for basic authentication of HTTP users. If htpasswd cannot access a file, such as not being able to write to the output file or not being able to read the file in order to update it, it returns an error status and makes no changes."

Install drush on drupal 8 site (using downgraded composer ver.1)

Fri, 10 Nov 2023 00:00:00 +0000

Intuition

I was recently working on a client site, and I got to the issue where the site will show “Page unavailable” upon login. And upon the suspicion of a mis-placed module or uncleared cache, I wanted to install drush to perform some drush commands.

I ran composer require drush/drush which will install the most recent compatible drush on my current working directory, but then I got this error:

...
The "composer/installers"           plugin was skipped because it requires a Plugin API version ("^1.0")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-composer-scaffold" plugin was skipped because it requires a Plugin API version ("^1.0.0")  that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-project-message"   plugin was skipped because it requires a Plugin API version ("^1.1")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-vendor-hardening"  plugin was skipped because it requires a Plugin API version ("^1.1")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
...

After some research, I found this issue could be potentially related to a version mis-match of the composer and the drupal 8 (reference: link), the composer in the project could be of version 1.XX, and the local instance is using version 2.XX …

Browser CORS policy

Wed, 08 Nov 2023 00:00:00 +0000

Intuition

To begin with we need to answer a simple question, why do we need to block traffic from one site to another site, and have everything controlled in this CORS policy ?

Imagine there’s two site, site A is a legitimate banking website that provides online finance services, site B is a phishing website that tries to spoof the website A. As a developer you might be aware of API’s, and the legitimate banking website is using exactly that to transfer money from account to account, for instance: “https://bank-site-a.com/api?from=account1&to=account2”. If without any security policy, the phishing site B can copy this exact link and place it on some easily found buttons or links, and once a user (with logged in bank account) clicks on these buttons or links, the transaction will be triggered without the user’s permission.

My Vim Learning Diary 1

Wed, 08 Nov 2023 00:00:00 +0000

Why do “I” want to use vim ?

Why not VS Code ?

To begin with, I am not quite the typical teenage young boy, he who have not tried; I have been coding for more than 4 years now, and at this point I already have some of the tools of my taste.

If you’d ask for my favorite my current pick is “VS Code”. Why? because I do not code on any particular language (hence no IDE) and I just happen to land on VS Code by accident, if I would first met “Sublime”, the answer could be different.

Fixing module not getting recognized (after D9-10 upgrade)

Wed, 01 Nov 2023 00:00:00 +0000

Quick fix to the issue of module not getting recognized after upgrading from drupal-9 to drupal-10

How does Mail works with DNS MX records

Wed, 01 Nov 2023 00:00:00 +0000

Breakdown of the email address

In general a email address is in formatted as username @ domain.com, we can break it down into:

Address after the @ sign, here domain.com, this is the domain of the target mail server, your server will check MX records of this domain from the DNS server, and sends the email to the corresponding IP of the domain.
Address before the @ sign, here username, is where the mail receiving server will put your emails at. In a classical mail (receiver) server, each user will have a unique folder, once a user ges a email from somebody on the internet, his/her email will get stored into this folder, here imagine there’s a \username folder where all the .eml files will be located at.

Sending email with help of DNS system

Email server is distinctive from the DNS system, in order for the email to work, the DNS system must be working. As the DNS system is the one that translates the domain name to the IP address, and the IP address is the one that is used by the email server to send and receive emails.

Deprecation of "path/filename" api (after D9-10 upgrade)