Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

User Feedback UI - Toasts, Flash, Validation

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:24">00:24</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:04">01:04</a> Why use these types of notifications</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:34">03:34</a> Old school checking stories</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=05:35">05:35</a> What kinds of toast messages are there?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=10:02">10:02</a> Why toast?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=11:38">11:38</a> Best practices for toast messages</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=17:09">17:09</a> Timeouts and manual close auto close</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=19:38">19:38</a> Multiple messages stacking on top of each other</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=22:56">22:56</a> Using a toast library</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://web.dev/building-a-toast-component/">Building a toast component</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://react-hot-toast.com/">react-hot-toast - The Best React Notifications in Town</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://www.magicbell.com/">Real-time notification system for products | MagicBell</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=28:29">28:29</a> Form validation</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/"> Form validation with HTML5 and JavaScript</a></li> <li class="has-line-data" data-line-start="18" data-line-end="20"> <a href="#t=33:36">33:36</a> HTML inputs</li> </ul> <h2 class="code-line" data-line-start="20" data-line-end="21"> <a id="Tweet_us_your_tasty_treats_20"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

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

Aplikace Youradio Talk

User Feedback UI - Toasts, Flash, Validation

Poslechněte si podcast