Sweet Alert for Bootstrap – Blends nicely with any Bootstrap based project(lipis.github.io)
lipis.github.io
Sweet Alert for Bootstrap – Blends nicely with any Bootstrap based project
http://lipis.github.io/bootstrap-sweetalert/
40 comments
I agree this does look sweet, however this is not a replacement for alert. window.alert() is a blocking function, it prevents further code to be interpreted while the alert or prompt is open.
Sweet Alert came up before and people made this same pedantic and unimaginative addition -- I honestly think this comment serves only to let everyone know that the commenter understands the Javascript execution model. That the thread stops while a native alert is shown is not quite a bug, but I'd argue not a desired feature either.
But given that window.alert has (apparently) two functions:
- Display a message to a user
- Block javascipt execution until a button is pressed
This is a great replacement for those who are using it for #1, which in my experience, is probably >99% of its usage in the wild. If you're using window.alert to, say, synchronize the beginning of an event with a user click this probably will work just fine too. If you need the world to stop until a button is pressed, I'd sooner guess that your application is written poorly.
But given that window.alert has (apparently) two functions:
- Display a message to a user
- Block javascipt execution until a button is pressed
This is a great replacement for those who are using it for #1, which in my experience, is probably >99% of its usage in the wild. If you're using window.alert to, say, synchronize the beginning of an event with a user click this probably will work just fine too. If you need the world to stop until a button is pressed, I'd sooner guess that your application is written poorly.
> Sweet Alert came up before and people made this same pedantic and unimaginative addition
Its presented as a replacement for alert so pointing out that it's not a drop-in replacement seems relevant to me at least. Even if most alert usages can easily be replaced by this (somewhat dubious depending on your definition of "easily"), additional work will still need to be done for many (most?) of them.
Also being able to add a "blocking" call in JavaScript would be a _big deal_, so noting that this does not do so seems like something worth mentioning.
Its presented as a replacement for alert so pointing out that it's not a drop-in replacement seems relevant to me at least. Even if most alert usages can easily be replaced by this (somewhat dubious depending on your definition of "easily"), additional work will still need to be done for many (most?) of them.
Also being able to add a "blocking" call in JavaScript would be a _big deal_, so noting that this does not do so seems like something worth mentioning.
There are of course more functional approaches to delaying execution of code in Javascript, e.g. by using a callback (which this library supports).
Please have "Esc" key cancel\close the dialog box. It is the inherent behavior please do not break it.
I met the most interesting guy once. He was a professor at Columbia and a consultant for Wall Street, helping design UIs for traders.
He explained how we process and prioritize visual cues -- how, if an element expands equally to the left AND right of our field of vision, it gets highest priority because it resembles an object heading toward our face.
For that reason, he avoided this design for everything except the highest-priority events.
Not crapping on your library -- it looks really nice :) But in general, I think it's worth considering if it's necessary to demand users' attention all over the place. I think information overload isn't solely in the content we consume but how it's presented.
He explained how we process and prioritize visual cues -- how, if an element expands equally to the left AND right of our field of vision, it gets highest priority because it resembles an object heading toward our face.
For that reason, he avoided this design for everything except the highest-priority events.
Not crapping on your library -- it looks really nice :) But in general, I think it's worth considering if it's necessary to demand users' attention all over the place. I think information overload isn't solely in the content we consume but how it's presented.
I've been seeing a few of these libs pop up on HN lately. Apparently there's some sort of need here that people are trying to fill, it's just not clear to me what it is.
There are legitamite suggestions that blocking UI paradigms are bad, but they're very useful at times. I'm not arguing either, as I think each has their place (although I tend to avoid blocking personally if I can)
My real question is why now?
There are legitamite suggestions that blocking UI paradigms are bad, but they're very useful at times. I'm not arguing either, as I think each has their place (although I tend to avoid blocking personally if I can)
My real question is why now?
Lots of people on HN develop web apps but aren't great designers, and nifty little libraries like this make our work look better than our own design skill would normally allow. I think it's that simple -- they're not being upvoted for any deep reason relating to UX best practices.
The way the alert comes in is very annoying.
The homepage doesn't tell me if I can customize the animation.
The homepage doesn't tell me if I can customize the animation.
It would be nice if it was possible to select / copy the message in the box. Sometimes you get a message that you want to copy / paste to someone (email, chat, etc) and it's annoying to have to type it out again.
Nice style, and I appreciate that I can hit Esc to dismiss most of the dialogs, though unfortunately not all of them.
As another commenter said, I do wish that clicking outside of it had the same effect, but that may have more to do with what sites typically abuse these kinds of boxes for ("Alert! Sign up to our..." (no go away)).
One issue I noticed: there's a race condition in the second-to-last example ('...and by passing a parameter, you can execute something else for "Cancel".'), where if you hit escape quickly enough as the box gets launched, the cancellation handler does not run.
As another commenter said, I do wish that clicking outside of it had the same effect, but that may have more to do with what sites typically abuse these kinds of boxes for ("Alert! Sign up to our..." (no go away)).
One issue I noticed: there's a race condition in the second-to-last example ('...and by passing a parameter, you can execute something else for "Cancel".'), where if you hit escape quickly enough as the box gets launched, the cancellation handler does not run.
Re: your second point, on the original Sweet Alert page that this is based on it has this parameter:
allowOutsideClick - If set to true, the user can dismiss the modal by clicking outside it.
allowOutsideClick - If set to true, the user can dismiss the modal by clicking outside it.
This really needs to be added to http://jsdelivr.com so we can package it in with existing CDN calls.
There seem to be very sparse examples of how to deploy the library properly, only to implement it.
Visually great. Cool how there's the ability to catch responses and work in the same modal further.
There seem to be very sparse examples of how to deploy the library properly, only to implement it.
Visually great. Cool how there's the ability to catch responses and work in the same modal further.
Anyone can add something to jsDelivr, not just the library author. You can add it yourself if you'd like them to host it.
I still don't get why javascript developers put so much effort into a library and don't provide tests for it.
[deleted]
I usually find alert libraries boring, but these are really cool -- I particularly enjoy the icon drawing animations.
Slight clipping issue http://imgur.com/TKAk41f
And some alignment problems: http://imgur.com/a/ZT6ip
Edit: firefox 24.8.0
Edit: firefox 24.8.0
[deleted](1)
swal("Here's a message!") !== alert("Here's a message!")
Am i wrong or is a replacement not something which replace the original function? (beside the blocking aspect of an alert). Looks beautiful anyway :)
Am i wrong or is a replacement not something which replace the original function? (beside the blocking aspect of an alert). Looks beautiful anyway :)
Looks cool. I'd like to see [esc] to close dialog. And is it a safe default to have [enter] perform the action especially on warning and danger? (just a thought)
This is an eerily similar project to something posted a few weeks ago here. Most notably, the exact same "success" animation.
https://news.ycombinator.com/item?id=8420902
https://github.com/t4t5/sweetalert
https://news.ycombinator.com/item?id=8420902
https://github.com/t4t5/sweetalert
Third line on the link:
This is just a clone for Bootstrap of the original SweetAlert.Wow...my eyes must be going.
It's a fork of the repo you mentioned, but with Bootstrap.
Why would I use this instead of the built-in modals? Seems like it does the same thing.
When you want a nice looking off-the-shelf feedback modal with a simple API without depending on Bootstrap JS and the entirety of jQuery.
In that case, why would I want a library that is specifically designed to work with Bootstrap?
I'm pretty sure this library simply forks SweetAlert to use Bootstrap's markup and Less variables. So it comes out of the box plugging into Bootstrap CSS and your overrides (like, I imagine, a Bootstrap theme from bootswatch.com).
I have a Bootstrap CSS + React app that uses React for everything I'd need Bootstrap JS for. The cost of Bootstrap JS is 9.9kb + 32.5kb (jQuery) = 42.4kb. Meanwhile, SweetAlerts JS weighs 3kb gzipped and comes with a simple API for exactly what I want to do.
I have a Bootstrap CSS + React app that uses React for everything I'd need Bootstrap JS for. The cost of Bootstrap JS is 9.9kb + 32.5kb (jQuery) = 42.4kb. Meanwhile, SweetAlerts JS weighs 3kb gzipped and comes with a simple API for exactly what I want to do.
OK, that makes sense. Not my scenario but I can see the purpose now.
Just in time for Halloween! Scary, jarring alerts.
Very slick!
The icon animations are really slick!