Issue № 3: Hypermedia as the Engine of Coffee Brewing

Rashad https://www.loom.com/share/dffdf15baa3045ea9eea562bd88cc1b3?sharedAppSource=personal_library

HIGHLY RECOMMEND WATCHING THE LOOM AT 1.5 ~ 2 times speed. I talk slow. Skip to the 58 minute mark to see lucid-htmx immediately. Watch the rest if you’re interested in Haskell web dev.

An overview of lucid-htmx. I’ve recently published the package to hackage, the Haskell package manager. Check it out here: https://hackage.haskell.org/package/lucid-htmx

Documentation here: https://hackage.haskell.org/package/lucid-htmx-0.1.0.0/docs/Lucid-HTMX.html

I recommend watching the loom video at 1.5 ~ 2 times speed. I talk slow and the video is long but watching it at a higher speed, I think it’s a good pace. If you want to skip straight to the htmx stuff, skip to the 58 minute mark. Otherwise, I take a dive into web dev in Haskell and answer some interesting questions like how to query a database in Haskell, how to implement a server in Haskell, and what are some annoying things about Haskell development.

Rashad Code for the example in the loom video can be found here: https://github.com/rashadg1030/haskell-htmx-examples/blob/main/app/Main.hs

gone Is there a way to get the code that handles the debug info in the bottom of the documentation examples?

gone the count of server requests + outgoing data and response

gone it would be very useful to drop into an app as a debug tool

Deniz Akşimşek that’s built into the mock server that HTMX uses, however a similar thing could be built for real server requests

October 29, 2021, 10:41 AM UTC

BenCroker Since you’re here @Deniz Akşimşek, I have an idea to share: a htmx devtools browser extension.
This could log requests in its own devtools window, including things such as the request params and headers, response time and payload, as well as a visual overlay of the swapped mark-up in the browser window. Kind of similar to the request viewer on the htmx examples pages, but as a browser extension.
VueJS has a very powerful devtool browser extension, for example, see the quick demo at https://youtu.be/odKVakhMk1o?t=73

Deniz Akşimşek https://discord.com/channels/725789699527933952/725789747212976259/902928361951727667 It was discussed before, and I think it’s a wonderful idea. I bet we could implement a time-travel debugger like Redux, for the framework war coolness points…

Deniz Akşimşek I’ll stop talking about this before it gets assigned to me 👆 1 😆 1

Deniz Akşimşek [Image: Screenshot of Twitter on mobile, showing a tweet from @htmx_org]

Deniz Akşimşek HTMX on the explore page

1cg lol wut

Daniel - East TN For a (paid) side project, I got asked to expose some information “however I want” - they’re going to integrate it into a dashboard app. They’re getting 2 endpoints - one with an HTML table of the data (fragment), and one that wraps the table in a document with minimalist styling. They can style it, or they can use my black/white/gray striping with hover highlighting. So easy!
Now, I wait for the consumers to say “Huh - how do we swap this into our placeholder?” LOL

Deniz Akşimşek thing that should exist: a convenient way to scrape html tables

benpate ↪ Re. Deniz Akşimşek thing that should exist… Yes, very cool idea. Are you thinking you’d want to scrape the tables into a Javascript array? That should be pretty easy to do in JS or Hyperscript. Would this be used in htmx, or somewhere else?

Deniz Akşimşek in programmatic clients of an html api

benpate Yup.

Deniz Akşimşek preferably with support for scope=rowgroup

Deniz Akşimşek and rowspan

Deniz Akşimşek colgroup might make sense too, thinking about it

October 29, 2021, 1:27 PM UTC

Daniel - East TN ↪ Re. Deniz Akşimşek thing that should exist… It does in F# - https://fsprojects.github.io/FSharp.Data/library/HtmlProvider.html

Daniel - East TN The official name of this project/technology - is it “HTMX” or “htmx”? (Pedantic bloggers want to know!)

1cg htmx, lowercase 👍 2

Deniz Akşimşek our non-existent styleguide at This Week in HTMX mandates lowercase (despite the name of the site itself) 😆 1

Daniel - East TN Cool - I… uh, I mean… pedantic bloggers wanted to make sure they got it right. 🙂

1cg also, hyperscript is _hyperscript, and the underscore is silent 😆 1

1cg under no circumstances should hyperscript be spelled hyperscript 😆 1

Deniz Akşimşek _hyperscript, worsening your markdown experience since [however long it’s existed]

1cg _worsening

Deniz Akşimşek ah yes, my favorite programming language \_hyperscript

Daniel - East TN 🤣

RichardG @1cg that prism link is gold. thank you again 🙂 helped me wrangle:

on load 
  set global submitReady to false
  repeat until submitReady is true
    wait 1s then
    if #contactName.value != '' and #contactEmail.value != ''
      remove .bg-grey-700 from #submitButton
      add    .bg-red-800  to   #submitButton
      set my disabled to false
      set submitReady to true
    end
  end

Fubarrr Hey all you htmx fans, just in case you haven’t yet seen the “This week in HTMX” page, check it out! https://thisweek.htmx.org/

It’s curated by the inimitable @Deniz Akşimşek and it’s your one-stop weekly news round-up of the htmx community highlights 💪 If you find it valuable or just want to show your appreciation for Deniz’s effort for putting this together, feel free buy him a coffee: https://thisweek.htmx.org/support 👆 1 👍 1