[{"data":1,"prerenderedAt":330},["ShallowReactive",2],{"project-9706633":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":34,"aspects":35,"strip":43,"post_text":45,"what":46,"said":68,"maker_in_thread":190,"shape":200,"grid":204,"attempts":293,"same_week":294,"maker_shows":38,"maker_hidden":322,"reader_version":323,"card":324},"9706633","marklib","A DOM text-selection highlight renderer","title","Show HN: A DOM text-selection highlight renderer","http:\u002F\u002Fbowlingx.github.io\u002Fmarklib\u002F","bowlingx.github.io","bowlingx",1434124352,2015,93,42,273,2565,11,"notable","dev_tools","dom text selection library","library",[24,25,26,27],"text selection","dom highlight","range serialization","javascript highlight","debated",0.027,{"positive":31,"neutral":32,"mixed":33,"critical":32},8,7,0,22,{"idea":36,"design":39,"execution":40,"docs":42},{"positive":37,"critical":38},2,1,{"positive":37,"critical":38},{"positive":37,"critical":41},5,{"positive":33,"critical":33},[41,38,33,33,44,33,33,33,33,41,33,38,33,41,44,33,41,44,44,44,33,38,41,38,33,38,38,33,33,33,33,41,41,44,38,33,33,44,33,41],3,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":57,"openness":65,"stage":66,"team_size":67},{"value":48,"source":49,"evidence":50},"Persisting and re-rendering text selections in web pages, including after DOM changes","maker",[51,54],{"id":52,"by":11,"text":53},"9707583","Hi :), marklib focuses on rendering and persisting (serializing) the selection, not on actually providing a cross-browser functionality to get the selection. marklib is…",{"id":55,"by":11,"text":56},"9707609","marklib helps you persisting selections a user did by providing rendering and serialization of selections.",[58],{"value":59,"source":60,"evidence":61},"JavaScript","inferred",[62],{"id":63,"by":11,"text":64},"9706637","I build a fast small text-selection renderer that creates serializable text-renderings. Feedback appreciated. Right now it lacks some documentation how to use it, but I hope the…","open_source","beta","unknown",{"praise":69,"objections":93,"requests":122,"questions":148,"alternatives":167},[70,82],{"value":71,"source":72,"evidence":73},"Works well and is a hard problem solved nicely","commenter",[74,78],{"id":75,"by":76,"text":77},"9706744","lepunk","Well done! I know it is not an easy task to do. I built something fairly similar (and way less quick) http:\u002F\u002Fjsfiddle.net\u002F2XLBr\u002F and the git repo:…",{"id":79,"by":80,"text":81},"9707087","thomasfoster96","Well done - works surprisingly well on my iPhone. Working with text selection in the browser is notoriously difficult so I'm glad this works.",{"value":83,"source":72,"evidence":84},"Useful for persisting inline highlights",[85,89],{"id":86,"by":87,"text":88},"9709081","kevin","This is really great. I think we're going to use this for helping us highlight parts of the YC application that sticks out to the partners. Very interesting to see that what you…",{"id":90,"by":91,"text":92},"9707881","WaltPurvis","Thank you. So am I correct in thinking this would be useful if you wanted to let people select a portion of an article and save just that portion to a database? (If so, I'll be…",[94,104,115],{"value":95,"source":72,"evidence":96},"Inconsistent selection behavior with triple-click and across browsers",[97,101],{"id":98,"by":99,"text":100},"9707056","pimlottc","I get inconsistent results when I triple-click to create the selection. For example, triple-clicking the word \"Start\" in the first paragraph highlights the entire first line,…",{"id":102,"by":11,"text":103},"9706926","yeah, It will report the underlying textnode (if you are lucky). It's really inconsistent across browsers: some report the h1 tag, some the underlying node. Depends also how far…",{"value":105,"source":72,"evidence":106},"Overlapping highlights render oddly",[107,111],{"id":108,"by":109,"text":110},"9707975","dfar1","I noticed that you can mark an already marked section, which adds the marked color on top again, and again and again until you can't tell anymore because alpha = 100.",{"id":112,"by":113,"text":114},"9708772","baby","There is a weird behavior when you highlight something that has partially already been highlighted. I think you should take a look at how `preview` on osx does it. It cancels the…",{"value":116,"source":72,"evidence":117},"Serialized paths break when the document changes",[118],{"id":119,"by":120,"text":121},"9710220","callmevlad","It seems like using a tree-index based path, this serialization format would only work with purely static content. If you have a change to the underlying content (e.g. adding a…",[123,134,141],{"value":124,"source":72,"evidence":125},"Add a Chrome extension or bookmarklet",[126,130],{"id":127,"by":128,"text":129},"9707970","lgas","Seems like a good candidate for a bookmarklet that injects it into any page.",{"id":131,"by":132,"text":133},"9708101","christiangenco","My thoughts exactly. This should be a chrome plugin.",{"value":135,"source":72,"evidence":136},"Support multiple highlight colors in the demo",[137],{"id":138,"by":139,"text":140},"9706768","alfonsodev","Thanks for sharing this. Great work!. I was wondering if it would mark a second time and third and I could test it in the small demo. It meet my expectations :) Great work! Two…",{"value":142,"source":72,"evidence":143},"Document the library in the README",[144],{"id":145,"by":146,"text":147},"9723553","agrothberg","Might be worth adding this to adding these notes to the README.",[149,160],{"value":150,"source":72,"evidence":151},"How does it differ from rangy or getSelection()?",[152,156],{"id":153,"by":154,"text":155},"9707148","pknight","Did you take inspiration from Rangy (https:\u002F\u002Fgithub.com\u002Ftimdown\u002Frangy) and if yes, what makes Marklib better? Would like to know if there are obvious benefits to using Marklib…",{"id":157,"by":158,"text":159},"9707129","notNow","At the risk of sounding a bit grumpy but I'm genuine here, I seriously don't get this tool. Is not the same thing as getSelection() with a CSS background-color cherry on the top…",{"value":161,"source":72,"evidence":162},"Can it work inside a textarea?",[163],{"id":164,"by":165,"text":166},"9709470","sandaru1","Is there a good library that does the same inside a textarea?",[168,176,183],{"value":169,"source":72,"evidence":170},"Rangy",[171,172],{"id":153,"by":154,"text":155},{"id":173,"by":174,"text":175},"9706758","VeejayRampay","We were working on a Medium-style text editor for a while and text selection is notoriously hard. Things like https:\u002F\u002Fgithub.com\u002Ftimdown\u002Frangy somehow made it more palatable but…",{"value":177,"source":72,"evidence":178},"MaSha",[179],{"id":180,"by":181,"text":182},"9707200","user3885","There is also https:\u002F\u002Fgithub.com\u002FSmartTeleMax\u002FMaSha MaSha has ajax support. But no library supports multiple colors :(",{"value":184,"source":72,"evidence":185},"Point",[186],{"id":187,"by":188,"text":189},"9709377","Flenser","http:\u002F\u002Fwww.getpoint.co\u002F",{"comments":191,"answered":41,"key":192},12,[193,196,197],{"id":194,"text":195},"9710372","That's correct. But it is possible to specify a context container where the highlighting is executed so if you change parts of the document (like around this container) it…",{"id":63,"text":64},{"id":198,"text":199},"9706836","Thank you for the Feedback. The library only focuses on render a selection, either a serialized one (it's not yet shown in the demo) or a selection made by the user. But of…",{"commenters":201,"max_depth":202,"maker_replies":191,"first_comment_mins":33,"lifespan_hours":203},25,6,83,[205,207,209,211,213,215,217,220,221,224,226,228,230,232,234,235,236,239,241,243,244,245,247,248,250,251,254,256,259,261,265,269,271,273,276,278,281,284,286,288,290,291],[86,33,41,206,87,33],"project\u002Fpositive\u002Fidea",[119,33,38,208,120,33],"project\u002Fcritical\u002Fdesign",[194,33,33,210,11,38],"maker\u002Fneutral\u002Fdesign",[63,38,33,212,11,38],"project\u002Fneutral\u002Fnone",[173,38,44,214,174,33],"project\u002Fneutral\u002Fidea",[198,38,33,216,11,38],"maker\u002Fneutral\u002Fnone",[218,38,33,219,174,33],"9706861","other\u002Fneutral\u002Fnone",[102,38,33,219,11,38],[222,38,33,219,223,33],"9707226","jammaloo",[138,38,41,225,139,33],"project\u002Fpositive\u002Fdesign",[227,38,33,210,11,38],"9706851",[108,37,38,229,109,33],"project\u002Fcritical\u002Fexecution",[231,37,33,210,11,38],"9708005",[233,37,41,225,109,33],"9708040",[153,44,44,214,154,33],[52,44,33,214,11,38],[237,44,41,238,154,33],"9709438","project\u002Fpositive\u002Fnone",[145,44,44,240,146,33],"project\u002Fneutral\u002Fdocs",[127,242,44,214,128,33],4,[131,242,44,214,132,33],[187,242,33,219,188,33],[246,242,33,219,132,33],"9709959",[98,41,38,229,99,33],[75,202,41,249,76,33],"maker\u002Fpositive\u002Fexecution",[112,32,38,229,113,33],[252,32,33,253,11,38],"9708936","maker\u002Fneutral\u002Fexecution",[255,32,38,229,113,33],"9709070",[257,31,38,229,258,33],"9708244","wdewind",[260,31,33,253,11,38],"9708276",[262,263,33,219,264,33],"9706947",9,"mparramon",[266,263,33,267,268,33],"9709758","commenter\u002Fneutral\u002Fnone","Gigablah",[180,270,33,219,181,33],10,[79,18,41,272,80,33],"project\u002Fpositive\u002Fexecution",[274,191,41,238,275,33],"9707390","tauchunfall",[164,277,44,214,165,33],13,[157,279,38,280,158,33],14,"project\u002Fcritical\u002Fidea",[282,279,33,219,283,33],"9707166","gkop",[55,279,33,285,11,38],"maker\u002Fneutral\u002Fidea",[287,279,44,214,91,33],"9707832",[289,279,33,285,11,38],"9707865",[90,279,41,206,91,33],[292,279,33,285,11,38],"9707973",[],[295,300,305,310,315,319],{"id":296,"name":297,"points":298,"category":299},"9705446","Retroospect",221,"productivity",{"id":301,"name":302,"points":303,"category":304},"9707190","Readlang",178,"languages",{"id":306,"name":307,"points":308,"category":309},"9706949","kolodny\u002Fexercises",127,"learning_science",{"id":311,"name":312,"points":313,"category":314},"9727186","Cloudstitch",84,"web_saas",{"id":316,"name":317,"points":318,"category":20},"9710958","Tota11y",72,{"id":320,"name":321,"points":318,"category":304},"9724658","CandyJS",false,"v2",{"id":325,"name":5,"line":6,"ai":322,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":326,"top":18,"kw":327,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":328,"url":9,"mix":329,"praise":71,"objection":95,"sub":21},9706633,0.03,[24,25,26,27],"5100300005010530533301510110000553100305",[31,32,33,32],1793990925937]