August 2022 Frontend Updates: SOLID Principles in TypeScript, Software Design Patterns, Focus Styles and Individual CSS Transform Properties
This month we cover SOLID principles in TypeScript, software design patterns for React applications, focus styles and the new individual CSS transform properties.
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
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
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
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
transform-functions, which get applied one after the other.
transform:translateX(50%) rotate(30deg) scale(2);
With the individual transform properties,
can be used individually to define those parts of a transformation.
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!