

Show HN: Pulse — A simple pulsating indicator. - moeedm
http://moeedm.com/sandbox/pulse/
Feel free to use it in your application. You can make it imageless but I used an image just because you can easily swap it out and its a little less code.
======
retube
Top of hacker news: a dot that.... pulses. And doesn't even work in most
browsers.

I mean I know it's the weekend and maybe a slow news day, but really?

------
eykanal
Stick it on Github as three files - image, html, css - so folks can "watch"
it. I've found that the watch feature of github helps me remember all these
little nifty snippets of functionality so that, one day, when the need comes
around, I actually remember that the thing exists, I can find it easily, and I
can use it.

~~~
flexd
The only problem about that on GitHub is that you can't "unwatch" all the
notifications while still watching the project. I'm watching 128 repositories
and my news feed is just noise to me now. :-/

~~~
eykanal
Someone from GitHub needs to see this comment.

------
dfc
I do not get it. All I see is a blue dot. Clicking it says "target acquired"
but I can not acquire a new target...

~~~
mannicken
It only works on webkit browsers.

~~~
pharrington
Using JavaScript to render to a canvas will work in all modern browsers, while
maintaining (or even enhancing) the CSS's flexibility. I first thought the
JavaScript solution would even be about the length of Moeed's CSS, but after
writing it out my code's about 5x longer :(

edit: here's a jsfiddle of it in action <http://jsfiddle.net/MftVp/>

~~~
epicureanideal
With jQuery I doubt it would be 5x longer.

~~~
udp
jQuery doesn't provide anything that would make the above code shorter.

------
Haraldson
Are you using an image element to support printing? There's no other reasons
to not use CSS3 to create the dot (or the somewhat more pragmatic approach of
setting it as a background image on the target element, reducing your markup),
as I see it?

I think you should also expect that people could want more than one target on
their maps. There's no downside to switching from IDs to classes here.

------
abcd_f
I understand it is a very neat piece of CSS scripting, but how does this
compare to a simple animated GIF from _practical perspective_?

~~~
pharrington
GIF's don't support alpha transparency, making them the opposite of practical
for an effect like this.

~~~
0x12
At least GIFs work more or less the same on all browsers. This is an excellent
example of how _not_ to do it.

Imagine the support call: "Click on the blinking dot" : "I don't see any
blinking dot" : "It blinks for me, do you use a webkit browser?" : "A what?"

------
kilian
I recently did something similar for more general elements as a jquery plugin:
<http://jquerypulsate.kilianvalkhof.com/> it uses the _outline-offset_ css
property, which doesn't seem that well known but seems quite useful too.

~~~
Bootvis
Very nice, I see myself using this before friday :)

------
oscilloscope
Nice little effect. Could work well on realtime force-directed graphs:

<http://mbostock.github.com/d3/ex/force.html>

------
driverdan
Last year I (along with the rest of our Node Knockout team) built a game that
had a pulsing dot similar to this one. We used Raphael (SVG/VML). Although
it's much heavier than this using Raphael is cross-browser. It might be a
suitable fallback.

I want to open source the whole project but haven't had time to clean it up.

~~~
Empact
My suggestion: don't bother cleaning it up, just publish it. If the two
realistic options are your code dropping off the face of the earth because
it's never published, or it being put in a place where someone might find it
useful and run with it, the latter is far more beneficial to society.

If you're concerned about your personal reputation (which in my experience
tends to be the case) then consider you're likely better off as a prolific
coder than a sparse one, and if anything we should be pushing the industry
towards more open exchange of code so as to reduce loss & waste.

~~~
driverdan
By clean it up I mean make it work again. It was built on an older version of
Node and doesn't work with API changes made since then.

What you say is true though. I'll set a deadline to fix it by. If it isn't
done by then I'll just put it up.

My code is always perfect in every way so I'm not worried about reputation.
/sarcasm

------
steve8918
Pretty nice, but it appears that whatever method is used to generate the
pulse, it causes the CPU utilization of the Desktop Windows Manager (dwm.exe)
to shoot up to about 10-15% when using Chrome.

------
gmantastic
<blink> 2.0?

------
bwblabs
I must agree with most people complaining here, it should work on ALL modern
browsers (including IE9).

The implementation is not even great either, see this screenr I made:
<http://screenr.com/azAs>

------
pongo000
I'll be more impressed when this can work on my non-JS enabled browser.

------
ajarmoniuk
doesn't pulse on chrome 14.0.835.165m on windows

------
kiranryali
I would make the pulsing ring easier to see

------
skadamat
haha this looks like the one on Foursquare, neat work regardless though :)

------
schwa
A little bit (i.e. completely) derivative of the Maps app on the iPhone.

