Show HN: Intro.js Hints

http://introjs.com/example/hint/index.html

by afshinmeh • 10 years ago

126 39 10 years ago

This is exactly what I need to quickly explain elements of my dashboards to new users! Alternatively, this could let me explain new elements as they are added over time. Perfect!

Rafert3• 10 years ago

Be aware of the licensing though. It was MIT but as of March 9 the license file mentions having to purchase a license if used commercial. Seems contradictory with "to deal in the Software without restriction" part of the MIT license text.

rloc• 10 years ago

Right, I didn't notice at first. http://introjs.com/#commercial

Looks like if you use it as part of a commercial product, you have to pay the license.

ldjb2• 10 years ago

If you're referring to the sentence [1]:

"If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license."

...It's not saying you have to purchase a licence if you want to use the software commercially, but that the author recommends purchasing the commercial licence, which they are perfectly within their rights to do.

There is absolutely nothing stopping you from using the software under the terms of the MIT License, but in that case you will have to abide by the terms of the licence and include the copyright and permission notices when re-distributing (the commercial licence may or may not have these requirements -- I haven't seen it).

According to the Intro.js website, the top two tiers of the commercial plan includes support and code review [2], which aren't included with the MIT License.

Depending on the situation, one licence may be favourable than the other. It's not too dissimilar to MySQL being available under a free licence as well as a proprietary licence -- it provides a choice. At least, that's how things are as far as I can tell.

[1] https://github.com/usablica/intro.js/blob/master/license.md

[2] http://introjs.com/#commercial

afshinmeh4• 10 years ago

btw, that's fine to use intro.js < v2.0.0 without purchasing commercial license for commercial projects (apps, plugins, themes, etc.)

greenimpala• 10 years ago

Write an unintuitive UI and then plaster it with 'hints' - great!

taf2• 10 years ago

UI is hard... takes a lot of iteration to get right and even then... hints help IMO

afshinmeh4• 10 years ago

indeed.

nathancahill5• 10 years ago

Cool to see a project using Skeleton. Was disappointed when that project fizzled out once the creator left. It hit the sweet spot in CSS frameworks for me: small, un-opinionated and hard for people to tell you're using a framework (unlike Bootstrap which you can spot a mile away). Haven't found anything to replace it yet.

Malcx• 10 years ago

Post skeleton I've been using Min.css which is fast and light:

http://mincss.com/docs.html

me_bx• 10 years ago

Skeleton Framework, a fork of skeleton, is active and keeps the same spirit: http://skeleton-framework.github.io/

on github: https://github.com/skeleton-framework/skeleton-framework

nathancahill5• 10 years ago

It's active, but I'm not sure it keeps the same spirit (just my opinion).

benbristow• 10 years ago

I made this a few years back with Skeleton. https://benbristow.github.io/getadblock/

Good wee framework.

dimgl• 10 years ago

I've used Skeleton in some projects while I was contracting. I've moved on to Milligram.

nathancahill5• 10 years ago

That looks great, thanks!

degenerate• 10 years ago

I like how Milligram operates... very 'clean'. Link for everyone else: https://milligram.github.io/

schlarpc• 10 years ago

I recently used Milligram for the first time and was very disappointed that the grids were not responsive. Seems like a real miss in an otherwise completely solid framework.

chlee• 10 years ago

I would highly recommend basscss

Small, light-weight, and gets out of your way for the most part. It also supports flexbox if you choose to go down that route.

nathancahill5• 10 years ago

Great. The "No Side Effects" thing is definitely something to look for in a framework.

sdneirf• 10 years ago

Neat! I was just looking for something like this. Good call out on the MIT license.

dkopi• 10 years ago

This is an awesome library, and seems to be very vibrant on Github.

If you're looking for something commercial (and paying for something commercial) however, I'd probably recommend one of the step by step tutorial tools that allow you to build the walk through using a visual editor, and without having to add code for each individual walk through and tool tip.

This is one of those cases where I just want to add a short JS snippet to my site, and allow product / marketing to customize and fine tune the tutorials and on-boarding without developer involvement.

afshinmeh4• 10 years ago

Cheers, thanks.

leesalminen• 10 years ago

Can you recommend a commercial product that does this?

wwwdonohue• 10 years ago

Appcues. http://www.appcues.com/

napoleond• 10 years ago

I'm not the parent, but was curious and did some digging. So far I've found this Quora post with a few options: https://www.quora.com/What-tools-can-I-use-to-create-a-guide...

kleampa• 10 years ago

onboardx.com is a solution. as an extra feature you can segment what kind of users should see them

foxylion2• 10 years ago

Also a great library for onboarding purposes is Hopscotch [1]. It is allows you to create a interactive tour through the UI.

We are using it to introduce new users when launching the webapp the first time (Because having a 100% intuitive UI is a hard thing). We also made a study which showed us that using a onboarding mechansim really helps the user to get started and does not scare them away (which was a concern of some people).

[1] https://github.com/linkedin/hopscotch

vangale• 10 years ago

Hopscotch is one of the few tour libraries that can jump to steps on a different page and (mostly) perform actions on behalf of the user.

foxylion2• 10 years ago

It's also great that they have a simple, but extensible API to use custom actions to trigger the next step by e.g. a drag of a specific element.

pdxandi• 10 years ago

I used Skeleton in the past and loved it for the same reasons. I'm trying out Imperavi Kube for a new project and it's clean, minimalist, and easy to use. I'm on mobile, otherwise I'd find you a link, but I'd recommend you check it out.

sourcd• 10 years ago

Good similar libs on github :

https://github.com/zurb/joyride

https://github.com/heelhook/chardin.js

https://github.com/linkedin/hopscotch

https://github.com/sorich87/bootstrap-tour

https://github.com/HubSpot/shepherd

https://github.com/usablica/intro.js

Once I had a requirement and ended up trying nearly all of them and unfortunately, had to write my own (took about a day and a half) that accomplished the tour exactly the way I wanted. Off the top of my head, I can't recall what each of them missed but primary reason was that often they take off with a great experience and then the lead developer can't devote enough time to meet the diverse requirements of a huge community. The library ends up with a huge user base with lots of open issues, some critical to the user experience on the myriad of mobile devices.

Show HN: Intro.js Hints

Related Stories