User Feedback UI - Toasts, Flash, Validation

In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more.

Show Notes

• 00:24 Welcome
• 01:04 Why use these types of notifications
• 03:34 Old school checking stories
• 05:35 What kinds of toast messages are there?
• 10:02 Why toast?
• 11:38 Best practices for toast messages
• 17:09 Timeouts and manual close auto close
• 19:38 Multiple messages stacking on top of each other
• 22:56 Using a toast library
• Building a toast component
• react-hot-toast - The Best React Notifications in Town
• Real-time notification system for products | MagicBell
• 28:29 Form validation
• Form validation with HTML5 and JavaScript
• 33:36 HTML inputs

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

Episode source