Como fazer um elemento ter o tamanho do elemento filho que tenha position : absolute?

Em projetos de desenvolvimento web, é comum precisarmos posicionar um elemento filho dentro de um container usando position: absolute. O problema é que, quando fazemos isso, o container perde a sua altura e largura, pois os elementos filhos posicionados absolutamente são retirados do fluxo do documento. Isso pode ser um problema quando queremos que o container tenha o tamanho do elemento filho.

Felizmente, há uma solução simples para este problema, que envolve o uso de JavaScript para definir o tamanho do container com base no tamanho do elemento filho. Neste artigo, vou mostrar como fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript.

Usando JavaScript para definir o tamanho do container

A maneira de fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript envolve calcular a largura e altura do elemento filho e definir essas dimensões para o container. Veja o código abaixo:

<div class="container" id="container">
  <div class="child">Elemento filho</div>
</div>

<script>
  const container = document.getElementById('container');
  const child = container.querySelector('.child');
  const width = child.offsetWidth;
  const height = child.offsetHeight;
  container.style.width = `${width}px`;
  container.style.height = `${height}px`;
</script>

<style>
  .container {
    position: relative;
  }
  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

Neste exemplo, a classe .container é definida como position: relative, o que significa que ela será posicionada em relação ao seu pai. A classe .child é definida como position: absolute, o que permite que o filho seja posicionado em relação ao container. As propriedades top: 0 e left: 0 garantem que o filho comece a ser posicionado a partir do canto superior esquerdo do container.

O JavaScript começa selecionando o container e o elemento filho usando document.getElementById e Element.querySelector. Em seguida, o código calcula a largura e altura do elemento filho usando offsetWidth e offsetHeight. Finalmente, as dimensões são definidas para o container usando style.width e style.height.

Conclusão

Neste artigo, vimos como fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript. Essa solução envolve calcular a largura e altura do elemento filho e definir essas dimensões para o container usando JavaScript. Embora seja um pouco mais complexa do que as soluções CSS, esta técnica é muito útil quando precisamos definir o tamanho do container dinamicamente com base no tamanho do elemento filho.

Como conectar na ViaCPE com JavaScript?

Este é um artigo rápido e prático que mostra que conectar-se ao ViaCEP usando JavaScript. O processo em si é simples, você pode fazer uma requisição HTTP GET para a API do ViaCEP com o CEP desejado e manipular a resposta retornada para obter os dados desejados.

Usando métodos encadeados

Você pode fazer isso usando a função fetch() do JavaScript ou outras bibliotecas de requisições HTTP como o Axios. Veja um exemplo usando a função fetch():

const cep = '01001000';
const url = `https://viacep.com.br/ws/${cep}/json/`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  })
  .catch(error => console.log(error));

Nesse exemplo, uma requisição HTTP GET é feita para a URL do ViaCEP com o CEP desejado inserido na URL. A resposta da API é convertida para o formato JSON usando o método json() e, em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de tratar os erros que podem ocorrer durante a requisição HTTP e de ajustar a forma como os dados serão manipulados de acordo com a sua necessidade.

Usando Async/await

O async/await é uma forma mais moderna e simplificada de trabalhar com Promises, que são utilizadas nas requisições HTTP. Com o async/await, o código fica mais legível e fácil de entender.

Veja um exemplo de como buscar os dados do ViaCEP utilizando async/await:

async function getCEPData(cep) {
  try {
    const url = `https://viacep.com.br/ws/${cep}/json/`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  } catch (error) {
    console.log(error);
  }
}

getCEPData('01001000');

Nesse exemplo, a função getCEPData é definida como assíncrona com a palavra-chave async. Dentro da função, é criada a URL da API do ViaCEP com o CEP desejado e, em seguida, é feita a requisição HTTP GET utilizando o fetch. O await é utilizado para aguardar a resposta da API e a conversão da resposta para JSON. Em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de utilizar a estrutura try/catch para tratar os erros que podem ocorrer durante a requisição HTTP.

A API do Google V8 une o WebAssembly e a Web assíncrona

Os desenvolvedores do mecanismo V8 JavaScript/WebAssembly do Google introduziram a API JavaScript Promise Integration (JSPI), permitindo que aplicativos WebAssembly que assumem que o acesso à funcionalidade externa seja síncrono funcionem sem problemas em ambientes assíncronos. Isso foi feito pois hoje, API WebAssembly JavaScript Promise Integration suspende um aplicativo Wasm quando ele emite uma chamada de API síncrona e a retoma quando a operação de E/S assíncrona é concluída.

Importante!!!!!

Atualmente em estágio experimental, o JSPI ainda não deve ser usado em aplicativos de produção, disseram os desenvolvedores. Eventualmente, ele se tornará um padrão para implementação nos principais navegadores, disseram eles.

Quando aconteceu?

Apresentado em uma postagem de blog V8 em 19 de janeiro, o JSPI faz a ponte entre aplicativos WebAssembly síncronos e APIs da Web assíncronos. Isso é feito suspendendo o aplicativo quando ele emite uma chamada de API síncrona e retomando quando a operação de E/S assíncrona é concluída. E o JSPI faz isso com pouquíssimas alterações no próprio aplicativo.

Muitas APIs modernas na Web funcionam de forma assíncrona, dividindo a funcionalidade no início e na resolução de uma operação. JSPI intercepta o JavaScript Promise retornado de uma chamada de API assíncrona, suspendendo a lógica principal do aplicativo WebAssembly e retornando um Promise da exportação usada para entrar no aplicativo WebAssembly. Quando a API assíncrona é concluída, o aplicativo WebAssembly é retomado para que possa processar os resultados da chamada de API.

Trabalhar com Promises é difícil, particularmente com WebAssembly, porque a manipulação direta de Promises no WebAssembly não é possível, disseram os desenvolvedores. O JSPI permite que os desenvolvedores criem aplicativos WebAssembly usando APIs síncronas e ainda participem do ecossistema assíncrono da web.

O JSPI está sendo desenvolvido nas arquiteturas Intel e ARM64. Está disponível para Linux, Windows, macOS e ChromeOS. Os desenvolvedores podem testar o JSPI localmente acessando chrome://flags no Chrome, procurando por “Experimental WebAssembly JavaScript Promise Integration (JSPI)” e marcando a caixa. Recomenda-se o uso do canal Chrome Canary. JSPI ainda não pode ser habilitado para usuários finais.

O WebAssembly foi aclamado como um avanço no desempenho de aplicativos da web. O formato de instrução binária permite que muitas linguagens de programação diferentes, incluindo C/C++, C# e Rust, sejam usadas para programação na web.

Microsoft cria proposta de tipagem para o JavaScript

A proposta planejada pela Microsoft e outros, incluindo desenvolvedores do programa Igalia Coding Experience e da Bloomberg, trata de adicionar “tipos como comentários” à linguagem.

A teoria é que seria possível ter uma sintaxe para tipos que poderiam ser usados ​​por ferramentas que precisam desses ganchos (como o próprio TypeScript da Microsoft) e ignorados por aqueles que não precisam.

Para ver a proposta orgina, clique aqui: https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

Em Resumo

“A ideia desta proposta”, disse Rosenwasser, “é que o JavaScript poderia criar um conjunto de sintaxe para tipos que os mecanismos ignorariam completamente, mas que ferramentas como TypeScript, Flow e outras poderiam usar”.

Rosenwasser foi rápido em enfatizar que a proposta não é colocar a verificação de tipo TypeScript em cada runtime JavaScript (certamente, pode-se imaginar todos os tipos de problemas de compatibilidade no futuro), em vez disso, o plano é que a abordagem seja escolhida por qualquer tipo verificador, não apenas os gostos de TypeScript.

Também ainda é apenas uma proposta no momento, prevista para a Etapa 1 do processo ECMA TC39. Há, portanto, muitos obstáculos pela frente antes que o conceito (se aceito) chegue à forma ECMAScript e muitas oportunidades para debate.

No entanto, a julgar pelas respostas de pouco mais de 16.000 desenvolvedores que responderam a perguntas na pesquisa State of JavaScript de 2021, há apetite por algum tipo de funcionalidade de tipo. A proposta dos desenvolvedores é um primeiro passo no caminho.

Live sobre Front-end JS e APEX

Olá pessoal, hoje é mainha primeira live solo apresentando sobre programação Front-end com o Oracle APEX. Nele estarei falando de diversas funcionalidades nas ações dinâmicas (event listeners) e como usar expressões javascript para estender as funcionalidades do código.

Onde?

A live será hoje, dia 21/06/22 as 20:00 no youtube pelo link:

Link da Live

Quais serão os tópicos?

Estarei falando de Oracle APEX, Ações Dinâmicas, JavaScript e jQuery

Isso ai, quem tiver interesse pode dar um pulo lá ou assistir depois.

JavaScriptLandia – Para aqueles que amam JavaScript

O que é?

JavaScriptLandia, o programa de suporte individual da OpenJS Foundation, é um lugar onde todos os fãs de JavaScript, não importa seu sabor ou preferência de tecnologia, podem expressar de forma criativa suporte para o ecossistema JavaScript e comunidades OpenJS

Quais são os benefícios do programa JavaScriptLandia?

  • Um crachá digital para adicionar aos seus perfis online, avatar, blog e/ou site pessoal. Os detalhes serão enviados por e-mail separadamente dentro de uma semana.
  • Reconhecimento nesta página! Novos apoiadores serão adicionados à página semanalmente.
  • Um boletim semanal de apoiadores que o mantém atualizado sobre as últimas novidades dos projetos OpenJS, do Conselho de Projetos Cruzados e do Conselho de Administração. Você também será convidado a participar de discussões sobre governança e novas iniciativas.
  • Descontos para treinamento, certificação, conferências e outras ofertas exclusivas.

Angular 14 – Formulários Digitados e Componentes Independentes

Angular 14 foi lançado no início deste mês com a atualização mais significativa desde Ivy. Ele inclui dois recursos muito esperados, formulários reativos digitados e componentes autônomos, além de várias pequenas melhorias.

Os formulários reativos estritamente tipados são uma solicitação da comunidade de longa data que pode ser datada do lançamento do Angular 2.

Até o Angular 14, o Reactive Forms não incluía definições de tipo em muitas de suas classes, e o TypeScript não detectava bugs como no exemplo a seguir durante a compilação.

const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

console.log(login.value.notanemail);

Com o Angular 14, FormGroup, formControl e classes relacionadas incluem definições de tipo que permitem que o TypeScript detecte muitos erros comuns.

A migração para os novos Formulários Reativos Digitados não é automática. Os controladores de formulário, grupos, etc. existentes serão prefixados com Untyped durante a atualização, que retém a definição de tipo exata das versões anteriores do Angular.

Para aproveitar os novos formulários reativos tipados, os desenvolvedores precisarão remover manualmente o prefixo não digitado e corrigir quaisquer erros que possam surgir.

Os desenvolvedores podem encontrar mais detalhes na documentação de Formulários Reativos Digitados. A segunda grande mudança fornecida com o Angular 14 é o conceito de componentes autônomos.

Módulos Angular têm sido um assunto contestado há muito tempo, com muitos membros da comunidade alegando que isso leva a complicações desnecessárias nos aplicativos Angular.

Com o Angular 14, agora é possível criar componentes autônomos simplesmente passando a propriedade standalone: ​​true no decorador Component.

@Component({
  selector: 'sample-component',
  standalone: true,
  template: ``,
  imports: [ ComponentOne, ComponentTwo, SampleDirective,
             SampleService, CommonModule]
  ],
})
export class SampleComponent {
    ...
}

Como a injeção de dependência Angular ainda é necessária, muitas definições de módulo foram movidas para o decorador de componentes.

Ainda não está claro como a comunidade adotará esse novo recurso, e a equipe do Angular sinalizou o recurso como uma prévia do desenvolvedor e pode alterar a API em versões futuras.

Esta versão também inclui uma nova framework de diagnóstico estendida, que fornece feedback aprimorado sobre erros de modelo e práticas recomendadas.

Atualmente, o framework inclui dois novos avisos, um para a sintaxe inversa de banana em uma caixa ([]) (que é válida, mas raramente pretendida) e união nula desnecessária (??) quando a entrada não é anulável.

Por fim, o Angular 14 usa o TypeScript 4.7 mais recente e tem como alvo o ES2020 por padrão. Para uma lista completa de mudanças, acesse o anúncio oficial de lançamento

Angular é um software de código aberto disponível sob a licença do MIT. Contribuições são bem-vindas através do repositório Angular GitHub.

Fonte:

https://www.infoq.com/news/2022/06/angular-14-typed-forms/

https://github.com/angular/angular

Começa hoje a JS Nation

Gostaria de saber tudo que está acontecendo de novo com o JavaScript? Começa hoje 16/07/22 as 9:00 a JS Nation

O que é?

JSNation é um evento de 2 dias e 2 trilhas focado exclusivamente no desenvolvimento JavaScript. Descubra o futuro do ecossistema de desenvolvimento JavaScript e conecte-se à sua multidão estelar!

Este ano, o formato do evento será híbrido, com o primeiro dia (16 de junho) transmitido do local de Amsterdã, incluindo recursos híbridos de rede e entretenimento interativo; e segundo dia (20 de junho), além dos inúmeros workshops gratuitos, transmitidos online para o público global.

Palestras Grátis

A melhor parte para a grande maioria é sempre o fato de haverem palestras grátis 🙂

Veja aqui no link a lista de palestras: https://jsnation.com/remote-js-workshops

Workshops

Gostaria e pode gastar um pouco mais para aprender mais? então de uma olhada nos workshops disponiveis. Infelizmente eles tem um valor a parte até de alguns ingressos pagos, mas se o conhecimento tiver valor para o seu crescimento, vale o investimento. Veja aqui o link https://jsnation.com/js-workshops

Atualizações do site

logo

Olá pessoal, já faz um tempinho que não postamos este tipo de boletim informativo. Mas com todas as coisas que aconteceram nestes últimos 2 anos infelizmente o MundoJS acabou ficando um pouco parado.

Bom, o plano é retomar as atividades aos poucos , demos uma olhada e o que a galera mais tem gostado é de dicas sobre os fundamentos do JS, então vamos começar por lá. Criar tutorais de como fazer as coisas e também focar talvez em vídeos.

Eu costumo a escrever no plural, mas na verdade voltou a ser uma equipe de uma pessoa. O que faz parte… kkkkkk

Como vocês devem ter visto o site ta com outra cara, isso porque, para os próximos meses

foco será:

  • Novos posts com tutorais
  • Focar na velocidade do site
  • Melhorar a performance e segurança do site
  • Aumentar o conteúdo em vídeo
  • Remover as coisas que ninguém, ou quase ninguém, está usando.

O que já fiz nos últimos dias

  1. Novo layout, muito mais leve.
  2. Removido a funcionalidade de push de notificações. Tinha apenas umas 30 pessoas usando ele.
  3. Atualizado o Site, plugins de segurança.
  4. Removido plugins de antigos que a atualização invalidou… Quebrou quase nada.. kkk
  5. Iniciado novas postagens

Por último o plano para o futuro é

  • Continuar postando
  • Criar vídeos
  • Melhorar a área de cursos
  • Criar enquetes e buscar mais gente para contribuir

Qwik.JS – Mais velocidade no site

Sobre o Qwik

O Qwik foi projetado para o tempo de carregamento de página mais rápido possível. Ele alcança isso fazendo com o HTML seja carregado todo primeiro enquanto deixa o máximo possível de javascript para após esta carga inicial.

Isso está em total contraste com as estruturas existentes que tratam a renderização do lado do servidor e o tempo de interação mais como uma reflexão tardia em vez de um objetivo principal, que orienta todas as outras decisões de design.


Replayable x Resumable

Esse dois são dificieis de traduzir… kkkkkk… Mas a grande sacada que o Qwik tenta trazer é essa questão de que o lado do cliente deve dar continuidade (resumable) ao trabalho entregue pelo servidor e o que temos na maioria dos casos é um custo de rexecução de lógica em duas pontas (replayable). Esse custo começa a crescer muito conforme o site cresce.


Mais informações

HTML-first, JavaScript last: the secret to web speed!

A first look at Qwik – the HTML first framework

Death by Closure (and how Qwik solves it)

Qwik: the answer to optimal fine-grained lazy loading