1<!-- 2 ======================================== 3 B L O G // v1.0 4 ======================================== 5 Code crafted by Arcadio Quintero 6 Powered by Angular & Analog 7 8 ð Hello there, fellow developer! 9 Thanks for peeking under the hood. 10 Hope you find some inspiration here. 11 ======================================== 12 --><!DOCTYPE html><html lang="en"><head> 13 <meta charset="utf-8"> 14 <title>Blog | Arcadio Quintero Blog</title> 15 <base href="/"> 16 <meta name="viewport" content="width=device-width, initial-scale=1"> 17 18
18<script> 19 (function() { 20 const savedTheme = localStorage.getItem('theme'); 21 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; 22 const theme = savedTheme || (prefersDark ? 'dark' : 'light'); 23 24 if (theme === 'dark') { 25 document.documentElement.classList.add('dark'); 26 } 27 })(); 28 </script>
28 29 30 <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 31 <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 32 <link rel="shortcut icon" href="/favicon.ico"> 33 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 34 <meta name="apple-mobile-web-app-title" content="Blog"> 35 <link rel="manifest" href="/site.webmanifest"> 36 <link rel="alternate" type="application/rss+xml" title="Arcadio Quintero â English" href="/en/rss.xml"> 37 <link rel="alternate" type="application/rss+xml" title="Arcadio Quintero â Español" href="/es/rss.xml"> 38
38<script type="module" crossorigin="" src="/assets/v2/index-D6JMdUGq.js"></script>
38 39 <link rel="stylesheet" crossorigin="" href="/assets/v2/index-C4n9cQ6n.css"> 40 <style>[_nghost-ng-c1476278778] { 41 display: flex; 42 flex-direction: column; 43 min-height: 100vh; 44 } 45 46 main[_ngcontent-ng-c1476278778] { 47 flex: 1; 48 padding-top: 80px; 49 }</style><style>.scroll-to-top-btn[_ngcontent-ng-c13324069] { 50 background-color: var(--color-brand-accent); 51 color: var(--color-text-on-accent); 52 } 53 54 55 56 [_ngcontent-ng-c13324069]:root[class~="dark"] .scroll-to-top-btn[_ngcontent-ng-c13324069] { 57 color: var(--color-text-on-accent-dark); 58 } 59 60 .scroll-to-top-btn[_ngcontent-ng-c13324069]:hover { 61 background-color: var(--color-brand-accent-dark) !important; 62 } 63 64 [_ngcontent-ng-c13324069]:root[class~="dark"] .scroll-to-top-btn[_ngcontent-ng-c13324069]:hover { 65 color: var(--color-text-on-accent-dark); 66 } 67 68 .scroll-to-top-btn[_ngcontent-ng-c13324069]:focus-visible { 69 outline: 2px solid var(--color-brand-accent); 70 outline-offset: 2px; 71 }</style><meta name="description" content="Insights, tutorials, and thoughts on Angular, TypeScript, and modern web development by Arcadio Quintero."><meta name="author" content="Arcadio Quintero"><meta name="language" content="en"><meta property="og:title" content="Blog"><meta property="og:description" content="Insights, tutorials, and thoughts on Angular, TypeScript, and modern web development by Arcadio Quintero."><meta property="og:image" content="https://arcadioquintero.com/cdn-cgi/image/width=1200,format=jpeg,fit=scale-down/assets/profile.png"><meta property="og:type" content="website"><meta property="og:site_name" content="Arcadio Quintero Blog"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@oidacra"><meta name="twitter:title" content="Blog"><meta name="twitter:description" content="Insights, tutorials, and thoughts on Angular, TypeScript, and modern web development by Arcadio Quintero."><meta name="twitter:image" content="https://arcadioquintero.com/cdn-cgi/image/width=1200,format=jpeg,fit=scale-down/assets/profile.png"><meta name="keywords" content="Angular, TypeScript, Web Development, Tutorials, Frontend"><link rel="alternate" href="https://arcadioquintero.com/en/blog/" hreflang="en" data-seo=""><link rel="alternate" href="https://arcadioquintero.com/es/blog/" hreflang="es" data-seo=""><link rel="alternate" href="https://arcadioquintero.com/en/blog/" hreflang="x-default" data-seo=""><link rel="canonical" href="https://arcadioquintero.com/en/blog/" data-seo=""><meta property="og:url" content="https://arcadioquintero.com/en/blog/"></head> 72 <body><!--nghm--> 73 <app-root ng-version="21.0.2" _nghost-ng-c1476278778="" ngh="9" ng-server-context="ssr-analog"><app-header _ngcontent-ng-c1476278778="" class="fixed top-0 left-0 right-0 z-40 block transition-all duration-500" ngh="0"><header class="transition-all duration-500 bg-transparent border-transparent py-6"><nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between"><div class="flex items-center gap-2 z-50 relative"><a class="flex items-center gap-2 no-underline group" href="/en" jsaction="click:;"><img alt="Logo" class="w-8 h-8 sm:w-10 sm:h-10" src="assets/logo.svg"><div class="text-left flex flex-col"><span class="text-lg sm:text-xl font-bold text-brand-accent group-hover:text-brand-accent-dark transition-colors"> Arcadio Quintero </span><span class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium" style="letter-spacing: 0.245em;">Systems Engineer</span></div></a></div><nav class="hidden md:flex items-center gap-8"><div class="flex items-center gap-6 mr-4"><a routerlinkactive="text-brand-accent" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-brand-accent transition-colors no-underline" href="/en" jsaction="click:;"> Home </a><a routerlinkactive="text-brand-accent" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-brand-accent transition-colors no-u
73nderline text-brand-accent" href="/en/blog" jsaction="click:;"> Articles </a><a routerlinkactive="text-brand-accent" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-brand-accent transition-colors no-underline" href="/en/about" jsaction="click:;"> About </a></div><div class="h-5 w-px bg-slate-200 dark:bg-slate-700"></div><div class="flex items-center gap-4"><button class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-colors" aria-label="Switch to dark mode" jsaction="click:;"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-[18px] h-[18px]"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg><!----><!----></button><div class="flex items-center gap-1 text-xs font-bold text-slate-500 dark:text-slate-400"><button class="hover:text-slate-900 dark:hover:text-white hover:opacity-100 transition-all text-brand-accent" jsaction="click:;"> EN </button><span class="opacity-30">/</span><button class="hover:text-slate-900 dark:hover:text-white hover:opacity-100 transition-all opacity-50" jsaction="click:;"> ES </button></div></div></nav><div class="flex md:hidden items-center gap-4 z-50 relative"><button class="p-2 rounded-md text-brand-ink hover:text-brand-accent hover:bg-brand-muted transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Open menu" aria-expanded="false" jsaction="click:;"><!----><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg><!----></button></div></div></nav><div class="fixed top-0 left-0 w-screen h-screen z-40 md:hidden transition-transform duration-300 ease-in-out pt-24 px-6 translate-x-full" style="background-color: var(--color-brand-surface);"><div class="flex flex-col gap-6 text-center"><a routerlinkactive="text-brand-accent font-bold" class="text-2xl font-medium text-brand-ink hover:text-brand-accent transition-colors py-2 block" href="/en" jsaction="click:;"> Home </a><a routerlinkactive="text-brand-accent font-bold" class="text-2xl font-medium text-brand-ink hover:text-brand-accent transition-colors py-2 block text-brand-accent font-bold" href="/en/blog" jsaction="click:;"> Blog </a><a routerlinkactive="text-brand-accent font-bold" class="text-2xl font-medium text-brand-ink hover:text-brand-accent transition-colors py-2 block" href="/en/about" jsaction="click:;"> About </a><button class="flex items-center justify-center gap-2 text-xl font-medium text-brand-ink hover:text-brand-accent transition-colors py-2 min-h-[44px]" jsaction="click:;"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg><span>Dark Mode</span><!----><!----></button><div class="h-px bg-brand-border w-full my-2"></div><div class="flex items-center justify-center gap-6"><button class="text-xl text-brand-ink hover:text-brand-accent transition-colors py-2 min-h-[44px] min-w-[44px] font-bold text-brand-accent" jsaction="click:;"> English </button><button class="text-xl text-brand-ink hover:text-brand-accent transition-colors py-2 min-h-[44px] min-w-[44px]" jsaction="click:;"> Español </button></div></div></div></header></app-header><main _ngcontent-ng-c1476278778=""><router-outlet _ngcontent-ng-c1476278778=""></router-outlet><app-blog ngh="3"><div class="max-w-[1152px] mx-auto px-6 md:px-12 pt-20 pb-20"><div class="mb-16"><h1 class="text-5xl md:text-6xl font-bold text-brand-headline mb-4 mt-0"> Blog Posts </h1><p class="text-xl text-brand-ink leading-relaxed"> Insights, tutorials, and thoughts on Angular, TypeScript, and modern web development </p></div><div class="flex flex-col gap-6 md:gap-8"><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/angular-signal-forms-architecture-deep-dive" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Angular Signal Forms: What Changes and How to Use Them </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> What changes with Angular Signal Forms compared to Reactive Forms and how to use them: typed model, built-in validation, dynamic arrays, submission, and custom controls without ControlValueAccessor. </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="2026-03-03T00:00:00.000Z"> Mar 3, 2026 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> signals </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> typescript </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> forms </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Angular Signal Forms: What Changes and How to Use Them" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/signal-_forms_ug56nuug56nuug56.png" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/signal-_forms_ug56nuug56nuug56.png 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/signal-_forms_ug56nuug56nuug56.png 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/signal-_forms_ug56nuug56nuug56.png 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/ngrx-signalstore-events-plugin" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> NgRx SignalStore Events: The Power of Events in Your State </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Spaghetti code in your Store? The NgRx SignalStore Events plugin is here. Learn to orchestrate complex flows with the clarity of event-driven architecture. </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="2026-02-05T22:00:00.000Z"> Feb 5, 2026 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ngrx </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> signalstore </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> state-management </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="NgRx SignalStore Events: The Power of Events in Your State" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/pexels-ivan-s-4458200.jpg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/pexels-ivan-s-4458200.jpg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/pexels-ivan-s-4458200.jpg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/pexels-ivan-s-4458200.jpg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/angular-21-mcp-6-stable-tools-1-experimental-you-should-know" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Angular 21 MCP: 6 Stable Tools + 1 Experimental You Should Know </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Angular 21 brings MCP updates with 6 stable tools and 1 experimental. Learn what each tool does and how to configure them in your IDE. </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="2025-11-18T02:10:52.000Z"> Nov 18, 2025 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ai </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> mcp </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> development-tools </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Angular 21 MCP: 6 Stable Tools + 1 Experimental You Should Know" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/d94866e5c300ca751500995cc4616119.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/d94866e5c300ca751500995cc4616119.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/d94866e5c300ca751500995cc4616119.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/d94866e5c300ca751500995cc4616119.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/stop-writing-outdated-angular-code-mcp-setup-with-cursor-and-claude-code" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Stop Writing Outdated Angular Code: MCP Setup with Cursor & Claude Code </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Explore modern Angular setup with AI, streamline coding with IDE, and use best practices for efficient development </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="2025-11-04T02:35:24.559Z"> Nov 4, 2025 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ai-tools </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> mcp </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> development-tools </span><!----><!----></div></app-post-metadata><!
73----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Stop Writing Outdated Angular Code: MCP Setup with Cursor & Claude Code" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/9679c70bb2a264a7ccea43ad736070d8.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/9679c70bb2a264a7ccea43ad736070d8.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/9679c70bb2a264a7ccea43ad736070d8.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/9679c70bb2a264a7ccea43ad736070d8.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/achieving-type-safety-across-angular-and-nestjs-with-prismas-new-generator" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Achieving Type Safety Across Angular and NestJS with Prisma's New Generator </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Learn how to achieve type safety across Angular and NestJS using Prisma's new generator, creating reusable types shared across your monorepo </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="2025-09-25T04:00:00.000Z"> Sep 25, 2025 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> nestjs </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> prisma </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> typescript </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Achieving Type Safety Across Angular and NestJS with Prisma's New Generator" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/70334d51f968ddde5e37436686038dda.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/70334d51f968ddde5e37436686038dda.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/70334d51f968ddde5e37436686038dda.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/70334d51f968ddde5e37436686038dda.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/securing-your-angular-app-a-comprehe
73nsive-guide-to-keycloak-integration" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Securing Your Angular App: A Comprehensive Guide to Keycloak Integration </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Learn how to integrate Keycloak with your Angular app for secure authentication and authorization </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Wed Jun 12 2024 01:34:21 GMT+0000 (Coordinated Universal Time)"> Jun 12, 2024 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> keycloak </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> authentication </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> security </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Securing Your Angular App: A Comprehensive Guide to Keycloak Integration" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/1ef503d7e3b490b10f2bf5b226380083.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/1ef503d7e3b490b10f2bf5b226380083.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/1ef503d7e3b490b10f2bf5b226380083.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/1ef503d7e3b490b10f2bf5b226380083.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/how-the-unit-tests-transform-your-angulars-applications" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> How the Unit Tests transform your Angular's applications. </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Discover how unit testing transforms Angular applications, ensuring quality, early error detection, and safe refactoring </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Mon Mar 11 2024 04:21:09 GMT+0000 (Coordinated Universal Time)"> Mar 11, 2024 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> unit-testing </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> testing </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20">
73 best-practices </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="How the Unit Tests transform your Angular's applications." loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/setup-husky-and-commitlint-to-our-repo" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Setup Husky and Commitlint to our repo </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Learn how to use Husky and Commitlint to add structure and maintain order in your repository commits </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Sat Jan 27 2024 04:26:41 GMT+0000 (Coordinated Universal Time)"> Jan 27, 2024 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> git </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> husky </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> commitlint </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> code-quality </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Setup Husky and Commitlint to our repo" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/fed57fff6f926f5b3b09cca9ebad6b6f.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/fed57fff6f926f5b3b09cca9ebad6b6f.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/fed57fff6f926f5b3b09cca9ebad6b6f.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/fed57fff6f926f5b3b09cca9ebad6b6f.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/utilize-github-actions-for-angular-app-deployment-on-firebase-hosting" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Utilize Github Actions for Angular App Deployment on Firebase Hosting </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Learn how to automate Angular app deployment to Firebase Hosting using GitHub Actions, including PR previews and automated builds </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Thu Jan 25 2024 01:17:43 GMT+0000 (Coordinated Universal Time)"> Jan 25, 2024 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> github-actions </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> firebase-hosting </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ci-cd </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Utilize Github Actions for Angular App Deployment on Firebase Hosting" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/df423d99e2ff025c1b788d70c6854ae9.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/df423d99e2ff025c1b788d70c6854ae9.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/df423d99e2ff025c1b788d70c6854ae9.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/df423d99e2ff025c1b788d70c6854ae9.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/implementing-selectsignal-in-component-store-with-angulars-new-template-syntax" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> Implementing selectSignal in Component-Store with Angular's New Template Syntax </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Explore how to use selectSignal from component-store with Angular's advanced template syntax introduced in Angular 17 </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Sat Jan 06 2024 03:14:32 GMT+0000 (Coordinated Universal Time)"> Jan 6, 2024 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ngrx </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> component-store </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> signals </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="Implementing selectSignal in Component-Store with Angular's New Template Syntax" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/b8147ea0052780f9640579b348bca705.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/b8147ea0052780f9640579b348bca705.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/b8147ea0052780f9640579b348bca705.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/b8147ea0052780f9640579b348bca705.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/practical-guide-to-ngrx-componentstore" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> A Practical Guide to NgRx ComponentStore: Managing Local/Component States </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Master NgRx ComponentStore with this practical guide: learn basics, best practices, real-world examples, and enhance app consistency and performance </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Thu Dec 28 2023 21:18:57 GMT+0000 (Coordinated Universal Time)"> Dec 28, 2023 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> rxjs </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> ngrx </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> component-store </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="A Practical Guide to NgRx ComponentStore: Managing Local/Component States" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/cf5028f82c3e2853d70f6b9df8836e0e.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/cf5028f82c3e2853d70f6b9df8836e0e.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/cf5028f82c3e2853d70f6b9df8836e0e.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/cf5028f82c3e2853d70f6b9df8836e0e.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><app-post-card layout="horizontal" ngh="2"><article class="group relative pb-12 border-b border-brand-border/50 last:border-b-0"><a class="grid lg:grid-cols-[1fr_360px] gap-8 items-start no-underline transition-all duration-300" href="/en/blog/how-to-convert-chartmodule-to-spectator-for-easy-testing" jsaction="click:;"><div class="order-2 lg:order-1 flex flex-col"><h3 class="text-2xl md:text-3xl font-bold text-brand-headline mt-0 mb-3 group-hover:text-brand-accent transition-colors leading-tight"> How to Convert ChartModule to Spectator for Easy Testing </h3><p class="text-brand-ink text-base leading-relaxed line-clamp-3 mb-4 opacity-90"> Optimize ChartModule conversion to Spectator for easy Jest testing; overcome PrimeNG graphics module issues by mocking browser APIs or ChartModule </p><!----><app-post-metadata class="mb-0 block mt-auto" ngh="1"><div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-sm text-brand-ink/70"><span class="flex items-center gap-1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><time datetime="Fri Oct 06 2023 21:25:47 GMT+0000 (Coordinated Universal Time)"> Oct 6, 2023 </time></span><!----><!----><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> angular </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-
73muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> testing </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> jest </span><span class="px-2.5 py-0.5 text-xs font-medium bg-brand-muted text-brand-ink/80 rounded-full hover:bg-brand-accent/10 hover:text-brand-accent transition-colors border border-transparent hover:border-brand-accent/20"> spectator </span><!----><!----></div></app-post-metadata><!----></div><div class="order-1 lg:order-2"><div class="relative aspect-[16/10] overflow-hidden rounded-xl bg-brand-muted shadow-sm group-hover:shadow-md transition-all duration-300 transform group-hover:-translate-y-0.5"><img fill="" ngsrcset="360w, 540w, 720w" sizes="auto, (max-width: 1024px) 100vw, 35vw" class="object-cover transition-transform duration-500 group-hover:scale-105" alt="How to Convert ChartModule to Spectator for Easy Testing" loading="lazy" fetchpriority="auto" decoding="auto" ng-img="true" src="/cdn-cgi/image/format=auto,fit=scale-down/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg" srcset="/cdn-cgi/image/format=auto,fit=scale-down,width=360/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 360w, /cdn-cgi/image/format=auto,fit=scale-down,width=540/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 540w, /cdn-cgi/image/format=auto,fit=scale-down,width=720/assets/blog/4f507f172d7784577ca6d2969a331258.jpeg 720w" style="position: absolute; width: 100%; height: 100%; inset: 0;"></div><!----><!----></div></a></article><!----><!----></app-post-card><!----></div><!----></div></app-blog><!----></main><app-footer _ngcontent-ng-c1476278778="" ngh="7"><footer id="connect" class="pt-16 pb-8 mt-auto transition-colors duration-300 border-t border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex flex-col items-center text-center mb-12"><a class="flex items-center gap-3 mb-6 no-underline group scale-110 origin-center" href="/en" jsaction="click:;"><img alt="Logo" class="w-10 h-10" src="assets/logo.svg"><div class="text-left flex flex-col"><span class="text-xl font-bold text-brand-headline block leading-tight">Arcadio Quintero</span><span class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium" style="letter-spacing: 0.245em;">Systems Engineer</span></div></a><p class="text-slate-500 dark:text-slate-400 text-base leading-relaxed max-w-2xl mb-8"> Sharing practical knowledge on software architecture, Angular best practices, and the evolving landscape of web development. </p><div class="flex gap-6"><a href="https://github.com/oidacra" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="w-11 h-11 flex items-center justify-center rounded-full bg-slate-50 dark:bg-slate-800 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors no-underline" jsaction="click:;"><app-icon name="github" size="md" class="inline-flex items-center justify-center shrink-0 h-5 w-5" ngh="4"><!----><svg viewBox="0 0 24 24" fill="currentColor" class="w-full h-full"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"></path></svg><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----></app-icon></a><a href="https://www.linkedin.com/in/oidacra/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="w-11 h-11 flex items-center justify-center rounded-full bg-slate-50 dark:bg-slate-800 text-slate-500 hover:text-blue-600 dar
73k:hover:text-blue-400 transition-colors no-underline" jsaction="click:;"><app-icon name="linkedin" size="md" class="inline-flex items-center justify-center shrink-0 h-5 w-5" ngh="5"><!----><!----><svg viewBox="0 0 24 24" fill="currentColor" class="w-full h-full"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----></app-icon></a><a href="https://twitter.com/oidacra" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="w-11 h-11 flex items-center justify-center rounded-full bg-slate-50 dark:bg-slate-800 text-slate-500 hover:text-sky-500 dark:hover:text-sky-400 transition-colors no-underline" jsaction="click:;"><app-icon name="twitter" size="md" class="inline-flex items-center justify-center shrink-0 h-5 w-5" ngh="6"><svg viewBox="0 0 24 24" fill="currentColor" class="w-full h-full"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----></app-icon></a></div></div><div class="pt-8 flex flex-col md:flex-row justify-between items-center gap-4"><p class="text-sm text-slate-400 dark:text-slate-500"> © 2026 Arcadio Quintero. All rights reserved. </p><div class="flex items-center gap-2 text-sm text-slate-400 dark:text-slate-500"><span>Built with</span><a href="https://analogjs.org" target="_blank" rel="noopener noreferrer" class="font-medium text-slate-700 dark:text-slate-300 no-underline hover:text-blue-600 dark:hover:text-blue-400 transition-colors" jsaction="click:;">Analog</a><span>&</span><a href="https://angular.dev" target="_blank" rel="noopener noreferrer" class="font-medium text-slate-700 dark:text-slate-300 no-underline hover:text-blue-600 dark:hover:text-blue-400 transition-colors" jsaction="click:;">Angular</a></div></div></div></footer></app-footer><app-scroll-to-top _ngcontent-ng-c1476278778="" class="block" _nghost-ng-c13324069="" ngh="7"><button _ngcontent-ng-c13324069="" aria-label="Scroll to top" tabindex="0" class="fixed bottom-8 right-8 z-50 flex items-center justify-center w-12 h-12 rounded-full shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 scroll-to-top-btn cursor-pointer opacity-0 pointer-events-none translate-y-4" jsaction="click:;"><app-icon _ngcontent-ng-c13324069="" name="arrow-up" size="lg" class="inline-flex items-center justify-center shrink-0 h-6 w-6" ngh="8"><!----><!----><!----><!----><!----><svg viewBox="0 0 24 24" fill="currentColor" class="w-full h-full"><path d="M12 4l-8 8h5v8h6v-8h5z"></path></svg><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----></app-icon></button></app-scroll-to-top></app-root> 74
74<script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})(); 75</script>
75<script>window.__jsaction_bootstrap(document.body,"ng",["click"],[]);</script>
75 76 77
78<script id="ng-state" type="application/json">{"analog_1286400423":{"body":{"header":{"title":"Arcadio Quintero | Angular & Web Engineering","home":"Home","blog":"Blog","articles":"Articles","about":"About"},"home":{"hero":{"name":"Arcadio Quintero","title":"Google Developer Expert in Angular","headline":"Engineering","headlineAccent":"Scalable Web Apps","bio":"Building scalable web applications and sharing the knowledge along the way. Deep dives into Angular, modern web architecture, and integrating AI into development workflows.","cta":"Start Reading","experience":"Experience","experienceYears":"17+ Years"},"posts":{"title":"Latest Articles","subtitle":"Technical deep dives and practical guides.","viewAll":"View all articles"}},"footer":{"about":{"title":"About","description":"Sharing practical knowledge on software architecture, Angular best practices, and the evolving landscape of web development."},"quickLinks":{"title":"Quick Links","home":"Home","blog":"Blog","about":"About Me"},"connect":{"title":"Connect"},"copyright":"All rights reserved.","builtWith":"Built with"},"about":{"role":"Systems Engineer","location":"Ontario, Canada ð¨ð¦ ⢠From Panama ðµð¦","gde":"GDE in Angular","community":"NgPanama Co-organizer","badge":"About Me","headline":"Building software, and sharing what I learn along the way.","intro1":"I've spent over \u003Cstrong class=\"text-slate-900 dark:text-white\">17 years\u003C/strong> in the software industry, wearing almost every hat imaginable from writing the first line of code to designing scalable architectures for enterprise systems.","intro2":"My passion lies in the Angular ecosystem. As a \u003Ca href=\"https://g.dev/oidacra\" class=\"text-blue-600 dark:text-blue-400 underline decoration-2 underline-offset-2\">Google Developer Expert\u003C/a>, I bridge the gap between complex engineering concepts and practical, everyday development. Today I focus on building scalable web apps and weaving AI into how modern software gets built.","journey":{"title":"The Journey","present":{"title":"Senior Software Engineer @ dotCMS","date":"Feb 2022 - Present","description":"Planning and delivering new features across Analytics, SDK, React, and Next.js. Leading Angular migrations, architecture design, and integrating AI workflows into development processes."},"avenueCode":{"title":"Senior Angular Developer @ Avenue Code","date":"Feb 2021 - Feb 2022","description":"Augmented the Postclick Blocks Design System (BDS) team. Built core reusable blocks for layouts, developed new platform functionalities, and maintained packages consumed by Angular and NestJS. Worked on micro-frontend architecture."},"founder":{"title":"CEO / Developer @ Acciona Solutions","date":"Jul 2011 - Feb 2021","description":"Founded and scaled a tech agency in Panama. Led planning and execution of new projects, coordinated ongoing development, and managed business development. Defined system architectures, implemented CI/CD pipelines, administered Linux environments, and delivered enterprise solutions, mobile apps, and websites."},"beginning":{"title":"The Beginning","date":"2007","description":"Started with PHP, WordPress, and Joomla while studying Computer Systems Engineering."}},"whatIDo":{"title":"What I Do","leadership":{"title":"Technical Leadership","description":"Architecture design, code reviews, and mentoring teams to build solid engineering habits."},"stack":{"title":"Modern Stack","description":"Specialized in Angular, TypeScript, NestJS, and integrating LLMs into web apps."},"speaking":{"title":"Public Speaking","description":"Sharing knowledge at conferences and meetups across Latin America."},"consultancy":{"title":"Consultancy","description":"Helping companies solve complex technical challenges and scale their applications."}},"project":{"title":"Personal Project","tagline":"SaaS platform for CrossFit boxes","visit":"Visit rigdash.io","techLabel":"Tech Stack","description":"RigDash is a multi-gym SaaS platform for CrossFit boxes that I'm building on my own. One account, many gyms: it unifies class scheduling and multi-branch capacity, member reservations with strict credit-based waitlists, structured WOD programming, and performance tracking. Its two standout features are automated recurring billing with a booking gate (unpaid members simply can't reserve) and an AI weekly programming assistant that drafts a coherent week of WODs for the coach to review, copilot not autopilot. It's my playground for pushing modern Angular, a clean NestJS API, and AI-assisted workflows in a real product."},"beyond":{"title":"Beyond the Code","description":"When I'm not in front of a screen, I'm usually pushing limits at CrossFit, exploring new cultures through travel, or hunting for the best local food spots.","fitness":"Fitness","travel":"Travel","food":"Food"}},"blog":{"title":"Blog Posts","subtitle":"Insights, tutorials, and thoughts on Angular, TypeScript, and modern web development","emptyState":{"title":"No posts yet","message":"Check back soon for new content!"}},"post":{"tableOfContents":"Table of Contents","onThisPage":"On this page","shareTitle":"Share this article","backToAllPosts":"Back to all posts","backToBlog":"Back to blog","relatedPosts":{"title":"More Articles","subtitle":"Continue exploring related topics"},"readingTime":"min read"},"notFound":{"title":"Page not found","message":"Sorry, the page you're looking for doesn't exist or has been moved to another location.","homeButton":"Back to home","backButton":"Go back","helpfulLinks":"You might be interested in:","blogLink":"Blog","aboutLink":"About"},"common":{"readMore":"Read more","loading":"Loading..."}},"headers":{"headers":{},"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"/assets/i18n/en.json"},"__nghData__":[{"t":{"25":"t0","26":"t1","36":"t2","37":"t3","50":"t4","51":"t5"},"c":{"25":[{"i":"t0","r":1}],"26":[],"36":[],"37":[{"i":"t3","r":1}],"50":[{"i":"t4","r":2}],"51":[]}},{"t":{"1":"t34","2":"t35","3":"t36"},"c":{"1":[{"i":"t34","r":1}],"2":[],"3":[{"i":"t36","r":5,"t":{"1":"t37"},"c":{"1":[{"i":"t37","r":1,"x":4}]}}]}},{"n":{"1":"hf"},"t":{"1":"t28","2":"t29"},"c":{"1":[{"i":"t28","r":1,"t":{"5":"t39","6":"t40","8":"t41","9":"t42"},"c":{"5":[{"i":"t39","r":1}],"6":[{"i":"t40","r":1}],"8":[{"i":"t41","r":1}],"9":[]}}],"2":[]}},{"t":{"10":"t38","11":"t43"},"c":{"10":[{"i":"t38","r":1,"x":12}],"11":[]}},{"t":{"0":"t6","1":"t7","2":"t8","3":"t9","4":"t10","5":"t11","6":"t12","7":"t13","8":"t14","9":"t15","10":"t16","11":"t17","12":"t18","13":"t19","14":"t20","15":"t21","16":"t22","17":"t23","18":"t24","19":"t25","20":"t26"},"c":{"0":[],"1":[{"i":"t7","r":1}],"2":[],"3":[],"4":[],"5":[],"6":[],"7":[],"8":[],"9":[],"10":[],"11":[],"12":[],"13":[],"14":[],"15":[],"16":[],"17":[],"18":[],"19":[],"20":[]}},{"t":{"0":"t6","1":"t7","2":"t8","3":"t9","4":"t10","5":"t11","6":"t12","7":"t13","8":"t14","9":"t15","10":"t16","11":"t17","12":"t18","13":"t19","14":"t20","15":"t21","16":"t22","17":"t23","18":"t24","19":"t25","20":"t26"},"c":{"0":[],"1":[],"2":[{"i":"t8","r":1}],"3":[],"4":[],"5":[],"6":[],"7":[],"8":[],"9":[],"10":[],"11":[],"12":[],"13":[],"14":[],"15":[],"16":[],"17":[],"18":[],"19":[],"20":[]}},{"t":{"0":"t6","1":"t7","2":"t8","3":"t9","4":"t10","5":"t11","6":"t12","7":"t13","8":"t14","9":"t15","10":"t16","11":"t17","12":"t18","13":"t19","14":"t20","15":"t21","16":"t22","17":"t23","18":"t24","19":"t25","20":"t26"},"c":{"0":[{"i":"t6","r":1}],"1":[],"2":[],"3":[],"4":[],"5":[],"6":[],"7":[],"8":[],"9":[],"10":[],"11":[],"12":[],"13":[],"14":[],"15":[],"16":[],"17":[],"18":[],"19":[],"20":[]}},{},{"t":{"0":"t6","1":"t7","2":"t8","3":"t9","4":"t10","5":"t11","6":"t12","7":"t13","8":"t14","9":"t15","10":"t16","11":"t17","12":"t18","13":"t19","14":"t20","15":"t21","16":"t22","17":"t23","18":"t24","19":"t25","20":"t26"},"c":{"0":[],"1":[],"2":[],"3":[],"4":[],"5":[{"i":"t11","r":1}],"6":[],"7":[],"8":[],"9":[],"10":[],"11":[],"12":[],"13":[],"14":[],"15":[],"16":[],"17":[],"18":[],"19":[],"20":[]}},{"c":{"2":[{"i":"c1826628248","r":1}]}}]}</script>
78<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"7e61f936da6944fea7ca37058d3828a8","r":1,"spa":2}' crossorigin="anonymous"></script>
78 79</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.