
An alternative to alert() - zackbloom
http://github.hubspot.com/messenger/
======
masklinn
Not modal, not dismissable, not necessarily working depending on browser.

That's not an alternative to alert, that's just one more notification popup
thing out of a billion or two.

~~~
zackbloom
It's dismissible, try showCloseButton.

It's an alternative to alert in the sense that you can use it to provide a
better experience than {error: alert}. It's not a great option for modal
alerts.

What browser does it not work on? We'll file an issue.

~~~
bjourne
Most people only use alert() for debugging. It blocks the thread of execution
until dismissed which is a nice feature. However, alert() is almost never used
to display user-visible messages, which one definitely would use your nice
looking plugin for. The concept is called "flash messages" and there are some
other plugins that also implement them, but they are not as sophisticated as
yours.

~~~
bitdestroyer
They are also known as Toasts. I believe that's what the Android SDK refers to
that concept as, as well as many other libraries.

~~~
asveikau
I remember this as a Microsoft term, based on notifications from Outlook and
MSN Messenger. The analogy is that it pops up like toast from a toaster.

------
tzaman
Super nice, but TWO dependencies? jQuery I guess is okay, since it's already,
well, everywhere - but backbone?

Don't get me wrong, the first thing I thought was "Gotta use this somewhere",
but if I need Backbone (a great library for where it fits!) just to make
alerts prettier, then no thanks.

~~~
zackbloom
It would be nice to get rid of Backbone. The chief dependency is the event
parsing piggybacks on Backbone's, but it shouldn't be too hard to pull that
code out and include it directly.

~~~
tzaman
Ping me (tomaz[at]codeable[dot]io) if you do that (getting rid of Backbone
dependency), I'll be more than happy to include it in our product, since we're
just in the middle of implementing a notification system.

~~~
zackbloom
Wilco: <https://github.com/HubSpot/messenger/issues/9>

~~~
tzaman
Excellent, and while you're at it, make it a proper jQuery plugin then
advertise it like one. Review sites and bloggers will be more than happy to
put it in their "Top X jQuery plugins" posts, giving you a wider reach.

------
etrinh
Personally, I found this a breath of fresh air from the modal-based alert
dialogs out there, although I wouldn't call it an alert per se. Alerts (as
others have mentioned) block the UI and prevent the user from interacting with
it until the message has been dismissed. This is more of a low-key
notification element.

First of all, I'm not crazy about the other themes, but Future (the one
enabled by default in the demo) is gorgeous. Maybe I'm just a fan of circular
progress bars, but check out the demo involving "Error destroying alien
planet." This is really pretty!

The stated use case for this is "transactional messages in your app." For that
I think it fits pretty well. It might work as a debugging utility, similar to
how we used alert() before we had console.log(), but it seems like the
intended use case is for an end-user-facing interface.

Two minor gripes: 1) Backbone as a dependency for a UI element is kind of
overkill. 2) This is more of a pet peeve, but why is the demo written in
Coffeescript? I love Coffeescript and use it all the time, but I think it
makes more sense for something like this to be demoed in Javascript. People
who know Coffeescript are a subset of people who know Javascript, so you cater
to a larger demographic this way.

That out of the way, great job on this. I'll have to find a project to use
this in :)

------
MitziMoto
I think it's pretty clear that the intention of this tool is to provide
alerts/notifications to users. Not sure what all the clamoring like "It
doesn't do this" or "It doesn't work exactly like alert() in this way" are all
about.

Anyway...Nice work, zackbloom. The notifications look and work great.

~~~
WiseWeasel
I'm going to guess it's due to being billed as "an alternative to alert()",
while alert() is rarely used to display messages to the user.

------
jxf
I love the action buttons and the countdown timer. Very useful, though I might
suggest optionally pausing the timer when the user mouseovers; that way if
they want to take an action things are suspended. On the whole, it's a bit
rough around the edges (close button is not always in the right spot on Chrome
on Ubuntu; overlaps with the scrollbar, etc.) and I wouldn't use it in
production just yet. But it's a great contribution.

------
spicyj
alert() and confirm() have one feature that no other alert system can match --
the execution of the surrounding script blocks at the calling location.

~~~
Drakim
Indeed, it can be abused as a sort of primitive step-by-step debugging tool.

~~~
zackbloom
I remember the days before the "Don't allow this site to show more alerts"
checkbox when, if you accidentally left an alert in a loop, your only option
was Ctrl-Alt-Delete.

~~~
ysangkok
Weird how you had JavaScript support but no process killing. I imagine you
must have used DOS. What browser? Arachne didn't have JavaScript support...

~~~
kibibu
Ctrl-Alt-Del is one of the ways to access the task manager in Windows, with
which you can kill a process.

------
STRML
I tried it out on an app I'm building. A few notes:

1\. The documentation is pretty lacking IMO. I would really like to see a
unified "This is every option available to you" section. I have to dig through
the code to figure out what is and isn't available.

2\. Please do the docs in Javascript, otherwise it is very difficult to notice
that you're actually passing TWO objects to $.globalMessenger.do().

3\. A few of the code examples don't run, and a few don't look like they're
meant to run. These should be in a separate 'notes' section (along with the
options!)

4\. Just an FYI, to get this to work with Backbone.LayoutManager I had to add
manage:false to the Messenger and Message classes.

5\. Why is the counter hidden in the future theme?

All in all a pretty solid library! Clearer documentation would do wonders but
I am enjoying it so far. I really like the delay implementation, especially.

~~~
zackbloom
Thanks. I created a few gh issues to track these.

Re the counter, it is planned that the spinner would take the place of the
countdown in the future theme. The messenger-retry-soon and messenger-retry-
later classes are in there to make it possible, it just has to be wired up.

Any thoughts on #4, do you think it makes sense to always include {manage:
false}?

~~~
STRML
I was thinking about that. While one part of me thinks that the library
shouldn't have to specifically support libraries like LayoutManager, the
reality is that there is no way to make it work without transplanting that
code into GlobalMessenger. Considering it doesn't affect non-LayoutManager
installations, it may as well be in there.

Just a quick question - the $._messengerDefaults hash allows me to set a
couple simple defaults across the app, but it appears that it can't set other
defaults (e.g. showCloseButton). Is there an official way of setting this app-
wide or do I need to just hack it in?

~~~
zackbloom
I'll merge in a branch in a bit which gives you the ability to set
$._messengerDefaults.messageDefaults

edit: merged!

~~~
STRML
Great, thanks!

------
wickchuck
Got to give you props on the demo website, I like the layout you used where
you have all the code with the RUN link right next to it. Very clean

~~~
zackbloom
If it can be of help: <https://github.com/HubSpot/executr>

------
niggler
The X to close messages doesn't respond on ipad (running in chrome for IOS but
I think safari does the same)

Also, in the change location thing, can you show what the current setting is
(make the corresponding box darker).

~~~
zackbloom
We'll take a look at it on an iPad, thanks!

------
anthonyb
Nobody's mentioned Blackbird JS yet, so:
<http://www.gscottolson.com/blackbirdjs/>

Filterable log messages, closable and easy to stub out when you go into
production.

------
hayksaakian
This is more a purr/growl replacement than a alert() replacement.

------
bmuon
This would be a true alternative to alert in older browsers if it provided
what alert() doesn't: object inspection.

~~~
zackbloom
Something like?

    
    
        prettyAlert = function(obj){ 
          alert(JSON.stringify(obj, null, 4)); 
        }

~~~
bmuon
No, I'd like to see the same as used in Firebug, a sort of expandable tree
that gets updated as the object is modified.

------
thejsjunky
Looks useful. Not having click to dismiss/a close button by _default_ is sheer
madness though. Users expect to be able to close popups and having it just sit
there is frustrating.

Also quite of few of the examples fail for me on Iceweasel, throwing reference
errors for "msg" etc.

~~~
zackbloom
Yep, not all the demos are 'runnable' on their own (they shouldn't look like
they are). They try to use 'msg', even though its not defined in their scope
[each example runs with it's own scope].

~~~
thejsjunky
> (they shouldn't look like they are)

In that case I'd suggest not putting a big "run" button next to them and
mixing them in with ones that are "runnable".

Or if you mean "they should look like they will cause a reference error" that
would also be wrong - "each example runs with it's own scope" is not obvious.

Keep code that is purely "example code" and code that is intended for
functionality demonstration separate. If you need to give example code as part
of your explanation of the functionality it should appear with the explanation
not in the same box as the demo code.

------
BaconJuice
It would be nice if we were able to run the edited code for viewing purposes.
Kinda like what they did here <http://pinesframework.org/pnotify/#demos-
simple>

------
envex
If you're going to build an alternative to something, it should be easier to
use.

    
    
        alert("Your request has succeded!");
    

is way easier than

    
    
        $.globalMessenger().post "Your request has succeded!"

~~~
zackbloom
Would

    
    
        alert = $.globalMessenger().post
    

help?

Each time you call globalMessenger() it gets a chance to do some checking to
make sure it's at the right place on the page and has the right classes, but
if you're not doing anything fancy (like injecting it into a page which keeps
getting rewritten), this should be fine.

~~~
envex
My main concern is the amount of typing especially when I'm just wanting to
debug something with alert or console.log().

It seems like overkill for a function that's (mainly) used to debugging.

~~~
zackbloom
That's a miscommunication then. It's mainly for providing feedback to the
user, e.g. "Document saved", "Error deleting user", "Can't connect to the
server, retrying in 4", etc.

For debugging, you should probably use console.log.

~~~
envex
True, I think it was my stupidity. Sorry about that.

~~~
zackbloom
Not at all, it wasn't the best title. Thanks for pointing out the confusion.
We (HubSpot) are all talking about writing an actual alert replacement now :).

------
hamburglar
Very nice, but you really chose the wrong title. My initial reaction was "how
is a replacement for alert() interesting in any way?" Glad I clicked anyway.

------
c4urself
I was actually hoping for an alternative to using alert() in IE7, as that's
the only place I still use it for debugging purposes

~~~
hkuo
If you use jquery, I wrote this really simple snippet that I use for quick
down and dirty debugging.

var logit = function(x){$('body').append('<div
id=logit></div>');$('#logit').css({'background':'#000','position':'fixed','bottom':0,'right':0,'color':'#fff','padding':5,'font-
family':'arial','font-
size':'9px','z-index':9999});$('#logit').append(x+'<br>');};

It could very easily be adjusted for non-jquery too.

Then just call it like: logit(whateverYouWantToDisplay);

------
JacksonGariety
What happened to console.log() ?

------
bratsche
How about accessibility? Is there any story, or any plan for that?

~~~
zackbloom
It's a good question, we'd love to get any experience you have on the topic. I
created an issue to track it if you can weigh in:
<https://github.com/HubSpot/messenger/issues/10>.

~~~
bratsche
Sweet, thanks very much!

------
asc76
Slick design. My gripe is backbone being a dependency.

------
Too
Is there any demo page?

~~~
zackbloom
There was a bug with the rendering on firefox which caused the run buttons to
not appear. Should be fixed!

------
engel_sanchez
Rock on Zack!

