DEV Community: Jean Vidal

Preparação para Entrevistas Globais: Minhas Experiências e Aprendizados

Jean Vidal — Sun, 01 Dec 2024 02:42:50 +0000

Há algum tempo eu venho recebendo perguntas de pessoas conhecidas e desconhecidas, tanto da área de TI, quanto de outras áreas, pedindo ajuda sobre como foi minha experiência conseguindo uma vaga internacional, como se preparar para as entrevistas, como buscar essas vagas e como se tornar atrativo para que os recrutadores entrem em contato.
De boa vontade eu sempre me disponibilizo em ajudar e dou dicas, sempre seguindo as experiências que tive e do que funcionou ou não.

Hoje contarei um pouco dessas minhas experiências e de que forma funcionou pra mim e que pode ajudar vocês.

É de extrema importância que esses passos sejam feitos por vocês mesmos, pois terá um domínio maior do que será feito e isso vai te ajudar nas entrevistas, bem como nos futuros ajustes que sempre serão necessários.

Então, vamos começar.

Onde buscar as vagas

Eu sempre utilizei o LinkedIn como currículo e fonte primária para busca de vagas, e embora existam outras plataformas, além da aplicação direta nas empresas, o foco das minhas aplicações foi 99% no LinkedIn e em vagas com aplicação direta pela plataforma.

Dito isto, o primeiro dever de casa nada mais é do que organizar o LinkedIn.

Projetos - Coloque todos os projetos que atuou, seja pessoal ou de empresa - apenas cuidado para ocultar informações sensíveis.

Cursos - Coloque todos os cursos que já fez, mesmo que básico, pois mostra que você teve o mínimo contato com o assunto.

Experiências - Isso foi uma das coisas que mais mudei durante o tempo, e a principio achava importante colocar o máximo de informações que pudesse, inclusive um resumo do contexto da empresa, mas fui percebendo que ou os recrutadores não liam ou tinham que repassar por todas as informações de qualquer forma, o que tornava ela redundante. As mudanças que fiz é tem funcionado foram deixar o mais objetivo possível para os recrutadores, então o que considero importante destacar são:

Que tipo de projeto atua e quais tecnologias;
Quais entregas foram feitas;
Quais skills aprendeu, utiliza e/ou utilizou atuando naquela posição.

Vagas Nacionais ou Internacionais

Caso você já esteja buscando por vagas internacionais, é importante manter o foco nessa busca, por isso sugiro mudar o idioma totalmente para o idioma alvo que você busca atuar. Fazer isso é importantíssimo e foi uma das coisas que fez muita diferença quando eu buscava minha primeira oportunidade internacional. Assim que mudei todo o meu currículo para inglês, passei a receber mais contatos de recrutadores com vagas internacionais.

Agora que passamos o dever de casa, para para a preparação.

Como me preparei

Minha metodologia de preparação é bem simples e posso separá-la nas seguintes etapas:

Aplicação
Aplicava no máximo de vagas que eu conseguia e que se encaixava com o que eu buscava. Para cada vaga que eu aplicava, eu salvava as informações: empresa, requisitos obrigatórios e requisitos desejáveis e então utilizava essas informações para priorizar meus estudos.
Dados complementares
Após agendado a entrevista, eu pesquisava um pouco sobre empresa, para entender a área e região de atuação, tamanho da empresa e mais alguma informação que ajudasse.
Processo de estudo
Com uma lista de informações de várias aplicações, eu seguia os seguintes critérios:

Selecionava com base nos requisitos obrigatórios os assuntos que mais se repetiam nas vagas;
Marcava para cada assunto se eu dominava, precisava reforçar ou não sabia;
Proximidade da entrevista.

E com base nesses critérios eu ordenava minha prioridade de estudo e começava o que precisava ser feito.

Aplicações para vagas internacionais

No início da minha busca por vagas internacionais, como meu inglês ainda estava muito aquém do necessário, então eu aproveitava as entrevistas para melhorar e praticar. Eu aplicava para vagas que as vezes não era o que eu queria, apenas para poder me adaptar e acostumar ao processo e ao idioma, e além disso eu gravava minhas entrevistas para poder revisar o que eu tinha falado errado, tanto gramaticalmente, quanto tecnicamente.

Um fato curioso e engraçado(hoje rsrs) é que minha primeira entrevista foi com um indiano e eu não entendia nada que ele falava. Pedi para o recrutador escrever (meu reading era muito melhor) e passei a entrevista toda praticamente dessa forma. Obvio que não passei, mas passado o trauma, eu pude aprender muito com essa experiência.

Todo esse processo se repetiu por muito tempo e eu recebi muitos NĀOS, até que após 2 anos de persistência, evolução e muita oração, eu recebi meu SIM para minha primeira vaga internacional.

Eu não sei de qual religião você é ou se tem alguma, mas eu sou cristão, e se tem uma coisa que definitivamente eu creio que fez diferença, foi que durante os 2 anos eu sempre tentei com minhas próprias forças e confiando em minhas capacidades, mas no momento antes da última entrevista, eu orei e entreguei nas mãos de Deus, e o resultado foi o melhor possível.

O que deixo de experiência para vocês é que não desistam, mas pelo contrário, aproveitem o processo e evoluam como profissionais. Eu costumo pensar que tudo que passamos na vida é para nos fazer aprender e evoluir para o próximo estágio, e consequentemente ajudar as pessoas que ainda estão presas no mesmo estágio de dificuldade e que ainda não entenderam o que precisam aprender.

Não espere seu inglês estar “pronto”!
Aplique para as vagas e deixe que o recrutador avalie o seu inglês.

Refatore suas falhas e tente novamente. Erre rápido e aprenda rápido também se aplica nesse contexto.

Espero que minhas experiências ajudem a cada um a superar seus desafios e a avançarem ao próximo nível.

Me sigam no LinkedIn e fiquem com Deus!

From Theory to Practice: Strategy Pattern in Real-world Scenarios

Jean Vidal — Mon, 22 Apr 2024 16:37:14 +0000

Introduction

Some time ago I was with a task to implement the following flow:

Get data from database;
Filter data by some criteria;
For each register, access one API to get data and complete informations;
Record all data on database.

At this time, everything was ok. But...

The Problem

I had not received any API and there was a risk of not receiving it and having to do web scraping.

So I needed to implement something where even if the data source changed there wouldn't be a big impact.

The Options

At least, I knew the data could be obtained by:

API
Web Scraping

So I needed to implement something that could easily choose the data source.

The Solution

After searching for while I found the perfect pattern for my problem.

Strategy Pattern

This pattern allows us to encapsulate different strategies and the possibility to choose one at runtime based on some conditions.

In my case I defined separate strategies for get data by API or Web Scraping and dynamically selected the better strategy based on my needs.

See how it works:

1- I created an interface with the method signature that will retrieve the data;

public interface DataRetrievalStrategy {
    List<DataItem> retrieveData(String dataStringOrObjectData);
}

2- I created the classes that will implement my interface;

public class APIDataRetrievalStrategy implements DataRetrievalStrategy {
    public List<DataItem> retrieveData(String dataStringOrObjectData) {
        // ...
        return dataItems;
    }
}

public class WebScrapingDataRetrievalStrategy implements DataRetrievalStrategy {
    public List<DataItem> retrieveData(String dataStringOrObjectData) {
        // ...
        return dataItems;
    }
}

3- I implemented all the strategies that I would try.

WebScrapingSeleniumDataRetrievalStrategy;
WebScrapingPuppeteerDataRetrievalStrategy;
WebScrapingPythonDataRetrievalStrategy;
WebScrapingRDataRetrievalStrategy.

4- So I just needed to instantiate what I would use.

public class Microservice
{
    public static void Main(string[] args)
    {
        DataService dataService = new DataService();

        dataService.SetStrategy(new WebScrapingSeleniumDataRetrievalStrategy());
        List<DataItem> seleniumDataItems = dataService.RetrieveData("dataStringOrObjectData");

        dataService.SetStrategy(new WebScrapingPuppeteerDataRetrievalStrategy());
        List<DataItem> puppeteerDataItems = dataService.RetrieveData("dataStringOrObjectData");

        dataService.SetStrategy(new WebScrapingPythonDataRetrievalStrategy());
        List<DataItem> pythonDataItems = dataService.RetrieveData("dataStringOrObjectData");

        dataService.SetStrategy(new WebScrapingRDataRetrievalStrategy());
        List<DataItem> rDataItems = dataService.RetrieveData("dataStringOrObjectData");
    }
}

Conclusion

In the end, I was able to solve my problem by providing options for the team to make decisions. I also left the option of implementing some ways of measuring each strategy's performance, to have a more efficient solution in terms of performance, but this was not possible due to the time available to act.

It is worth mentioning that a design pattern solves a specific problem and in this case, this pattern solved mine perfectly. It will not always be possible/necessary to use design patterns and it is extremely important that we, software engineers, are able to evaluate possible paths.

We're done here folks.

I hope you all enjoyed it and that this helps in some way.

How ChatGPT helped me build an awesome React component

Jean Vidal — Fri, 13 Oct 2023 21:23:47 +0000

Introduction 📰

In this article, I'm going to tell you how I used ChatGPT to help me find a solution to a problem that I faced while creating a React component.

I needed to create an Table Component for a Design System, where inside were an HTML Table but I didn't create the same as a HTML Table or as usually passing two parameter, first one the data and second one the rest configs.
I wanted to create something mixed, using Composite Pattern where would be an Table Root receiving data and its configs and then Column as a children receiving its own data and configs.
I choose this pattern because I thought that in the future it could grow with many other behaviors but without affect others.

The Problem ⚠️

When I created this proposal, the problems and questions I faced were:

How would I set up the HTML structure if the data was in Table but the necessary information to create the the TR and TH THML tags were in the children of Column component?
How can I get access to data and then set up the HTML table?

See the example bellow:

export interface TableRootProps {
    values: any[],
    children: ReactElement | ReactElement[] | null;
    title?: string;
    hasTotalizer?: boolean;
    maxHeight?: string
}

function TableRoot({
                        title, 
                        children = null, 
                        values, 
                        hasTotalizer = false,
                        maxHeight = '430px',
                        ...props
                    }: TableRootProps) 
{
    return (
        <table>
            <thead>
                <tr>
                    HEADER DATA
                </tr>
            </thead>
            <tbody>
                CONTENT DATA
            </tbody>

        </table>
    )
}

export interface ColumnProps {
    header: string,
    field: string,
    sortable?: boolean,
    maxWidth?: string,
    dataType: string,
    chipped?: boolean,
    format?: string,
    visible?: boolean,
}

function TableColumn( {visible = true, ...props} : ColumnProps) {
    return null;
}

TableRoot.displayName = 'Table.Root';
TableColumn.displayName = 'Table.Column';

export const Table =
{ 
    Root: TableRoot,
    Column: TableColumn,
};

My barrier was to find an way to get the HeaderData and the ContentData in the same location because some datas were separated in some Column components.

I began to research about the React more deeply to understand a way to did this and I found the React Chidren!
It allow us to manipulate the children props.

But I was making one mistake. I was trying to manipulate the data inside Children in some way.

My thoughts were going the wrong way and I didn't know a way to clear that path.

Were at that moment that I decided to share this difficult with ChatGPT.

ChatGPT And My Question ⚛️

I explained to ChatGPT my context giving it the information about Stack, Composite Pattern and then I asked how can I get the data to build the table.

After trying several questions I arrived at this final question bellow that gives me a conceptual answer and a code example to better understand.

My "Question" and The Solution ⁉️

Make an App with React and TypeScript.
This app has a functional component called TableRoot that receive as a children using composition two functional components called TableColumn and TableAction.
The TableColumn has only an header and a field as a properties.
TableAction has only an icon and a click event as a properties and must be receive all data by properties.
The TableRoot must be return as a result an HTML table with 3 columns of type TableColumn and with 3 lines with all values dynamic, besides, one column of type TableAction with they properties with eyes icon and click event receiving one parameter containing all values of line and then show it on console.
The click event parameter of TableAction, must be created in main App and then passed as a property to TableAction.
All data must be created in main App and then passed by properties.

❌ Attention: Do not copy the answer code and use it directly. Try to understand how it works, what the concept is behind it and try to create it in your own codes using the logic of the answer as a basis.

There are many details in one question, I know it, but how much details we provide to ChatGPT is better. Maybe, we don't provide many details, but it has worked for me.

If you observe, I provided my component structure in details. I already built all structure with my properties, names, patterns and provided it to ChatGPT for its focus in my problem, which was children.

And then... it were on target! 🎯

The ChatGPT gave me an answer that I was waiting for.
The answer contained the missing detail for me to complete my puzzle.
The informations about how to use the Children to catch values in children's property cloning children and getting data by properties.

I was able to understand the concept behind the resource and also saw how to apply it.

The code has many information but i'll show bellow part of the code that made the difference.

//Getting the properties of child columns
Children.forEach(children, (child) => {
  if(child?.type === TableColumn)
      propertiesFromColumnChildren.push(child?.props);
});

//Treating the values for those that should be displayed
const treatingValues = (value: any) =>{

  if(!propertiesFromColumnChildren){
      return [];
  }

  return propertiesFromColumnChildren.reduce(function(acc, item) {
      acc[item.field] = value[item.field];
      return acc;
  }, {});
};

useEffect(() => {
  tableData = values.map(treatingValues);
  setFilteredTableData(tableData);
}, [values])

//Creating the HTML table body
const creatingTableBody = (item: object, iTr: Key | null | undefined)=>{
  return (
      <tr key={`tr${iTr}`}>
          {
              Children.map(children, (child: any, iTd) => returnCellElementByType(child, item, iTd))
          }
      </tr>
  )
}

//Part of the returnCellElementByType metohd that clones the contents of the children
{React.cloneElement(child, { children: child.props.children, onClick: child.props.onClick(item)})}

To see the all code and more details click here on the code on GitHub

Conclusion 💡

Finally, I can say that ChatGPT can actually help us developers learn, code better and, over time, increase our productivity.

But, we need to be careful. Beloware some of my thoughts.

We can use the ChatGPT as a "copilot", helping in specific doubts or to learn how to refactor the code.
The code generated by ChatGPT shouldn't be copied and used in your application. If you want to learn and improve yourself, you first need understand what your question is, what you need to fix and then ask a specific question and understand the ChatGPT's response, considering your context.
You need make the questions correctly. The ChatGPT needs context to create a more fitable response.
Not all answers will be correct. You need read it and understand if this will make sense to you.

I think of ChatGPT as another good tool to help me be more productive, but the thinking beings are still us, the developers.

I hope you liked it. 👍
Comment what you think, give me feedbacks and see you! 👋

Standardizing validation and error messages using Resource (.resx) files in .NET

Jean Vidal — Mon, 24 Jul 2023 13:40:03 +0000

The Problem

This month I was analyzing one code project that I needed to work and when I saw the validations and errors handling my feeling was like there was something strange and that could be different.

The code was written more or less like this:

public class User
{
    public string Name { get; set; }
    public string Email { get; set; }
    public int Age { get; set; }
    public string Address { get; set; }
    public string PhoneNumber { get; set; }
}

[ApiController]
[Route("api/users")]
public class UserController: ControllerBase 
{
    [HttpPost]
    public IActionResult CreateUser(User user) 
        {
        try 
                {
            if (string.IsNullOrEmpty(user.Name)) 
                        {
                return BadRequest("Name field is required.");
            }
            if (string.IsNullOrEmpty(user.Email)) 
                        {
                return BadRequest("Email field is required.");
            }
            if (user.Age <= 0 || user.Age > 150) 
                        {
                return BadRequest("Age must be between 1 and 150.");
            }
            if (string.IsNullOrEmpty(user.Address)) 
                        {
                return BadRequest("Address field is required.");
            }
            if (string.IsNullOrEmpty(user.PhoneNumber)) 
                        {
                return BadRequest("PhoneNumber field is required.");
            }

            return Ok("User created successfully!");
        } 
                catch (Exception ex) 
                {
            return StatusCode(500, "An error occurred while processing the request.");
        }
    }
}

When we need to use many IF statements, there will almost always be something wrong.

It can make the code harder to maintain and test. Furthermore, it violates the Single Responsibility Principle (SRP) because the controller's main responsibility should be handling HTTP requests and responses and not to write validation logic.

To improve code quality and maintainability, it's better to follow the Separation of Concerns principle and apply validation using separate components. One common approach is to use Data Annotations for model validation and to perform more complex validation using custom validation attributes or separate service classes.

It can work well, but i kept thought about how could i standardize messages and manage them in one place? How could I do it differently?

I thought for a while about it and then i remembered about an old project with something like a key-value pairs storing messages.

I looked it up and I found out what it was… .NET Resources (.resx) Files

The Proposal

What is .NET Resources (.resx) Files?

In summary is a XML based file, formatted as a collection of name-value pairs, that can store localizable resources like a string and binary data such as images, icons, audio, etc.

Sure, but how is it help me to solve the problem?

This resource is commonly used for localization purposes, allowing you to provide different language versions of your application and this is also useful for managing application-specific resources that may need to be changed without modifying the source code, such as error messages, user interface labels, and graphics.

Using it we can maintain the principle of separation of concerns, because the resource files enable separation of resources from code, promoting better maintainability and ease of localization.

My main idea was to keep all messages in one place for the entire system and standardize them.

For my proof of concept (PoC), I defined the following files and their respective messages:

ValidationMessages.resx

Name	Value
Length	The field {0} must be between {1} and {2} characters.
Email	The field {0} is an invalid email address.
Required	The field {0} is required.

ErrorMessages.resx

Name	Value
400	Invalid request. Please provide valid data.
401	Authentication required. Please provide valid credentials.
403	Access denied. You are not authorized to perform this action.
404	We couldn't find what you were looking for.
500	Something went wrong on the server. Please contact the administrator.

After that I started to create a practical project to test my idea.

The Practical Project

For the PoC I thought of creating a project that demonstrated the use of Resource.resx Files to manage validations and organize validation and error messages.

To see my step-by-step process of creating the project, seeing the complete code and running it, visit the project's GitHub.

Now, I´ll describe my problems and insights to create this project and how I tested it.

The technologies and tools used for this practice was:

VS Code
.NET 7

At this steps I faced some annoying problems mainly related to VS Code.

Using the Visual Studio IDE we have in the context menu an option to create new Resources and when we use it, the necessary configurations are created automatically.

Easy isn't it?

Not exactly.

Using VS Code, it took a few more steps because I couldn't find any templates to run a command like dotnet new resource n ErrorMessages.

The following steps were taken to create the resource files.

I created the .resx file manually. I needed to find out what the structure is like on the Microsoft website.

<?xml version="1.0" encoding="utf-8"?>
<root>
    <data name="Length" xml:space="preserve">
        <value>The field {0} must be between {1} and {2} characters.</value>
    </data>
</root>

I tried to manually create the resource designer file, that is generated automatically by IDE, but it doesn´t work well.

using System.Resources;

namespace WebApiResource.Resources2;

public static class ErrorMessages
{
    private static readonly Lazy<ResourceManager> _resourceManager = new Lazy<ResourceManager>(() =>
        new ResourceManager(typeof(ErrorMessages)));

    public static string GetString(string key, params object[] args)
    {
        return string.Format(_resourceManager.Value.GetString(key), args);
    }
}

Finally, I stopped to fight with this manually designer file and then created this configuration in the .csproj that generated the designer files automatically.

<ItemGroup>
  <EmbeddedResource Update="Resources\ErrorMessages.resx">
    <Generator>PublicResXFileCodeGenerator</Generator>
    <StronglyTypedFileName>Resources\ErrorMessages.Designer.cs</StronglyTypedFileName>
    <StronglyTypedNamespace>WebApiResource.Resources</StronglyTypedNamespace>
    <StronglyTypedClassName>ErrorMessages</StronglyTypedClassName>
    <LastGenOutput>ErrorMessages.Designer.cs</LastGenOutput>
    <StronglyTypedLanguage>CSharp</StronglyTypedLanguage>
  </EmbeddedResource>
  <EmbeddedResource Update="Resources\ValidationMessages.resx">
    <Generator>PublicResXFileCodeGenerator</Generator>
    <StronglyTypedFileName>Resources\ValidationMessages.Designer.cs</StronglyTypedFileName>
    <StronglyTypedNamespace>WebApiResource.Resources</StronglyTypedNamespace>
    <StronglyTypedClassName>ValidationMessages</StronglyTypedClassName>
    <LastGenOutput>ValidationMessages.Designer.cs</LastGenOutput>
    <StronglyTypedLanguage>CSharp</StronglyTypedLanguage>
  </EmbeddedResource>
</ItemGroup>

Then, when I ran the command dotnet build the files were created.

With all the resources OK, I just needed set up my User model and my controller.

For User Model I used Data Annotations and set up the Validation Resource and the Resource Names.

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using WebApiResource.Resources;

namespace WebApiResource.Models;

public class User
{
    [DisplayName("Name")]
    [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ValidationMessages))]
    public required string Name { get; set; }

    [DisplayName("Email")]
    [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ValidationMessages))]
    [EmailAddress(ErrorMessageResourceName = "Email", ErrorMessageResourceType = typeof(ValidationMessages))]
    public required string Email { get; set; }

    [DisplayName("Description")]
    [Range(minimum: 5, maximum: 10, ErrorMessageResourceName = "Length", ErrorMessageResourceType = typeof(ValidationMessages))]
    public string? Description { get; set; }
}

For User Controller I called the validations from the Data Annotations in User Model and got the messages from the Resources for Validations and Errors.

using Microsoft.AspNetCore.Mvc;
using WebApiResource.Models;
using WebApiResource.Resources;

namespace WebApiResource.Controllers;

[ApiController]
[Route("api/v1/users")]
public class UserController : ControllerBase
{

    public UserController()
    {
    }

    [HttpPost]
    public IActionResult Post([FromBody] User userModel)
    {
        try
        {
            return Ok(userModel);
        }
        catch (Exception ex)
        {
            var statusCode = GetHttpStatusCodeFromException(ex);

            var errorMessage = ErrorMessages.ResourceManager.GetString(name: $"{statusCode}");
            return StatusCode(statusCode, errorMessage);
        }

    }
    private static int GetHttpStatusCodeFromException(Exception ex)
    {
        if (ex is HttpRequestException httpRequestException)
        {
            if (httpRequestException.StatusCode.HasValue)
            {
                return (int)httpRequestException.StatusCode.Value;
            }
        }
        return 500;
    }
}

So, what were the returns after all?

All data Ok

Request

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "Name": "Jean Vidal",
  "Email": "j.vidalnunes@gmail.com",
  "Description": ""
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://localhost:5041/api/v1/users", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Response

//STATUS 200 OK
{
    "name": "Jean Vidal",
    "email": "j.vidalnunes@gmail.com",
    "description": ""
}

All data Inconsistent

Request

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "Name": "",
  "Email": "",
  "Description": "SS"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://localhost:5041/api/v1/users", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Response

// STATUS 400 BAD REQUEST
{
    "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
    "title": "One or more validation errors occurred.",
    "status": 400,
    "traceId": "00-cdf77046ab5c73d044db6975adf1b07f-4f7e15bd478f56f2-00",
    "errors": {
        "Name": [
            "The field Name is required."
        ],
        "Email": [
            "The field Email is required.",
            "The field Email is an invalid email address."
        ],
        "Description": [
            "The field Description must be between 5 and 10 characters."
        ]
    }
}

Next Steps

Now, as next steps I thought of encapsulate the logics:

For Validations

I´ll create a custom IValidationAttributeAdapterProvider to automatically find the validations error messages from the ValidationMessages Resource, without create a custom validation attribute or specifying ErrorMessageResourceType and ErrorMessageResourceName for each attribute.
For Errors

I´ll create a custom exception filter CustomExceptionFilterAttribute to encapsulate the logic for retrieve error messages from the ErrorMessages Resource. This filter is applied to all actions in your controllers.

Conclusion

This idea work well and can be one way to standardize all error and validation messages.

Here are some precautions that must be taken in this and any other case.

There is no silver bullet -
1. All cases must be evaluated, tested, and considered their pros and cons.
This may not be the best solution to your problem -
1. I read about FluentValidation library and it is a good choice for data validations.
2. You should consider whether an additional library to your project/team will have any impact, plus you need to assess the learning curve. I even believe that it could be used with Resource without problems.
Consider maintaining the Resource files -
1. Resource files can become bloated if not managed properly, leading to increased memory usage and longer application startup times.
2. If you have multilanguage applications, this can be a challenge to update and maintain multiple resource files for each supported language or culture.
3. The process of deploying and updating resource files in distributed environments can be complex, requiring careful version management.

Despite everything, I believe it's a good solution if you don't have anything else worked on and you're starting to have problems or the need to standardize messages, both validation and errors.

Localization, Multilanguage and Separation of Concerns -
1. Enable separation of resources from code, facilitating localization and internationalization efforts.
2. Support localization, enabling you to provide messages in multiple languages. This is crucial when building multi language applications, ensuring a consistent user experience across different locales.
3. Placing error and validation messages in resource files separates them from the application logic, adhering to the principle of separation of concerns. This enhances code readability and maintainability.
Native -
1. Visual Studio provides tools for creating and managing resource files, while the .NET Framework offers APIs for accessing resources at runtime.
Centralization -
1. Allow you to centralize all error and validation messages in one place. This simplifies maintenance and makes it easier to update messages without having to modify code throughout the application.
Consistency -
1. By standardizing error and validation messages in resource files, you ensure a consistent and uniform messaging system throughout the application. This helps in providing a better user experience and reduces confusion for users.
Reusable Messages -
1. Allow you to define reusable messages that can be used across different parts of the application. This promotes code reusability and avoids duplication of messages.

We're done here folks.

I hope you all enjoyed it and that this helps in some way.

Do You Know What is TDD?

Jean Vidal — Wed, 07 Jun 2023 14:47:52 +0000

What is TDD ❓

To answer this question, we can start talking about its origin...

🚀 Origin

It emerged around 1990, where it was initially introduced by XP (Extreme Programming), by Kent Beck.
The intention was to encourage the development of simple codes, so that they could be checked and validated with an equally simple technique.

As mentioned above, all started thinking about simple codes, and we need keep that thinking.

But, what is the concept behind TDD?
Why is it different from other unit tests?

💡 Concept

Test Driven Development - Methodology which preaches that the tests must be written before the coding itself, different from the traditional model.

Is it!

The main idea is to create small tests based on initial understand and change or write new code only if the test fails, to avoid duplication of tests and code.

But how we can do it?

🔢 Steps

Red: The first step is write the test and at this point the code doesn't exist, so.. the test must fail.
Green: The second step is write the code to pass the created test. The main focus should be on passing the test and not on good practices or the best code.
Refactor: The third and last step is to refactor the code and test. The main point is find the best way to write the both code and tests, avoiding duplicate codes and thinking about DI, SRP, etc.

After understanding the theories about TDD, we need to know which tools can be used to do what we need to do.

Bellow, I have listed some tools for some languages that we can use.

For our examples, I'll using JavaScript for the FrontEnd and .Net for the BackEnd, and the tools choosen for testing were Jest and xUnit respectively.

📚 Libraries

〰️ .Net

MSTest
xUnit
nUnit

📜 JavaScript

Jest
Mocha + Chai

♨️ Java

JUnit

🐘 PHP

PHPUnit

📘 Examples

✅ Good Practices

To facilitate the creation of tests we can use some patterns, and just below I have listed two of them with my understanding of their steps.

Tests Structures AAA and GWT

Common patterns of writing unit tests, and making code easier to read and understand with 3 steps.

Given/Arrange - Define a known state;
When/Act - Run the application;
Then/Asset - Make sure the new state is the expected state.

📍 Simple Way

Now, we can see the .Net codes using the steps seen earlier.

Step 1 - Red

[Fact]
public void TestsTemperatureConversor()
{
        //Given/Arrange
        double fahrenheit = 32;
        double celsius = 0;

        //When/Act
    double calculateVal= TemperatureConverter.FahrenheitToCelsius(fahrenheit);

        //Then/Assert
        Assert.Equal(celsius, calculateVal);
}

//First to fail
public static class TemperatureConverter
{
    public static double FahrenheitToCelsius(double temperature)
    {
        throw new NotImplementedException();
    }
}

Step 2 - Green

public static class TemperatureConverter
{
    public static double FahrenheitToCelsius(double temperature)
    {
        return Math.Round((temperature - 32) / 1.8, 2);
    }
}

Step 3 - Refactor

/*
It can be refactored or not. If the code is very simple, 
there is no need to refactor. In another scenario, 
this could be refactored using an external service for example.
*/
public static class TemperatureConverter
{
    public static double FahrenheitToCelsius(double temperature)
    {
        return Math.Round((temperature - 32) / 1.8, 2);
    }
}

💪 Practice

The practice code is on Github, take a look. There are the codes of javascript and .net tests.

If you prefer, I can record a video about this article explaining all the steps, including project creation, and post it on YouTube.

Give me feedback on this.

↔️ Pros and Cons

✔️ Pros

Ability to reduce small bugs
Cleaner and simpler code, eliminating unnecessary codes
code reliability
Favors the documentation process
Facilitates refactoring

✖️ Cons

Learning curve
Testing becomes part of project maintenance
Makes the project "expensive"

⁉️ Doubts

Comment, bring your doubts and suggestions to improve this and the next contents.

🔗 Links

What is Design System and how to build it

Jean Vidal — Tue, 04 Apr 2023 17:19:22 +0000

What is Design System?

I separated two explanations to define the concept of Design System (DS), one more objective and direct, and another that brings the vision of how complete a DS can be.

Concept 1

A collection of reusable components, standardized for a given product, site or web system.

Concept 2

A complete set of design pattern (style guide) and documentation that comes with a UI tool kit, including UI patterns, UX design principles, and components.

When we look at a design system in this context, it embodies everything designers and developers need to build and scale digital products.

Some other things that you will find in a DS are:

Brand guidelines
Accessibility guidelines
UI design guidelines
Governance
Best Practices
Design system roadmap and releases
Code snippets
CSS variables and design tokens
UI Kit (an image-based version of the design system components)
Downloadable Resources

Design System x Pattern Library x Style Guide x Component Library

After understanding what a DS is, it is very common to confuse several concepts that are related to it, because the line of difference is very tenuous.

For that, I separated the most easily confused terms and what is their relationship with the DS.

Component Library

In short, it's a collection of UI components in a DS.
As part of the DS, it's a library of components that can reduce the risk of any variation between products or having with different components in different places.
They deal with the source code of the UI elements, being a block of reusable code that can stand alone or be part of several UI Patterns — for example, a button.

Pattern Library

In short, it's a collection of UI patterns in a design system.
As part of the DS, it's a set of design patterns for use in a company.
A group of components that designers use to solve usability issues — for example, a navigation bar with a logo, links, search form, and button.

Style Guide

It's a document that includes the design guidelines of a company, or, to a lesser extent, of a specific project, brand or product.
Provides context and instructions for the patterns and components of a DS — for example, HEX color codes, typography scales, uses, pros and cons, etc.

Problems to solve

Now that the concepts are clearer, it's very common in most projects that we have several problems that could be solved with the construction of a DS and/or with the use of some other tools that facilitate the development.

Below I will mention some of the most frequently occurring problems.

Lack of standard in implementations

When there is no standardization documentation, a DS or someone more senior to guide and validate the implementations, it's very common for there to be differences in the same implementation made by different devs.

This is understandable at some point, since each dev has their own way of programming, but when we talk about standardization, I mean extracting the maximum of the language resource to make the code more efficient, regardless of who is programming.

Let's go to the example?

Imagine that we are going to build a custom InputText component using React with TypeScript.

Now we need to pass some properties that will be used in the input element.

Many devs would do it like this:

interface TextInputProps {
 placeholder?: string;
}

export function TextInput({ placeholder: TextInputProps}){
 return (
  <input placeholder={placeholder} />
 )
}

This is not a recommended approach, as there are several native properties of the input element, and thus, whenever it's necessary to use a new native property, we would have to add a new field in the properties.

But what's the best way to do this?

Using one of the principles of object orientation, inheritance!

interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>{
  elementoPersonalziado: string;
}

export function TextInput({ elementoPersonalziado, ...props}: TextInputProps){
 return (
  <input elementoPersonalizado={elementoPersonalziado} {...props} />
 )
}

This way, our property will inherit — extends — the attributes of an HTML input element, and will even allow us to include specific properties from the custom component.

In the component's implementation, we can use the spread operator to pass all the properties to the input element, separating the elements that we will use for some validation or in a different way.

Having access to these standards and good practices is what will start to make a difference in the quality of our code, and for that, the dev must first be curious, constantly learn, question why things are done the way they are and challenge themselves.
In addition, it's important that there is documentation with this type of content or implementations already made with this “quality standard”, usually made by more experienced devs.

Today there are many tools that help enrich this type of content and we will see one of them later on as a solution to this problem.

CSS Conflicts

Problems with CSS are more common than we think, and they start when we lose time to think and define a name that later may conflict with another CSS in the application, and that later we will no longer remember the meaning of that nomenclature.

In addition, having to create separate files — for those who like to organize the code — starts to make our project bigger and we spend more time developing, having to access different files all the time to act on a screen with several components.

Duplicate Codes

The lack of standardization and componentization of codes brings one of the worst problems we can have, which is code duplication.

By not having accessible documentation or none at all, especially when there are many projects, it's common for devs to end up recreating a component that already exists, without even knowing that it exists.

Another very common scenario is when the dev found the component, however, it needs one more resource that the component doesn't have, and because it's not programmed correctly, it doesn't allow the dev to add one more “power” to the component, inducing the dev to create a new component just to meet your need, thus creating a new problem.

Development time

As previously mentioned, each of the identified problems increases development and maintenance time, making the team work with a smaller amount of tasks than the team is actually capable of.

Not to mention the rework and waste of time ($$).

Misalignment with Figma prototypes

In some cases, there is a UX Design team that does essential work and creates the entire prototype of the components and screens, however, for reasons of not having time, or that it will take work — usually caused by not having the componentized screens, in addition to having duplicate codes, which induces the dev to redo the entire component — , the team doesn't develop the faithful component to what was proposed.

This, in addition to wasting an excellent opportunity to have components modeled with higher quality and focused on the customer, generates a feeling of unproductivity in the team when they miss deadlines recreating codes.

FrontEnd Documentation

After the popularization of agile methodologies, some people believed that it was no longer necessary to have detailed documentation of systems and their parts.

But not quite.

In fact, we no longer have extensive and unnecessary documentation that took a long time to build and that soon fell into disuse because they were out of date.
However, agile methodologies did not inhibit or invalidate the use of documentation, but rather brought new possibilities.

Although we can consider the detailing of the tasks created in tools, such as Jira, as documentation, there is still a need to maintain a living documentation, which details the components and screens created, as well as guidelines for their use.

FrontEnd Tests

The discussion about tests is long, many think it's important, some believe it doesn't have much priority, besides there are different ones for us to create these tests.

The truth is that testing is, and always will be, important!

That said, most of the time we only think about BackEnd tests, however, FrontEnd tests should receive the same attention.

In the next topics we will see how to solve this and other problems.

How to solve

Now that we have a little understanding of the issues identified earlier, I'll address some solutions that I've found and that I understand are applicable for most scenarios.

The creation, configuration and application of these solutions isn't complex, nor is it a lot of work — just a little —, however, it requires dedication, discipline, patience and synergy from the team to organize themselves and contribute together.

Design System

The DS itself will solve many of the componentization, reuse and standardization problems.

Pros

Allows reuse of components in different projects;
You can configure themes for different projects without recreating components;
Standardize codes;
Decreases development time, as many components are already created.

Cons

Large learning curve for those who have never created;
While a dev can create, it still takes the entire team to get involved to scale and evolve, which takes time and effort.

Mitigation of Cons

It can be done gradually, first creating the project and then creating the components as they are needed for use.

Tailwind CSS

What is it?

Just like Boostrap, Tailwind is a CSS framework that gives you the possibility to create layouts using a ready-made CSS framework.

In summary, the difference between the two is that as you need to customize Bootstrap more, it becomes more laborious, whereas TailwindCSS, because it has atomic classes, is like a lego game, where you can assemble each small part and create the larger parts in a much easier way.

Tailwind CSS works by checking all HTML files, JavaScript components and any other templates containing class names, and then generates the corresponding styles, then writes them to a static CSS file.

Pros

Avoids conflicts — Mainly because there is no need to name the classes. As the classes already exist, we only need to assemble the “lego”;
No additional file required — Avoiding creating CSS files for each component created;
It has clear and easy-to-understand documentation on the website;
Low learning curve;
Atomic classes;
Optimizes development time;
Responsive design;
Generates a static file with only the classes that will be used — This is one of the biggest gains, as it goes through the project and only includes the classes that will be used in the static file, also cleaning up the duplicates.

Cons

Verbose — For those who have never used Tailwind, like me, it can be strange at first. Having many microclasses placed directly on the element, without having to define a class or generate a file, may seem strange at first, but I guarantee you will learn quickly. For me it was a matter of 1 day until I felt more comfortable, and the documentation helps a lot.

Mitigation of Cons

Componentization — Componentization allows us to separate the needs of the system into smaller parts so that we can only apply CSS to what is needed.
Directives — It is a powerful feature that Tailwind provides, especially for those who still prefer to create custom classes, even using Tailwind.

Example of a directive:

<style>
  .btn {
    @apply text-base font-medium rounded-lg p-3;
  }

  .btn--primary {
    @apply bg-sky-500 text-white;
  }

  .btn--secondary {
    @apply bg-slate-100 text-slate-900;
  }
</style>

/*...*/

<article>
  <footer class="grid grid-cols-2 gap-x-6">
    <button class="btn btn--secondary">Decline</button>
    <button class="btn btn--primary">Accept</button>
  </footer>
</article>

Storybook

What is it?

Storybook is an opensource tool that prepares a development environment for UI components. It allows us to develop and test components in isolation from our application, as well as serving as living documentation.

Pros

It's a living documentation of components and pages;
Allows the creation of FrontEnd tests;
We can use mocked data without the need for DB access;
We can have accessibility validations;
The main thing is to have an isolated environment (similar to Swagger).

Cons

Learning curve — To create it is a bit laborious, and it is important to always read the documentation that helps a lot when creating.

Mitigation of Cons

Creation can be done in phases — You can follow the construction of components and create the storybook to help with testing and tracking the creation of the component;
After creating one, the others follow the same pattern with few variations — This makes creating storybooks much easier, because as you create one, you can reuse it in others or just follow the same model;

Practice

Now that we've seen all the theory behind the DS and the chosen tools, we understand why each one is used and what problems they solve.

Now let's get to the execution!

Setup

Structure

For the setup structure I used VITE to make it easier, however, anyone who wants to can create the structure from scratch.

Follow the steps:

1- Access the directory where the project will be created;
2- Execute the creation command;

//Creating the project with VITE
npm create vite@latest

//Steps of VITE
//1 - Set the project name => DesignSystem
//2 - Select the framework    => React
//3 - Select the variant     => Typescript

3- Clean up unused files and folders. You can remove the assets folder and the index.css and app.css files.

Tailwind CSS

To configure Tailwind, the following steps are required:

1- Run the installation commands.

// Installing packages
npm install -D tailwindcss postcss autoprefixer

// Installing tailwindcss
// -p tor create the conf. file of postCSS
npx tailwindcss init -p

PostCSS — Bundler for CSS that automates CSS tasks.

Similar examples:

Gulp
Grunt
WebPack

Autoprefixer — Library that adds some prefixes for some features that work only in specific browsers.

Examples of prefixes:

Webkit
Moz

2- Configure application content files.

/* ./tailwind.config.cjs */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.tsx'
  ],
 //...
}

3- Create the global style file, global.css, and import the Tailwind CSS resources.

/* ./src/styles/global.css */

@tailwind base;
@tailwind utilities;
@tailwind components;

4- Import the global style in App.tsx to be able to use Tailwind CSS in pages.

/* ./src/App.tsx */

import './styles/global.css';

export function App() {
  return (
    <h1 className='font-bold text-5xl text-violet-500'>Hello World</h1>
  )
}

Font

Below are the steps to configure the fonts:

1- Fetch the DS font definitions in the project's Figma.

2- Get matching links and import in index.html, or import locally.

<!-- ./index.html -->
<!-- Roboto 400 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.cdnfonts.com/css/mark-pro?styles=78509,78516" rel="stylesheet" />

<!-- Mark Pro 400 e 500 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />

3- Set default font in Tailwind configuration file. We can extend — extend —, keeping Tailwind's default settings and adding our own, or just using ours.

/* ./tailwind.config.cjs */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.tsx'
  ],
  theme: {
    extend: {
      fontFamily: {
        roboto: 'Roboto, sans-serif',
        markpro: 'Mark Pro, sans-serif',
      }
    },
  },
  plugins: [],
}

Storybook

Now the steps to set up the storybook:

1- Run the install command.

//Starting the Storybook
npx sb init --builder @storybook/builder-vite --use-npm
//or
npx storybook init --builder @storybook/builder-vite --use-npm

2- Clean folder and files that won't be used. We can remove the src/stories folder and its files.

3- The .storybook/main.cjs file indicates the directory and files that the storybook will look for to put as documentation.

/* .storybook/main.cjs */

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  //...
}

4- Import global css into Storybook.

/* .storybook/preview.cjs */

import '../src/styles/global.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Tokens

Finally, we'll configure our DS tokens, which is basically passing Figma's token definitions to code.

1- Take the Design System's definitions of colors, sizes and spacing in Figma.

2- Import the tokens in the configuration file.

Note: The Tailwind CSS already has default tokens that can be used, extended or replaced.

Color Tokens:

/* ./tailwind.config.cjs */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.tsx'
  ],
  theme: {
  colors: {
      brand: {
        primary: {
          darkest: '#0068AB',
          dark: '#0077B3',
          light: '#EDF8FD',
        },
        secondary: {
          darkest: '#002C50',
          dark: '#0C395D',
          light: '#C7E1EE',
        },
        background: {
          DEFAULT: '#F8F8F8',
        }
      },
  //...
    },
    extend: {
      fontFamily: {
        roboto: 'Roboto, sans-serif',
        markpro: 'Mark Pro, sans-serif'
      }
    },
  },
  plugins: [],
}

Size Tokens:

/* ./tailwind.config.cjs */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.tsx'
  ],
  theme: {
  fontSize: {
      xs: ['12px', {
        fontWeight: '400',
        lineHeight: '18.75px',
      }],
      sm: ['14px', {
        fontWeight: '400',
        lineHeight: '22px',
      }],
      base: ['14px', {
        fontWeight: '400',
        lineHeight: '16px',
      }],
      lg: ['16px', {
        fontWeight: '500',
        lineHeight: '28px',
      }],
      xl: ['24px', {
        fontWeight: '500',
        lineHeight: '22px',
      }],
    },
  colors: {
  //...
    },
    extend: {
      //...
    },
  },
  /...
}

Building a component

With all preparation finished, all that remains is to assemble the parts.

Figma + React + Tailwind CSS

The process is basically looking at the component details in Figma — let's face it, Figma helps a lot with this — and transferring it to the code.

In this example below, we extracted the color information from the background of the component and from the text part, the sizes, font data (family, weight, size), etc.

But how is it in the code?

/* ./src/components/DatePicker/DatePicker.jsx  */

<div 
    className={`
        bg-neutral-light-base 
        w-[109px]
        h-[35px]
        border-solid 
        border-[1px] 
        rounded-[20px] 
        border-brand-primary-dark
        cursor-pointer
        select-none
        flex
        items-center
        ${isMounted && 'bg-brand-primary-dark bg-opacity-[0.15]'}
    `}>
        <div 
            className="
                w-full
                font-roboto
                text-sm 
                text-brand-primary-dark
                text-center
                py-2
            "
            onClick={(e) => { ref?.current?.toggle(e) }}
        >
            { label }
        </div>
        {/*...*/}
</div>

Storybook

For Storybook, imagination is the limit!

We can display the different states of our component, detailing the parameters and in some cases allowing the user to change the data and test the different behaviors.

All this while maintaining a living and functional documentation, with the isolated component, even before being used on any screen.

In this example, I used two forms:

With template, to reuse the same code in the variants and change only some data;
Without the template, to set up a different scenario with the 3 variants at the same time.

It is worth remembering that the way to implement this example, which is implemented without the template, was my choice, and the storybook itself helps with similar examples using the decorator or the canvas and reusing the stories.
Then evaluate each scenario and choose the one that is relevant to your needs.

/* ... */
export default {
    title: 'Design System/Componentes/DatePicker',
    component: DatePicker,
    args: {
        label: 'Lorem Ipsum',
        dados: mock
    },
    argTypes: {
        dados: { control: 'object' }
    }
} as ComponentMeta<typeof DatePicker>;

const DatePickerTemplate: ComponentStory<typeof DatePicker> = (args) => {
    const { label, variant } = args;

    const [ dadosRetorno, setDadosRetorno ] = useState<DatePickerSelected | null>(null);

    const hasSelected = (variant: number) => {
        return ((dadosRetorno?.periodoDatas.length > 0) && dadosRetorno?.variant === variant);
    }    

    return (
        <DatePicker 
            label={label}
            hasSelected={hasSelected(variant)}
            variant={variant}
            dados={mock}
            setDadosRetorno={setDadosRetorno}
        />
    )
};

/*
  Reusing the template for variants
  and changing only the necessary data
*/
export const Data = DatePickerTemplate.bind({});
Data.args = { 
    label: 'Data',
    variant:1
};
Data.argTypes = {
    variant: {
        table: {
          disable: true
        },
    },
    hasSelected: {
        table: {
          disable: true
        },
    },
    setDadosRetorno: {
        table: {
          disable: true
        },
    }
};
Data.storyName = 'Data';

export const DiaUtil = DatePickerTemplate.bind({});
DiaUtil.args = { 
    label: 'Prazo (DU)',
    variant:2
};
DiaUtil.argTypes = {...Data.argTypes};
DiaUtil.storyName = 'Dias Úteis';

export const DiaCorrido =  DatePickerTemplate.bind({});
DiaCorrido.args = { 
    label: 'Prazo (DC)',
    variant:3
};
DiaCorrido.argTypes = {...Data.argTypes};
DiaCorrido.storyName = 'Dias Corridos';

/*
  Creating a new way without the template.
*/
export const DatasSimultaneas = () => {
    const [ dadosRetorno, setDadosRetorno ] = useState<DatePickerSelected | null>(null);

    const hasSelected = (variant: number) => {
      return ((dadosRetorno?.periodoDatas.length > 0) && dadosRetorno?.variant === variant);
    }

    return (
        <div className='flex flex-col gap-1'>
            <div className='flex flex-row gap-1'>
                <DatePicker 
                    label='Datas'
                    hasSelected={hasSelected(1)}
                    variant={1}
                    dados={mock}
                    setDadosRetorno={setDadosRetorno}
                />

                <DatePicker 
                    label='Prazo (DU)'
                    hasSelected={hasSelected(2)}
                    variant={2}
                    dados={mock}
                    setDadosRetorno={setDadosRetorno}
                />

                <DatePicker 
                    label='Prazo (DC)'
                    hasSelected={hasSelected(3)}
                    variant={3}
                    dados={mock}
                    setDadosRetorno={setDadosRetorno}
                />
            </div>
        </div>
    );
};
DatasSimultaneas.argTypes = {
    label: {
      table: {
        disable: true
      },
    },
    ...Data.argTypes
};
DatasSimultaneas.parameters = {
    controls: { hideNoControlsWarning: true },
};

And this is the result:

We're done here!

I hope you enjoyed all the content, although a little extensive it's essential that we understand.

I recommend that you do yours, test and create different scenarios, because this experience goes beyond the needs of the company you are working for. It will give you a lot of baggage and knowledge about the systems we build, about how we see these systems and especially a horizon on scalability.

See you later!

References

Design System

The Difference Between Design Systems, Pattern Libraries, Style Guides & Component Libraries

Tailwind CSS

Storybook

Storybook: Use-o com React, Angular ou Vue!

Good Practices for Frontend with React.js

Jean Vidal — Tue, 04 Apr 2023 12:58:51 +0000

Introduction

As is a common knowledge, in programing don't exist only one way of programming, because each developer has its own characteristics.

Although that is so, after uncountable systems developed and problems of different scenarios solved, the way was cleared for small but effective practices.

So I'll explore some of these best practices below, so that we can leverage them and turn our software more readable, clean and reusable.

Passing properties from a parent element to a child element

One of the things we developers will be doing most is building components and passing properties, however, there are more efficient ways to do it.

I brought two examples, one recommended and other not.

Not recommended approach

interface TextInputProps {
 placeholder?: string;
}

export function TextInput({ placeholder: TextInputProps}){
 return (
  <input placeholder={placeholder} />
 )
}

But.. why not?

There are many native properties in the input element, and that way, whenever it was necessary to use some native property, it would have to be added in props as a parameter.

So.. what would be the best way?

Recommended approach

interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>{}

export function TextInput({ props: TextInputProps}){
 return (
  <input {...props} />
 )
}

With props inheriting - extends - the HTML attributes of a generic, can be use the spread operator to pass these properties to the child element within the component.

Removing duplicate values in an array

Another very common activity is remove duplicate values.
I present to you a very useful resource: Set.

The Set allows you to store unique values of any type and with the spread operator, we can solve this way:

const arr = [ 'Bahia', 'Bahia', 'Vitória', 'Vitória' ]
const uniqueArray = [ ...new Set(arr) ]

console.log(uniqueArray) // ['Bahia', 'Vitória']

Assigning a key when rendering a .map()

When displaying a list, is very common receive a error message - Each child in an array should have a unique "key" prop. - which indicates the need to create a unique key for each element.

This key must have two characteristics:

Unique - It cannot be identical to any sibling element.
Static - Must not change between render events.

Caveat: If the index doesn't matter for your iteration and you are just putting it in for the error message, then it's not a problem.

Now let's get to the examples!

Approaches not recommended:

The most common mistake is set the iteration's index as a key, but this breaks the characteristic of being static, because if we add a new element in the list, the index will be change.

const App = () => {
  let rows = [1, 2, 3, 4];
  return (
    <div>
      {rows.map((row,i) => (
        <div key={i}>{`${row}: ${i}`}</div>
      ))}
    </div>
  );
};
/*
Output:
 1: 0
 2: 1
 3: 2
 4: 3
*/

Since the index can't, then I will set random values!

It will probably guarantee unique values, but it will force to render each item even when not requested, directly affecting the performance.

Obs.: It doesn't remove the possibility of duplicate values.

const App = () => {
  let rows = [1, 2, 3, 4];
  return (
    <div>
      {rows.map((row) => (
        <div key={Math.random()}>{`${row}: ${Math.random()}`}</div>
      ))}
    </div>
  );
};
/*
Output:
 1: 0.17787081878683653
 2: 0.23435869336795734
 3: 0.474942799444668
 4: 0.8308284387098894
*/

Recommended approaches:

The ideal scenario is that the list contains unique identifiers that can be used as a key.

const App = () => {
  let rows = [
  { id: 1, value: 'val 1' },
  { id: 2, value: 'val 2' },
  { id: 3, value: 'val 3' },
  { id: 4, value: 'val 4' },
 ];

  return (
    <div>
      {rows.map((row) => (
        <div key={row.id}>{`${row.value}: ${row.id}`}</div>
      ))}
    </div>
  );
};

/*
Output:
 val 1: 1
 val 2: 2
 val 3: 3
 val 4: 4
*/

But if it doesn't have?

In this scenario is important to generate a unique identifier before iterating the list. The most indicated moment is when the component is being mounted, but care must still be taken so that it is not executed again in a rendering.

const App = () => {
  let rows = [1, 2, 3, 4];

 let rows = rows.map(item => { 
   return {uid: algumaBiblioteca.geraIdUnico(), value: item};
 });

  return (
    <div>
      {rows.map((row) => (
        <div key={row.uid}>{`${row.value}: ${row.uid}`}</div>
      ))}
    </div>
  );
};

Recommended typings for use as a properties with TypeScript

Knowing which data type of component's property is a very common doubt for anyone who uses TypeScript.

For those who don't have much patience, an any or unkown will solve.

But be careful!

If we are using TypeScript to type our components and properties, why are we putting a generic type on everything?

This apparently solves the problem of laziness,but it misses out on valuable resources each type has to offer.

Below i will list the most common types, apart from the primitives ones, that can help with a quick decision.

But remembering!! There is no silver bullet, so, it is important to evaluate each case individually

interface Props {
  /** Função normal que não recebe ou retorna nada. */
  onClick: () => void;
  onClickWithSpecificEvent: () => (event: React.MouseEvent<HTMLButtonElement>) => void;
  onClickWithParameter(event: React.MouseEvent<HTMLButtonElement>): void;
  onChangeWithParameter: (id: number) => void;
  onChangeWithParameterAndSpecificEvent: (event: React.ChangeEvent<HTMLInputElement>) => void;
  generalReactElements: ReactNode;
  singleReactElement: JSX.Element;
  style: React.CSSProperties;
  setState: React.Dispatch<React.SetStateAction<number>>;
  propsWithAllPropsOfButtonAndWithoutRef: Props & React.ComponentPropsWithoutRef<"button">;
  propsWithAllPropsOfRef: Props &React.ComponentPropsWithRef<MyButtonWithForwardRef>;
}

That's it for now!

These were a little "tricks" that can make a difference in code quality.

Always assess the real need and understand the benefits of using each resource. This goes for everything, be it good practices, patterns, etc.

See you next!

Presentation of a Dev wanting to learn from the community

Jean Vidal — Mon, 03 Apr 2023 13:07:37 +0000

Hi all!

My name is Jean Vidal and I'm a Brazilian Full Stack Developer.

Currently i work with React (starting with NextJS on personal projects) on FrontEnd and .Net Core on BackEnd, but I already had experience with AngularJS, VueJS, Asp. Net, NodeJS, etc.

I'm trying to work globally and i'm preparing myself every day my tech and soft skills.

Starting today, i'm will to try share knowladges with all and write regularly to improve my English comunication and learn something to train/practice and improve my tech skills, in addition to increasing my vocabulary too.

I ask you to help me with this and feel free to correct me constructively, be it tech and soft skills as well as vocabulary.

If you want to get in touch with me, follow my networks:

Linkedin
GitHub
Twitter
Medium