@egil@mastodon.social
@egil@mastodon.social avatar

egil

@egil@mastodon.social

Distinguished Developer at Delegate A/S, Microsoft #MVP and creator of #bUnit (https://bunit.dev). 🇩🇰 living in 🇮🇸.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

khalidabuhakmeh, to random
@khalidabuhakmeh@mastodon.social avatar

Every few months, I come back to rewriting a app in , sometimes it's with Blazor, sometimes it's Razor Pages, and this time with (although I may have already done HTMX 😅)

I got some quality-of-life improvement issues entered to help make better, too. So that's a win!

Htmx-powered todo app.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @jonstj Htmxor is definitely not production ready, but things are heading in the right direction. Beta level stuff. Still breaking changes coming, most likely 😊

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse do it in Htmxor too and let me know how it feels 😏

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse that would be amazing (was mostly kidding). Looking for a project at work I can try this on, for now though, I'm just imagining things. If you want to do it together on a stream or async just let me know.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @jonstj speaking off issues, a generic approach to controlling any response header could look like this in Htmxor: https://github.com/egil/Htmxor/issues/18

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse great. I am hoping it is fairly intuitive experience given that you followed the getting started guide to set up the project or cloned the minimal app project. But if you share a link I would love to see where you ended up 🙂

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse starting with this is probably the easiest, also includes some sample components and pages: https://github.com/egil/Htmxor/tree/main/samples/MinimalHtmxorApp

Otherwise check out the docs: https://github.com/egil/Htmxor/blob/main/docs/index.md

Re. reviewing in a stream, I'll be happy to do that any time next week.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse I will have a go at doing an "egils version" ASAP and report back!

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse gah, other things keep coming in my way, but Khalid, you can use @onget htmxor event handlers instead of "doing everything in OnInitialize", that will make it feel more like a Blazor component. For example: https://github.com/egil/Htmxor/blob/main/samples/HtmxorExamples/Components/Pages/Examples/ArchiveToggle/Index.razor#L45

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse here is a simpler version that I think addresses some of your concerns: https://github.com/khalidabuhakmeh/HtmxorTodoApp/pull/1

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse I like the trick with having a form elsewhere in the page and targeting it with form="formId" to get around having forms in table rows. An alternative I've used is hx-include="closest tr" as demo'ed here: https://htmx.org/examples/edit-row/

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @brtkdotse that's right. In terms of fallback, I also need to ensure that the htmxor specific event handlers works in fallback scenario, as blazors standard form post do.

khalidabuhakmeh, to random
@khalidabuhakmeh@mastodon.social avatar

This a question I have for users ( @alexzeitler and @egil) who are attempting to reduce repetition with components.

Do you think less components and more reusability is better, or are you losing some benefits of breaking down the UI into optimized functions?

I thought about this building my JetBrains store sample, too. I'm unsure where to draw the line of reuse vs. bespoke endpoints.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @alexzeitler currently I lean towards:

  • If something can be a component that makes sense on its own, then, by all means, make it that. Then you can decide if it's a routable component or just a component that's used by other components.
  • If something only makes sense in the context of a component, but you still want to update it individually, then leveraging the template fragment pattern makes sense.

More detail in my answers here: https://github.com/egil/Htmxor/discussions/39

egil, to blazor
@egil@mastodon.social avatar

Continuing experiments with #htmxor, aka. #htmx + #Blazor. Working on enabling support for template fragments.

Input, feedback, suggestions are very welcome indeed: https://github.com/egil/Htmxor/discussions/37

egil,
@egil@mastodon.social avatar

Nerd sniping @khalidabuhakmeh 😘

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh my example matches on a route, but the the point of a fragment is that it does not make sense on its own, otherwise, it may just as well be a routable component.

Here is another example where the fragments choose to render or not, based on request headers.

https://github.com/egil/Htmxor/blob/examples-project/samples/HtmxorExamples/Components/Pages/Examples/UpdatingOtherContent/TriggeringEvents.razor

This is the article that inspired the whole endeavor: https://htmx.org/essays/template-fragments/

So for me, making an fragment addressable does not make much sense as I see it.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh in terms of routable components, this is my first attempt at docs for how Htmxor does routing: https://github.com/egil/Htmxor/blob/main/docs/routing.md

egil, to blazor
@egil@mastodon.social avatar

Usssh, now I’ve done it. I actually have to talk about htmx and blazor next monday. So I need all you folks help, what are the libraries you are using? What are the good and bad things about that combo?

https://www.youtube.com/live/-Mc9pROA0Ho?si=mpxSGkSTVV2MJT5_

Pinging @khalidabuhakmeh and my and friends!

egil,
@egil@mastodon.social avatar

@brtkdotse @khalidabuhakmeh well ok, still prototyping, so “I hope it will” solve all the things is probably more precise 😊

egil,
@egil@mastodon.social avatar

@brtkdotse @khalidabuhakmeh @patriksvensson the headers I have a solution for 🙂

egil,
@egil@mastodon.social avatar

@patriksvensson @khalidabuhakmeh @brtkdotse yeah I have looked at your stuff too. Have a custom HtmxContext that has a HtmxRequest and a HtmxResponse properties that provides access to incoming and outgoing headers. The context can be accessed in components. That's my best solution for now.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh @patriksvensson @brtkdotse something like that is almost possible. Cannot do custom directives until the razor compiler team enables that, but this is possible for the headers that are static (i.e., won't change based on request):

@attribute [Header("some header", "some value")]

egil,
@egil@mastodon.social avatar

@patriksvensson @brtkdotse @khalidabuhakmeh ill add header control through attributes to my todo list. It's a good idea.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh aaand that's a wrap. Did call you out a bunch of times (in a good way I hope) and quoted you quite a bit. Thanks for the input.

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh so when I say call out, I just mean I referenced you a bunch, not in a disagreeing way 😊

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh here is a pretty concise example of template fragments, routing, callbacks, setting response headers: https://github.com/egil/Htmxor/blob/main/samples/MinimalHtmxorApp/Components/Pages/Counter.razor

egil,
@egil@mastodon.social avatar

@khalidabuhakmeh agreed. Good point. Still learning, but did figure out that trick with blazing pizza and the orders and configure logic.

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