[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-webdev-10":44,"tags-all":304,"search-suggestions":415},[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":300},[46,80,103,124,143,164,185,208,226,244,262,280],{"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},"01a01df1-d6d5-71e8-bba6-1242e581730b","web-animations-api-imperative-control","CSS Animations Can't Reverse Mid-Flight. The Web Animations API Can.",null,"Toggling a class to restart a CSS animation works — until you need to pause it, reverse it mid-flight, or ask how far through it is. element.animate() returns an object with those methods built in, natively, in every browser you already support.","\u002Fmedia\u002Fcovers\u002Fweb-animations-api-imperative-control.png",5,"2026-08-25T06:55:40.108Z",707,{"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},"css","Css",{"slug":72,"name":73,"color":50},"webdev","Webdev",{"slug":75,"name":76,"color":50},"frontend","Frontend",{"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":78,"author":89,"vertical":90,"topic":91,"tags":94,"_count":101,"playground":102,"hasQuiz":17,"hasPlayground":17},"01a03410-2db8-735b-88b2-5285459dc915","vue-weekly-reactivity-ref-vs-reactive","Vue Reactivity Explained: ref vs reactive (+ Cheat Sheet)","A complete guide to Vue reactivity: how ref and reactive really work, why destructuring breaks updates, when to use each, and a copy-paste cheat sheet.","\u002Fmedia\u002Fcovers\u002Fvue-weekly-reactivity-ref-vs-reactive.png",14,"2026-08-24T13:57:38.080Z",1123,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":92,"name":93},"vue","Vue",[95,96,97,100],{"slug":92,"name":93,"color":50},{"slug":63,"name":67,"color":50},{"slug":98,"name":99,"color":50},"tutorial","Tutorial",{"slug":72,"name":73,"color":50},{"assessments":78},{"slug":82},{"id":104,"slug":105,"title":106,"subtitle":50,"excerpt":107,"coverUrl":108,"locale":13,"readingMinutes":109,"publishedAt":110,"viewCount":111,"likeCount":19,"commentCount":19,"author":112,"vertical":113,"topic":114,"tags":115,"_count":122,"playground":123,"hasQuiz":17,"hasPlayground":17},"019fe660-932f-704d-80f6-f8646b604799","weekly-javascript-proxy-reflect","JavaScript Proxy and Reflect: The Complete Guide","Learn JavaScript Proxy and Reflect from the ground up — traps, invariants, and reactive state — with worked examples and a copy-paste cheat sheet.","\u002Fmedia\u002Fcovers\u002Fweekly-javascript-proxy-reflect.png",15,"2026-08-24T07:06:37.948Z",909,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[116,117,118,119],{"slug":63,"name":67,"color":50},{"slug":72,"name":73,"color":50},{"slug":98,"name":99,"color":50},{"slug":120,"name":121,"color":50},"programming","Programming",{"assessments":78},{"slug":105},{"id":125,"slug":126,"title":127,"subtitle":50,"excerpt":128,"coverUrl":129,"locale":13,"readingMinutes":53,"publishedAt":130,"viewCount":131,"likeCount":19,"commentCount":19,"author":132,"vertical":133,"topic":134,"tags":136,"_count":141,"playground":142,"hasQuiz":17,"hasPlayground":17},"01a018ca-59cf-75a0-b0c2-ba8ca95ade59","css-where-is-specificity-control","The CSS Selector Built to Lose Every Fight","You keep reaching for !important to override a component's styles. There's a selector that fixes this by contributing zero specificity, on purpose.","\u002Fmedia\u002Fcovers\u002Fcss-where-is-specificity-control.png","2026-08-24T07:06:37.051Z",667,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":69,"name":135},"CSS",[137,138,139,140],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":120,"name":121,"color":50},{"assessments":78},{"slug":126},{"id":144,"slug":145,"title":146,"subtitle":50,"excerpt":147,"coverUrl":148,"locale":13,"readingMinutes":149,"publishedAt":150,"viewCount":151,"likeCount":19,"commentCount":19,"author":152,"vertical":153,"topic":154,"tags":155,"_count":162,"playground":163,"hasQuiz":17,"hasPlayground":17},"01a013a2-ff42-738e-b6d0-cda8f338a976","import-maps-bare-specifiers-native-modules","One version bump, 40 files to edit. Import maps fix that.","Bare specifiers like import _ from 'lodash' don't work in a browser without a bundler — unless you tell the browser how to resolve them yourself, in one JSON block instead of forty hardcoded URLs.","\u002Fmedia\u002Fcovers\u002Fimport-maps-bare-specifiers-native-modules.png",6,"2026-08-23T06:48:56.911Z",606,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[156,157,158,159],{"slug":63,"name":67,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":160,"name":161,"color":50},"browser","Browser",{"assessments":78},{"slug":145},{"id":165,"slug":166,"title":167,"subtitle":50,"excerpt":168,"coverUrl":169,"locale":13,"readingMinutes":170,"publishedAt":171,"viewCount":172,"likeCount":19,"commentCount":19,"author":173,"vertical":174,"topic":175,"tags":176,"_count":183,"playground":184,"hasQuiz":17,"hasPlayground":17},"019ff19b-fbc7-7069-b3ba-28ffd8fbf4d3","navigator-sendbeacon-reliable-analytics","Your fetch in beforeunload is silently killed. navigator.sendBeacon guarantees delivery.","When the page unloads, the browser may cancel any in-flight fetch or XHR before it completes. navigator.sendBeacon sends a POST the browser commits to delivering, even after the document is gone.","\u002Fmedia\u002Fcovers\u002Fnavigator-sendbeacon-reliable-analytics.png",4,"2026-08-22T06:47:21.180Z",918,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[177,178,179,180],{"slug":63,"name":67,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":181,"name":182,"color":50},"performance","Performance",{"assessments":78},{"slug":166},{"id":186,"slug":187,"title":188,"subtitle":50,"excerpt":189,"coverUrl":190,"locale":13,"readingMinutes":149,"publishedAt":191,"viewCount":192,"likeCount":19,"commentCount":19,"author":193,"vertical":194,"topic":195,"tags":198,"_count":206,"playground":207,"hasQuiz":17,"hasPlayground":17},"01a00e88-aad0-7555-be95-4e472b212b9b","inert-attribute-disable-interaction","The Modal Was Open. So Was Everything Behind It.","A keyboard-only pass found a background button still worked while a modal was open — aria-hidden had hidden it from screen readers but never touched focus or clicks. One boolean attribute, inert, closes that gap in a single line.","\u002Fmedia\u002Fcovers\u002Finert-attribute-disable-interaction.png","2026-08-21T06:54:17.247Z",600,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":196,"name":197},"html","HTML",[199,201,204,205],{"slug":196,"name":200,"color":50},"Html",{"slug":202,"name":203,"color":50},"accessibility","Accessibility",{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"assessments":78},{"slug":187},{"id":209,"slug":210,"title":211,"subtitle":50,"excerpt":212,"coverUrl":213,"locale":13,"readingMinutes":149,"publishedAt":214,"viewCount":215,"likeCount":19,"commentCount":19,"author":216,"vertical":217,"topic":218,"tags":219,"_count":224,"playground":225,"hasQuiz":17,"hasPlayground":17},"01a00952-9d58-7601-89ac-42fc7bf00fc9","urlpattern-native-route-matching","Stop Writing Regex to Match URLs — The Browser Already Can","A service worker's route regex was missing one anchor and started caching live edit forms as if they were read-only pages. URLPattern, native since 2021, doesn't let you make that mistake.","\u002Fmedia\u002Fcovers\u002Furlpattern-native-route-matching.png","2026-08-20T06:53:07.359Z",650,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[220,221,222,223],{"slug":63,"name":67,"color":50},{"slug":72,"name":73,"color":50},{"slug":160,"name":161,"color":50},{"slug":75,"name":76,"color":50},{"assessments":78},{"slug":210},{"id":227,"slug":228,"title":229,"subtitle":50,"excerpt":230,"coverUrl":231,"locale":13,"readingMinutes":53,"publishedAt":232,"viewCount":233,"likeCount":19,"commentCount":19,"author":234,"vertical":235,"topic":236,"tags":237,"_count":242,"playground":243,"hasQuiz":17,"hasPlayground":17},"01a0042a-852e-7338-83ed-a1f581d6c501","css-clamp-fluid-typography","Stop Writing Media Queries for Font Size","A design system audit found five breakpoints for one heading. clamp() replaces all of them with one line that never jumps.","\u002Fmedia\u002Fcovers\u002Fcss-clamp-fluid-typography.png","2026-08-19T06:51:54.290Z",682,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":69,"name":135},[238,239,240,241],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":202,"name":203,"color":50},{"assessments":78},{"slug":228},{"id":245,"slug":246,"title":247,"subtitle":50,"excerpt":248,"coverUrl":249,"locale":13,"readingMinutes":53,"publishedAt":250,"viewCount":251,"likeCount":19,"commentCount":19,"author":252,"vertical":253,"topic":254,"tags":255,"_count":260,"playground":261,"hasQuiz":17,"hasPlayground":17},"019fff35-4908-727e-b7a3-dafd1ada4784","css-scroll-snap-native-carousel","I Ripped Out a Carousel Library. CSS Replaced It.","A scroll listener, a debounce, and 200 lines of carousel-library glue code — replaced by three CSS properties that snap smoother than any of it did.","\u002Fmedia\u002Fcovers\u002Fcss-scroll-snap-native-carousel.png","2026-08-18T06:50:52.267Z",905,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":69,"name":135},[256,257,258,259],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":98,"name":99,"color":50},{"assessments":78},{"slug":246},{"id":263,"slug":264,"title":265,"subtitle":50,"excerpt":266,"coverUrl":267,"locale":13,"readingMinutes":170,"publishedAt":268,"viewCount":269,"likeCount":19,"commentCount":19,"author":270,"vertical":271,"topic":272,"tags":273,"_count":278,"playground":279,"hasQuiz":17,"hasPlayground":17},"019ffa10-eeed-707d-9b50-7d83664c7a9a","css-trigonometric-functions-radial-layout","Stop Writing Math.cos() in a Resize Listener","CSS learned trigonometry. Here's the radial menu that used to need a resize listener — and doesn't anymore.","\u002Fmedia\u002Fcovers\u002Fcss-trigonometric-functions-radial-layout.png","2026-08-17T07:03:57.776Z",810,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":69,"name":135},[274,275,276,277],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":63,"name":67,"color":50},{"slug":75,"name":76,"color":50},{"assessments":78},{"slug":264},{"id":281,"slug":282,"title":283,"subtitle":50,"excerpt":284,"coverUrl":285,"locale":13,"readingMinutes":149,"publishedAt":286,"viewCount":287,"likeCount":19,"commentCount":19,"author":288,"vertical":289,"topic":290,"tags":291,"_count":298,"playground":299,"hasQuiz":17,"hasPlayground":17},"019ff73a-ed77-732e-a13f-8be6d6939332","calc-size-animate-to-auto","I Can Finally Delete My max-height: 9999px Animation Hack","CSS transitions have never been able to animate to height: auto, because auto isn't a number the engine can interpolate. calc-size() and interpolate-size finally give it real numbers — no JavaScript, no magic-number ceiling.","\u002Fmedia\u002Fcovers\u002Fcalc-size-animate-to-auto.png","2026-08-16T06:46:49.217Z",856,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":69,"name":135},[292,293,294,295],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":75,"name":76,"color":50},{"slug":296,"name":297,"color":50},"animation","Animation",{"assessments":78},{"slug":282},{"page":301,"perPage":302,"total":303,"totalPages":109},10,12,174,[305,306,308,310,312,314,316,320,324,326,328,332,333,337,338,339,343,347,350,353,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414],{"slug":72,"name":73,"color":50,"articles":303},{"slug":63,"name":67,"color":50,"articles":307},141,{"slug":75,"name":76,"color":50,"articles":309},96,{"slug":98,"name":99,"color":50,"articles":311},71,{"slug":69,"name":70,"color":50,"articles":313},51,{"slug":181,"name":182,"color":50,"articles":315},30,{"slug":317,"name":318,"color":50,"articles":319},"typescript","Typescript",25,{"slug":321,"name":322,"color":50,"articles":323},"react","React",20,{"slug":120,"name":121,"color":50,"articles":325},19,{"slug":160,"name":161,"color":50,"articles":327},18,{"slug":329,"name":330,"color":50,"articles":331},"node","Node",16,{"slug":196,"name":200,"color":50,"articles":302},{"slug":334,"name":335,"color":50,"articles":336},"nextjs","Nextjs",11,{"slug":92,"name":93,"color":50,"articles":301},{"slug":202,"name":203,"color":50,"articles":301},{"slug":340,"name":341,"color":50,"articles":342},"nestjs","Nestjs",9,{"slug":344,"name":345,"color":50,"articles":346},"nuxt","Nuxt",8,{"slug":348,"name":349,"color":50,"articles":346},"career","Career",{"slug":351,"name":352,"color":50,"articles":346},"discuss","Discuss",{"slug":354,"name":355,"color":50,"articles":356},"beginners","Beginners",7,{"slug":358,"name":359,"color":50,"articles":356},"productivity","Productivity",{"slug":361,"name":362,"color":50,"articles":149},"grammar","Grammar",{"slug":364,"name":365,"color":50,"articles":53},"security","Security",{"slug":367,"name":368,"color":50,"articles":170},"ssr","SSR",{"slug":370,"name":371,"color":50,"articles":170},"apis","Apis",{"slug":373,"name":374,"color":50,"articles":43},"ai","Ai",{"slug":376,"name":377,"color":50,"articles":43},"api","API",{"slug":379,"name":380,"color":50,"articles":43},"caching","Caching",{"slug":382,"name":383,"color":50,"articles":31},"async","Async",{"slug":385,"name":386,"color":50,"articles":31},"forms","Forms",{"slug":388,"name":389,"color":50,"articles":31},"dom","Dom",{"slug":391,"name":392,"color":50,"articles":31},"backend","Backend",{"slug":394,"name":395,"color":50,"articles":31},"english","English",{"slug":397,"name":398,"color":50,"articles":31},"verbs","Verbs",{"slug":400,"name":401,"color":50,"articles":31},"spanish","Spanish",{"slug":403,"name":404,"color":50,"articles":31},"a1","A1",{"slug":406,"name":407,"color":50,"articles":31},"a2","A2",{"slug":409,"name":410,"color":50,"articles":31},"tenses","Tenses",{"slug":412,"name":413,"color":50,"articles":31},"turkish","Turkish",{"slug":296,"name":297,"color":50,"articles":31},[416,417,418,419,420,421,422,423,424,425,426,427],{"slug":72,"name":73,"articles":303},{"slug":63,"name":67,"articles":307},{"slug":75,"name":76,"articles":309},{"slug":98,"name":99,"articles":311},{"slug":69,"name":70,"articles":313},{"slug":181,"name":182,"articles":315},{"slug":317,"name":318,"articles":319},{"slug":321,"name":322,"articles":323},{"slug":120,"name":121,"articles":325},{"slug":160,"name":161,"articles":327},{"slug":329,"name":330,"articles":331},{"slug":196,"name":200,"articles":302}]