anze3db, to random
@anze3db@fosstodon.org avatar

One thing that I'm missing with HTMX and Django is proper error handling.

By default HTMX swallows any response that is not a 2xx, which might leave your users hanging on an endless loading state.

Does anyone have a good solution for this that can be reused between projects?

video/mp4

aral,
@aral@mastodon.ar.al avatar

Also, not immediately relevant to your current issue but something that might be worth considering for the future: using the htmx websocket extension, you can basically implement a streaming HTML approach (example using Kitten: https://ar.al/2024/03/08/streaming-html/) where you can just stream errors to the page as they happen.

(2/2)

aral, to SmallWeb
@aral@mastodon.ar.al avatar
aral, to SmallWeb
@aral@mastodon.ar.al avatar

So given it’s Saturday night, I thought I’d have a little fun with Kitten and make a tiny collaborative drawing toy.

You have a 20×20 grid and only black and white to draw with and everyone shares the same canvas.

https://draw-together.small-web.org

Have fun + looking forward to seeing what we all, umm, draw together.

:kitten:💕

PS. It took about 60 lines of code.

View source: https://codeberg.org/aral/draw-together

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

aral,
@aral@mastodon.ar.al avatar

I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)

https://codeberg.org/aral/draw-together#draw-together

#DrawTogether #Kitten #SmallWeb #web #dev #StreamingHTML #html #css #JavaScript #htmx #WebSocket

aral, to SmallWeb
@aral@mastodon.ar.al avatar

🍞 Kitten toast, anyone?

A fifteen-second demo of how you can create a toast message in 42 lines of code¹ without writing any client-side JavaScript using Streaming HTML² in Kitten³.

Video:

https://vimeo.com/925828491

Source code:

https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Enjoy!

:kitten: 💕

¹ Almost half of which is CSS.
² https://ar.al/2024/03/08/streaming-html/
³ https://codeberg.org/kitten/app

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

aral,
@aral@mastodon.ar.al avatar

PS. Those 42 lines are all the source code.

That’s it.

No scaffolding. No npm create this-or-that.

  1. Create a folder called toast.
  2. Add those 42 lines of code to a file called index.page.js in that folder.
  3. Run kitten¹.

Now hit https://localhost in your browser and you will see the example running just like in the video in the first post.

:kitten: 💕

¹ https://codeberg.org/kitten/app

Kitten

aral,
@aral@mastodon.ar.al avatar

Update: I forgot to make the toast message div into an aria-live region so toast messages are read out when they arrive for people who use screen readers.

Now fixed.

Source code: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Thanks to @hi_mayank for catching that one. Appreciate it!

:kitten: 💕

kuketzblog, to random German
@kuketzblog@social.tchncs.de avatar

Teste seit heute die Version von (Signal Fork). Benachrichtigung über neue Nachrichten erfolgt via . Bereits nach einem Tag Test lässt sich sagen: Akku-Verbrauch ist geringer als mit bei Signal.

https://github.com/mollyim/mollyim-android-unifiedpush

aral, to random
@aral@mastodon.ar.al avatar
purelinux, to php German
@purelinux@social.tchncs.de avatar
paulox, to python
@paulox@fosstodon.org avatar
aral, to SmallWeb
@aral@mastodon.ar.al avatar

I’m really enjoying the new Streaming HTML workflow in Kitten…

In this 15 second video, I cycle through the options in a selection box using the keyboard and the rest of the interface updates in response.

✨ There’s no custom client-side JavaScript making it happen. ✨

It’s all server side.

The changes stream to the client as HTML and are morphed into place via idiomorph.

So simple and maintainable.

💕

https://vimeo.com/908339606

aral,
@aral@mastodon.ar.al avatar

Right, is now integrated into and enjoys first-class support via the <page> tag like itself, the htmx extension, Alpine.js, and Water semantic library.

It’s auto-loaded for you if you expose onConnect() handlers in your pages when using the new workflow.

(You must still manually add htmx-swap-oob='morph' to elements you want to morph. I might add syntactic sugar for this later.)

¹ https://github.com/bigskysoftware/idiomorph/tree/main?tab=readme-ov-file#%EF%B8%8F-idiomorph

² https://codeberg.org/kitten/app

kubikpixel, to AdobePhotoshop
@kubikpixel@chaos.social avatar

deleted_by_author

  • Loading...
  • kubikpixel,
    @kubikpixel@chaos.social avatar

    🧵 …is the above based on the here? If so, it would certainly be something cool (pardon my ignorance). Do any of you know this and already use it?

    🧑‍💻 https://websockets.spec.whatwg.org

    aral, to SmallWeb
    @aral@mastodon.ar.al avatar

    Very excited about the latest feature/workflow I’m adding to Kitten. I call it… 🥁

    ✨ Streaming HTML ✨

    Implement back-end functionality and stream HTML updates to the client without writing any front-end JavaScript.

    Just give your forms names and listen for them in an onConnect() handler you export from your page. Kitten handles everything else – setting up a WebSocket route for you, mapping triggers to events, etc. – thanks to Kitten + magic 🪄

    aral,
    @aral@mastodon.ar.al avatar

    So the canonical example for any new web workflow appears to be a simple counter button.

    Here’s one showing you the new Streaming HTML workflow in Kitten¹.

    Note that the count is actually being persisted in the database (notice I turn the development server off and back on again mid demo).

    What you see in the video is all the code there is in the project.

    https://vimeo.com/907918005

    ¹ https://codeberg.org/kitten/app

    #Kitten #SmallWeb #StreamingHTML #web #dev #htmx #WebSocket #html #css #JavaScript

    aral,
    @aral@mastodon.ar.al avatar

    Right, this is now merged in main.

    Please consider the Streaming HTML workflow very experimental for the time being (as all of Kitten is, really, but this more so).

    There’s also still scant documentation but that will improve in the coming days. (I’ve added this demo to the readme.)

    https://codeberg.org/kitten/app#to-whet-your-appetite

    YurkshireLad, to javascript
    @YurkshireLad@mastodon.social avatar

    Weird. Trying to connect a Javascript websocket client to a Python-Tornado websocket server. The websocket is closed as soon as the connection is established, but I can't tell which side is the culprit or why it's happening.

    schizanon, to mastodon

    I want to build something and I need to say my plans out loud, but I don't have any friends let alone any that use or so I'm just gonna info dump here:

    #🦆 #🧵

    schizanon,

    Stretch goals may include:

    • creating a persistent that reads a user's timeline even when the client is closed so they don't miss posts.

    • allowing the user to create additional labels to make classifications other than "favorite"

    • including other factors such as "number of replies/boosts" or whether or not a post is a reply to a post you have favorited

    reconbot, to random
    @reconbot@toot.cafe avatar

    In 2023 the state of the api in browsers is silly af, you can't set headers on the initial connection but you can kind of set one so of course it's abused.

    K8s is basically using the subprotocol header to smuggle auth tokens and I love it.

    https://github.com/whatwg/websockets/issues/16#issuecomment-1705316320

    Of course people say "just send auth in a web socket frame" ignoring the prior art of everything else being request/response including preexisting auth solutions.

    Most people seem to embed auth tokens in a path param.

    sos, to random
    @sos@mastodon.gamedev.place avatar

    deleted_by_author

  • Loading...
  • fell,
    @fell@ma.fellr.net avatar

    @sos is the worst piece of library I have ever seen.

    I once wanted to make a teeny tiny tool that interfaced with a remote . And since I'm familiar with it, I decided to write it in C++. When looking for a library that can do and everyone recommended Boost.

    Yeah, I had to download 180 MB of source code(!) and spend several minutes building the damn thing just to integrate it into my single file program. It was so convoluted and complicated to use that I just gave up.

    On top of that the only promising part of Boost that I was actually interested in, Boost.UI, was removed from it years ago. Thanks for nothing.

    schizanon, to webdev

    How should you manage a connection in a Multi-page App? Say, one that needs to listen on all pages all the time like a chat widget?

    Do you connect in the main thread, and just reconnect on each page navigation?

    Or do you create the in a instead?

    raptor, to random
    schizanon, to AWS

    I fixed https://schizo.social's auth; had to index my with a composite primary key ( is an art)

    I'm a bit stumped about what to work on next.

    The load time for the timelines bothers me; it's still occasionally timing out just loading 20 toots from two servers. I feel like introducing a is my only choice, but I don't like the idea of adding client-side rendering.

    schizanon,

    Right now, when you visit schizo.social/timelines/home the server fetches from the API before rendering the page using @enhance_dev

    I like that the page comes down populated with content so there's no further delay, but there's still a significant delay from waiting on mastodon, so it kinda defeats the purpose.

    I could use enhance-element to render the toots on the client instead; either by making an request, or with a .

    schizanon, to random

    Y) use a ( supports these) new data as it arrive. If you're using supports you can also set up connections that stream new data from the origin servers in

    schizanon, (edited ) to webdev

    There's this problem that you encounter when you build a that depends on one or more data sources.

    Your user wants to see results right away. The data sources take an indeterminate amount of time to respond.

    The solutions are a shit sandwich.

    schizanon, (edited )

    B) send the user an empty shell. have the client establish a connection. build a of calls to make. process the queue retrying as necessary. insert results into a backend . Update the client with the socket connection.

    schizanon, to AWS

    I've already hit 's default 5s timeout fetching just two timelines with https://schizo.social. I'm going to need a more clever solution for making multiple API requests to build a single page. Maybe prefetching, maybe spawning a background process and updating the UI via a when they complete? I'm trying to keep it as client-side free as I can, but waiting on multiple masto servers just isn't going to work...

  • All
  • Subscribed
  • Moderated
  • Favorites
  • anitta
  • InstantRegret
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • ethstaker
  • modclub
  • cisconetworking
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • megavids
  • provamag3
  • normalnudes
  • Leos
  • lostlight
  • All magazines