DEV Community: Nathan C.

Stop Rewriting UI Components for Every Project

Nathan C. — Mon, 15 Jun 2026 03:15:50 +0000

Ever started a new project and found yourself rebuilding the same modal, dropdown, toast notification, tabs, and switches for the 20th time?

I got tired of that.

So I built UltraHTML, a lightweight UI library that gives you modern components with simple HTML and JavaScript, no framework required.

Getting Started

Include the CSS and JS files:

<link rel="stylesheet" href="dist/ultra.css">
<script src="dist/ultra.js"></script>

Initialize UltraHTML:

Ultra.init();

Done.

Buttons

UltraHTML includes two button styles out of the box:

ultra-button — a clean, modern button.
ultra-button-wave — adds a wave/ripple-style interaction effect.

Basic button:

<button class="ultra-button">
  Simple Button
</button>

Wave button:

<button class="ultra-button ultra-button-wave">
  Wave Button
</button>

Buttons use UltraHTML's default green theme, but because they're standard HTML elements, you can easily customize them with CSS.

For example, here's a red button that displays a popup message:

<button
  onclick="Ultra.popupmsg('Hello from UltraHTML!')"
  class="ultra-button ultra-button-wave"
  style="background-color: red">
  Show Popup
</button>

You can create buttons that match your site's branding without learning a separate theming system:

<button class="ultra-button" style="background-color: #3b82f6;">
  Blue Button
</button>

<button class="ultra-button ultra-button-wave" style="background-color: #f59e0b;">
  Orange Button
</button>

<button class="ultra-button ultra-button-wave" style="background-color: #ef4444;">
  Red Button
</button>

UltraHTML handles the styling and interactions while still giving you full control over how your buttons look.

Modal Example

Need to display important information?

<script>
window.addEventListener("load", () => {
    Ultra.init();

    Ultra.modal({
        head: "Important",
        text: "You need to reset your password",
        buttonText: "Reset",
        buttonAction: (modal) => {
            console.log("Going to reset page...");
            modal.remove();
        }
    });
});
</script>

If buttonAction is omitted, the modal automatically closes when the button is clicked.

For simple informational dialogs, you only need:

<script>
Ultra.modal({
    head: "Welcome",
    text: "Thanks for visiting!",
    buttonText: "OK"
});
</script>

Add a buttonAction callback only when you need custom behavior, such as navigating to another page, submitting data, or running additional code before closing the modal.

Features:

Custom title
Custom text
Custom button labels
Automatic close behavior
Optional callback support
Clean styling out of the box

Popup Notifications

<button onclick="Ultra.popupmsg('Hello from UltraHTML!')">
  Show Popup
</button>

Instant toast-style messages with one line of code.

Dropdowns

<div class="ultra-dropdown">
  <button class="ultra-dropdown-btn">
    Choose Option
  </button>

  <div class="ultra-dropdown-content">
    <a href="#">Action One</a>
    <a href="#">Action Two</a>
    <a href="#">Action Three</a>
  </div>
</div>

Tabs

<div class="ultra-tab-container">
  <div class="ultra-tab tab-active">Active Tab</div>
  <div class="ultra-tab">Inactive Tab</div>
  <div class="ultra-tab tab-disabled">Disabled Tab</div>
</div>

Chips

<div class="ultra-chip">
  Clickable Chip
</div>

<div class="ultra-chip chip-permanent">
  Permanent Chip
</div>

Image chips:

<div class="ultra-chip">
  <img src="https://picsum.photos/43/43">
  Image Chip
</div>

Switches

<label class="ultra-switch">
  <input type="checkbox" class="ultra-switch-input">
  <span class="ultra-switch-slider"></span>
</label>

Custom Right-Click Menus

<div class="ultra-context-menu">
  <div class="item">📝 Edit</div>
  <div class="item">❌ Delete</div>
  <div class="item">🔗 Copy Link</div>
</div>

Initialize once:

Ultra.init();

and UltraHTML handles the rest.

Why I Built UltraHTML

Many UI libraries are powerful, but they're also huge, framework-dependent, or overkill for smaller projects.

UltraHTML focuses on:

Simplicity
Speed
Lightweight code
Modern styling
Framework independence

Sometimes you just want a modal without installing 50 packages.

What's Next?

I'm actively developing UltraHTML and adding new components.

GitHub: https://github.com/Natuworkguy/UltraHTML

I'd love feedback, feature requests, and contributions.

What component would you want to see added next?

Pux: Bringing Pygame to Rux

Nathan C. — Thu, 11 Jun 2026 16:33:36 +0000

I've been working on a project called Pux, a set of Pygame bindings for Rux.

The goal is simple: make it easy to create graphical applications and games in Rux while leveraging the power and maturity of Pygame behind the scenes.

Why?

Rux already provides a clean and modern programming experience, but graphics and game development are areas where a lot of developers expect batteries included.

Instead of building an entire graphics stack from scratch, Pux acts as a bridge between Rux and Pygame, allowing Rux programs to access graphics, input, timing, and other game-development features through a familiar API.

Current Features

So far, Pux includes functionality such as:

Window creation
Simple event polling
Drawing rectangles
Screen clearing
Frame presentation
Basic timing and frame control

Example:

import Pux::{
    pg_init,
    pg_running,
    pg_clear,
    pg_draw_rect,
    pg_present,
    pg_quit,
};

func Main() -> int {
    var x = 0;
    pg_init(
        800,
        700
    );

    while pg_running() == 1 {
        pg_clear(255, 255, 255);

        pg_draw_rect(
            x,
            x,
            200,
            150,
            175,
            175,
            175
        );

        x += 1;

        pg_present();
    }

    pg_quit();

    return 0;
}

What's Next?

Some features I'm considering:

Drawing circles, lines, and polygons
Text rendering
Image loading and rendering
Keyboard and mouse input helpers
Audio support

Contributing

Pux is still in active development, and contributions are always welcome!

If you'd like to help improve Pux, feel free to open an issue or submit a pull request. Repo: https://github.com/Natuworkguy/Pux

Whether it's bug fixes, new features, documentation improvements, examples, or code cleanup, every contribution helps make Pux better for the entire Rux community.

Rux: A Modern Systems Programming Language Worth Watching

Nathan C. — Wed, 27 May 2026 01:27:16 +0000

The programming language ecosystem evolves quickly, but occasionally a new project appears with a genuinely interesting direction. One language that recently caught my attention is Rux.

https://rux-lang.dev

Rux is a compiled, strongly typed systems programming language focused on:

native performance
explicit memory control
modern syntax
lightweight tooling
low-level interoperability

While still in active development, the project already demonstrates a clear vision and a surprisingly polished developer experience.

Clean and Readable Syntax

One of the first things that stands out about Rux is its syntax. It feels modern without becoming overly abstract.

A minimal program looks like this:

func Main() -> int {
    return 0;
}

The structure is straightforward and approachable, especially for developers familiar with languages such as:

C
C++
Rust
Go

The language emphasizes clarity and explicit behavior, which is particularly valuable in systems-level development.

Real Example

Here is a practical example using functions and formatted output:

import Std::Io::PrintLine;

func Add(a: int, b: int) -> int {
    return a + b;
}

func Main() -> int {
    let result = Add(10, 32);

    PrintLine("Result: {}", result);

    return 0;
}

The syntax remains concise while preserving strong typing and predictable behavior.

Systems Programming Features

Rux is designed for low-level development and includes features commonly expected in systems languages, including:

pointers
references
foreign function interfaces (FFI)
inline assembly
direct memory management

Example:

extern func malloc(size: uint) -> *opaque;
extern func free(ptr: *opaque);

func Main() -> int {
    let memory = malloc(64);

    free(memory);

    return 0;
}

This makes Rux suitable for developers interested in:

operating systems
game engines
embedded tooling
compilers
performance-critical software

Strong Type System

Rux includes a broad set of explicit integer and floating-point types.

Example:

let small: int8 = 127;
let large: uint64 = 1000000;

The language avoids implicit conversions, encouraging safer and more predictable code.

That design choice may feel stricter at first, but it helps eliminate a large category of subtle bugs.

Lightweight Tooling

Another notable aspect of Rux is its tooling philosophy.

The toolchain includes:

compiler
package manager
formatter
project utilities

Creating and running a project is simple:

rux new MyProject
cd MyProject
rux build
rux run

The workflow is refreshingly minimal compared to many modern ecosystems.

Development Ecosystem

Rux already includes:

documentation
package management support
a standard library
a Visual Studio Code extension
active GitHub discussions and issue tracking

The VS Code extension provides syntax highlighting and language support, helping improve the overall developer experience.

Why Rux Is Interesting

Many modern languages attempt to simplify development by adding layers of abstraction. Rux appears to take a different approach:

remain close to the hardware
preserve explicit control
maintain modern ergonomics
avoid unnecessary complexity

That balance is difficult to achieve, especially for a newer language project.

Although Rux is still early in development, it already shows strong technical direction and thoughtful language design decisions.

Final Thoughts

Rux is still evolving, but it is already shaping up to be an impressive systems programming language project.

If you are interested in:

compilers
systems programming
language design
native performance
low-level software development

then Rux is absolutely worth exploring.

Learn more:
https://rux-lang.dev

I’ve Been Building a Python Game Engine

Nathan C. — Thu, 21 May 2026 21:10:55 +0000

I’ve been working on a project called ABS Engine, a Python game engine focused on keeping projects simple and organized.

Instead of making developers write massive setup code, games are mostly controlled through a project file called game.absp.

It can define things like:

entities
connected scripts
image assets
fullscreen settings
resolution
cursor visibility

Example idea:

Player entity
→ script: scripts/player.py
→ texture: data/images/player.png

Game settings:
→ fullscreen enabled
→ cursor hidden
→ resolution: 540x320

Scripts can still access the engine API directly using:

from engine.core import *

The goal is making game projects easier to structure while still giving advanced users full access to the engine itself.

I’m also working on build tools so projects can be packaged and shared easily without manually hunting for dependencies and assets.

Still early in development, but it’s been one of the most fun programming projects I’ve worked on.

Repo: https://github.com/Natuworkguy/ABS-Engine