Project Seventeen: Notifications

Would you like a toast? How about a snackbar? I bet whoever coined these terms for small notification popping up on a website or in an app was very hungry.

Regardless of etymology toast-messages are used in pretty much any service to notify users that operation is complete, failed or something else has happened.

Build one today and you'll certainly use it more than once.

Toast Notification: requirements and recipe

As a user a want a clear message to popup like a toast from a toaster, so that I can be quickly made aware of an important event

There are plenty of ready to use components, here's an example from Material UI:

As usual I'll leave the design to your imagination as long as the requirements are met:

Requirements

1. All notifications should have the same width and preferably the same height
2. They should automatically close after several seconds
3. User should be able to close it manually
4. The amount of toasts present on the screen should be reasonably limited ( to 2-3 or event better - just one)
5. Toast notifications should have proper aria labels
6. Toast notifications should have sufficient contrast

Recipe

1. Design a static message
2. Pick a position on the screen and ensure that the areas around message are still interactive
3. Ensure accessibility
4. Add ability for the toast to be closed after a certain amount of time
5. Add ability for user to close the toast manually
6. Write a function that would create a toast notification with a provided message
7. Add a limit to the amount of toasts on the screen
8. Ping!

Hints

When using setTimeout don't forget to clean the timer when toast is closed or hidden.

To limit amount of toasts on the screen one could use a queue, but show the latest added messages first.

Hard mode: Push Notifications

You've built a way to notify user of what is going on when user is on the page, but what if something important happens when user is away?

And the answer is - send them a push notification. Of course, you should first ask them for a consent and a special token, but you'll be able to figure it out ;-)

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?