BT

SweetAlert Provides Alternate Way to Alert Users

| by David Iffland Follow 4 Followers on Oct 09, 2014. Estimated reading time: 2 minutes |

SweetAlert is a new modal dialog box library for JavaScript with a focus on style but without any external dependencies. The developer behind it, Tristan Edwards, created it as a way to ease the pain web designers experience when dealing with error messages.

Developers can use SweetAlert just like the built-in JavaScript alert function: 

sweetAlert("There's a Problem!");

The result is a modal dialog box centered in the screen:

Beyond simple alert messages, it also includes a confirmation dialog box and many customization options.

When InfoQ asked about his motivation for creating SweetAlert, Mr. Edwards had this to say:

Error messages are a pain for web designers. They're boring to make, and therefore don't get a lot of design-love. In my own projects I have several times felt really lazy myself and just decided to use the generic alert()-function, even though I felt really dirty afterwards... I finally decided that this couldn't be postponed any longer, so I decided to make the sexiest error message plugin ever.

Developers were quick to point out that, despite the marketing claim, it is not a true replacement for alert() or confirm() because it does not block execution. Description semantics aside, the project made an impression in the web community. At just a week old, over 4,500 users starred the GitHub repository and it led the monthly trending repository list.

Within days of its first appearance, the community checked in code to cut out a dependency. "The plugin used jQuery in its first version, and people seemed to absolutely hate that for some reason," said Mr. Edwards. Connor Hindley, an engineer at RedHat, checked in a commit he called "hack 'n' slash" which removed the jQuery dependency.

This lack of dependencies resulted in reduced browser support. Mr. Edwards stated that, in his mind, "Internet Explorer does not exist." As such, support for the Microsoft browser is not a priority, though it does work on IE11.

A competing library, smoke.js, claims to support IE6 and above. At some point, libraries like this may be replaced by the HTML5 dialog element which provides complete customization and an integrated manipulation api. Currently, there isn't broad browser support for this element.

Other developers had positive comments. In a tweet to Mr. Edwards, David Sivocha said:

@t4t5 Just stumbled across your sweet alerts! Absolutely love them and can't wait to use them in a project! Thanks for making something cool

Over on Product Hunt, Troy Osinoff said "this IS much sweeter. Great design".

Mr. Edwards encourages readers to contribute to the GitHub repository.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT