JavaScript

10 Truques do NPM – Você conhece todos?

Olá Web Developers!
Se você trabalha com JavaScript, provavelmente já teve que usar o NPM. Mas normalmente as pessoas usam essa ferramenta apenas para baixar bibliotecas ou frameworks.

Vamos ver alguns truques que podemos fazer com o NPM.

1 – Crie ferramentas executadas diretamente da linha de comando

Com o NPM nós podemos criar ferramentas executadas diretamente do terminal inteiramente com JavaScript.
Já tivemos um post aqui ensinando como fazer isso, que você pode conferir neste link.

2 – Atalhos para os comandos mais comuns

É sempre bom saber o nome curto de um comando, permitindo escrever menos:

Comando Atalho
install i
list ls
test t
--global -g
--save -S
--save-dev -D

3 – Abrir o site do projeto

O comando home permite abrir o site de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o site do jQuery em seu navegador:
$ npm home jquery.

4 – Abrir o repositório do projeto

O comando repo permite abrir o site do repositório de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o repositório do lodash em seu navegador:
$ npm repo lodash.

5 – Procurar por pacotes não declarados no package.json

É um grande problema quando alguém esquece de indicar uma dependência no package.json. Mas não tem problema, pois com o seguinte comando você poderá ver quais são os pacotes utilizados no seu projeto que não estão listados:
$ npm prune

6 – Inicie um pacote rapidamente

O comando $ npm init nos permite iniciar um pacote, criando o arquivo package.json de acordo com certas respostas que damos às perguntas feitas.

Mas você pode pular as perguntas, fazendo com que o arquivo package.json seja criado imediatamente. Basta adicionar -y ao comando:
$ npm init -y

7 – Analisar dependências desatualizadas

Também podemos verificar se há dependências desatualizadas em nosso projeto. Basta executar o comando
$ npm outdated

8 – Trave a versão de suas dependências

Se quiser travar a versão das dependências do seu projeto, simplemente execute o comando
$ npm shrinkwrap

Isso irá criar um arquivo npm-shrinkwrap.json. Ao instalar as dependências do projeto, as versões definidas neste arquivo que serão levadas em consideração.

9 – Instalação de produção

No package.json nós podemos salvar as dependências em dependencies e devDependencies. Esta última é a lista de dependências usadas apenas durante o desenvolvimento.

Caso você não vá desenvolver nada onde está instalando seu projeto, com o seguinte comando é possível instalar as dependências do projeto, ignorando as dependências de desenvolvimento:
$ npm install --production

10 – Lista de pacotes instalados

Podemos ver uma lista de pacotes instalados com o comando:
$ npm ls --depth 0

Esse comando é ainda mais útil quando queremos saber quais módulos globais possuímos instalado em nossa máquina:
$ npm ls -g --depth 0

Conclusão

O NPM é uma ferramenta que muitos usam mas poucos sabem usar totalmente o seu poder. Para mais informações, confira nosso Curso de NPM.

Criando módulos globais do NPM

Olá Web Developers!

Que tal criar seus próprios programas que rodem diretamente do terminal usando JavaScript?
Com o NPM é muito simples de se fazer isso!

O que é NPM?

Se você trabalha com JavaScript, provavelmente já teve (ou terá em algum momento) que usar o Node.js. O gerenciador de bibliotecas mais comum é o NPM, que também pode servir para outras coisas, como mostramos em nosso curso de NPM.

O que são módulos globais?

Além de códigos de terceiros, o NPM também nos permite instalar em nossa máquina programas que são executados a partir do terminal feitos inteiramente com JavaScript.

Esses programas, que podem ser executados pelo terminal de qualquer parte de seu computador, são chamados de módulos globais.
Os mais comuns são ferramentas como o Angular CLI, que nos ajudam a criar e gerenciar projetos Angular.

Imagine então poder criar um programa feito com JavaScript que pode ser facilmente instalado com o NPM e executado pelo terminal?
Você pode criar coisas como um servidor, um conversor de arquivos, um automatizador de tarefas, etc.

São várias possibilidades que vão depender da sua imaginação. Vamos criar um exemplo bem simples em 5 passos!

1 – Crie seu código principal

Vamos começar pelo código que será executado. Será bem simples: ele irá imprimir o texto “Olá Web Developers!”.

Para já deixarmos tudo organizado, vamos criar um diretório para nosso módulo. Eu vou chamar de meu-modulo.

Dentro deste diretório crie um outro diretório para guardar seus códigos. Isso não é obrigatório, mas nos ajuda a deixar tudo mais organizado.
Vamos criar um diretório chamado lib.

Dentro de lib vamos finalmente criar o arquivo que terá nosso código. Você pode dar qualquer nome. Vamos chamá-lo de index.js.
Terá o seguinte código:

function ola(nome){
    const texto = `Olá ${nome || 'web developer'}!`;
    console.log(texto);
}

exports.ola = ola;

Criamos um arquivo comum para Node.js. Temos uma função ola() que ao ser executada imprime “Olá web developer!” caso nenhum nome seja passado. Se tivermos algum nome, ele substituirá “web developer”.

No final exportamos esta função para poder utilizá-la em outro arquivo.

2 – Prepare o seu módulo

Vamos preparar nosso módulo agora.
No diretório raiz (meu-modulo), execute o comando $ npm init -y. Isso irá criar automaticamente o arquivo package.json para nós. Ele é muito importante para a sua biblioteca saber o que ela precisa instalar e os comandos disponíveis para serem executados.

Você pode editar o package.json para arrumar algumas coisas e adicionar mais informações. Ele ficará com o conteúdo parecido com o mostrado a seguir:

{
  "name": "meu-modulo",
  "version": "1.0.0",
  "description": "meu modulo global",
  "main": "./lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hanashiro",
  "license": "MIT"
}

3 – Crie os arquivos do módulo global

Agora chegou o momento de criarmos o arquivo que o terminal irá executar quando chamarmos nosso programa.

Primeiro crie um novo diretório chamado bin dentro de meu-modulo. Lembrando que isso não é obrigatório, estamos seguindo isso para tudo ficar mais organizado.

Dentro de bin crie o arquivo meu-modulo-legal.js com o seguinte conteúdo:

#!/usr/bin/env node

const ola = require('../lib/index.js').ola;
ola();

Nós simplesmente importamos a nossa função e a executamos. O que temos de diferente aqui é a primeira linha com o #!/usr/bin/env node.
Esta linha é fundamental para que o NPM gere um executável corretamente.

Lembre-se que este arquivo meu-modulo-legal.js que será executado.

4 – Configure a instalação global

Precisamos indicar qual o nome do comando ficará exposto para ser chamado no terminal e qual arquivo este comando deverá executar.

Para isso, adicione o seguinte código ao package.json:

{
    ...
    "bin": {
      "diga-ola": "./bin/meu-modulo-legal.js"
    },
    ..-
}

Isso permitirá que quando a gente abrir o terminal, possamos executar o comando diga-ola, e ele irá executar o arquivo meu-modulo-legal.js.

Lembre-se que as pessoas podem acabar instalando o seu módulo localmente. Se a sua ferramenta for algo que é melhor utilizada como um módulo global, você pode adicionar a seguinte linha ao package.json:

{
    ...
    "preferGlobal": true,
    ..-
}

Com esta linha o usuário ainda poderá instalar o seu módulo localmente, mas ele receberá um aviso indicando que é melhor instalar globalmente.

5 – Instale seu módulo globalmente para testá-lo

Agora só falta testarmos. Acalme-se, pois você não precisa publicar o seu módulo em algum repositório como o NPM ou Github para poder fazer o teste.

Para instalar globalmente o seu módulo, basta executar o comando npm install -g junto com o caminho do diretório que criamos (meu-modulo).

Ex: $ npm install -g C:\Users\seu-usuario\Desktop\meu-modulo

Ao instalar você já estará pronto para executar diretamente de seu terminal (de qualquer parte de seu computador) o comando $ diga-ola.

Extra: Parâmetros

Algo muito comum em programas executados pela linha de comando é permitir que a gente passe alguns parâmetros para configurar a função que será executada.

Lembra que nossa função permitia receber um nome? Pois vamos permitir que o usuário escreva o nome que ele quiser pela linha de comando.

Mude o arquivo meu-modulo-legal.js para ficar da seguinte maneira:

#!/usr/bin/env node

const args = process.argv.splice(process.execArgv.length + 2),
    nome = args[0];

const ola = require('../lib/index.js').ola;
ola(nome);

Primeiro pegamos os parâmetros passados no comando, e então pegamos o primeiro parâmetro e jogamos em uma constante chamada nome, passando-a para a nossa função ola().

Agora instale o seu módulo novamente para que o módulo instalado globalmente seja atualizado.

Se executar $ diga-ola você terá a resposta “Olá web developer!”, mas se executar $ diga-ola TreinaWeb terá “Olá TreinaWeb!”.

Conclusão

Agora você já sabe como criar seus próprios módulos globais, permitindo criar ferramentas com JavaScript e executá-las diretamente do terminal.

Agora basta você publicar no repositório do NPM para que outras pessoas possam usar.

Criou alguma ferramenta? Nos conte aí nos comentários!

TW Entrevista 12: Loiane Groner

Hoje trazemos para vocês uma entrevista com a Loiane Groner, que já escreveu diversos livros publicados internacionalmente e possui os títulos GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional).

Se você ainda não viu, o Diego Eis foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Me chamo Loiane, trabalho há 10+ anos na área de TI como desenvolvedora, formada em Ciência da Computação, natural do Espírito Santo, porém nos últimos 9 anos morei em São Paulo (2 anos em Campinas e 7 na capital). Trabalho atualmente no Citibank como desenvolvedora e analista de negócios, e recentemente me mudei para os Estados Unidos.

Tenho um canal no Youtube onde publico tutoriais e cursos sobre desenvolvimento, já publiquei alguns livros em inglês pela Packt (editora Novatec traduziu o último livro lançado para o português) e já tive a oportunidade de palestrar em eventos no Brasil e EUA.

Quando e como você começou a se interessar pela área?

Essa parte é engraçada porque tudo foi uma decisão de qual curso fazer vestibular. Quando era adolescente sempre quis ser advogada/juíza, e perto do vestibular decidi fazer Ciência da Computação por gostar mais de responder perguntas e estudar a parte de exatas pro vestibular.

A decisão pelo curso de computação foi simplesmente por sempre ter sido curiosa por computadores (meu primeiro computador vivia no conserto por tentar comandos na linha de terminal, vivia estragando o sistema operacional por conta disso).

Naquela época pouco se falava sobre cursos de exatas e as informações não eram tão fáceis assim como hoje, onde temos quase tudo disponível na internet. Entrei na faculdade sem saber o que era algoritmos, custei a entender lógica de programação no primeiro semestre, mas depois me apaixonei e hoje não me arrependo da decisão.

Como foi seu primeiro trabalho na área?

Arrumei o primeiro trabalho/estágio ainda na faculdade, quando estava no segundo ano (quarto semestre). A faculdade tinha (até hoje tem) parceria com empresas e uma delas precisava de dois estagiários. Me inscrevi junto com um amigo e a coordenação do curso nos ajudou a conseguir as vagas.

Sabia apenas o básico do básico de Java (controles de fluxo e o básico de Orientação à Objetos). No estágio deram um treinamento pra gente de XML, SQL, controle de versão, web services e outros conceitos básicos.

Depois foram passando tarefas de desenvolvimento básicas e à medida que ia aprendendo, iam passando tarefas mais complexas. Trabalhei 2 anos nessa empresa. Me sinto muito sortuda pois tive dois mentores excelentes, que foram pacientes e me ensinaram muito. Trabalhei com Java backend, um projeto Java desktop (Swing), projetos Java web (com JSON e Ajax, que na época era super novidade, onde foi meu primeiro contanto com web também), relatórios, SQL e até um projeto .NET.

Como é a experiência como escritora? Ainda mais de livros que são distribuídos internacionalmente. Tem algum conselho para quem quer começar a escrever?

Comecei em 2009, quando publiquei meu primeiro post no blog loiane.com. Criei o blog para mim mesma, uma espécie de documentação e notas para que eu pudesse usar depois como referência e documentar o que estava escrevendo.

Depois que comecei a trabalhar numa multinacional e comecei a usar inglês no dia a dia, senti a necessidade de praticar mais a parte escrita, e como forma de praticar, criei um blog em inglês também. Escrevia os posts (tutoriais) em inglês e depois reescrevia o mesmo em português.

Depois de alguns anos, o blog começou a ganhar mais visibilidade e a editora entrou em contato com o convite para escrever um livro. Nunca imaginei que fosse ter tal oportunidade. A editora gostou da didática e depois foi convidando para escrever outros títulos também. Já convidaram até por conta de um repositório de exemplos no github.

Não tenho palavras para descrever o sentimento de ver uma pessoa lendo um livro seu e ver que aprendeu algo lendo o que você escreveu. É muito gratificante ver pessoas de diferentes partes do mundo consumindo seu conteúdo. Tenho guardado algumas teses de mestrado de universidades européias e canadenses que usaram algum livro meu como referência – isso não tem preço pra mim.

Os livros também foram incentivo para criar o canal no youtube. Como foram escritos em inglês, começaram a me puxar a orelha por não ter criado conteúdo em português, e aí decidi começar a fazer vídeos dos assuntos em português. É legal que são duas experiências bem diferentes: criar conteúdo escrito e em vídeo.

Algumas dicas:

  • Comece escrevendo para você mesmo. Hoje em dia existem diversas ferramentas que você não precisa se preocupar com domínio, hospedagem, etc. Publique algum tutorial ou algo que seja útil para você e depois compartilhe nas redes sociais (se te ajudou, pode ser que ajude outras pessoas também). Com o tempo você toma gosto e não consegue parar! rs
  • Algumas editoras pedem para ver conteúdo escrito já publicado (blog, etc) para ter uma noção do estilo de escrita, então a primeira dica é bem valiosa! rs
  • Você não precisa ser “O” expert no assunto para escrever. A motivação é sempre por compartilhar conhecimento. Até porque a gente aprende muito sobre o assunto enquanto escreve.
  • O público gosta muito de exemplos práticos. Mas é sempre bom colocar um pouco de teoria também, pois teoria é sempre a base e vai te ajudar a dar mais fundamento também.

Você é GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional). Como conseguir esses títulos, quais as responsabilidades para mantê-los e que dicas dá para quem quer consegui-los?

Esses títulos são títulos de reconhecimento dados pelas respectivas empresas/comunidades a membros das comunidades que compartilham conteúdo sobre produtos dessas empresas.
Geralmente são pessoas ativas na comunidade que compartilham posts de blog, cursos, publicam livros, apresentam palestras em eventos, contribuem em projetos open-source, etc. A responsabilidade é continuar fazendo o que já vinha fazendo antes de receber o título, ou seja, compartilhar conhecimento porque gosta de fazê-lo!

Não tem uma receita de bolo para conseguir o título. Geralmente a pessoa já é um GDE ou MVP mesmo sem o título. Acaba vindo naturalmente. Esse post é bem legal sobre o assunto e pode ser aplicado a outros títulos também:

https://medium.com/@frosty/preparing-to-become-a-gde-752b551c88df.

Participar de comunidades é muito gratificante. É uma forma de aprender junto. Cada um compartilha o pouco que sabe e você aprende com outras pessoas que também estão compartilhando o que aprenderam. Além disso, participar de comunidades é uma ótima maneira de aumentar o networking. Já conheci várias pessoas em eventos, tive oportunidade de conhecer pessoalmente pessoas que apenas conversava pela internet e fiz amizades!

Quando estuda algo novo, qual a sua maior dificuldade e o que faz para contornar?

Sempre tento consumir diferentes tipos de conteúdo. Se for um framework novo por exemplo, primeiro acesso a documentação, e sigo os tutoriais. Gosto muito de ler livros também, pois fornecem uma base teórica muito boa.

Pra mim é importante saber usar uma ferramenta/framework, mas é importante saber como funciona também – e a base teórica vai me fornecer isso – saber como funciona ajuda muito nos casos complexos, e vai te ajudar a se diferenciar de outros profissionais também.

E cursos online: sempre tem algo ou um ponto de vista diferente que um instrutor pode te ensinar. Dificilmente consumo um curso ou leio um livro e saio sem aprender nada – mesmo achando que já saiba a tecnologia. Sou assinante de 2 portais de cursos e na empresa que trabalho também tem um grande portal de cursos liberado para os funcionários. E se for uma dúvida pontual, posts de blogs ajudam muito, principalmente com exemplos práticos também!

Resumo: estudar com diferentes formas de conteúdo sempre ajuda. Mas é importante saber o que funciona para você, pois cada um tem uma forma que aprender mais fácil.

Se pudesse falar com você mesma no começo de sua carreira, o que gostaria de falar? Teria algum conselho? Algum medo que gostaria de ter encarado ou alguma situação que poderia ter evitado?

Todos nós temos medo de algo, medo de tentar por achar não ser bom o suficiente ou achar que não tem mais idade pra isso (ou é muito novo). Não deixe de tentar por medo ou insegurança. O “não” você já tem.

E tenha paciência. Muita paciência. Algumas coisas na vida demoram, mas não perca o foco ou determinação. E as coisas acontecem para diferentes pessoas em diferentes momentos. Você vai ouvir muitos “nãos”, mas não deixe que isso te impeça de fazer algo ou de tentar novamente.

O que você considera que caracteriza um desenvolvedor raiz e um desenvolvedor Nutella?

Já vi alguns memes sobre o assunto. Mas acredito que todos nós nos dias de hoje somos uma versão híbrida. Hoje temos muitas ferramentas ao nosso dispor para solucionar problemas de forma mais fácil e rápida. Independente de título (programador, desenvolvedor, software engineer, etc), nosso trabalho é resolver problemas usando tecnologia, de forma a entregar a melhor solução para o cliente.

Como já disse anteriormente, aprenda a base, a teoria. Sim, é chato, é demorado, ir direto pra prática é muito mais legal. Mas depois tudo se torna mais fácil. Seja primeiro um dev raiz, para que você possa se tornar um dev nutella mais tranquilo e mais produtivo!

Como você explica a sua profissão para as pessoas que não são de TI?

Essa parte é sempre complicada. Geralmente falo que desenvolvo sistemas, que é basicamente falar para o computador o que precisa ser feito, uma sequência de passos, como uma receita de bolo. E existe uma forma especial de passar essa receita para o computador, que é através de uma língua que nós (humanos) podemos aprender que o computador também entende.

Escrevendo essa receita nessa língua, o computador entende o que precisa fazer e consegue executar os passos muito mais rápido que nós.

Fique Ligado!

Para seguir a Loiane Groner:

TW Entrevista 11: Diego Eis

Olá, Web Developers!

Hoje trazemos para vocês uma entrevista com o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil.

Se você ainda não viu, o Jaydson Gomes foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Sou de São Paulo, tenho 34 anos e faz um tempão que trabalho com Internet e coisas relacionadas. Atualmente trabalho na Easynvest como Product Manager, mudando o jeito com que as pessoas lidam com investimentos e dinheiro.

Quando e como você começou a se interessar pela área?

Eu sempre me interessei por internet e nunca fiz outra coisa. Meu primeiro computador veio de uma escolha difícil: Ir para a Disney na formatura de 8 série ou ter um computador. Naquela época o dólar era 1 pra 1 e o valor da viagem era o mesmo de um computador. Minha mãe economizou o ano inteiro para eu ter a viagem, mas acabei querendo o computador. O recibo está guardado em algum lugar. Custou uns R$1000… Dinheirão na época. De lá para cá não fiz mais nada fora do mundo digital. E ainda cheguei tarde… Quase nem mexi no Windows 3.1, indo quase que direto pro Windows 95.

Como eu, meus amigos também estavam iniciando nesse mundo de ter computador e internet… No início queria o computador só para jogar… Me lembro até hoje eu tentando fazer rodar os vários disquetes do Golden Axe! Junto com os meus amigos, nós começamos aprender a mexer com HTML, depois que o CSS foi publicado, pulamos pro CSS, JS e assim por diante… O resto é história. 😉

Como foi seu primeiro trabalho na área?

Eu ganhei meu computador em 98 (quando me formei na oitava série). Fiquei 3 anos só brincando e aprendendo HTML e tudo mais. Quando me formei em 2001, arranjei um emprego de Assistente de Web Designer numa pequena agencia de publicidade. Fiquei pouco tempo lá, depois fui para uma empresa recém criada por amigos, chamada Atípico. Lá eu fiquei uns 5 anos. Depois abri minha própria empresa, chamada Visie (depois de 6 anos fui pra Locaweb, e depois de 5 anos na Locaweb fui para Easynvest).

Em 2003 eu abri o Tableless. Se eu me lembro bem o domínio era .kit.net (se alguém lembrar, vai entregar a idade), depois eu migrei para .cjb.net.. E pouco tempo depois, ganhei desse meu amigo, dono da Atípico, o domínio .com.br. Como naquela época (hoje ainda?) pra ter .com.br era necessário um CNPJ, como ele tinha uma empresa, ele me deu o domínio de presente. Presente nerd, né?! Faz tempo que não tenho contato dele… Se ele morrer, lascou… nem sei como faço pra ser dono do domínio. O.o

Voltando ao primeiro emprego… A maioria do trampo era implementação de site mesmo. Onmouseover direto no código HTML. Código JavaScript pra funcionar no IE e outro código pra funcionar no Netscape. Testes de layout em todos os IEs possíveis… Validação de HTML… e todas essas coisas legais que fazíamos antes do mercado front-end se tornar o que se tornou hoje. Naquele tempo era só criar um arquivo .html e começar o projeto. A grande dúvida era como iríamos chamar a pasta onde ia ficar as imagens (img, images, i…). Hoje você não começa nada sem ter que instalar um milhão de coisas na máquina. Mas desse mimimi todo mundo já tá cansado. 😉

Claro que sempre há a preocupação em entregar um produto de qualidade para o cliente. Mas você acha que na Easynvest, por mexer diretamente com o dinheiro das pessoas, acaba tendo mais pressão?

Com certeza. Não é simples você mexer com o dinheiro das pessoas, porque na verdade você não mexe com o dinheiro delas, você mexe com o futuro e os objetivos que ela quer alcançar com aquele dinheiro. Essa pressão existe em qualquer tipo de produto digital. E existe outros pontos que os Product Owners e Product managers precisam pensar, como ética, transparência, etc… São pontos que quase nunca falamos, mas que há momentos em que esses valores precisam ser contados ao pensar numa feature, mostrar ou não uma determinada informação, etc.

O Tableless é um dos sites mais importantes da comunidade brasileira de desenvolvimento web. Qual a sensação de ter tamanha responsabilidade e compromisso sobre algo tão importante para as pessoas?

Eu acho incrível ter criado um site onde os devs e outras pessoas me param nos eventos e outros lugares pra dizer que o site as ajudou na formação da carreira ou em algum problema especifico. Mas não é uma tarefa muito fácil. O site ocupa bastante tempo e é difícil encontrar pessoas realmente dispostas a ajudar. Mesmo assim, foi um marco pra o site quando eu abri para que outros autores pudessem escrever. Isso não ajuda o site a ter mais conteúdo, mas também ajuda a esses autores a expressarem sua opinião, a aprenderem a compartilhar conhecimento, a exporem seu trabalho etc… Foi o site que me trouxe até onde eu estou hoje e me sinto muito agradecido por conta disso.

Com a sua experiência com o tableless, palestras, trabalhos, treinamento de equipes, etc., o que você considera que mais falta em um profissional hoje em dia ? (como habilidades, atitudes e preparação para as mudanças)

Falta parar de pensar em código 100% do tempo. Eu bato nessa tecla o tempo inteiro. Seu trabalho está mais ligado a falar com as pessoas para conseguir resolver melhor os problemas do que ficar focado 100% do código. Quando um programador precisa fazer uma decisão importante de carreira, muitos acabam sucumbindo lá na frente, porque não “treinaram” antes esse relacionamento além código. Outro ponto é pensar no futuro. Quando eu escrevi um artigo falando que a profissão front-end como conhecemos hoje vai morrer, um monte de gente me criticou, mas com certeza eles não fizeram uma análise fria da sua profissão hoje e como ela é repetitiva, dispensável, sem propósito. Parece ser palavras fortes, mas você não muda sua vida nem a vida das pessoas fazendo crud entre API e interface. Acho que o profissional deve pensar em sua profissão de forma mais ampla, onde ele entende bem do negócio, mas também dos clientes, levando em consideração como sua relação com as outras pessas afeta a missão da empresa e seus objetivos pessoais.

Quando estuda algo novo, qual a sua maior dificuldade e o que faz para contornar?

Minha maior dificuldade é não poder contar com pessoas do lado para peguntar e tirar dúvida. Acho que é importante ter pessoas legais do seu lado para que você possa tirar dúvidas sempre que for necessário, sem medo de julgamentos ou etc. Hoje é quase que impossível você não conseguir encontrar respostas para qualquer tipo de dúvida técnica. Mesmo assim, sempre tem aquelas dúvidas onde alguém com mais experiência faz falta. Então, a dupla pesquisa + mentor é sempre a melhor saída.

Para quebrar o gelo

O que você considera que caracteriza um desenvolvedor raiz e um desenvolvedor Nutella?

Dev raiz escrevia código onde dava. Dev Nutella só escreve em editor que tem IDE escrito no nome. Dev raiz ficava horas procurando um cliente de FTP decente. Dev Nutella só sobe pra produção se tiver script de Build e tiver 3 ambientes de homologação. Dev raiz usa qualquer browser que tiver. Dev Nutella acha que abafa quando fala mal do IE. Dev raiz começa o projeto criando uma pasta com o index.html e entende que ele vai se tornar algo complexo lá na frente. Dev Nutella nem senta na cadeira se não encontrar a palavra NPM no ReadeMe do projeto.

Se estivéssemos em uma Matrix e você tivesse total controle dela, o que você faria?

Transformaria a Matrix inteira em Open Source, botava no GIT e já era.

Já usou seu conhecimento para resolver algo que tinha preguiça de fazer ou para trollar alguém? Se sim, o que?

Na época que o Bate-papo da UOL nasceu, eles não faziam validação do campo que você escrevia. Aí o que dava pra fazer: você manda um código HTML do tipo: <font style="font-family: webdings;">. Então, o texto ficava cheio de ícones e simbolos e etc… pra todo mundo na sala de bate papo.

Webdings

Aí você mandava um </font> no chat privado pra você mesmo. Todo mundo ficava sem entender nada, e você via normalmente os textos com as fonts. Era engraçado, mas durava só uns 30 segundos, porque ninguém conseguia mais entender e acabava saindo da sala. Hehehe.

Já “infectei” um cara mais velho na escola com um Trojan. Depois que ele instalou, eu ligava e desligava o monitor dele, abria o leitor de CD, abria programas, e essas coisas… mas tive que tirar porque ele ameaçou me bater no dia seguinte. Fazia scripts do autoexec.bat na escola para colocar mensagens quando o Windows estava ligando.

Script macro no word na biblioteca da escola para quando a galera abrir o word, ele fechar sozinho.

Fique Ligado!

Para seguir o Diego Eis:

TW Entrevista 10: Jaydson Gomes

Olá, Web Developers!

Hoje trazemos para vocês uma entrevista com o Jaydson Gomes, primo do Felipe Moura com quem fundou a Nasc e BrazilJS.

Se você ainda não viu, o Reinaldo Ferraz foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Meu nome é Jaydson Gomes e sou de Porto Alegre, cidade onde ainda vivo atualmente. Desde 2015 (https://jaydson.com/novos-rumos-2015/) me dedico 100% ao meu próprio negócio, a Nasc, empresa responsável, entre outras coisas, pela BrazilJS.

Quando e como você começou a se interessar pela área?

O primeiro video-game que tive foi um Atari, na época que o MasterSystem era o que existia de mais legal. Quando o Nintendo estava bombando, eu tive uma MegaDrive.

De certa forma entrei tarde na área. Foi só aos 16/17 anos que fui ter o meu primeiro computador (um belo K62 ❤️ com incríveis 16MB de memória RAM, puro luxo).

Meu primeiro contato com a área mesmo foi quando consegui meu primeiro emprego na empresa de um amigo. O job era montar e consertar computadores. Foi aí que aprendi toda a base de como as coisas funcionavam e logo me dei conta que eu não gostava muito de hardware. Então comecei lentamente a migrar para o desenvolvimento de software.

Um ponto importante é que esse processo foi lento, devido ao que mencionei acima. Eu nunca achei que seria capaz de entender como um computador funcionava e muito menos fazer software, parecia algo de outro mundo pra mim. Mas cá estou. 😀

Como foi seu primeiro trabalho na área?

Nessa empresa do meu amigo aprendi muito. Aprendi como não fazer muita coisa e também aprendi a base da computação.

Serei eternamente grato pela oportunidade que tive na época, foi um aprendizado para a vida. No primeiro emprego com carteira assinada eu fazia muita coisa na área de TI e tinha tempo para estudar e aplicar o que aprendi desenvolvendo pequenas ferramentas, isso também me ajudou bastante.

Somando essas duas experiências, consigo ver nitidamente o quanto amadureci em pouco tempo e o quanto isso contribuiu para a minha formação. Fazer experimentos é algo que ajuda muito e mantenho esse hábito até hoje.

Nesses anos de experiência, tem algo que você deixou de fazer por algum receio e que hoje enxerga que poderia ter sido uma grande oportunidade?

Uma das poucas coisas que deixei de fazer durante o caminho da minha carreira foi deixar algumas coisas que gostava muito de fazer de lado, justamente pelo receio de não conseguir me sair bem na área, acabei focando 100% em tecnologia. Não recomendo.

É preciso tempo para entender. Nossa sociedade é estruturada de maneira que apenas um caminho profissional deve ser seguido e assim somos doutrinados e condicionados. O que tu quer ser quando crescer? Hoje tento me dedicar a tudo que gosto de fazer e faço tudo com paixão.

A vida é muito curta para fazer uma coisa só, e sim, é possível exercer mais de uma profissão, ter hobbys, se divertir, etc. Se tu não consegue equilibrar isso é por falta de gerenciamento de tempo.

“Não tenho tempo para ver séries”, “Não tenho tempo para praticar um esporte”, “Não tenho tempo para aprender um instrumento”, “Não tenho tempo para tomar aquela cerveja com amigos/amigas” Tudo bullshit.

Como é seu trabalho hoje e o que você considera de maior aprendizado adquirido na Nasc e BrazilJS?

Minha principal função na Nasc é conectar empresas e comunidade. Na BrazilJS, é levar conteúdo inédito e relevante para a comunidade. Comunidade é a palavra chave, mesmo.

Nosso business só existe por conta do nosso envolvimento com a comunidade desde o início de nossas carreiras.

O aprendizado é constante e diário. Posso elencar dois grandes. Um deles é comercial. Vender coisas nunca foi minha ambição, mas hoje essa é uma das minhas atividades principais, e esse foi um grande aprendizado. Manter a BrazilJS não é uma tarefa fácil, mas posso dizer que estamos indo bem.

O outro aprendizado que julgo como um dos mais importantes é sobre a própria comunidade. Mesmo fazendo parte e tendo interesse desde o início de minha carreira, somente há uns 4 ou 5 anos é que comecei a notar que existia algo mais forte.

Está em nossas mãos o poder de mudar a realidade e a sociedade. Comunidades de tecnologia são como um espelho da sociedade, se conseguimos muda-las, mudamos um pouco do todo.

Eu só aprendi sobre diversidade e sobre sua importância por conta do trabalho que fazemos.

O que você sente de maior prazer em trabalhar com tecnologia?

Não é em toda área que se tem o poder de transformar uma ideia em realidade em tão pouco tempo. Pra mim, esse é um dos maiores prazeres de se trabalhar com tecnologia.

Outro ponto importante é estar conectado com o futuro. Trabalhar com tecnologia me permite viajar no tempo, estar sempre pensando no que ainda não existe e no que é possível ou impossível, esse é um prazer imenso.

Durante sua carreira, quais pontos você enxerga que amadureceu e que ainda precisa amadurecer profissionalmente?

O maior amadurecimento, no meu ponto de vista, é saber que nunca se é maduro o suficiente, por mais paradoxal que isso pareça. Todo ano eu tento fazer tudo diferente, não somente por querer fazer diferente, mas por saber que pode e deve ser melhor.

Quer deixar um recado para os nossos colegas ou para quem está começando?

Mais caos e menos burocracia. Acredito que somente processos caóticos contribuem para a evolução e inovação constante. Claro, o equilibrio é sempre a melhor dose, mas a transformação verdadeira não virá de coisas estáticas e escritas em pedra.

Foquem na carreira, mas não esqueçam do que gostam de fazer e se possível, foquem também em outras áreas de interesse. Diversidade é importante e ponto final. É importante em eventos, em empresas, onde for.

Tecnologia é massa, mas é só o meio do caminho, às vezes nem isso. Não seja idiota, ninguém gosta de gente idiota.

Fique Ligado!

Para seguir o Jaydson Gomes:

Gerando sons com a Web Audio API do JavaScript

Olá, Web Developers!

Sabiam que podemos gerar sons com JavaScript? Isso graças à Web Audio API, que nos fornece poderosas funcionalidades para se trabalhar com áudio. Podemos fazer coisas como adicionar efeitos a um arquivo de áudio ou criar músicas a partir do JavaScript.

Começando com um beep

Para começar, vamos gerar um simples beep.

let context = new AudioContext(),
   oscillator = context.createOscillator();

oscillator.type = 'sine';
oscillator.connect(context.destination);
oscillator.start();

Primeiro nós instanciamos o AudioContext, que é o principal objeto para podermos gerar um som. A partir dele nós criamos um oscilador, que é responsável por emitir um sinal contínuo, que será o nosso som.

Precisamos indicar o tipo de onde que nosso oscilador irá gerar. Indicamos que queremos uma onda senoidal (sine).

Depois conectamos o nosso oscilador ao context.destination, que representa o destino final do áudio. Se você está no computador, provavelmente isso indica as suas caixas de som.
Por fim, executamos a função start() para iniciar o som.

Para parar o som, basta executar oscillator.stop().

Ao parar o som você pode notar um pequeno clique. Isso acontece basicamente quando paramos o som em um lugar qualquer que não seja o ponto zero da onda, como mostrado na imagem abaixo.

Onda Senoidal

Encerrando o som

Um modo de acabar com esse som de clique ao pararmos o som (e que pode ser bem desconfortável) é alterar a nossa onda, como se estivéssemos diminuindo ela.

Para isso, usamos a função exponentialRampToValueAtTime(), que vai alterando de forma exponencial o valor do nosso som.

Vamos então fazer uma pequena alteração em nosso código:

let context = new AudioContext(),
   oscillator = context.createOscillator(),
   contextGain = context.createGain();

oscillator.connect(contextGain);
contextGain.connect(context.destination);
oscillator.start(0);

Agora criamos um ganho, um objeto que nos permitirá trabalhar com a função exponentialRampToValueAtTime(). Ligamos ele ao oscilador e depois ligamos ao destino de saída do som.

Para parar o som, ao invés de simplesmente executarmos a função stop(), vamos executar o seguinte código:

contextGain.gain.exponentialRampToValueAtTime(
    0.00001, context.currentTime + 0.04
    )

O que fizemos aqui foi alterar o valor do ganho, que basicamente seria como se estivéssemos abaixando o volume aos poucos.

Veja que o primeiro parâmetro que passamos é bem próximo de zero. Isso porque essa função não pode receber um valor zerado ou negativo.

O segundo parâmetro é o tempo em que queremos que a alteração seja feita.

Abaixo você pode conferir que não importa mais em que momento pare o som, ele não terá mais aquele clique.

Efeitos ao parar o som

Quando paramos o som, passamos um tempo bem pequeno para que a alteração no ganho fosse realizada (0.4).

Dependendo do tempo que passarmos, podemos ter efeitos interessantes.

Isso acaba nos dando sensações diferentes. E essa sensação fica ainda mais evidente quando iniciamos e já encerramos o som logo em seguida.

Sons bens mais agradáveis do que aquele som contínuo, não é mesmo?

Diferentes ondas, diferentes osciladores

O que criamos até agora foi um som a partir de um oscilador usando uma onda senoidal. Há outros tipos de ondas, como podemos ver na seguinte imagem:

Para alterar o tipo de onda, basta passarmos um dos seguintes códigos:

oscillator.type = 'sine';
oscillator.type = 'square';
oscillator.type = 'triangle';
oscillator.type = 'sawtooth';

Tocando notas

Até o momento nós só tocamos um simples beep. Mas se quisermos tocar algo, precisamos tocar notas musicais diferentes.

Cada nota é um som emitido a uma determinada frequência. Abaixo temos uma tabela que indica cada nota e sua respectiva frequência:

Para alterar a frequência, basta indicar um valor em oscillator.frequency.value. Para tocar um “Dó” (C4):

const C4 = 261.6,
    D4 = 293.7,
  E4 = 329.6,
  F4 = 349.2,
  G4 = 392.0,
  A4 = 440.0,
  B4 = 493.9;

oscillator.frequency.value = C4;

No exemplo, passei a frequência para uma constante apenas para o nosso código ficar mais legível. É bem mais simples e legível deixar o nome das notas do que deixar o número da frequência.

Evoluindo

Caso queira se aprofundar, procure saber mais sobre bibliotecas e frameworks como o Tone.js, uma ferramenta completa com várias funcionalidades para se trabalhar com música interativa no navegador.

Criando APIs com o Strapi.io

O uso de APIs vem em constante crescimento nos últimos anos, e isso se deve a grande quantidade de aplicações clientes que precisam consumir dados de um mesmo banco de dados. Essas aplicações clientes vão desde aplicativos desktop até aplicações mobile, fazendo com que mais e mais serviços sejam criados diariamente.

Devido a esse cresimento, cada dia mais tecnologias surgem para auxiliar os desenvolvedores a criar estas APIs. Uma destas tecnologias é o Strapi.io e é sobre ela que vamos falar neste artigo.

O que é o Strapi.io?

O Strap.io é uma ferramenta que visa facilitar a criação de serviços REST através de um painel administrativo totalmente funcional. Desenvolvido em node.js, o Strap.io é open-source e bem simples de se utilizar. Toda a sua documentação pode ser encontrada em sua página principal.

Instalando o Strapi.io

Para instalar o Strapi.io, precisamos apenas do node em nosso computador. Para isso, podemos baixar seu instalador na página oficial da ferramenta. O processo de instalação é bem simples e intuitivo, o famoso “next, next, finish”.

Após instalar o node, estamos aptos a instalar o strapi.io. Para isso, no Terminal (ou CMD, se você usa o Windows), digitamos o seguinte comando: npm install strapi@alpha -g. O comando vai baixar e instalar o strapi em seu SO e o retorno deve ser o seguinte:

Criando o projeto

Após instalar o Strapi.io, chegou a hora de criar nosso projeto. Para isso, abrimos o terminal e digitamos o seguinte comando: strapi new my-project. Este comando irá criar um projeto novo do strapi com o nome “my-project”.

Durante o processo de criação do projeto, precisamos selecionar qual banco de dados vamos utilizar (MySQL, Postgree ou MongoDB), o nome do BD, o Host, Porta de acesso para o BD, nome de usuário e senha do banco de dados selecionado, como mostra a imagem abaixo:

Feito isso, navegamos até seu diretório e executamos seu servidor com os comandos abaixo:

cd my-project
strapi start

Feito isso, seremos redirecionados para a página de registro de usuários do strapi, uma área administrativa com a seguinte URL: http://localhost:1337/admin/plugins/users-permissions/auth/register. Nela inserimos os dados de cadastro e clicamos no botão “Pronto para começar”, conforme visto na imagem abaixo:

Criando nossa API

Após configurar o usuário de acesso à área Administrativa, somos redirecionados para o dashboard do Strapi, onde temos acesso a todos os seus recursos. Agora, o primeiro passo é criar as tabelas do banco de dados que irão armazenar os dados da nossa aplicação. Para isso, clicamos no link “Construtor de conteúdo”. É lá que criamos as tabelas que vamos utilizar em nosso serviço REST:

Na próxima tela, selecionamos a opção “Adicionar Tipo de Conteúdo” e determinamos as configurações da tabela a ser criada:

Feito isso, clicamos no botão “Adicionar Novo Campo” e determinamos os campos que nossa tabela irá possuir, assim como seu tipo. O Strapi provê diversos tipos de campos, conforme visto abaixo:

Ao selecionar o tipo do campo, determinamos o nome do campo e clicamos em “continuar”. Vale lembrar que cada campo tem suas configurações particulares, então a tela abaixo pode variar conforme o tipo de dados que você está criando:

Após determinar todos os campos da tabela, clicamos no botão “Salvar” e a tabela será criada no banco de dados que configuramos anteriormente.

Com isso, estamos quase prontos para consumir nossa API. O último passo é configurar o nível de acesso e quem é permitido a consumir os recursos da API. Para isso, vamos até o menu “Papeis e Permissões” e selecionamos a permissão “Public”.

Observação: Esta permissão é responsável por configurar o acesso público da nossa API, ou seja, qualquer um que possuir a rota da nossa API, poderá consumir nosso serviço REST, então é muito importante que você reveja a necessidade do seu projeto antes de liberar a sua API para o público. Como estamos em um ambiente de desenvolvimento, não vamos nos atentar a isso.

Agora, na sessão “Permissões”, determinamos os métodos que os usuários que possuírem a permissão pública poderão efetuar em nossa tabela de clientes:

Vamos deixar todas as opções como ativas. E é isso, finalmente temos nosso serviço de manipulação de clientes ativo e funcionando, chegou a hora de testar!

Testando nosso serviço

Agora podemos testar nossa API de clientes. Para isso, é só fazer uma requisição para a rota http://localhost:1337/clientes. Neste teste, vou utilizar o Postman, uma ferramenta para envio de requisições HTTP.

Sendo assim, enviando uma requisição POST para a rota mencionada acima e passando a idade e o nome no corpo da requisição, temos um novo cliente cadastrado, como podemos ver nas imagens abaixo:

Podemos também fazer todos os outros métodos básicos de um CRUD, como editar e remover um cliente do nosso banco de dados utilizando, respectivamente, os métodos PUT e DELETE:

Concluindo

Então é isso. Neste artigo vimos uma ótima ferramenta para criação de APIs de forma fácil, rápida e intuitiva. Vale ressaltar que esta ferramenta possui todos os métodos para controle de acesso e permissão e que tudo isso pode ser visto na sua documentação oficial

3 linguagens de programação que continuam em alta

Você provavelmente já se pegou pensando em qual linguagem você deve focar seus estudos. Seja se você está iniciando ou não, é sempre bom ver o que o mercado está pedindo. Claro que não devemos avaliar apenas o mercado, mas também suas preferências. A ideia é fazer uma junção dessas duas coisas: escolher uma linguagem em alta, mas que dentre elas, você escolha a que mais se identificar.

No começo deste ano fizemos um post sobre as linguagens promissoras para se estudar neste ano. Mas como na área de TI tudo muda muito rápido, será que agora, perto do final do ano, essas linguagens ainda estão no topo? Vamos focar hoje nas 3 principais do momento.

1) JavaScript

Assim como no começo do ano, o JavaScript aparece em primeiro lugar. Como é uma linguagem dinâmica pode ser utilizada para várias coisas. Temos um post que aborda justamente isso: O que se pode fazer com JavaScript hoje em dia?

O site Stack Overflow sempre realiza uma pesquisa para obter estatísticas da comunidade de desenvolvedores. E nas tecnologias mais populares, está ela, em primeiro lugar, com uma porcentagem de 69,8%.

O GitHub (site de compartilhamento de código) também diz que o JavaScript é o mais utilizado.

Como podemos ver acima, em segundo aparece a linguagem Python, que veremos a seguir.

2) Python

Desde o começo do ano ela era uma das linguagens mais promissoras, e ela ainda está no pódio. O Python é uma linguagem poderosa e que cada vez mais ganha popularidade em meio aos desenvolvedores.

Podendo ser utilizada por uma variedade de tarefas, desde desenvolvimento web, aprendizado de máquina, análise de dados e muitas outras.

Ainda na pesquisa do Stack Overflow, quase 40% dos usuários utilizam Python em seus projetos. E ainda tem mais: segundo o site TIOBE, podemos ver como o Python tem crescido.

3) Java

Muitas pessoas quando pensam em estudar uma linguagem, já pensam logo no Java. Se você gostar, porque não? Apesar de não ter aparecido como uma das linguagens mais promissoras para este ano, o Java voltou a ser um dos centros a partir de julho/2018.

Como é uma linguagem de programação bem versátil, você pode utilizá-la para diversas finalidades como desktop, web e até mobile. Para tudo isso, o Java atenderá suas necessidades.

Concluindo

Agora você pode estar se perguntando… “Ok, então eu tenho que escolher uma dessas três linguagens?” e a resposta é: não exatamente…

Por que não aprender as três? Essas são as linguagens mais bem classificadas pelos sites como pudemos ver acima.

Quanto maior o seu conhecimento, tanto na linguagem em si quanto na quantidade, pode abrir um leque de oportunidades. Você pode estudar uma por vez, para poder levar sua carreira a um próximo nível.

Até a próxima! 😊

JavaScript: métodos de Arrays que você precisa conhecer

Olá, Web Developers!

Trabalhar com Arrays já nos lembra loopings, o que normalmente nos lembra de for e while. Porém, Arrays nos fornecem vários métodos para facilitar nosso trabalho em certas situações. Veja a seguir métodos do JavaScript que pode simplificar sua vida ao invés de ficar criando loopings.

.forEach()

Caso você precise executar algum código para cada elemento do Array, executar um forEach é muito mais simples do que criar um for ou while, já que não precisamos declarar variáveis de controle.

let myHTML = '<ul>'
const numbersList = [1, 2, 3, 4, 5];

numbersList.forEach((number, index, array) => {
    myHTML += `<li>${number}</li>`;
});
myHTML += '</ul>';

O .forEach() irá jogar cada um dos elemetos do Array no primeiro parâmetro, o índice do elemento no segundo e o Array original no terceiro. Claro que se não for usar, pode colocar apenas o primeiro e deixar o código assim:

let myHTML = '<ul>'
const numbersList = [1, 2, 3, 4, 5];

numbersList.forEach(number => myHTML += `<li>${number}</li>` );
myHTML += '</ul>';

.map()

Nós utilizamos o .map() quando queremos fazer alguma modificação nos elementos de um Array.

const usersList = [
    {name: 'João', credit: 500},
    {name: 'Maria', credit: 800}
];

const newUsersList = usersList.map((user, index, array) => {
    user.credit += 100;
    return user;
})

No exemplo acima alteramos o valor de uma propriedade de cada um dos elementos do Array. Na última linha nós precisamos executar o comando return para indicar o que será retornado para o Array. No final teremos um novo Array.

Teremos o seguinte retorno:

[
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900}
];

Também pode ser interessante se quisermos alterar a estrutura dos objetos do Array. Podemos pegar o exemplo de cima: suponha que a gente agora queira um Array com o nome de todos os usuários da nossa lista. Teríamos o seguinte código:

const newUsersList = usersList.map((user, index, array) => {
    return user.name;
})
/* Resultado:
[ 'João', 'Maria' ]
*/

Outro exemplo bem simples, aproveitando a simplicidade das Arrow Functions: dobrar o valor dos números de um Array:

[1, 2, 3, 4, 5].map(number => number * 2);
/* Resultado:
[2, 4, 6, 8, 10]
*/

.filter()

Como o próprio nome indica, serve para filtrarmos os elementos de um Array. Passamos para ele uma função. Se essa função retornar true, o elemento será inserido no novo Array que será criado. Se a função retornar false, o elemento será ignorado.

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const newUsersList = usersList.filter((user, index, array) => user.credit > 500);
/* Resultado:
[
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900}
]
*/

.find()

Usamos esse método quando queremos encontrar algum elemento dentro no Array. Para isso, passamos uma função que irá retornar true ou false. O primeiro true que for retornado irá finalizar a função e retornar o elemento em que estamos.

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const carlos = usersList.find((user, index, array) => user.name === 'Carlos');
/* Resultado:
    {name: 'Carlos', credit: 300}
*/

.findIndex()

Faz o mesmo que o .find(), mas retorna o índice do elemento encontrado ao invés de retornar o próprio elemento.

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const carlos = usersList.findIndex((user, index, array) => user.name === 'Carlos');
/* Resultado:
    2
*/

.every()

Serve para testarmos se todos os elementos do Array passam em uma condição.

Passamos uma função que retorna true ou false. Se todos os retornos forem true, significa que todos os elementos passaram no teste, e a função retornará true.

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const result1 = usersList.every((user, index, array) => user.credit < 1000);
const result2 = usersList.every(user => user.credit < 500);

No primeiro nós testamos se todos os usuários possuem crédito menor que 1000. Como todos passaram no teste, o resultado de result1 será true.

No segundo nós testamos se todos os usuários possuem crédito menor que 500. Como não são todos que passam nesse teste, o resultado de result2 será false.

.some()

O .some() faz algo parecido com o .every(). A diferença é que o .every() só retorna true se todos os elementos passarem no teste. O .some() retorna true se pelo menos um elemento do Array passar no teste.

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const result = usersList.some((user, index, array) => user.credit === 300);

Verificamos se há pelo menos um usuário com crédito igual a 300. O resultado será true.

.sort()

O .sort() serve para ordenar os elementos de Arrays. Muitas pessoas utilizam este método de maneira errada, apenas executando array.sort(). Isso pode causar retornos inesperados, pois os elementos serão convertidos em texto.

O correto é passar uma função que compare dois elementos. Assim, podemos ordenar um Array com qualquer tipo de objeto, ordenando por qualquer propriedade.

const numbersList = [4, 5, 7, 8, 2];
const orderedList = numbersList.sort((a, b) => {
    if(a < b){
       return -1;
    } else if(a > b){
        return 1;
    }
    return 0;
})

A função de ordenação sempre recebe dois elementos. Se o primeiro for menor, devemos retornar um número menor que 0. Se o primeiro for maior, devemos retornar um número maior do que 0. Se forem iguais, retornamos 0.

Neste caso, poderíamos simplificar a ordenação de números das seguintes maneiras:

const orderedList = numbersList.sort((a, b) => a > b ? 1 : -1 );
// ou também:
const orderedList = numbersList.sort((a, b) => a - b )

Para ter a ordenação em ordem decrescente, basta inverter o retorno da função.

const orderedList = numbersList.sort((a, b) => a > b ? -1 : 1 );

Podemos utilizar em elementos mais complexos:

const usersList = [
    {name: 'João', credit: 600},
    {name: 'Maria', credit: 900},
    {name: 'Carlos', credit: 300},
    {name: 'Vanessa', credit: 200},
];

const orderedUsers = usersList.sort((a, b) => a.credit - b.credit);

Com isso teremos um novo Array com os usuários ordenados pela quantidade de crédito.

.reduce()

Esta função serve para reduzirmos o conteúdo de um Array para apenas um elemento.
O exemplo mais clássico é somar todos os valores de um Array.

const numbersList = [1, 2, 3];
const total = numbersList.reduce((total, currentElement) => total + currentElement)
/* Resultado:
    6
*/

A função que executamos recebe como primeiro parâmetro uma variável que irá acumular um valor e como segundo parâmetro teremos cada um dos elementos do Array a cada iteração.

O que é Debounce e qual sua importância para a performance?

Olá, Web Developers!

Hoje vou falar sobre Debounce e a importância de saber quando usar em nossas aplicações.

Se você nunca usou essa técnica ao lidar com eventos como scroll, resize, mousemove, key*, etc, pode ser que enfrente problemas com seus dados e com a performance da sua aplicação.

Um exemplo básico

Imagine que temos um simples input do tipo texto. Nós vamos querer que, conforme o usuário vá escrevendo, alguns valores sejam exibidos como sugestão, assim como quando iniciamos uma busca no Google.

Então, quando o usuário para de escrever, temos que enviar o que ele escreveu para o nosso servidor para poder exibir as sugestões.

No exemplo abaixo, ao invés de fazer uma requisição, eu apenas incrementei um contador para vermos quantas requisições teríamos feito se essa fosse uma aplicação de verdade.

const myInput = document.querySelector('input'),
    mySpan = document.querySelector('span');
let counter = 0;

myInput.addEventListener('input', function(){
    mySpan.innerText = ++counter;
})

Vamos usar o evento “onInput” como exemplo. Se escrevermos “TreinaWeb” nesse input, veja que o contador vai acusar que o evento foi disparado 9 vezes.

Imagine só: apenas para enviar “TreinaWeb” para nosso servidor, teríamos feito 9 requisições se tivéssemos usado um simples evento “onInput” sem nenhum tratamento.

Pode parecer pouco, mas pense quando precisamos escutar outros eventos, como um scroll ou mousemove. Uma simples ação do usuário pode acabar disparando centenas ou até milhares de eventos.

Uma solução melhor é fazer uma verificação para saber se o usuário ainda está escrevendo. Se ele parou de digitar, então podemos enviar nosso texto para o servidor.

É aí que entra o Debounce. Ele permite a execução de uma função apenas se um determinado tempo se passou.

Um tratamento simples

Teste agora o exemplo abaixo com o tratamento para ver a diferença. Ao escrever com uma certa velocidade, o evento só será disparado quando você encerrar a digitação.

Mudamos pouca coisa no código:

const myInput = document.querySelector('input'),
    mySpan = document.querySelector('span');

let counter = 0,
    timer = null; // variavel para armazenar nosso timer

myInput.addEventListener('input', function(){
    // limpamos o timer
    clearTimeout(timer);
    // armazenamos o timer novamente
    timer = setTimeout(function(){
        mySpan.innerText = ++counter;
    }, 500);
})

Veja só o que fizemos:

Nossa função agora é executada dentro de um setTimeout. Estamos passando 500ms, ou seja, nosso código só será executado após meio segundo. Você pode mudar esse valor de acordo com sua necessidade.

Nós guardamos o resultado do setTimeout numa variável que chamamos de timer. Acontece que enquanto o usuário estiver digitando, menos de 500ms se passarão, então o nosso evento input será executado novamente. Veja que logo no começo dele nós limpamos o nosso timer com a função clearTimeout. Isso quer dizer que antes mesmo do nosso código ser executado, nós já cancelamos ele. E aí criamos outro setTimeout.

Caso o usuário pare de digitar, nosso evento onInput não será executado novamente, fazendo com que a linha onde executamos o clearTimeout() não seja executada, permitindo que o nosso código finalmente seja executado.

Bem simples e faz um grande benefício para nossas aplicações. Algumas bibliotecas, como o RxJS, nos fornecem já a opção de debounce para executarmos funções numa quantidade reduzida caso haja a possibilidade delas serem chamadas muitas vezes em um tempo muito curto.

Criando uma função “debounce” para reutilização

Tudo bem que só adicionamos menos de cinco linhas em nosso código para tratar uma função, mas imagine que a gente esteja em um sistema e a gente queira tratar várias funções.

Para isso, é melhor criar uma função que trate o debounce para nós.

const myInput = document.querySelector('input'),
    mySpan = document.querySelector('span');
let counter = 0;

function debounce(func, wait) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(func, wait);
    }
}

myInput.addEventListener('input', debounce(function(){
    mySpan.innerText = ++counter;
}, 500));

No código acima nós simplesmente criamos uma função debounce() que já faz o que conhecemos: tem uma variável “timer” e executa uma função que limpa o timer e executa nossa função após um determinado tempo.

Para essa função debounce() nós passamos a função que queremos executar e o tempo que ela deve esperar para ser executada.

Agora temos o mesmo comportamento e também temos a possibilidade de reutilizar essa função em outros lugares.

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES