HTMX + Eta vs Jekyll + Liquid

Eta and Liquid have similar templating syntax, but Eta comes with dual advantages of self-closing templates and native TypeScript support for reduced “magic string” problems.

I was taking a look at Loren’s post on URL-Driven State in HTMX recently and was struck by the similarities in templating syntax of Eta and Liquid.

I’ve been fighting with magic strings in Liquid templating in Ruby which uses a similar wrapping syntax as Eta except Eta appears to explicitly wrap templates inside self-closing html-style tags <> rather than JS-style {}.

• Eta templates: <% command CONTENT %>
• Liquid tags: {% command %} CONTENT {% endcommand %}

1. The self-closing bit is nice, I can’t tell you how many times I’ve forgotten to close the command working on this site!

2. With TypeScript support out of the box from Eta, I expect that htmx suffers much less from magic strings as well. Templating works with typed objects as opposed to passing string references.

Formatting and filtering data using string references in my Liquid templates has been annoying.

ex. Here’s the template that inserts social links as icons to my resume page.

<div class="resume-contact-links">
  <ul class="list-inline">
  {% for contact in site.data.contact %}
+    {% assign social_url = site.social.links | where_exp: "url", "url contains contact.type" | first %}
    {% if social_url %}
      <li class="list-inline-item">
        <a href="{{ social_url }}" target="_blank" rel="noopener noreferrer" class="no-underline">
          <i class="{{ contact.icon }} resume-contact-icon"></i>
        </a>
      </li>
    {% endif %}
  {% endfor %}
  </ul>
</div>

The highlighted line 4 has a string filter expression, hope you didn’t typo! "url contains contact.type"

I’m a fan of tools that make it harder for me to kneecap myself. ✔