7 ms·
Show HN: Chardin.js, beautiful instructions for apps
- bluetidepro 14y agoVery 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 14y agoYeah, I loved the recent gmail new compose "tour" and used it as inspiration because I'm not too fond of multi-steps tours.
- shayonj 14y agolooks neat :). Good one.
- rel 14y agoSimple and elegant, very nice :)
- codeoclock 14y agoReally cool, can't wait to use it :)
- rajivtiru 14y agoThis 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.
- zimpenfish 14y agoOverly picky, I know, but it doesn't cope with font size changes...
- atestu 14y agoAnd it works in IE8! Thanks for this.
- heelhook 14y agoCool! Totally accidental as I don't have an IE to test on, so good to know! Thanks :)
- spmurrayzzz 14y agohttp://www.browserstack.com/ 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.
- codegeek 14y agoI am always complaining on HN about Show HNs not working in IE8. This one is refreshing!!
- deleted 14y ago[deleted]
- munaf 14y agoVery 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 14y agoSomething 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/ http://usablica.github.com/intro.js/
- heelhook 14y agoYeah, 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 https://github.com/heelhook/intro.js-rails
- pc86 14y agoDefinitely two excellent use cases and implementations of a similar idea (step-by-step "tour" v. full-page documentation/explanation), good job.
- fam 14y agoIt doesn't open again in Firefox 20
- instakill 14y agoOr 19
- davidchua 14y agoAnd Chrome Version 23.0.1271.95
- bazzargh 14y agoI see that too, and the open again behaviour is flaky in Chrome as well - the label switches to say "See More on Github" but the instructions still tell you that's the toggle button, and the link to "Open it again" (which actually toggles) is covered by the overlay but still active.
- tpsc 14y agoVery 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 14y agoThanks! Yeah, I haven't implemented the resizing support, mind filing an issue? Thanks!
- ryderm 14y agoLooks 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 14y agoNot 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 14y agoAlso, 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 14y agoTrue, 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.
- lnanek2 14y agoSometimes you don't have any choice. On Android, for example, you have to follow the design guidelines if you want to get featured. However the design guidelines say your actions should be tiny unobtrusive icons in the action bar. Users miss these all the time in user testing in my experience. If you made them big, glossy, 3D looking buttons people would find them, but then you'd violate guidelines. So often we have to put these tutorial overlays up instead with big white arrows over a darkened screen pointing out the actions.
- srkiranraj 14y agoAwesome :) This stuff is neatly done.
- rurounijones 14y agoI 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 14y agoI 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 14y agoAnother 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 14y agoThis is the way to go, and really not that hard to implement for the library developers
- xaritas 14y agoSome sort of data attribute namespace, which is uniquely identified by a URI, and aliased within the document to shorter version? Might look something like this? dans:chardin="http://heelhook.github.com/chardin.js/ http://heelhook.github.com/chardin.js/ I have a feeling that web community is not ready for something like this, maybe in a few years.
- djmollusk 14y agoA new one of these shows up on hacker news once a week, but this is the best one yet.
- revskill 14y agoI 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.
- flyworldhan 14y agoreally impressive