[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-javascript-3":32,"tags-all":286},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":17,"packages":18,"community":17,"certificates":17,"teams":18,"commerce":18},2,{"items":33,"meta":282},[34,68,90,110,130,153,171,189,210,228,246,264],{"id":35,"slug":36,"title":37,"subtitle":38,"excerpt":39,"coverUrl":40,"locale":13,"readingMinutes":41,"publishedAt":42,"viewCount":43,"likeCount":19,"commentCount":19,"author":44,"vertical":49,"topic":50,"tags":53,"_count":65,"playground":67,"hasQuiz":17,"hasPlayground":17},"019fe660-503a-7133-b7b0-7d5ce9587539","intersection-observer-visibility","Your scroll listener fires on every pixel. `IntersectionObserver` fires when visibility actually changes.",null,"Detecting whether an element is in the viewport by listening to scroll events runs an expensive layout calculation on every frame. `IntersectionObserver` is the browser-native alternative — it fires only when visibility changes, off the main thread, with no scroll handler involved.","\u002Fmedia\u002Fcovers\u002Fintersection-observer-visibility.png",4,"2026-07-19T08:25:59.411Z",65,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},"javascript","JavaScript",[54,56,59,62],{"slug":51,"name":55,"color":38},"Javascript",{"slug":57,"name":58,"color":38},"webdev","Webdev",{"slug":60,"name":61,"color":38},"frontend","Frontend",{"slug":63,"name":64,"color":38},"performance","Performance",{"assessments":66},1,{"slug":36},{"id":69,"slug":70,"title":71,"subtitle":38,"excerpt":72,"coverUrl":73,"locale":13,"readingMinutes":74,"publishedAt":75,"viewCount":76,"likeCount":19,"commentCount":19,"author":77,"vertical":78,"topic":79,"tags":82,"_count":88,"playground":89,"hasQuiz":17,"hasPlayground":17},"019fe660-48c5-70fe-a5b4-b20c5b2661e7","css-anchor-positioning","You're using Floating UI to position your tooltip. The browser does it natively now.","CSS Anchor Positioning is Baseline 2026 — it lets any element declare itself an anchor and any floating element position relative to it in pure CSS. No JavaScript, no layout math, no ResizeObserver wiring.","\u002Fmedia\u002Fcovers\u002Fcss-anchor-positioning.png",5,"2026-07-18T07:59:42.250Z",69,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":80,"name":81},"css","CSS",[83,85,86,87],{"slug":80,"name":84,"color":38},"Css",{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":70},{"id":91,"slug":92,"title":93,"subtitle":38,"excerpt":94,"coverUrl":95,"locale":13,"readingMinutes":41,"publishedAt":96,"viewCount":97,"likeCount":19,"commentCount":19,"author":98,"vertical":99,"topic":100,"tags":101,"_count":108,"playground":109,"hasQuiz":17,"hasPlayground":17},"019fe660-32b6-757d-a975-3860df795f67","immutable-array-methods","Your `.sort()` is mutating state. JavaScript finally gave you the fix.","The classic array methods — sort, reverse, splice — mutate the original array, silently breaking React state updates and surprising anyone who forgot to spread first. ES2023 added four immutable counterparts: toSorted, toReversed, toSpliced, and with.","\u002Fmedia\u002Fcovers\u002Fimmutable-array-methods.png","2026-07-15T08:22:28.270Z",63,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[102,103,104,105],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":106,"name":107,"color":38},"react","React",{"assessments":66},{"slug":92},{"id":111,"slug":112,"title":113,"subtitle":38,"excerpt":114,"coverUrl":115,"locale":13,"readingMinutes":41,"publishedAt":116,"viewCount":117,"likeCount":19,"commentCount":19,"author":118,"vertical":119,"topic":120,"tags":121,"_count":128,"playground":129,"hasQuiz":17,"hasPlayground":17},"019fe660-2b2e-71fb-a0d1-fd1509765d3b","object-groupby-replace-reduce","You've been writing this `reduce` a hundred times. `Object.groupBy` does it in one.","Grouping an array by a key is one of the most common data transforms in frontend code. You've been wiring it by hand with `reduce` for years. `Object.groupBy` is the native version — no helper, no library, no ceremony.","\u002Fmedia\u002Fcovers\u002Fobject-groupby-replace-reduce.png","2026-07-14T08:16:56.309Z",57,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[122,123,124,125],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":126,"name":127,"color":38},"node","Node",{"assessments":66},{"slug":112},{"id":131,"slug":132,"title":133,"subtitle":38,"excerpt":134,"coverUrl":135,"locale":13,"readingMinutes":136,"publishedAt":137,"viewCount":138,"likeCount":19,"commentCount":19,"author":139,"vertical":140,"topic":141,"tags":142,"_count":151,"playground":152,"hasQuiz":17,"hasPlayground":17},"019fe660-2335-7652-9e51-7c6f28871874","weekly-javascript-event-loop","JavaScript Event Loop Explained: The Complete Guide","Learn how the JavaScript event loop really works — call stack, microtasks, and macrotasks — with worked examples, edge cases, and a cheat sheet.","\u002Fmedia\u002Fcovers\u002Fweekly-javascript-event-loop.png",13,"2026-07-13T09:36:33.464Z",70,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[143,144,145,148],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":146,"name":147,"color":38},"tutorial","Tutorial",{"slug":149,"name":150,"color":38},"programming","Programming",{"assessments":66},{"slug":132},{"id":154,"slug":155,"title":156,"subtitle":38,"excerpt":157,"coverUrl":158,"locale":13,"readingMinutes":74,"publishedAt":159,"viewCount":160,"likeCount":19,"commentCount":19,"author":161,"vertical":162,"topic":163,"tags":164,"_count":169,"playground":170,"hasQuiz":17,"hasPlayground":17},"019fe660-1be2-74dd-aa56-0c8fd84204fd","promise-concurrency-all-settled-any-race","You reach for `Promise.all` for every concurrent request. Here's when to use the other three.","`Promise.all` fails the moment any one request fails. `allSettled`, `any`, and `race` each solve a different concurrency problem — dashboard partial results, CDN failover, and timeouts. Here's the taxonomy.","\u002Fmedia\u002Fcovers\u002Fpromise-concurrency-all-settled-any-race.png","2026-07-13T09:36:32.501Z",42,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[165,166,167,168],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":126,"name":127,"color":38},{"assessments":66},{"slug":155},{"id":172,"slug":173,"title":174,"subtitle":38,"excerpt":175,"coverUrl":176,"locale":13,"readingMinutes":41,"publishedAt":177,"viewCount":178,"likeCount":19,"commentCount":19,"author":179,"vertical":180,"topic":181,"tags":182,"_count":187,"playground":188,"hasQuiz":17,"hasPlayground":17},"019fe660-1462-723e-9605-66ffa7e98f42","popover-api-native-popovers","Your dropdown is a div. The browser has a native popover now.","Custom dropdowns, tooltips, and menus built with stacked divs and click-outside listeners — the Popover API landed in every browser in 2024, and the baseline version is two HTML attributes.","\u002Fmedia\u002Fcovers\u002Fpopover-api-native-popovers.png","2026-07-12T08:24:42.323Z",52,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[183,184,185,186],{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"slug":80,"name":84,"color":38},{"assessments":66},{"slug":173},{"id":190,"slug":191,"title":192,"subtitle":38,"excerpt":193,"coverUrl":194,"locale":13,"readingMinutes":74,"publishedAt":195,"viewCount":196,"likeCount":19,"commentCount":19,"author":197,"vertical":198,"topic":199,"tags":202,"_count":208,"playground":209,"hasQuiz":17,"hasPlayground":17},"019fe660-0d25-72d6-8fd8-3cf3c3592e54","typescript-satisfies-operator","Your TypeScript config objects are losing type information. `satisfies` fixes it.","Type annotations widen your object types and erase the precise values TypeScript inferred. The `satisfies` operator validates against a type without changing what TypeScript keeps — you get the check without the widening.","\u002Fmedia\u002Fcovers\u002Ftypescript-satisfies-operator.png","2026-07-11T08:03:26.200Z",45,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":200,"name":201},"typescript","TypeScript",[203,205,206,207],{"slug":200,"name":204,"color":38},"Typescript",{"slug":57,"name":58,"color":38},{"slug":51,"name":55,"color":38},{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":191},{"id":211,"slug":212,"title":213,"subtitle":38,"excerpt":214,"coverUrl":215,"locale":13,"readingMinutes":41,"publishedAt":216,"viewCount":217,"likeCount":19,"commentCount":19,"author":218,"vertical":219,"topic":220,"tags":221,"_count":226,"playground":227,"hasQuiz":17,"hasPlayground":17},"019fe660-0596-7433-9dc2-0fc620be2d0f","structuredclone-deep-clone","You've been deep-cloning objects with a JSON hack. `structuredClone` does it right.","JSON.parse(JSON.stringify(obj)) silently corrupts Dates, Maps, Sets, and undefined values. structuredClone is the native replacement — no library, no import, no surprises.","\u002Fmedia\u002Fcovers\u002Fstructuredclone-deep-clone.png","2026-07-10T09:43:33.966Z",44,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[222,223,224,225],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":126,"name":127,"color":38},{"assessments":66},{"slug":212},{"id":229,"slug":230,"title":231,"subtitle":38,"excerpt":232,"coverUrl":233,"locale":13,"readingMinutes":41,"publishedAt":234,"viewCount":235,"likeCount":19,"commentCount":19,"author":236,"vertical":237,"topic":238,"tags":239,"_count":244,"playground":245,"hasQuiz":17,"hasPlayground":17},"019fe65f-fe39-767c-9ce8-da4db5144b1d","css-nesting-sass-replaced","You kept Sass for one reason. Native CSS nesting just ended it.","CSS has supported nesting natively since 2023 — pseudo-classes, pseudo-elements, and @media queries nested inside the rules they belong to. No compiler required.","\u002Fmedia\u002Fcovers\u002Fcss-nesting-sass-replaced.png","2026-07-09T09:48:41.505Z",48,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":80,"name":81},[240,241,242,243],{"slug":80,"name":84,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":230},{"id":247,"slug":248,"title":249,"subtitle":38,"excerpt":250,"coverUrl":251,"locale":13,"readingMinutes":74,"publishedAt":252,"viewCount":253,"likeCount":19,"commentCount":19,"author":254,"vertical":255,"topic":256,"tags":257,"_count":262,"playground":263,"hasQuiz":17,"hasPlayground":17},"019fe65f-f67a-7038-9c0d-874d6c8ece3c","css-property-registered-custom-properties","You can't transition a CSS variable. @property says otherwise.","CSS custom properties are string substitution — the browser doesn't know a number from a color. Register one with @property and it gains a real type, an initial value, and the ability to animate.","\u002Fmedia\u002Fcovers\u002Fcss-property-registered-custom-properties.png","2026-07-08T08:36:23.824Z",59,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":80,"name":81},[258,259,260,261],{"slug":80,"name":84,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":248},{"id":265,"slug":266,"title":267,"subtitle":38,"excerpt":268,"coverUrl":269,"locale":13,"readingMinutes":74,"publishedAt":270,"viewCount":271,"likeCount":19,"commentCount":19,"author":272,"vertical":273,"topic":274,"tags":275,"_count":280,"playground":281,"hasQuiz":17,"hasPlayground":17},"019fe65f-ef22-765a-97c7-cdfdbb168024","scroll-driven-animations","Your scroll listener is doing CSS's job","Reading progress bars, reveal-on-scroll effects, parallax — you've been writing these in JavaScript. CSS scroll-driven animations bind them directly to scroll position, off the main thread, in a handful of lines.","\u002Fmedia\u002Fcovers\u002Fscroll-driven-animations.png","2026-07-06T10:47:02.014Z",51,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":80,"name":81},[276,277,278,279],{"slug":80,"name":84,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":266},{"page":283,"perPage":284,"total":285,"totalPages":41},3,12,46,[287,288,289,290,292,294,296,297,298,301,304,305,308,311,314],{"slug":57,"name":58,"color":38,"articles":271},{"slug":51,"name":55,"color":38,"articles":285},{"slug":60,"name":61,"color":38,"articles":196},{"slug":80,"name":84,"color":38,"articles":291},19,{"slug":200,"name":204,"color":38,"articles":293},9,{"slug":63,"name":64,"color":38,"articles":295},7,{"slug":106,"name":107,"color":38,"articles":74},{"slug":126,"name":127,"color":38,"articles":41},{"slug":299,"name":300,"color":38,"articles":41},"grammar","Grammar",{"slug":302,"name":303,"color":38,"articles":283},"ai","Ai",{"slug":146,"name":147,"color":38,"articles":283},{"slug":306,"name":307,"color":38,"articles":283},"html","Html",{"slug":309,"name":310,"color":38,"articles":31},"verbs","Verbs",{"slug":312,"name":313,"color":38,"articles":31},"a1","A1",{"slug":315,"name":316,"color":38,"articles":31},"turkish","Turkish"]