DEV Community: Volker Schukai

Monster Select now supports paginated dropdowns – fully reactive, fully open source

Volker Schukai — Wed, 24 Sep 2025 13:30:55 +0000

We added pagination to our select component – and yes, it’s fully open source

Sometimes it’s the small things that make a big difference.

Our latest update to the monster-select component adds something developers (and users) have been asking for: pagination.

No more infinite scrolling. No awkward workarounds. Just clean, native paging – fully integrated.

🔧 What’s new?

We’ve added a pagestepper UI to the dropdown:

Paginated view of options
Configurable number of items per page
Fully reactive (updates with filters and async data)
Works with keyboard navigation
Handles edge cases gracefully (like filtering and empty pages)

Here’s what it looks like:

🧪 Example: Remote Filter + Pagination

Here’s how to configure the select for a real-world use case:

<monster-select
  data-monster-option-filter-mode="remote"
  data-monster-option-filter-position="popper"
  data-monster-option-url="/api/items?filter={filter}&page={page}"
  data-monster-option-mapping-labeltemplate="${name}"
  data-monster-option-mapping-selector="data.*"
  data-monster-option-filter-defaultValue=""
  data-monster-option-mapping-valuetemplate="${id}"
  data-monster-option-features-showremoteinfo="true"
  data-monster-option-remoteinfo-url="/api/items?count=1"
  data-monster-option-mapping-currentpage="meta.pagination.currentPage"
  data-monster-option-mapping-objectsperpage="meta.pagination.perPage"
  data-monster-option-mapping-total="meta.pagination.total"
></monster-select>

This example assumes your backend API returns something like:

{
  "data": [
    { "id": 4, "name": "Item 4" },
    { "id": 5, "name": "Item 5" },
    { "id": 6, "name": "Item 6" }
  ],
  "meta": {
    "pagination": {
      "currentPage": 2,
      "perPage": 3,
      "total": 12
    }
  }
}

Want filtering? It’s already baked in. Just hook up filter={filter} and the component handles debounce, remote updates, and reactivity for you.

💡 Why we built it

Select components can get complicated. Especially when:

You're dealing with large datasets
Filters need to be remote
You want full keyboard and accessibility support
Pagination and state should sync with backend logic

We needed a modular, scalable solution that plays well in modern web apps. So we built it into MonsterJS – and open-sourced the whole thing.

🔗 Explore more

Git: gitlab.schukai.com/.../monsterjs-org
Docs & Live Demos: monsterjs.org

The monster-select is just one part of the puzzle. The lib also includes reactive state management, routing, declarative rendering and more.

We’re building MonsterJS for developers who want structure without the overhead – and components that just work.

✅ TL;DR

Monster Select now supports full pagination
Works with async data and remote filtering
Open Source at monsterjs.org

Try it out. Fork it. Break it. Or build on top of it.

Node, Python and the Daily Dev Apocalypse: Why I Escaped to Go

Volker Schukai — Sun, 24 Aug 2025 17:27:10 +0000

In a world where political systems collapse, alliances wobble, and everything seems to be on fire, one would at least hope the developer tools might offer a shred of stability.

They don’t.

I’ve worked with many ecosystems in my developer life. The one that has devoured the most of my sanity? Node. The idea is decent, no complaints there – but the sheer amount of time I’ve sacrificed just to get a dev stack breathing borders on ritual self-harm.

Dependencies that loathe each other, transitive nightmares, versions that refuse to coexist – the chaos is biblical. Running npm install feels less like software engineering and more like rolling dice in front of an indifferent god of dependencies. Sometimes it works. Most of the time: head → desk.

And then there’s Python. Honestly, it’s worse. Setting up environments isn’t development, it’s a horror show. Each setup feels like a new boss battle in a game nobody wanted to play. Pipenv, virtualenv, Poetry – all cheerful names, all equal pain.

These days I mostly write Go. And frankly, I’m not going back. No virtualenvs, no Gradle, no cathedral of node_modules. Just go build, and it runs.

Sure, Go has its quirks – private repos that act like they’ve never met you, or go mod tidy deciding to improvise like a drunken jazz band. But that’s all manageable. Nothing requiring daily therapy.

I like Go. The language. The ecosystem. The peace.

MonsterJS v4 has landed – and it’s hungry.

Volker Schukai — Sun, 11 May 2025 09:58:18 +0000

We’ve released version 4 of our JavaScript component library, and yes, it’s packed with features that’ll make your inner frontend dev do a little dance (even if it’s in Vim).

What’s new in the Monster’s lair?

🧮 Datatables – Show off your data like it deserves, with sorting, paging, and built-in flexibility.

🔍 Select with remote filtering – Hook it to your API, and let users type, search, and select without any awkward full-list dropdowns.

📅 Monthly calendar – Clean, snappy, and ready to display all your timelines and events.
🧱 Drag-and-drop grid – For the moments when you want users to rearrange reality.
✨ …and much more – Yes, we mean it. This release refines performance, improves accessibility, and adds polish all over the place.

Give the Monster a chance. It doesn’t bite (unless your code has no semicolons).

npm i @schukai/monster

Docs, demos, and more goodies live at: https://monsterjs.org

Shadow DOM Perfected: Experience the Power of Monster 3.100!

Volker Schukai — Sun, 12 Jan 2025 19:48:54 +0000

The Shadow DOM is, in our opinion, one of the most exciting new features in modern HTML engines. This concept enables a much better encapsulation and protection of implementation details than ever before, resulting in cleaner and more maintainable code.

What is your opinion of the shadowroot?

Our JavaScript library is built on this principle and offers a comprehensive range of components—everything from sliders and tabs to select controls and data tables. The use of Shadow DOM ensures that our components are not only modular but also highly resilient against styling or scripting conflicts, making them ideal for large-scale applications.

Beyond Shadow DOM, we leverage cutting-edge JavaScript, CSS, and HTML features to create a seamless developer experience. For example, our components take full advantage of JavaScript Proxy objects to enable fine-grained control over state management, making debugging and data tracking more intuitive. CSS custom properties and container queries allow us to deliver responsive and highly customizable designs out of the box, while modern HTML APIs like the IntersectionObserver ensure performance stays top-notch, even with complex UI elements.

With the release of Monster version 3.100, we’ve once again raised the bar with notable improvements:

The slider component now supports displaying multiple slides simultaneously, a much-requested feature that enhances usability and visual appeal.

The select control has been optimized to handle dynamic loading of values and options more efficiently, offering smoother performance in highly dynamic environments.

These updates, combined with our use of the latest web technologies, underscore our commitment to delivering flexible, robust, and feature-rich tools for modern web development.

And the best thing is that it's all open source.

Introducing the New Version of Monster Components: Power Up Your Development Workflow

Volker Schukai — Fri, 15 Nov 2024 14:31:15 +0000

We’re excited to announce the latest version of our Monster component library, packed with enhancements designed to make your developer life easier. Whether you’re building complex applications or refining a simple interface, Monster.js offers tools to save time and improve results.

Highlights from the New Release

Datatable: Structured Data Visualization Made Easy

Our Datatable component is a game-changer for handling structured data. With its intuitive API and seamless integration, you can quickly transform raw data into interactive and visually appealing tables. Explore its features here.

And battery included is the dark mode, so you don’t have to worry about it.

And of course, there’s built-in support for small screens as well.

Why Monster?

On monsterjs.org, you’ll find a rich collection of components and features tailored for developers. From layout tools to advanced UI controls, Monster.js is built to simplify your workflow while giving you the flexibility to create.

Start exploring today and take your projects to the next level!

Custom Function Integration in Element Updater with MonsterJS

Volker Schukai — Fri, 01 Mar 2024 11:49:45 +0000

MonsterJS introduces a flexible way to enhance the functionality of Element Updaters by allowing the attachment of custom functions. This feature provides developers with the ability to extend the standard behavior of Element Updaters, tailoring them to specific needs.

Implementing `updaterPipeCallbacks`

To integrate custom functions with Element Updaters, a control must implement the updaterPipeCallbacks method. This method should return an object containing key-value pairs, where the key is a unique name for the callback, and the value is the function itself.

Example Implementation

Here's an example of how you can define a custom function within a control using onUpdaterPipeCallbacks:

updaterPipeCallbacks() {
    return {
        "my-callback-doing": (value) => {
            switch (typeof value) {
                case "string":
                    return value + "!";
                case "number":
                    return value + 1;
                default:
                    return value;
            }
        }
    }
}

In this example, the my-callback-doing function checks the type of the input value and modifies it based on its type:

If the value is a string, it appends an exclamation mark.
If the value is a number, it increments the value by one.
For other types, it returns the value unmodified.

Using Custom Functions in Templates

Once you've defined your custom functions, you can invoke them in your control's template using the call command within the data binding expression.

Template Integration Example

Here's how you can incorporate the my-callback-doing function into a control's template:

<div data-monster-replace="path:options | index:label | call:my-callback-doing" part="option-label"></div>

In this template snippet, the data-monster-replace attribute is used to dynamically update the content of the <div>. The call:my-callback-doing part specifies that the my-callback-doing function should be applied to the value obtained from path:options | index:label.

Conclusion

By leveraging the updaterPipeCallbacks method, developers can create more dynamic and flexible web components with MonsterJS. Custom functions provide a powerful way to enhance the interactivity and responsiveness of your web applications, ensuring that you can cater to a wide array of use cases and scenarios.

https://monsterjs.org/

Unleashing the Power of Dynamic Web Content with Monster Templating

Volker Schukai — Sun, 25 Feb 2024 16:36:35 +0000

In the ever-evolving landscape of web development, creating dynamic and interactive web applications is more crucial than ever. Enter Monster Templating, a modern and powerful DOM-based templating system that seamlessly integrates your data with the document object model (DOM). This guide delves into the heart of Monster Templating, unveiling how it can transform your HTML into a dynamic, data-driven powerhouse with minimal coding effort.

Embarking on the Monster Templating Journey

The First Steps: Importing the Updater Class

Our adventure begins with the integration of the Updater class from Monster's CDN, a simple yet pivotal step towards unlocking dynamic content creation:

import {Updater} from 'https://cdn.skypack.dev/@schukai/monster@latest/source/dom/updater.js';

Setting the Stage: Preparing Your HTML Document

Monster Templating thrives on flexibility, allowing you to inject data-binding attributes directly into your HTML or dynamically through JavaScript. This dual approach caters to diverse development styles and project requirements:

const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace', 'path:headline');
body.appendChild(headline);

Or, embed directly in your HTML:

<h1 data-monster-replace="path:headline"></h1>

Bringing Data to Life: Setting Up Data Binding

With Monster, your data becomes the soul of your application, dynamically updating your HTML in real-time:

let obj = { headline: "Go!", };
const updater = new Updater(body, obj);
const subject = updater.getSubject(); // For real-time updates
updater.run();

Demonstrating the magic of dynamic updates, we see how effortlessly the content evolves:

setTimeout(() => { subject['headline'] = "Hello!"; }, 1000);

Exploring the Enchanted Forest of Templating Features

The Magic Wand: Content Replacement

Monster's data-monster-replace attribute stands as your magic wand, enabling you to replace content effortlessly, adding a sprinkle of transformational magic when needed:

<div data-monster-replace="static:HELLO | tolower"></div>

The Alchemist's Lab: Attribute Manipulation

Transform and concoct new attributes with the data-monster-attributes attribute, an alchemist's lab where new properties are forged:

<div data-monster-attributes="id static:myid, class static:myclass">hello</div>

Vanishing Acts: Element Removal

With data-monster-remove, elements disappear from the DOM, a reminder of the impermanence of content in the dynamic web era:

<div data-monster-remove></div>

The Conjurer's Trick: Dynamic Element Insertion

data-monster-insert reveals the conjurer's trick, materializing elements from thin air (or data), showcasing the templating system's strongest feature:

<ol data-monster-insert="myid path:a"></ol>

The Two-Way Mirror: Data Binding for Input Elements

Monster introduces a two-way mirror with data-monster-bind, where input fields and data models reflect and influence each other:

<input type="text" data-monster-bind="path:a.b">

The Grand Library of Data Types

As we delve deeper into the enchanted forest, we uncover a grand library of data types, each with its own unique charm and function. From casting numeric spells with number to weaving complex structures with object, Monster Templating accommodates a diverse array of data types, ensuring your web applications are as dynamic and versatile as the world they inhabit.

Epilogue

Monster Templating doesn't reinvent web development, but it is a lightweight alternative. The real adventure lies in applying these principles to your projects to transform static HTML into living, breathing web applications that respond and evolve with your users' interactions.

https://monsterjs.org/

New version of Monster 3.55.0 released!

Volker Schukai — Wed, 29 Nov 2023 15:51:32 +0000

We're excited to announce the release of version 3.55.0 of our JavaScript HTML5 framework! This update introduces a host of improvements and new features aimed at enhancing the development experience and streamlining your workflow.

Key Updates:

ContextHelp Fixed: We've resolved issues in the ContextHelp feature, ensuring smoother and more intuitive assistance within the framework.

New Control Element: ContextError: This new addition allows for more robust error handling and improved user feedback mechanisms.

Default-Value by Translation: Simplifying localization, the

now seamlessly integrates translated default values.

Unique Configuration Key Generation: The generateUniqueConfigKey method has been refined. It no longer relies on hash values for keys, leading to more efficient configuration management.

Improved Collapse Functionality: The collapse functionality now calculates heights using clientHeight instead of scrollHeight, enhancing performance and accuracy.

Persistent Data Table Sorting: Enhancing user experience, the last sorting state in data tables is now saved, making data interaction more consistent and intuitive.

These updates represent our ongoing commitment to providing a robust and user-friendly development framework. We encourage you to explore these new features and improvements. Your feedback is invaluable to us, as it helps us to continuously refine and enhance Monster.

Feel free to share your thoughts and experiences with version 3.55.0.

Happy coding!

https://monsterjs.org/
https://dev.to/schukai/the-awakening-of-the-monster-53jk

The awakening of the monster

Volker Schukai — Sun, 05 Nov 2023 15:52:35 +0000

We are pleased to announce the latest development in our JavaScript project: the release of the latest Monster library (3.52).

This release marks an important milestone in the development of our web initiative by combining our previously separate components into a single, robust package.

A look at the past

In the past, you had to manage multiple dependencies within the @schukai ecosystem, such as @schukai/component-form and other individual packages.

While these modules served their purpose, they also introduced complexity when it came to version control, dependency management, and overall project coherence.

What's new in @schukai/monster?

The @schukai/monster library simplifies the development workflow by bringing all the high quality components you rely on under one roof.

What you can expect:

Unified code base: A single NPM package is managed, resulting in smoother updates and integrations.

Streamlined development: With everything in one place, you'll spend less time juggling packages and more time building great applications.

Improved performance: We've optimized internal dependencies and ensured that the unified library meets or exceeds each package's performance benchmarks.

Seamless integration: The transition to @schukai/monster has been made as seamless as possible, requiring minimal changes to existing projects.

To make the transition easier for you, we have created a comprehensive migration guide. Here are the main steps to get you started:

Refactor your import directives to reference @schukai/monster.

Follow the detailed instructions for any specific components that require additional migration steps.

Looking to the future

The release of @schukai/monster is more than just an update - it's a commitment to the future of development in our ecosystem. We will continue to support the library with regular updates, new features and improvements based on your feedback.

We invite you to use the power and simplicity of @schukai/monster in your next project. Stay tuned for more updates, and happy coding!

monsterjs.org/

The Digital Services Act package

Volker Schukai — Mon, 04 Sep 2023 20:22:17 +0000

The EU passes a new law that will affect developers not only in the EU, but worldwide.

The law provides for many mechanisms that are primarily intended to protect the rights of consumers. But I also see a lot of potential for abuse in this law.

I know that developers don't have that much to do with laws, but if you offer certain services or are responsible for implementing them, you also have to deal with that.

https://digital-strategy.ec.europa.eu/en/policies/digital-services-act-package

Have you heard about the set and what do you think?

Nothing gives you a reality check faster.

Volker Schukai — Mon, 14 Aug 2023 15:47:46 +0000

Do you know the feeling when you have been programming for half an eternity on a mega cool feature and you are totally excited because it has become so good? Then you show it to your partner/friend and the only answer is "ok".

Nothing will bring you back down to earth.

Have you experienced this too?

Share your experiences in the comments.

PS: Don't let it get you down, here on dev.to you can get some praise! just write about your new project! 😁

YAConfigLib - Dynamic Configurations in Go: Introducing Postprocessing Hooks

Volker Schukai — Mon, 14 Aug 2023 15:40:14 +0000

Hey Gophers! 🚀

Do you struggle with configuration files in different formats like JSON, YAML or TOML in your Go applications? If yes, then you appreciate the value of a robust configuration management library.

Today we released a brand new feature in our configuration library.

We present: Postprocessing Hooks! 🌟

Imagine, you can not only read configurations in different formats, but now you can also define hooks that are triggered directly when a configuration change is made. Previously, you could also solve this via ChangeHooks, but these ran in their own Go routine.

The decisive advantage for tasks such as

Changing paths based on new configurations.
Building new structures after loading configurations.
Integrating real-time responses to dynamic configurations into your application.

Why should you try the new feature of our configuration library?

Flexibility: read and manage configurations in YAML, TOML and JSON.
Reactivity: Real-time actions based on dynamic configuration changes.
Powerful: Efficient handling without the overhead of additional routines.

We are convinced that after your first experience with Postprocessing Hooks, you will wonder how you ever got along without it!

Try it out, share your feedback and let's improve dynamic configurations in Go together!

Stay tuned for more exciting updates. Have a great time programming! 🎉

https://gitlab.schukai.com/oss/libraries/go/application/configuration