[{"data":1,"prerenderedAt":441},["ShallowReactive",2],{"project-23339244":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":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":45,"post_text":47,"what":48,"said":90,"maker_in_thread":192,"shape":201,"grid":206,"attempts":403,"same_week":404,"maker_shows":285,"maker_hidden":433,"reader_version":434,"card":435},"23339244","RoughNotation","create and animate hand-drawn annotations on a web page","title","Show HN: RoughNotation – create and animate hand-drawn annotations on a web page","https:\u002F\u002Froughnotation.com\u002F","roughnotation.com","shihn",1590683503,2020,696,74,17,3028,1,"legend","dev_tools","javascript library for web annotation","library",[24,25,26,27,28],"hand-drawn annotations","web annotation","animated highlights","javascript library","rough.js","loved",0.548,{"positive":32,"neutral":33,"mixed":34,"critical":35},24,10,2,3,39,{"idea":38,"design":40,"execution":42,"docs":44},{"positive":39,"critical":18},13,{"positive":41,"critical":34},4,{"positive":18,"critical":43},0,{"positive":43,"critical":43},[46,46,43,43,46,43,43,43,43,43,43,43,46,43,46,46,46,46,46,46,43,35,35,46,18,46,35,18,35,43,46,46,46,43,46,43,46,46,46,35],5,null,{"problem":49,"audience":56,"pricing":47,"motivation":64,"time_to_build":70,"stack":74,"openness":87,"stage":88,"team_size":89},{"value":50,"source":51,"evidence":52},"Adding hand-drawn style annotations and emphasis to web pages","maker",[53],{"id":54,"by":11,"text":55},"23340886","Thanks. Online tutorials, presentations, editing, Direct attention of the reader to something specific. I was thinking anything that you'd do such annotations on physical paper.",{"value":57,"source":58,"evidence":59},"Web developers and writers wanting to highlight page content","inferred",[60,61],{"id":54,"by":11,"text":55},{"id":62,"by":11,"text":63},"23343274","People have created framework wrappers for this: Rect: https:\u002F\u002Fgithub.com\u002Flinkstrifer\u002Freact-rough-notation Svelte: https:\u002F\u002Fgithub.com\u002Fdimfeld\u002Fsvelte-rough-notation Vue:…",{"value":65,"source":51,"evidence":66},"Extend roughjs to annotation use cases",[67],{"id":68,"by":11,"text":69},"23343332","I wrote roughjs a couple of years ago and had always thought it would be nice to use it in all the ways people draw hand-drawn shapes. Annotation is one of them. I never got…",{"value":71,"source":51,"evidence":72},"About a day, 4-6 hours for the library; longer for the website and readme",[73],{"id":68,"by":11,"text":69},[75,83],{"value":76,"source":58,"evidence":77},"JavaScript",[78,79],{"id":62,"by":11,"text":63},{"id":80,"by":81,"text":82},"23343341","49531","You can use querySelectors in React, it's just normal JavaScript. You can also use refs if you don't want to use querySelector.",{"value":84,"source":51,"evidence":85},"Rough.js",[86],{"id":68,"by":11,"text":69},"open_source","launched","solo",{"praise":91,"objections":116,"requests":135,"questions":158,"alternatives":177},[92,108],{"value":93,"source":94,"evidence":95},"Beautiful, polished look and landing page","commenter",[96,100,104],{"id":97,"by":98,"text":99},"23341143","NickBusey","This may be one of the best 'product' landing pages I've ever seen. Kudos.",{"id":101,"by":102,"text":103},"23340810","GordonS","Not sure what I'd use this for, but I love the look of it so much I feel like I need to find an excuse! Can I ask what use case you had in mind when creating this?",{"id":105,"by":106,"text":107},"23339862","dpeck","That is beautiful and very well done. I might drop this onto my personal homepage today for a nice emphasis underline in the header. Bravo!",{"value":109,"source":94,"evidence":110},"Useful for tutorials and presentations",[111,112],{"id":54,"by":11,"text":55},{"id":113,"by":114,"text":115},"23345598","airstrike","As someone who lives and breathes in a hand-annotated world every day, this is incredibly helpful. I can't believe it exists for free. Thank you",[117,128],{"value":118,"source":94,"evidence":119},"Double-pass drawing adds noise and animation delay",[120,124],{"id":121,"by":122,"text":123},"23341518","wes-k","Looks wonderful! Anyway to get it to only draw the annotation once? Looks like everything gets two passes which adds to the roughness but also adds a bit of noise and delay to…",{"id":125,"by":126,"text":127},"23342059","cosmotic","I agree, the double pass is pretty distracting and frustrating with the delay",{"value":129,"source":94,"evidence":130},"Not clear how to use with React or Svelte",[131],{"id":132,"by":133,"text":134},"23343236","julianeon","I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).",[136,151],{"value":137,"source":94,"evidence":138},"Text popovers or annotation text",[139,143,147],{"id":140,"by":141,"text":142},"23340448","alixanderwang","Being able to add small text between margins would enable the ability for an app\u002Fextension to let person A markup an article with their thoughts and emphasis, and share it with…",{"id":144,"by":145,"text":146},"23342193","talkinghead","a text popover feature would be super useful!",{"id":148,"by":149,"text":150},"23347604","d33d33","really nice - would be great if there would be a tufte-style feature (animated info box next to the highlighted text) or sth. similar",{"value":152,"source":94,"evidence":153},"Chrome extension",[154],{"id":155,"by":156,"text":157},"23340198","howmayiannoyyou","Should be a Chrome Extension. Would absolutely kill as one.",[159,166],{"value":160,"source":94,"evidence":161},"How does the hand-drawn effect work",[162],{"id":163,"by":164,"text":165},"23340172","onemoresoop","This is really cool. I like that it brings a bit of human touch to webpages. How does it work?",{"value":167,"source":94,"evidence":168},"Is there a version that works with Sketch or Apple Pencil",[169,173],{"id":170,"by":171,"text":172},"23342624","Axsuul","This is great! Does anyone know if there's a similar library that can do rough notations like this within Sketch?",{"id":174,"by":175,"text":176},"23345316","ta1234567890","Looks really cool. Does anyone know of something like this but that works with the iPad's pencil? Would love to have something like a mix between the Notes app and Etherpad, so…",[178,185],{"value":179,"source":94,"evidence":180},"Hypothesis annotation tool",[181],{"id":182,"by":183,"text":184},"23342753","webel0","Check out hypothesis [0]. No fun styling but the same functionality. [0] https:\u002F\u002Fgithub.com\u002Fhypothesis",{"value":186,"source":94,"evidence":187},"Wired-elements and roughViz",[188],{"id":189,"by":190,"text":191},"23341672","heyhihello","Amazing! There are many cool libraries now thanks to author. 1. Roughjs - rough primitives https:\u002F\u002Froughjs.com\u002F 2. roughViz - rough data visualization…",{"comments":33,"answered":35,"key":193},[194,197,200],{"id":195,"text":196},"23341466","Thanks. the idea behind rough was to provide primitives to draw anything. maps and dataviz are definitely one of the main use cases.",{"id":198,"text":199},"23340519","Good idea. I had thought of adding text to annotations but didn’t want to complicate the first draft of this.",{"id":54,"text":55},{"commenters":202,"max_depth":203,"maker_replies":33,"first_comment_mins":204,"lifespan_hours":205},51,7,46,308,[207,211,215,219,223,227,230,232,233,236,239,242,245,247,251,253,256,258,261,264,267,270,273,275,278,280,281,282,284,287,288,289,292,294,298,301,304,307,308,312,316,319,321,322,327,329,332,334,337,340,342,344,345,347,349,351,356,359,361,363,368,371,373,375,376,378,381,386,388,392,393,395,398,400],[208,43,46,209,210,43],"23341609","project\u002Fpositive\u002Fidea","jwilber",[212,43,46,213,214,43],"23344204","maker\u002Fpositive\u002Fnone","kyawzazaw",[216,43,43,217,218,43],"23345730","other\u002Fpositive\u002Fdesign","mattbk1",[220,43,43,221,222,43],"23346137","other\u002Fpositive\u002Fnone","onurcel",[224,43,43,225,226,43],"23347542","other\u002Fneutral\u002Fnone","throwaway77384",[228,43,43,225,229,43],"23348569","sleepychu",[231,43,43,225,226,43],"23476208",[189,18,46,209,190,43],[234,34,46,209,235,43],"23347198","antibland",[237,35,43,225,238,43],"23343211","grizzles",[240,35,43,225,241,43],"23343441","egfx",[243,35,43,225,244,43],"23343837","voz_",[246,35,43,225,241,43],"23343906",[248,35,43,249,250,43],"23344646","commenter\u002Fneutral\u002Fnone","okamiueru",[252,35,43,249,244,43],"23355705",[254,35,43,255,250,43],"23360814","commenter\u002Fcritical\u002Fpricing",[257,35,43,249,241,43],"23361423",[259,35,43,260,244,43],"23393678","commenter\u002Fcritical\u002Fnone",[262,35,43,225,263,43],"23344916","gedy",[265,35,43,225,266,43],"23344184","anthonybennis",[268,35,43,225,269,43],"23345884","chrismorgan",[271,35,43,225,272,43],"23347206","antimatter15",[274,35,43,225,238,43],"23348378",[276,41,46,209,277,43],"23341290","benatkin",[195,41,43,279,11,18],"maker\u002Fneutral\u002Fidea",[140,46,46,209,141,43],[198,46,43,279,11,18],[283,46,46,213,141,43],"23340573",[97,285,46,286,98,43],6,"project\u002Fpositive\u002Fdesign",[101,203,46,286,102,43],[54,203,43,279,11,18],[290,203,46,209,291,43],"23342925","sixQuarks",[155,293,46,209,156,43],8,[295,293,35,296,297,43],"23340410","project\u002Fneutral\u002Fidea","mohap2",[299,293,46,209,300,43],"23340473","Jackim",[302,293,46,209,303,43],"23341998","agustif",[305,293,46,209,306,43],"23342344","kkotak",[182,293,43,225,183,43],[309,310,35,296,311,43],"23342272",9,"XCSme",[313,310,35,314,315,43],"23342764","project\u002Fneutral\u002Fexecution","tiborsaas",[317,310,43,318,11,18],"23343253","maker\u002Fneutral\u002Fexecution",[320,310,35,314,311,43],"23344218",[113,33,46,209,114,43],[323,324,35,325,326,43],"23340620",11,"project\u002Fmixed\u002Fidea","29athrowaway",[328,324,35,296,277,43],"23341440",[330,324,18,331,326,43],"23342167","project\u002Fcritical\u002Fidea",[163,333,46,286,164,43],12,[335,333,35,314,336,43],"23340220","baddox",[338,333,35,314,339,43],"23340838","netvarun",[121,39,18,341,122,43],"project\u002Fcritical\u002Fdesign",[343,39,43,318,11,18],"23341556",[125,39,18,341,126,43],[105,346,46,286,106,43],14,[348,346,43,213,11,18],"23340047",[174,350,43,225,175,43],15,[352,353,46,354,355,43],"23346866",16,"project\u002Fpositive\u002Fexecution","thadk",[357,16,35,296,358,43],"23341915","chadlavi",[360,16,43,279,11,18],"23341940",[362,16,46,209,358,43],"23342261",[364,365,46,366,367,43],"23340063",18,"project\u002Fpositive\u002Fnone","tumblen",[132,369,35,370,133,43],19,"project\u002Fmixed\u002Fdocs",[62,369,43,372,11,18],"project\u002Fneutral\u002Fnone",[374,369,46,366,133,43],"23343802",[80,369,43,249,81,43],[377,369,43,249,133,43],"23343805",[379,369,43,249,380,43],"23343438","yurry",[382,383,43,384,385,43],"23340659",20,"other\u002Fneutral\u002Fdesign","yarone",[170,387,46,366,171,43],21,[389,390,46,213,391,43],"23342536",22,"Ptrulli",[68,390,43,318,11,18],[148,394,35,296,149,43],23,[396,32,46,209,397,43],"23341113","m88m",[144,399,35,296,145,43],25,[401,399,43,402,11,18],"23343355","maker\u002Fneutral\u002Fnone",[],[405,409,414,419,424,428],{"id":406,"name":407,"points":408,"category":20},"23366532","Simpdf",327,{"id":410,"name":411,"points":412,"category":413},"23370646","WiFi Card",305,"productivity",{"id":415,"name":416,"points":417,"category":418},"23392049","HN Blogs",289,"learning_science",{"id":420,"name":421,"points":422,"category":423},"23408144","Virus Cafe",278,"consumer_social",{"id":425,"name":426,"points":427,"category":20},"23363767","git-fuzzy",251,{"id":429,"name":430,"points":431,"category":432},"23407643","Stock Performance of US Senators",246,"finance_crypto",false,"v2",{"id":436,"name":5,"line":6,"ai":433,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":437,"top":18,"kw":438,"maker":11,"domain":10,"tier":19,"attempts":43,"strip":439,"url":9,"mix":440,"praise":93,"objection":118,"sub":21},23339244,0.55,[24,25,26,27,28],"5500500000005055555503351531305550505553",[32,33,34,35],1794036591228]