[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-performance-3":44,"search-suggestions":177,"tags-all":214},[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":174},[46,80,102,120,138,156],{"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":79,"hasQuiz":17,"hasPlayground":17},"019fe660-f552-73c8-9f52-d036e672c053","crypto-randomuuid-native-uuid","Stop importing `uuid`. `crypto.randomUUID()` has been native since 2021.",null,"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",4,"2026-08-08T07:00:09.988Z",997,{"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},"javascript","JavaScript",[66,68,71,74],{"slug":63,"name":67,"color":50},"Javascript",{"slug":69,"name":70,"color":50},"webdev","Webdev",{"slug":72,"name":73,"color":50},"frontend","Frontend",{"slug":75,"name":76,"color":50},"performance","Performance",{"assessments":78},1,{"slug":48},{"id":81,"slug":82,"title":83,"subtitle":50,"excerpt":84,"coverUrl":85,"locale":13,"readingMinutes":86,"publishedAt":87,"viewCount":88,"likeCount":19,"commentCount":19,"author":89,"vertical":90,"topic":91,"tags":94,"_count":100,"playground":101,"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",1002,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":92,"name":93},"css","CSS",[95,97,98,99],{"slug":92,"name":96,"color":50},"Css",{"slug":69,"name":70,"color":50},{"slug":75,"name":76,"color":50},{"slug":72,"name":73,"color":50},{"assessments":78},{"slug":82},{"id":103,"slug":104,"title":105,"subtitle":50,"excerpt":106,"coverUrl":107,"locale":13,"readingMinutes":86,"publishedAt":108,"viewCount":109,"likeCount":19,"commentCount":19,"author":110,"vertical":111,"topic":112,"tags":113,"_count":118,"playground":119,"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",750,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[114,115,116,117],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":75,"name":76,"color":50},{"slug":72,"name":73,"color":50},{"assessments":78},{"slug":104},{"id":121,"slug":122,"title":123,"subtitle":50,"excerpt":124,"coverUrl":125,"locale":13,"readingMinutes":86,"publishedAt":126,"viewCount":127,"likeCount":19,"commentCount":19,"author":128,"vertical":129,"topic":130,"tags":131,"_count":136,"playground":137,"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",562,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[132,133,134,135],{"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":78},{"slug":122},{"id":139,"slug":140,"title":141,"subtitle":50,"excerpt":142,"coverUrl":143,"locale":13,"readingMinutes":53,"publishedAt":144,"viewCount":145,"likeCount":19,"commentCount":19,"author":146,"vertical":147,"topic":148,"tags":149,"_count":154,"playground":155,"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",661,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[150,151,152,153],{"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":78},{"slug":140},{"id":157,"slug":158,"title":159,"subtitle":50,"excerpt":160,"coverUrl":161,"locale":13,"readingMinutes":53,"publishedAt":162,"viewCount":163,"likeCount":19,"commentCount":19,"author":164,"vertical":165,"topic":166,"tags":167,"_count":172,"playground":173,"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",522,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[168,169,170,171],{"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":78},{"slug":158},{"page":43,"perPage":175,"total":176,"totalPages":43},12,30,[178,180,182,184,188,190,191,195,199,203,207,211],{"slug":69,"name":70,"articles":179},174,{"slug":63,"name":67,"articles":181},141,{"slug":72,"name":73,"articles":183},96,{"slug":185,"name":186,"articles":187},"tutorial","Tutorial",71,{"slug":92,"name":96,"articles":189},51,{"slug":75,"name":76,"articles":176},{"slug":192,"name":193,"articles":194},"typescript","Typescript",25,{"slug":196,"name":197,"articles":198},"react","React",20,{"slug":200,"name":201,"articles":202},"programming","Programming",19,{"slug":204,"name":205,"articles":206},"browser","Browser",18,{"slug":208,"name":209,"articles":210},"node","Node",16,{"slug":212,"name":213,"articles":175},"html","Html",[215,216,217,218,219,220,221,222,223,224,225,226,227,231,235,238,242,246,249,252,256,259,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314],{"slug":69,"name":70,"color":50,"articles":179},{"slug":63,"name":67,"color":50,"articles":181},{"slug":72,"name":73,"color":50,"articles":183},{"slug":185,"name":186,"color":50,"articles":187},{"slug":92,"name":96,"color":50,"articles":189},{"slug":75,"name":76,"color":50,"articles":176},{"slug":192,"name":193,"color":50,"articles":194},{"slug":196,"name":197,"color":50,"articles":198},{"slug":200,"name":201,"color":50,"articles":202},{"slug":204,"name":205,"color":50,"articles":206},{"slug":208,"name":209,"color":50,"articles":210},{"slug":212,"name":213,"color":50,"articles":175},{"slug":228,"name":229,"color":50,"articles":230},"nextjs","Nextjs",11,{"slug":232,"name":233,"color":50,"articles":234},"vue","Vue",10,{"slug":236,"name":237,"color":50,"articles":234},"accessibility","Accessibility",{"slug":239,"name":240,"color":50,"articles":241},"nestjs","Nestjs",9,{"slug":243,"name":244,"color":50,"articles":245},"nuxt","Nuxt",8,{"slug":247,"name":248,"color":50,"articles":245},"career","Career",{"slug":250,"name":251,"color":50,"articles":245},"discuss","Discuss",{"slug":253,"name":254,"color":50,"articles":255},"beginners","Beginners",7,{"slug":257,"name":258,"color":50,"articles":255},"productivity","Productivity",{"slug":260,"name":261,"color":50,"articles":262},"grammar","Grammar",6,{"slug":264,"name":265,"color":50,"articles":86},"security","Security",{"slug":267,"name":268,"color":50,"articles":53},"ssr","SSR",{"slug":270,"name":271,"color":50,"articles":53},"apis","Apis",{"slug":273,"name":274,"color":50,"articles":43},"ai","Ai",{"slug":276,"name":277,"color":50,"articles":43},"api","API",{"slug":279,"name":280,"color":50,"articles":43},"caching","Caching",{"slug":282,"name":283,"color":50,"articles":31},"async","Async",{"slug":285,"name":286,"color":50,"articles":31},"forms","Forms",{"slug":288,"name":289,"color":50,"articles":31},"dom","Dom",{"slug":291,"name":292,"color":50,"articles":31},"backend","Backend",{"slug":294,"name":295,"color":50,"articles":31},"english","English",{"slug":297,"name":298,"color":50,"articles":31},"verbs","Verbs",{"slug":300,"name":301,"color":50,"articles":31},"spanish","Spanish",{"slug":303,"name":304,"color":50,"articles":31},"a1","A1",{"slug":306,"name":307,"color":50,"articles":31},"a2","A2",{"slug":309,"name":310,"color":50,"articles":31},"tenses","Tenses",{"slug":312,"name":313,"color":50,"articles":31},"turkish","Turkish",{"slug":315,"name":316,"color":50,"articles":31},"animation","Animation"]