[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"blog-topics":44,"topics-all":177,"search-suggestions":256,"articles-all-12---":269,"articles-total":498},[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":496},[271,295,313,333,351,369,388,406,424,442,460,478],{"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":293,"playground":294,"hasQuiz":17,"hasPlayground":17},"019fe660-edbb-714e-b0e8-8488ccbb6940","intl-relativetimeformat-relative-dates","You're installing date-fns for 'X hours ago'. `Intl.RelativeTimeFormat` does it natively.","Most apps display relative timestamps — '3 minutes ago', 'last week'. Developers still reach for date-fns or moment for this. The Intl.RelativeTimeFormat API handles it natively, with full locale support and zero dependencies.","\u002Fmedia\u002Fcovers\u002Fintl-relativetimeformat-relative-dates.png","2026-08-07T07:22:54.352Z",524,{"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":51,"name":242},[287,288,289,290],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":291,"name":292,"color":48},"intl","Intl",{"assessments":183},{"slug":273},{"id":296,"slug":297,"title":298,"subtitle":48,"excerpt":299,"coverUrl":300,"locale":13,"readingMinutes":131,"publishedAt":301,"viewCount":302,"likeCount":19,"commentCount":19,"author":303,"vertical":304,"topic":305,"tags":306,"_count":311,"playground":312,"hasQuiz":17,"hasPlayground":17},"019ff19b-f047-748a-800d-00912a4d95c9","object-hasown-safe-property-check","You use `obj.hasOwnProperty(key)` to check property ownership. It can silently fail. `Object.hasOwn()` is the safe replacement.","Two real cases where `obj.hasOwnProperty(key)` throws or returns wrong results — and why `Object.hasOwn(obj, key)` is the ES2022 fix that ESLint's `no-prototype-builtins` rule has been nudging you toward for years.","\u002Fmedia\u002Fcovers\u002Fobject-hasown-safe-property-check.png","2026-08-06T08:44:20.722Z",455,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[307,308,309,310],{"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":297},{"id":314,"slug":315,"title":316,"subtitle":48,"excerpt":317,"coverUrl":318,"locale":13,"readingMinutes":131,"publishedAt":319,"viewCount":320,"likeCount":19,"commentCount":19,"author":321,"vertical":322,"topic":323,"tags":324,"_count":331,"playground":332,"hasQuiz":17,"hasPlayground":17},"019fe660-e5d0-756a-9ae2-20c6ff4c2f48","css-style-queries-react-to-custom-properties","Container queries can check more than size — style queries let components read custom property values","Size queries react to container width. Style queries react to CSS custom property values on a container ancestor — enabling component-level theming and variant switching in pure CSS, no JavaScript involved.","\u002Fmedia\u002Fcovers\u002Fcss-style-queries-react-to-custom-properties.png","2026-08-06T08:44:20.136Z",490,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[325,326,327,328],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":329,"name":330,"color":48},"components","Components",{"assessments":183},{"slug":315},{"id":334,"slug":335,"title":336,"subtitle":48,"excerpt":337,"coverUrl":338,"locale":13,"readingMinutes":131,"publishedAt":339,"viewCount":340,"likeCount":19,"commentCount":19,"author":341,"vertical":342,"topic":343,"tags":344,"_count":349,"playground":350,"hasQuiz":17,"hasPlayground":17},"019fe660-de51-759d-935f-dbda9e7e38b5","array-from-async-async-iterable","You're collecting async iterable results with a for-await loop. `Array.fromAsync` does it in one call.","A for-await loop that pushes into an array, or the `await Promise.all([...asyncIterable])` workaround that silently fails — `Array.fromAsync` replaces both with a single awaited call. It's Baseline 2024.","\u002Fmedia\u002Fcovers\u002Farray-from-async-async-iterable.png","2026-08-05T08:42:50.920Z",664,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[345,346,347,348],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":145,"name":146,"color":48},{"assessments":183},{"slug":335},{"id":352,"slug":353,"title":354,"subtitle":48,"excerpt":355,"coverUrl":356,"locale":13,"readingMinutes":124,"publishedAt":357,"viewCount":358,"likeCount":19,"commentCount":19,"author":359,"vertical":360,"topic":361,"tags":362,"_count":367,"playground":368,"hasQuiz":17,"hasPlayground":17},"019fe660-d6d5-7099-89bb-af60e48fcb28","content-visibility-skip-offscreen-rendering","Your browser renders everything, even what you can't see — `content-visibility: auto` fixes that","Browsers lay out and paint the entire page on load, including the 80% below the fold. `content-visibility: auto` tells the browser to skip that work for off-screen elements — and it's Baseline 2024.","\u002Fmedia\u002Fcovers\u002Fcontent-visibility-skip-offscreen-rendering.png","2026-08-04T08:44:59.227Z",843,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[363,364,365,366],{"slug":63,"name":64,"color":48},{"slug":46,"name":47,"color":48},{"slug":67,"name":68,"color":48},{"slug":55,"name":56,"color":48},{"assessments":183},{"slug":353},{"id":370,"slug":371,"title":372,"subtitle":48,"excerpt":373,"coverUrl":374,"locale":13,"readingMinutes":375,"publishedAt":376,"viewCount":377,"likeCount":19,"commentCount":19,"author":378,"vertical":379,"topic":380,"tags":381,"_count":386,"playground":387,"hasQuiz":17,"hasPlayground":17},"019fe660-cf2a-71df-b517-8d722f92cc37","weekly-cors-explained","CORS Explained: The Complete Guide (with Cheat Sheet)","A complete guide to CORS: the same-origin policy, preflight requests, and Access-Control-Allow-Origin headers — with worked examples and a cheat sheet.","\u002Fmedia\u002Fcovers\u002Fweekly-cors-explained.png",15,"2026-08-03T09:54:26.268Z",925,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":133,"name":134},[382,383,384,385],{"slug":46,"name":47,"color":48},{"slug":133,"name":134,"color":48},{"slug":51,"name":52,"color":48},{"slug":59,"name":60,"color":48},{"assessments":183},{"slug":371},{"id":389,"slug":390,"title":391,"subtitle":48,"excerpt":392,"coverUrl":393,"locale":13,"readingMinutes":124,"publishedAt":394,"viewCount":395,"likeCount":19,"commentCount":19,"author":396,"vertical":397,"topic":398,"tags":399,"_count":404,"playground":405,"hasQuiz":17,"hasPlayground":17},"019fe660-c754-703b-80fb-2254bb102ab7","scheduler-yield-main-thread","Your UI is freezing because you never gave the browser a break","Long synchronous tasks block the main thread and make your interface unresponsive. `scheduler.yield()` is the native way to hand control back to the browser mid-task so it can paint, handle input, and resume your work exactly where it left off.","\u002Fmedia\u002Fcovers\u002Fscheduler-yield-main-thread.png","2026-08-03T09:54:25.323Z",636,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[400,401,402,403],{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":67,"name":68,"color":48},{"slug":55,"name":56,"color":48},{"assessments":183},{"slug":390},{"id":407,"slug":408,"title":409,"subtitle":48,"excerpt":410,"coverUrl":411,"locale":13,"readingMinutes":124,"publishedAt":412,"viewCount":413,"likeCount":19,"commentCount":19,"author":414,"vertical":415,"topic":416,"tags":417,"_count":422,"playground":423,"hasQuiz":17,"hasPlayground":17},"019fe660-c020-760c-b4c7-46c1465e25bd","css-light-dark-function","You're writing dark-mode colors twice. `light-dark()` fixes that.","Every `@media (prefers-color-scheme: dark)` block duplicates your color definitions. `light-dark()` lets you write both values on the same line, in the same rule, with no separate block and no build step. Baseline 2024.","\u002Fmedia\u002Fcovers\u002Fcss-light-dark-function.png","2026-08-02T08:29:56.698Z",588,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[418,419,420,421],{"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":408},{"id":425,"slug":426,"title":427,"subtitle":48,"excerpt":428,"coverUrl":429,"locale":13,"readingMinutes":124,"publishedAt":430,"viewCount":431,"likeCount":19,"commentCount":19,"author":432,"vertical":433,"topic":434,"tags":435,"_count":440,"playground":441,"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.","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","2026-08-01T08:27:13.710Z",601,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[436,437,438,439],{"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":426},{"id":443,"slug":444,"title":445,"subtitle":48,"excerpt":446,"coverUrl":447,"locale":13,"readingMinutes":124,"publishedAt":448,"viewCount":449,"likeCount":19,"commentCount":19,"author":450,"vertical":451,"topic":452,"tags":453,"_count":458,"playground":459,"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",535,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[454,455,456,457],{"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":444},{"id":461,"slug":462,"title":463,"subtitle":48,"excerpt":464,"coverUrl":465,"locale":13,"readingMinutes":124,"publishedAt":466,"viewCount":467,"likeCount":19,"commentCount":19,"author":468,"vertical":469,"topic":470,"tags":471,"_count":476,"playground":477,"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",477,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[472,473,474,475],{"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":462},{"id":479,"slug":480,"title":481,"subtitle":48,"excerpt":482,"coverUrl":483,"locale":13,"readingMinutes":131,"publishedAt":484,"viewCount":485,"likeCount":19,"commentCount":19,"author":486,"vertical":487,"topic":488,"tags":489,"_count":494,"playground":495,"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","2026-07-29T08:47:34.803Z",458,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[490,491,492,493],{"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":480},{"page":89,"perPage":89,"total":497,"totalPages":375},177,{"items":499,"meta":518},[500],{"id":501,"slug":502,"title":503,"subtitle":48,"excerpt":504,"coverUrl":505,"locale":13,"readingMinutes":124,"publishedAt":506,"viewCount":507,"likeCount":19,"commentCount":19,"author":508,"vertical":509,"topic":510,"tags":511,"_count":516,"playground":517,"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",83,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":75,"name":76},[512,513,514,515],{"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":502},{"page":183,"perPage":183,"total":497,"totalPages":497}]