[{"data":1,"prerenderedAt":286},["ShallowReactive",2],{"project-11252253":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":35,"aspects":36,"strip":43,"post_text":44,"what":45,"said":64,"maker_in_thread":175,"shape":177,"grid":181,"attempts":248,"same_week":249,"maker_shows":34,"maker_hidden":278,"reader_version":279,"card":280},"11252253","Marginotes","Marginotes, quick and elegant side notes for your paragraphs","title","Show HN: Marginotes, quick and elegant side notes for your paragraphs","https:\u002F\u002Fgithub.com\u002Ffdansv\u002Fmarginotes","github.com","Stately",1457522250,2016,111,29,327,2264,15,"notable","dev_tools","javascript library","library",[24,25,26,27,28],"margin notes","sidenotes","javascript","html attributes","progressive enhancement","debated",0.063,{"positive":32,"neutral":33,"mixed":34,"critical":32},5,7,1,18,{"execution":37,"idea":40,"design":42},{"positive":38,"critical":39},3,4,{"positive":34,"critical":41},0,{"positive":34,"critical":41},[38,38,32,34,41,32,32,38,38,34,38,34,38,32,34,38,38,41,41,41,41,41,32,34,41,41,41,41,41],null,{"problem":44,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":46,"openness":62,"stage":63,"team_size":63},[47,55],{"value":48,"source":49,"evidence":50},"JavaScript","commenter",[51],{"id":52,"by":53,"text":54},"11253781","mshenfield","I made a little experiment, and converted this to a vanilla Javascript library. Relevant to some of the questions below about whether this should use jQuery or not. Edit: There…",{"value":56,"source":49,"evidence":57},"jQuery",[58],{"id":59,"by":60,"text":61},"11252618","lolc","Looks nice! I was a little surprised at the last line in your code: window.jQuery.prototype.marginotes = window.$.prototype.marginotes = marginotes Last I checked (one minute…","open_source","unknown",{"praise":65,"objections":85,"requests":123,"questions":150,"alternatives":159},[66,81],{"value":67,"source":49,"evidence":68},"Nice, elegant margin note effect",[69,73,77],{"id":70,"by":71,"text":72},"11252769","anacleto","Pretty. Thanks.",{"id":74,"by":75,"text":76},"11252498","kozak","Very nice. It would be even better if it had some CSS media query-based fallbacks for the case when the page is being printed. And yes, jQuery should not be a requirement.",{"id":78,"by":79,"text":80},"11253355","joeclark77","This is excellent. I've been thinking about rolling my own blog software since Medium took away their marginal note feature (IIRC, you can now make notes but they're for yourself…",{"value":82,"source":49,"evidence":83},"Useful for margin notes instead of footnotes",[84],{"id":78,"by":79,"text":80},[86,93,104,116],{"value":87,"source":49,"evidence":88},"Does not work on touch devices without hover",[89],{"id":90,"by":91,"text":92},"11252998","tauchunfall","Mouse-over actions are nice on desktop. But what happens if I use a touch device?",{"value":94,"source":49,"evidence":95},"Notes invisible when JavaScript is disabled",[96,100],{"id":97,"by":98,"text":99},"11252714","gkya","What happens if I have JavaScript disabled (and I do have)?",{"id":101,"by":102,"text":103},"11252739","onion2k","You don't see anything.",{"value":105,"source":49,"evidence":106},"Uses jQuery plugin conventions incorrectly or unnecessarily",[107,108,112],{"id":59,"by":60,"text":61},{"id":109,"by":110,"text":111},"11252316","gberger","http:\u002F\u002Fyoumightnotneedjquery.com\u002F",{"id":113,"by":114,"text":115},"11252636","jakejake","I personally find it odd to create every component as a jquery plugin. To me, it makes more sense to write a plugin only when you're extending jquery core functionality itself in…",{"value":117,"source":49,"evidence":118},"Non-standard HTML attributes are invalid",[119],{"id":120,"by":121,"text":122},"11261219","DenisAyumu","Last time I checked you couldn't add HTML properties that don't exist. It's not valid HTML code. The exception are \"data-*\" properties. So the HTML markup should be \u003Cspan…",[124,129,133,140],{"value":125,"source":49,"evidence":126},"Remove jQuery dependency",[127,128],{"id":52,"by":53,"text":54},{"id":74,"by":75,"text":76},{"value":130,"source":49,"evidence":131},"Print stylesheet fallback",[132],{"id":74,"by":75,"text":76},{"value":134,"source":49,"evidence":135},"Tap-to-show fallback for touch devices",[136],{"id":137,"by":138,"text":139},"11253414","Mahn","Tap to show, tap to hide? Not quite the same, but that's how I'd do the fallback for mouse hover effects.",{"value":141,"source":49,"evidence":142},"Fallback footnotes for no-JS users",[143,146],{"id":144,"by":98,"text":145},"11252781","Which is bad if them notes are not ornaments only. So there should be some fallback. I guess a good approach would be to collect the content from some p.marginnote elements which…",{"id":147,"by":148,"text":149},"11252837","geocar","Why not just: ``` \u003Ca href=\"#fn-gcc\" class=\"has-footnote\">GCC[1]\u003C\u002Fa> … \u003Cp id=\"fn-gcc\" class=\"marginnote\">\u003Clabel>1. \u003C\u002Flabel>The GNU Compiler Collection\u003C\u002Fp> ``` It's compatible with…",[151,155],{"value":152,"source":49,"evidence":153},"What happens with JavaScript disabled",[154],{"id":97,"by":98,"text":99},{"value":156,"source":49,"evidence":157},"How to handle touch devices",[158],{"id":90,"by":91,"text":92},[160,167,171],{"value":161,"source":49,"evidence":162},"Pure CSS hover-based notes",[163],{"id":164,"by":165,"text":166},"11253239","Chris_Newton","Notes on web pages are tricky because there are so many edge cases, and they tend to expose the limitations of our current HTML+CSS model. For example, we can achieve an effect…",{"value":168,"source":49,"evidence":169},"Medium marginal notes feature",[170],{"id":78,"by":79,"text":80},{"value":172,"source":49,"evidence":173},"Standard footnotes via POSH\u002FHTML idiom",[174],{"id":147,"by":148,"text":149},{"comments":41,"answered":41,"key":176},[],{"commenters":178,"max_depth":179,"maker_replies":41,"first_comment_mins":178,"lifespan_hours":180},21,6,32,[182,184,186,189,193,196,197,199,201,202,203,205,206,207,209,212,213,215,218,220,222,225,227,230,233,237,240,241,245],[59,41,38,183,60,41],"project\u002Fmixed\u002Fexecution",[164,34,38,185,165,41],"project\u002Fneutral\u002Fidea",[52,187,32,188,53,41],2,"project\u002Fpositive\u002Fexecution",[190,187,34,191,192,41],"11254007","project\u002Fcritical\u002Fexecution","cornstalks",[194,187,41,195,53,41],"11254596","commenter\u002Fneutral\u002Fnone",[74,38,32,188,75,41],[78,39,32,198,79,41],"project\u002Fpositive\u002Fidea",[90,32,38,200,91,41],"project\u002Fneutral\u002Fdesign",[137,32,38,200,138,41],[120,179,34,191,121,41],[97,33,38,204,98,41],"project\u002Fneutral\u002Fexecution",[101,33,34,191,102,41],[144,33,38,204,98,41],[208,33,32,188,102,41],"11252819",[210,33,34,191,211,41],"11259542","NoGravitas",[147,33,38,204,148,41],[214,33,38,204,98,41],"11253334",[216,33,41,195,217,41],"11252974","dspillett",[219,33,41,195,98,41],"11253294",[221,33,41,195,217,41],"11254144",[223,33,41,224,98,41],"11254348","other\u002Fneutral\u002Fnone",[226,33,41,224,217,41],"11254904",[70,228,32,229,71,41],8,"project\u002Fpositive\u002Fdesign",[109,231,34,232,110,41],9,"project\u002Fcritical\u002Fnone",[234,231,41,235,236,41],"11252504","commenter\u002Fcritical\u002Fnone","plugnburn",[238,231,41,195,239,41],"11252527","have_faith",[113,231,41,224,114,41],[242,231,41,243,244,41],"11252833","other\u002Fneutral\u002Fidea","bobm_kite9",[246,231,41,195,247,41],"11252964","codingdave",[],[250,255,260,264,268,273],{"id":251,"name":252,"points":253,"category":254},"11238099","status page",248,"infrastructure",{"id":256,"name":257,"points":258,"category":259},"11218844","Flat",207,"creative",{"id":261,"name":262,"points":263,"category":254},"11224608","Sway",163,{"id":265,"name":266,"points":267,"category":20},"11228443","CodeCoach",131,{"id":269,"name":270,"points":271,"category":272},"11256364","Hacksplaining",128,"learning_science",{"id":274,"name":275,"points":276,"category":277},"11234702","SSHTron",104,"games",false,"v2",{"id":281,"name":5,"line":6,"ai":278,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":282,"top":18,"kw":283,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":284,"url":9,"mix":285,"praise":67,"objection":87,"sub":21},11252253,0.06,[24,25,26,27,28],"33510553313135133000005100000",[32,33,34,32],1793990939766]