[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-css-1":32,"tags-dev":276},[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":273},[34,68,89,109,127,145,163,181,199,219,237,256],{"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},"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",null,"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",4,"2026-08-06T08:44:20.136Z",26,{"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},"css","CSS",[54,56,59,62],{"slug":51,"name":55,"color":38},"Css",{"slug":57,"name":58,"color":38},"webdev","Webdev",{"slug":60,"name":61,"color":38},"frontend","Frontend",{"slug":63,"name":64,"color":38},"components","Components",{"assessments":66},1,{"slug":36},{"id":69,"slug":70,"title":71,"subtitle":38,"excerpt":72,"coverUrl":73,"locale":13,"readingMinutes":74,"publishedAt":75,"viewCount":76,"likeCount":19,"commentCount":19,"author":77,"vertical":78,"topic":79,"tags":80,"_count":87,"playground":88,"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",5,"2026-08-04T08:44:59.227Z",254,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[81,82,83,86],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":84,"name":85,"color":38},"performance","Performance",{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":70},{"id":90,"slug":91,"title":92,"subtitle":38,"excerpt":93,"coverUrl":94,"locale":13,"readingMinutes":74,"publishedAt":95,"viewCount":96,"likeCount":19,"commentCount":19,"author":97,"vertical":98,"topic":99,"tags":100,"_count":107,"playground":108,"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",210,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[101,102,103,104],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},"javascript","Javascript",{"assessments":66},{"slug":91},{"id":110,"slug":111,"title":112,"subtitle":38,"excerpt":113,"coverUrl":114,"locale":13,"readingMinutes":74,"publishedAt":115,"viewCount":116,"likeCount":19,"commentCount":19,"author":117,"vertical":118,"topic":119,"tags":120,"_count":125,"playground":126,"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",137,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[121,122,123,124],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":111},{"id":128,"slug":129,"title":130,"subtitle":38,"excerpt":131,"coverUrl":132,"locale":13,"readingMinutes":41,"publishedAt":133,"viewCount":134,"likeCount":19,"commentCount":19,"author":135,"vertical":136,"topic":137,"tags":138,"_count":143,"playground":144,"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",100,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[139,140,141,142],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":129},{"id":146,"slug":147,"title":148,"subtitle":38,"excerpt":149,"coverUrl":150,"locale":13,"readingMinutes":41,"publishedAt":151,"viewCount":152,"likeCount":19,"commentCount":19,"author":153,"vertical":154,"topic":155,"tags":156,"_count":161,"playground":162,"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",96,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[157,158,159,160],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":147},{"id":164,"slug":165,"title":166,"subtitle":38,"excerpt":167,"coverUrl":168,"locale":13,"readingMinutes":41,"publishedAt":169,"viewCount":170,"likeCount":19,"commentCount":19,"author":171,"vertical":172,"topic":173,"tags":174,"_count":179,"playground":180,"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",91,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[175,176,177,178],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":165},{"id":182,"slug":183,"title":184,"subtitle":38,"excerpt":185,"coverUrl":186,"locale":13,"readingMinutes":74,"publishedAt":187,"viewCount":188,"likeCount":19,"commentCount":19,"author":189,"vertical":190,"topic":191,"tags":192,"_count":197,"playground":198,"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",63,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[193,194,195,196],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":183},{"id":200,"slug":201,"title":202,"subtitle":38,"excerpt":203,"coverUrl":204,"locale":13,"readingMinutes":74,"publishedAt":205,"viewCount":206,"likeCount":19,"commentCount":19,"author":207,"vertical":208,"topic":209,"tags":210,"_count":217,"playground":218,"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":51,"name":52},[211,212,213,214],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":215,"name":216,"color":38},"html","Html",{"assessments":66},{"slug":201},{"id":220,"slug":221,"title":222,"subtitle":38,"excerpt":223,"coverUrl":224,"locale":13,"readingMinutes":41,"publishedAt":225,"viewCount":226,"likeCount":19,"commentCount":19,"author":227,"vertical":228,"topic":229,"tags":230,"_count":235,"playground":236,"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",76,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[231,232,233,234],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":215,"name":216,"color":38},{"assessments":66},{"slug":221},{"id":238,"slug":239,"title":240,"subtitle":38,"excerpt":241,"coverUrl":242,"locale":13,"readingMinutes":41,"publishedAt":243,"viewCount":244,"likeCount":19,"commentCount":19,"author":245,"vertical":246,"topic":247,"tags":249,"_count":254,"playground":255,"hasQuiz":17,"hasPlayground":17},"019fe660-1462-723e-9605-66ffa7e98f42","popover-api-native-popovers","Your dropdown is a div. The browser has a native popover now.","Custom dropdowns, tooltips, and menus built with stacked divs and click-outside listeners — the Popover API landed in every browser in 2024, and the baseline version is two HTML attributes.","\u002Fmedia\u002Fcovers\u002Fpopover-api-native-popovers.png","2026-07-12T08:24:42.323Z",40,{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":105,"name":248},"JavaScript",[250,251,252,253],{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"slug":51,"name":55,"color":38},{"assessments":66},{"slug":239},{"id":257,"slug":258,"title":259,"subtitle":38,"excerpt":260,"coverUrl":261,"locale":13,"readingMinutes":41,"publishedAt":262,"viewCount":244,"likeCount":19,"commentCount":19,"author":263,"vertical":264,"topic":265,"tags":266,"_count":271,"playground":272,"hasQuiz":17,"hasPlayground":17},"019fe65f-fe39-767c-9ce8-da4db5144b1d","css-nesting-sass-replaced","You kept Sass for one reason. Native CSS nesting just ended it.","CSS has supported nesting natively since 2023 — pseudo-classes, pseudo-elements, and @media queries nested inside the rules they belong to. No compiler required.","\u002Fmedia\u002Fcovers\u002Fcss-nesting-sass-replaced.png","2026-07-09T09:48:41.505Z",{"id":45,"name":46,"username":47,"avatarUrl":38,"headline":48},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":51,"name":52},[267,268,269,270],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":105,"name":106,"color":38},{"assessments":66},{"slug":258},{"page":66,"perPage":274,"total":275,"totalPages":31},12,18,[277,278,280,282,283,287,289,292,295,299,302],{"slug":57,"name":58,"color":38,"articles":206},{"slug":105,"name":106,"color":38,"articles":279},45,{"slug":60,"name":61,"color":38,"articles":281},44,{"slug":51,"name":55,"color":38,"articles":275},{"slug":284,"name":285,"color":38,"articles":286},"typescript","Typescript",9,{"slug":84,"name":85,"color":38,"articles":288},7,{"slug":290,"name":291,"color":38,"articles":74},"react","React",{"slug":293,"name":294,"color":38,"articles":41},"node","Node",{"slug":296,"name":297,"color":38,"articles":298},"ai","Ai",3,{"slug":300,"name":301,"color":38,"articles":298},"tutorial","Tutorial",{"slug":215,"name":216,"color":38,"articles":298}]