Untitled Publication

Componentes Smart × Dumb

Tiago Civatti Frausino — Fri, 26 May 2023 22:52:12 GMT

Recentemente estive estudando arquitetura de projetos e me deparei com o conceito de componentes Smart e Dumb. Esse conceito ajuda manter uma arquitetura limpa, delegando funções para diferentes componentes e os separando por componentes funcionais e componentes de apresentação.

Componentes funcionais (Smart)
São responsáveis por alguma logíca de negócio na aplicação, seja manipulação de dados, envio de requisições, ou outra. Também são responsáveis por passar as informações necessárias para os devidos dumb components.

Componentes de apresentação (Dumb)
São responsáveis apenas e exclusivamente pelo visual da aplicação. Eles apenas enxergam eles mesmos e não precisam saber nada do resto da aplicação. Podem também exigir parâmetros para uso próprio, como um componente de detalhe de usuário exigir o parâmetro user com informações sobre o usuário em questão.
Podem emitir eventos para enviar informações para fora.

[CSS] Footer no final da página

Tiago Civatti Frausino — Fri, 26 May 2023 22:27:20 GMT

Ao adicionar um footer em uma página, geralmente ele age como esperado e é posicionado no final da tela. Mas se sua página for menor que a tela do usuário, o footer vai ficar no meio do caminho. Muito feio.

Para ajeitar isso, é necessário ajustar o tamanho do html e body para o máximo da tela e colocar uma margem dinânica no footer.

body {
  min-height: 100vh; // Fallback
  min-height: 100dvh; // Compatibilidade com mobile
  display: flex;
  flex-direction: column;
}

.footer{
  margin-top: auto;
}

<body>
    <header class="header">
        
    header>
    <main class="page">
        
    main>
    <footer class="footer">
        
    footer>
body>

Note que a unidade dvh é usada para responsividade com mobile, que pode mudar seu viewport devido às diversas barras de navegação nativas.
Leia mais sobre isso aqui.

Essa é uma solução simples, mas que muitas vezes não é intuitiva de implementar.

[Node.js] Manipulação de arquivos

Tiago Civatti Frausino — Wed, 15 Mar 2023 17:47:50 GMT

Problema

Subimos vários videos em formato de streaming (HLS) para a AWS, mas eles ficaram nomeados em UTF-8, usando caracteres como ç á ã â. O problema é que esses caracteres especiais não são aceitos como parte de uma URI, então não conseguimos abrir os vídeos por browsers que não fazer essa conversão automaticamente (ex. Safari).

Por isso preciso fazer um script que itere sobre um arquivo, leia cada linha, converta em um formato seguro para URI e escreva em um outro arquivo de output.

O fluxo é basicamente o seguinte:

Pegar arquivo m3u8 do video na AWS
1. Fazer um backup
Percorrer conteudo e converter caracteres especiais para formato URI friendly
1. Ignorar linhas começadas em #
2. Salvar os nomes para não precisar percorrer denovo
Ler nomes dos sub-arquivos
Repetir passo (1) para cada um até chegar no final (arquivos .ts)
1. Provavelmente usar recursividade
Pegar o próximo arquivo na AWS e repetir o processo
Fazer o Upload do arquivo atualizado para a AWS

Desenvolvimento

Será usado Node.js v18 para escrever o script, que é a linguagem que eu tenho mais familiaridade, além do SDK da AWS para fazer a conexão com o bucket S3 onde está os arquivos.

Solução

A manipulação de arquivos pelo Node.js foi feita através do módulo FileSystem (fs). O FileSystem também possui uma parte de promises com varias outras funções que funcionam com a arquitetura async await .

Esta foi a função para o processamento de arquivos. Não vou tocar na parte sobre a AWS aqui, pois não é o escopo.

const { open } = require('fs/promises');

async function processarHLS(path, outputPath) {
  let file;
  let out;
  let stream;
  let subpaths = [];
  try {
    /* (1) */
    file = await open(path, 'r+');
    out = await open(outputPath, 'w+');
    stream = out.createWriteStream();

    /* (2) */
    for await (let line of file.readLines()) {
      /* (3) */
      stream.cork();
      if (!line.startsWith('#')) {
        subpaths.push(line);
        line = line
          .split('')
          .map((c) => {
            if (/[A-z0-9%\-_]/.test(c)) return c;
            return encodeURI(c);
          })
          .join('');
      }
      stream.write(line + '\n');
      /* (4) */
      process.nextTick(() => {
        stream.uncork();
      });
    }
  } catch (error) {
    console.error(error);
    return false;
  } finally {
    stream?.close();
    out?.close();
    file?.close();
  }
  return subpaths;
}

O que está acontecendo nesse código? Tem várias partes interessantes como o for await , a escrita e leitura simultânea de dois arquivos e a escrita com buffer através do stream.cork() e stream.uncork() .

Abertura dos arquivos de input e output em modo de leitura r+ e escrita w+ . E criação de uma stream de escrita com a ajuda do FileSystem.
Essa estrutura me surpreendeu, mas é simples. for await é usado com iteradores assíncronos, o file.readLines() no caso, que a iteração dentre os elementos não é linear igual em um array, mas cada iteração em sí é assíncrona, como ir no arquivo e ler a próxima linha.
Por padrão a escrita da stream não é bufferizada, cada stream.write() gera um buffer específico para o arquivo. Usando o cork e uncork é possível usar a estrutura de write e flush como em outras linguagens, o que torna o processo mais otimizado, sendo que, a partir da chamada do stream.cork(), cada buffer único do write é armazenado e escrito de uma vez só quando stream.uncork() é chamado. Também pode minimizar a chance de acessos simultâneos no arquivo.
Não entendi bem, mas por recomendação da documentação do FileSystem, o process.nextTick é usado para postergar a execução do stream.cork() para o próximo tick.

Por que fazer um Journal?

Tiago Civatti Frausino — Tue, 14 Mar 2023 18:59:44 GMT

O intuito deste blog é primeiramente para uso pessoal, fazer anotações, e afins. Então prossiga com cautela :)

Resolvi começar a escrever este DEV Journal para melhorar o minha jornada pessoal, depois de um ano trabalhando como desenvolvedor, eu percebi o quanto isso seria útil, já que eu acabava me deparando com os mesmos problemas toda hora e não tinha uma solução palpável para recorrer.

Eu percebi que registrar esses processos de desenvolvimento seria saudável, além de ajudar a entender o que estou fazendo na hora, descrever os problemas, o fluxo, as descobertas, e a solução, pode ser muito útil no futuro. Querendo ou não sempre acabamos esquecendo alguns detalhes. Também optei por escrever online em vez de em um caderno, pela possibilidade de compartilhar com colegas de trabalho e amigos.

Fora isso também pretendo registrar algumas dicas ou features interessantes.

Como é um blog pessoal já fica o aviso, tenha um pouco de cautela, não copie direto as soluções, mas sim tente entender o processo, não garanto que tudo que eu colocar aqui esteja 100% correto e não me responsabilizo.

É isso ai.