Can I build a JavaScript library from scratch in just 30 minutes!?

⏳ Timestamps
00:00 - Intro
01:37 - Designing the API
07:26 - Creating the Class
10:45 - Adding Options
15:00 - Methods
17:25 - Showing the Notification
23:34 - Styling with CSS
29:09 - Auto-Dismiss
30:45 - Manually Dismiss
35:22 - Debugging!!
39:23 - Style the Button
42:43 - Custom Events
53:03 - Wrapping Up

[Loige]

Super awesome video! I'll feature this in my next newsletter :)

[plgueis]

Love the videos. Thanks for another gem :)

[cam-parry]

Great video! For anyone interested the solution to the falsy values like 0 and false not working in the options object is to use the ?? (nullish coalescing) operator instead of the || (or) operator, this will then only use the default if the value is null or undefined.

[hldnjck]

Would you consider the HTML <output> element appropriate for toast messages?

[stacherski]

So... I just week ago instructed my work colleague on how to built notification center with notification fetched from local storage to which these notification are first pushed in with Notification class, tada! Do I feel psychic connection of sort? Yeah!

[IainSimmons]

Great video, though i fully expected you to use a HTML web component for this. Can you explain why you didn't do that in this case?

Because it seems like it would have been better than having to provide a selector, and the custom element could have the attributes for the options.

And i think you could still expose a method from the class to trigger the notification from JS, right?

[SethARoby]

You could have kept `options.dismissable` by using `??`, with `this.dismissable = options.dismissable ?? true`

[tithos]

.toast-el is a better identifier for the base div