Notes on miscellaneous stuff

Last updated on 9 Nov. 2025
13:55 04 September 2025
From notes of past few days:

Copy-paste numbered list from HTML to text preserving the numbers

Seems like there is no direct way to do that. Checked with ChatGPT - its suggestions did not work.
Free online utilities to convert HTML to text are around but they did not provide numbers and line separation.

Solution: Copy-paste numbered list from HTML page in browser to https://onlinetexttools.com/add-line-numbers . This will add the list without numbers but as separate lines in the input box. The 'Numbered Text Lines' box will have the content with the numbers which can be copied to clipboard after a delay of some seconds followed by providing permission to copy to clipboard.

[Later update: Another solution is to ask an AI chatbot to do it. But that will need creating a simple but unambiguous prompt which I can save for later reuse.]
---------------------

==========================

Excluding folder (or file) in .gitignore that has been committed to repo

Me: I want to exclude dist folder in my .gitignore. I added the entry (see uploaded file) but VSCode does not show dist as ignored folder (not gray colour).

Gem or ChatGPT don't recall which: .. 
The reason VS Code is not showing the dist folder as ignored is because the .gitignore file only affects files and folders that have not yet been committed to your Git repository.
If the dist folder was created and committed to your repository before you added dist to your .gitignore file, Git will continue to track it. VS Code, in turn, will continue to show it as a tracked directory, and its contents will not appear in gray.
To fix this, you need to tell Git to stop tracking the dist folder. You can do this with a two-step process:

Stop Tracking the Folder: Use the git rm --cached command to remove the folder from the Git index.
git rm -r --cached dist

rm: The "remove" command.
-r: The "recursive" flag, which tells Git to remove the folder and everything inside it.
--cached: This is the crucial flag. It tells Git to only remove the folder from the repository's index (its tracking list), but to leave the actual files on your local file system.

Commit the Change: Now you need to commit this change to your repository. This will tell Git that from now on, it should ignore the dist folder.

git commit -m "Remove dist folder from tracking"
After you run these two commands, you will see that the dist folder and its contents are no longer tracked by Git. You will also notice that VS Code now shows the folder name in gray, as you expected, indicating that it is being correctly ignored.

Me: That fixed it though I had to close and reopen VSCode for dist to be shown as gray.
================================

Blogger seems to trip up on <wbr> tag; Blogger shows 'invalid' HTML in red

20:30 06 September 2025
In https://raviswdev.blogspot.com/2025/09/vscode-extension-to-auto-add-id.html , when I would go to HTML view and then try to go back to Compose view without making any changes, I would be shown an error message that HTML is invalid and switching to Compose view may lead to loss of some data (paraphrasing).
At first, I could not figure out the exact issue and also how to identify the tags that Blogger is complaining about. Later i saw that Blogger was showing </wbr> tags in red and some other tags that contained it like </div> in red. [Note that I had figured that out using W3C validation service and fixed it but ... see update] Removing all the </wbr> tags fixed the issue. Apparently <wbr> alone is enough and one does not need <wbr></wbr>. Even W3C validation service pointed that out but it pointed some other issues too (like <br /> instead of <br>) which Blogger does not seem to complain about (and probably uses).

Update: After saving the post and then going back to HTML view mode, Blogger seems to have inserted the </wbr> tags itself, and now complains about it! The solution was to simply remove all <wbr> tags as well (so not <wbr><wbr/> tags in the post). That fixed the issue. Now I can switch between Compose and HTML view without any error messages from Blogger.

========================
========================
14 Sept. 2025

Blogger Compose View Limitation for Paragraphs in List Items

In Blogger’s Compose view, when writing inside an ordered (<ol>) or unordered (<ul>) list, pressing Enter always creates a new list item (<li>). There is no direct way to insert multiple paragraphs or line breaks inside the same list item.

Common Workarounds & Trade-offs

  • <p></p> inside <li>: Has to be done in HTML view: Works but can cause Blogger to complain or strip tags; not ideal.

  • <br><br> inside <li>: Has to be done in HTML view: Simple, valid, but creates inconsistent spacing between long items and subsequent short items.

  • Nested bulleted or numbered list <ul> or <ol>: Can be done in Compose view or HTML view: Maintains consistent spacing for long items. Limitation: Compose view does not easily allow adding a continuation sentence after the nested list within the parent <li>.

Solution to Nested Bulleted or Numbered List Limitation for Sentences After Nested List

Switch to HTML view and manually add the sentences after nested  list as follows:

<li>
  Main point text
  <ul>
    <li>Subpoint 1</li>
    <li>Subpoint 2</li>
  </ul>
  Additional sentence at parent level.
</li>

The nested bulleted or numbered list with above solution ensures:

  • Proper line spacing and alignment

  • Ability to continue parent list item text after nested lists

Mobile Hotspot Internet Connection related Powershell scripts

ismetered.ps1 - Powershell script that reports whether Internet connection is metered or not

CheckUnmetered.ps1 - Powershell script that checks and notifies if Internet connection is Unmetered

CheckISP.ps1 - Powershell script that reports ISP name of Jio or Airtel and whether metered or not

-----------------------------------

TXT Files Concatenation Powershell Script

This PowerShell script allows a user to specify a top-level folder as input and recursively collects all .txt files within that folder and its subfolders. Before concatenation, it lists all found files along with the total count, prompting the user for confirmation to proceed. The output file is created in the current directory where the script is run, with a name that starts with the current date, followed by -concat-, and a truncated, sanitized representation of the input folder path.

-----------------------------------

Add a “TreeView” Option to the Send To Menu in Windows 11

Summary info. from ChatGPT chat 'GUI equivalent of tree' on 21 Sep. 2025 is given below.

If you often need a full folder tree listing like the tree command provides, you can add a Send To context menu entry to quickly generate it for any folder. Here’s a simple, safe method using a batch file:

1️⃣ Create the PowerShell Script

Create a PowerShell script TreeView.ps1 with the following content:

param([string]$folderPath)

# Default to current directory if no path is provided
if (-not $folderPath) { $folderPath = "." }

# Generate tree output and save to a temporary file
tree $folderPath /f | Out-File "$env:TEMP\treeview.txt" -Encoding UTF8

# Open the result in Notepad
notepad "$env:TEMP\treeview.txt"

  • Save it in a convenient folder, e.g.,

    C:\Users\<YourUser>\Scripts\TreeView.ps1

2️⃣ Create a Batch File Wrapper

Windows SendTo menu reliably passes folder paths to batch files, so we create a small wrapper .bat file:

@echo off
REM Pass the selected folder to TreeView.ps1
powershell.exe -NoProfile -ExecutionPolicy Bypass -File "TreeView.ps1" "%~1"

  • Save this as TreeView.bat in same folder as above TreeView.ps1

3️⃣ Add to SendTo Menu

  1. Create a shortcut to your TreeView.bat.

  2. In Windows Explorer, open the folder: %APPDATA%\Microsoft\Windows\SendTo

  3. Copy the shortcut you just created into this SendTo  folder.

  4. Rename the shortcut to TreeView (you can remove the .bat in the name).

  5. (Optional) Change the icon of the shortcut for a cleaner look:

    • Right-click the shortcut → Properties → Change Icon

4️⃣ Using the TreeView Option

  • Right-click any folder → Send to → TreeView

  • A Notepad window opens showing the full folder and file hierarchy (like tree /f).

✅ Notes

  • The .bat wrapper ensures the folder path is passed correctly to PowerShell.

  • No registry edits are needed.

  • You can create a second shortcut/batch for “folders only” (omit /f) if desired.

This method is safe, easy, and fully reversible: remove the shortcut from SendTo to disable it.

[I used the above process and it is working for me.]

...

Why we use a batch file wrapper:
Windows Send To menu reliably passes the selected folder path only to executable files like .exe or .bat. If you try to put the PowerShell script (.ps1) directly in SendTo, Explorer will not pass the folder argument correctly — the script sees a literal %1 instead of the folder path.

Using a small batch file wrapper ensures the selected folder path is correctly passed to the PowerShell script, making the Send To option work reliably.

...

[I have not tried what is suggested below but I think it should work ...]

Extending to Any PowerShell Script that takes a folder as the first argument

The same procedure can be used to add Send To context menu support for any PowerShell script that takes a folder as its first (or only) argument. Simply create a small batch file wrapper for your script, place a shortcut to the batch file in the %APPDATA%\Microsoft\Windows\SendTo folder, and optionally rename or change the icon of the shortcut. This ensures the selected folder path is correctly passed to the script, allowing it to run reliably from the right-click menu.

Strange issue with Excel.

07:58 22 September 2025
Insert Row context menu command is greyed out. Tried out some suggestions after Net search ... no solution.
But Home -> Insert -> Insert sheet Rows works. So I have a workaround.

==================

6 to 7 October 2025

ChatGPT:

Using PowerShell Script Shortcuts with System-Wide Hotkeys on Windows 11

Overview

You can create a shortcut that runs a PowerShell command or script and assign a global keyboard shortcut (e.g., Ctrl+Alt+T) to it. This allows you to trigger scripts anywhere in Windows without opening a terminal window.

Key Points

  1. Shortcut Location

    • The shortcut can be on the Desktop or in a Start Menu Programs folder:

      C:\Users\<YourUserName>\AppData\Roaming\Microsoft\Windows\Start Menu\Programs

    • Windows monitors these locations for global shortcut keys.

  2. Using .ps1 Scripts

    • In Windows 11, shortcut keys reliably work with PowerShell scripts (.ps1) or inline PowerShell commands.

    • .bat files sometimes do not respond to global hotkeys, especially if they require a console window or elevated privileges.

  3. Creating a Self-Contained Shortcut

    • No .ps1 file needed — you can embed the command directly in the shortcut.

    • Example (copies timestamp to clipboard, no console visible): powershell -NoProfile -WindowStyle Hidden -Command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss' | Set-Clipboard"

  4. Assigning a Hotkey

    • Right-click shortcut → Properties → Shortcut key → type your letter (e.g., T) → it will show Ctrl+Alt+T.

    • Optional: set Run → Minimized to avoid flashing any window.

  5. Testing

    • Press your assigned hotkey anywhere in Windows (Desktop, Notepad, browser, etc.)

    • The command executes silently.

  6. Notes

    • If the shortcut needs admin rights, Windows may block the hotkey. Use PowerShell commands that do not require elevation for smooth operation.

    • For advanced automation or more complex scripts, consider AutoHotkey or a VBS launcher to make shortcuts fully invisible.

✅ Summary

  • Use .ps1 scripts or inline PowerShell commands for reliable Windows 11 hotkeys.

  • Desktop shortcuts usually work, but the Start Menu Programs folder is safest.

  • .bat files are less reliable for global hotkeys in Windows 11.

  • Inline PowerShell command in a shortcut is a simple, single-step solution.

--- end CG extract ---

I used a shortcut called CopyTimestamp on desktop with target as:

C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -NoProfile -WindowStyle Hidden -Command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss' | Set-Clipboard"

I specified keyboard shortcut of Ctrl + Alt + T. To check whether this shortcut key is used for some other command, I first tried using it on desktop. It gave a beep and did nothing indicating that it was not mapped to any command.

Note that I created the shortcut by specifying location as: powershell -NoProfile -WindowStyle Hidden -Command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss' | Set-Clipboard"

Windows added the initial part of the powershell.exe by itself.

This shortcut is working well. 

Later I added a clock icon from C:\Windows\System32\shell32.dll to the shortcut and copied it onto taskbar. So now besides Ctrl+Alt+T keyboard shortcut, I can invoke the Powershell code by clicking on taskbar icon.
=================================

2025-10-18 13:55:19
Search terms:
VSCode console.log statements regex search
VS Code console.log statements regex search
VSCode find console.log lines regex
VS Code regex to exclude commented console.log

ChatGPT Summary note:

🔍 VS Code Regex Search for Active console.log Statements

When reviewing JavaScript or TypeScript code, you may want to find all active console.log statements while skipping lines that are commented out.
You can do this directly in VS Code’s Search (Ctrl + Shift + F) using a regular expression.

Note: This excludes only inline // comments but does not exclude block comments like /* console.log(...) */

Regex pattern:

^(?!\s*//).*console\.log

[Ensure that above pattern is used without any accidental newline after the pattern as that will not work. Also make sure the “Use Regular Expression” (.*) option is enabled in VS Code’s search box.] 

Explanation:

  • ^ → Start of the line

  • (?!\s*//) → Negative lookahead ensures the line does not begin with optional whitespace followed by //

  • .* → Any characters after that

  • console\.log → Matches actual console.log occurrences

✅ Matches

console.log("Debug info");
if (x) console.log('Value:', x);

❌ Skips

// console.log("Debug info");
//    console.log('Value:', x); 

...

Regex pattern for all commented console log statements in VS Code search (enable .* for regex mode):

Note: This matches only inline // comments and does not match block comments like /* console.log(...) */

✅ Regex for commented-out console.log lines

^\s*//.*console\.log

🧩 Explanation

PartMeaning
^Start of the line
\s*Optional spaces or tabs before the comment
//Matches the start of a single-line comment
.*Any characters following that
console\.logFinds console.log (escaped dot for literal .)

✅ Matches

// console.log("Debug info");
//    console.log('value', val);
    //console.log(x);

❌ Does NOT match

console.log("Debug info");      // active line
/* console.log("Debug info"); */ // block comment

[I tried out both the regex patterns above and they seem to work. But I will know whether they work properly only after more usage of them.]

===========================================================
2025-10-24 13:31:33

💡 Quick Way to Switch Chrome Between Light and Dark Mode (No Extensions)

You can switch Chrome’s theme on Windows 11 easily using the built-in Appearance settings — no extensions or flags required.

Setup: Save a bookmark for chrome://settings/appearance. Put this bookmark on Chrome toolbar for easy access.

4-click method to switch Chrome light/dark mode:

  1. Right-click your bookmark for chrome://settings/appearance and choose “Open in new tab.”
    (This combines opening a new tab and the settings page in one step.)

  2. Click the Mode dropdown (Light / Dark / System Default).

  3. Select your preferred mode.

  4. Close the Appearance tab if desired.

If frequent light/dark mode switches have to be made, it will be convenient to have the Appearance tab open either as a tab or as a separate window.

✅ No extensions or experimental flags are used in this method.

...

As per ChatGPT: 

⚠️ Why Chrome Extensions Can’t Toggle Dark/Light Mode Directly

  • Chrome’s Light/Dark mode (Settings → Appearance → Mode) controls the browser UI theme and the prefers-color-scheme value that websites see.

  • No public Chrome extension API exists to programmatically change this mode. Extensions cannot modify Chrome’s internal theme setting.

  • Editing Chrome’s profile files manually doesn’t work while Chrome is running; changes only take effect after a restart.

  • Workarounds like PowerShell or AutoHotkey scripts are fragile and not fully reliable.

  • Therefore, the only practical method is manual change via Appearance settings, e.g., using a bookmark for quicker access.

✅ Conclusion: Currently, one-click toggling of Chrome’s global theme via an extension is not possible. Extensions can only affect website content (via CSS), not the Chrome UI itself.

--------------

CG verified above by search web and concluded, "as of now, Chrome does not support toggling the browser's UI theme via extensions or APIs. Users must manually change the theme through the settings."

==========================================

13:34, 27 October 2025
Blogger image centering issues: At times, after I have added some images, which are by default centered, when I try to add an image below another image, that image gets added to the end of the post. Then I have to cut-and-paste the image from there. This image too is by default centered and appears to be OK in Blogger Compose page. But when the page is displayed, at times, the added image is left aligned and so is out of sync in alignment with image on top of it which is centered. Note that Blogger Compose UI image properties shows the added image as centered and not left aligned. Attempts to fix it via Blogger Compose post UI failed (in the past, some retries would succeed but it was trial-and-error kind of stuff).

One approach I tried today which worked is to edit the HTML of the post. In this case the first image key HTML was:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.--snipped--.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1076" data-original-width="1248" height="552" src="https://blogger.--snipped--.png" width="640" />
</a>
</div>
-------
But the following image had (IFIRC):
<div>
<a href="https://blogger.--snipped--.png" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="621" data-original-width="1664" height="238" src="https://blogger.--snipped--.png" width="640" />
</a>
</div>
-------
The solution that worked was to modify the first div tag of above image HTML to same as the previous image's div tag:
<div class="separator" style="clear: both; text-align: center;">

Now the second image was centered in the blog post like the first image above it.
...
In another case, the second image did not have a div tag itself and so enclosing it in a div tag with above styles fixed the issue.
=====================

14:23, 29 October 2025

On the top right corner in diff view, there is a "Show Leading/Trailing Whitespace Differences" button (¶, called pilcrow or paragraph mark) to trim whitespace
-------

The above works well for me.

=============
2025-10-31 16:47:00

As I was trying to understand how Chrome browser dark mode settings and Windows OS dark mode settings operate, I fiddled around with Windows 11 appearance mode on my PC [Settings -> Personalization -> Colors -> Choose your mode (Light/Dark/Custom). That led to me losing my 'High Contrast' mode setting with some different colours being shown when I switched to 'High Contrast' mode, even when I was in Windows dark mode. The fix was to go to Contrast themes settings (button provided in same screen but as a related setting which I think is part of Accessability settings) and choose 'Dusk' as my contrast theme. Then I got back my previous colors in 'High Contrast' mode.

[ChatGPT summary...]

Summary — Dark Mode Settings (Windows 11 + Chrome + JavaScript)

  1. Windows 11 offers three appearance modes

    • Light – system and apps both light

    • Dark – system and apps both dark

    • Custom – lets you set each separately

  2. In Custom mode, you can choose independently:

    • Windows mode → affects system UI elements (taskbar, Start menu, File Explorer chrome)

    • App mode → affects apps that follow the system theme (e.g., Chrome, Edge, Notepad)

  3. Chrome’s behavior:

    • If Chrome’s appearance is set to Light or Dark, it overrides system settings.

    • If set to Device, Chrome follows Windows App mode (not Windows mode).

  4. Effect on web pages:

    • JavaScript and CSS media query prefers-color-scheme reflect the App mode (as seen by Chrome).

    • Light or Dark in Chrome → JS and CSS see that explicit value.

    • Device in Chrome + Custom in Windows → JS and CSS see the App mode value.

  5. Implication for Blogger prototype:

    • Your site’s light/dark behavior will follow the Chrome App mode setting.

    • The Windows mode (setting for taskbar, Start menu etc.) has no effect on web page color scheme.

In short:

For web pages, only Windows App mode (when Chrome = Device) determines what prefers-color-scheme reports.
Windows mode affects only the desktop UI and does not influence websites.

--------

9 Nov. 2025 ChatGPT summary:

Here is a clear, well-structured summary of the key learnings from our discussion — capturing the insights about Chrome extensions, dark-mode tools, search behaviour, and how to identify open-source extensions.

✅ Summary of Learnings from This Discussion

1. Not all “dark mode” Chrome extensions are equal

You discovered that:

  • The simple “Dark Mode” extension is too basic and fails on complex sites like Amazon.

  • Dark Reader, on the other hand, works perfectly because it uses an advanced dynamic theme engine that:

    • analyzes computed styles

    • adjusts colors intelligently

    • supports dynamic content

    • includes site-specific rules

  • Therefore, Dark Reader provides a consistent dark mode on Amazon, while the simple extension does not.

2. Dark Reader is free — the payment is optional

  • Although Dark Reader’s website shows pricing options, these are voluntary donations.

  • The extension is:

    • ✅ free

    • ✅ open source

    • ✅ fully functional without paying

  • Chrome Web Store allows people to install it with no payment or restrictions.

This helped clarify why you could install it for free despite the pricing page.

3. Google’s search results can mislead when looking for extensions

When you searched for:

chrome dark mode extension

Google showed:

  • “Dark Mode” extension — first

  • Dark Reader — second

Even though Dark Reader has:

  • higher rating (4.7★)

  • more users (6M)

This happens due to Google’s SEO logic:

Why “Dark Mode” ranks first:

  • Extension name matches search term exactly.

  • Strong keyword alignment (“dark mode”).

  • High historical click-through rate.

  • Generic names often rank higher.

Why Dark Reader ranks second:

  • Title does not match “dark mode” exactly.

  • Google interprets Dark Reader as a general eye-strain / screen-adjustment tool.

Quality does not always determine search ranking.
Relevance to the keyword does.

4. Chrome Web Store does not have an “Open Source” filter

There is no field in the Chrome Store showing:

  • ✅ License

  • ✅ Open-source status

  • ✅ Code transparency

So users must manually verify if an extension is open source.

5. How to check if a Chrome extension is open source

You learned several reliable methods:

✅ Method A: Check the Overview section

Developers often mention “open source” here or provide a GitHub link.

✅ Method B: Look at the “Website” link

If it leads to GitHub → usually open source.

✅ Method C: Scroll to the “Developer” section

Sometimes the GitHub URL is listed there.

✅ Method D: Inspect the installed extension’s folder

Readable, non-obfuscated code is a positive sign (but still check publisher’s site).

These methods help you determine trustworthiness and transparency.

6. Naming patterns matter a lot

Extensions with generic names like:

  • “Dark Mode”

  • “AdBlock”

  • “Password Manager”

often rank high even when better options exist (e.g., uBlock Origin, Bitwarden).

This is a recurring pattern in Chrome extensions.

7. Practical takeaway for future extensions

When choosing extensions:

  • Don’t rely only on Google search.

  • Check:

    • ⭐ Rating

    • 👥 User count

    • 🔐 Permissions

    • 🔍 Website/GitHub link

    • 📖 Overview for open-source mentions

  • Avoid extensions with:

    • no website

    • obfuscated code

    • too many permissions

    • unclear privacy policies

✅ Overall Insight

You learned how to:

  • choose higher-quality, open-source extensions

  • avoid misleading search results

  • evaluate dark-mode tools properly

  • verify genuine open-source status

  • understand why SEO causes weaker extensions to rank high

This equips you to make much safer, more informed decisions for all Chrome extension installations in the future — not just dark-mode ones.

--------------------------

Comments

Post a Comment