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.
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:
https://twitter.com/kaelig/status/1172579203893456896’
Their tools is conveniently open sourced: