TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

20 pointsby hjkmover 7 years ago

12 comments

dangover 7 years ago
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.
评论 #16371953 未加载
simonmorleyover 7 years ago
Love this. Totes getting bored using a gazillion tools to help onboard my users. Before you&#x27;ve even started a new venture, you&#x27;ll find yourself hunting for the right tool for a job you didn&#x27;t even expect would exist.<p>Which support tool. Which analytics tool. Which AB testing tool. Which wizard tool. bla bla bla.<p>Back to basics. I&#x27;ll get my coding hat on and actually make an effort. Nice work. Will try this one myself next time I need a wizard.
redrootover 7 years ago
I&#x27;m interested to hear what the opinion on jQuery are like these days. Even if it&#x27;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.
评论 #16367851 未加载
elsurudoover 7 years ago
Nice – what a simple, elegant solution. Like the others are saying, sometimes there&#x27;s no need to reach for the heavy toolbox...<p>How did you measure the effectiveness of having the walkthrough on the front-page? Did you (or did you think about) hooking this up to some analytics? Perhaps see where people tend to drop-off?
评论 #16367680 未加载
maxnovover 7 years ago
Very interesting. I think it&#x27;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
评论 #16367955 未加载
评论 #16367604 未加载
philgoochover 7 years ago
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!
sergiksover 7 years ago
Looks very elegant! Great it does not require loading the app itself and is easily embeddable in a web page. Calling the implementation a &quot;vanilla&quot; jQuery made me smile )
rhnycover 7 years ago
This is really useful - have been looking for flexible way to demo WIP versions of apps to clients. Thanks for sharing
weichxover 7 years ago
I like idea of using images for this and not trying to wrangle the actual app, much cleaner!
评论 #16367832 未加载
ds99bwood9over 7 years ago
Wonder how this would look like if it was vanilla JS? More performant to boot.
评论 #16371466 未加载
cbckover 7 years ago
This is really cool! I&#x27;ve been looking for something like this to give an app walkthrough without needing test data or a demo environment -- thanks guys!
RealCodeBeardover 7 years ago
Loads have commented rightly on the simplicity (nay elegance) of the solution. I can&#x27;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&#x27;s solution is the right choice. Especially when you look at some of the foolish &#x27;kata&#x27; time people spend when they could practice on something business-useful like this.<p>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 &#x27;tutorial&#x27; (draw three circles, then draw an owl) but working through a clear scenario.