[{"data":1,"prerenderedAt":789},["ShallowReactive",2],{"navigation":3,"/blog/ecmascript-2024-nears-finalization":142,"/blog/ecmascript-2024-nears-finalization-surround":786},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog/001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","/blog/understanding-javascript-and-its-quirks","blog/002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","/blog/introducing-vues-latest-experimental-vapor-mode","blog/003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","/blog/ecmascript-2024-nears-finalization","blog/004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","/blog/ui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog/005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","/blog/micro-frontend-architecture","blog/006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","/blog/pre-rendering-and-hydration-in-vuejs","blog/007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","/blog/satori-by-vercel-dynamic-image-generation-in-javascript","blog/008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","/blog/vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog/009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","/blog/moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog/010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","/blog/nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog/011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","/blog/a-tribute-to-asa-bain-thank-you-for-everything","blog/012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","/blog/migrating-javascript-to-typescript-in-aspnet-mvc-projects","blog/013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","/blog/modernizing-classic-aspnet-mvc-with-vuejs","blog/014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","/blog/which-ui-javascript-framework-should-you-use","blog/015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","/blog/vue-ai-integration-workflows-enhancing-developer-productivity","blog/016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","/blog/openapi-standards-scalar-integration-for-nodejs-apps","blog/017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","/blog/nuxt-317-data-fetching-improvements","blog/019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","/blog/subdomain-based-multi-tenancy-in-nuxt","blog/020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","/blog/type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog/021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","/blog/unit-testing-vue-applications-with-vitest-and-agentic-ai","blog/022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","/blog/hidden-features-lesser-known-typescript-gems","blog/023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt/Vercel Acquisition and Its Impact on NuxtHub Users","/blog/nuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog/024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","/blog/state-of-vue-nuxt-ecosystem-2025","blog/025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","/blog/feature-adoption-in-typescript-over-time","blog/026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","/blog/migrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog/027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","/blog/strategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog/028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","/blog/nuxt-4-and-the-evolving-full-stack-framework-landscape","blog/029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","/blog/bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog/030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","/blog/top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog/031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","/blog/strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog/032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","/blog/the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog/033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","/blog/understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog/034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":22,"author":144,"body":148,"date":779,"description":780,"extension":781,"image":782,"meta":783,"minRead":341,"navigation":344,"path":23,"seo":784,"stem":24,"__hash__":785},"blog/blog/004.ecmascript-2024-nears-finalization.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"/avatars/profile-image-1.png",{"type":149,"value":150,"toc":772},"minimark",[151,159,167,173,176,650,653,659,662,694,697,699,705,708,757,759,765,768],[152,153,155],"h2",{"id":154},"introduction",[156,157,158],"strong",{},"Introduction",[160,161,162,163,166],"p",{},"As the foundation of JavaScript, ECMAScript continues to evolve to meet the demands of modern application development. Each year, the ECMAScript specification introduces new features that enhance developer productivity, improve performance, and simplify common tasks. In 2024, ECMAScript is set to release its next major update, bringing powerful new capabilities to the JavaScript language. This report highlights the key features in ",[156,164,165],{},"ECMAScript 2024",", their impact, and what developers can expect as the finalization of this standard nears.",[152,168,170],{"id":169},"key-features-in-ecmascript-2024",[156,171,172],{},"Key Features in ECMAScript 2024",[160,174,175],{},"The following are the most anticipated features in the upcoming ECMAScript 2024 release:",[177,178,179,220,412,538],"ol",{},[180,181,182,185,186,190,191,194,195,198,201,211],"li",{},[156,183,184],{},"Array Grouping","\nThe new ",[187,188,189],"code",{},"groupBy"," and ",[187,192,193],{},"groupByToMap"," methods make it significantly easier to group array elements based on a specified criterion. This eliminates the need for custom logic when transforming array data.",[196,197],"br",{},[156,199,200],{},"Example:",[202,203,208],"pre",{"className":204,"code":206,"language":207},[205],"language-text","const data = [\n  { name: 'Alice', category: 'A' },\n  { name: 'Bob', category: 'B' },\n  { name: 'Charlie', category: 'A' }\n];\n\nconst grouped = Object.groupBy(data, item => item.category);\nconsole.log(grouped);\n// Output:\n// {\n//   A: [ { name: 'Alice', category: 'A' }, { name: 'Charlie', category: 'A' } ],\n//   B: [ { name: 'Bob', category: 'B' } ]\n// }\n","text",[187,209,206],{"__ignoreMap":210},"",[212,213,214],"ul",{},[180,215,216,219],{},[156,217,218],{},"Why It Matters",": This feature simplifies data manipulation tasks that were previously verbose and error-prone.",[180,221,222,225,226,229,230,234,235,237,239,245,247,248,250,251,254,255,257,259,405],{},[156,223,224],{},"Symbols as WeakMap Keys","\nTo understand this feature, it's helpful to first understand ",[156,227,228],{},"symbols"," in JavaScript. A ",[231,232,233],"em",{},"symbol"," is a unique, immutable data type that is often used as an object key. Unlike strings, every symbol is completely unique, even if it has the same description.",[196,236],{},[156,238,200],{},[202,240,243],{"className":241,"code":242,"language":207},[205],"const sym1 = Symbol('key');\nconst sym2 = Symbol('key');\nconsole.log(sym1 === sym2); // false (they are unique)\n",[187,244,242],{"__ignoreMap":210},[196,246],{},"Symbols are often used to avoid key collisions in objects, making them useful for scenarios where unique keys are essential.",[196,249],{},"WeakMaps allow objects to be used as keys without preventing garbage collection, meaning objects can be removed from memory when no longer needed. With ECMAScript 2024, ",[156,252,253],{},"symbols can now serve as keys in WeakMaps",", combining the uniqueness of symbols with the memory efficiency of WeakMaps.",[196,256],{},[156,258,200],{},[202,260,264],{"className":261,"code":262,"language":263,"meta":210,"style":210},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const mySymbol = Symbol('myKey');\nconst weakMap = new WeakMap();\nconst obj = {};\n\nweakMap.set(mySymbol, 'value');\nconsole.log(weakMap.has(mySymbol)); // true\n","jsx",[187,265,266,305,326,339,346,376],{"__ignoreMap":210},[267,268,271,275,279,283,287,290,293,297,299,302],"span",{"class":269,"line":270},"line",1,[267,272,274],{"class":273},"spNyl","const",[267,276,278],{"class":277},"sTEyZ"," mySymbol ",[267,280,282],{"class":281},"sMK4o","=",[267,284,286],{"class":285},"s2Zo4"," Symbol",[267,288,289],{"class":277},"(",[267,291,292],{"class":281},"'",[267,294,296],{"class":295},"sfazB","myKey",[267,298,292],{"class":281},[267,300,301],{"class":277},")",[267,303,304],{"class":281},";\n",[267,306,308,310,313,315,318,321,324],{"class":269,"line":307},2,[267,309,274],{"class":273},[267,311,312],{"class":277}," weakMap ",[267,314,282],{"class":281},[267,316,317],{"class":281}," new",[267,319,320],{"class":285}," WeakMap",[267,322,323],{"class":277},"()",[267,325,304],{"class":281},[267,327,329,331,334,336],{"class":269,"line":328},3,[267,330,274],{"class":273},[267,332,333],{"class":277}," obj ",[267,335,282],{"class":281},[267,337,338],{"class":281}," {};\n",[267,340,342],{"class":269,"line":341},4,[267,343,345],{"emptyLinePlaceholder":344},true,"\n",[267,347,349,352,355,358,361,364,367,370,372,374],{"class":269,"line":348},5,[267,350,351],{"class":277},"weakMap",[267,353,354],{"class":281},".",[267,356,357],{"class":285},"set",[267,359,360],{"class":277},"(mySymbol",[267,362,363],{"class":281},",",[267,365,366],{"class":281}," '",[267,368,369],{"class":295},"value",[267,371,292],{"class":281},[267,373,301],{"class":277},[267,375,304],{"class":281},[267,377,379,382,384,387,390,392,395,398,401],{"class":269,"line":378},6,[267,380,381],{"class":277},"console",[267,383,354],{"class":281},[267,385,386],{"class":285},"log",[267,388,389],{"class":277},"(weakMap",[267,391,354],{"class":281},[267,393,394],{"class":285},"has",[267,396,397],{"class":277},"(mySymbol))",[267,399,400],{"class":281},";",[267,402,404],{"class":403},"sHwdD"," // true\n",[212,406,407],{},[180,408,409,411],{},[156,410,218],{},": Previously, WeakMaps could only use objects as keys. Allowing symbols as keys makes WeakMaps more versatile, particularly in cases where symbols are preferred for their uniqueness and immutability.",[180,413,414,420,421,423,424,426,428,528],{},[156,415,416,417],{},"Improved ",[187,418,419],{},"Object.hasOwn","\nThe ",[187,422,419],{}," method, introduced in ECMAScript 2022, simplifies property checks. ECMAScript 2024 refines its behavior for better ergonomics and performance when checking an object's own properties.",[196,425],{},[156,427,200],{},[202,429,431],{"className":261,"code":430,"language":263,"meta":210,"style":210},"const obj = { name: 'Alice' };\nconsole.log(Object.hasOwn(obj, 'name')); // true\nconsole.log(Object.hasOwn(obj, 'age'));  // false\n",[187,432,433,461,496],{"__ignoreMap":210},[267,434,435,437,439,441,444,448,451,453,456,458],{"class":269,"line":270},[267,436,274],{"class":273},[267,438,333],{"class":277},[267,440,282],{"class":281},[267,442,443],{"class":281}," {",[267,445,447],{"class":446},"swJcz"," name",[267,449,450],{"class":281},":",[267,452,366],{"class":281},[267,454,455],{"class":295},"Alice",[267,457,292],{"class":281},[267,459,460],{"class":281}," };\n",[267,462,463,465,467,469,472,474,477,480,482,484,487,489,492,494],{"class":269,"line":307},[267,464,381],{"class":277},[267,466,354],{"class":281},[267,468,386],{"class":285},[267,470,471],{"class":277},"(Object",[267,473,354],{"class":281},[267,475,476],{"class":285},"hasOwn",[267,478,479],{"class":277},"(obj",[267,481,363],{"class":281},[267,483,366],{"class":281},[267,485,486],{"class":295},"name",[267,488,292],{"class":281},[267,490,491],{"class":277},"))",[267,493,400],{"class":281},[267,495,404],{"class":403},[267,497,498,500,502,504,506,508,510,512,514,516,519,521,523,525],{"class":269,"line":328},[267,499,381],{"class":277},[267,501,354],{"class":281},[267,503,386],{"class":285},[267,505,471],{"class":277},[267,507,354],{"class":281},[267,509,476],{"class":285},[267,511,479],{"class":277},[267,513,363],{"class":281},[267,515,366],{"class":281},[267,517,518],{"class":295},"age",[267,520,292],{"class":281},[267,522,491],{"class":277},[267,524,400],{"class":281},[267,526,527],{"class":403},"  // false\n",[212,529,530],{},[180,531,532,534,535,354],{},[156,533,218],{},": This provides a clearer and more reliable way to check for direct properties compared to ",[187,536,537],{},"hasOwnProperty",[180,539,540,420,543,546,547,549,551,643],{},[156,541,542],{},"Extended Error Cause",[187,544,545],{},"cause"," property in error objects enables developers to provide additional context when throwing errors. ECMAScript 2024 extends this capability, improving debugging and error handling.",[196,548],{},[156,550,200],{},[202,552,554],{"className":261,"code":553,"language":263,"meta":210,"style":210},"try {\n  throw new Error('Failed to connect to database');\n} catch (err) {\n  throw new Error('Application failed', { cause: err });\n}\n",[187,555,556,565,588,602,638],{"__ignoreMap":210},[267,557,558,562],{"class":269,"line":270},[267,559,561],{"class":560},"s7zQu","try",[267,563,564],{"class":281}," {\n",[267,566,567,570,572,575,577,579,582,584,586],{"class":269,"line":307},[267,568,569],{"class":560},"  throw",[267,571,317],{"class":281},[267,573,574],{"class":285}," Error",[267,576,289],{"class":446},[267,578,292],{"class":281},[267,580,581],{"class":295},"Failed to connect to database",[267,583,292],{"class":281},[267,585,301],{"class":446},[267,587,304],{"class":281},[267,589,590,593,596,599],{"class":269,"line":328},[267,591,592],{"class":281},"}",[267,594,595],{"class":560}," catch",[267,597,598],{"class":277}," (err) ",[267,600,601],{"class":281},"{\n",[267,603,604,606,608,610,612,614,617,619,621,623,626,628,631,634,636],{"class":269,"line":341},[267,605,569],{"class":560},[267,607,317],{"class":281},[267,609,574],{"class":285},[267,611,289],{"class":446},[267,613,292],{"class":281},[267,615,616],{"class":295},"Application failed",[267,618,292],{"class":281},[267,620,363],{"class":281},[267,622,443],{"class":281},[267,624,625],{"class":446}," cause",[267,627,450],{"class":281},[267,629,630],{"class":277}," err",[267,632,633],{"class":281}," }",[267,635,301],{"class":446},[267,637,304],{"class":281},[267,639,640],{"class":269,"line":348},[267,641,642],{"class":281},"}\n",[212,644,645],{},[180,646,647,649],{},[156,648,218],{},": This improves error traceability, particularly in large codebases and complex workflows.",[651,652],"hr",{},[152,654,656],{"id":655},"impact-of-ecmascript-2024",[156,657,658],{},"Impact of ECMAScript 2024",[160,660,661],{},"The new features in ECMAScript 2024 are designed to:",[177,663,664,670,679,688],{},[180,665,666,669],{},[156,667,668],{},"Simplify Code",": Features like array grouping reduce boilerplate code and improve readability, making JavaScript cleaner and easier to maintain.",[180,671,672,675,676,678],{},[156,673,674],{},"Enhance Performance",": Refinements like ",[187,677,419],{}," and the extended use of symbols improve the overall efficiency of JavaScript operations.",[180,680,681,684,685,687],{},[156,682,683],{},"Improve Developer Experience",": Enhanced error handling with the ",[187,686,545],{}," property provides better debugging insights, saving developers time during troubleshooting.",[180,689,690,693],{},[156,691,692],{},"Strengthen Modern Applications",": Features like WeakMap symbol support align with advanced use cases in memory-sensitive and modular application designs.",[160,695,696],{},"As developers adopt ECMAScript 2024, they can expect a more streamlined and powerful experience when working with JavaScript, further cementing its role as the go-to language for web development.",[651,698],{},[152,700,702],{"id":701},"adopting-ecmascript-2024",[156,703,704],{},"Adopting ECMAScript 2024",[160,706,707],{},"To leverage the features in ECMAScript 2024, developers should:",[212,709,710,728,746],{},[180,711,712,713,716,717,720,721,190,724,727],{},"Stay up-to-date with modern runtimes like ",[156,714,715],{},"Node.js",", ",[156,718,719],{},"Deno",", and browser engines such as ",[156,722,723],{},"V8",[156,725,726],{},"SpiderMonkey",", which are expected to integrate the updates soon after finalization.",[180,729,730,731,734,735,738,739,190,742,745],{},"Use ",[187,732,733],{},"transpilers"," like ",[156,736,737],{},"Babel"," or tools like ",[156,740,741],{},"esbuild",[156,743,744],{},"SWC"," to enable backward compatibility for environments that do not yet support ECMAScript 2024 natively.",[180,747,748,749,756],{},"Explore updated documentation and proposals on the ",[750,751,755],"a",{"href":752,"rel":753},"https://github.com/tc39",[754],"nofollow","TC39 GitHub repository"," to stay informed about final changes.",[651,758],{},[152,760,762],{"id":761},"conclusion",[156,763,764],{},"Conclusion",[160,766,767],{},"ECMAScript 2024 introduces features that significantly enhance the JavaScript language, making it more powerful, efficient, and developer-friendly. From simplified array grouping to improved error handling, these updates address common challenges and provide tools that streamline modern application development. As finalization nears, developers can look forward to a more productive and performant JavaScript ecosystem, reaffirming JavaScript's position as the backbone of the web.",[769,770,771],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":210,"searchDepth":307,"depth":307,"links":773},[774,775,776,777,778],{"id":154,"depth":307,"text":158},{"id":169,"depth":307,"text":172},{"id":655,"depth":307,"text":658},{"id":701,"depth":307,"text":704},{"id":761,"depth":307,"text":764},"2024-12-01T00:00:00.000Z","*By Sean Erick C. Ramones, Vue SME | JavaScript/TypeScript SME*","md","https://images.pexels.com/photos/4955393/pexels-photo-4955393.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},{"title":22,"description":780},"OWeqIORuJOAc5uTm6v8B8fySnzXn5e03LfeSEX2QBiE",[787,788],{"title":18,"path":19,"stem":20,"description":780,"children":-1},{"title":26,"path":27,"stem":28,"description":780,"children":-1},1773209887509]