🌐 UIBUILDER v7.6 Development Progress

Share Your Nodes
1

Slow but steady progress on v7.6.

As usual, I've taken on a bigger task than first appreciated with the new uib-markweb node that will be the simplest way to create an entire, information heavy website with Node-RED. :rofl:

However, it is a fun project and I think will be highly useful to a lot of people. However, I've had to rewrite major sections of it several times already. Not least of which having to replace a Markdown-to-HTML library and having to learn how to create custom plugins for the new library that integrate with the data in markweb. Remembering that I am doing all of the conversion on the server not in the browser. Getting there though, it should be worth the wait.

Also as usual, working on one thing triggers the need for updates (and bug-fixes :cough:) in other areas. Today's side-track has resulted in a very nice new feature - the addition of uib-var attributes that you can add to any HMTL element. This rounds out the existing uib-topic attribute which is certainly the easiest way to dynamically update on-screen information from Node-RED.

The uib-var attribute will be more useful to anyone doing any front-end JavaScript processing. It is very similar in concept to the existing <uib-var> custom web component that is built-in.

Of course, improvements in any area demand better documentation and new examples. So we have 2 new examples:

  • Built-in Web Components

    Shows how to use the uibuilder client web components: <uib-meta>, <uib-var>, <apply-template>, and <uib-control>. These are all included in the main client library and do not need to be loaded separately.

  • Easy UI Updates

    Illustrates the use of the different ways to update the UI from Node-RED or your own front-end JavaScript. Includes examples of using the (new) uib-var and (existing) uib-topic custom HTML attributes, and the existing <uib-var> web component.

The addition of the uib-var attribute opens up a much better way to handle seamless updates for your markweb websites.

Tomorrow, it is back to restructuring the markweb code to make use of the new uibuilder capability for better and more dynamic seamless updates. Then back to a 3rd (or maybe 4th!) attempt at creating the perfect page/folder listing feature that will give you all of the control and flexibility you might be used to from tools like Hugo or Astro - BUT also having everything dynamically updating! So if a page changes, so will your index list and menus, automatically!

5 Likes