Forem: Elisa Drumond

Boas Práticas CSS

Elisa Drumond — Wed, 10 Aug 2022 14:03:44 +0000

É comum ouvir sobre boas práticas quando se estuda programação. O fato de existir diversas formas de se fazer algo exige que busquemos a melhor forma de expressar, em código, o que precisamos.

No CSS, há várias boas práticas que precisamos seguir para garantir alta legibilidade e facilitar a manutenção do nosso código.

Uso de classes

Use classes sempre que você for repetir a estilização. Mas não só de cores, aproveite as classes para setar alturas, disposição de elementos e aplique nas divs que precisam receber esses valores.

Variáveis

O uso de variáveis CSS é indispensável para qualquer projeto. Além de boa prática, facilita e muito quando precisamos alterar a cor de um elemento.

Basta criar na :root e todo o projeto terá acesso. Se você tiver muitas, pode optar em ter um arquivo só para elas.

Unidade de medida

Usar px para tudo dificulta na responsividade do seu projeto. As medidas flexíveis, como rem e em definem o tamanho de acordo com o tamanho de fonte dos elementos anteriores e pode, e deve, ser utilizada para garantir que o tamanho dos objetos seja compatível com a tela.

Ao usar rem, o tamanho do seu elemento vai ser o mesmo do tamanho da fonte definida no :root. 2rem, por exemplo, é 2x o tamanho da fonte. A mesma lógica vale para em, mas nesse caso, o valor a ser respeitado será do elemento pai.

Resetar estilos padrões

Estilo padrão é aquele que é definido pelo user agent do navegador e cada um possui o seu. Antes de iniciar a estilização, precisamos remover espaços, bordas indesejadas e qualquer estilização prévia que interfira no resultado final.

A dica aqui é criar um estilo padrão, que vai ser colocado em todos os projetos. Aqui eu deixo os indispensáveis, mas você pode complementar e em conjunto com o :root iniciar o seu projeto da melhor forma possível.

Esse é um post escrito por mim ✨❤️

E é o segundo de uma série de 4 posts sobre esse projeto. No próximo pretendo falar sobre os padrões CSS que uso.

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no Instagram ou por e-mail no contato.elisadrumond@gmail.com

Evento Click, Arrow Function e Hacks JS #2

Elisa Drumond — Sun, 17 Jul 2022 20:47:39 +0000

No segundo post de JavaScript vamos pensar no Evento Click e nas funções, mas especificamente a Arrow Function. Nosso projeto é uma calculadora de IMC que utiliza os principais conceitos de forma bem simplificada.

O Projeto

Projeto em desenvolvimento

No HTML

Pensando em Evento de click, vou utilizar o id do botão para a manipulação na DOM.

<button id="button" type="button">Calcular IMC</button>

No JavaScript

O processo é simples e vamos ver três conceitos

addEventListener
Arrow Function
innerHTML (Vamos precisar para resolver um bug)

Adicionando o Evento

Selecionamos o botão e adicionamos o Evento click e a partir desse momento, todas as vezes que clicarmos no botão, vamos disparar a função de cálculo de IMC e adicionar o resultado ao HTML.

document.getElementById("button").
addEventListener("click", () => {

A Arrow Function serve para tornar o código mais legível,

Sem a necessidade da escrita da palavra reservada function ou o uso de um return.

Agora, com o uso dessas três variáveis, conseguimos os valores de input e selecionamos a div que vai receber o resultado final. Ela foi criada apenas com esse intuito, e está vazia.

const height = document.getElementById("input-height").value;
const weight = document.getElementById("input-weight").value;

const container = document.getElementById("bmi-result");

Agora, vemos a variável result, que é inicializada com um valor. Ela vai receber o elemento HTML que estamos criando, através do createElement, para receber o resultado.

o textContent é o valor do H3 criado e a função a ser disparada, foi declarada fora do escopo da Arrow function, como vocês podem ver.

const result = document.createElement("h3");

result.textContent = calculateBMI(height, weight);

container.appendChild(result);


//Fora do escopo da Arrow Function
function calculateBMI(height, weight) {

    var bmi = (weight/(height*height)).toFixed(1);
    return bmi;
}

Essa ideia é suficiente para resolver o desafio, mas não sem criar um bug um tanto engraçado

Cada vez que clicamos no botão, o processo repete. Então criamos uma nova Tag H3 e o resultado é novamente inserido no HTML. Isso é um bug, um mau funcionamento da lógica do nosso código, mas que se resolve com uma linha.

InnerHTML

//Remover resultado antigo
container.innerHTML = "";

Essa linha antes da criação da tag H3, vai trocar o conteúdo da div para vazio. a InnerHTML não vai excluir a div, mas sim substituir o conteúdo. A div permanece.

Entender isso é importante porque existem funcionalidades JavaScript para excluir a div em si.

Essa única linha resolve o bug e demonstra que você, dev, de fato pensa em cada linha do seu código. Use bastante dessas dicas.

Esse é um post escrito por mim ✨❤️

E é o segundo de uma série de 4 posts sobre esse projeto. No próximo pretendo falar sobre os padrões CSS que uso.

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no Instagram ou por e-mail no contato.elisadrumond@gmail.com

Manipulando opções com a tag Select e funções no JavaScript #1

Elisa Drumond — Wed, 06 Jul 2022 22:56:57 +0000

JavaScript, e seus poderes fenomenais, vão nos acompanhar num projeto de Calculadora de IMC nos próximos artigos.

A ideia é construir uma aplicação que entregue conceitos básicos, mas bem feitos, em HTML, CSS e JavaScript.

E hoje vamos falar de manipulação de opções com a Tag select e functions do JavaScript

O Projeto

Para exemplificar esse e outros hacks básicos de JavaScript estarei usando um projeto de Calculadora de IMC

Projeto em desenvolvimento

No HTML

No nosso exemplo, manipulei imagens, onde cada opção possuí uma imagem correspondente.

O primeiro passo

é usar a tag img para adicionar as imagens no HTML.

<img id="image" height="200" src="images/man.png" alt="">
<!-- <img height="200" src="images/woman.png" alt=""> -->

A imagem que aparecerá quando o site for carregado deverá ter o id="image", enquanto as outras ficaram comentadas e sem id.

No JavaScript

Após isso

é possível criar as opções utilizando as tags select e option em conjunto.

<select onchange="changingSelection(this)">
        <option value="">Selection</option>
        <option value="man">Man</option>
        <option value="woman">Woman</option>
</select>

E aqui vem a mágica

O uso do evento onChange nos permite que alguma ação seja realizada após uma mudança. Nesse caso, ao selecionar a opção, vamos alterar o src do id="img" e como consequência, a imagem será alterada.

const image = document.getElementById("image")

function changingSelection(selection){
    const value = selection.value;

    if (value == "man"){
        image.src = "images/man.png";

    } else if (value == "woman") {
        image.src = "images/woman.png";

    }
}

Ao capturar o valor do Select, a função vai comparar os resultados e entregar a imagem da opção selecionada. Caso seja vazio, vale o que está no HTML, que nesse caso é a imagem que deixamos sem comentário.

Nessa aplicação, o select é opcional e uma forma de aplicar conceitos básicos, mas a adaptação dessas linhas de código para outros usos te dá infinitas possibilidades. Enfim, divirta-se!

Esse é um post escrito por mim ✨❤️

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no Instagram ou por e-mail no contato.elisadrumond@gmail.com

Por que cursar ADS?

Elisa Drumond — Mon, 16 May 2022 13:16:30 +0000

Atualizado: 25 de Março de 2024.

Eu não sei o que você leu sobre Análise e Desenvolvimento de Sistemas, mas se a fonte de busca foi o blog de alguma universidade, te incentivo a esquecer. Isso porque sempre são citados diversos motivos que vão fazer você acreditar que o curso vai te levar aos tais salários desejados do mercado de tecnologia, mas isso não é necessariamente verdade.

A faculdade facilita o primeiro emprego, com a possibilidade de um estágio, mas o conhecimento exigido pelas vagas não vem dos cursos superiores. Você precisa estudar diversos conteúdos baseados em uma stack, construir um portfólio e aprimorar competências como inglês, e outras softs skills para cumprir os requisitos de uma boa vaga.

Mas a faculdade não é inútil, pelo contrário. Ela é uma ótima forma de saber por onde começar a estudar, conhecer sobre as diversas profissões da área e começar a pensar nas tecnologias que mais te agradam.

Análise e Desenvolvimento de Sistemas é um dos cursos mais procurados e serve muito bem nesse papel de te inserir na tecnologia. Ele é o que considero como generalista, porque introduz desde infraestrutura ao desenvolvimento mobile. Você não aprende a codar grandes aplicações, ou montar uma rede complexa, mas sabe por onde começar a buscar o necessário para isso.

Pensando nisso tudo, vou citar os 3 motivos, que ao meu ver, podem te convencer a considerar esse curso maravilhoso como uma boa opção.

1. É feito para quem está começando

Talvez as palavras Front e Back-end não façam sentido. E para ser sincera, você talvez nem queira desenvolver para web. Existe tanto para explorar, tantas tecnologias, mas pesquisar se torna inviável quando você não sabe o que significa cada termo. Pois bem: ADS pode ser uma boa para te auxiliar nesse processo.

A grade do curso começa com introdução a algoritmos, analisando os fluxo e estrutura de dados. Estudamos os principais componentes de hardware e o funcionamento da internet. Essa é a base de diversos cursos pagos que prometem ensinar a desenvolver em X tempo, a diferença aqui é o diploma. É uma graduação muito bem reconhecida que permite você se encontrar na tecnologia sem perda de tempo.

2. Introduz os principais conceitos de tecnologia

POO, Web Services, Cliente Servidor e outros conceitos que usamos no mercado de trabalho são ensinados na faculdade de uma forma técnica. Em alguns casos, há uma disciplina específica, onde você vai analisar todos os tópicos e as principais tecnologias utilizadas. Como infatizei no início, esse é apenas o começo e alguns detalhes não vão ser entendidos apenas com o estudo teórico, mas com a prática, que deve acompanhar toda a sua graduação.

3. É Tecnólogo

2,5 anos é o que você precisa para se tornar um Analista. Nesse tempo, você vai aprender diversos conceitos, estudar por outras fontes com atividades práticas, se baseando na vaga pretendida e decidir se Tecnologia é mesmo para você.

O curso é voltado para o mercado de trabalho, tem uma grade dinâmica e é ofertado por diversas universades. Por ser tecnólogo, com uma pesquisa rápida, é possível encontrá-lo num preço justo com um bom material.

Pois bem,

ADS é um curso muito bonito e para todos os gostos. Não precisa ser apaixonado por números, matemática e afins. Você precisa gostar de resolver problemas, pensar em soluções possíveis e estudar, para se manter atualizado. O produto que será desenvolvido precisa ser bom e seguro. Essa é a proposta.

Esse é um post piloto escrito por mim ✨❤️

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no e-mail no contato.elisadrumond@gmail.com