Easy Notifications

Why build your own notifications?

On a few projects now I've had to "reinvent the wheel" of system notifications. This is primarily a result of being unable to style the basic JavaScript alert() function and being extremely limited in what alert() and confirm() can do.

So I thought to myself, why not a really easy notification system that you can plug into any web app. Yes, React-Alerts and many other projects exist. But, all of those you still have to think about implementation and still have to write code.

In my case, there's no code. You can interact with it without ever writing actual notification code. It is my, possibly unpopular opinion, that notifications should be standalone code and should have a simple interface to interact with from anywhere. It really shouldn't matter what component or what API generates an error/notification, it should simply display. I believe this contributes to anti-fragility because when something goes terribly wrong, the last thing you want is for your error notifications to stop working.

How does it work?

Good question! Somewhere in your app, include the CSS+script tag: <link rel='stylesheet' href='https://easy.anti-fragile.io/easy_notifications.css'> <script src='https://easy.anti-fragile.io/easy_notifications.js' default_timeout="3000" initial_delay="5000" ></script> Note the default_timeout and initial_delay arguments. Much of the settings can be applied right in the script tag and never thought about again.

How do you interact with it?

Another good question! When the page is initially loaded you can set initial messages (generated on the server during load) with: <script> window['easy_notifications'].initial_messages=[ { 'message' : "Checkout it out, I've rolled my own notifications!", 'type' : 'success', 'timeout' : '7000' } ] </script>

Then dynamically when API calls are made you can do: window['easy_notifications'].success('Your success message here'); window['easy_notifications'].error('Your error message here'); window['easy_notifications'].info({ 'message' : 'Your error message here', 'timeout' : 0 //no timeout so never disappears until the user clicks the notification });

Here's a success message.

Here's an error message.

Here's a never ending info message.