[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-html-1":32,"tags-dev":111},[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":108},[34,68,89],{"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},"019ff19b-f388-73f8-aa5b-93d73337d6fd","dialog-element-native-modal","You built your modal with a `\u003Cdiv>` and a focus trap library. The native `\u003Cdialog>` does all of that.",null,"The `\u003Cdialog>` element ships with focus trapping, Escape-to-close, backdrop rendering, and correct ARIA semantics — no library, no boilerplate. It's been Baseline since 2022.","\u002Fmedia\u002Fcovers\u002Fdialog-element-native-modal.png",5,"2026-08-08T07:00:10.810Z",98,{"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},"html","HTML",[54,56,59,62],{"slug":51,"name":55,"color":38},"Html",{"slug":57,"name":58,"color":38},"webdev","Webdev",{"slug":60,"name":61,"color":38},"frontend","Frontend",{"slug":63,"name":64,"color":38},"javascript","Javascript",{"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-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",50,{"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":95,"publishedAt":96,"viewCount":97,"likeCount":19,"commentCount":19,"author":98,"vertical":99,"topic":100,"tags":101,"_count":106,"playground":107,"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",4,"2026-07-16T08:21:27.248Z",76,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":79,"name":80},[102,103,104,105],{"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":91},{"page":66,"perPage":109,"total":110,"totalPages":66},12,3,[112,113,115,117,119,123,127,130,133,136,139],{"slug":57,"name":58,"color":38,"articles":75},{"slug":63,"name":64,"color":38,"articles":114},45,{"slug":60,"name":61,"color":38,"articles":116},44,{"slug":79,"name":83,"color":38,"articles":118},18,{"slug":120,"name":121,"color":38,"articles":122},"typescript","Typescript",9,{"slug":124,"name":125,"color":38,"articles":126},"performance","Performance",7,{"slug":128,"name":129,"color":38,"articles":41},"react","React",{"slug":131,"name":132,"color":38,"articles":95},"node","Node",{"slug":134,"name":135,"color":38,"articles":110},"ai","Ai",{"slug":137,"name":138,"color":38,"articles":110},"tutorial","Tutorial",{"slug":51,"name":55,"color":38,"articles":110}]