Luis Aviles

How to Speed Up Test Coverage Using Multi-Agent Orchestration

Tue, 16 Jun 2026 11:00:00 +0000

In Part 1 of this series, we looked at how to run a single, autonomous AI agent inside a Nebubox container to generate unit tests, patch bugs in our CLI code, and open a Pull Request.

That sequential, closed-loop workflow works great for smaller modules. But as codebases grow, forcing a single agent to write extensive test suites line-by-line can be slow, hitting context window limits and increasing execution time.

To solve this, we can scale our workflow horizontally. In this post, let’s look at how the Antigravity CLI can orchestrate parallel subagents to divide and conquer test generation concurrently, merging their work before running verification.

How to Safely Automate Unit Test Generation Using AI Sandboxes

Wed, 10 Jun 2026 10:00:00 +0000

In my previous post, I introduced nebubox, a CLI tool I built to run AI coding tools (like Claude Code, Antigravity, and Codex) safely inside Docker containers. By restricting the filesystem access of the agent to just your project directory, you get the productivity gains of autonomous coding without risking your SSH keys, env files, or other local repositories.

Today, we are taking this setup a step further to run a fully autonomous coding workflow. In this post, let’s look at how to orchestrate the Antigravity CLI to inspect our code, write missing unit tests, verify them against Vitest, and open a GitHub Pull Request (all safely contained within a sandboxed environment).

How to Run AI Coding Tools Safely Inside Docker Containers

Mon, 23 Feb 2026 00:00:00 +0000

I’ve been using AI coding agents (Claude Code, Gemini CLI, Codex CLI) to refactor and write code across different projects. They work well. But every time I ran one code agent, I kept asking myself: can this agent run autonomously without risking access to my SSH keys, my cloud credentials, or even other projects content?

I wanted the productivity gains without the risk, so I built nebubox: a CLI tool that runs each AI coding agent inside a Docker container where only your project directory is visible. You get full capabilities but a strict limit on what files the agent can reach.

A Practical Guide to use Context Caching

Sun, 21 Dec 2025 00:00:00 +0000

If you’ve built an LLM-based application, you’ve likely faced “The Context Problem”: providing enough information to the model to get a good answer often means sending massive amounts of text with every single request.

In a recent project, ElectoBot, I built a tool to help citizens compare government plans from different presidential candidates. Each candidate has a dense PDF/Markdown document detailing their proposals. Sending 50 pages of “Government Plan” text for every user question? That’s slow and expensive.

Using Gemini Pro Vision for Image Processing using Angular and NestJS

Thu, 07 Mar 2024 00:00:00 +0000

In a previous post, I explained the main aspects of building a full-stack web application from scratch and explored current capabilities for chat and text generation of Gemini models.

In this blog post, we will use the same Nx workspace as a starting point and will add the ability to process images using the Gemini Pro vision model.

If you want to code along this tutorial, make sure to clone or download the code using the tag v0.1, which can be found here.

Build your First Gemini Powered Chatbot with Angular and NestJS

Fri, 01 Mar 2024 00:00:00 +0000

The rise of Natural Language Processing(NLP) has opened up exciting opportunities for developers, allowing them to create engaging and interactive chatbot applications.

In this blog post, we will guide you through the process of creating a chatbot application from scratch using the TypeScript programming language. The project will be based on the latest version of the Angular framework for the frontend and we will use NestJS for creating the API services through the existing Gemini API capabilities for chat and text generation.

Build your First PaLM API Powered Chatbot with Angular

Thu, 24 Aug 2023 00:00:00 +0000

Chatbot applications have become a trend in the past months due to the introduction of natural language processing technologies. And the good news for developers is we can start using these powerful APIs to build our applications.

In this blog post, we will understand how to build a Chatbot that leverages the Google PaLM API along with the Angular framework. The frontend application will allow the users to ask questions and receive comprehensive answers through PaLM’s natural language processing technology.

How to Create Standalone Components in Angular

Fri, 12 May 2023 00:00:00 +0000

Angular has become one of the most popular frameworks to build web applications today. One of the key features of the framework is its the component-based architecture, which allows coding best practices as the modularity and reusability. Each Angular component consists of a template, a TypeScript class and metadata.

In this blog post, we will dive deeper into standalone components and we will explore the anatomy of an application based on them.

How to Manage Breakpoints using BreakpointObserver in Angular

Thu, 14 Apr 2022 00:00:00 +0000

Defining Breakpoints is important when you start working with Responsive Design and most of the time they’re created using CSS code. For example:

.title {
  font-size: 12px;
}

@media (max-width: 600px) {
  .title {
    font-size: 14px;
  }
}

By default, the text size value will be 12px and this value will be changed to 14px when the viewport gets changed to a smaller screen(a maximum width of 600px).

That solution works. However, what about if you need to listen for certain breakpoints to perform changes in your application? This may be needed to configure third-party components, processing events or any other.

How to Build a Slideshow App Using Swiper and Angular

Wed, 23 Mar 2022 00:00:00 +0000

Google Slides and Microsoft PowerPoint are the most popular options to build presentations nowadays. However, have you ever considered having a custom tool where you can use your web development knowledge to create beautiful slides?

In this post, we will build a slideshow app with the ability to render one slide at a time using Angular, Swiper, and a little bit of CSS.

Project Setup

Prerequisites

You’ll need to have installed the following tools in your local environment:

How to Update the Application Title based on Routing Changes in Angular

Wed, 16 Feb 2022 00:00:00 +0000

Have you tried to update the document’s title of your application? Maybe you’re thinking that applying interpolation should be enough:

<head>
  <title>{{myCustomTitleVariable}}</title>
</head>

<body>
  <root-app></root-app>
</body>

That solution is not going to work since the <title> element is outside of the scope of the Angular application. In fact, the root component of your app is within <body> tag and the title is part of the <header> element.

Luckily, Angular provides the Title service with the methods to read the current title of the application and a setTitle(title) to update that value.

Why Migrate from Protractor to Cypress?

Fri, 28 Jan 2022 00:00:00 +0000

Great memories come to my mind when I read about Protractor. I remember those days when I was working actively using the AngularJS framework to build Single-Page Applications, and Protractor was the most viable option for writing E2E(End-to-End) tests.

In fact, Protractor has been created in 2013 when AngularJS was the most popular web framework and it allowed run tests through the web application in a real browser, along with interaction commands to mimic the user behavior.

Angular CDK: Sorting Items using Drag & Drop

Tue, 23 Nov 2021 00:00:00 +0000

There is no doubt that we are living in an era where the interactivity of your web application is a very important part of retaining your users.

For example, it’s very common to find requirements to perform a Drag and Drop operation inside of your web application: Upload image files, prioritize activities (think in a Task Board) or even sort elements in your web app.

Luckily, the Angular Team has implemented a library to enable the creating of drag-and-drop interfaces in your Angular application.

How to integrate Web Components using Lit in Angular

Thu, 14 Oct 2021 00:00:00 +0000

In previous posts, I explained how to create projects in Lit and TypeScript from scratch. Also, I covered different topics about Web Components, and Single-Page Applications, using them.

In this tutorial, I’ll explain the needed steps to integrate these Web Components in Angular. Spoiler: You can find the source code of a demo project at the end.

Integration of Web Components using Lit and Angular

Project Setup

Prerequisites

You’ll need to have installed the following tools in your local environment:

Getting Started with Here Maps and Web Components using Lit

Thu, 05 Aug 2021 00:00:00 +0000

In the past months, I have been actively working on the development of geolocation-oriented solutions in web applications. My experience has been good so far, taking into account the availability of modern tools and libraries, with a wide range of features that even enable the use of interactive maps and location services.

In this article, I’ll explain how to integrate Here Maps through web components, using Lit and TypeScript, in just a few steps.

How to Solve CORS using a Proxy Server and Koa

Tue, 03 Aug 2021 00:00:00 +0000

No matter how much experience you have in software development, you’ve likely had to deal with the CORS problem.

The good news is that there are now new and different ways to solve this issue, from using an extension for your favorite browser, to defining a custom solution.

In this post, I’ll explain how to implement a basic Proxy Server using Node.js so that you can use it even if you’re using a different programming language for your main application.

How to Implement an Event Bus in TypeScript

Fri, 16 Jul 2021 00:00:00 +0000

In real-world software development, design patterns offer reusable solutions and, most prominently, make code easier to maintain.

The Event Bus idea is generally associated with the Publish-subscribe pattern:

Publish–subscribe is a messaging pattern through which message senders, called “publishers”, do not program the messages to be sent directly to specific receivers, called “subscribers”. Instead, they classify published messages without knowledge of which subscribers sent them.

In other words, an Event Bus can be considered as a global way to transport messages or events to make them accessible from any place within the application.

Drawing HTML Elements upwards/downwards dynamically in the Screen

Mon, 12 Jul 2021 00:00:00 +0000

A couple of weeks ago, I start writing a custom component that allows rendering a list of other components dynamically. One of its features shows the list up or down, according to the space available in the viewport (or the screen).

A solution to this type of problem may require the use of the web APIs available through the Window interface.

The Web APIs

API comes from Application Programming Interface, and according to MDN:

How to Handle Time Zones using DateTime and Luxon

Wed, 07 Jul 2021 00:00:00 +0000

Raise your hand if you ever had issues dealing with time zones or even if you asked about “How to convert a Date object to another timezone in JavaScript”.

In my personal experience, this kind of requirement can become a big problem for developers if the date-handling-related concepts are not clearly understood or the right tools are not used.

Using Dates and Time Zones in JavaScript

Let’s suppose you got a date representation from an external API and you need to convert the date to any desired time zone.

Web Components communication using an Event Bus

Wed, 16 Jun 2021 00:00:00 +0000

Imagine you’re building a Single Page Application using Web Components only, you got several pages, configured the routes and you need to handle general events or actions.

Here’s when you start to think about potential solutions as well: Maybe It’s time to adding state management to the application? Is it a good time to build a “custom” solution? Or what about using some design patterns in this case?

The answers to these questions will depend on the complexity of the current scenario, the experience of the developers, or mainly on the opinions of the team. It is clear that there is no absolute answer!

Lit 2.0 Released: Building fast and lightweight Web Components

Mon, 17 May 2021 00:00:00 +0000

In the past months, I’ve been using Web Components actively to build single-page applications. It has been a great experience so far, not only because I learned a lot about the latest web standards but also because the web applications ended up being quite fast.

The Web Component development story is not something new. In fact, it has been nearly three years since LitElement has been introduced as a base class to build Web Components using JavaScript with the addition of great support of TypeScript. On other hand, lit-html has been released almost four years ago as a way to create small and fast HTML templates in JavaScript.

How to Share styles in Web Components with LitElement and TypeScript

Thu, 06 May 2021 00:00:00 +0000

Have you ever thought about the benefits of code reuse?

It is common to try to find techniques or strategies that allow us to save time and reuse existing code for the implementation of our applications. However, let’s start by first understanding what we mean by code reuse.

Code reuse, also called software reuse, is the use of existing software, or software knowledge, to build new software, following the reusability principles.

How to Observe Property Changes with LitElement and TypeScript

Wed, 03 Mar 2021 00:00:00 +0000

In a previous post, I explained how to manage LitElement properties using @property and @internalProperty decorators through TypeScript. Also, I explained how LitElement manages the declared properties and when it triggers an update cycle, causing the component to re-render its defined template.

A couple of days ago I saw an interesting question regarding these property changes on a developer website:

How to observe @property changes in a LitElement component?

In this article, I will explain how you can observe(and “react” maybe?) these properties considering the lifecycle of a LitElement component.

LitElement properties: @property vs @internalProperty

Wed, 17 Feb 2021 00:00:00 +0000

LitElement is an excellent alternative to build lightweight web applications since it’s based on the Web Components standard, and with the help of TypeScript, we can see more possibilities to build Web Components faster with a good developer experience.

In this article, I will explain practically the use of @property and @internalProperty decorators using a TypeScript implementation.

The Problem

Let’s suppose you’re building a small application that needs to display a list of Users. You can select any of them and then other details should be displayed, in this case, the Address information.

How to Handle Events with LitElement and TypeScript

Wed, 10 Feb 2021 00:00:00 +0000

In previous posts, I covered different topics about Web Components and Single-Page Applications using LitElement and TypeScript.

It’s very known that LitElement has added a good support to manage Properties and Events to write powerful web components. In this post, we’ll focus on event handling using a LitElement-based component as a use case using the TypeScript language.

The Custom Component

Let’s start the Web Component creation using the Stackblitz editor and define the initial code for our first component:

How to Setup environment variables using JSON files with Rollup and TypeScript

Mon, 01 Feb 2021 00:00:00 +0000

In previous posts, I explained How to setup a TypeScript project using Rollup.js from scratch. Also, I covered How to Serve a Single Page Application(SPA) using Rollup.js and Web Dev Server step by step. Then, I covered How to Build a LitElement Application with Rollup.js and TypeScript.

In this article, I’ll take the result of those tutorials as a starting point to set up environment variables using JSON files.

Environment Variables

Reading environment variables is very common in software development. It’s a helpful way to cover security concerns and even provides the convenience to set configuration parameters in your application.

How to Build a LitElement Application with Rollup.js and TypeScript

Mon, 18 Jan 2021 00:00:00 +0000

In this article, I’ll take the result of both tutorials as a starting point to integrate LitElement into the game to write the first Web Components through the latest web standards and powerful TypeScript features.

Project Setup

Prerequisites

You’ll need to have installed the following tools in your local environment:

How to Serve a Single Page Application(SPA) using Rollup.js and Web Dev Server

Wed, 30 Dec 2020 00:00:00 +0000

In a previous post, I explained How to setup a TypeScript project using Rollup.js. In that article, I covered the necessary steps to have a Project Setup ready to generate a build using TypeScript and Rollup configurations.

So let’s take that project as a starting point to serve a Single-page Application using modern web tools.

What is a SPA (Single-page Application)?

According to MDN Documentation:

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

How to setup a TypeScript project using Rollup.js

Tue, 29 Dec 2020 00:00:00 +0000

A couple of months ago I started to work through web standards, Rollup.js, and TypeScript. It’s my first experience using Rollup although I’ve been working with TypeScript on different projects and using it along with frameworks like Angular.

So far it has been a good experience in terms of performance and tools integration, so I decided to write a quick tutorial to have a setup ready using it.

Rollup with TypeScript

What is Rollup?

In words of the official documentation:

Understanding flatMap and mergeMap operators in RxJS with TypeScript

Wed, 16 Dec 2020 00:00:00 +0000

RxJS is a popular library nowadays and it’s used in a wide range of applications. And it even becomes part of popular frameworks like Angular.

It’s not unknown that the library comes with many powerful functions that can be used together to solve complex problems with only a few lines of code. A couple of days ago I saw the following question on a developer website:

How to use flatMap operator to process a list of data as an Observable and then process the data one by one as Observables too?

Form Handling using TypeScript and RxJS

Thu, 10 Dec 2020 00:00:00 +0000

RxJS and TypeScript are becoming more and more popular these days. It’s feasible to use both technologies alone or even as part of any JavaScript library or framework.

It’s an interesting fact to know that the RxJS project is using TypeScript actively and it helped to find bugs when the library was migrating from JavaScript.

In this article, we’ll see a Reactive approach to handle HTML forms using TypeScript and RxJS.

Understanding switchMap and forkJoin operators in RxJS with TypeScript

Wed, 09 Dec 2020 00:00:00 +0000

RxJS is a library with more than 22 Million downloads per week. It’s widely used in the JavaScript world and it has great support of TypeScript. There’s no need to say much about it to understand how important is today.

Some days ago I saw the following question in a developer forum:

Is there a way to handle a list of Observables and get the final result of them once they’re completed?

Using Route Guards, Actions and Web Components with TypeScript

Tue, 08 Dec 2020 00:00:00 +0000

Imagine you are building a Single Page Application using Web Components only, you already defined a set of views, configured the routes and you’re handling the authentication very well.

Suddenly you understand that you must manage autorizations to decide to render a view or not. For example, you need to manage the /admin and /analytics route for authorized users only.

In a previous post, I explained how to define rules to avoid loading pages for restricted users using the Navigation Lifecycle functions from Vaadin Router. In fact, a solution based on the use of these functions works very well for simple and isolated views.

Form Validation using RxJS and TypeScript

Mon, 07 Dec 2020 00:00:00 +0000

In a previous post, I explained how you can handle your HTML Forms using RxJS and TypeScript.

Talking in a Reactive approach, I will show you some techniques to validate an HTML Form using static types and the help of some powerful RxJS operators.

The HTML Form

Let’s define the following HTML Form as a starting point.

<div class="container">
  <div class="wrapper">
    <form class="form" novalidate>
      <div class="form-group needs-validation">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" required />
        <span class="invalid-feedback"></span>
      </div>
      <div class="form-group needs-validation">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" required />
        <span class="invalid-feedback"></span>
      </div>
      <button disabled id="submit" type="button" class="btn btn-primary">
        Submit
      </button>
    </form>
  </div>
</div>

The previous markup is using Bootstrap which is a powerful CSS framework that contains several styles ready to use. At the same time, we can rely on Bootstrap Validation to provide actionable feedback to the users as the next screen shows.

Testing Web Components with Karma, Mocha, Chai and TypeScript

Tue, 01 Dec 2020 00:00:00 +0000

Imagine yourself building an electric car.

By design, this car has an electric motor, a thermal system(cooling), a battery, a charge port, a transmission, and other units. Every part of the system has requirements that must be met before being attached to the other components.

If any of these components has not been properly tested, it may happen that when testing the whole car it does not work or has faults in its operation.

RxJS 7 and Beyond: What to Expect and Prepare For

Mon, 30 Nov 2020 00:00:00 +0000

Some days ago I’ve been part of the Modern Web Podcast along with Tracy Lee and we interviewed to Ben Lesh, the author of RxJS(A JavaScript library for reactive programming using Observables), on the most recent updates for RxJS 7 and it’s targeted release date.

It was an opportunity to understand how RxJS has been improved over time, how TypeScript helped to identify bugs and improved the project itself.

It worths mentioning that RxJS 7 has been around a year now. Actually, the v7 alpha was released a year ago and the first beta came out 7 months ago. Let’s discover the upcoming features and breaking changes.

Testing Web Components with Cypress and TypeScript(E2E)

Wed, 28 Oct 2020 00:00:00 +0000

In my previous posts, I covered a wide range of topics about LitElement and TypeScript. Then I created a Single Page Application based on Web Components.

Let’s deep dive over this project to understand how to add the End-to-End(E2E) testing capability using Cypress and TypeScript.

The Shadow DOM

The Shadow DOM API is about web components encapsulation and that means it keeps the styling, markup, and behavior hidden and separate from other code on the page. This API provides a way to attach a separated DOM to an element.

Web Components Integration using LitElement and TypeScript

Mon, 05 Oct 2020 00:00:00 +0000

In my previous posts, I explained how to create a project based on LitElement and TypeScript from scratch. Also, I added the routing management and explained how to have more control over the navigation lifecycle.

Let’s deep dive over the Web Components creation to understand how to reuse them, respond to any property change, and dispatch custom events.

Writing a Web Component

Let’s define a base template to display an overview of every blog post in our web application.

Navigation Lifecycle using Vaadin Router and LitElement

Mon, 21 Sep 2020 00:00:00 +0000

In a previous post, I explained the main aspects to add a Routing Management with LitElement and TypeScript to build a SPA(Single Page Application). It’s important to note that a good understanding of the routing library you selected to work through can help you to have more control over the navigation lifecycle.

Creating and configuring routes into your Web Application is only one part of the Routing Management story.

Routing Management with LitElement and TypeScript

Wed, 09 Sep 2020 00:00:00 +0000

Most modern frameworks provide a routing mechanism to handle the navigation between views within the application. This is a critical feature for a Single Page Application(SPA).

This is where the Route Matching comes in mind. When a SPA relies on a router, you’ll need to define a set of routes with the supported locations.

In the JavaScript world, most of route definitions are inspired by Express Routing:

const routes = [
  { path: '/' },
  { path: 'posts' },
  { path: 'posts/:id' },
  { path: 'about' },
];

In this example, the application will render a view associated with the specific location that “matches” with the path value.

Getting started with LitElement and TypeScript

Wed, 26 Aug 2020 00:00:00 +0000

The use of powerful frameworks and libraries is very widespread nowadays. We can name Angular, React.js, Vue, Svelte, among with others.

It’s hard to imagine to build a web application without the use of any of those component-based frameworks. For these options, the components are reusable and configurable widgets, they are able to provide a custom behavior and styling, and they’re used as building blocks for the application.

Can we share a component between these frameworks? The short answer is no. Every framework/library has a custom API definition to build components and they are not interoperable with each other.

Build Your First Voice-Driven Web Application

Mon, 20 Jul 2020 00:00:00 +0000

Some time ago I had the goal to implement a web application to be able to write what I’m speaking automatically and allow to execute actions through my voice commands. I thought it was a good idea to provide a way to listen to some feedback from the application too. After doing quick research I discovered a couple of Web APIs to solve this problem.

Why you should learn JavaScript?

Mon, 08 Jun 2020 00:00:00 +0000

Animation: JavaScript's domain 2015 - 2020

JavaScript is undoubtedly one of the most popular languages and it adapts with great ease to various use cases.

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Tue, 09 Jan 2018 00:00:00 +0000

Some time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on the server. The client app is using latest Angular features.

In this post I will show you how I implemented the app from scratch.

Demo: TypeScript Chat Application

What is a Real Time Application?

According this Wikipedia definition, a real-time application allows information to be received as soon as it is published, rather than requiring a source to be checked periodically for updates. Therefore, this kind of app should give a feeling to users that events and actions happen immediately.

Releasing v1.0.0 of a Socket.io-TypeScript Chat Project

Mon, 04 Sep 2017 00:00:00 +0000

Some months ago I implemented a simple chat version using TypeScript language only. This project was presented in a local conference, explaining some reasons to use TypeScript language in your backend and frontend projects.

Today I’m happy to announce that my GitHub repository is fully updated and version 1.0.0 has been released.

Live Demo

Open at least two browser windows and try the application here: https://typescript-chat.firebaseapp.com

Source Code

Source code available here: https://github.com/luixaviles/socket-io-typescript-chat

Setting up Local Environment to Develop Angular Applications

Fri, 04 Aug 2017 00:00:00 +0000

Photo by Blake Connally on Unsplash

Angular is definitely in a great stage and every new version comes with awesome features. The project itself comes with great tools that will allow you to start to develop web applications from scratch.

A common question, from the people that I know, is about the tools they need in their environments before starting to develop with the framework, and that’s why I decided to write this post.