#RevTWIL: Elixir Patterns, React Hook Form, BitWarden

At Revelry, we believe in sharing and learning from one another (beliefs that are rooted in our Core Values). Among the many things we do to encourage internal knowledge exchange is to have a different team member present at each week’s Engineering Meeting. These presentations don’t have to be lengthy, formal, or complicated; in fact, many are brief, but also powerful in that they teach our Revelers something new, inspire conversation, and encourage collaboration.

In the spirit of sharing, we share our This Week I Learned presentations (aka RevTWILs”) here. We hope you find them helpful.

THIS WEEK: We offer an assortment of shared learnings from our engineering team.

• BitWarden has started offering secret management that integrates with Github, Gitlab and Kubernetes.

• Just bought this book on Elixir Patterns and it comes with accompanying livebooks to help learn the things. 

• It’s not hard to write and maintain both a regular version of a function that returns {:ok, result} or {:error, error} tuples AND an explody version that raises on error and returns the unwrapped result on success.
  
  I was talking myself into being lazy and having just the ! version, but it took me five minutes to rewrite it and now there’s actually less code (because I could get rid of a helper).
  
  The non-explody clauses look like this, and there are several of them each with slightly different logic:
  def deserialize(:float, value) do
case Float.parse(value) do
{float, _} -> {:ok, float}
:error -> {:error, "Invalid value '#{value}' for type 'float'"}
end
End
  
  Then you can get the explody version of all of them at once with: 
  def deserialize!(type, value) do
case deserialize(type, value) do
{:ok, value} -> value
{:error, error} -> raise(ArgumentError, error)
end
End
  
  If your automated tests exercise the ! versions, you get coverage of the other ones for free.
• You can split windows in vim via keyboard shortcut ctrl + w followed by v.

• TWIL about IO.write() to write output in without a line feed. Great for progress output. Also, adding a carriage return character will return to the beginning of the line and overwrite, so great for counters, eg IO.write("\r#{counter}").

• TWIL about the power of the . command in vim!

• Getting back into React recently introduced me to react-hook-form. So far it’s been a pretty nice library to work with! https://react-hook-form.com/
  
  Feedback: I’ve done a little with this (similar to angular reactive forms) and I think it pairs well with Zod.
  
  Feedback 2: react-hook-form is perfection for truly reactive forms.
  
  Pros:
  Validations, errors and submit params are grouped and accessible by name reducing bloat.
  The values you get back from form is everything you need to display for interactive forms
  IIRC the component won’t rerender everytime you type in an input (refs)
  Custom validation
  
  Con:
  In react-native though, every input needs to be wrapped in a <Controller /> , which imo makes the code a bit bigger. (Could probably write a custom wrapper that uses the right props for Native Input.)
  
• It’s really easy to make a video out of a bunch of frames using ffmpeg. You can use a command like this (where each frame is named something like “lorenz_frame_001.png”, “lorenz_frame_002.png”, etc): ffmpeg -framerate 30 -i lorenz_frame_%03d.png -c:v libx264 -preset slow -crf 17 -pix_fmt yuv420p lorenz_rotating_hq.mp4

• If you need to have an input that consists of multiple well-formatted emails (comma separated), don’t write a custom regex. Let the multiple attribute on the email type of the input attribute work for you! In order to get it working in Phoenix, you just need to tweak the def input ever so slightly. 

• If you want a nice, comma separated list of email addresses…have no fear, you do ∗not∗ need to write a regex. The html attribute <input> supports the multiple boolean attribute, which means it will check it all for you and make sure everything is formatted. In order to use it in Phoenix out of the box, you just have to do a little tweaking in the core_components! https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple

Want to learn more about Revelry and our collaborative approach to building custom software? Connect with our team.

---

RevTWIL TWIL