Rails i18n - Show translation_missing class style in production only

Caio Andrade — Thu, 01 Oct 2020 22:36:19 +0000

The translation_missing class can be pretty useful in development to expose all the instances of missing i18n keys in your app. Rails adds a <span class="missing_translation" ></span> around every use of his helper method t that doesn't have a matching key in the YAML of the current locale.

To help expose to the team every instance of missing translations, we recently started using a simple CSS class:

.translation_missing {
  outline: 1px solid red;
}

So we could all see red outlines on every instance of missing key:

The issue

This would also show those outline in production! 😱

Most of the solutions I found in StackOverflow were either outdated or too complex to be trustworthy.

I decided to read how those span classes are created by Rails to try and find a fix, but after my third monkey patch to Rail's ActionView I realized that a simpler approach might be in order.

The simple fix

Create an error_styles helper that returns a <style>

# app/helpers/errors_helper.rb
module ErrorsHelper
  def error_styles
    tag.style do
      <<~CSS
        .translation_missing {
          outline: 1px solid red;
        }
      CSS
    end
  end
end

And add it to your application layout:

<!-- app/views/layouts/application.html.erb -->
<!---- Somewhere in your <head> ---->
<%= error_styles if Rails.env.development? %>

An ELI5 version of REGEX and NFA

Caio Andrade — Thu, 06 Aug 2020 03:20:15 +0000

You have 🤖 a robot (our automaton) that will “walk” through the REGEX dungeon, room by room 🏚 (character by character). Now imagine each room is locked, and in order to access the next one it needs to collect from the string the key (or keys) character that unlocks the next REGEX door.

If the robot reaches the end of the REGEX, it’s free and it's a match!, if it gets stuck with a character that doesn’t open the next door it gets kicked to the start of the REGEX and needs to try again from the next string character. So if it has the string: "budega", and it fails at "b", it will try to open the REGEX again using "udega" (no matter how much progress it made on the previous dungeon).

If a robot is trying to match the dungeon /there/, it will need a set of keys that are able to unlock each of its 5 doors (t, h, e, r, e) in perfect succession:

If I give it ”there”. It will ofc use all the keys and successfully reach the end.
If I give it ”here” it never even starts, since it would never be able to unlock the first door. It would try "here", then "ere", then "re", then "e" and leave the dungeon feeling sad 🙁.
If I give it ”then go over there” the robot would probably feel very confident going over the initial “the” only to get stuck with an “n” that can’t unlock the next door r and get kicked to try all over again with "hen go over there”. It would then successively fail in the first character until it got to try with "there”, and finally be happy again. 🎉

Some doors can be opened with a varying number of characters (quantifiers) or different ones (ranges).

A robot in the /[hm]el+ow?/ dungeon has 5 doors (characters) to cross: [hm], e, l+, o and w?.

“hello” would be a match since the first door can be opened with either an "h" or an "m". And the l+ door would use both ls, leaving the robot with an “o” to use in the next door o. The last door w? can be opened with 0 or 1 valid keys. It has 0, so it gets through it.
“mellow” also works for the same reasons above. At the last door w? it uses its 1 “w” and goes through it. Yay!

Anyway. I think I had way too much fun painting it in more vivid colors. I hope it helped.

DEV Community: Caio Andrade

Rails i18n - Show translation_missing class style in production only

The issue

The simple fix

An ELI5 version of REGEX and NFA