SOFTKUBE

Displaying the Current Running Process and its Arguments in the Window Title Bar of WezTerm

mario.awad — Wed, 18 Feb 2026 20:14:28 +0000

Introduction

When working with multiple terminal sessions, quickly identifying which process is running in each window becomes critical. By dynamically setting the window title to include the current running foreground process and its arguments, developers, system administrators, and power users can improve their workflows and multitasking.

Our terminal of choice is WezTerm, a powerful cross-platform terminal emulator and multiplexer written in Rust, extensible via Lua, and of course, fully open source.

Solution

WezTerm allows dynamic window titles using the format-window-title event which is emitted when the text for the window title needs to be recomputed.

The tricky part was getting the foreground process info from the currently active panel within the currently active tab. Apparently, the pane object that is passed to the event does not include that information and we had to get it in a different way. Check the code below to see how we get it via the main WezTerm object.

Of course you need to set this up in your WezTerm config file properly as detailed in the official docs.

[CODE]

Reference Non-Optimal Solution

This was written while developing the main solution above and here we present the lessons learned from it.

The below code was used before we discover we could just get the pane object inside format-window-title handler. The pane object passed in the arguments is a simplified version of the full object and does not support the method called get_foreground_process_info() which is needed.

This was working well but of course the latest version works much better and is improved and it just uses wezterm.mux.get_pane(tab.active_pane.pane_id) to solve the issue we were trying to work around here.

Kept as reference to see how you can use arrays and how to avoid using zero based indices in Lua which is an edge case to always keep in mind.

[CODE]

Happy coding!

How to Inspect Dynamic and Disappearing UI Elements with the DevTools Debugger

mario.awad — Mon, 22 Dec 2025 16:40:20 +0000

Introduction

If you have ever tried to inspect an autocomplete dropdown, tooltip, popup, or similar dynamic elements in DevTools, you've probably hit this frustrating problem of them disappearing. This usually happens because the UI element is tied to focus, hover, or keyboard input listeners.

The moment you hit CTRL+SHIFT+C or even try any other way to click around and open the inspector tool, the element or widget disappears. Even pressing F8 in the sources panel to pause JavaScript execution can sometimes fail since the focus now moves away from the element.

Debugging such elements will always be a bit annoying, but with this timeout pattern to open the debugger after a small time delay, you'll be on your way to properly inspecting any dynamic element.

Solution

The most reliable way I have found to inspect such UI elements is to pause JavaScript execution via the browser debugger after a few seconds of delay with this code snippet.

[CODE]

Here's how to use it:

Open DevTools with the F12 hotkey and then go to the console panel.
Paste the code snippet from above then hit enter.
Quickly trigger your dynamic element by typing or interacting with it. If you need more than 3 seconds to do so you can adjust the timeout value accordingly.
When the timeout triggers, the debugger now stops JavaScript execution and your element will stay in its current state no matter how you interact with the browser page or DevTools.
Switch to the elements panel and freely inspect the element styles now.

Happy coding and good luck!

Gaining Access to a Legacy Google Apps Account When Phone Verification Fails

mario.awad — Fri, 26 Jul 2024 10:09:29 +0000

If you have an old admin account for Google Apps and you can't sign in, try this little trick that just worked for us.

We had a phone number set as our primary verification method, but when we went to sign in, we were getting an error that the system was unable to send us a verification message and that our mobile number was recently changed; even though it was not.

As such, we could not get a verification code to sign in. We spent multiple hours searching for a solution, but none worked. Until we decided to try and use the account recovery feature of Google and we just went through the steps. We basically changed nothing since we already know our username and password.

As soon as that was done, Google Apps now properly sent us a verification code to our mobile, and we were able to successfully sign in. Hurray!

Maybe our Google Apps account is ancient, and the recovery process refreshed some necessary snippets in their databases, allowing them to properly send the code. Maybe it was something else. In all cases, it did work.

Hope this helps anyone who might be having the same issue.

Custom Theme Migration from Drupal 9 to Drupal 10

mario.awad — Fri, 17 Feb 2023 14:05:11 +0000

The upgrade path from Drupal 9 to Drupal 10 depends on the modules and themes you have installed and on the custom ones your team have developed.

Following the official guide of this upgrade will hopefully take you through the process and resolve all the issues you might encounter.

In our case we had a custom built theme started on Drupal 9 and it did follow all the latest standards and recommendations of the time. After the migration process completed successfully we kept seeing warnings in our admin status reports about the stable theme being deprecated. We could not find a straightforward guide to handle this issue and hence after a bit of research and resolution we are writing this guide. We have taken a few ideas from this change record about the stable theme being removed from core.

Below is a step by step guide on how to fully migrate your custom coded theme from Drupal 9 to Drupal 10 and removing all warnings from the status report.

Remove the dependency on the stable theme. In your theme.info.yml file do set the base theme attribute to false instead of stable.
Copy any needed template files from the stable theme to your custom theme. In our case, our theme was fully custom and hence this step was not necessary. This might be a complex and time consuming step depending on how you wrote your theme.
Refresh caches and check your new theme and it should be working properly in Drupal 10. However, a warning about the stable theme being deprecated persists in the status report. This is because the stable theme is still enabled but is hidden from the appearance section. It was enabled previously since your theme was based on it but it does not get auto disabled.
To disable the stable theme, open the /web/core/themes/stable/stable.info.yml file and set the hidden attribute to false. Now uninstall the stable theme from the appearance section of Drupal. Set the hidden attribute back to true for consistency.
Refresh caches and the warning should be gone from your status reports.

Congratulations on your proper upgrade to Drupal 10 and enjoy the new features!

How to Change the Most Recent Git Commit Message

mario.awad — Sat, 10 Sep 2022 09:34:12 +0000

When programming and working with your preferred version control system, Git of course, you might find yourself committing a change with a misspelled or wrong message.

Luckily for us developers, there is a simple Git command to change the most recent local commit which is usually the one you want to modify. Just run the below command in your repo's directory.

[CODE]

If you need to modify a commit that has been pushed online or older or multiple commits then check the GitHub Docs on Changing a Commit Message or this article by Linuxize on How to Change a Git Commit Message.

As a bonus, you might want to look into this excellent article by DevConnected on How To Write Good Git Commit Messages.

Good luck and have fun programming.

[IMAGE]

How to Make Google Chrome Forget a Permanent HTTP 301 Redirect

mario.awad — Wed, 06 Oct 2021 10:17:12 +0000

During web development and testing you might need to setup redirections from one domain name or URL to another. Google Chrome will cache those redirects for a long time and if you need to change them you'll need to clear the HTTP 301 redirections first and then setup new ones if still needed.

Below we present three methods you can use to clear the redirections cache from the Google Chrome browser.

Disabling cache temporarily via developer tools

This is the easiest method and targets only the redirect you want to remove.

Open a new tab
Open the Chrome developer tools in that new tab (Easiest way is to press F12 on your keyboard)
Go to the network tab and tick the disable cache checkbox (Disables cache while devtools are open)
Navigate to the link you no longer want to have redirected while keeping the dev tools open
The redirect for that link is now cleared from the cache of Google Chrome
Untick the disable cache checkbox cause it's no longer needed and close the dev tools

Preserving logs and clearing via developer tools

If the first method doesn't work for you, try this more elaborate one which also deletes a specific 301 redirect only.

Open a new tab
Open the Chrome developer tools (F12)
Go to the network tab and tick the preserve log checkbox
Navigate to the link you no longer want to have redirected while keeping the dev tools open
Right click the request that results in the 301 redirect and click clear browser cache
Untick the preserve log checkbox and close the dev tools

Fully clear your browser cache

In case the above methods don't work for you, you might want to just clear the whole cache of Google Chrome. Please make sure you have nothing in your history for example that you want to preserve before proceeding.

Go to settings, privacy and security, and then click clear browsing data, select advanced, and clear everything. If you've just followed the redirect, you only need to delete data from the past hour for example.

Alternatively, from now on, make sure to test and develop in incognito mode as the cache will be flushed after the browser is closed in that case.

Happy coding!

Finding and Fixing Unintended Body Overflow to Remove Horizontal Scrollbars

mario.awad — Wed, 18 Nov 2020 12:54:47 +0000

Introduction

During the development and testing phases of a website's frontend, finding and fixing horizontal overflow issues can be challenging.

In some cases, it might be easy via DevTools to find and select the element that is wider than the document is and then fixing its CSS accordingly.

Most times though such elements are dynamically generated and maybe by a third party plugin and are more difficult to find unless you use some of the below tricks to identify the offending elements.

Solution Steps

Open your favorite browser's developer tools panels. Under Windows, the F12 key opens DevTools on both Chrome and Firefox.

Copy/paste this into the console panel and run it. It will print out the offending elements. Doesn't work for all elements though which leads us to the CSS attempt below.

[CODE]

Add this style to the elements panel (Click the add style button then add the * match all selector and then copy/paste the styles to it).

Then you can scroll around and see the offending element highlighted in red.

[CODE]

Steps in this article are based on the Finding/Fixing Unintended Body Overflow article and its comments originally published on the excellent CSS Tricks website. Please refer to it as it has more in depth discussions on the overflow issue and possibly more tricks to try in case the above ones don't work for you.

Responsive Logo Design Overview

mario.awad — Thu, 22 Oct 2020 15:32:43 +0000

A responsive logo is one with design elements that adapt slightly depending on the device or screen size on which they are displayed without compromising the brand identity.

Design elements that might be replaced or changed may include icons or symbols, company names and slogans, colors, backgrounds, outlines, and other small details.

Take a look at the below images to get an idea of how a logo might change orientation (horizontal vs vertical) and how it might omit certain details to look clearer on smaller displays.

For more info please check the original blog post A step‑by‑step process for creating responsive logo designs by Dribble.

[IMAGE]

How to Disable Open File Security Warnings on Windows by File Type

mario.awad — Wed, 30 Sep 2020 10:27:22 +0000

Introduction

As a web developer, you often set your JavaScript files to open with a text editor instead of being executed. As a result, such files open for code reading and editing do not pose any security threat.

However, the operating system still thinks that JavaScript files are run when double clicked and tries to protect you from any malicious code that might run when the file is open.

You can disable this warning for each and every file you open (check the example screenshot below) but that quickly becomes tedious.

The policy we will edit allows you to configure the list of low-risk file types known to Windows. If the attachment is in the list of low-risk file types, Windows will not prompt you before accessing the file, regardless of the file's zone information.

Solution Steps

Open your Group Policy by pressing Windows Key + R on your keyboard and then entering gpedit.msc and pressing enter.

In the left pane navigate to User Configuration, Administrative Templates, Windows Components, Attachment Manager.

Double click on the "Inclusion list for low file types" policy and select Enabled and paste the following line in the Specify low-risk extensions input field: .js and click ok.

This change works immediately on Windows 10 Pro version 2004. You might need to restart if you have an earlier version of Windows. Unfortunately, this looks like it is only available on Pro and Enterprise versions of Windows.

Quick Reference on the Number of Keys on a Standard Keyboard Layout

mario.awad — Tue, 09 Jun 2020 19:43:33 +0000

Introduction

This post is a quick summary of the number of keys found on standard keyboards. I wanted to order some switches for one of my keyboards and a quick Google search didn't reveal much results and as such, for now and for future reference, I'm creating this blog post.

There are plenty of keyboard layouts currently on the market with different sizes. In this post, we quickly glance over the layout and the number of keys available on the standard US ANSI layouts: 104 key full size, 87 key tenkeyless, the rare 84 keys keyboard, and the 61 key compact layouts.

Keyboard Layouts Info

To create the below graphics, I used the amazing Keyboard-Layout-Editor.com online tool. Please note that the below naming conventions and color annotations are not standardized. I'm just following the commonly used terms on popular mechanical keyboards related content creators like Taeha Types, Mech Merlin, and Tae Keyboards.

[IMAGE]

Number of Keys

Full size (100%): 104 keys

Tenkeyless TKL (80%): 87 keys

Seventy five percent or Compact TKL (75%): 84 keys

Exploded seventy five percent: 82 keys (Excluding the rotary knob key)

Compact sixty percent (60%): 61 keys

Function keys (purple): 12

Modifiers (orange): 17

Numbers row (dark blue): 12

Alphas (light blue): 33

Alphas and numbers row (both blues): 45

Navigation cluster (light green): 10

Full navigation cluster (both greens): 13

Numpad (gray): 17

More Info

For more info, please check this this Wikipedia article about keyboard layouts and this post about keyboards by Philip Trauring on their personal blog page.

SOFTKUBE

Displaying the Current Running Process and its Arguments in the Window Title Bar of WezTerm

Introduction

Solution

Reference Non-Optimal Solution

Tags:

How to Inspect Dynamic and Disappearing UI Elements with the DevTools Debugger

Introduction

Solution

Tags:

Gaining Access to a Legacy Google Apps Account When Phone Verification Fails

Tags:

Custom Theme Migration from Drupal 9 to Drupal 10

Tags:

How to Change the Most Recent Git Commit Message

Tags:

How to Make Google Chrome Forget a Permanent HTTP 301 Redirect

Disabling cache temporarily via developer tools

Preserving logs and clearing via developer tools

Fully clear your browser cache

Tags:

Finding and Fixing Unintended Body Overflow to Remove Horizontal Scrollbars

Introduction

Solution Steps

Tags:

Responsive Logo Design Overview

Tags:

How to Disable Open File Security Warnings on Windows by File Type

Introduction

Solution Steps

Tags:

Quick Reference on the Number of Keys on a Standard Keyboard Layout

Introduction

Keyboard Layouts Info

Number of Keys

More Info

Tags: