Show HN: Intro.js Hints | Hacker News Reader

Show HN: Intro.js Hints

introjs.com

126 pointsafshinmeh39 comments

Open articleView on HN

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.

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

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.

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.

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.

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

http://mincss.com/docs.html

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

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

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

Good wee framework.

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

That looks great, thanks!

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

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.

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.

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

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.

Cheers, thanks.

Can you recommend a commercial product that does this?

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

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...

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

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.

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!

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.

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.

Which is only fair IMO, open source developers have to eat too!

ah thanks God! :-)

Reading the texts again it seems it's more like they heavily encourage that license when used commercially (fair enough) and not saying it's mandatory (which contradicts the MIT license). Looks like I'm not the only one who is confused: https://github.com/usablica/intro.js/issues/573

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

Here the author claims you must purchase the commercial license: https://github.com/usablica/intro.js/issues/464#issuecomment...

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

I'm not sure if you're aware, but the terms of the MIT License apply to commercial as well as non-commercial use. That means it would be fine to use intro.js commercially without a commercial licence.

There's some confusion here about dual licensing projects. Maybe an internet lawyer can comment. The most successful project that I know of that uses dual license is qt which offers a GPL license for open source and a $500+ per month license without restrictions for commercial. Some people say you can just link dynamically and include instructions for how to relink yourself, but if that's true why would anyone provide qt any money, especially at $500per month or whatever rates they charge.

In this instance though Intro.js is covered under MIT not GPL so the Qt restrictions don't appply.

Qt uses the LGPL, not GPL: http://www.qt.io/FAQ/ - you're right about the linking stuff. But that means opening stuff in ways that is probably undesired, e.g. embedded devices.

In the case of this MIT-licensed work, IANAL but there seems to be no way to require users to buy the commercial license because the MIT license already allows this usage.

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

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

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

indeed.

Reply on news.ycombinator.com