Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Favicon alert bubbles

tommoor.github.com

Post reply on HN
Print view View original

11–20 of 65 posts

Re: Show HN: Favicon alert bubbles

#11

Post by jbri »

rjvir wrote: post #9
abcd_f wrote: post #6

Earlier quoted context omitted.

While I appreciate a good piece of code and the need to reinvent a wheel, I wouldn't call your implementation "aesthetically pleasing" either. IMO your fallback option is the solution, simply appending "(5)" to the page title when there are 5 pending alerts works the best. [edit] And I am being downvoted because... ?

There are certain situations in which only the favicon is displayed - for example, when tabs are "pinned". In these cases, appending text to the page title would not be visible, which is why it's beneficial to have a dynamic favicon.

Also, in many cases the title of a page is longer than the area it's supposed to fit in - in which case, appending the alert to the page title results in it not being visible.

Re: Show HN: Favicon alert bubbles

#12

Post by mooism2 »

abcd_f wrote: post #6
tommoor wrote: post #2

Tinycon is a javascript library that allows easy manipulation of the favicon to include nice looking alert bubbles. This means that users can pin your site and still see when their attention is needed! It's been done before, but in my opinion not in a way aesthetically pleasing enough for production use. This library also falls back to the standard number in page title approach for browsers that do no support canvas…

While I appreciate a good piece of code and the need to reinvent a wheel, I wouldn't call your implementation "aesthetically pleasing" either. IMO your fallback option is the solution, simply appending "(5)" to the page title when there are 5 pending alerts works the best. [edit] And I am being downvoted because... ?

Appending to the end of the page title doesn't work, because the end of the title gets chopped off when it doesn't fit in the tab title or window title.

Prepending to the start of the page title does work though.

Re: Show HN: Favicon alert bubbles

#14

Post by tommoor »

abcd_f wrote: post #6
tommoor wrote: post #2

Tinycon is a javascript library that allows easy manipulation of the favicon to include nice looking alert bubbles. This means that users can pin your site and still see when their attention is needed! It's been done before, but in my opinion not in a way aesthetically pleasing enough for production use. This library also falls back to the standard number in page title approach for browsers that do no support canvas…

While I appreciate a good piece of code and the need to reinvent a wheel, I wouldn't call your implementation "aesthetically pleasing" either. IMO your fallback option is the solution, simply appending "(5)" to the page title when there are 5 pending alerts works the best. [edit] And I am being downvoted because... ?

Hey, the number in title approach definitely has its place! (There's a reason why Facebook, Google use that approach right?)

But if you have an audience skewed towards modern browsers and want to do something a little different this works well and definitely draws the eyes attention.

Re: Show HN: Favicon alert bubbles

#15

Post by tommoor »

joshmanders wrote: post #7

I see in the demo it stops at 99, does it not handle 3 digits very well? If it doesn't would it be good to make it do say 99+ like Gmail does?

It overlaps a little but it's still readable - I think the + approach would be good, i'll look at adding it soon :)

Re: Show HN: Favicon alert bubbles

#16

Post by mbrzuzy »

tommoor wrote: post #2

Tinycon is a javascript library that allows easy manipulation of the favicon to include nice looking alert bubbles. This means that users can pin your site and still see when their attention is needed! It's been done before, but in my opinion not in a way aesthetically pleasing enough for production use. This library also falls back to the standard number in page title approach for browsers that do no support canvas…

I was just the other day thinking of whether something like this exists, and this library is very aesthetically pleasing indeed.

Re: Show HN: Favicon alert bubbles

#17

Post by the-cakeboss »

falling wrote: post #8
abcd_f wrote: post #6

Earlier quoted context omitted.

While I appreciate a good piece of code and the need to reinvent a wheel, I wouldn't call your implementation "aesthetically pleasing" either. IMO your fallback option is the solution, simply appending "(5)" to the page title when there are 5 pending alerts works the best. [edit] And I am being downvoted because... ?

Because you are being arrogant. (I don't have downvote powers)

What was arrogant about the comment? He merely stated that he doesn't find the solution to be aesthetically pleasing. Are opinions contrary to those of the majority now to be considered arrogant?

Re: Show HN: Favicon alert bubbles

#19

Post by joshmanders »

tommoor wrote: post #15
joshmanders wrote: post #7

I see in the demo it stops at 99, does it not handle 3 digits very well? If it doesn't would it be good to make it do say 99+ like Gmail does?

It overlaps a little but it's still readable - I think the + approach would be good, i'll look at adding it soon :)

Awesome. Really dig this. It's simple and easy to implement. Good work.

Re: Show HN: Favicon alert bubbles

#20

Post by artursapek »

abcd_f wrote: post #6
tommoor wrote: post #2

Tinycon is a javascript library that allows easy manipulation of the favicon to include nice looking alert bubbles. This means that users can pin your site and still see when their attention is needed! It's been done before, but in my opinion not in a way aesthetically pleasing enough for production use. This library also falls back to the standard number in page title approach for browsers that do no support canvas…

While I appreciate a good piece of code and the need to reinvent a wheel, I wouldn't call your implementation "aesthetically pleasing" either. IMO your fallback option is the solution, simply appending "(5)" to the page title when there are 5 pending alerts works the best. [edit] And I am being downvoted because... ?

Changing the title bar is ineffective; you either make the title blink between two states which is a blaring annoyance and terribly distracting (GChat), or you just add a modest little (1) that is hard to see (Facebook). I think the favicon is much better suited for this function; it conforms to what people are used to with mobile phone UI.

However, the problem with this library is it has to follow the limitations of favicons' dimensions. I think there should be an open standard for having alert badges like iPhone and Android phones put on top of home screen icons. The browser distributer could design theirs to match the UI so people could recognize them, and they could be allowed to extend just 2 or 3 pixels past the normal favicon boundaries to grab attention without being annoying or invisible.

You can tell when people want something when they're settling for several make-shift approaches at it within limitations.

Post reply on HN