Files
indotalent-webstore/blog/index.html
T
2026-07-21 10:12:35 +07:00

128 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/Blog">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog — .NET 10, Blazor & Vertical Slice Architecture | Indotalent</title>
<meta name="description" content="Technical articles on .NET 10, Blazor Server, Vertical Slice Architecture (VSA), MudBlazor, and enterprise source code. Real-world case studies for developers." />
<meta name="keywords" content="Vertical Slice Architecture, VSA, Blazor Server, .NET 10, MudBlazor, C#, enterprise source code, ASP.NET Core, MediatR" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/blog/" />
<link rel="alternate" hreflang="en" href="https://www.indotalent.com/blog/" />
<link rel="alternate" hreflang="x-default" href="https://www.indotalent.com/blog/" />
<meta property="og:title" content="Blog — .NET 10, Blazor & VSA | Indotalent" />
<meta property="og:description" content="Technical case studies and deep dives into Vertical Slice Architecture, Blazor Server, and .NET 10 development." />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.indotalent.com/blog/" }
]
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c'}},fontFamily:{sans:['Inter','system-ui','sans-serif']}}}}</script>
<style>
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.blog-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;transition:all 0.3s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(249,115,22,0.15);border-color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">Blog</span></li>
</ol>
</div>
</nav>
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a><div class="hidden lg:flex items-center gap-6"><a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-sm font-medium text-brand-600">Blog</a></div></div></div>
</nav>
<section class="pt-24 pb-10 lg:pt-32 lg:pb-12">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5"><span class="text-brand-700 text-xs font-medium tracking-wide">Technical Blog</span></div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">Blog: <span class="gradient-text">.NET 10, Blazor & VSA</span></h1>
<p class="text-gray-500 max-w-xl mx-auto">Production-proven patterns for building enterprise .NET applications. Deep dives, case studies, and practical guides.</p>
</div>
<div class="space-y-4">
<a href="vsa-introduction.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">June 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Introduction to Vertical Slice Architecture in .NET 10</h2>
<p class="text-sm text-gray-500">How VSA organizes code by business features, why it beats layered architecture, and a concrete .NET 10 Minimal API example.</p>
</a>
<a href="blazor-hosting-model.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">June 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server vs WebAssembly: Choosing the Right Hosting Model</h2>
<p class="text-sm text-gray-500">Compare Blazor Server and WASM for enterprise applications. Why Indotalent products use Blazor Server.</p>
</a>
<a href="vsa-eliminates-project-hell.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">How Vertical Slice Architecture Eliminates "Project Hell"</h2>
<p class="text-sm text-gray-500">From 15+ projects to a single monolith. How VSA keeps related code together and slashes compilation time.</p>
</a>
<a href="vsa-mediatr.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">May 2026 · 9 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Building Maintainable .NET Applications with MediatR and VSA</h2>
<p class="text-sm text-gray-500">How MediatR enables CQRS within VSA slices. Pipeline behaviors for validation, logging, and transactions.</p>
</a>
<a href="mudblazor-component-library.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-2.5 py-0.5">MudBlazor</span><span class="text-xs text-gray-400">April 2026 · 5 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">MudBlazor: The Ultimate Component Library for Blazor Server</h2>
<p class="text-sm text-gray-500">50+ Material Design components. Why MudBlazor is the de facto standard for Blazor enterprise apps.</p>
</a>
<a href="blazor-performance-optimization.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">April 2026 · 7 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Blazor Server Performance Optimization: Real-World Techniques</h2>
<p class="text-sm text-gray-500">ShouldRender, virtualization, no-tracking queries, and server-side pagination for Blazor Server apps.</p>
</a>
<a href="clean-architecture-to-vsa-migration.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">March 2026 · 10 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">From Clean Architecture to Vertical Slices: A Practical Migration Guide</h2>
<p class="text-sm text-gray-500">Step-by-step approach to migrate from layered architecture to VSA, one feature at a time.</p>
</a>
<a href="blazor-server-security-jwt.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200 rounded-full px-2.5 py-0.5">Blazor Server</span><span class="text-xs text-gray-400">March 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Securing Your Blazor Server Application with JWT and ASP.NET Core Identity</h2>
<p class="text-sm text-gray-500">Four-layer security: Identity, JWT, policy-based authorization, and SignalR protection.</p>
</a>
<a href="vsa-vs-layered-architecture.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 8 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Vertical Slice Architecture vs Traditional Layered Architecture: Side-by-Side Code</h2>
<p class="text-sm text-gray-500">7 files in 4 projects vs 1 file. A concrete code comparison of both approaches.</p>
</a>
<a href="real-world-vsa-net10.html" class="blog-card block">
<div class="flex items-center gap-2 mb-2"><span class="text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200 rounded-full px-2.5 py-0.5">VSA</span><span class="text-xs text-gray-400">Feb 2026 · 6 min read</span></div>
<h2 class="text-lg font-bold text-gray-900 mb-1">Real-World VSA: Shipping Production-Ready .NET 10 Apps with Indotalent</h2>
<p class="text-sm text-gray-500">How each Indotalent product is built. The stack, the architecture, and what you get for $21.</p>
</a>
</div>
<div class="mt-12 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50 border border-orange-200 rounded-2xl p-8 text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Ready to Apply These Patterns?</h2>
<p class="text-gray-600 mb-6">Every Indotalent product is built with VSA, Blazor Server, and MudBlazor. Complete source code &mdash; $21.</p>
<a href="../index.html#products" class="btn-primary text-base">Explore Products</a>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a><div class="flex flex-wrap gap-4 text-sm"><a href="../index.html#products" class="text-gray-500 hover:text-brand-500">Products</a><a href="../for-beginners.html" class="text-gray-500 hover:text-brand-500">Beginners</a><a href="../for-freelancers.html" class="text-gray-500 hover:text-brand-500">Freelancers</a><a href="index.html" class="text-brand-600 font-medium">Blog</a><a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a></div><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. <span class="text-brand-500">&hearts;</span> by go2ismail</p></div></div></footer>
</body>
</html>