Gnarly Learnings From July 2022
Tags: rails, typescript, css, documentation
Published: 2022-07-27 20:29:00

We love reading, watching, and listening in order to constantly update our skills and learn new perspectives. Here are some of the exciting pieces we learned from
this month.

## [The most underrated Rails helper: dom_id](https://boringrails.com/articles/rails-dom-id-the-most-underrated-helper)

Despite being around for over a decade, a number of us at The Gnar have never interacted with the [`dom_id` helper](https://api.rubyonrails.org/v7.0/classes/ActionView/RecordIdentifier.html), but apparently, it is _super_ useful in the context of the Hotwire ecosystem. This article outlines when and how to leverage this helper to write clean tag builders, deep link anchor tags, interact with Turbo Frames, and scope Turbo Stream responses.

## [Bundle open](https://bundler.io/man/bundle-open.1.html)

Sometimes debugging means deep diving into the source code of your app's dependencies. Enter `bundle open`. If your Rails application uses Bundler for dependency management, you can simply call `bundle open` and pass the name of the gem you'd like to explore, or [`pry`](https://github.com/pry/pry) into. This is by no means a new Bundler feature but it is super handy to keep in the tool belt.

## [State Machines in Ruby: An Introduction](https://blog.appsignal.com/2022/06/22/state-machines-in-ruby-an-introduction.html)

At The Gnar, we are really passionate about application architecture and we love learning about new patterns. One of the patterns that the team came across recently is the State Machine pattern, which can be used to model rules for state transitions in an object-oriented way. This article does an excellent job of explaining the utility of the State Machine pattern and demonstrating how to use it with solid code examples.

## [Conditional Types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types)

The whole point of strong typing is being intentional and clear with your types.
If you have a union type that encompasses possibilities (say, `string | number`)
and you need to wrap that type in something, you may want a wrapped
type that either wraps all the possibilities (`Promise<string | number>`) or you
may want a type that wraps each possibility (`Promise<string> | Promise<number>`). Distributing the type gets you the latter option, and this
link shows you how.

## [An Engineers Field Guide to Great Technical Writing](https://stackoverflow.blog/2022/06/21/an-engineers-field-guide-to-great-technical-writing-ep-455/)

After working in the weeds on a project, effectively documenting that work can be a challenging task for many engineers. When crafting a piece of documentation, we have a tendency to assume that others know what we're talking about; it's important we fight that (completely natural) urge and instead write for the reader. What do they want to accomplish with your code? What do they need to know? And how can you communicate that information in the most succinct and straightforward manner?

## [currentColor](https://css-tricks.com/currentcolor/)

With healthy [browser support](https://caniuse.com/?search=currentColor), `currentColor` is a great way to imply color in a cascading way. This keyword ensures that the attached element will inherit the closest set color, and is especially useful for simple SVG presentations.

## Contributors

- [Ethan Fertsch](https://github.com/efertsch)
- [Jon Yurek](https://github.com/jyurek)
- [Royce Threadgill](https://github.com/jrthreadgill)
- [Steve Meisner](https://github.com/stevemeisner)

_Learn more about how The Gnar [builds software](https://www.thegnar.com/software-development)._