[{"data":1,"prerenderedAt":361},["ShallowReactive",2],{"project-5480073":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":45,"post_text":46,"what":47,"said":74,"maker_in_thread":194,"shape":203,"grid":207,"attempts":313,"same_week":324,"maker_shows":32,"maker_hidden":353,"reader_version":354,"card":355},"5480073","Chardin.js","Chardin.js, beautiful instructions for apps","title","Show HN: Chardin.js, beautiful instructions for apps","http:\u002F\u002Fheelhook.github.com\u002Fchardin.js\u002F?hn","heelhook.github.com","heelhook",1364918114,2013,203,44,71,1739,5,"notable","languages","javascript library","library",[24,25,26,27],"javascript","user onboarding","coach marks","tutorial overlay","debated",0.245,{"positive":31,"neutral":32,"mixed":33,"critical":34},15,3,1,8,27,{"design":37,"idea":39,"performance":41,"execution":44},{"positive":38,"critical":33},4,{"positive":40,"critical":33},6,{"positive":42,"critical":43},2,0,{"positive":43,"critical":40},[33,43,43,43,43,33,43,18,43,18,43,18,43,43,18,43,32,43,43,18,43,18,18,32,43,43,18,32,43,18,33,33,32,18,33,33,33,33,18,18],null,{"problem":48,"audience":46,"pricing":46,"motivation":55,"time_to_build":46,"stack":59,"openness":72,"stage":73,"team_size":73},{"value":49,"source":50,"evidence":51},"Explaining how a web app's interface works to first-time users","maker",[52],{"id":53,"by":11,"text":54},"5481181","Not 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…",{"value":56,"source":50,"evidence":57},"Onboarding instructions for apps with behind-the-scenes features users should know about",[58],{"id":53,"by":11,"text":54},[60],{"value":61,"source":62,"evidence":63},"JavaScript","inferred",[64,68],{"id":65,"by":66,"text":67},"5480559","rajivtiru","This is awesome, I literally was going to research javascript intro\u002Ftutorials today. Off to a great start! Have you tested across browsers? I just need it to work in…",{"id":69,"by":70,"text":71},"5480684","atestu","And it works in IE8! Thanks for this.","open_source","unknown",{"praise":75,"objections":104,"requests":149,"questions":171,"alternatives":179},[76,96],{"value":77,"source":78,"evidence":79},"Clean, elegant onboarding style compared with click-through tours","commenter",[80,84,88,92],{"id":81,"by":82,"text":83},"5480374","bluetidepro","Very 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!",{"id":85,"by":86,"text":87},"5480486","rel","Simple and elegant, very nice :)",{"id":89,"by":90,"text":91},"5480464","shayonj","looks neat :). Good one.",{"id":93,"by":94,"text":95},"5482038","srkiranraj","Awesome :) This stuff is neatly done.",{"value":97,"source":78,"evidence":98},"Works in IE8 and in webkit and Mozilla browsers",[99,100],{"id":69,"by":70,"text":71},{"id":101,"by":102,"text":103},"5480753","codegeek","I am always complaining on HN about Show HNs not working in IE8. This one is refreshing!!",[105,112,127,142],{"value":106,"source":78,"evidence":107},"Guided tours suggest an app is too complex",[108],{"id":109,"by":110,"text":111},"5481112","ryderm","Looks 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.",{"value":113,"source":78,"evidence":114},"Breaks on window resize and font size changes",[115,119,123],{"id":116,"by":117,"text":118},"5480654","zimpenfish","Overly picky, I know, but it doesn't cope with font size changes...",{"id":120,"by":121,"text":122},"5480795","jweir","Or screen resizes (less picky)",{"id":124,"by":125,"text":126},"5480895","tpsc","Very 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!",{"value":128,"source":78,"evidence":129},"Reopen toggle fails in Firefox and Chrome",[130,134,138],{"id":131,"by":132,"text":133},"5480864","fam","It doesn't open again in Firefox 20",{"id":135,"by":136,"text":137},"5481968","instakill","Or 19",{"id":139,"by":140,"text":141},"5485851","bazzargh","I 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…",{"value":143,"source":78,"evidence":144},"Generic data-intro attribute could clash with other libraries",[145],{"id":146,"by":147,"text":148},"5483333","rurounijones","I 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…",[150,157,164],{"value":151,"source":78,"evidence":152},"Namespace data attributes to avoid clashes",[153,154],{"id":146,"by":147,"text":148},{"id":155,"by":147,"text":156},"5483690","Another 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…",{"value":158,"source":78,"evidence":159},"Support window resizing",[160,161],{"id":124,"by":125,"text":126},{"id":162,"by":11,"text":163},"5480910","Thanks! Yeah, I haven't implemented the resizing support, mind filing an issue? Thanks!",{"value":165,"source":78,"evidence":166},"Sequential step-by-step tour mode",[167],{"id":168,"by":169,"text":170},"5480804","munaf","Very 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).",[172],{"value":173,"source":78,"evidence":174},"Does it work in IE10 and other browsers?",[175,176],{"id":65,"by":66,"text":67},{"id":177,"by":11,"text":178},"5480607","It does work on webkit\u002Fmozilla. I don't have access to IE10 though, so don't know about it.",[180,187],{"value":181,"source":78,"evidence":182},"intro.js",[183],{"id":184,"by":185,"text":186},"5481240","pc86","Something 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:\u002F\u002Fusablica.github.com\u002Fintro.js\u002F",{"value":188,"source":78,"evidence":189},"BrowserStack for cross-browser testing",[190],{"id":191,"by":192,"text":193},"5485393","spmurrayzzz","http:\u002F\u002Fwww.browserstack.com\u002F has been great for me. I hated having to keep a bunch of windows VMs hanging around on my HDD just for IE testing.",{"comments":34,"answered":32,"key":195},[196,199,200],{"id":197,"text":198},"5483548","I 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…",{"id":53,"text":54},{"id":201,"text":202},"5480615","Yeah, I loved the recent gmail new compose \"tour\" and used it as inspiration because I'm not too fond of multi-steps tours.",{"commenters":204,"max_depth":38,"maker_replies":34,"first_comment_mins":205,"lifespan_hours":206},33,42,166,[208,210,212,213,216,219,221,223,227,230,233,236,239,242,245,248,250,252,254,256,258,259,261,263,264,268,270,272,275,277,280,282,286,290,293,294,297,299,301,302,305,306,308,310],[146,43,33,209,147,43],"project\u002Fcritical\u002Fdesign",[197,43,43,211,11,33],"commenter\u002Fneutral\u002Fdesign",[155,43,43,211,147,43],[214,43,43,211,215,43],"5517971","matb33",[217,43,43,211,218,43],"5483718","xaritas",[109,33,33,220,110,43],"project\u002Fcritical\u002Fidea",[53,33,43,222,11,33],"maker\u002Fneutral\u002Fidea",[224,33,18,225,226,43],"5481994","project\u002Fpositive\u002Fidea","baddox",[228,33,43,229,110,43],"5482057","commenter\u002Fneutral\u002Fidea",[231,33,18,225,232,43],"5481578","lnanek2",[234,33,18,225,235,43],"5481812","ibrahima",[237,33,43,229,238,43],"5481873","fudged71",[240,33,18,225,241,43],"5484108","crazygringo",[243,33,43,229,244,43],"5484188","dannowatts",[246,33,43,229,247,43],"5485918","epo",[81,42,18,249,82,43],"project\u002Fpositive\u002Fdesign",[201,42,43,251,11,33],"project\u002Fneutral\u002Fdesign",[65,32,32,253,66,43],"project\u002Fneutral\u002Fperformance",[177,32,43,255,11,33],"project\u002Fpositive\u002Fperformance",[257,32,43,255,11,33],"5480688",[69,38,18,255,70,43],[260,38,43,253,11,33],"5480687",[191,38,43,262,192,43],"other\u002Fneutral\u002Fnone",[101,38,18,255,102,43],[265,18,18,266,267,43],"5486193","maker\u002Fpositive\u002Fnone","revskill",[168,40,32,269,169,43],"project\u002Fneutral\u002Fidea",[184,40,43,271,185,43],"other\u002Fneutral\u002Fidea",[273,40,43,274,11,33],"5481340","maker\u002Fpositive\u002Fidea",[276,40,18,274,185,43],"5482943",[124,278,32,279,125,43],7,"project\u002Fmixed\u002Fexecution",[162,278,43,281,11,33],"maker\u002Fneutral\u002Fexecution",[283,34,18,284,285,43],"5480550","project\u002Fpositive\u002Fnone","codeoclock",[287,288,18,225,289,43],"5485634",9,"djmollusk",[116,291,33,292,117,43],10,"project\u002Fcritical\u002Fexecution",[120,291,33,292,121,43],[295,291,32,296,121,43],"5481078","project\u002Fneutral\u002Fexecution",[93,298,18,249,94,43],11,[131,300,33,292,132,43],12,[135,300,33,292,136,43],[303,300,33,292,304,43],"5482713","davidchua",[139,300,33,292,140,43],[85,307,18,249,86,43],13,[89,309,18,249,90,43],14,[311,31,18,284,312,43],"5510313","flyworldhan",[314,317,320,323],{"id":315,"t":316,"points":300,"comments":42},"5471936",1364801716,{"id":318,"t":319,"points":38,"comments":32},"5474219",1364834831,{"id":321,"t":322,"points":38,"comments":43},"5476598",1364858612,{"id":4,"t":12,"points":14,"comments":15},[325,329,334,339,343,348],{"id":326,"name":327,"points":328,"category":20},"5482081","Cap'n Proto",286,{"id":330,"name":331,"points":332,"category":333},"5468467","Nightweb",257,"consumer_social",{"id":335,"name":336,"points":337,"category":338},"5485513","HN Store",190,"productivity",{"id":340,"name":341,"points":342,"category":333},"5474588","YouFM",132,{"id":344,"name":345,"points":346,"category":347},"5458248","Redstone",125,"infrastructure",{"id":349,"name":350,"points":351,"category":352},"5480685","Mosaic",106,"creative",false,"v2",{"id":356,"name":5,"line":6,"ai":353,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":357,"top":18,"kw":358,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":359,"url":9,"mix":360,"praise":77,"objection":106,"sub":21},5480073,0.25,[24,25,26,27],"1000010505050050300505530053051135111155",[31,32,33,34],1793990892855]