[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-css-5":44,"tags-all":116,"search-suggestions":245},[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,{"items":45,"meta":113},[46,78,96],{"id":47,"slug":48,"title":49,"subtitle":50,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":50,"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",null,"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",5,"2026-07-03T09:26:36.534Z",186,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"css","CSS",[66,68,71,74],{"slug":63,"name":67,"color":50},"Css",{"slug":69,"name":70,"color":50},"webdev","Webdev",{"slug":72,"name":73,"color":50},"frontend","Frontend",{"slug":75,"name":76,"color":50},"javascript","Javascript",{"assessments":19},{"id":79,"slug":80,"title":81,"subtitle":50,"excerpt":82,"coverUrl":83,"locale":13,"readingMinutes":84,"publishedAt":85,"viewCount":86,"likeCount":19,"commentCount":19,"author":87,"vertical":88,"topic":89,"tags":90,"_count":95,"playground":50,"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",4,"2026-07-02T07:18:03.500Z",235,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[91,92,93,94],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"assessments":19},{"id":97,"slug":98,"title":99,"subtitle":50,"excerpt":100,"coverUrl":101,"locale":13,"readingMinutes":53,"publishedAt":102,"viewCount":103,"likeCount":19,"commentCount":19,"author":104,"vertical":105,"topic":106,"tags":107,"_count":112,"playground":50,"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",198,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[108,109,110,111],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"assessments":19},{"page":53,"perPage":114,"total":115,"totalPages":53},12,51,[117,119,121,123,127,128,132,136,140,144,148,152,155,159,163,166,170,174,177,180,184,187,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242],{"slug":69,"name":70,"color":50,"articles":118},174,{"slug":75,"name":76,"color":50,"articles":120},141,{"slug":72,"name":73,"color":50,"articles":122},96,{"slug":124,"name":125,"color":50,"articles":126},"tutorial","Tutorial",71,{"slug":63,"name":67,"color":50,"articles":115},{"slug":129,"name":130,"color":50,"articles":131},"performance","Performance",30,{"slug":133,"name":134,"color":50,"articles":135},"typescript","Typescript",25,{"slug":137,"name":138,"color":50,"articles":139},"react","React",20,{"slug":141,"name":142,"color":50,"articles":143},"programming","Programming",19,{"slug":145,"name":146,"color":50,"articles":147},"browser","Browser",18,{"slug":149,"name":150,"color":50,"articles":151},"node","Node",16,{"slug":153,"name":154,"color":50,"articles":114},"html","Html",{"slug":156,"name":157,"color":50,"articles":158},"nextjs","Nextjs",11,{"slug":160,"name":161,"color":50,"articles":162},"vue","Vue",10,{"slug":164,"name":165,"color":50,"articles":162},"accessibility","Accessibility",{"slug":167,"name":168,"color":50,"articles":169},"nestjs","Nestjs",9,{"slug":171,"name":172,"color":50,"articles":173},"nuxt","Nuxt",8,{"slug":175,"name":176,"color":50,"articles":173},"career","Career",{"slug":178,"name":179,"color":50,"articles":173},"discuss","Discuss",{"slug":181,"name":182,"color":50,"articles":183},"beginners","Beginners",7,{"slug":185,"name":186,"color":50,"articles":183},"productivity","Productivity",{"slug":188,"name":189,"color":50,"articles":190},"grammar","Grammar",6,{"slug":192,"name":193,"color":50,"articles":53},"security","Security",{"slug":195,"name":196,"color":50,"articles":84},"ssr","SSR",{"slug":198,"name":199,"color":50,"articles":84},"apis","Apis",{"slug":201,"name":202,"color":50,"articles":43},"ai","Ai",{"slug":204,"name":205,"color":50,"articles":43},"api","API",{"slug":207,"name":208,"color":50,"articles":43},"caching","Caching",{"slug":210,"name":211,"color":50,"articles":31},"async","Async",{"slug":213,"name":214,"color":50,"articles":31},"forms","Forms",{"slug":216,"name":217,"color":50,"articles":31},"dom","Dom",{"slug":219,"name":220,"color":50,"articles":31},"backend","Backend",{"slug":222,"name":223,"color":50,"articles":31},"english","English",{"slug":225,"name":226,"color":50,"articles":31},"verbs","Verbs",{"slug":228,"name":229,"color":50,"articles":31},"spanish","Spanish",{"slug":231,"name":232,"color":50,"articles":31},"a1","A1",{"slug":234,"name":235,"color":50,"articles":31},"a2","A2",{"slug":237,"name":238,"color":50,"articles":31},"tenses","Tenses",{"slug":240,"name":241,"color":50,"articles":31},"turkish","Turkish",{"slug":243,"name":244,"color":50,"articles":31},"animation","Animation",[246,247,248,249,250,251,252,253,254,255,256,257],{"slug":69,"name":70,"articles":118},{"slug":75,"name":76,"articles":120},{"slug":72,"name":73,"articles":122},{"slug":124,"name":125,"articles":126},{"slug":63,"name":67,"articles":115},{"slug":129,"name":130,"articles":131},{"slug":133,"name":134,"articles":135},{"slug":137,"name":138,"articles":139},{"slug":141,"name":142,"articles":143},{"slug":145,"name":146,"articles":147},{"slug":149,"name":150,"articles":151},{"slug":153,"name":154,"articles":114}]