[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"blog-topics":44,"topics-all":177,"search-suggestions":256,"articles-all-15---":269,"articles-total":432},[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":429},[271,292,309,326,343,360,377,394,412],{"id":272,"slug":273,"title":274,"subtitle":48,"excerpt":275,"coverUrl":276,"locale":13,"readingMinutes":124,"publishedAt":277,"viewCount":278,"likeCount":19,"commentCount":19,"author":279,"vertical":284,"topic":285,"tags":286,"_count":291,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-d8d6-73ed-b26b-18726a494914","view-transitions-native-page-transitions","The page transition you pay a library for is now free","You reach for Framer Motion or GSAP to make navigation feel smooth. The View Transitions API does the same thing natively — and the starting price is a single CSS rule.","\u002Fmedia\u002Fcovers\u002Fview-transitions-native-page-transitions.png","2026-07-03T09:26:36.534Z",153,{"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":19},{"id":293,"slug":294,"title":295,"subtitle":48,"excerpt":296,"coverUrl":297,"locale":13,"readingMinutes":131,"publishedAt":298,"viewCount":299,"likeCount":19,"commentCount":19,"author":300,"vertical":301,"topic":302,"tags":303,"_count":308,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-d19a-709a-855e-54178d886feb","has-selector-condition-evaluator",":has() isn't a parent selector. It deletes JavaScript.","Everyone calls :has() the parent selector. That framing is too small — it's a condition evaluator that obsoletes a whole category of class-toggling JS, and it's in every browser today.","\u002Fmedia\u002Fcovers\u002Fhas-selector-condition-evaluator.png","2026-07-02T07:18:03.500Z",167,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[304,305,306,307],{"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":19},{"id":310,"slug":311,"title":312,"subtitle":48,"excerpt":313,"coverUrl":314,"locale":13,"readingMinutes":131,"publishedAt":315,"viewCount":316,"likeCount":19,"commentCount":19,"author":317,"vertical":318,"topic":319,"tags":320,"_count":325,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-c9aa-70db-8ac8-df39bed8061b","optimistic-updates-stop-waiting-for-the-server","Optimistic Updates: Stop Making Your Save Button Wait for the Server","Every click that spins for a server round-trip is a choice you made. Optimistic updates remove the wait — but the rollback is where almost every implementation quietly breaks.","\u002Fmedia\u002Fcovers\u002Foptimistic-updates-stop-waiting-for-the-server.png","2026-07-01T07:42:41.462Z",207,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[321,322,323,324],{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"slug":75,"name":76,"color":48},{"assessments":19},{"id":327,"slug":328,"title":329,"subtitle":48,"excerpt":330,"coverUrl":331,"locale":13,"readingMinutes":124,"publishedAt":332,"viewCount":333,"likeCount":19,"commentCount":19,"author":334,"vertical":335,"topic":336,"tags":337,"_count":342,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-c193-7159-96ba-bff62b34e53d","container-queries-responsive-primitive","Your card breaks in the sidebar. Here's the real fix.","A component that looks perfect in the main column falls apart in a sidebar — and the viewport width says everything's fine. The bug isn't your CSS. It's the question your CSS is asking.","\u002Fmedia\u002Fcovers\u002Fcontainer-queries-responsive-primitive.png","2026-06-30T07:30:01.218Z",137,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":227},[338,339,340,341],{"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":19},{"id":344,"slug":345,"title":346,"subtitle":48,"excerpt":347,"coverUrl":348,"locale":13,"readingMinutes":131,"publishedAt":349,"viewCount":350,"likeCount":19,"commentCount":19,"author":351,"vertical":352,"topic":353,"tags":354,"_count":359,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-b9de-72a8-8656-ee81360dbd99","url-as-state-manager","The URL Is Your Best State Manager","You're storing filter state, search queries, and pagination in useState — and losing it every time someone refreshes. The URL already does this better.","\u002Fmedia\u002Fcovers\u002Furl-as-state-manager.png","2026-06-29T07:59:09.726Z",250,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":242},[355,356,357,358],{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"slug":75,"name":76,"color":48},{"assessments":19},{"id":361,"slug":362,"title":363,"subtitle":48,"excerpt":364,"coverUrl":365,"locale":13,"readingMinutes":43,"publishedAt":366,"viewCount":367,"likeCount":19,"commentCount":19,"author":368,"vertical":369,"topic":370,"tags":371,"_count":376,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-b1ba-7644-b327-4118cffd7d22","server-components-mental-model","Server Components Without the Hype: A Mental Model That Sticks","RSC isn't 'SSR 2.0' and it isn't magic. Here's the one distinction that makes the whole model click.","\u002Fmedia\u002Fcovers\u002Fserver-components-mental-model.png","2026-06-28T09:41:35.140Z",176,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":75,"name":76},[372,373,374,375],{"slug":75,"name":76,"color":48},{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":51,"name":52,"color":48},{"assessments":19},{"id":378,"slug":379,"title":380,"subtitle":48,"excerpt":381,"coverUrl":382,"locale":13,"readingMinutes":43,"publishedAt":383,"viewCount":384,"likeCount":19,"commentCount":19,"author":385,"vertical":386,"topic":387,"tags":388,"_count":393,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-a9f9-7079-bfbf-ca4dc5685bdd","typescript-won-what-it-bought-us","TypeScript Won. Here's What That Actually Bought Us.","The 'should we use TypeScript?' debate is over. The interesting question is what all those types are quietly enabling now.","\u002Fmedia\u002Fcovers\u002Ftypescript-won-what-it-bought-us.png","2026-06-28T07:31:54.189Z",195,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":71,"name":200},[389,390,391,392],{"slug":71,"name":72,"color":48},{"slug":51,"name":52,"color":48},{"slug":46,"name":47,"color":48},{"slug":139,"name":140,"color":48},{"assessments":19},{"id":395,"slug":396,"title":397,"subtitle":48,"excerpt":398,"coverUrl":399,"locale":13,"readingMinutes":43,"publishedAt":400,"viewCount":401,"likeCount":19,"commentCount":19,"author":402,"vertical":403,"topic":404,"tags":405,"_count":411,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-a25a-702f-b8a0-ae60efb61964","design-system-api-for-machines","Your Design System Is Now an API for Machines","Component libraries used to be for humans. Now they're the rails an AI plans against — and that changes how you should build them.","\u002Fmedia\u002Fcovers\u002Fdesign-system-api-for-machines.png","2026-06-26T07:29:19.042Z",186,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":233,"name":234},[406,407,408,410],{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":233,"name":409,"color":48},"Designsystems",{"slug":139,"name":140,"color":48},{"assessments":19},{"id":413,"slug":414,"title":415,"subtitle":48,"excerpt":416,"coverUrl":417,"locale":13,"readingMinutes":124,"publishedAt":418,"viewCount":419,"likeCount":19,"commentCount":19,"author":420,"vertical":421,"topic":422,"tags":423,"_count":428,"playground":48,"hasQuiz":18,"hasPlayground":18},"019fe65f-9991-7098-a2e8-28d741366ffa","frontend-future-ai","The Frontend Is Becoming a Conversation: Where UI Engineering Goes Next","Frontend stacks consolidated, the rendering wars cooled off, and AI quietly changed what a frontend engineer actually does all day. Here's where it's heading.","\u002Fmedia\u002Fcovers\u002Ffrontend-future-ai.png","2026-06-25T12:27:00.662Z",248,{"id":280,"name":281,"username":282,"avatarUrl":48,"headline":283},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":139,"name":224},[424,425,426,427],{"slug":46,"name":47,"color":48},{"slug":55,"name":56,"color":48},{"slug":139,"name":140,"color":48},{"slug":51,"name":52,"color":48},{"assessments":19},{"page":430,"perPage":89,"total":431,"totalPages":430},15,177,{"items":433,"meta":452},[434],{"id":435,"slug":436,"title":437,"subtitle":48,"excerpt":438,"coverUrl":439,"locale":13,"readingMinutes":124,"publishedAt":440,"viewCount":441,"likeCount":19,"commentCount":19,"author":442,"vertical":443,"topic":444,"tags":445,"_count":450,"playground":451,"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},[446,447,448,449],{"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":436},{"page":183,"perPage":183,"total":431,"totalPages":431}]