This month’s updates:
- SOLID Principles in TypeScript
- Software Design Patterns for React Applications
- Focus Styles and The Outline Property
- Individual CSS Transform Properties
SOLID Principles in TypeScript
SOLID is an acronym for the first five object-oriented design principles by Robert C. Martin, software engineer, best-selling author and founder of the influential Agile Manifesto.
These principles are intended to make object-oriented designs more flexible, and maintainable, avoiding code smells and making code refactoring much easier.
The Shopify engineer José Miguel Álvarez has written an interesting series of articles on how to apply these principles with practical examples in TypeScript. They are concise and easy to read and understand, so check them out and make sure you’re following them!
- Single Responsibility Principle in TypeScript
- Open/Closed Principle in TypeScript
- Liskov Substitution Principle in TypeScript
- Interface Segregation Principle in TypeScript
- Dependency Inversion Principle in TypeScript
Software Design Patterns for React Applications
Like SOLID principles, software design patterns are also a powerful tool for architecting maintainable and scalable web applications. Lydia Hallie and Addy Osmani have collected a lot of these patterns applied to React and JavaScript in the awesome patterns.dev book, which is free to download.
The book is already a great resource, but the website itself is a digital archive of the patterns in the book with practical examples on CodeSandbox and visual animated examples, which is great and really handy.
As they state, design patterns are descriptive, not prescriptive. Just because you know them doesn’t mean you have to use them everywhere, but they are a valuable and proven resource for solving specific and recurring problems that others faced before. Being aware of them will help you grow your problem solving skills, check them out!
Focus Styles and The Outline Property
Focus styles are important if you care about accessibility.
Browsers use the outline CSS property to highlight elements, which is great because it doesn’t
break the layout and works well in forced color modes. But at the same time, it’s not the most flexible one to
style, and making it look good could be tricky.
If you are tempted to use just backgrounds or box-shadows, reading Manuel
Matuzovic’s article will deter you: Outline is
your friend. In his article, you’ll learn why you should use, or at least fallback to
outline
if you want your website to be navigable in forced color modes while you learn some tricks to make your focus
styles more appealing.
Individual CSS Transform Properties
To apply transforms to an element, we use the CSS transform property. The property accepts one
or more transform-functions, which get applied one after the other.
.target {
transform:translateX(50%) rotate(30deg) scale(2);
}
With the individual transform properties, scale, rotate, and translate
can be used individually to define those parts of a transformation.
.target {
translate:50%0;
rotate:30deg;
scale:2;
}
This is interesting for hover styles or animation and transition effects, because you can change one of the properties without having to rewrite the whole transform declaration. And it is supported by every evergreen browser right now!
One thing to take into account is that, unlike in transform declarations, the individual ones are not applied in the order in which they are declared. Check the spec to know about how the transform matrix gets calculated and this interesting article in web.dev if you want to know more about them!
Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!
