HTML, but make it eXtra

Chuck E. Cheese dreams, dethroning the original Bun guides, and receiving another formal warning from HR.

Welcome to #209.

---

HTML, but make it eXtra

Chances are you’ve been hearing a lot about htmx lately — which we all know stands for Hyper-Text Markup X Gon’ Give it to Ya.

We wrote about the UI library back in October, but let’s do a quick review of how it works, why we’re seeing it pop up everywhere, and where it might go from here.

Quick review: Htmx combines AJAX, WebSockets, and Server Sent Events and puts them directly into your HTML via attributes. It allows any HTML element (not just anchors and forms) to issue HTTP requests, and it allows any event to trigger requests.

If that sounds familiar, that’s because it’s pretty similar to frameworks like Phoenix LiveView and Ruby on Rails’ Hotwire, but with more… x.

How it works: Instead of sending JSON and using JavaScript to turn it into HTML, htmx just sends HTML — but its architecture allows you to send small fragments (only what’s necessary for an update or interaction) to the client. The server handles all of the application state (so it’s not duplicated on the client and server) and sends special HTTP headers, which let the client know which updates to make.

So why are we suddenly seeing htmx everywhere? It started a few weeks ago when the htmx team went all in on binge-tweeting rusty memes.

The tweets helped get it on the radar of various tech YouTubers and content creators, who are always looking for semi-interesting topics during slow summer months (I can relate). From there, htmx was embraced by #UseThePlatform hard-liners who were eager to support a library that claimed to “allow you to access modern browser features directly from HTML, rather than using JavaScript.”

There was just one problem: that’s a lie.

Ok, that might be a little harsh, but it turns out that it’s impossible to use htmx without also using some JavaScript. If only someone out there had mentioned this fact 284 days ago 🙃.

Htmx is still a great way to keep your client lightweight, do almost all of your work on the backend, and leverage all that HTML has to offer. But like everything, it has tradeoffs and probably won’t be replacing JavaScript for building web apps overnight.

Bottom Line: It’ll be interesting to see where htmx goes from here. Was it just a flash in the Twitter pan, or will it become a solution that more legit applications (like this one) use in production? Stay tuned.

---

Build a web app in *60 seconds* with Dynaboard

How is that even possible? By using their AI-supercharged, low-code IDE that can connect to any database or API.

It comes with 40+ customizable UI components, intelligent data integrations, real-time collaboration, and one-click deploys to prod — plus a little WebAssembly magic lets you add custom code on both the client and the server 😱.

Getting started is always the hardest part of any new project, but Dynaboard lets you skip all the boilerplate and spin up a functioning app fast. And you’ll still have the flexibility to customize it later by writing TypeScript or using their generative AI tools to build and modify components.

Try it for free to see how much you could build in 60 seconds.

---

function differenceInMilliseconds(date1, date2) {
  const { getTime: getTime1 } = new Date(date1);
  const { getTime: getTime2 } = new Date(date2);
  return getTime1() - getTime2();
}

differenceInMilliseconds('2021-01-01', '2021-01-02');

---

1. Bun just released Guides, a large collection of code samples and walkthroughs for performing common tasks with Bun. Eventually, they should be able to outrank this beautiful site for the “Bun Guides” search term.

2. Zero created an easy way to integrate 3rd-party API credentials into your project. Their SDK is available for TypeScript, Rust, Python, and Go. [sponsored]

3. Addy Osmani wrote an article called Good code is like a love letter to the next developer who will maintain it. Just be careful that it’s not too good of a love letter, because you can’t afford another HR warning.

4. Animotion is a presentational framework for creating beautiful slides and code explainers using Svelte, Reveal.js and Tailwind CSS.

5. Lucia is an open-source auth library for TypeScript that abstracts away the pain of handling users and sessions.

6. Chris Jayden wrote about Rate limiting requests with tRPC in Sveltekit, aka the hipster dev paradise stack.

7. The State of Databases survey results just came out, and it turns out that there are exactly 495 YC-backed companies that all claim to be “the open-source version of Firebase.” The more you know.

8. Speaking of open-source alternatives to Firebase, my favorite one (Supabase) is having their 8th LaunchWeek on August 7th to 11th. If you’ve never been, it’s like when your parents would take you to Chuck E. Cheese’s as a kid and you’d eat so much pizza that you’d throw up in the SkyTubes – but with more Postgres.

---

function differenceInMilliseconds(date1, date2) {
  const t1 = new Date(date1).getTime();
  const t2 = new Date(date2).getTime();
  return t1 - t2;
}

differenceInMilliseconds('2021-01-01', '2021-01-02');

In JavaScript, class methods are not direct properties of an instance, but rather belong to the class’s prototype. When you try to destructure a method, you’re attempting to extract it directly from the instance, which doesn’t work because getTime isn’t a direct property. On the other hand, new Date().getTime() works because JavaScript checks the prototype chain and finds getTime on the Date prototype.

Here’s a thing we wrote on the topic a while back if you’d like more info. – A Beginner’s Guide to JavaScript’s Prototype.