DEV Community: Cleyton Silva

CSS — Centralizando componentes HTML

Cleyton Silva — Wed, 02 Nov 2022 19:10:45 +0000

Aprenda a centralizar qualquer componente HTML

Para iniciar nosso post, vou começar dizendo que todos os componentes da tela para ser posicionados precisam de uma referência. Eles precisam ser configurados dentro de outro componente para entender onde serão posicionados.

Por exemplo: vejamos o código abaixo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Centralizar Componente</title>
    <style>
        .corpo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }

        .conteudo {
            width: 80%;
            height: 100%;
            position: relative;
            margin: auto;
            background-color: #FFFFFF;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="corpo">
        <div class="conteudo">
            Ola mundo!
        </div>
    </div>
</body>

</html>

A div corpo é o componente que receberá todos os outros, ela precisa estar configurada com largura de 100% e precisa ser posicionada com absolute. o width:100% faz com que o conteúdo seja responsivo. Qualquer div que criar dentro da div corpo pode ser centralizada e e se você colocar o width nelas e trabalhar com porcentagem (%) este conteúdo vai se tornar responsivo e muito mais elegante.

Para centralizar as divs filhas na div corpo é simples, as principais configurações do CSS são: position: relative; o width:80% e o margin:auto que é responsável por centralizar o componente. Para ver isto funcionando copie o código acima para seu computador e teste o script.

Conclusão
Muitos desenvolvedores precisam usar este recurso do css mas nem sempre sabemos o como fazer. Nunca use a tag html

isto é muito velho e não deixará seu código responsivo. Este é um outro tema para outro post.

Espero que este post possa ter passado um pouco de conhecimento para sua carreira. Até a próxima.

Javascript — Template String

Cleyton Silva — Wed, 02 Nov 2022 18:58:40 +0000

Oi pessoal este post pode parecer simples, mas vai ajudar muita gente que ainda fica concatenando strings no javascript.

Todos os dias você se vê concatenando strings no javascript, seja por interpolação de strings ou multiplas linhas.

Vamos fazer aqui abaixo um exemplo interpolando a string.

function dadosCliente(nome, telefone, email){
 return 'Nome: '+nome+' Telefone: '+telefone+' Email: '+email;
}
dadosCliente('Cleyton', '99999–9999','cleyton@medium.com');

Interpolação de String
Isto funciona perfeitamente do jeito que espera, porém podemos melhorar e deixar o código muito mais elegante. Vamos fazer abaixo usando template string ( Template String é da especificação do ECMAScript2015).

function dadosCliente(nome, telefone, email){
 return `Nome: ${nome} Telefone: ${telefone} Email: ${email}`;
}
dadosCliente('Cleyton', '99999–9999','cleyton@medium.com');

Multiplas Linhas
Muitos usam isto principalmente para montar códigos html. A grande questão é que da muito trabalho e o código começa a ficar ruim para dar manutenção. Vamos colocar abaixo um exemplo usando concatenação com o +

function viewDadosCliente(nome, email){
    return '<table>'+
    '<tr>'+
    '<th>Nome</th>'+
    '<th>Email</th>'+ 
    '</tr>'+
    '<tr>'+
    '<td>'+nome+'</td>'+
    '<td>'+email+'</td>'+
    '</tr>'+
    '</table>';
}
viewDadosCliente('Cleyton', 'cleyton@medium.com');

Funciona muito bem, porém é trabalhoso dar manutenção com códigos assim, imagine muitas linhas fazendo as concatenações.

Vamos fazer abaixo usando Template String:

function viewDadosCliente(nome, email){
     return `<table>
     <tr>
     <th>Nome</th>
     <th>Email</th>
     </tr>
     <tr>
     <td>${nome}</td>
     <td>${email}</td>
     </tr>
     </table>`;
}
viewDadosCliente('Cleyton', 'cleyton@medium.com');

Conclusão
Template String é a forma mais elegante para trabalhar com concatenação de strings e deixar o código bonito, e também pode ser explorado com outras formas, inclusive pode usar com arrays, etc.

Espero ter ajudado com esta informação.

Javascript — Como saber se um objeto está vazio

Cleyton Silva — Wed, 02 Nov 2022 18:47:37 +0000

Trabalhar com objetos é muito legal e fácil, é empolgante. Porém a propriedade .length retorna undefined quando tentamos contar quantos itens temos em um objeto.

Uma ótima forma de contar ítens em um objeto é usar a função Object.entries(objeto) esta função converte o objeto em um array, assim possibilitando o uso da função .length, veja o exemplo abaixo:

const clientes = {}
const contador = Object.entries(clientes).length;

if(contador === 0){
  console.log(`O Objeto está vazio`)
}

O que você pode fazer também é verificar se o tipo é um Object ou Array e fazer diferentes abordagens.

const clientes = {}
console.log(clientes.constructor);

const novoCliente = Object.entries(clientes);
console.log(novoCliente.constructor);

if(clientes.constructor === Object){
  console.log(`É um Objeto`)
}

if(novoCliente.constructor === Array){
  console.log(`É um Array`)
}

Javascript — Sair de um loop for em JavaScript

Cleyton Silva — Fri, 19 Aug 2022 19:57:00 +0000

Temos uma forma interessante de parar um loop dentro de um for.

Primeiramente vamos pensar um pouco… será que vamos precisar parar um loop em algum momento da iteração? Sim, pode acontecer de precisar. Afinal de contas o que não é possível em programação não é mesmo?

Então vamos lá…

Vamos imaginar que você precisa percorrer uma lista de itens e quando encontrar alguma informação pare o processamento.

const countries = ['Brasil', 'Canada', 'USA', 'Australia', 'Nova Zelandia', 'China']
for (let i = 0; i < countries.length; i++) {
  console.log(`${i} ${countries[i]}`)
  if (countries[i] === 'Australia') {
    break
  }
}

Este mesmo recurso pode ser usado também no for of.

const idade = [10, 13, 31, 17, 25, 63, 34, 47, 54, 78]

for (const value of idade) {
  console.log(value)
  if (value === 25) {
    break
  }
}

O break não pode ser usado no foreach, por tanto lembre-se use este recurso somente com for.