DEV Community: Cristian Melo

CSS2️⃣ 🥊 CSS3️⃣ - Não trave na entrevista técnica

Cristian Melo — Mon, 30 Oct 2023 20:10:18 +0000

Essa vai para os mais jovens no universo da tecnologia. Você já parou para pensar, se naquela entrevista de emprego te perguntarem a diferença entre CSS2 e CSS3?

Acompanha esse post pra não faltar o palavriado na hora 💡

Aqui estão algumas das diferenças mais significativas:

Seletores avançados: O CSS3 introduz uma variedade de seletores avançados que permitem direcionar elementos de maneira mais precisa. Isso inclui seletores como o seletor de atributo, o seletor de primeira criança, o seletor de última criança, etc.
Bordas e sombras avançadas: O CSS3 permite criar bordas arredondadas, sombras suaves e bordas gradientes de maneira mais eficiente e flexível do que o CSS2.
Animações e transformações: O CSS3 oferece suporte a animações e transformações CSS, permitindo que elementos HTML sejam animados e transformados sem a necessidade de JavaScript.
Fontes personalizadas: Com o CSS3, você pode usar a propriedade @font-face para incorporar fontes personalizadas em seu site, ampliando suas opções de design de fontes.
Mídia responsiva: O CSS3 introduz media queries, que permitem que você crie estilos específicos para diferentes tamanhos de tela e dispositivos, tornando seu site mais responsivo.
Flexbox e Grid: O CSS3 introduz os modelos de layout flexbox e grid, que tornam o design de layout mais flexível e eficiente.
Gradientes CSS: O CSS3 oferece suporte a gradientes CSS, permitindo criar fundos gradientes diretamente com CSS, em vez de depender de imagens.
Transições: O CSS3 inclui transições, que permitem suavizar as mudanças de estilo de um elemento ao longo do tempo.
Multi-colunas: O CSS3 permite criar layouts de várias colunas de maneira mais eficaz.
Sombra de texto: O CSS3 permite aplicar sombras a texto diretamente, sem a necessidade de imagens.

Lançada em 2012, o CSS3 é a mais recente versão do CSS e trouxe a grande maioria das novidades utilizadas hoje quando o assunto é estilização de páginas da web.

Anteriores a ela, estão o CSS2 e o CSS, que surgiram, respectivamente, em 1998 e 1996.

O CSS3 trouxe MUITOS recursos avançados para melhorar o design e a funcionalidade de páginas da web,(nem consigo imaginar mais o mundo sem elas), tornando-as mais dinâmicas, responsivas e atraentes.

Ah, é importante observar que a implementação de alguns recursos pode variar entre navegadores, o que pode requerer o uso de prefixos de fornecedores e considerações de compatibilidade.

Finalizamos nosso post , mas antes de ir, se gostou e fez sentido, não se esqueça de reagir e comentar, isso me motiva muito!

💻 GitHub: cristianmeelo
💼 LinkedIn: Cristian Melo

<> Assim ou
Assado
⚛️

Cristian Melo — Fri, 27 Oct 2023 16:11:33 +0000

Fala galeres ! Biene? Bora de conteúdo referente a performance em React 😌

Já sabemos, se não sabemos vamos sabemos agora, que para renderizarmos um componente ou múltiplos componentes no React JSX/TSX, precisamos englobá-los dentro de um único "invólucro".

Renderização Funcionando 👍

Renderização com Erro 👎

Sabendo dessas nossas premissas iniciais, vamos às abordagens em questão.

<> </>

<Fragment>, comumante empregado com sintaxe <> </> , permite tu agrupar vários componentes em um render sem criar um nó extra, de acordo com nossoa documentação fresquinha.

Do outro lado do ringue, temos a tag <div> , oriunda do html e frequentemente usado para agrupar elementos.

🤼‍♀️ Em geral, usar React Fragments pode levar a um melhor desempenho, acompanhe:

Velocidade
O elemento <div> cria um nó na DOM e ocupa um certo espaço, mas o <Fragment> nunca cria um nó na DOM e não ocupa espaço, o que torna o aplicativo um pouco mais rápido. Fragment➕1️⃣
DOM menos confusa
Ter várias <div> aninhadas faz a DOM se tornar maior e mais difícil de interpretar a leitura, com <Fragment>, essa leitura se torna um facilitada para interpretar e debugar.
Fragment➕1️⃣
Estilização
Com o container principal sendo um fragmento, não é possível fazer sua estilização, então avalie sua usabilidade.
Div➕1️⃣

Finalizamos nosso post , mas antes de ir, o código está aqui, e se gostou e fez sentido, não se esqueça de reagir e comentar, isso me motiva muito!

💻 GitHub: cristianmeelo
💼 LinkedIn: Cristian Melo

Como Pegar Valor Dinamicamente de Input no React ⚛️

Cristian Melo — Fri, 27 Oct 2023 15:27:52 +0000

Beeem vindes ao meu primeiro post!!! Queria dizer para vocês que estou muito empolgado para compartilhar ideias bacanas, ou até mesmo maturar o básico através da escrita. Ok, Mas Cristian, seu primeiro post vai ser desse conteúdo simplão ?! — Sim. 💋💋

Sem mais delongas e explicações desnecessárias, bora de conteúdo.

Input Básico de Texto

Geralmente a aplicação de input faz sentido em formulários, pois bem, vamos começar olhando a declaração de input básico do nosso querido HTML.

Armazenando Valor do Input de Texto

Quando estamos lidando com componentes, toda a informação é guardada no estado do componente. Podemos usar o ilustríssimo hook useState para acompanhar cada valor de entrada.

Chegando à magia Reactlista, vamos gerenciar o valor do input adicionando o atributo value ao nosso componente e linkando com a nossa variável inputValue .

O valor inicial do input é definido pelo estado do componente inputValue, que por sua vez, é gerenciado pelo hook useState — Show ! Só copiar e colar ?! NOP. Ao rodar no StackBlitz da vida, já temos a saudosa mensagem:

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

Que interessante né, se a gente quiser ter um componente mu-tá-vel, temos que usar concomitante o atributo onChange, do contrário, deveríamos ter declarado defaultValue para termos o componente apenas como um campo de leitura. Ou seja, o próprio console avisa sobre as 💩 que estamos fazendo.

Verificando a dinaminicidade do Input de Texto

Vamos adicionar o atributo onChange no nosso componente chamando a função handleChange.

Now, vamos criar a função handleChange .

Quando o usuário altera o valor do input, o evento onChange é disparado e chama a função handleChange, que atualiza o estado do componente com o novo valor do input. Dessa forma, o valor do input sempre estará sincronizado com o estado do componente! 💥

Finalizamos nosso post , mas antes de ir, o código está aqui, e se gostou e fez sentido, não se esqueça de reagir e comentar, isso me motiva muito!

💻 GitHub: cristianmeelo
💼 LinkedIn: Cristian Melo

DEV Community: Cristian Melo

CSS2️⃣ 🥊 CSS3️⃣ - Não trave na entrevista técnica

<> Assim ou Assado ⚛️

<> </>

Como Pegar Valor Dinamicamente de Input no React ⚛️

Input Básico de Texto

Armazenando Valor do Input de Texto

Verificando a dinaminicidade do Input de Texto

<> Assim ou
Assado
⚛️