Typescript best practices for client-side apps written in React

1. Avoid using React.PropTypes to define component’s props if you don’t have a specific use-case Fully leveraging TypeScript’s capabilities to make your code cleaner and simplistic is the first rule when using it in combination with React. Components' accepted props should be defined either via interfaces or type aliases. If your next question is “Which one should be used when?”, the answer is that they can be used interchangeably, as they are very similar, but there should exist consistency across your codebase....

May 4, 2023 · 8 min · Lucian Costin (Lukas) Ailenei

Get rid of redundant CSS selectors by making use of :is() and :where() pseudo-class functions

Both :is() and :where() CSS pseudo-class functions take a <forgiving-selector-list> as their argument, and select any element that can be selected by one of the selectors in that list. :is(<forgiving-selector-list>) { /* ... */ } :where(<forgiving-selector-list>) { /* ... */ } Using them can come with visible improvements related to the amount of code written by reducing repetition, making things simple, less verbose, and less error-prone. What is a forgiving-selector-list? You’ve probably seen in practice that the general behavior of a selector list is that if any selector in the list fails to parse, the entire selector list becomes invalid....

February 15, 2023 · 5 min · Lucian Costin (Lukas) Ailenei