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

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