DEV Community: André Rodrigues

Criando a logo do Instagram com HTML, CSS e analisando código para melhorias

André Rodrigues — Fri, 01 Dec 2023 03:08:05 +0000

Fala galera, tudo bem? Muito tempo que não posto nada por aqui, hoje aproveitando o tempo, decidi publicar esse artigo onde iremos criar a logo do Instagram e analisar o que podemos fazer de melhorias em nosso código, e aí bora começar codar?!

Primeiro modelo da logo

Escrevendo nosso HTML

Iremos começar com nosso html, definindo alguns containers para estruturar do html, abaixo nosso código.

<div class="instagram">
  <div class="container-point">
    <div class="point"></div>
  </div>
</div>

Acima, podemos observar a estrutura html que desenvolvemos. Inicialmente, criamos uma div principal chamada de "instagram", e dentro dessa div principal, implementamos uma div chamada "container-point", que, por sua vez, possui uma div filha com a classe "point". A div com a classe "instagram" servirá como nosso contêiner com uma estilização de gradiente de cor. Já a div com a classe "container-point" terá uma borda branca mais proeminente, enquanto a div com a classe "point" também terá uma borda branca. Para adicionar um elemento visual adicional, utilizaremos o seletor "after" para criar um pseudo-elemento, que assumirá a forma de um pequeno círculo.

Escrevendo nosso CSS

A partir de agora é necessária muita atenção em todo processo, para que ao finalizarmos esse primeiro modelo você possa analisar o código e observar os cenários de melhorias que iremos trabalhar no segundo modelo. Vamos ao nosso código CSS, começando pela estilização de nossa div com a classe instagram.

.instagram{
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px; 
}

Em nossa primeira estilização na div com a classe "instagram", inserimos um plano de fundo gradiente, bordas arredondadas e algumas diretrizes de Flexbox, além de definir as dimensões de nossa caixa. Agora, avançaremos na estrutura do CSS, explorando uma funcionalidade inovadora chamada nesting. Essa técnica, como mencionada, é uma novidade no CSS 3 nível 4. Se você já trabalhou com pré-processadores CSS, como o SASS, perceberá a semelhança na estrutura. A grande vantagem do nesting é a capacidade de reduzir significativamente o número de linhas de código. Abaixo, apresento o código CSS com a próxima personalização.

.instagram{
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px;
    .container-point{
        border: 4px solid #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
     }
}

Nosso código agora possuí além da parte principal, temos também a div com borda branca que irá ser o container dos nosso círculos, abaixo temos o visual até o momento.

O resultado está ficando legal, né? Mas ainda iremos adicionar os outros detalhes para que de fato vire a tão famosa logo do Instagram, então vamos fechar o primeiro modelo. Vamos adicionar a última classe e o after em nosso código, abaixo o código final com os últimos detalhes do css da primeira parte.

.instagram{
    background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px;
    .container-point{
        border: 4px solid #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
        .point{
            border: #fff 4px solid;
            border-radius: 50%;
            height: 20px;
            position: relative;
            width: 20px;
            &:after{
                background-color: #fff;
                border-radius: 50%;
                content: "";
                height: 8px;
                position: absolute;
                right: -8px;
                top: -9px;
                width: 8px;
            }
        }
    }
}

Analisando nosso código e refatorando nosso código (segunda estrutura)

Ao observarmos nosso código CSS podemos observar uma janela enorme de melhorias, e garanto que você deve ter observado algumas de grande impacto, como por exemplo trechos de código que estão repetindo várias vezes em nosso código, correto? Vamos melhorar nosso CSS removendo algumas repetições, abaixo nosso código sem repetições.

.instagram, .container-point {
  display: flex;
    align-items: center;
}

.container-point, .point{ border: #fff 4px solid; }
.conttainer-point, .point, .point:after{ border-radius: 50%; }

.instagram{
    background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    height: 80px;
    width: 85px;
    .container-point{
        border-radius: 12px;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
        .point{
            height: 20px;
            position: relative;
            width: 20px;
            &:after{
                background-color: #fff;
                content: "";
                height: 8px;
                position: absolute;
                right: -8px;
                top: -9px;
                width: 8px;
            }
        }
    }
}

Deixando nosso código mais elegante
Iremos aplicar algumas variáveis em nosso código para que ele fique mais charmoso, confira o código abaixo com nossas variáveis.

:root {
  --instagram-bg-start: #fdf497;
  --instagram-bg-end: #285AEB;
  --border-color: #fff;
  --border-radius-large: 20px;
  --border-radius-medium: 12px;
  --border-radius-circle: 50%;
  --box-shadow-color: rgba(0,0,0,.25);
  --point-size: 20px;
  --point-after-size: 8px;
  --container-point-size: 50px;
}


.instagram, .container-point {
  display: flex;
  align-items: center;
}


.container-point, .point { 
  border: var(--border-color) 4px solid; 
}


.container-point, .point, .point:after { 
  border-radius: var(--border-radius-circle); 
}


.instagram {
  background: var(--instagram-bg-start);
  background: radial-gradient(circle at 30% 107%, var(--instagram-bg-start) 0%, var(--instagram-bg-start) 5%, #fd5949 45%, #d6249f 60%, var(--instagram-bg-end) 90%);
  box-shadow: 0px 3px 10px var(--box-shadow-color);
  border-radius: var(--border-radius-large);
  height: 80px;
  width: 85px;

  .container-point {
    border-radius: var(--border-radius-medium);
    justify-content: center;
    height: var(--container-point-size);
    margin: 0 auto;
    width: var(--container-point-size);
    .point {
      height: var(--point-size);
      position: relative;
      width: var(--point-size);

      &:after {
        background-color: var(--border-color);
        content: "";
        height: var(--point-after-size);
        position: absolute;
        right: -8px;
        top: -9px;
        width: var(--point-after-size);
      }
    }
  }
}

Ao inserirmos as variáveis, otimizamos o tempo de manutenção do código. Isso se torna evidente, especialmente ao considerar que alguns valores dessas variáveis estavam anteriormente duplicados em propriedades como altura e largura. Com esta modificação, finalizamos a primeira fase da nossa refatoração. Agora, passo a responsabilidade para você realizar a próxima análise. Se identificar possibilidades de refatoração, por favor, compartilhe seus comentários neste post. Na segunda parte desse artigo, explorarei como tornar nosso código HTML e CSS ainda mais conciso. Por ora, encerro por aqui. Um caloroso abraço e até o próximo post.

Link código no Codepen: clique aqui

Angular para leigos (parte 2)

André Rodrigues — Sat, 11 Mar 2023 19:58:20 +0000

Angular é um framework muito poderoso para criar aplicações web. Uma de suas características mais marcantes é a capacidade de dividir a aplicação em componentes reutilizáveis. Neste post, vamos dar uma olhada em como criar componentes em Angular e usar boas práticas de HTML e SCSS.

Criando um componente

Para criar um componente em Angular, você deve usar o comando ng generate component. Esse comando criará uma pasta com o nome do componente e alguns arquivos dentro dela. O arquivo mais importante é o arquivo .ts, que contém a lógica do componente. O arquivo .html contém o template do componente e o arquivo .scss contém os estilos do componente.

Aqui está um exemplo de como criar um componente chamado meu-componente:

ng generate component meu-componente

Depois de executar esse comando, o Angular criará uma pasta chamada meu-componente com vários arquivos dentro, são eles arquivo html, scss e arquivos typescript para lógica e testes.

Adotando boas práticas para o HTML de nossos componente

Ao criar o template do componente, você deve seguir algumas boas práticas para garantir que ele seja fácil de ler e manter.

Use tags semânticas

Sempre que possível, use tags semânticas para descrever o conteúdo do seu componente. Por exemplo, em vez de usar uma div genérica, use tags como header, section, article, footer, etc.

Use os atributos data-

Use atributos data- para fornecer informações adicionais sobre o seu componente. Esses atributos não afetam a funcionalidade do componente, mas podem ser úteis para fins de estilo ou análise.

Título do meu componente

Conteúdo do meu componente

Rodapé do meu componente

Por hoje encerramos a nossa segunda parte, mas em nossa terceira parte iremos conhecer sobre as diretivas do Angular, espero que tenham gostado do post de hoje. Grande abraço e até o próximo.

Angular para leigos (Parte 1)

André Rodrigues — Sun, 05 Mar 2023 18:54:32 +0000

A cada vez venho percebendo a grande procura por artigos de Angular com um passo a passo de como criar aplicações, pensando nisso decidi criar uma série de postagens sobre o Angular e como construir uma aplicação com dados vindos de uma API json. Mas antes de começarmos a codar, vamos para alguns pré requisitos.

Pré requisitos para codar em Angular

Saber 70% de HTML
Saber 70% de CSS
Saber 70% de JavaScript
Saber 70% de SASS/SCSS
Saber 50% de TypeScript
Ter o NodeJS com versão atualizada instalada no computador
Ter VSCode ou outro editor de código instalado
Navegador atualizado

O que é o Angular

O Angular é um framework open-source criado pela Google para o desenvolvimento de aplicações web dinâmicas e complexas. Ele foi lançado em 2010 e passou por várias atualizações desde então, tornando-se uma das ferramentas mais populares para o desenvolvimento de Single-Page Applications (SPA). O Angular utiliza a arquitetura MVC (Model-View-Controller) para separar a lógica de negócios da interface do usuário, permitindo uma maior modularidade e reutilização de código. Ele também oferece recursos poderosos como injeção de dependência, binding de dados bidirecional e suporte a testes automatizados, tornando o desenvolvimento de aplicações complexas mais eficiente e produtivo.

Startando uma aplicação Angular

Antes de colocarmos a mão na massa, precisamos fazer a instalação do modo CLI do Angular em nossa máquina, para isso iremos abrir o terminal e digitar o seguinte comando:

npm install -g @angular/cli

Após instalado o CLI, podemos então criar então nosso projeto, escolha um lugar fácil de achar seu projeto, ou se preferir crie um novo repositório no Github, clone e dentro do diretório abra um terminal, após aberto o terminal escreva o comando abaixo para criar o projeto angular:

ng new rentcar

O comando acima irá criar um projeto de nome rentcar, vale destacar que no terminal você irá veral algumas questões como: se você deseja que o projeto seja rastreado pelo Analytics, se deseja que o router seja instalado para você fazer navegações e validações de rotas e o pré processador css que deseja adotar, você também pode adotar em usar apenas o css tradicional.

Rodando nossa aplicação Angular

Se você fez todas as etapas acima e não apareceu erro em seu terminal, agora podemos abrir o projeto no navegador e ver o resultado. No terminal navegue para dentro da pasta onde está aplicação e mande o seguinte comando:

ng serve

O comando acima irá abrir uma aplicação na porta 4200 (localhost:4200), se você abriu a navegação em uma aba de seu navegador, irá notar uma tela onde tem algumas descrições e uma parte onde tem um comando de como gerar um componente com CLI. Essa view é famosa tela "Hello World". Agora que sabemos que nosso projeto está ok, podemos então partir para a criação de nossos componentes personalizados, mas essa parte deixaremos para a segunda parte. Por hora encerramos aqui, um grande abraço e se tiver alguma dúvida deixe aí nos comentários :)

ChatGPT vilão ou Mocinho?

André Rodrigues — Tue, 24 Jan 2023 02:14:07 +0000

O uso de modelos de IAs, como o ChatGPT, tem se tornado cada vez mais comum na indústria de tecnologia. Muitos programadores podem sentir uma certa resistência em relação ao uso desses modelos, temendo que eles possam ser substituídos. No entanto, existem boas razões para acreditar que os programadores não devem temer o uso dessa ferramenta.

Em primeiro lugar, é importante reforçar que o ChatGPT é apenas uma ferramenta. Ele foi projetado para ajudar os programadores a automatizar tarefas repetitivas, como o desenvolvimento de códigos ou uma elaboração de documentação. Isso permite que os programadores possam se concentrar em tarefas mais complexas e criativas, como a construção de novas features ou a solução de problemas complexos. Em vez de substituir os programadores, o ChatGPT os ajuda a ser mais eficientes, produtivos e possibilitando ter uma boa saúde mental.

Além disso, o ChatGPT faz parte de uma tendência na indústria de tecnologia. A automação e a inteligência artificial estão se tornando cada vez mais importantes em várias áreas, e os programadores que estiverem familiarizados com essas novas tecnologias terão maiores oportunidades de carreira no futuro. Ao invés de temer o uso do ChatGPT, os programadores devem buscar aprender mais sobre ele e se familiarizar com suas capacidades, a fim de se manter atualizado e competitivo no mercado de trabalho.

Por fim, é importante notar que o ChatGPT é apenas uma das muitas ferramentas disponíveis para os programadores. Ele não é uma solução mágica para todos os problemas que surgirem, e os programadores ainda precisam usar sua experiência, conhecimento e julgamento ao usá-lo. O ChatGPT não é capaz de substituir a inteligência humana, mas sim de auxiliar a mesma.

Em resumo, os programadores não devem temer o uso do ChatGPT. Em vez disso, eles devem ver essa ferramenta como uma oportunidade para aumentar sua eficiência e tornar-se mais competitivos no mercado de trabalho. A automação e a inteligência artificial estão se tornando cada vez mais importantes no mercado, e os programadores que estiverem familiarizados iram sempre ter sua vaga garantida.

Loop com SCSS para sistema de grid

André Rodrigues — Sat, 11 Jun 2022 20:30:07 +0000

Código em SCSS

.container {
  margin: 0 auto;
  width: 99%;
  @media (min-width: 700px) {
    width: 90%;
  }
}
// Cols
$grid-columns: 12;
[class*="col-"] {
  padding: 0 15px;
}
@media (min-width: 700px) {
  @for $i from 1 through $grid-columns {
    .col-#{$i} {
      width: percentage($i / $grid-columns);
    }
  }
}
// Row
.row {
  display: flex;
  align-items: center;
  flex-direction: column;
  @media (min-width: 700px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

Código no HTML

<div class="container">
    <div class="row">
        <div class="col-12">Exemplo de grid</div>
        <div class="col-6">Exemplo de grid</div>
        <div class="col-6">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
    </div>
</div>

Push Notification com One Signal

André Rodrigues — Wed, 04 Aug 2021 23:58:31 +0000

Resolvi escrever esse breve tutorial após me deparar com um certo problema, onde precisava construir uma aplicação em Expo e que tive o Push Notification do One Signal. Procurei por diversos sites e até li na documentação a forma de implementar o One Signal no Expo, mas não estava claro lá. Após diversas pesquisas, eu achei a solução e com isso decidi compartilhar para ficar claro os passos de configuração do OneSignal.

Passos para configuração do OneSignal

1) Inicie um projeto com Expo;
2) Abra a pasta de seu projeto no terminal;
3) Digite o comando "expo eject", esse comando irá criar as pastas para buildar sua aplicação no IOS e Android;
4) Após o procedimento acima, instale o OneSignal em seu projeto, para isso siga as etapas da documentação: https://documentation.onesignal.com/docs/react-native-sdk-setup.

Feito todos os procedimentos acima, e também os da documentação, seu projeto irá rodar com sucesso. Espero que tenha gostado do post, um grande abraço e até o próximo.