The design-patterns-101 from emjose

To begin learning about design patterns, I made flip cards by adapting my Agile 101 project.
Design patterns are general solutions to commonly occurring problems in software design.
Design patterns can be described as reusable and customizable blueprints or templates.
The flip cards feature the 23 design patterns first described in the book:

Design Patterns: Elements of Reusable Object-Oriented Software (1994)

by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides (known as the the Gang of Four)
The material and art are from Refactoring.Guru and Dmitry Zhart. Images formatted with Adobe Photoshop.
This app is best viewed on a desktop computer or a laptop, using a Chrome, Firefox, or Edge browser.

git clone [email protected]:emjose/design-patterns-101.git && cd design-patterns-101

open index.html

• Design Patterns 101 is keyboard accessible, and a mouse hover will flip a card over.

• Pressing the tab key (or a mouse click) will pause a selected card in its flipped state.

• A tab key press or a mouse click outside of the flipped card reverts that card to its original state.

• On a touchscreen device: tapping another card will flip the previously selected card back to its initial state.

This app is best viewed on a desktop computer or a laptop, using a Chrome, Firefox, or Edge browser.
Like its sister project Agile 101, the Design Patterns 101 cards didn't flip correctly on a mobile phone.
The primary issue is that the :hover pseudo class is problematic on touchscreens.
Stack Overflow questions ( One • Two ) led to the solutions of adding :focus to CSS properties and tabindex="0" to HTML elements.
The vendor prefixes (-webkit-, -moz-, -ms-, -o-) were also added to the transform and backface-visibility CSS properties.
An issue with some touchscreen devices: Tapping a card may yield a partial blue outline that doesn't correctly surround the card. However, cards will flip correctly when tapped.
August 2022 update: The partial blue outline issue was resolved by disabling the outline property and enabling the border property for the :focus state in a mobile media query.