SFBA.social

7 posts6 participants1 post today

Aral BalkanNew Kitten release 🎉<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>• New: Lovely new icons¹ and new callouts in Kitten Settings²• New: Markdown now supports attributes and bracketed spans³• New: client-side `kitten` global with `trigger` function for triggering events on the server from the client. (Useful when streaming client-side JavaScript when using Kitten’s Streaming HTML⁴ workflow. e.g., when you have to use a client-only web API like the Clipboard API but you want to keep all your logic on your server-side page.⁵)• Fixed: The bound render function returned by `KittenComponent` class’s `component` getter now correctly awaits asynchronous templates. (In Kitten, you don’t have to care whether your templates contain promises. Kitten handles all that for you.)Enjoy! :kitten:💕¹ <a href="https://kitten.small-web.org/reference/#icons" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/reference/#icons</a>² <a href="https://mastodon.ar.al/@aral/114381983893061099" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.ar.al/@aral/114381983893061099</a>³ <a href="https://kitten.small-web.org/reference/#markdown-support" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/reference/#markdown-support</a> (also see <a href="https://mastodon.ar.al/@aral/114381462302862256" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.ar.al/@aral/114381462302862256</a>)⁴ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a>⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33</a> Of course, you don’t have to use this and you can just write client-side JavaScript or use the built-in Alpine.js integration. e.g., how I do it on the (older) settings/identity page: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#markdown</a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#icons</a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PhosphorIcons</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a>

Scott GallowayNew blog post: Using SweetAlert2Alert2 loading indicator for HTMX indicators How to replace hx-indicator behaviour with the nice Sweet <a href="https://www.mostlylucid.net/blog/usingsweetalertforhxindicators" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.mostlylucid.net/blog/usingsweetalertforhxindicators</a> <a href="https://hachyderm.io/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://hachyderm.io/tags/sweetalert2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sweetalert2</a>

MarcQuick <a href="https://mamot.fr/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> question: I want to hx-disabled-elt to disable a form when in flight. targeting "this" doesn't work, each inputs/buttons/etc must be targeted directly. Currently I have hx-disabled-elt="find input, find textarea" but only the first input is disabled (as described by the documentation I must say). Thing is I have 4 inputs I want to disable in this form, do I really have to target each of them individually or is there a trick to disable them all at once? Edit: Yes: with a fieldset X)

dazfuller :rickwhoah:Okay, some more progress with the <a href="https://mstdn.social/tags/HTMX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTMX</a> app this morning.Implemented the middleware to handle <a href="https://mstdn.social/tags/Azure" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Azure</a> Entra based authentication, so the app is now secure. Only one issue is that the token it produces has an invalid key, so need to figure that out at some point. But I can get my claims and I need to be authentication to access. So it's good for now.

dazfuller :rickwhoah:Had a go at rewriting a small <a href="https://mstdn.social/tags/DotNet" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DotNet</a> Blazor app into a <a href="https://mstdn.social/tags/GoLang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GoLang</a> web app with <a href="https://mstdn.social/tags/HTMX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTMX</a> yesterday so I could learn.Had to rethink some of the way it’s put together to make it a bit smoother an experience, but it went really well and works really nicely. Going to keep on it so I have it feature complete with logging and auth

Jason Punyonadded some more examples to <a href="https://htmx-local.glitch.me" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://htmx-local.glitch.me</a> <a href="https://fosstodon.org/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a>

Adam Johnson :django: :python:<a href="https://fosstodon.org/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> tip:Use htmx.logAll() to log all htmx events to the console. Great for debugging which events are triggering or not!

Webdev WeeklyDatastar: Web Framework for the Future?<a href="https://chrismalek.me/posts/data-star-first-impressions/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://chrismalek.me/posts/data-star-first-impressions/</a>Discussions: <a href="https://discu.eu/q/https://chrismalek.me/posts/data-star-first-impressions/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://discu.eu/q/https://chrismalek.me/posts/data-star-first-impressions/</a><a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Scott GallowayNew blog articleShowing Toast and Swapping Content with HTMX (And ASP.NET Core)<a href="https://hachyderm.io/tags/aspnetcore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#aspnetcore</a> <a href="https://hachyderm.io/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://hachyderm.io/tags/aspnet" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#aspnet</a><a href="https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx</a>

Isaac LevinDiscover how to integrate htmx with ASP.NET Razor Pages to add interactivity to your web applications. This guide simplifies the process, making it accessible for all developers. <a href="https://fosstodon.org/tags/ASPNet" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ASPNet</a> <a href="https://fosstodon.org/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://fosstodon.org/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://isaacl.dev/gg5" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://isaacl.dev/gg5</a>

Nicolas DelsauxUn exemple complet et assez propre de ce qu'on peut faire avec Spring Boot et htmx <a href="https://dimitri.codes/spring-boot-htmx-intro/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://dimitri.codes/spring-boot-htmx-intro/</a> <a href="https://framapiaf.org/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://framapiaf.org/tags/tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tutorial</a> <a href="https://framapiaf.org/tags/spring" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#spring</a> <a href="https://framapiaf.org/tags/boot" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#boot</a>

Abishek MuthianHTMX and Hyperscript has made web development fun again for me. Wanted to refactor the JSON input for countries, plan id etc. with select fields and validation in <a href="https://openpaymenthost.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://openpaymenthost.com</a> (FOSS payments host); I got it done without React or having to write JavaScript.Thanks to u/Trick_Ad_3234 on r/htmx for improving my hyperscript.<a href="https://fosstodon.org/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://fosstodon.org/tags/hyperscript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hyperscript</a> <a href="https://fosstodon.org/tags/buildinpublic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buildinpublic</a> <a href="https://fosstodon.org/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a>

MarcI'm trying to write a not so complicated form with <a href="https://mamot.fr/tags/rustlang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#rustlang</a> <a href="https://mamot.fr/tags/askama" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#askama</a> and <a href="https://mamot.fr/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> and I'm having a brain fart: at this point I don't even know if I'm fighting askama or htmx 😂 and I don't know where I can ask a question at the intersection of these two kinda "fringe" technologies... 😬 (nothing wrong with either of them, it's a me problem)

caioWould it be possible to "toggle" requests with <a href="https://floss.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a>? Like, first click makes the request, second one doesn't, third one makes a new request and so on... 🤔 <a href="https://floss.social/tags/lazyweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lazyweb</a> <a href="https://floss.social/tags/lazydev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lazydev</a>

Gonçalo Valério"Less htmx is More"<a href="https://unplannedobsolescence.com/blog/less-htmx-is-more/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://unplannedobsolescence.com/blog/less-htmx-is-more/</a><a href="https://s.ovalerio.net/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://s.ovalerio.net/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://s.ovalerio.net/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://s.ovalerio.net/tags/http" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#http</a>

Webdev WeeklyLess Htmx Is More<a href="https://unplannedobsolescence.com/blog/less-htmx-is-more/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://unplannedobsolescence.com/blog/less-htmx-is-more/</a>Discussions: <a href="https://discu.eu/q/https://unplannedobsolescence.com/blog/less-htmx-is-more/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://discu.eu/q/https://unplannedobsolescence.com/blog/less-htmx-is-more/</a><a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Chris Woody WoodruffServer-driven web apps are making a comeback—and htmx with ASP.NET Razor Pages is leading the charge. Less JS, more speed, and a whole lot simpler. The future looks familiar (in a good way): <a href="https://woodruff.dev/the-future-of-server-driven-web-apps-why-htmx-and-asp-net-are-just-getting-started/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://woodruff.dev/the-future-of-server-driven-web-apps-why-htmx-and-asp-net-are-just-getting-started/</a><a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.social/tags/ASPNETCore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ASPNETCore</a> <a href="https://mastodon.social/tags/RazorPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RazorPages</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/ServerDriven" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ServerDriven</a> <a href="https://mastodon.social/tags/FutureOfWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FutureOfWeb</a>

Matt Layman🐍 On this Building SaaS with <a href="https://mastodon.social/tags/Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Python</a> and <a href="https://mastodon.social/tags/Django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Django</a>, we did some template work to build a UI for the bulk task delete feature. With a bit of <a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a>, we added a confirmation step to the deletion process. <a href="https://www.youtube.com/watch?v=7bTihRro5Q0" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=7bTihRro5Q0</a>

Chris Woody Woodruffhtmx makes Razor Pages more interactive—but don’t skip the security checklist. From CSRF protection to request validation, here’s how to keep your htmx apps locked down: <a href="https://woodruff.dev/keeping-your-htmx-apps-safe-security-best-practices-for-asp-net-developers/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://woodruff.dev/keeping-your-htmx-apps-safe-security-best-practices-for-asp-net-developers/</a><a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.social/tags/ASPNETCore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ASPNETCore</a> <a href="https://mastodon.social/tags/RazorPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RazorPages</a> <a href="https://mastodon.social/tags/WebSecurity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSecurity</a> <a href="https://mastodon.social/tags/DevTips" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DevTips</a> <a href="https://mastodon.social/tags/SecureCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SecureCoding</a>

Chris Woody WoodruffIs htmx acting up in your Razor Pages app? Don’t panic—just debug it like a boss. From browser tools to smart logging, here are some tips to make debugging way less painful: <a href="https://woodruff.dev/debugging-htmx-in-asp-net-razor-pages-tips-tricks-and-tools/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://woodruff.dev/debugging-htmx-in-asp-net-razor-pages-tips-tricks-and-tools/</a><a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.social/tags/ASPNETCore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ASPNETCore</a> <a href="https://mastodon.social/tags/RazorPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RazorPages</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/DebuggingTips" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DebuggingTips</a>

Recent searches

Search options

Administered by:

Server stats:

#htmx