high power tools for... HTML

Issue #305.July 11, 2024.2 Minute read.
Bytes

Today’s issue: The Federalist Papers of web dev, reverse engineering TicketMaster, and open sourcing endangered sharks.

Welcome to #305.

Eyeballs logo

The Main Thing

Army general doing the splits

That one coworker showing your team yet another htmx tweet

Hypertext psyop intensifies

If you’re not very familiar with htmx, it probably means you have a healthy relationship with social media and still talk to your dad.

But even if you’ve been following the project for a while, you still might not be very familiar with how it got started and where it could go from here.

And since they just released v2.0 last month, we figured this would be a good opportunity to catch everyone up to speed. Strap into your saddles.

How we got here: Htmx’s roots go back to 2013, with the release of Intercooler.js, which allowed you to use “familiar, declarative HTML attributes to add AJAX to your application.”

That’s pretty much the same tagline that htmx uses today, but Intercooler never really gained much traction. At least, not until its creator, Carson Gross decided to make two key changes during the pandemic: 1) rip out the library’s jQuery dependency, and 2) rebrand to htmx and launch an unceasing assault of memes, tweets, blog posts, and custom mugs.

As Ben Holmes covered for us last month, all that OSS marketing really worked. Now, let’s take a quick look at how the library itself works:

  • htmx adds new attributes to HTML that let you make HTTP requests from any element, by utilizing a powerful new paradigm known as Ajax.

  • That’s a joke. But this approach, along with CSS transitions and its own client-side router, allow htmx to handle more complex UI requirements like data fetching and rendering with a lot less JavaScript.

  • It also comes with an extension mechanism that lets you customize the library’s behavior. Last month’s 2.0 release allows extensions to be versioned individually and developed more quickly, which could see them become a more integral part of the library.

Bottom Line: Detractors argue that htmx’s approach will break down at scale because it doesn’t embrace the component model, TypeScript, or a more modern approach to state management – among other things.

But if/when more teams start using htmx to build large-scale applications, the hypermedia hype will hit an all-time high.

        
Convex logo

Our Friends
(With Benefits)

Two dogs looking over architectural blueprints

Trying to figure out who the h*ck wrote this janky backend code

Convex just launched native Auth 👀

Convex already gives you a “Laravel for TypeScript” experience by providing a dev framework for TypeScript that’s thoroughly enjoyable (orange lambo not included).

And now, they’ve added a powerful library for implementing auth directly into your Convex backend too.

This lets you authenticate users without needing an auth service or even a hosting server – and it comes with all the power and simplicity Convex is already known for:

  • Easily implement Magic Links, OTP emails, and 80+ OAuth integrations out of the box.

  • Get the type safety and DX upgrades of tRPC, combined with the all-in-one experience of Firebase.

  • Unlike Firebase and other NoSQL data stores, Convex is fully transactional and fully reactive.

Check out the live Convex Auth Workshop to see a live demo, ask questions, give feedback, and learn how to integrate it into your projects.

Spot the Bug logo

Spot the Bug

Presented by Raygun

One of their devs just wrote this 2,900-word deep dive on Runtime environments & package management in the JS ecosystem in 2024. It’s a great read, and it’s not even email gated.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #colorBox {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="colorBox"></div>
    <button id="toggleColorButton">Toggle Color</button>

    <script>
      const colorBox = document.getElementById("colorBox");
      const toggleColorButton = document.getElementById("toggleColorButton");

      toggleColorButton.addEventListener("click", () => {
        if (colorBox.style.backgroundColor === "red") {
          colorBox.style.backgroundColor = "blue";
        } else {
          colorBox.style.backgroundColor = "red";
        }
      });
    </script>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. Marvin Hagemeister just wrote about Isolated Declarations in part 10 of his “Speeding up the JavaScript Ecosystem” series – or as a I like to call it, the Federalist Papers of web dev.

  2. What would it take for you to quit your job? List yourself on Candix.com to be approached by top-paying startups and find out. People have used it to secure interviews at places like OpenAI and Ramp – and it’s 100% confidential, so your current boss won’t find out. [sponsored]

  3. Mako just went open-source. And I’m not referring to the endangered shark species or the voice actor for the bad guy in Samurai Jack – I’m talking about the “extremely fast and production-grade front-end build tool, based on Rust.”

  4. Vitest 2.0 just came out with better Browser Mode support, a new blob reporter, and some stability improvements.

  5. QA Wolf can automate hundreds of tests for your app in Playwright, and have them ready to run on every deploy. That means no more manual E2E testing, no more slow QA cycles, and no more bugs reaching production. See how Drata’s team of 80+ engineers use QA Wolf to achieve 4x more test cases and 86% faster QA cycles. [sponsored]

  6. Conduition wrote a pretty fascinating article on Reverse engineering TicketMaster’s rotating barcodes. TicketMaster was not pleased with these efforts, and pledged to raise their fees by an additional 45% because they “feel like it.”

  7. dotUI is a new set of accessible, mobile-friendly, modern UI components (still in beta).

  8. Bright Data lets you build unstoppable web scrapers, so you can always get the data you need – without getting blocked or rate limited ever again. They’ve got CAPTCHA auto-solvers, automated proxy rotation, 72 million residential IPs, a simple way to manage it all from a single API. [sponsored]

  9. David Darnes just released a new <code-pen> Web Component that lets you wrap code blocks in a single WC and allow anyone to open that code block in the CodePen editor.

  10. Remix just released Fog of War, a brand new Call of Duty game feature designed to help your app stay performant as it grows. Best of luck to all my JavaScript soldiers in the trenches 🫡.

Spot the Bug logo

Spot the Bug: Solution

Presented by Raygun

The first time a user clicks the button, the color of the box will stay red. This is because the style property only returns inline styles, not styles from a stylesheet. In order to get the computed style of an element, you can use the getComputedStyle function. However this leads us to another potential bug: the backgroundColor property returns the color in the format rgb(255, 0, 0) instead of red.

To fix this, you can compare the computed color to the RGB value of red.

<html>
  <head>
    <style>
      #colorBox {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="colorBox"></div>
    <button id="toggleColorButton">Toggle Color</button>

    <script>
      const colorBox = document.getElementById("colorBox");
      const toggleColorButton = document.getElementById("toggleColorButton");

      toggleColorButton.addEventListener("click", () => {
        const computedStyle = getComputedStyle(colorBox);
        const currentColor = computedStyle.backgroundColor;

        if (currentColor === "rgb(255, 0, 0)") {
          colorBox.style.backgroundColor = "blue";
        } else {
          colorBox.style.backgroundColor = "red";
        }
      });
    </script>
  </body>
</html>