

Show HN: Chardin.js, beautiful instructions for apps - heelhook
http://heelhook.github.com/chardin.js/?hn

======
rurounijones
I did raise a ticket on this but as a more general thing:

What is it with js libraries using data- tags without any kind of
"namespacing". For example this library uses data-intro which could easily
clash with other things in future.

Would it not be good for everyone to be a good citizen and instead do things
like data-ch-intro? Just a few characters from your project name to reduce the
chances of clashes.

~~~
heelhook
I think that's an interesting point, and certainly a problem that will grow as
data attributes become even more widely used.

Perhaps there's even use for a little database that keeps track of the
different data attributes used by different libraries so that authors could
easily find out if their name of choice will collide with someone else's, at
least as a forewarning to its user about possible incompatibilities.

~~~
rurounijones
Another option (Although much more complicated) would be to make the used data
attributes configurable in the script.

Maximum flexibility for the end-user but a bit of a PITA for library
developers.

~~~
matb33
This is the way to go, and really not that hard to implement for the library
developers

------
ryderm
Looks really nice, but I always feel that if you need some kind of guided tour
for your app, you've already shot yourself in the foot.

~~~
heelhook
Not necessarily. I do agree that requiring a tour can be an indication that
your app is too complex, but sometimes its just a good opportunity to display
some light marketing (as in, show stuff behind your app that might be
abstracted from the interface in order to avoid cluttering it).

In the use case I built Chardin.js for, I'm using it to display stuff that
happens behind the scenes that the user is abstracted for, but I still want
the user to know its happening (perception of value is almost as important as
value delivered!).

~~~
baddox
Also, some web apps are power tools for a specific group of employees, rather
than a consumer-facing app. In college I worked on a dormitory reservation
system that was fairly complex, and was only used by administrators and front
desk workers (and they went through brief training for the system). I built a
quick little "help mode" overlay system that worked well enough, but something
like this would have been a great alternative.

~~~
ryderm
True, there are certainly exceptions. I wouldn't want this on a social
network, but something like a browser based 3D modeling tool is another story.

------
bluetidepro
Very well done! I personally like this style of on-boarding versus the "tour"
style where you have to click around a bunch of times to see everything.
Again, nicely done!

~~~
heelhook
Yeah, I loved the recent gmail new compose "tour" and used it as inspiration
because I'm not too fond of multi-steps tours.

------
rajivtiru
This is awesome, I literally was going to research javascript intro/tutorials
today. Off to a great start!

Have you tested across browsers? I just need it to work in webkit/mozilla.
maybe ie10.

~~~
heelhook
It does work on webkit/mozilla. I don't have access to IE10 though, so don't
know about it.

------
atestu
And it works in IE8! Thanks for this.

~~~
heelhook
Cool! Totally accidental as I don't have an IE to test on, so good to know!
Thanks :)

~~~
spmurrayzzz
<http://www.browserstack.com/> has been great for me. I hated having to keep a
bunch of windows VMs hanging around on my HDD just for IE testing.

------
revskill
I don't understand why there are some people who doesn't open source their
work to help other people, but try to comment on goood things. Open source
thing first, comment later, please. Thank you, good people.

------
munaf
Very cool!

I think it would be worth displaying each message one at a time with a delay
in between (that way they could function as a sequential tour in addition to
coach marks).

~~~
pc86
Something similar to that was posted on HN a few weeks ago, unfortunately I
don't have the discussion link but I did star the repo[0]

[0] <http://usablica.github.com/intro.js/>

~~~
heelhook
Yeah, I contributed some code to that repo and wrote the rails gem for it[0]
and I'm a fan of it, this is just a different take that I found works better
for some use cases.

Thanks for sharing!

[0]: <https://github.com/heelhook/intro.js-rails>

~~~
pc86
Definitely two excellent use cases and implementations of a similar idea
(step-by-step "tour" v. full-page documentation/explanation), good job.

------
tpsc
Very impressive. It doesn't respond well to resizing the browser but maybe it
is just a matter of playing with css "position" or something. Also, great
name!

~~~
heelhook
Thanks! Yeah, I haven't implemented the resizing support, mind filing an
issue?

Thanks!

------
codeoclock
Really cool, can't wait to use it :)

------
djmollusk
A new one of these shows up on hacker news once a week, but this is the best
one yet.

------
zimpenfish
Overly picky, I know, but it doesn't cope with font size changes...

~~~
jweir
I just create a patch for that <https://github.com/heelhook/chardin.js/pull/2>

------
srkiranraj
Awesome :) This stuff is neatly done.

------
fam
It doesn't open again in Firefox 20

~~~
instakill
Or 19

~~~
davidchua
And Chrome Version 23.0.1271.95

------
rel
Simple and elegant, very nice :)

------
shayonj
looks neat :). Good one.

------
flyworldhan
really impressive

