Notie.js: A JavaScript notification plugin without dependencies | Hacker News Reader

Notie.js: A JavaScript notification plugin without dependencies

github.com

62 pointskevindeasis31 comments

> 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.

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.

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!

You’re very right, I guarantee there is a certain level of bloat to the .js file - the repo you see in there at this moment is not far off of the version 1.0 that I created just to achieve the desired functionality. As you’ve noticed - there are probably a lot of optimizations and improvements to be made.

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

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.

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!

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

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.

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.

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.

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.

Is there an alternative library with similar functionality that you use/recommend?

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

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

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

Keyboard accessibility is missing.

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

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

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'.

There is a GitHub issue for keyboard accessibility, although I don’t see this as a necessity it shouldn’t be too hard to add, so I will probably get to it at some point. Thanks for the feedback.

Reply on news.ycombinator.com