mastodon.ar.al is one of the many independent Mastodon servers you can use to participate in the fediverse.
This is my personal fediverse server.

Administered by:

Server stats:

1
active users

#eventModel

0 posts0 participants0 posts today
Aral Balkan<p>New Kitten Release 🥳</p><p><a href="https://kitten.small-web.org" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>(Run `kitten update` to update your dev machines. Production machines will automatically update in a couple of hours.)</p><p>• You can now add a generic script block to your markdown pages (see <a href="https://mastodon.ar.al/@aral/114432417394114105" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">mastodon.ar.al/@aral/114432417</span><span class="invisible">394114105</span></a>)</p><p>• Markdown pages can now be `KittenPage` instances and attach `KittenComponent` instances (so you get a full server-side component hierarchy with an event-based workflow; ideal for authenticated pages where you can be use only the author of the page will be accessing them and thus the additional memory and processing overhead are not issues. Isn’t the Small Web great? Only having instances of one makes it possible to optimise so many things for the human experience instead of vertical scale of the data farming machine.)</p><p>• Two new examples showcase the new features: <a href="https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/markdown-script-simple-components" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/examples/streaming-html/markdown-script-simple-components</span></a> and <a href="https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/markdown-kitten-components" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/examples/streaming-html/markdown-kitten-components</span></a></p><p>• Attributes with object values are no longer serialised into the DOM (but your components’ render functions will continue to receive them, of course.) This is because only string values make sense for attributes in the context of the HTML DOM. (You can still, of course, have stringified representations of objects in attributes, as used by the `data` attribute to pass data from nodes to event handers on the server.)</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="tag">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="tag">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="tag">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/kittenRelease" class="mention hashtag" rel="tag">#<span>kittenRelease</span></a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="tag">#<span>markdown</span></a> <a href="https://mastodon.ar.al/tags/scripting" class="mention hashtag" rel="tag">#<span>scripting</span></a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="tag">#<span>OOP</span></a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="tag">#<span>eventModel</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a></p>
Aral Balkan<p>New Kitten update</p><p><a href="https://kitten.small-web.org" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>• Added `remove()` method to kitten.Component class. Use this when working with live pages and components and you want to remove a component from the page (or its parent). It will handle removing event listeners for you so you don’t end up with any memory leaks.</p><p>• Improved `update()` method so it similarly removes listeners on child components before updating the component itself in case you have class-based child components that will be reinstantiated on render.</p><p>• Updated the `send()` methods on `page.everyone` and `page.everyoneElse` so you can pass a swap target to insert the element being streamed to the page before, after, asFirstChildOf, or asLastChildOf another. (This was already there for the page.send() but now the two broadcast objects have the same consistent interface.</p><p>The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.</p><p>(Remember that the new class and event-based page and component model is still experimental and largely undocumented and fully backwards compatible with the classic functional way of authoring your page routes and components.)</p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="tag">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="tag">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="tag">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="tag">#<span>OOP</span></a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="tag">#<span>eventModel</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="tag">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="tag">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="tag">#<span>WebSockets</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="tag">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="tag">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/Javascript" class="mention hashtag" rel="tag">#<span>Javascript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a></p>
Aral Balkan<p>A quick demonstration of using the State: Overview page in Kitten’s¹ settings while developing to keep an eye on your event and event listener counts to avoid memory leaks.</p><p>Notice how the events and listeners counts change as I navigate between the People and Settings pages in my Place² node and that they are consistent. If they were rising as I navigated back and forth I’d know I had a memory leak somewhere.</p><p>If you use Kitten’s built-in features (e.g., the `addEventHandler()` method on your `kitten.Component` subclasses, Kitten will handle adding and removing listeners for you automatically during your component’s lifecycle. You can also do so manually in your component’s automatically-called `onConnect()` and `onDisconnect()` event handlers.</p><p>This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.</p><p><a href="https://vimeo.com/1050714714" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">vimeo.com/1050714714</span><span class="invisible"></span></a></p><p>¹ <a href="https://kitten.small-web.org" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a><br />² Place is in early development at the moment (<a href="https://codeberg.org/place/app" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">codeberg.org/place/app</span><span class="invisible"></span></a>)</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="tag">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="tag">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="tag">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/demo" class="mention hashtag" rel="tag">#<span>demo</span></a> <a href="https://mastodon.ar.al/tags/developerExperience" class="mention hashtag" rel="tag">#<span>developerExperience</span></a> <a href="https://mastodon.ar.al/tags/developerTools" class="mention hashtag" rel="tag">#<span>developerTools</span></a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="tag">#<span>design</span></a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="tag">#<span>eventModel</span></a> <a href="https://mastodon.ar.al/tags/events" class="mention hashtag" rel="tag">#<span>events</span></a> <a href="https://mastodon.ar.al/tags/memory" class="mention hashtag" rel="tag">#<span>memory</span></a> <a href="https://mastodon.ar.al/tags/memoryLeaks" class="mention hashtag" rel="tag">#<span>memoryLeaks</span></a> <a href="https://mastodon.ar.al/tags/observerPattern" class="mention hashtag" rel="tag">#<span>observerPattern</span></a> <a href="https://mastodon.ar.al/tags/listeners" class="mention hashtag" rel="tag">#<span>listeners</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="tag">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="tag">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="tag">#<span>server</span></a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="tag">#<span>platform</span></a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="tag">#<span>framework</span></a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="tag">#<span>WebSockets</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="tag">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="tag">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="tag">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/place" class="mention hashtag" rel="tag">#<span>place</span></a> <a href="https://mastodon.ar.al/tags/peerToPeer" class="mention hashtag" rel="tag">#<span>peerToPeer</span></a> <a href="https://mastodon.ar.al/tags/peerToPeerWeb" class="mention hashtag" rel="tag">#<span>peerToPeerWeb</span></a></p>
Aral Balkan<p>New Kitten¹ update</p><p>Experimental:</p><p>• Adds `data` property to Kitten components</p><p>• Adds swap target to `page.send` so you can have an element added before, after, as first child of, or as last child of another (this is syntactic sugar over htmx and works around some of the complexities with out-of-band swaps in htmx, especially when streaming table rows to tables).</p><p>Also, check out the latest live page and page events state view in Kitten’s Settings (every Kitten app has this settings view).</p><p><a href="https://vimeo.com/1050348456" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">vimeo.com/1050348456</span><span class="invisible"></span></a></p><p>¹ <a href="https://kitten.small-web.org" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="tag">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="tag">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="tag">#<span>OOP</span></a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="tag">#<span>eventModel</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="tag">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/liveComponents" class="mention hashtag" rel="tag">#<span>liveComponents</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="tag">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/RPC" class="mention hashtag" rel="tag">#<span>RPC</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="tag">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="tag">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="tag">#<span>framework</span></a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="tag">#<span>server</span></a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="tag">#<span>platform</span></a></p>