Pequeno diário de uma futura programadora

Querido diário,

Eu fiz um Koala! (Mentira, já tava pronto, só copiei o código, mas ei! o professor quem mandou)

Ainda outro dia vi uma matéria no Medium sobre desenhar com CSS - a bem da verdade nem me lembro como cheguei lá. - E existia esse desfaio dos 50 desenhos por dia. Claro que eu não quis participar logo de cara. Eu sou assim.

Mas achei a premissa super interessante e lá pro meio do texto da garota, ela indicava esse Mike que por sua vez oferece aulas gratuitas (sempre) de Desenho com CSS puro. Show.

Comecei hoje e o primeiro video levou longos 23:27. Parece meio enfadonho no começo porque está tudo pronto, e ele pede que você analise o código e o resultado do código com ele, passo a passo.

Daí que achei interessante ressaltar algumas das observações que o próprio professor faz:

Tópicos importantes:

Ele trabalha com percentual para melhor ajustar os tamanhos e direções relativo ao box. O box é como uma tela, ou o palco para quem trabalhava com animação. Inclusive tem um conceito de marcação para garantir que o que você quer fique bem centralizado e apareça corretamente. O box serve mesmo para marcar onde o Koala vai ficar, é um quadrado com bordas, mas sem nenhum preenchimento. (se não houvesse o box o Koala ia ser relativo ao body? D= ) Assim também se evita qualquer problema com tamanhos variados de telas uma vez que dentro do Box ele vai responder ao tamanho do box apenas.

O Koala é basicamente um monte de círculos. Exceto pelo nariz e o cabelo. Aqui o importante é entender que é tudo bem simples. Uma combinação de formas para se obter o resultado. Tem a ver com observar um desenho e decompor ele em formas bem simples. Ver como ele pode ser feito com círculos, quadrados e triângulos. Achei esse conceito legal e de algum modo me recordou a componentização….

HTML e Classes  estão aqui para auxiliar na estruturação, incluindo também a possibilidade de aninhar algumas formas para facilitar o posicionamento e tamanho, por exemplo.

Border-radius transforma retângulos e quadrados em formas mais arredondadas, quanto maior for o valor atribuído a essa propriedade.

Ele ensina uma fórmula para centralizar (absolutely center) determinada forma. Após definidos ** width e height (com valores percentuais) **deve-se calcular a posicionamento da esquerda e do topo:

left = (100 - width) / 2 top = (100 - height) / 2

As “camadas” arranjadas com z-index: Quanto mais alto seu valor mais a frente das outras formas uma forma estará. Quanto menor, mais ao fundo estra forma ficará.

Uma outra coisa bem interessante é que muitos desenhos são** simétricos, ou seja, muitas vezes a forma pode ser definida em um lado (direita ou esquerda, em cima ou embaixo) e replicada para o outro, guardadas suas devidas **proporções. A orelha é um excelente exemplo, ela tem_ a mesma cor, o mesmo formato, o mesmo tamanho, o mesmo posicionamento de z-index,_ o que muda é o “lado” que cada uma se encontra. Daí que basta copiar todas as informações e alterar o direcionamento (se top, left, bottom ou right) e o valor necessário para posicionar a forma corretamente..

Ainda nesse observação, quanto a ‘orelha interna’ não possui uma classe para esquerda e outra para direita. Porque, esta forma, uma vez aninhada no HTML vai herdar o posicionamento de seu antecessor. Ou seja, se alinhada a “orelha-direita” ela vai herdar o posicionamento da mesma, já que está aninhada à ela. Do mesmo modo as pupilas dos olhos, ficarão corretamente posicionadas em seus respectivos antecessores.

Benditos triângulos: Nada muito para dizer, exceto que se precisar : é bem aqui;

Minhas considerações finais:

São mais 14 aulas e um projeto final. 

Depois disso tem o desafio dos 50 dias, aquele que eu citei lá em cima e um coleguinha teve o cuidado de disponibilizar para todos nós, uma vez que o site e o email do desafio não funcionam mais. 

(alguns) Métodos! 

.trim():

Útil para eliminar os espaços no começo e no fim de cada String. Espaços possuem índices e sendo assim, são contados como parte integrante da string. Assim: let nome = “   Ana” , quando sua propriedade length (comprimento) é acionada, retorna um valor diferente do esperado.

console.log(nome.length) >> 6 

Ana tem apenas 3 letras, mas os 3 espaços acrescentados são contados pela propriedade. Para corrigir isso, o método .trim() é utilizado.

console.log(nome.trim().length) >> 3

.toUpperCase() , .toLowerCase() :

Útil para deixar todos os caracteres em letra maiúscula (UpperCase) ou todos os caracteres em letra minúscula (LowerCase)

console.log(nome.toUpperCase()) >> ANA

.split():

Esse método recebe um parâmetro, ali entre parêntesis, para indicar onde a String deve ser “quebrada”. Isso quer dizer que o split separa a string a partir de um caractere comum a ela, criando um vetor a partir dessa separação. O exemplo clássico é usar .split(””) separando assim todos os caracteres daquela string em um vetor, uma vez que o parâmetro para quebra é ““ (vazio)   

Querido Diário,

As primeiras quatro lições de JavaScript através do SCRIMBA foram bem básicas.

Aqui um resumo do que foi aprendido

Lição 1 - Introdução (1:41)

Uma breve apresentação do curso, seu professor e o modo como o conteúdo vai ser explorado: 

São 14 lições e 7 desafios 

Conceitos importantes da linguagem

JavaScript dá ao HTML e o CSS dinamismo.

Lição 2 - Variáveis em JavaScript (2:22)

Variáveis em javaScript podem ter três denominações: var , let e const. A atribuição é feita da seguinte forma :

var nomeDaVariável = valorDaVariável;

o símbolo de igual ( = ) é que implica a atribuição daquele valor à variável. Significando recebe.Ou seja “variável nomeDaVariável recebe valorDaVarável"

E let e const:

as variáveis let podem ser reatribuídas ao longo da aplicação, de modo que se for necessário fazer uma substituição dos valores da mesma, o valor antigo deixará de pertencer a ela, dando lugar ao novo.

o mesmo não ocorre com a variável const, que é constante e sendo assim não pode ser reatribuída sem que se incorra em um erro na aplicação.

Lição 3 - Uma mensagem da equipe Scrimba (2:58)

Importante lembrar que se eu algum dia conseguir algum dinheiro considerável eu tenho que agradecer muitas pessoas.

Lição 4 - Strings no JavaScript (6:00)

na dúvida use console.log( typeof _somethingSomething_) 

typeof É útil para informar qual o tipo do elemento em questão. Os tipos primitivos são vários ((números, booleans, objetos, vetores, strings etc)) e o tipo abordado nessa aula é String (conjunto de caracteres)

Elas são reconhecidas entre aspas duplas(”aqui a string”) ou simples(’aqui também A string’) lembrando que NUNCA pode começar com uma e terminar com a outra. Claro, existe o uso misto, mas isso vai ser abordado mais para frente. Sempre pode haver a necessidade do uso de ambas para a formulação de uma  frase.  ES6 >> E Template Literals (Template String)  Para concatenar, acrescentar, exibir, juntar, unir, resultados de variáveis a strings de uma forma clara e simplificada é utilizada a seguinte sintaxe let testeTemplateString = `${aquiAVariável} e aqui a string normalmente`  ou seja let primeiroNome =“Fulano“ let últimoNome = “ de Tal” const nomeCompleto = `Olá, eu sou ${primeiroNome} ${últimoNome}` o que resultaria em: >> Olá, eu sou Fulano de Tal

Vejamos a seguir, um pouco sobre métodos.... 

Embora eu tenha começado, de verdade, com Logica de programação, bem aqui, eu não vou abrir os trabalhos com esse tema exatamente. Vou voltar nele, sem dúvida, inclusive por este mesmo link, mais tarde. 

A questão aqui é que JS está mais presente agora e mais do que presente, se fazendo muito necessário. Assim que, também, ao invés de começar pelo meu começo em JavaScript eu optei por acompanhar um curso de introdução ao JavaScript e em paralelo a ele um curso de introdução a ES6, ambos pelo SCRIMBA. 

São 24 lições de ES6 e 25 lições de JS. Criei também um repositório no Github para disponibilizar eventuais arquivos, projetos e exercícios que sejam desenvolvidos durante os cursos.

Era uma vez…. Não. Oi, eu sou o Gok…Não. Errei de novo. Se apresentar é algo muito difícil, sabia? Aliás isso me lembra que a frase de apresentação do mundo da programação deve ser sempre proferida, como um ritual de passagem e que essa sim é uma excelente forma de começar, então:

OLÁ MUNDO! (HELLO WORLD!)

É, me sinto bem melhor agora.

Onde eu estou e o que ando fazendo:

Github

CodePen

Eu comecei a estudar realmente programação a partir de 21 de Agosto de 2019. De início foi com o básico de Lógica de programação - Curso em vídeo e é certo dizer que o Curso em Vídeo foi meu ponto de partida. Ao mesmo tempo eu estudava por outras plataformas, mas não tinha ainda tanta confiança. O Curso em Vídeo é muito bom porque ele é tipo a tia do primário, pega você pela mão, e ensina o bê-a-bá e daí você , com mais segurança e noção geral, vai caminhando melhor pelos outros cursos (como Edx, Coursera, FreeCodeCamp). Pelo menos funcionou assim para mim. Depois de Lógica, veio o curso de Bases numéricas. E fui seguindo.

Comecei a aprender Python, HTML, CSS e JavaScript. Flertei amigavelmente com PHP, teoria de POO, NodeJS e REACT. Entrei para o Github e CodePen, além de conhecer diversas plataformas de ensino como FreeCodeCamp, Edx, Scrimba, Coursera, RocketSeat, e até aprofundar mais no Youtube para descobrir canais incríveis e pessoas bem interessadas em ensinar e compartilhar o que sabiam.

Então achei que deveria começar a escrever sobre isso. Sobre o que tenho estudado, como comecei a estudar, escrever sobre o que estudo e o que aprendi.

Não sei como seria a melhor forma de fazer, ainda estou em processo de definição, mas quero que esse diário dure no mínimo 1 ano (ou 365 dias/postagens). Outra coisa que sei é que quero começar do começo, quero dizer, das origens mesmo, falando das coisas que aprendi, dos videos que vi, como que tentado do zero. Mesmo que agora eu tenha alguma pequena compreensão melhor do mundo web, antes eu não tinha. E tudo parecia muito distante e assustador. Vai ser legal revisitar.