[{"data":1,"prerenderedAt":370},["ShallowReactive",2],{"project-35991783":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":46,"post_text":48,"what":49,"said":84,"maker_in_thread":205,"shape":215,"grid":219,"attempts":334,"same_week":335,"maker_shows":284,"maker_hidden":363,"reader_version":364,"card":365},"35991783","Swap.js","a JavaScript micro-framework (HTML fragments over the wire)","title","Show HN: Swap.js – a JavaScript micro-framework (HTML fragments over the wire)","https:\u002F\u002Fgithub.com\u002Fjosephernest\u002FSwap","github.com","josephernest",1684433051,2023,127,45,494,3109,16,"notable","languages","javascript micro-framework","library",[24,25,26,27,28],"html over the wire","ajax navigation","javascript framework","fragment swapping","htmx alternative","mixed",0.2,{"positive":32,"neutral":33,"mixed":34,"critical":35},7,8,1,4,20,{"docs":38,"design":40,"idea":42,"execution":44,"privacy":45},{"positive":39,"critical":39},0,{"positive":41,"critical":39},2,{"positive":41,"critical":43},3,{"positive":43,"critical":39},{"positive":39,"critical":34},[39,39,39,39,43,39,43,39,43,34,39,39,34,34,39,43,39,39,39,39,39,39,39,47,43,47,43,39,47,43,47,39,43,47,39,43,43,39,39,39],5,null,{"problem":50,"audience":57,"pricing":48,"motivation":65,"time_to_build":48,"stack":69,"openness":82,"stage":83,"team_size":83},{"value":51,"source":52,"evidence":53},"Navigating web apps by swapping parts of the page without client-side rendering frameworks","maker",[54],{"id":55,"by":11,"text":56},"35992266","Author here! I created this lib in the need of a simple and tiny framework to easily do AJAX-style navigation \u002F replacement of fragments in the page, in a web application. For…",{"value":58,"source":59,"evidence":60},"Developers who want simple server-rendered web applications without heavy frameworks","inferred",[61,62],{"id":55,"by":11,"text":56},{"id":63,"by":11,"text":64},"36009951","Thanks for the comment! These 2 other libraries are really great. For something as important as the choice of a web framework, I realized I really wanted to 100% understand the…",{"value":66,"source":52,"evidence":67},"Wanted a tiny, fully understandable framework that handles browser history and swapping",[68],{"id":63,"by":11,"text":64},[70,74,78],{"value":71,"source":52,"evidence":72},"JavaScript",[73],{"id":55,"by":11,"text":56},{"value":75,"source":52,"evidence":76},"fetch API",[77],{"id":55,"by":11,"text":56},{"value":79,"source":52,"evidence":80},"MutationObserver API",[81],{"id":55,"by":11,"text":56},"open_source","unknown",{"praise":85,"objections":121,"requests":147,"questions":162,"alternatives":184},[86,106],{"value":87,"source":88,"evidence":89},"Tiny size and readable source with no build tools needed","commenter",[90,94,98,102],{"id":91,"by":92,"text":93},"36010001","janwillemb","> vanilla JS (no external tool needed: no bundler, no webpack, no TypeScript compiler, no minification needed...) Nice, I like that. I dread the modern way of having to jump…",{"id":95,"by":96,"text":97},"36010218","harha_","I read through the swap.js file and there's a lot of things happening. I also like the fact that it has no dependencies and it's cool that it achieves so much with so little code.",{"id":99,"by":100,"text":101},"36011405","victorbjorklund","Wow. That is beautiful. So concise and yet easy to understand.",{"id":103,"by":104,"text":105},"36008214","garganzol","Impressive, especially considering the implementation size. Just by looking at swap.js file, I could not actually believe it really works but it clearly gets the job done.",{"value":107,"source":88,"evidence":108},"Similar to HTMX and pjax, a welcome return of ajax-style navigation",[109,113,117],{"id":110,"by":111,"text":112},"36008794","krsdcbl","I'm getting a bit of deja vu from this recebt rediscovery of ajax but i really like it. Back when js was obscure and jQuery became ubiquitous, that practice was a go to and sites…",{"id":114,"by":115,"text":116},"36010446","wryun","I like it, but it feels funny to have this discussion without acknowledging this is really similar to pjax\u002Fturbolinks. Ok, now I'm feeling better; carry on!",{"id":118,"by":119,"text":120},"36009882","ulrischa","This is much better than htmx. I like the focus on just swapping content",[122,132,139],{"value":123,"source":88,"evidence":124},"Only supports GET links, not form POSTs, so limited for real sites",[125,129],{"id":126,"by":127,"text":128},"36008216","devmunchies","Lib is EXTREMELY minimal. Only GET requests with anchor tags. That you can’t POST forms or send metadata make it mostly useless for anything but the most basic website. I guess…",{"id":130,"by":127,"text":131},"36013765","It's not about the POSTing. Its how you handle the response. The paradigm of this library is that you replace segments of the page with the response, which it doesn't support for…",{"value":133,"source":88,"evidence":134},"Replacing document.body can break browser extensions and scripts",[135],{"id":136,"by":137,"text":138},"36008516","chrismorgan","Link handling needs to check keyboard modifier state, so that you don’t intercept things like Ctrl+click. You can also work with just one event handler rather than many. Here’s…",{"value":140,"source":88,"evidence":141},"Injecting HTML via innerHTML raises XSS concerns",[142,146],{"id":143,"by":144,"text":145},"36010109","dvh","Ah the good old element.innerHTML = xss_vector_here",{"id":136,"by":137,"text":138},[148,155],{"value":149,"source":88,"evidence":150},"Document accessibility impact for screen readers",[151],{"id":152,"by":153,"text":154},"36011645","simonw","Feature request: documentation describing the accessibility impact this will have. Any time I'm considering a library like this my number one question is always the impact it…",{"value":156,"source":88,"evidence":157},"Add polling for updates at intervals",[158],{"id":159,"by":160,"text":161},"36013077","replwoacause","Have you thought about adding polling functionality, so that a given element can check with the server for updates at a set interval?",[163,173],{"value":164,"source":88,"evidence":165},"How does it compare to HTMX and Unpoly",[166,170],{"id":167,"by":168,"text":169},"36008182","canadiantim","How would you compare yourself to HTMX and Unpoly? I'm keenly interesting in this space for sure and love that you're working on another!",{"id":171,"by":160,"text":172},"36013026","Why is it much better?",{"value":174,"source":88,"evidence":175},"Should custom attributes use a data- prefix",[176,180],{"id":177,"by":178,"text":179},"36010737","Ciantic","Someone who used jQuery.load a lot back in the day, it's nice to see this trend coming back. Only thing that stands out to me is using custom properties without data prefix, e.g.…",{"id":181,"by":182,"text":183},"36010757","solarkraft","I believe doing this is already quite common and there's no real drawback. As far as I know the main advantage of the data- prefix is that there's a guarantee that no official…",[185,193,197,201],{"value":186,"source":88,"evidence":187},"HTMX",[188,192],{"id":189,"by":190,"text":191},"36008341","dyeje","I’m bought in to this approach after using Hotwire, but I’m concerned that all the competing implementations are going to undermine adoption. Maybe we should all just use htmx…",{"id":167,"by":168,"text":169},{"value":194,"source":88,"evidence":195},"Unpoly",[196],{"id":167,"by":168,"text":169},{"value":198,"source":88,"evidence":199},"pjax and Turbolinks",[200],{"id":114,"by":115,"text":116},{"value":202,"source":88,"evidence":203},"Hotwire",[204],{"id":189,"by":190,"text":191},{"comments":206,"answered":41,"key":207},9,[208,211,212],{"id":209,"text":210},"36013430","Good question... I haven't thought about it deeply, but I would say that using this lib itself won't have impact on accessibility: if the HTML fragments are carefully crafted to…",{"id":63,"text":64},{"id":213,"text":214},"36009847","Hi, author here, I just woke up and see all these comments :) I'm reading and I'll answer!",{"commenters":216,"max_depth":47,"maker_replies":206,"first_comment_mins":217,"lifespan_hours":218},32,35,60,[220,222,226,229,232,234,235,238,240,242,244,246,249,251,254,257,261,263,265,268,269,271,273,275,278,280,283,286,290,292,294,297,301,303,304,306,309,311,313,316,319,322,324,326,328,332],[189,39,39,221,190,39],"other\u002Fneutral\u002Fidea",[223,39,39,224,225,39],"36009748","commenter\u002Fneutral\u002Fnone","quickthrower2",[227,39,39,221,228,39],"36011322","leke",[230,39,39,221,231,39],"36012457","josephscott",[152,34,43,233,153,39],"project\u002Fneutral\u002Fdocs",[209,34,39,233,11,34],[236,34,39,237,153,39],"36018333","commenter\u002Fneutral\u002Fdocs",[177,41,43,239,178,39],"project\u002Fneutral\u002Fdesign",[181,41,39,241,182,39],"commenter\u002Fneutral\u002Fdesign",[167,43,43,243,168,39],"project\u002Fneutral\u002Fidea",[126,43,34,245,127,39],"project\u002Fcritical\u002Fidea",[247,43,39,224,248,39],"36008504","breakfastduck",[130,43,39,250,127,39],"commenter\u002Fcritical\u002Fidea",[252,43,34,245,253,39],"36009064","juancampa",[255,43,34,245,256,39],"36009307","djbusby",[258,43,39,259,260,39],"36009503","other\u002Fneutral\u002Fnone","hombre_fatal",[63,43,39,262,11,34],"maker\u002Fneutral\u002Fnone",[136,35,43,264,137,39],"project\u002Fneutral\u002Fexecution",[266,35,39,224,267,39],"36008944","qingcharles",[213,35,39,262,11,34],[270,35,39,224,267,39],"36014006",[272,35,39,224,11,34],"36014056",[274,35,39,224,260,39],"36009494",[276,35,39,224,277,39],"36009680","Lorin",[279,35,39,262,11,34],"36009985",[281,47,39,221,282,39],"36016544","moritzwarhier",[91,284,47,285,92,39],6,"project\u002Fpositive\u002Fdesign",[287,32,43,288,289,39],"36009348","project\u002Fmixed\u002Fexecution","tommica",[95,33,47,291,96,39],"project\u002Fpositive\u002Fexecution",[110,206,47,293,111,39],"project\u002Fpositive\u002Fidea",[143,295,34,296,144,39],10,"project\u002Fcritical\u002Fprivacy",[298,299,39,300,11,34],"36010130",11,"project\u002Fneutral\u002Fnone",[118,302,47,293,119,39],12,[171,302,43,300,160,39],[99,305,47,285,100,39],13,[307,305,39,308,11,34],"36013298","maker\u002Fpositive\u002Fnone",[114,310,43,243,115,39],14,[103,312,47,291,104,39],15,[314,312,47,291,315,39],"36008542","LeonB",[317,312,39,221,318,39],"36008582","shaunxcode",[320,18,43,243,321,39],"36016714","shove",[159,323,43,243,160,39],17,[325,323,39,243,11,34],"36013255",[327,323,39,224,160,39],"36014437",[329,330,39,259,331,39],"36009122",18,"gijoeyguerra",[55,333,39,243,11,34],19,[],[336,341,346,351,355,359],{"id":337,"name":338,"points":339,"category":340},"36009774","YouTube Full Text Search",540,"dev_tools",{"id":342,"name":343,"points":344,"category":345},"36064639","Pixian",383,"ai",{"id":347,"name":348,"points":349,"category":350},"36047143","Open sourcing Harmonic",305,"consumer_social",{"id":352,"name":353,"points":354,"category":340},"36020717","Trogon",248,{"id":356,"name":357,"points":358,"category":340},"36020001","SpaceBadgers",199,{"id":360,"name":361,"points":362,"category":345},"36037419","Blotter",166,false,"v2",{"id":366,"name":5,"line":6,"ai":363,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":367,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":368,"url":9,"mix":369,"praise":87,"objection":123,"sub":21},35991783,[24,25,26,27,28],"0000303031001103000000053530535035033000",[32,33,34,35],1794036635798]