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

Day 31: November 29, 2021

• I am learning about the Agile Manifesto, which is a set of values and principles.

• The Agile Manifesto is used to guide teams in the decision-making of software development, and Agile methodologies are popular in project management.

• As a personal study guide, I created flip cards of the 4 values and 12 principles of the Agile Manifesto.

• Companion project to Agile 101: Design Patterns 101.

• The graphics and material are from Scrum Alliance and Selleo. 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/agile-101.git && cd agile-101

2. Run the command:

open index.html

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

• Agile 101 is a progressive web app.

• This app is best viewed on a desktop computer or a laptop, using a Chrome, Firefox, or Edge browser.

• After deploying Agile 101 on Vercel, I discovered that the 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.

• A remaining issue with 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.

• A regular mouse hover will still flip a card without clicking.

• With :focus now in place, Agile 101 is now keyboard accessible.

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

• A tab key press or a mouse click outside of the card reverts the card back to its initial state.

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

• Creating a Card Flip by Dong Xia

• How TO - Flip Card

• Adobe Photoshop

• The Agile Manifesto

• Video: What is Agile?

• Agile Manifesto Graphics

• What is the Agile Manifesto?

• Agile Values And Principles - Do They Still Matter?

• My blog on how I created my Github READMEs

• This project is for made for educational purposes only.

• Graphics and material are copyright of © Scrum Alliance and © Selleo. All Rights Reserved.