Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mathstodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance for maths people. We have LaTeX rendering in the web interface!

Administered by:

Server stats:

2.7K
active users

mathstodon.xyz: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

#websockets

2 posts2 participants0 posts today
Public
Stuart Longland (VK4MSL)

Today I learned…

1. there's a card game where you complete a task from Unix pipe commands: punkx.org/unix-pipe-game/ (via mamot.fr/@bearstech/1142758430)
2. there's a JavaScript x86 machine emulator so you can play that game without needing a real computer around: bellard.org/jslinux/tech.html
3. that JS VM gets network connectivity because someone decided to make a websocket-based VPN that passes Ethernet frames: benjamincburns.com/2013/11/10/

punkx.orgThe UNIX Pipe Card Game
#Unix#JavaScript#Websockets
Public
Aral Balkan

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:💕

#Kitten#SmallWeb#SmallTech
Public *
Aral Balkan

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
Public
DSLC Videos

From the @DSLC :rstats:​chives:

:rstats: "Web APIs with R: Find APIs & Communicate with other types of APIs" youtu.be/hDfrbKOMuyU #API #APIs #RStats #graphql #websockets #gRPC

:rstats: "Bayes Rules! MCMC under the Hood" youtu.be/CCpL8IpUTEE #RStats

:rstats: "Probabilty for Data Science: Discrete Random Variables Exercises" youtu.be/xHclZpPPLwA #RStats

Visit dslc.video for hours of new #DataScience videos every week!

youtu.be- YouTubeEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
Public *
Aral Balkan

Pretty soon, you’re going to be able to view your live pages and the events on them in real time while developing Kitten apps.

The improved component model with support for class-based routes (and a server-side component hiearchy that lets you build well-encapsulated components and pages and work in an event-driven way) is coming along nicely and I’m back to writing Place¹ using it.

(In the GIF, you’re looking at Place’s profile settings page. Not shown here but those profile changes reflect in realtime on all open pages. The highlighted piece of code is what streams the event details to the browser.)

¹ codeberg.org/place/app

GIF
Screenshot of code. The showPageEvent method is highlighted. onAddToPage () { this.addEventHandler(kitten.events, `kittenPageEvent-${this._page.id}`, this.showPageEvent) } /** Stream new page event details to top of the events list, hiding the placeholder if necessary. @param {{ name: string, data: {HEADERS: any} }} event */ showPageEvent (event) { delete event.data.HEADERS // Hide placeholder if necessary. if (this.placeHolderIsVisible) { this.page.send(kitten.html` <tr id='placeholder-${this.id}' swap-target='delete'> `) this.placeHolderIsVisible = false } // Send the new event row with event details. this.page.send(kitten.html` <tbody id=${this.id} swap-target='afterend:#${this.id}'> <tr> <td>${event.name}</td> <td>${util.inspect(event.data)}</td> </tr> </tbody> `) } } class Pages extends kitten.Component { html() { // We could just display a “loading” message here // as we’re going to refresh the list at onConnect(), // but given how fast it all happens, we might was well // send the whole list instead of having an odd flash. const pages = Object.values(kitten.pages)
#Kitten#StreamingHTML#SmallWeb
Public
Aral Balkan

Feeling more like myself today after getting my ass kicked by this bug for the past few weeks and I’m finally making progress on improving Kitten’s¹ component model.

Soon, you’ll be able to implement page event handlers in an even simpler way than before. Is your connected DOM element named `pixel`? Then export an event handler called `onPixel()` on your page route and it’ll get called when that element triggers its event.

And there’s so much more coming, including a class-based page and component model with DOM-style event bubbling on the server. This should really let you make the most of the Streaming HTML² workflow in Kitten by writing event-driven GUI-like code but for a web app without really caring about the client/server separation.

Need to update the examples, test, test, test, and update docs but this had me stumped for a while now with several false starts and I feel this implementation might just be it 🤞

:kitten: 💕

¹ kitten.small-web.org
² kitten.small-web.org/tutorials

Screenshot of code. Highlighted section: /** @param {Data} data */ const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1 /** @param {Data} data */ export function onPixel (data) { if (!isValid(data)) return rows[data.rowIndex][data.columnIndex]++ if (rows[data.rowIndex][data.columnIndex] === colours.length) { rows[data.rowIndex][data.columnIndex] = 0 } this.everyone.send(kitten.html` <${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} /> `) } const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) => kitten.html` <button id='pixel-${rowIndex}-${columnIndex}' aria-label='pixel-${rowIndex}-${columnIndex}' name='pixel' style='
#Kitten#SmallWeb#hypermedia
Public
Raúl Caro Pastorino

Raspberry Pi Pico Servidor Websockets

En este vídeo explico como podemos crear un servidor websockets con nuestra raspberry pi pico con el cuál podemos conectar desde clientes como puede ser directamente una aplicación de escritorio o web para recibir datos JSON.

youtu.be/U4ikeck1NIo

gitlab.com/raupulus/rpi-pico-s
github.com/raupulus/rpi-pico-s

youtu.be- YouTubeEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
#websocket#websockets#raspberry
Public *
Gene Boggs

Guess I'm striking out on making my #Django chess game use #Websockets. There are a number of write-ups by people who seem to have done it... I've tried a number of things based on them. And unfortunately, they are all bewildering to me.

If any kind soul would be willing to peek, my "non-websocket", but totally functional project is github.com/ology/django-chess- to see how it can be refactored? I will pay you.

Basically I make a JS post like this, for each move:

github.com/ology/django-chess-

Help? :)

Interactively visualize chess piece threat and protection status - ology/django-chess-inspector
GitHubGitHub - ology/django-chess-inspector: Interactively visualize chess piece threat and protection statusInteractively visualize chess piece threat and protection status - ology/django-chess-inspector
SearchLive feeds
About