
Notie.js: A JavaScript notification plugin without dependencies - kevindeasis
https://github.com/jaredreich/notie.js
======
jordanlev
> Works in all modern browsers (Chrome, Firefox, Safari, IE, Edge, Opera)

For people who are concerned with backwards compatibility (which I know isn't
everyone, but it is a necessity for my work), it would be super helpful to
clarify this statement. Specifically, how far back in IE does it go? What
about mobile Safari vs. desktop, and what about the Android browser?

Thanks, looks like a neat little utility.

~~~
jaredreich
You're welcome, it was fun to make! It is a good idea to add detail to the
browser compatibility and I will eventually do so. It was before this repo
gained popularity that I did the quick browser testing to warrant that
statement. Thank you for the suggestion.

------
danielstocks
A plugin for showing notifications, packing ~700 LOC and 25kb of JavaScript. I
can admire the "no dependency" ambition but at the same time it's marketed as
a plugin that has everything you'll ever need, probably targeting the audience
that is already using Bootstrap and/or jQuery. Let's solve all the DOM quirks,
again.

That being said, there's a probably a lot of useful stuff in there and some
inspiration if you want roll your own solution!

~~~
nailer
Please don't depend on bootstrap. Require jQuery if you really need too,
otherwise raw DOM would be lovely and keep your deps down.

~~~
Can_Not
Building on this, if you do support BS3/4 be sure that the boostrap stuff is
either an separate dedicated file/folder or an add-on file. Anyone who cares
about those extra files should be using gulp/grunt/webpack anyways.

------
jaredreich
Hello everyone! I'm the creator of notie.js and although I'm a frequent
browser of HN, I found this post from a fellow who placed the link in a
comment in one of the GitHub issues. Very cool to see someone promoted this!
Thank you for all the comments/suggestions/feedback!

------
roadbeats
It's ok to have dependencies. If you want to avoid big dependencies like
jQuery, there are tiny DOM modules that you can pick and use;
[http://github.com/npm-dom](http://github.com/npm-dom)

------
fcanela
It is a pity: I consider this kind of notification really attractive but
proved to be a antipattern in the projects I implemented.

Notifications are better when shown near the event source. If your user base
includes some non-technical profiles they can become confused by this kind of
message without context.

It can work for global announcements that can not be tied so a specific source
or they are hidden and are important ("remember to activate your email").

This was just my experience. Congrats anyway for the work, it is really
visually appealing.

~~~
jaredreich
This is true about the notification potentially not being close to the action
point - though the way I thought of it is that the user should know what
action they just took therefore will understand the message they just got.
Especially if the site uses this library throughout, the user will be used to
this kind of feedback on their actions. It also makes it a bit more friendly
for responsiveness as the developer doesn’t have to worry about placement or
if the alert will fit on the screen properly.

~~~
iamthepieman
I try to keep related interactions near each other so showing notifications
near the source turned out to be more problematic than having a single place
for notifications (like near the top where there useful information can be
seen but no interactions occur)

It was apparent after just a simple mockup that the notifications would get
int he way if the user was makign many rapid interactions.

In my paricular application the notifications could be used as a history of
interactions that could be opened up and examined in more detail.

------
pacomerh
Handy. But was browsing through the code, and I didn't find it that clean,
maybe personal taste. I like to use plugins that are solid.

    
    
        function input(title, submit_text, cancel_text, type, placeholder, submit_callback, prefilled_value_optional)
    

Feels like this function has too many parameters, might be doing too much.

~~~
nailer
It's also in snake case, whereas JavaScriptuses camelCase (with the odd
exception, like title case prototypes and lowercase event handlers).

------
Diederich
I've used this lightly/moderately, and it's worked well with no surprises.

------
univerio
Neat, though I read the name as "Not IE" at first.

------
SimeVidas
Keyboard accessibility is missing.

~~~
bunkat
Nothing is missing, the library does what it does. If you need keyboard
accessibility you are free to add it.

~~~
SimeVidas
Libraries that display overlays with interactive elements should be keyboard
accessible, by default.

~~~
bunkat
Sure, if you want to pay the developer to create interactive elements for you
feel free to specify the requirements. Since nobody paid for this work, and
nobody is requiring anybody to use it, there is not a single feature that
should be included 'by default'.

