DEV Community: Alexandre Bekor

007/100 Days of Code: Week 01

Alexandre Bekor — Fri, 25 Feb 2022 11:28:54 +0000

Hello galera!
Hoje é um grande marco pra mim, completamos a primeira semana do desafio #100daysofcode! 🤩🤩🤩

Ufa! Em vista do que está por vir ainda é um pequeno progresso, mas estou bem feliz com os resultados que temos alcançado.

Como relatei no início do desafio, meu principal objetivo era o de revisar e documentar os fundamentos de Javascript, mas como alguns puderam perceber, essa semana acabei por entrar em alguns conceitos mais periféricos que costumam fazer parte do meu processo de desenvolvimento de software, por isso resolvi que o ideal vai ser intercalar entre essas revisões e a documentação do meu progresso pessoal com assuntos mais avançados.

Metas da Semana Anterior

O desafio começou sem ter objetivos tão claros quanto aos assuntos que serão estudados e as atividades que serão desenvolvidas, mas com todos os testes realizados, durante essa primeira semana, consegui estabelecer alguns pontos importantes para a minha evolução.

Revisão Semanal

Comecei o desafio separando as seções dos artigos entre estudos do dia anterior e dia atual, e publicando-os antes de dormir, vi que os resultados não estavam sendo bons, nem para divulgação e muito menos para minha produtividade, por isso resolvi começar a divulgá-los de manhã com o resumo do que foi estudado no dia anterior
001/100: Fiz uma revisão detalhada sobre Expressões Regulares e me diverti testando-as no Regex101, também aproveitei para esboçar um artigo mais completo sobre o assunto e em breve será publicado por aqui
002/100: Também revisei os comandos do Git para ver se encontrava algum processo que poderia encurtar meu fluxo de trabalho trazendo mais produtividade ou organização
003/100: Aprendi a realizar o Debugging de aplicações Javascript utilizando a biblioteca debug
004/100: Revisei um pouco sobre Estrutura de Dados, um assunto bem leve para o dia, porque estava bem cansado
005/100: Meu primeiro dia de desmotivação durante o desafio... Resolvi escrever um pouco sobre isso, sobre hábitos e do quanto precisamos cuidar da nossa disposição e no dia seguinte acordei renovado!
006/100: Comecei a explorar o poder da última atualização do Strapi CMS e fiquei muito empolgado com as possibilidades

Algun erros que cometi

Acredito que poderia ter cuidado mais da minha disposição, principalmente por meio da alimentação, considerei demais a correria da semana e fingi que esqueci dos malefícios de se ingerir fast food todos os dias
Meu gerenciamento de tempo também precisa ser melhorado, em um dos dias cheguei a trabalhar pouco mais de 12 horas sem nenhum intervalo de qualidade e nem notei o momento em que eu já tinha perdido a produtividade e minha cabeça já tinha parado de funcionar (kkkkkk dou risada agora porque no dia foi difícil)

O que deu certo

Consegui estabelecer uma linha de progresso para os meus artigos
Mantive o hábito de escrever pelo menos um artigo por dia, mesmo que alguns deles não tenham sido publicados

Semana 01

Obrigado a todos que me seguiram e interagiram comigo durante essa última semana!

Gostaria também de deixar registrado um agradecimento especial para o @erickwendel, @nicolaslima321 e o @romulosous, seus feedbacks serviram de grande incentivo e me inspiraram a buscar melhorias!

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

006/100 Days of Code: Strapi CMS

Alexandre Bekor — Thu, 24 Feb 2022 13:18:32 +0000

Ontem foi dia de explorar mais a fundo a versão atualizada do Strapi e tudo o que encontrei me deixou bastante empolgado!

CMS

Um CMS (Content Management System) é, como o próprio nome já diz, um Sistema de Gestão de Conteúdo, para nós desenvolvedores é como a implementação de um CRUD dinâmico onde você define os tipos de conteúdos e os relacionamentos entre eles e o próprio sistema se responsabiliza por implementá-los com a capacidade de Criação, Leitura, Atualização e Deleção.

Strapi

O Strapi é um CMS, e do tipo headless, ou seja, ele fornece apenas o backend, que pode ser consumido por diferentes front-ends, agilizando a configuração de produtos que requerem apenas as clássicas tarefas de um CRUD ao mesmo tempo que mantém a liberdade para o desenvolvedor caprichar no design!

Apesar de já ter utilizado essa ferramenta algumas vezes no passado, as últimas atualizações conseguiram me surpreender, além da mudança visual, que agora apresenta um conceito mais clean, temos um suporte muito melhor ao desenvolvido com GraphQL e uma capacidade de extensão de componentes também melhoradas!

Entendo que a explicação completa de cada uma dessas melhorias e como elas podem ser utilizadas só pode ser compreendida em sua totalidade quando aplicada em um projeto, por isso já estou preparando um material que, com certeza, incluirá esse CMS no seu próximo projeto!😉

Hoje

A meta é explorar um pouco mais essa ferramenta para entender melhor como se dão os relacionamentos entre os componentes criados na aplicação e até onde chega o poder do GraphQL para gerenciamento desses dados.

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

005/100 Days of Code: The habits

Alexandre Bekor — Wed, 23 Feb 2022 00:50:02 +0000

Toda mudança de hábito requer esforço e constância, e isso não é problema nenhum quando estamos empolgados com uma nova ideia e com a expectativa do quanto ela pode ajudar outras pessoas!

O problema é que durante esse processo de construção somos pegos de surpresa por dias em que a nossa produtividade, criatividade e disposição não parecem colaborar com nenhuma atividade, são nesses momentos que nossa mente começa a criar justificativas, muitas vezes bem lógicas, para postergarmos ou deixarmos de lado qualquer atividade, principalmente as que ainda estamos nos acostumando a fazer.

Ontem foi um desses dias pra mim!

E por mais que tenha produzido algumas horas de código, o sentimento de falta de progresso liderou em grande parte do meu dia, antes de dormir a minha lista de atividades e meu painel de controle de novos hábitos estavam pintados em escarlate e a frustração foi ainda maior.

Mas não ache que isso tudo é apenas um desabafo de alguém descontente, muito pelo contrário, é na verdade pra te falar:

"Hoje o dia pode ter sido ruim, talvez seu sentimento seja de total improdutividade nesse momento e ESTÁ TUDO BEM!"

Lembre-se sempre:

Amanhã é uma nova oportunidade para avançar, não abra mão da sua evolução por um dia que, aparentemente, não deu muito certo
Pare, respire e repense no planejamento, aproveite a recuperação de um dia improdutivo para reconhecer as suas atuais limitações e, caso entenda que alguma atitude específica e dependente totalmente de você, possa ter contribuido para a indisposição, crie formas de combatê-las
Prefira redistribuir as atividades do dia anterior ao invés de tentar executá-las de uma só vez junto com as atividades de hoje na intenção de "correr atrás do tempo perdido", isso pode criar uma grande bola de neve de atividades não realizadas

Disclaimer

Se você identificar que esses episódios são recorrentes e/ou duradouros busque ajuda profissional, nunca descarte a alternativa de uma boa terapia, uma consulta a uma nutricionista ou um checkup rotineiro, leve sua disposição a sério!

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

004/100 Days of Code: Estrutura de Dados

Alexandre Bekor — Mon, 21 Feb 2022 15:24:32 +0000

Saber como organizar, acessar e editar dados utilizando estruturas padrões da linguagem é uma das chaves para desenvolver aplicações mais performáticas.
Para esse artigo, vamos falar de forma rápida sobre um dos tipos de estruturas disponibilizadas no Javascript: Vetores.

Vetores

Os vetores, mais comumente chamados de arrays, em sua forma mais simples são unidimensionais, ou seja, possuem internamente apenas tipos primitivos e imutáveis de dados, e podem ser heterogêneos, ou seja, ser compostos por tipos diferentes desses dados na mesma estrutura:

const arr = [1, 'hello', undefined, null, 2.8]

Cada item possui um índice (index) que corresponde a posição desse elemento dentro do vetor, iniciando sempre pela posição Zero, e é por meio desse index que temos a primeira forma de acesso aos dados do array:

const arr = ['hello', 'world']
console.log(arr[0]) // hello
console.log(arr[1]) // world

Utilizando esse mesmo conceito podemos também alterar os dados internos de um vetor ou adicionar novos dados por meio de um índice:

const arr = ['hello', 'world']
arr[0] = 'Alexandre'
arr[1] = 'Bekor'
arr[2] = '!'
console.log(arr) // ['Alexandre', 'Bekor', '!']

Manipulação de Vetores

Na maioria das vezes estamos lidando com vetores dinâmicos, ou seja, arrays de recebem entradas e saídas de dados com tamanhos que podem variar durante o seu uso na aplicação, por isso fica difícil utilizar um método de consulta, alteração ou atualização tão estático como os mostrados anteriormente.
Por isso foram criadas funções que facilitam a interação com os vetores de forma muito mais dinâmica.

Adicionar um ou mais itens

Para adição de itens temos:

push: adiciona os itens que recebe como parâmetro ao final do vetor
unshift: adiona os itens que recebe como parâmetro no início do vetor

const arr = [3, 4, 5]
const arr.push(6, 7, 8) // [3, 4, 5, 6, 7, 8]
const arr.unshift(1, 2) // [1, 2, 3, 4, 5, 6, 7, 8]

Remover um item

Para remoção de um item também temos outras duas funções:

pop: que remove o último item do vetor
shift: remove o primeiro item do vetor

const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const arr.pop() // [1, 2, 3, 4, 5, 6, 7]
const arr.shift() // [2, 3, 4, 5, 6, 7]

Como deve ter notado, essas funções não recebem nenhum parâmetro, ou seja, removem apenas um item por vez e apenas na primeira ou última posição.

Remover um ou mais itens

Para quando precisamos remover um ou mais itens e que não estejam necessariamente no início ou final do vetor temos a função splice:

const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 3) // [1, 2, 3, 7]

Essa função pode receber até três elementos, como demonstrado no exemplo acima temos:

3: índice do primeiro elemento do intervalo de deleção
2: quantidade de elementos que serão deletados, a partir do, e incluindo, o primeiro elemento do intervalo de deleção
'item 02', 'item 3': opcionalmente os itens que serão inclusos no lugar do intervalo deletado

const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 2, 'item 02', 'item 03') // [1, 2, 3, 'item 02', 'item 03', 7]

Extrair um intervalo de itens para um novo array

Além da habilidade de adicionar ou remover itens diretamente de um vetor, existem situações em que precisaremos extrair dados sem alterar o array original, para isso temos a função slice:

const arr = [1, 2, 3, 4, 5, 6, 7]
const newArr = arr.slice(2, 4) // []

Cuidado para não confundir com a função splice!
Nesse caso, a função slice recebe apenas dois argumentos e, similar a função anterior, eles representam um intervalo só que, com uma sutil diferença, enquanto o primeiro representa o índice onde o intervalo que será extraído inicia, o segundo representa o índice do último item, porém sem incluí-lo.
Como essa função gera um novo array copiando o itens com a regra proposta, não se esqueça de atribuí-lo a uma nova variável, como fiz quando declarei const newArr =.

Copiando todos os itens

O ES6 adicionou um atalho para a cópia de todos os itens de um array que vale muito a pena ser mencionado! O spread operator, que é um operador que 'espalha' os itens internos de um array onde ele é declarado:

const arr = [1, 2, 3, 4, 5]
const newArr = [...arr] // [1, 2, 3, 4, 5]

A sua facilidade de uso nos permite realizar adições melhor elaboradas como:

const arr = [4, 5, 6]
const newArr = [1, 2, 3, ...arr, 7, 8] // [1, 2, 3, 4, 5, 6, 7, 8]

Apesar de ter me aprofundado em estruturas um pouco mais complexas e teóricas acredito que transmitir um pouco dessa base mais simples, no primeiro momento, mantenha um histórico mais agradável dos meus artigos, documentando um processo evolutivo mais organizado.

Por isso por hoje é só 😄.
Mas o desafio continua e amanhã nos vemos novamente!

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

003/100 Days of Code: Debugging Javascript

Alexandre Bekor — Sat, 19 Feb 2022 13:39:10 +0000

Na tentativa de adaptar o relatório do desafio à minha rotina vou passar a divulgar o post na parte da manhã com o resumo do aprendizado do dia anterior, por enquanto faz todo sentido, então vamos de teste!

Ontem resolvi adiantar algumas funções e componentes de um projeto em que estou trabalhando e passei um pouco mais de 12 horas imerso nessas tarefas, por isso quando fui revisar a matéria para o desafio preferi optar por um assunto leve e que pudesse lidar sem que fosse preciso iniciar um projeto de teste.

Olhando a grade de aprendizado do FreeCodeCamp vi que dedicaram um módulo apenas para o debugging e por isso resolvi explorar um pouco esse processo, afinal é uma das habilidades que tenho como obrigatórias para todo desenvolvedor.

Em Javascript o debug pode ser realizado por meio da famosa função console.log() que retorna os valores de seus parâmetros:

no terminal de comandos, quando o código está sendo executado no back-end,
ou na área do console em 'Ferramentas do Desenvolvedor' nos navegadores, quando executado no front-end

O seu uso é simples e direto ao ponto, basta informar um ou mais parâmetros para a função e os resultados serão impressos:

const str1 = 'Hello '
const str2 = 'World'

console.log(str1, str2)
// no console: Hello World

Ela pode ser adicionada a qualquer momento no código e te permite descobrir facilmente o atual estado de uma variável ou se uma função de fato está sendo executada.

Também é possível adicionarmos uma pequena personalização para o retorno do debug por meio dessas variações da função console:

// no console do navegador retorna o valor como um aviso
console.warn('Isso é um aviso')

// no console do navegador retorna o valor como uma informação
console.info('Isso é uma informação')

// no console do navegador retorna o valor como um erro
console.error('Cuidado com isso aqui!')

// informe um objeto para ter um retorno organizado em tabela
const person = {
  firstName: 'Alexandre',
  lastName: 'Bekor' 
}

console.table(person)

Apesar de dificilmente impactar o processo de desenvolvimento da grande maioria dos desenvolvedores é importante ter como informação que a função console.log() e suas variações são executadas de forma síncrona.

Além desse modo clássico e talvez o mais utilizado, existe uma biblioteca que também auxilia o debug e torna o processo ainda mais profissional e informativo, cujo nome é bem auto explicativo: debug.

Por meio dessa biblioteca é possível gerar um log ainda mais detalhado e organizado do estado das variáveis, da execução das funções, e das requisições (para quem é apaixonado por organização e documentação é um verdadeiro show luzes no terminal), ainda estou me exercitando nela por isso prefiro não me arriscar transmitir informações mais profundas, mas se você quiser já começar a experimentar basta instalá-la e:

// importá-la atribuindo a uma variável
const log = require('debug')

const str = 'Hello World'

// utilizá-la como função envolvendo o trecho que será depurado
log(str)

Executá-la no terminal primeiro definindo a variável DEBUG seguido da flag * e por fim executando o arquivo:

set DEBUG=* & node index.js

Você pode explorar um pouco mais da biblioteca diretamente pelo repositório dela aqui.

E obviamente tendo em breve um material mais detalhado por aqui e por meio das minhas outras redes sociais.

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

002/100 Days of Code: Git

Alexandre Bekor — Fri, 18 Feb 2022 11:56:26 +0000

Git: A forma mais assertiva para se contar a história do seu projeto, usar essa ferramenta é como escrever a biografia do seu código! 🧐

Ontem

Desenvolvi templates para validação de formulários com Regex e pesquisei algumas boas práticas na formatação das expressões.

Durante o aprendizado de Expressões Regulares com o auxílio do Regex101 desenvolvi alguns materiais de consulta que em breve estarei compartilhando por aqui!

Hoje

Enquanto me preparava para enviar um projeto front-end para o Gitlab notei que alguns dos comandos que havia estudado para gerenciar os versionamentos haviam sido esquecidos, por isso resolvi dedicar o final dessa noite para relembrar e exercitar.

Git

É um versionador de código, ele te permite empacotar as modificações de arquivos com uma descrição e gerar a partir disso um ponto de salvamento que pode ser restaurado a qualquer momento. Ou seja, por mais que você altere o código, é possível retrocedê-lo a qualquer momento para qualquer ponto de salvamento.

Uma ótima saída para quando um 🐛 bug resolve aparecer na nova versão da aplicação e estamos com pouco tempo de reação!

Aqui estão alguns dos comandos que mais utilizado e que provavelmente você também utilizará:

git init
// inicia o versionador na pasta em que foi chamado

git clone <URL do Repositório>
// clona um repositório a partir de uma url
// exemplo: git clone https://github...

git add .
// adiciona todos os arquivos do projeto na monitoria

git remote add <nome> <url>
// adiciona uma referência para um repositório remoto a partir de uma url
// exemplo: git remote add origin https://github...

git commit -m "Mensagem do Commit"
// empacota as modificações do arquivos monitorados com uma descrição

git push <Nome do repositório remoto>
// envia o commit para o repositório remoto
// exemplo: git push origin

git pull <Nome do repositório remoto> <Nome da branch>
// Incorpora as alterações de um repositório remoto na branch atual
// exemplo: git pull origin master

git status
// Retorna os arquivos que estão sendo monitorados

git log
// Retorna o histórico de commits

git checkout <ID do Commit>
git restore --source <ID do Commit>
git restore .
// restaura o projeto ou um arquivo específico a um ponto anterior

git switch -c <Nome da Nova Branch>
git branch <Nome da Nova Branch>
git branch
git switch <Nome da Branch>
// git switch master

// Atalho para selecionar a branch master
git switch -

git tag -a <Tag> -m 'Descrição'
// cria uma tag e atribui ao commit atual, é como criar um marco, alguns utilizam esse recurso para indicar o início de nova versão da aplicação
// exemplo: git tag -a 1.0 -m 'Alpha Version'

git tag
// lista as tags

Commit para múltiplos repositórios remotos

Esse processo já me atendeu muito bem, então vou destacá-lo aqui!
Já me deparei com uma situação em que precisava realizar o envio dos commits para dois repositórios remotos diferentes, mas por questão de produtividade precisava que o envio fosse realizado com apenas um comando de git push, ao invés de ficar alterando entre as branches e os repositórios remotos, aqui está a estratégia:

// Crie um repositório remoto
git remote add <Nome do Repositório> <URL do Repositório Remoto 01>

// Aponte a URL do outro repositório para o mesmo <Nome do Repositório> utilizado no comando anterior 
git remote set-url --add --push <Nome do Repositório Anterior> <URL do Repositório Remoto 02>

// Exemplo
git remote add origin https://github...
git remote set-url --add --push origin https://gitlab...
git remote set-url --add --push origin https://bitbucket...

Agora, quando enviar os commits com um git push, eles serão processados para todos os repositórios remotos adicionados.

Disclaimer

Sei que não entrei em detalhamento de nenhum dos comandos, mas esse post é apenas a sumarização do estudo do dia, em breve estarei escrevendo alguns artigos mais detalhados abordando cada um desses temas e você pode acompanhá-los nesse e nos meus outros canais de comunicação.

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

001/100 Days of Code: Expressões Regulares

Alexandre Bekor — Thu, 17 Feb 2022 01:53:48 +0000

A sopa de letrinhas que pode revolucionar sua maneira de validar entradas de dados! 🍲

Ontem

Comecei a estudar sobre expressões regulares realizando os exercícios do módulo Regular Expressions no FreeCodeCamp e acompanhei uma explicação incrível do @erickwendel que, por feliz coincidência, lançou um material na segunda-feira em seu canal no youtube que, apesar de não ser o tema principal do vídeo, explica com excelência a respeito desse assunto.
Esse é o vídeo!

Hoje

Sumarizei as principais flags e operadores dessa grande sopa de letrinhas e utilizei a maioria delas em alguns experimentos no Regex101, um editor online que te auxilia no processo de construção da sua expressão regular, uma ferramenta incrível e bem intuitiva, basta inserir os termos que devem ser testados e sair construindo sua expressão enquanto acompanha simultaneamente os resultados.

Um pouco do que foi aprendido:

Expressões Regulares

São padrões utilizados para identificar cadeias de caracteres em uma string
São muito utilizadas para validação de entrada de dados
Em Javascript as expressões regulares não são declaradas entre aspas

Alguns caracteres:

Caractere	Descrição	Exemplo
\|	Ou	/Yes\|No/
i	Ignora a caixa do caractere	/Alexandre/i
g	Retorna um vetor com todas as ocorrências	/Alexandre/g
.	Indica um caractere qualquer	/ti./
[ ]	Escolhas permitidas	/B[au]g/
[ - ]	Intervalo de caracteres	/B[a-j]u/
[^ ]	Negação de caractere	/Alex[^a]ndre/i
^	Obrigatório estar no início	/^a/

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:

100 Days of Code

Alexandre Bekor — Tue, 15 Feb 2022 15:03:11 +0000

Após tanto tempo postergando finalmente decidi entrar de vez no desafio: 100 dias de código! 😎

100 days of Code!

Para quem não conhece esse desafio, todas as regras podem ser encontradas em 100daysofcode.com, mas em resumo é exatamente o que o próprio nome diz, quem entra se responsabiliza em praticar um assunto específico, que pode ser uma linguagem de programação, um framework, uma nova ferramenta ou até mesmo um novo hábito, por pelo menos 1 hora pelos próximos 100 dias.
E dentre todos os assuntos propostos resolvi começar pela linguagem de programação da minha stack favorita: Javascript!

Mas não deveria ser um assunto inédito?

Apesar de já ter um certo domínio da linguagem a ideia é revisar os conceitos fundamentais e ir prosseguindo até assuntos mais avançados, acredito que fortalecer o entendimento dos fundamentos nunca é demais!

Reporte Diário

Enquanto estava procurando uma forma de ser o mais direto possível com os reportes diários do desafio me deparei com esse modelo incrível idealizado por @rammina e decidi começar por ele:

Ontem...
Hoje... 
Estou tendo dificuldades com... (opcional)

Mãos à obra

E que comecem os jogos! 🚀

Outros Canais

Fique à vontade para entrar em contato comigo por essas outras mídias sociais também: