Frontend on AI VOID

Setting Up Your Kanbots Workshop: Tauri v2 and Svelte 5

Sun, 24 May 2026 00:00:00 +0000

Welcome to the Kanbots project, where we’ll build an innovative desktop Kanban application designed to host and orchestrate multiple AI agents. This application will empower you to automate development tasks, from code generation to review, leveraging isolated Git worktrees for each agent’s context.

In this first chapter, we lay the groundwork for Kanbots. We’ll set up the core cross-platform desktop application using Tauri v2 for the backend and Rust, paired with a modern Svelte 5 frontend. By the end of this milestone, you will have a functional desktop application window displaying a basic Svelte interface, ready for further development. This foundational setup is crucial for enabling the local-first, privacy-conscious AI agent interactions that will define Kanbots.

Chapter 1: React Core Principles & Mental Models

Sat, 14 Feb 2026 00:00:00 +0000

Chapter 1: React Core Principles & Mental Models

Welcome, aspiring system architect! In this journey, we’ll unravel the complexities of building robust, scalable, and maintainable React applications. But before we tackle advanced rendering strategies or microfrontends, we need to ensure our foundation is rock solid. That foundation is a deep understanding of React’s core principles and the mental models it encourages.

This chapter will guide you through the absolute essentials: React’s declarative nature, its component-based architecture, the magic of JSX, how data flows with props and state, and the ingenious Virtual DOM. We’ll also get hands-on with modern React hooks. Mastering these concepts isn’t just about syntax; it’s about learning how to think in React, which is crucial for designing any large-scale system.

Chapter 1: Getting Started: Your First Typed Program

Fri, 05 Dec 2025 00:00:00 +0000

Chapter 1: Getting Started: Your First Typed Program

Welcome, future TypeScript wizard! Are you ready to embark on an exciting journey from zero to mastery in TypeScript? We’re going to build a solid foundation, starting right here with the absolute basics, and gradually work our way up to advanced patterns and production-ready best practices. No prior TypeScript experience? No problem! Just bring your curiosity and a basic understanding of JavaScript.

The Docker Universe - Containers, Images, and You

Thu, 04 Dec 2025 00:00:00 +0000

Welcome to the Docker Universe!

Hey there, future Docker master! 👋 Get ready to embark on an exciting journey into the world of Docker, a technology that has revolutionized how we develop, ship, and run applications. If you’ve ever heard developers say, “But it works on my machine!”, you’re about to discover the magic solution to that age-old problem.

In this very first chapter, we’re going to demystify Docker by understanding its fundamental building blocks: Containers and Images. We’ll explore what they are, why they’re so powerful, and how they work together to create consistent, isolated environments for your applications. By the end of this chapter, you’ll have Docker installed and running your very first container, building a solid foundation for everything that follows!

Chapter 2: Component Design & State Management Foundations

Sat, 14 Feb 2026 00:00:00 +0000

Introduction to React’s Building Blocks

Welcome to Chapter 2! In our journey to master modern React system design, understanding the core building blocks is paramount. Just as a master builder needs to know how to lay bricks and mix mortar, a React architect must deeply grasp how components work, how they communicate, and how they manage their internal state. This chapter lays that crucial foundation.

We’ll dive into the heart of React: components. You’ll learn what they are, why they’re so powerful for building user interfaces, and how to effectively manage the data that makes them dynamic and interactive. We’ll explore the fundamental concepts of props and state, and then unlock the magic of React Hooks, which are the modern way to bring state and side effects into functional components. By the end of this chapter, you’ll be confidently designing and implementing simple, yet robust, React components.

Chapter 7: Implementing Partial Hydration for Interactive Components

Mon, 02 Mar 2026 00:00:00 +0000

Chapter 7: Implementing Partial Hydration for Interactive Components

Welcome to Chapter 7! In the previous chapters, we built a robust foundation for our Static Site Generator (SSG), capable of parsing Markdown, extracting front matter, and rendering static HTML using Tera templates, including custom components. While this provides excellent performance for static content, many modern web applications require interactivity. This is where partial hydration comes into play.

In this chapter, we will extend our SSG to support interactive components that are initially rendered as static HTML on the server and then “hydrated” on the client-side with JavaScript and WebAssembly (WASM) to become interactive. This approach, often called “Island Architecture” (popularized by frameworks like Astro), offers the best of both worlds: fast initial page loads for static content and dynamic interactivity where needed, without shipping heavy JavaScript bundles for the entire page. We will use the Yew framework for our client-side WebAssembly components, leveraging Rust’s power end-to-end.

Chapter 9: Performance SLO-Driven UI Design & Web Vitals

Sat, 14 Feb 2026 00:00:00 +0000

Chapter 9: Performance SLO-Driven UI Design & Web Vitals

Welcome back, future Senior React Architects! In our journey through modern React system design, we’ve explored complex topics like rendering strategies, microfrontends, and state management. But what’s the point of a beautifully architected system if it feels sluggish to your users? This chapter brings us to a critical aspect of any successful application: performance.

Here, we’ll dive deep into Performance Service Level Objectives (SLOs) and Google’s Core Web Vitals, learning how to define, measure, and optimize your React applications to deliver lightning-fast and delightful user experiences. We’ll uncover why these metrics are not just technical benchmarks but crucial business drivers, explore real-world scenarios where performance failures led to significant impact, and equip you with the practical tools and mental models to build truly high-performing UIs. Get ready to transform your understanding of “fast”!

Chapter 11: Feature Flagging & A/B Testing Architectures

Sat, 14 Feb 2026 00:00:00 +0000

Chapter 11: Feature Flagging & A/B Testing Architectures

Welcome to Chapter 11! In the previous chapters, we’ve built a solid foundation for designing robust and scalable React applications, focusing on topics like rendering strategies, microfrontends, and state management. Now, it’s time to dive into a crucial aspect of modern software delivery: Feature Flagging and A/B Testing.

Imagine being able to deploy new features to production without immediately making them visible to all users. Or, imagine running experiments to compare different UI designs and letting data, not just intuition, guide your decisions. This is the power of feature flags and A/B testing. By the end of this chapter, you’ll understand how to architect your React applications to support these powerful techniques, enabling safer deployments, faster iteration, and a truly data-driven approach to product development. We’ll explore the core concepts, walk through a practical implementation, and discuss the architectural implications for your React system.

Chapter 13: CI/CD Basics with GitHub Actions

Tue, 23 Dec 2025 00:00:00 +0000

Introduction: Automating Your Development Journey

Welcome to Chapter 13! So far, we’ve mastered Git for local version control, learned how to collaborate effectively with GitHub, navigated complex branching strategies, and resolved tricky merge conflicts. You’re becoming a Git and GitHub pro! But what if we could make our development process even smoother, faster, and more reliable?

That’s where CI/CD comes in. CI/CD stands for Continuous Integration and Continuous Delivery (or Continuous Deployment), and it’s a set of practices that automate much of the software development lifecycle. Imagine pushing your code, and automatically, it’s tested, checked for errors, and even deployed without you lifting another finger. Sounds magical, right?

Chapter 14: Project: Developing a Simple Multiplayer Game

Sat, 14 Mar 2026 00:00:00 +0000

Introduction: Bringing Games to Life with SpaceTimeDB

Welcome to Chapter 14! In this exciting chapter, we’re going to put all our SpaceTimeDB knowledge to the test by building a simple, yet engaging, real-time multiplayer game. Imagine a canvas where multiple players can move their unique cursors or avatars around, and everyone sees everyone else’s movements instantly. That’s the magic we’re aiming for!

This project is more than just a game; it’s a practical demonstration of how SpaceTimeDB’s core strengths—its unified database and backend logic, real-time synchronization, and deterministic reducers—make it an ideal platform for collaborative and interactive applications. By the end of this chapter, you’ll have a clear understanding of how to manage shared game state, process player actions, and update the game world in real-time across all connected clients.

Chapter 15: Deployment and Distribution of Puter.js Apps

Mon, 12 Jan 2026 00:00:00 +0000

Introduction

Welcome to Chapter 15! You’ve come a long way, learning to build powerful applications within the Puter.js ecosystem. But what good is a fantastic application if no one can use it? This chapter is all about taking your creation from your local development environment and making it available to the world – or at least, to your target users.

Traditional web application deployment can be a complex beast, involving servers, databases, load balancers, and intricate CI/CD pipelines. Puter.js, with its “Internet Operating System” philosophy, aims to abstract much of this complexity away, offering a uniquely streamlined approach to deployment and distribution. Here, your apps aren’t just hosted; they become integral parts of a larger digital environment.

Chapter 16: Real-World Project: Building a Collaborative Application

Tue, 23 Dec 2025 00:00:00 +0000

Chapter 16: Real-World Project: Building a Collaborative Application

Welcome to Chapter 16! So far, we’ve explored the fundamental building blocks of Git, delved into its internals, mastered branching, and understood how to interact with remote repositories like GitHub. Now, it’s time to put all that knowledge to the ultimate test: building a collaborative application in a simulated team environment. This chapter is where theory meets practice, allowing you to experience the full power of Git and GitHub in a real-world scenario.

Vite vs Webpack: Complete Comparison 2026

Fri, 29 May 2026 00:00:00 +0000

The frontend development landscape is in constant flux, with new tools emerging to address the evolving needs of developers and applications. Choosing the right build tool is a foundational decision, impacting everything from developer productivity and application performance to CI/CD costs. In 2026, the debate between Vite and Webpack remains central to this choice.

This guide provides an objective, side-by-side comparison of Vite and Webpack, analyzing their core differences, performance metrics, configuration paradigms, and ecosystem strengths. Our goal is to equip you with the insights needed to make an informed decision for your projects, whether you’re starting fresh or evaluating a migration.

SSG vs. LLM: Unpacking Scalability in 2026 and Beyond

Sun, 05 Apr 2026 00:00:00 +0000

SSG vs. LLM: Unpacking Scalability in 2026 and Beyond

In the rapidly evolving digital landscape of 2026, developers are constantly evaluating technologies to build robust, high-performing, and cost-effective applications. Two paradigms, Static Site Generators (SSGs) and Large Language Models (LLMs), represent distinct approaches to content delivery and dynamic functionality. While LLMs have captured significant attention for their generative capabilities, it’s crucial to understand that for certain critical use cases, SSGs still hold a significant, often overlooked, advantage in terms of raw scalability.

How CORS Works: Deep Dive into Internals

Wed, 07 Jan 2026 00:00:00 +0000

Introduction

Cross-Origin Resource Sharing (CORS) is a crucial security mechanism implemented in web browsers that governs how web pages in one “origin” can request resources from another “origin.” In simpler terms, it’s a gatekeeper that decides whether your browser can load data from a different domain, protocol, or port than the one the current web page originated from. Without CORS, the rigid Same-Origin Policy would severely limit the capabilities of modern web applications, preventing them from interacting with APIs hosted on separate servers, integrating third-party services, or distributing content across various subdomains.

Angular interview from angular v13 to angular v21, covers all things from system design, design patterns to small things like component life cycle, etc (get latest info as of dec 2025) Interview Preparation - Complete Guide

Tue, 23 Dec 2025 00:00:00 +0000

Prepare for your next Angular interview with this comprehensive guide, covering everything from core concepts to advanced topics like system design and design patterns. This resource provides expert insights, practice questions, and mock scenarios to help you master Angular v13-v21 and confidently ace your interview. Equip yourself with the knowledge and strategies needed to excel and land your dream job.

Learn Redis LangCache: Semantic Caching for AI Applications

Sat, 08 Nov 2025 00:00:00 +0000

This learning document is your complete guide to Redis LangCache, a revolutionary semantic caching service designed to supercharge your AI applications. Whether you’re building chatbots, RAG systems, or complex AI agents, LangCache helps you reduce costly LLM calls and deliver lightning-fast responses.

We’ll start with the basics, setting up your environment, understanding the core concepts of semantic caching, and then dive into practical examples using both Node.js and Python. Through detailed explanations, hands-on code, and engaging exercises, you’ll gain the skills to effectively integrate and optimize LangCache in your own projects. Get ready to build more efficient, cost-effective, and responsive AI experiences!

Nx Workspace: A Hands-On Guide to Monorepos (Current Practice)

Sun, 31 Aug 2025 00:00:00 +0000

Nx Workspace: A Hands-On Guide to Monorepos (Latest Version)

Welcome to the ultimate “learn by doing” guide for Nx Workspace! You’re about to embark on a journey that will transform how you approach software development, especially for projects involving multiple applications and shared code. This guide is built on the principle that the best way to learn is by getting your hands dirty.

We will walk through every concept with concrete commands, code snippets, and expected outputs. You’ll set up your environment, generate projects, write shared code, and see the power of Nx in action, step by step.

Mastering the Next.js App Router: Server and Client Components Demystified

Fri, 22 Aug 2025 00:00:00 +0000

Mastering the Next.js App Router: Server and Client Components Demystified

Introduction

The landscape of web development is constantly evolving, and at the forefront of this evolution, Next.js continues to innovate, pushing the boundaries of what’s possible in terms of performance, developer experience, and scalability. With the introduction of the App Router and, more fundamentally, React Server Components (RSCs), Next.js 15.x represents a significant architectural shift that redefines how we build modern web applications.

The Next.js App Router: Server and Client Components Demystified

Fri, 22 Aug 2025 00:00:00 +0000

Mastering the Next.js App Router: Server and Client Components Demystified