New Kitten release

• You can now use key paths in the names of your client-side live components and these will automatically be transformed into object hierarchies on the server for you.¹

• Self heals zombie live pages (see Streaming HTML workflow²) if they return to life due to client-side browser cache.³

• Removes htmx⁴ headers from `data` property into separate `header` property in Kitten Page events and the data your Kitten Page message handlers receive.

• Automatically passes references to the live page object (if any) and the request and response objects to the layout templates of Markdown pages⁵ (so you can, for example, check if `request.session.authenticated`⁶ is true from the your layout template and customise the layout accordingly).

kitten.small-web.org

Enjoy!

💕

¹ e.g., See codeberg.org/small-tech/site/s… (markup) and codeberg.org/small-tech/site/s… (handler) and codeberg.org/small-tech/site/s… (model class method).

² See Streaming HTML tutorial: kitten.small-web.org/tutorials… (There’s actually more to it now but I haven’t had a chance to document the new class-based and event-driven live page workflow yet. It’s experimental but working very well for me so far so I will do so shortly.)

³ When a person leaves a live/connected page (a page connected to its default web socket), we clean up and remove that live page from memory. However, browsers being what they are, cache the page on the client. If a person uses the back/forward buttons to return to the page, the browser will serve the cached source from memory, which has the old page ID, for the page that no longer exists in Kitten’s memory. So now we have a problem. The only way to recover from this is to tell the page to reload itself. So we accept the WebSocket connection, send a command to the page for it to reload itself, and then close the socket. That makes the stale page self heal by replacing itself with a fresh one. Yay, go us!

⁴ HTMX: htmx.org

⁵ Kitten Markdown pages reference: kitten.small-web.org/reference…

⁶ See Session tutorial: kitten.small-web.org/tutorials…

#Kitten #SmallWeb #SmallTech #StreamingHTML #WebSocket #HTMX #Markdown #sessions #data #web #dev #JavaScript #HTML

I have looked everywhere, but I can't find this post from 11 February! It isn't showing up in my Sent timeline. So if it is on my profile, and/or if you have seen it, I apologise.

I am not closing my account here, but I need to try something other than Friendica, due to accessibility issues. I am considering Akkoma, but am open to other networks if they are compatible with Mastodon.

I am seeking an instance with the following specifications.

Accessible interface (I use a screen reader called NVDA). If it uses Semantic html and isn't cluttered, that's a great start. I would prefer it to be compatible with Mastodon so that I could also use TweeseCake as a client. I need to easily be able to access things such as notifications, follow requests, my own posts, to be able to search for tags, people, my posts etc.

Posting limit of 5,000 characters or more (more preferred.

Ability to pin, unpin, edit, and delete posts.

Ability to filter content, so that I don't see certain words or phrases. (This doesn't work with TweeseCake, so it's not as important as the rest, unless the site is so accessible that I can use it often.)

Ability to select between seeing all posts of someone or only some, and to choose whether to let someone follow me without my seeing his posts or to follow him completely. (Friend versus Subscriber on Friendica).

Extensive profile with keywords. (Keywords may be a Friendica feature, so can be skipped.)

Most people write in English and are not politically, technologically, or gaming obsessed. No radicals of any pursuasion. (the English bit is just to help me find friends on my particular instance.)

Free speech (nothing illegal or homophobic). I personally avoid obscenities.)

If such an instance exists, please tell me. I found https://akkoma.fediverse.observer/list[7] but that's just a list with no real information about each instance. I would have to go through over 400 of them, choose the ones from the UK, Canada, and America (they're the most likely to have English instances), then go through those to see if they meet my requirements, but that's ridiculous.

I am not a programmer, so please don't suggest I start my own instance or join a network that is not set up with a webpage and/or to accept a client, as I know nothing about these things other than that they run on Linux and I'm a Windows user. I just want something that works. Also, if there are any demonstration instances, please let me know. I heard of one where accounts only lasted five days, but it seems to be gone.

#accessibility #Akkoma #blind #Fediverse #Friendica #Glitchsoc #html #instances #NVDA #Mastodon #screenreaders #TweeseCake #Windows

I tried to post this to the Friendica support forum, but it kept timing out when I entered my information. I am now attempting to subscribe to their e-mail list. However, I thought I would write this here so that those who know coding, etc. might be able to offer a solution, or at least, to pass this on to the developers.

I joined Friendica in October of 2024, when Facebook decided to shut down their Basic Mobile site (not app). I am totally blind, and their main page is a nightmare to use with a screen readre (NVDA in my case). I chose Friendica because of the huge character limit, the ability to edit and delete posts, local posting, extensive profiles with keywords, and the ability to connect with all sorts of accounts in the Fediverse. For the most part, I am enjoying my time here. However, I am noticing a lot of inaccessibility on the Friendica page. I am not a programmer, but I'm guessing this is at the core of the software and is not due to the instance I'm using (friendica.world). I am also guessing that the page is not written in HTML5 and does not follow WCAG guidelines, though I may be wrong about that. If not, I strongly urge the developers to review them and implement them if possible. If so, perhaps, some changes can still be made that would make this a more screen reader-friendly site. Note that I tried this with Firefox and Supermium (a direct fork of Chrome).

Mostly, I use TweeseCake to access the site, but there are some things I can't do with that client. All of the following refer to the site itself.

1. There is a list of links at the top of the page that acts like a menu. This causes many problems while trying to perform basic tasks, particularly editing posts and handling notifications. I can't always activate said links/menu either.

1A. I can't stress how frustrating editing posts is. It sometimes takes over ten minutes. The "edit" option is a link/menu, and it can only be found via another menu. Once I finally find and activate it, I hear the sound indicating that I have entered focus Mode. Usually, this means that I am in an edit box and can type. However, in this case, I am taken back to the main page, as if I never entered the option to edit my post. Using e to try to find an edit box doesn't help, as it just sends me to the replies to different comments. So I am forced to find the post, and start all over again. The only way I can do this successfully is to try to tab through the links/menu at the top of the page (when it works), then through other posts, until, finally, I am placed in an edit box where I can type.

1B. When I go to the Notifications" link, I have to tab to "Mark all System Notifications as Seen". This isn't even a regular link, as I can't copy and paste the text from it. Once I tab to and out of that, I can then read my notifications. But here is what I have to do if I want to see follow requests.
1. Try to get the notifications link to work, then click on it.
2. Tab to marking notifications.
3. Perform a search for the word follow.
4. Click on the link of the notification that someone wants to follow me. I open this in a new window, to try to keep the original one available.
5. Make my choice as to whether to approve that notification, then close that window.
6. Return to the main window. Only now, I am not where I left off. Instead, I am placed back at the beginning of the page and the Notifications menu is not open.
7. Repeat steps 1 through 3.
Ideally, I should be able to go to a normal notifications link, perform steps 3 through 5, then return back to the link, and perform steps 3 through 5 again, as many times as necessary, without having to repeat 1 through 3.

1. I can't just go to the site and enter an edit box to post. I must go through a menu to find the link to do so. Yet there is an edit box for searching for content, tags, etc.
2. Some pinned posts don't always read properly. I can see my name, when I posted, that it's pinned, a public message, tags (if applicable), buttons for resharing, etc., and the number of comments. But I cannot simply read the post itself. ""Comments" is also a button, not a link. Even when I expand them, I still can't see my post, and finding the button again to close them takes a lot of time, as posts also have their own buttons. Note that unpinned posts are read properly.
3. While the process of editing my profile is completely accessible, finding the edit option might be slightly confusing for new users, as it requires entering yet another link/menu, this time with the user name as the title..
4. If I go to a profile of someone not on Friendica (usually Mastodon) and wish to reply to a post, after I enter my credentials, it takes me back to my profile, not to the relevant post. It only worked once.
5. The Friendica app for Windows is basically the site itself. I don't understand this at all.

If you want to see a truly accessible site, try this link. I don't work for them, though I do have an account there.

dreamwidth.org

Please, if any changes can be made, I urge you to do so. The site is otherwise a pleasure to use, but my frustration at not being able to easily perform such basic tasks is increasing.

#accessibility #blind #coding #Chrome #Developers #Dreamwidth #Facebook #fediverse #Firefox #Friendica #HTML #HTML5 #NVDA #ScreenReaders #TweeseCake #WCAG #Windows

New Kitten update

kitten.small-web.org

• 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.

• 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.

• 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.

The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.

(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.)

Enjoy!

💕

#Kitten #SmallWeb #SmallTech #OOP #eventModel #StreamingHTML #hypermedia #WebSockets #htmx #NodeJS #Javascript #HTML #CSS #web #dev

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.

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.

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.

This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.

vimeo.com/1050714714

¹ kitten.small-web.org
² Place is in early development at the moment (codeberg.org/place/app)

#Kitten #SmallWeb #SmallTech #demo #developerExperience #developerTools #design #eventModel #events #memory #memoryLeaks #observerPattern #listeners #web #dev #HTML #CSS #JavaScript #NodeJS #server #platform #framework #WebSockets #hypermedia #htmx #StreamingHTML #place #peerToPeer #peerToPeerWeb

Little preview video: Kitten’s improved component model

• Class-based page routes and components
• Object-oriented
• Event-based
• Seamless hypermedia-driven WebSocket-based event mapping and interface updates (Streaming HTML)
• A light server-side live component hierarchy with event bubbling
• Almost as if you’re building a desktop or mobile app instead of a web app…

… another authoring simplification made possible because on the Small Web – which is a peer-to-peer web – you build a web app/site as a tool for one person (the owner of the site/app) instead of as a tool for you to farm millions of people.

… still experimental ;)

vimeo.com/1049055406

Learn more about Kitten:

kitten.small-web.org

If you like what you see and want us to keep existing, we could definitely use your support:

small-tech.org/fund-us/

💕

#Kitten #SmallWeb #SmallTech #StreamingHTML #objectOriented #eventBased #hypermedia #htmx #WebSocket #HTML #JavaScript #CSS #NodeJS