August 2022 Frontend Updates: SOLID Principles in TypeScript, Software Design Patterns, Focus Styles and 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

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!