[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-javascript-2":32,"tags-all":282},[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":279},[34,68,89,109,128,146,164,182,201,219,238,258],{"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-b8d7-7515-892c-bd576110158c","url-parse-safe-parsing","You've been wrapping `new URL()` in try\u002Fcatch. `URL.parse()` does it natively.",null,"Validating an untrusted URL before parsing it used to mean a try\u002Fcatch wrapper or a regex. `URL.canParse()` checks validity without constructing. `URL.parse()` parses and returns null on failure. Both are Baseline 2024 — no wrapper needed.","\u002Fmedia\u002Fcovers\u002Furl-parse-safe-parsing.png",5,"2026-08-01T08:27:13.710Z",134,{"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},"typescript","Typescript",{"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":87,"playground":88,"hasQuiz":17,"hasPlayground":17},"019fe660-b09d-731e-b160-9e45270a5652","css-scope-native-style-scoping","CSS has no native scoping. `@scope` changes that.","BEM, CSS Modules, and scoped component styles all exist because CSS leaks — a rule written for one component can silently affect another. `@scope` gives the cascade a lower boundary so styles stay where you put them, natively, with no build step.","\u002Fmedia\u002Fcovers\u002Fcss-scope-native-style-scoping.png","2026-07-31T08:56:20.507Z",155,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},"css","CSS",[82,84,85,86],{"slug":79,"name":83,"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":90,"slug":91,"title":92,"subtitle":38,"excerpt":93,"coverUrl":94,"locale":13,"readingMinutes":41,"publishedAt":95,"viewCount":96,"likeCount":19,"commentCount":19,"author":97,"vertical":98,"topic":99,"tags":100,"_count":107,"playground":108,"hasQuiz":17,"hasPlayground":17},"019fe660-a973-77a9-9820-826bf25fd884","iterator-helpers-lazy-filter-map","Array methods are eager. Iterator helpers are lazy. Here's why that matters.","Every `.map()` and `.filter()` on an array creates a new intermediate array. Iterator helpers — built into JavaScript since 2024 — give you the same pipeline but evaluate one element at a time, with no wasted allocations.","\u002Fmedia\u002Fcovers\u002Fiterator-helpers-lazy-filter-map.png","2026-07-30T08:34:21.684Z",128,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[101,102,103,104],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},"performance","Performance",{"assessments":66},{"slug":91},{"id":110,"slug":111,"title":112,"subtitle":38,"excerpt":113,"coverUrl":114,"locale":13,"readingMinutes":115,"publishedAt":116,"viewCount":117,"likeCount":19,"commentCount":19,"author":118,"vertical":119,"topic":120,"tags":121,"_count":126,"playground":127,"hasQuiz":17,"hasPlayground":17},"019fe660-a1fc-740c-9df4-b60a02de8afa","css-color-mix-native-color-mixing","You reach for Sass to mix colors. `color-mix()` does it natively.","Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser with no build step required.","\u002Fmedia\u002Fcovers\u002Fcss-color-mix-native-color-mixing.png",4,"2026-07-29T08:47:34.803Z",107,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},[122,123,124,125],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":111},{"id":129,"slug":130,"title":131,"subtitle":38,"excerpt":132,"coverUrl":133,"locale":13,"readingMinutes":115,"publishedAt":134,"viewCount":135,"likeCount":19,"commentCount":19,"author":136,"vertical":137,"topic":138,"tags":139,"_count":144,"playground":145,"hasQuiz":17,"hasPlayground":17},"019fe660-9a9b-73dc-87cd-48744e21e671","text-wrap-balance-headline-orphans","You hand-edit headlines to avoid orphaned words. `text-wrap: balance` does it natively.","The classic fix for a headline that breaks awkwardly — a manual `\u003Cbr>`, a `­`, or a max-width tweak — exists because CSS had no way to distribute line breaks evenly. `text-wrap: balance` and `text-wrap: pretty` are the native answers.","\u002Fmedia\u002Fcovers\u002Ftext-wrap-balance-headline-orphans.png","2026-07-28T08:41:41.989Z",101,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},[140,141,142,143],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":130},{"id":147,"slug":148,"title":149,"subtitle":38,"excerpt":150,"coverUrl":151,"locale":13,"readingMinutes":115,"publishedAt":152,"viewCount":153,"likeCount":19,"commentCount":19,"author":154,"vertical":155,"topic":156,"tags":157,"_count":162,"playground":163,"hasQuiz":17,"hasPlayground":17},"019fe660-8482-75bc-ab16-8e86f92efc09","resize-observer-element-size","You're watching `window` to detect element size changes. `ResizeObserver` watches the element itself.","A `window` resize listener only fires when the viewport changes. ResizeObserver fires whenever the element's own box changes — from content loading, parent reflow, container queries, or anything else.","\u002Fmedia\u002Fcovers\u002Fresize-observer-element-size.png","2026-07-26T08:32:44.347Z",97,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[158,159,160,161],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":148},{"id":165,"slug":166,"title":167,"subtitle":38,"excerpt":168,"coverUrl":169,"locale":13,"readingMinutes":115,"publishedAt":170,"viewCount":171,"likeCount":19,"commentCount":19,"author":172,"vertical":173,"topic":174,"tags":175,"_count":180,"playground":181,"hasQuiz":17,"hasPlayground":17},"019fe660-7d17-745b-812d-b1e81a1b2b85","css-starting-style-entry-animations","You use a setTimeout to trigger CSS entry animations. `@starting-style` makes it unnecessary.","Before `@starting-style`, the moment an element entered the DOM was invisible to CSS — transitions had no 'before' state to interpolate from. The at-rule gives you one, natively, with no JavaScript required.","\u002Fmedia\u002Fcovers\u002Fcss-starting-style-entry-animations.png","2026-07-25T08:13:02.298Z",95,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},[176,177,178,179],{"slug":79,"name":83,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":166},{"id":183,"slug":184,"title":185,"subtitle":38,"excerpt":186,"coverUrl":187,"locale":13,"readingMinutes":115,"publishedAt":188,"viewCount":189,"likeCount":19,"commentCount":19,"author":190,"vertical":191,"topic":192,"tags":194,"_count":199,"playground":200,"hasQuiz":17,"hasPlayground":17},"019fe660-75da-727d-a751-32f8723b0b38","using-explicit-resource-management","You still write `finally { resource.close() }`. The `using` keyword does it automatically.","The Explicit Resource Management proposal adds a `using` declaration that calls cleanup the moment a scope exits — normal return, early return, or throw. No more try\u002Ffinally boilerplate for timers, event listeners, connections, or any other resource you need to release.","\u002Fmedia\u002Fcovers\u002Fusing-explicit-resource-management.png","2026-07-24T08:33:28.459Z",71,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":193},"TypeScript",[195,196,197,198],{"slug":63,"name":64,"color":38},{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":184},{"id":202,"slug":203,"title":204,"subtitle":38,"excerpt":205,"coverUrl":206,"locale":13,"readingMinutes":115,"publishedAt":207,"viewCount":208,"likeCount":19,"commentCount":19,"author":209,"vertical":210,"topic":211,"tags":212,"_count":217,"playground":218,"hasQuiz":17,"hasPlayground":17},"019fe660-6e7e-72cb-bd34-bc123056cfeb","set-methods-union-intersection","You've been doing Set math by hand. JavaScript finally shipped `.union()`, `.intersection()`, and friends.","Set has always been missing its obvious operations. ES2025 adds `.union()`, `.intersection()`, `.difference()`, `.symmetricDifference()`, and three boolean predicates — native methods that used to require four lines of spread syntax each.","\u002Fmedia\u002Fcovers\u002Fset-methods-union-intersection.png","2026-07-23T08:37:02.144Z",63,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[213,214,215,216],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":63,"name":64,"color":38},{"assessments":66},{"slug":203},{"id":220,"slug":221,"title":222,"subtitle":38,"excerpt":223,"coverUrl":224,"locale":13,"readingMinutes":115,"publishedAt":225,"viewCount":208,"likeCount":19,"commentCount":19,"author":226,"vertical":227,"topic":228,"tags":229,"_count":236,"playground":237,"hasQuiz":17,"hasPlayground":17},"019fe660-66d6-71c3-b71a-ed9102b874c8","promise-with-resolvers","You keep escaping the Promise constructor. `Promise.withResolvers` does it right.","The 'deferred promise' pattern — storing resolve and reject outside the constructor so you can call them later — is a daily JavaScript idiom that's always felt awkward. ES2024 added a one-liner for it.","\u002Fmedia\u002Fcovers\u002Fpromise-with-resolvers.png","2026-07-22T08:35:52.029Z",{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[230,231,232,233],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":234,"name":235,"color":38},"asyncjs","Asyncjs",{"assessments":66},{"slug":221},{"id":239,"slug":240,"title":241,"subtitle":38,"excerpt":242,"coverUrl":243,"locale":13,"readingMinutes":115,"publishedAt":244,"viewCount":245,"likeCount":19,"commentCount":19,"author":246,"vertical":247,"topic":248,"tags":249,"_count":256,"playground":257,"hasQuiz":17,"hasPlayground":17},"019fe660-5f55-701e-9cf4-dc0c9f0517b9","error-cause-rethrow-context","You're rethrowing errors and losing context. `Error.cause` fixes that.","Every time you catch an error and rethrow a new one without forwarding the original, you lose the stack trace, the error type, and everything useful about what actually went wrong. ES2022 added `Error.cause` to fix exactly this.","\u002Fmedia\u002Fcovers\u002Ferror-cause-rethrow-context.png","2026-07-21T08:36:02.331Z",70,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[250,251,252,255],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":253,"name":254,"color":38},"node","Node",{"slug":63,"name":64,"color":38},{"assessments":66},{"slug":240},{"id":259,"slug":260,"title":261,"subtitle":38,"excerpt":262,"coverUrl":263,"locale":13,"readingMinutes":264,"publishedAt":265,"viewCount":266,"likeCount":19,"commentCount":19,"author":267,"vertical":268,"topic":269,"tags":270,"_count":277,"playground":278,"hasQuiz":17,"hasPlayground":17},"019fe660-57eb-7258-b452-d66ff04d2380","weekly-typescript-generics","TypeScript Generics: The Complete Guide (with Cheat Sheet)","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",72,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":193},[271,272,273,276],{"slug":63,"name":64,"color":38},{"slug":51,"name":55,"color":38},{"slug":274,"name":275,"color":38},"tutorial","Tutorial",{"slug":57,"name":58,"color":38},{"assessments":66},{"slug":260},{"page":31,"perPage":280,"total":281,"totalPages":115},12,46,[283,285,286,288,290,292,294,297,298,301,305,306,309,312,315],{"slug":57,"name":58,"color":38,"articles":284},51,{"slug":51,"name":55,"color":38,"articles":281},{"slug":60,"name":61,"color":38,"articles":287},45,{"slug":79,"name":83,"color":38,"articles":289},19,{"slug":63,"name":64,"color":38,"articles":291},9,{"slug":105,"name":106,"color":38,"articles":293},7,{"slug":295,"name":296,"color":38,"articles":41},"react","React",{"slug":253,"name":254,"color":38,"articles":115},{"slug":299,"name":300,"color":38,"articles":115},"grammar","Grammar",{"slug":302,"name":303,"color":38,"articles":304},"ai","Ai",3,{"slug":274,"name":275,"color":38,"articles":304},{"slug":307,"name":308,"color":38,"articles":304},"html","Html",{"slug":310,"name":311,"color":38,"articles":31},"verbs","Verbs",{"slug":313,"name":314,"color":38,"articles":31},"a1","A1",{"slug":316,"name":317,"color":38,"articles":31},"turkish","Turkish"]