Forem: Saulo Dias

Avoiding Port Conflicts in Testcontainers with Random Port Binding

Saulo Dias — Mon, 01 Sep 2025 16:46:58 +0000

When writing integration tests with Testcontainers for .NET, one of the most common problems is port conflicts.

Imagine you have multiple tests that spin up containers in parallel. If they all try to bind the same host port (e.g., 6379 for Redis or 80 for Nginx), you’ll quickly run into errors like:

Bind for 0.0.0.0:6379 failed: port is already allocated

The fix is surprisingly simple: let Docker assign a random host port instead of forcing a fixed one.

The Trick

When you expose a container port, you can tell Testcontainers to map it to a free random port on the host:

.WithPortBinding(internalPort, assignRandomHostPort: true)

This avoids conflicts and allows your tests to run in parallel without stepping on each other.

Minimal Example

Here’s a lightweight example using nginx:alpine:

using DotNet.Testcontainers.Builders;
using DotNet.Testcontainers.Containers;

public class WebServerTestContainer : IAsyncDisposable
{
    private readonly IContainer _container;
    private readonly TaskCompletionSource<int> _portInitialized = new();
    private readonly int _internalPort = 80;

    public int Port => _portInitialized.Task.Result;

    public WebServerTestContainer()
    {
        _container = new ContainerBuilder()
            .WithImage("nginx:alpine")
            .WithExposedPort(_internalPort)
            .WithPortBinding(_internalPort, true) // <— random host port
            .WithWaitStrategy(
                Wait.ForUnixContainer()
                    .UntilHttpRequestIsSucceeded(r => r
                        .ForPort(_internalPort)
                        .ForPath("/")))
            .Build();
    }

    public async Task StartAsync()
    {
        await _container.StartAsync();
        _portInitialized.SetResult(_container.GetMappedPublicPort(_internalPort));
    }

    public async ValueTask DisposeAsync() => await _container.DisposeAsync();
}

Using It in a Test

public class WebServerTests : IAsyncLifetime
{
    private readonly WebServerTestContainer _server = new();

    public async Task InitializeAsync()
    {
        await _server.StartAsync();
    }

    public async Task DisposeAsync()
    {
        await _server.DisposeAsync();
    }

    [Fact]
    public async Task ShouldRespond()
    {
        using var http = new HttpClient();
        var response = await http.GetAsync($"http://localhost:{_server.Port}/");
        Assert.True(response.IsSuccessStatusCode);
    }
}

Why This Matters

✅ No more port conflicts
✅ Tests can safely run in parallel
✅ No need to hardcode host ports

This small trick makes your integration tests more reliable and parallelizable without changing much code.

How to Use Dependency Injection in C# Extension Methods

Saulo Dias — Tue, 17 Jun 2025 17:04:52 +0000

Have you ever wanted to use services from your dependency injection (DI) container inside a C# extension method? While extension methods are static and can't have constructor injection, you can still wire them up to your DI container in a clean, testable way. Here’s a practical pattern you can use!

The Problem

Extension methods in C# are static, so you can’t inject services directly into them, unless you inject them as parameters. Sometimes, though, you want your extension methods to use services managed by your DI container—maybe for logging, transformation, or business logic.

The Pattern

Create your service and interface as usual.
Add a static Initialize(IServiceProvider) method to your extension class.
Use the provider inside the Initialize(IServiceProvider) method to resolve your services and store them in private static fields.
Use the services as needed.

Note: This pattern is best for singleton or stateless services. Avoid using it for scoped or transient services, or services that depend on per-request/user state.

Example: Enhancing a Widget

Suppose you have a Widget class and want an extension method that “enhances” it using a service from DI.

public class Widget
{
    public string Name { get; set; }
    public int Value { get; set; }
    public override string ToString() => $"Widget(Name={Name}, Value={Value})";
}

public interface IWidgetService
{
    Widget Enhance(Widget widget);
}

public class WidgetService : IWidgetService
{
    public Widget Enhance(Widget widget)
    {
        // Example: Capitalize name and double the value
        return new Widget
        {
            Name = widget.Name.ToUpperInvariant(),
            Value = widget.Value * 2
        };
    }
}

The Extension Method

public static class WidgetExtensions
{
    private static IWidgetService? _widgetService;

    // Call this once at app startup!
    public static void Initialize(IServiceProvider serviceProvider)
    {
        _widgetService = serviceProvider.GetService<IWidgetService>();
        if (_widgetService == null)
            throw new InvalidOperationException("No IWidgetService registered.");
    }

    public static Widget EnhanceWithDI(this Widget widget)
    {
        if (_widgetService == null)
            throw new InvalidOperationException("WidgetExtensions not initialized with IWidgetService.");
        return _widgetService.Enhance(widget);
    }
}

Setting Up in `Program.cs`

using Microsoft.Extensions.DependencyInjection;

class Program
{
    static void Main(string[] args)
    {
        // Set up DI
        var services = new ServiceCollection();
        services.AddSingleton<IWidgetService, WidgetService>();
        var provider = services.BuildServiceProvider();

        // Initialize extension methods with service provider
        WidgetExtensions.Initialize(provider);

        // Use the extension method
        var widget = new Widget { Name = "test", Value = 42 };
        var enhanced = widget.EnhanceWithDI();
        Console.WriteLine($"Original: {widget}");
        Console.WriteLine($"Enhanced: {enhanced}");
    }
}

Testing the Extension Method with xUnit

using Xunit;
using ExtensionMethodDependencyInjection;
using Microsoft.Extensions.DependencyInjection;

public class WidgetExtensionsTests
{
    [Fact]
    public void EnhanceWithDI_EnhancesWidgetCorrectly()
    {
        // Arrange
        var services = new ServiceCollection();
        services.AddSingleton<IWidgetService, WidgetService>();
        var provider = services.BuildServiceProvider();
        WidgetExtensions.Initialize(provider);

        var widget = new Widget { Name = "unit", Value = 10 };

        // Act
        var enhanced = widget.EnhanceWithDI();

        // Assert
        Assert.Equal("UNIT", enhanced.Name);
        Assert.Equal(20, enhanced.Value);
    }
}

Output

Original: Widget(Name=test, Value=42)
Enhanced: Widget(Name=TEST, Value=84)

Why This Works

You only need to call WidgetExtensions.Initialize() once at app startup.
The extension method can now access any service from the DI container.
This pattern is simple, testable, and works for any extension method that needs DI.

Limitations

This approach uses a static field to store the service provider, so it’s best for application-level extension methods, not for libraries meant to be used in multiple apps at once.
Be careful with multi-threading and service lifetimes (avoid using this for scoped services in ASP.NET Core request pipelines).

You can find the complete solution with tests at github.com/saulodias/ExtensionMethodDependencyInjection

Conclusion

You don’t have to give up on DI just because you’re writing extension methods! With this pattern, you can keep your code clean and take full advantage of the DI container everywhere—even in your static extension helpers.

Browser Storage and BehaviorSubject: Achieving Consistent State in Angular Through Storage Decorators

Saulo Dias — Tue, 18 Jun 2024 12:01:22 +0000

Managing data persistence in Angular applications can be a hassle, especially when you need to keep your application state synchronized with local or session storage. In this post I will provide a set of property decorators that bind your storage values to BehaviorSubjects, ensuring that your state remains consistent with the browser's storage.

After test in production, I might consider publishing a library with them, but feel free to use the code as you wish. https://github.com/saulodias/ngx-storage

Why Use These Decorators?

They simplify the process of storing and retrieving data from local and session storage. They handle the heavy lifting for you.

With them you can:

Automatically sync your state with browser storage.
Use BehaviorSubject for reactive state management.
Easily revert to a fallback state when necessary.

How It Works

LocalStorage

The LocalStorage decorator allows you to store data in local storage effortlessly.

import { LocalStorage } from 'ngx-storage';
import { BehaviorSubject } from 'rxjs';

class TestClass {
    @LocalStorage('key', 'defaultValue')
    public localStorageValue!: BehaviorSubject<string | null>;
}

SessionStorage

The SessionStorage decorator lets you store data in session storage just as easily.

import { SessionStorage } from 'ngx-storage';
import { BehaviorSubject } from 'rxjs';

class TestClass {
    @SessionStorage('key', 'defaultValue')
    public sessionStorageValue!: BehaviorSubject<string | null>;
}

Custom JSON Converter

For more complex types, you can provide a custom JSON converter.

import { JsonConverter, SessionStorage } from 'ngx-storage';
import { BehaviorSubject } from 'rxjs';

type CustomType = { date: Date };
type CustomTypeStored = { date: number };

const customConverter: JsonConverter<CustomType, CustomTypeStored> = {
    toJson: (object) => ({ date: object.date.getTime() }),
    fromJson: (object) => ({ date: new Date(object.date) }),
};

class TestClass {
    @SessionStorage('key', { date: new Date() }, customConverter)
    public sessionStorageValue!: BehaviorSubject<CustomType | null>;
}

Using NgxStorage in an Angular Service

Here's an example of how to use these decorators in an Angular service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { LocalStorage, SessionStorage } from 'ngx-storage';

@Injectable({
    providedIn: 'root',
})
export class StorageService {
    @LocalStorage('localKey', 'defaultLocalValue')
    public localStorageValue!: BehaviorSubject<string | null>;

    @SessionStorage('sessionKey', 'defaultSessionValue')
    public sessionStorageValue!: BehaviorSubject<string | null>;

    constructor() {
        // Subscribe to localStorageValue
        this.localStorageValue.subscribe(value => {
            console.log('LocalStorage value:', value);
        });

        // Set a new value to localStorageValue
        this.localStorageValue.next('newLocalValue');

        // Subscribe to sessionStorageValue
        this.sessionStorageValue.subscribe(value => {
            console.log('SessionStorage value:', value);
        });

        // Set a new value to sessionStorageValue
        this.sessionStorageValue.next('newSessionValue');
    }
}

Using the Service in a Component

import { Component, OnInit } from '@angular/core';
import { StorageService } from './storage.service';

@Component({
    selector: 'app-storage-example',
    templateUrl: './storage-example.component.html',
    styleUrls: ['./storage-example.component.css']
})
export class StorageExampleComponent implements OnInit {

    constructor(private storageService: StorageService) {}

    ngOnInit() {
        // Access and use the storage service properties as needed
        console.log('LocalStorage Initial:', this.storageService.localStorageValue.value);
        console.log('SessionStorage Initial:', this.storageService.sessionStorageValue.value);

        // Update the values
        this.storageService.localStorageValue.next('updatedLocalValue');
        this.storageService.sessionStorageValue.next('updatedSessionValue');
    }
}

Setting Fallback State

When null is passed to .next(), the fallback state is set instead.

this.localStorageValue.next(null); // Reverts to 'defaultLocalValue'
this.sessionStorageValue.next(null); // Reverts to 'defaultSessionValue'

Note that this is beta and not published, but you can use the code as you wish, for commercial and personal purposes. It's provided as it is though, with no guarantee.

Understanding TypeScript Method Decorators

Saulo Dias — Thu, 25 Apr 2024 15:34:12 +0000

TypeScript provides decorators as a way to modify classes, methods, accessors, properties, or parameters at design time. Method decorators, in particular, allow you to intercept calls to methods within a class and modify their behavior or metadata.

What are Method Decorators?

Method decorators are functions that are prefixed with the @ symbol and placed immediately before a method declaration in a class. They can be used to modify the behavior of methods or to add metadata to them.

Syntax

const required: MethodDecorator = (
    target: Object,
    key: string | symbol,
    descriptor: TypedPropertyDescriptor<any>
) => {
    // Decorator logic here
}

target: The prototype of the class for a static method, or the constructor function of the class for an instance method.
methodName: The name of the method being decorated.
descriptor: An object containing the property descriptor of the method being decorated.

Example: Required Property Decorator

Let's create a simple example to illustrate the usage of method decorators. Consider a scenario where we want to ensure that certain properties in a class are required and must be set before accessing them.

const required: MethodDecorator = (
    target: Object,
    key: string | symbol,
    descriptor: TypedPropertyDescriptor<any>
) => {
    const originalMethod = descriptor.get
    descriptor.get = function () {
        if (this[key] === undefined) {
            throw new Error(`Property ${String(key)} is required, but not set.`);
        }
        return originalMethod!.call(this);
    };
}

class MyClass {
    constructor(
        private readonly _name: process.env.NAME
    ) {}

    @required
    get name(): string {
        return this._name;
    }
}

// Set the environment variable
process.env.NAME = "John";

// Create the object
const myObject1 = new MyClass();
console.log(myObject1.name); // Outputs: "John"

// Delete the environment variable
delete process.env.NAME;

// Create another object
const myObject2 = new MyClass();
console.log(myObject2.name); // Throws an error since NAME is not set

In this example, the required decorator ensures that the name property must be set before accessing it. If it's not set, an error is thrown.

Conclusion

Method decorators in TypeScript provide a powerful way to modify the behavior of methods or add additional functionality to them. They allow you to enforce certain rules or conditions on method access, add logging, caching, or any other cross-cutting concerns to your classes. Understanding decorators can greatly enhance the flexibility and maintainability of your TypeScript codebase.

Elevating Data Integrity in Your React Application with Converters in Storage Management

Saulo Dias — Mon, 19 Feb 2024 21:56:07 +0000

Greetings, fellow developers! Today, let's delve into the realm of storage management in React applications and explore how the concept of converters can revolutionize the way we handle data integrity. Whether you're dealing with complex objects, enumerations, or custom classes, converters offer a powerful solution to ensure seamless serialization and deserialization, thus maintaining data consistency across sessions.

For these examples we're going to use the storage hooks avaible below.

Understanding the Challenge

When working with storage in web applications, one of the common challenges developers face is preserving data integrity, especially when dealing with complex data types. Consider scenarios where we need to store objects with properties like dates, enumerations representing user roles, or instances of custom classes in local storage. Serializing and deserializing such data directly to and from storage can lead to loss of type information, potentially compromising data integrity.

Enter Converters

Converters serve as the bridge between your application's data structures and the storage layer. They allow you to define custom serialization and deserialization logic tailored to your specific data types. By encapsulating this logic within converters, you can ensure that data is stored and retrieved in a format that maintains its integrity and type information.

Leveraging Converters in Practice

Let's consider a few practical examples to illustrate the power of converters:

1. Handling Dates with Dayjs

In our application, we often need to store dates, but standard date objects can lose their type during serialization. By using converters with libraries like Dayjs, we can serialize dates to string representations and deserialize them back to Dayjs objects, ensuring type integrity throughout.

// Define the interface for user preferences
interface UserPreferences {
  theme: string;
  language: string;
  lastLogin: Dayjs; // Using Dayjs for date/time representation
}

// Define a converter for user preferences
const userPreferencesConverter: JsonConverter<UserPreferences, string> = {
  toJson: (preferences: UserPreferences) => ({
    theme: preferences.theme,
    language: preferences.language,
    lastLogin: preferences.lastLogin.toISOString(), // Serialize Dayjs to string
  }),
  fromJson: (storedValue: string) => {
    const parsedValue = JSON.parse(storedValue) as { theme: string, language: string, lastLogin: string }
    return {
      theme: parsedValue.theme,
      language: parsedValue.language,
      lastLogin: dayjs(parsedValue.lastLogin), // Deserialize string to Dayjs
    }
  },
}

// Example component using useLocalStorage with custom converter
const UserPreferencesComponent: React.FC = () => {
  // Initialize user preferences with default values
  const defaultPreferences: UserPreferences = {
    theme: 'light',
    language: 'en',
    lastLogin: dayjs(), // Current date/time
  }

  // Use useLocalStorage hook with custom converter
  const [userPreferences, setUserPreferences] = useLocalStorage(
    'userPreferences',
    defaultPreferences,
    userPreferencesConverter
  )

  // Function to update last login time
  const updateLastLogin = () => {
    setUserPreferences(prevPreferences => ({
      ...prevPreferences,
      lastLogin: dayjs(), // Update last login to current date/time
    }))
  }

  return (
    <div>
      <h1>User Preferences</h1>
      <p>Theme: {userPreferences.theme}</p>
      <p>Language: {userPreferences.language}</p>
      <p>Last Login: {userPreferences.lastLogin.format('YYYY-MM-DD HH:mm:ss')}</p>
      <button onClick={updateLastLogin}>Update Last Login</button>
    </div>
  )
}

2. Storing Enumerations

Enumerations, such as user roles or status codes, are commonly used in applications. However, serializing enums directly to storage can be challenging. With converters, we can map enum values to string representations, enabling seamless storage and retrieval without compromising type safety.

// Define the enum for user roles
enum UserRole {
  ADMIN = 'ADMIN',
  USER = 'USER',
  GUEST = 'GUEST',
}

// Define a converter for user roles
const userRoleConverter: JsonConverter<UserRole, string> = {
  toJson: (role: UserRole) => role, // Simply return the enum value as string
  fromJson: (storedValue: string) => UserRole[storedValue as keyof typeof UserRole], // Convert string back to enum value
}

// Example component using useLocalStorage with custom converter
const UserRoleComponent: React.FC = () => {
  // Initialize user role with default value
  const defaultUserRole: UserRole = UserRole.GUEST

  // Use useLocalStorage hook with custom converter
  const [userRole, setUserRole] = useLocalStorage(
    'userRole',
    defaultUserRole,
    userRoleConverter
  )

  // Function to update user role
  const updateUserRole = (role: UserRole) => {
    setUserRole(role)
  }

  return (
    <div>
      <h1>User Role</h1>
      <p>Current Role: {userRole}</p>
      <button onClick={() => updateUserRole(UserRole.ADMIN)}>Set as Admin</button>
      <button onClick={() => updateUserRole(UserRole.USER)}>Set as User</button>
      <button onClick={() => updateUserRole(UserRole.GUEST)}>Set as Guest</button>
    </div>
  )
}

3. Persisting Custom Classes

Custom classes often encapsulate complex data structures in our applications. Storing instances of these classes in storage requires careful handling. Converters allow us to define serialization and deserialization logic for custom classes, ensuring that objects are stored and retrieved accurately across sessions.

// Define a custom class for Person
class Person {
  constructor(public name: string, public age: number) {}
}

// Define a converter for Person class
const personConverter: JsonConverter<Person, { name: string, age: number }> = {
  toJson: (person: Person) => ({
    name: person.name,
    age: person.age,
  }),
  fromJson: (storedValue: { name: string, age: number }) => new Person(storedValue.name, storedValue.age),
}

// Example component using useLocalStorage with custom converter
const PersonComponent: React.FC = () => {
  // Initialize person with default value
  const defaultPerson: Person = new Person('John Doe', 30)

  // Use useLocalStorage hook with custom converter
  const [person, setPerson] = useLocalStorage(
    'person',
    defaultPerson,
    personConverter
  )

  // Function to update person's name
  const updateName = (newName: string) => {
    setPerson(prevPerson => {
      return { ...prevPerson, name: newName }
    })
  }

  // Function to update person's age
  const updateAge = (newAge: number) => {
    setPerson(prevPerson => {
      return { ...prevPerson, age: newAge }
    })
  }

  return (
    <div>
      <h1>Person Information</h1>
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
      <div>
        <input type="text" placeholder="Enter new name" onChange={(e) => updateName(e.target.value)} />
        <input type="number" placeholder="Enter new age" onChange={(e) => updateAge(parseInt(e.target.value))} />
      </div>
    </div>
  )
}

Conclusion

In the ever-evolving landscape of web development, maintaining data integrity is paramount. By harnessing the power of converters in storage management, we can elevate our applications to new heights of robustness and reliability. Whether it's handling dates, enumerations, or custom classes, converters provide the key to unlocking data integrity in our React applications.

So, the next time you find yourself grappling with storage complexities, remember the transformative potential of converters. With a little creativity and ingenuity, you can ensure that your application's data remains consistent, reliable, and ready to meet the challenges of tomorrow.

Happy coding! 🚀

React hooks: useSessionStorage and useLocalStorage

Saulo Dias ・ Jul 1 '22

#react #hook #typescript #codesnipet

Leveraging ES2023 Array Methods in TypeScript for React

Saulo Dias — Tue, 14 Nov 2023 15:04:19 +0000

Hey Dev.to community!

Excited about the new array methods in ES2023? Here's a quick guide on using them in TypeScript, especially for React development.

ES2023 Array Methods

ES2023 brings fresh array methods, distinguishing themselves by returning a copy of the modified array instead of altering the original. This small change can significantly impact state management safety, especially in frameworks like React.

TypeScript Setup

Ensure you're on TypeScript version 5.2.2 or later. Update your tsconfig.json:

    {
      "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        // ... other configurations
      }
    }

Browser Compatibility

Consider users with outdated browsers. For broader compatibility, target an earlier ECMAScript version, like "es5" in your TypeScript configuration.

React and Beyond

The immutability of these array methods aligns well with React's principles of state management. By returning a copy of the modified array, these methods play nicely with React's paradigm, reducing the chances of inadvertent state modifications.

Example: `sort` vs. `toSorted`

Let's compare the traditional sort method with the new toSorted method:

// Using sort (modifying original array)
const originalArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const sortedArray = originalArray.sort();

console.log(originalArray); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
console.log(sortedArray);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// Using toSorted (creating a new sorted array)
const originalArray2 = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const newSortedArray = originalArray2.toSorted();

console.log(originalArray2);  // [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
console.log(newSortedArray);  // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

In the example above, sort modifies the original array, while toSorted creates a new sorted array, leaving the original array unchanged.

Array.prototype.toSorted()

Other new Methods

Consider exploring other new array methods.

Conclusion

As you embrace the new array methods introduced in ES2023, ensure that your development environment is configured correctly for TypeScript compatibility. Be mindful of browser compatibility considerations, and if necessary, target an earlier ECMAScript version in your project.

Happy coding!

ApexCharts: The underrated charts library

Saulo Dias — Tue, 06 Jun 2023 18:43:51 +0000

ApexCharts is a library that hardly ever appears in "The Top 10 Chart Libraries" posts.

I like it very much, because the API looks like a copy of HighCharts, a very powerful (paid) charts library.

This post is more a note for myself, I will not go over why I use this chart library for most of my projects. See for yourself.

https://apexcharts.com/

Prova de Conceito: Geolocalização Econômica para Identificação da Cidade do Usuário

Saulo Dias — Fri, 19 May 2023 13:11:24 +0000

Apresento uma prova de conceito de uma solução econômica para identificar a cidade do usuário com base em sua localização geográfica.

A "BR Cidades API" é um exemplo prático que utiliza tecnologias como geopandas, Shapely e Flask para criar uma API simples e eficiente. Ela é especialmente adequada para aplicações de alta demanda, onde a precisão absoluta não é crucial, pois evita os altos custos associados a APIs de terceiros.

Ao utilizar a BR Cidades API, é possível obter informações aproximadas sobre a cidade do usuário, sem a necessidade de gastar milhares de dólares por ano em APIs de geolocalização de terceiros. Essa abordagem é perfeita para aplicações brasileiras em larga escala que exigem uma identificação geral da cidade, sem precisar de detalhes específicos.

Embora essa prova de conceito não seja uma solução completa e definitiva, ela oferece uma opção econômica e eficiente para identificar a cidade do usuário. Explore e contribua com o projeto no repositório BR Cidades API para impulsionar o desenvolvimento de soluções de geolocalização personalizadas.

Introducing the CV Schema Proposal: A More Streamlined Approach to Applicant Information

Saulo Dias — Tue, 11 Apr 2023 14:11:19 +0000

Are you looking for a more efficient and organized way to handle applicant information? The CV Schema Proposal may be just what you need. This JSON format provides a standardized representation of professional history and skills, with properties including contact, education, skills, experience, certifications, and projects. By adhering to established standards and data types, this schema is easy to implement and adapt to different languages and cultures. Enjoy benefits such as uniformity, simplicity, extensibility, adaptability, and efficiency. Join us in exploring the potential of the CV Schema Proposal for a more streamlined hiring process.

saulodias / cv-schema

The CV Schema is a JSON format for representing applicant information. It's easy to implement and adaptable to different languages and cultures. Benefits include uniformity, simplicity, extensibility, adaptability, and efficiency.

CV Schema Proposal

Overview

The CV Schema Proposal is a standardized format for representing applicant information in JSON. This schema is designed to address the requirements of most common applicant's information, providing a comprehensive and uniform representation of a person's professional history and skills.

Schema Description

The schema is defined using the JSON Schema Draft 7 specification and includes the following properties:

languageCode: A string representing the language used in the CV.
imageLink: A string representing the URL of the applicant's profile picture.
name: A string representing the full name of the applicant.
title: A string representing a brief title describing the applicant's professional expertise.
contact: An object representing the applicant's contact information.
education: An array of objects representing the applicant's educational history.
languages: An array of objects representing the languages spoken by the applicant and their proficiency levels.
skills: An array…

View on GitHub

Never Overlook Equality Verification

Saulo Dias — Fri, 31 Mar 2023 20:05:31 +0000

When building an application, it's important to design it with equality verification in mind from the beginning. Relying on string comparisons for equality verification can lead to inefficiencies, bugs, and maintenance headaches. By designing our components with equality verification in mind, we can avoid these issues and build a more robust and maintainable application.

Here's an example of how to design a generic model with a few generic components that can be compared for equality using C#:

// Define a generic interface for components that can be compared for equality
public interface IComponent<T>
{
    bool Equals(T other);
}

// Define a generic class for the model that contains a list of generic components
public class Model<T> where T : IComponent<T>
{
    private List<T> components;

    public Model(List<T> components)
    {
        this.components = components;
    }

    public bool Equals(Model<T> other)
    {
        if (components.Count != other.components.Count)
        {
            return false;
        }

        for (int i = 0; i < components.Count; i++)
        {
            if (!components[i].Equals(other.components[i]))
            {
                return false;
            }
        }

        return true;
    }
}

// Define a few generic components that implement the IComponent interface
public class ComponentA : IComponent<ComponentA>
{
    private string name;

    public ComponentA(string name)
    {
        this.name = name;
    }

    public bool Equals(ComponentA other)
    {
        return name == other.name;
    }
}

public class ComponentB : IComponent<ComponentB>
{
    private int value;

    public ComponentB(int value)
    {
        this.value = value;
    }

    public bool Equals(ComponentB other)
    {
        return value == other.value;
    }
}

By using a generic interface and class, we can easily create new components and models that can be compared for equality in a flexible and maintainable way. And by using the Equals method instead of string comparisons, we can ensure efficient and robust comparisons that avoid the issues of bugs and maintenance headaches.

Using Axios more elegantly with Interceptors and Array of URLs

Saulo Dias — Mon, 13 Mar 2023 15:18:46 +0000

Axios is a popular library for making HTTP requests in JavaScript. It provides a simple and intuitive API for sending requests and handling responses. In this post, we'll explore how to use Axios more elegantly by creating an array of URLs and using interceptors for common headers.

Setting up Access Token and API Endpoints

First, we need to set up our access token and API endpoints. We'll define our access token as a constant, and our endpoints as an object with keys representing each endpoint and values representing the endpoint URL.

const accessToken = "INSERT YOUR ACCESS TOKEN HERE";
const endpoints = {
  basicProfile: "/users/profile",
  skills: "/users/skills",
  positions: "/users/positions",
}

Creating an Instance of Axios

Next, we'll create an instance of Axios with a base URL and common headers. We'll use the create method of the axios object to create this instance. We'll also include our access token in the Authorization header and set the Content-Type and X-Restli-Protocol-Version headers.

const api = axios.create({
  baseURL: "https://api.example.com/v2",
  headers: {
    Authorization: `Bearer ${accessToken}`,
    "Content-Type": "application/json",
    "X-Restli-Protocol-Version": "2.0.0",
  },
});

Using Interceptors to Set Base URL

We'll use an interceptor to set the base URL for all requests. This will allow us to specify only the endpoint name when making requests, rather than the full URL. We'll use the request interceptor to modify the config object and set the url property to the corresponding URL from our endpoints object.

api.interceptors.request.use((config) => {
  config.url = endpoints[config.url];
  return config;
});

Using an Array of URLs to Fetch Data

Finally, we'll use an array of URLs to fetch data from multiple endpoints. We'll use the Promise.all method to send multiple requests at once and wait for all of them to complete. Once the requests are complete, we'll extract the data from each response and use it as needed.

Promise.all([api.get("basicProfile"), api.get("skills"), api.get("positions")])
  .then((responses) => {
    const basicProfile = responses[0].data;
    const skills = responses[1].data.elements;
    const positions = responses[2].data.elements;

    // Use fetched data
  })
  .catch((error) => {
    console.error(error);
  });

In this example, we're fetching data from three endpoints: basicProfile, skills, and positions. We're using an array of URLs to make the requests, and the Promise.all method to wait for all of them to complete. Once the requests are complete, we're extracting the data from each response and using it as needed.

By using an array of URLs and interceptors for common headers, we can make our code more elegant and easier to read. These techniques can also help reduce boilerplate code and improve the maintainability of our codebase.

I got help from ChatGPT to integrate Alexa Skill in a mini marathon

Saulo Dias — Fri, 24 Feb 2023 04:25:11 +0000

Ash Wednesday, 10:12 PM:
— "Do you think I can integrate ChatGPT with Alexa by midnight?" I asked.
— "Yes. Let me help you there," my friend replied, sending me instructions he asked from the AI.

I laughed and started.

Mini marathon

I dusted off my AWS account, "drafted" (of course, it was ChatGPT) a code and uploaded it to the Amazon Lambda Function.

I didn't like that I had to upload the node modules too, but there are pros and cons. I won't elaborate.

I created the Skill on Amazon Developer Console.

I created the key to access the OpenAI API there. It's free too, by the way!

I added the endpoint to the Lambda Function, and in the Lambda Function, I added the skill ID as a trigger. Everything went smoothly.

const ChatGPTCommandIntentHandler = {
  canHandle(handlerInput) {
    return (
      Alexa.getRequestType(handlerInput.requestEnvelope) === "IntentRequest" &&
      Alexa.getIntentName(handlerInput.requestEnvelope) ===
        "ChatGPTCommandIntent"
    );
  },
  async handle(handlerInput) {
    const command =
      handlerInput.requestEnvelope.request.intent.slots.command.value;

    const speechOutput = await queryChatGPT(command);

    console.log(speechOutput);

    return handlerInput.responseBuilder.speak(speechOutput).getResponse();
  },
};

const skillBuilder = Alexa.SkillBuilders.custom();

const handler = skillBuilder
  .addRequestHandlers(
    ChatGPTCommandIntentHandler,
    Alexa.CancelIntentHandler,
    Alexa.HelpIntentHandler,
    Alexa.StopIntentHandler,
    Alexa.NavigateHomeIntentHandler
  )
  .lambda();

export { handler };

In theory, I managed to do everything by midnight. It was a bit messy, but I did it.

Tonight, I tried to understand why everything is working fine, but Alexa can't understand voice commands. It doesn't detect the intent. It works very well via text, but I have to finish this job before I think about publishing the Skill or making the code available in full. If you're interested, talk to me.

It wasn't my intention to delve into the technical part here, but rather to demonstrate that you can use ChatGPT to produce more. Can you? Yes! But only up to page three.

Reality

The reality is that I finished 80% of the work in 20% of the time, but there was a lot going wrong. 80% of the time was spent debugging and refining the part that I thought would be the easiest, the Interaction Model creation. Is it the Alexa Developer Console's fault? I don't know, but it's not as simple as it seems, and there's still a lot to adjust.

Early opinion on the API

I had the impression that the OpenAI API is still quite weak compared to the ChatGPT itself, and this seems to be more about design choices than capacity. It could also be due to parameter adjustments. There is still a lot to learn about the API and I just made some quick adjustments to test it out.

export async function queryChatGPT(query) {
  const prompt = query;
  const headers = {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
  };
  const data = JSON.stringify({ // These parameters here control
    prompt: prompt,             // the characteristics of the responses.
    max_tokens: 50,             // Read the docs.
    temperature: 0.3,
    n: 1,
  });

  const response = await axios.post(endpoint, data, { headers: headers });
  const answer = response.data.choices[0].text.trim();
  const speechOutput = answer.split("\n")[0];

  return speechOutput;
}

I'm using the endpoint https://api.openai.com/v1/engines/davinci/completions, not the davinci-codex.

About the experience

Developing with complete AI assistance and using Google by choice was very interesting and dynamic.

However, there were moments when the ChatGPT misled me and made me delete functional code to try to implement something that didn't make sense.

For example, it wrote a Code Snippet that had something like const chatGPT = new AWS.ChatGPT(). I was happy thinking that Amazon had integrated Chat into the SDK, but later I felt stupid when I researched it.

It is an excellent liar, and if you do not proceed with caution, it can literally tell you that a pig's nose is a socket and you can believe it, and the pig will pay the price.

In summary, for now, the developer remains highly relevant. Architecture decisions need to be made, errors need to be debugged, parameters refined, and UX defined. There is still a world of things that cannot be delegated to AI.

Forem: Saulo Dias

Avoiding Port Conflicts in Testcontainers with Random Port Binding

The Trick

Minimal Example

Using It in a Test

Why This Matters

How to Use Dependency Injection in C# Extension Methods

The Problem

The Pattern

Example: Enhancing a Widget

The Extension Method

Setting Up in Program.cs

Testing the Extension Method with xUnit

Output

Why This Works

Limitations

Conclusion

Browser Storage and BehaviorSubject: Achieving Consistent State in Angular Through Storage Decorators

Why Use These Decorators?

How It Works

LocalStorage

SessionStorage

Custom JSON Converter

Using NgxStorage in an Angular Service

Using the Service in a Component

Setting Fallback State

Understanding TypeScript Method Decorators

What are Method Decorators?

Syntax

Example: Required Property Decorator

Conclusion

Elevating Data Integrity in Your React Application with Converters in Storage Management

Understanding the Challenge

Enter Converters

Leveraging Converters in Practice

1. Handling Dates with Dayjs

2. Storing Enumerations

3. Persisting Custom Classes

Conclusion

React hooks: useSessionStorage and useLocalStorage

Saulo Dias ・ Jul 1 '22

Leveraging ES2023 Array Methods in TypeScript for React

ES2023 Array Methods

TypeScript Setup

Browser Compatibility

React and Beyond

Example: sort vs. toSorted

Other new Methods

Conclusion

ApexCharts: The underrated charts library

Prova de Conceito: Geolocalização Econômica para Identificação da Cidade do Usuário

Introducing the CV Schema Proposal: A More Streamlined Approach to Applicant Information

saulodias / cv-schema

The CV Schema is a JSON format for representing applicant information. It's easy to implement and adaptable to different languages and cultures. Benefits include uniformity, simplicity, extensibility, adaptability, and efficiency.

CV Schema Proposal

Overview

Schema Description

Never Overlook Equality Verification

Using Axios more elegantly with Interceptors and Array of URLs

Setting up Access Token and API Endpoints

Creating an Instance of Axios

Using Interceptors to Set Base URL

Using an Array of URLs to Fetch Data

I got help from ChatGPT to integrate Alexa Skill in a mini marathon

Mini marathon

Reality

Early opinion on the API

About the experience

Setting Up in `Program.cs`

Example: `sort` vs. `toSorted`