DEV Community: Karelle Hofler

How I Built and Published My First NPM Package in 3 Weeks

Karelle Hofler — Wed, 10 Dec 2025 16:00:00 +0000

Sometimes the smallest changes can throw your whole project into chaos. For me, that moment came with SoundCloud.

I was using SoundCloud for music integration in my major project, VibeShift, and everything was running smoothly—until one day, an API update changed everything. SoundCloud was migrating to HLS (HTTP Live Streaming) for their music, and while progressive downloads (MP3s, WAVs, etc.) were fine before, the update broke them.

I found myself scrambling to get a working solution. Nine hours later, I had something semi-functional—but it wasn’t sustainable. Most solutions I found online were either outdated, confusing, overly bloated, or not maintained. I realized: I didn’t want to rely on someone else’s unstable library.

That’s when I started Oddysee, my own HLS audio player library.

Planning & Architecture: Week One

The first week was all about thinking long-term. I asked myself:

Do I make this React-only?
Should it eventually support Vue or Svelte?
What dependencies do I actually need?

I landed on a core TypeScript package, framework-agnostic so anyone could build a wrapper for their preferred framework. Since I work with React, I started with a React hook version.

The planning phase was crucial. I wanted Oddysee to be something I could trust, maintain, and eventually let others contribute to—without being tied to my personal brand.

Building Phase: Weeks Two & Three

Implementing HLS was hard as hell. HLS.js is a huge low-level library with tons of configurations, and wrapping it in a clean, readable API was tricky.

Challenges included:

Designing an intuitive, readable API
Testing it in example projects and in VibeShift locally
Dealing with edge cases I didn’t anticipate

At one point, I came across Verdaccio, which is a really cool way to test your npm packages locally, but that’s a story for another article.

Publishing Oddysee

After three weekends of deep work, it was time to publish. And then reality hit: naming and scoping an NPM package is way harder than it looks.

I thought I could just publish a scope and be done—but finding a unique name took hours. Eventually, I landed on Oddysee. Plus, every other variation I tried was already taken. And when that failed, I decided to make it unscoped.

I also made the conscious decision not to attach my full name to the project. Not out of fear—rather, but to allow Oddysee to live independently, and eventually let someone else maintain or contribute without friction.

Reflection & Next Steps

Now that Oddysee is live, I can honestly say I feel confident about its next phase: allowing contributions, improving long-term stability, and filling a gap that HLS libraries currently have for developers. Adding audio is already hard but with music and podcast providers moving over to HLS I want the adoption to be easier compared to what I went through.

What I learned:

Outdated libraries are a risk—even if “everything works” for now.
Planning for long-term maintainability pays off.
Building a framework-agnostic core makes contributions easier.
Naming and publishing can sometimes be harder than coding.

Oddysee might be a small solution, but it’s built to last—and I can’t wait to see how it grows.

itskarelleh / oddysee-hls-audio-player

Oddysee is an HLS audio library that gives control back to the developer. Built with TypeScript and HLS.js

Oddysee - HLS Audio Player

A library API that wraps around HLS.js for a better developer experience. Because audio streaming shouldn't require a PhD in streaming protocols.

⚠️ Status: Beta

Oddysee is actively evolving. APIs may change, and breaking changes can occur between minor releases.

Background

I built this because I needed an audio player that supported HLS, but all the solutions I came across were either bloated or not maintained. Then I discovered HLS.js. It saved me but it wasn't easy! The developer experience feels like you're configuring a spaceship when all you want to do is play some music.

This library wraps all that complexity into a simple, audio-focused API that actually makes sense.

Packages

oddysee-typescript - Core player library (framework-agnostic)
oddysee-react - React hooks wrapper

Installation

Core (Vanilla JS, or any framework)

npm install oddysee-typescript
# or
yarn add oddysee-typescript
# or
pnpm add oddysee-typescript

React Hook

…

View on GitHub

Build a Custom Context Menu with Tailwind and JavaScript

Karelle Hofler — Sat, 25 Nov 2023 21:25:02 +0000

Sometimes when you have a project that is so great and the theme is just so darn amazing, you want everything about the theme to be on point. Or maybe you would like to give your users more options when they right-click a certain element in your app. So how do you customize the context menu? When you right-click on a page in your web browser, what's the menu you see? Since it's built-in you have to do a bit of work around but It's a lot easier than it seems. In this article, you will build a custom context menu using Tailwind.css and JavaScript. I will also be using the icon library Iconoir(it's cute )

Step One: Build and Style the Context Menu
First, set up your document. Here's how your HTML document should be set up to add Tailwind and Iconoir.

If your project is being done locally on your machine don't forget to add <!DOCTYPE html> but if you're using something like Codepen or iCodeThis like I am, it's not necessary.

<html class="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Iconoir-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
    <!-- Tailwind.css -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Config to add dark mode -->
    <script>
        tailwind.config = {
            darkMode: "class"
        }
    </script>
    <style type="text/tailwindcss">

    </style>

</head>

<body class="bg-gray-300 dark:bg-gray-900 text-gray-800 dark:text-gray-100 flex justify-center items-center min-h-screen overflow-hidden">
    <h1>Right-click to see menu</h1>
    <!--context menu goes here -->
</body>

</html>

This template includes the CDN to Tailwind, the CDN to Iconoir, the tailwind config that adds dark mode, and a style tag with the type "text/tailwindcss" to add further customization with Tailwind. Now that your document is set up, let's build the layout for the context menu.

You need three things:

A parent div for hiding and showing the context menu

ul - the actual context menu container

li - the context menu item with its own label and action

The context menu will have only three items; new tab option, dark mode toggle, and print option.

<div id="contextMenu" class="hidden absolute">
    <ul class="menu flex flex-col rounded-md shadow-xl overflow-hidden">
    <!--Opens a new tab on click-->
        <li onclick="window.open('/code/104')" class="context-menu-item">
            <i class="iconoir-open-in-window mr-1"></i>
            Open in New Tab
        </li>
        <!-- toggles light mode and dark mode-->
        <li id="dark-toggle" class="context-menu-item">
            <i class="iconoir-half-moon mr-1"></i>
            Turn On Dark Mode
        </li>
        <!--Opens the print page option-->
        <li onclick="window.print()"
        class="context-menu-item">
           <i class="iconoir-printer"></i>
           Print
         </li>
    </ul>
</div>

Each item in the context menu will have the same exact style so for convenience, add the following code to the style tag.

<style type="text/tailwindcss">
    @layer components {
        .context-menu-item {
            @apply cursor-pointer bg-white dark:bg-gray-800 hover:bg-gray-200 transition-all ease-linear dark:hover:bg-gray-800/50 p-4 w-full h-full text-gray-800 dark:text-gray-200 relative;
        }
    }
</style>

Now the styles have been added, it is now time to add functionality to the context menu.

Step Two: Adding Functionality with JavaScript

In order for this to work, you will first need to disable the built-in context menu. You can't modify so hide it and then implement a function so that when the user right-clicks on the page, the custom context menu is displayed.

//hides the menu if its open
document.onclick = hideMenu;
//opens the context menu if already 
document.oncontextmenu = rightClick;

function hideMenu() {
    menu.classList.add("hidden");
    menu.classList.remove("block");
}

function showMenu() {
    menu.classList.add("block");
    menu.classList.remove("hidden");
}

//Opens the context menu
function rightClick(e) {
    e.preventDefault();

    if (menu.classList.contains("block")) {
        hideMenu();
    } else {
        // Calculate the dimensions of the menu
        menu.style.display = 'block';
        const menuWidth = menu.offsetWidth;
        const menuHeight = menu.offsetHeight;
        menu.style.display = '';

        // Determine position for the menu
        let posX = e.pageX;
        let posY = e.pageY;

        // Check if the menu goes beyond the right edge of the window
        if (posX + menuWidth > window.innerWidth) {
            posX = window.innerWidth - menuWidth;
        }

        // Check if the menu goes beyond the bottom edge of the window
        if (posY + menuHeight > window.innerHeight) {
            posY = window.innerHeight - menuHeight;
        }

        // Set the position of the menu
        menu.style.left = posX + 'px';
        menu.style.top = posY + 'px';

        showMenu();
    }
}

So what's happening here is that when the user right-clicks on the page, it first checks if the context menu is displayed or not. If it is, it will hide the menu and if it's not it will show the menu but before it shows the menu it does the following:

Calculating the dimension of the context menu - The positioning is being found from where the user right-clicked on the page
Make sure that the context menu does not go out of bounds so if the user right-clicked close to the edge it stays within the bounds of the page
Set the position of the menu
Finally, show the menu

The Results
You should get something like the following in this code pen.

Customizing a context menu for your web application can enhance user experience and provide additional functionality. By following the steps outlined in this article, you've learned how to create a custom context menu using Tailwind.css and JavaScript.