

Show HN: αlphaPun.ch - newtron
http://alphapun.ch

======
aw3c2
Your "no drag and drop" fallback is so utterly useless that I have not the
slightest idea what this site is about.

~~~
newtron
As a Safari user, I actually totally agree, and it was a hard choice to leave
it out of the first iteration. The reason was that this was made for the 10K
Apart contest (10k.aneventapart.com) and I was really, really struggling to
get the code in under 10k. Having the extra functionality pushed me over the
edge. I will definitely be making it support more browsers over time, and
adding more options. Or, you could always fork it on github and add it
yourself. (<https://github.com/nwtn/alphapun.ch>) :)

~~~
tripzilch
That's wonderful. _What does your site do??_ :-/

~~~
sequoia
Edit: I am/was wrong, see below. Sorry! :$

Really, people?

From the site: "αlphaPun.ch will trace the opaque part of your PNG or GIF
image. It will then punch through the alpha channel (i.e. the transparent
bit), so you can click on things behind it."

What are we having trouble understanding here?

EDIT: Here I am, using elinks: <http://i.imgur.com/UaX0M.png> I'll remind you
that elinks's support for drag-and-drop is, err- limited. I nonetheless have
no trouble understanding what alphapunch does.

~~~
to3m
Nonsense! - the site is a picture of 'Y U NO man', saying "WEB BROWSER - Y U
NO DRAGNDROP?!"...

~~~
sequoia
oops! My apologies; I tried the site with firefox then with elinks, it wasn't
until I tried IE that I hit the sweet spot of too-few-features-but-not-so-few-
the-feature-check-doesn't-work. Sorry to3m et al.; you are right that fallback
is horrendous and unacceptable, no matter the limitations of the contest.

~~~
newtron
The limitations of the contest were that it must support current versions of
Chrome, Firefox, and IE10pp2, which it does in this launch version. Now that
it's working in those browsers, further browser support and better fallbacks
are my top priority.

Yes, the fallback is not adequate for a general release tool, so maybe I
should have waited before posting it here. But, I thought people might still
find it interesting, and I wanted some feedback before submitting it for the
contest.

Apologies to those that are being frustrated by these limitations at launch.

~~~
sequoia
I think the tool is cool, but you could have shown an error message and greyed
out/disabled the input elements rather than disable the entire site and block
the user from reading anything.

------
dgunn
Because I'm at work and can't use my preferred browser (chrome), I am forced
to know nothing about the site other than the creator’s appreciation for
internet memes and the sites apparent need for canvas support. You should
really make sure every visitor becomes a fan of your idea even if they can't
use it until they upgrade their browser (or get home from work). Now, I may
not remember to check this out when I get home because nothing grabbed my
attention.

FYI, I'm not trying to be a jerk. I found your no-canvas alternative to be
very humerous. But you should really have told me something about your site
instead of making me laugh.

~~~
newtron
I don't think you're being a jerk, I think it's great feedback. :) I
appreciate your candor about forgetting to revisit.

I'm hoping to add better fallbacks shortly.

------
sinaiman
I have come across a need for this many times, often there's a simple trick
you can do to get by it (i.e. setting an image as a background of an input
element, rather than overlaying the image on top, or using transparent
backgrounds along with z-index fiddling) however, I would definitely consider
using this tool for rapidly building a layout. I like your presentation as
well, clear layout with a brief to-the-point message.

My only concern would be performance, right off the bat I see a few nested
for-loops in the code and am wondering what sort of performance hit you'd be
looking at if you use this for several images on a single page. I didn't
thoroughly trace through the code or anything, I am just thinking out loud
here.

~~~
newtron
Performance is a valid concern, but so far in the tests I've run I haven't hit
any real problems. If you encounter any slow downs or real performance issues,
I'd love to hear about them (and hopefully eliminate them!)

Thanks!

------
nimbix
Could be useful for complex cases, but "pointer-events: none" CSS usually does
the trick just fine.

~~~
newtron
That's really cool, I didn't know about that. Thanks!

The difference here is that with alphaPun.ch you're only clicking through the
transparent parts of the image; the opaque parts still block clicks. If I
understand that document correctly, pointer-events would only allow you to
click through the _whole_ image. (Except with SVG?) Is that right?

~~~
nimbix
Yes, that's right; pointer-events in HTML can only be applied to whole images.

------
yock
It seems as if you've allowed your UI to get in the way of your service, given
that you've chosen features that are inavailable on so many web browsers.

Was your intention to provide a service or to push the limits of UI design? I
can't tell.

~~~
newtron
For the initial launch, my intention was to build something interesting using
new HTML5, CSS3 and JavaScript features and techniques. Now that it is
launched and working in the browsers targeted by the contest (current Firefox,
Chrome and IE10pp2) my goal will be to expand it to work with browsers that
don't support all these features.

------
newtron
BTW, I have a write-up about it here: <http://davidnewton.ca/introducing-
alphapunch>

------
slig
I had to do something similar once. I ended up using ImageMagick and ptrace
get a nice "silhouette" of my image and use the generated data to draw a path
using Raphael.

convert IMAGE.png -channel matte -separate +matte -flip ppm:- | potrace -k
0.95 -u 1 -s

~~~
newtron
That's interesting, I'll definitely take a look at Raphael. Did you just need
the silhouette, or did Raphael let you do the click through thing too?

~~~
slig
I was able to do the click through using the invisible path. The project was a
kind of weird puzzle, so the click through was a must.

I upped my prototype here: <http://dl.dropbox.com/u/491131/puzzle/puzzle.html>
You can only drag the camel.

Eventually I gave up because I wasn't able to drag the piece correctly if it
was rotated.

~~~
newtron
That's awesome, thanks for showing me that. It would definitely be cool to
implement something similar for browsers with SVG support, then fallback to
the generated spans for those without.

~~~
slig
Raphael is so awesome that it works even on IE, using VML, with the same sane
API.

------
zokier
Firefox can't find the server at www.αlphapun.ch.

Also, no Swiss puns, I'm disappointed.

~~~
newtron
I don't have it registered with the α unicode character, only the normal roman
a -- <http://alphapun.ch> or <http://www.alphapun.ch>.

------
wccrawford
That's a neat idea, but I'm not sure I've ever needed it. :)

~~~
newtron
Thanks! Now if you _do_ need it, you'll have options. :)

------
dominik
And here I thought the site was going to be about generating "alpha" puns via
artificial intelligence.

------
jri
Redditors will like what happens when they view the page without javascript
enabled. It made me laugh.

