Posts

Build a Search Bar with CSS Attribute Selectors and the JavaScript CSSStyleSheet API

Image
In this post, I share a small experiment I conducted while designing the user interface for a client's application. It introduces an alternative approach to building a search bar for filtering a list of items using JavaScript. Rather than toggling the state or visibility of each item individually, I demonstrate how to filter items by dynamically modifying the CSS stylesheet using attribute selectors — a technique that's more declarative than traditional filtering methods. This is achieved using the CSSStyleSheet API. I'll also compare this approach to the more common DOM-based method, which involves directly updating the properties of each item depending on whether it matches the search input. The concepts explained in this post are illustrated through a simple project, with a live demo shown below. You can try searching for a specific language directly here, or visit the full example page here CSS Attribute Selector Filter Example . The...

Cleaning Up After Highlight.js: A Guide to Fixing Syntax Highlighting Issues

Image
I initially replaced Highlight.js with manual formatting for code snippets after revamping my Blogger site, aiming for more control. However, the process proved too time-consuming and unsustainable, so I returned to using Highlight.js for efficiency. Since blogging is a side activity, it's important that it fits easily into my daily routine as a programmer. In this post, I'll show you how I fix syntax highlighting issues that arise when using Highlight.js. I'll focus only on the browser version , since blogging platforms like Blogger often condense most of the theme's source code into a single file — making separation of concerns difficult. In this context, using a CDN to load and execute the script is the most practical approach. 1. Setup When I come up with an idea for a new post, I open Obsidian and create a new Markdown file. In the latter, I may include plenty of code snippets to illustrate the methods I want to explain to read...

WQL ASSOCIATORS OF Queries in PowerShell: From WMIC to CimCmdlets

The ASSOCIATORS OF statement in SQL for WMI (WQL) retrieves objects related to a specified source instance, where the source and related objects belong to different classes and are connected through an association class . For example, Win32_LogicalDiskToPartition is an association class that links Win32_DiskPartition and Win32_LogicalDisk . Using this association, you can list the disk partitions related to a specific logical disk (or vice versa). The object paths used to identify the source instances include the DeviceID property, which is intuitive and easy to understand. For instance, DeviceID values are in the form of C: for a logical disk or volume, or Disk #1, Partition #1 for a disk partition, making them more human-readable. In contrast, the Storage Management Provider (SMP) equivalent classes — MSFT_Partition , MSFT_Volume , and their association class MSFT_PartitionToVolume — do not expose user-friendly object path values. These ide...