Recent content on Luis Aviles
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…
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…
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…

 
 
 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.…

 
 
 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…

 
 
 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…

 
 
 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…
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…
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 : 12 px ; 
 } 
 
 @ media ( max-width : 600px ) { 
 . title { 
 font-size : 14 px ; 
 } 
 } 
 By default, the text size value will be 12px and this value will be changed to 14px when…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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. 
…
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.…
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…
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. 
 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…
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)? 
…
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…
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…
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…
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…
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…
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 =…
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…
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…
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…
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…
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. 
 Navigation Lifecycle 
 Creating and configuring routes into your…
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…
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…

 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.

 
 
 
 
 Restart Animation 
 
 
 
 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.
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 
 
…
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…

 
 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…