dlesieur, to webdev
@dlesieur@fosstodon.org avatar

Can't recommend enough the Hypermedia Systems ebook to web developers. Not only a great resource for learning and "getting" #htmx, and acquiring key best practices for using it, but it also makes the case for the classic #hypermedia system architecture, which has been somewhat disregarded over the last decade or two. Should be a worthwhile read, regardless of the framework or app architecture you intend to use.
https://hypermedia.systems/ #webdev #html

decentral1se, to random
@decentral1se@varia.zone avatar

anyone using #htmx and have a take on it? seems pretty cool tbh after a surface level browse https://htmx.org

aral,
@aral@mastodon.ar.al avatar

@decentral1se 👍

PS. Kitten has first-class support for it and it makes Kitten’s Streaming HTML workflow possible:

https://ar.al/2024/03/08/streaming-html/

#htmx #Kitten #SmallWeb #hypermedia

matthew, to webdev
@matthew@opinuendo.com avatar

REST APIs ≠ JSON over HTTP! HTMX brings back true REST with hypermedia. Disappointed with your SPA complexity? Say goodbye to consider giving a try. ➡️ https://netapinotes.com/tired-of-javascript-fatige-htmx-revives-restful-apis/

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

Minor Kitten¹ update: Even if your page routes now return nothing (e.g., null, undefined, empty string), a proper page will be rendered that includes the development-time WebSocket that powers hot reloads.

So the shortest valid page route is now:

export default () => ''  

And, more importantly, e.g.,

export default () => kitten.html`  
 <page css>  
`

Will also render.

:kitten:💕

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

#Kitten #SmallWeb #HTML #CSS #JavaScript #htmx #hypermedia #web #dev
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 #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

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

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

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

Kitten update: session IDs now available in the request.session objects you get in your routes.

Kitten lets you persist arbitrary data in session objects to make it easy to work with sessions but you cannot store custom objects (instances of custom classes) as Kitten’s default database is not aware of custom classes in your application. Now, keyed to the session id, you can store custom objects in your app’s own database.

https://codeberg.org/kitten/app#sessions

:kitten: 💕

#Kitten #SmallWeb #sessions

aral,
@aral@mastodon.ar.al avatar

(The use case for this is pretty neat: keep your interface state in custom state class instances persisted in session objects and, using the Streaming HTML workflow*, send back pieces of the interface that take those state objects as their only prop. Quite a neat separation of concerns and state is maintained only on the server in those objects.)

#Kitten #SmallWeb #state #sessions #StreamingHTML #web #dev #html #JavaScript #NodeJS #WebSockets #htmx #hypermedia

schizanon, to webdev
@schizanon@mas.to avatar
schizanon, to webdev
@schizanon@mas.to avatar

HTMX is just the "back to the land" movement, but for web hippies.

schizanon, (edited ) to webdev
@schizanon@mas.to avatar

If there was an element that changes it's content when users interact with other elements on the page, what name would it have?

PLEASE NOTE: I am not suggesting that this element needs to exist; I am only asking what it would be called. I'm building a CustomElement, I just want it to have a name that makes sense.

Vote and suggest others in replies. Please boost for reach!

schizanon, (edited )
@schizanon@mas.to avatar

Round 3:

An <HTML> element that updates with the result of an HTTP request that some other element on the page made.

Links and forms inside it may be changed so that they only update this element instead of the whole page; similarly to Hotwire: TurboFrames https://turbo.hotwired.dev/handbook/frames

schizanon, to javascript
@schizanon@mas.to avatar
changelog, to Podcast
@changelog@changelog.social avatar

"The only reason that Google works is because the web is built on the hypermedia principle.” – Kris Brandow

🎥 https://youtu.be/2WMcZ7KYa34

schizanon, to webdev
@schizanon@mas.to avatar

HTMX: when you want the difficulty of not using JavaScript without the benefits of not using JavaScript.

#webDev #htmx #javaScript #html #hypermedia #hateoas

jbzfn, to random
@jbzfn@mastodon.social avatar

🆚 Hypermedia APIs vs. Data APIs
ᐅ HTMX

「 This is a good thing: the industry should question REST-ful ideas in the Data API world and begin looking at older client-server technologies that did a better job of servicing that particular network architecture, leaving REST instead to the network architecture that it was coined to describe: hypermedia APIs 」

https://htmx.org/essays/hypermedia-apis-vs-data-apis/

#api #restful #restfulness #hypermedia

morganm, to random
@morganm@subdued.social avatar

Got a Christmas gift for myself sorted... #HTMX #hypermedia

schizanon, to webdev
@schizanon@mas.to avatar

> Not being content with alienating only the general purpose #JSON #API enthusiasts, let me now proceed to also alienate my erstwhile #hypermedia enthusiast allies by saying:

> I don’t think #contentNegotiation is typically the right approach to returning both JSON and #HTML for most applications.

https://htmx.org/essays/why-tend-not-to-use-content-negotiation/

#webDev #javaScript #REST #htmx #http

schizanon, to ipfs
@schizanon@mas.to avatar

#Mintter #Hypermedia is an open system, built on #IPFS that allows communities to collaborate on content that is structured and deeply linked. All content in the system is cryptographically signed, versioned, and made permanent with IPFS.

https://youtu.be/K3U6A4sgKo4?si=pHqCGzP8MKLKO-w6

schizanon, to react
@schizanon@mas.to avatar
schizanon, to Software
@schizanon@mas.to avatar

#htmx needs a build system so things get over complicated so people can feel they are real #software #engineers.

#webDev #html #javaScript #hypermedia #webpack #rollup #bun #vite

schizanon, to webdev
@schizanon@mas.to avatar

As much as I dig #htmx, I just can't get with #hyperscript

There's WAY too much going on in this DSL

https://hyperscript.org/

#webDev #webDevelopment #hypermedia #html #dom #web

schizanon, (edited ) to Dom
@schizanon@mas.to avatar

My intuition tells me that 's hx-swap attr will suffice for many dynamic behaviors but there's a point where the abstractions will start to leak and you'll want full control over again.

schizanon, to webdev
@schizanon@mas.to avatar

Thinking about #htmx:

👍 all the #HTML gets generated on the server; the source of truth.

👎 every #DOM manipulation requires a network request.

👍 #declarative easier to reason about.

👎 app behavior declared in bespoke attribute DSL; harder to reason about.

👍 no need to duplicate #backend state on the #frontend.

👎 no offline support.

#webDev #web #webDevelopment #hypermedia #hateoas

schizanon, to AdobePhotoshop
@schizanon@mas.to avatar

#HTMX is the future; somebody should #hireMe to build a #hypermedia #web #app for them!

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