DEV Community: Music Khairy

I Publish A New Package On NPM, Here's What I Build.

Music Khairy — Sat, 28 Mar 2026 07:49:48 +0000

Nitro 5 — Web Server

I just published Nitro 5

I’m excited to share that I’ve published Nitro 5, a new web server framework built with a hybrid Node.js + C++ architecture.

Nitro 5 was created with one main idea in mind: combine the flexibility of JavaScript with the performance advantages of native code. Instead of forcing everything through one layer, Nitro 5 uses Node.js for application-level logic, routing, and developer-friendly workflow, while C++ is used for performance-critical parts such as low-level request handling, system optimization, and native execution paths.

The result is a framework that aims to feel modern, practical, and easy to work with, while still staying focused on speed and efficiency. That balance is the core of the project. I wanted something that could be used for real applications, not just as a proof of concept, and something that can evolve into a stronger production-ready ecosystem over time.

Nitro 5 also includes built-in support for TypeScript, JSX/TSX, and fast bundling through ESBuild. That means you can work with modern frontend and backend workflows without making your development experience slow or painful. It also includes Hot Module Replacement (HMR), watch mode, caching, a router, a dashboard, and thread workers, all designed to make development smoother and improve responsiveness.

This project is still growing, but it already reflects the direction I want Nitro 5 to take: fast startup, fast rebuilds, scalable architecture, and a developer experience that feels clean instead of complicated.

If you like performance-focused tooling, modern JavaScript ecosystems, or just enjoy experimenting with new frameworks, Nitro 5 is something I’d be happy for you to try.

What Nitro 5 Delivers

Nitro 5 includes support for:

Scalable web server architecture
TypeScript support
TypeScript cache
JSX / TSX support for React
Vite support
Hot Module Replacement (HMR)
Caching
Watcher mode
Router
Dashboard
Thread workers
Fast development rebuilds
Native performance-focused execution paths
A workflow designed for modern web projects

Why I Built It

I built Nitro 5 because I wanted to explore a different kind of server framework.

A lot of web tools lean heavily toward one side of the spectrum. Some are easy to use but lose performance when the project gets bigger. Others are extremely fast but harder to work with, especially during development. Nitro 5 tries to live in the middle.

The idea is not to replace every existing framework. The idea is to create a foundation that feels:

fast without being awkward
modern without being bloated
flexible without becoming messy
powerful without losing developer experience

I also wanted to make something that supports the way developers actually build today. That means TypeScript. That means TSX. That means quick rebuilds. That means working with frontend and backend code in a more natural way. Nitro 5 is built around those expectations instead of treating them like optional extras.

Core Philosophy

Nitro 5 follows a simple philosophy:

1. Keep the framework approachable

The API should feel understandable and not require a huge learning curve.

2. Keep the build process fast

Development should feel responsive. Waiting too long for rebuilds kills momentum.

3. Keep the runtime efficient

Native optimization should be used where it makes sense, especially for performance-sensitive parts.

4. Keep the architecture scalable

The project should be able to grow over time without turning into a tangled mess.

5. Keep the developer experience clean

A framework should help you move faster, not make simple things feel complicated.

Architecture

Nitro 5 is organized into several layers of responsibility.

Application Layer

Handles routing, middleware, app logic, configuration, and framework behavior.

Runtime Layer

Coordinates Node.js execution and manages server operations.

Performance Layer

Uses C++ bindings for low-level optimization and performance-sensitive paths.

Build Layer

Uses ESBuild for fast transformations and modern module workflows.

This layered design makes the system easier to reason about and gives it room to grow without forcing everything into one giant block of logic.

How to Use Nitro 5

1. Install the C/C++ Toolchain

Because Nitro 5 includes native parts, make sure your environment has a compiler installed.

apt install clang

Depending on your system, you may also need additional build tools.

2. Install Nitro 5

npm install nitro5

3. Let Postinstall Finish

Nitro 5 will automatically build native modules during the postinstall step.

This is an important part of setup because it prepares the C++ side of the framework and makes it ready to run.

4. Start the CLI

nitro5

5. Open the Local Server

Open your browser and visit:

http://localhost:3000/

If everything is configured correctly, you should see the Nitro 5 server running.

Example Configuration

A typical nitro5.config.js may look like this:

export default {
  server: {
    port: 3000,
  },
  dev: {
    useVite: false
  },
  cache: {
    enabled: true,
    ttl: 60
  },
  dashboard: true,
  cors: {
    enabled: true,
    origin: "*"
  },
  cacheTs: true
};

Example Project Structure

A common project layout may look like this:

.
|____ nitro5.config.js
|
|__ public
    |___ index.html
    |___ app.tsx
    |___ main.ts

Example Frontend Setup

`public/index.html`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nitro 5</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

`public/app.tsx`

import React from "react";

export function App() {
  return (
    <div>
      <h1>Nitro5 + React 19 🚀</h1>
      <p>Web server ready!</p>
    </div>
  );
}

`public/main.ts`

import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./app";

createRoot(document.getElementById("app")!).render(<App />);

Example Usage Flow

A simple Nitro 5 workflow might look like this:

Install the package
Prepare the native toolchain
Configure the server
Run the CLI
Open the browser
Start building pages, APIs, or interactive app features

The goal is to keep this flow straightforward so that the developer can focus on building the project instead of fighting with setup.

Features in Practice

TypeScript Support

Nitro 5 is built to work naturally with TypeScript, making it easier to write maintainable code with type safety.

TSX / JSX Support

This helps when building UI-driven workflows or React-based frontend setups.

ESBuild Integration

Fast transforms help keep development fast and responsive.

HMR

Hot Module Replacement makes iteration smoother by reducing the need for full reload cycles.

Caching

Caching helps improve repeated request performance and reduce unnecessary work.

Watch Mode

Useful during development so changes can be detected quickly.

Router

A router gives the project structure and keeps routing logic organized.

Dashboard

A dashboard can help inspect or manage the server more easily.

Thread Workers

Workers give the framework more room to scale under load and handle parallel tasks better.

What Makes Nitro 5 Different

Nitro 5 is not trying to be just another wrapper around existing ideas.

It is being shaped around a few specific goals:

keep the API approachable
keep the dev loop fast
support modern frontend and backend workflows
improve performance where native code helps
remain scalable for future features
avoid making the project feel overcomplicated

That balance is the main point of the framework.

Current Focus

Right now, Nitro 5 is focused on improving:

developer experience
architecture clarity
build speed
request handling
native integration
TypeScript and TSX support
HMR behavior
caching behavior
router functionality
dashboard usefulness

Roadmap

Possible future improvements include:

improved developer dashboard
enhanced caching controls
better TypeScript tooling
expanded plugin support
more advanced HMR integration
multi-threaded request optimization
additional router features
production build optimizations
better native binding workflows
more utilities for real-world projects

Contributing

Contributions are welcome.

If you find a bug, have an idea, or want to improve something, feel free to open an issue or submit a pull request.

Before contributing, please try to keep changes consistent with the architecture and direction of the project. Clean, practical improvements are always appreciated.

License

This project is licensed under the BSD 3-Clause License.

I Started Coding at 11 — Here’s What I Learned Along the Way

Music Khairy — Tue, 10 Mar 2026 05:38:10 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

I Started Coding at 11 — Here’s What I Learned Along the Way

Most people discover programming in high school or college.
My journey started much earlier.

At 11 years old, I began exploring the world of programming. At first it was just curiosity — I wanted to understand how websites and apps worked. But that curiosity slowly turned into something much bigger.

The Beginning: Curiosity and the Internet

Like many developers, my journey started with the internet.

I began experimenting with HTML, JavaScript, and PHP. At first, things were confusing. There were so many new concepts: variables, functions, events, APIs, frameworks, and more.

But every small success felt amazing.

My first webpage was extremely simple. Just some text, maybe a button, and some basic styling. But when I saw it working in my browser, it felt like magic.

I realized something important:

«Programming is not just about writing code.
It's about turning ideas into reality.»

Learning Without a Clear Roadmap

One challenge of starting young is that there isn't always a clear path.

Many tutorials assume you are older or already understand some technical concepts. Sometimes documentation can be difficult to understand.

So I had to learn by:

experimenting
breaking things
fixing bugs
reading documentation
trying again

And honestly, breaking things became one of the best ways to learn.

Building Things (Even Small Ones)

Instead of only reading tutorials, I started building small projects.

Some projects were simple. Some failed completely. But every project taught me something new.

I learned:

how to structure code
how debugging works
how small mistakes can break an entire program
how satisfying it is when everything finally works

These small projects slowly built my confidence.

The Power of Open Source

One of the most exciting parts of programming is the open-source community.

Seeing developers around the world share their code and collaborate inspired me a lot. It showed me that programming isn't just an individual skill — it's also a community effort.

Even reading other people's code can teach you so much.

Lessons I've Learned So Far

Even though I'm still early in my journey, I've learned some valuable lessons:

You don't need to wait to start.
Age doesn't define your ability to learn programming.
Building things teaches more than only studying.
Real projects create real experience.
Bugs are part of the process.
Every developer faces them.
Curiosity is the best teacher.
The desire to understand "how things work" drives learning.

A Message to Other Young Developers

If you're young and interested in programming, my advice is simple:

Start now.

You don't need perfect knowledge.
You don't need the best computer.
You don't need to know everything.

Just start building, experimenting, and learning.

Every line of code you write is a step forward.

Looking Forward

My journey as a developer is just beginning. There are still many technologies to explore, many projects to build, and many lessons to learn.

But one thing is certain:

Programming has already changed how I think, learn, and create.

And I'm excited to see where this journey goes next.

JuiceToast v1.4.4 Pack 0

Music Khairy — Fri, 06 Mar 2026 08:13:06 +0000

JuiceToast v1.4.4: Let’s Make Toast Notifications Fun Again! 🚀

Hey developers! 👋

Welcome to the ultimate guide on JuiceToast v1.4.4. If you’ve ever thought toast notifications were boring, flat, or just “meh”, this post will change your mind. We’re going deep into 3D toasts, interactive modals, parallax effects, accessibility, performance optimization, and developer tricks.

And yes, this is more than just a release note — this is a full learning experience + invitation to join the GitHub Discussion, where your ideas can directly influence the next version.

🎉 What’s New in JuiceToast v1.4.4?

JuiceToast v1.4.4 introduces interactive 3D toasts, enhanced modals, parallax fixes, and accessibility-first features. Let’s break it down:

1️⃣ 3D Toasts (`use3d: true`)

Bring notifications to life by adding depth and perspective:

juiceToast.success({
  message: "Hello, 3D World!",
  use3d: true,
  duration: 3000
});

✅ Features:

Stunning 3D pop-out effect
Compatible with swipe-to-dismiss
Works in both light and dark mode
Can be combined with auto-deduplication to avoid spammy notifications

Pro tip: Adjust perspective in your global config for more dramatic depth effects:

juiceToast.setup({
  perspective: "1000px"
});

2️⃣ 3D Modals

Not only toasts — modals now have depth, making your UI feel alive:

juiceToast.modal({
  title: "3D Modal Alert",
  message: "Depth + style = awesome",
  use3d: true
});

💡 Use cases:

Alerts and confirmations
Interactive notifications that feel tactile
Paired with parallax for dynamic movement

3️⃣ Parallax Mode Fixes

Smooth animations that move with scrolling and UI interactions:

juiceToast.success({
  message: "Smooth parallax toast",
  parallaxMode: true,
  duration: 4000
});

Benefits:

Less layout jitter
Feels natural on scrollable content
Integrates with 3D toasts and modals

4️⃣ Accessibility – Prefers-Reduced-Motion

JuiceToast respects user motion preferences automatically:

const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

juiceToast.success({
  message: "Motion-friendly notification",
  reduceMotion: prefersReduced
});

Why it matters:

Supports users with motion sensitivity
Keeps basic functionality intact
Works alongside 3D and parallax features

🚀 Join the GitHub Discussion

JuiceToast thrives because of community feedback. Here’s why you should participate:

Share ideas – Got a crazy toast concept? Discuss it!
Report bugs – Found a glitch? Post it, watch it get fixed.
Collaborate – Contribute animations, performance tweaks, or optimizations.
Learn & teach – Explore high-performance toast mechanics under the hood.

Every feature in v1.4.4 is community-inspired. Your idea could headline v1.5!

GitHub Discussions: [https://github.com/KhairyK/juiceToast/discussions/11]

Mini Tutorial: Fully Interactive Toast

Combine multiple features for a powerful toast:

juiceToast.info({
  id: "welcome-toast",
  message: "Welcome to JuiceToast v1.4.4!",
  use3d: true,
  swipeToDismiss: true,
  autoDedupe: true,
  parallaxMode: true,
  duration: 5000
});

Features included:

✅ Auto deduplication
✅ Swipe to dismiss
✅ 3D effect
✅ Parallax animation
✅ Accessibility-friendly

Lifecycle Hooks

Take full control of your notifications:

juiceToast.success({
  message: "Hook test",
  onShow: () => console.log("Toast appearing"),
  onShown: () => console.log("Toast visible"),
  onClose: () => console.log("Toast closing"),
  onRemoved: () => console.log("Toast removed")
});

Ideal for analytics, logging, or custom triggers
Works seamlessly with 3D, modals, and parallax

Smart Queue Management

JuiceToast automatically manages visible notifications:

juiceToast.config({
  maxVisiblePerType: 3
});

Prevents overlapping or hidden toasts
Queues extra notifications for smooth UX
Works with all toast types

Performance Optimization

Designed for GPU acceleration and minimal layout thrash:

Hardware-accelerated transforms
Minimal DOM reflows
Lightweight footprint for large-scale apps

Pro tip: Use reduceMotion: true on heavy pages for smoother animations.

Mini Troubleshooting Tips

Toast not appearing? ✅ Check maxVisiblePerType and active toasts.
3D effect looks flat? ✅ Adjust perspective in config.
Swipe-to-dismiss not working? ✅ Ensure swipeToDismiss: true and touch events are enabled.
Parallax jittering? ✅ Make sure parent containers don’t have overflow: hidden clipping.

What’s Next?

Planned features for upcoming versions:

Community-contributed custom animations
Themeable toast designs for frameworks like React, Vue, Svelte
Cross-device performance improvements
Advanced stacking & grouping logic

Your Turn: Join the Conversation

I want to hear from you:

New feature requests?
Animation hacks you love?
Performance optimization suggestions?

Let’s make JuiceToast the go-to library for interactive notifications. Be part of its evolution!

GitHub Discussions link: [https://github.com/KhairyK/juiceToast/discussions/11]

P.S. Next post: I’ll show step-by-step how to build custom JuiceToast notifications from scratch, including 3D effects, deduplication, swipe gestures, and parallax animations. Stay tuned! 🚀

JuiceToast v1.4.1 Release (v1.4.0 fix)

Music Khairy — Sat, 28 Feb 2026 08:48:14 +0000

JuiceToast v1.4.1 Release

This release adding a Promise Toast, HTML Online (Sanitazed) & Bug fixes

You can see the changelog in GitHub

JuiceToast v1.3.4 Release

Music Khairy — Tue, 24 Feb 2026 10:41:18 +0000

WARNING: v1.3.x now will deprecated on 28 Febuary 2026. You should use ^v1.4.x
Full Changelog: https://github.com/KhairyK/juiceToast/blob/main/CHANGELOG.md#v134

JuicToast v1.3.3 Release

Music Khairy — Tue, 24 Feb 2026 10:39:08 +0000

Full Changelog: https://github.com/KhairyK/juiceToast/blob/main/CHANGELOG.md

JuiceToast v1.3.2

Music Khairy — Tue, 17 Feb 2026 07:24:07 +0000

🍹 JuiceToast v1.3.2 Released

Hey devs! 👋

A new update of JuiceToast is here!
Version v1.3.2 focuses on improving accessibility, adding new customization features, and making the developer experience even smoother.

If you love lightweight, dependency-free toast notifications — this release is for you.

✨ What’s New in v1.3.2

♿ Improved Accessibility (A11Y)

Accessibility has been significantly improved to ensure better usability for everyone:

Better screen reader support
Improved ARIA attributes
More consistent focus handling
Reduced-motion friendly behavior

🖼️ Background Image Support

You can now add background images to your toast notifications using the new:

bgImage

This makes it easier to create more visually appealing notifications for branding, promotions, or custom UI themes.

🎨 More Built-in Themes

JuiceToast now comes with additional themes out of the box, making it easier to match your app’s design without writing custom CSS.

⚡ Default Toast Helpers

You no longer need to configure basic toast types manually.
New helper functions are now available:

juiceToast.success("Saved successfully!");
juiceToast.error("Something went wrong!");
juiceToast.info("New update available.");
juiceToast.warning("Storage almost full.");
juiceToast.loading("Uploading...");

These helpers provide quick, clean, and consistent notifications.

🍹 Why JuiceToast?

JuiceToast is designed to be:

Lightweight
Dependency-free
Easy to integrate
Highly customizable
Mobile-friendly
Accessible by default

Perfect for modern web apps that need fast, beautiful notifications without bloat.

📦 Installation

npm install juice-toast

🚀 Quick Example

juiceToast.success("Hello from JuiceToast!");

That’s it — simple and powerful.

❤️ Support the Project

If you enjoy using JuiceToast:

⭐ Star the repository
🐛 Report issues
💡 Suggest new features

Your support helps the project grow!

🧃 What’s Next?

Future updates may include:

More animation presets
Plugin system (With JDX)
Advanced positioning controls

Stay tuned 😉

Thanks for using JuiceToast!

DevDoctor CLI v0.1.0

Music Khairy — Fri, 13 Feb 2026 09:27:57 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built DevDoctor CLI, an AI-powered coding assistant specifically for JavaScript projects.

It can analyze your project structure, detect tech stack, run and fix tests, lint code, generate professional README.md files, and even suggest fixes for JS errors — all directly from the terminal.

DevDoctor CLI is designed to help developers save time and improve code quality by providing AI-driven suggestions while coding in JavaScript.

Demo

You can check out the project here: DevDoctor CLI GitHub Repository

Screenshot / walkthrough:

Run doctor analyze to see project structure and tech stack.
Run doctor fix <error> to get AI suggestions for errors.
Run doctor generate to automatically create a professional README.
Run doctor test to run JS tests (Jest by default) with AI suggestions.
Run doctor lint to check code style with ESLint and receive AI recommendations.

My Experience with GitHub Copilot CLI

I used GitHub Copilot CLI extensively during development.

Copilot helped me generate boilerplate for CLI commands, like fix, analyze, generate, test, and lint.
It assisted in writing AI prompt handlers, especially for summarizing project files and generating README content.
Copilot significantly sped up development, letting me focus on CLI design and logic instead of repetitive coding tasks.

Using Copilot CLI made building DevDoctor CLI faster and smoother, and gave me insights into integrating AI directly into developer workflows.

DEV Community: Music Khairy

I Publish A New Package On NPM, Here's What I Build.

Nitro 5 — Web Server

I just published Nitro 5

What Nitro 5 Delivers

Why I Built It

Core Philosophy

1. Keep the framework approachable

2. Keep the build process fast

3. Keep the runtime efficient

4. Keep the architecture scalable

5. Keep the developer experience clean

Architecture

Application Layer

Runtime Layer

Performance Layer

Build Layer

How to Use Nitro 5

1. Install the C/C++ Toolchain

2. Install Nitro 5

3. Let Postinstall Finish

4. Start the CLI

5. Open the Local Server

Example Configuration

Example Project Structure

Example Frontend Setup

public/index.html

public/app.tsx

public/main.ts

Example Usage Flow

Features in Practice

TypeScript Support

TSX / JSX Support

ESBuild Integration

HMR

Caching

Watch Mode

Router

Dashboard

Thread Workers

What Makes Nitro 5 Different

Current Focus

Roadmap

Contributing

License

I Started Coding at 11 — Here’s What I Learned Along the Way

JuiceToast v1.4.4 Pack 0

JuiceToast v1.4.4: Let’s Make Toast Notifications Fun Again! 🚀

🎉 What’s New in JuiceToast v1.4.4?

1️⃣ 3D Toasts (use3d: true)

2️⃣ 3D Modals

3️⃣ Parallax Mode Fixes

4️⃣ Accessibility – Prefers-Reduced-Motion

🚀 Join the GitHub Discussion

Mini Tutorial: Fully Interactive Toast

Lifecycle Hooks

Smart Queue Management

Performance Optimization

Mini Troubleshooting Tips

What’s Next?

Your Turn: Join the Conversation

JuiceToast v1.4.1 Release (v1.4.0 fix)

JuiceToast v1.4.1 Release

JuiceToast v1.3.4 Release

JuicToast v1.3.3 Release

JuiceToast v1.3.2

🍹 JuiceToast v1.3.2 Released

✨ What’s New in v1.3.2

♿ Improved Accessibility (A11Y)

🖼️ Background Image Support

🎨 More Built-in Themes

⚡ Default Toast Helpers

🍹 Why JuiceToast?

📦 Installation

🚀 Quick Example

❤️ Support the Project

🧃 What’s Next?

DevDoctor CLI v0.1.0

What I Built

Demo

`public/index.html`

`public/app.tsx`

`public/main.ts`

1️⃣ 3D Toasts (`use3d: true`)