Linting for product correctness

Inspired by this tweet thread by Rafael Mendiola, where he describes the idea of creating custom ESLint plugin to enforce rules that help developers adhere to a design system.

It culminates in an example eslint-plugin-design-system:

And here’s a good article on how to write custom ESLint plugins:

SLDS Validator

The team behind the Salesforce Lightning design system created an neat extension for VS Code:

SLDS Validator scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code.

And it’s open source!

Splash zones

In this case, a “splash zone” refers to the parts of a system affected by a change to the system. If I edit a component, what other components are affected?

Some devs at Shopify have built a yarn splash command that determines the splash zone of changes to their component library:

Their tools is conveniently open sourced: