Want to know what is blazingly fast and doesn't require a build step?

Recently I've had to create a few email templates. As I usually do, I thought it would be an easy one.

Just throw a few semantic html elements, add some magic with grids and voilà! Done! 🎉

But, as it always happens, it wasn't that easy! Looking at you Gmail! 😒

So I had to go back to the drawing board and make it work with the limited set of tools that web email clients provide.

One of the main issues I had was previewing and navigating between the templates. So as any good dev I fired up live server but still needed to input each filename in the address bar to navigate between files.

That's when I thought of putting together a simple page using iframes to load the templates. As devs with new and shiny tools showing up every day we tend to forget the reliable old ones.

The trusty anchor target

I started by creating adding a iframe element and specify a name.

<iframe name="viewer" class="viewer" src="welcome-email.template.html"></iframe>

Then proceeded to add a list of anchors with the target attribute set to the name of the iframe.

<ul class="menu" role="menu">
  <li class="menu-item" role="menu-item">
    <a class="link" href="welcome-email.template.html" target="viewer">
      Welcome email
    </a>
  </li>
  ...
</ul>

Making it look fancy is always something I enjoy doing. So I added a few styles just to make it look a bit more appealing. Even though it's just a tool.

And presto! I got a simple template browser that I can use to navigate between the templates I'm working on. Check out the full code in this codepen.

This little trick got me thinking even more about HTMX and how the usage of the tools we have can be used to improve user experience. Can't wait to have a chance to build something with it soon. Combined with web components it could make front-end development a breeze again. I call for the end of a new JS framework every day.