[{"data":1,"prerenderedAt":409},["ShallowReactive",2],{"project-12372165":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":46,"post_text":48,"what":49,"said":86,"maker_in_thread":203,"shape":210,"grid":214,"attempts":371,"same_week":372,"maker_shows":41,"maker_hidden":402,"reader_version":403,"card":404},"12372165","In-view.js","Get notified when DOM elements enter or exit the viewport","title","Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport","https:\u002F\u002Fgithub.com\u002Fcamwiegert\u002Fin-view","github.com","Heqx",1472302793,2016,118,62,304,2264,14,"notable","languages","javascript library","library",[24,25,26,27],"viewport","scroll","lazy loading","dom visibility","mixed",-0.24,{"positive":31,"neutral":32,"mixed":33,"critical":34},4,13,0,12,29,{"idea":37,"docs":40,"performance":42,"execution":44,"design":45},{"positive":38,"critical":39},2,3,{"positive":33,"critical":41},1,{"positive":33,"critical":43},7,{"positive":41,"critical":41},{"positive":41,"critical":33},[41,41,41,39,39,41,39,41,33,33,33,33,41,33,33,33,47,41,33,39,33,33,33,41,41,33,33,41,33,33,47,39,39,39,41,33,33,39,47,39],5,null,{"problem":50,"audience":48,"pricing":48,"motivation":48,"time_to_build":48,"stack":56,"openness":84,"stage":85,"team_size":85},{"value":51,"source":52,"evidence":53},"Detecting when DOM elements enter or exit the viewport","maker",[54],{"id":55},"post",[57,67,76,80],{"value":58,"source":52,"evidence":59},"JavaScript (ES6)",[60,64],{"id":61,"by":62,"text":63},"12372637","zeroxfe","Why is Babel overkill? It lets you write your code in ES6, which is a huge benefit for many reasons.",{"id":65,"by":11,"text":66},"12372805","Hey, author here. I'm very open to ideas to reduce bloat. It's 140 SLOC and ~1.1kb gzipped without lodash\u002Fthrottle. I considered writing my own throttle, but wanted something…",{"value":68,"source":69,"evidence":70},"Babel","commenter",[71,75],{"id":72,"by":73,"text":74},"12372477","dmbass","Babel and webpack are megaoverkill for this and account for a good chunk of the 2k gzipped size. The actual library code is barely 140SLOC. There's a lot of room for improvement…",{"id":61,"by":62,"text":63},{"value":77,"source":69,"evidence":78},"webpack",[79],{"id":72,"by":73,"text":74},{"value":81,"source":52,"evidence":82},"lodash throttle",[83],{"id":65,"by":11,"text":66},"open_source","unknown",{"praise":87,"objections":102,"requests":147,"questions":157,"alternatives":168},[88,95],{"value":89,"source":69,"evidence":90},"Clear code and efficient implementation",[91],{"id":92,"by":93,"text":94},"12373211","incogitomode","I made something similar for use with Knockout.js. Love your clear code and efficient implementation! I will probably swap out my core logic for yours. Some here have mentioned…",{"value":96,"source":69,"evidence":97},"Demo page is good",[98],{"id":99,"by":100,"text":101},"12372565","Eric_WVGG","I believe Waypoints also does this same thing, it's a fairly mature lib. https:\u002F\u002Fgithub.com\u002Fimakewebthings\u002Fwaypoints kudos for in-view's demo page though",[103,117,129,140],{"value":104,"source":69,"evidence":105},"Should use the standard IntersectionObserver API or polyfill instead",[106,110,113],{"id":107,"by":108,"text":109},"12372597","cdata","There is an emerging standard called Intersection Observer that addresses the same use case: https:\u002F\u002Fgithub.com\u002FWICG\u002FIntersectionObserver\u002Fblob\u002Fgh-pages\u002Fexplainer.md This is a…",{"id":111,"by":108,"text":112},"12373179","All the more reason to experiment with the proposed standard API and contribute feedback. The advantages of standardization and eventual native implementation outweigh the…",{"id":114,"by":115,"text":116},"12373591","spankalee","A spec being draft seems like an odd reason to ignore it and do a completely different API. Intersection Observer has been implemented in Chrome since 51, and Opera since 38.…",{"value":118,"source":69,"evidence":119},"Performance cost of scroll handlers and layout reads",[120,124,125],{"id":121,"by":122,"text":123},"12374281","wldlyinaccurate","I know that this type of functionality is useful, but please consider the performance implications before doing anything like this. Non-native implementations (i.e. not…",{"id":72,"by":73,"text":74},{"id":126,"by":127,"text":128},"12373823","iamleppert","Whenever you attach an event handler on scroll, it can impact page performance because the javascript needs to be evaluated before the scroll event can continue AFAIK...going…",{"value":130,"source":69,"evidence":131},"Bundle size is bloated for 140 lines of code",[132,133,137],{"id":72,"by":73,"text":74},{"id":134,"by":135,"text":136},"12372699","nathancahill","The fact that it's delivering 140 lines in 5.5kb. That's a lot of bloat! There are ways to write code in ES6 without that (see sibling responses).",{"id":138,"by":135,"text":139},"12373484","Not sure why I was downvoted, I think it's a valid point. To prove it, here's the functionality of your library in ES5 with a naive throttle function:…",{"value":141,"source":69,"evidence":142},"Missing edge cases",[143],{"id":144,"by":145,"text":146},"12373539","vvoyer","There are a lot of edge cases to handle when creating a library like that and I cannot see them dealt with in this library. More than three years ago I created in-viewport and…",[148,153],{"value":149,"source":69,"evidence":150},"Reduce bundle size",[151,152],{"id":134,"by":135,"text":136},{"id":138,"by":135,"text":139},{"value":154,"source":69,"evidence":155},"Document the relation to IntersectionObserver",[156],{"id":111,"by":108,"text":112},[158,164],{"value":159,"source":52,"evidence":160},"Is IntersectionObserver a viable alternative given draft status",[161],{"id":162,"by":11,"text":163},"12373047","I hear you. But, isn't this just an editor's draft spec? Only Chrome and Android have done any implementation at all. So, as far as I can tell, there's a chance this will never…",{"value":165,"source":52,"evidence":166},"Would rollup produce a smaller bundle",[167],{"id":65,"by":11,"text":66},[169,174,178,182,189,196],{"value":170,"source":69,"evidence":171},"IntersectionObserver",[172,173],{"id":107,"by":108,"text":109},{"id":114,"by":115,"text":116},{"value":175,"source":69,"evidence":176},"Waypoints",[177],{"id":99,"by":100,"text":101},{"value":179,"source":69,"evidence":180},"in-viewport",[181],{"id":144,"by":145,"text":146},{"value":183,"source":69,"evidence":184},"jquery-visible",[185],{"id":186,"by":187,"text":188},"12373946","hiphopyo","Similar to https:\u002F\u002Fgithub.com\u002Fcustomd\u002Fjquery-visible which I use a lot.",{"value":190,"source":69,"evidence":191},"onScreen",[192],{"id":193,"by":194,"text":195},"12374623","spython","I am using this technique to lazy load and unload videos on my site[1]. Since there are many videos that autoplay on scroll, some mechanism is needed to stop loading a video that…",{"value":197,"source":69,"evidence":198},"Echo.js",[199],{"id":200,"by":201,"text":202},"12373214","talklittle","Yes, lazy loading is a good use case. Echo.js (https:\u002F\u002Fgithub.com\u002Ftoddmotto\u002Fecho) is another small no-dependency library (1.89 KB minified), which detects elements appearing on…",{"comments":47,"answered":38,"key":204},[205,206,209],{"id":162,"text":163},{"id":207,"text":208},"12374817","I was sincerely asking all of those questions. I'm not very familiar with the process these specs go through to reach adoption.",{"id":65,"text":66},{"commenters":211,"max_depth":43,"maker_replies":47,"first_comment_mins":212,"lifespan_hours":213},42,82,78,[215,217,219,221,222,224,228,231,234,236,239,241,244,247,249,252,255,258,259,260,264,267,270,273,275,277,278,279,281,284,287,290,293,296,299,301,302,304,306,309,311,314,317,318,321,323,327,330,335,337,339,343,345,349,352,355,358,360,363,366,367,369],[107,33,41,216,108,33],"project\u002Fcritical\u002Fidea",[162,33,33,218,11,41],"maker\u002Fneutral\u002Fidea",[111,33,41,220,108,33],"project\u002Fcritical\u002Fdocs",[114,33,41,216,115,33],[207,33,33,223,11,41],"commenter\u002Fneutral\u002Fnone",[225,33,39,226,227,33],"12373220","project\u002Fneutral\u002Fidea","SimeVidas",[229,33,39,230,115,33],"12373602","project\u002Fneutral\u002Fperformance",[232,33,39,226,233,33],"12375418","grumblestumble",[121,41,41,235,122,33],"project\u002Fcritical\u002Fperformance",[237,41,39,230,238,33],"12375175","gcb0",[144,38,41,240,145,33],"project\u002Fcritical\u002Fexecution",[242,39,39,226,243,33],"12372450","afandian",[245,39,33,246,135,33],"12372527","other\u002Fneutral\u002Fnone",[248,39,33,246,100,33],"12372559",[250,39,33,246,251,33],"12373012","globuous",[253,39,33,246,254,33],"12373018","halomru",[256,39,33,246,257,33],"12393052","Senji",[193,39,33,246,194,33],[72,31,41,235,73,33],[261,31,39,262,263,33],"12372508","project\u002Fneutral\u002Fexecution","johnhenry",[265,31,33,223,266,33],"12372821","jonahx",[268,31,33,223,269,33],"12372843","sotojuan",[271,31,33,246,272,33],"12374107","JasonSage",[274,31,33,246,272,33],"12374252",[99,31,47,276,100,33],"project\u002Fpositive\u002Fdesign",[61,31,33,223,62,33],[134,31,41,235,135,33],[65,31,33,280,11,41],"maker\u002Fneutral\u002Fperformance",[282,31,33,223,283,33],"12372856","andreasklinger",[285,31,33,223,286,33],"12373170","tdumitrescu",[288,31,39,262,289,33],"12373213","yagami_san",[291,31,33,292,11,41],"12373409","maker\u002Fneutral\u002Fnone",[294,31,33,223,295,33],"12374723","freditup",[297,31,33,223,298,33],"12375518","jdd",[300,31,33,223,135,33],"12373526",[138,31,41,235,135,33],[303,31,39,230,298,33],"12375471",[305,31,41,235,135,33],"12376912",[307,31,33,223,308,33],"12372811","Ralfp",[310,31,33,223,62,33],"12372848",[312,31,33,223,313,33],"12373357","epidemian",[315,31,33,223,316,33],"12373044","mbell",[126,47,41,235,127,33],[319,47,33,320,272,33],"12373863","other\u002Fneutral\u002Fperformance",[322,47,33,246,257,33],"12393091",[324,47,33,325,326,33],"12374376","commenter\u002Fneutral\u002Fperformance","jayflux",[328,47,33,325,329,33],"12376066","emn13",[331,332,47,333,334,33],"12373096",6,"project\u002Fpositive\u002Fidea","wamaral",[336,332,39,262,127,33],"12373807",[92,43,47,338,93,33],"project\u002Fpositive\u002Fexecution",[340,341,41,216,342,33],"12374983",8,"obihill",[186,344,39,226,187,33],9,[346,347,41,235,348,33],"12372533",10,"angry-hacker",[350,347,33,246,351,33],"12372539","tanto",[353,347,33,246,354,33],"12372586","bikamonki",[356,347,33,246,357,33],"12375650","joesb",[359,347,33,280,11,41],"12372666",[361,362,39,292,263,33],"12372520",11,[364,362,47,333,365,33],"12372547","andrewbarba",[200,362,33,246,201,33],[368,362,39,226,351,33],"12372549",[370,362,39,226,354,33],"12372595",[],[373,378,383,388,393,397],{"id":374,"name":375,"points":376,"category":377},"12365693","Hacker News Books",463,"data",{"id":379,"name":380,"points":381,"category":382},"12360757","KnightOS",180,"dev_tools",{"id":384,"name":385,"points":386,"category":387},"12392068","HTML Sheets of Paper",136,"productivity",{"id":389,"name":390,"points":391,"category":392},"12376559","DeployBot",129,"infrastructure",{"id":394,"name":395,"points":396,"category":377},"12399985","Meetup City Finder",104,{"id":398,"name":399,"points":400,"category":401},"12398261","Price Miner",79,"consumer_social",false,"v2",{"id":405,"name":5,"line":6,"ai":402,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":406,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":407,"url":9,"mix":408,"praise":89,"objection":104,"sub":21},12372165,[24,25,26,27],"1113313100001000510300011001005333100353",[31,32,33,34],1794036547066]