Unable to resolve specifier '@angular/common/locales/pt'

ou

NG0701: Missing locale data for the locale "pt-BR"

você sabe o quanto isso pode ser frustrante. Esse problema acontece devido a uma mudança significativa entre o Angular 19 e o 20 em como o Native Federation lida com locales e I18N.

Por que isso acontece só no Angular 20

No Angular 19, o Native Federation não tinha suporte nativo para I18N, então o carregamento de arquivos de locale precisava ser feito manualmente, usando helpers como shareAngularLocales com a flag legacy: true. Qualquer import de @angular/common/locales/* nos remotes geralmente passava despercebido, mesmo que estivesse bundlado de forma não ideal.

A partir do Angular 20.0.6, o Native Federation mudou o comportamento:

• Suporte nativo a I18N: agora os remotes podem carregar arquivos de locale automaticamente.
• ignoreUnusedDeps ativado: quando esta feature está ligada, o builder ignora dependências não usadas, o que evita que o esbuild tente transformar imports de locales (@angular/common/locales/pt) em módulos remotos via HTTP, eliminando o clássico erro Unable to resolve specifier.
• Por isso o problema só aparece agora: se você migrou de Angular 19 para 20 e ainda não ativou ignoreUnusedDeps, qualquer import de locale direto no remote explode, mesmo que você registre o locale no host.

Fonte oficial: Native Federation README – Angular I18N

A Solução Definitiva

A solução é configurar o Native Federation corretamente e usar o helper shareAngularLocales para tornar os bundles compatíveis, sem precisar importar os arquivos de locale diretamente no remote.

federation.config.js do Remote

const { withNativeFederation, shareAll, shareAngularLocales } = require('@angular-architects/native-federation/config');

const shareConfig = {
  singleton: true,
  strictVersion: true,
  requiredVersion: 'auto',
  includeSecondaries: true
};

module.exports = withNativeFederation({
  name: 'core',
  
  // Ignora o próprio arquivo de configuração e checagem agressiva de dependências
  ignorePatterns: ['federation.config.js'],
  features: {
    ignoreUnusedDeps: true
  },

  shared: {
    ...shareAll(shareConfig),

    // Garante que os locales do Angular fiquem bundle-friendly
    ...shareAngularLocales(['pt'])
  }
});

Por que isso funciona

1. ignorePatterns: ['federation.config.js'] faz o builder ignorar o próprio arquivo de configuração, evitando que ele tente federar imports internos como os de locale.
2. features: { ignoreUnusedDeps: true } evita que o esbuild transforme imports de locales em HTTP, eliminando o erro Unable to resolve specifier.
3. shareAngularLocales(['pt']) prepara o bundle do remote para usar os arquivos de locale corretamente, sem precisar de imports diretos.

Registro do Locale no Host

Mesmo com shareAngularLocales, os pipes do Angular (DatePipe, CurrencyPipe, DecimalPipe) precisam de registro no host:

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

registerLocaleData(localePt, 'pt-BR');

• Isso garante que o locale pt-BR esteja disponível para todos os remotes.
• Nenhum remote deve importar ou registrar arquivos de locale diretamente.

Conclusão

Com o Angular 20 e Native Federation, o gerenciamento de I18N mudou. O problema de Unable to resolve specifier '@angular/common/locales/pt' aparece apenas porque o esbuild tenta transformar imports de Node_modules em ESM remoto. A solução combina:

• shareAngularLocales no remote
• ignoreUnusedDeps no remote
• registro do locale no host

Seguindo essas etapas, seu app vai rodar com pt-BR corretamente, sem travar o bundle, e compatível com os novos padrões do Angular 20.

O que São “Dados do Sistema” no iPhone?

No iPhone, os dados do sistema referem-se a uma série de arquivos essenciais para o funcionamento do dispositivo. Esses dados incluem:

• Arquivos temporários: Cache de aplicativos, logs do sistema e outros arquivos temporários.
• Armazenamento de dados de aplicativos: Como arquivos de configuração e dados de cache.
• Arquivos do sistema operacional iOS: Componentes essenciais para o funcionamento do sistema.

Embora os dados do sistema sejam necessários para que o iPhone funcione corretamente, eles podem se acumular ao longo do tempo, ocupando uma quantidade significativa de espaço de armazenamento e impactando o desempenho do dispositivo.

Por Que Limpar os Dados do Sistema?

Limpar os dados do sistema pode ajudar em diversas situações, tais como:

• Liberar espaço: Com o tempo, o armazenamento do seu iPhone pode ficar saturado com caches e arquivos temporários que não são mais necessários.
• Melhorar o desempenho: A limpeza dos dados do sistema pode ajudar a reduzir o uso de recursos do dispositivo, tornando-o mais rápido e eficiente.
• Correção de falhas: Às vezes, arquivos corrompidos ou desnecessários podem causar problemas no iPhone, e uma limpeza pode ajudar a resolver essas falhas.

Como Limpar Dados do Sistema no iPhone

1. Reiniciar o iPhone

Uma das maneiras mais simples de limpar parte dos dados do sistema no iPhone é reiniciar o dispositivo. Isso ajuda a limpar caches temporários e reiniciar o funcionamento normal dos aplicativos.

Passos:

1. Pressione e segure o botão de liga/desliga (ou o botão lateral, dependendo do modelo) até que apareça o slider de desligamento.
2. Arraste o slider para desligar o iPhone.
3. Após o dispositivo desligar, aguarde alguns segundos e ligue-o novamente pressionando o botão de liga/desliga.

2. Limpar o Cache de Aplicativos

Muitos aplicativos, como Safari, YouTube e WhatsApp, acumulam dados de cache ao longo do tempo. Limpar esses caches pode liberar uma quantidade significativa de espaço no iPhone.

Limpar Cache do Safari:

1. Abra o Ajustes do iPhone.
2. Role para baixo e toque em Safari.
3. Toque em Limpar Histórico e Dados dos Sites.
4. Confirme a ação tocando em Limpar Histórico e Dados.

Isso removerá o cache, cookies e o histórico de navegação do Safari, ajudando a liberar espaço de armazenamento.

Limpar Cache de Outros Aplicativos:

Para limpar o cache de outros aplicativos, a maioria dos apps não oferece uma opção direta no iPhone. No entanto, você pode desinstalar e reinstalar o aplicativo para limpar todos os dados temporários e o cache acumulado.

1. Desinstalar o aplicativo: Toque e segure o ícone do aplicativo até que ele comece a tremer e toque no “X” para remover.
2. Reinstalar o aplicativo: Vá até a App Store e instale o aplicativo novamente.

3. Gerenciar Armazenamento do iPhone

O iPhone possui uma ferramenta integrada que permite gerenciar o espaço de armazenamento de maneira eficiente. Para acessar essas configurações:

1. Abra Ajustes no seu iPhone.
2. Toque em Geral.
3. Selecione Armazenamento do iPhone.
4. Aqui você verá uma lista de aplicativos e a quantidade de espaço que cada um ocupa, incluindo Dados do Sistema.

Se você notar que algum aplicativo está ocupando muito espaço com dados de sistema, você pode optar por excluir o aplicativo e reinstalá-lo para liberar espaço.

4. Limpar Arquivos de Sistema e Dados de Backup Antigos

Alguns arquivos de sistema podem ser armazenados em seu iPhone, ocupando espaço sem que você perceba. Além disso, backups antigos do iCloud podem consumir espaço de forma desnecessária. Para limpar essas informações:

Apagar Backups Antigos do iCloud:

1. Abra Ajustes.
2. Toque no seu nome no topo da tela para acessar o iCloud.
3. Selecione Gerenciar Armazenamento.
4. Toque em Backups.
5. Veja a lista de dispositivos que têm backups e exclua os backups antigos que você não precisa mais.

Limpar Dados de Sistema:

Infelizmente, não há uma opção direta para limpar os dados do sistema do iPhone, mas com a limpeza dos caches e a remoção de backups antigos, você pode reduzir consideravelmente o uso de armazenamento pelo sistema.

5. Restaurar o iPhone de Fábrica

Se, após seguir todas as etapas acima, você ainda sentir que o iPhone está lento ou com problemas relacionados aos dados do sistema, você pode realizar uma restauração de fábrica. Este processo apagará todos os dados do dispositivo, incluindo dados do sistema, e restaurará o iPhone para suas configurações originais.

Passos:

1. Faça um backup de todos os seus dados importantes (fotos, contatos, etc.).
2. Vá até Ajustes > Geral > Redefinir.
3. Selecione Apagar Conteúdo e Ajustes.
4. Confirme a ação e siga as instruções para restaurar o iPhone.

Após a restauração, você precisará configurar seu iPhone novamente, como se fosse um dispositivo novo. Isso pode ser uma solução eficaz para liberar espaço e corrigir problemas com dados do sistema.

Conclusão

Limpar dados do sistema no iPhone pode ser uma maneira eficaz de liberar espaço de armazenamento e melhorar o desempenho do dispositivo. Embora o processo de remoção de dados do sistema não seja totalmente automático, você pode utilizar as etapas mencionadas acima para otimizar o seu iPhone. Desde a reinicialização simples até a exclusão de backups antigos e a restauração de fábrica, existem várias formas de manter seu dispositivo funcionando de maneira eficiente.

• Fazer backup dos seus arquivos em nuvens diferentes
• Sincronizar conteúdo entre um serviço e outro
• Baixar todos os seus dados de uma conta antes de encerrá-la
• Copiar arquivos em massa com muito mais controle e confiabilidade do que as ferramentas oficiais

Em muitos casos, como no OneDrive, essa necessidade se tornou ainda mais comum devido ao aumento dos preços dos planos, em decorrências a outros serviços com preços mais em conta. Além disso, quando você tenta baixar muitos dados simultâneos em diversos serviços o download trava ou resulta em pastas vazias ao copiar dos aplicativos oficiais, ao transferir pastas.

Instalação do rclone

macOS (via Homebrew)

brew install rclone

Linux (Debian, Ubuntu e derivados)

curl https://rclone.org/install.sh | sudo bash

Ou via gerenciador de pacotes:

sudo apt install rclone

Windows

1. Acesse: https://rclone.org/downloads/
2. Baixe a versão .zip para Windows
3. Extraia e coloque a pasta em um local fixo (ex: C:\Program Files\rclone)
4. Adicione o caminho da pasta ao Path do sistema para usar via terminal

Configurando o acesso ao OneDrive (ou outra nuvem)

Execute:

rclone config

Siga as instruções passo a passo:

1. Digite n para criar uma nova configuração
2. Escolha um nome para ela (ex: onedrive)
3. Aparecerá uma lista numerada de serviços de nuvem. Escolha o número correspondente ao OneDrive.Importante: essa lista pode mudar de ordem conforme a versão do Rclone. Leia atentamente ao lado de cada número.
4. Quando for perguntado sobre “client_id” e “client_secret”, pode apenas pressionar Enter para usar os padrões do Rclone.
5. No prompt sobre “Edit advanced config?”, escolha n, a menos que saiba o que está fazendo.
6. Quando perguntado sobre usar “auto config”, escolha y se estiver em um computador com navegador instalado. Isso abrirá o login da Microsoft no navegador para autorização.
7. Depois de autorizado, volte ao terminal e confirme a gravação da configuração.

É obrigatório sincronizar os arquivos?

Não. O rclone permite tanto copiar quanto sincronizar arquivos:

• rclone copy copia arquivos de origem para destino sem apagar nada
• rclone sync sincroniza origem e destino, apagando do destino o que não existir mais na origem

Para a maioria dos usuários que estão apenas fazendo backup ou transferindo dados, o ideal é usar copy, pois é mais seguro.

Exemplo: Copiar tudo do OneDrive (exceto algumas pastas)

rclone copy onedrive: ~/OneDriveBackup \
  --progress \
  --exclude "Vídeos Compartilhados/**" \
  --exclude "Backup do GOG/**"

Esse comando faz o seguinte:

• Copia todos os arquivos do OneDrive para a pasta local ~/OneDriveBackup (você pode dar o nome que quiser à pasta)
• Exibe o progresso durante a transferência
• Ignora as pastas Vídeos Compartilhados e Backup do GOG, assim como todos os arquivos e subpastas dentro delas

Se quiser testar antes sem copiar nada, use a opção --dry-run:

rclone copy onedrive: ~/OneDriveBackup --dry-run --exclude "Videos Compartilhados/**"

Outras opções úteis

Listar as pastas da raiz:

rclone lsd onedrive:

Listar arquivos:

rclone ls onedrive:

Sincronizar (com cautela):

rclone sync onedrive: ~/OneDriveBackup --progress

Atenção: sync pode apagar arquivos locais se eles não existirem mais na nuvem.

Validar arquivos por tamanho pode ser útil para quando você copia os arquivos de outra origem e não quer sobrevescrever um arquivo que você já possua na pasta.

rclone copy onedrive: ~/OneDriveBackup --size-only

Concluindo

O rclone é uma ferramenta robusta para quem precisa mais controle sobre arquivos em nuvem. Ele não depende de interfaces gráficas, é multiplataforma, e é confiável mesmo para grandes volumes de dados.

Se você está migrando de um serviço para outro, fazendo backup, ou tentando contornar limitações do aplicativo oficial (como as do OneDrive), o rclone é uma solução altamente recomendada.

Manter o controle total dos seus dados nunca foi tão fácil.

Se quiser aprofundar ainda mais, você pode consultar a documentação oficial em: https://rclone.org/

Tudo o que você precisa fazer é abrir o seu perfil no Bluesky, colar o código no console do navegador e deixar o script trabalhar para você.

Passo a Passo para Excluir Todas as Postagens do Bluesky

1. Abra o Bluesky no Navegador
   Acesse o site oficial do Bluesky e faça login em sua conta.
2. Vá para o Seu Perfil
   Certifique-se de estar na página do seu próprio perfil, onde todas as suas postagens aparecem.
3. Abra o Console do Desenvolvedor
   • No navegador, pressione F12 ou Ctrl + Shift + I (Windows/Linux) ou Cmd + Option + I (Mac) para abrir as ferramentas de desenvolvedor.
   • Clique na aba Console.
4. Cole o Código Abaixo no Console
   Copie e cole este código no console e pressione Enter:

// Seleciona todos os botões com aria-haspopup="menu"
const buttons = document.querySelectorAll('button[aria-haspopup="menu"]');

// Função para executar as ações sequenciais com atraso
const processButton = (button, delay) => {
    setTimeout(() => {
        // Clica no botão do menu
        button.click();
        console.log('Menu aberto.');

        // Aguarda 500ms para clicar em "Excluir postagem"
        setTimeout(() => {
            const deleteDiv = Array.from(document.querySelectorAll('div')).find(div => div.textContent.trim() === 'Excluir postagem');
            if (deleteDiv) {
                deleteDiv.click();
                console.log('Clicou em "Excluir postagem".');

                // Aguarda mais 500ms para clicar no botão "Excluir"
                setTimeout(() => {
                    const deleteButton = document.querySelector('button[aria-label="Excluir"]');
                    if (deleteButton) {
                        deleteButton.click();
                        console.log('Clicou no botão "Excluir".');
                    } else {
                        console.log('Botão "Excluir" não encontrado.');
                    }
                }, 500); // Aguardar 500ms antes de clicar no botão "Excluir"
            } else {
                console.log('Div "Excluir postagem" não encontrada.');
            }
        }, 500); // Aguardar 500ms antes de clicar em "Excluir postagem"
    }, delay); // Aguardar o tempo configurado antes de iniciar o processamento do próximo botão
};

// Iterar pelos botões com um intervalo de 2 segundos entre cada
buttons.forEach((button, index) => {
    processButton(button, index * 2000); // Aguardar 2 segundos por botão
});

console.log(`Iniciado o processamento de ${buttons.length} botões.`);

Para evitar travamentos faça aos poucos. Não precisa ser tudo de uma vez, caso tenhas muitas postagens.

1. Aguarde a Execução
   O script clicará em cada postagem do perfil, abrirá o menu, selecionará a opção “Excluir postagem”, e confirmará a exclusão. Isso será feito automaticamente para todas as postagens.

Por Que Usar Esse Método?

O Bluesky não oferece uma funcionalidade oficial para excluir múltiplas postagens ou apagar todo o histórico de uma vez. Isso pode ser frustrante para quem quer limpar seu perfil de forma prática. Com este script, você consegue realizar essa tarefa automaticamente, sem precisar excluir cada postagem manualmente.

Dicas Importantes

• Seja Paciente: Dependendo do número de postagens, o script pode levar algum tempo para concluir o processo.
• Revise Antes de Começar: Depois de excluídas, as postagens não podem ser recuperadas. Certifique-se de que deseja apagar todas elas.
• Evite Interromper o Processo: Não feche o navegador ou troque de aba enquanto o script está rodando.

Conclusão

Com este script, você pode apagar todas as postagens no Bluesky de forma prática e automatizada, resolvendo uma limitação atual da plataforma. Essa solução é ideal para quem quer começar do zero ou simplesmente deseja limpar o histórico de publicações.

Se você gostou da dica, compartilhe com amigos que também usam o Bluesky!

A verdade é que o iCloud não funciona exatamente como um “backup mágico” que libera espaço no seu iPhone. Na realidade, ele é um serviço de sincronização em nuvem, projetado para compartilhar seus dados entre seus dispositivos e manter um backup em caso de perda ou roubo de algum deles.

No entanto, existem maneiras de usar o iCloud da forma como muitos imaginam – para economizar espaço no iPhone. Abaixo, confira algumas dicas de como otimizar o uso e liberar armazenamento no seu aparelho.

Dê play caso prefira assistir estas dicas no Youtube ao invés de ler:

Dica 1 – Configuração econômica do iCloud

Por padrão, o iPhone está configurado para fazer um backup completo do aparelho, e não apenas de arquivos e fotos. Esse backup pode ocupar quase o mesmo espaço no iCloud que você já consome no seu telefone, já que é uma imagem completa do estado atual do dispositivo. No entanto, a maioria das pessoas não precisa desse backup completo. Se você adquirir um iPhone novo porque perdeu o antigo, por exemplo, reconfigurar o aparelho do zero não é um grande inconveniente – o mais importante é não perder suas fotos e arquivos essenciais.

Para liberar espaço no iCloud, siga os passos abaixo:

Abra o app Ajustes, toque no seu nome no topo da tela e vá em iCloud > Backup do iPhone. Desative Fazer Backup Deste iPhone. Isso não desativará o backup das suas fotos.

Agora, volte ao menu do iCloud e toque em Fotos. Role para baixo até encontrar a opção Otimizar no iPhone e mantenha-a ativada, caso ainda não esteja. Com essa configuração, o iPhone, quando precisar de espaço, substituirá o arquivo original da foto por uma versão otimizada e mais leve, deixando o arquivo completo apenas na nuvem. Quando você quiser editar ou compartilhar a imagem, o iPhone fará o download da versão final.

Dica 2 – Salve as fotos que quer guardar fora da galeria em uma pasta não sincronizada

Dentro do iPhone, há um app chamado Arquivos, que permite armazenar e acessar documentos, imagens, vídeos, PDFs, e outros formatos diretamente na nuvem ou no aparelho. Ele oferece a flexibilidade de manter esses arquivos exclusivamente na nuvem, liberando espaço no dispositivo.

Para criar um backup em uma pasta não sincronizada, siga os passos abaixo:

1. Abra o app Arquivos, toque nos três pontos no canto superior direito e selecione Nova Pasta. Nomeie a pasta como preferir.

2. Vá ao app Fotos, selecione as imagens que deseja guardar e toque no botão de compartilhar. Em seguida, escolha a opção Salvar em Arquivos.

3. Volte ao app Arquivos e aguarde o upload ser concluído. Depois, pressione e segure a pasta recém-criada até que apareçam as opções e toque em Remover Download. Com isso, essas fotos ficarão salvas somente na nuvem, sem ocupar espaço no seu iPhone.

4. Por fim, retorne ao app Fotos e exclua as imagens que você acabou de fazer o backup. Elas permanecerão acessíveis pelo app Arquivos sempre que precisar.

Dica 3 – Use a câmera de forma inteligente

A câmera do iPhone pode ser sua aliada ou inimiga na hora de economizar espaço e dados. Muitas vezes, ao buscar a melhor qualidade possível, fazemos ajustes que acabam sendo desnecessários para nossas necessidades do dia a dia.

Um exemplo é o sensor de 48MP do iPhone, que, por padrão, gera fotos de 12MP. Isso acontece porque o iPhone utiliza um processo de pós-produção que combina e seleciona pixels para otimizar a iluminação da imagem, resultando em uma foto mais leve de 12MP. Apesar de usar os 48MP, o sistema reduz a imagem de forma inteligente, mantendo a qualidade ideal para redes sociais.

Por outro lado, o iPhone oferece o modo ProRAW, que gera imagens de 48MP com pouquíssimo pós-processamento, criando arquivos até 10 vezes maiores. A imagem fica mais “lavada”, ideal para quem quer editar posteriormente com maior controle das cores e detalhes.

Quando falamos de vídeo, as opções se expandem. Embora o iPhone permita gravar em várias resoluções e fps, é bom lembrar que plataformas como Instagram e TikTok utilizam apenas 1080p, tornando desnecessário gravar em 4K – a menos que você pretenda aplicar zoom na edição.

Há também o modo Cinema, que adiciona informações de profundidade, criando o famoso efeito de desfoque no fundo. Isso, junto com o HDR, aumenta significativamente o tamanho dos arquivos. Se o desfoque não for importante para você, evite usar esse modo.

O modo Câmera Lenta, apesar de impressionante, consome uma quantidade enorme de memória, especialmente nos modelos iPhone 16 e 16 Pro, que têm resoluções maiores. Use com cautela, principalmente em vídeos longos.

Por fim, o modo ProRes é voltado para profissionais de vídeo. Com uma média de 6GB por minuto, ele é extremamente pesado e gera vídeos crus, sem pós-processamento, perfeitos para edições detalhadas. No entanto, para a maioria dos usuários, o uso desse modo deve ser evitado.

Para ajustar as configurações ideais para suas necessidades, vá até o app Ajustes, selecione Câmera e ajuste conforme suas preferências. Não se esqueça de ativar a opção Alta Eficiência em Formatos para garantir que suas fotos e vídeos sejam salvos em HEIF, um formato mais leve e compatível com sistemas e aplicativos modernos.

Lembre-se que, a qualquer momento, você pode, diretamente na câmera, você pode fazer algum ajuste no momento de usar a câmera.

Em conclusão, liberar espaço no iPhone vai muito além de apenas contratar mais armazenamento no iCloud. Compreender como o iCloud funciona como uma ferramenta de sincronização, ajustar corretamente as configurações de backup e otimizar o uso da câmera são passos essenciais para evitar a falta de espaço no dispositivo. Além disso, usar o app Arquivos para criar pastas não sincronizadas e escolher formatos mais eficientes como o HEIF garante um uso mais inteligente da memória. Seguindo essas dicas, você poderá aproveitar ao máximo o iCloud sem comprometer o desempenho ou o armazenamento do seu iPhone.

Transcrição:

— Rápido! Está havendo um vazamento de dados! Precisamos fazer algo!
— Como você soube desse vazamento?
GIF de uma goteira no cabo de rede

Alinhamento com Flexbox

Flex é uma propriedade incrível do CSS que permite organizar elementos. Se outrora tínhamos que fazer inúmeras gambiarras com float, o flex nos permite controlar o comportamentos dos filhos de um container. Para centralizar verticalmente um objeto, podemos usar a direção de coluna, em seu container pai.

Alinhamento com position

Com um pouco de matemática, conseguimos fazer um alinhamento vertical com o position absolute. Porém, é importante lembrar que o objeto será flutuante e que seu pai, necessariamente, precisa ser um position relative. O problema de usar esse tipo de alinhamento é que o conteúdo da posição precisa ser fixo. Felizmente, hoje, conseguimos fazer cálculos com variáveis de CSS, o que facilita a forma de implementarmos essa técnica. A vantagem dessa técnica é poder usar, justamente, em ambientes flutuantes que se sobreponham. Porém, caso você não precise que ele se alinhe ao pai, mas à viewport, você pode usar também o position como fixed.

Alinhamento com Grid

Outra forma moderna de alinhar verticalmente é através do uso de grids. A vantagem de usar grids é que o tamanho do conteúdo do elemento alinhado corresponderá ao tamanho da grid que se deseja utilizar. Ou seja, é adaptável de acordo com a viewport, e não referente ao seu conteúdo. Para isso, basta definirmos a quantidade de colunas e linhas que desejamos e estabelecemos onde o objeto alinhado vai iniciar e terminar.

Exemplo de uso (Modal Alinhado ao Centro)

Para mostrar como pode ser usado os alinhamentos, que tal criarmos um simples modal alinhado ao centro da tela?

Um modal é composto por uma cortina que reveste o conteúdo original, seguido de um painel com alguma informação dentro. É convenção de que os modals carreguem essas informações no centro da tela, afim de que a informação fique direcionada e encapsulada, levando, assim, o usuário à uma atenção maior àquela informação. Ou seja, isolar e destacar. O exemplo abaixo foi feito usando a primeira estratégia de alinhamento vertical aqui apresentada, pois, desta forma, o tamanho do modal que vai ser a referência para a centralização. Alguns efeitos foram adicionados para ilustrar melhor.

Alinhamento com Flexbox

Flex é uma propriedade incrível do CSS que permite organizar elementos. Se outrora tínhamos que fazer inúmeras gambiarras com float, o flex nos permite controlar o comportamentos dos filhos de um container. Para centralizar verticalmente um objeto, podemos usar a direção de coluna, em seu container pai.

Alinhamento com position

Com um pouco de matemática, conseguimos fazer um alinhamento vertical com o position absolute. Porém, é importante lembrar que o objeto será flutuante e que seu pai, necessariamente, precisa ser um position relative. O problema de usar esse tipo de alinhamento é que o conteúdo da posição precisa ser fixo. Felizmente, hoje, conseguimos fazer cálculos com variáveis de CSS, o que facilita a forma de implementarmos essa técnica. A vantagem dessa técnica é poder usar, justamente, em ambientes flutuantes que se sobreponham. Porém, caso você não precise que ele se alinhe ao pai, mas à viewport, você pode usar também o position como fixed.

Alinhamento com Grid

Outra forma moderna de alinhar verticalmente é através do uso de grids. A vantagem de usar grids é que o tamanho do conteúdo do elemento alinhado corresponderá ao tamanho da grid que se deseja utilizar. Ou seja, é adaptável de acordo com a viewport, e não referente ao seu conteúdo. Para isso, basta definirmos a quantidade de colunas e linhas que desejamos e estabelecemos onde o objeto alinhado vai iniciar e terminar.

Exemplo de uso (Modal Alinhado ao Centro)

Para mostrar como pode ser usado os alinhamentos, que tal criarmos um simples modal alinhado ao centro da tela?

Um modal é composto por uma cortina que reveste o conteúdo original, seguido de um painel com alguma informação dentro. É convenção de que os modals carreguem essas informações no centro da tela, afim de que a informação fique direcionada e encapsulada, levando, assim, o usuário à uma atenção maior àquela informação. Ou seja, isolar e destacar. O exemplo abaixo foi feito usando a primeira estratégia de alinhamento vertical aqui apresentada, pois, desta forma, o tamanho do modal que vai ser a referência para a centralização. Alguns efeitos foram adicionados para ilustrar melhor.

— Precisamos urgente de novidades para a próxima atualização do Windows 10!
— Colocar clima e anúncios na barra de tarefas!
— Windows Hello com suporte a duas câmeras!
— Que tal corrigir o sistema de arquivos, implementar o Fluent Design e entregar o novo File Explorer?

Velho Bit é jogado pela janela do escritório da Microsoft

Transcrição:

Placa: SE SEU CÃO FIZER COCÔ, COLOQUE-O NO SAQUINHO
— cãozinho do Velho Bit faz cocô
— Velho Bit deixa o cocô perto da placa e sai com o cãozinho dentro de uma sacola

Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

Adicionar Dependentes

Capturar Dados

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados"></pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer > div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados">  
</pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

unction salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) =&gt; {
      el.addEventListener("click", () =&gt; {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer &gt; div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) =&gt; {
      el.addEventListener("click", () =&gt; {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container &gt; div")
      .forEach((el) =&gt; {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container &gt; div")
    .forEach((el) =&gt; {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

Transcrição:

— aluna segurando giz na frente do professor
Escrito no Quadro:
for($i=0; $i<100.; $i++){
echo “não vou mais conversar durante a aula”;
}

O que fazer com meu sistema?

Como você, caro leitor, deve saber, o Flash foi descontinuado de forma pesada e forte em 2021. E não adianta xingar, ficar irritado, ou gritar com a Adobe. O fato é que o ambiente ficou insustentável para a plataforma e correções foram abandonadas já a alguns anos e o suporte oficial também. Como o Flex foi uma plataforma extremamente forte em meados dos anos 2000, muitas aplicações, algumas nem tão antigas assim, e extremamente robustas, foram construídas em cima dele. Isso fez com que, mesmo diante de tanto aviso, muitas desenvolvedoras e desenvolvedores acabaram por não ter condições de desenvolver novas soluções completas que compensassem o fim da tecnologia. Por isso, para ajudar, vou sugerir duas soluções, uma de médio e outra de curto prazo, que pode auxiliar a você resolver seus problemas e continuar mantendo um suporte até ter condições de desenvolver uma solução definitiva.

Solução 1 – Médio Prazo

Em 2011, a Adobe doou o Flex para o Apache, então, desde 2014-2016, eles trabalharam em uma forma de portar o Flex para JS, através do FlexJS. Porém, o projeto do Flex não morreu, ele foi convertido para o Apache Royale. Essa pode ser uma solução a médio prazo para a maioria de vocês que estão tendo essa dificuldade. Pode ser uma solução em curto prazo também, se seu projeto foi bem desenvolvido. Ele usa MXML e AS3 e transpila para Javascript e HTML5 ao invés de Flash.

A página do Apache Royale, junto com seus links, pode ser encontrada aqui:

Solução 2 – CurtoPrazo

O Adobe AIR permite executar Flash em plataforma desktop. Ele teve seus esforços transferidos para o HARMAN, em 2019, uma empresa da SAMSUNG. Você pode simplesmente compilar sua aplicação Flex baixando o SDK do AIR através do link abaixo:

Basta aceitar os termos e baixar. A plataforma continuará sendo mantida pela empresa. Porém, é necessário ficar atento a licença. Em geral, para a maioria dos usuários, a licença gratuita resolverá e sua dependência é por valor de receita.

Update – Solução 3 – Ruffle

Uma solução que tem tudo para ser permanente e até, quem sabe, dar uma sobrevida ao Flash, é o Ruffle. O Ruffle é um emulador de flash player construído em Rust, que pode ser usado para animações e aplicações. O mais legal é que ele pode ser usado não apenas em seu servidor, mas como extensão do navegador ou para quem possui aplicações desktop e não queiram usar o Adobe AIR da HARMAN.

OBS: Eu não tenho NADA a ver com a Adobe, nem a Harman, mas trabalhei por muitos anos com a plataforma Flex e compreendo sua enorme importância e contribuição para o que temos hoje em termos de front-end e UX. Estou postando isso apenas para ajudar.

Caso eu saiba de mais alguma solução, eu vou atualizar este poste. Fica de olho no Facebook / Instagram ou no grupo, que eu sempre atualizo as coisas por lá.

Todo ano a Pantone, maior empresa do mundo no ramo de sistemas de cores, elege as cores que serão usadas para representar o ano seguinte.

A ideia da empresa é, principalmente, criar um catálogo a fim de representar as tendências para o ano seguinte. Catálogo este criado pela The Pantone Color Institute, que busca utilizar de padrões e tons que são significativamente mais globais e genéricos em termos culturais, sobre o que se esperar do ano seguinte.

No ano de 2019, definiu-se que a cor que movimentaria o ano de 2020 foi o Classic Blue (19-4052):

As Cores de 2021: Otimismo e Força

Diante da maior crise sanitária da era moderna, a Pantone sugere que as cores de 2021 deverão representar o casamento entre otimismo e força, e escolheu como suas representantes as cores PANTONE 13-0647 Illuminating (similar ao amarelo canário) e o PANTONE 17-5104  Ultimate Gray (similar ao cinza elefante).

“Ao combinar PANTONE 17-5104 Ultimate Grey e PANTONE 13-0647 Illuminating para ser nossa cor Pantone do ano em 2021, destacamos como dois elementos diferentes se unem para expressar uma mensagem de força e esperança, que é ao mesmo tempo duradoura e edificante, transmitindo a ideia de que não se trata de uma cor ou de uma pessoa, é sobre vários”. — disse Laurie Pressman, vice presidente da Pantone Color Institute. — “Elas comunicam uma compreensão mais profunda da importância dos relacionamentos e da necessidade que temos uns dos outros. A união dessas duas cores diferentes mostra a força e o otimismo que resultam da junção de diferentes ingredientes”.

É importante salientar que Pantone é uma empresa privada e seus sistemas são proprietários, então você não deverá encontrar atualizações em paletas automatizadas em aplicativos como GIMP e Inkscape, mas nada impede que você crie suas próprias paletas manualmente, replicando as cores, ou até encontre algumas na internet feitas por terceiros.

Todavia, as cores e assets já estão disponíveis em serviços como o Adobe Stock e Freepik Premium:

Algumas variações de paletas usando as cores Pantone 2021 já estão disponíveis publicamente no Adobe Color. Dessa forma, já é possível usar as cores em novos projetos através da Creative Cloud, no Adobe XD, Illustrator, Photoshop e InDesign, além de plataformas para projetos de mídias sociais e vídeos, nos dispositivos móveis.

Brasil

No Brasil, através do Twitter, algumas pessoas tem manifestado reações sobre a decisão da Pantone.

Com informações do da Adobe, Dezeen, Freepik e Pantone.

Transcrição:

Chiquinha: Se temos 15 burros e tiramos 8 coelhos, ficam 7 carneiros.
Girafales: Mas é que de burros só podemos tirar burros!
Chiquinha:
<?php
$burros = “15 burros”;
$coelhos = “8 coelhos”;
echo ( $burros + $coelhos ) . “ Carneiros”;

Transcrição:

Trabalhando…
Conversando…
Se divertindo…
ZZZZZZZZ

Transcrição:

Chefe: Você terminou de corrigir os 10 bugs que te passei?
VelhoBit: Já terminei 6… Agora só faltam 15

Transcrição:

Entrevistadora: Muito bem! Me diga qual sua principal habilidade.
VelhoBit: Ah! Eu sou muito bom com machine learning.
Entrevistadora: OK! Quanto é 21+17?
VelhoBit: É 5!
Entrevistadora: Não chegou nem perto. É 38!
VelhoBit: É 20!
Entrevistadora: Eu disse 38!
VelhoBit: É 35!
Entrevistadora: Ainda é 38!
VelhoBit: É 38!
Entrevistadora: … Contratado!

Transcrição:

Código-Fonte: .quadrinho{ padding: 30px}

Código-Fonte: .quadrinho{ padding: 30px; box-sizing: border-box}

Transcrição:

VelhoBit: Que raiva do Javascript! Eu vou declarar guerra!

Código-Fonte: var guerra;

Transcrição:

Tela de Computador: humanidade.jar

Alerta: Potenciais problemas na programação (12.575 itens). Deseja compilar assim mesmo? Sim ou Não?

Deus: Tudo bem, é só uma alerta. Dá nada não.

Sim.