---
title: 'This week in #dev (Jul 28, 2023)'
teaser: 'Creating reusable components with vanilla JS, checking feature compatibility
  across email clients, and more!

  '
tags: this week in dev,javascript,tip,email,stimulus,git
author: thoughtbot
published_on: 2023-08-07
---

Welcome to another edition of [This Week in #dev](https://thoughtbot.com/blog/tags/this-week-in-dev),
a series of posts where we bring some of the most interesting Slack conversations to the public.

## Comparing Version Strings

[Svenja] has discovered the use of `Gem::Version` to compare version
strings. This class is provided by RubyGems and handles comparing versions where
strings would fail because they're compared lexicographically.

```rb
"6.10" >= "6.4"
# => false

Gem::Version.new("6.10") >= Gem::Version.new("6.4")
# => true
```

## Git: Intending to Add Untracked Files

[Neil] suggested using the command `git add --intend-to-add` (`-N` for short) to move
untracked files to the _Changes not staged for commit_ area. This will allow you to use
`git add --patch` or `git diff`, for example, to review changes on files that haven't
been added to the Git repository yet.

## Reusable Components With The `<template>` Tag

[Summer ☀️] recommended using an invisible [`<template>`] tag to render multiple
instances of a set of HTML tags in vanilla JavaScript. This tag provides an
interface for creating a clone of its contents, modifying it, and inserting it
into the page.

<aside class="info">
  <p>
    <a href="https://thoughtbot.com/blog/authors/matheus-richard">
      Matheus Richard
    </a> mentioned that Turbo uses the <code>&lt;template&gt;</code> tag to
    <a href="https://turbo.hotwired.dev/reference/streams">
      implement its stream actions
    </a>.
  </p>
</aside>

[Sean Doyle] chimed in to mention that there is a Template Parts proposal to
WICG that will support rudimentary "rendering" with placeholders and values:

```html
<template id="foo">
  <div class="foo {{y}}">{{x}} world</div>
</template>

<script>
  const templateElement = document.getElementById("foo")
  const variables = { x: "Hello", y: "bar"}
  const templateInstance = new TemplateInstance(
    templateElement,
    variables
  )

  document.append(templateInstance)
</script>
```

There's a [package that implements this proposal] if you want to try it out.

[package that implements this proposal]: https://github.com/github/template-parts

[`<template>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

## Checking Feature Compatibility Across Email Clients

[Fer] has introduced [caniemail.com], a website that shows how well a feature is
supported by email clients (you probably know [caniuse.com]). He has used it to
discover that [`prefers-color-scheme`] is not supported by Gmail.

[caniemail.com]: https://www.caniemail.com
[caniuse.com]: https://caniuse.com
[`prefers-color-scheme`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

## Self-Destructing Stimulus Controllers

[Summer ☀️] suggested using [self-destructing Stimulus controllers] as a way to
trigger JavaScript code via a Turbo Stream response. This approach involves
rendering an invisible HTML tag that connects to a Stimulus controller, which
will then destroy the HTML tag once it has completed its work. [Matheus Richard]
added that [a custom Turbo action] is an alternative solution to this problem.

[self-destructing Stimulus controllers]: https://boringrails.com/articles/self-destructing-stimulus-controllers/
[a custom Turbo action]: https://marcoroth.dev/posts/guide-to-custom-turbo-stream-actions

## Thanks

This edition was brought to you by [Fer Perales][fer], [Matheus Richard],
[Neil Carvalho][neil], [Summer ☀️], and [Svenja Schäfer][svenja]. Thanks to all contributors! 🎉

[Matheus Richard]: https://thoughtbot.com/blog/authors/matheus-richard
[Summer ☀️]: https://thoughtbot.com/blog/authors/summer
[Sean Doyle]: https://thoughtbot.com/blog/authors/sean-doyle
[Svenja]: https://ruby.social/@slickepinne
[fer]: https://github.com/ferperales
[neil]: https://thoughtbot.com/blog/authors/neil-carvalho