Surprise & Delight

A presentation for the Franklin Developers Lunch Learn on 8 Feb 2022

Front End

CSS Transitions

CSS Keyframes

CSS Animations

CSS Basic Parallax

Source

background-attachment: fixed;

JS Dynamic Motion

• Dynamically applying a CSS class
• Parallax
  • Rellax
  • RE.com example

JS Keyboard Shortcuts

• mousetrap

Back End

Tracking User Activity

Personalized Messages

• Greet your users by name!

  • Hello, Absalom!

Personalized Insights/Stats

• Let them know you appreciate their activity in your platform

  • Welcome back! You've been busy... You've completed over 25 lessons this month!

User Preferences

• If saving in a cookie, you can remember across sessions.
• If saving to a DB, you can remember across devices!

Gamification

Achievements/Unlockable Content

• Stack Overflow -> Reputation
• Reddit -> Karma
• YouTube -> Views
• Medium -> Claps