User Feedback UI - Toasts, Flash, Validation

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 24 July 2023

⏱️ 38 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0	Monday! Monday! Monday! Open wide dev fans! Get ready! To stuff your face with
0:07.0	JavaScript CSS! Node modules! Barbecue tips! Get workflow! Break dancing! Soft skills!
0:12.0	Web development! The hastiest! The courageous! The tastiest! Web development
0:17.0	treats! Coming in hot! Here is Wes Barakuda! Boss! And Scott El Torro Lugo!
0:24.0	Tolinsky!
0:26.0	Welcome to Zintax! In this Monday hasty treat, we're popping up into your inbox to talk
0:33.0	about toast messages. Talk about flash messages to talk about user validation.
0:39.0	All the types of things that you need to know about giving your users proper feedback
0:44.0	for when something happens in your application. My name is Scott Tolinsky. I'm a developer
0:50.0	from Denver, with me as always is Wes. Boss! What's up Wes? Everybody excited to talk
0:55.0	about flash messages, toast messages, and whatever other type of messages will pop up.
1:01.0	Oh, whatever message will pop up. Well, let's get into it. You know, I think the first
1:07.0	thing you have to know about this type of stuff is these things really come into
1:11.0	handy first and foremost when you need to alert the user of something that's going
1:16.0	on, but unlike in alert or like a modal or a popover type of deal, those things
1:22.0	typically like really take the focus away from whatever you're doing, right?
1:28.0	They go in front, they maybe like a modal prevents click on anything else.
1:32.0	And it like really sits there on top of your application.
1:36.0	Where these types of things like a user feedback toast or flash message or even
1:42.0	validation from a form, they're typically enhancements or their suggestions,
1:49.0	their little dings, right? You're walking through the airport and you hear
1:53.0	a ding, ding, ding, you know, that's what they're there for.
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.