[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-performance-1":32,"tags-dev":184},[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":181},[34,68,87,109,127,145,163],{"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-f5b3-7569-8cc8-22b1136aa9b2","compressionstream-native-gzip","You're importing pako to gzip data. `CompressionStream` does it natively.",null,"pako is one of npm's most downloaded packages — pulled in by thousands of projects to compress data before storing or sending it. CompressionStream and DecompressionStream do the same job natively, in any modern browser and Node.js 18+, with no dependencies and native C-speed execution.","\u002Fmedia\u002Fcovers\u002Fcompressionstream-native-gzip.png",4,"2026-08-10T07:49:27.000Z",103,{"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},"javascript","JavaScript",[54,56,59,62],{"slug":51,"name":55,"color":38},"Javascript",{"slug":57,"name":58,"color":38},"webdev","Webdev",{"slug":60,"name":61,"color":38},"frontend","Frontend",{"slug":63,"name":64,"color":38},"performance","Performance",{"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":85,"playground":86,"hasQuiz":17,"hasPlayground":17},"019fe660-f552-73c8-9f52-d036e672c053","crypto-randomuuid-native-uuid","Stop importing `uuid`. `crypto.randomUUID()` has been native since 2021.","The `uuid` package is downloaded hundreds of millions of times a week. Most installs exist to call uuid\u002Fv4 — exactly what `crypto.randomUUID()` does natively, with no import, no bundle cost, and guaranteed cryptographic randomness.","\u002Fmedia\u002Fcovers\u002Fcrypto-randomuuid-native-uuid.png",3,"2026-08-08T07:00:09.988Z",98,{"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,84],{"slug":51,"name":55,"color":38},{"slug":57,"name":58,"color":38},{"slug":60,"name":61,"color":38},{"slug":63,"name":64,"color":38},{"assessments":66},{"slug":70},{"id":88,"slug":89,"title":90,"subtitle":38,"excerpt":91,"coverUrl":92,"locale":13,"readingMinutes":93,"publishedAt":94,"viewCount":95,"likeCount":19,"commentCount":19,"author":96,"vertical":97,"topic":98,"tags":101,"_count":107,"playground":108,"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":99,"name":100},"css","CSS",[102,104,105,106],{"slug":99,"name":103,"color":38},"Css",{"slug":57,"name":58,"color":38},{"slug":63,"name":64,"color":38},{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":89},{"id":110,"slug":111,"title":112,"subtitle":38,"excerpt":113,"coverUrl":114,"locale":13,"readingMinutes":41,"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-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",212,{"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":63,"name":64,"color":38},{"slug":60,"name":61,"color":38},{"assessments":66},{"slug":111},{"id":128,"slug":129,"title":130,"subtitle":38,"excerpt":131,"coverUrl":132,"locale":13,"readingMinutes":93,"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-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",116,{"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":63,"name":64,"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-8482-75bc-ab16-8e86f92efc09","resize-observer-element-size","You're watching `window` to detect element size changes. `ResizeObserver` watches the element itself.","A `window` resize listener only fires when the viewport changes. ResizeObserver fires whenever the element's own box changes — from content loading, parent reflow, container queries, or anything else.","\u002Fmedia\u002Fcovers\u002Fresize-observer-element-size.png","2026-07-26T08:32:44.347Z",88,{"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":63,"name":64,"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-503a-7133-b7b0-7d5ce9587539","intersection-observer-visibility","Your scroll listener fires on every pixel. `IntersectionObserver` fires when visibility actually changes.","Detecting whether an element is in the viewport by listening to scroll events runs an expensive layout calculation on every frame. `IntersectionObserver` is the browser-native alternative — it fires only when visibility changes, off the main thread, with no scroll handler involved.","\u002Fmedia\u002Fcovers\u002Fintersection-observer-visibility.png","2026-07-19T08:25:59.411Z",54,{"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":63,"name":64,"color":38},{"assessments":66},{"slug":165},{"page":66,"perPage":182,"total":183,"totalPages":66},12,7,[185,187,189,191,193,197,198,201,204,207,210],{"slug":57,"name":58,"color":38,"articles":186},50,{"slug":51,"name":55,"color":38,"articles":188},45,{"slug":60,"name":61,"color":38,"articles":190},44,{"slug":99,"name":103,"color":38,"articles":192},18,{"slug":194,"name":195,"color":38,"articles":196},"typescript","Typescript",9,{"slug":63,"name":64,"color":38,"articles":183},{"slug":199,"name":200,"color":38,"articles":93},"react","React",{"slug":202,"name":203,"color":38,"articles":41},"node","Node",{"slug":205,"name":206,"color":38,"articles":74},"ai","Ai",{"slug":208,"name":209,"color":38,"articles":74},"tutorial","Tutorial",{"slug":211,"name":212,"color":38,"articles":74},"html","Html"]