Show HN: How we built our interactive demo walk-through • Hacker News Board

Re: Show HN: How we built our interactive demo walk-through

#11

Post by trevz » Tue, Feb 13, 2018, 3:32 PM UTC

redroot wrote: post #4

I'm interested to hear what the opinion on jQuery are like these days. Even if it's a little unglamorous, this is the perfect use case - a one-off project where you have needs for cross-browser animation, resizing, DOM manip, and where something like React might be overkill, even if feasible. CSS animations might be an alternative but it depends on audience browser breakdown.

Have to admit - we were a bit nervous about telling the world we used jQuery for this. ;) But it still has its place IMHO.

Re: Show HN: How we built our interactive demo walk-through

#12

Post by vshulyak » Tue, Feb 13, 2018, 3:43 PM UTC

maxnov wrote: post #3

Very interesting. I think it's nice to see an account of building something from scratch instead of using a library. Sometimes I spend more time searching for a suitable library than it would take to build it from scratch :D

Yeah, we need more articles like this on HN. I see lots of libraries promoted, instead of clean vanilla solutions like this one.

Re: Show HN: How we built our interactive demo walk-through

#13

Post by sergiks » Tue, Feb 13, 2018, 3:48 PM UTC

Looks very elegant! Great it does not require loading the app itself and is easily embeddable in a web page. Calling the implementation a "vanilla" jQuery made me smile )

Re: Show HN: How we built our interactive demo walk-through

#14

Post by philgooch » Tue, Feb 13, 2018, 4:32 PM UTC

Thanks for your generosity in sharing this, I can see this being incredibly useful for creating user onboarding, walkthroughs and demos. The timing of this is perfect for me - thanks again!

Re: Show HN: How we built our interactive demo walk-through

#15

Post by rhnyc » Tue, Feb 13, 2018, 4:36 PM UTC

This is really useful - have been looking for flexible way to demo WIP versions of apps to clients. Thanks for sharing

Re: Show HN: How we built our interactive demo walk-through

#16

Post by cbck » Tue, Feb 13, 2018, 6:49 PM UTC

This is really cool! I've been looking for something like this to give an app walkthrough without needing test data or a demo environment -- thanks guys!

Re: Show HN: How we built our interactive demo walk-through

#17

Post by RealCodeBeard » Tue, Feb 13, 2018, 8:10 PM UTC

trevz wrote: post #11

redroot wrote: post #4

I'm interested to hear what the opinion on jQuery are like these days. Even if it's a little unglamorous, this is the perfect use case - a one-off project where you have needs for cross-browser animation, resizing, DOM manip, and where something like React might be overkill, even if feasible. CSS animations might be an alternative but it depends on audience browser breakdown.

Have to admit - we were a bit nervous about telling the world we used jQuery for this. ;) But it still has its place IMHO.

I will admit something too then, I am not a JQuery fan but I can't fault your use of it here. Right tool, right job. I would still prefer to use my favourite 'only the bits I need' MooTools - but alas, fashion wins ;)

Re: Show HN: How we built our interactive demo walk-through

#18

Post by RealCodeBeard » Tue, Feb 13, 2018, 8:22 PM UTC

Loads have commented rightly on the simplicity (nay elegance) of the solution. I can't fault the use of JQuery even if I have never been a fan. I also agree that sometimes just building something as opposed to searching for someone else's solution is the right choice. Especially when you look at some of the foolish 'kata' time people spend when they could practice on something business-useful like this.

Most of all, to see the thought process played out is really important. This article would make great reading for juniors to help see how more experienced people solve problems. Particularly as it is not a patronising 'tutorial' (draw three circles, then draw an owl) but working through a clear scenario.

Re: Show HN: How we built our interactive demo walk-through

#19

Post by dang » Tue, Feb 13, 2018, 10:15 PM UTC

This is a good article but unfortunately there's evidence of voting collusion and, worse, booster comments in the thread. We ban accounts and sites that do these things, so please make sure not to do them. It's not in your interest anyhow, since if the article gets attention, HN readers are good at sniffing out the collusion and then they go mad with ire.

Re: Show HN: How we built our interactive demo walk-through

#20

Post by timmothey » Tue, Feb 13, 2018, 10:32 PM UTC

ds99bwood9 wrote: post #8

Wonder how this would look like if it was vanilla JS? More performant to boot.

Yes, might be a bit faster, as you don't have to load all of jquery and the animations add-on. Also: one could save a bit of code by using CSS animations (i.e. for the pulsing circle).

However, as others already wrote: Although I'm all for VanillaJS (if JS is even needed in the first place), I dig the simplicity of how it's coded. Very minimal and extremely easy to adapt and set up. Most work is probably figuring out what the optimal flow through an app is to showcase the most important features to convert users. That's why we have marketing people - they do wonders explaining our ideas to others :)

I'm currently working on a project with seven of my students and saved it as a bookmark for later (we have to present our result to lots of people at the end)