to something other than the default create react app content

Idea:

• bar (maybe a header or footer, or just a bar under the main lesson) with all lesson names, clicking on a lesson name takes you to the lesson
• current lesson is highlighted in the group, others slightly dimmer
• organize as a row of dots or bubbles, maybe with arrows between

CityLab instructors raised concerns that they would like there to be less text on each slide so that there would be more opportunities for them to insert themselves to explain or teach some of the material.

To make it easier to navigate through/test the lessons, have valid autofilled passwords at each stage. Ideally, these will be randomly generated, but hardcoded will be fine for testing.

Experiment with using different character sets for the variety lesson, as using vowels is a bit awkward.

Ideas:

• "abcdef"
• "qwerty"/similar

Add a mathematical explanation of how many more passwords can be generated

• for length: compare using 4 digits and however many digits they enter
• for variety: compare using the smaller alphabet vs the larger alphabet

Would be cool to also have a description of how fast computers can generate passwords, and state that the animation is slowed down.

Feedback from matt and alyssa for user friendliness

• larger buttons
• text alignment
• tweak highlight system
• make card sizes consistent
• remove walls of text
• remove case sensitivity on social engineering portion

start a timer when the password generation starts to show users how long it took to generate

Add animation or have users click through the chat

feedback from Emmy

• For jason’s password guessing part—disable case sensitivity, add cat/cats as one answer, maybe add hints for consecutive wrong answers
• some way to highlight important takeaways would be good—putting info in a box of some sort or highlighting it can differentiate key information from activity instructions

When the keyboard is opened to input a password on an Android phone, the lesson text slides up behind the phone component as displayed below (screenshot taken on a samsung galaxy note 8)

Using the device simulator in the chrome DevTools, I've found other visual bugs using:

• Moto G4, Galaxy S5, iPhone 5/SE: text is partially visible or not visible at all
• iPhone 6/7/8: text is visible, but right up against the phone (poorly padded)
• Surface Duo: text is entirely rendered behind the phone
• Galaxy Fold: text is partially behind the phone

add filler instagram posts, decide on security questions

belated, but could be a good idea to add:

• eslint
• husky
• editorconfig

Likely involves some significant refactoring.

CityLab instructors will instead teach a small lesson on permutations and combinations prior to introducing passworks.

feedback from Emmy

• differentiate buttons on left and right side to further differentiate phone screen + instructions
• add scroll bar to phone on the instagram page part
• bottom part with all the lesson names and progress should be at the top if there’s space

Using multiple choice questions on the material covered between breakpoints, for example, was suggested at the meeting.

For example, "wow! Using six digits, the computer took 3x as long!"

Make the transition between the password submission and result less awkward.

Possibility: put the input and result in a different component just for the common password lesson, and have them be rendered together on the phone screen to eliminate the need for going back and forth between slides.

meta tags

Add a social engineering lesson.

Idea:

• Jason uses the same password for everything (and we know what the password is)
• we're trying to break into one of his accounts
• account has security questions that we need to answer
• we use Jason's instagram posts to answer the security questions

Ideas for filling screens:

• #7
• add welcome messages or graphics to other screens
• add common passwords table
• show examples for "you'll often see many sites recommend you use ..."

For example, relative-sized bubbles.

This can be as simple as a password strength checker. Consider https://github.com/dropbox/zxcvbn.

migrate away from using the CountUp package and create our own password generator + timer