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.
bin/rails notes
Code comments are a pretty controversial topic but if you’re a rails developer and you’re in favor of them you should definitely check out bin/rails notes. Which allows you to search through your code comments for specific keywords. There are a few boilerplate keywords (also called annotations) that rails will look for by default (FIXME, OPTIMIZE, and TODO) but you can add custom annotations too. What’s really great about this is that it could be used to set expectations and create a style guide for code comments so that the structure is consistent and the comments will always be easy to find.
console.dir()
The developer consoles of modern browsers are incredibly feature-rich. One of the tools we learned about this month in the Chrome developer console is console.dir(). One of the neat things you can do with this function is to pass it an object and a depth of null (e.g. console.dir(object, { depth: null })) and it will log the entire object for you (not just [Object object]). 🤩Bonus tip! You can right-click an object (in the Chrome developer console), and click "copy object". This will allow you to grab the data and paste it somewhere for inspection in a nicely formatted way. You can also right-click the object and select "store object as global variable" and it will save the object in a variable that is available in the console.
Embedded Web Apps in Elixir with LiveState
If you’ve ever had to embed third-party content into a web application, chances are you did it with an iframe. The frustrating thing with this approach is that you have no control over how the iframe displays, which complicates responsive layouts and disrupts the user experience. The LiveState library allows Elixir developers to manage state for embedded content, leaving some or all of the front-end implementation details up to the consuming application. That seems like a really flexible and attractive solution for anyone looking to ship a widget to their customers. Check out this example of an embeddable comments section to learn more.
Rails 7.1 Raises on Assignment to Readonly Attributes
In Rails >=7.1, any attempt to assign a value to a readonly attribute will raise an error. This feature is great because it prevents quiet failures that could cause issues with data integrity. If you aren’t on Rails >=7.1 don’t fret, you can implement this in earlier versions by heading over to your application.rb file and setting config.active_record.raise_on_assign_to_attr_readonly to true.
jsx-transform
React 17 includes a new version of the JSX transform which no longer requires importing React into modules. While this may not be an Earth-shattering increase in productivity, the story behind it is pretty interesting. React’s old JSX transform used to compile down to using React.createElement behind the scenes, whereas the new JSX transform uses its own special functions which can increase performance and bundle size on top of eliminating the need for the React import. It’s also very easy to begin applying in an existing app – just be sure to tell ESLint that the imports are no longer needed by setting react/react-in-jsx-scope to “off” in your configuration.
Storybook Ecosystem CI
Storybook is a neat tool for developing components in isolation. This month, they released Storybook Ecosystem CI with the goal of improving the developer experience. The author of the linked post above says it best: “Upgrading npm packages can be a bit like crossing a minefield”. The new platform is intended to be an early warning system for dependency issues so we can avoid said minefield. The features include a status/reporting page, tests that run on each commit, and a notification system.
Contributors:
Learn more about how The Gnar builds software.