[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-frontend-3":32,"tags-dev":278},[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":274},[34,68,91,111,130,148,169,187,204,222,240,257],{"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-39f9-768b-be22-fcd49b6abf6d","css-subgrid-nested-grid-alignment","Your CSS Grid cards look misaligned. `subgrid` is the fix you didn't know existed.",null,"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",4,"2026-07-16T08:21:27.248Z",76,{"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},"css","CSS",[54,56,59,62],{"slug":51,"name":55,"color":38},"Css",{"slug":57,"name":58,"color":38},"webdev","Webdev",{"slug":60,"name":61,"color":38},"frontend","Frontend",{"slug":63,"name":64,"color":38},"html","Html",{"assessments":66},1,{"slug":36},{"id":69,"slug":70,"title":71,"subtitle":38,"excerpt":72,"coverUrl":73,"locale":13,"readingMinutes":41,"publishedAt":74,"viewCount":75,"likeCount":19,"commentCount":19,"author":76,"vertical":77,"topic":78,"tags":81,"_count":89,"playground":90,"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":79,"name":80},"javascript","JavaScript",[82,84,85,86],{"slug":79,"name":83,"color":38},"Javascript",{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":87,"name":88,"color":38},"react","React",{"assessments":66},{"slug":70},{"id":92,"slug":93,"title":94,"subtitle":38,"excerpt":95,"coverUrl":96,"locale":13,"readingMinutes":41,"publishedAt":97,"viewCount":98,"likeCount":19,"commentCount":19,"author":99,"vertical":100,"topic":101,"tags":102,"_count":109,"playground":110,"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":79,"name":80},[103,104,105,106],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":107,"name":108,"color":38},"node","Node",{"assessments":66},{"slug":93},{"id":112,"slug":113,"title":114,"subtitle":38,"excerpt":115,"coverUrl":116,"locale":13,"readingMinutes":117,"publishedAt":118,"viewCount":119,"likeCount":19,"commentCount":19,"author":120,"vertical":121,"topic":122,"tags":123,"_count":128,"playground":129,"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",5,"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":79,"name":80},[124,125,126,127],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":107,"name":108,"color":38},{"assessments":66},{"slug":113},{"id":131,"slug":132,"title":133,"subtitle":38,"excerpt":134,"coverUrl":135,"locale":13,"readingMinutes":41,"publishedAt":136,"viewCount":137,"likeCount":19,"commentCount":19,"author":138,"vertical":139,"topic":140,"tags":141,"_count":146,"playground":147,"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":79,"name":80},[142,143,144,145],{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":79,"name":83,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":132},{"id":149,"slug":150,"title":151,"subtitle":38,"excerpt":152,"coverUrl":153,"locale":13,"readingMinutes":117,"publishedAt":154,"viewCount":155,"likeCount":19,"commentCount":19,"author":156,"vertical":157,"topic":158,"tags":161,"_count":167,"playground":168,"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":159,"name":160},"typescript","TypeScript",[162,164,165,166],{"slug":159,"name":163,"color":38},"Typescript",{"slug":57,"name":58,"color":38},{"slug":79,"name":83,"color":38},{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":150},{"id":170,"slug":171,"title":172,"subtitle":38,"excerpt":173,"coverUrl":174,"locale":13,"readingMinutes":41,"publishedAt":175,"viewCount":176,"likeCount":19,"commentCount":19,"author":177,"vertical":178,"topic":179,"tags":180,"_count":185,"playground":186,"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":79,"name":80},[181,182,183,184],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":107,"name":108,"color":38},{"assessments":66},{"slug":171},{"id":188,"slug":189,"title":190,"subtitle":38,"excerpt":191,"coverUrl":192,"locale":13,"readingMinutes":41,"publishedAt":193,"viewCount":137,"likeCount":19,"commentCount":19,"author":194,"vertical":195,"topic":196,"tags":197,"_count":202,"playground":203,"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",{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[198,199,200,201],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":79,"name":83,"color":38},{"assessments":66},{"slug":189},{"id":205,"slug":206,"title":207,"subtitle":38,"excerpt":208,"coverUrl":209,"locale":13,"readingMinutes":117,"publishedAt":210,"viewCount":211,"likeCount":19,"commentCount":19,"author":212,"vertical":213,"topic":214,"tags":215,"_count":220,"playground":221,"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",53,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[216,217,218,219],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":79,"name":83,"color":38},{"assessments":66},{"slug":206},{"id":223,"slug":224,"title":225,"subtitle":38,"excerpt":226,"coverUrl":227,"locale":13,"readingMinutes":117,"publishedAt":228,"viewCount":229,"likeCount":19,"commentCount":19,"author":230,"vertical":231,"topic":232,"tags":233,"_count":238,"playground":239,"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",48,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[234,235,236,237],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":79,"name":83,"color":38},{"assessments":66},{"slug":224},{"id":241,"slug":242,"title":243,"subtitle":38,"excerpt":244,"coverUrl":245,"locale":13,"readingMinutes":41,"publishedAt":246,"viewCount":247,"likeCount":19,"commentCount":19,"author":248,"vertical":249,"topic":250,"tags":251,"_count":256,"playground":38,"hasQuiz":18,"hasPlayground":18},"019fe65f-e7b8-7175-a185-34775c370bcf","abort-controller-async-cancellation","Your fetch() Is Still Running After the User Left","Stale requests, race conditions in search boxes, state updates on unmounted components — these are all the same bug: async work you forgot to cancel. AbortController is the fix.","\u002Fmedia\u002Fcovers\u002Fabort-controller-async-cancellation.png","2026-07-05T09:12:47.873Z",6,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},[252,253,254,255],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":87,"name":88,"color":38},{"assessments":19},{"id":258,"slug":259,"title":260,"subtitle":38,"excerpt":261,"coverUrl":262,"locale":13,"readingMinutes":117,"publishedAt":263,"viewCount":264,"likeCount":19,"commentCount":19,"author":265,"vertical":266,"topic":267,"tags":268,"_count":273,"playground":38,"hasQuiz":18,"hasPlayground":18},"019fe65f-e05c-77bb-b8a3-cb8dbdc99346","css-layer-architecture","You reached for !important again. @layer is the real fix.","When a third-party reset beats your styles and your own utilities lose to an ancient nested rule, the problem isn't your selectors. It's that your stylesheet has no architecture. @layer adds one.","\u002Fmedia\u002Fcovers\u002Fcss-layer-architecture.png","2026-07-04T08:44:02.193Z",7,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[269,270,271,272],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":79,"name":83,"color":38},{"assessments":19},{"page":275,"perPage":276,"total":277,"totalPages":41},3,12,44,[279,281,283,284,286,288,291,292,293,296,299],{"slug":57,"name":58,"color":38,"articles":280},50,{"slug":79,"name":83,"color":38,"articles":282},45,{"slug":60,"name":61,"color":38,"articles":277},{"slug":51,"name":55,"color":38,"articles":285},18,{"slug":159,"name":163,"color":38,"articles":287},9,{"slug":289,"name":290,"color":38,"articles":264},"performance","Performance",{"slug":87,"name":88,"color":38,"articles":117},{"slug":107,"name":108,"color":38,"articles":41},{"slug":294,"name":295,"color":38,"articles":275},"ai","Ai",{"slug":297,"name":298,"color":38,"articles":275},"tutorial","Tutorial",{"slug":63,"name":64,"color":38,"articles":275}]