#reactiveui

@ortussolutions.bsky.social

6 months ago

🎓 CBWire Workshop: Team Packs
Level up your team with our hands-on CBWire workshop! Build modern, reactive UIs with CFML + Alpine.js and boost your dev workflow.

🎟️ Team packs available — register now: workshop-reactive-uis-cbwire.eventbrite.com

#CBWire #Workshop #CFML #ReactiveUI #OrtusSolutions

0 0 0 0

Ortus Solutions

@ortussolutions.bsky.social

6 months ago

📢 CBWire Reactive UIs Workshop
Only 5 spots left for this exclusive 2-day hands-on workshop led by Luis Majano and Grant Copley—coming right after Adobe ColdFusion Summit 2025.

🔗 Register now: workshop-reactive-uis-cbwire.eventbrite.com

#CBWire #CFML #ReactiveUI #ColdBox #DevWorkshop

0 0 0 0

Ortus Solutions

@ortussolutions.bsky.social

7 months ago

🚀 Moderniza tus apps ColdBox sin JavaScript con CBWire. Crea interfaces reactivas solo con ColdBox + CFML.

👉 Blog: bit.ly/3GRY2Aq
🎟️ Regístrate en nuestro workshop: workshop-reactive-uis-cbwire.eventbrite.com

#CBWire #ColdBox #CFML #ReactiveUI #OrtusSolutions

2 1 0 0

Ortus Solutions

@ortussolutions.bsky.social

8 months ago

Join us for an exclusive workshop where you'll discover how to create modern, dynamic applications using CBWIRE, the powerful ColdBox module inspired by Livewire.

Register now: workshop-reactive-uis-cbwire.eventbrite.com

#ColdBox #CBWIRE #ReactiveUI #WebDevelopment #CFML #BoxLang

2 1 0 0

Wiesław Šoltés

@wieslawsoltes.bsky.social

9 months ago

#ReactiveUI navigation using #Xaml #Behaviors for #Avalonia #dotnet UI framework github.com/wieslawsolte...

0 0 0 0

Jan Andrle

@jaandrle.fosstodon.org.ap.brid.gy

11 months ago

// Simple Hello World with reactive elements import { el } from "deka-dom-el"; import { S } from "deka-dom-el/signals"; function HelloWorld() { // Create a count signal with an initial value of 0 const count = S(0); // Create UI that automatically updates when signals change return el().append( el("h2", S(() => `Hello World ${count.get()} times!`)), // Update state on button click el("button", { textContent: "Increment", onclick: () => count.set(count.get() + 1) }), ); } // Add to the page document.body.append( el(HelloWorld), );

// (Derived) signals import { el } from "deka-dom-el"; import { S } from "deka-dom-el/signals"; // Create a signal and a derived computation const count = S(0); const doubled = S(() => count.get() * 2); const isEven = S(() => count.get() % 2 === 0); document.body.append( // Dynamic text content that updates automatically el("p", { textContent: S(() => `Count: ${count.get()}`) }), el("p", { textContent: S(() => `Doubled: ${doubled.get()}`) }), // Conditional elements based on signal state S.el(isEven, even => even ? el("p", "Even number!") : el("p", "Odd number!") ), // Simple button to update state el("button", { textContent: "+1", onclick: () => count.set(count.get() + 1) }) );

// Event Handling and Delegation import { el, on, scope, dispatchEvent } from "deka-dom-el"; function TodoItem({ textContent, onDelete }) { const { host }= scope; const dispatchEdit = dispatchEvent("todo:edit", host); // Lifecycle events (for example for cleanup) host( on.disconnected(() => { }), ); return el("li").append( // <= host element el("span", { textContent }), el("button", "Edit", on("click", () => dispatchEdit("edited"))), el("button", "Delete", on("click", () => onDelete())), ); } // Using the component with event handlers document.body.append( el("ul").append( el(TodoItem, { textContent: "Learn dd<el>", onDelete: () => confirm("Are you sure?") }, on("todo:edit", text => alert(`Editing: ${text}`)) ), ) );

“Vanilla JavaScript for flavouring, a full-fledged feast for large projects.”

Meet dd<el> – the Vanilla JavaScript library for building reactive UIs with syntax close to native DOM! No build step required, just native DOM with superpowers. ✨ #ReactiveUI based […]

[Original post on fosstodon.org]

2 1 0 0