[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"blog-topics":44,"topics-all":177,"search-suggestions":256,"articles-all-13---":269,"articles-total":495},[4,20,32],{"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","Read it. Run it. Prove it.","A post a day on modern web development — most with an editable playground and a quiz that explains every answer. Free, no account needed.","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.","Grammar explained the way good documentation explains an API — one idea at a time, each with a quiz.","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,{"id":33,"slug":34,"name":35,"tagline":36,"description":37,"accentFrom":38,"accentTo":39,"icon":40,"defaultLocale":13,"locales":41,"features":42,"position":43},"7b3c16f2-931d-410e-802e-e1fa4edab7de","soft","Soft Skills","The half of the job nobody wrote documentation for.","Weekly, on the parts of working life that decide more than your code does — first weeks, meetings, interviews, promotions, and the people around you. Written from what actually happens, and recorded as a podcast you can listen to on the walk.","emerald-400","teal-300","◉",[13],{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":18},3,[45,50,54,58,62,66,70,74,78,82,86,90,94,97,101,105,108,111,115,118,121,125,128,132,135,138,141,144,147,150,153,156,159,162,165,168,171,174],{"slug":46,"name":47,"color":48,"articles":49},"webdev","Webdev",null,151,{"slug":51,"name":52,"color":48,"articles":53},"javascript","Javascript",124,{"slug":55,"name":56,"color":48,"articles":57},"frontend","Frontend",88,{"slug":59,"name":60,"color":48,"articles":61},"tutorial","Tutorial",58,{"slug":63,"name":64,"color":48,"articles":65},"css","Css",45,{"slug":67,"name":68,"color":48,"articles":69},"performance","Performance",25,{"slug":71,"name":72,"color":48,"articles":73},"typescript","Typescript",21,{"slug":75,"name":76,"color":48,"articles":77},"react","React",19,{"slug":79,"name":80,"color":48,"articles":81},"browser","Browser",14,{"slug":83,"name":84,"color":48,"articles":85},"node","Node",13,{"slug":87,"name":88,"color":48,"articles":89},"programming","Programming",12,{"slug":91,"name":92,"color":48,"articles":93},"html","Html",10,{"slug":95,"name":96,"color":48,"articles":93},"accessibility","Accessibility",{"slug":98,"name":99,"color":48,"articles":100},"nextjs","Nextjs",8,{"slug":102,"name":103,"color":48,"articles":104},"nuxt","Nuxt",7,{"slug":106,"name":107,"color":48,"articles":104},"nestjs","Nestjs",{"slug":109,"name":110,"color":48,"articles":104},"vue","Vue",{"slug":112,"name":113,"color":48,"articles":114},"grammar","Grammar",6,{"slug":116,"name":117,"color":48,"articles":114},"career","Career",{"slug":119,"name":120,"color":48,"articles":114},"discuss","Discuss",{"slug":122,"name":123,"color":48,"articles":124},"beginners","Beginners",5,{"slug":126,"name":127,"color":48,"articles":124},"productivity","Productivity",{"slug":129,"name":130,"color":48,"articles":131},"ssr","SSR",4,{"slug":133,"name":134,"color":48,"articles":131},"security","Security",{"slug":136,"name":137,"color":48,"articles":131},"apis","Apis",{"slug":139,"name":140,"color":48,"articles":43},"ai","Ai",{"slug":142,"name":143,"color":48,"articles":43},"api","API",{"slug":145,"name":146,"color":48,"articles":31},"async","Async",{"slug":148,"name":149,"color":48,"articles":31},"forms","Forms",{"slug":151,"name":152,"color":48,"articles":31},"dom","Dom",{"slug":154,"name":155,"color":48,"articles":31},"english","English",{"slug":157,"name":158,"color":48,"articles":31},"verbs","Verbs",{"slug":160,"name":161,"color":48,"articles":31},"spanish","Spanish",{"slug":163,"name":164,"color":48,"articles":31},"a1","A1",{"slug":166,"name":167,"color":48,"articles":31},"a2","A2",{"slug":169,"name":170,"color":48,"articles":31},"tenses","Tenses",{"slug":172,"name":173,"color":48,"articles":31},"turkish","Turkish",{"slug":175,"name":176,"color":48,"articles":31},"animation","Animation",[178,184,186,191,193,198,201,205,210,215,217,222,225,229,231,235,237,240,244,246,248,250,252,254],{"id":179,"slug":180,"name":181,"parentId":48,"description":182,"articleCount":183},"0da12d3c-ac33-4b32-859f-9a16877ef255","starting","Starting somewhere new","First days, first weeks, and the part where you do not know anything yet.",1,{"id":185,"slug":109,"name":110,"parentId":48,"description":48,"articleCount":104},"019fe637-3e06-75b8-8a2c-fc350aad7701",{"id":187,"slug":188,"name":189,"parentId":48,"description":190,"articleCount":183},"9ef7e6f6-b287-4ac2-8f56-421d3aafe8cc","meetings","Meetings and rooms","Speaking up, running one, and knowing which kind you are in.",{"id":192,"slug":102,"name":103,"parentId":48,"description":48,"articleCount":104},"019fe637-3e06-75b8-8a2d-0309c35755c6",{"id":194,"slug":195,"name":196,"parentId":48,"description":197,"articleCount":183},"540105e9-ba05-40f3-bdfd-16fb645e978c","interviews","Getting hired","Applications, interviews, offers, and the negotiation nobody rehearses.",{"id":199,"slug":71,"name":200,"parentId":48,"description":48,"articleCount":124},"019fe637-3e06-75b8-8a2d-040994c0d907","TypeScript",{"id":202,"slug":203,"name":204,"parentId":48,"description":48,"articleCount":19},"019fe637-3e06-75b8-8a2d-0956229cd176","architecture","Architecture",{"id":206,"slug":207,"name":208,"parentId":48,"description":209,"articleCount":183},"0cc5bdbb-d6e8-43b0-9cb4-d227aec6aa68","people","The people around you","Colleagues, managers, and the relationships that decide how work feels.",{"id":211,"slug":212,"name":213,"parentId":48,"description":214,"articleCount":183},"545c6bda-b8cf-4905-8056-18c0c4dc7a64","leading","Leading","Becoming the person others rely on, before and after the title.",{"id":216,"slug":67,"name":68,"parentId":48,"description":48,"articleCount":183},"019fe637-3e07-735d-8227-4c34039af2e0",{"id":218,"slug":219,"name":220,"parentId":48,"description":221,"articleCount":183},"cc22e84d-2cac-44ac-a272-5715e4710dc4","company","Company shapes","Why the same behaviour succeeds at five people and fails at five thousand.",{"id":223,"slug":139,"name":224,"parentId":48,"description":48,"articleCount":183},"019fe65f-98ec-773a-8ca8-9a2e971911c1","AI",{"id":226,"slug":63,"name":227,"parentId":48,"description":48,"articleCount":228},"019fe65f-c110-761b-931e-99a2d1280410","CSS",41,{"id":230,"slug":116,"name":117,"parentId":48,"description":48,"articleCount":19},"01a037b3-d685-76cb-9940-6a3f8ce140a0",{"id":232,"slug":233,"name":234,"parentId":48,"description":48,"articleCount":183},"019fe65f-a1cb-74c8-b999-ff353158fce9","designsystems","Design Systems",{"id":236,"slug":154,"name":155,"parentId":48,"description":48,"articleCount":31},"019ff280-9a51-757c-84ce-c941f20371e9",{"id":238,"slug":91,"name":239,"parentId":48,"description":48,"articleCount":43},"019ff19b-f37e-7091-b3cd-5c99e8c005a4","HTML",{"id":241,"slug":51,"name":242,"parentId":48,"description":48,"articleCount":243},"019fe65f-b950-7762-bb1a-d83445281950","JavaScript",71,{"id":245,"slug":106,"name":107,"parentId":48,"description":48,"articleCount":104},"01a03cdb-1ff8-76fa-9fa7-38d9e4eba1e1",{"id":247,"slug":98,"name":99,"parentId":48,"description":48,"articleCount":100},"01a0499d-b263-749a-a3ad-df3cc782e94d",{"id":249,"slug":75,"name":76,"parentId":48,"description":48,"articleCount":93},"019fe65f-b134-725b-bbc7-3e3db8c68675",{"id":251,"slug":133,"name":134,"parentId":48,"description":48,"articleCount":31},"019fe660-ce9d-754e-b241-7bccad915b86",{"id":253,"slug":160,"name":161,"parentId":48,"description":48,"articleCount":31},"019ff280-9d5a-77dc-b01d-e2378eaf86cb",{"id":255,"slug":172,"name":173,"parentId":48,"description":48,"articleCount":31},"019ff280-9eea-736d-ad13-4c01f0ddc46e",[257,258,259,260,261,262,263,264,265,266,267,268],{"slug":46,"name":47,"articles":49},{"slug":51,"name":52,"articles":53},{"slug":55,"name":56,"articles":57},{"slug":59,"name":60,"articles":61},{"slug":63,"name":64,"articles":65},{"slug":67,"name":68,"articles":69},{"slug":71,"name":72,"articles":73},{"slug":75,"name":76,"articles":77},{"slug":79,"name":80,"articles":81},{"slug":83,"name":84,"articles":85},{"slug":87,"name":88,"articles":89},{"slug":95,"name":96,"articles":93},{"items":270,"meta":493},[271,293,311,329,347,365,385,403,422,440,457,475],{"id":272,"slug":273,"title":274,"subtitle":48,"excerpt":275,"coverUrl":276,"locale":13,"readingMinutes":131,"publishedAt":277,"viewCount":278,"likeCount":19,"commentCount":19,"author":279,"vertical":284,"topic":285,"tags":286,"_count":291,"playground":292,"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",425,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[287,288,289,290],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"assessments":183},{"slug":273},{"id":294,"slug":295,"title":296,"subtitle":48,"excerpt":297,"coverUrl":298,"locale":13,"readingMinutes":131,"publishedAt":299,"viewCount":300,"likeCount":19,"commentCount":19,"author":301,"vertical":302,"topic":303,"tags":304,"_count":309,"playground":310,"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",533,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[305,306,307,308],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":67,"name":68,"color":48},{"assessments":183},{"slug":295},{"id":312,"slug":313,"title":314,"subtitle":48,"excerpt":315,"coverUrl":316,"locale":13,"readingMinutes":131,"publishedAt":317,"viewCount":318,"likeCount":19,"commentCount":19,"author":319,"vertical":320,"topic":321,"tags":322,"_count":327,"playground":328,"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",435,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[323,324,325,326],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"assessments":183},{"slug":313},{"id":330,"slug":331,"title":332,"subtitle":48,"excerpt":333,"coverUrl":334,"locale":13,"readingMinutes":131,"publishedAt":335,"viewCount":336,"likeCount":19,"commentCount":19,"author":337,"vertical":338,"topic":339,"tags":340,"_count":345,"playground":346,"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",542,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":71,"name":200},[341,342,343,344],{"slug":71,"name":72,"color":48},{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"assessments":183},{"slug":331},{"id":348,"slug":349,"title":350,"subtitle":48,"excerpt":351,"coverUrl":352,"locale":13,"readingMinutes":131,"publishedAt":353,"viewCount":354,"likeCount":19,"commentCount":19,"author":355,"vertical":356,"topic":357,"tags":358,"_count":363,"playground":364,"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",471,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[359,360,361,362],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":71,"name":72,"color":48},{"assessments":183},{"slug":349},{"id":366,"slug":367,"title":368,"subtitle":48,"excerpt":369,"coverUrl":370,"locale":13,"readingMinutes":124,"publishedAt":371,"viewCount":372,"likeCount":19,"commentCount":19,"author":373,"vertical":374,"topic":375,"tags":376,"_count":383,"playground":384,"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",634,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[377,378,379,380],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":71,"name":72,"color":48},{"slug":381,"name":382,"color":48},"asyncjs","Asyncjs",{"assessments":183},{"slug":367},{"id":386,"slug":387,"title":388,"subtitle":48,"excerpt":389,"coverUrl":390,"locale":13,"readingMinutes":131,"publishedAt":391,"viewCount":392,"likeCount":19,"commentCount":19,"author":393,"vertical":394,"topic":395,"tags":396,"_count":401,"playground":402,"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",568,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[397,398,399,400],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":83,"name":84,"color":48},{"slug":71,"name":72,"color":48},{"assessments":183},{"slug":387},{"id":404,"slug":405,"title":406,"subtitle":48,"excerpt":407,"coverUrl":408,"locale":13,"readingMinutes":409,"publishedAt":410,"viewCount":411,"likeCount":19,"commentCount":19,"author":412,"vertical":413,"topic":414,"tags":415,"_count":420,"playground":421,"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",599,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":71,"name":200},[416,417,418,419],{"slug":71,"name":72,"color":48},{"slug":51,"name":52,"color":48},{"slug":59,"name":60,"color":48},{"slug":46,"name":47,"color":48},{"assessments":183},{"slug":405},{"id":423,"slug":424,"title":425,"subtitle":48,"excerpt":426,"coverUrl":427,"locale":13,"readingMinutes":131,"publishedAt":428,"viewCount":429,"likeCount":19,"commentCount":19,"author":430,"vertical":431,"topic":432,"tags":433,"_count":438,"playground":439,"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","2026-07-19T08:25:59.411Z",417,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[434,435,436,437],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":67,"name":68,"color":48},{"assessments":183},{"slug":424},{"id":441,"slug":442,"title":443,"subtitle":48,"excerpt":444,"coverUrl":445,"locale":13,"readingMinutes":124,"publishedAt":446,"viewCount":429,"likeCount":19,"commentCount":19,"author":447,"vertical":448,"topic":449,"tags":450,"_count":455,"playground":456,"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","2026-07-18T07:59:42.250Z",{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[451,452,453,454],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"assessments":183},{"slug":442},{"id":458,"slug":459,"title":460,"subtitle":48,"excerpt":461,"coverUrl":462,"locale":13,"readingMinutes":124,"publishedAt":463,"viewCount":464,"likeCount":19,"commentCount":19,"author":465,"vertical":466,"topic":467,"tags":468,"_count":473,"playground":474,"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",508,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[469,470,471,472],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":91,"name":92,"color":48},{"assessments":183},{"slug":459},{"id":476,"slug":477,"title":478,"subtitle":48,"excerpt":479,"coverUrl":480,"locale":13,"readingMinutes":124,"publishedAt":481,"viewCount":482,"likeCount":19,"commentCount":19,"author":483,"vertical":484,"topic":485,"tags":486,"_count":491,"playground":492,"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",704,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[487,488,489,490],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":91,"name":92,"color":48},{"assessments":183},{"slug":477},{"page":85,"perPage":89,"total":494,"totalPages":409},177,{"items":496,"meta":515},[497],{"id":498,"slug":499,"title":500,"subtitle":48,"excerpt":501,"coverUrl":502,"locale":13,"readingMinutes":124,"publishedAt":503,"viewCount":504,"likeCount":19,"commentCount":19,"author":505,"vertical":506,"topic":507,"tags":508,"_count":513,"playground":514,"hasQuiz":17,"hasPlayground":17},"01a14e81-eaa5-700a-a6f6-3be4ffe47c2b","usesyncexternalstore-tearing-fix","Your Custom Hooks Tear in React 18. `useSyncExternalStore` Fixes It.","A useState + useEffect hook that subscribes to window size, localStorage, or a WebSocket looks fine until React 18's concurrent rendering shows two parts of your UI two different values at once. useSyncExternalStore is the hook built to stop that.","\u002Fmedia\u002Fcovers\u002Fusesyncexternalstore-tearing-fix.png","2026-10-23T06:11:03.306Z",86,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":75,"name":76},[509,510,511,512],{"slug":75,"name":76,"color":48},{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"assessments":183},{"slug":499},{"page":183,"perPage":183,"total":494,"totalPages":494}]