DEV Community: Wellington Mitrut

#006 - Operadores Lógicos

Wellington Mitrut — Thu, 03 Jun 2021 16:41:22 +0000

Antes de tudo, obrigado pelos acessos que vocês tem dado à estes posts, eu tentarei continuar a faze-los com a mesma frenquencia semanal. Para mais posts de diferentes assuntos acesse meu blog: blog.wmitrut.co

Coloca esse álbum do Nektar que eu econtrei essa semana e manda ver:

Operadores lógicos são operadores que retornam valores booleanos. Além de true

e false, estes operadores podem retornar verdadeiros e falseáveis.

Os valores falseáveis não necessariamente são só false. Existem 6 valores que podem ser considerados falseáveis:

undefined, null, NaN, 0, "", false

Todos os valores verdadeiros são aqueles que não são falseáveis. Lembra da tabela verdade? Abaixo anexo uma aula bem completa sobre tabela verdade e valores verdadeiros e falseáveis.

Em Javascript isto pode ser representado da seguinte maneira:

const x = true;
const y = false;

//Se utilizarmos o conectivo && - AND/E, ambos os valores
//tem que ser verdadeiros

x && y //retorna false

//Se utilizarmos o conectivo || - OR/OU, ao menos um dos valores 
// tem que ser verdadeiro
x || y //retorna true

//Já o operador ! - NOT/NÃO, retorna false se for verdadeiro e 
//verdadeiro se for falseável
!x // retorna false
!y // retorna true
!'Mitrut' // retorna false

Pronto, para saber a ordem de chamada, pense sempre na ordem normal matemática. Na próxima semana iremos tratar de Condicionais em javascript e depois cair de cabeça em um dos assuntos mais extensos e legais de JS: ARRAYS.

#005 Basicão do JS: Operadores Aritméticos

Wellington Mitrut — Fri, 28 May 2021 14:25:52 +0000

Dizia eu que a aritmética... Os chamados operadores aritméticos são utilizados para a realização de cálculos simples em JS, como soma, subtração, divisão e multiplicação, além de algumas operações menos conhecidas mas que você deve lembrar da escola o módulo (resto inteiro da divisão) e o incremento e decremento.

Para mais detalhes matematicos sobre módulo, veja o vídeo abaixo:

Ou seja, se eu quiser dividir 12 laranjas para 5 pessoas, em javascript eu tenho:

//Levando em conta que 12/5 = 2,4
//e eu preciso saber de forma exata o módulo, então:

12 % 5 = 2

Pois 2 é a parte inteira de 2,4.

Já incrementar significa aumentar o valor de algo, e decrementar significa diminuir o valor de algo.

Vamos por exemplo imaginar uma fila de gatinhos:

Temos a nossa variável gatos que vai começar com um valor 1.

Para cada gato que eu ver nessa fila, eu vou querer automaticamente adicionar valor à minha variável gatos. Então para representar essa operação aritmética basta que eu declare que cada vez que um gato desta fila seja visto ele faça a operação gato++ ou ++gato.

Qual a diferença de mostrar antes ou depois?

let gatos = 1
gatos++ // retorna valor 1 então seta gatos com o valor 2 
++gatos // seta gatos com valor 2 então retorna o valor 2

O Decremento faz a exata mesma operação mas subtraindo o valor.

let gatos = 4
gatos-- // retorna valor 4 então seta gatos com o valor 3
--gatos // seta gatos com valor 3 então retorna o valor 3

Abaixo segue a lista dos operadores aritméticos. Para saber a ordem correta de utiliza-los e qual tem prioridade sobre o outro, volte no post anterior desta série e veja o vídeo de 1 minuto incorporado.

Operador	Significado
+	Soma
-	Subtração
*	Multiplicação
/	Divisão
%	Módulo
++	Incremento
--	Decremento

Semana que vem: Operadores Lógicos

#004 Basicão do JS: Operadores de comparação

Wellington Mitrut — Thu, 20 May 2021 14:28:46 +0000

Vamos continuar a série do básicão do Javascript hoje com operadores de comparação, um assunto rápido mas crucial para entender qualquer linguagem de programação.

Coloca o álbum do Alice in Chains pra tocar e segue o jogo

Um pouco de matemática

Seguindo nossa série de posts sobre o basicão do Javascript, hoje trago pra vocês os operadores. O que são operadores? Se você já estudou matemática na escola, provavelmente já conhece os principais :

+ (adição);
- (subtração);
× (multiplicação);
÷ (divisão);
= (igualdade);

Acontece que geralmente os sinais de × (multiplicação), ÷ (divisão) são substituídos em algumas linguagens por * e / respectivamente pois os símbolos são muito semelhantes a letras que podemos usar como nome de variável como é o caso da multiplicação ou geralmente não estão em todos os tipos de teclado, já estes dois símbolos estão bem acessíveis.

Tá com problema pra lembrar como cada um funciona e sua ordem? Segue abaixo um vídeo explicando em menos de um minuto, não é vergonha não saber ou não lembrar, vergonha é continuar na ignorância.

Mas são só nas operações matemáticas que eu utilizo esses operadores? Não, e não são apenas estes operadores básicos. Os operadores são uma parte extremamente importante pois são eles que fazem a mágica acontecer. Vamos aprender os tipos de operadores em JS.

Operadores de comparação

Operadores de comparação servem para como diz seu nome, comparar dois valores distintos e retornam um resultado booleano (verdadeiro = true ou falso = false) com base na operação.

Bem simples não é? Notação fácil de decorar e bem semelhante a matemática comum. Tudo parece um mar de rosas aqui até que você encontra uma particularidade do Javascript. Por não ser uma linguagem fortemente tipada, posso somar um números com string.

Posso somar 1 + '1'

E eu posso gerar umas bizarrices lógicas como a seguir:

O javascript está tentando mudar totalmente ambos para um tipo que possa comparar os dois, o que nos leva a entender a diferença entre usar igualdade (==) e igualdade estrita (===).

Com a igualdade estrita você está forçando o Javascript a comparar não só o valor como o tipo de dado que está sendo colocado e tipos de dados nós já vimos lá no primeiro post.
Esse tipo de problema é facilmente detectado por ESLint por exemplo e já foi resolvido por supersets como Typescript.

Operadores de designação

Já vimos de forma indireta os operadores de designação por aqui, são aqueles que usamos para atribuir valores a variáveis com base no valor de igualdade, ou seja, são combos de operações.

Abaixo uma tabela de notação para você ter uma referencia em como isso funciona:

SEMANA QUE VEM: Operadores Aritméticos

Links e Fontes

▶ 🔗 Boa e Velha MDN

▶ 🔗 Acompanhe as lives do POKEMÃO!

▶ 🎬 Esta talk do Justin Jackson sobre saúde mental de desenvolvedores:

E mais

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

▶ Tome vacina. Não existe tratamento precoce, Fora Bolsonaro.

Lighthouse é meu pastor...

Wellington Mitrut — Sat, 15 May 2021 15:08:00 +0000

Publicado originalmente em 03/2019

Photo by Adrien Tutin on Unsplash

Continuando nossa série sobre PWAs, Performance e UX, trago dessa vez uma das ferramentas essenciais para quem quer construir um PWA incrível. O Lighthouse.

Segundo o Google, criador da ferramenta

O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Ele pode ser executado como extensão do Chrome ou na linha de comando. Informe ao Lighthouse um URL que você quer auditar. Ele executará uma série de testes na página e gerará um relatório sobre o desempenho da página. Nesse relatório, você poderá usar os testes que apresentaram falha como indicadores do que pode ser feito para aprimorar o aplicativo.

Ou seja, é uma ferramenta que vai fazer toda uma varredura da sua aplicação e lhe dar um relatório com todas as dicas do que pode ser feito para melhorar sua performance.

Durante muito tempo o lighthouse foi uma extensão do chrome, mas hoje, desde o Chrome 60 (na data da publicação deste post ele estava na 72) ele vem embutido no Chrome Dev Tools na aba Audits. Você pode acompanhar o projeto no Github aqui.

Vídeo do release do Chrome 60 explicando a adição do Lighthouse nos Audits.

Uma mão na roda né?

Mas Mitrut, eu nunca ouvi falar nisso!

Tudo bem, estamos aqui pra isso. Este blog foi construido totalmente de olho no que ocorre no score do lighthouse dele - ou seja. Pensado para ter performance e um score alto. No post anterior eu mostrei o score básico e como este blog foi construido para ser um PWA:

Resultados do Blog no Lighthouse

Usando o lighthouse

Partindo do princípio que você está utilizando o Google Chrome como navegador na versão 60+ desktop aperte:

Windows/Linux: F12 ou Ctrl+Shift+I
MacOs: Cmd + Option + I
Todas: Botão direito > inspecionar

Observação: O lighthouse só pode ser usado no desktop.

Isso vai abrir o seu Chrome Dev Tools. Procure pela aba Audits:

Quando você abrir esta aba, ele já vai te mostrar o Lighthouse com todas as opções possíveis para serem auditadas, sendo elas: Performance, Progressive Web App, Best Pratices, Accessibility e SEO - sim, SEO, ele te ajuda desde como seu app está se comportando performaticamente até de como ele pode ser melhor indexado pelos buscadores.

Ainda existem opções de teste para mobile e desktop, bem como simular redes para ver como ele se sai em 3Gs e afins. Pense no lighthouse como um Pagespeed com esteróides.

Agora, depois de selecionados os filtros, é só clicar em Run Audits e esperar. Ele vai demorar mesmo (uns 30 - 40 s), vai fazer uma varredura completa no seu app.

Neste meio tempo ele testa tudo: como seu site se comporta em redes móveis lentas, se ele tem webapp manifest, como ele se comporta com JS desabilitado, se ele possui suporte offline, se ele é acessível, como estão as chamadas de JS e se elas demoram muito e no final ele te dá um relatorio.

É importante salientar que você não precisa perder o sono se seu app não bateu 100% de primeira em tudo, muitos blogs, sites e apps já o fazem mas se você ainda não chegou lá tudo bem. O importante é você estar preocupado com estas métricas.

Meu blog antigo passou pelo lighthouse com os seguintes resultados:

Entendendo o relatório

As 5 seções do lighthous que já citamos aqui possuem subsessões que são os checks auditados. Caso esteja tudo bem em uma sessão você vai encontrar o seguinte:

Senão...

E é aqui que você vai pegar as dicas principais do que você precisa melhorar. O lighthouse vai te dar dicas do que pode ser feito para melhorar o score, coisas tais quais: criar um webapp manifest, suporte offline, minificar JS, requisições que estão bloqueando a renderização, classes css não utilizadas, falta de metatags importantes...

Aqui entra um outro post que veremos futuramente sobre padrão PRPL de entrega de assets para sua aplicação rodar, o que é intrinsecamente ligado ao Lighthouse e performance.

Usando Lighthouse no CI

Digamos que você já está habituado com o Lighthouse e possui um serviço de integração contínua tal qual o TravisCI. É possível automatizar a checagem do Lighthouse e colocar "metas" de score.

Para isso existe o LighthouseBot

O LighthouseBot pode ser colocado junto à sua integração e deixar essa checagem automatica e mais fácil, ele comenta nos seus pull requests e ainda pode impedir que um build ruim vá para produção

Abaixo você pode ver um build com lighthouse com métricas ruins sendo barrado.

CLI

Sim, também é possível rodar o lighthouse via CLI - para quem prefere ter o Firefox como navegador é uma boa pedida. Para testar o CLI é só instalar:

    npm install -g lighthouse

Depois de instalado você roda apenas

    lighthouse <url>

Sendo que é o parâmetro da URL a ser auditada. Existe uma série de flags que podem ser adicionadas como --verbose, --output json e etc. para personalizar o report ao seu gosto.

A documentação é bem completa e vai te ajudar com tudo. Ele gerará um arquivo HTML com as mesmas informações que você vê no Audits do Chrome Dev Tools.

Ainda existe uma série de integrações interssantes e possíveis com ele bem como uma gama enorme de projetos derivados.

Abaixo um vídeo com mais detalhes de como usar o Lighthouse:

Enfim...

Se você se importa com performance e você DEVE se importar, o lighthouse é uma ferramenta indispensável para se criar um bom PWA. Indico aqui dois posts para que você se aprofunde mais no assunto, um do Addy Osmani e outro post onde o William Justen também fala da experiência dele em melhorar o seu blog e ter um bom score no lighthouse.

Mais uma coisa

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

▶ Tome vacina. Não existe tratamento precoce, Fora Bolsonaro.

▶ Não caia em papo de dev coach nóia.

▶ O meu projetinho que você pode contribuir, o AWESOME BRAZILIAN DEV BLOGS. Uma compilação de blogs de desenvolvedores e comunidades brasileiros que estejam em PORTUGUÊS. Visa ser um hub/ponto de partida pra quem busca bom conteúdo de desenvolvimento em português - PRs bem vindas!

▶ Como a Netflix fez o Bandersnatch do ponto de vista de desenvolvimento:

Amanteigando a percepção do usuário

Wellington Mitrut — Sat, 15 May 2021 14:39:26 +0000

Originalmente publicado em Outubro/2018

Depois de um longo tempo sem publicar, continuo o post sobre como transformar seu PWA em um 'aplicativo de verdade'.

Olá pessoal, depois de um longo tempo sem publicar, resolvi sentar a bunda na cadeira e fazer este texto sair da cabeça e ganhar vida. Caso você tenha perdido a parte 1, tenha chegado aqui por algum outro meio de busca e não tenha lido o primeiro texto da série, veja no blog o post Parte 1.

Carga Cognitiva

Se você já leu o texto, pois bem, terminamos o último falando sobre um problema de UX bem comum chamado CARGA COGNITIVA.

Segundo a wikipedia, carga cognitiva se refere ao nível de utilização de recursos psicológicos como memórias, atenção, percepção, representação de conhecimento, raciocínio e criatividade na resolução de problemas.

Ou seja, para nós que trabalhamos com PWA, é interessante que venhamos a utilizar convenções e padrões já utilizados em aplicações ditas nativas, isso também não quer dizer que absolutamente todo app que você faz tem que ser em material design ou cupertino components (Apple Design), mas sim que você pode tirar o melhor de cada e criar experiências incríveis.

Quanto menos desgastarmos nosso usuário aprendendo a navegar na nossa aplicação, maior pode ser o engajamento dele com o que fizemos.

Se você quiser se aprofundar um pouco mais sobre carga cognitiva em UX, segue um texto abaixo do Coletivo UX pra explorar isto um pouco mais.

No texto anterior falamos dos problemas e neste falaremos dos princípios que ajudarão a resolver isto, são eles: REATIVIDADE, PREVISIBILDADE e USUÁRIO NO CONTROLE.

A percepção humana de tempo é fluida, e pode ser manipulada de maneira proposital e produtiva. — Chris Harrison, Zhiquan Yeo, Scott E. Hudson

Embora a frase acima pareça saída dos ensinamentos que a Grande Anciã passou para Stephen Strange, ela veio na verdade de professores, UX designers e é a pura verdade.

O próprio Joselito fala em suas palestras que mais importante que ser é parecer ser, então com base nisso apresentarei alguns exemplos interessantes de como podemos moldar a percepção de performance que nossos usuários tem sem ter que usar o olho de Agamoto.

SKELETON SCREEN

Você já deve ter visto uma skeleton screen, só não sabia que ela se chamava assim. Se você possui facebook, esse tipo de tela pode ser bem comum quando você está num 3G. É aquela tela que mostra quando você abre o app e ele ainda não carregou os dados.

Existem casos em que a tela só muda quando a nossa request de dados está completa e isso é ruim do ponto de vista de quem está esperando. Nosso senso de percepção de mudança gira em torno de 400ms. Imagina que seu usuário numa internet ruim — ele clica, clica, clica e nada acontece. Pronto, o usuário já xingou sua mãe, fechou a aplicação e foi atrás do seu concorrente (ok, um pouco menos de drama, mas a gente sabe que acontece).

Ah mas o usuário que espere a request, eu não posso fazer nada até que tenha a resposta.

Em partes sim, o usuário que espere. Não tem como você apressar uma conexão lenta. Porém você pode dar um feedback pro seu usuário. Como? Jogando a próxima view em tela e pré-populando com uma skeleton screen.

Fiz até esse teste aqui no Medium para exemplificar. Por mais rápido que seja o gif, note:

Eu clico no post
Ele dispara a request
Ele abre a view do post pré-populada com uma estrutura básica de esqueleto
Ele monta a árvore do DOM com base nos dados da request

É fácil entender a forma com que isso ocorre, são aproximadamente 3 a 4 segundos em uma internet boa, perceba que em nenhum momento fiquei com tela em branco ou com a tela ‘congelada’, então na próxima vez que você for montar uma UI, pense em estratégias de como montar uma tela ‘fake’ para que seu usuário não ache que seu aplicativo simplesmente travou.

APPLICATION SHELL

Se você acompanha pwas desde o início, já deve saber que esta imagem é mais velha que o jQuery, o Tim Bernerss Lee e a vó do Badanha juntos.

Assim como a skeleton screen temos a application shell, que mostra a estrutura básica da aplicação. É estrutura mesmo, antes de conteúdo, sendo apresentada de forma quase instantânea na tela do usuário, muito parecido com o que se vê em aplicativos nativos.

O shell é composto pelos aplicativos mínimos necessários para montar a tela e se tratando de pwa é uma boa prática mantê-los armazenados em cache off-line para um próximo acesso, sendo assim, ele não será carregado toda vez que a aplicação for acessada, você deixará que apenas o conteúdo estritamente necessário seja carregado. Para SPAs, essa estratégia é essencial — geralmente esse tipo de aplicação possui uma carga enorme, deixar que isso seja carregado toda vez tem um impacto monstruoso em performance.

MUDAR A UI CONFORME O SISTEMA OPERACIONAL

Eu sei o que você está pensando. É chato, é trabalhoso — mas uma verdade dita desde que o cross-platform existe é: "Aplicativo iOs tem que parecer aplicativo iOs e aplicativo Android tem que parecer aplicativo Android".

Com isso em mente, faz-se interessante utilizar uma regra de css em cada OS e isso é possível

Esse pwa da prefeitura de Barcelona tem uma UI de acordo com o OS que você estiver utilizando

Alguns frameworks como Ionic já fazem isso também, é interessante que as estratégias sejam estudadas pois a entrega deste tipo de experiência agrega muito para seu usuário — tudo parece mais natural.

FEEDBACK DE TOQUE

Seu usuário está acessando sua aplicação de um dispositivo móvel, você sabe que é verdade, o mouse dele é um dedo — NÃO EXISTE HOVER.

Dar feedback de toque é essencial, então pelo amor de Addy Osmani, cuide com os feedbacks de toque, seja utilizando ripple ou tilt, ou então o ::active do css. Você deve prover feedback de UI para seu usuário. Abaixo algumas libs interessantes:

Se você leu até agora e se perguntou, como faríamos para jogar os recursos básicos iniciais para montar a tela e ficou achando que eu era meio maluco de querer fazer preload de tudo, saiba que aí é que irei parar de falar um pouco de UX/UI, olhar um pouco melhor para técnicas, estratégias e explorar a técnica do padrão PRPL — tudo isso no nosso próximo post!

E mais

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

▶ Tome vacina. Não existe tratamento precoce, Fora Bolsonaro.

▶ Não caia em papo de dev coach nóia.

I Can’t Believe It’s not NATIVE!

Wellington Mitrut — Sat, 15 May 2021 14:22:41 +0000

Vamos combinar duas coisas aqui antes de começar, a primeira é que SIM, os PWA são o presente e não mais o futuro, um monte de empresas já estão usando esse paradigma: Forbes, AliBaba, Flipkart e etc.

A segunda é: seu usuário não liga se a aplicação é feita em JS, Kotlin, C# ou então se é feito com uma planilha do Access. O que ele quer é que resolva o problema dele, então, sem preconceito com linguagem, paradigma ou seja lá o que mais você quiser implicar.

I Can’t believe is not native não é um manifesto, o que está aqui não é lei! É o sentimento que você desenvolvedor/Designer, independente da tecnologia utilizada tem que fazer seu usuário ter. Ele tem que usar seu PWA e nem PERCEBER que aquilo talvez não seja um aplicativo tradicional.

Mas pra começar a falar de Progressive Web Apps a gente tem que voltar um pouco no tempo, tipo, lá nos anos 90. Então bora lembrar da época em que você colecionava tazo, cd do Nirvana e tocava É o Tchan! sem parar.

No início, a web não foi pensada como uma grande plataforma de aplicações poderosa como é hoje. Ela era apenas como uma grande enciclopédia Barsa interativa na qual você ‘navegava’ entre páginas de texto, via algumas imagens e assim por diante. A estruturação e as linguagens de marcação sintetizavam na tela a semelhança do que acontecia em publicações e papers dos anos 90.

Com a popularização da tecnologia, viu-se a necessidade de criar estruturas e artifícios que fizessem da web algo mais atrativo e fácil de usar. Porém nem tudo são flores, além de não ser da noite para o dia, a criação destes artifícios foi sempre marcada por abstrações ‘desvios’, fazendo com que o desenvolvedor web fosse uma espécie de MacGyver e se virasse com o que tinha disponível.

A web não foi projetada para ter aplicações ricas, mas sim documentos, tudo que você vê no seu navegador são abstrações de arquivos de texto e isso é maravilhoso!

Mas se é tão maravilhoso, por que é que a web ainda não passa uma uma confiança, uma firmeza como as aplicações nativas passam?

Nós tivemos que reinventar a web com o que tínhamos em mãos, não tivemos que reescrever do zero para que ela se tornasse incrível, mas fomos refatorando sempre. O problema é que, como toda obra cheia de puxadinhos, melhorias ao longo dos anos, sempre fica alguma coisa pra trás. E justamente, a gente foi fazendo as coisas como dava.

Hoje, esta incerteza e experiência de usuário quebrada na web se devem a 3 fatores:

1 — Sites não são reativos

Como no exemplo abaixo, o site não tem um carregamento interessante quando o link é clicado, o conteúdo não tem uma transição, ele apenas aparece em tela.

2 — Sites não tem um comportamento previsível

Reforçando o argumento anterior, sites em geral não se comportam como se espera de um aplicativo, cada um tem uma forma de ser executado, em geral não possuem suporte à gestures, embora as vezes pareça claro que algo está para acontecer se gestos forem usados. Note abaixo como o usuário tenta chamar o menu lateral e não consegue por gestos, o que num aplicativo nativo isso seria o esperado com o menu hamburguer.

3 — O Usuário nunca está totalmente no controle da situação

Todo usuário comum da web passa por isso em algum momento, está lendo um artigo que acabou de abrir e de repente o conteúdo pula na tela, vai mais pra baixo ou mais pra cima por que um elemento como por exemplo, uma imagem foi carregado na tela e tomou seu lugar na árvore de renderização. Isso é ruim. Deixa o usuário fora do controle e o controle da aplicação tem que ser de quem está utilizando-a.

No exemplo acima você vê exatamente a situação que foi relatada, o artigo é aberto e após o usuário começar a mexer é que a imagem é carregada.

Estes 3 são os principais (não os únicos fatores) que fazem a web ainda ter uma experiência quebrada.

Estes três problemas aumentam algo que quero que você guarde bem o nome: é a CARGA COGNITIVA.

O que então pode ser feito para melhorar a experiência da web no mobile?

Pois bem, no próximo texto iremos explorar 3 princípios que vão de encontro com o que vimos e deixar algumas dicas para que você faça um PWA incrível.

Este texto é uma espécie de transcrição da minha palestra de mesmo título onde explico os princípios gerais de como criar uma experiência incrível nos PWAs, meus agradecimentos à Ana Paula Batista que me ajudou a revisar alguns dos pontos que serão publicados em breve por aqui.

Encontrou algum erro? Sugestão? Dúvida? Deixe seu comentário que eu responderei assim que puder, corrigirei e levarei sua sugestão em conta.

#003 Basicão do JS: Várias Variáveis

Wellington Mitrut — Sat, 15 May 2021 14:09:52 +0000

Hoje vamos falar de Várias Variáveis.

Não, esse texto não é sobre o álbum do engenheiros mas poderia ser.

Eu to é muito feliz com o feedback que vocês tem me dado nestes posts, embora ainda sejam poucos leitores e a maioria amigos eu vou insistir neste projeto pois consigo tirar muita coisa da cabeça e pôr meu blog pra funcionar de uma maneira que eu sempre quis que fosse por aqui.

Digo isso não só por repercussão mas por que acho que é importante pra mim tanto tentar ensinar quem ta começando quanto pra reforçar em mim mesmo estes pequenos conceitos de JS e engenharia de software. É básico mas o básico sempre precisa estar sendo lembrado.

Dito isto, como sempre, coloca o último álbum do Katatonia aí

Se você não viu os primeiros posts desta série, vai lá e lê, não leva muito tempo não.

Variáveis vs. Constantes

Se você prestou atenção no primeiro post da série, vai pegar variáveis com uma certa facilidade. Variáveis são nomes simbólicos que damos a valores de referencia a um espaço na memória no computador.

Sendo mais claro, é uma palavra ou caractere que damos um valor simbólico. Recebe esse nome por que seu valor pode mudar DURANTE o tempo de execução, já as constantes, como dito pelo próprio nome, se mantém constantemente com o mesmo valor e se você tentar mudar o valor dela, provavelmente terá um erro.

Os tipos de dados que podem ser atribuídos a uma variável em JS são os mesmos dos quais tratamos nos tipos primitivos com adição dos Arrays que trataremos em um post futuro.

Como declarar uma variável?

Existem algumas formas que uma variável pode de ser declarada, certas pequenas regras que precisam ser lembradas quando você for criar as suas.

Variáveis são case-sensitive

E o que isso quer dizer? Quer dizer que se você declarar uma variável instrumento ela vai ser diferente de uma variável Instrumento ou seja, ela diferencia maiúsculas e minúsculas na sua nomeação, minhaVariável ≠ minhavariavel

Variáveis aceitam nomes com números

Desde que se precedida de pelo menos uma letra, é possível criar uma variável camisa9 mas não uma 9camisa e vamos combinar que pra leitura é bem melhor né

É possível utilizar caracteres especiais

Mas não é indicado, embora os caracteres diferentes do tipo UTF-8 (esses que você tá acostumado a ver em qualquer texto) sejam muito bem interpretados por navegadores é meio chato você ter que procurar algo que não é necessariamente acessível ao seu teclado quando se está tratando de variáveis, então nada de usar 💩 como nome de variável ok?

É possível utilizar _ e $ para nomear variávels

Realmente há quem goste de usar esses dois caracteres para simbolizar as variáveis em JS tanto no começo quanto para separar palavras, mas isso vai de gosto e de organização de estilo de código.

Mas Mitrut, vi um pessoal falando que pode se declarar uma variável com o prefixo var e você utilizou let nos seus exêmplos... como isso funciona?

Ótima pergunta, e é por isso que iremos falar da diferença entre let e var.

let vs. var vs. const

Um conceito que é preciso entender antes de se entender o que difere um 'let' dum 'var' e duma 'const ' se chama ESCOPO.

Escopo é o limite do universo no qual as suas variáveis e funções existem. Existem os escopos globais, de bloco ou de função.

O que isso significa na prática? Bom, quando você cria uma variável let ao invés de uma var, a let é limitada ao seu bloco ou função, seu valor não pode ser acessado fora do bloco de código no que foi criada.

Ou seja: Como você pode ver, ao se usar o console.log para verificar os valores do lado de FORA do bloco do for, foi possível pegar o valor de i. de precoDescontado e de precoFinal, afinal var torna-se escopo global.

Se fosse com let, seria o seguinte:

Você pode ver que tivemos ❌ ReferenceError: i is not defined, ou seja, ele não encontrou o valor da variável pois variáveis com let pertencem somente ao universo do bloco que foram criadas, nesse caso, somente ao loop do for.

E se for const?

Como já falamos antes, const vem de CONSTANT ou seja, seu valor se mantém constante durante o tempo de execução do seu bloco e não pode mudar, logo, acima você pode ver que se tentar haver uma redesignação do valor pré determinado haverá um erro que pode ser detectado pelo seu linter.

Mas isso também não significa que seu valor não possa ser alterado, quer ver? Recapitule nosso artigo sobre objetos e tudo ficará bem claro:

Não é difícil, mas tá... agora aqui no fim do post, qual usar e quando? Minha recomendação é sempre usar const a não ser que você tenha absoluta certeza que o valor precisa ser alterado, ai você let- o var pode ser deixado de lado por hora a não ser que seja extremamente necessário, visto que seu escopo é muito aberto.

E é isso pessoal, em breve virá mais um post pra vocês, onde vamos falar sobre matemática e operadores.

Links e Fontes

▶ 🔗 Boa e Velha MDN

▶ 🔗 Tyler McGinnis Blog

▶ 🔗 CONST-LET-VAR

▶ 🔗 Acompanhe as lives do POKEMÃO!

E mais

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

▶ Tome vacina. Não existe tratamento precoce, Fora Bolsonaro.

▶ Não caia em papo de dev coach nóia.

#002 Basicão do JS: Tipos de dados em Javascript - parte 2: Objects

Wellington Mitrut — Mon, 25 May 2020 02:50:37 +0000

Photo by Moises Alex - @arnok peguei lá no Unsplash

Semana passada (ou alguns dias mais) eu falei aqui sobre os primitivos básicos de JS, se você não leu, é essencial que dê uma conferida antes de prosseguir nesse artigo pois lá cobrimos as propriedades essenciais para começar a entender estruturas de dados em JS, você pode acessar clicando no link abaixo.

#001 Basicão do JS: Tipos de dados em Javascript - parte 1: Primitivos

Wellington Mitrut ・ May 25 '20 ・ 7 min read

#javascript #beginners #frontend

Quero começar este post agradecendo o Leonardo Saraiva, que enviou pull request corrigindo algumas coisas do último texto, se você ver algum erro aqui, faça como ele e manda um PR lá!

Objetos

Se você está começando agora e não tem noção alguma do que seja, talvez você olhe e pense: "Bom, objetos são coisas que estão ao nosso redor e inanimadas". De certo modo você está certo, a abstração pro conceito de objeto em programação passa por esse caminho.

Na sua mão muito provavelmente você está segurando um objeto enquanto lê esse artigo, e o que esse objeto tem? Atributos: Marca, cor, tamanho, memória, versão do sistema e assim por diante.

O fusquinha amarelo

Eu sempre gosto de contar uma historinha nos posts e esse não poderia ser diferente, vamos trazer pro mundo real. Até 2016 eu era proprietário de um belo, beberrão, barulhento e confortável fusca amarelo 1975, motor 1500, movido a gasolina - semelhante ao fusca que ilustra o início deste post.

Tive muitas aventuras com este fusca e também já tive que empurrá-lo (e não foram poucas vezes) abaixo de chuva.

Pois bem, se você percebeu, o primeiro parágrafo desta sessão descrevia superficialmente o fusca, não seria necessário colocar fotos dele aqui pra entender o conceito mas sou da política de que quanto mais mastigada a explicação, melhor.

Objetos em JS

Em outras palavras, o fusca(e qualquer outro carro) pode ser abstraído como um OBJETO. Não só do ponto de vista físico mas do ponto de vista de programação, quer ver?

Só que no nosso caso, ao invés de atributos físicos, temos atributos como os primitivos que citamos no artigo anterior: strings, booleans e numbers. Isto posto, podemos dizer que um objeto é uma coleção de valores. Uma notação de chave (key) e valor (value).

Simples né? Então tendo um objeto carro eu consigo acessar seus valores como abaixo

Notações

"Então, quer dizer que se eu usar . e [ ] chamando a propriedade é a mesma coisa?"

Sim. Mas nem sempre. Se acostume que essa é a máxima de JS.

Na linha 7, o valor vai voltar undefined por que não existe ´chave´ em ´carro´ e na linha 8, estamos atribuindo o valor de chave à interpolação quando chamamos o objeto carro, sendo o valor de chave ´cor´, então o JS vai procurar um atributo ´cor´ dentro do objeto ´carro´ - retornando assim o valor AMARELO.

Manipulando objetos

Como você pode notar, é fácil demais acessar dados em JS, dessa forma podemos ler e brincar um pouco com as propriedades que existem

Vamos pegar o nosso fusquinha acima e descobrir os métodos do Javascript.

Entries

Com o método entries, ao passar nosso objeto, ele irá retornar um array com todos o dados, ou seja, você pode fragmentar seu objeto em vários pequenos objetos que possuem a chave e o valor do objeto original separados.

Keys

Com o Keys, você pega justamente as CHAVES do objeto, ou seja, os atributos que compõem nosso objeto.

Values

Values, por sua vez retornará os VALORES atribuídos a estas chaves anteriormente citadas.

Delete

Com o método delete é possível se deletar o valor de um objeto.

Assign

Se com delete eu posso deletar atributos, com assign eu consigo adicionar novos atributos:

Sim, eu vendi o fusca - sdds.

Arrays e Objetos

Arrays merecem um (ou mais) posts exclusivos para eles e é um dos assuntos que mais estou ansioso para falar aqui. Acompanhe os posts, compartilhe e chame os amigos pra participar. Para o próximo post da série estou planejando falar sobre VARIÁVEIS.

Links

Não por menos, abaixo seguem alguns links, como sempre:

▶ 🔗 O meu amigo Willian Justen ta fazendo uma série de vídeos sobre Typescript

▶ 🔗 Se você é da região de Curitiba ou São Paulo e tá desempregado, a galera do Boticário ta contratando devs:

Senhora Capivara

@capiconf

Vagas citadas pelo @fabiorogeriosj para SP e Curitiba:

👉Front End Developer bit.ly/3efKHxV
👉Back End Developer bit.ly/3g73ZHu
👉Back End Developer Sr. (Integração)bit.ly/2LMsEmF

Por favor compartilhe com RT para q essas vagas cheguem a mais pessoas

17:46 PM - 20 May 2020

▶ 🔗Acompanhe as lives do POKEMÃO!

E mais

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.

#001 Basicão do JS: Tipos de dados em Javascript - parte 1: Primitivos

Wellington Mitrut — Mon, 25 May 2020 02:27:53 +0000

É de tipos de dados mas não é necessariamente ESSE tipo de dados que vamos falar hoje - Acervo Pessoal

Fala galera, decidi utilizar a quarentena (e o desemprego) pra criar alguns conteúdos - a começar por JS mais purão básico, pra você que nunca teve contato com programação e/ou ta iniciando na faculdade, pra quem ta aí batendo cabeça pra entender como tudo funciona e até alguns conteúdos mais 'divertidos' pra quem já entende um pouco.

Esse tempo de quarentena me fez relembrar um pouco de como foi meu começo e de como as coisas não eram claras por algum motivo - eu não era um mal aluno, tirava boas notas na faculdade, mas não necessariamente estava aprendendo no começo.

Eu vou tentar criar e abstrair estes conceitos da mesma maneira que eu gostaria que tivesse sido ensinado pra mim lá nos idos de 2011 quando iniciei a faculdade e meu entendimento de programação era talvez até menor que o seu.

Eu não sei quanto tempo isso vai levar pra acabar, nem quantos posts eu vou escrever pra englobar tudo que imagino ser o 'básico'. Se você estiver procurando algo mais avançado ou quer dar um mergulho mais profundo sem me esperar, eu indico o curso JAVASCRIPT NINJA do Fernando Daciuk e o livro Estruturas De Dados E Algoritmos Com Javascript da Loiane. Ambos são excelentes profissionais e amigos que tenho profundo respeito - os conteúdos deles já estão mais que revisados e consolidados, então pode adquiri-los sem medo.

A ideia principal da série é criar um conteúdo fácil e de linguagem acessível a qualquer um que tenha um navegador e que possa ler este conteúdo.

Um pouco de história

O Javascript, embora tenha mais idade que alguns leitores, é uma linguagem de programação relativamente jovem, lá em 1994 muita coisa acontecia - Kurt Cobain morria, o Brasil conquistava o tetra, Mandela era eleito, Tom Hanks ganhava Oscar com Forrest Gump e o Brendan Eich criava o JS.

Photo by FIFA

É impraticável pensar a internet de hoje sem o JS, muita gente pode tentar reproduzir com outras linguagens, mas a base de tudo é o JS. A internet, o conceito de site, de aplicações, tudo isso veio antes, mas o MUNDO como conhecemos hoje seria consideravelmente diferente sem o JS.

O javascript é uma linguagem multiparadigma, ou seja, existem muitas formas distintas de se trabalhar com ela: orientada a eventos, imperativa, funcional e o diabo a 4 - mas isto é algo que podemos tratar num post (ou mais) futuro.

Como toda linguagem de programação, o Javascript tem seus tipos de dados que pode ser divididos em dois 'grupos', Objects e os chamados de PRIMITIVES - só que pra entende-los antes vamos entender como funciona a tipagem em JS.

Tipagem dinâmica

Tipagem é o ato de você atribuir a um elemento abstrato um formato de dados. Se dizemos que numa equação x = 1, logo, x é um elemento do tipo número. Entende onde quero chegar? Ainda não se trata de JS, mas entender este conceito é essencial.

O JS permite você atribuir diversos tipos de valor a uma variável sem que isso seja fixado, uma variável pode em um momento ser do tipo a e logo depois posso atribuir um tipo b a ela. Isso pode ser bom como pode ser ruim. Vejamos abaixo como isso funciona:

Exemplo de tipagem dinâmica

Essa tipagem dinâmica pode parecer um tanto confusa e algumas pessoas realmente não gostam, criam coisas como o Typescript e o Flow mas com o tempo você irá se acostumar e entender um pouco mais. Existem momentos em que ambas as abordagens podem ser úteis e tem seus fãs e detratores, mas no final é tudo JS.

Toda vez que você diz que Typescript é uma linguagem, um panda morre.... Não mate os pandas =/ pic.twitter.com/5veqRfkUU6
— Willian Justen (@Willian_justen) May 11, 2020

Isto posto, vemos novos nomes ali, Number, Boolean e String. Estes são os tipos primitivos do JS.

Primitives

No exemplo abaixo temos os principais tipos em JS e uma atribuição de exemplo pra cada:

Primitives em JS

Para um melhor entendimento decidi elencar do mais simples até o mais complexo de explicar, então vamos lá:

Boolean

Se você já teve alguma noção básica de computação sabe que computadores trabalham lá em sua camada mais simples com 0 e 1, é o sistema binário. Basicamente no sistema binário 1 quer dizer LIGADO e 0 quer dizer DESLIGADO - imagine uma lâmpada, um único LED, ele tem apenas 2 estados: ligado e desligado. A combinação de bits ativos e inativos que gera os cálculos complexos e a computação civil como um todo.

Agora que você entendeu este conceito, no javascript podemos trazer esse mesmo sistema lógico para os dados de tipo boolean, algo é (TRUE) ou não é (FALSE).

Deste modo, no nosso exemplo acima, eu digo para minha variável isMusicPlaying que ela é TRUE, que é verdadeira, que sim - há música tocando.

Exemplo de Boolean

Um exemplo de uso? Imagine que justamente criamos um player de música tal qual o Spotify e queremos saber se uma música está sendo tocada, no caso, implementamos toda uma estrutura que irá no final resultar em atribuir a isMusicPlaying o valor true ou false para assim fazermos outras funções e implementações do nosso player.

Number

Number é justamente um número.

Eu sei o que você pensou:

"Nossa, gênio, como eu não havia pensado nisso, alguém dá um desses prêmio fancy pro rei da programação aqui!"

Mas calma lá, diferente de algumas linguagens de programação, JS não precisa de um tipo específico para inteiros, todo número é um number. Todo número inteiro, negativo, positivo, de ponto flutuante (os lembra dos números racionais? Achou que nunca ia utiliza-los né).

Então desde -0.243423415 ao 3 estão compreendidos neste tipo.

PORÉM, uma coisa importante é que as vezes o JS é meio doido e pode ter seus problemas. E é aqui que eu apresento a vocês um problema clássico do tipo number em JS:

Exemplo de Number

Sim.

0.1 + 0.2 = 0.3 - mas nem sempre.

Pra isso a gente tem que usar artifícios como o método toFixed() e o toPrecision() e isso serve para outros casos também, como arredondar um dado importante - mas que fique claro, você só vai usar isto pra arredondar se o seu caso for este, se esse for o tipo de precisão que você precisa.

String

A maneira mais simples mas não a mais correta de explicar o do que uma String se trata é esta: é um texto.

Agora, se quisermos realmente nos aprofundar, o conceito pode ser melhor definido como uma sequência de caracteres. Você pode representar uma string com aspas simples ('') ou com aspas duplas("").

Exemplo de String

É possível 'navegar' em uma string utilizando programação. Por exemplo, eu posso recuperar o valor de um caracter com base no índice que ele ocupa nela. Eu consigo, via linguagem de programação saber qual é a posição (índice) de uma letra dentro da string, sabendo que os índices em JS começam com 0, na nossa variável bandName, o valor do índice 2 é s e assim por diante.

Diferente de linguagens como C, strings em JS são imutáveis. Isto significa que: uma vez criada a string, não é possível modificá-la. Entretanto, ainda é possível criar outra string baseada em um operador na string original. Por exemplo:

Uma substring da original a partir de letras individuais ou usando String.substr().
Uma concatenação de duas strings usando o operador (+) ou String.concat().

Undefined

Undefined é algo que não teve seu valor definido, algo sem um valor, não é nulo, não confunda. O undefined existe mas ainda não teve seu valor definido.

Null

Nulo por sua vez é um valor inexistente. Em ciência da computação, um valor nulo representa uma referência que aponta, geralmente de maneira intencional, para um objeto ou endereço de memória inválido ou inexistente. O significado do valor nulo varia entre as implementações das linguagens.

Imagine sua aplicação como se fosse uma caixa, enquanto undefined é algo que ainda não recebeu um valor mas está la dentro, já o nulo não existe nesse universo da casa.

Homem Formiga

Se as primitivas fossem Vingadores, null seria o Homem-Formiga quando ficou no reino quântico. Ele é um valor que sabemos que está em algum lugar mas também sabemos que ele não existe naquele universo da Guerra Infinita.

Symbols

Símbolos são relativamente novos em JS e confesso serem um tanto mais complexos de explicar que os anteriores. Mas é um tipo também imutável. Na maioria das vezes é possível utilizar-se uma string ou um number no lugar do Symbol, com a diferença que se precisarmos definir um valor globalmente. Futuramente quando abordarmos funções e objetos isto ficará mais claro.

Com isto posto, finalizamos este primeiro post sobre o Basicão do Javascript, semana que vem iremos abordar OBJECTS.

Não por menos, abaixo seguem alguns links, como sempre:

▶ 🔗 O meu amigo Willian Justen ta fazendo uma série de vídeos sobre Typescript

▶ 🔗 Se você é da região de Curitiba ou São Paulo e tá desempregado, a galera do Boticário ta contratando devs

▶ 🔗Acompanhe as lives do POKEMÃO!

E mais

▶ FIQUE EM CASA, COMPRE LOCAL, LAVE A MÃO E USE MÁSCARA.

▶ Você não é obrigado a ser produtivo neste momento, cuide dos seus

▶ Leia, e leia muito se possível. Mas também se respeite e descanse.