• 100 Days of Code
• Installation
• Live Site
• Issues
• Resources
• Copyright
• Let's Connect!

Day 33: February 1, 2022

• 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.

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/design-patterns-101.git && cd design-patterns-101

2. Run the command:

open index.html

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

• Design Patterns 101 is a progressive web app.

• 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.

The partial blue outline that may appear on touchscreen or mobile devices.

• Creating a Card Flip by Dong Xia

• How TO - Flip Card

• Flaticon

• Adobe Photoshop

• Interpreter Design Pattern

• JavaScript Design Patterns

• Design Patterns: Notes by Ray Toal

• Design Patterns JS by Felipe Beline

• Gang of Four (GoF) Design Patterns

• Learning JavaScript Design Patterns

• PDF - Design Patterns: Elements of Reusable Object-Oriented Software

• My blog on how I created my Github READMEs

• This project is for made for educational purposes only.

• Material copyright of © Refactoring.Guru. All Rights Reserved.

• Art copyright of © Dmitry Zhart. All Rights Reserved.