Introducing Trace.js – A Lightweight jQuery based Text Highlighter Plugin - Related to a, setting, lightweight, based, notes

CKA Certification Notes (WIP)

I love working in small, autonomous, and focused teams to build high-quality software using the best tools available.

Psychological safety isn’t about fluffy “niceness” — it is the foundation of agile teams that innovate, adapt, and deliver.

Now that we have per-car images, we need to find license plates. License plates might not be present, or might be otherwise difficult to fin......

In my projects, I aim to push the boundaries of conventional web design, incorporating advanced animations, responsive layouts, and dynmic fea......

Introducing Trace.js – A Lightweight jQuery based Text Highlighter Plugin

[website] is a lightweight jQuery plugin for highlighting words or phrases inside HTML elements.

✅ Supports case-sensitive and case-insensitive searches.

and searches. ✅ Highlights full or partial matches .

✅ Zero dependencies! Just jQuery required.

in the recent past, one of my junior developers needed to highlight a word inside a list of paragraphs dynamically. This gave me an idea what should I build next.

npm i trace-text-highlighter Enter fullscreen mode Exit fullscreen mode.

Enter fullscreen mode Exit fullscreen mode.

$( "#content" ) .trace ({ match: "highlight" , // Word to highlight color: "yellow" , // Highlight color ( default: yellow ) traceType: "full" , // Only highlights full words ( default: partial ) caseSensitive: true // Enables case -sensitive matching. ( default: false ) }) ; Enter fullscreen mode Exit fullscreen mode.

🔹 Search Result Highlighting – Highlight user search queries dynamically.

🔹 Content Emphasis – Highlight key terms in articles or documentation.

🔹 Live Text Filtering – Visually emphasize matching text in real-time.

[website] is open-source under the MIT License. Check out the repo and feel free to contribute or analysis issues!

Let me know what you think! Drop a comment below. 🚀.

I’ve often noted that a beautiful desktop environment can make or break a distribution. Sure, there are plenty of people who don’t care what their desk......

If you're a developer juggling between work projects, personal side projects, and maybe even some open-source contributions, you're likely familiar wi......

On Wednesday morning, our coworkers at The New Stack started asking each other, in meetings and via panicked emails: Hey, are you having trouble with ......

Setting Up a Basic JavaScript Bundler with Esbuild

Modern web development often involves multiple JavaScript files, dependencies from npm, and the need for efficient performance.

Allowing the use of modern JS elements (import/export, ES6+).

In this guide, we'll set up a basic, no-framework JavaScript bundler using Esbuild—one of the fast JS bundlers available.

No Webpack complexity, just pure bundling goodness! 😎.

First, create a new folder and initialize an npm project:

mkdir my-bundler-setup && cd my-bundler-setup npm init -y Enter fullscreen mode Exit fullscreen mode.

Now, install Esbuild as a development dependency:

npm install esbuild --save-dev Enter fullscreen mode Exit fullscreen mode.

We’ll create two JS files: [website] (main file) and [website] (module file).

export function getMessage () { return " Hello from bundled [website] to [website]! " ; } Enter fullscreen mode Exit fullscreen mode.

import { getMessage } from " ./[website] " ; function runDemo () { console . log ( " Executing bundled script... " ); document . getElementById ( " output " ). textContent = getMessage (); } // Expose function to the browser window . runDemo = runDemo ; Enter fullscreen mode Exit fullscreen mode.

Create an [website] file to load our bundled script:

Esbuild Bundler Demo Check the console for logs from the bundled script. Run Bundled Code Enter fullscreen mode Exit fullscreen mode.

Check the console for logs from the bundled script.

Now, let’s configure Esbuild to bundle our scripts into a single [website] file.

Modify your [website] to add a build script:

"scripts" : { "build" : "esbuild [website] --bundle [website]" } Enter fullscreen mode Exit fullscreen mode.

npm run build Enter fullscreen mode Exit fullscreen mode.

Awesome! 🚀 We now have a bundled JavaScript file ( [website] ) that combines both [website] and [website] .

To serve the project locally, install serve , a lightweight static server:

npm install -g serve Enter fullscreen mode Exit fullscreen mode.

serve . Enter fullscreen mode Exit fullscreen mode.

Now, open [website]:3000 in your browser.

This simple bundler setup can be useful for:

Small web projects needing modular JavaScript.

Quick prototyping without Webpack complexity and npm publishing.

Lightweight projects where frameworks aren’t required.

Experimenting with modern JavaScript capabilities in the browser.

in the browser Educational purposes (learning ES6 modules, bundling, serving static files).

This is just the beginning—Esbuild can do much more! Stay tuned for future optimizations like minification, live-reloading, and more. 🚀.

💡 What do you think? Would you use Esbuild for quick bundling? or a much faster one Rsbuild? Drop a comment below! 🎯.

I’ve been working on a super-convenient tool called LiveAPI.

LiveAPI helps you get all your backend APIs documented in a few minutes.

With LiveAPI, you can quickly generate interactive API documentation that allows consumers to execute APIs directly from the browser.

If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.

xml-trueformat is a TypeScript library for parsing and manipulating XML documents while retaining their exact original formatting. It stores whitespac......

Code review is essential for maintaining high-quality software, but it can be time-consuming and prone to human error. AI-powered code review tools ar......

Chip designer Arm has a new edge AI platform optimized for the Internet of Things (IoT) that expands the size of AI models that can run on edge device......