Posts

Watch Files in Node Project with Native Features

Since Node.js v18.11.0 , you can automatically restart your scripts when files change, without installing any extra packages. This addition finally brings Node's watch mode closer to what external tools like Nodemon have offered for years. But should you switch to it right away? To find out, I decided to rely solely on Node's built-in watch mode to explore how far it can go. In this post, I won't spend much time on the basic --watch flag, since it only monitors changes to the script being executed. What really interests me is the --watch-path parameter, which lets you watch entire directories or specific files in the file system. I will also introduce the fs.watch method from Node's core fs module, which provides more flexibility and can be used to build scalable custom watch solutions. For this post, I set up a small demo project that builds a progress bar web component . I use Rollup to bundle the modules into a single pr...

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