[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"tag-frontend-5":44,"tags-all":295,"search-suggestions":394},[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":291},[46,80,100,122,142,160,180,200,218,236,255,273],{"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-6e7e-72cb-bd34-bc123056cfeb","set-methods-union-intersection","You've been doing Set math by hand. JavaScript finally shipped `.union()`, `.intersection()`, and friends.",null,"Set has always been missing its obvious operations. ES2025 adds `.union()`, `.intersection()`, `.difference()`, `.symmetricDifference()`, and three boolean predicates — native methods that used to require four lines of spread syntax each.","\u002Fmedia\u002Fcovers\u002Fset-methods-union-intersection.png",4,"2026-07-23T08:37:02.144Z",332,{"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},"typescript","Typescript",{"assessments":78},1,{"slug":48},{"id":81,"slug":82,"title":83,"subtitle":50,"excerpt":84,"coverUrl":85,"locale":13,"readingMinutes":53,"publishedAt":86,"viewCount":87,"likeCount":19,"commentCount":19,"author":88,"vertical":89,"topic":90,"tags":91,"_count":98,"playground":99,"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",293,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[92,93,94,95],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":96,"name":97,"color":50},"performance","Performance",{"assessments":78},{"slug":82},{"id":101,"slug":102,"title":103,"subtitle":50,"excerpt":104,"coverUrl":105,"locale":13,"readingMinutes":106,"publishedAt":107,"viewCount":108,"likeCount":19,"commentCount":19,"author":109,"vertical":110,"topic":111,"tags":114,"_count":120,"playground":121,"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",5,"2026-07-18T07:59:42.250Z",303,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":112,"name":113},"css","CSS",[115,117,118,119],{"slug":112,"name":116,"color":50},"Css",{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":63,"name":67,"color":50},{"assessments":78},{"slug":102},{"id":123,"slug":124,"title":125,"subtitle":50,"excerpt":126,"coverUrl":127,"locale":13,"readingMinutes":106,"publishedAt":128,"viewCount":129,"likeCount":19,"commentCount":19,"author":130,"vertical":131,"topic":132,"tags":133,"_count":140,"playground":141,"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",412,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":112,"name":113},[134,135,136,137],{"slug":112,"name":116,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":138,"name":139,"color":50},"html","Html",{"assessments":78},{"slug":124},{"id":143,"slug":144,"title":145,"subtitle":50,"excerpt":146,"coverUrl":147,"locale":13,"readingMinutes":53,"publishedAt":148,"viewCount":149,"likeCount":19,"commentCount":19,"author":150,"vertical":151,"topic":152,"tags":153,"_count":158,"playground":159,"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",499,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":112,"name":113},[154,155,156,157],{"slug":112,"name":116,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":138,"name":139,"color":50},{"assessments":78},{"slug":144},{"id":161,"slug":162,"title":163,"subtitle":50,"excerpt":164,"coverUrl":165,"locale":13,"readingMinutes":106,"publishedAt":166,"viewCount":167,"likeCount":19,"commentCount":19,"author":168,"vertical":169,"topic":170,"tags":171,"_count":178,"playground":179,"hasQuiz":17,"hasPlayground":17},"019fe660-32b6-757d-a975-3860df795f67","immutable-array-methods","Your `.sort()` is mutating state. JavaScript finally gave you the fix.","The classic array methods — sort, reverse, splice — mutate the original array, silently breaking React state updates and surprising anyone who forgot to spread first. ES2023 added four immutable counterparts: toSorted, toReversed, toSpliced, and with.","\u002Fmedia\u002Fcovers\u002Fimmutable-array-methods.png","2026-07-15T08:22:28.270Z",266,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[172,173,174,175],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":176,"name":177,"color":50},"react","React",{"assessments":78},{"slug":162},{"id":181,"slug":182,"title":183,"subtitle":50,"excerpt":184,"coverUrl":185,"locale":13,"readingMinutes":53,"publishedAt":186,"viewCount":187,"likeCount":19,"commentCount":19,"author":188,"vertical":189,"topic":190,"tags":191,"_count":198,"playground":199,"hasQuiz":17,"hasPlayground":17},"019fe660-2b2e-71fb-a0d1-fd1509765d3b","object-groupby-replace-reduce","You've been writing this `reduce` a hundred times. `Object.groupBy` does it in one.","Grouping an array by a key is one of the most common data transforms in frontend code. You've been wiring it by hand with `reduce` for years. `Object.groupBy` is the native version — no helper, no library, no ceremony.","\u002Fmedia\u002Fcovers\u002Fobject-groupby-replace-reduce.png","2026-07-14T08:16:56.309Z",241,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[192,193,194,195],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":196,"name":197,"color":50},"node","Node",{"assessments":78},{"slug":182},{"id":201,"slug":202,"title":203,"subtitle":50,"excerpt":204,"coverUrl":205,"locale":13,"readingMinutes":106,"publishedAt":206,"viewCount":207,"likeCount":19,"commentCount":19,"author":208,"vertical":209,"topic":210,"tags":211,"_count":216,"playground":217,"hasQuiz":17,"hasPlayground":17},"019fe660-1be2-74dd-aa56-0c8fd84204fd","promise-concurrency-all-settled-any-race","You reach for `Promise.all` for every concurrent request. Here's when to use the other three.","`Promise.all` fails the moment any one request fails. `allSettled`, `any`, and `race` each solve a different concurrency problem — dashboard partial results, CDN failover, and timeouts. Here's the taxonomy.","\u002Fmedia\u002Fcovers\u002Fpromise-concurrency-all-settled-any-race.png","2026-07-13T09:36:32.501Z",221,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[212,213,214,215],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":196,"name":197,"color":50},{"assessments":78},{"slug":202},{"id":219,"slug":220,"title":221,"subtitle":50,"excerpt":222,"coverUrl":223,"locale":13,"readingMinutes":53,"publishedAt":224,"viewCount":225,"likeCount":19,"commentCount":19,"author":226,"vertical":227,"topic":228,"tags":229,"_count":234,"playground":235,"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",254,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[230,231,232,233],{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":63,"name":67,"color":50},{"slug":112,"name":116,"color":50},{"assessments":78},{"slug":220},{"id":237,"slug":238,"title":239,"subtitle":50,"excerpt":240,"coverUrl":241,"locale":13,"readingMinutes":106,"publishedAt":242,"viewCount":243,"likeCount":19,"commentCount":19,"author":244,"vertical":245,"topic":246,"tags":248,"_count":253,"playground":254,"hasQuiz":17,"hasPlayground":17},"019fe660-0d25-72d6-8fd8-3cf3c3592e54","typescript-satisfies-operator","Your TypeScript config objects are losing type information. `satisfies` fixes it.","Type annotations widen your object types and erase the precise values TypeScript inferred. The `satisfies` operator validates against a type without changing what TypeScript keeps — you get the check without the widening.","\u002Fmedia\u002Fcovers\u002Ftypescript-satisfies-operator.png","2026-07-11T08:03:26.200Z",314,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":75,"name":247},"TypeScript",[249,250,251,252],{"slug":75,"name":76,"color":50},{"slug":69,"name":70,"color":50},{"slug":63,"name":67,"color":50},{"slug":72,"name":73,"color":50},{"assessments":78},{"slug":238},{"id":256,"slug":257,"title":258,"subtitle":50,"excerpt":259,"coverUrl":260,"locale":13,"readingMinutes":53,"publishedAt":261,"viewCount":262,"likeCount":19,"commentCount":19,"author":263,"vertical":264,"topic":265,"tags":266,"_count":271,"playground":272,"hasQuiz":17,"hasPlayground":17},"019fe660-0596-7433-9dc2-0fc620be2d0f","structuredclone-deep-clone","You've been deep-cloning objects with a JSON hack. `structuredClone` does it right.","JSON.parse(JSON.stringify(obj)) silently corrupts Dates, Maps, Sets, and undefined values. structuredClone is the native replacement — no library, no import, no surprises.","\u002Fmedia\u002Fcovers\u002Fstructuredclone-deep-clone.png","2026-07-10T09:43:33.966Z",216,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},[267,268,269,270],{"slug":63,"name":67,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":196,"name":197,"color":50},{"assessments":78},{"slug":257},{"id":274,"slug":275,"title":276,"subtitle":50,"excerpt":277,"coverUrl":278,"locale":13,"readingMinutes":53,"publishedAt":279,"viewCount":280,"likeCount":19,"commentCount":19,"author":281,"vertical":282,"topic":283,"tags":284,"_count":289,"playground":290,"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",198,{"id":57,"name":58,"username":59,"avatarUrl":50,"headline":60},{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":112,"name":113},[285,286,287,288],{"slug":112,"name":116,"color":50},{"slug":69,"name":70,"color":50},{"slug":72,"name":73,"color":50},{"slug":63,"name":67,"color":50},{"assessments":78},{"slug":275},{"page":106,"perPage":292,"total":293,"totalPages":294},12,72,6,[296,298,300,301,303,307,309,311,312,314,317,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391],{"slug":69,"name":70,"color":50,"articles":297},107,{"slug":63,"name":67,"color":50,"articles":299},89,{"slug":72,"name":73,"color":50,"articles":293},{"slug":112,"name":116,"color":50,"articles":302},36,{"slug":304,"name":305,"color":50,"articles":306},"tutorial","Tutorial",35,{"slug":75,"name":76,"color":50,"articles":308},15,{"slug":176,"name":177,"color":50,"articles":310},13,{"slug":96,"name":97,"color":50,"articles":292},{"slug":196,"name":197,"color":50,"articles":313},9,{"slug":315,"name":316,"color":50,"articles":313},"browser","Browser",{"slug":138,"name":139,"color":50,"articles":318},7,{"slug":320,"name":321,"color":50,"articles":318},"accessibility","Accessibility",{"slug":323,"name":324,"color":50,"articles":294},"programming","Programming",{"slug":326,"name":327,"color":50,"articles":294},"grammar","Grammar",{"slug":329,"name":330,"color":50,"articles":53},"nestjs","Nestjs",{"slug":332,"name":333,"color":50,"articles":53},"nextjs","Nextjs",{"slug":335,"name":336,"color":50,"articles":53},"apis","Apis",{"slug":338,"name":339,"color":50,"articles":43},"nuxt","Nuxt",{"slug":341,"name":342,"color":50,"articles":43},"ssr","SSR",{"slug":344,"name":345,"color":50,"articles":43},"ai","Ai",{"slug":347,"name":348,"color":50,"articles":43},"vue","Vue",{"slug":350,"name":351,"color":50,"articles":31},"security","Security",{"slug":353,"name":354,"color":50,"articles":31},"async","Async",{"slug":356,"name":357,"color":50,"articles":31},"forms","Forms",{"slug":359,"name":360,"color":50,"articles":31},"api","API",{"slug":362,"name":363,"color":50,"articles":31},"english","English",{"slug":365,"name":366,"color":50,"articles":31},"verbs","Verbs",{"slug":368,"name":369,"color":50,"articles":31},"spanish","Spanish",{"slug":371,"name":372,"color":50,"articles":31},"a1","A1",{"slug":374,"name":375,"color":50,"articles":31},"a2","A2",{"slug":377,"name":378,"color":50,"articles":31},"tenses","Tenses",{"slug":380,"name":381,"color":50,"articles":31},"turkish","Turkish",{"slug":383,"name":384,"color":50,"articles":31},"career","Career",{"slug":386,"name":387,"color":50,"articles":31},"beginners","Beginners",{"slug":389,"name":390,"color":50,"articles":31},"productivity","Productivity",{"slug":392,"name":393,"color":50,"articles":31},"discuss","Discuss",[395,396,397,398,399,400,401,402,403,404,405,406],{"slug":69,"name":70,"articles":297},{"slug":63,"name":67,"articles":299},{"slug":72,"name":73,"articles":293},{"slug":112,"name":116,"articles":302},{"slug":304,"name":305,"articles":306},{"slug":75,"name":76,"articles":308},{"slug":176,"name":177,"articles":310},{"slug":96,"name":97,"articles":292},{"slug":315,"name":316,"articles":313},{"slug":196,"name":197,"articles":313},{"slug":138,"name":139,"articles":318},{"slug":320,"name":321,"articles":318}]