We love reading, watching, and listening in order to keep our skills sharp and our perspectives fresh. Here are some of the resources we learned from this month.

compareDocumentPosition

Sorting is a common feature requirement for any list UI. It is straightforward enough to write a unit test for a custom sorting function, comparing its returned array of sorted results to an expected array. Testing that this sorting functionality is implemented correctly in the UI presents a bit more of a challenge. How can we assert that one “item” in the DOM is “ahead” of another. Enter the Node.compareDocumentPosition API. It provides a clean way to compare the position of one DOM node to another. Our spec can now render the component, sort our list items by cost high-to-low for example, and then assert something like the following. expect(premiumItem.compareDocumentPosition(baseItem)).toBe(Node.DOCUMENT_POSITION_PRECEDING)

oClif.io

As devs we spend a lot of time in the command line, and whether it’s for prototyping, dev tooling or simple personal projects, chances are at some point you’ll roll your own CLI. I found oclif an easy way to get rolling on a node.js CLI, with the generators doing just the tedious stuff and otherwise staying out of your way. It also has an advanced plugin architecture for when my personal project makes the big leagues and I need that extensibility 😜.

react-accordion

Expandable content containers are a great way to put information in reach of a user without overwhelming them with walls of text on page load. Doing this in a way that provides a smooth UX for all users can be challenging when we consider things like animations, only allowing one to be open at a time, and a11y concerns like screen reader navigability and keyboard navigability. React-Accordion addresses all of these in a component-based approach which works out of the box and allows for some customization, and a second, hook-based (or “headless”) approach that gives you full control of your UI while still providing all the same features and WCAG compliance.

Rails::HealthController

Rails 7 includes a ✨built in ✨ health check endpoint that can be accessed at the /up endpoint (in true rails fashion, this path can be customized to whatever you like). The endpoint will return a 200 if your application booted successfully (no exceptions raised) and a 500 in all other cases. This is particularly useful in production environments if your app needs to report its status upstream (think status pages like this one).

rux

We’ve been using ViewComponent in a number of applications at The Gnar and we really like it. It seems we’re not alone given the splash it’s making in the community. There are a good number of projects that are layering functionality on top of ViewComponent which is a promising sign. Enter rux. This library (and its rails companion) was inspired by JSX will allow you to write HTML tags in your ruby code. This isn’t something we’ve used yet but we’re keeping our eyes on it. Grab your popcorn for the inevitable debates about the separation of concerns. 🍿

phlex

More Ruby and Rails views-related fun! phlex (and its rails companion) is also dabbling in the art of view-layer encapsulation as a competitor to ViewComponent. One of the interesting features of this library is that it claims to be “significantly faster” than rendering an ActionView partial or a ViewComponent component. It seems pretty straightforward to use - the interface leverages POROs that define a template method that returns some HTML. We haven’t implemented this in any projects but we’re planning to monitor it as a serious contender to ViewComponent.

Contributors:

• Ethan Fertsch
• Jack Curtis
• Will Mahoney

Learn more about how The Gnar builds software.