DEV Community: Valdeir S.

CNPJ Alfanumérico: Implemente a validação do novo CNPJ em seu projeto

Valdeir S. — Fri, 23 Jan 2026 13:18:30 +0000

Em razão do aumento contínuo do número de empresas e do iminente esgotamento dos CNPJs disponíveis, a Receita Federal do Brasil institui o CNPJ Alfanumérico. A iniciativa tem por objetivo facilitar a identificação de todas as empresas e aprimorar o ambiente de negócios, contribuindo para o desenvolvimento econômico e social do Brasil.

O CNPJ Alfanumérico será atribuído, a partir de Julho de 2026, exclusivamente a novas inscrições.

Formato

O novo formato de CNPJ seguirá com o padrão de 14 caracteres divididos da seguinte forma:

Cálculo do Dígito Verificador (DV)

Para o cálculo do DV, os valores decimais, contidos na Tabela Código ASCII (Veja abaixo os códigos), serão substituídos pelos valores decimais relativos às letras maiúsculas e atribuídos aos valores numéricos — para cada um deles, subtraído o valor 48 — e alfanuméricos do novo CNPJ.

Transformação da Raiz e da Ordem

CNPJ padrão 12.ABC.345/01de
Substitui as letras minúsculas para maiúsculas: 12.ABC.345/01DE
Substitui cada letra por seu código ASCII e subtrai por 48: 12.(65–48)(66–48)(67–48).345/01(68–48)(69–48)
Resultado após substituição e subtração: 12.171819.345/012021

Cálculo do 1º Dígito Verificador

Atribuição de Pesos

Os valores obtidos após os passos anteriores serão multiplicados por pesos, atribuídos da direita para esquerda, do valor 2 até o valor 9. A partir do 8º caractere será reiniciada a atribuição dos pesos pelo valor 2.

CNPJ após transformação: 1 2 . 17 18 19 . 3 4 5 / 0 1 20 21
Atribuição dos pesos e cálculo do somatório:

(1*5)+(2*4)+(17*3)+(18*2)+(19*9)+(3*8)+(4*7)+(5*6)+(0*5)+(1*4)+(20*3)+(21*2)
∑ = 459

Cálculo do 1º dígito verificador

Após encontrar o somatório do passo anterior, é necessário encontrar o resto da divisão do valor por 11. Posteriormente, deverá subtrair 11 pelo valor encontrado.

X = 11 - MOD(459/11)
X = 11 - 8
X = 3

Portanto, o 1º dígito verificador do CNPJ é igual a 3. Agora o CNPJ deverá estar no seguinte formato: “12.ABC.345/01DE-3"

Cálculo do 2º dígito verificador

Para encontrar o 2º DV, basta repetir o processo acima:

Após encontrar o somatório do passo anterior, é necessário encontrar o resto da divisão do valor por 11. Posteriormente, deverá subtrair 11 pelo valor encontrado.

X = 11 - MOD(424/11)
X = 11 - 6
X = 5

Portanto, o 2º dígito verificador do CNPJ é igual a 5. Agora o CNPJ deverá estar no seguinte formato: “12.ABC.345/01DE-3*5*”

Implementação em Códigos

JavaScript

class CNPJ {
  static #regexCNPJSemDV = /^([A-Z\d]){14}$/;
  static #regexRemoveMascara = /[^A-Z\d]/g;
  static #tamanhoCNPJSemDV = 12;
  static #pesosDV = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
  static #valorBase = 48;

  static valido(cnpj) { 
    let cnpjSemMascara = cnpj.toUpperCase().replace(this.#regexRemoveMascara, '')

    if (this.#regexCNPJSemDV.test(cnpjSemMascara)) { 
      let somatorioDV1 = 0; 
      let somatorioDV2 = 0; 
      for (let i = 0; i < this.#tamanhoCNPJSemDV; i++) { 
          const asciiDigito = cnpjSemMascara.charCodeAt(i) - this.#valorBase;
          somatorioDV1 += asciiDigito * this.#pesosDV[i + 1]; 
          somatorioDV2 += asciiDigito * this.#pesosDV[i]; 
      } 
      const dv1 = somatorioDV1 % 11 < 2 ? 0 : 11 - (somatorioDV1 % 11); 
      somatorioDV2 += dv1 * this.#pesosDV[this.#tamanhoCNPJSemDV]; 
      const dv2 = somatorioDV2 % 11 < 2 ? 0 : 11 - (somatorioDV2 % 11); 
      const dv = `${dv1}${dv2}`;
      return cnpjSemMascara.slice(-2) === dv
    }

    return false;
  }
}

CNPJ.valido('12.ABC.345/01de-35') // Output: True
CNPJ.valido('12.ABC.345/01DE-35') // Output: True
CNPJ.valido('12.ABC.345/01DE-00') // Output: False

TypeScript

class CNPJ {
    private static readonly regexCNPJSemDV = /^([A-Z\d]){14}$/;
    private static readonly regexRemoveMascara = /[^A-Z\d]/g;
    private static readonly tamanhoCNPJSemDV = 12;
    private static readonly pesosDV = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
    private static readonly valorBase = 48;

    public static valido(cnpj: string): bool { 
        let cnpjSemMascara = cnpj.toUpperCase().replace(this.regexRemoveMascara, '')

        if (this.regexCNPJSemDV.test(cnpjSemMascara)) { 
            let somatorioDV1 = 0; 
            let somatorioDV2 = 0; 
            for (let i = 0; i < this.tamanhoCNPJSemDV; i++) { 
                const asciiDigito = cnpjSemMascara.charCodeAt(i) - this.valorBase;
                somatorioDV1 += asciiDigito * this.pesosDV[i + 1]; 
                somatorioDV2 += asciiDigito * this.pesosDV[i]; 
            } 
            const dv1 = somatorioDV1 % 11 < 2 ? 0 : 11 - (somatorioDV1 % 11); 
            somatorioDV2 += dv1 * this.pesosDV[this.tamanhoCNPJSemDV]; 
            const dv2 = somatorioDV2 % 11 < 2 ? 0 : 11 - (somatorioDV2 % 11); 
            const dv = `${dv1}${dv2}`;
            return cnpjSemMascara.slice(-2) === dv;
        }

        return false;
    }
}

CNPJ.valido('12.ABC.345/01de-35') // Output: True
CNPJ.valido('12.ABC.345/01DE-35') // Output: True
CNPJ.valido('12.ABC.345/01DE-00') // Output: False

PHP

<?php
class CNPJ {
    private const REGEX_CNPJ_SEM_DV = '/^([A-Z\d]){14}$/';
    private const REGEX_REMOVE_MASCARA = '/[^A-Z\d]/';
    private const TAMANHO_CNPJ_SEM_DV = 12;
    private const PESOS_DV = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
    private const VALOR_BASE = 48;

    public static function valido(string $cnpj): bool { 
        $cnpjSemMascara = strtoupper(preg_replace(self::REGEX_REMOVE_MASCARA, '', $cnpj));

        if (preg_match(self::REGEX_CNPJ_SEM_DV, $cnpjSemMascara)) { 
            $somatorioDV1 = 0; 
            $somatorioDV2 = 0; 

            for ($i = 0; $i < self::TAMANHO_CNPJ_SEM_DV; $i++) { 
                $asciiDigito = ord($cnpjSemMascara[$i]) - self::VALOR_BASE;
                $somatorioDV1 += $asciiDigito * self::PESOS_DV[$i + 1]; 
                $somatorioDV2 += $asciiDigito * self::PESOS_DV[$i]; 
            } 

            $dv1 = $somatorioDV1 % 11 < 2 ? 0 : 11 - ($somatorioDV1 % 11); 
            $somatorioDV2 += $dv1 * self::PESOS_DV[self::TAMANHO_CNPJ_SEM_DV]; 
            $dv2 = $somatorioDV2 % 11 < 2 ? 0 : 11 - ($somatorioDV2 % 11); 
            $dv = $dv1 . $dv2;

            return substr($cnpjSemMascara, -2) === $dv;
        }

        return false;
    }
}

// Testes
assert(CNPJ::valido('12.ABC.345/01de-35')); // Output: True
assert(CNPJ::valido('12.ABC.345/01DE-35')); // Output: True
assert(CNPJ::valido('12.ABC.345/01DE-00')); // Fatal error: Uncaught AssertionError

Tabela ASCII

Conclusão

É importante atualizar seu código para que a aplicação quebre a partir de julho/2026.

Ficou com alguma dúvida ou tem uma sugestão? Deixe nos comentários, que darei uma olhada.

Why can deleted files be recovered?

Valdeir S. — Thu, 20 Mar 2025 00:44:09 +0000

Understand how deleted data on SSDs can be recovered and the role of the TRIM command, encryption, and forensic techniques used in digital investigations.

Components of an SSD

Solid State Drives (SSDs) are made up of module(s):

➡️ DRAM (Cache): speeds up read/write operations;
➡️ Nand Memory: allows data storage;
➡️ Controller: Manages all SSD operations

What is DRAM?

DRAM is a type of volatile memory that temporarily stores data. It is made up of cells that store bits.

This DRAM module is used as a cache to temporarily store data being read or written, improving the device’s access speed and efficiency.

The Controller’s Role

The SSD controller is a chip that manages data reading and writing to NAND flash memory cells. This component is vital for the device’s performance and durability, and it contains the Flash Translation Layer (FTL).

The main functions of FTL are:

Translate commands received from the operating system to flash memory;
Maintain a mapping between the logical address and the physical address of the data;
Perform garbage collection on memory blocks; and
Distribute SSD operations among memory blocks to reduce wear. This function is known as Wear Leveling.

How NAND Memory Works

NAND Memory is a non-volatile memory technology that stores data in memory cells organized in a matrix structure. NAND memory is made up of numerous memory cells that are organized into pages and blocks.

Memory Cells

Storage cells are organized in layers, similar to a ream of A4 paper. Within each cell, there are several blocks responsible for effectively storing file data.

These components have a limited lifespan. Each time information is created (or modified, or deleted), this lifespan decreases.

To address this issue, the FTL (Flash Translation Layer) distributes operations evenly, preventing certain blocks from wearing out faster than others.

The operating system does not have direct access to this part of the SSD; for this, the use of the Flash Translation Layer (FTL) is required, which facilitates integration between them.

Why Can Data Be Recovered?

When a file is deleted, the operating system signals to the FTL (Flash Translation Layer) that the space used by the file can be reused for another. The FTL marks the spaces as free, but the bits of information remain in the cell until they are overwritten later.

This strategy, in addition to preventing wear — as already explained — also improves performance. Erasing entire blocks is more efficient than erasing individual cells.

Therefore, after you delete a file from your SSD, forensic experts can attempt to directly access the memory cells using specific devices to recover the deleted data. An SSD with many gigabytes or terabytes that is lightly used can retain deleted information for years.

How to Ensure Permanent Deletion?

When working with personal data (such as contracts, SSH keys, and database backups), you must take specific precautions with files — particularly if your company needs to comply with the General Data Protection Law.

❓ I used the Eraser, BitRaser, Shred apps, etc.

Congratulations!! Some of these apps work on 90s-era HDDs. On SSDs, they still don’t permanently delete the file.

Back in the early 1990s, computer scientist Peter Gutmann created an algorithm to overwrite empty spaces on HDDs. The goal was to rewrite the same file 35 times to prevent the original content from being recovered. However, this technique does not work on modern storage devices.

❓ How can I securely delete files containing my data, then?

The National Security Agency (NSA) recommends that storage devices be shredded into pieces no larger than 2mm. This is an extreme measure, but there are other alternatives.

The TRIM Command

The TRIM command is an instruction sent by the operating system to the SSD, indicating which data blocks are no longer in use and can be erased. Once TRIM is executed, recovering deleted files becomes much more difficult — though not impossible.

Attention! Not every SSD and not every operating system supports this instruction.

Software Encryption

Full disk encryption aims to make data access more difficult, ensuring that the information stored on the device is accessible only to authorized users, such as those who have the password, a key file, or a hardware authentication device (like a Yubikey, for example).

Windows, for instance, uses BitLocker to implement full disk encryption. However, this does not guarantee that the data is completely inviolable.

The study “Is My Password Strong Enough?: A Study on User Perception in The Developing World” revealed that many users choose predictable and weak passwords, such as personal information and common patterns. Password reuse is also a significant issue, with 69% of participants admitting to this practice.

Hardware Encryption

This is a technique that uses dedicated components, such as encryption controllers and chips, to protect data stored on SSD devices. This approach offers advantages over software encryption, particularly when it comes to the difficulty of recovering data after deletion or destruction of the device. However, the cost of such devices may not be attractive to most people.

On the market, there are some devices like the IronKey Vault Privacy 80 8TB External SSD, which can cost up to $900; and the ORICO 2TB mSATA SSD for internal use, which can cost $130.

It’s not a paid post, but it could be 🥲

Conclusion

In an increasingly digital world, the protection of sensitive data is a priority. Full disk encryption and the use of commands like TRIM on SSDs are effective tools to ensure that information remains secure against unauthorized access. However, it is important to remember that, even with these security measures, file deletion does not guarantee permanent removal.

There are secure file deletion techniques that can help mitigate the risk of data recovery, but the only truly secure way to ensure that information cannot be recovered is through the physical destruction of the device, reducing it to particles no larger than 2 mm. This approach ensures that the data cannot be accessed in any way, providing an additional layer of security for critical information. Therefore, when considering data protection, it is essential to adopt a comprehensive approach that includes both encryption and secure device destruction when necessary.

Por que os arquivos excluídos são recuperados?

Valdeir S. — Thu, 21 Nov 2024 21:36:57 +0000

Entenda como dados apagados em SSDs podem ser recuperados, o papel do comando TRIM, criptografia e técnicas forenses usadas em investigações digitais.

Componentes de um SSD

Os Solid State Drive (SSD) são formados basicamente por módulo(s) de:

➡️ DRAM (Cache): acelera as operações de leitura/escrita;
➡️ Nand Memory: permite o armazenamento de dados;
➡️ Controlator (Controller): Gerencia todas as operações do SSD

O que é a DRAM?

A DRAM é um espécie de memória volátil que armazena os dados temporariamente. Ela é composta por células que guarda os bits.

Esse módulo DRAM é utilizada como um cache para armazenar temporariamente dados que estão sendo lidos ou escritos. Isso melhora a velocidade de acesso e a eficiência do dispositivo.

A função do Controlador

O controlador de um SSD é um chip que gerencia a leitura e a gravação de dados nas células de memória flash NAND do SSD. Ele é fundamental para o desempenho e a durabilidade do dispositivo. Nele, está contido o Flash Translation Layer (FTL).

As principais funções do FTL são:

Traduzir os comandos recebidos do sistema operacional para a memória flash;
Manter um mapeamento entre o endereço lógico e o endereço físico dos dados;
Realizar o garbage collection nos blocos de memórias; e
Distribuir as operações do SSD entre os blocos de memória para reduzir o desgaste. Essa função é conhecida como Wear Leveling.

Funcionamento da Memória Nand

A Nand Memory é uma tecnologia de memória não-volátil que armazena dados em células de memória organizadas em uma estrutura de matriz. A memória NAND é composta por diversas células de memórias que são organizadas em páginas e blocos.

Células de Memória

As células de armazenamento são organizadas em camadas, semelhantes a uma resma de papel A4. Dentro de cada célula, existem vários blocos que são responsáveis por armazenar efetivamente os dados dos arquivos.

Esses componentes têm uma vida útil limitada. Cada vez que uma informação é criada (ou alterada, ou excluída), essa vida útil diminui.

Para resolver esse problema, o FTL distribui as operações de maneira uniforme, evitando que certos blocos se desgastem mais rapidamente do que outros.

O sistema operacional não possui acesso direto a essa parte do SSD; para isso, é necessário o uso do Flash Translation Layer (FTL), que facilita a integração entre eles.

Por que dados podem ser recuperados?

Ao excluir um arquivo, o sistema operacional sinaliza para o FTL que o espaço utilizado pelo arquivo pode ser reutilizado por outro. O FTL marca os espaços como livres, mas os bits de informações permanecem na célula até serem sobrescritos posteriormente.

Essa estratégia, além de evitar o desgaste — como já explicado — também melhora desempenho. Apagar blocos inteiros é mais eficiente que apagar células individualmente.

Portanto, após você excluir um arquivo do seu SSD, os peritos forenses podem tentar acessar diretamente, usando determinados aparelhos, as células de memória para recuperar os dados excluídos. Um SSD de muitos gigabytes ou terabytes pouco usado pode reter por anos as informações que foram deletadas pelo usuário.

Como garantir a exclusão definitiva?

Você que trabalha com dados pessoais (contratos, chaves de SSH, backup de banco de dados etc) tem que tomar algumas precauções com arquivos, principalmente se for uma empresa, que tem que seguir a Lei Geral de Proteção de Dados Pessoais (LGPD).

🗨️ 🗨️ “Eu usei o aplicativo Eraser, BitRaser, Shred etc.”

Parabéns!! Parte desses apps funciona em HD dos anos 90. Em SSD continua não apagando o arquivo definitivamente.

No inícío nos anos 1990, o cientista da computação Peter Gutmann criou um algoritmo para preenchimento de espaços vazio em HDD. O objetivo era reescrever o mesmo arquivo por 35 vezes para evitar que o conteúdo original fosse recuperado. No entanto, essa técnica não funciona em dispositivos de armazenamento recente.

🗨️ Como apagar os arquivos com meus dados pessoais em segurança, então?

A National Security Agency (NSA) recomenda que os dispositivos de armazenamentos sejam triturados em pedaços de até 2mm. Essa é uma medida extrema, mas há outras alternativas.

O comando TRIM

O comando TRIM é uma instrução que o sistema operacional envia para o SSD para informar quais blocos de dados não estão mais em uso e podem ser apagados. Após o comando TRIM ser executado em um SSD, a recuperação de um arquivo excluído se torna significativamente mais difícil, mas não impossível.

Atenção! Nem todo SSD e nem todo sistema operacional possui suporte à essa instrução.

Criptografia de Software

A criptografia total do disco visa dificultar o acesso aos dados, assegurando que as informações armazenadas no dispositivo sejam acessíveis apenas por usuários autorizados, como aqueles que possuem a senha, uma keyfile ou um hardware de autenticação (como o Yubikey, por exemplo).

O Windows, por exemplo, utiliza o BitLocker para implementar a criptografia total do disco. No entanto, isso não garante que os dados sejam completamente invioláveis.

O estudo "Is My Password Strong Enough?: A Study on User Perception in The Developing World" revelou que muitos usuários escolhem senhas previsíveis e fracas, como informações pessoais e padrões comuns. A reutilização de senhas também é um problema significativo, com 69% dos participantes admitindo essa prática.

Criptografia de Hardware

Esta é uma técnica de que utiliza componentes dedicados, como controladores e chips de criptografia, para proteger dados armazenados em dispositivos SSDs. Essa abordagem oferece vantagens em relação à criptografia de software, especialmente no que diz respeito à dificuldade de recuperação de dados após a exclusão ou a destruição do dispositivo. No entanto, o custo do dispositivo pode não ser atrativo para a maioria das pessoas.

No mercado, há alguns dispositivos como o SSD Externo IronKey Vault Privacy 80 8TB, que pode chegar a custar R$ 18.000,00; e SSD KC600 mSATA 2TB para uso interno, que pode custar R$ 3.000,00

Não é uma publi post, mas poderia ser 🥲

Conclusão

Em um mundo cada vez mais digital, a proteção de dados sensíveis é uma prioridade. A criptografia total de discos e o uso de comandos como TRIM em SSDs são ferramentas eficazes para garantir que as informações permaneçam seguras contra acessos não autorizados. No entanto, é importante lembrar que, mesmo com essas medidas de segurança, a exclusão de arquivos não garante sua remoção permanente.

Existem técnicas de remoção segura de arquivos que podem ajudar a mitigar o risco de recuperação de dados, mas a única forma realmente segura de garantir que as informações não possam ser recuperadas é através da destruição física do dispositivo, reduzindo-o a partículas de até 2 mm. Essa abordagem assegura que os dados não possam ser acessados de forma alguma, proporcionando uma camada adicional de segurança para informações críticas. Portanto, ao considerar a proteção de dados, é essencial adotar uma abordagem abrangente que inclua tanto a criptografia quanto a destruição segura de dispositivos quando necessário.

Post Scriptum

Este artigo tem caráter educativo, com foco em explicar como dados são gerenciados em SSDs e como você pode proteger sua privacidade.

Criando transições com API ViewTransition

Valdeir S. — Tue, 08 Aug 2023 12:52:15 +0000

Nesta postagem falarei sobre uma API muito bacana e que pouca gente está comentando: a View Transitions.

No texto há diversos links, clique neles para ter acesso à implementação no browser.

O que é

A API ViewTransition foi desenvolvida para tornar mais fácil e eficiente a criação de animações e de efeitos visuais.. Um dos benefícios de usá-la é que ela permite transições mais suaves entre páginas e estados de elementos.

No Google Chrome 76, foi implementado o sistema Paint Holding: sistema para corrigir flashes brancos que acontecia quando o usuário mudava de página e o todo o conteúdo era renderizado (desenhado) na tela. No entanto, algumas mudanças ainda ocorriam de forma abrupta e repentina.

Embora a utilização dessa API traga benefícios em termos de animação e transições, é fundamental considerar possíveis problemas de acessibilidade e usabilidade. A composição de dois estados distintos pode causar problemas com elementos aria-wai em leitores de tela.

Criando transições com a nova API

Para iniciar uma transição, basta executar as modificações do DOM dentro da função document.startViewTransition. No momento que o DOM do HTML for alterado, o navegador criará, no topo da estrutura HTML, uma árvore de pseudoelementos, que será removida após a conclusão da transição.

document.startViewTransition(() => {
    document.body.innerHTML = `<your code>`;
});

Árvore de pseudoelementos

Uma vez que o documento captura os estados novo e velho da página ou do elemento a ser modificado, uma estrutura de pseudoelementos como esta é criada:

html
|_::view-transition
  ├─ ::view-transition-group(name)
  │  └─ ::view-transition-image-pair(name)
  │     ├─ ::view-transition-old(name)
  │     └─ ::view-transition-new(name)
  └─ …Other groups…

A função de cada uma deles:

Pseudoelemento	Descrição
::view-transition	Empilha os grupos de cada elemento que sofrerá transição
::view-transition-group	Agrupa os estados dos elementos que sofrerão a transição
::view-transition-image-pair	Armazena uma imagem de cada estado: velho e novo
::view-transition-old	É o elemento que armazena o estado (uma espécie de screenshot) velho do elemento de transição
::view-transition-new	É o elemento que armazena o estado (uma espécie de screenshot) novo, que será atualizado

Por padrão, a transição terá o efeito de fade: quando um elemento se esvaece e outro aparece no lugar.

Como as transições funcionam

As etapas de uma transição realizada sem erro ou interrupções são as seguintes:

A função document.startViewTransition(callback) é invocada e retorna a interface ViewTransition;
O estado atual da página é capturado;
A renderização é pausada;
O callback do passo 1 é executado. Ele é o responsável por realizar as alterações;
A promise ViewTransition.updateCallbackbone é cumprida. Ela pode ser utilizada para você saber quando a alteração no DOM será atualiada;
O novo estado da página, após a mudanças no passo 4, é capturado;
Os pseudoelementos são criados na raiz da página (dentro do <html>);
O estado do passo 2 é aplicado no pseudoelemento;
A promise ViewTransition.ready é cumprida. Ela poderá ser usada para identificar quando a transição estará pronta para iniciar (mais abaixo terá um exemplo com ela)
Ocorre a transição entre os pseudoelementos;
A promise ViewTransition.finished é cumprida.

Criando uma transição simples

Vamos começar com uns exemplos bem simples para facilitar o entendimento, né? 👍

function changePage(data) {
    // Altera o conteúdo sem o uso das transições caso o navegador
    // não suporte a operação
    if (!document.startViewTransition) {
        changeContentPage(data);
        return;
    }

    document.startViewTransition(() => changeContentPage(data));
}

Com isso, teremos o seguinte resultado:

Olha só, é super fácil! E dá para melhorar ainda mais. Bora colocar uma animação usando CSS.

::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(30px); }
}

@keyframes slide-to-left {
    to { transform: translateX(-30px); }
}

Eis o novo resultado:

Não é tudo. Você tem liberdade para escolher quais elementos sofrerão a transição. 👇

Criando transição com múltiplos elementos

A criação entre dois elementos segue o mesmo padrão que os exemplos anteriores. No entanto, para fazer esta transição, você precisa nomear os elementos com CSS, usando a propriedade: view-transition-name. Assim, o navegador criará um novo grupo de pseudoelementos que mover-se-ão de uma posição para outra. Quer saber mais? Olha esse exemplo que legal.

Verifique que nomeamos os três elementos que sofreram a transição

#header-menu {
  view-transition-name: header-menu;
}
#first {
  view-transition-name: el-first;
}
#second {
  view-transition-name: el-second;
}

E também alteramos o modo de transição dos elementos #first e #second:

::view-transition-old(el-first) {
  animation: scale-old 3s both ease-in-out;
}
::view-transition-new(el-first) {
  animation: scale-new 3s both ease-in-out;
}

/* --------------------------------------------------- */

::view-transition-old(el-second) {
  animation: back-in-up 3s;
}
::view-transition-new(el-second) {
  animation: back-in-down 3s;
}

Bem legal, né? Às vezes, precisamos lidar com animações mais complexas, então é legal se preocupar com o debug.

Debugando transições

Nem todos gostam de fazer testes, mas é necessário😁

Nesta seção, aprenderemos como debugar as animações CSS em seu site.

Para isso, basta abrir o DevTools (F12) e escolher a aba "Animations" para ter acesso a animações do seu site. Clicando no botão "pause", você consegue parar a transição, verificar as propriedades, tentar umas novas modificações.

Bem simples. Você também poderá verificar performance e emular outros dispositivos, redução de animação etc.

Criando uma transição entre páginas (SPA - Single Page Application)

Você pode mudar de página ou documento com a mesma facilidade. Mas atenção: esse método é exclusivo para SPA (pelo menos, por enquanto).

Segue um exemplo maroto (funcionará apenas com os nomes Renata e Pâmela).

Esse ficou legal, mas vamos aos comentários de alguns trechos do código e descobrir mais?

Neste evento, toda a navegação do site será interceptada para capturamos a URL atual e a de destino. Será importante para nomearmos os elementos da página inicial.

navigation.addEventListener('navigate', (event) => {
    const toUrl = new URL(event.destination.url);
    if (location.origin !== toUrl.origin) return;

    const fromUrl = new URL(location.pathname, location.href);

    event.intercept({
        async handler() {
            onLinkNavigate(toUrl, fromUrl);
        }
    })
});

Esse trecho é opcional. Você pode trocá-lo por uma função qualquer e utilizar o evento onclick nos elementos do tipo Anchor para invocá-la.

Nesta etapa, o conteúdo da página de destino será capturado com a função getPage (que utiliza a API fetch para realizar a requisição)

async function onLinkNavigate(toUrl, fromUrl) {
    const response = await getPage(toUrl.href);

    ...
}

Ainda no onLinkNavigate, temos o código abaixo para capturar o *card* da dançarina escolhida e nomear os elementos html corretamente. A nomeação durante a execução é necessária, pois não é possível ter dois ou mais elementos com o mesmo view-transition-name.

/**
 * @param {{ personImage: HTMLImageElement, personName: HTMLDivElement }} elementsTarget
 */
function defineViewTransitionName(elementsTarget) {
    elementsTarget.personImage.classList.add('person-image');
    elementsTarget.personName.classList.add('person-name');
}

async function onLinkNavigate(toUrl, fromUrl) {
    ...

    if (toUrl.pathname.startsWith('/dancers')) {
        elementsTarget = getTargetElements(toUrl);
        if (elementsTarget) defineViewTransitionName(elementsTarget);
    }

    ...
}

Após os elementos serem identificados e nomeados, iniciamos a substituição de todo o conteúdo body antigo pela nova página.

async function onLinkNavigate(toUrl, fromUrl) {

    ...

    const transition = document.startViewTransition(() => {
        document.body.innerHTML = response;

            /**
             * Se a requisição for de /dancers/* para /index.html
             * então nomearemos o card da dançarina
             */
        if (fromUrl.pathname.startsWith('/dancers')) {
            elementsTarget = getTargetElements(fromUrl);
            if (elementsTarget) defineViewTransitionName(elementsTarget);
        }
    });

    transition.finished.then(() => {
        if (elementsTarget) {
            elementsTarget.personImage.classList.remove('person-image');
            elementsTarget.personName.classList.remove('person-name');
        }
    });

    ...

}

Após a conclusão da transição, removeremos as classes que definem a propriedade view-transition-name para evitar duplicidade.

Simples, né? 💁

Mas podemos fazer muito mais.

Criando transições com o javascript 😯

Já acabou, Jéssica?? Nops!!!

Neste último exemplo, veremos como fazer uma animação usando Javascript.

Como vimos anteriormente, a promise transition.ready será cumprida quando a transição estiver pronta para começar. Nela, adicionamos a animação personalizada. É importante executar a transição nesta promise, pois é o momento que o browser capturou os dois estados necessários (o novo e o velho) e fez a composição.

No exemplo acima, usamos a API nativa Element.animate, porque ela dá o suporte necessário para pseudoelementos.

transition.ready.then(() => {
    document.documentElement.animate(
      [
        { transform: "rotate(0) scale(1)" },
        { transform: "rotate(360deg) scale(0)" },
      ],
      {
        duration: 1500,
        easing: "cubic-bezier(0.68,-0.55,0.27,1.55)",
        pseudoElement: "::view-transition-old(image)",
      }
    );

    document.documentElement.animate(
      {
        clipPath: [`circle(0 at 100px 100px)`, `circle(200px at 100px 100px)`],
      },
      {
        duration: 1500,
        easing: "ease-in",
        pseudoElement: "::view-transition-new(image)",
      }
    );
  });

Trabalhando com frameworks 💁

Caso você trabalhe com algum framework front-end, é possível também utilizar o startViewTransition. Abaixo segue alguns exemplos com alguns deles.

Vue JS: A chave aqui é `nextTick`, que cumpre a promise uma vez que o DOM foi atualizado. Conferir um exemplo.
Svelte: Muito semelhante ao Vue, mas o método para aguardar a próxima mudança é `tick`. Conferir um exemplo.
Lit: A chave aqui é a promessa `this.updateComplete`, que cumpre a promise uma vez que o DOM foi atualizado. Conferir um exemplo.
Angular: Utilize `applicationRef.tick`. Conferir um exemplo.
React: Utilize `flushSync`, porém tome cuidado com várias promises retornadas. Conferir um exemplo.

Aplicando interfaces no Typescript 😎

Como é um recurso recente (hoje 2023-08-03), a maioria dos editores não reconhecem a API. Então, caso você utilize o Typescript, basta adicionar o código abaixo em seu global.d.ts (ou informe o arquivo de tipo em compilerOptions.typeRoots no tsconfig.json)

export {};

interface ViewTransition {
  /**
   * A promise that fulfills when the promise returned by updateCallback fulfills,
     * or rejects when it rejects.
   */
  readonly updateCallbackDone: Promise<undefined>,

  /**
   * A promise that fulfills once the pseudo-elements for the transition are created,
   * and the animation is about to start.
   * It rejects if the transition cannot begin. This can be due to misconfiguration,
   * such as duplicate 'view-transition-name’s, or if updateCallbackDone returns a
     * rejected promise.
   * The point that ready fulfills is the ideal opportunity to animate the view
     * transition pseudo-elements with the Web Animation API.
   */
  readonly ready: Promise<undefined>,

  /**
   * A promise that fulfills once the end state is fully visible and interactive to
     * the user.
   * It only rejects if updateCallback returns a rejected promise, as this indicates
     * the end state wasn’t created.
   * Otherwise, if a transition fails to begin, or is skipped (by skipTransition()),
   * the end state is still reached, so finished fulfills.
   */
  readonly finished: Promise<undefined>,

  /**
   * Immediately finish the transition, or prevent it starting.
   * This never prevents updateCallback being called, as the DOM change
   * is independent of the transition
   * If this is called before ready resolves, ready will reject.
   * If finished hasn’t resolved, it will fulfill or reject along with
   * updateCallbackDone.
   */
  skipTransition: () => void,
}

type UpdateCallback = null|Promise<any>;

declare global {
  interface Document {
    startViewTransition: (updateCallback: UpdateCallback) => ViewTransition;
  }
}

Compatibilidade

Referências

CHROMIUM. Blink: renderer/core/view_transition. GitHub, c2021. Disponível em: <https://github.com/chromium/chromium/tree/4817833c534a72d50606e5f97d1e003f5885494d/third_party/blink/renderer/core/view_transition>. Acesso em: 05 ago. 2023.

W3C. CSS View Transitions Module Level 1. W3C, 2012. Disponível em: <https://www.w3.org/TR/css-view-transitions-1/>. Acesso em: 05 ago. 2023.

WICG. View Transitions Explainer. GitHub, 2021. Disponível em: <https://github.com/WICG/view-transitions/blob/main/explainer.md>. Acesso em: 05 ago. 2023.

CAN I USE. View Transitions. Can I Use, [s.d.]. Disponível em: <https://caniuse.com/view-transitions>. Acesso em: 05 ago. 2023.

FIM!! 🎆

Curtiu?? Não curtiu?? Tem alguma dúvida sobre o assunto?

Deixe um comentário para eu saber mais.

Espero que isso tenha sido útil para você. 😊

Série Nginx 6#: Controlando acesso

Valdeir S. — Fri, 01 Oct 2021 16:59:08 +0000

Opa!! Vamos avançar em nossa série. Hoje aprenderemos como controlar o acesso com filtro de IP e autenticação interna.

Bloqueando acessos

Você pode bloquear um IP (ou faixa de IP) utilizando a diretiva deny. Além do IP, é possível também utilizar o CIDR para bloquear requisições.

# Syntax: deny address | CIDR | unix: | all;
# Default: —
# Context: http, server, location, limit_except
#
# Bloqueia um IP específico
deny 127.0.0.1;

# Bloqueia faixa 142.250.218.0 - 142.250.218.255
deny 142.250.218.0/24;

# Bloqueia uma faixa de IP do tipo IPV6
deny 2001:0db8::/32;

# Bloqueia todos os acessos
deny all;

Bloqueando acesso a arquivos

Com o deny, também é possível bloquear acesso aos arquivos ou a um diretório. Basta utilizar a diretiva dentro do contexto location, por exemplo.

location ~ \.(log|zip|tar|gz|htaccess|bkp|old|txt)$ {
    deny all;
}

Permitindo acesso a determinados IPs

Além de bloquear, você pode apenas permitir determinados IPs ou faixa de ips. Isso é útil para limitar o acesso a determinada rede.

# Syntax: allow address | CIDR | unix: | all;
# Default: —
# Context: http, server, location, limit_except
#
# Bloqueia acesso local
allow 127.0.0.1;

# Permite acesso da faixa de IP 162.158.214.0 - 162.158.214.255
allow 162.158.214.0/24;

# Permite acesso a uma faixa IPV6
allow 2001:0db8::/32;

# Bloqueia todos os acessos
deny all;

Não faz sentido usar apenas allow, visto que — por padrão — todos os acessos são permitidos.

Resolvendo problema com CDN

Quando você utiliza um serviço como CloudFlare (ou similar), eles recebem a requisição e a repassam para seu servidor. Isso faz com que o IP recebido pelo Nginx não seja o real, o do cliente; mas sim o IP do servidor da CloudFlare. Como resolver isso?

Para resolver, você precisa configurar duas diretivas: set_real_ip_from e real_ip_header.

Na primeira, você definirá os endereços de IP confiável (True-Client-IP) que sabem o IP do cliente, ou seja, você configurará com os IPs da CloudFlare.

Na segunda, você informará o header que contém o endereço real do cliente. Normalmente é CF-Connecting-IP ou X-Forwarded-For.

Como esses dados são mutáveis, deixarei o link com as configurações atuais.

Auth Request

O sistema de subautorização do Nginx funciona através do módulo ngx_http_auth_request_module. Ele permite que o desenvolvedor crie um sistema de autorização baseado em sub-requisições (requisições internas).

Essas requisições devem retornar o status code 200 (2xx), 401 ou 403. A depender do código de status retornado, o Nginx liberará (ou não) a solicitação. Caso a autorização seja negada, o Nginx retornará o erro para o usuário.

Verificar suporte

Antes de começar, verifique se o Nginx foi compilado com o suporte ao módulo.

nginx -V 2>&1 | grep --color http_auth_request_module

Se não tiver configurado, compile o Nginx com a flag --with-http_auth_request_module

Observação: É importante que você saiba compilar o código fonte do Nginx. Caso não tenha esse conhecimento, acesse a postagem Série Nginx #2: Compilando o Nginx

Configurando rota

Para configurar a autorização, utilizaremos a diretiva auth_request.

Iremos configurar a autorização para uma rota, mas você pode configurar para um servidor virtual (no contexto server) ou todos os sites (no contexto http), beleza? 👍

server {
    # Outras configurações

    location /upload {
        # Syntax: auth_request uri | off;
        # Default: auth_request off;
        # Context: http, server, location
        #
        auth_request /auth_upload;

        proxy_pass http://upload-server;
    }
}

Perfeito! Agora vamos configurar a localização de autorização.

location = /auth_upload {
    proxy_pass http://auth-server;
}

Com isso já conseguimos realizar a validação. Lembrando que o status code do proxy http://auth-server deve retornar 2xx, 401 ou 403.

Bloqueando acesso direto

Em alguns sistemas, você pode querer bloquear o acesso direto à URL ou ao servidor de autenticação ou autorização. O Nginx oferece esse suporte com a diretiva internal, ou seja, o Nginx impedirá que o usuário acesse a URL /auth_upload e apenas ele fará o acesso.

location = /auth_upload {
    internal;

    proxy_pass http://auth-server;
}

No nosso exemplo, utilizarei os dados enviados na requisição POST para realizar a verificação da autorização, por isso é necessário configurar as diretivas proxy_pass_request_body e proxy_method.

Caso seu sistema de autorização não faça uso dos dados enviados no corpo da requisição, ignore-a.

location = /auth_upload {
    internal;

    proxy_pass http://auth-server;
    proxy_pass_request_body on;
    proxy_method POST;
}

Pronto! Com isso, o nosso sistema deverá funcionar corretamente.

Código para verificação da autorização

O código foi feito em Node e o servidor iniciado com Docker. Não explicarei o funcionamento porque a ideia é focar apenas no servidor web.

Utilizei o padrão adotado pelo S3, da AWS, para realizar a autorização ou negação. Ele basicamente verificará o método da requisição, content type, hash do arquivo e a data de envio e depois comparará com o hash enviado no header Authorization.

Realizando Upload

token="2HmVrZRYii8ZWrfIAFHLmlCYtqqv5nSASLCzZMHUg6M5vRlarfjumNDz9ZR5NHoY"

date_req=$(date -R)

hash=$(echo -en "POST\n$(md5sum anitta.mp4 | cut -d' ' -f1)\nvideo/mp4\n$date_req" | openssl sha1 -hmac "<user-key>" -hex)

http --form POST \
  php.valdeirpsr.dev/upload \
  Authorization:"AWS $token:$hash" \
  Date:"$date_req" \
  file@anitta.mp4

Como é feito o upload

O arquivo é enviado para a URL /upload;
O Nginx recebe a requisição;
O Nginx realiza uma subrequisição para autorização em /auth_upload;
O servidor http://auth-server realiza a validação e retorna o status code 200 ou 401.
O Nginx recebe a resposta da subrequisição e verifica o código retornado;
Se o código for 401 ou 403, o Nginx retorna um erro para o cliente; caso retorne 2xx, prossegue com a requisição de upload.

Conclusão

É isso aew, meu povo! Finalizamos mais uma etapa da série de Nginx. Caso tenham dúvidas e/ou sugestões, basta deixarem o comentário. Beleza?

Até a próxima!

Série Nginx #5: Trabalhando com Geolocalização por IP

Valdeir S. — Thu, 23 Sep 2021 20:00:51 +0000

Opa!!! Vamos aprender a configurar nosso primeiro módulo externo. 🤓🤓

Aprenderemos como realizar bloqueio e balancear requisições conforme a região do usuário.

Para realizar o bloqueio por cidade ou país, utilizaremos o módulo GeoIP.

Caso você não saiba instalar um módulo, acesse o capítulo Série Nginx #4: Instalando módulos de terceiros.

Após instalar o módulo, carregue-o no arquivo de configuração do Nginx.

echo "load_module modules-available/ngx_http_geoip2_module.so;" \
    | sudo tee -a /etc/nginx/modules-enabled/geoip2.conf

GeoIP2 Databases

Agora é necessário baixar os arquivos .mmdb. Eles possuem as configurações e regras necessárias para o módulo. Para isso, acesse o site https://dev.maxmind.com/geoip/geolite2-free-geolocation-data e realize o download. Após baixá-los, extraia em uma pasta como /etc/nginx/GeoIP2, por exemplo.

Configurando o módulo

Para configurar é simples. Iremos carregar o arquivo baixado e criar nossas variáveis que terão os valores de código de país, cidade e/ou continente.

http {
    ...

    # Cria variáveis relacionadas ao país de acesso
    #
    geoip2 GeoIP2/GeoLite2-Country.mmdb {
        $geoip2_data_continent_code   default="NU" continent code;
        $geoip2_data_country_iso_code country iso_code;
        $geoip2_metadata_country_build metadata build_epoch;
    }

    # Cria variáveis relacionadas à cidade de acesso
    #
    geoip2 GeoIP2/GeoLite2-City.mmdb {
        $geoip2_data_city_name   city names en;
        $geoip2_data_postal_code postal code;
        $geoip2_data_latitude    location latitude;
        $geoip2_data_longitude   location longitude;
        $geoip2_data_state_name  subdivisions 0 names en;
        $geoip2_data_state_code  subdivisions 0 iso_code;
    }
}

Ainda no bloco http, criaremos uma variável com a diretiva map para definir quais países terão permissão ou não de acesso.

http {
    ...

    # Permite apenas países lusófonos
    #
    map $geoip2_data_country_code $country_blocked {
        default 1;

        AO 0;
        BR 0;
        CV 0;
        GW 0;
        MZ 0;
        PT 0;
        ST 0;
        TL 0;
        GQ 0;
    }
}

Permite todos os países que possua o valor "0" tenham permissão de acesso.

No contexto server, definiremos nossa condição.

server {
    server_name valdeir.dev;

    if ($country_blocked) {
        return 403;
    }
}

Reincie o Nginx e faça o teste.

nginx -s reload

Load Balancer

Além de bloqueios, podemos usar o módulo de GeoIP2 para criar um load balancer por país ou continente, por exemplo.

upstream all {
    server default1.valdeir.dev:8080;
    server default2.valdeir.dev:8080;
}

upstream eu {
    server eu1.example.com:8080;
    server eu2.example.com:8080;
}

upstream as {
    server as1.example.com:8080;
    server as2.example.com:8080;
}

http {
    geoip2 GeoIP2/GeoLite2-Country.mmdb {
        $geoip2_data_continent_code continent code;
    }

    map $geoip2_data_continent_code $nearest_server {
        default all;

        EU      eu;
        AS      as;
    }

    server {
        listen 80;
        proxy_pass http://$nearest_server;
    }
}

Conclusão

Parabéns! Concluímos mais uma etapa. Caso tenha dúvidas ou sugestões, só deixar nos comentários.

Série Nginx #4: Instalando módulos de terceiros

Valdeir S. — Thu, 16 Sep 2021 15:17:44 +0000

Uhuu!! Chegamos em mais uma parte. 👊👊

Bem, os módulos no Nginx servem como uma extensão do servidor web. Eles podem ser instalados durante a compilação ou dinamicamente.

Os módulos trazem uma facilidade maior ao implementar e utilizar o Nginx. Podemos usar desde identificação do Estado até executar código PHP no próprio Nginx. A lista é graaaande.

Nesta postagem, aprenderemos a instalar módulos de terceiros. Este passo é importante para postagens futuras. Nelas utilizaremos vários módulos.

Observação: É importante que você saiba compilar o código fonte do Nginx. Caso não tenha esse conhecimento, acesse a postagem Série Nginx #2: Compilando o Nginx

Vamos lá! 🏃

Verificando módulos instalados

Antes de instalar, nada mais justo que verificar se o módulo já está instalado, correto?

Para confirmar, basta executar o código abaixo:

# Verifica se o módulo foi instalado durante a compilação
nginx -V 2>&1 | grep --color geoip2

# Lista módulos dinâmicos
ls -lah /etc/nginx/modules-available

A pasta /etc/nginx/modules-available pode variar de acordo com sua configuração de compilação, método de instalação e/ou sistema operacional. Caso você não saiba qual é a pasta de módulos, execute nginx -V e verifique o valor da opção --module-path.

Se aparecer algum resultado, o módulo geoip2 está instalado. Caso contrário, vamos instalá-lo.🤲

Instalando módulos

Para começar, instalaremos o módulo GeoIP2 como exemplo.

Vamos começar clonando o projeto no diretório /tmp/geoip2

 git clone --depth 1 \
    https://github.com/leev/ngx_http_geoip2_module.git \
    /tmp/geoip2

Prontinho!! Agora precisamos instalar a biblioteca libmaxminddb como pede a documentação do módulo.

Há duas formas de instalação: 1) Compilando; ou 2) Instalando via gerenciador de pacotes. Vamos escolher esta para facilitar as coisas. 😅

# Debian/Ubuntu
apt update;
apt install -y libmaxminddb-dev

# Alpine
apk update;
apk add --upgrade libmaxminddb-dev

Ótimo! Instalamos a biblioteca e já baixamos o módulo em /tmp/geoip2.

Vamos para o próximo passo. Don't stop! ⏩

Compilando o módulo

Agora vamos navegar até a pasta do código fonte do Nginx.

Se você não viu essa parte, recomendo voltar à postagem Série Nginx #2: Compilando o Nginx

cd ~/nginx-1.21.2 # No meu caso

Hora de configurar 🕒. Utilizaremos a flag --add-dynamic-module=<path> para informar a pasta onde baixamos o código fonte do módulo.

# Configura os diretórios e
# quais módulos o Nginx deverá instalar
./configure \
    --with-compat \
    --add-module=/tmp/geoip2

Caso você precise utilizar com proxies, utilize a flag --with-stream. O funcionamento depende de módulo para módulo.

Feito isso, vamos compilar o módulo.

make modules

Ótimo! Vamos enviar o módulo compilado para a pasta de módulos e carregá-lo nas configurações do Nginx.

# Carrega os módulos a pasta
cp objs/ngx_http_geoip2_module.so /etc/nginx/modules-available

Pronto! Tudo Instalado... 🎉💃
Mas... Verifique se o módulo realmente foi instalado. 😜

Habilitando o módulo

Para habilitar um módulo, precisamos utilizar a diretiva load_module <path> no contexto main (principal).

echo "load_module modules-available/ngx_http_geoip2_module.so;" | \
    sudo tee -a /etc/nginx/modules-enabled/geoip2.conf

O diretório do arquivo pode variar de acordo com sua configuração de compilação, método de instalação e/ou sistema operacional.

Reinicie o Nginx.

nginx -s reload

Testando o módulo

Não abordarei como configurar o módulo, que ficará para a próxima postagem, que será sobre segurança com Nginx.

Conclusão

É isso aí!!! Finalizamos mais uma parte. Nas próximas postagens, aprenderemos a configurar o GeoIP e a utilizar outros módulos.

Até breve! 🙌

Série Nginx #3: Conhecendo as diretivas

Valdeir S. — Wed, 08 Sep 2021 14:39:00 +0000

Diretivas do Nginx

Olá, galerinha, pronto para mais uma postagem? 🥳

Vamos conhecer e aprender como utilizar algumas das diretivas mais importantes do Nginx.

De acordo com a documentação oficial, o nginx consiste em módulos controlados por diretivas especificadas nos arquivos de configuração. Elas são divididas em diretivas simples e diretivas em bloco.

Uma diretiva simples consiste no nome e nos parâmetros separados por espaços e com um ponto e vírgula (;) no final.

Uma diretiva de bloco permite que o desenvolvedor utilize outras diretivas dentro de chaves ({ e }). Quando isso ocorre, essa diretiva de bloco é chamada de contexto (exemplos: events, http, server e location).

Vamos conhecer as diretivas.

add_header (fonte)

Como o nome deixa claro, essa diretiva serve para definir headers direto do Nginx. Isso é útil para definir os cabeçalhos de CORS, por exemplo.

# Syntax: add_header name value [always];
# Default: —
# Context: http, server, location, if in location
#
location /upload {
    add_header "Access-Control-Allow-Origin" "https://*.valdeir.dev";
    add_header "Access-Control-Allow-Methods" "GET, OPTIONS";
    add_header X-Dev "Valdeir Psr" always;
}

O cabeçalho da requisição acima será:

http http://php.valdeirpsr.com.br/upload/foto.jpg
HTTP/1.1 200 OK
Content-Length: 1333425
Content-Type: image/jpeg
Date: Fri, 27 Aug 2021 15:28:23 GMT
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: https://*.valdeir.dev
x-dev: Valdeir Psr

+-----------------------------------------+
| NOTE: binary data not shown in terminal |
+-----------------------------------------+

alias (fonte)

Com a diretiva alias, podemos substituir a localização da pasta definida na diretiva root.

root /var/www/html;

location /css {
    # Syntax: alias path;
    # Default: —
    # Context: location
    #
    alias /dev/vda2/css/;
}

Isso significa que a requisição https://valdeir.psr/css/global.css carregará os arquivos da pasta /dev/vda2/css.

HTTP	File
https://valdeir.psr/css/global.css	/dev/vda2/css/global.css
https://valdeir.psr/images/logo.svg	/var/www/html/images/logo.svg

client_max_body_size (fonte)

Você pode usar essa diretiva para configurar o tamanho máximo do corpo da requisição. Útil para limitar o tamanho de arquivos em formulários de upload. Caso o valor definido seja 0, desabilita a verificação do tamanho dos dados enviados.

# Syntax: client_max_body_size size;
# Default: client_max_body_size 1m;
# Context: http, server, location
#
client_max_body_size 1G;

error_page (fonte)

A diretiva permite a customização de uma página de erro. Quando a página retornar o erro 404, por exemplo, então o Nginx irá retornar para o usuário o arquivo /not_found.html.

# Syntax: error_page code ... [=[response]] uri;
# Default: —
# Context: http, server, location
#
error_page 404             /not_found.html
error_page 500 502 503 504 /50x.html;

Também é possível redirecionar o usuário para outra página ou domínio com um novo status code

server_name valdeir.dev;

error_page 401 =200 https://auth.$server_name;

Observação: O parâmetro code não pode ser igual a 499, menor que 300 ou maior que 599.

listen (fonte)

Essa diretiva permite definir qual o endereço e/ou porta o Nginx deverá "ouvir" as requisições. Por padrão, o servidor usará as portas 80 e 8000.

# Syntax address: listen address[:port] [default_server] [ssl] [http2];
#
# Syntax port: listen port [default_server] [ssl] [http2];
#
# Syntax PID: listen unix:path [default_server] [ssl] [http2];
#
# Default: listen *:80 | *:8000;
# Context: server
#
listen 80;
listen [::]:80;
listen 443 ssl;
listen [::]:443 ssl;

Parâmetros adicionais

default_server: Informa se o servidor virtual é o padrão. Caso o parâmetro não seja informado, o primeiro servidor localizado será definido como padrão. Você pode utilizar esse parâmetro apenas em um servidor virtual.
ssl: Esse parâmetro informa se o servidor deve receber conexões criptografadas. Lembrando que, ao utilizar esse parâmetro, é importante configurar as diretivas ssl_certificate e ssl_certificate_key com as chaves para que o Nginx consiga descritografar as informações e repassá-las à aplicação.
http2: Indica que o Nginx deve aceitar conexões com o protocolo HTTP/2. Lembrando que o SSL é obrigatório para o uso desse protocolo.

location (fonte)

A diretiva mais utilizada. Ela serve para aplicar configurações de acordo com a URI da requisição, que pode ser identificada com o uso de expressões regulares ou correspondência exata.

# Syntax: location [ = | ~ | ~* | ^~ ] uri { ... }
#         location @name { ... }
# Default: —
# Context: server, location
#

Utilizando os modificadores

O uso do modificador = indica que as configurações deverão ser aplicadas apenas quando a URI for exatamente igual ao valor informado no parâmetro URI. No exemplo abaixo, as configurações serão aplicadas na URI /upload, porém não serão aplicadas na URI /upload/avatar.svg, por exemplo.

location = /upload {
    ...
}

O uso do modificador ~ indica que as configurações deverão ser aplicadas quando a URI for correspondente à expressão regular definida na diretiva. No exemplo abaixo, as configurações serão aplicadas nas URI /upload/avatar.jpeg, /upload/avatar.jpg, /upload/avatar.gif e /upload/avatar.webp, porém não serão aplicadas nas URI /upload/avatar.mp4, /upload/avatar.jpg.avif ou /UPLOAD/avatar.jpg.

location ~ /upload/.*\.(jpe?g|gif|webp)$ {
    ...
}

O modificador ~* funciona da mesma forma que ~. A diferença é que essa é case-insensitive e esta, não; ou seja, utilizando o modificador ~*, a URI /upload/avatar.jpg e /UPLOAD/avatar.jpg serão processadas igualmente.

location ~* /upload/.*\.(jpe?g|gif|webp)$ {
    ...
}

O modificador ^~ determina que o NGINX deverá parar de pesquisar correspondências mais específicas e utilizar essa diretiva.

location ^~ /upload/.*\.(jpe?g|gif|webp)$ {
    # Para aqui e não continua
}

location ~* \.(jpe?g|gif|webp)$ {
    ...
}

Caso nenhum modificador seja utilizado, o Nginx comparará o início da URI com parte da URL. No exemplo abaixo, as configurações da diretiva location serão aplicadas em /upload, /upload/avatar.jpg e /uploadsssss/avatar.jpg, por exemplo. Esse modo diferencia maiúscula de minúscula.

location /upload {
    ...
}

Capturando grupos de RegEx

Na diretiva location, você pode capturar os grupos definidos em sua RegEx. Isso é útil para tornar as configurações dinâmicas.

root /var/www/html;

location ~* /profile/([^/]+).jpg {
    alias /dev/vda2/users/$1/avatar.jpg;
}

No exemplo acima, informamos que requisições com a URI /profile/qualquer-coisa.jpg será apontada para o arquivo /dev/vda2/users/qualquer-coisa/avatar.jpg.

Nomeando location

Nomear a diretiva location é importante para reutilizá-la em outras partes do código ou quebrar as regras em pedaços para facilitar a manutenção e/ou leitura dos arquivos de configuração. A sintaxe é semelhante as que já foram mostradas. A diferença está no parâmetro @.

location / {
    try_files $uri $uri/ @opencart;
}

location ~ ^/sitemap.xml$ {
    try_files $uri @opencart;
}

location @opencart {
    rewrite ^/sitemap.xml$ /index.php?route=extension/feed/google_sitemap last;

    rewrite ^/(.+)$ /index.php?_route_=$1 last;
}

map (fonte)

A diretiva map permite criar variáveis de acordo com um mapeamento feito através de valores key:value definidos nela. É útil para tornar as configurações dinâmicas.

No exemplo abaixo, utilizamos a variável $http_user_agent, que é nativa do Nginx, para capturar o User Agent do usuário e comparar com as chaves. Se a variável do Nginx for igual à chave, então define um valor na variável a ser criada.

# Syntax: map $variable_nginx $variable_name { ... }
# Default: —
# Context: http
#
map $http_user_agent $ua_blocked {
    default 0; # Parâmetro

    ~Jorgee 1; # Block "Jorgee", "One Jorgee Two"
    ~ZmEu   1;
    ~*Spam  1; # Block "SPAM", "One spam Two"
    ~*Scan  1;
    Scanner 1; # Block "Scanner", but not "PSR-Scanner"
    Wget    1;
    curl    1;
}

server {
    if ($ua_blocked) {
        return 403;
    }
}

No exemplo acima, se a variável $http_user_agent for igual à Jorgee, ZmEu, Spam etc., define o valor 1 à variável $ua_blocked. Caso valor nenhum coincida, utiliza o valor do parâmetro default.

Ao usar ~ ou ~*, você indica que o Nginx deve tratar a chave como expressão regular case-sensitive e case-insensitive, respectivamente. Não usá-las, indica que a correspondência deve ser exata.

Parâmetros do map

default <valor>: Define um valor padrão que retornará quando as regras não corresponderem às chaves definidas.
include <arquivo>: Inclui um arquivo com valores. Pode haver várias inclusões.
volatile: Indica que a variável não pode ser armazenada em cache.
hostnames: Indica que os valores de origem podem ser nomes de host com um prefixo ou máscara de sufixo.

Funcionamento do map

Se houver mais de uma correspondência, o Nginx seguirá a ordem abaixo:

Valor string sem máscara;
Valor da string mais longa com uma máscara de prefixo, por exemplo: *.example.com;
Valor da string mais longa com uma máscara de sufixo, por exemplo, mail.*;
Primeiro valor encontrado com a expressão regular;
Valor do parâmetro default.

return (fonte)

Ao utilizar essa diretiva, o Nginx irá parar o processamento e retornará um valor definido ou um redirecionamento de página.

No exemplo abaixo, ao utilizar o código de status 301 ou 302 ou apenas uma URL, o Nginx informará ao navegador que o cliente deve ser redirecionado para a URL informada.

Ao utilizar o código de status 444, o Nginx fechará a conexão e não retornará uma resposta.

Em qualquer outro código de status, o Nginx retornará o texto como o corpo da resposta.

# Syntax: return code [text];
#         return [301|302] URL;
# Default: —
# Context: server, location, if
#

location /retorna {
    return 200 "Corpo da Mensagem";
}

location /movido-permanente {
    return 301 https://another-url.com;
}

location /movido-temporario {
    return $scheme://auth.$server_name; # Equivale a https://auth.valdeir.dev
}

location /fechado {
    return 444;
}

rewrite (fonte)

A diretiva permite reescrever a URI internamente ou redirecionar o usuário para outra página utilizando o status code 301 ou 302. Caso haja mais de uma diretiva rewrite, a URI poderá ser substituída/processada até a última diretiva ou conforme o uso das flags.

# Syntax: rewrite regex replacement [flag];
# Default: —
# Context: server, location, if
#
rewrite ^/sitemap.xml$ /index.php?route=extension/feed/google_sitemap last;

Flag (opcional)

last: Para o processamento atual e busca um bloco location que corresponda à nova URI.
break: Para o processamento atual e retorna a resposta para o usuário.
redirect: Informa ao navegador que o usuário deverá ser redirecionado se o parâmetro replacement iniciar com https://, http:// ou a variável $scheme. O redirecionamento deverá ser feito com o status code 302
permanent: Informa ao navegador que o usuário deverá ser redirecionado se o parâmetro replacement iniciar com https://, http:// ou a variável $scheme. O redirecionamento deverá ser feito com o status code 301

Quando usar last ou break?

Como explicado, o last buscará um novo bloco location para tratar a URI substituída. Caso utilize essa flag dentro do contexto location, o Nginx poderá entrar em um loop infinito e gerar o erro 500. Portanto, quando possível, opte por break quando estiver no contexto do location; e, last, server.

server {
    rewrite ^/upload/(.*)$ /upload/foto/$1 last;
}

location /static/(.*) {
    rewrite ^/static/(.*)$ /static/foto/$1 break; # O `break` evita o erro 500
}

Atenção! O grupo capturado na RegExp pode ser substituído ao usar map. Para resolver, você pode usar um nome para o grupo ou criar uma variável antes de usar a diretiva rewrite.

# Permite que o Nginx retorne uma imagem otimizada de acordo com o navegador
# Para saber mais, acesse o link <link-do-próximo-artigo>
#
map $uri $file_ext {
    ...
}

location /upload {
    set $file_extension $file_ext;

    rewrite ^/upload/(.*)\..+$ "/static/$1$file_extension" break;
}

root (fonte)

Define o diretório para as requisições. No exemplo abaixo, ao acessar a URI /css, o Nginx carregará o arquivo da pasta /dev/vda2/css/ em vez do diretório /var/www/html.

Caso a diretiva root não seja definida no escopo location, o Nginx buscará na diretiva server e caso não encontre, buscará na diretiva http.

server {
    # Syntax: root path;
    # Default: root html;
    # Context: http, server, location, if in location
    #
    root /var/www/html;

    location /css {
        root /dev/vda2/css;
    }
}

Quando usar alias e root?

O root adiciona a URI ao construir o caminho do arquivo, enquanto o alias modifica a URI. Além disso, o alias não pode estar dentro do contexto location nomeado e não pode usar a variável $realpath_root.

# Na requisição `/foto/luisa.jpg`, o Nginx carregará o arquivo
# /var/www/html/static/foto/luisa.jpg
#
location /foto {
    root /var/www/html/static;
}

# Na requisição `/imagem/sonza.jpg`, o Nginx carregará o arquivo
# /var/www/html/static/sonza.jpg
#
location /imagem {
    alias /var/www/html/static/;
}

server (fonte)

Essa diretiva em bloco serve para criar um servidor virtual.

# Syntax: server { ... }
# Default: —
# Context: http
#
server {
    server_name valdeir.dev www.valdeir.dev;
}

server_name (fonte)

Define o nome/URL do servidor virtual criado. É possível definir mais de um nome quando separados por espaços. A diretiva, assim como rewrite e location, permite o uso de expressões regulares.

Criaremos abaixo um servidor virtual que receberá as requisições das URLS:

valdeir.dev
cdn.valdeir.dev
assets.valdeir.dev
qualquer-coisa.valdeir.cdn

server {
    # Syntax:  server_name name ...;
    # Default: server_name "";
    # Context: server
    #
    server_name valdeir.dev ~(cdn|assets)\.valdeir\.dev$ *.valdeir.cdn;
}

Atenção! Para utilizar RegExp, é necessário que o Nginx tenha sido compilado com suporte à biblioteca PCRE.

Através da diretiva server_name, você pode criar variáveis de acordo com os grupos capturados na sua expressão regular.

server {
    server_name ~^(www\.)?(?<domain>.+)$;

    location / {
        root /sites/$domain;
    }
}

server {
    server_name _;

    location / {
        root /sites/default;
    }
}

Ordem na busca pelos servidor

Quando há mais de um nome de servidor, o Nginx seguirá a seguinte ordem:

Procurar pelo nome exato (valdeir.dev);
Procurar pelo nome mais longo com o wildcard (*) como prefixo (*.valdeir.dev);
Procurar pelo nome mais longo com o wildcard (*) como sufixo (valdeir.*);
Procurar pela primeira ocorrência usando expressão regular.

Observação! Você, obviamente, deve cadastrar corretamente os dados de CDN que redirecione o site para seu servidor.

try_files (fonte)

Essa diretiva verificará se um arquivo existe seguindo a ordem pré-definida pelo administrador. O processamento é feito semelhante ao das diretivas alias e root. Ela permite também que o cliente possa acessar uma pasta quando o valor terminar com uma barra (/). Isso é útil quando o desenvolvedor utiliza a diretiva autoindex. Se arquivo nenhum for encontrado, o o usuário será redirecionado para outra página, URL ou bloco location nomeado.

root /var/www/html;

autoindex on;

location /upload {
    # Syntax: try_files file ... uri;
    #         try_files file ... =code;
    # Default: —
    # Context: server, location
    #
    try_files $uri $uri/ /empty.gif =444;
}

No exemplo acima, ao acessar a requisição /upload/avatar.webp, o Nginx seguirá a seguinte ordem:

Verifica se o arquivo /var/www/html/upload/avatar.webp existe; se não existir,
Verifica se a pasta /var/www/html/upload/avatar.webp/ existe; se não existir,
Verifica se o arquivo /var/www/html/empty.gif existe; se não existir,
Fecha a conexão sem uma resposta (usando o =444).

É possível também utilizar bloco location nomeado.

location / {
  try_files $uri $uri/ @opencart;
}

location @opencart {
  rewrite ^/sitemap.xml$ /index.php?route=extension/feed/google_sitemap last;
  rewrite ^/googlebase.xml$ /index.php?route=extension/feed/google_base last;
  rewrite ^/system/storage/(.*) /index.php?route=error/not_found last;

  rewrite ^/(.+)$ /index.php?_route_=$1 last;
}

location ~* (\.twig|\.tpl|\.ini|\.log|(?<!robots)\.txt)$ {
  deny all;
}

Conclusão

Essas foram as diretivas mais utilizadas no Nginx. Nas próximas postagens, aprenderemos como aumentar a segurança e a performance do nosso site. Beleza? 👍

Série Nginx #2: Compilando o Nginx

Valdeir S. — Thu, 02 Sep 2021 19:21:15 +0000

Opa!! Chegamos em mais uma parte da série sobre Nginx.

Neste capítulo, aprenderemos como compilar o código fonte do Nginx no Ubuntu.

Quais as vantagens? 😎

Flexibilidade;
Utilização de módulos de terceiros;
Aplicar as correções de segurança mais recentes.

E as desvantagens? 😢

É mais complexo;
Demanda mais tempo.

Do que preciso para compilar o código?? 👷

Precisamos instalar algumas ferramentas para "buildar" e adicionar suporte a determinadas funcionalidades do Nginx. São elas:

apt update;
apt install -y curl \
    vim \              # Será nosso editor <3
    build-essential \  # Serve para "buildar"
    gcc \              # " para compilar o código escrito em C
    systemd \          # " para gerenciar o serviço do servidor
    libgd-dev \        # " para o uso do módulo de otimização de imagem (será mostrado em outro capítulo)
    libpcre3-dev \     # " para funções do Core e da diretiva Rewrite, Location (RegExp em geral)
    libssl-dev \       # " para utilizar SSL
    libmaxminddb-dev \ # " para usar um módulo de terceiro para GeoIP2
    zlib1g-dev         # " para otimização com GZIP

Ferramentas instaladas, vamos baixar nosso Nginx. Neste capítulo, utilizaremos a versão 1.21.

Baixá-la é simples, basta executar o comando abaixo em seu terminal.

# Baixa e extrai
curl -sSLo- http://nginx.org/download/nginx-1.21.2.tar.gz | \
tar -xzvf -

# Acessa a pasta criada
cd nginx-1.21.2

Ótimo! Baixamos! Agora é hora de usar as ferramentas baixadas para compilar o Nginx. 🎉🎉

Irei deixar o código completo e depois explicarei cada uma das flags.

# Configura os diretórios e
# quais módulos o Nginx deverá instalar
./configure \
    \
    --prefix=/etc/nginx \
    --sbin-path=/usr/sbin/nginx \
    --conf-path=/etc/nginx/nginx.conf \
    --http-log-path=/var/log/nginx/access.log \
    --error-log-path=/var/log/nginx/error.log \
    --pid-path=/run/nginx.pid \
    --modules-path=/etc/nginx/modules-available \
    \
    --http-client-body-temp-path=/usr/local/nginx/client_body_temp \
    --http-proxy-temp-path=/usr/local/nginx/proxy_temp \
    --http-fastcgi-temp-path=/usr/local/nginx/fastcgi_temp \
    --http-uwsgi-temp-path=/usr/local/nginx/uwsgi_temp \
    --http-scgi-temp-path=/usr/local/nginx/scgi_temp \
    \
    --with-debug \
    --with-compat \
    --with-pcre-jit \
    --with-pcre \
    --user=www-data \
    --group=www-data \
    --with-threads \
    \
    --with-http_ssl_module \
    --with-http_stub_status_module \
    --with-http_realip_module \
    --with-http_auth_request_module \
    --with-http_v2_module \
    --with-http_dav_module \
    --with-http_slice_module \
    --with-http_addition_module \
    --with-http_gunzip_module \
    --with-http_gzip_static_module \
    --with-http_image_filter_module=dynamic \
    --with-http_sub_module \
    --with-stream=dynamic \
    --with-stream_ssl_module \
    \
    --without-mail_pop3_module \
    --without-mail_imap_module \
    --without-mail_smtp_module

# Compila o Nginx já configurado
make

# Instala o Nginx no sistema
make install

Apareceu algum erro? Não? 🎉🎉
Ótimo! Finalizamos a instalação do servidor. Para testar, basta iniciar o serviço do Nginx e abrir o navegador http://localhost 🖥

/usr/sbin/nginx

Nos próximos capítulos, ao indicar um módulo irei informar qual flag deverá ser utilizada para instalá-lo com o Nginx. Ela deverá ser utilizada no momento da compilação.

Explicação das Flags 🚩

Não é obrigatório saber todas, mas é importante saber o que você está instalando e para que cada flag serve.

Configurações de Caminhos

O script configure permite definir caminhos para arquivos binários e de configuração NGINX e para bibliotecas dependentes como PCRE ou SSL, a fim de vinculá-los ao binário NGINX.

--prefix=<path>: Define o diretório principal das configurações do Nginx. Padrão: /usr/local/nginx
-sbin-path=<path>: Define o nome e o caminho do arquivo executável. Padrão: <prefix>/sbin/nginx
--conf-path=<path>: Define o arquivo principal de configuração do Nginx. É possível carregar o Nginx com um arquivo de configuração diferente, basta usar a flag -c <file>. Padrão: <prefix>/nginx.conf
--http-log-path=<path>: Define o arquivo principal do log de acesso geral. É possível configurar um arquivo diferente para cada servidor virtual usando a diretiva access_log. Padrão: <prefix>/logs/access.log
--error-log-path=<path>: Define o arquivo principal do log de erro geral. É possível configurar um arquivo diferente para cada servidor virtual usando a diretiva error_log. Padrão: <prefix>/logs/error.log
--pid-path=<path>: Define o nome do arquivo que conterá o PID (ID do processo mestre). Você pode alterar o local no arquivo nginx.conf. Padrão: <prefix>/logs/nginx.pid
--modules-path=<path>: Define o diretório onde os módulos dinâmicos serão instalados. Padrão: <prefix>/modules/

Configurações de diretórios de dados temporários

--http-client-body-temp-path=<path>: Define o diretório em que será armazenados temporariamente o corpo das requisições. Padrão: <prefix>/client_body_temp
--http-proxy-temp-path=<path>: Define o diretório em que serão armazenados temporariamente os dados recebidos ao utilizar proxy reverso. Padrão: <prefix>/proxy_temp
--http-fastcgi-temp-path=<path>: Define o diretório em que serão armazenados temporariamente os dados recebidos ao utilizar por servidores FastCGI. Padrão: <prefix>/fastcgi_temp
--http-uwsgi-temp-path=<path>: Define o diretório em que serão armazenados temporariamente os dados recebidos ao utilizar por servidores UWSGI. Padrão: <prefix>/uwsgi_temp
--http-scgi-temp-path=<path>: Define o diretório em que serão armazenados temporariamente os dados recebidos ao utilizar por servidores SCGI. Padrão: <prefix>/scgi_temp

Configurações gerais do Nginx

--with-debug: Habilita os logs de debug.
--with-compat: Habilita a compatibilidade com módulos dinâmicos.
--with-pcre-jit: Habilita a biblioteca PCRE com suporte a “just-in-time compilation”. Requer a biblioteca PCRE instalada.
--with-pcre: Força o uso da biblioteca PCRE. Requer a biblioteca PCRE instalada.
--user=user-name: Define o usuário sem privilégios cujas credentiais serão usadas nos processos de trabalho (Services Worker). Padrão: nobody
--group=group-name: Define o nome do grupo sem privilégios cujas credentiais serão usadas nos processos de trabalho (Services Worker). Padrão: O mesmo que --user
--with-threads: Habilita a thread pools. Elas são usadas para leitura e envio de arquivos sem bloquear os processos de trabalho.

Ativando módulos

O NGINX consiste em um conjunto de módulos específicos de função, que são compilados com o script configure junto com outras opções de construção.

Se você quiser ativar um módulo que não é "buildado" por padrão, utilize o prefixo --with-<nome_do_modulo>.

--with-http_ssl_module: Habilita suporte ao protocolo HTTPS para um servidor virtual. Requer a biblioteca openssl
--with-http_stub_status_module: Habilita o módulo ngx_http_stub_status_module. Ele é usado por plataformas de métrica ou gerenciamento de *logs*.
--with-http_realip_module: Habilita o módulo ngx_http_realip_module. Ele é usado para alterar o endereço do cliente. Com o Cloudflare, por exemplo, permite identificar o IP real do usuário.
--with-http_auth_request_module: Habilita o módulo ngx_http_auth_request_module. Ele é utilizado para implementação de subrequisições para autenticação.
--with-http_v2_module: Habilita suporte ao protocolo HTTP/2.
--with-http_dav_module: Habilita o módulo ngx_http_dav_module. Ele é utilizado para gerenciamento de arquivos com o protocolo WebDAV.
--with-http_slice_module: Habilita o módulo ngx_http_slice_module. Ele é usado para dividir uma requisição. Isso permite retornar partes de um arquivo de acordo com o cabeçalho Range, por exemplo.
--with-http_addition_module: Habilita o módulo ngx_http_addition_module. Ele é usado para modificar uma resposta adicionando um conteúdo antes ou depois dela.
--with-http_gunzip_module: Habilita o módulo ngx_http_gunzip_module. Ele é utilizado para compactação com gzip
--with-http_gzip_static_module: Habilita o módulo ngx_http_gzip_static_module. Ele é utilizado para transferência de arquivos compactados com gzip.
--with-http_image_filter_module=dynamic: Habilita o módulo ngx_http_image_filter_module. Ele serve para modificar/alterar arquivos de imagens (JPEG, GIF, PNG, WEBP).
--with-http_sub_module: Habilita o módulo ngx_http_sub_module. Ele permite substituir trechos da resposta.
--with-stream=dynamic: Habilita o módulo ngx_stream_core_module para proxy TCP/UDP e balanço de carga genérico.
--with-stream_ssl_module: Habilita o suporte ao procotolo SSL/TLS para módulo ngx_stream_core_module.

Desativando módulos

Alguns módulos como Rewrite e HTTP são "buildados" por padrão. Para desativá-los, basta usar o prefixo --without-<nome-do-modulo>.

--without-mail_pop3_module: Desabilita o protocolo POP3 para o proxy de email
--without-mail_imap_module: Desabilita o protocolo IMAP para o proxy de email
--without-mail_smtp_module: Desabilita o protocolo SMTP para o proxy de email

Ufa!! Terminamos. 🥱🥱
Para saber outras flags, basta acessar o link http://nginx.org/en/docs/configure.html

Organizando nossa estrutura 📝

Se você abrir o arquivo /etc/nginx/nginx.conf, verá que o Nginx já deixou uma configuração pronta. Eu não curto muito essa estrutura e essa configuração, então mudá-la-ei, mas este passo é totalmente opcional e fica de acordo com o gosto de cada dev.

# Cria as pastas necessárias
mkdir -p /etc/nginx/{modules-enabled,config_default,sites-available,sites-enabled,log_formats,snippets} /var/www/html

# Move os arquivos de exemplo
mv /etc/nginx/*.default /etc/nginx/config_default

Agora vamos reescrever o arquivo de configuração /etc/nginx/nginx.conf com o conteúdo abaixo:

Falta pouco! Como removemos o código padrão, nosso servidor parou de funcionar. Precisamos criar um novo servidor virtual, beleza? 👍

vim /etc/nginx/sites-available/valdeir.dev.conf

No vim, digite a configuração abaixo:

server {
    server_name _;

    index index.html index.htm;
    autoindex on;

    location / {
        try_files $uri $uri/ =404;
    }
}

Ótimo! Agora é necessário criar um link simbólico no diretório sites-enabled para ativar o site. Ainda no vim, aperte ESC duas vezes e digite:

:w <enter>
:! ln -s %:p /etc/nginx/sites-enabled <enter>
:q

Após cada modificação nos arquivos de configuração, é necessário recarregar o Nginx.

/usr/sbin/nginx -s reload

Criando serviço no Ubuntu

Este passo também é opcional. Ele permitirá gerenciar o Nginx através do systemd (auto iniciar, parar, recarregar etc).

É simples! Basta criar o arquivo /lib/systemd/system/nginx.service com o código abaixo:

[Unit]
Description=The NGINX HTTP and reverse proxy server
After=syslog.target network-online.target remote-fs.target nss-lookup.target
Wants=network-online.target

[Service]
Type=forking
PIDFile=/run/nginx.pid
ExecStartPre=/usr/sbin/nginx -t
ExecStart=/usr/sbin/nginx
ExecReload=/usr/sbin/nginx -s reload
ExecStop=/bin/kill -s QUIT $MAINPID
PrivateTmp=true

[Install]
WantedBy=multi-user.target

O valor de PIDFile deverá ser igual ao da flag --pid-path, que usamos durante a compilação.

O valor de ExecStartPre, ExecStart e ExecReload deverá ser igual ao da flag --sbin-path.

Conclusão

Chegamos ao final de mais um capítulo. Nos próximos, aprenderemos o que e como funcionam as princiais diretivas do Nginx; aprenderemos também como melhorar e segurança e performance de nossos sites.

Bem-vindo(a) ao @Container Queries CSS

Valdeir S. — Thu, 26 Aug 2021 16:57:21 +0000

Image cover by https://hermes.digitalinnovation.one

O que é

Recentemente, o Google Chrome adicionou o recurso CSS @container query. A novidade é semelhante as @media queries, que são usadas para auxiliar a construção de sites responsivos.

O recurso foi proposto por Miriam Suzanne, contribuidora do projeto SASS e especialista convidada no projeto W3C, com base em uma proposta do David Baron.

Para que serve

A novidade permitirá que os desenvolvedores apliquem estilizações em um elemento de acordo com o tamanho do elemento pai e não apenas do viewport como ocorre com @media query.

A vantagem da novidade é escrever elementos modulares com base em suas dimensões sem a necessidade de JavaScript. Junto com o recurso, o CSS receberá duas novas propriedades.

Novas propriedades CSS

container-name: É ser usada para identificar o container. Assim, será possível isolar as regras de cada elemento.
container-type: É usada para definir o tipo de container. Atualmente, há três valores possíveis.

Valores da propriedade container-type

block-size: Estabelece um container para uma consulta dimensional no eixo vertical do próprio container (altura).
inline-size: Estabelece um container para uma consulta dimensional no eixo horizontal do próprio container (largura).
size: Estabelece um container para uma consulta dimensional nos eixos vertical e horizontal do próprio container.

Atenção! A depender do valor da propriedade writing-mode, a opção inline-size poderá utilizar o eixo vertical; e a opção block-size, o eixo horizontal para consulta dimensional.

Como usar

Alguns trechos de CSS, JavaScript e HTML foram suprimidos, pois o foco é apenas na novidade.

Para adicionar suporte aos containers, é preciso criar um elemento pai que deverá receber a propriedade container-type.

.music {
  container-name: musics;
  container-type: inline-size;
  flex: 1 1 calc(50% - 1rem);
}

A propriedade container-name é importante para tornar o elemento o mais modular possível. Com ele, é possível informar regras específicas para cada elemento, no entanto, o uso da propriedade é opcional.

Após declarar um @container, crie as regras para definir as customizações dele. Criá-las é simples, a sintaxe é semelhante à das media rules e aceita múltiplas condições e regras.

@container [<container-name>] [(<feature-name>: <feature-value>)] [and (<feature-name>: <feature-value>)] {
  /* Code Here */
}

Segue exemplo:

/**
 * Se a largura máxima do container 
 * (div.music) for menor que 570px...
 */
@container musics (max-width: 570px) {
  .card {
    contain: content;
    grid-template-areas: "media media"
      "heading heading"
      "content content"
      "footer footer";
    height: auto;
    padding: 0 0 1rem 0;
  }

  .card .card-media,
  .card .card-media > img {
    width: 100%;
  }

  .card .card-heading,
  .card .card-content,
  .card .card-footer {
    padding: 0 1rem;
  }

  .card .card-content {
    height: 0px;
    opacity: 0;
    transition: all 1s;
  }

  .card .card-content.active {
    height: 80px;
    opacity: 1;
  }
}

No HTML, foi adicionada a seguinte estrutura:

<!--
- Elemento PAI, que deverá
- receber a propriedade `container-type`
-->
<div class="music">

  <!--
  - Estrutura do card da música
  -->
  <div class="card" id="carta_1">
    <div class="wave"></div>

    <!--
    - Capa do álbum
    -->
    <div class="card-media">
      <img src="https://source.unsplash.com/random/185x185" />
    </div>

    <!--
    - Nome da música do artista
    -->
    <div class="card-heading">
      <h1>Carta Nº 1</h1>
      <h2>SID Mc</h2>
    </div>

    <!--
    - Letra da música
    -->
    <div class="card-content">
      Eu vi escorrer na pia a alegria avermelhada ♫<br>
      Eu vi escorrer na pia a agonia acumulada ♪
    </div>

    <div class="card-footer">
      <button type="button">ORDER NOW</button>
    </div>
  </div>
</div>

Demonstração

Demonstração em vídeo

Comparação com @media query

A consulta de dispositivo (ou media query) surgiu para facilitar a criação de sites responsivos. Com ele, é possível configurar diversas regras de estilização de acordo com o tamanho do viewport (área visível da tela). É legal e funciona corretamente.

No entanto, ainda há limitações. As estilizações com @media query são aplicadas somente quando o usuário altera o tamanho da janela (maximizando, redimensionando ou alterando a orientação), por exemplo.

O sistema de @container foi proposto para remover essa limitação. Ele permite que as estilizações sejam feitas de acordo com o tamanho do elemento pai independente das dimensões da viewport.

Compatibilidade

Até o momento (24 ago 2021), o recurso está disponível apenas para o Chrome 92 ou superior.

Para habilitar e testá-lo, basta acessar a página chrome://flags, pesquisar por Container Queries, habilitar o recurso e reiniciar o navegador.

Polyfill

Como alternativa, pode utilizar a API ResizeObserver ou o projeto cqfill com o PostCSS.

Demonstração com CQFill

Conclusão

É isso! Conforme o Google for liberando novidades, irei postar e atualizar aqui. Qualquer dúvida, só falar.

Série Nginx #1: Instalando e Configurando

Valdeir S. — Thu, 26 Aug 2021 14:38:28 +0000

O que é o Nginx

Ele é um servidor web de código aberto, de alto desempenho e que conta com suporte a proxy reverso, sistema de cache e load balancer. Ele foi criado por Igor Sysoev por volta de 2004 para resolver o problema conhecido como C10K.

O problema

Parte dos servidores web utiliza o modelo de uma conexão por thread ou processo. Ao fazer dessa forma, quando a ação Y é gerada, ela esperará até uma ação X, criada antes, ser finalizada. Durante todo o tempo, essa ação Y ficará bloqueada, esperando ser liberada.

Como o Nginx o resolveu

O Nginx funciona como uma simultaneous exhibition. Ele utiliza, normalmente, um processo mestre para cada núcleo do processador. Esse processo é responsável por ouvir os eventos e atender a todas as requisições de forma simultânea.

Diferente de outros servidores web, o Nginx não espera a ação ser realizada para prosseguir com as outras ações.

simultaneous exhibition (grandmaster)

Isso acontece porque o NGINX utiliza estratégias de I/O (Input/Output) não-bloqueantes disponibilizadas pelo sistema, que podem variar de acordo com o sistema operacional. Algumas delas são: /dev/poll, epoll, kqueue para FreeBSD ou poll para Windows e outras.

Como o Nginx funciona

Arquitetura do Processo do Nginx

O processo mestre executa as operações privilegiadas como configuração de leitura e vinculação de portas e então cria um pequeno número de processos filhos (os próximos três tipos).
O processo do cache loader é executado na inicialização para carregar o cache baseado em disco na memória e, em seguida, é encerrado. Ele é planejado de forma moderada, portanto, suas demandas de recursos são baixas.
O processo do gerenciador de cache é executado periodicamente e remove entradas dos caches de disco para mantê-las dentro dos tamanhos configurados.
Os services workers fazem todo o trabalho. Eles lidam com conexões de rede, lêem e gravam conteúdo em disco e se comunicam com serviços upstream/proxy e interfaces CGI (PHP, Node, Python, Go etc).

Processo de Trabalho

Realiza as estratégias I/O não bloqueante para a comunicação com os serviços upstream/proxy e interfaces CGI.
Integra o servidor web com as aplicações, utilizando as interfaces FastCGI, WSGI, SCGI; o gateway memcached, os streams, as sub-requisições e o protocolo TCP.
Lê os conteúdos estáticos (imagens, css, js etc); lê, cria e atualiza os caches dos arquivos ou as respostas da aplicação.
Grava os logs de acesso e erro de acordo com a configuração do Nginx.

Vale lembrar que — nativamente — a escrita de arquivo funciona de forma síncrona. O arquivo é criado e bloqueado para novos acessos até ser liberado pelo sistema. A partir do NGINX 1.9.13, tornou-se possível configurar a escrita de arquivos temporários de forma assíncrona com o aio_write.

Ciclo de vida de uma requisição no NGINX

Recebe a requisição e descriptografa as informações caso ela esteja utilizando HTTPS.
Identifica a configuração das diretivas em bloco server (Servidor Virtual) e location, que é carregada conforme URI da requisição.
Aplica limites (Rate Limit) para requisição (opcional).
Executa autenticação interna e/ou externa como HTTP Basic Authentication. A autenticação pode ser feita com módulos nativos ou de de terceiros (opcional).
Acessa a aplicação através de interfaces de comunicação ou serviços upstreams para obter a resposta que será retornada para o cliente.
Realiza verificações da saúde da aplicação (se ela está ativa), controle de requisições simultâneas, load balancer, resposta de cache etc.
Recebe a resposta da aplicação, filtra-a utilizando compressores como gzip, brotli ou optimiza-a com filtros (por exemplo, em imagens) etc. É possível usar módulos nativos ou de terceiros para realizar o filtro (opcional).
Registra o log de acesso e o de sessão.
Retorna a resposta filtrada para o cliente.

Instalação

Vamos mostrar como instalar nos sistemas operacionais mais conhecidos. Posteriormente, veremos como compilar o código fonte. Este passo é importante para configuração dos módulos de terceiro (será estudado em outra parte da série).

Linux

No exemplo, o processo de instalação será mostrado com os sitemas Ubuntu, Alpine e CentOs. Posteriormente, como compilar o código no Ubuntu.

Ubuntu

# Adiciona suporte à instalação da versão mais recente
echo "deb https://nginx.org/packages/ubuntu/ $(lsb_release -cs) nginx" | sudo tee -a /etc/apt/sources.list
# Adiciona chave de assinatura
curl -sSLo- https://nginx.org/keys/nginx_signing.key | sudo apt-key add
# Instala o Nginx
sudo apt update; sudo apt install -y nginx

Alpine

sudo apk add nginx

CentOS

sudo yum install epel-release
sudo yum install nginx

Mac

1. É necessário utilizar o Homebrew, que permitirá a instalação de pacotes que o Mac não fornece. Para instalá-lo, utilize o código abaixo:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Instale o Nginx:

brew install nginx

Windows

Acesse a página http://nginx.org/en/download.html
Escolha a versão que você deseja baixar (recomendo a stable)
Após baixá-la, extraia o arquivo zip e mova a pasta extraída para *C:*
Inicie o executável nginx.exe para iniciar o serviço do servidor web.

Dica: para encerrar o Nginx, abra o prompt de comando e execute o comando tasklist /fi "imagename eq nginx.exe".

Estrutura de arquivos

Após baixar e instalar o Nginx, é criada uma pasta com todos os arquivos de configuração.

O local de instalação e a estrutura de arquivos podem variar conforme o método de instalação e o sistema operacional. Para esta postagem, utilizei o Nginx instalado via apt no Ubuntu 20.04.

Ao acessar o local de instalação (/etc/nginx), veremos uma estrutura parecida com esta:

tree /etc/nginx

/etc/nginx
├── conf.d
├── fastcgi.conf
├── fastcgi_params
├── mime.types
├── modules-available
├── modules-enabled
├── nginx.conf
├── proxy_params
├── sites-available
│   ├── default
├── sites-enabled
│   ├── default -> /etc/nginx/sites-available/default
├── snippets
│   ├── fastcgi-php.conf

Vamos descobrir para que serve cada um dos arquivos/pastas:

Arquivo/Pasta	Descrição
conf.d/	Pasta com as configurações extras do Nginx. Nela, é possível criar um arquivo de configuração que será incluído automaticamente nas configurações gerais.
fastcgi.conf, fastcgi_params	Configurações do fastcgi. Com eles, é possível incluir, excluir ou remover parâmetros usado pela interface entre o servidor da web e os aplicativos.
mime.types	Funciona como um map para identificar o mimetype dos arquivos conforme a extensão dele.
modules-available/	Configuração dos módulos disponíveis. (Veremos sobre os módulos mais adiante)
modules-enabled/	Através de um symlink, indica quais módulos o Nginx deverá carregar e executar.
nginx.conf	Configuração geral do Nginx. Nele, contém configuração básica de formatação de log, SSL, upload, gzip, pid (Process Identifier, no Unix), número de conexões simultâneas por processo.
proxy_params	Configurações usada com o recurso de proxy reverso. (Veremos um pouco ao configurar o ExpressJs com o NodeJs).
sites-available/	Nesta pasta, ficam as configurações dos servidores virtuais.
sites-enabled/	Nesta pasta, ficam os servidores virtuais ativos. Caso o arquivo de configuração esteja em sites-available, mas não esteja em sites-enabled, o Nginx não irá carregá-lo.
snippets/	Configurações extras.

Sabendo disso, vamos continuar.

Configurando

Nesta etapa, configuraremos o Nginx para servir o WordPress e com o NodeJS (ExpressJS). Portanto, presume-se que você os conheças e os tenha instalados em seu sistema.

Removeremos os arquivos de configuração padrão. Ele não será necessário.

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

PHP 8.x (WordPress)

Vamos criar um arquivo de configuração específico para esse site; dessa forma, deixaremos os arquivos mais organizados.

# Cria o arquivo de configuração
sudo touch /etc/nginx/sites-available/php.valdeir.dev.conf

# Habilita o servidor virtual
sudo ln -s /etc/nginx/sites-available/php.valdeir.dev.conf /etc/nginx/sites-enabled/php.valdeir.dev.conf

Agora, vamos escrever nossas regras. No arquivo /etc/nginx/sites-available/node.valdeir.dev, utilize o código abaixo.

A explicação está no arquivo para facilitar o entendimento

Reinicie o Nginx para ele carregar as novas configurações.

sudo nginx -s reload

NodeJS

Para começar, vamos criar um arquivo de configuração e um link simbólico para ele.

# Cria o arquivo de configuração
sudo touch /etc/nginx/sites-available/node.conf

# Habilita o servidor virtual
sudo ln -s /etc/nginx/sites-available/node.conf /etc/nginx/sites-enabled/node.conf

Agora, escreveremos nossas regras. No arquivo /etc/nginx/sites-available/node, utilize o código abaixo.

A explicação está no arquivo para facilitar o entendimento

Para criação do servidor, utilizaremos a API Http do NodeJS, que retornará um "Olá, mundo".

Reinicie o Nginx para ele carregar as novas configurações.

sudo nginx -s reload

Feito isso, basta iniciar o servidor com o node node server.js

Finalizado

É isso, finalizamos a primeira parte. Aprendemos o que é o Nginx, como ele funciona e como configurar uma aplicação com ele.

Nas próximas partes, falaremos sobre os módulos e como usá-los para obter mais segurança e melhor performance no site. Ademais, falaremos sobre métricas e análise de logs.

Para que serve o comando `git send-email`?

Valdeir S. — Wed, 14 Apr 2021 02:51:10 +0000

O GIT nasceu em um momento que era muito comum programadores e entusiastas se reunirem em comunidades e fóruns para debater e programar. Apesar de existir softwares de versionamentos como o Bitkeeper(na época pago), não existia (até onde sei) um sistema integrado ao Git (lançando em 2005) como o Github, GitLab e Bitbucket, por exemplo.

Em vez disso, alguns programadores utilizavam as trocas de e-mails para enviar correções e novos códigos, através do protocolo SMTP/IMAP, para outros desenvolvedores ou fóruns. Com isso, eles podiam compartilhar seus códigos e ajudar a comunidade.

A vantagem, na época, era a velocidade de transmissão de dados e o custo.

Como o comando funciona?

Basicamente, ele envia uma coleção de correções feitas por você para o destinatário, que vai poder mesclar as alterações utilizando o comando git-am.

O comando permite o uso de dois formatos para envio das correções:

Formato mbox (veremos adiante)
Formato criado por Greg Kroah-hartman (Use por sua conta em risco. Palavras do autor 😁)

É possível enviar anexos com o comando?

Não. Ele envia apenas texto. Caso queira enviar seu repositório por e-mail, basta usar o comando git archive (para comprimir os arquivos com zip, gzip, bzip2 ou xz) ou git bundle (para criar um arquivo compactado com todas as alterações).

Como enviar correções via e-mail?

Requisitos

Um repositório. Irei usar o https://github.com/valdeirpsr/dotfiles
Servidor de e-mail. Irei utilizar o Mailtrap para simulação de envio.
Conhecimento básico de GIT

Preparando envio

Antes de fazer o envio, precisamos preparar as correções utilizando o comando git-format-patch como no exemplo abaixo.

# No comando abaixo, você pode informar um <commit hash> ou <revision range>
git format-patch 0ac05bd5a72f8d4e6f2d7313689153851a4809e5

# O comando cria um arquivo por <commit>, que será nomeado com "<id>-<assunto do commit>.patch"
# 0001-Update-.bash_aliases.patch
# 0002-Create-.functions.patch

Observação: Para incluir um arquivo, use o comando git format-patch --root -- <file>

Conteúdo dos arquivos *.patch

Ao abrir ou imprimir o conteúdo do arquivo na tela, podemos ver que ele possui os cabeçalhos de e-mail (FROM, SUBJECT, DATE) e o corpo da mensagem informando onde ocorreram as alterações.

OBS.: Os comentários iniciados com # não existem no arquivo original e foram adicionados por motivos didáticos

# Na linha abaixo temos o <commit-hash>
From 28f8dabbc894ec75a1d8bee86f9de18ad1e7ccd1 Mon Sep 17 00:00:00 2001

# Informações autor
From: Valdeir S. <contact@valdeir.dev>

# Data de criação do <commit>
Date: Sat, 20 Mar 2021 16:17:48 -0300

# Assunto do <commit> (a primeira linha dele)
Subject: [PATCH 1/3] Update .bash_aliases

# Estatísticas das alterações, que
# Apresenta a quantidade de arquivos alterados, criados e deletados
# E a quantidade de caracteres removidos e adicionados
---
 .bash_aliases | 3 ---
 1 file changed, 3 deletions(-)

# Abaixo são destacadas as diferenças entre o snapshot anterior do arquivo com o atual
diff --git a/.bash_aliases b/.bash_aliases

# Index da árvore de trabalho.
# Compare `git show 450e3a9` com `git show 1cdcd5e`
index 450e3a9..1cdcd5e 100644
--- a/.bash_aliases
+++ b/.bash_aliases

# A linha iniciada com "-" significa que a linha foi removida
# A linha iniciada com "+" significa que a linha foi adicionada
# A linha iniciada SEM "-" e SEM "+" significa que não sofreu alterações
@@ -27,9 +27,6 @@ alias myip="dig +short myip.opendns.com @resolver1.opendns.com"
 # Outros
 alias diff="git diff --no-index"

-# Comandos
-command -v calc >> /dev/null || function calc(){ awk "BEGIN{ print $* }" ;}
-
 # Finaliza todos os containers do Docker
 function dockerStopAll() {
   for c in $(docker ps | tail -n +2 | cut -d' ' -f1); do
--
2.31.1.windows.1

Enviando alterações

Para enviar as coleções de correções por e-mail, você pode usar um serviço/servidor de SMTP.
No comando abaixo, são definidas as configurações para o envio; no entanto, elas podem ser armazenadas no arquivo de configuração ~/.gitconfig

git send-email \
  --smtp-encryption tls \
  --smtp-server smtp.mailtrap.io \
  --smtp-server-port 587 \
  --smtp-user <hash> \
  --smtp-pass <hash> \
  *.patch

Saída do comando

# Lista de arquivos
0001-Update-.bash_aliases.patch
0002-Create-.functions.patch
0003-refactor-remove-o-arquivo-de-configura-o-do-navegado.patch
(mbox) Adding cc: Valdeir S. <contact@valdeir.dev> from line 'From: Valdeir S. <contact@valdeir.dev>'

# Cabeçalho e corpo do e-mail
From: example@valdeir.dev
To: exemplo@valdeir.dev
Cc: Valdeir S. <contact@valdeir.dev>
Subject: [PATCH 1/3] Update-.bash_aliases.patch
Date: Mon, 12 Apr 2021 23:29:20 -0300
Message-Id: <20210413022926.1198-1-example@valdeir.dev>
X-Mailer: git-send-email 2.31.1.windows.1
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit

    The Cc list above has been expanded by additional
    addresses found in the patch commit message. By default
    send-email prompts before sending whenever this occurs.
    This behavior is controlled by the sendemail.confirm
    configuration setting.

    For additional information, run 'git send-email --help'.
    To retain the current behavior, but squelch this message,
    run 'git config --global sendemail.confirm auto'.

Send this email? ([y]es|[n]o|[e]dit|[q]uit|[a]ll):

Caso queira enviar as alterações, pressione y ou a; e, ENTER

Para que serve o comando `format-patch`

Ele é o responsável por preparar os arquivos para cada commit, já com os cabeçalhos necessários e o a saída do comando git diff <commit B>..<commit A>.

O que é MBOX?

De acordo com a documentação do FreeBSD, o MBOX é "um arquivo de texto que contém um número arbitrário de mensagens de e-mail. Cada mensagem consiste em um carimbo do correio, seguido por uma mensagem de e-mail formatado de acordo com RFC822 e RFC2822. As linhas são separadas por caracteres de alimentação de linha (ASCII 10)."

Alguém, em sã consciência, usa isso?

Esta é a única forma de contribuir com alguns projetos como o kernel do Linux ou o próprio GIT.

Caso alguém tenha interesse em contribuir com o Kernel ou apenas queira saber como o fazer, basta acessar a página enviando correções: o guia essencial para colocar seu código no kernel

Exemplo de configuração no arquivo `~/.gitconfig`

[sendemail]
    smtpEncryption = tls
    smtpServer = smtp.gmail.com
    smtpUser = you@email.com
    smtpServerPort = 587
    smtpPass = Your-pass (Não é recomendável)
    confirm = auto
    replyTo = reply@email.com

Alternativa

Desde a versão v1.3.0-rc1, o GIT disponibiliza a ferramenta git-imap-send. As diferenças são:

imap-send

Envia as alterações para seu programa/provedor de e-mail e salva como rascunho (é possível configurar outra pasta)
Envia alterações recebidas pela entrada (STDIN) e geradas pelo format-patch
Comando: git format-patch --stdout --attach origin <hash> | git imap-send

send-email

Envia as alterações para o destinatário
Envia alterações dos arquivos gerados pelo format-patch
Comando: git format-patch -o patches/ <hash> && git send-email patches/*