[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-webdev-3":32,"tags-dev":288},[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":285},[34,68,92,114,134,152,172,192,213,231,249,267],{"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-57eb-7258-b452-d66ff04d2380","weekly-typescript-generics","TypeScript Generics: The Complete Guide (with Cheat Sheet)",null,"Learn TypeScript generics from the ground up — generic functions, constraints, defaults, and classes — with worked examples and a copy-paste cheat sheet.","\u002Fmedia\u002Fcovers\u002Fweekly-typescript-generics.png",15,"2026-07-20T09:23:23.621Z",66,{"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},"typescript","TypeScript",[54,56,59,62],{"slug":51,"name":55,"color":38},"Typescript",{"slug":57,"name":58,"color":38},"javascript","Javascript",{"slug":60,"name":61,"color":38},"tutorial","Tutorial",{"slug":63,"name":64,"color":38},"webdev","Webdev",{"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":81,"_count":90,"playground":91,"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.","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",54,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},"JavaScript",[82,83,84,87],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},"frontend","Frontend",{"slug":88,"name":89,"color":38},"performance","Performance",{"assessments":66},{"slug":70},{"id":93,"slug":94,"title":95,"subtitle":38,"excerpt":96,"coverUrl":97,"locale":13,"readingMinutes":98,"publishedAt":99,"viewCount":100,"likeCount":19,"commentCount":19,"author":101,"vertical":102,"topic":103,"tags":106,"_count":112,"playground":113,"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",63,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":104,"name":105},"css","CSS",[107,109,110,111],{"slug":104,"name":108,"color":38},"Css",{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":57,"name":58,"color":38},{"assessments":66},{"slug":94},{"id":115,"slug":116,"title":117,"subtitle":38,"excerpt":118,"coverUrl":119,"locale":13,"readingMinutes":98,"publishedAt":120,"viewCount":121,"likeCount":19,"commentCount":19,"author":122,"vertical":123,"topic":124,"tags":125,"_count":132,"playground":133,"hasQuiz":17,"hasPlayground":17},"019fe660-416e-7357-854c-5a7b56d68629","css-logical-properties","Your `margin-left` doesn't exist in Arabic. CSS logical properties fix that.","Physical CSS properties like `margin-left` and `padding-right` break silently when a layout needs to support right-to-left languages. Logical properties replace the physical axis with a writing-mode-aware model — one codebase, every direction.","\u002Fmedia\u002Fcovers\u002Fcss-logical-properties.png","2026-07-17T08:18:05.044Z",50,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":104,"name":105},[126,127,128,129],{"slug":104,"name":108,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":130,"name":131,"color":38},"html","Html",{"assessments":66},{"slug":116},{"id":135,"slug":136,"title":137,"subtitle":38,"excerpt":138,"coverUrl":139,"locale":13,"readingMinutes":74,"publishedAt":140,"viewCount":141,"likeCount":19,"commentCount":19,"author":142,"vertical":143,"topic":144,"tags":145,"_count":150,"playground":151,"hasQuiz":17,"hasPlayground":17},"019fe660-39f9-768b-be22-fcd49b6abf6d","css-subgrid-nested-grid-alignment","Your CSS Grid cards look misaligned. `subgrid` is the fix you didn't know existed.","CSS Grid controls your outer container, but its children can't participate in the same tracks. `subgrid` closes that gap — nested elements align to the parent grid's rows and columns without padding hacks, fixed heights, or JavaScript measurements.","\u002Fmedia\u002Fcovers\u002Fcss-subgrid-nested-grid-alignment.png","2026-07-16T08:21:27.248Z",76,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":104,"name":105},[146,147,148,149],{"slug":104,"name":108,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":130,"name":131,"color":38},{"assessments":66},{"slug":136},{"id":153,"slug":154,"title":155,"subtitle":38,"excerpt":156,"coverUrl":157,"locale":13,"readingMinutes":74,"publishedAt":158,"viewCount":159,"likeCount":19,"commentCount":19,"author":160,"vertical":161,"topic":162,"tags":163,"_count":170,"playground":171,"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",57,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[164,165,166,167],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":168,"name":169,"color":38},"react","React",{"assessments":66},{"slug":154},{"id":173,"slug":174,"title":175,"subtitle":38,"excerpt":176,"coverUrl":177,"locale":13,"readingMinutes":74,"publishedAt":178,"viewCount":179,"likeCount":19,"commentCount":19,"author":180,"vertical":181,"topic":182,"tags":183,"_count":190,"playground":191,"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",46,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[184,185,186,187],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":188,"name":189,"color":38},"node","Node",{"assessments":66},{"slug":174},{"id":193,"slug":194,"title":195,"subtitle":38,"excerpt":196,"coverUrl":197,"locale":13,"readingMinutes":198,"publishedAt":199,"viewCount":200,"likeCount":19,"commentCount":19,"author":201,"vertical":202,"topic":203,"tags":204,"_count":211,"playground":212,"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",64,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[205,206,207,208],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":60,"name":61,"color":38},{"slug":209,"name":210,"color":38},"programming","Programming",{"assessments":66},{"slug":194},{"id":214,"slug":215,"title":216,"subtitle":38,"excerpt":217,"coverUrl":218,"locale":13,"readingMinutes":98,"publishedAt":219,"viewCount":220,"likeCount":19,"commentCount":19,"author":221,"vertical":222,"topic":223,"tags":224,"_count":229,"playground":230,"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",37,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[225,226,227,228],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":188,"name":189,"color":38},{"assessments":66},{"slug":215},{"id":232,"slug":233,"title":234,"subtitle":38,"excerpt":235,"coverUrl":236,"locale":13,"readingMinutes":74,"publishedAt":237,"viewCount":238,"likeCount":19,"commentCount":19,"author":239,"vertical":240,"topic":241,"tags":242,"_count":247,"playground":248,"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",41,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[243,244,245,246],{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":57,"name":58,"color":38},{"slug":104,"name":108,"color":38},{"assessments":66},{"slug":233},{"id":250,"slug":251,"title":252,"subtitle":38,"excerpt":253,"coverUrl":254,"locale":13,"readingMinutes":98,"publishedAt":255,"viewCount":256,"likeCount":19,"commentCount":19,"author":257,"vertical":258,"topic":259,"tags":260,"_count":265,"playground":266,"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",40,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[261,262,263,264],{"slug":51,"name":55,"color":38},{"slug":63,"name":64,"color":38},{"slug":57,"name":58,"color":38},{"slug":85,"name":86,"color":38},{"assessments":66},{"slug":251},{"id":268,"slug":269,"title":270,"subtitle":38,"excerpt":271,"coverUrl":272,"locale":13,"readingMinutes":74,"publishedAt":273,"viewCount":274,"likeCount":19,"commentCount":19,"author":275,"vertical":276,"topic":277,"tags":278,"_count":283,"playground":284,"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",42,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":57,"name":80},[279,280,281,282],{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":85,"name":86,"color":38},{"slug":188,"name":189,"color":38},{"assessments":66},{"slug":269},{"page":286,"perPage":287,"total":121,"totalPages":98},3,12,[289,290,292,294,296,298,300,301,302,305,306],{"slug":63,"name":64,"color":38,"articles":121},{"slug":57,"name":58,"color":38,"articles":291},45,{"slug":85,"name":86,"color":38,"articles":293},44,{"slug":104,"name":108,"color":38,"articles":295},18,{"slug":51,"name":55,"color":38,"articles":297},9,{"slug":88,"name":89,"color":38,"articles":299},7,{"slug":168,"name":169,"color":38,"articles":98},{"slug":188,"name":189,"color":38,"articles":74},{"slug":303,"name":304,"color":38,"articles":286},"ai","Ai",{"slug":60,"name":61,"color":38,"articles":286},{"slug":130,"name":131,"color":38,"articles":286}]