Diario de estudo da Nadi

quinta-feira, 6 de julho de 2023

Boa práctica ao declarar variáveis

É uma "boa práctica" usar camelCase | PascalCase | snake_case para declarar nomes de variáveis, propiedades, atributos, métodos, funções e nomes de arquivos em computação.

Aqui as convenções de nomenclaturas comumente usadas:

Convenção	Exemplo
camelCase	firstNameUser
PacalCase	FirstNameUser
snake_case	first_name_user

camelCase

A caixa do camelo refere-se ao estilo de escrita que se assemelha às corcundas do camelo, onde cada espaço é apagado, inicia-se com minúsculo e cada palavra após se escreve em maiúsculas (só a primeira letra).

Exemplos:

first name user usando camelCase: firstNameUser

new user usando camelCase: newUser

number one usando camelCase: numberOne

sum numbers usando camelCase: sumNumbers

PascalCase

A caixa de Pascal refere-se ao estilo de escrita onde cada espaço é apagado, e se usa cada primeira letra em maiúsculo. Também é conhecido como "upper camel case" ou "capital case".

Exemplos:

first name user usando PascalCase: FirstNameUser

new user usando PascalCase: NewUser

number one usando PascalCase: NumberOne

sum numbers usando PascalCase: SumNumbers

snake_case

A caixa de cobra refere-se ao estilo de escrita em que cada espaço é substituído por um caractere de sublinhado, assim como a onda vazia da cobra e a escrita é tudo em minúsculo.

Exemplos:

first name user usando snake_case: first_name_user

new user usando snake_case: new_user

number one usando snake_case: number_one

sum numbers usando snake_case: sum_numbers

By DevRel </💜NadiDuno>

quinta-feira, 29 de junho de 2023

Exportar GIF em Figma usando plugin

Um@ colega, do grupo de estudos de análises de dados, perguntou como exportar um gif de figma.

El@ precisava que sua imagem (botão) tivesse movimento em seu dashboard.

Vou a ensinar aqui como exportar, já que por defeito figma nós permite exportar em formatos estáticos: imagem (png, jpg), vector (svg) ou em pdf.

É por isso que precisamos de ajuda externa, e aí vem os famosos plugin´s, para que salvem 😂 nossas vidas.

Bora lá 💪

Com figma aberto e a imagem.gif a exportar, siga os seguintes passos:

Passo 1: Botão direito em qualquer lugar da área de trabalho de figma

Passo 2: Clicar em Plugins

Passo 3: Clicar em Find more plugins

Pass 4: Abrirá uma caixa de diálogo

Escreve export gif

Clicar em GIF Export

Passo 5: Clicar em Run

Passo 6: Clicar em Export GIF

Passo 7: Abrirá uma caixa de diálogo

Escreva o nome do arquivo, pode ser "Botao"

Passo 8: Clicar em Salvar

E pronto terá seu botão em movimento pronto para ser usado

Com amor </💜NadiDuno>

segunda-feira, 26 de junho de 2023

Aprendendo HTML - Passo a passo

Neste post vamos aprender um pouco das muitas tag que tem HTML.

É um passo a passo para principiantes para poder replicar este site.

Para isso vamos a usar fronteditor, que é uma interface de desenvolvimento online e o curioso dela que foi desenvolvida por um Brasileiro muito querido, o Mayk Brito educator da Rocketseat.

Pronto para iniciar

Passo 1: Abrir um explorador de internet e digitar o endereço

https://www.fronteditor.dev/

Passo 2: Digitar código HTML na parte esquerda da interface

Aparecerá uma interface como está, dividida em dois, a parte esquerda é para escrever o código e a direita é nossa página web.

Passo 3: No lado esquerdo digite um signo de exclamação !

Isso ajudara a Emmet (Emmet abbreviation é uma inteligência artificial, que escrevera a estrutura básica de HTML5 para nós)

Como a tecla tag, selecciona !, ou usa o mouse para clicar sobre ele

Agora temos a estrutura básica de nosso HTML

E pouco a pouco podemos dar forma para criar um site como este, genial né?

Passo 4: Vamos a limpar nosso código (apagamos o que não precisamos)

As tag meta podemos apagar

Modificamos a linguagem a pt-BR

E modificamos o título da página para Link de perfil

<title>Link de perfil</title>

Passo 5: Vamos a pensar no corpo

Observe bem a página que queremos recrear

Concorda, que precisamos de uma elementos "tag" para:

- O texto principal <h1>

- A foto <img>

- O texto de cada elemento da lista <span> e uma lista não ordenada <ul> que contenga estos textos

- E os ícones para apresentar uma imagem de cada link

Bora codar

Passo 6: Usa um <div> para encerrar o código, quando desejar aplicar o CSS será mais fácil identificar esse bloco de código de dar a estilização nomeando ele por uma classe ou um id.

Tag que abre deve fechar </div>

Assim

Pressiona enter para colocar o bloco de código dentro dele

<div>

</div>

Retomamos os elementos definidos no passo 5

- O texto principal <h1>

- A foto <img>

- O texto de cada elemento da lista <span> e uma lista não ordenada <ul> que contenga estos textos

- E os ícones para apresentar uma imagem de cada link

Passo 7: Use a tag <h1> e escrever dentro o texto desejado, lembra fechar a tag </h1>

<h1>Links | Nadi Duno </h1>

Podes usar os teus dados para seguir a construção da página web.

Observa que ao lado direito vai refletir o que estás codando, boa né

Passo 8: Use a tag <img> e coloca o url da foto, a tag img fecha em si mesma <img />

A tag img tem atributos como src e alt.

src: é para colocar o caminho ou rota da imagem, pode ser local ou por url.

alt: é o texto alternativo (serve para a acessibilidade, leitores de tela para pessoas com deficiência visual e para descrever a imagem em caso de que não seja carregada)

Para a rota, usaremos a foto de nosso perfil de github, procura em tue github teu perfil e agrega ao final ".png"

https://github.com/nadiduno

Assim

https://github.com/nadiduno.png

Para a descripção, observa tua foto e descreve, se vem explícito já que ajuda no tema da acessibilidade, em caso de não querer descrever recomendo deixar o alt em branco ;) vale

Passo 9: Use a tag <ul> para listar os link, lembra fechar a tag </ul>

<ul>

</ul>

Para cada elemento da lista usa a tag <li>

Assim

<li>Elemento</li>

Bora a construir nossa lista, podes ver a imagem de referência do nosso site a construímos junt@s.

<ul>

<li>LinkedIn</li>

</ul>

Temos nosso o primer elemento 😎 wiiiiiii

Porém o elemento deve ser um link, então devemos usar uma tag <a>

Vamos para o passo 9 agora

Passo 9: Use a tag <a> para referenciar uma URL da web, lembra fechar a tag </a>

A tag a tem atributos como href e target.

href: é para colocar a URL de sua preferência

target: indica se a página vai abrir na mesma aba ou em outra, vamos da indicaram que abra em outra aba com _blank

Para a href, usaremos nossa URL de linkedin

https://www.linkedin.com/in/nadiduno

e para target, _blank

Assim

Para escrever dentro do <li> quebramos a linha e damos enter no teclado

<li>

</li>

Arriba da palavra LinkedIn agregamos nossa tag a que já temos, assim

<li>

</li>

Agora sim temos uma lista com um link, pode dar clic

Observa que abre em uma nova aba nosso linkedIn

Passo 10: Usa um ícone para acompanhar o texto do link

Eu recomendo usar uma biblioteca de ícones e importar em nosso código é só fazer as importações.

Deixo aqui o código que trouxe da web

E devemos colocar no header, em cima do title, pressione enter para quebrar a linha

<head>

<title>Link de perfil</title>

</head>

Agora colocamos o link

<head>

<title>Link de perfil</title>

</head>

Agora, vamos na tag <li>

e agregamos uma tag <span> para envolver o texto e poder aplicar uma classe com o nome do ícone

Assim

<span class="fa fa-linkedin"> Linkedin</span>

Ficando nosso código do <li>

<li>

<span class="fa fa-linkedin"> Linkedin</span>

</li>

Passo 11: Usa o código do <li> de Linkedin e repite para agregar GitHub

E modifica onde está linkedin por github, também o URL

https://github.com/nadiduno

Assim

<li>

<span class="fa fa-github"> GitHub</span>

</li>

O código da lista até agora esta asssim, com 2 elementos na lista (LinKedin e GitHub)

<ul>

<li>

<span class="fa fa-linkedin"> Linkedin</span>

</li>

<li>

<span class="fa fa-github"> GitHub</span>

</li>

</ul>

Passo 12: Coloca 1 novo elemento (youtube ou instagram)

Passo 13: Copia o CSS na aba de CSS.

Vou deixar um link do CSS para você só copiar, se deseja aprender detalhadamente o CSS aplicado aqui, deixe aqui um comentário aqui.

Repositório de GitHub | Arquivo HTML | Arquivo CSS

Interface de desenvolvimento: fronteditor

By DevRel </💜NadiDuno>

quinta-feira, 15 de junho de 2023

Resolvendo conflitos entre as branch - Git Hub

Aqui vamos a fazer um merge e vamos a ter um conflito, porque se modificará o mesmo arquivo "README", desde o remoto (na web - git hub) e o local (no pc - git bash).

E a fazer o merge vai produzir um conflito, aí se deve tomar a decisão que vai ficar e que deve sair, deves ser muito crítico ao decidir.

Prévio modifica o README no repositório remoto (Git Hub) e comita

# Criando uma branch no repositório local (pc)

$ git checkout -b feature-readme

# Modifica o README no local e comita

$ git add README.md

$ git commit -m 'Update README'

$ git status

$ git push

# Aqui da um erro e recomenda fazer um push da nova branch

$ git push --set-upstream origin feature-readme

$ git push

$ git checkout main

$ git merge feature-readme

$ git push

# Aqui da o conflito, já que previamente tinhamos modificado o README no repositório remoto

$ git pull

$ git config pull.rebase false

$ git pull

# Aqui temos que tomar a decisão de que código conversar, e fazer o merge a mão

$ git add README.md

$ git commit -m 'Solve conflict README'

$ git status

$ git push

Link do repositório --> https://github.com/nadiduno/projeto-toti-git

By DevRel <💜 /> Nadi Duno

Diario de estudo da Nadi

Home

quinta-feira, 6 de julho de 2023

Boa práctica ao declarar variáveis

quinta-feira, 29 de junho de 2023

Exportar GIF em Figma usando plugin

segunda-feira, 26 de junho de 2023

Aprendendo HTML - Passo a passo

quinta-feira, 15 de junho de 2023

Resolvendo conflitos entre as branch - Git Hub

Como Criar um Pull Request (PR) no GitHub

Visualizações

Conectados