# DevPleno - Complete Documentation

This file contains all documentation concatenated into a single file for easy consumption by LLMs.

> Ajudando desenvolvedores a construir produtos de classe mundial.

## Table of Contents

This document includes all content from this project.
Each section is separated by a horizontal rule (---) for easy parsing.

---

# 10 dicas de produtividade para programadores - DevPleno

URL: https://devpleno.com/10-dicas-de-produtividade-para-programadores

> Ser um profissional produtivo é uma exigência do mercado de trabalho no cenário altamente competitivo em que vivemos. Os resultados são requisitados cada v...

Carreira

## 10 dicas de produtividade para programadores

T
Por Tulio Faria • 24 de julho de 2017

*

[Carreira](/tag/carreira)

Ser um profissional produtivo é uma exigência do mercado de trabalho no cenário altamente competitivo em que vivemos. Os resultados são requisitados cada vez mais rapidamente e sempre com a melhor qualidade. E aqueles profissionais que conseguem atender a essa demanda são muito valorizados.

Na era digital, porém, há muitas distrações que podem fazer os níveis de [produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&utm_campaign=rc_blogpost) despencar. É assim em todas as áreas, inclusive no mundo do desenvolvimento de software*. Contudo, existem soluções e comportamentos que podem ajudar a melhorar isso. Apresentamos algumas dicas de produtividade na lista a seguir.

## 1. Escolha a ferramenta certa

Há diversas ferramentas que podem ser utilizadas para organizar os fluxos de trabalho e, assim, melhorar a sua produtividade. Elas auxiliam em diferentes atividades. Confira:

### Gestão de projetos

Planejamento e produtividade sempre andam de mãos dadas. Um bom planejamento aumenta a produtividade, mas a falta dele pode fazer com que algumas tarefas sejam adiadas caso haja atrasos em atividades das quais dependem. Com essa quebra de sequência e os constantes retornos aos processos anteriores, a produtividade cai.

Entre os programas que podem ajudar você em seus projetos estão o [Gantter](https://gantter.com?utm_source=blog&utm_campaign=rc_blogpost) (integrável ao Drive do Google), e o [MS Project](https://products.office.com/pt-br/project/project-management?utm_source=blog&utm_campaign=rc_blogpost), da Microsoft. Com eles, é possível definir o cronograma detalhado do projeto, com prazos para cada atividade e relação de dependência entre elas. Enquanto o Project apresenta mais funcionalidades que o Gantter, este último é gratuito e online — e eles são compatíveis.

### Gestão de tarefas

Saber definir prioridades entre as tarefas é crucial para a produtividade. Ferramentas como o [Trello](https://trello.com?utm_source=blog&utm_campaign=rc_blogpost) e o [Asana](https://asana.com?utm_source=blog&utm_campaign=rc_blogpost) ajudam a gerenciar tarefas, definindo responsáveis e prazos para cada uma. Desta forma, visualizar as diversas atividades que compõem o projeto fica mais simples, possibilitando elencar a prioridade entre elas.

### Editores de texto

Entre os editores de texto mais usados pelos programadores estão o [Notepad++](https://notepad-plus-plus.org?utm_source=blog&utm_campaign=rc_blogpost), [Sublime Text](https://www.sublimetext.com?utm_source=blog&utm_campaign=rc_blogpost) e o VS Code. Todos são leves e aceitam *plugins/extensões* que agregam funcionalidades ao *software*. [Na hora de utilizar o editor, uma dica é reduzir a troca de contextos em prol da produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&utm_campaign=rc_blogpost).

### Versionamento

Quando se está criando um *software*, é essencial não perder linhas de código já desenvolvidas. Uma das melhores formas de prevenir que um trecho de código seja sobrescrito ou que ocorra um *bug* causado por alguma alteração no código-fonte é usar o sistema de versionamento [git](https://git-scm.com?utm_source=blog&utm_campaign=rc_blogpost), disponível nas plataformas [Bitbucket](https://bitbucket.org?utm_source=blog&utm_campaign=rc_blogpost) e [Github](https://github.com?utm_source=blog&utm_campaign=rc_blogpost).

### Qualidade do código

A qualidade do código está diretamente relacionada à produtividade do desenvolvedor. Com o [SonarQube](https://www.sonarqube.org?utm_source=blog&utm_campaign=rc_blogpost), por exemplo, é possível analisar a qualidade do código em mais de 40 [linguagens](https://www.devpleno.com/quantas-linguagens-programar?utm_source=blog&utm_campaign=rc_blogpost), como PHP, Java, Javascript, Python, C#, C/C++, entre outros. Outra possibilidade é utilizar algum módulo, como o [StandardJS](https://www.devpleno.com/standard-parte-1?utm_source=blog&utm_campaign=rc_blogpost).

## 2. Aposte nos atalhos e *snippets*

Atalhos, *snippets* e templates (partes de código já prontas e com lacunas a serem preenchidas) ajudam o desenvolvedor que precisa lidar com instruções, trechos, blocos e partes de código-fonte. É interessante, ainda, personalizar atalhos complexos — que vão além daqueles disponíveis no sistema operacional.

## 3. Hardware

Algumas soluções de *hardware* podem melhorar a produtividade. É o caso dos múltiplos monitores e dos mouses com botões programáveis, que podem reduzir o tempo necessário para a execução das tarefas. Além disso, existem aplicações que modificam o *desktop* para torná-lo mais eficiente.

## 4. Conforto para o cérebro

Outra dica importante para aumentar a sua [produtividade](https://www.youtube.com/watch?v=6Dx0abJtNvY&utm_source=blog&utm_campaign=rc_blogpost) tem a ver com o bem-estar mental. O desenvolvimento de *software *é uma atividade que demanda bastante do cérebro do programador, pois envolve raciocínio lógico e concentração.

Além disso, a preocupação com os prazos e a necessidade de estar sempre atento às novidades do mercado acabam causando estresse. Por isso, é muito importante procurar manter o seu cérebro confortável e motivado. Ações simples podem ajudar:

### Plantas

Um [estudo](https://www.uq.edu.au/news/article/2014/09/leafy-green-better-lean?utm_source=blog&utm_campaign=rc_blogpost) da Universidade de Queensland, na Austrália, descobriu que a presença de plantas no ambiente de trabalho aumenta a produtividade em até 15%.

### Pausas

Embora pareçam difíceis de encaixar na rotina, segundo Tony Schwartz, autor de [The Way We’re Working Isn’t Working](https://www.amazon.com/Way-Were-Working-Isnt-Performance/dp/1439127662/ref=sr_1_1?ie=UTF8&s=books&qid=1273182790&sr=1-1&utm_source=blog&utm_campaign=rc_blogpost), pausas de 20 minutos a cada 90 minutos trabalhados aumentam a atenção, o foco e a energia.

Um [estudo](https://www.health.harvard.edu/newsletter_article/napping-may-not-be-such-a-no-no?utm_source=blog&utm_campaign=rc_blogpost) da Universidade de Harvard, também mostra que cochilar de 20 a 30 minutos toda tarde incentiva o hipotálamo a funcionar melhor. Você pode ainda gerenciar seu tempo utilizando o Pomodoro, falamos mais disso [neste post](https://www.devpleno.com/como-ser-muito-mais-produtivo?utm_source=blog&utm_campaign=rc_blogpost).

## 5. Alimentação saudável

Dados da [Organização Mundial da Saúde](https://www.mindflash.com/blog/2011/09/does-the-food-we-eat-affect-our-productivity?utm_source=blog&utm_campaign=rc_blogpost) (OMS) demonstram que uma alimentação adequada também pode aumentar a produtividade em 20%.

## 6. Música e redes sociais

As suas músicas preferidas ajudam na concentração, segundo [Teresa Lesiuk](https://graphics8.nytimes.com/packages/pdf/business/LESIUKarticle2005.pdf?utm_source=blog&utm_campaign=rc_blogpost), professora de terapia musical da Universidade de Miami. Com elas, é possível fazer as tarefas mais rapidamente e ter ideias melhores, já que ouvir sons melodiosos libera dopamina, um hormônio relacionado ao prazer.

Além disso, pausas para usar as redes sociais no *smartphone* tornam as pessoas mais dispostas para trabalhar, segundo um [estudo](https://www.k-state.edu/media/newsreleases/jul14/smartphone7714.html?utm_source=blog&utm_campaign=rc_blogpost) da Universidade do Kansas, nos EUA.

## 7. Pense rápido

A capacidade de tomar decisões rápidas é útil para qualquer profissional. Algumas estratégias podem ajudar nisso.

- planejamento: vai nortear as ações e fundamentar a tomada de decisões. Se for bem feito, aumenta as chances de ajudar no acerto das escolhas;

- criatividade: a coragem para inovar pode ser a chave do sucesso em um processo de desenvolvimento de *so

---

# 2 Tipos de Soluções de Software que você pode entregar - DevPleno

URL: https://devpleno.com/2-tipos-de-solucoes-de-software-que-voce-pode-entregar

> Hoje quero falar com vocês um pouco sobre venda de software. É um conceito bastante interessante sobre as possibilidades que nós temos de entrega para o cl...

Carreira

## 2 Tipos de Soluções de Software que você pode entregar

T
Por Tulio Faria • 13 de outubro de 2017

[Carreira](/tag/carreira)

Hoje quero falar com vocês um pouco sobre venda de software. É um conceito bastante interessante sobre as possibilidades que nós temos de entrega para o cliente.

Basicamente temos duas opções para entregar uma solução para nosso cliente.

## 1 - Entregar exatamente o que o cliente quer

Essa é a opção mais simples, geralmente é a mais utilizada por quem está começando na área. A vantagem desse tipo de solução é que entregamos o serviço muito mais facilmente. O problema é que quando o cliente quer algo e é entregue da forma que ele quer, não necessariamente dá o resultado que ele espera.

## 2 - Entregar o que o cliente realmente precisa

À medida que vai ganhando experiência, você começa a perceber que o que o cliente quer nem sempre é o que ele precisa. O problema nisso é que você precisa convencer o seu cliente que o que ele precisa é diferente do que ele quer.

Quando entregamos o que ele precisa, geralmente estamos focados no resultado final, porém isso não necessariamente significa entregar um software para o cliente.

Por exemplo, já aconteceu comigo de um potencial cliente querer mensurar algumas informações, mas na verdade, ele não precisava de um software para fazer isso, apenas um formulário de papel resolveria o problema, e foi o que fizemos.

Dessa forma, muitas vezes você não entrega software e não consegue cobrar por aquilo.

Quando estamos começando na área, com projetos menores, a chance do cliente se frustrar é menor, por esse motivo é mais seguro entregar o que o cliente quer.

Quando vamos entregar uma solução eficaz para o cliente, muitas vezes não é desenvolver um software, porém tem clientes que não estão abertos a isso (atualmente eu tento entregar o máximo que o cliente precisa, mas não brigo se o cliente fala o que ele quer mais de três vezes.

Reflita sobre essas duas formas, quando um cliente te pedir um software, você está entregando o que o cliente quer ou o que ele precisa?

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=2%20Tipos%20de%20Solu%C3%A7%C3%B5es%20de%20Software%20que%20voc%C3%AA%20pode%20entregar&url=https%3A%2F%2Fdevpleno.com%2F2-tipos-de-solucoes-de-software-que-voce-pode-entregar) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2F2-tipos-de-solucoes-de-software-que-voce-pode-entregar)

---

# 4 novos Métodos Strings que você precisa conhecer - DevPleno

URL: https://devpleno.com/4-novos-metodos

> Quatro novas funções foram adicionadas às Strings no ES6 e são bastante interessantes para usarmos no dia a dia. Veja só:  startsWith Nela temos uma string...

Javascript

## 4 novos Métodos Strings que você precisa conhecer

T
Por Tulio Faria • 30 de maio de 2017

[Javascript](/tag/javascript)

Quatro novas funções foram adicionadas às Strings no ES6 e são bastante interessantes para usarmos no dia a dia. Veja só:

## startsWith

Nela temos uma string qualquer e fazemos o seguinte:

console.log('Tulio Faria'.startsWith('Tulio'))
Será que Tulio Faria começa com a palavra Tulio? Se sim, é retornado true. Lembrando que ele é case sensitive, então se tiver a palavra ‘tulio’ dentro do startsWith, seria retornado um false. Ainda não é possível fazer isso sem o case sensitive.

Podemos também definir a partir de qual parte ele comece a considerar, por exemplo:

console.log('Tulio Faria'.startsWith('ulio', 1))
Assim ele começa a considerar a partir da primeira letra.

## endsWith

Ele que faz basicamente a mesma coisa que o Starts, mas pega o final, por exemplo:

console.log('Tulio Faria'.endsWith('ria'))
Lembrando que no endsWith também conseguimos escolher a partir de qual parte considerar:

console.log('Tulio Faria'.endsWith('ulio', 5))
Consideramos o parâmetro onde irá parar a string.

## Includes

Supondo que eu quero saber se no meu nome inclui ‘Machado’:

console.log('Tulio Machado Faria'.includes('Machado'))
Ele verifica se a string está incluída.

## Repeat

Com ela podemos repetir a string quantas vezes quisermos:

console.log('01'.repeat(10))
Podemos paddings de strings, pegar essa string e colocar na frente de outra, por exemplo, que funciona normalmente.

Considerando as três primeiras, se quisermos de forma insensitiva, temos algumas alternativas como passar todas para maiúsculas, todas para minúsculas ou por expressão regular.

## Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=4%20novos%20M%C3%A9todos%20Strings%20que%20voc%C3%AA%20precisa%20conhecer&url=https%3A%2F%2Fdevpleno.com%2F4-novos-metodos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2F4-novos-metodos)

---

# 8 dicas de organização para freelancers se darem bem na carreira - DevPleno

URL: https://devpleno.com/8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira

> Nada melhor do que ter uma rotina flexível, com a possibilidade de trabalhar nos seus próprios horários, não é mesmo? Não à toa, ser freelancer é uma alter...

Carreira

## 8 dicas de organização para freelancers se darem bem na carreira

T
Por Tulio Faria • 14 de julho de 2017

*

[Carreira](/tag/carreira)

Nada melhor do que ter uma rotina flexível, com a possibilidade de trabalhar nos seus próprios horários, não é mesmo? Não à toa, ser freelancer é uma alternativa cada vez mais atrativa para os desenvolvedores de software.

Contudo, é preciso ter muita disciplina para atuar nessa modalidade. Afinal, o seu rendimento no final do mês será proporcional à sua dedicação e produtividade.

Para ajudá-lo a ter um melhor desempenho, compilamos algumas dicas de organização. Ao segui-las, você com certeza se sairá muito bem nessa [carreira](https://www.devpleno.com/carreira-preco-que-tem-que-ser-pago?utm_source=blog&utm_campaign=rc_blogpost). Confira:

## 1. Tenha um fundo de reserva

Aqueles que já estão há algum tempo atuando em formas alternativas de trabalho sabem que no início é mais complicado. Como a pessoa ainda é nova nesse universo, será necessário fazer o nome dela como freelancer. Além do mais, é preciso conhecer bem o mercado para encontrar boas propostas de projetos.

No entanto, isso requer tempo. Portanto, é essencial ter uma reserva financeira, que dará o devido suporte até que você se estabilize.

O ideal nesse caso é ter uma quantia suficiente para todas as suas despesas por pelo menos três meses. Nesse período, você conseguirá ampliar sua carteira de clientes e ampliar suas possibilidades de jobs.

## 2. Faça um planejamento

Diferente do emprego fixo, em que o profissional possui carteira assinada com um valor específico, no mundo dos freelancers a remuneração pode ser bastante diversificada. Em um mês, por exemplo, você pode tirar um valor muito alto, já em outro a remuneração pode ser menor — devido à baixa demanda.

Diante desse cenário, o profissional precisa ter um planejamento bem estruturado. O recomendado é que ele estabeleça [metas](https://www.devpleno.com/comprometimento-com-suas-metas?utm_source=blog&utm_campaign=rc_blogpost) semanais e/ou mensais, certificando-se de cumpri-las. Afinal, a sua renda depende diretamente da sua produção.

Como você não mais possuirá benefícios empresariais como plano de saúde, vale-transporte e vale-alimentação, é preciso colocar tudo isso na ponta do lápis. Somente assim você conseguirá chegar a um valor real. Afinal, você não quer ser pego de surpresa por uma despesa extra e não ter o dinheiro necessário.

Lembre-se de que você não tem uma garantia de renda. Isso significa que, ao surgir imprevistos, impossibilitando-o de trabalhar, você não receberá. Por isso, é importante sempre poupar uma certa quantia da renda, fator que proporcionará mais segurança.

## 3. Invista em cursos de capacitação

O mundo está em constante mudança e os profissionais que buscam se destacar devem apostar em cursos de capacitação. Essa premissa também vale para os freelancers: o que te diferencia dos demais profissionais? Por que o contratante deve escolher você e não o seu colega?

Perceba, nesse aspecto, que é preciso ter habilidades e características singulares que vão agregar valor ao serviço. São tais aptidões que vão te deixar na frente dos concorrentes, facilitando a conquista de mais jobs.

Sendo assim, não tenha medo em investir na sua área, realizando cursos que vão torná-lo um freelancer mais competente.

## 4. Organize o seu ambiente de trabalho

Ao ser freelancer, nada mais natural do que fazer home office*, que é a possibilidade de trabalhar em casa. Mas isso não significa que você não precisa ter um local apropriado para executar as tarefas.

Pelo contrário: o mais indicado é que você organize um ambiente específico para o serviço. Essa simples ação evitará a dispersão, o que contribuirá com o seu rendimento. E, é claro, maior [produtividade](https://www.devpleno.com/como-ser-muito-mais-produtivo?utm_source=blog&utm_campaign=rc_blogpost) é garantia de maior remuneração.

Para não ter erro, separe um espaço do seu lar e transforme em uma mini-escritório, que precisará apenas de uma mesinha adequada, uma cadeira e os devidos objetos de trabalho.

## 5. Honre os prazos

Não são raros os casos em que os freelancers assumem vários compromissos com clientes distintos e acabam não honrando os prazos. É o tal de tentar abraçar todo o mundo com apenas dois braços.

O resultado disso, como se pode imaginar, é a entrega de um serviço de baixa qualidade e fora do prazo combinado. Essa característica deixa os clientes insatisfeitos (com toda razão, né?), afetando assim sua reputação no mercado.

Portanto, uma das mais importantes dicas de organização é priorizar sempre a excelência e não a quantidade. Além do mais, em hipótese alguma faça promessas que não poderá cumprir. Como já dizia o ditado: “O combinado não sai caro”.

## 6. Defina prioridades

O freelancer deve tornar o relógio o seu principal amigo. Claro que, às vezes, vai surgir um enorme desespero originado da sensação de que não vai dar tempo de concluir todas as tarefas pretendidas. Contudo, isso somente acontece porque o profissional não conseguiu ainda se adequar à nova realidade.

Ele, nesse aspecto, precisa entender que o tempo não é seu inimigo. Entretanto, somente é possível chegar a essa mentalidade quando o freelancer começar a criar uma lista de prioridades.

Organize bem a sua agenda e estabeleça uma ordem de prioridade nos seus trabalhos. Comece por aqueles que têm a data de entrega mais próxima — afinal, você não quer correr o risco de perder o prazo, certo? Simples assim: verifique a urgência de cada projeto e produza primeiro aqueles que são emergenciais.

## 7. Seja focado

WhatsApp, redes sociais, músicas e televisão: são várias as fontes de distrações que fazem a sua produtividade reduzir substancialmente.

Uma paradinha aqui para olhar o Facebook, outra para assistir aquele seriado bacana e, quando se der conta, o dia já está quase acabando e você não fez o que pretendia (ou deveria) fazer.

Esse é um cenário familiar? Então, provavelmente, você não está destinando a devida atenção para as suas obrigações. Para focar no seu trabalho, elimine todos os focos de distração. Desligue o celular ou faça o que for preciso para ficar concentrado.

Não existe uma regra aqui. O importante é saber como se manter compenetrado com a atividade que está sendo executada. Afinal, somente você sabe o que desvia sua atenção.

## 8. Crie rituais

Realizar sistematicamente determinadas atividades pode ajudá-lo a se habituar com a vida de freelancer. O que você fazia antes de ir para a empresa em que trabalhava? Tomava café, lia algumas notícias e via um pouco de TV? Saiba, então, que você pode continuar tendo tais hábitos. Na verdade, você não só pode como deve, pois, assim, quando finalizá-los, a sua mente vai entender que é horário de pegar no batente.

Como em todo trabalho, existe alguns desafios que precisam ser superados no mundo dos freelancers. Mas pode apostar: não há nada mais gratificante — afinal, poder controlar seus horários e trabalhar com aquilo que se ama já é motivo o suficiente para curtir essa opção.

E você, já coloca essas dicas de organização em prática? Tem mais alguma sugestão que ajuda a lidar com a rotina de freelancer? Deixe um comentário!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=8%20dicas%20de%20organiza%C3%A7%C3%A3o%20para%20freelancers%20se%20darem%20bem%20na%20carreira&url=https%3A%2F%2Fdevpleno.com%2F8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2F8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira)

---

# Redirecting to: /

URL: https://devpleno.com/Curta

Redirecting to: / [Redirecting from /Curta to /](/)

---

# A habilidade mais importante que um programador deveria ter (e praticar) - DevPleno

URL: https://devpleno.com/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar

> É muito comum na área de programação todos pensarem que a habilidade mais importante esteja relacionada ao pensamento lógico e a capacidade de resolver pro...

Carreira

## A habilidade mais importante que um programador deveria ter (e praticar)

T
Por Tulio Faria • 13 de maio de 2021

[Carreira](/tag/carreira)

É muito comum na área de programação todos pensarem que a habilidade mais importante esteja relacionada ao pensamento lógico e a capacidade de resolver problemas. E não que estas habilidades não sejam importantes, mas existe uma habilidade que potencializa o resultados delas: **perguntar**.

Sim, exatamente. Perguntar é uma habilidade importantíssima. E antes que você ache isso muito estranho, vamos entender melhor.

O ato de perguntar é relacionado inclusive ao processo científico. Você já deve ter ouvido algo como “o que move o mundo são as perguntas e não as respostas”. Perguntar destrava caminhos alternativos. Perguntar te leva a caminhos que talvez nem havia pensado sobre.

Neste cenário hipotético da imagem anterior, o seu processo te leva a um resultado 1. E questionamentos e perguntas podem gerar no mínimo 3 novas opções de cenários:

- Um resultado pior (neste caso, o resultado 2)

- Nenhum resultado

- Um resultado melhor (neste caso, o resultado 3)

## Qual seria a vantagem de explorar o resultado com mais perguntas?

O grande ganho deste tipo de pensamento e processo é a exploração de potenciais resultados melhores, re-afirmar o resultado obtido como um resultado bom e ainda aumentar a possibilidade argumentativa dos motivos por qual processo ter sido melhor.

## Mas como saberei qual resultado seria o melhor?

Neste caso, para todo problema que você esteja buscando uma solução é importante ter em mente quais critérios essa solução deverá ser mensurada. Ainda usando o cenário anterior, o resultado 3, poderia ser melhor sobre um critério que não era o seu objetivo inicial, e inclusive ter sido descartado.

Trazendo para algo mais próximo do cotidiano de programação: você pode chegar em um resultado em que a performance é muito boa, porém a manutenção fica mais complexa.

Agora o grande poder: caso alguém te questione sobre o motivo de não ter usado o processo para chegar ao Resultado 3, você sabe baseado nos seus critérios.

Isso ainda vai te ajudar a solucionar problemas de uma maneira bastante inteligente, visto que cada nova decisão estará pautada.

## Como exercitar “perguntar” na prática?

**Maneira 1:** sempre questione como tudo é resolvido. Sempre que vejo alguma solução, ferramenta ou até mesmo slogan de um produto de software eu me questiono:

- Qual o motivo de fazerem desta maneira?

- Será que fazem o que estão dizendo?

**Maneira 2:** revisite suas perguntas (e suas respostas). Muitas perguntas, critérios e respostas podem ser temporárias ou atemporais. E bastante interessante revisitá-las, pois tudo pode mudar.

A muito tempo atrás, eu havia testado uma placa para IoT chamada NodeMCU (validado inclusive com várias perguntas). Na época, ela não havia passado nos critérios de uma solução que estava desenvolvendo. Refiz as perguntas recentemente, e tudo havia mudado - e agora ela é uma solução viável.

**Maneira 3:** faça provas de conceitos (proof of concept) (famosas PoCs) daquele aspecto/pergunta que você está buscando uma solução. Qual banco seria o mais adequado para uma aplicação x? Faça uma prova de conceito com seus bancos de dados candidatos respondendo a perguntas que te ajudem a desenvolver sua aplicação e critérios para avaliar os resultados.

Fazemos muitas provas de conceitos dentro da [Formação Fullstack Master](https://go.devpleno.com/fsm?sck=blog) para explorar esta habilidade. Em breve vamos aplicar em todos os nossos treinamentos - pois é uma ferramenta muito poderosa de aprendizado, masterização e argumentativo.

**Maneira 4:** crie o hábito de questionar soluções trazidas por colegas de trabalho e por sua equipe. Importante você deixar claro o motivo das perguntas para não passar por “cri-cri” ou chato. Caso você prefira, você pode guardar as perguntas e potenciais respostas para você como uma forma de praticar esta habilidade (funciona muito bem em cenários que você - por questões hierárquicas não será ouvido - e está tudo bem).

## Antes de encerrar, procure por perguntas de outras pessoas / empresas

Muitas vezes consumimos conteúdos de casos de uso de uma tecnologia x. Ou como uma big tech começou a usar y. Entenda sempre as perguntas que eles fizeram até chegarem a aquelas respostas. Isso vai te ajudar a entender se é viável para todos os cenários ou somente para quando você tem um nível de escalada desta big tech.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=A%20habilidade%20mais%20importante%20que%20um%20programador%20deveria%20ter%20(e%20praticar)&url=https%3A%2F%2Fdevpleno.com%2Fa-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fa-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar)

---

# Porque você não deve abaixar a guarda - DevPleno

URL: https://devpleno.com/abaixar-a-guarda

> A dica de carreira de hoje é sobre apoio. Muitas vezes você está fazendo um projeto na faculdade, por exemplo, e todo mundo fica dizendo coisas boas sobre ...

Carreira

## Porque você não deve abaixar a guarda

T
Por Tulio Faria • 11 de julho de 2017

[Carreira](/tag/carreira)

A dica de carreira de hoje é sobre apoio. Muitas vezes você está fazendo um projeto na faculdade, por exemplo, e todo mundo fica dizendo coisas boas sobre ele, dizendo que você vai ficar muito rico e coisas do tipo… É muito legal quando as pessoas te motivam e você quando recebe essa energia, mas dependendo do tipo de apoio, você vai abaixar sua guarda. Isso significa que você fica mais suscetível a errar e não estar preparado a entrar no mercado.

Vamos supor que você está criando um App e todo mundo só fala bem, o risco disso é você começar a parar de ser crítico com você mesmo. O grande exercício que eu gosto de fazer quando eu estou criando algo é o **“what if”**, e se a opinião dessas pessoas não está viciada, ou e se eles estão querendo me agradar? Esse é o perigo, quando você abaixa a guarda, está desprotegido e para de fazer o **“what if”** porque todos a sua volta estão aprovando essa ideia, porém elas não são o mercado como um todo e sim uma parte muito pequena.

Então minha dica é, independente se você está recebendo menos ou mais apoio, valide bastante sua ideia, pesquise com pessoas que não tem o viés, ou seja, não tem essa opinião muito pessoal sobre o assunto, assim você não abaixa a guarda e não entra despreparado para o mercado de trabalho.

Curta o DevPleno no [Facebook](https://www.facebook.com/devpleno),[inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Porque%20voc%C3%AA%20n%C3%A3o%20deve%20abaixar%20a%20guarda&url=https%3A%2F%2Fdevpleno.com%2Fabaixar-a-guarda) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fabaixar-a-guarda)

---

# Algoritmos: Problema 3n+1 - DevPleno

URL: https://devpleno.com/algoritmo-3n-1

> Criando a solução em Javascript para o Problema 3n+1.Neste post continuamos a série de conteúdos sobre algoritmos. Principalmente sobre tipos de algoritmos...

Algoritmos

## Algoritmos: Problema 3n+1

T
Por Tulio Faria • 19 de fevereiro de 2017

[Algoritmos](/tag/algoritmos)

Criando a solução em Javascript para o Problema 3n+1.Neste post continuamos a série de conteúdos sobre algoritmos. Principalmente sobre tipos de algoritmos que são utilizados em competições de programação e em entrevistas de emprego. O Problema 3n+1 foi retirado do livro Programming Challenges de Miguel Skiena. O objetivo do algoritmo é, dado i e j, como um intervalo de início e fim, achar o maior ciclo. O processo começa processando os valores de n. Se n é um número par, o próximo valor de n será n /2. Caso n seja impar, o próximo valor de n será 3 * n + 1. O algoritmo termina em n = 1. A ideia é calcular o número de passos até que n seja 1. Fazendo este processo entre i e j, e achando o maior número. Neste vídeo, explico um pouco melhor como funciona o algoritmo e como ele foi resolvido.

[Veja no meu Gist](https://gist.github.com/tuliofaria/a92d387b68931d1294fddb1c4e259723)

Não deixe de comentar com sua opinião, sugestão ou dúvida! E cadastre seu e-mail para receber nossas últimas novidades. Abraços!

E aqui o algoritmo completo:

{
function cycleLen(n) {
let steps = 1
while (n !== 1) {
if (n % 2 === 0) {
n = n / 2
} else {
n = 3 * n + 1
}
steps++
}
return steps
}
function maxCycle(i, j) {
let max = cycleLen(i)
for (let k = i + 1; k <= j; k++) {
let currentCycle = cycleLen(k)
if (currentCycle > max) {
max = currentCycle
}
}
return i + ' ' + j + ' ' + max
}
console.log(maxCycle(1, 10))
console.log(maxCycle(100, 200))
console.log(maxCycle(201, 210))
console.log(maxCycle(900, 1000))
}
Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20Problema%203n%2B1&url=https%3A%2F%2Fdevpleno.com%2Falgoritmo-3n-1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmo-3n-1)

---

# Algoritmos: Campo Minado (Minesweeper) - DevPleno

URL: https://devpleno.com/algoritmo-campo-minado-minesweeper

> Continuando nossa série sobre algoritmos que são utilizados em questões de competições/maratonas de programação e em entrevistas, neste post, iremos tratar...

Algoritmos

## Algoritmos: Campo Minado (Minesweeper)

T
Por Tulio Faria • 24 de fevereiro de 2017

[Algoritmos](/tag/algoritmos)

Continuando nossa série sobre algoritmos que são utilizados em questões de competições/maratonas de programação e em entrevistas, neste post, iremos tratar sobre o algoritmo campo minado (minesweeper), retirado do livro Programming Challenges de Miguel Skiena. No vídeo, explico detalhadamente sobre o algoritmo e como resolvê-lo.

const input = \`4 4
\*...
....
.\*..
....
3 5
\*\*...
.....
.\*...
0 0\`

let lines = input.split('\\n')

let current = 0
let currentField = 1

function minesweeper(field, numCols){
let filledField = \[\]
const len = field.length
for(let i = 0; i<len; i++){
let line = \[\]
for(let k=0; k<numCols; k++){
if(field\[i\].charAt(k)==='\*'){
line.push('\*')
}else{
line.push(0)
}
}
filledField.push(line)
}
for(let i = 0; i<len; i++){
for(let k=0; k<numCols; k++){
if(filledField\[i\]\[k\]!=='\*'){
if(i>0){
if(k>0){
if(filledField\[i-1\]\[k-1\]==='\*'){
filledField\[i\]\[k\]++
}
}
if(filledField\[i-1\]\[k\]==='\*'){
filledField\[i\]\[k\]++
}
if(k+1<numCols){
if(filledField\[i-1\]\[k+1\]==='\*'){
filledField\[i\]\[k\]++
}
}
}

if(k>0){
if(filledField\[i\]\[k-1\]==='\*'){
filledField\[i\]\[k\]++
}
}
if(k+1<numCols){
if(filledField\[i\]\[k+1\]==='\*'){
filledField\[i\]\[k\]++
}
}

if(i+1<len){
if(k>0){
if(filledField\[i+1\]\[k-1\]==='\*'){
filledField\[i\]\[k\]++
}
}
if(filledField\[i+1\]\[k\]==='\*'){
filledField\[i\]\[k\]++
}
if(k+1<numCols){
if(filledField\[i+1\]\[k+1\]==='\*'){
filledField\[i\]\[k\]++
}
}
}
}
}
}
for(let i=0; i<len; i++){
console.log(filledField\[i\].join(''))
}
console.log('')
}

do{
line = lines\[current++\]
let nums = line.split(' ')
if(nums.length===2){
const numLines = parseInt(nums\[0\])
const numCols = parseInt(nums\[1\])
if(numLines!==0 && numCols!==0){
console.log('Field #'+currentField+':')
minesweeper(lines.slice(current, current+numLines), numCols)
currentField++
}
}
}while(line !== '0 0')
Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20Campo%20Minado%20(Minesweeper)&url=https%3A%2F%2Fdevpleno.com%2Falgoritmo-campo-minado-minesweeper) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmo-campo-minado-minesweeper)

---

# Algoritmos: Contar números negativos - DevPleno

URL: https://devpleno.com/algoritmos-contar-numeros-negativos

> Continuando nossa série sobre algoritmos que caem em entrevistas e competições, neste vídeo falo sobre Contar Números Negativos, que já caiu em entrevistas...

Algoritmos

## Algoritmos: Contar números negativos

T
Por Tulio Faria • 3 de março de 2017

[Algoritmos](/tag/algoritmos)

Continuando nossa série sobre algoritmos que caem em entrevistas e competições, neste vídeo falo sobre Contar Números Negativos, que já caiu em entrevistas da Amazon. Então fique ligado no vídeo:

confira o codigo abaixo:

const input = [[-3, -2, -1, 1],
[-2, 2, 3, 4],
[4, 5, 7, 8]]

function countNegative(input) {
let line = 0
let column = input[line].length - 1
let count = 0
while (line < input.length && column >= 0) {
if (input[line][column] < 0) {
count += column + 1
line++
} else {
column--
}
}
console.log(input[line][column])
}

countNegative(input[line][column])
Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20Contar%20n%C3%BAmeros%20negativos&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-contar-numeros-negativos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-contar-numeros-negativos)

---

# Algoritmos: Cyclic Rotation - DevPleno

URL: https://devpleno.com/algoritmos-cyclic-rotation

> Este é mais um vídeo da série algoritmos, na qual explico sobre algoritmos que frequentemente caem em entrevistas de emprego e competições de programação. ...

Algoritmos

## Algoritmos: Cyclic Rotation

T
Por Tulio Faria • 14 de março de 2017

[Algoritmos](/tag/algoritmos)

Este é mais um vídeo da série algoritmos, na qual explico sobre algoritmos que frequentemente caem em entrevistas de emprego e competições de programação. Desta vez, comento sobre o Cyclic Rotation.

## Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20Cyclic%20Rotation&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-cyclic-rotation) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-cyclic-rotation)

---

# Algoritmos: Odd Occurrences in Array - DevPleno

URL: https://devpleno.com/algoritmos-odd-occurrences-array

> Neste vídeo, comento sobre o algoritmo Odd Occurrences in Array, disponível no Codility. O interessante deste algorítimo é mantermos a complexidade em O(n)...

Algoritmos

## Algoritmos: Odd Occurrences in Array

T
Por Tulio Faria • 13 de março de 2017

[Algoritmos](/tag/algoritmos)

Neste vídeo, comento sobre o algoritmo Odd Occurrences in Array, disponível no Codility. O interessante deste algorítimo é mantermos a complexidade em O(n). Confira no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20Odd%20Occurrences%20in%20Array&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-odd-occurrences-array) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-odd-occurrences-array)

---

# Algoritmos: PermMissingElement - DevPleno

URL: https://devpleno.com/algoritmos-permmissingelement

> Continuando nossa série sobre algoritmos que caem em entrevistas de emprego e competições de programação, neste vídeo, explico sobre o Algoritmo PermMissin...

Algoritmos

## Algoritmos: PermMissingElement

T
Por Tulio Faria • 15 de março de 2017

[Algoritmos](/tag/algoritmos)

Continuando nossa série sobre algoritmos que caem em entrevistas de emprego e competições de programação, neste vídeo, explico sobre o Algoritmo PermMissingElement.

## Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20PermMissingElement&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-permmissingelement) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-permmissingelement)

---

# Algoritmos: XOR Swap - DevPleno

URL: https://devpleno.com/algoritmos-xoe-swap

> A dica de hoje é sobre o operador XOR, que eu achei bem interessante. Estava estudando outra coisa e apareceu essa informação, então resolvi checar e realm...

Algoritmos

## Algoritmos: XOR Swap

T
Por Tulio Faria • 4 de agosto de 2017

[Algoritmos](/tag/algoritmos)

A dica de hoje é sobre o operador XOR, que eu achei bem interessante. Estava estudando outra coisa e apareceu
essa informação, então resolvi checar e realmente faz muito sentido.

Imagine que temos duas variáveis:

let a = 3

let b = 4
Eu quero simplesmente colocar A em B e B em A, geralmente faríamos uma variável TMP, colocaríamos A,
colocaríamos A = B e em seguida B = TMP:

let TMP = a

a = b

b = TMP
Precisamos de mais uma variável para conseguir fazer essa troca. Se a gente quisesse fazer utilizando o XOR, é possível:

a = a ^ b

b = a ^ b

a = a ^ b

console.log(a, b)
Com isso conseguimos inverter os valores, essa é uma forma diferente de fazer troca de valores. Algo que acho muito legal na nossa área é quando começamos a pegar operadores que nem são tão famosos, como o XOR mesmo, e começamos a ter alguns usos incomuns.

Imaginamos que em binário seria:

3 | 011

4 | 100
Então no primeiro XOR nós teriamos de resultado o 1

a | 111
Agora vamos pegar nosso x que agora é o valor de A e fazer com o B:

a | 111

4 | 100
Nosso resultado sera:

b | 011
Agora faremos um terceiro XOR com o A:

b | 011

a | 111
E o resultado será:

a | 100
Perceba que o A agora é 100, que é 4, e o B ficou com 011, que é 3. O legal é que se formos lembrar daquele algoritmo que fizemos de achar os pares que estão faltando, é o mesmo caso porque a medida que nós aplicamos duas vezes o mesmo número, em cima nós removemos, então podemos adicionar ele com outro e tirar o que não queremos. Resumindo, colocamos em A a soma de A com B, em B nós somamos B novamente.

Obviamente ele só funciona com tipos de variáveis numéricas e do mesmo tipo, no nosso exemplo são dois inteiros.

## Confira o vídeo:

E Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Algoritmos%3A%20XOR%20Swap&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-xoe-swap) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-xoe-swap)

---

# Vídeo sobre Algoritmos: XOR Swap - DevPleno

URL: https://devpleno.com/algoritmos-xor-swap

> O XOR é um operador bem versátil e uma coisa que gosto bastante é de estudar e analisar formas alternativas de utilização destes operadores. Neste vídeo mo...

Algoritmos

## Vídeo sobre Algoritmos: XOR Swap

T
Por Tulio Faria • 31 de março de 2017

[Algoritmos](/tag/algoritmos)

O XOR é um operador bem versátil e uma coisa que gosto bastante é de estudar e analisar formas alternativas de utilização destes operadores. Neste vídeo mostro como é possível usar o XOR para trocar variáveis de lugar além de explorar o porquê isso acontece. Confira!

## Confira o vídeo:

E Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=V%C3%ADdeo%20sobre%20Algoritmos%3A%20XOR%20Swap&url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-xor-swap) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Falgoritmos-xor-swap)

---

# Animação basica em CSS3 - DevPleno

URL: https://devpleno.com/animacao-basica-css3

> Recentemente eu estava planejando e desenvolvendo a interface para o curso de Socket.io, e como ela terá algumas animações à medida em que os dados chegam ...

Fundamentos

## Animação basica em CSS3

T
Por Tulio Faria • 22 de maio de 2017

[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)

Recentemente eu estava planejando e desenvolvendo a interface para o curso de Socket.io, e como ela terá algumas animações à medida em que os dados chegam em tempo real, resolvi voltar a estudar CSS3, algo que há tempos não utilizo.

Às vezes ficamos focando em um navegador mais novo e esquecemos que algumas coisas podemos utilizar sem o Javascript, apenas com CSS. Vou criar uma pequena página HTML, um pouco de CSS e Javascript apenas para poder controlar a class:

.hello{
border:2px solid grey;
transition: all 3s;
}
.hello-active{
border:2px solid red;
background: grey;
}
<body>
<div class="hello">
Olá!
</div>
<script>
const node = document.querySelector('.hello')
node.addEventListener('click', function(){
this.classList.add('hello-active');
})
</script>
</body>
O que o transition faz? Ele fala basicamente assim, “qualquer transição que você fizer envolvendo essa classe vai ter uma animação de X segundos”. Apenas a propriedade transition já é possível fazer muita coisa.

No caso acima, ao clicar, a borda grey muda para red e o background grey em uma transição que dura 3 segundos. Também podemos fazer uma animação ‘ao contrário’, fazendo ele voltar ao estado original adicionando ao script a seguinte linha:

<script>
const node = document.querySelector('.hello')
node.addEventListener('click', function(){
this.classList.add('hello-active');
})
node.addEventLiestener('transitionend', function(){
this.classList.remove('hello-active');
})
</script>
O evento transitionend faz com que, ao terminar o tempo determinado, remova do classList a class. Isso faz com que o CSS volte ao seu estado inicial em uma transição de ‘vai e volta’. Podemos também adicionar animação em hover:

.hello.hover{
background: green;
}
Como grande parte dos navegadores suporta CSS3 atualmente, conseguimos fazer tudo com ele, pelo menos para alguns tipos de aplicativos. Tudo isso utilizando apenas o transition, sem precisar utilizar Jquery. Confira os detalhes no vídeo:

Não perca nenhuma atualização. Cadastre seu e-mail, curta o [DevPleno no Facebook](https://www.facebook.com) e [inscreva-se no canal](https://goo.gl/VBU2PR). Deixe suas dúvidas e sugestões nos comentários.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Anima%C3%A7%C3%A3o%20basica%20em%20CSS3&url=https%3A%2F%2Fdevpleno.com%2Fanimacao-basica-css3) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fanimacao-basica-css3)

---

# Como fazer anotações em eventos - DevPleno

URL: https://devpleno.com/anotacoes-em-eventos

> Quando vamos em um evento é muito legal que vamos anotando tudo, então tem várias ideias, conteúdo, etc, coisas que você nem sabe como vai converter isso e...

Carreira

## Como fazer anotações em eventos

T
Por Tulio Faria • 19 de julho de 2017

[Carreira](/tag/carreira)

Quando vamos em um evento é muito legal que vamos anotando tudo, então tem várias ideias, conteúdo, etc, coisas que você nem sabe como vai converter isso em execução. A dica de hoje é uma maneira sobre como anotar o que ouvir durante um evento para que possa aproveitar melhor isso depois.

Eu fui a um evento um tempo atrás e recebi essa dica, e ela mudou totalmente a forma de como tomei nota das coisas, hoje eu basicamente trago as anotações e conteúdo já com as ideias separadas.

Quando você for tomar nota em eventos ou até mesmo em uma aula, ao invés de anotar ideias que você tem durante a aulas e o conteúdo junto, você fará o seguinte, se for um caderno por exemplo, você vai pegar a página esquerda e anotar somente o conteúdo e na página direita, vai anotar as ideias que teve a partir do conteúdo da página da esquerda.

Essa dica é tão simples quanto isso, mas o efeito prático disso é enorme, afinal quando você voltar para sua casa para relembrar as notas, você sabe que de um lado é só conteúdo. Se alguém te pedir as anotações da palestra você passa apenas o lado esquerdo, já que do outro lado são coisas que você pode aplicar no seu dia a dia ou no dia a dia da sua empresa.

Isso é muito poderoso, antigamente eu misturava tudo e quando eu voltava para casa eu tinha que garimpar as anotações para achar algo de valor e esse tempo perdido me serve para outras coisas.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20fazer%20anota%C3%A7%C3%B5es%20em%20eventos&url=https%3A%2F%2Fdevpleno.com%2Fanotacoes-em-eventos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fanotacoes-em-eventos)

---

# Aplicação Web - Entendendo Back-end e Front-end - DevPleno

URL: https://devpleno.com/aplicacao-web

> Uma Aplicação Web sempre é composta por dois "blocos": o frontend e o backend. Podemos classificar nossas tecnologias, arquiteturas, etc baseado nessas dua...

Fundamentos

## Aplicação Web - Entendendo Back-end e Front-end

T
Por Tulio Faria • 12 de maio de 2017

[Fundamentos](/tag/fundamentos)

Uma Aplicação Web sempre é composta por dois “blocos”: o front-end e o back-end. Podemos classificar nossas tecnologias, arquiteturas, etc baseado nessas duas separações. É comum ouvir dizer também que o beck-end é Server Side, e o front-end Client Side.

**O que é back-end?**

São todas as tecnologias que rodam em um “Servidor”, uma ou mais maquinas.

**E o front-end?**

Ele é tudo que roda do lado cliente, ou seja, o que o usuário final vê.

Para a parte do cliente, geralmente temos o Navegador (browser), ele faz o Request para o servidor ou tecnologia back-end. (_Apenas esclarecendo, o request é o front-end pedindo alguma coisa ao back-end, por exemplo, uma página, uma imagem, por aí vai).

A primeira comunicação sempre é feita do Front-end para o Beck-end. Por exemplo, ao entrar no site [[www.devpleno.com](http://www.devpleno.com)]
([https://www.devpleno.com](https://www.devpleno.com)) seu navegador faz uma requisição à máquina que está o servidor devpleno, com isso o server irá mandar uma resposta (response) para o navegador, que é nosso front-end. Essa comunicação é chamada de request-response, pois tudo é baseado nisso, entre a requisição do front, resposta do server.

**Quais tecnologias temos para cada tipo?**

Algumas tecnologias front-end são: HTML, Javascript, CSS. Temos tembem alguns assets como imagem e PDF, eles são alguns arquivos que precisamos para funcionar o front-end. Antigamente existia o Flash e o Java Applet, mas hoje em dia estão em desuso por causa do HTML5.

Ja do lado Server side temos N tecnologias, tais como: PHP, ASP, JAVA, NodeJS, C#, Python, C++, etc. Além disso, podemos também ter banco de dados.

O lado back-end, é o lado que, se não for padronizado a WEB, continuará normal, mas já o lado do front tivemos que ter uma padronização, por esse motivo temos um número reduzido de tecnologias, ela é padronizada pelo W3C, já que ali está a maior parte dos usuários e diversidade de dispositivos que vão usar o client side para acessar o server side. Já o Server side tem a função de devolver algo padronizado para o cliente.

Confira a explicação no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Aplica%C3%A7%C3%A3o%20Web%20-%20Entendendo%20Back-end%20e%20Front-end&url=https%3A%2F%2Fdevpleno.com%2Faplicacao-web) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Faplicacao-web)

---

# Aprenda a aprender - DevPleno

URL: https://devpleno.com/aprenda-a-aprender

> Nesta dica de carreira, vou contar como podemos aprender mais. O ponto mais importante de quando estamos aprendendo algo novo, seja uma tecnologia, uma lin...

Carreira

## Aprenda a aprender

T
Por Tulio Faria • 12 de julho de 2017

[Carreira](/tag/carreira)

Nesta dica de carreira, vou contar como podemos aprender mais. O ponto mais importante de quando estamos aprendendo algo novo, seja uma tecnologia, uma linguagem ou qualquer outra coisa, é tentar achar a melhor forma para aprender.

Muita gente me diz “eu não consigo ler um livro e entender o que está no livro”, existe uma teoria que se chama a teoria das múltiplas inteligências, na qual diz que cada um tem uma combinação de tipos de inteligência, então você pode ter facilidade para algumas coisas e dificuldades para outras, isso é normal e você consegue praticar uma ou outra.

Quando você aprende o jeito que você aprende fica muito mais fácil. Por exemplo, para eu aprender algo, preciso fazer um paralelo com a aplicação prática disso, se eu quero aprender uma teoria sobre algo, tento trazer para qual a aplicação prática eu tenho e como eu posso aplicar isso na prática. No ensino médio, quando estava aprendendo geometria, eu já programava, então tentava trazer para o mundo que eu gostava, programava jogo, por exemplo, aplicando isso. São coisas que não esqueço mais porque eu aprendi como aprender de uma forma mais efetiva.

Vamos supor que você tenha uma facilidade maior de aprender ouvindo, então tudo que você tem que aprender, leia e grave em um gravador, depois ouça sua própria voz lendo esse conteúdo. Gosta de vídeos? Então ache vídeos no YouTube e assista para absorver da melhor forma possível.

Uma outra forma que me ajuda bastante é, ao invés de eu ler um texto longo, separar por tópicos, organizar em causa e efeito, com isso uma mapa mental me ajuda bastante a organizar a informação.

A dica de hoje é experimente formatos diferentes quando você está aprendendo algo, pode ser que você está tentando aprender da maneira que não é bom para você. Cada um aprende de uma maneira, encontre a sua!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Aprenda%20a%20aprender&url=https%3A%2F%2Fdevpleno.com%2Faprenda-a-aprender) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Faprenda-a-aprender)

---

# Aprenda a dizer NÃO! - DevPleno

URL: https://devpleno.com/aprenda-a-dizer-nao

> Uma das coisas que eu aprendi ultimamente é dizer NÃO. Se alguma coisa não me agrada, não faz bem para minha empresa ou não está de acordo com o que eu que...

Carreira

## Aprenda a dizer NÃO!

T
Por Tulio Faria • 7 de julho de 2017

[Carreira](/tag/carreira)

Uma das coisas que eu aprendi ultimamente é dizer NÃO. Se alguma coisa não me agrada, não faz bem para minha empresa ou não está de acordo com o que eu quero para minha vida, eu simplesmente digo não. Por exemplo, eu me nego a pegar um serviço que não está alinhado ao meu objetivo maior e isso fez uma diferença muito grande para minha empresa. Ao invés de pegar projetos igual um louco, eu pego somente os projetos que fazem sentido para minha empresa.

Muitas vezes a gente pega algumas coisas para estudar que não faz sentido para nós, temos que dizer não para nós mesmos. Se você tem N projetos que acha que não vai dar em nada, precisa dizer não, afinal está perdendo tempo e energia.

Uma coisa que achei muito interessante foi uma das conversas que eu tive no mestrado com alguns colegas. Um deles estava reclamando que não gostava do tema do mestrado dele e que não sabia o que fazer porque não estava produzindo, já que não se dava bem com o tema. O que foi unânime na mesa foi dizer “Você não está na idade de falar sim para tudo, se você não gostou desse tema, está na hora de falar que não quer continuar.”

Quando eu era mais novo, por exemplo, não gostava de balada, então quando as pessoas me convidavam eu não sabia falar não e ia porque simplesmente não me aceitava como eu era, e me sentia péssimo, porque não era algo que eu gostava ou queria fazer. Quando você vai ficando um pouco mais velho, começa a aprender a falar não.

Já está mais do que na hora de aprender e descobrir o que você gosta, chega de aceitar tudo, se algo não está indo bem, fale, se seu chefe faz algo que você não gosta fale para ele, converse e explique.

Outra coisa interessante também é você comemorar seus ”nãos”. Se você conseguiu dar um não em algo que não te fazia bem ou não era o seu objetivo, comemore essa escolha. Uma lição que eu aprendi com a minha mãe é que quando você diz não, não fique remoendo isso. Se teve uma chance de ir para uma empresa e se recusou, não fique olhando mais para trás, afinal você tomou a decisão e acabou.

A alguns meses atrás eu disse não para morar em Amsterdã, eu tinha passado no processo seletivo do Booking e disse não porque não estava alinhado com o meu objetivo de vida para aquele momento, mesmo tendo uma oportunidade de vida no exterior. Essa foi uma lição que mudou muito a minha vida, hoje minha empresa fatura 6 vezes mais do que estava quando eu fiz essa transformação.

Então pense nisso. Essa dica pode mudar a sua vida!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Aprenda%20a%20dizer%20N%C3%83O!&url=https%3A%2F%2Fdevpleno.com%2Faprenda-a-dizer-nao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Faprenda-a-dizer-nao)

---

# Apresentação em HTML - DevPleno

URL: https://devpleno.com/apresentacao-em-html

> Neste vídeo, explico como você pode criar apresentação de slides em HTML, uma alternativa às apresentações tradicionais em Power Point!  Confira o vídeo: <...

Javascript

## Apresentação em HTML

T
Por Tulio Faria • 9 de março de 2017

[Javascript](/tag/javascript)

Neste vídeo, explico como você pode criar apresentação de slides em HTML, uma alternativa às apresentações tradicionais em Power Point!

## Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Apresenta%C3%A7%C3%A3o%20em%20HTML&url=https%3A%2F%2Fdevpleno.com%2Fapresentacao-em-html) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fapresentacao-em-html)

---

# Arrow Functions - Construindo funções anônimas de forma mais simplificada - DevPleno

URL: https://devpleno.com/arrow-functions

> As Arrow Functions são uma maneira mais simples ou menor de construir funções anônimas. foi uma novidade no ES6, e hoje todo mundo já está utilizando basta...

Fundamentos

## Arrow Functions - Construindo funções anônimas de forma mais simplificada

T
Por Tulio Faria • 2 de agosto de 2017

[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)

As Arrow Functions são uma maneira mais simples ou menor de construir funções anônimas. foi uma novidade no ES6, e hoje todo mundo já está utilizando bastante. Então, no modo anterior, tínhamos:

const funct1 = function (param1) {}
Se fossemos construir isso com uma Arrow Function, poderíamos fazer simplesmente isso:

const funct1 = (param) => {}
**Por que ela se chama Arrow Function?**

Porque a definimos utilizando uma arrow. É a mesma funcionalidade, mas com uma arrow, existe apenas uma particularidade que vou mostrar para você. Quando temos algo com um cenário acima, chamamos essa arrow function de statement, ou seja, ela tem instruções dentro do corpo dela, por isso ela tem a chave. Temos um outro tipo de arrow function que é a seguinte:

const2 = function (valor) {
return valor * 2
}
Se quisermos criar uma Arrow Function nesse sentido, precisamos passar também o valor, mas podemos fazer apenas isso:

const funct2 = (valor) => valor * 2
Chamamos esse tipo de Expression Body, afinal o corpo dela é uma expressão. Perceba como fica bem mais simples. Vamos supor que eu tenha um vetor e eu quero fazer um map:

const vetor = [1, 2, 3]

vetor.map((valor) => valor * 2)
A única diferença em relação ao function, no primeiro caso quando criamos uma function, ele cria um contexto novo, então se eu tivesse uma variável dentro, o contexto é o da função. Caso eu use this, vou estar referenciando a function, quando eu faço this dentro de uma arrow function, estou referenciando um contexto externo. Então, se eu estiver com duas funções, uma dentro da outra, o this irá referenciar o contexto global, logo ela não tem esse this que é somente dela, e sim é atrelada ao contexto do pai. Vamos supor que existe um botão em react e ele está dentro de um render:

class Componente extends Component{

loadData(){
//anything
}

render(){
return(
&#x3C;button onClick={() => this.loadData()}
)
}
}
Se eu quisesse chamar o loadData dentro do render, eu posso fazer um this dentro sem problema algum. Reparem que estou utilizando uma arrow function e existe um this dentro dela, mas esse this referencia o component de fora. Isso é muito útil porque reduz muito. Anteriormente tínhamos que travar uma variável no contexto de cima para depois poder referenciar dentro da função anônima:

render(){

var that = this

return(
&#x3C;button onClick={() => that.loadData()}
)
}
Já com a Arrow Function não é mais necessário porque o contexto já é o contexto do pai e isso facilitou bastante na construção de códigos mais legíveis. Lembrando que nós temos as Expression Body, que são funções com apenas uma expressão no corpo e a Statement Body, em que existem instruções dentro do corpo. Confira a explicação em vídeo:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Arrow%20Functions%20-%20Construindo%20fun%C3%A7%C3%B5es%20an%C3%B4nimas%20de%20forma%20mais%20simplificada&url=https%3A%2F%2Fdevpleno.com%2Farrow-functions) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Farrow-functions)

---

# Árvore Binária em JavaScript - DevPleno

URL: https://devpleno.com/arvore-binaria

> Continuando o assunto sobre alguns algoritmos que utilizamos em computação em geral, neste port falaremos sobre árvore binária, uma estrutura de dados que ...

Algoritmos

## Árvore Binária em JavaScript

T
Por Tulio Faria • 3 de julho de 2017

[Algoritmos](/tag/algoritmos)

Continuando o assunto sobre alguns algoritmos que utilizamos em computação em geral, neste port falaremos sobre árvore binária, uma estrutura de dados que me fascina bastante pela versatilidade.

Então vamos implementar uma árvore, ainda não será uma árvore de busca, e vamos fazer o algoritmo base para navegar nessa árvore porque envolve recursividade. Por definição, a árvore binária tem o nó da esquerda, direita e o valor no elemento:

let arvore = {
left: undefined,
right: undefined,
value: 10
}
A regra de navegação que temos na árvore é baseada em como a gente passa nesses nós. Então vamos criar, por exemplo, uma função que chamamos de pré order. Ela imprime o valor, vai para a esquerda e depois para a direita.

function preOrder(tree) {
console.log(tree.value)

preOrder(tree.left)
preOrder(tree.right)
}
Perceba que passamos a tree recursivamente para o lado esquerdo e em seguida para o direito.

**Por que ele se chama preOrder?**

Porque ele vem primeiro de tudo. Por isso ele é diferente o inOrder e o poOrder que vem no meio e no final da navegação respectivamente. Podemos checar se o ‘preOrder(tree.left)’ e o ‘preOrder(tree.right)’ são vazios por exemplo:

function preOrder(tree) {
console.log(tree.value)

tree.left &#x26;&#x26; preOrder(tree.left)
tree.right &#x26;&#x26; preOrder(tree.right)
}

console.log('preOrder')

preOrder(arvore)
Se ele é um dos valores que é convertido para verdadeiro, consequentemente, tem algo dentro, então ele vai navegar para o lado esquerdo. Se acontecer o mesmo depois, ele navegará para o lado direito. Ao somar o preOrder e passar a árvore, ele imprime o valor 10.

Vamos colocar algum valor do lado esquerdo:

let arvore = {
left: {
left: undefined,
right: {
value: 3
},
value: 2
},
right: undefined,
value: 10
}
Ele imprimirá 10,2 e 3, o que está correto porque ele imprimiu o nó principal que é 10, depois ele foi para a esquerda, imprime o 2, como na esquerda não tem nada. ele vai para a direita e imprime o 3, depois vai para a próxima direita e não imprime nada pois esta como undefined. Esse é o preOrder, agora vamos testar o inOrder:

function inOrder(tree) {
tree.left &#x26;&#x26; inOrder(tree.left)

console.log(tree.value)

tree.right &#x26;&#x26; inOrder(tree.right)
}

console.log('inOrder')

inOrder(arvore)
A diferença é que o console.log virá no meio.

Perceba que o inOrder vai para a esquerda primeiro, tenta ir novamente para a esquerda, não acha nada, ai ele visita o nó 2, vai para a direita, tenta ir para a esquerda e não consegue, visita o nó 3, vai para a direita e não tem nada, volta, imprime o nó 10 e por fim tenta ir para a direita e está undefined.

O mais importante é que guardamos os tipos de navegação da seguinte forma, preOrder escreve primeiro, inOrder escreve no meio e o posOrder escreve no final.

Outra coisa importante é que como ele é recursivo eu preciso saber qual o meu passo base, que é o passo onde nenhum dos dois vão ser executados, ou seja, quando chegar no left e no right não ter mais ninguém para navegar.

Com JavaScript fica muito simples a navegação em árvore, perceba que construímos a navegação com um Object normal, posteriormente vamos ver inserção e tudo mais em árvores de busca, onde colocamos o elemento menor para o lado esquerdo e o maior para o lado direito.

Confira todo a explicação no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=%C3%81rvore%20Bin%C3%A1ria%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Farvore-binaria) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Farvore-binaria)

---

# Árvore Binária de Busca em JavaScript - DevPleno

URL: https://devpleno.com/arvore-binaria-de-busca

> Hoje vamos falar mais sobre árvores binárias, porém um tipo específico, a árvore binária de busca. Qual a diferença da árvore binária de busca para a árvor...

Algoritmos

## Árvore Binária de Busca em JavaScript

T
Por Tulio Faria • 3 de julho de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos falar mais sobre árvores binárias, porém um tipo específico, a árvore binária de busca.

**Qual a diferença da árvore binária de busca para a árvore binária normal?**

Na normal, simplesmente inserimos os nós dentro da árvore sem garantir nenhuma regra, já a de busca segue a seguinte regra:

Temos a raiz e inserimos um valor nessa raiz. Quando inserimos o segundo valor, se for maior que a raiz, ele fica à direita, se ele for menor, ficará à esquerda. Com isso conseguimos fazer muitas outras operações utilizando essa árvore binária.

Primeiramente vamos fazer a inserção em uma árvore binária de busca. Para fazermos isso, temos que checar se essa árvore tem algum valor, depois verificamos se ele é maior ou menor para inserirmos para left ou right.

const arvore = {}

function insert(tree, value) {
if (tree.value) {
if (value > tree.value) {
insert(tree.right, value)
} else {
insert(tree.left, value)
}
} else {
tree.value = value

tree.right = {}

tree.left = {}
}
}

insert(arvore, 10)

console.log(arvore)
Se não for inserido o tree.value, vai ser igual a value, o tree.right e tree.left serão árvores vazias. Eu estou definindo isso porque quando inserirmos podemos passar uma árvore vazia no insert e ele continua fazendo isso de forma recursiva. Colocando o valor 10, perceba que será retornado: Se inserirmos, por exemplo, um valor 11 em seguida:

insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)
Será retornado o seguinte:

Agora vamos colocar o valor 9:

insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)

insert(arvore, 9)

console.log(arvore)
Será retornado o seguinte: Na primeira inserção, retorna 10, na segunda 10 e 11 e na terceira 10, 11 e 9, sendo 11 do lado direito, 9 do lado esquerdo e 10 nossa raiz. Vamos colocar um 8 agora:

insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)

insert(arvore, 9)

console.log(arvore)

insert(arvore, 8)

console.log(arvore)
O resultado será:

Com o 8 agora temos 10 na raiz, 11 do lado direito, do lado esquerdo 9 e do lado esquerdo do lado esquerdo 8.

Com isso conseguimos fazer o algoritmo de inserção na árvore de busca. É importante ressaltar que isso não é programação funcional, já que não estamos retornando uma nova árvore. Fiz isso apenas para mostrar que boa parte dos algoritmos que fazemos em C ou alguma linguagem que vemos na graduação utilizam a passagem por referência.

Confira o passo a passo no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=%C3%81rvore%20Bin%C3%A1ria%20de%20Busca%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Farvore-binaria-de-busca) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Farvore-binaria-de-busca)

---

# NodeJS Primeiros Passos Assíncrono - DevPleno

URL: https://devpleno.com/assincrono

> Uma das grandes características do Javascript/NodeJS é seu assincronismo. Isso é muito importante, pois há um grande ganho de performance principalmente qu...

Javascript

## NodeJS Primeiros Passos Assíncrono

T
Por Tulio Faria • 5 de agosto de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Uma das grandes características do Javascript/NodeJS é seu assincronismo. Isso é muito importante, pois há um grande ganho de performance principalmente quando temos aplicações IO Intensive (praticamente todas atualmente são assim). Veja neste vídeo um exemplo entre um script síncrono e um assíncrono!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%20Ass%C3%ADncrono&url=https%3A%2F%2Fdevpleno.com%2Fassincrono) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fassincrono)

---

# Async - Como Controlar Operações Assíncronas - DevPleno

URL: https://devpleno.com/async

> O Async é um módulo que nos ajuda a controlar processamento assíncrono. Primeiramente temos que instalar o async: Outro detalhe é que eu tenho 2 arquivos d...

Javascript

## Async - Como Controlar Operações Assíncronas

T
Por Tulio Faria • 30 de julho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

O Async é um módulo que nos ajuda a controlar processamento assíncrono. Primeiramente temos que instalar o async:

npm install async
Outro detalhe é que eu tenho 2 arquivos de texto, um escrito “arquivo 1” e o outro “arquivo 2”, vamos usá-los posteriormente.

Se você lembra bem, no exemplo de promises, nós escrevemos 2 arquivos e concatenou o conteúdo desses arquivos. Aqui vou fazer um exemplo um pouquinho diferente. Vou criar um vetor com o nome dos arquivos dentro:

var fs = require('fs')

var async = require('async')

var files = ['arquivo1.txt', 'arquivo2.txt']
Vamos supor que eu tenha que ler 100 arquivos de log e processá-los, então são 100 arquivos, um atrás do outro, de operações assíncronas, esse é o grande detalhe do que vamos fazer agora. Se fosse uma linguagem síncrona, seria muito fácil.

async.each(files, function (file, callback) {
fs.readFile(file, 'utf-8', function (err, contents) {
console.log(contents)

callback(null)
})
})
Para cada arquivo, ele irá executar uma vez o código acima, quando ele retornar o conteúdo vou escrever na tela e o async espera que você o avise quando terminou esse processamento, então temos que chamar esse callback. Nele passamos null, mas também podemos passar um error, que é o padrão de callback no Node, se esse Error for Null significa que não deu erro nenhum.

Ao rodar o arquivo, vai ser retornado arquivo1 e arquivo2. Pode acontecer do arquivo 1 terminar mais rápido que o arquivo 2 porque não estamos impondo nenhuma ordem. Para o async não importa, ele vai executar todos, mas vai respeitar a ordem das operações de IO que vão sendo resolvidas.

Um detalhe é que ele abre isso de forma paralela, então o ‘each’ é para otimizar pode abrir ao mesmo tempo. Para forçar a abrir um de cada vez, faremos o seguinte:

async.eachSeries(files, function (file, callback) {
fs.readFile(file, 'utf-8', function (err, contents) {
console.log(contents)

callback(null)
})
})
Agora garantimos que ele vai abrir um após o outro.

O async é muito bom para fazermos esse tipo de processamento, por exemplo, podemos fazer uma busca no banco, retornar uma sequência de registros e fazer um outro processamento com esse resultado de forma assíncrona.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Async%20-%20Como%20Controlar%20Opera%C3%A7%C3%B5es%20Ass%C3%ADncronas&url=https%3A%2F%2Fdevpleno.com%2Fasync) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fasync)

---

# ES6 - Async/Await - DevPleno

URL: https://devpleno.com/async-await

> Olá! Neste post, falo sobre o Async/Await, uma funcionalidade que vem com o ES6 e é possível ser utilizada no Node, permitindo o aumento da qualidade do no...

Javascript

## ES6 - Async/Await

T
Por Tulio Faria • 5 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Olá!
Neste post, falo sobre o Async/Await, uma funcionalidade que vem com o ES6 e é possível ser utilizada no Node, permitindo o aumento da qualidade do nosso código.
Obs: A versão do Node que estou rodando é a 7.7.3.
O Async/Await, assim como um generator, depende de uma promise para funcionar.

const fs = require('fs')
const readFilePromise = (filename) => new Promise((resolve, (reject = {})))
Com isso, transformamos uma função callBack, que segue a forma do Node tradicional, em uma promise, criando uma Arrow Funciton Filename, que retornará uma new Promise, passando uma nova Arrow Function para ela com resolve e reject.

**Como fazemos isso?**

Chamaremos então um readFile comum no Node, passando o nome do arquivo desejado. Em seguida, recebemos o callBack passando uma arrow function e, caso existir um erro e não for vazio, ele irá rejeitar e envia esse erro. Caso tenha dado tudo certo, será enviado o data para o solicitante:

const fs = require('fs')
const readFilePromise = (filename) => new Promise((resolve, reject = {
fs.readFile(filename, (err, data) => {
if(err){
reject(err)
} else {
resolve(data)
}
}
}))
Com o Arrow Function, fica muito mais simples como vocês podem ver. Para verificarmos se esta tudo OK fazemos:

readFilePromise('arquivo.js').then((data) => console.log(data.toString()))
Depois de testado, vamos lá. Crie uma function que terá um Async, ele irá ler o conteúdo do arquivo, e este arquivo vai ter um Await que lerá o arquivo.js:

async function read() {
const contents = await readFilePromise('arquivo.js')
console.log(contents.toString())
}
Quando o código for executado, ele vai chegar até o await e vai parar até a promise ser resolvida, então vai retornar o que tiver dentro do arquivo para dentro do contents.

**Para que serve?**

Com isso, podemos, por exemplo, ler 2 arquivos seguidos apenas adicionando um novo Await no código. Dois detalhes importantes: 1. Se formos usar o Await dentro de uma função, eu tenho que marcar esta function como Async. 2. Caso haja uma rejeição da promise, o node irá retornar o erro, mas com o código quebrado, com isso temos uma maneira correta de checar os erros com o Async/Await, usando o try catch:

try {
async function read(){
const contents = await readFilePromise ('arquivo.js')
console.log(contents.toString())
} catch(e){
console.log('erro', e)
}
}
**Conclusão**
Uma coisa que percebemos muito nessa evolução do javaScript é que está ficando cada vez mais fácil de escrever código assincrono, que realmente era o calcanhar de Aquiles da linguagem, pois temos callBack hell e vários outros erros, atrapalhando a qualidade do código, então essas features novas que vem sendo adicionadas simplifica muito nossa forma de construir códigos.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ES6%20-%20Async%2FAwait&url=https%3A%2F%2Fdevpleno.com%2Fasync-await) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fasync-await)

---

# Tocando um Áudio com JS puro - DevPleno

URL: https://devpleno.com/audio-com-js-puro

> Uma das coisas que utilizaremos na interface que vamos construir no Minicurso de Socket.io para que fique mais próximo do real são os efeitos sonoros. Por ...

Javascript

## Tocando um Áudio com JS puro

T
Por Tulio Faria • 24 de maio de 2017

[Javascript](/tag/javascript)

Uma das coisas que utilizaremos na interface que vamos construir no Minicurso de Socket.io para que fique mais próximo do real são os efeitos sonoros. Por isso, essa dica é para você entender como dar play em um arquivo de áudio com JS puro, ou seja, usando somente HTML, sem usar nenhuma lib.

A primeira coisa que vamos fazer é criar uma tag audio no HTML. Esse áudio vai representar um arquivo de som (lembrando que também há, em especificações mais novas, a tag vídeo, que é parecida com a tag audio, mas é um pouco mais complicada, pois temos várias ‘camadas’, como por exemplo vídeos específicos para celular).

&#x3C;html>
&#x3C;head>
&#x3C;tittle>Audio&#x3C;/tittle>
&#x3C;/head>

&#x3C;body>
&#x3C;h1>Audio&#x3C;/h1>

&#x3C;audio>&#x3C;/audio>
&#x3C;/body>
&#x3C;/html>
No caso do áudio, tenho um arquivo chamado clap.wav e, quando o coloco dentro da tag áudio, ele automaticamente coloca esse áudio quando a página carregar em memória.

Em seguida, vamos criar um botão com o nome de Play e adicionar alguns scripts, um com uma instância desse botão e outro com um eventListener, assim, quando alguém clicar no botão vai ser ser pego esse áudio e dar um play.

&#x3C;html>
&#x3C;head>
&#x3C;tittle>Audio&#x3C;/tittle>
&#x3C;/head>

&#x3C;body>
&#x3C;h1>Audio&#x3C;/h1>

&#x3C;audio>&#x3C;/audio>
&#x3C;button>&#x3C;/button>

&#x3C;script>
const button = document.querySelector('button')

button.addEventListener('click', function(){

cont audio = document.querySelector('audio')

audio.play

})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Outra ponto interessante é que podemos começar a tocar o áudio a partir de um ponto específico,, por exemplo, aos 0.2 segundos. Para isso adicionamos apenas o código entre o querySelector e o audio.play:

audio.currentTime = 0.1
Dentro desse clap podemos fazer até alguns efeitos diferentes, pois à medida com que eu mexo o currentTime e dou o play, o efeito do áudio é um pouco diferente. Para fazer isso, usamos apenas o javaScript.

Gostou dessa dica sobre áudio com JS puro? Deixe seu comentário! Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Tocando%20um%20%C3%81udio%20com%20JS%20puro&url=https%3A%2F%2Fdevpleno.com%2Faudio-com-js-puro) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Faudio-com-js-puro)

---

# Redirecting to: /

URL: https://devpleno.com/aulavds

Redirecting to: / [Redirecting from /aulavds to /](/)

---

# Autenticação e Autorização - Entenda os termos - DevPleno

URL: https://devpleno.com/autenticacao-e-autorizacao

> Dois termos estão muito relacionados quando estamos desenvolvendo um sistema para Web ou Mobile: AUTENTICAÇÃO e AUTORIZAÇÃO. Vamos pensar o seguinte: temos...

Fundamentos

## Autenticação e Autorização - Entenda os termos

T
Por Tulio Faria • 6 de junho de 2017

[Fundamentos](/tag/fundamentos)

Dois termos estão muito relacionados quando estamos desenvolvendo um sistema para Web ou Mobile: AUTENTICAÇÃO e AUTORIZAÇÃO.

Vamos pensar o seguinte: temos uma empresa na qual você precisa apresentar um crachá na portaria para conseguir entrar. O crachá prova que você é quem você diz ser. Esse processo de confirmação é o que chamamos de autenticação.

No momento em que o segurança te deixa passar ou não, baseado na sua função ou algo nesse sentido, ele vai te dar a autorização, que é o segundo passo.

Geralmente o que fazemos em um sistema é identificar o usuário, com usuário e senha e a partir disso verificamos se pode ou não fazer.

Quando pensamos em um sistema digital, temos algumas formas de nos identificarmos. No mundo offline, temos o CPF, o RG, a CNH, etc. No mundo digital, temos algumas outras formas, que podem ser dividas em três categorias:

– Algo que sabemos: Usuário e senha.

– Algo que temos: Token, posse de um celular.

– Algo que somos: Biometria.

Temos um número cada vez maior de autenticação e podemos misturar as categorias, como token e usuário e senha, que chamamos de Autenticação de dois fatores.

A autorização é um pouco mais complexa, afinal uma vez que o usuário provou que é realmente ele, vamos ter que ir no banco do sistema para saber se esse usuário é mesmo ele e qual é o tipo de acesso ele tem.

Quando for montar um sistema, pense em qual tipo de autenticação o público-alvo está acostumado a utilizar para se identificar, e só depois disso pense na autorização.

Pense um pouco sobre esses dois termos, vamos voltar a falar mais das formas de autenticação posteriormente. Por enquanto esse conceito básico é o suficiente.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Autentica%C3%A7%C3%A3o%20e%20Autoriza%C3%A7%C3%A3o%20-%20Entenda%20os%20termos&url=https%3A%2F%2Fdevpleno.com%2Fautenticacao-e-autorizacao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fautenticacao-e-autorizacao)

---

# Aviso legal - DevPleno

URL: https://devpleno.com/aviso-legal

> Você deve saber que todos os produtos e materiais produzidos pela We Dev Ideas – Eirelli – ME, são feitos para fins educacionais e informacionais e por iss...

Blog

## Aviso legal

T
Por Tulio Faria • 14 de março de 2017

Você deve saber que todos os produtos e materiais produzidos pela We Dev Ideas – Eirelli – ME, são feitos para fins educacionais e informacionais e por isso, a We Dev Ideas não garante que você conseguirá obter quaisquer resultados ou ganhar algum dinheiro usando qualquer uma de nossas ideias, ferramentas, estratégias e recomendações, e nada em nossos Sites é uma promessa ou garantia para você de ganhos futuros.

VOCÊ CONCORDA QUE O USO OU INCAPACIDADE DE USO DOS PRODUTOS DA WE DEV IDEAS É POR SUA CONTA E RISCO. Ao adquirir um produto de nossa empresa, você aceita, concorda e entende que você é totalmente responsável por seu progresso e resultados de sua participação e que nós não oferecemos nenhuma representação, garantia ou garantias verbalmente ou por escrito sobre seus ganhos, o lucro do negócio, o desempenho do marketing, o crescimento da audiência ou resultados de qualquer tipo.

Qualquer dado presente no site **DevPleno** ou de seus produtos, são somente ilustrativos e não devem ser considerados como um ganho comum, ganho exato ou promessa de renda no futuro.

Você é totalmente responsável pelas suas decisões, ações e resultados na vida, e através dos seus registros no site, você concorda em não nos responsabilizar por qualquer decisão, ações ou resultados a qualquer momento, em nenhuma circunstância.

Quaisquer declarações descritas no nosso website, conteúdos e ofertas são simplesmente nossa opinião e, portanto, não são garantias ou promessas de desempenho real. Nós não oferecemos assessoria jurídica, médica, psicológica ou financeira profissional.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Aviso%20legal&url=https%3A%2F%2Fdevpleno.com%2Faviso-legal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Faviso-legal)

---

# Classificação de imagens com Azure - DevPleno

URL: https://devpleno.com/azure-cognitive-service

> Na dica de hoje, vamos continuar falando sobre classificação de imagens de forma automática, mas será uma outra abordagem, a de utilizar um serviço de visã...

Javascript

## Classificação de imagens com Azure

T
Por Tulio Faria • 30 de novembro de 2017

[Javascript](/tag/javascript)

Na dica de hoje, vamos continuar falando sobre classificação de imagens de forma automática, mas será uma outra abordagem, a de utilizar um serviço de visão computacional para reconhecer e classificar essa imagem.

Vamos utilizar a API Azure Computer Vídeo. Como pegamos uma key dessa API?

Se você colocar no Google Azure Cognitive Services, vamos ter serviços cognitivos, clique no link e você pode experimentar os serviços gratuitamente, apenas acessando ‘computer vision API’ para conseguir a Key.

Novamente no Google, vamos procurar o ‘axios http’ e importá-lo utilizando a CDN:

&#x3C;script src='https://unpkg.com/axios/dist/axios.min.js'>&#x3C;/script>
Agora, no Visual Studio Code, vou criar um arquivo novo e salvar como azure-image.html. A ideia é a seguinte, vamos ter um input type text onde vamos por uma url para poder reconhecer a imagem:

&#x3C;html>
&#x3C;head>
&#x3C;title>Image&#x3C;/title>
&#x3C;/head>

&#x3C;body>
&#x3C;input
type="text"
id="imgInput"
value="https://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png"
/>
&#x3C;input type="button" id="btn" value="Analisar imagem" />
&#x3C;img src="" id="img" />

&#x3C;script src="https://unpkg.com/axios/dist/axios.min.js">&#x3C;/script>
&#x3C;script>
const imgInput = document.getElementById('img')
const img = document.getElementById('img')
imgInput.addEventListener('blur', () => (img.src = imgInput.value))
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Assim podemos colocar a url de uma imagem e clicar em analisar imagem, mas temos também uma imagem padrão. Toda vez que essa imagem padrão for trocada, nós trocamos essa imagem.

Agora vamos fazer uma requisição utilizando axios para que a gente consiga classificar essa imagem. Para isso precisamos colocar nossa chave do Azure e também uma instância do axios para passarmos o baseURL e o headers que é onde preciso mandar algumas coisas como content type:

&#x3C;script>
const btn = document.getElementById('btn')
const imgInput = document.getElementById('imgInput')
const img = document.getElementById('img')
const key = 'keyDoAzure'
const azure = axios.create({
baseURL:
'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze',
headers: {
'Content-type': 'application/json',
'Ocp-apim-Subscription-Key': key
}
})

imgInput.addEventListener('blur', () => {
img.src = imgInput.value
})

btn.addEventListener('click', () => {
azure
.post(
'?visualFeactures=Categories,Description,Color&#x26;details=&#x26;language=en',
{ url: imgInput.value }
)
.then((data) => {
console.log(data)
})
})
&#x3C;/script>
Ao rodar, perceba que ele consegue capturar várias tags, além de cores dominantes no background, na frente, etc. Podemos utilizar isso para classificar, por exemplo, se a foto tem algum tipo de violência.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Classifica%C3%A7%C3%A3o%20de%20imagens%20com%20Azure&url=https%3A%2F%2Fdevpleno.com%2Fazure-cognitive-service) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fazure-cognitive-service)

---

# Como construir um beatbox com JavaScript - DevPleno

URL: https://devpleno.com/beatbox-com-javascript

> Continuando nossos experimentos utilizando áudio no HTML (você deve ter percebido que me empolguei com este assunto), vamos mudar o exemplo do metrônomo pa...

Javascript

## Como construir um beatbox com JavaScript

T
Por Tulio Faria • 29 de maio de 2017

[Javascript](/tag/javascript)

Continuando nossos experimentos utilizando áudio no HTML (você deve ter percebido que me empolguei com este assunto), vamos mudar o exemplo do metrônomo para construir uma ‘bateria’ e poder criar uma música somente dando ‘plays’ de forma ordenada em alguns trechos. Então vamos lá!

Vamos ter um botão que será um play/stop. Ao dar o play, será tocado uma sequência de áudios para simular uma bateria em loop. Para que isso ocorra, temos que ter alguns áudios e também tratar isso em javaScript.

&#x3C;html>
&#x3C;head>
&#x3C;tittle>beat-box&#x3C;/tittle>
&#x3C;/head>

&#x3C;body>
&#x3C;button id="play">Play&#x3C;/button>
&#x3C;audio src="prato.wav" id="prato">&#x3C;/audio>
&#x3C;audio src="prato-fechado.wav" id="prato-fechado">&#x3C;/audio>
&#x3C;audio src="bumbo.wav" id="bumbo">&#x3C;/audio>
&#x3C;audio src="boca.wav" id="boca">&#x3C;/audio>
&#x3C;audio src="caixa.wav" id="caixa">&#x3C;/audio>

&#x3C;script>&#x3C;/script>
&#x3C;/body>
&#x3C;html>
Dentro do Script, vamos tratar como fizemos no exemplo do metrônomo, então vamos criar o mesmo timer, criar uma função tick, porém fazer ela rodar a 90bpm (60*1000/90), isso dá a distância entre uma batida e outra.

A ideia é que a cada interação do tick, toque um áudio. Exemplo: Supondo que nossa música seja prato, bumbo, boca e caixa, o tick vai tocar essas 4 coisas para cada repetição que fizer. Para isso vamos pegar o music na posição currentAudio++.

&#x3C;script>
const play = constGetElementById('play')

let timer = null

let currentAudio = 0

const bpm = 90

const music = ['prato', 'bumbo', 'boca', 'caixa']

function tick(){
console.log(music[(currentAudio++)%music.length])
}

play.addEventListener('click', function(){
timer = setInterval(tick, (60 *1000 / bpm)
})
&#x3C;/script>
Acabamos de criar uma técnica para fazer os áudios circularem. A cada interação vamos incrementar o currentAudio e quando esse currentAudio chegar em 4, ele voltará para o 0. Com isso já é possível fazer uma bateria apenas mudando o console.log por:

function tick(){
const audioID = (music[(currentAudio++)%music.length]

const audio = document.getElementById(audioID)

audio.play()
}
Conseguimos tocar uma trilha, mas para a música ficar legal, podemos colocar essa trilha de uma forma diferente, por exemplo:

&#x3C;script>
const play = constGetElementById('play')

let timer = null

let currentAudio = 0

const bpm = 90

const music = \[\['bumbo', 'bumbo', 'bumbo', 'bumbo', \],
\['prato', 'prato-fechado', 'boca', 'caixa'\]
\]

function tick(){
const current = (music\[(currentAudio++)%music\[0\].length\]

const audioID1 = music\[0\]\[current\]

const audioID2 = music\[1\]\[current\]

const audio1 = document.getElementById(audioID1)

audio1.play()

audio1.currentTime = 0

const audio2 = document.getElementById(audioID2)

audio2.play()

audio2.currentTime = 0
}

play.addEventListener('click', function(){
timer = setInterval(tick, (60*1000/bpm)
})
&#x3C;/script>
Você pode baixar os arquivos de áudio aqui: [Download](https://goo.gl/zHKuad)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20construir%20um%20beatbox%20com%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Fbeatbox-com-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fbeatbox-com-javascript)

---

# Construindo um Beatbox Manipulável com JS - DevPleno

URL: https://devpleno.com/beatbox-manipulavel-com-js

> Agora que já entendemos como dar play em áudio com JS, como manipular para compor uma batida, faremos com que o usuário escolha a forma como seja tocado, o...

Javascript

## Construindo um Beatbox Manipulável com JS

T
Por Tulio Faria • 29 de maio de 2017

[Javascript](/tag/javascript)

Agora que já entendemos [como dar play em áudio com JS](https://www.devpleno.com/audio-com-js-puro/), [como manipular para compor uma batida](https://www.devpleno.com/beatbox-com-javascript/), faremos com que o usuário escolha a forma como seja tocado, ou seja, um Beatbox Manipulável com JS

Vamos começar utilizando um pouco da estrutura do HTML usado anteriormente (os áudios importados e o play) e implementar esse código. Criaremos um div.

A ideia é ter vários checkbox para cada instrumento, por exemplo, temos um prato e vários checkbox, os quais podemos marcar. Onde estiver marcado será tocado o áudio e onde não estiver não será tocado. Para não precisarmos criar manualmente todo os inputs, podemos criar um script JS que terá um contador que gera vários checkbox.

&#x3C;html>
&#x3C;head>
&#x3C;tittle>beat-box&#x3C;/tittle>
&#x3C;/head>
&#x3C;body>
&#x3C;button id="play">Play&#x3C;/button>

&#x3C;audio src="prato.wav" id="prato">&#x3C;/audio>
&#x3C;audio src="prato-fechado.wav" id="prato-fechado">&#x3C;/audio>
&#x3C;audio src="bumbo.wav" id="bumbo">&#x3C;/audio>
&#x3C;audio src="boca.wav" id="boca">&#x3C;/audio>
&#x3C;audio src="caixa.wav" id="caixa">&#x3C;/audio>

&#x3C;div id="track1" rel="prato">
&#x3C;h2>Prato&#x3C;/h2>
&#x3C;/div>
&#x3C;div id="track2" rel="prato-fechado">
&#x3C;h2>Prato-fechado&#x3C;/h2>
&#x3C;/div>
&#x3C;div id="track3" rel="bumbo">
&#x3C;h2>Bumbo&#x3C;/h2>
&#x3C;/div>

&#x3C;script>
const numItems = 10
function generationTrack(trackId){
const track = document.getElementById('track'+trackId)

for (let i=0; i&#x3C;10; i++){
track.innerHTML += '&#x3C;input type="checkbox id="i-'+trackId+'-'+i+'" />'
}
}

generateTrack(1)
generateTrack(2)
generateTrack(2)
&#x3C;/script>
&#x3C;/body>
&#x3C;html>
O objetivo é que o usuário possa escolher quando quer que cada item toque, por exemplo, com o bumbo batendo em um ritmo e o prato nos intervalos. Para que isso aconteça, cada tick da música tem que checar se naquela linha aquele áudio está marcado.

&#x3C;script>
//gera o check-box
const numItems = 10
function generationTrack(trackId){
const track = document.getElementById('track'+trackId)

for (let i=0; i&#x3C;10; i++){
track.innerHTML += '&#x3C;input type="checkbox id="i-'+trackId+'-'+i+'" />'
}
}
generateTrack(1)
generateTrack(2)
generateTrack(2)
//fim gerar check-box

const bpm = 90
let current = 0
function tick(){
const currentItem = current++ % numItems

console.log(currentItem)
}

setInterval(tick, (60*1000)/bpm)
&#x3C;/script>
Note que ele está caminhando entre os itens, mas temos que andar entre os tracks e pegar os que vão ser tocados. Para isso vamos implementar o script criando um for com i iniciado em 1 e i menor ou igual a 3, então podemos checar se aquele item em especifico está marcado. Quando for true, daremos play, e por último ‘startar’ quando apertarmos no play:

&#x3C;script>
const bpm = 90
let current = 0
let isPlaying = false
let timer = null
function tick(){
const currentItem = current++ % numItems
for(let i=1; i&#x3C;=3; i++){
const item = document.getElementById('i-'+i+'-'+currentItem)
const track = document.getElementById('track' +i)
if (item.checked){
const audio = document.getElementById(track.attributes.rel.value)
audio.currentTime = 0
audio.play()
}
}
}
const play = document.getElementById('play')
play.addEventListener('click', function(){
if (isPlaying){
clearInterval(timer)
play.innerHTML = 'Play'
} else {
timer = setInterval(tick, (60*1000)/bpm)
play.innerHTML = 'Stop'
}

isPlaying = !isPlaying
}
&#x3C;/script>
Todo check ativo irá gerar um som e os inativos serão ignorados. No botão, sempre que estiver tocando vai ter o stop e quando tiver parado vai ter play. Assim geramos um beat-box que o usuário escolhe a forma em que vai ser tocado utilizando o checkbox.

Poderíamos transformar esses checkbox em caixinhas e isso deixaria muito mais parecido com softwares como fruitLoops, que são bem simples de criar batidas.
Esse código está bastante flexível, se quisermos colocar mais itens só aumentar o número de itens no ‘numItems’.

Baixe os arquivos de áudio aqui: [download](https://goo.gl/zHKuad)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Construindo%20um%20Beatbox%20Manipul%C3%A1vel%20com%20JS&url=https%3A%2F%2Fdevpleno.com%2Fbeatbox-manipulavel-com-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fbeatbox-manipulavel-com-js)

---

# Bind - Altere comportamento e contexto de execução de suas funções - DevPleno

URL: https://devpleno.com/bind

> O que é um bind em JavaScript? Para mostrar uma das utilidades do bind, eu criei um pequeno exemplo: Eu tenho um objeto literal que cria um contexto novo. ...

Javascript

## Bind - Altere comportamento e contexto de execução de suas funções

T
Por Tulio Faria • 27 de julho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

O que é um bind em JavaScript? Para mostrar uma das utilidades do bind, eu criei um pequeno exemplo:

;(function () {
this.valor = 10

const modulo = {
valor: 20,

getValor: function () {
return this.valor
}
}

console.log(modulo.getValor())

const getValor = modulo.getValor

console.log(getValor())
})()
Eu tenho um objeto literal que cria um contexto novo. Para esse contexto, o this.valor vai ser igual a 20 e quando eu der um getValor, ele irá retornar o this.valor. Logo acima temos um this.valor que faz referência a primeira função e ao colocarmos o console.log = modulo.getValor ele vai executar referente ao pai dele.

Se criarmos uma nova constante e pegamos só a função extraindo desse objeto literal de cima, quando eu dou console.log(getvalor()), ele trás 20 e 10. 20 é o valor que está dentro do módulo e a segunda vez está pegando o 10 que está fora do módulo.

Isso acontece porque quando eu criei a cópia dele e não especifiquei nada, ele vai utilizar o this na chamada de onde ele está, então acabamos criando um cenário meio inconsistente.

Uma das coisas que o bind permite é exatamente isso, quando eu crio essa cópia, eu posso passar um bind onde eu falo em qual contexto eu quero que ele execute. Por exemplo, eu quero que ele execute no contexto do módulo:

const getValor = modulo.getValor.bind(modulo)
isso é bastante útil quando criamos as classes em ES6 porque naturalmente ele não tem o bind para o contexto da classe, então podemos fazer no construtor.

A outra utilidade que temos para o bind é, por exemplo, criar uma função que recebe dois parâmetros e criar uma função2, que é a função1 com bind fixando o parâmetro:

function func1(param1, param2) {
console.log(param1, param2)
}

const funct2 = func1.bind(null, 'paramfixo')

console.log(func2('param2'))
Ao executar, ele vai chamar o paramfixo e param2, então eu consigo criar novas funções que tenham um valor fixo, isso também é conhecido como funções parciais. Podemos utilizar por exemplo para criar funções que filtram determinados valores em um filter.

Utilizamos bastante o bind quando estamos criando um componente em react utilizando as classes em ES6 por causa dessa característica dela não ter o bind automático para this.

Uma coisa interessante é que quando você dá o bind, tem que estar ciente de que está alterando alguma coisa do estado atual do seu componente. Quando estamos tentando cada vez mais programação funcional, mesmo que seja alguns métodos do componente, a ideia é que elas se transformem em funções puras, então sempre que se deparar tendo que criar um bind para o método, precisa checar se realmente é necessário, porque muitas vezes conseguimos fazer isso sem o bind. Quando isso é possível, fazemos uma função pura, então a testabilidade do código fica melhor porque ela não depende de nada do contexto.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Bind%20-%20Altere%20comportamento%20e%20contexto%20de%20execu%C3%A7%C3%A3o%20de%20suas%20fun%C3%A7%C3%B5es&url=https%3A%2F%2Fdevpleno.com%2Fbind) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fbind)

---

# Blog - Página 10 - DevPleno

URL: https://devpleno.com/blog/10

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 2 de ago. de 2017 High-order Function Find](/find)

[Javascript 1 de ago. de 2017 Composição de componentes em ReactJS](/composicao-de-componentes-em-reactjs)

[Carreira 1 de ago. de 2017 Ensinar algo a alguém todos os dias](/ensinar-algo)

[Javascript 31 de jul. de 2017 Json-server - Como criar uma REST API para testes de forma simples](/json-server-como-criar-uma-rest-api-para-testes-de-forma-simples)

[Carreira 31 de jul. de 2017 Por que fazer um curso de programação voltado para a prática?](/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica)

[Javascript 30 de jul. de 2017 Async - Como Controlar Operações Assíncronas](/async)

[Javascript 29 de jul. de 2017 Módulo Co - Organize o fluxo de seu código assíncrono](/modulo-co)

[Javascript 28 de jul. de 2017 Float e precisão](/float-e-precisao)

[Javascript 28 de jul. de 2017 Nodemon: Monitore alterações e reinicie automaticamente seus scripts](/hands-on-nodemon)

[Javascript 27 de jul. de 2017 Bind - Altere comportamento e contexto de execução de suas funções](/bind)

[Javascript 27 de jul. de 2017 Fetch - Uma nova forma de fazer requisições HTTP](/fetch-hands-on)

[Carreira 26 de jul. de 2017 Mantenha sua Integridade - Dica de carreira DevPleno](/integridade)

[Anterior](/blog/9)10 / 26[Próxima](/blog/11)

---

# Blog - Página 11 - DevPleno

URL: https://devpleno.com/blog/11

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Adicionar com O(1)](/lista-encadeada-adicionar-com-o1)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Como remover um nó](/lista-encadeada-remover-um-no)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Como retornar um item](/lista-encadeada-retornar-um-item)

[Carreira 24 de jul. de 2017 10 dicas de produtividade para programadores](/10-dicas-de-produtividade-para-programadores)

[Carreira 24 de jul. de 2017 Metodologia ágil: entenda o que é e como se aplica para programadores!](/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores)

[Javascript 24 de jul. de 2017 Standard - Padronize o código fonte JavaScript da sua equipe](/standard-parte-1)

[Javascript 24 de jul. de 2017 Standard Parte 2](/standard-parte-2)

[Javascript 20 de jul. de 2017 Factory Function em JavaScript](/factory-function)

[Carreira 19 de jul. de 2017 Como fazer anotações em eventos](/anotacoes-em-eventos)

[Carreira 19 de jul. de 2017 Comprometimento com as suas metas](/comprometimento-com-suas-metas)

[Javascript 19 de jul. de 2017 Construindo um App gerenciador de séries com ReactJS](/gerenciador-de-series-p1)

[Carreira 19 de jul. de 2017 Participação em Eventos e Comunidades](/participacao-em-eventos-e-comunidades)

[Anterior](/blog/10)11 / 26[Próxima](/blog/12)

---

# Blog - Página 12 - DevPleno

URL: https://devpleno.com/blog/12

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 18 de jul. de 2017 Estudar 1 hora por dia ou 8 horas no sábado?](/estudar-1-hora-por-dia-ou-8-horas-no-sabado)

[Carreira 18 de jul. de 2017 Pensamentos limitantes](/pensamentos-limitantes)

[Carreira 14 de jul. de 2017 8 dicas de organização para freelancers se darem bem na carreira](/8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira)

[Carreira 13 de jul. de 2017 Ensino Formal ou Cursos Livres - Por qual optar?](/ensino-formal-ou-cursos-livres)

[Carreira 12 de jul. de 2017 Aprenda a aprender](/aprenda-a-aprender)

[Algoritmos 12 de jul. de 2017 Lista encadeada - Adicionar nó](/lista-encadeada-adicionar-no)

[Carreira 11 de jul. de 2017 Porque você não deve abaixar a guarda](/abaixar-a-guarda)

[Algoritmos 11 de jul. de 2017 Como saber a complexidade de um algoritmo](/complexidade-de-um-algoritmo)

[Javascript 11 de jul. de 2017 Minicurso Socketio - Parte 05 - Colocando o projeto no ar](/minicurso-socket-io-parte-5)

[Javascript 10 de jul. de 2017 Minicurso Socket.IO Parte 4 - Separando notificações por Rooms](/minicurso-socket-io-parte-4)

[Javascript 8 de jul. de 2017 Jest - Como utilizar a ferramenta de testes criada pelo Facebook](/hands-on-jest)

[Carreira 7 de jul. de 2017 Aprenda a dizer NÃO!](/aprenda-a-dizer-nao)

[Anterior](/blog/11)12 / 26[Próxima](/blog/13)

---

# Blog - Página 13 - DevPleno

URL: https://devpleno.com/blog/13

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 7 de jul. de 2017 Entenda a importância de cursos para desenvolvedores](/entenda-a-importancia-de-cursos-para-desenvolvedores)

[Javascript 7 de jul. de 2017 Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol](/minicurso-socket-io-parte-3)

[Carreira 6 de jul. de 2017 Você precisar ter DOM para ser um bom profissional?](/dom)

[Carreira 6 de jul. de 2017 Preciso de investimento para minha ideia?](/investimento-para-executar-ideias)

[Javascript 6 de jul. de 2017 Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO](/minicurso-socket-io-parte-2)

[Carreira 5 de jul. de 2017 Como escolher uma linguagem de tecnologia?](/como-escolher-linguagem-de-tecnologia)

[Carreira 5 de jul. de 2017 Melhoria Contínua](/melhoria-continua)

[Javascript 5 de jul. de 2017 Minicurso Socket.IO - Parte 01 - Começando o projeto](/minicurso-socket-io-parte-1)

[Javascript 5 de jul. de 2017 NPM e Módulos de Terceiros - NodeJS](/npm-e-modulos-de-terceiros)

[Algoritmos 4 de jul. de 2017 Árvore Binária de Busca - Operação de Busca](/operacao-de-busca)

[Algoritmos 3 de jul. de 2017 Árvore Binária em JavaScript](/arvore-binaria)

[Algoritmos 3 de jul. de 2017 Árvore Binária de Busca em JavaScript](/arvore-binaria-de-busca)

[Anterior](/blog/12)13 / 26[Próxima](/blog/14)

---

# Blog - Página 14 - DevPleno

URL: https://devpleno.com/blog/14

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 3 de jul. de 2017 Evite o this em JavaScript](/evite-o-this-em-js)

[Carreira 3 de jul. de 2017 Freelancer no exterior: 7 dicas para ter sucesso na carreira](/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira)

[Javascript 30 de jun. de 2017 High-order Function - Reduce](/reduce)

[Javascript 29 de jun. de 2017 Generators Functions - o que acontece por baixo dos panos](/generators-functions)

[Carreira 28 de jun. de 2017 Precificação de softwares: você sabe como fazer?](/precificacao-de-softwares-voce-sabe-como-fazer)

[Javascript 28 de jun. de 2017 ReactJS Recursivo?](/renderizar-estruturas-em-formato-de-arvore)

[Javascript 28 de jun. de 2017 Sleep em Generator](/sleep-em-generator)

[Javascript 27 de jun. de 2017 High-order Function MAP](/map)

[Javascript 27 de jun. de 2017 NodeJS Primeiros Passos - Promises](/promises)

[Javascript 26 de jun. de 2017 Como servir arquivos e expor servidor local com HTTPS](/servir-arquivos-e-expor-servidor)

[Javascript 22 de jun. de 2017 Debug de código JavaScript no Navegador](/debug-no-navegador)

[Carreira 22 de jun. de 2017 Qual é a sua desculpa?](/qual-a-sua-desculpa)

[Anterior](/blog/13)14 / 26[Próxima](/blog/15)

---

# Blog - Página 15 - DevPleno

URL: https://devpleno.com/blog/15

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 20 de jun. de 2017 Quantas linguagens devo programar?](/quantas-linguagens-programar)

[Fundamentos 16 de jun. de 2017 HA e AS em Aplicação Web - Web Basic](/ha-e-as)

[Javascript 16 de jun. de 2017 Programação Assíncrona - NodeJS Primeiros Passos](/programacao-assincrona)

[Javascript 13 de jun. de 2017 Template HTML simples - Hands-on Handlebars](/handlebars-template-html-simples)

[Carreira 8 de jun. de 2017 Por que o Salário em TI é baixo? DevPleno Reponde](/salario-em-ti)

[Algoritmos 7 de jun. de 2017 Codility: Como Resolver os Desafios e Passar nos Testes de Código](/codility)

[Carreira 7 de jun. de 2017 Desenvolvedor Full Stack: o que é e como se tornar?](/desenvolvedor-full-stack-o-que-e-e-como-se-tornar)

[Fundamentos 6 de jun. de 2017 Autenticação e Autorização - Entenda os termos](/autenticacao-e-autorizacao)

[Javascript 6 de jun. de 2017 Gere seu projeto em Express - Hands-on: Express-Generator](/express-generator)

[Javascript 5 de jun. de 2017 Injeção de Dependência em ReactJS](/injecao-de-dependencia-em-reactjs)

[Javascript 1 de jun. de 2017 Injeção de dependência - Aumente a testabilidade do seu código](/injecao-de-dependencia)

[Javascript 1 de jun. de 2017 Vantagens da Injeção de dependência para a testabilidade do código](/vantagens-da-injecao-de-depencia)

[Anterior](/blog/14)15 / 26[Próxima](/blog/16)

---

# Blog - Página 16 - DevPleno

URL: https://devpleno.com/blog/16

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 30 de mai. de 2017 4 novos Métodos Strings que você precisa conhecer](/4-novos-metodos)

[Javascript 30 de mai. de 2017 Dica: ES6 - Destructuring Assignament](/dica-es6-destructuring-assignament)

[Javascript 30 de mai. de 2017 NodeJS Primeiros Passos: Módulo em NodeJS](/modulos)

[Javascript 30 de mai. de 2017 ES6 - Template Strings](/template-strings)

[Javascript 29 de mai. de 2017 Como construir um beatbox com JavaScript](/beatbox-com-javascript)

[Javascript 29 de mai. de 2017 Construindo um Beatbox Manipulável com JS](/beatbox-manipulavel-com-js)

[Javascript 29 de mai. de 2017 Chocolatey - Gerenciador de Pacotes para Windows](/chocolatey)

[Javascript 26 de mai. de 2017 Currying - Uma técnica interessante usada em programação funcional](/currying)

[Javascript 26 de mai. de 2017 Metrônomo com JavaScript](/metronomo-com-javascript)

[Javascript 25 de mai. de 2017 Escopos e Closures - NodeJS Primeiros Passos](/escopos-e-closures)

[Javascript 25 de mai. de 2017 4 funcionalidades do Console no DevTools que você não conhece](/funcionalidades-do-console)

[Javascript 24 de mai. de 2017 Tocando um Áudio com JS puro](/audio-com-js-puro)

[Anterior](/blog/15)16 / 26[Próxima](/blog/17)

---

# Blog - Página 17 - DevPleno

URL: https://devpleno.com/blog/17

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 24 de mai. de 2017 JavaScript: Apply](/javascript-apply)

[Carreira 24 de mai. de 2017 Qual é o seu maior desafio nesse momento?](/qual-seu-maior-desafio)

[Carreira 23 de mai. de 2017 Como aumentar a produtividade diminuindo a troca de contexto](/como-aumentar-a-produtividade)

[Carreira 23 de mai. de 2017 Como fazer Networking corretamente](/networking)

[Javascript 23 de mai. de 2017 Servidores Web - Um pouco mais do back-end de uma Aplicação Web](/servidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web)

[Fundamentos 22 de mai. de 2017 Animação basica em CSS3](/animacao-basica-css3)

[Carreira 22 de mai. de 2017 Metas na carreira de desenvolvedor](/metas-na-carreira-de-desenvolvedor)

[Algoritmos 22 de mai. de 2017 Once N vezes](/once-n-vezes)

[Javascript 22 de mai. de 2017 Request e Response](/request-e-response)

[Fundamentos 19 de mai. de 2017 Formatos de troca de dados em Aplicações Web](/formatos-de-troca-de-dados)

[Javascript 19 de mai. de 2017 Postman - Como testar APIs - Hands-on](/postman-como-testar-apis)

[Javascript 18 de mai. de 2017 Ctrl+C / Copy to Clipboard em JS](/copy-to-clipboard-em-js)

[Anterior](/blog/16)17 / 26[Próxima](/blog/18)

---

# Blog - Página 18 - DevPleno

URL: https://devpleno.com/blog/18

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 18 de mai. de 2017 Criando componente mais simples e eficaz em React](/stateless-functional-component)

[Carreira 17 de mai. de 2017 Como organizar os estudos em tecnologia](/como-organizar-os-estudos-em-tecnologia)

[Javascript 17 de mai. de 2017 React-router-dom: como injetar props em rotas em ReactJS](/router-props-2)

[Javascript 16 de mai. de 2017 Faker - Como gerar grandes massas de dados fictícios para testes](/dados-ficticios-para-testes)

[Javascript 16 de mai. de 2017 3 dicas para NPM + 1 dica extra](/dicas-paranpm)

[Carreira 15 de mai. de 2017 Como cobrar por Software](/como-cobrar-por-software)

[Javascript 15 de mai. de 2017 Fs-extra - Filesystem com Promises e mais funcionalidades](/fs-extra)

[Javascript 15 de mai. de 2017 Hands-on - Socket.io Parte 3](/hands-on-socket-io-parte-3)

[Fundamentos 15 de mai. de 2017 Web Basic - RESTful](/o-que-e-restful)

[Carreira 15 de mai. de 2017 Por que todo Dev usa Mac?](/por-que-todo-dev-usa-mac)

[Javascript 15 de mai. de 2017 Servidor HTTP Básico - NodeJS Primeiros Passos](/servidor-http-basico-2)

[Fundamentos 12 de mai. de 2017 Aplicação Web - Entendendo Back-end e Front-end](/aplicacao-web)

[Anterior](/blog/17)18 / 26[Próxima](/blog/19)

---

# Blog - Página 19 - DevPleno

URL: https://devpleno.com/blog/19

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 12 de mai. de 2017 Hands-on - Socket.io Parte 2](/socket-io-parte2)

[Javascript 11 de mai. de 2017 Low-DB - Banco de dados para NodeJS baseado em JSON](/low-db)

[Javascript 11 de mai. de 2017 Comunicação em tempo-real com Node e Socket.io](/socket-io-parte1)

[Javascript 10 de mai. de 2017 Hands-on: Streams Parte 03 - Duplex](/stream-duplex)

[Javascript 10 de mai. de 2017 Hands-on: Streams Parte 4 - Transform](/streams-parte-3-transform)

[Javascript 9 de mai. de 2017 PKG - Transforme seu aplicativo Node em executável](/hands-on-pkg)

[Javascript 9 de mai. de 2017 Hands-on: Streams Parte 2 - Writable](/stream-parte-2-writable)

[Javascript 8 de mai. de 2017 Generators: O que há "por baixo dos panos"](/generators-o-que-ha-por-baixo-dos-panos)

[Javascript 8 de mai. de 2017 Hands-on: Ler arquivo linha a linha](/hands-ler-arquivo-linha-linha)

[Javascript 8 de mai. de 2017 Hands-on: Readline](/hands-on-readline)

[Javascript 8 de mai. de 2017 Listar arquivos em JS (async, await, promise e Promise.all)](/listar-arquivos-em-js)

[Carreira 8 de mai. de 2017 Novas Skills: O preço que tem que ser pago](/nova-skills-preco-que-tem-que-ser-pago)

[Anterior](/blog/18)19 / 26[Próxima](/blog/20)

---

# Blog - Página 2 - DevPleno

URL: https://devpleno.com/blog/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 16 de fev. de 2018 Férias e feriados trabalhando por meio da toptal](/ferias-e-feriados-trabalhando-por-meio-da-toptal)

[Carreira 16 de fev. de 2018 Quanto ganha quem trabalha por meio da Toptal?](/quanto-ganha-quem-trabalha-por-meio-da-toptal)

[Carreira 15 de fev. de 2018 Formas de trabalho na Toptal](/formas-de-trabalho-por-meio-da-toptal)

[Carreira 15 de fev. de 2018 Horário de trabalho na toptal](/horario-de-trabalho-na-toptal)

[Carreira 15 de fev. de 2018 Qual o nível de inglês para trabalhar por meio da Toptal?](/nivel-de-ingles-para-a-toptal)

[Carreira 15 de fev. de 2018 Precisa ter diploma para trabalhar por meio da Toptal?](/precisa-ter-diploma-para-a-toptal)

[Carreira 9 de fev. de 2018 Trabalhar na Toptal ou por meio da Toptal?](/na-toptal-ou-por-meio-da-toptal)

[Carreira 9 de fev. de 2018 Por que a Toptal é tão valorizada no mercado?](/por-que-a-toptal-e-tao-valorizada)

[Carreira 9 de fev. de 2018 O que é a Toptal? | Série Trabalho Remoto](/toptal-serietrabalhoremoto)

[Javascript 30 de nov. de 2017 Classificação de imagens com Azure](/azure-cognitive-service)

[Carreira 30 de nov. de 2017 Como manter-se motivado](/como-manter-se-motivado)

[Javascript 30 de nov. de 2017 Normalizar-email](/normalizar-email)

[Anterior](/blog)2 / 26[Próxima](/blog/3)

---

# Blog - Página 20 - DevPleno

URL: https://devpleno.com/blog/20

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 8 de mai. de 2017 Racionalização: Tomando decisões racionais](/racionalizacao)

[Javascript 8 de mai. de 2017 Hands-on: Streams - Parte 1](/streams-parte-1)

[Javascript 5 de mai. de 2017 ES6 - Async/Await](/async-await)

[Javascript 5 de mai. de 2017 Ferramentas Visuais para Flexbox](/ferramentas-visuais-para-flexbox)

[Javascript 5 de mai. de 2017 Testando o Spread Operator: Novidade do ES6](/spread-operator)

[Javascript 4 de mai. de 2017 Promisify-Node: Convertendo funções clássicas do Node em Promises](/promisify-node)

[Carreira 3 de mai. de 2017 Como ser MUITO mais produtivo?](/como-ser-muito-mais-produtivo)

[Javascript 3 de mai. de 2017 Como converter Markdown para HTML usando Marked](/converter-markdown-para-html)

[Carreira 2 de mai. de 2017 Carreira: Preço que tem que ser pago](/carreira-preco-que-tem-que-ser-pago)

[Javascript 2 de mai. de 2017 Hands-on: Ferramentas visuais para Flexbox](/ferramentas-par-layouts-com-flexbox)

[Javascript 2 de mai. de 2017 Hands-on: Marked](/hands-on-marked)

[Javascript 28 de abr. de 2017 Javascript: Streams (P-3: Duplex)](/javascript-streams-p-3-duplex)

[Anterior](/blog/19)20 / 26[Próxima](/blog/21)

---

# Blog - Página 21 - DevPleno

URL: https://devpleno.com/blog/21

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 28 de abr. de 2017 Javascript: Streams (P-4: Transform)](/javascript-streams-p-4-transform)

[Javascript 24 de abr. de 2017 Hands-on: Low-db](/hands-low-db)

[Javascript 24 de abr. de 2017 Hands-on: Faker](/hands-on-faker)

[Javascript 24 de abr. de 2017 Javascript: Streams (P-1: Readable Streams)](/javascript-streams-p-1-readable-streams)

[Javascript 24 de abr. de 2017 Javascript: Streams (P-2: Writable Streams)](/javascript-streams-p-2-writable-streams)

[Carreira 24 de abr. de 2017 Dica: Precificação em Software](/precificacao-em-software)

[Javascript 24 de abr. de 2017 Dica: Router Props](/router-props)

[Javascript 17 de abr. de 2017 Dica: Once n vezes](/dica-n-vezes)

[Javascript 17 de abr. de 2017 Hands-on: Injeção de Dependência é bom mesmo?](/hands-injecao-de-dependencia-e-bom-mesmo)

[Javascript 17 de abr. de 2017 Hands-on: Currying](/hands-on-currying)

[Algoritmos 10 de abr. de 2017 Dica: Como saber a complexidade de um algoritmo](/dica-como-saber-complexidade-de-um-algoritmo)

[Javascript 10 de abr. de 2017 Hands-on: Json-Server](/hands-json-server)

[Anterior](/blog/20)21 / 26[Próxima](/blog/22)

---

# Blog - Página 22 - DevPleno

URL: https://devpleno.com/blog/22

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 7 de abr. de 2017 High-order Functions](/high-order-functions)

[Carreira 4 de abr. de 2017 Carreira: Tomar decisões](/carreira-tomar-decisoes)

[Javascript 4 de abr. de 2017 Dica: Debounce](/dica-debounce)

[Javascript 4 de abr. de 2017 Dica: Injeção de Dependência no ReactJS](/dica-injecao-de-dependencia-no-reactjs)

[Algoritmos 31 de mar. de 2017 Vídeo sobre Algoritmos: XOR Swap](/algoritmos-xor-swap)

[Javascript 28 de mar. de 2017 Immutability e ImmutableJS](/immutability-e-immutablejs)

[Carreira 27 de mar. de 2017 Carreira: Você é o passageiro da sua Vida?](/carreira-voce-e-o-passageiro-da-sua-vida)

[Algoritmos 27 de mar. de 2017 Dica e Algoritmo: XOR e Odd Occurences in Array](/dica-e-algoritmo-xor-e-odd-occurences-array)

[Javascript 23 de mar. de 2017 Dica: Self-Invoked Function (Self-invoking Function)](/dica-self-invoked-function-self-invoking-function)

[Carreira 22 de mar. de 2017 Carreira: Preciso de investimento para minha ideia?](/carreira-preciso-de-investimento-para-minha-ideia)

[Javascript 22 de mar. de 2017 Dica: Debug de NodeJS no VS Code](/dica-debug-de-nodejs-no-vs-code)

[Carreira 22 de mar. de 2017 Você precisa ter DOM para ser um bom profissional?](/voce-precisa-ter-dom-para-ser-um-bom-profissional)

[Anterior](/blog/21)22 / 26[Próxima](/blog/23)

---

# Blog - Página 23 - DevPleno

URL: https://devpleno.com/blog/23

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Algoritmos 15 de mar. de 2017 Algoritmos: PermMissingElement](/algoritmos-permmissingelement)

[Carreira 15 de mar. de 2017 Sobre o DevPleno](/sobre-o-devpleno)

[Algoritmos 14 de mar. de 2017 Algoritmos: Cyclic Rotation](/algoritmos-cyclic-rotation)

[Algoritmos 13 de mar. de 2017 Algoritmos: Odd Occurrences in Array](/algoritmos-odd-occurrences-array)

[Javascript 9 de mar. de 2017 Apresentação em HTML](/apresentacao-em-html)

[Javascript 9 de mar. de 2017 Hands-on: Creat-React-App](/hands-creat-react-app)

[Javascript 7 de mar. de 2017 Dica: Injeção de dependência com Destructuring Assignament](/dica-injecao-de-dependencia-com-destructuring-assignament)

[Javascript 7 de mar. de 2017 Hands-on: CO](/hands-on-co)

[Javascript 6 de mar. de 2017 Hands-on: Slack](/hands-on-slack)

[Algoritmos 3 de mar. de 2017 Algoritmos: Contar números negativos](/algoritmos-contar-numeros-negativos)

[Javascript 3 de mar. de 2017 Hands-on: Benchmark](/hands-on-benchmark)

[Javascript 3 de mar. de 2017 Hands-on: ShellJS](/hands-on-shelljs)

[Anterior](/blog/22)23 / 26[Próxima](/blog/24)

---

# Blog - Página 24 - DevPleno

URL: https://devpleno.com/blog/24

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 3 de mar. de 2017 Hands-on: Standard](/hands-on-standard)

[Javascript 3 de mar. de 2017 Pure Functions (Funções Puras)](/pure-functions-funcoes-puras)

[Algoritmos 24 de fev. de 2017 Algoritmos: Campo Minado (Minesweeper)](/algoritmo-campo-minado-minesweeper)

[Javascript 24 de fev. de 2017 Hands-on: Node JS - Request](/hands-on-node-js-request)

[Javascript 24 de fev. de 2017 Hands-on: NodeJS - PM2](/hands-on-nodejs-pm2)

[Javascript 24 de fev. de 2017 Hands-on: Pre-Commit](/hands-on-pre-commit)

[Algoritmos 19 de fev. de 2017 Algoritmos: Problema 3n+1](/algoritmo-3n-1)

[Javascript 1 de fev. de 2017 Verificando o tempo para executar um trecho de código em Javascript](/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript)

[Javascript 25 de jan. de 2017 Render condicional em ReactJS](/render-condicional-em-reactjs)

[Javascript 28 de dez. de 2016 O que é o app.use no NodeJS/ExpressJS?](/o-que-e-o-app-use-no-nodejsexpressjs)

[Javascript 27 de dez. de 2016 Loops/Repetições/Iterações no JSX do React](/loopsrepeticoesiteracoes-no-jsx-do-react)

[Javascript 23 de nov. de 2016 ReactJS: comentários em JSX](/reactjs-comentarios-em-jsx)

[Anterior](/blog/23)24 / 26[Próxima](/blog/25)

---

# Blog - Página 25 - DevPleno

URL: https://devpleno.com/blog/25

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 13 de out. de 2016 cmder: Turbine seu cmd no Windows](/cmder-turbine-seu-cmd-no-windows)

[Javascript 4 de out. de 2016 Como converter uma string em Base64 em JavaScript (Navegador e NodeJS)](/como-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs)

[Javascript 3 de out. de 2016 Mongoose: corrigindo "Cannot overwrite 'Model' model once compiled"](/corrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose)

[Javascript 17 de ago. de 2016 NodeJS Primeiros Passos: Async - Map](/nodejs-primeiros-passos-async-map)

[Javascript 15 de ago. de 2016 NodeJS Primeiros Passos: Async - Waterfall](/nodejs-primeiros-passos-async-waterfall)

[Carreira 14 de ago. de 2016 Por que tudo na vida acontece 2x?](/por-que-tudo-na-vida-acontece-2x)

[Javascript 12 de ago. de 2016 NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas](/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas)

[Fundamentos 9 de ago. de 2016 HA (High Availability) e AS (Auto Scale)](/ha-high-availability-e-as-auto-scale)

[Javascript 7 de ago. de 2016 Servidor de arquivos e sistemas locais com HTTPS](/servidor-de-arquivos)

[Javascript 5 de ago. de 2016 NodeJS Primeiros Passos Assíncrono](/assincrono)

[Carreira 2 de ago. de 2016 Como está seu inglês?](/como-esta-seu-ingles-carreira)

[Carreira 1 de ago. de 2016 Morro de vontade...](/morro-de-vontade)

[Anterior](/blog/24)25 / 26[Próxima](/blog/26)

---

# Blog - Página 26 - DevPleno

URL: https://devpleno.com/blog/26

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 30 de jul. de 2016 Eu já sei! Evite uma mentalidade que não te deixa evoluir](/eu-ja-sei-carreira)

[Javascript 27 de jul. de 2016 NodeJS Primeiros Passos: Módulos](/nodejs-primeiros-passos-modulos)

[Javascript 26 de jul. de 2016 NodeJS Primeiros Passos: Closures e Escopos](/closures-e-escopos)

[Javascript 25 de jul. de 2016 NodeJS Primeiros Passos: Servidor HTTP Básico](/servidor-http-basico)

[Javascript 24 de jul. de 2016 Vídeo sobre Servidores Web - o back-end de uma aplicação web](/servidores-web-entendo-back-end)

[Carreira 23 de jul. de 2016 Networking da maneira certa](/networking-da-maneira-certa-carreira)

[Carreira 21 de jul. de 2016 Defina metas](/defina-metas)

[Fundamentos 20 de jul. de 2016 Vídeo sobre Formatos de troca de dados em Aplicações Web](/formatos-de-troca-de-dados-em-aplicacoes-web)

[Javascript 12 de jul. de 2016 Vídeo sobre NodeJS com Promises](/nodejs-primeiros-passos-promises)

[Anterior](/blog/25)26 / 26
Próxima

---

# Blog - Página 3 - DevPleno

URL: https://devpleno.com/blog/3

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 29 de nov. de 2017 Como criar e reutilizar seus módulos no NodeJS com Git](/como-criar-e-reutilizando-seus-proprios-modulos)

[Javascript 29 de nov. de 2017 Multer upload de imagens com nodejs e express](/multer-upload-de-imagens-com-nodejs-e-express)

[Javascript 24 de nov. de 2017 Reconhecimento de nudez com js](/reconhecimento-de-nudez-com-js)

[Javascript 24 de nov. de 2017 Reconhecimento facial com JS](/reconhecimento-facial-com-js)

[Javascript 23 de nov. de 2017 CHAVES DINÂMICAS](/chaves-dinamicas)

[Algoritmos 16 de nov. de 2017 code fights - Metro Card](/code-fights-metro-card)

[Javascript 16 de nov. de 2017 Hands-on - Three.JS](/hands-on-threejs)

[Algoritmos 13 de nov. de 2017 Resolvendo Expressão Aritmética do CodeFights](/expressao-aritmetica-codefights)

[Javascript 13 de nov. de 2017 Capturando áudio do microfone pelo Navegador](/microfone-pelo-navegador)

[Javascript 13 de nov. de 2017 Preview de imagens antes do upload](/preview-de-imagens-antes-do-upload)

[Javascript 10 de nov. de 2017 Chainability com Javascript](/chainability-com-javascript)

[Carreira 10 de nov. de 2017 O que fazer para dar certo?](/o-que-fazer-para-dar-certo)

[Anterior](/blog/2)3 / 26[Próxima](/blog/4)

---

# Blog - Página 4 - DevPleno

URL: https://devpleno.com/blog/4

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de nov. de 2017 Entenda o que é Patternite](/patternite)

[Javascript 10 de nov. de 2017 Preconceito com JS? Não preparado para corporativo?](/preconceito-com-js-nao-preparado-para-corporativo)

[Javascript 7 de nov. de 2017 Closure Série - POO para JS](/closure-poo-para-js)

[Carreira 7 de nov. de 2017 Sobreviver em um mundo de abundância](/mundo-de-abundancia)

[Javascript 7 de nov. de 2017 Pegadinha #1 de entrevistas em JavaScript](/pegadinha-de-entrevistas-de-javascript)

[Javascript 6 de nov. de 2017 Mono ou multi thread - POO para JS](/mono-ou-multi-thread-poo-para-js)

[Carreira 27 de out. de 2017 Sobre abrir exceções e como lidar quando elas dão errado](/sobre-abrir-excecoes)

[Carreira 25 de out. de 2017 Decisões baseadas apenas na questão financeira](/decisoes-baseadas-apenas-na-questao-financeira)

[Javascript 25 de out. de 2017 Pare de pensar em classes! Série - POO para JS](/pare-de-pensar-em-classes)

[Javascript 18 de out. de 2017 Criando um teclado com WebAudioAPI](/teclado-com-webaudioapi)

[Javascript 17 de out. de 2017 FS-Watch - Checando mudanças em um arquivo-diretório](/fs-watch)

[Javascript 17 de out. de 2017 Grandes quantidades de dados com menos recursos](/grandes-quantidades-de-dados-com-menos-recursos)

[Anterior](/blog/3)4 / 26[Próxima](/blog/5)

---

# Blog - Página 5 - DevPleno

URL: https://devpleno.com/blog/5

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 17 de out. de 2017 Você sofre de Obesidade Mental?](/obesidade-mental)

[Javascript 17 de out. de 2017 WebAudioAPI - Gerando um som no browser](/webaudioapi)

[Carreira 13 de out. de 2017 2 Tipos de Soluções de Software que você pode entregar](/2-tipos-de-solucoes-de-software-que-voce-pode-entregar)

[Javascript 10 de out. de 2017 Javascript - ES6 Default Parameters](/es6-default-parameters)

[Javascript 10 de out. de 2017 ES7 Array Includes](/es7-array-includes)

[Javascript 6 de out. de 2017 GH-Pages e como publicar seu site no Github](/como-publicar-seu-site-no-github)

[Carreira 6 de out. de 2017 Confira 4 dicas de UX para programadores](/confira-4-dicas-de-ux-para-programadores)

[Javascript 6 de out. de 2017 As vantagens do Javascript em todas as camadas de uma aplicação](/quais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao)

[Javascript 5 de out. de 2017 Navigator Geolocation API - Sabendo a localização do usuário](/navigator-geolocation)

[Javascript 5 de out. de 2017 Dicas utilizando o Split em Strings](/split-em-strings)

[Javascript 3 de out. de 2017 Promise Constante - como criar situações assíncronas de teste](/promise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste)

[Javascript 2 de out. de 2017 React 16 - o Pacificador](/react-16-o-pacificador)

[Anterior](/blog/4)5 / 26[Próxima](/blog/6)

---

# Blog - Página 6 - DevPleno

URL: https://devpleno.com/blog/6

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 26 de set. de 2017 Promise Race - Qual promise resolve/rejeita primeiro](/promise-race)

[Carreira 26 de set. de 2017 Descrição das vagas de emprego no Brasil x no exterior](/vagas-de-emprego-no-brasil-e-no-exterior)

[Javascript 22 de set. de 2017 Gerando HTML estáticos a partir de templates – EJS](/html-estatico-com-templates-ejs)

[Javascript 21 de set. de 2017 Diferença entre as programações Orientação-objetos, Imperativa e Funcional](/orientacao-objetos-imperativa-e-funcional)

[Carreira 19 de set. de 2017 Falta tempo para realizar aquele projeto?](/falta-de-tempo)

[Javascript 19 de set. de 2017 Sou contra a orientação-objetos (OO)?](/orientacao-objeto)

[Fundamentos 15 de set. de 2017 Como testar domínios localmente](/como-testar-dominios-localmente)

[Javascript 11 de set. de 2017 Dica: Debug NodeJS com Chrome DevTools](/dica-debug-nodejs-com-chrome-devtools)

[Javascript 11 de set. de 2017 ChalkJS - Deixe as saídas de seu console.log coloridas e com estilo](/hands-on-chalkjs)

[Javascript 8 de set. de 2017 Servidor JSON simples em PHP (parte 1)](/servidor-json-simples-em-php-parte-1)

[Carreira 8 de set. de 2017 Tudo na vida acontece duas vezes!](/tudo-acontece-duas-vezes)

[Fundamentos 6 de set. de 2017 Entenda sobre CORS - Cross Origin Resource Sharing](/entenda-sobre-cors-cross-origin-resource-sharing)

[Anterior](/blog/5)6 / 26[Próxima](/blog/7)

---

# Blog - Página 7 - DevPleno

URL: https://devpleno.com/blog/7

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 6 de set. de 2017 Validade de um projeto/ideia/ação](/validade)

[Javascript 5 de set. de 2017 Módulo MS - Convertendo timestamps](/convertendo-timestamps)

[Carreira 5 de set. de 2017 Tenha cicatrizes](/tenha-cicatrizes)

[Javascript 31 de ago. de 2017 Como encadear promises](/como-encadear-promises)

[Carreira 30 de ago. de 2017 CLT ou PJ em Software - O que vale mais a pena?](/clt-ou-pj)

[Algoritmos 29 de ago. de 2017 Busca Binária](/busca-binaria)

[Carreira 29 de ago. de 2017 Técnica para eliminar o que não te faz alcançar seus objetivos](/tecnica-para-alcancar-seus-objetivos)

[Carreira 28 de ago. de 2017 Coisas ruins normais](/coisas-ruins-normais)

[Carreira 28 de ago. de 2017 Falta de apoio](/falta-de-apoio)

[Javascript 23 de ago. de 2017 Dotenv e variáveis de ambiente no NodeJS](/dotenv-e-variaveis-de-ambiente)

[Javascript 23 de ago. de 2017 O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express](/morgan)

[Javascript 21 de ago. de 2017 3 Padrões para Iniciar com Expressões Regulares (RegExp)](/expressoes-regulares)

[Anterior](/blog/6)7 / 26[Próxima](/blog/8)

---

# Blog - Página 8 - DevPleno

URL: https://devpleno.com/blog/8

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 21 de ago. de 2017 Estruturas de Dados - Pilhas](/pilha)

[Carreira 18 de ago. de 2017 Impostos e como receber de empresas estrangeiras](/como-receber-de-empresas-estrangeiras)

[Javascript 18 de ago. de 2017 [SEGREDO] Muitos registros do MySQL no NodeJS](/registros-do-mysql-no-nodejs)

[Javascript 17 de ago. de 2017 Hands-on: Request-promise](/request-promise)

[Carreira 16 de ago. de 2017 negociação - Como vender um Software](/como-vender-software)

[Carreira 16 de ago. de 2017 3 dicas para começar a empreender na área de software](/empreender-na-area-de-software)

[Javascript 14 de ago. de 2017 Cheerio: Uma implementação jQuery para Node](/cheerio)

[Javascript 14 de ago. de 2017 Request - Requisições HTTP de forma rápida e simples](/request)

[Carreira 12 de ago. de 2017 Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão!](/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao)

[Javascript 10 de ago. de 2017 Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios](/hands-on-rimraf)

[Javascript 10 de ago. de 2017 Yarn (uma alternativa ao gerenciador de pacotes/dependências NPM)](/hands-on-yarn)

[Carreira 9 de ago. de 2017 Porque se sujar faz bem!](/se-sujar-faz-bem)

[Anterior](/blog/7)8 / 26[Próxima](/blog/9)

---

# Blog - Página 9 - DevPleno

URL: https://devpleno.com/blog/9

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 9 de ago. de 2017 Você é passageiro ou motorista da sua vida?](/seja-o-motorista-da-sua-vida)

[Carreira 8 de ago. de 2017 Decisão técnica não precisa ser eterna](/decisao-tecnica)

[Carreira 8 de ago. de 2017 Tomar decisões](/tomar-decisoes)

[Javascript 7 de ago. de 2017 Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS](/falsy-e-truthy-values)

[Javascript 7 de ago. de 2017 Short-circuit e valores padrão](/short-circuit-e-valores-padrao)

[Javascript 6 de ago. de 2017 ShellJS - Crie ferramentas multiplataformas baseadas no Shell do Linux](/shelljs)

[Algoritmos 4 de ago. de 2017 Algoritmos: XOR Swap](/algoritmos-xoe-swap)

[Javascript 4 de ago. de 2017 Fake API - Como testar seus projetos front-end](/fake-api)

[Carreira 3 de ago. de 2017 DevPleno Entrevista - Carlos Drury e Thiago Coelho](/entrevista-carlos-drury-e-thiago-coelho)

[Carreira 3 de ago. de 2017 DevPleno Entrevista - Edy Segura](/entrevista-com-edy-segura)

[Fundamentos 2 de ago. de 2017 Arrow Functions - Construindo funções anônimas de forma mais simplificada](/arrow-functions)

[Javascript 2 de ago. de 2017 High-order Function Filter](/filter)

[Anterior](/blog/8)9 / 26[Próxima](/blog/10)

---

# Blog - DevPleno

URL: https://devpleno.com/blog

> Artigos sobre desenvolvimento, carreira e tecnologia.

## Arquivo de Insights

Explore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Ferramentas 5 de abr. de 2026 Como Usar o Describe Session do Claude Code para Conectar Projetos](/claude-code-describe-session)

[Ferramentas 5 de abr. de 2026 Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente](/claude-code-otimizacao-arquivos)

[Carreira 4 de abr. de 2026 Trabalhar como freelancer: 7 sites para conseguir jobs como programador](/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador)

[Carreira 5 de set. de 2021 Lista de sites para trabalhar remotamente como programador em 2022](/lista-definitiva-de-sites-para-progradores-remotos)

[Javascript 25 de jul. de 2021 Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos](/como-gerar-um-array-populado-em-javascript)

[Carreira 13 de mai. de 2021 A habilidade mais importante que um programador deveria ter (e praticar)](/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar)

[Carreira 19 de mar. de 2019 Como as maratonas de programação da faculdade impactaram a minha carreira](/como-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira)

[Carreira 1 de mar. de 2019 Sua carreira pode mudar durante o carnaval?](/sua-carreira-pode-mudar-durante-o-carnaval)

[Carreira 21 de fev. de 2018 Primeiros passos na Toptal – Série Trabalho Remoto](/primeiros-passos-na-toptal)

[Carreira 21 de fev. de 2018 Processo Seletivo da Toptal – Série Trabalho Remoto](/processo-seletivo-da-toptal)

[Carreira 20 de fev. de 2018 Qual o projeto certo para estudar programação?](/projeto-certo-para-estudar-programacao)

[Javascript 19 de fev. de 2018 Como invocar funções dinamicas em JavaScript](/como-invocar-funcoes-dinamicamente-com-js)

Anterior
1 / 26[Próxima](/blog/2)

---

# Busca Binária - DevPleno

URL: https://devpleno.com/busca-binaria

> Hoje vamos falar um pouco mais sobre algoritmos, que são as bases da computação. Especificamente sobre um tipo de busca que eu já utilizei em um projeto e ...

Algoritmos

## Busca Binária

T
Por Tulio Faria • 29 de agosto de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos falar um pouco mais sobre algoritmos, que são as bases da computação. Especificamente sobre um tipo de busca que eu já utilizei em um projeto e nunca imaginei que iria utilizar, a busca binária.

Os algoritmos de busca inicialmente parecem teóricos demais, mas, na verdade, podemos usar bastante em projetos. Há algum tempo, antes de termos o Android e IOS, era comum termos os Palmtops, eles tinham memória péssima e precisávamos fazer uma busca que nem era tão grande (essa busca demorava demais de forma sequencial) a partir disso, assumimos uma restrição nos dados, deixando-os ordenados para a busca binária e assim conseguimos resolver o problema.

Vou dar um exemplo de um problema com um vetor de 5 itens. Deixávamos o vetor de forma sequencial e salvavamos esses slots de dados sequencialmente, mas isolados, com isso era possível saber que quando fossemos naquele ponto de memória, teria poucas iterações.

A estratégia era a seguinte: tentamos acertar primeiro o item do meio, por exemplo, o número 3, se o número 3 é igual ao número que eu estou buscando, ele é retornado, caso eu esteja procurando o 2 por exemplo, eu sei que ele é menor que o 3, então meu próximo espaço de busca será 1 ou 2, com isso é tentado de novo, se acertar, ele retorna, caso contrário tentará de novo e por aí vai.

Por esse motivo é chamado de busca binária, porque sempre vamos dividir em dois espaços. O pior dos casos é ele dividir todos pela metade. Vamos implementar agora:

const vetor = [1, 2, 3, 4, 5]

const binSearch = (vetor, left, right, valor) => {
if (right >= left) {
const indice = parseInt(left + (right - left) / 2)

if (vetor[indice] === valor) {
return valor
}

if (vetor[indice] > valor) {
return binSearch(vetor, left, indice - 1, valor)
}

return binSearch(vetor, indice + 1, right, valor)
}

return -1
}

console.log(binSearch(vetor, 0, vetor.length - 1, 20))

console.log(binSearch(vetor, 0, vetor.length - 1, 5))
Para saber se o algoritmo acabou, uma das maneiras é se por algum motivo o item do lado direito for maior que do lado esquerdo, é válido, já que vamos marcar os lados para acertar a metade, caso ele não encontre do lado esquerdo, vamos procurar do lado direito, e por fim retornar -1 caso não encontrarmos em nenhum dos lados.

Nos casos, fizemos um valor que não existe, 20, e um que existe, 5. A vantagem que tirei nesse projeto é que toda vez que acessavamos o índice sempre gastava muito tempo, então poderíamos fazer o seguinte para economizar:

const binSearch = (vetor, left, right, valor) => {
if (right >= left) {
const indice = parseInt(left + (right - left) / 2)

const atual = vetor[indice]

if (atual === valor) {
return valor
}

if (atual > valor) {
return binSearch(vetor, left, indice - 1, valor)
}
}
}
A medida que escalamos, isso vai ficando cada vez mais interessante já que aumentamos muito o número de itens e o número de vezes que ele passa é pequeno.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Busca%20Bin%C3%A1ria&url=https%3A%2F%2Fdevpleno.com%2Fbusca-binaria) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fbusca-binaria)

---

# Carreira: Preciso de investimento para minha ideia? - DevPleno

URL: https://devpleno.com/carreira-preciso-de-investimento-para-minha-ideia

> Na hora de planejar suas ideias, a maioria das pessoas logo pensa em um investidor. Mas será que ele realmente é preciso para executar sua ideia? Neste víd...

Carreira

## Carreira: Preciso de investimento para minha ideia?

T
Por Tulio Faria • 22 de março de 2017

[Carreira](/tag/carreira)

Na hora de planejar suas ideias, a maioria das pessoas logo pensa em um investidor. Mas será que ele realmente é preciso para executar sua ideia? Neste vídeo, dou dicas sobre esse assunto baseado em experiências próprias. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações.

## Confira o vídeo:

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Carreira%3A%20Preciso%20de%20investimento%20para%20minha%20ideia%3F&url=https%3A%2F%2Fdevpleno.com%2Fcarreira-preciso-de-investimento-para-minha-ideia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcarreira-preciso-de-investimento-para-minha-ideia)

---

# Carreira: Preço que tem que ser pago - DevPleno

URL: https://devpleno.com/carreira-preco-que-tem-que-ser-pago

> Neste vídeo, faço uma análise de como aprendemos novas skills. Confira! Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, inscr...

Carreira

## Carreira: Preço que tem que ser pago

T
Por Tulio Faria • 2 de maio de 2017

[Carreira](/tag/carreira)

Neste vídeo, faço uma análise de como aprendemos novas skills. Confira!

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Confira o vídeo:

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Carreira%3A%20Pre%C3%A7o%20que%20tem%20que%20ser%20pago&url=https%3A%2F%2Fdevpleno.com%2Fcarreira-preco-que-tem-que-ser-pago) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcarreira-preco-que-tem-que-ser-pago)

---

# Carreira: Tomar decisões - DevPleno

URL: https://devpleno.com/carreira-tomar-decisoes

> Você toma decisões na sua equipe? Mesmo não sendo o líder? Você líder deixa as pessoas tomarem decisões? Neste vídeo faço uma pequena reflexão sobre como d...

Carreira

## Carreira: Tomar decisões

T
Por Tulio Faria • 4 de abril de 2017

[Carreira](/tag/carreira)

Você toma decisões na sua equipe? Mesmo não sendo o líder?

Você líder deixa as pessoas tomarem decisões?

Neste vídeo faço uma pequena reflexão sobre como decisões podem desenrolar e deixar equipes e empresas muito mais produtivas.

Confira o vídeo:

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Um abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Carreira%3A%20Tomar%20decis%C3%B5es&url=https%3A%2F%2Fdevpleno.com%2Fcarreira-tomar-decisoes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcarreira-tomar-decisoes)

---

# Carreira: Você é o passageiro da sua Vida? - DevPleno

URL: https://devpleno.com/carreira-voce-e-o-passageiro-da-sua-vida

> Você está levando sua vida para alcançar seus objetivos? Você está sendo o motorista ou passageiro na sua própria vida? Confira o vídeo: <div className=&#34;em...

Carreira

## Carreira: Você é o passageiro da sua Vida?

T
Por Tulio Faria • 27 de março de 2017

[Carreira](/tag/carreira)

Você está levando sua vida para alcançar seus objetivos?

Você está sendo o motorista ou passageiro na sua própria vida?

Confira o vídeo:

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Um abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Carreira%3A%20Voc%C3%AA%20%C3%A9%20o%20passageiro%20da%20sua%20Vida%3F&url=https%3A%2F%2Fdevpleno.com%2Fcarreira-voce-e-o-passageiro-da-sua-vida) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcarreira-voce-e-o-passageiro-da-sua-vida)

---

# Redirecting to: /tag/nodejs

URL: https://devpleno.com/categoria/node-js

Redirecting to: /tag/nodejs [Redirecting from /categoria/node-js to /tag/nodejs](/tag/nodejs)

---

# Chainability com Javascript - DevPleno

URL: https://devpleno.com/chainability-com-javascript

> Hoje eu quero mostrar como podemos construir um pattern que é muito utilizado no Jquery. Apesar de não ser um pattern que muita gente gosta, é bastante int...

Javascript

## Chainability com Javascript

T
Por Tulio Faria • 10 de novembro de 2017

[Javascript](/tag/javascript)

Hoje eu quero mostrar como podemos construir um pattern que é muito utilizado no Jquery. Apesar de não ser um pattern que muita gente gosta, é bastante interessante.

Vamos construir um para você ter uma ideia de como podemos fazer e também para entender um pouco da linguagem que está ali por trás.

Ele também pode ser utilizado em outras linguagens além do JavaScript.

Em jQuery, podemos fazer o seguinte:

$('.opa').attr('', '').css('', '').click()
Essa possibilidade de encadear coisas relacionadas a um elemento é chamado de Chainability, isso é bastante interessante para o JavaScript.

Como podemos ter um comportamento semelhante a esse?

Vamos criar uma calculadora para você ter uma ideia de como se utiliza:

const calculador = (initial = 0) => {
const obj = {
total: initial,

add: (num) => {},

sub: (num) => {},

div: (num) => {},

mult: (num) => {}
}

return obj
}
A calculadora foi construída, mas até agora não temos a possibilidade de fazer esse chain. O que permite a gente fazer isso é o seguinte:

const calculador = (initial = 0) => {

const obj = {
total: initial,

add: (num) => {
obj.total+=num

return obj
},

sub: (num) => {
obj.total-=num

return obj
},

div: (num) => {
obj.total/=num

return obj
},

mult: (num) => {
obj.total*=num

return obj
}

out: () => {
console.log(obj.total)

return obj
}
}

return obj

}
Só o fato de conseguirmos retornar o obj, já é possível fazer o seguinte:

calculadora().add(10).sub(5).out()
Assim já conseguimos saber qual é o retorno dele. A ideia do chainlability é que toda operação que ele faz ele vai retornar o próprio objeto. Isso faz muito sentido para o jQuery, já que mudamos o html de forma imperativa.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Chainability%20com%20Javascript&url=https%3A%2F%2Fdevpleno.com%2Fchainability-com-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fchainability-com-javascript)

---

# CHAVES DINÂMICAS - DevPleno

URL: https://devpleno.com/chaves-dinamicas

> Hoje eu quero comentar uma novidade no ES6, mostrando a forma de como faríamos isso anteriormente. A partir do ES6, conseguimos inicializar um objeto JavaS...

Javascript

## CHAVES DINÂMICAS

T
Por Tulio Faria • 23 de novembro de 2017

[Javascript](/tag/javascript)

Hoje eu quero comentar uma novidade no ES6, mostrando a forma de como faríamos isso anteriormente. A partir do ES6, conseguimos inicializar um objeto JavaScript passando uma Key dinâmica, mas anteriormente nós conseguiamos fazer isso apenas posteriormente, ou seja, tínhamos que criar o objeto para depois conseguir alterá-lo.

Anteriormente fazíamos dessa forma:

const obj = {
a: 1
}

obj['b'] = 2

console.log(obj)
Porém, assim não tínhamos um jeito de fazer dinamicamente. Inspirado por essa forma de construir, o ES6 trouxe essa novidade, onde podemos fazer isso já de começo. Se eu quisesse colocar esse 2 na inicialização do objeto, eu poderia fazer simplesmente:

const obj = {
a: 1,
['b']: 2
}

console.log(obj)
Assim já inicializamos esse objeto com o key dinâmico, coisa que não era possível no ES6. É muito interessante eles aproveitarem o property accessor já na inicialização.

Confira o vídeo:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=CHAVES%20DIN%C3%82MICAS&url=https%3A%2F%2Fdevpleno.com%2Fchaves-dinamicas) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fchaves-dinamicas)

---

# Cheerio: Uma implementação jQuery para Node - DevPleno

URL: https://devpleno.com/cheerio

> Cheerio é um módulo muito interessante porque é uma implementação do jQuery para Node. Vou criar um arquivo novo para ilustrar melhor. Vou salvar como chee...

Javascript

## Cheerio: Uma implementação jQuery para Node

T
Por Tulio Faria • 14 de agosto de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Cheerio é um módulo muito interessante porque é uma implementação do jQuery para Node. Vou criar um arquivo novo para ilustrar melhor. Vou salvar como cheereio.js e colocá-lo como dependência, mas para isso é preciso instalar ele primeiro:

npm install cheerio
e dentro do arquivo faremos o seguinte:

const cheerio = require('cheereio')

let $ = cheerio.load('&#x3C;ul>&#x3C;li>1&#x3C;/li>&#x3C;li>2&#x3C;/li>&#x3C;/ul>')
A partir desse momento, o Cheerio vai carregar esse HTML que coloquei dentro e permitir que eu navegue ou faça tudo que eu faria com jQuery no HTML. Por exemplo, eu posso pedir para pegar todos os li e caminhar por eles, depois escrever na tela:

$('li').each(function () {
console.log($(this).html())
})
Ao rodar, ele irá retornar o 1 e 2. Podemos alterar o HTML também, vamos supor que eu queira adicionar mais um li:

$('ul').append('&#x3C;li>3&#x3C;/li>')

$('li').each(function () {
console.log($(this).html())
})
Com isso eu consigo manipular o HTML exatamente como se estivesse no jQuery ou no browser. Eu poderia pegar esse código, voltar para o request e, ao invés de escrever o site da UOL na tela, jogar o Body dentro. Vamos supor que eu quero saber qual o título do site:

const request = require('request')
const cheerio = require('cheerio')

request('https://www.uol.com.br', function (err, res, body) {
if (!err &#x26;&#x26; res.statusCode == 200) {
let $ = cheerio.load(body)

$('title').each(function () {
console.log($(this).html())
})
}
})

// Resposta: UOL - Seu universo online
Então o request buscou o HTML, trouxe para o Cheerio, mandei ele carregar e fizemos um transversing e caminhei pelo HTML. Posso fazer ele trazer todos os p’s do site da uol:

const request = require('request')
const cheerio = require('cheerio')

request('https://www.uol.com.br', function (err, res, body) {
if (!err &#x26;&#x26; res.statusCode == 200) {
let $ = cheerio.load(body)

$('p').each(function () {
console.log($(this).html())
})
}
})
O Cheerio não é um browser completo, então vai permitir que você apenas navegue pelo HTML, isso é muito legal para fazermos um crawler, por exemplo, podemos acessar um outro site como se fosse um navegador e escolher a informação que a gente quer, usando seletores do próprio jQuery.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Cheerio%3A%20Uma%20implementa%C3%A7%C3%A3o%20jQuery%20para%20Node&url=https%3A%2F%2Fdevpleno.com%2Fcheerio) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcheerio)

---

# Chocolatey - Gerenciador de Pacotes para Windows - DevPleno

URL: https://devpleno.com/chocolatey

> Essa dica é para você utiliza o windows para desenvolvimento: um package manenger chamado chocolatey, semelhante ao yum. Ele facilita bastante quando vamos...

Javascript

## Chocolatey - Gerenciador de Pacotes para Windows

T
Por Tulio Faria • 29 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Essa dica é para você utiliza o windows para desenvolvimento: um package manenger chamado chocolatey, semelhante ao yum. Ele facilita bastante quando vamos instalar algumas dependências ou pacotes de software como o NodeJS.

**Como instalar o chocolatey?**

A primeira coisa é entrar em [https://www.chocolatey.org/install](https://www.chocolatey.org/install){:rel=“nofollow”}, rodar o CMD.exe como administrador e copiar esse trecho de código:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" &#x26;&#x26; SET "PATH=%PATH%;%ALLUSERSPROFILE%\\chocolatey\\bin"
Cole no CMD, dê enter e espere a instalação. Pronto! Agora vamos fazer um teste para instalar alguma dependência.
Note que no site há uma aba Packeges, nele temos todos os pacotes disponíveis para instalação. Vamos tentar instalar o 7zip. Selecione a linha de código referente ao programa e cole no CMD:

choco install 7zip.install
Aparecerá uma mensagem para aceitar as licenças do pacote e, em seguida, que o pacote foi aprovado. Então perguntará se quer rodar o script, aperte Y para continuar. Pronto, o 7Zip está instalado na sua máquina.

Este é um utilitário muito interessante, pois podemos instalar Java, NodeJS, Python… Tudo a partir desse gerador de dependência. Facilita bastante para nós que sempre temos que ficar instalando algumas coisas no ambiente de desenvolvimento.

Confira os passos no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Chocolatey%20-%20Gerenciador%20de%20Pacotes%20para%20Windows&url=https%3A%2F%2Fdevpleno.com%2Fchocolatey) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fchocolatey)

---

# Como Usar o Describe Session do Claude Code para Conectar Projetos - DevPleno

URL: https://devpleno.com/claude-code-describe-session

> Aprenda a usar o describe session do Claude Code para passar contexto entre sessões e projetos diferentes. Guia prático com exemplo real de CMS + front-end.

Ferramentas

## Como Usar o Describe Session do Claude Code para Conectar Projetos

T
Por Tulio Faria • 5 de abril de 2026

*

[Ferramentas](/tag/ferramentas)

O **describe session** é uma funcionalidade do Claude Code que permite que uma sessão descreva seu próprio contexto de forma estruturada — como se estivesse gerando um briefing para outro agente ou sessão.

Na prática, você pede para o Claude explicar o que está acontecendo no projeto atual, e ele gera uma descrição completa: o que foi feito, qual é o estado atual e o que a próxima sessão precisa saber para continuar o trabalho.

Isso é especialmente útil quando você trabalha com **dois ou mais projetos que precisam se comunicar**, como um back-end e um front-end separados.

## Por que isso é útil ao trabalhar com múltiplos projetos

Quem desenvolve com projetos separados conhece o problema: você está no projeto A e precisa que o projeto B entenda exatamente o que mudou, quais endpoints estão disponíveis ou como uma integração deve funcionar.

Sem o describe session, a alternativa seria:

- Escrever manualmente um resumo do que foi feito

- Copiar trechos de código entre sessões

- Tentar explicar o contexto do zero em cada nova sessão

Com o describe session, o próprio Claude gera essa passagem de contexto de forma automática e estruturada. Ele entende o projeto, sabe o que foi implementado e consegue descrever isso como outro agente faria.

## Como usar na prática

Veja um caso real: um **CMS** criado com Claude Code que possui um **front-end** separado fazendo a integração.

O front-end começou a ter dificuldades para consumir a API do CMS. Em vez de abrir a sessão do front-end e tentar explicar tudo manualmente, o caminho foi diferente:

- **Abra a sessão do Claude Code no projeto do CMS** (o projeto que tem o contexto que você quer compartilhar)

- **Peça para o Claude descrever a sessão** pensando em como outro agente usaria essa informação. Algo como: “Describe this session so another Claude session working on the front-end can understand how to integrate with this CMS”*

- **O Claude gera a descrição completa** — endpoints disponíveis, estrutura de dados, autenticação, tudo o que a outra sessão precisa saber

- **Use essa descrição na sessão do front-end** como contexto inicial, colando o output ou referenciando-o

O resultado é que a sessão do front-end recebe um briefing claro e estruturado, sem perda de informação.

## Indo além: passando contexto entre agentes e modelos diferentes

O describe session não se limita a conectar duas sessões do Claude Code. Você pode usar essa mesma técnica para:

- **Passar contexto entre agentes diferentes** — por exemplo, de um agente de código para um agente de revisão

- **Gerar prompts para outros modelos** — pedir para o Claude descrever a sessão em formato de prompt otimizado para outro LLM

- **Criar documentação de handoff** — quando outro desenvolvedor (humano ou IA) vai assumir o trabalho

A ideia central é a mesma: transformar o contexto implícito de uma sessão de trabalho em uma descrição explícita e reutilizável.

## Quer dominar o Claude Code e IA na prática?

Se você quer ir além e aprender a usar o Claude Code como ferramenta principal no seu fluxo de desenvolvimento, temos um curso bônus sobre IA e Claude Code dentro do **The Best Stack**. Lá você aprende na prática como integrar IA no seu dia a dia como dev.

**[Acesse o The Best Stack e comece agora](https://do.devpleno.com/the-best-stack)**

## FAQ

### O describe session funciona entre projetos diferentes?

Sim. Você pode usar o describe session em um projeto e levar a descrição gerada para qualquer outro projeto ou sessão. O contexto é gerado como texto, então é portável.

### Preciso usar algum comando específico?

Você pode simplesmente pedir em linguagem natural para o Claude descrever a sessão atual. Use instruções claras sobre para quem é a descrição (outro agente, outro projeto, outro modelo) para obter o melhor resultado.

### Funciona com outros modelos além do Claude?

Sim. Como o output é texto estruturado, você pode usar a descrição gerada como prompt para qualquer outro modelo ou ferramenta de IA.

### Qual a diferença entre describe session e os arquivos CLAUDE.md?

Os arquivos CLAUDE.md são instruções persistentes que você escreve manualmente para dar contexto ao Claude em todas as sessões de um projeto. O describe session é uma descrição gerada sob demanda do estado atual de uma sessão específica — útil para passagens pontuais de contexto.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20Usar%20o%20Describe%20Session%20do%20Claude%20Code%20para%20Conectar%20Projetos&url=https%3A%2F%2Fdevpleno.com%2Fclaude-code-describe-session) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fclaude-code-describe-session)

---

# Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente - DevPleno

URL: https://devpleno.com/claude-code-otimizacao-arquivos

> Aprenda como o Claude Code pode otimizar PNGs, imagens e outros arquivos do seu projeto com um simples pedido. Reduza até 80% do tamanho dos arquivos.

Ferramentas

## Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente

T
Por Tulio Faria • 5 de abril de 2026

[Ferramentas](/tag/ferramentas)

Você sabia que pode simplesmente pedir para o Claude Code otimizar os arquivos do seu projeto — e ele faz tudo sozinho? Sem pesquisar ferramenta, sem ler documentação, sem configurar nada. Em um teste real com PNGs, conseguimos **reduzir 80% do tamanho dos arquivos** com um único pedido.

Se você trabalha com projetos que têm imagens, assets ou bundles pesados, essa é uma das formas mais rápidas de ganhar performance sem esforço manual.

## O Claude Code Otimiza Arquivos Por Você

A ideia é simples: você abre o Claude Code no terminal, descreve o que precisa, e ele cuida do resto.

Quando pedimos “otimize os PNGs deste projeto”, o Claude Code:

- **Analisou o projeto** e identificou os arquivos PNG

- **Sugeriu a ferramenta certa** — no caso, o pngquant, uma das melhores opções para compressão de PNG com perda controlada

- **Perguntou se queríamos rodar automaticamente** — sem impor nada

- **Executou a otimização** em todos os arquivos de uma vez

Nenhuma etapa exigiu que soubéssemos qual ferramenta usar ou como configurá-la. O Claude Code trouxe o conhecimento técnico e a execução.

## Exemplo Prático — 80% de Redução em PNGs

Em um projeto real, pedimos para o Claude Code otimizar as imagens PNG. Ele escolheu o **pngquant**, uma ferramenta de linha de comando que reduz o tamanho de PNGs usando quantização de cores com canal alfa.

**Os resultados:**

Métrica

Antes

Depois

Tamanho total dos PNGs

100%

~20%

Redução média

—

**~80%**

Qualidade visual

Original

Praticamente idêntica

O Claude Code ainda ofereceu criar uma comparação lado a lado para checar a qualidade de cada imagem. Como estávamos usando **Git e GitHub**, conseguimos revisar o antes e depois diretamente no pull request — cada alteração de imagem ficava visível no diff.

**Dica:** sempre faça a otimização em um branch separado. Assim você compara visualmente no GitHub antes de fazer o merge, sem risco de perder qualidade sem perceber.

## Outros Tipos de Otimização Que Você Pode Pedir

PNG é só o começo. O Claude Code consegue sugerir e executar otimizações para praticamente qualquer tipo de arquivo ou recurso do seu projeto:

- **Imagens (SVG, JPEG, WebP)** — ferramentas como svgo, mozjpeg ou cwebp, escolhidas automaticamente conforme o formato

- **Bundles JavaScript e CSS** — minificação, tree-shaking, análise de tamanho com ferramentas como esbuild ou terser

- **Dockerfiles** — redução de camadas, multi-stage builds, imagens base menores

- **Queries SQL** — reescrita de consultas lentas, sugestão de índices

- **Fontes** — subsetting para incluir apenas os caracteres usados

O padrão é sempre o mesmo: você descreve o problema, o Claude Code encontra a ferramenta, explica o que vai fazer e executa com sua aprovação.

## Erros Comuns ao Otimizar Arquivos com IA

Mesmo com uma ferramenta inteligente, alguns cuidados são importantes:

**Não revisar a qualidade visual.** Compressão de imagem sempre envolve trade-offs. Mesmo com 80% de redução, revise as imagens mais importantes. O GitHub facilita isso — o diff de imagens mostra o antes e depois lado a lado.

**Não versionar antes de otimizar.** Sempre rode otimizações em um branch separado no Git. Se algo der errado, você volta ao estado anterior em um comando. Sem versionamento, uma otimização agressiva pode destruir assets originais.

**Aceitar tudo sem entender.** O Claude Code explica o que vai fazer antes de rodar. Leia a sugestão. Entenda se a ferramenta proposta faz compressão com perda (lossy) ou sem perda (lossless). Para ícones e screenshots, lossy geralmente funciona bem. Para assets de design que serão editados depois, prefira lossless.

**Otimizar uma vez e esquecer.** Novos arquivos entram no projeto o tempo todo. Considere criar um script ou hook de CI que rode a otimização automaticamente em cada PR.

## Quer dominar o Claude Code e IA na prática?

Se você quer ir além e aprender a usar o Claude Code como ferramenta principal no seu fluxo de desenvolvimento, temos um curso bônus sobre IA e Claude Code dentro do **The Best Stack**. Lá você aprende na prática como integrar IA no seu dia a dia como dev.

**[Acesse o The Best Stack e comece agora](https://do.devpleno.com/the-best-stack)**

## FAQ

### O Claude Code instala ferramentas sozinho?

Sim. Quando o Claude Code sugere uma ferramenta como o pngquant, ele pede sua aprovação e executa a instalação via gerenciador de pacotes (brew, npm, apt, etc.). Você mantém o controle — nada roda sem seu OK.

### Funciona com qualquer tipo de arquivo?

O Claude Code trabalha com qualquer arquivo que tenha uma ferramenta de otimização disponível via linha de comando. Imagens, vídeos, fontes, código minificado, containers Docker — se existe uma ferramenta para isso, ele consegue sugerir e rodar.

### Preciso saber usar linha de comando?

Não. Esse é justamente o ponto. Você descreve o que precisa em linguagem natural — “otimize os PNGs”, “reduza o tamanho do bundle”, “comprima as imagens” — e o Claude Code traduz isso em comandos técnicos. Ele explica o que vai fazer antes de executar.

### É seguro rodar otimizações automáticas no meu projeto?

Sim, desde que você use Git. Crie um branch, rode a otimização, revise as mudanças no diff e só faça merge quando estiver satisfeito. É o mesmo fluxo de qualquer mudança de código.

### Quanto de redução posso esperar?

Depende do tipo de arquivo e do nível de otimização anterior. PNGs não otimizados costumam ter reduções de 50-80%. SVGs com código desnecessário podem cair 30-60%. O Claude Code mostra os resultados para você avaliar.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20Usar%20o%20Claude%20Code%20Para%20Otimizar%20Seus%20Arquivos%20Automaticamente&url=https%3A%2F%2Fdevpleno.com%2Fclaude-code-otimizacao-arquivos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fclaude-code-otimizacao-arquivos)

---

# Closure Série - POO para JS - DevPleno

URL: https://devpleno.com/closure-poo-para-js

> Hoje vou continuar a falar sobre como passar de Programação Orientadaobjetos para JavaScript cada vez mais funcional. Uma outra coisa bastante diferente pa...

Javascript

## Closure Série - POO para JS

T
Por Tulio Faria • 7 de novembro de 2017

[Javascript](/tag/javascript)

Hoje vou continuar a falar sobre como passar de Programação Orientada-objetos para JavaScript cada vez mais funcional.

Uma outra coisa bastante diferente para se comparar entre ambos os paradigmas é o uso de closure. No JavaScript, anteriormente tínhamos reproduzido aquela “classe” e acabamos criando uma closure. Vamos supor que eu faça uma função dessa forma:

function func1() {
const name = 'tulio faria'

function func1b() {
console.log(name)
}

func1b()
}

func1()
Em JavaScript é normal e podemos fazer uma função dentro de uma função como no exemplo acima. Você percebeu que eu consegui acessar o ‘name’? Isso é uma característica do JS. Por conseguir colocar uma função em uma variável, é possível ter funções dentro de funções. Essa função interna consegue acessar o escopo da função pai.

No cenário, vamos executar esse código todo síncrono e em seguida ele morre, porém, existe uma outra situação onde eu consigo manter esse escopo vivo. Vamos supor que eu queira passar uma saudação:

function func1() {
const saudacao = 'Ola' + name

function func1b() {
console.log(saudacao)
}

return func1b
}

const saudarOTulio = func1('Tulio Faria')

saudarOTulio()
Quando eu fiz isso, a func1 passou a ser uma closure porque ela travou esse escopo inteiro, nisso eu posso a qualquer momento chamar essa saudação. Existem alguns tipos de funcionalidades dentro do JS que permitem que a gente faça alguns tipos interessantes, como por exemplo:

const contador = function (num) {
let atual = 1

let timer = setInterval(() => {
if (atual === num) {
clearInterval(timer)
}

console.log(atual++)
}, 1000)
}

contador(5)
Temos um contador que está usando todas as variáveis do lado de fora e temos um contador separado. Perceba que o setInterval está usando as variáveis de fora, isso cria um enclausuramento dessas variáveis. Outra coisa importante: esse código é assíncrono, então sempre que chamamos o setInterval, colocamos isso no event loop.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Closure%20S%C3%A9rie%20-%20POO%20para%20JS&url=https%3A%2F%2Fdevpleno.com%2Fclosure-poo-para-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fclosure-poo-para-js)

---

# NodeJS Primeiros Passos: Closures e Escopos - DevPleno

URL: https://devpleno.com/closures-e-escopos

> Neste vídeo é abordado mais sobre closures e escopos em javascript, conceitos bastante importantes para a criação futura de módulos. Código fonte:  Confira...

Javascript

## NodeJS Primeiros Passos: Closures e Escopos

T
Por Tulio Faria • 26 de julho de 2016

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste vídeo é abordado mais sobre closures e escopos em javascript, conceitos bastante importantes para a criação futura de módulos.

[Código fonte:](https://gist.github.com/tuliofaria/72953c6c4b898561aee5e8d91dd589ab)

## Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20Closures%20e%20Escopos&url=https%3A%2F%2Fdevpleno.com%2Fclosures-e-escopos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fclosures-e-escopos)

---

# CLT ou PJ em Software - O que vale mais a pena? - DevPleno

URL: https://devpleno.com/clt-ou-pj

> Hoje eu gostaria de mostrar uma continha que eu acho bastante interessante quando vamos analisar ofertas de emprego, que o pessoal fala sobre CLT ou PJ. En...

Carreira

## CLT ou PJ em Software - O que vale mais a pena?

T
Por Tulio Faria • 30 de agosto de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de mostrar uma continha que eu acho bastante interessante quando vamos analisar ofertas de emprego, que o pessoal fala sobre CLT ou PJ. Entenda qual o custo de cada uma delas e porque você deveria escolher uma ou outra.

A primeira coisa que temos que definir é o salário (lembrando que eu não sou contador, essa é uma conta que eu geralmente faço caso alguém me ofereça um emprego). Vamos colocar, por exemplo, R$10 mil.

Qual o custo disso para a empresa que está empregando?

O custo para ela vai ser na faixa de 13x esse valor, pois é acrescentado o décimo terceiro, férias, etc, mais um encargo em torno de 30%:

10.000,00 x 13 x 1,3 = 169.000,00
Valor para a empresa: R$169.000,00

Então se você recebe R$10 mil por mês, em um ano você custa em torno de R$169 mil para a empresa. No meu caso, como eu sou Super Simples, eu acabo pagando meus funcionários todos juntos no CLT, então não dá pra ter uma ideia muito grande de quanto é.

Quanto desses R$169 mil você vai levar efetivamente?

Lembrando que se você recebe R$10 mil, vai bater na alíquota máxima do imposto de renda, então temos que multiplicar também por 0,725

10.000,00 x 13 x 0,725 = 94.250,00
Valor líquido: R$94.250,00

Perceba que isso já é uma diferença de R$74.750,00 (isso é apenas uma comparação no caso da CLT). Agora, qual o custo como PJ para a empresa que está te contratando?

10.000,00 x 12 = 120.000,00

No fim das contas a empresa não vai gastar mais nada, mas qual o líquido que você vai receber em cima desses R$120 mil? Você terá que pagar um imposto, que se for no Super Simples, por exemplo, pode cair em torno de 8%:

10.000,00 x 12 x 0,93 = 111.600,00
Valor líquido: R$111.600,00

Esse é um cálculo bem por cima, mas recebendo como PJ, você teria um custo menor para a empresa e seu lucro também seria muito maior. Obviamente as pessoas se perguntam sobre os benefícios de ser registrado, mas esquecem que o seguro desemprego, por exemplo, tem um teto salarial, então se você ganha R$10 mil por mês, não vai ganhar isso de seguro desemprego então, nos seus 6 primeiros meses de PJ, você pode e deve, por exemplo, fazer uma reserva de segurança. Agora é a grande vantagem do que eu vejo em pensar como uma pessoa PJ, mesmo você sendo CLT.

Como PJ, você não tem algumas seguranças como o seguro desemprego, a vantagem que eu vejo é que você vai ter mais consciência das coisas, quanto custa um plano de saúde, plano B caso aconteça algo e por fim não vai ser enganado pelo décimo terceiro, porque você acha que está ganhando a mais quando, na verdade, o custo que você tem vai ser maior como CLT.

Se a empresa tiver R$169 mil para pagar um profissional ao invés de R$10 mil, seu salário poderia ser 169000/12 que daria uma quantia de R$ 14.083,33.
Isso é apenas um apanhado sobre tributações. Existem vários trâmites, se é legal ou não… isso não é o mérito dessa aula, e sim mostrar a diferença efetiva dos dois lados.

Na parte do PJ, pode ser, por exemplo, que precise pagar um contador. Vamos colocar um valor de R$300,00/mês como exemplo, então seria R$3600,00 por ano, mesmo assim a diferença é muito gritante. Falando em valores finais, ainda vale a pena ser PJ. Se você tiver que escolher, pense com calma o que realmente quer, faça os cálculos.

## Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=CLT%20ou%20PJ%20em%20Software%20-%20O%20que%20vale%20mais%20a%20pena%3F&url=https%3A%2F%2Fdevpleno.com%2Fclt-ou-pj) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fclt-ou-pj)

---

# cmder: Turbine seu cmd no Windows - DevPleno

URL: https://devpleno.com/cmder-turbine-seu-cmd-no-windows

> Olá pessoal, hoje vai uma dica interessante para quem desenvolve no windows (sim, eu ainda me incluo neste grupo, mas logo logo estarei de mudança :)). Eu ...

Javascript

## cmder: Turbine seu cmd no Windows

T
Por Tulio Faria • 13 de outubro de 2016

[Javascript](/tag/javascript)

Olá pessoal,
hoje vai uma dica interessante para quem desenvolve no windows (sim, eu ainda me incluo neste grupo, mas logo logo estarei de mudança :)).

Eu fico bastante irritado com o cmd padrão do windows. Simplesmente porque tudo nele é meio burocrático de se fazer (aka copiar saídas, etc). Bom, resolvi então buscar uma solução, e uma das que estou utilizando atualmente e estou gostando muito é o Cmder.

Bom, começando pela interface:

Achei muito bacana esse efeito translucido, mas além de ser só um corpinho bonito, ele realmente é muito funcional e ajuda bastante na produtividade. Alguns pontos que já me chamaram a atenção:

1 – Várias abas
Basta utilizar o atalho: Shif+Alt+1 para adicionar uma aba do CMD, ou Shit+Alt+2 para uma do PowerShell. Ah, e elas ficam todas organizadinhas na parte de baixo da interface (quem já teve que lidar com um zilhão de cmd´s abertos ao mesmo tempo no windows sabe como isso é um grande avanço).

2 – Copiar e colar
Copiar e colar no cmd padrão é bem complicadinho. Você não consegue selecionar o texto diretamente. Já no cmder basta selecionar o texto que você quer que ele já copia. Se quiser colar, basta clicar com o botão direito do mouse.

3 – Cmd on esteroids
O cmder utiliza um “enhancer” para ampliar os comandos disponíveis no shell. Inclusive com SSH, CURL, VI e grep

4 – Isso é só o começo
Recomendo vocês a entrarem nas preferências do Cmder (clicando no title com o botão direito) ou pressionando win+alt+p, e o personalizar ainda mais (aumentar a fonte entre outros). É possível também configurar como novas abas serão abertas. Vale a pena explorar

Eu explorei alguns destes itens, porém, só com o básico já ganhei bastante produtividade, acredito que vocês também ganharão. Até a próxima dica

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=cmder%3A%20Turbine%20seu%20cmd%20no%20Windows&url=https%3A%2F%2Fdevpleno.com%2Fcmder-turbine-seu-cmd-no-windows) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcmder-turbine-seu-cmd-no-windows)

---

# code fights - Metro Card - DevPleno

URL: https://devpleno.com/code-fights-metro-card

> Hoje vamos resolver mais um problema que está disponível no Code Fights. Esse problema é chamado de metro card. Pode parecer simples, mas tem algumas coisa...

Algoritmos

## code fights - Metro Card

T
Por Tulio Faria • 16 de novembro de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos resolver mais um problema que está disponível no Code Fights. Esse problema é chamado de metro card. Pode parecer simples, mas tem algumas coisas bastante interessantes de ter na cabeça.

O que é o problema do metro card?

Nós temos uma função que você vai informar qual o último número de dias. Vamos supor que eu tenho um cartão de metro com 30 dias, eu utilizei os 30 dias, o vetor vai me retornar as possibilidades de próxima recarga baseado em como os meses são organizados.

function metroCard(lastNumberOfDays) {}
Por exemplo, se colocarmos 28 no lastNumberOfDays, teríamos que retornar 31, que é o próximo mês que podemos recarregar. Minha ideia inicial foi montar um vetor com os meses do ano:

function metroCard(lastNumberOfDays) {
const months = [31, //jan
28, // fev
31, //mar
30, //apr
31, //may
30, //jun
31, //jul
31, //aug
30, //set
31, //oct
30, //nov
31 //dec]
}
Outra coisa bastante importante é ficar ligado no que o problema pede como saída, especificamente nesse problema, temos que retornar um vetor ordenado crescente.

Agora podemos fazer o seguinte: vamos guardar todos os dias que a gente tem posterior a esse valor informado. Por exemplo, se eu informei 28, a única possibilidade que tenho é 31:

const days = {
months.forEach((elem, index) => {
if(elem === lastNumberOfDays){
console.log(months[index+1])
}
})
}

metroCard(28)

metroCard(30)
Percebam que o mês vai ser retornado como undefined. Nós precisamos de mais um ajuste, precisamos somar que o índice precisa fazer o resto por %12. Sempre que usamos o %, ele volta para zero e pega o restante, por exemplo 4 %12 retorna 4.

const days = {
months.forEach((elem, index) => {
if(elem === lastNumberOfDays){
console.log(months[(index+1)%12])
}
})
}
Agora podemos criar um key utilizando o número do dia e retornar o nosso object com as keys. Além disso, essa chave trás strings, precisamos retornar inteiros para garantir que o sort vai ordenar ele como queríamos:

const days = {
months.forEach((elem, index) => {
if(elem === lastNumberOfDays) {
days[months[(index+1)%12] = 1]
}
})

return Object
.keys(days)
.map( item => parseInt(item))
.sort()
}

Ele é uma estrutura de dados muito comum. Além disso, vimos a estratégia de como resolver a parte cíclica. Quanto mais olharmos abordagens diferentes, mais preparados vamos estar para resolver esses problemas.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=code%20fights%20-%20Metro%20Card&url=https%3A%2F%2Fdevpleno.com%2Fcode-fights-metro-card) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcode-fights-metro-card)

---

# Codility: Como Resolver os Desafios e Passar nos Testes de Código - DevPleno

URL: https://devpleno.com/codility

> Guia prático para resolver desafios do Codility. Dicas, estratégias e exemplos de soluções para testes técnicos de programação.

Algoritmos

## Codility: Como Resolver os Desafios e Passar nos Testes de Código

T
Por Tulio Faria • 7 de junho de 2017

[Algoritmos](/tag/algoritmos)[Javascript](/tag/javascript)

O Codility é uma plataforma que pode ser utilizada para treinar programação e, no caso de recrutadores, para selecionar programadores para a equipe. No meu caso. utilizei o Codility para passar em uma das provas da Toptal e já aproveitei para estudar um pouco mais sobre programação.

**Vamos ao hands-on**

Depois de logado no Codility, já caímos em Codility Programers, que é o ambiente para programadores. Na parte superior, temos duas abas: as Lessons e os Challenges. Lessons são as lições que ele tem sobre assuntos de programação, conceitos básicos como iterações, vetores, etc. Já Challenges, são ‘competições’ que podemos participar. Ele é um ambiente completo. Conseguimos rodar baseados nas entradas, desenvolver normalmente utilizando a ferramenta.

**Como me preparei para a Toptal?**

Fui em lessons e fiz tudo que tinha para fazer, deixando tudo em 100%. Eu gosto de fazer na minha máquina depois submeter a solução, mas é possível fazer diretamente no Codility.

Vamos fazer um exemplo. Vou entrar em Iterations e dar o Start na lição. Vai aparecer a mensagem que eu tenho 120 minutos para concluir. Ao começar, é possível mudar de linguagem na aba superior.

O problema vem escrito do lado esquerdo e temos que resolver do lado direito. Ele já cria uma função solução.

Conseguimos dar um run para fazermos alguns casos de teste que rodarmos diretamente pelo Codility. Temos também o submit this task, aí sim ele vai passar por todos os processos de qualidade. É preciso ficar atento ao fato de que o Codility considera a complexidade. Na lesson escolhida, por exemplo, ele espera que o pior cenário a complexidade seja O(log(N));

Ele não consegue fazer isso igual fazemos manualmente, ele tem uma estimativa de qual o custo desse algoritmo, ou seja, uma estimativa baseada no que ele percebe que você definiu de variáveis por causa da complexidade de espaço e, no caso de tempo, mede o tempo, então isso pode variar bastante. Isso é bom para ficarmos atentos para reduzirmos esse tempo de consumo, tanto de processador quanto de memória. Também em lessons, temos os materiais para ler e entender o assunto daquela lição especifica. É recomendável ler os materiais também, pois muita das técnicas computacionais mostradas ali são interessantes para relembrar.

O Codility é tão simples quanto isso que eu mostrei. Quando você for fazer uma prova, alguém vai te mandar um link, você vai clicar e cair em uma prova específica da empresa, então ele escolhe a dificuldade das questões e define o tempo da prova inteira ou para cada questão.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Codility%3A%20Como%20Resolver%20os%20Desafios%20e%20Passar%20nos%20Testes%20de%20C%C3%B3digo&url=https%3A%2F%2Fdevpleno.com%2Fcodility) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcodility)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/coding-weekend-inscricoes

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /coding-weekend-inscricoes to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/coding-weekend-materiais

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /coding-weekend-materiais to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/coding-weekend-materiais-obrigado

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /coding-weekend-materiais-obrigado to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Coisas ruins normais - DevPleno

URL: https://devpleno.com/coisas-ruins-normais

> Essa dica de carreira é bem rápida, mas muito importante. Uma coisa que eu vejo acontecer com frequência é o fato das pessoas acharem que certas coisas rui...

Carreira

## Coisas ruins normais

T
Por Tulio Faria • 28 de agosto de 2017

[Carreira](/tag/carreira)

Essa dica de carreira é bem rápida, mas muito importante. Uma coisa que eu vejo acontecer com frequência é o fato das pessoas acharem que certas coisas ruins são normais. Por exemplo, vamos supor que você vá colocar o seu site ou uma atualização do seu sistema no ar e aquilo demora muito tempo… Quando está muito trabalhoso de se fazer, não está bom porque deve ser natural. Imagine que você tem que lembrar uma sequência de 50 pastas para colocar o sistema no ar.

Sempre que você perceber algumas situações como essa, verifique se não há uma maneira melhor de fazer isso. Já aconteceu de eu entrar em algumas equipes, nas quais algumas pessoas falavam algo do tipo: “isso funciona muito bem, só precisamos fazer isso, ou aquilo e depois isso.” No fim das contas, você tinha 50 processos para fazer em cada coisa. Se você organizasse, aquilo funcionaria muito melhor. Então não ache que está tudo normal se você está tendo muito trabalho para fazer algo.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Coisas%20ruins%20normais&url=https%3A%2F%2Fdevpleno.com%2Fcoisas-ruins-normais) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcoisas-ruins-normais)

---

# Como as maratonas de programação da faculdade impactaram a minha carreira - DevPleno

URL: https://devpleno.com/como-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira

> A história do post de hoje já tem mais de 10 anos e faz parte de lembranças que eu tenho de quando ainda estava na faculdade, mais precisamente, de quando ...

Carreira

## Como as maratonas de programação da faculdade impactaram a minha carreira

T
Por Tulio Faria • 19 de março de 2019

[Carreira](/tag/carreira)

A história do post de hoje já tem mais de 10 anos e faz parte de lembranças que eu tenho de quando ainda estava na faculdade, mais precisamente, de quando participava das maratonas de programação, onde me graduei. E fique comigo até o fim, pois a lição aqui não é só baseada nos prêmios e competição, mas tem total relação a minha aprovação na Toptal.

Esses são prêmios que ganhei participando das competições de programação. Apesar de simbólicos, eles não estão aqui para me gabar ou algo assim, mas claro, eles representam muito para mim e para o meu crescimento profissional e carregam histórias e lembranças da minha evolução como dev.

Na época foi gratificante, por exemplo, em uma competição onde havia alunos de todos os períodos, ter ficado em primeiro lugar mesmo competindo com o pessoal prestes a se formar (que além de mais experiência, já tinham participado das semi-finais nacionais da mesma competição).

No segundo ano de competição, como eu havia vencido no primeiro ano de faculdade, fui com a mentalidade de “já ganhei”. Bom, e aí vem mais uma lição: aprender que nem sempre vencemos. Sim, no meu segundo, fiquei em segundo lugar.

Ainda tinha mais 2 anos de competição, dava para vencer mais 2. Sim, sou muito competitivo e isso não é errado se você não deixar a competitividade passar por cima da sua ética.

Vamos para terceira vez competindo e… Caramba! Ficamos em segundo de novo! E a mesma equipe que havia nos desbancado no ano anterior venceu novamente. O que mais me chocava era que eles venceram sempre utilizando Pascal (perdemos realizando tudo em C puro).

Antes de ir para a minha última competição, refleti sobre o que eu tinha feito de diferente no primeiro ano e que não fiz nos outros 2 e também sobre como perdemos.

No quesito preparação, foi basicamente a mesma coisa, sempre me preparei. Fiz um aquecimento resolvendo vários problemas semelhantes nas semanas que antecederam a competição…

Mas havia algo a mais. Foi aí que lembrei que perdíamos por tempo e não por assertividade. Em maratonas de competição, o primeiro critério é o número de problemas resolvidos: quem resolve mais, vence e em caso de empate, quem os resolve mais rápido. Reparei que como a outra equipe entregava muito rápido (sim, os caras eram muito rápidos em Pascal e eram bem assertivos), tínhamos que vencer de outra forma: na quantidade.

Na minha última participação, faltando 30 minutos para acabar a competição, estávamos perdendo de novo – por tempo. Mesmo número de problemas resolvidos, porém, a equipe Pascal era rápida, tsc.

Restavam problemas cabeludos para resolver… Bom, dá para imaginar que fiquei nervoso e ansioso, mas foquei em fazer passar mais uma solução de problema. Tenta que tenta que tenta… Passamos! \o/

Caramba! Que alívio! Agora, era esperar que o Pascal Team não fizesse mais um – pois perderíamos no desempate por tempo. Lembro que fui embora da sala de competição e brinquei com a equipe do Pascal: “Agora é com vocês”.

É, desta vez foi! Vencemos! Conseguimos encerrar a graduação com mais uma vitória.

## Algumas lições que tirei durante os quatro anos de competição

O que mais aprendi durante a minha última vez competindo foi: precisamos repetir o que dá certo e mudar o que não dá. Parece simples, mas na prática é um pouco mais complicado.

Outro ponto importante: como manter a cabeça no lugar sob pressão. Daqueles 30 minutos finais, 20 passaram como se fosse 1 segundo (até que conseguimos resolver o problema). já os 10 minutos esperando, na ansiedade para descobrir se a outra equipe conseguiria resolver, pareciam dias. Isso me ensinou na prática como controlar o máximo que dava meu emocional.

Mas agora vem uma parte mais importante de toda essa história: a competição foi muito legal, ser premiado melhor ainda. Porém, naquele momento, eu não sabia o quanto ter vivenciado tudo isso teria de impacto na minha carreira.

## Como as maratonas de programação da faculdade me ajudaram a prosperar na carreira de Dev

Muitas vezes, os alunos ignoram atividades extracurriculares durante a faculdade e não dão a importância que elas realmente merecem. No meu caso, foi justamente nessas maratonas que eu passei a treinar programação e, sem dúvidas, isso fez toda a diferença na minha carreira e impactou (positivamente) na criação do DevPleno.

Quase 9 anos depois, fui participar do processo seletivo da Toptal, e adivinhem: em uma das fases (por sinal uma das que mais reprovam) o objetivo era resolver o máximo de problemas em 1 hora. Além do formato parecer muito com a maratona de programação, os tipos de problemas também eram bem semelhantes… Eu já tinha feito isso antes!

E deu certo! Não passei de primeira – e está tudo bem. Mas o melhor foi que, mesmo não tendo passando de primeira, a mentalidade já vinha sendo preparada para conseguir passar na segunda tentativa.

## Aproveite as oportunidades

Mais importante do que ter oportunidades é saber aproveitar cada uma delas ao máximo. Às vezes, estamos com a “faca e o queijo na mão” e não enxergamos o quão preciosas são as chances que aparecem na nossa vida.

Por isso, agarre cada oportunidade que surgir na sua vida, seja na faculdade, no trabalho, nas viagens, nos estudos… Veja cada momento como uma chance de se dedicar e explorar os conhecimentos ao máximo. Isso pode te levar a outro patamar e com certeza vai te fazer crescer. Muito.

Talvez não agora… Talvez daqui 10 ou 20 anos, mas a semente vai estar plantada. Aproveite!

Ps 1: Aqui fiz uma brincadeira sobre utilizar Pascal, mas é notório que toda linguagem bem utilizada traz resultados.

PS 2: Nas competições que citei, eu não estava sozinho. Obrigado aos meus amigos Luana Lima e Herick Ferreira, pela companhia na equipe Bender. Nós fizemos um ótimo trabalho em equipe.

PS 3: Obrigado, professor Roberto Porto, pelo apoio e incentivo às competições.

PS 4: Na segunda foto, Roberto Porto, eu, Luana Lima e Herick Ferreira.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20as%20maratonas%20de%20programa%C3%A7%C3%A3o%20da%20faculdade%20impactaram%20a%20minha%20carreira&url=https%3A%2F%2Fdevpleno.com%2Fcomo-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira)

---

# Como aumentar a produtividade diminuindo a troca de contexto - DevPleno

URL: https://devpleno.com/como-aumentar-a-produtividade

> Você sente que não está sendo tão produtivo quanto poderia? Após fazer algumas mudanças na forma como desenvolvo projetos, estou aumentando a minha produti...

Carreira

## Como aumentar a produtividade diminuindo a troca de contexto

T
Por Tulio Faria • 23 de maio de 2017

[Carreira](/tag/carreira)

Você sente que não está sendo tão produtivo quanto poderia? Após fazer algumas mudanças na forma como desenvolvo projetos, estou aumentando a minha produtividade.

A primeira coisa que mudei foi deixar de usar o sublime e passei a usar o Visual Studio code (VScode).

**Por que eu fiz isso?**

O VScode tem algumas coisas integradas, que eu sei que é possível integrar no Sublime, mas achei mais interessante no próprio VScode: o modo como ele funciona o Git e como depurar códigos, por exemplo.

No Sublime, eu deixava todos os projetos abertos ao mesmo tempo, com muitas abas, já no VScode, ao invés de abrir todas as abas de todos os projetos ao mesmo tempo, passei a abrir apenas um diretório e ele se mantém da forma como abri da última vez.

Uma coisa que percebi foi o tempo que gastava nessa mudança de contexto, pois eu estava com todos os projetos abertos e acabava virando uma bagunça. Perdia tempo achando o contexto em que eu estava e, como eu trabalho com vários projetos simultâneos, deixava aberto e esquecia.

Abrindo apenas um projeto fica muito mais fácil. No Git, ele já irá acender se tiver algo para comitar ou enviar, além de me permitir fazer isso e adicionar os arquivos que vou comitar de forma mais precisa.

Então muitas vezes uma mudança simples como essa pode nos deixar mais produtivo, afinal perdemos menos tempo nessa troca de contexto.

No meu caso demorou para eu perceber que isso reduzia minha produtividade, então comecei a trabalhar dessa forma diferente e senti uma mudança. E você, como desenvolve software hoje: como eu fazia antes ou assim como estou fazendo agora?

Confira o video:

Deixe seu comentário. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20aumentar%20a%20produtividade%20diminuindo%20a%20troca%20de%20contexto&url=https%3A%2F%2Fdevpleno.com%2Fcomo-aumentar-a-produtividade) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-aumentar-a-produtividade)

---

# Como cobrar por Software - DevPleno

URL: https://devpleno.com/como-cobrar-por-software

> Para precificar software, alguns fatores devem ser levados em consideração e você deve responder algumas perguntas a si mesmo. Confira: O que você está ven...

Carreira

## Como cobrar por Software

T
Por Tulio Faria • 15 de maio de 2017

[Carreira](/tag/carreira)

Para precificar software, alguns fatores devem ser levados em consideração e você deve responder algumas perguntas a si mesmo. Confira:

**O que você está vendendo?**

A primeira coisa que deve pensar é chegar em no valor/hora, afinal vai ter que gastar horas e mais horas neste software, logo estará vendendo seu tempo para o cliente.

**O que avaliar nesse valor/hora?**

Quando pensar no valor, deve pensar no nível de experiência que essa hora demanda. (Por exemplo, para um site em HTML simples, o quanto da sua especialidade este conteúdo vai utilizar?) Por isso a hora de um analista de dados atualmente é tão alta, afinal não tem no mercado e isso exige muito conteúdo, como mineração de dados, matemática, etc. Já para o HTML, por exemplo, não precisa de muita habilidade para ser feito, logo é uma hora mais barata.

Também precisa em sua disponibilidade. Hoje você tem tempo disponível para executar o projeto? Por exemplo, se você trabalha com HTML e todas suas horas estão ocupadas, isso significa que você é bom nesta especialidade (oferta e demanda), logo esta sua hora é um pouco mais cara, pois ao invés de jogar videogame em suas poucas horas disponíveis, você vai estar programando. Porém é preciso tomar cuidado com o viés da sobrevivência, às vezes sua disponibilidade está alta, mas não porque você é ruim, mas sim porque você está entre um projeto e outro.
Qual o valor agregado desta sua hora?
Quanto sua hora rende? Às vezes você é muito bom e cobra, por exemplo. R$100,00 e um profissional mediano que não renderia tanto cobra R$150,00, neste caso sua hora está desvalorizada, pois sua ela rende mais que a dele. Se você tem experiência e consegue resolver mais rápido e com mais eficiência, então o valor agregado à sua hora é maior. Ao final qual o resultado dessa sua hora aplicada? Vai fazer uma diferença muito grande no projeto? Se sim, sua hora também vai ser mais cara.

**Isso é tudo?**

Precisa pensar também quais são os custos que algumas vezes você não enxerga: Internet, telefone, luz ou algum outro serviço. Quais são os custos que impactam nesse valor da sua hora? Quais os impostos deve pagar? (Sua hora pode R$100,00, mas você esquece de que, dependendo da situação, precisa pagar de 7 a 18% de imposto, então acaba recebendo R$82,oo. Concorda?)
É importante que defina uma porcentagem de lucro. Quando você vai conseguir contratar alguém? Quando você tiver uma hora bem paga, conseguirá pagar o funcionário e ter um lucro não envolvendo sua hora?

Faça estimativas das horas gastas no projeto, por exemplo, sua hora custa R$100,00 e o projeto tem uma estimativa de 40 horas, então o projeto custará em torno de R$4.ooo,oo. A partir disso, avalie se esse valor realmente irá trazer o resultado esperado desta hora. (Já teve casos que deixei de passar o orçamento para o cliente porque ficaria muito caro, de acordo com minha disponibilidade, experiência e o que o projeto exigia, não valeria a pena para ele, já que ele não teria o retorno tão rápido disso).
Avalie se você não está superestimando o valor. A margem de lucro muito alta pode assustar o cliente, já que ele não vai ver seu cálculo sobre o valor.

**Como saber a base para a hora de acordo com o seu nível?**

Você está atuando como PJ? Se sim, pense o seguinte: R$30,00 por hora para um Junior é um valor interessante, pensando que um Junior rende mais ou menos um terço de uma pessoa com experiência. E para um pleno R$100,00 é um valor muito alto, pois pouquíssimos projetos justificariam este valor, a não ser que sua disponibilidade seja muito pequena e sua especialidade muito grande (em casos de consultorias, por exemplo, poderia subir mais).
Muitas vezes as pessoas olham no sindicato. Lá as horas são totalmente desproporcionais e não servem de referência. O ideal é ir ajustando, por exemplo, o projeto você estimou que demoraria 40 horas, mas terminou antes, então entrega um pouco mais ao cliente e no próximo você ajusta essa hora. O mesmo vale para o inverso: deu mais tempo? Então ajuste para mais.
O mais importante é colocar um valor que você ache justo, mas não justo para ficar milionário no primeiro projeto. (Quando eu comecei, cobrava meus sites em torno de R$2.000,00. Fazia o site muito rápido, mas era péssimo de layout, então contratava alguém por R$1.000,00, então minhas 4 horas valiam R$250,00. Assim, conseguia entregar muitos sites, pois terceirizava uma parte do processo).

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20cobrar%20por%20Software&url=https%3A%2F%2Fdevpleno.com%2Fcomo-cobrar-por-software) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-cobrar-por-software)

---

# Como converter uma string em Base64 em JavaScript (Navegador e NodeJS) - DevPleno

URL: https://devpleno.com/como-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs

> Aprenda a converter strings em Base64 no JavaScript com btoa/atob no navegador e Buffer no Node.js. Exemplos práticos de encode e decode.

Javascript

## Como converter uma string em Base64 em JavaScript (Navegador e NodeJS)

T
Por Tulio Faria • 4 de outubro de 2016

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

A codificação em Base64 é uma maneira de converter qualquer texto/conteúdo para uma codificação que utiliza apenas 64 caracteres. Provavelmente você já deve ter se deparado com uma string destas por aí. Muitos sites e aplicações web utilizam esta códificação para trocar dados entre páginas “ocultando” informações na URL. Porém, é bom lembrar que Base64 não é uma forma segura de criptografia. Mas se ele não é seguro quais as vantagens de utilizá-la? Bom, algumas:

- Você pode converter caracteres que geram problemas na URL (ou em algum protocolo), como por exemplo: ?, &#x26; e ”

- Você pode simplesmente atrapalhar um pouco pessoas ficarem chutando* ids em suas URLs

- Você pode transferir dados binários codificados em Base64. Aliás, é assim que o protocolo HTTP lida com o upload de arquivos.

## Utilizando Base64 no navegador (Internet Explorer 10 e acima):

O código abaixo pode ser copiado e colado dentro do Console do Chrome, para vê-lo executando.

// Uma string qualquer
var string = 'DevPleno'

// Convertendo para Base64
var emBase64 = btoa(string)
console.log(emBase64) // Saída: "RGV2UGxlbm8="

// Voltando para string
var deBase64 = atob(emBase64)
console.log(deBase64) // Outputs: "DevPleno"

## Método cross-browser (pode ser utilizado no NodeJS também):

// Criar objeto Base64
var Base64={\_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function
(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64.\_utf8\_encode(e);while(f&#x3C;e.length){n=e.charCodeAt(f++);
r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&#x26;3)&#x3C;&#x3C;4|r>>4;u=(r&#x26;15)&#x3C;&#x3C;2|i>>6;a=i&#x26;63;if(isNaN(r)){u=a=64}
else if(isNaN(i)){a=64}t=t+this.\_keyStr.charAt(s)+this.\_keyStr.charAt(o)+this.\_keyStr.charAt(u)
+this.\_keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace
(/\[^A-Za-z0-9+/=\]/g,"");while(f&#x3C;e.length){s=this.\_keyStr.indexOf(e.charAt(f++));o=this.\_keyStr.indexOf
(e.charAt(f++));u=this.\_keyStr.indexOf(e.charAt(f++));a=this.\_keyStr.indexOf(e.charAt(f++));n=s&#x3C;&#x3C;2|o>>4;r=
(o&#x26;15)&#x3C;&#x3C;4|u>>2;i=(u&#x26;3)&#x3C;&#x3C;6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64)
{t=t+String.fromCharCode(i)}}t=Base64.\_utf8\_decode(t);return t},\_utf8\_encode:function(e){e=e.replace
(/rn/g,"n");var t="";for(var n=0;n&#x3C;e.length;n++){var r=e.charCodeAt(n);if(r&#x3C;128){t+=String.fromCharCode(r)}
else if(r>127&#x26;&#x26;r&#x3C;2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&#x26;63|128)}else
{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&#x26;63|128);t+=String.fromCharCode(r&#x26;63|128)}}
return t},\_utf8\_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n&#x3C;e.length){r=e.charCodeAt(n);
if(r&#x3C;128){t+=String.fromCharCode(r);n++}else if(r>191&#x26;&#x26;r&#x3C;224){c2=e.charCodeAt(n+1);t+=String.fromCharCode
((r&#x26;31)&#x3C;&#x3C;6|c2&#x26;63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode
((r&#x26;15)&#x3C;&#x3C;12|(c2&#x26;63)&#x3C;&#x3C;6|c3&#x26;63);n+=3}}return t}}

// Uma string qualquer
var string = 'DevPleno';

// Convertendo para Base64
var emBase64 = Base64.encode(string);
console.log(emBase64); // Saída: "RGV2UGxlbm8="

// Decode the String
var deBase64 = Base64.decode(emBase64);
console.log(deBase64); // Saída: "DevPleno"

## Em NodeJS:

Em NodeJS você pode utilizar Buffers para converter de uma codificação para outra. Por exemplo:

var string = 'DevPleno'
var emBase64 = new Buffer(string).toString('base64')
console.log(emBase64) // Saída: RGV2UGxlbm8=

var deBase64 = new Buffer(emBase64, 'base64').toString('ascii')
console.log(deBase64) // Saída: DevPleno

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20converter%20uma%20string%20em%20Base64%20em%20JavaScript%20(Navegador%20e%20NodeJS)&url=https%3A%2F%2Fdevpleno.com%2Fcomo-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs)

---

# Como criar e reutilizar seus módulos no NodeJS com Git - DevPleno

URL: https://devpleno.com/como-criar-e-reutilizando-seus-proprios-modulos

> Hoje quero mostrar um recurso que nós temos na ferramenta NPM e que poucas pessoas sabem que existem. Com ela, podemos criar nossos próprios módulos sem pr...

Javascript

## Como criar e reutilizar seus módulos no NodeJS com Git

T
Por Tulio Faria • 29 de novembro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje quero mostrar um recurso que nós temos na ferramenta NPM e que poucas pessoas sabem que existem. Com ela, podemos criar nossos próprios módulos sem precisar registrar no repositório do NPM.

Uma coisa interessante do yarn e NPM é que podemos colocar como dependência do nosso projeto um repositório GIT, inclusive um commit específico ou tag especifica.

Qual a vantagem dessa situação?

Muita gente não utiliza reaproveitamento de código, nem cria seus próprios módulos e bibliotecas porque não tem como compartilhar isso de forma privada. Aqui vamos fazer um exemplo utilizando o repositório do Github.

Nós poderíamos utilizar um repositório privado desde que, na máquina que estiver utilizando, esse repositório tivéssemos uma chave para baixar essa dependência.

Para simplificar esse processo, vou criar um repositório novo e deixar inicializando com o README e dar um create repository:

Ele vai conter meu código e que vai ser compartilhado com outros projetos. Primeiramente vamos copiar o link que ele nos gera:

Vamos agora clonar na máquina. Como ela já está com o tortoise git e a chave atrelada, então eu consigo dar um ok e ele já baixa.

Agora eu posso ir para minha pasta e dar um NPM init nessa pasta para iniciar meu módulo.

Com o package.json aberto, o mais importante é o arquivo main, ele é o que vai ser nosso arquivo principal, ou seja, o ponto de entrada do nosso módulo.

Vamos criar então um index.js e exportar uma função que retorna uma string:

module.exports = function (str) {
return str + ' - DevPleno!'
}
Agora vamos dar um commit e push. Se formos agora em meu repositório, ele já vai estar lá. Nós podemos utilizar a URL do repositório como dependência do projeto. Para isso, vamos voltar um diretório e criar um novo diretório ‘meuprojeto’, acessamos ele e damos um npm init, em seguida um install passando o link do github:

npm install --save &#x3C;url-copiado-aqui>

Em uma próxima aula vamos criar um repositório e publicar no NPM. Primeiramente queria apenas mostrar que podemos publicar um módulo sem ser pelo npm.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20criar%20e%20reutilizar%20seus%20m%C3%B3dulos%20no%20NodeJS%20com%20Git&url=https%3A%2F%2Fdevpleno.com%2Fcomo-criar-e-reutilizando-seus-proprios-modulos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-criar-e-reutilizando-seus-proprios-modulos)

---

# Como encadear promises - DevPleno

URL: https://devpleno.com/como-encadear-promises

> Na dica de hoje, vamos continuar falando sobre promises. Vou mostrar um detalhe na promise que é bastante interessante: como podemos encadear promises, ou ...

Javascript

## Como encadear promises

T
Por Tulio Faria • 31 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Na dica de hoje, vamos continuar falando sobre promises. Vou mostrar um detalhe na promise que é bastante interessante: como podemos encadear promises, ou seja, vincular uma promise à outra.

Para poder fazer isso funcionar, vamos começar importando nosso tão usado FS, já que ele é sempre uma chave para isso e em seguida vamos criar uma função readFile, que vai ser uma arrow function. Nós passamos para ele um path de um arquivo e ele vai retornar uma promise nova:

const fs = require('fs')

const readFile = (file) => {
return new Promise((resolve, reject) => {
fs.readFile(file, (err, contents) => {
if (err) {
reject(err)
} else {
resolve(contents.toString())
}
})
})
}
Consideramos que quem vai receber o conteúdo da nova promise queira esse conteúdo em string. Vamos fazer também um writeFile, que também irá passar um file, e um contents, que vai retornar uma nova promise:

const writeFile = (file, contents) => {
return new Promise((resolve, reject) => {
fs.writeFile((file, contents), (err) => {
if (err) {
reject(err)
} else {
resolve()
}
})
})
}
O nosso problema agora é que precisamos ler um arquivo e passar para o write, então precisamos fazer o seguinte:

readFile('promises.js').then((contents) => console.log(contents))
Ao mandar rodar o arquivo, perceba que ele retorna o nosso código em string, a vantagem disso é que agora conseguimos ‘encavalar’ uma promise depois da outra. A primeira alternativa que temos é utilizar o then dessa forma, então precisamos colocar o próprio writeFile:

readFile('promises.js').then((contents) => writeFile('tst.js', contents))
Essa é a primeira maneira que temos de encadear as promises. Ao rodar o arquivo, perceba que foi criado um tst.js como queríamos. A segunda forma é colocarmos encadeado realmente:

readFile('promises.js').then(writeFile('tst.js', contents))
Vamos dizer a ele para ler o nosso arquivo e em seguida escrever um outro arquivo, o problema é que se fizermos dessa forma, quando ele passar ‘parseando’ o código, ele já vai executar esse primeiro writeFile, se não estivéssemos passando um file, poderíamos fazer isso direto, mas como isso não acontece, temos que utilizar o bind, pois ele vai criar uma nova função, a onde eu posso passar o contexto que eu quero executar essa função e fazer um curring fixando alguns atributos da esquerda para a direita:

readFile('promises.js').then(writeFile.bind(null, 'tst2.js'))
A grande dica é entender como funciona isso. Podemos colocar um then após o outro, podemos fazer um novo teste:

const out (contents) => {
return new Promise(resolve =>{
setTimeout(() => {
console.log(contents)

resolve()
}, 2000)
})
}
Com isso, caso a gente queira fazer um teste no then, podemos fazer o seguinte:

readFile('promises.js')
.then(out)
.then(() => console.log('final'))
Retornando as promises nós conseguimos encadear, essa é uma grande vantagem em relação a um callback, afinal conseguimos fazer o código crescer para baixo ao invés de crescer para frente, evitamos o callback hell.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20encadear%20promises&url=https%3A%2F%2Fdevpleno.com%2Fcomo-encadear-promises) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-encadear-promises)

---

# Como escolher uma linguagem de tecnologia? - DevPleno

URL: https://devpleno.com/como-escolher-linguagem-de-tecnologia

> Eu sou uma pessoa que sempre tem que estar conhecendo coisas novas e estar confortável com essas coisas, por isso resolvi compartilhar como escolher uma li...

Carreira

## Como escolher uma linguagem de tecnologia?

T
Por Tulio Faria • 5 de julho de 2017

[Carreira](/tag/carreira)

Eu sou uma pessoa que sempre tem que estar conhecendo coisas novas e estar confortável com essas coisas, por isso resolvi compartilhar como escolher uma linguagem de tecnologia ou algo novo para estudar.

Tem coisas que eu gosto de fazer, como programar em aplicativos web e também tenho algumas missões com isso, como deixar mais fácil de organizar o código. Então, a minha decisão é tomada em cima do resultado que eu consigo ter com aquela linguagem. Eu não tomava decisão baseado em dinheiro, porque uma das coisas que as pessoas esquecem muito é que não é a linguagem que você vai usar que faz a diferença, e sim o quão bom é o produto que você vai construir com aquela linguagem. Por exemplo, tem muita gente que faz sistemas e plataformas maravilhosas com linguagens que nem imaginamos.

Se você souber usar o máximo da linguagem para tirar o máximo de resultado, você será bem remunerado sobre isso.

O mais importante: depois que você sabe algumas linguagens, elas ficam irrelevantes, por exemplo uma das formas que eu defino em qual linguagem eu programo é se consigo entregar algo comercial com garantia pro cliente nessa linguagem. Esse é meu parâmetro para saber se eu estou preparado naquela linguagem e não somente focado no dinheiro.

Se você se sente confortável com aquilo que você aprende, então você faz gerar resultado, já que aquilo não vai ser um peso para você.

Assista ao vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20escolher%20uma%20linguagem%20de%20tecnologia%3F&url=https%3A%2F%2Fdevpleno.com%2Fcomo-escolher-linguagem-de-tecnologia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-escolher-linguagem-de-tecnologia)

---

# Como está seu inglês? - DevPleno

URL: https://devpleno.com/como-esta-seu-ingles-carreira

> Na carreira de um DevPleno que lida com tecnologia o dia todo é muito importante saber se comunicar em inglês. Veja algumas dicas de como melhorar seu ingl...

Carreira

## Como está seu inglês?

T
Por Tulio Faria • 2 de agosto de 2016

[Carreira](/tag/carreira)

Na carreira de um DevPleno que lida com tecnologia o dia todo é muito importante saber se comunicar em inglês. Veja algumas dicas de como melhorar seu inglês técnico e do cotidiano.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20est%C3%A1%20seu%20ingl%C3%AAs%3F&url=https%3A%2F%2Fdevpleno.com%2Fcomo-esta-seu-ingles-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-esta-seu-ingles-carreira)

---

# Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos - DevPleno

URL: https://devpleno.com/como-gerar-um-array-populado-em-javascript

> Aprenda 5 formas de gerar arrays populados em JavaScript: Array.from, fill, spread, map e mais. Exemplos práticos para copiar e usar.

Javascript

## Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos

T
Por Tulio Faria • 25 de julho de 2021

[Javascript](/tag/javascript)

É muito comum durante a solução de alguns problems com algorítmos de precisarmos de um array com valores padrão já inseridos.

Inclusive para gerar dados de testes. E podemos gerar o array com os mais diversos valores, como números, strings e até mesmo objetos.

## O bom e velho for

A forma mais tradicional de fazer esta tarefa é utilizar o bom e velho for. Sem muitos segredos, podemos fazer o seguinte:

const array = []
const size = 10
for (let i = 0; i &#x3C; size; i++) {
array.push(i)
}
// array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Desta maneira podemos inclusive criar valores diferentes de inteiros, por exemplo:

const names = []
const size = 7
for (let i = 0; i &#x3C; size; i++) {
names.push({
id: i,
name: `Name ${i}`
})
}
/*
names =
0: {id: 0, name: "Name 0"}
1: {id: 1, name: "Name 1"}
2: {id: 2, name: "Name 2"}
3: {id: 3, name: "Name 3"}
4: {id: 4, name: "Name 4"}
5: {id: 5, name: "Name 5"}
6: {id: 6, name: "Name 6"}
*/
Uma versão alternativa:

const size = 7
const names = new Array(size)

for (let i = 0; i &#x3C; size; i++) {
names[i] = {
id: i,
name: `Name ${i}`
}
}
/*
names =
0: {id: 0, name: "Name 0"}
1: {id: 1, name: "Name 1"}
2: {id: 2, name: "Name 2"}
3: {id: 3, name: "Name 3"}
4: {id: 4, name: "Name 4"}
5: {id: 5, name: "Name 5"}
6: {id: 6, name: "Name 6"}
*/

## Array.fill

Outra forma de gerar o array com valores é utilizando o Array.fill. Nesta forma, criamos um array com o tamanho desejado e informamos o valor para qual queremos preenchê-lo.

const array = new Array(15).fill('valor')
// array = ["valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor"]
Uma observação importante é que o método fill usa a mesma referência. Ou seja, se passarmos um objeto como valor no fill, todos os itens do vetor referenciarão o mesmo objeto. E caso alteramos um deles, iremos alterar todos.

const people = new Array(3).fill({ name: 'Person' })
people[0].name = 'Changed Person'
/*
people =
0: {name: "Changed Person"}
1: {name: "Changed Person"}
2: {name: "Changed Person"}
*/
Existe uma forma de mudar ligeiramente este comportamento, bastando para isso conectar o fill com um map (lembrando que map transforma um vetor em outro).

const people = new Array(3).fill(null).map(() => ({ name: 'Person' }))
people[0].name = 'Changed Person'
/*
people =
0: {name: "Changed Person"}
1: {name: "Person"}
2: {name: "Person"}
*/

## Array.from

Uma outra forma de criar um array é usando o Array.from. Esta versão é bastante simples:

const array = Array.from({ length: 5 }, () => 1)
// array = [1, 1, 1, 1, 1]
const people = Array.from({ length: 3 }, () => ({ name: 'Person' }))
/*
people =
0: {name: "Person"}
1: {name: "Person"}
2: {name: "Person"}
*/

## Usando o Object.keys

Uma forma bastante interessante de gerar um array preenchido com números é usando uma característica de objetos (sim, objetos). Usaremos o Object.keys.

const numbers = Object.keys(new Array(5).fill(null))
// numbers = ["0", "1", "2", "3", "4"]
Repare que os números que foram inseridos no array estão com string. Podemos usar um map para convertê-los:

const numbers = Object.keys(new Array(5).fill(null)).map(Number)
// numbers = [0, 1, 2, 3, 4]
Bom é isso :) O que gostou destas formas de gerar um vetor? Qual a sua forma favorita?

Ah, todos os nossos cursos tem um módulos somente de Javascript ;) Conheça o [Fullstack Master](https://go.devpleno.com/fsm?sck=blog-como-gerar-um-array-populado-em-javascript)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20Criar%20e%20Popular%20Arrays%20em%20JavaScript%3A%205%20Formas%20com%20Exemplos&url=https%3A%2F%2Fdevpleno.com%2Fcomo-gerar-um-array-populado-em-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-gerar-um-array-populado-em-javascript)

---

# Como invocar funções dinamicas em JavaScript - DevPleno

URL: https://devpleno.com/como-invocar-funcoes-dinamicamente-com-js

> Em programação, blocos de código que executam instruções específicas são chamadas de funções e, no Javascript, são conhecidas como métodos. Agora, imagine ...

Javascript

## Como invocar funções dinamicas em JavaScript

T
Por Tulio Faria • 19 de fevereiro de 2018

[Javascript](/tag/javascript)

Em programação, blocos de código que executam instruções específicas são chamadas de funções e, no Javascript, são conhecidas como métodos. Agora, imagine o seguinte cenário: como desenvolvedor, você não conhece o nome do método que quer chamar mas sabe que existe o nome dele em uma variável. Então, como faremos para chamá-lo?

Os métodos são muito úteis em casos onde queremos uma programação mais dinâmica, por exemplo: você tem um serviço e não sabe os nomes dos métodos disponíveis e é possível programar a forma como serão chamados ou se você tem uma forma de integrar módulos com pontos de entrada na aplicação para importar o módulo baseado nessa variável, chamando seus métodos dinamicamente.

Imagine o seguinte cenário em temos um console como o da imagem abaixo, onde deixamos para o usuário a opção de escolher o método **log** ou o **debug**:

Ao executarmos o código acima (dinamicamente.js) no prompt de comando, vemos o resultado a seguir com destaque para o “opa” que foi impresso:

Ao criar um objeto obj, definindo valores para suas variáveis a e b, tal qual a imagem abaixo:

Podemos pegar o valor da variável a do objeto obj com a instrução console.log(obj.a) e mostrar o conteúdo de a como um resultado:

Outra forma de obter o valor de a consiste em definirmos uma constante (variável com valor fixo) que chamaremos de key e com a instrução console.log(obj[key]) conseguimos o valor de a como resultado:

Com os métodos, o processo é semelhante. Alteremos o código acima para deixar apenas a definição da constante key como ‘log’ e, como não sabemos a posição do método que iremos chamar, colocamos console[key].

Para entender o que console[key] retornaria, escreveremos a instrução console.log(console[key]) para observar o valor de retorno:

Pelo resultado, notamos uma coisa muito legal no Javascript: as funções também são valores – o que nos permite escrever console[key]('valor1') e obter seu resultado no prompt:

O resultado anterior permite que façamos coisas como imprimir com console[key]('valor'), a partir de um vetor de constantes key, o valor associado a cada constante:

Modificando a definição de const keys, podemos obter todos os métodos de console:

ou então passar a constante key como um valor:

Se você seguiu os passos até aqui, então conseguiu chamar métodos de uma forma dinâmica – algo muito poderoso no Javascript. Outra coisa que podemos fazer está no Web Console do navegador (Ctrl+Shift+I no Google Chrome). Nesse console, temos um objeto chamado window que traz as mesmas funcionalidades para chamada dinâmica de métodos, assim como fizemos com console, vide o exemplo abaixo:

E assim, surge uma mensagem “opa” na tela do navegador:

Podemos, ainda, guardar uma função dentro de uma constante alertOpa:

E, ao acessarmos alertOpa como um objeto, faremos a chamada da função com o texto ‘lopa’ que escrevemos como valor:

A principal ideia do que aprendemos é criar funções dinâmicas e facilitar o uso de módulos de extensões de uma aplicação com essa abordagem, tanto para carregar um módulo dinâmico quanto para executar algo dentro desse módulo dinamicamente.

E essa é a dica de hoje. Confira o passo a passo no vídeo abaixo.

Até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20invocar%20fun%C3%A7%C3%B5es%20dinamicas%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Fcomo-invocar-funcoes-dinamicamente-com-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-invocar-funcoes-dinamicamente-com-js)

---

# Como manter-se motivado - DevPleno

URL: https://devpleno.com/como-manter-se-motivado

> A dica de hoje foi baseada em uma pergunta de um inscrito do canal, a pergunta foi a seguinte:  Como eu consigo me manter motivado a fazer um projeto? A pr...

Carreira

## Como manter-se motivado

T
Por Tulio Faria • 30 de novembro de 2017

[Carreira](/tag/carreira)

A dica de hoje foi baseada em uma pergunta de um inscrito do canal, a pergunta foi a seguinte:

>
Como eu consigo me manter motivado a fazer um projeto?

A primeira coisa que precisamos saber e aceitar é que nem sempre vamos ter 100% de motivação, vão haver altos e baixos e isso é normal. Vão existir dias em que você não vai estar conseguindo focar em seu objetivo. O importante é conseguir estar consciente disso e perceber que está fugindo daquilo que é seu objetivo. Quando começar a perceber isso, existem algumas formas de voltar a ter motivação:

Eu vou passar dois pontos que eu acredito que fazem bastante diferença. Toda vez que percebo que estou perdendo motivação, eu utilizo dessas técnicas para me motivar.

A primeira delas é a transformação que meu trabalho faz na vida das pessoas, esse é um dos motivos principais que me mantém muito motivado. Por exemplo, você ler isso já é um gatilho motivacional que eu uso para me motivar a fazer cada vez mais coisas. Ache esse seu gatilho e você vai perceber que as chances de perder o foco são menores.

A segunda delas é que quando você está se sentindo um pouco desmotivado, tente fazer algo que te dê uma pequena vitória. Por exemplo, se você não está entendendo uma tecnologia muito complexa e não está conseguindo ver resultado, tente fazer algo com essa tecnologia, nem que seja um ‘olá mundo’, que te dê uma sensação de vitória.

Ao invés de focar em um objetivo grande, foque em um pequeno passo naquele objetivo, isso vai te ajuda a manter mais motivado.

Essas duas dicas eu uso para me manter motivado, espero que isso também te ajude a se manter assim.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20manter-se%20motivado&url=https%3A%2F%2Fdevpleno.com%2Fcomo-manter-se-motivado) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-manter-se-motivado)

---

# Como organizar os estudos em tecnologia - DevPleno

URL: https://devpleno.com/como-organizar-os-estudos-em-tecnologia

> O inscrito Leonardo Oliveira deixou uma pergunta no canal e achei interessante compartilhar a resposta, afinal pode ser a dúvida de outras pessoas, inclusi...

Carreira

## Como organizar os estudos em tecnologia

T
Por Tulio Faria • 17 de maio de 2017

[Carreira](/tag/carreira)

O inscrito Leonardo Oliveira deixou uma pergunta no canal e achei interessante compartilhar a resposta, afinal pode ser a dúvida de outras pessoas, inclusive a sua. A pergunta é a seguinte:

“Gostei das dicas! Eu curso sistema de informação, já aprendi um bocado de coisa mas tenho um problema em não conseguir definir prioridades. Sempre quero aprender muita coisa e, no fim, acabo ficando perdido. Queria achar uma técnica que me ajude a ser mais produtivo.”

É muito legal estar aprendendo bastante na faculdade, pois vai te dar uma bagagem muito boa e permitir que você comece a dar seus primeiros passos. Acontece que atualmente vivemos com um overload de informações, ou seja, temos muita informação, mas sem saber para onde ir, que curso fazer, o que estudar primeiro, etc.

O que eu costumo fazer é priorizar o que tenho mais experiência ou mais conhecimento sobre o assunto. Se tenho 5 tecnologias que quero aprender, tento filtrar e ver em qual delas estou mais perto de ficar bom. Por exemplo, se estou entre Mongo, Express, React e Node, então verei qual eu estou mais próximo de dominar.

**Por que fazer isso?**

Para conseguir ter mais motivação para começar as demais. Supondo que você está bom em React, então você vai treinar mais para chegar em um nível mais alto e o React não será mais um problema. Depois de ter dominado essa primeira tecnologia, então você vai para a segunda que tinha mais experiência, depois a terceira, e por ai vai. Isso é muito bom para cuidar da sua motivação.

Uma outra forma de priorizar o que estudar, essa um pouco mais arriscada, é entregar um projeto com essa tecnologia. Eu fiz isso ano passado, pois queria ficar muito bom em React. Defini que iria fazer o projeto com ele e entreguei, mas isso é perigoso, apesar de bom, porque você definirá um projeto que tem uma contrapartida muito grande, afinal você vai ter um deadline e precisa entregar de alguma forma, o que vai te motivar ainda mais a estudar essa tecnologia.

Essas são algumas dicas para você lidar com essa grande quantidade de tecnologia e não ficar perdido nas prioridades de linguagens ou tecnologias que quer aprender. Eu me organizo assim e tem dado certo, portanto acredito que seja efetivo.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20organizar%20os%20estudos%20em%20tecnologia&url=https%3A%2F%2Fdevpleno.com%2Fcomo-organizar-os-estudos-em-tecnologia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-organizar-os-estudos-em-tecnologia)

---

# GH-Pages e como publicar seu site no Github - DevPleno

URL: https://devpleno.com/como-publicar-seu-site-no-github

> Hoje quero mostrar para vocês como a gente pode postar o nosso site no GitHub utilizando o GHPages, sem precisar trocar ou fazer qualquer trâmite com o Git...

Javascript

## GH-Pages e como publicar seu site no Github

T
Por Tulio Faria • 6 de outubro de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Hoje quero mostrar para vocês como a gente pode postar o nosso site no GitHub utilizando o GH-Pages, sem precisar trocar ou fazer qualquer trâmite com o Git, tudo isso de uma maneira bastante fácil. Além disso, integrar isso em um WorkFlow ou em um processo junto no Node.

A primeira coisa que vou fazer é criar um repositório chamado gh-pages-teste só para termos um lugar para testar. Vou deixar de forma pública:

Agora vamos no SHELL e dar um create-react-app apenas para criar uma aplicação em React, que vai ser nosso site. Lembrando que não é necessário ser em React, é apenas para mostrar como a gente poderia criar algo estático e hospedar dentro do GitHub.

Uma coisa bastante interessante: o Git permite que a gente mantenha um site estático, basta colocar os arquivos estáticos dentro de um branch chamado GH-Pages, feito isso ele já vai conseguir manter o nosso site.

Agora vou abrir o visual studio code e vamos trocar apenas o que está escrito no App.js, ao invés de Welcome, vou colocar GH-Pages DevPleno.

Agora um detalhe, se no próprio React dermos um yarn build ou npm run build, ele vai gerar os arquivos compilados dentro do diretório build que já tem nosso site todo, agora temos que colocar esses arquivos dentro do Branch do GH-Pages.

Feito isso vamos dar um git init no shell e adicionar os arquivos, lembrando que já iniciamos o repositório:

Vamos também dar um git remote add origin e add o ssh que no meu caso é:

Também vamos adicionar o upstream:

Feito isso ele subiu, então temos nosso fonte do master. Agora temos que fazer uma forma de criar um brait novo para colocar o site lá. Para isso vamos fazer o seguinte:

yarn add --dev gh-pages
Estamos instalando esse módulo que consegue fazer isso para nós. Depois de instalado vamos construir o diretório que eu quero colocar os arquivos:

./node_modules/.bin/gh-pages -d build
Ele já está se conectando ao github. Agora se irmos em branch, podemos visualizar o gh-pages, ao olharmos o conteúdo, é exatamente a pasta que foi definida:

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=GH-Pages%20e%20como%20publicar%20seu%20site%20no%20Github&url=https%3A%2F%2Fdevpleno.com%2Fcomo-publicar-seu-site-no-github) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-publicar-seu-site-no-github)

---

# Impostos e como receber de empresas estrangeiras - DevPleno

URL: https://devpleno.com/como-receber-de-empresas-estrangeiras

> Você sabe como receber de empresas estrangeiras (Toptal, Crossover, Scalable Path e outras)? Cada empresa dessa tem a possibilidade de enviar o dinheiro de...

Carreira

## Impostos e como receber de empresas estrangeiras

T
Por Tulio Faria • 18 de agosto de 2017

[Carreira](/tag/carreira)

Você sabe como receber de empresas estrangeiras (Toptal, Crossover, Scalable Path e outras)?

Cada empresa dessa tem a possibilidade de enviar o dinheiro de uma forma específica, como o Paypal, Payoneer, no caso da Toptal eles têm uma parceria com a Hyper Wallet, ou seja, cada um tem um gateway.

Para o governo brasileiro, independente de como foi recebido, é preciso declarar esse dinheiro. Quando receber, por exemplo, $1000,00 pela Hyper Wallet, vai ser descontado uma taxa, algo em torno de $13,00, ou seja, vai receber $987,00. Depois o valor é multiplicado pelo câmbio atual, vamos supor que esteja R$3,00, o resultado final será em torno de R$2961,00.

**
Antes de continuar, preciso te contar uma novidade. Nós conseguimos te ajudar a legalizar o seu dinheiro aqui no Brasil - sim, eu criei um serviço de contabilidade e assessoria jurídica/tributária com esse objetivo. A [Conta49 é uma contabilidade e assessoria jurídica](https://www.conta49.com.br) que entende as especificidades vividas pelos programadores, principalmente os que atuam no exterior. Inclusive temos serviços específicos com esse objetivo (caso você precise legalizar somente uma vez o recebimento ou ainda se possui dúvidas sobre este processo). Acesse o [site:](https://www.conta49.com.br)[www.conta49.com.br](http://www.conta49.com.br) e conheça todos os serviços.

[](https://www.conta49.com.br)

.

O detalhe é que eles vão fazer uma TED para sua conta aqui no Brasil e em seguida você precisa declarar esse dinheiro porque é uma renda que você está tendo. Para fazer isso, há algumas maneiras: a primeira é pedir para que eles façam essa transferência para uma conta de pessoa física, geralmente esses valores na conta de pessoa física não são valores pequenos. Vamos supor que essa conta gere R$100mil em um ano, isso já faz com que você caia na alíquota máxima de 27,5%, ou seja, de R$100mil você vai pagar R$27,5mil somente de impostos.

Agora imagine o seguinte: você declarou esse valor, caso receba como pessoa física, precisa baixar um programa chamado Carnê Leão, esse programa da Receita calcula baseado no valor que você recebeu naquele mês (lembrando que tem a opção para dinheiro vindo do exterior), ele vai gerar uma guia que você deve pagar. Você é obrigado a recolher o Carnê Leão de forma mensal, geralmente não achamos essa informação tão facilmente na internet, então é bom lembrar isso, devemos pagar ele no mês que recebemos. Eu acredito que isso seja muito bom, porque você não esquece de guardar esse dinheiro, imagine você receber R$100mil em um ano em 12x e esquecer de recolher e guardar esses 27,5%, depois vai faltar dinheiro para pagar o imposto. Pagando corretamente você pode ter restituição de imposto de renda.

Mas qual valor declarar?**

Eu declaro o valor que caiu na minha conta, porque a empresa lá de fora não tem essa informação para a receita daqui, então só é validado quando cai no banco da sua conta.

Outra opção é com pessoa jurídica. Vamos utilizar os mesmos R$100mil como exemplo. Nesse caso, você vai pagar mais ou menos 10%, a minha alíquota hoje no simples nacional está mais ou menos 7%.

Nessa opção então não vamos pagar os 27,5% de imposto, mas em compensação temos que emitir uma nota fiscal para uma empresa do exterior como pessoa jurídica. A unica diferença é que quando ela está no exterior, ela não tem CNPJ. Feito isso, a transferência vai para a conta corrente da pessoa jurídica. No caso do Simples Nacional, eles vão mandar uma DARF só por mês, já coletando esse imposto. Caso você não for enquadrado como Super Simples, provavelmente você vai receber umas quatro ou cinco guias.

O interessante é que, como a nota fiscal pode ser emitida para uma empresa que não tem CNPJ, o que eu declaro geralmente são alguns serviços que estão dentro da área, mas que são incluídos no Simples Nacional. (Lembrando que é importante conversar com seu contador para fazer um planejamento tributário para que você pague menos impostos).

Obviamente se você colocar que seu Pró-labore é de R$8mil por mês, você irá pagar mais alguns impostos.

**O que é Pró-labore?**

Seria mais ou menos o mesmo que a sua empresa te contratar para trabalhar para ela; essa empresa que você usa para receber vai te pagar um salário.

Os contadores geralmente já indicam fazer o seguinte: colocar um Pró-labore de um salário mínimo, depois vai pegar o restante e colocar como retirada de lucro. A retirada de lucro não tem impostos, então quando você vai declarar esse dinheiro no seu imposto de renda de pessoa física, vai ter um campo que você vai declarar o quanto de retirada de lucro teve.

**Por que estamos falando de tudo isso?**

Porque não adianta nada você receber R$100mil do exterior e não declarar. Imagine que você vai lá e compra um carro, então você não vai ter renda nenhuma declarada na receita, então eles virão atrás.

Obviamente pode ser que no primeiro ano passe, o segundo passe, mas depois de um tempo eles vão achar você e descobrir o que está acontecendo.

Um ponto adicional bem rápido: para a empresa americana, você precisa assinar um documento para a receita de lá. Esse documento se chama FORM A para pessoa física ou FORM B para pessoa jurídica. Basicamente esse formulário vai dizer que você está recebendo realmente esse dinheiro e que o envio da empresa não é crime, e sim que a empresa está contratando um serviço que está sendo realizado no exterior. Isso é importante, pois se um dia a Receita Federal Americana for até essa empresa, eles têm os formulários para provar para onde está indo, lembrando que esses documentos você assina digitalmente.

Esse é um pouco do que eu aprendi até hoje de como receber dinheiro do exterior, não sou contador, mas aprendi isso tudo fazendo e queria compartilhar com vocês porque eu sei que é uma dor que todos passam.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Impostos%20e%20como%20receber%20de%20empresas%20estrangeiras&url=https%3A%2F%2Fdevpleno.com%2Fcomo-receber-de-empresas-estrangeiras) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-receber-de-empresas-estrangeiras)

---

# Como ser MUITO mais produtivo? - DevPleno

URL: https://devpleno.com/como-ser-muito-mais-produtivo

> Venho aplicando 2 técnicas bastante interessantes: medir o tempo que gasto em cada tarefa e fazer pausas durante as mesmas. Neste vídeo, falo destas técnic...

Carreira

## Como ser MUITO mais produtivo?

T
Por Tulio Faria • 3 de maio de 2017

[Carreira](/tag/carreira)

Venho aplicando 2 técnicas bastante interessantes: medir o tempo que gasto em cada tarefa e fazer pausas durante as mesmas. Neste vídeo, falo destas técnicas e mostro ferramentas que podem te ajudar a fazer isso e tornar-se mais produtivo no seu dia-a-dia.

Pomodoro: [https://cirillocompany.de/pages/pomodo…](https://cirillocompany.de/pages/pomodoro-technique)

Toggl (não esquece de baixar o Toggl Desktop): [https://toggl.com](https://toggl.com/)

Pomodoro para windows: [https://tomighty.org/](https://tomighty.org/)

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20ser%20MUITO%20mais%20produtivo%3F&url=https%3A%2F%2Fdevpleno.com%2Fcomo-ser-muito-mais-produtivo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-ser-muito-mais-produtivo)

---

# Como testar domínios localmente - DevPleno

URL: https://devpleno.com/como-testar-dominios-localmente

> Hoje quero dar uma dica bem rapidinha de como você pode testar o seu site local com domínios válidos para sua máquina. Com isso você consegue, por exemplo,...

Fundamentos

## Como testar domínios localmente

T
Por Tulio Faria • 15 de setembro de 2017

[Fundamentos](/tag/fundamentos)

Hoje quero dar uma dica bem rapidinha de como você pode testar o seu site local com domínios válidos para sua máquina. Com isso você consegue, por exemplo, fazer um domínio que você ainda não publicou ou registrou funcionar somente na sua máquina para testes. Outra coisa bastante útil é se você precisa, no seu sistema, lidar com diferentes domínios. É possível fazer essa configuração local na sua máquina para fazer esse teste.

Nós vamos fazer no Mac, mas vou deixar logo o caminho do arquivo para o Linux e para o Windows:

- Mac OS: /etc/hosts

- Linux: /etc/hosts

- Windows: c:\\windows\\system32\\drivers\\etc\\hosts
Com o Shell aberto vou dar um ‘sudo’ para fazer algo como super user, como estamos mexendo em uma configuração do sistema operacional, precisamos ser administrador para fazer isso:

sudo nano/etc/host
Você pode perceber que eu já tenho dois servers mapeando para o mesmo IP:

Agora podemos digitar nesse arquivo e adicionar um novo IP e mapear para o site que eu quero, por exemplo:

127.0.0.1 devpleno.local
Eu já tenho uma aplicação para teste rodando no localhost, vamos testar agora mudando o url:

Perceba que ele está mapeando normalmente. Lembrando que isso não vale para máquinas externas.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20testar%20dom%C3%ADnios%20localmente&url=https%3A%2F%2Fdevpleno.com%2Fcomo-testar-dominios-localmente) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-testar-dominios-localmente)

---

# negociação - Como vender um Software - DevPleno

URL: https://devpleno.com/como-vender-software

> Hoje vou complementar um pouco sobre como vender software, mais especificamente sobre negociação. O primeiro ponto que temos que desconstruir é que negocia...

Carreira

## negociação - Como vender um Software

T
Por Tulio Faria • 16 de agosto de 2017

[Carreira](/tag/carreira)

Hoje vou complementar um pouco sobre como vender software, mais especificamente sobre negociação.

O primeiro ponto que temos que desconstruir é que negociação não é uma briga, e sim um consenso. Lembrando que a gente negocia o tempo todo, se você quer convencer seu amigo a ir em uma festa com você, precisa negociar e vender isso para ele. Isso é o que fazemos também para fechar contrato, precisamos negociar para mostrar para a outra pessoa que isso é bom e vai trazer resultado para ela ou para a empresa dela.

O primeiro ponto que eu acho muito importante, até mesmo antes da negociação, é o quanto o projeto vai trazer de resultados, isso vai te dar insumo de até onde pode negociar. Um dos projetos que eu fechei (e foi um dos mais altos em valor) eu sabia que o prazo estava muito curto, então não tinha tempo para combinar, nem mesmo para reunião. Eles iriam inaugurar uma estrutura muito grande e precisavam do software funcionando em quarenta dias e nós éramos os únicos que eles conseguiram conversar no Brasil inteiro que topariam fazer isso. Quando a gente sabe disso e assume alguns riscos, a coisa se torna um pouco mais complexa.

Geralmente, quando o risco é muito alto, o preço sobe. Isso fica muito claro porque quanto mais curto o prazo, mais você tem que trabalhar sem um período de descanso, imagine que você precise virar quase 40 noites para entregar a tempo.

A dica de ouro da negociação: depois que você tem o formato da ideia de preço, nunca tire algo da proposta sem colocar outra. Basicamente é o seguinte, imagine que seu cliente peça um desconto de um software de R$10 mil pagos em quatro vezes, quando isso acontece eu dou desconto, mas se o prazo está curto, por exemplo, eu aumento o prazo, então eu faço por R$8 mil, mas demoro o dobro do tempo. Se ele disser algo como “o que mais você pode fazer por mim?” você vai utilizar essa jogada que funciona muito bem, diga por exemplo, “eu te dou 5% de desconto se você pagar a vista”. Percebam que sempre você está tirando algo para dar outra.

Vamos supor que você já negociou com o cliente e está definido o que vai criar, e o cliente vem tentar adicionar uma funcionalidade nova, lembre-se da regra: você coloca algo novo, mas tem que tirar outra. Se adicionar uma funcionalidade nova, diga precisa tirar outra coisa porque não dá para fazer tudo pelo valor que foi negociado. Essa regra de negociação funciona muito bem. Tudo isso você vai construindo quando conhece bem o cliente.

Negociação não é para “sangrar”, sem cobrar muito além do que vale, precisa ser algo justo. Quando eu tenho um potencial cliente que começa a tentar sangrar meu negócio, eu paro de conversar.

Uma outra coisa que eu parei de fazer, a não ser nesses modelos que comentei acima, é evitar fazer muita transação de preço na frente do cliente porque você pode cometer erros gravíssimos à medida que começar a pegar projetos maiores. Se você fazer uma conta errada na frente do cliente e assumir o compromisso de uma proposta, vai assumir um risco muito grande. Pode ser que você combine algo ali e, posteriormente, perceba que vai dar mais trabalho do que foi imaginado. Por esse motivo, sempre peça um tempo para pensar, não dê a resposta final sem que você tenha refletido sobre isso. A negociação dá uma adrenalina e no ímpeto de querer fechar, pode ser que acabe fazendo algo sem pensar e isso te prejudique futuramente.

Uma última dica: eu nunca dou mais que 5% de desconto. Imagine que você cobrou R$10 mil de um cliente e do nada baixou para R$5 mil. A sensação que o cliente vai ter é que aquilo não valia R$10 mil, e sim 5 mil, então a empresa é taxada como uma empresa que queria extorquir dinheiro. Isso acaba com a credibilidade.

Se você fizer essas dicas que eu passei, tenho certeza que vai se dar bem, eu utilizo elas sempre

Confira o video:

Curta o DevPleno no [Facebook](https://www.facebook.com/devpleno),[inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=negocia%C3%A7%C3%A3o%20-%20Como%20vender%20um%20Software&url=https%3A%2F%2Fdevpleno.com%2Fcomo-vender-software) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomo-vender-software)

---

# Como saber a complexidade de um algoritmo - DevPleno

URL: https://devpleno.com/complexidade-de-um-algoritmo

> Hoje eu gostaria de dar uma dica rápida, principalmente para o pessoal que estiver fazendo alguns testes no codelite, porque ele considera a complexidade d...

Algoritmos

## Como saber a complexidade de um algoritmo

T
Por Tulio Faria • 11 de julho de 2017

*

[Algoritmos](/tag/algoritmos)[Fundamentos](/tag/fundamentos)

Hoje eu gostaria de dar uma dica rápida, principalmente para o pessoal que estiver fazendo alguns testes no codelite, porque ele considera a complexidade de um algoritmo quando vai avaliar, obviamente depende muito de enunciado de problema.

O grande problema que eu vejo é saber se a notação big-O, que usamos para saber a complexidade do algoritmo, é uma solução boa ou não. Uma ideia que gosto bastante de usar é a seguinte: se você tem uma função qualquer, e você passa um vetor para essa função:

function calculo(vetor) {}
Como saber a complexidade desse cálculo? Temos que olhar as coisas que podem variar no cálculo, no caso acima, o tamanho do vetor. Geralmente o tamanho do vetor seria um const n por exemplo:

function calculo(vetor) {
const n = vetor.lenght

for (let i = 0; i &#x3C; n; i++) {
console.log(n)
}
}
Então ela poderia variar de acordo com N. Se considerarmos que o tamanho do vetor é N (geralmente no problema eles falam isso) logo esse é um algoritmo O(n) porque ele vai rodar a coisa mais pesada dele e vai iterar N vezes, quanto maior for esse N, mais vezes vamos rodar esse pedaço de código.

Se tivermos outra função, por exemplo um outro for,* e tivermos que fazer um cálculo baseado no N:

function calculo(vetor, m) {
const n = vetor.lenght

for (let i = 0; i &#x3C; n; i++) {
console.log(n)
for (let k = 0; k &#x3C; m; k++) {
console.log(n * k)
}
}
}
Nesse cenário, sabemos que tem dois for, um dentro do outro, o de cima varia em N e o de baixo varia em M. Se o M for um valor diferente, a complexidade dele é O(n*m), porque ele depende de dois fatores de entrada para saber a complexidade e o número de vezes que vai rodar o segundo console.log vai ser n*m.

Se por algum propósito do algoritmo o M for N, então teremos uma complexidade O(n²) que é o pior algoritmo que temos, porque ele cresce de forma exponencial.

Por isso em algumas entrevistas em inglês eles vão te questionar se essa é a melhor solução, se você sabe que ela é O(n²), pode ser que não seja a melhor.

Existe ainda um outro cenário, no qual passamos o for para fora:

function calculo(vetor) {
const n = vetor.lenght

for (let i = 0; i &#x3C; n; i++) {}

for (let k = 0; k &#x3C; n; k++) {
console.log(n * k)
}
}
Esse algoritmo volta a ser O(2n), pois ele vai rodar N depois rodar novamente o N. Ele não é nada comparado a 1000, por exemplo, porque ele varia muito pouco. O grande problema então é o N e não o 2, por isso consideramos a complexidade O(n) porque somamos os dois.

Agora vamos supor que esse algoritmo faça uma ordenação de sort:

functon(vetor){
vetor = vetor.sort()
}
O quick sort na média é N log N, ou seja, ele tem uma complexidade boa e qualquer coisa que fizermos, além disso temos que multiplicar ou somar, então provavelmente vai predominar o N log N.

No codelite, ele vai usar algo muito interessante que é uma estimativa do tempo que demorou para rodar o seu algoritmo para descobrir a complexidade, por isso quando você roda o algoritmo para ser avaliado, toda complexidade que ele descobre é estimada e não a real, por isso se tivermos essa noção de como evolui o algoritmo já é muito importante para resolvermos os problemas.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20saber%20a%20complexidade%20de%20um%20algoritmo&url=https%3A%2F%2Fdevpleno.com%2Fcomplexidade-de-um-algoritmo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomplexidade-de-um-algoritmo)

---

# Composição de componentes em ReactJS - DevPleno

URL: https://devpleno.com/composicao-de-componentes-em-reactjs

> A dica de hoje é sobre o ReactJS, mais especificamente sobre como podemos criar composição de componentes em ReactJS de uma forma um pouco diferente, como ...

Javascript

## Composição de componentes em ReactJS

T
Por Tulio Faria • 1 de agosto de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

A dica de hoje é sobre o ReactJS, mais especificamente sobre como podemos criar composição de componentes em ReactJS de uma forma um pouco diferente, como podemos utilizar algumas áreas de um componente para ejetar outros componentes por exemplo. Na prática ficará mais simples de entender.

Eu criei um aplicativo básico utilizando o create react app e agora vou criar dois componentes para mostrar como podemos utilizar essa composição. No app.js, logo após o importe do React e do ’./app.css’; criarei um Panel, ele será um functional stateless component porque não temos o estado interno dele.

const Panel = (props) => {
return(
&#x3C;div>
&#x3C;h1>header&#x3C;/h1>
&#x3C;/div>
&#x3C;p>Footer&#x3C;/p>
)
}
Ele me retorna duas coisas, uma div e tem header que pode ser um H1. Abaixo temos um P com um footer, isso para termos uma ideia de como podemos fazer. A primeira forma de composição é exatamente essa, eu posso trocar esse header e esse footer, por exemplo, ao invés de um texto chamar outra coisa:

const Panel = (props) => {
return (
&#x3C;div>
&#x3C;h1>{props.header}&#x3C;/h1>
&#x3C;p>{props.footer}&#x3C;/p>
&#x3C;/div>
)
}
Se eu pegar esse código e chamar mais abaixo, dentro do nosso app component:

&#x3C;p className="App-intro">
To get started, edit &#x3C;code>src/App.js&#x3C;/code>
&#x3C;/p>

&#x3C;Panel header='Olá mundo!' footer='rodape' />
Então onde eu mandar esse valor, ele vai escrever o texto, mas o interessante é que eu posso fazer algo diferente: ao invés de mandar dessa forma, posso mandar um JSX:

&#x3C;Panel
header={
&#x3C;span>
'Olá &#x3C;u>mundo!&#x3C;/u>
&#x3C;/span>
}
/>
Com isso fizemos uma composição porque eu posso passar outro componente para ele, como é um JSX eu posso passar o html ou passar efetivamente um outro componente. Por exemplo, podemos passar um componente que depende de dois outros componentes, um que fica só no header e um no footer e qualquer coisa que você quiser colocar você pode, como um mapa por exemplo.

Isso facilita bastante criar essa composição. Podemos criar componentes mais genéricos, principalmente os estilo containers e injetamos duas informações dentro. Outra coisa que podemos fazer o é o seguinte:

const Panel = (props) => {
return (
&#x3C;div>
&#x3C;h1>{props.header}&#x3C;/h1>

&#x3C;p>{props.footer}&#x3C;/p>
&#x3C;/div>
)
}

const Header = (props) => {
return &#x3C;div>.....&#x3C;/div>
}
O que passarem para ele eu vou colocar dentro do div. Como assim? Imagine que isso é meu header:

&#x3C;Panel
header={
&#x3C;span>
'Olá &#x3C;u>mundo!&#x3C;/u>
&#x3C;/span>
}
/>
E eu vou dizer para ele que é um header com as coisas dentro:

&#x3C;Header>
&#x3C;span>
'Olá &#x3C;u>mudo!&#x3C;/u>
&#x3C;/span>
&#x3C;/Header>
Para utilizar o que está dentro do header e o /header utilizamos uma outra propriedade chamada props.children:

const Header = (props) => {
return &#x3C;div>{props.children}&#x3C;/div>
}
Essas duas formas são bastante interessantes de se criar uma composição, ou com uma props normal ou se eu passar no corpo desse componente podemos gerar o props.children, com isso consigo pensar em componentes cada vez mais genéricos, porque eu posso fazer um header, por exemplo, para todas as minhas páginas e se eu quiser aplicar um class diferente, aplico no div.

Isso libera um potencial para o React muito grande, porque a gente consegue reutilizar muito código a partir dessa componentização.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Composi%C3%A7%C3%A3o%20de%20componentes%20em%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Fcomposicao-de-componentes-em-reactjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomposicao-de-componentes-em-reactjs)

---

# Comprometimento com as suas metas - DevPleno

URL: https://devpleno.com/comprometimento-com-suas-metas

> Hoje vamos tratar de um ponto muito importante para toda a carreira: o comprometimento com as suas metas. Quais são as suas? Aprender uma linguagem de prog...

Carreira

## Comprometimento com as suas metas

T
Por Tulio Faria • 19 de julho de 2017

[Carreira](/tag/carreira)

Hoje vamos tratar de um ponto muito importante para toda a carreira: o comprometimento com as suas metas. Quais são as suas? Aprender uma linguagem de programação por ano? Fazer algo diferente envolvendo tecnologia? Todos nós devemos definir metas para que a carreira evolua, afinal você define uma e então consegue conquistas novas cada vez mais.

O mais importante após definir a meta é o quanto você está comprometido com ela. Para contextualizar, lembro que nas olimpíadas de 96 eu tinha 11 anos de idade e naquela época não existia a internet como ela é hoje (não existia Wikipedia nem nada do tipo) e uma tínhamos que fazer um trabalho na escola sobre as olimpíadas. Todo mundo procurava na enciclopédia e escrevia o que tinha lá, então no mínimo 4 anos atrasado porque ela não estava atualizada para os jogos da época. Eu coloquei uma meta para mim mesmo: além de colocar o conteúdo da enciclopédia, eu iria colocar também todos os países que participariam dos jogos e escrever algo sobre cada um deles.

Comecei a procurar como implementar essa meta, então decidi gravar em um vídeo cassete e descobri uma função nele que gravava por várias horas, com isso, gravei a abertura inteira, já que antigamente as aberturas demoravam horas e horas. Como eu era criança e sabia da minha limitação de não conseguir ficar acordado até tarde, defini que iria gravar.

Posteriormente eu fui assistindo e consegui escrever tudo, mas o mais importante é que na época eu não pensei o efeito que isso teria na minha vida. Hoje em dia, eu vejo que naquele tempo eu não coloquei muita desculpa para não fazer o que queria e esse é um ponto muito interessante, mesmo com algum empecilho, não devemos usá-lo como desculpa para não cumprir a meta. O segundo ponto, que é a chave do que estou falando, é que você se comprometa com uma meta para você mesmo, você precisa cumpri-la, senão vai acabar não fazendo nada de diferente e consequentemente não evoluindo como você deveria evoluir. O grande ponto é ter um comprometimento muito forte.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Comprometimento%20com%20as%20suas%20metas&url=https%3A%2F%2Fdevpleno.com%2Fcomprometimento-com-suas-metas) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcomprometimento-com-suas-metas)

---

# Confira 4 dicas de UX para programadores - DevPleno

URL: https://devpleno.com/confira-4-dicas-de-ux-para-programadores

> Você já tentou usar um aplicativo e desistiu porque não conseguia encontrar as informações corretas ou um botão não funcionava por não ser responsivo para ...

Carreira

## Confira 4 dicas de UX para programadores

T
Por Tulio Faria • 6 de outubro de 2017

*

[Carreira](/tag/carreira)

Você já tentou usar um aplicativo e desistiu porque não conseguia encontrar as informações corretas ou um botão não funcionava por não ser responsivo para celular? Em quanto tempo você desistiu? Você voltaria a usar essa marca ou indicaria para os seus amigos?

Não é segredo que os consumidores estão cada vez mais exigentes, principalmente quando falamos dos mais jovens e conectados. A quantidade de opções faz com que o cliente deseje mais do que o básico; ele quer produtos simples de usar, intuitivos e que entregam mais do que prometem.

Nesse contexto, o termo UX (Experiência do Usuário) tem se destacado como um dos objetivos centrais que direcionam os produtos para atender a esse novo público. As empresas cada vez mais criam seus produtos para oferecer uma experiência completa para os clientes, a fim de conquistá-los e fidelizá-los.

Se você é programador, deve estar se perguntando:mas o que eu tenho com isso? Eu só desenvolvo o produto, não sou responsável pela experiência.*

É exatamente aí que você está enganado. Hoje,[profissionais completos](https://www.devpleno.com/desenvolvedor-full-stack-o-que-e-e-como-se-tornar?utm_source=blog&#x26;utm_campaign=rc_blogpost) de TI possuem pelo menos noções básicas de UX e as usam para entregar plataformas mais eficientes, que colaboram para uma boa experiência do usuário. Afinal, você contribui para criar um produto que pode ou não fornecer uma experiência única para os clientes.

Pensando nisso, reunimos todas as informações e dicas de UX, para que você seja um profissional mais completo e atinja suas [metas](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&#x26;utm_campaign=rc_blogpost). Vamos lá?

## O que é UX?

Antes de mais nada, você precisa compreender o que é essa técnica e como ela se difere de UI (User Interface). Ambas as técnicas são confundidas, mesmo sendo coisas bem distintas. Confira!

### User Experience (UX)

Traduzindo na forma literal, UX significa Experiência do Usuário. Ela é definida como a sensação que o consumidor tem ao navegar por uma interface, seja ela de um aplicativo, site ou software.

Quanto melhor a experiência, mais bem avaliado o produto é, aumentando as chances de fidelização de clientes.

### User Interface (UI)

Por outro lado, User Interface (UI) pode ser entendido como a interface do usuário, na tradução literal. Ela diz respeito a toda a parte que o usuário realmente utiliza: telas, botões, menus e formulários.

Porém, o seu papel é muito mais do que construir esses elementos de layout. Profissionais que fazem UI são responsáveis por criar o caminho que determina a experiência do usuário, para que ele seja fácil e intuitivo.

Portanto, podemos dizer que não existe uma agradável UX sem uma boa UI, uma vez que a interface do usuário é o objeto usado pela pessoa, que define a experiência. Isso diz que as duas devem ser trabalhadas em conjunto, buscando os melhores resultados para as soluções criadas.

## Por que eu preciso entender de UX?

Apesar de naturalmente associada a área de design, a responsabilidade de fornecer uma experiência única para o usuário também é do programador. Além disso, a tendência é que essas áreas trabalhem cada vez mais próximas, com o surgimento de profissionais como designer Front-End e Back-end.

Muitos designers estão se especializando em design de interfaces e assumindo atividades da área de desenvolvimento. É natural que as empresas busquem esse tipo de profissional para integrar o time, mais completo e interdisciplinar, podendo contribuir de forma ampla no produto.

Portanto, se você quer ser um profissional de destaque no mercado e não ficar para trás, ou até mesmo ser um [empreendedor](https://www.devpleno.com/empreender-na-area-de-software?utm_source=blog&#x26;utm_campaign=rc_blogpost), você precisa ter pelo menos noções básicas de UX e colocá-las em seus projetos.

Abaixo, listamos quatro dicas para você começar esse processo.

### 1. Entenda o seu consumidor

Você claramente não constrói um software para uso próprio na empresa, certo? Toda solução é construída para resolver algum problema para um público específico, e você, como programador responsável pelo produto, deve conhecer quem são essas pessoas, para criar uma solução que faça sentido para elas.

Saiba quem é o usuário ideal do seu produto, quais são seus gostos, qual o problema que ele está solucionando e como se comporta dentro de plataformas. Descubra informações sobre como ele usaria a sua solução e utilize esses dados como base para desenvolver o produto.

É garantido que as áreas de marketing e vendas podem fornecer todas as informações sobre quem são os clientes que utilizam o produto, e aqui introduzimos nossa próxima dica.

### 2. Trabalhe com as demais áreas de empresa

Se a experiência do usuário não depende só de marketing ou vendas, ela é responsabilidade de toda a empresa e deve ser pensada em conjunto. É óbvio que você deve trabalhar com as demais áreas para desenvolver a solução com a melhor experiência para os clientes, certo?

Uma boa dica é, antes de começar a desenvolver, fazer uma reunião de alinhamento com as áreas de marketing, vendas e design para definir um road map do produto, que considera o que é mais importante para impactar a experiência do usuário de forma positiva.

Além disso, busque feedbacks constantes com essas áreas que fazem contato direto com o consumidor, para direcionar e aprimorar suas demandas, focando em UX. Mantenha o contato com esse novo [network](https://www.devpleno.com/networking?utm_source=blog&#x26;utm_campaign=rc_blogpost).

### 3. Estude o mercado

Quantas vezes você recebeu a tarefa de desenvolver um software e programa e só buscou referências técnicas para criá-lo? Se costuma fazer isso, você não considera a experiência do usuário em seus projetos.

O ideal é que teste alguma solução concorrente ao seu projeto, que seja bem avaliada pelos consumidores, para entender como é sua usabilidade. Faça uma avaliação de como as informações são dispostas, como os elementos interagem, quais funções são essenciais e quais não tão necessárias.

Essa análise, juntamente com as informações do seu usuário, vai te direcionar na criação de uma solução mais otimizada, em função não só de técnica, mas também da experiência que proporcionará.

### 4. Mantenha-se atualizado

Assim como você busca novas informações e [cursos](https://www.devpleno.com/entenda-a-importancia-de-cursos-para-desenvolvedores?utm_source=blog&#x26;utm_campaign=rc_blogpost)sobre linguagens, técnicas e métodos de programação, é preciso também se atualizar sobre as novidades de UX, como conhecimentos que simplificam processos ou podem deixar o seu sistema mais eficiente no front-end.

Existem diversos meios em que você encontra dicas de como se manter atualizado e [aprendendo sempre](https://www.devpleno.com/aprenda-a-aprender?utm_source=blog&#x26;utm_campaign=rc_blogpost).

Essas são as dicas de UX para programadores que você deve seguir para se tornar um profissional mais completo e entregar melhores resultados na sua empresa. E para se manter atualizado sobre experiência do usuário, acompanhe o canal [UXNOW](https://www.youtube.com/channel/UCgfaifzmqadwKyCd0lagylQ?utm_source=blog&#x26;utm_campaign=rc_blogpost) e receba novidades sobre essa técnica tão importante!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Confira%204%20dicas%20de%20UX%20para%20programadores&url=https%3A%2F%2Fdevpleno.com%2Fconfira-4-dicas-de-ux-para-programadores) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fconfira-4-dicas-de-ux-para-programadores)

---

# Devpleno - Como entrar em Contato? - DevPleno

URL: https://devpleno.com/contato

> Surgiu alguma dúvida durante as aulas? Gostaria de conversar sobre algum assunto específico? Entre em contato conosco através do email contato@devpleno.com...

Blog

## Devpleno - Como entrar em Contato?

T
Por Tulio Faria • 14 de março de 2017

Surgiu alguma dúvida durante as aulas? Gostaria de conversar sobre algum assunto específico?
Entre em contato conosco através do email [contato@devpleno.com](mailto:contato@devpleno.com) ou enviando uma mensagem em nosso Whatsapp: (35) 999 090 011

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Devpleno%20-%20Como%20entrar%20em%20Contato%3F&url=https%3A%2F%2Fdevpleno.com%2Fcontato) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcontato)

---

# Módulo MS - Convertendo timestamps - DevPleno

URL: https://devpleno.com/convertendo-timestamps

> O handson de hoje é bem curto, apenas para mostrar um módulo que achei bastante interessante e funciona tanto para Node quanto para Browser. Esse módulo se...

Javascript

## Módulo MS - Convertendo timestamps

T
Por Tulio Faria • 5 de setembro de 2017

[Javascript](/tag/javascript)

O hands-on de hoje é bem curto, apenas para mostrar um módulo que achei bastante interessante e funciona tanto para Node quanto para Browser. Esse módulo se chama MS e faz a conversão de qualquer formato para milissegundo e vice-versa. Primeiramente precisamos adicionar as dependências:

yarn add ms
Em um arquivo qualquer, no meu caso criei um chamado timestamp, vamos fazer alguns testes:

const ms = require('ms')
A forma como ele funciona é bastante interessante porque, por exemplo, se passarmos um valor inteiro para ele, ele já converte para uma string:

console.log(ms(100000))
Vai ser retornado o valor de 2m. Lembrando que ao contrário ele também faz:

console.log(ms('1d'))
O resultado será 86400000. Além disso, ainda podemos fazer algo bem interessante:

console.log(ms(100000){
long: true
})
Assim, ao invés de falar a inicial, ele trará o nome completo ‘minutes’. Isso é muito útil principalmente quando queremos saber delta de tempo, quando temos dois timestamps com milissegundos e queremos achar a diferença entre eles.

Uma coisa bastante comum é utilizar o timestamp desde a era linux, tudo que fazemos é em relação a essa data. Só por curiosidade, eu achei o MS quando estava procurando coisas sobre JWT e uma das formas de passar a validação do token é através de uma string curta.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=M%C3%B3dulo%20MS%20-%20Convertendo%20timestamps&url=https%3A%2F%2Fdevpleno.com%2Fconvertendo-timestamps) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fconvertendo-timestamps)

---

# Como converter Markdown para HTML usando Marked - DevPleno

URL: https://devpleno.com/converter-markdown-para-html

> O Markdown é uma forma de escrevermos documentação que foi popularizada pelo Github (e que é uma mão na roda, digase de passagem). Com ele, podemos pegar u...

Javascript

## Como converter Markdown para HTML usando Marked

T
Por Tulio Faria • 3 de maio de 2017

[Javascript](/tag/javascript)

O Markdown é uma forma de escrevermos documentação que foi popularizada pelo Github (e que é uma mão na roda, diga-se de passagem). Com ele, podemos pegar um texto e criar algumas marcações, o que gera uma interface mais organizada, sem perigo de existir sujeiras provenientes do Word por exemplo.

**1 – Usando o módulo Marked**

Para entender como o Markdown funciona, vamos fazer um hands-on no módulo chamado Marked, que tem a função de converter Markdown para HTML.

Primeiro, vamos criar um arquivo novo para testarmos (vou chamar o meu de teste.js)

**2 – Importando o Marked**

Com o arquivo aberto, vamos dar um Require chamando o módulo Marked

const marked = require('marked')

console.log(marked('# teste'))
**3 – Rodando o arquivo**

Ao dar node no arquivo teste.js, perceba que ele vai retornar

&#x3C;h1> id='teste'>Teste&#x3C;/h1>

O # trás pra gente a tag H1, podemos usar 2 # por exemplo e ele nos retornaria a tag H2

console.log(marked('## teste'))

&#x3C;h2> id="teste">Teste&#x3C;/h2>
**4 – Por que usar o Markdown?**

Com ele, conseguimos colocar esses textos de forma mais limpa e também plugarmos renderes nele.

Por exemplo, quando renderizar o H1, quero que seja um pouco diferente. Se colocarmos um texto formatado, poderia converter isso em view no react native, text, HTML, etc.

Exemplo:

constmarked = requie('marked')

constrenderer = new marked.Renderer()

renderer.heading = function (Text, level) {
return 'Text: ' + text + ' Level: ' + level
}

console.log(marked('# teste', { renderer: renderer }))
Lembrando que ao criar um renderer temos que avisar o marked que estamos criando um renderer diferente. Neste caso, como ele é um Heading, vamos chamar o renderer.heading. Novamente, para visualizarmos o que foi feito, vamos dar um node teste.js e ele vai retornar pra gente:

Text: Teste Level: 2
Com isso, o Marked sabe que o texto que eu quero é o Teste, e o level que eu quero é o 2, ou no caso a heading tag H2. Eu consigo retornar uma fontSize maior como no exemplo abaixo:

renderer.heading = function (Text, level) {
return&#x3C;Textstyle={{fontSize: }}>'Text: ' +text+' Level: '+level
}
Checando obviamente o level e por aí vai. Assim podemos gerar uma interface que vai ser reproduzida de forma igual tanto no react native quanto na Web, já que é possível converter para HTML e estaria tudo rodando normalmente.

**5 – Concluindo**

Venho usando bastante Markdown para documentação. Uma outra ideia interessante seria pegar esse HTML gerado pelo Markdown e, a partir dele, gerar um PDF para salvar isso para outros desenvolvedores.

Marked é uma forma que temos no Node de converter o Markdown em HTML, mas também podemos utilizá-lo no browser.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20converter%20Markdown%20para%20HTML%20usando%20Marked&url=https%3A%2F%2Fdevpleno.com%2Fconverter-markdown-para-html) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fconverter-markdown-para-html)

---

# Ctrl+C / Copy to Clipboard em JS - DevPleno

URL: https://devpleno.com/copy-to-clipboard-em-js

> Essa é uma dica bem rápida de como podemos mandar algo com o clipboard, ou seja, o equivalente a dar um CTRL + C em um texto na sua página. Para fazer este...

Javascript

## Ctrl+C / Copy to Clipboard em JS

T
Por Tulio Faria • 18 de maio de 2017

[Javascript](/tag/javascript)

Essa é uma dica bem rápida de como podemos mandar algo com o clipboard, ou seja, o equivalente a dar um CTRL + C em um texto na sua página.

Para fazer este exemplo, vamos usar o jQuery por que escrevemos pouquíssimas linhas de código. Então temos uma página bem simples, apenas com algumas tags, e vamos criar um input type text com um ID url e um value:

&#x3C;html>
&#x3C;head>
&#x3C;title>Copy to Clipboard&#x3C;/title>
&#x3C;style>
#url{
text-align: center;
padding: 40px;
}
&#x3C;/style>
&#x3C;/head>
&#x3C;body>
&#x3C;input type="text" id="url" value="https://devpleno.com" />
&#x3C;script src="https://code.jquery.com/jquery-3.2.1.min.js">
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Com isso teremos o input, e a ideia é que quando clicarmos nele. já ser copiado para a área de transferência, apenas precisando dar CTRL + V para funcionar.

Lembrando que já importamos o jQuery da CDN. Vamos então abrir no body um novo Script. Nele, quando clicar na URL, quero que selecione e depois execute o comando copy.

&#x3C;script>
$("url").click(function(){
$(this).select();

document.execCommand('copy');
})
&#x3C;/script>
Algumas pessoas colocam um Botão para copiar e deixam apenas o select quando clicarmos no texto. Isso é muito útil quando temos URL’s para compartilhar e é legal para deixar essa facilidade na experiência do usuário quando ele estiver utilizando o seu sistema.

Um exemplo de onde isso é muito útil é na URL do github, pois poupamos a tarefa de copiar do usuário. Confira a explicação em vídeo para entender melhor.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Ctrl%2BC%20%2F%20Copy%20to%20Clipboard%20em%20JS&url=https%3A%2F%2Fdevpleno.com%2Fcopy-to-clipboard-em-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcopy-to-clipboard-em-js)

---

# Mongoose: corrigindo &quot;Cannot overwrite &#39;Model&#39; model once compiled&quot; - DevPleno

URL: https://devpleno.com/corrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose

> Durante o desenvolvimento de um protótipo aqui na empresa, eu me deparei com uma situação bem interessante no Mongoose. Por algum motivo, comecei a receber...

Javascript

## Mongoose: corrigindo "Cannot overwrite 'Model' model once compiled"

T
Por Tulio Faria • 3 de outubro de 2016

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Durante o desenvolvimento de um protótipo aqui na empresa, eu me deparei com uma situação bem interessante no Mongoose. Por algum motivo, comecei a receber o seguinte erro: _OverwriteModelError: Cannot overwrite `User` model once compiled. _

C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\node\_modules\\mongoose\\lib\\index.js:361
throw new mongoose.Error.OverwriteModelError(name);
^
OverwriteModelError: Cannot overwrite \`User\` model once compiled.
at Mongoose.model (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\node\_modules\\mongoose\\lib\\index.js:361:13)
at Object.&#x3C;anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\User.js:8:27)
at Module.\_compile (module.js:413:34)
at Object.Module.\_extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module.\_load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.&#x3C;anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\postsController.js:1:74)
at Module.\_compile (module.js:413:34)
at Object.Module.\_extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module.\_load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.&#x3C;anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\index.js:6:1)
O que me intrigou muito foi que sempre utilizei o Mongoose praticamente da mesma forma. O exemplo que gerou este erro é este aqui:

var mongoose = require('mongoose')
mongoose.connect('mongodb://localhost/mongoose-problem')

require('./usersController.js')
require('./postsController.js')
O model User:

var mongoose = require('mongoose')

var userSchema = mongoose.Schema({
email: String,
password: String
})

module.exports = mongoose.model('User', userSchema)
E os 2 controllers, que simulam a utilização deste model:

var User = require('./user')
// restante do código do controller

var Post = require('./User')
// restante do código do controller
Bom, analisando o erro novamente, podemos notar que por algum motivo ao executar o código, o módulo onde está o model está sendo instanciado mais de uma vez. E isso acarreta em setar o schema duas vezes, gerando assim este erro.

Se analisarmos como está sendo dado o require em cada controller, vamos notar que um deles está como user e no outro User. No Windows, se tentarmos abrir um arquivo User.js ou user.js, ambos irão apontar para o mesmo local (que foi o que aconteceu aqui).

Porém, o nodejs gerencia os módulos em si de maneira case-sensitive. Então se fizermos: require(’./User’) e require(’./user’), o nodejs vai tentar registrar 2x. O que duplica o registro do schema User no mongoose.

No Linux/Mac isso não aconteceria, pois bem antes de esse erro “pipocar”, o node já iria gritar dizendo que o módulo User.js não existe. E ficaria bem mais simples de encontrar o erro.

## Outros efeitos colaterais deste problema:

Se por algum motivo, tivéssemos um trecho de código que não possuísse a restrição do mongoose+schema (de não poder ser registrado mais de uma vez). Este código seria executado 2x no Windows (pois o node registraria 2x o módulo).

Isso poderia gerar um bug/efeito colateral que aconteceria somente no Windows. E o código quebraria quando fosse colocado em produção no Linux. O ideal então é manter um padrão, e chamar no require da mesma forma que o arquivo foi salvo. Evitando assim, muita dor de cabeça.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Mongoose%3A%20corrigindo%20%22Cannot%20overwrite%20) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcorrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose)

---

# Redirecting to: /

URL: https://devpleno.com/cta

Redirecting to: / [Redirecting from /cta to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/cta-1

Redirecting to: / [Redirecting from /cta-1 to /](/)

---

# Currying -  Uma técnica interessante usada em programação funcional - DevPleno

URL: https://devpleno.com/currying

> O Currying é basicamente uma forma de informar para uma função os parâmetros de forma parcial. Você pode pegar uma função qualquer que recebe, por exemplo,...

Javascript

## Currying - Uma técnica interessante usada em programação funcional

T
Por Tulio Faria • 26 de maio de 2017

*

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

O Currying é basicamente uma forma de informar para uma função os parâmetros de forma parcial. Você pode pegar uma função qualquer que recebe, por exemplo, três parâmetros, mandar um por vez e no fim obter o resultado. Assim, você injeta os parâmetros à medida que estiverem disponíveis. Um exemplo usando JavaScript puro e Currying (lembrando que ele é uma função normal. Nele teremos os valores 1 e 2).*

function func(valor1, valor2) {
return valor1 + valor2
}

console.log('normal', func1(1, 2))
A única forma que temos de chamar essa função é passando os valores para ele, mas o ideal é passarmos o 1, e o valor 2 só quando ele estiver disponível. Vamos criar agora uma função 2 onde isso seja possível.

Essa função não vai receber os dois valores, apenas um e dar um return em uma função que recebe o segundo valor e essa, por sua vez, retorna valor 1 mais valor 2.

function func2(valor1){
return function(valor2){
return valor1+valor2
}
}

const func2Valor1 = func2(10)

console.log('curried', func2Valor1(20)
Suponhamos que quero fazer um read de um arquivo curried e cada hora que eu ler ele será passado um callback diferente, deixando apenas o primeiro parâmetro fixo. Isso é o Currying.

Vamos preenchendo os parâmetros à medida com que vamos executando o código e, quando chegamos no passo final, estará disponível todos os valores que passamos.

Quando fazemos isso, precisamos retornar a função e guardar em uma variável, e uma segunda função espera que você passe o segundo valor. Podemos também executar de uma vez fazendo assim:

console.log('curried', func2(10)(20))
Na versão curried, precisamos lembrar que a primeira parte retorna uma função e então conseguimos chamar a segunda função com o segundo parâmetro que queremos. Uma outra coisa que podemos fazer é uma curried function só com arrow function, por exemplo:

const functArrow = (valor1) => (valor2) => (valor3) => {
return valor1 + valor2 + valor3
}

console.log(functArrow(1)(2)(3))
Perceba que isso deixa ainda mais simplificado uma curried function e vamos compondo cada vez mais nossas funções. Isso deixa mais fácil de ser testado, pois, à medida que a parte elementar dela é testada, só precisamos passar os valores corretamente que não vai ter problema. Confira a explicação em vídeo.

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Currying%20-%20%20Uma%20t%C3%A9cnica%20interessante%20usada%20em%20programa%C3%A7%C3%A3o%20funcional&url=https%3A%2F%2Fdevpleno.com%2Fcurrying) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fcurrying)

---

# Redirecting to: /

URL: https://devpleno.com/curso-js

Redirecting to: / [Redirecting from /curso-js to /](/)

---

# Cursos e Programas - DevPleno

URL: https://devpleno.com/cursos

> Cursos, mentorias e programas de crescimento para desenvolvedores. Do iniciante ao avancado, encontre a trilha ideal para sua carreira em tecnologia.

## Cursos e Programas

Experiencias de aprendizado personalizadas para cada estagio da sua jornada como desenvolvedor, da primeira linha de codigo ao seu proprio SaaS.

Iniciante

#### Fullstack Master 101

O plano definitivo para quem quer entrar na área de tecnologia com uma base sólida.

Em Breve

Avançado

#### Fullstack Master Pro

Eleve suas habilidades para liderar times e entregar produtos de alto desempenho.

[Conhecer Programa](https://go.devpleno.com/fsm)

Mentoria

#### TheSiders

Mentoria exclusiva 1:1 focada em construir e escalar seus produtos de software.

[Conhecer Programa](https://do.devpleno.com/thesiders)

Empreendedorismo

#### Simple SaaS

Da validação à escala. Uma jornada completa para transformar ideias em negócios.

Em Breve

Arquitetura

#### TheBestStack

Prepare sua arquitetura para o futuro. Aprenda a preparar sua stack para a velocidade da IA.

[Conhecer Programa](https://do.devpleno.com/the-best-stack)

Produtividade

#### My AI Way

Os bastidores do meu workflow pessoal com IA para entregar 10x mais em metade do tempo.

[Conhecer Programa](https://do.devpleno.com/the-best-stack)

[Finanças Conta49 Contabilidade Trabalha como PJ? Quer receber do seu SaaS de forma correta? A Conta49 é a minha contabil](https://www.conta49.com.br)

---

# Faker - Como gerar grandes massas de dados fictícios para testes - DevPleno

URL: https://devpleno.com/dados-ficticios-para-testes

> O Faker é um módulo do Node que usamos para gerar dados fictícios para testes, como para popular um banco de dados, por exemplo. Isso é muito útil quando q...

Javascript

## Faker - Como gerar grandes massas de dados fictícios para testes

T
Por Tulio Faria • 16 de maio de 2017

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O Faker é um módulo do Node que usamos para gerar dados fictícios para testes, como para popular um banco de dados, por exemplo. Isso é muito útil quando queremos gerar uma grande massa de dados e estamos sem criatividade para gerá-la. Além disso, ele evita a utilização de dados que pareçam reais, pois eles podem gerar algum desconforto posteriormente. A primeira coisa que você precisa fazer é instalar o módulo:

yarn add faker
Vamos criar um arquivo novo. (No meu caso, usarei o nome gen-data.js, mas pode ser qualquer nome que lhe agrade).* :) Dentro dele faremos o seguinte código:

const faker = require('faker')

console.log(faker.name.firstName(), faker.name.lastName())
Neste código, primeiro vamos importar o módulo Faker. (Perceba que nele existem vários tipos de dados: nome, phone, random, image, etc). Vamos importar o nome por exemplo. Irá aparecer mais tipos de dados como firstName, lastName, jobArea, entre outros. Salvamos e rodamos no Node, ele nos dará um Nome e um Sobrenome aleatório. Podemos pedir para o Faker fazer isso várias vezes gerando, assim, uma grande massa de dados sem que tenhamos tanto trabalho para popular um banco de dados. Veja o exemplo abaixo.

const faker = require('faker')

for (let i = 0; i &#x3C; 10; i++)
console.log(faker.name.firstName(), faker.name.lastName())
O Faker gera uma série dados interessantes, como:

console.log(faker.helpers.createCard())
Que irá gerar uma lista com todos os dados de uma pessoa fictícia. Outro exemplo poderia ser:

console.log(faker.internet.avatar())
Nele, o Faker busca uma imagem aleatória como avatar.

Isso é diferente de gerar o loren y, pois nele geralmente há um formato padrão que começa sempre com “loren y”, o que não fica muito interessante para nomes.

Depois de utilizar o Faker, você perceberá que vai ajudar muito na hora de criar novos dados para testes de forma rápida. Confira o hands-on em vídeo.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Faker%20-%20Como%20gerar%20grandes%20massas%20de%20dados%20fict%C3%ADcios%20para%20testes&url=https%3A%2F%2Fdevpleno.com%2Fdados-ficticios-para-testes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdados-ficticios-para-testes)

---

# Debug de código JavaScript no Navegador - DevPleno

URL: https://devpleno.com/debug-no-navegador

> Hoje vou dar uma dica rápida de como podemos fazer o debug de código JavaScript no navegador. É bastante simples, se você já trabalha com Java ou alguma ID...

Javascript

## Debug de código JavaScript no Navegador

T
Por Tulio Faria • 22 de junho de 2017

[Javascript](/tag/javascript)

Hoje vou dar uma dica rápida de como podemos fazer o debug de código JavaScript no navegador. É bastante simples, se você já trabalha com Java ou alguma ID, já deve ter uma ideia de como fazer isso na ID.

Podemos fazer isso também no front-end com JavaScript. Para ilustrar, vamos usar o seguinte código, que apenas inclui o jQuery e fiz um scripts.js:

&#x3C;html>
&#x3C;body>
&#x3C;button id='btn'>Test&#x3C;/button>
&#x3C;script src='jquery-3.1.0.js'>&#x3C;/script>
&#x3C;script src='scripts.js'>&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
O script em si tem um contador e duas funções assíncronas:

var counter = 0;

counter = counter+1;

$(function)(){
$("btn").click(function(){
counter+=1;

console.log(counter);
});
});
Provavelmente quando você executar esse código no browser ele não vai fazer nada, pois estamos passando um console.log O que fazer?

No Windows, aperte F12 para abrir o developer toolbar:

Uma dica interessante: podemos dar CTRL + e CTRL – dentro da toolbar, com isso ele aumenta e diminui o zoom.

Há vários painéis e no sourse vemos todos nossos arquivos fontes. Nele você escolhe, na barra lateral, qual o arquivo quer visualizar e ele mostrará o código. Também é possível saber o que está acontecendo no script, por exemplo, clicar no número 2 da linha 2, voltar no script e dar F5. Ele pausou para podermos debugar o código.

Se passar o mouse em cima da variável, ele mostra que ela não foi definida ainda, se clicar em step over

ele executa a instrução e passa para a próxima linha. Ao passar o mouse em counter, ele recebeu 0 porque agora foi atribuído o valor a ele.

Uma das coisas que acho fantástico no Chrome é o counter estar com o valor zero. Se eu quiser prever quanto ele vai ficar, posso selecionar o pedaço de código que quero e ele já faz um preview do valor que essa variável vai retornar. Isso é muito bom para quando vamos debugar um código mais extenso. O problema é que quando continuamos apertando o step over, vai entrar em uma parte de um código jQuery, se eu der um step over de novo, ele irá para dentro desse jQuery, então para evitar isso, eu coloco o meu break point dentro da função anônima que vai ser chamada de forma assíncrona.

Se deixarmos no 7, ele nunca vai fazer nada porque nunca vai passar pelo console.log, então vamos no botão resume para continuar executando.Ele executou tudo que podia de forma síncrona e como coloquei o break point dentro da função anônima, vamos clicar em test para ver o que acontece. Perceba que agora podemos selecionar e checar o preview normalmente como fizemos anteriormente.

Esse tipo de debug ajuda muito quando precisamos achar algum erro de lógica, afinal é equivalente a fazer aquela execução passo a passo. Confira o vídeo.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Debug%20de%20c%C3%B3digo%20JavaScript%20no%20Navegador&url=https%3A%2F%2Fdevpleno.com%2Fdebug-no-navegador) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdebug-no-navegador)

---

# Decisão técnica não precisa ser eterna - DevPleno

URL: https://devpleno.com/decisao-tecnica

> Muitas pessoas, principalmente na época em que dava aulas presenciais, costumavam me perguntar qual tecnologia estudar. Geralmente as pessoas colocam a lin...

Carreira

## Decisão técnica não precisa ser eterna

T
Por Tulio Faria • 8 de agosto de 2017

[Carreira](/tag/carreira)

Muitas pessoas, principalmente na época em que dava aulas presenciais, costumavam me perguntar qual tecnologia estudar. Geralmente as pessoas colocam a linguagem ou a tecnologia como se fosse uma decisão exclusiva que não pode ser mudada nunca mais. Não existe isso, se você é um profissional desse tipo, eu sinto lhe informar que está fadado ao fracasso, pois suas decisões devem estar sempre evoluindo, sua melhor decisão tem que ser a melhor decisão para aquele momento. Decisão técnica não precisa ser eterna!

Eu já fiz muito projeto em Angular por exemplo, e hoje para mim o React acaba sendo mais interessante, mas não que o Angular seja ruim, é que para mim o React é melhor no momento.

Já aconteceu de eu dizer que ASP é ruim porque estava começando minha carreira com ASP e comparei com o PHP, que eu já era bem melhor, nesse caso óbvio que ASP vai ser pior que PHP, pois os meus parâmetros eram diferentes. Então precisamos tomar cuidado com esse tipo de pensamento porque essas decisões não vão ser para o resto da vida, você pode e até deve mudar de opinião e se reciclar sempre. Quando for tomar uma decisão, como criar um projeto novo, meu conselho é conhecer mais opções, não precisa tomar a decisão final com a linguagem e pronto… Aprenda Angular e React, por exemplo, e veja qual você se sente mais confortável para fazer aquele projeto e não para todos os projetos da sua vida. Isso vai permitir que você evolua na sua carreira.

Comigo aconteceu várias coisas nesse sentido, antes eu achava que a HS era cara, ai eu hospedava tudo na Digital Ocean, hoje eu uso a HS e ela não custa caro, tudo depende do ponto de vista.

Eu gosto de deixar meu aprendizado sempre atualizado, então quando eu posso comprar cursos, eu compro. Se eu quero aprender React ou Angular para testar, eu faço ambos os cursos e, aí sim, eu tomo a decisão ao invés de ficar só olhando e tentando achar conteúdo dentro daquilo. Testar e ver possibilidades faz parte da nossa profissão. Descobrir e ponderar qual é a melhor escolha para aquele momento.

Obviamente, dependendo de onde você trabalha, não consegue tomar decisão de qual tecnologia utilizar, comece utilizar suas horas vagas para testar novas tecnologias em outros projetos, é bom estar renovando o seu ‘cinto de ferramentas’.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Decis%C3%A3o%20t%C3%A9cnica%20n%C3%A3o%20precisa%20ser%20eterna&url=https%3A%2F%2Fdevpleno.com%2Fdecisao-tecnica) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdecisao-tecnica)

---

# Decisões baseadas apenas na questão financeira - DevPleno

URL: https://devpleno.com/decisoes-baseadas-apenas-na-questao-financeira

> Pare de tomar todas as decisões da sua carreira única e exclusivamente baseadas na parte financeira! Isso mudou a forma como eu atuo no mercado hoje. Quand...

Carreira

## Decisões baseadas apenas na questão financeira

T
Por Tulio Faria • 25 de outubro de 2017

[Carreira](/tag/carreira)

Pare de tomar todas as decisões da sua carreira única e exclusivamente baseadas na parte financeira! Isso mudou a forma como eu atuo no mercado hoje.

Quando você coloca isso na sua cabeça, você começa a fazer naturalmente. Eu fazia isso desde meu primeiro emprego, onde ganhava R$100,00 por mês, era muito pouco pelo montante que eu fazia, porém foi a maior escola que eu tive. Se eu tivesse tomado a decisão de ir pelo dinheiro, eu não teria feito uma grande escolha para minha vida, afinal foi de lá eu tirei toda a minha base de Web.

É muito comum olharmos apenas para o valor que vamos receber, mas quando quando você para de olhar para o dinheiro, ele acaba aparecendo. O financeiro não vai te trazer a felicidade na profissão, isso é o ponto mais importante para nós como desenvolvedores e profissionais.

Atualmente muitos amigos meus que fizeram escolhas parecidas também tiveram muito sucesso. Um deles deixou de ir trabalhar em uma empresa que pagaria muito dinheiro para trabalhar em uma outra que lhe daria apenas experiência, e essa experiência foi o que permitiu que ele morasse um tempo na alemanha.

Pense mais estrategicamente em sua carreira. Quais os pontos que te motivam? Qual tecnologia vai trazer mais felicidade?

Por exemplo, hoje eu poderia programar em JAVA, mas eu não programo porque não é uma linguagem que eu gosto.

Se você não focar em dinheiro e sim na sua formação e na sua satisfação profissional, mais oportunidades vão aparecer para você.

Apesar de ser importante, o dinheiro não é tudo. Pense melhor sobre isso.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Decis%C3%B5es%20baseadas%20apenas%20na%20quest%C3%A3o%20financeira&url=https%3A%2F%2Fdevpleno.com%2Fdecisoes-baseadas-apenas-na-questao-financeira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdecisoes-baseadas-apenas-na-questao-financeira)

---

# Defina metas - DevPleno

URL: https://devpleno.com/defina-metas

> A carreira de um desenvolvedor é bastante agitada, principalmente, por termos que nos manter sempre atualizados e antenados no mercado. Para isso, nada mai...

Carreira

## Defina metas

T
Por Tulio Faria • 21 de julho de 2016

[Carreira](/tag/carreira)

A carreira de um desenvolvedor é bastante agitada, principalmente, por termos que nos manter sempre atualizados e antenados no mercado. Para isso, nada mais interessante que definir metas profissionais e pessoais. Veja neste vídeo mais dicas e sacadas sobre esse assunto.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Defina%20metas&url=https%3A%2F%2Fdevpleno.com%2Fdefina-metas) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdefina-metas)

---

# Desenvolvedor Full Stack: o que é e como se tornar? - DevPleno

URL: https://devpleno.com/desenvolvedor-full-stack-o-que-e-e-como-se-tornar

> Cada vez mais a figura do desenvolvedor Full Stack ganha espaço em empresas de TI e desenvolvimento de software. Esse perfil profissional que combina as ha...

Carreira

## Desenvolvedor Full Stack: o que é e como se tornar?

T
Por Tulio Faria • 7 de junho de 2017

[Carreira](/tag/carreira)

Cada vez mais a figura do desenvolvedor Full Stack ganha espaço em empresas de TI e desenvolvimento de software. Esse perfil profissional que combina as habilidades de front end e back end é cada vez mais procurado porque, além de poder cobrir qualquer espaço em um time de desenvolvimento, ele é capaz de enxergar o processo de produção como um todo. Se tornar um desenvolvedor Full Stack pode parecer um desafio tão grande que às vezes é até desencorajador: se já não é fácil ser um dev front-end ou back-end, dominar as duas camadas então seria impossível. Mas na verdade, ter visão holística do Full Stack não é tão complicado quanto parece: neste artigo, vamos explicar melhor o que é um dev Full Stack e o que é preciso fazer para se tornar um deles. Boa leitura!

## O que é um desenvolvedor Full Stack?

Em algumas empresas ainda é muito usual dividir os desenvolvedores de softwares em duas categorias: os especialistas em front-end, que lidam com interfaces e a experiência do usuário e os de back end que trabalham com a camada mais profunda do código, além de outras tarefas como as integrações com bancos de dados. Só que essa especialização intensa começou a ser problemática em alguns casos, porque como os devs eram muito especializados nas funções específicas dos seus times, faltava alguém capaz de enxergar toda a produção como algo único e integrar melhor essas duas camadas do desenvolvimento. E é aí que entra o desenvolvedor Full Stack: um profissional capaz de trabalhar tanto no front-end quanto no back-end, com uma visão holística do processo. Esse perfil profissional é útil tanto em organizações que não dividem os times de forma tão direta quanto em empresas mais modernas, que esperam dos seus colaboradores um conjunto de competências variadas e versatilidade.

## Como se tornar um desenvolvedor Full Stack?

Para se tornar um desenvolvedor Full Stack é preciso, naturalmente, estudar muito. O profissional que opta por esse tipo de carreira deve ser ávido por novos conhecimentos. Ele precisa se sentir confortável com o desafio de encarar uma linguagem desconhecida como parte da sua rotina de trabalho. Esse perfil de desenvolvedor também costuma ser chamado de profissional com conhecimento em forma de ‘T’. A linha vertical da letra representa a área em que o dev é um especialista, que pode ser algo dentro do front-end ou do back-end. Já a linha horizontal simboliza que, além de ser especializado em algo, esse profissional expande suas competências em diversas áreas, sem se aprofundar tanto nelas. Em essência, o desenvolvedor Full Stack compreende todo o processo de desenvolvimento do produto. Portanto, para conseguir se capacitar nesse perfil, o dev precisa, antes de tudo, conhecer um pouco sobre quase tudo dos processos de criação de um software.

## O que preciso saber para ser um desenvolvedor Full Stack?

Em essência, podemos dizer que o desenvolvedor Full Stack precisa dominar toda a estrutura de produção do software, do back-end ao front-end. Esses conhecimentos vão variar de acordo com cada empresa, pois times diferentes trabalham com tecnologias e técnicas diversas. Logo, é importante que o dev que pretende se tornar Full Stack tenha a consciência de que ele precisa ser aberto a novos conhecimentos sempre. Também é essencial que ele não tente ser um especialista em todas as áreas, pois além de ser inviável, isso atrapalharia a ampliação dos seus horizontes. Dito isso, vale a pena listar algumas técnicas e tecnologias que o desenvolvedor Full Stack deve conhecer melhor:

- **usabilidade**: é um engano achar que a experiência do usuário está apenas nas mãos dos devs front-end. A visão de usabilidade deve começar já na hora que uma funcionalidade é concebida, portanto, esse conhecimento deve fazer parte do repertório de um desenvolvedor Full Stack;

- **controle de versão**: é básico que qualquer desenvolvedor domine tecnologias como o Git e o SVN, seja ele Full Stack ou não;

- **linguagens de programação back-end**: além de estudar a noção de lógica do back-end, o Full Stack precisa saber pelo menos uma linguagem como JavaScript, Java, C# ou PHP;

- **banco de dados**: muitos devs se amedrontam com o degrau de aprendizado que são os banco de dados. Mas para se tornar Full Stack, é preciso conhecer bem esses mecanismos;

- **mobile**: a abordagem padrão hoje é o ‘mobile first’. Devs oriundos do front-end costumam ter essa visão, mas quem vem do back-end pode se aprofundar mais;

- **infraestrutura e nuvem:** conhecimentos como virtualização de máquinas, infraestrutura de redes e serviços de nuvem são muito bem-vindos para o desenvolvedor Full Stack;

- **linguagens de programação Front-End**: Javascript e HTML, por exemplo, são algumas das habilidades básicas de qualquer desenvolvedor Full Stack.

Depois de dominar todos esses conhecimentos listados acima, um desenvolvedor pode até se dar por satisfeito e adotar o sufixo “Full Stack” no seu cartão de visitas. Mas é preciso que ele tenha plena consciência de que, na verdade, sua evolução como profissional será contínua e ele nunca deixará de aprender. As tecnologias e linguagens de programação estão sempre se transformando. Para não correr o risco de se tornar obsoleto em alguma das suas competências, o desenvolvedor precisa estudar cada vez mais e incluir a busca por novos conhecimentos como parte da sua rotina.

## Um desenvolvedor Full Stack precisa conhecer também do negócio?

O objetivo do desenvolvedor Full Stack é ter a visão holística sobre o processo de desenvolvimento de um produto. Logo, apesar de não ser uma exigência básica, é muito recomendável que esse profissional busque conhecimentos também na área de negócios.

Em boa parte das empresas, os desenvolvedores Full Stack são vistos como representantes da área de desenvolvimento, capazes de responder questionamentos sobre toda a estrutura de produção do setor. Mas para se comunicar claramente e compreender as demandas e dúvidas externas, é necessário que ele conheça também a regra do negócio.

Além disso, com uma visão que englobe também a parte de negócios, o dev será capaz de enxergar quais são as funcionalidades que vão agregar valor efetivo ao software, facilitando a priorização delas.

Ou seja, mesmo depois de expandir seus horizontes aprendendo tudo sobre front-end e back-end, é desejável que o desenvolvedor Full Stack amplie ainda mais o seu conhecimento em ‘T’. Além de aprender sobre essa parte de negócios, ele também pode desbravar outras áreas, como o desenvolvimento ágil de projetos, networking e habilidades de liderança.

E você, o que considera essencial e desejável para se tornar um desenvolvedor Full Stack e dominar o processo de produção de softwares?

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Desenvolvedor%20Full%20Stack%3A%20o%20que%20%C3%A9%20e%20como%20se%20tornar%3F&url=https%3A%2F%2Fdevpleno.com%2Fdesenvolvedor-full-stack-o-que-e-e-como-se-tornar) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdesenvolvedor-full-stack-o-que-e-e-como-se-tornar)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreacrjs

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreacrjs to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-3

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-3 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-carta

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-carta to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-espera

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-espera to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-li3

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-li3 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-lista-de-espera

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lista-de-espera to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-lp

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lp to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-lp-2

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lp-2 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-lp1

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lp1 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjs-lp3

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lp3 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/devreactjslistadeespera

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjslistadeespera to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: /bind

URL: https://devpleno.com/dica-bind

Redirecting to: /bind [Redirecting from /dica-bind to /bind](/bind)

---

# Dica: Como saber a complexidade de um algoritmo - DevPleno

URL: https://devpleno.com/dica-como-saber-complexidade-de-um-algoritmo

> Nos últimos vídeos e na última live, comentei sobre o Codility. Ele tem uma característica de avaliar a complexidade do algoritmo que você respondeu. Neste...

Algoritmos

## Dica: Como saber a complexidade de um algoritmo

T
Por Tulio Faria • 10 de abril de 2017

[Algoritmos](/tag/algoritmos)

Nos últimos vídeos e na última live, comentei sobre o Codility. Ele tem uma característica de avaliar a complexidade do algoritmo que você respondeu. Neste vídeo, dou uma dica rápida de como avaliar e ter uma ideia da complexidade. Confira:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Como%20saber%20a%20complexidade%20de%20um%20algoritmo&url=https%3A%2F%2Fdevpleno.com%2Fdica-como-saber-complexidade-de-um-algoritmo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-como-saber-complexidade-de-um-algoritmo)

---

# Dica: Debounce - DevPleno

URL: https://devpleno.com/dica-debounce

> Debounce é uma técnica bastante útil para restringir o tempo entre a chamada de uma mesma função. Por exemplo, se um usuário clicar 6x em um botão em menos...

Javascript

## Dica: Debounce

T
Por Tulio Faria • 4 de abril de 2017

[Javascript](/tag/javascript)

Debounce é uma técnica bastante útil para restringir o tempo entre a chamada de uma mesma função. Por exemplo, se um usuário clicar 6x em um botão em menos de 2s, apenas a última vez será contada. Neste vídeo, construiremos uma forma genérica de controlar isso.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Debounce&url=https%3A%2F%2Fdevpleno.com%2Fdica-debounce) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-debounce)

---

# Dica: Debug de NodeJS no VS Code - DevPleno

URL: https://devpleno.com/dica-debug-de-nodejs-no-vs-code

> Neste dica, vamos ver como depurar nosso código NodeJS utilizando o VS Code. Confira o video: <div className=&#34;embedresponsive embedresponsive16by9&#34;   <ifra...

Javascript

## Dica: Debug de NodeJS no VS Code

T
Por Tulio Faria • 22 de março de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste dica, vamos ver como depurar nosso código NodeJS utilizando o VS Code.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), i[nscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre se e-mail para não perder as novidades. Deixe suas sugestões e dúvidas nos comentários. Abraços!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Debug%20de%20NodeJS%20no%20VS%20Code&url=https%3A%2F%2Fdevpleno.com%2Fdica-debug-de-nodejs-no-vs-code) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-debug-de-nodejs-no-vs-code)

---

# Dica: Debug NodeJS com Chrome DevTools - DevPleno

URL: https://devpleno.com/dica-debug-nodejs-com-chrome-devtools

> A dica de hoje é sobre como podemos fazer o debug dos nossos scripts em Node (de um script que fica rodando direto como o express e de um script simples) u...

Javascript

## Dica: Debug NodeJS com Chrome DevTools

T
Por Tulio Faria • 11 de setembro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

A dica de hoje é sobre como podemos fazer o debug dos nossos scripts em Node (de um script que fica rodando direto como o express e de um script simples) utilizando o chrome. Eu tenho em minha máquina um servidor em express e no meu shell eu vou rodar esse servidor:

node -- inspect server.js
Perceba que ele mostra um link:

Esse link eu vou copiar e colar no navegador. Com isso ele abre para mim o devTools do Chrome e eu posso ir em Source, por exemplo, apertar CTRL+P e colocar o nome do arquivo, no caso o meu se chama servser.js:

Agora eu quero que ele pare a execução quando passar no primeiro console.log:

É muito comum em algumas ferramentas como o visual studio fazer o debug dessa forma, setando um break point e quando o script for executar, ele vai parar nesse ponto que marcamos.

Agora vamos rodar nosso localhost:3000 e quando voltamos para o devtools, perceba que ele parou e nós conseguimos checar o que tem dentro do req, res:

Eu posso pedir para ele ir para a próxima linha ou mandar continuar o script utilizando os botões:

![(73aa926e-a947-4d9d-8c54-4f3920ba916b.png)

Vamos supor que eu queira saber o que vai sair em uma expressão, eu posso selecionar e passar o mouse em cima que ele mostra sendo executado. Isso é muito útil para achar alguma inconsistência no código.

Sempre que você for testar, principalmente código assíncrono, coloque um break point onde você quer que pare, principalmente para call back.

Outra forma que temos de depurar um código é depurar desde a primeira linha, para isso vou utilizar um algoritmo que já fizemos em outra aula:

node --inspect --debug-brk cyclic_rotation.js
Percebam que eu não tenho nada de assíncrono no meu algoritmo, mas mesmo assim ele deu uma URL para depurar:

Então vamos colocar essa URL no Chrome e ele já para na primeira linha do meu código executável. Vamos colocar um break point e dar um resume para ver o que acontece: Como é uma função executável ele mostra para mim algo muito semelhante ao teste de mesa que é executar passo a passo o algoritmo.

E eu posso também ir passando linha a linha apenas clicando no botão usado anteriormente e ele vai mostrar como está o valor que foi alterado.

Com isso nós conseguimos saber exatamente oque está acontecendo no nosso algoritmo, fazer a depuração do script de uma forma mais precisa, ainda mais quando é uma função pura porque conseguimos injetar os valores e ir testando passo a passo.

## Confira o video:

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma atualização.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Debug%20NodeJS%20com%20Chrome%20DevTools&url=https%3A%2F%2Fdevpleno.com%2Fdica-debug-nodejs-com-chrome-devtools) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-debug-nodejs-com-chrome-devtools)

---

# Dica e Algoritmo: XOR e Odd Occurences in Array - DevPleno

URL: https://devpleno.com/dica-e-algoritmo-xor-e-odd-occurences-array

> Neste vídeo você vai entender como melhorar a performance do algoritmo Odd Occurrences in Array com o operador XOR. Confira! Deixe suas dúvidas e sugestões...

Algoritmos

## Dica e Algoritmo: XOR e Odd Occurences in Array

T
Por Tulio Faria • 27 de março de 2017

[Algoritmos](/tag/algoritmos)

Neste vídeo você vai entender como melhorar a performance do algoritmo Odd Occurrences in Array com o operador XOR. Confira! Deixe suas dúvidas e sugestões nos comentários.

Não se esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno/), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Abraços!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%20e%20Algoritmo%3A%20XOR%20e%20Odd%20Occurences%20in%20Array&url=https%3A%2F%2Fdevpleno.com%2Fdica-e-algoritmo-xor-e-odd-occurences-array) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-e-algoritmo-xor-e-odd-occurences-array)

---

# Dica: ES6 - Destructuring Assignament - DevPleno

URL: https://devpleno.com/dica-es6-destructuring-assignament

> Nesta dica, comento sobre uma novidade que veio com o ES6: o Destructuring Assignament, que permite uma grande organização e aumento de legibilidade do cód...

Javascript

## Dica: ES6 - Destructuring Assignament

T
Por Tulio Faria • 30 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Nesta dica, comento sobre uma novidade que veio com o ES6: o Destructuring Assignament, que permite uma grande organização e aumento de legibilidade do código. Confira!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20ES6%20-%20Destructuring%20Assignament&url=https%3A%2F%2Fdevpleno.com%2Fdica-es6-destructuring-assignament) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-es6-destructuring-assignament)

---

# Redirecting to: /find

URL: https://devpleno.com/dica-find

Redirecting to: /find [Redirecting from /dica-find to /find](/find)

---

# Dica: Injeção de dependência com Destructuring Assignament - DevPleno

URL: https://devpleno.com/dica-injecao-de-dependencia-com-destructuring-assignament

> Uma maneira de injetar dependências, que permite uma organização ainda maior do código, é utilizando o Destructuring Assignament. Neste vídeo mostro como u...

Javascript

## Dica: Injeção de dependência com Destructuring Assignament

T
Por Tulio Faria • 7 de março de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Uma maneira de injetar dependências, que permite uma organização ainda maior do código, é utilizando o Destructuring Assignament. Neste vídeo mostro como utilizar as 2 técnicas.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Inje%C3%A7%C3%A3o%20de%20depend%C3%AAncia%20com%20Destructuring%20Assignament&url=https%3A%2F%2Fdevpleno.com%2Fdica-injecao-de-dependencia-com-destructuring-assignament) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-injecao-de-dependencia-com-destructuring-assignament)

---

# Dica: Injeção de Dependência no ReactJS - DevPleno

URL: https://devpleno.com/dica-injecao-de-dependencia-no-reactjs

> Injeção de dependência ajuda muito na testabilidade do código e de certa forma em aumentar a legibilidade do código. Veja como podemos implementar Injeção ...

Javascript

## Dica: Injeção de Dependência no ReactJS

T
Por Tulio Faria • 4 de abril de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[ReactJS](/tag/reactjs)

Injeção de dependência ajuda muito na testabilidade do código e de certa forma em aumentar a legibilidade do código. Veja como podemos implementar Injeção de dependências no ReactJS

Veja mais sobre injeção de dependências em [https://www.devpleno.com/injecao-de-dependencia/](https://www.devpleno.com/injecao-de-dependencia/) Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Inje%C3%A7%C3%A3o%20de%20Depend%C3%AAncia%20no%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Fdica-injecao-de-dependencia-no-reactjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-injecao-de-dependencia-no-reactjs)

---

# Redirecting to: /map

URL: https://devpleno.com/dica-map

Redirecting to: /map [Redirecting from /dica-map to /map](/map)

---

# Dica: Once n vezes - DevPleno

URL: https://devpleno.com/dica-n-vezes

> Neste vídeo. iremos implementar em Javascript uma função utilitária que permite uma função ser executada apenas uma vez (once) e também modificamos um pouc...

Javascript

## Dica: Once n vezes

T
Por Tulio Faria • 17 de abril de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste vídeo. iremos implementar em Javascript uma função utilitária que permite uma função ser executada apenas uma vez (once) e também modificamos um pouco este exemplo para que possa ser limitado a n-vezes.

Dependendo da regra de negócio, poderia ser utilizado para permitir que uma ação seja executada apenas x vezes.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Once%20n%20vezes&url=https%3A%2F%2Fdevpleno.com%2Fdica-n-vezes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-n-vezes)

---

# Dica: Self-Invoked Function (Self-invoking Function) - DevPleno

URL: https://devpleno.com/dica-self-invoked-function-self-invoking-function

> Selfinvoked Functions é uma técnica bastante interessante no Javascript, e pode resolver alguns problemas de conflito de contexto (que já estão sendo reduz...

Javascript

## Dica: Self-Invoked Function (Self-invoking Function)

T
Por Tulio Faria • 23 de março de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Self-invoked Functions é uma técnica bastante interessante no Javascript, e pode resolver alguns problemas de conflito de contexto (que já estão sendo reduzidos pelo ES6/ES7). Nesta dica, mostro o que é esta técnica e onde você pode utilizá-la.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno/), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Self-Invoked%20Function%20(Self-invoking%20Function)&url=https%3A%2F%2Fdevpleno.com%2Fdica-self-invoked-function-self-invoking-function) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdica-self-invoked-function-self-invoking-function)

---

# 3 dicas para NPM + 1 dica extra - DevPleno

URL: https://devpleno.com/dicas-paranpm

> Se você acompanha o DevPleno há algum tempo. deve ter percebido que eu utilizo bastante o learn, mas o repositório onde ficam esses módulos é o NPM. Esse r...

Javascript

## 3 dicas para NPM + 1 dica extra

T
Por Tulio Faria • 16 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Se você acompanha o DevPleno há algum tempo. deve ter percebido que eu utilizo bastante o learn, mas o repositório onde ficam esses módulos é o NPM. Esse repositório tem diversas funções interessantes para o nosso dia a dia, e é sobre algumas delas que vou abordar neste post. Confira:

#1 – Se você quiser instalar algum módulo em uma versão especifica, pode utilizar o @ depois do nome do módulo que irá instalar. Por exemplo, o Express está no 4.1.5, mas você quer instalar o 4.0.0, então basta fazer o seguinte:

npm install express@4.0.0
Uma das vantagens disso é em relação a compatibilidade. Caso você esteja utilizando um outro módulo, por exemplo, que por questão de compatibilidade precisa do express 4.0.0, poderia fazer isso facilmente apenas utilizando o @.

#2 – Você pode usar repo (repositório) para acessar o repositório do módulo e procurar as issues dele.

npm repo express
#3 – Você também pode usar home para ir direto ao site do módulo.

npm home express
Obviamente ele está utilizando informações do próprio NPM, ou seja, se a informação não existir nele, não é possível recuperar.

Extra – NPM Outdated

O NPM Outdated checa suas dependências e vê se algo pode ser atualizado. Por exemplo, como forçamos o express 4.0.0, ele irá mostrar que a atual é a 4.0.0, a melhor a ser utilizada é a 4.15.2 e a ultima também é a 4.15.2.

Ele pode ser bastante útil caso você tenha muitas dependências para fazer na ‘mão’, o que é muito trabalhoso, e isso te livra de todo esse trabalho.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=3%20dicas%20para%20NPM%20%2B%201%20dica%20extra&url=https%3A%2F%2Fdevpleno.com%2Fdicas-paranpm) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdicas-paranpm)

---

# Você precisar ter DOM para ser um bom profissional? - DevPleno

URL: https://devpleno.com/dom

> Já te contaram a mentira do Dom? Vou te explicar melhor. Uma coisa que eu sempre vejo as pessoas falando é “ah, Tulio, você tem o dom para aprender tecnolo...

Carreira

## Você precisar ter DOM para ser um bom profissional?

T
Por Tulio Faria • 6 de julho de 2017

[Carreira](/tag/carreira)

**Já te contaram a mentira do Dom?**

Vou te explicar melhor. Uma coisa que eu sempre vejo as pessoas falando é “ah, Tulio, você tem o dom para aprender tecnologias”. As pessoas se escondem atrás desse “dom”, mas o que é o dom?

Na verdade, eu considero isso uma grande mentira que as pessoas geralmente te contam quando você é novo e isso vem se arrastando com o tempo e pode demorar muito para aprendermos que isso não é uma verdade. A minha sorte é que meus pais não acreditam nesse tipo de coisa, então tudo que eu queria fazer eles deixavam, por exemplo, eu quero desenhar? Tudo bem, vamos desenhar e apoiavam aquilo. Eles me deixavam errar muito, afinal não é um dom que vai definir se você é bom ou não em uma coisa.

O que pode acontecer é que, dependendo da sua criação ou da sua afinidade com certas coisas, tem mais facilidade de aprender sobre elas. Como nunca fui barrado em aprender nada, isso me deixou mais maleável a testar, errar, testar e dar certo e isso me deixou com uma facilidade um pouco maior em aprender por não ter medo de errar.

Eu espero que você também não acredite em dom, que se alguém chegar e te perguntar, por exemplo, “você tem dom para música?” você responda “eu não tenho dom para música, mas tenho força de vontade aprender.”

Programação e tecnologia é a mesma coisa, temos que repetir exaustivamente para fazer algo bem feito com maestria. Então coloque na cabeça que não existe DOM! Obviamente existem pessoas brilhantes, mas a genética delas favoreceu, mas o dom sempre vem com a dedicação. A prática leva a perfeição.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Voc%C3%AA%20precisar%20ter%20DOM%20para%20ser%20um%20bom%20profissional%3F&url=https%3A%2F%2Fdevpleno.com%2Fdom) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdom)

---

# Dotenv e variáveis de ambiente no NodeJS - DevPleno

URL: https://devpleno.com/dotenv-e-variaveis-de-ambiente

> Hoje eu tenho duas dicas, como podemos configurar uma aplicação sem precisar alterar o código fonte. Essa é uma boa prática, apesar de muita gente ainda nã...

Javascript

## Dotenv e variáveis de ambiente no NodeJS

T
Por Tulio Faria • 23 de agosto de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje eu tenho duas dicas, como podemos configurar uma aplicação sem precisar alterar o código fonte. Essa é uma boa prática, apesar de muita gente ainda não usar, então quero reforçar o conceito de como podemos fazer isso. A ideia é que o sistema fique immutable e que a gente construa esse artefato no sistema e se colocarmos em uma máquina de desenvolvimento, ele vira desenvolvimento, em uma máquina de produção vai virar produção, isso baseado somente em variáveis de ambiente. Como pegamos uma variável de ambiente?

console.log(process.env.NODE_ENV)
Ao rodar, perceba que vai dar undefined, porém se fizermos:

NODE_ENV=production node test.js
vamos ter uma variável de ambiente production. Porém se rodar de novo, ele volta para undefined, então quando definimos essa variável ele carrega de forma automática qual banco conectar e qual usuário. Isso fica no ambiente e não mais na aplicação. Mas se toda vez que formos desenvolver tivermos que lembrar as informações, é bastante trabalhoso, correto? Então podemos utilizar um módulo que se chama Dotenv, onde criamos um arquivo com uma variável de ambiente que a gente quer e ele carrega automaticamente:

yarn add dotenv
Já no nosso script, vamos fazer o seguinte:

require('dotenv').config()
Assim carregamos o arquivo .env Agora vamos criar um arquivo na raiz do projeto chamado .env, nele vamos colocar o nome da variável que a gente quer, por exemplo:

NODE_ENV = tulio
Ao rodar novamente percebam que agora vai ser retornado ‘tulio’. A ideia é que, na máquina de desenvolvimento, você vai criar o arquivo .env com todas as variáveis que você precisa para rodar na máquina e quando você colocar no servidor, vão ser colocadas essas variáveis no ambiente e não mais no arquivo. Podemos também, se ele estiver em produção, evitar que ele acesse o ambiente de desenvolvimento:

require('dotenv').config()
if (process.env.NODE_ENV !== 'production') {
console.log('Desenvolvimento')
} else {
console.log('Produção')
}

// Retorno: Desenvolvimento
Quando começamos a utilizar essas técnicas, a nossa aplicação fica muito mais independente, rodando em qualquer lugar, basta que você informe qual a configuração de banco de dados, Mongo, SQL, etc e ela vai se moldar para cada ambiente.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dotenv%20e%20vari%C3%A1veis%20de%20ambiente%20no%20NodeJS&url=https%3A%2F%2Fdevpleno.com%2Fdotenv-e-variaveis-de-ambiente) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fdotenv-e-variaveis-de-ambiente)

---

# Redirecting to: /

URL: https://devpleno.com/empreendedorismo

Redirecting to: / [Redirecting from /empreendedorismo to /](/)

---

# 3 dicas para começar a empreender na área de software - DevPleno

URL: https://devpleno.com/empreender-na-area-de-software

> Hoje quero dar três dicas para você que está começando a empreender na área de software. Vou aproveitar uma dúvida e comentário do João Henrique, em um víd...

Carreira

## 3 dicas para começar a empreender na área de software

T
Por Tulio Faria • 16 de agosto de 2017

[Carreira](/tag/carreira)

Hoje quero dar três dicas para você que está começando a empreender na área de software. Vou aproveitar uma dúvida e comentário do João Henrique, em um vídeo nosso, dizendo que ele está começando na área, gosta de programar, está começando a empreender na área e qual dica eu daria a ele.

**Dica #1 – Comece simples**

Não tente pegar o maior sistema que você puder de primeira porque você não tem experiência. Eu aconselho a começar com um site com uma parte mais dinâmica, por exemplo, e vai aumentando gradativamente à medida que você for ganhando experiência. Isso é muito importante para que você consiga ir melhorando cada vez mais.

**Dica #2 – Tenha um portfólio**

Se você não tem nada para mostrar, eu aconselho que faça um projeto social. Vá em um asilo/creche e crie um projeto para ajudar alguma dessas instituições. O portfólio vai te mostrar duas coisas: a primeira é mostrar para um potencial cliente e a segunda é aprender com um projeto em produção, além de ajudar outras pessoas, claro.

**Dica #3 – Aprenda a vender**

Se você quer realmente continuar nessa carreira, aprenda a vender, foi uma das melhores coisas que eu aprendi. Estude muito como fazer marketing. Já cheguei a vender sistemas de R$150 mil porque eu aprendi a vender.

Na primeira venda tente tirar todas as lições disso, o que você aprendeu e o que você errou. Eu faço isso em toda reunião que faço para vender algo.

**Dica #4 (bônus) – Negociar é deixar as duas partes alinhadas**

Negociação não é pra sugar a outra parte e sim para deixar as duas partes alinhadas. Você não tem que explorar o seu cliente, mas sim alinhar o valor cobrado. Não é aquilo de baixar R$5,00 ou R$1.000,00, negociação de verdade é quando as duas partes saem de um contrato muito felizes por terem feito um bom negócio.

Vender é algo necessário para qualquer empresa e negociação é a base que você tem para alinhar as expectativas. Você tem que estar cobrando um valor justo e seu cliente deve sair com a sensação que você está pagando um valor justo.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=3%20dicas%20para%20come%C3%A7ar%20a%20empreender%20na%20%C3%A1rea%20de%20software&url=https%3A%2F%2Fdevpleno.com%2Fempreender-na-area-de-software) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fempreender-na-area-de-software)

---

# Ensinar algo a alguém todos os dias - DevPleno

URL: https://devpleno.com/ensinar-algo

> Você já ensinou algo a alguém hoje? Quando estamos na faculdade, por exemplo, as pessoas tendem a nos perguntar dicas sobre de computação/informática ou pe...

Carreira

## Ensinar algo a alguém todos os dias

T
Por Tulio Faria • 1 de agosto de 2017

[Carreira](/tag/carreira)

Você já ensinou algo a alguém hoje? Quando estamos na faculdade, por exemplo, as pessoas tendem a nos perguntar dicas sobre de computação/informática ou pedir ajuda em algumas situações como configurar o roteador, e nós algumas vezes pensamos “Esse cara acha que eu sou o que? Sou analista,mas não mexo com rede”.

A dica de hoje é fazer exatamente o contrário disso. Uma das coisas que venho tentando aplicar na minha vida é que se as pessoas me perguntam sobre isso, eu falo algo como “eu não sou especialista em rede, mas, se você quiser, eu tento te ajudar”.

Quando você está ajudando ou ensinando uma pessoa, mesmo sem querer nada em troca, a gente gera algo bem interessante que é uma sensação de gratidão nessa pessoa com você. Isso gera uma positividade muito boa para a sua carreira e vida.

O detalhe é que a pessoa se sente em débito com você, sempre que ela precisar ou lembrar de alguém, ela vai lembrar de você. É muito legal se você puder ensinar as pessoas ou ajudar pelo menos uma vez por dia, por exemplo “hoje eu consigo ensinar alguém a programar tal coisa”, “eu consigo ensinar a minha mãe a mexer no controle remoto” e por aí vai. Toda vez que você ensina algo, está praticando o que falamos de doar conhecimento aos outros e com certeza você vai receber muito mais que você doa.

A conclusão de hoje é sempre doe mais do que você pretende receber, ajude as pessoas a vencer alguma barreira. Eu tenho certeza que isso vai gerar muitos frutos legais para a sua carreira e pra sua vida pessoal, pois as pessoas não vão lembrar de você apenas com coisas vinculadas a dinheiro e profissional, quando tiramos o olho do dinheiro ele aparece no bolso. Quando você pratica gerar valor às pessoas, o dinheiro vem por consequência.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Ensinar%20algo%20a%20algu%C3%A9m%20todos%20os%20dias&url=https%3A%2F%2Fdevpleno.com%2Fensinar-algo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fensinar-algo)

---

# Ensino Formal ou Cursos Livres - Por qual optar? - DevPleno

URL: https://devpleno.com/ensino-formal-ou-cursos-livres

> Que tipo de ensino e de novos estudos devemos buscar: o ensino formaL (curso técnico, faculdade, pós graduação, etc) ou cursos livres (cursos pela internet...

Carreira

## Ensino Formal ou Cursos Livres - Por qual optar?

T
Por Tulio Faria • 13 de julho de 2017

[Carreira](/tag/carreira)

Que tipo de ensino e de novos estudos devemos buscar: o ensino formaL (curso técnico, faculdade, pós graduação, etc) ou cursos livres (cursos pela internet ou presenciais sem vínculo com o MEC ou CAPES)?

Hoje sou mestre em Sistema de Informações pela USP, ou seja, fui pelo ensino formal também, mas tenho muito conhecimento através de cursos livres. Terminei minha graduação e sempre pesquisei e estudei muito por cursos livres, conhecimento gratuito, livros, etc, mas eu precisava ser desafiado e sair da minha zona de conforto, por isso acabei indo para o Mestrado, podendo também contribuir um pouco com a sociedade por meio do meu projeto.

O grande detalhe que costumo analisar é o custo-benefício. Se o que eu preciso necessariamente vai ser suprido com o curso. Por exemplo, eu quero aprender a fazer deploy de sistemas de forma contínua, mas não existe uma faculdade disso, então preciso fazer um curso livre. Se quero aprender um pouco mais sobre o meio acadêmico e fugir um pouco do que estou acostumado, então vou para o formal.

Depende muito de qual o seu objetivo ou necessidade. Muitas vezes você vai precisar do título (mesmo sabendo que às vezes não quer dizer nada). Se for lecionar para ensino superior, por exemplo, você precisa de no mínimo um mestrado (em instituições públicas, precisa de doutorado), então sua titulação também depende do seu objetivo. Se ele precisa de titulação, busque uma formação que te dê isso, mas se não precisa e onde você for atuar não exige, vá em cursos livres e prove na prática. Tudo que fiz até hoje não precisei de titulação para mostrar apesar de tê-la.

É importante ressaltar que geralmente o ensino formal é um pouco mais teórico que o ensino livre, pois um foca no conhecimento geral enquanto o outro em pontos específicos.

Portanto, a dica é analisar o custo-benefício. O que você precisa no momento? Qual o seu objetivo para o futuro?

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Ensino%20Formal%20ou%20Cursos%20Livres%20-%20Por%20qual%20optar%3F&url=https%3A%2F%2Fdevpleno.com%2Fensino-formal-ou-cursos-livres) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fensino-formal-ou-cursos-livres)

---

# Entenda a importância de cursos para desenvolvedores - DevPleno

URL: https://devpleno.com/entenda-a-importancia-de-cursos-para-desenvolvedores

> Você está pronto para atuar em uma grande empresa? O mercado de tecnologia está crescendo cada vez mais, e para conseguir se destacar no cenário atual, é p...

Carreira

## Entenda a importância de cursos para desenvolvedores

T
Por Tulio Faria • 7 de julho de 2017

[Carreira](/tag/carreira)

Você está pronto para atuar em uma grande empresa? O mercado de tecnologia está crescendo cada vez mais, e para conseguir se destacar no cenário atual, é preciso desenvolver habilidades essenciais à profissão. A melhor maneira é se capacitando por meio de cursos para desenvolvedores.

Descubra as principais vantagens de investir em sua capacitação nesta área!

## Empregabilidade

Empregabilidade é o conjunto de técnicas e habilidades que um profissional precisa ter para ser desejado pelas empresas. Ao estudar e aprender novas técnicas ou aprimorar as já existentes, você começa a ser disputado pelas empresas e pode até mesmo ser chamado para colaborar naquela desenvolvedora dos seus [sonhos](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&#x26;utm_campaign=rc_blogpost).

Já pensou poder contribuir com o próximo UBER, Airbnb, Netflix ou Angry Birds?

## Oportunidades

Essa é uma vantagem que anda de mãos dadas com a empregabilidade. Quanto maior a sua empregabilidade, mais portas se abrirão. Capacitação significa oportunidades melhores e salários maiores. A qualidade das oportunidades é proporcional à qualidade dos profissionais.

## Crescimento

Você é “o cara” da programação e ama a empresa em que trabalha? Neste caso é ainda mais importante fazer um curso. Apenas desenvolvendo novas habilidades é que você poderá crescer dentro da empresa e ser promovido.

## Networking

É possível crescer profissionalmente sem contar com o apoio de ninguém? Sim. Porém, este é o caminho mais difícil. Com uma boa rede de networking os resultados aparecem mais rapidamente e de maneira mais fácil.

Ao se capacitar você faz contato com pessoas que estão na mesma área. Essa interação – que pode ser tanto presencial quanto online (em fóruns e grupos) – ampliará sua visão da profissão.

Além disso, o colega do outro lado do computador pode ter uma ideia de negócio com você ou conhecer uma empresa que está contratando pessoas com seu perfil. É possível até mesmo que ele seja dono de uma empresa de informática com vagas abertas.

O [network](https://www.devpleno.com/networking?utm_source=blog&#x26;utm_campaign=rc_blogpost) é essencial em qualquer área e no campo de desenvolvimento não é diferente. Quanto mais pessoas o conhecerem e souberem de suas habilidades, melhor.

## Credibilidade

Ter credibilidade significa ser respeitado em sua área de atuação e, com o tempo e o acúmulo de conhecimentos, é possível tornar-se até mesmo uma referência. Para que isso aconteça, conviva e aprenda com quem sabe. Para isso, escolha cursos com grandes nomes da área.

## Planejamento

É imprescindível ter um plano de carreira. Comece definindo quais são seus pontos fracos e fortes. Um curso de capacitação ajudará a avaliar seu atual nível de conhecimento e compará-lo a outros profissionais da sua área. Estude para desenvolver seus pontos fracos e aprimorar os fortes.

## Melhores cursos para desenvolvedores

Existem algumas capacidades que todo desenvolvedor precisa ter e é nisso que você deve investir sua energia e dinheiro. As habilidades básicas sempre podem ser aprimoradas, por isso é importante não se acomodar.

Além disso, fique atento também às tendências do mercado. Identifique quais são as competências que estão em alta e escolha cursos para que possa aprendê-las.

Veja algumas tendências atuais de desenvolvimento e programação:

### ReactJS

ReactJS é uma biblioteca JavaScrips do Facebook para criar interfaces de usuários. O foco do React, ao contrário de outras bibliotecas, é a view, deixando de lado os demais componentes de uma aplicação front-end. O ReactJS estrutura a representação do HTML em objetos.

Não se pode negar que o ReactJS está em alta, especialmente por ter sido desenvolvido pelo Facebook e Instagram. Porém, mais do que uma moda, ele veio para ficar.

A novidade facilita a escrita em Javascript, é eficiente, excelente para SEO, tem suporte da equipe do Facebook (apesar de ser opensource) e funciona muito bem em aplicativos mobile.

### Firebase

Por falar em mobile, não dá para não mencionar o Firebase como uma ferramenta em alta. Trata-se de uma plataforma móvel do Google que ajuda o desenvolvedor a criar aplicativos, aumentar a base de usuários e obter mais conversões.

Com APIs intuitivas em um único SDK, o Firebase permite a criação de apps sem a necessidade de infraestrutura complexa, facilitando o ensino e a aprendizagem de desenvolvimento. Assim, dê preferência para cursos que usem esta ferramenta. Há uma grande chance de você continuar utilizando-a nos desafios futuros.

### Integração contínua

Os desenvolvedores estão se unindo cada vez mais. Aprender a trabalhar em integração contínua é fundamental para sua carreira. No “Continuous Integration” os membros da equipe integram seu trabalho com frequência.

Nesse caso, “integração” é uma fase do desenvolvimento de software em que todo o trabalho do time é agregado, validado e testado. Desta forma, é possível identificar rapidamente possíveis falhas. A técnica reduz o prazo para a entrada em operação do aplicativo que está sendo projetado.

### Continous-deployment

Segurança nunca é demais. Por isso outra prática em alta é a realização de continuous deployment — processo de inserção de um novo código em um brench ou trunk. A técnica permite testar rapidamente um código por meio de testes automatizados. Isso pode acelerar o desenvolvimento do aplicativo.

### Redux

Por fim, mas não menos importante, vale a pena considerar o aprendizado em Redux, uma nova forma de controle e organização do estado da aplicação. O Redux oferece ganhos de qualidade e estabilidade e saber usá-lo é um grande diferencial para qualquer profissional.

Cada capacitação é como evoluir um nível e pode lhe deixar mais perto do seu sonho.

O ideal é que os cursos tenham aulas práticas para que você possa colocar a mão na massa. O DevPleno oferece um excelente curso de ReactJS para que você possa se aprimorar e manter-se bem qualificado no mercado de trabalho. Conheça o [devReactJS](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Entenda%20a%20import%C3%A2ncia%20de%20cursos%20para%20desenvolvedores&url=https%3A%2F%2Fdevpleno.com%2Fentenda-a-importancia-de-cursos-para-desenvolvedores) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fentenda-a-importancia-de-cursos-para-desenvolvedores)

---

# Entenda sobre CORS - Cross Origin Resource Sharing - DevPleno

URL: https://devpleno.com/entenda-sobre-cors-cross-origin-resource-sharing

> Hoje vou falar sobre um assunto que é bastante interessante: CORS (ou Cross Origin Resourse Sharing). O que isso quer dizer? É como dois servidores ou dois...

Fundamentos

## Entenda sobre CORS - Cross Origin Resource Sharing

T
Por Tulio Faria • 6 de setembro de 2017

[Fundamentos](/tag/fundamentos)

Hoje vou falar sobre um assunto que é bastante interessante: CORS (ou Cross Origin Resourse Sharing).

O que isso quer dizer?

É como dois servidores ou dois domínios diferentes poderiam compartilhar um recurso. Imagine o seguinte: nós temos o site do DevPleno e o tuliofaria.net, se eu fizer uma requisição no DevPleno, especificamente utilizando o AJAX, que tenta fazer uma requisição de dados do tuliofaria.net, o servidor do tuliofaria.net corre um risco de ter uma forma de exploração.

Imagine o site dos Correios, se tivéssemos que fazer isso direto com o CEP, as pessoas não sairiam do site delas e faríamos as requisições todas do site dos Correios, isso sobrecarregaria o site, além de ser uma falha de segurança porque podemos fazer algo nesse script para fazer um exploid e mandar para outro servidor. Um exemplo disso é onde você coloca o nome em uma aplicação, é possível colocar um script ali que quando o administrador for listar todos os nomes, tenha um script injetado que mande os dados para outro servidor. Por esse motivo não é possível fazer requisições para outro domínio a não ser que esse domínio permita isso.

Algumas operações falamos que são ‘pre-fligth’, isso quer dizer que antes dela executar é mandado uma requisição chamada ‘option’, nisso ele pergunta algo como “nesse CEP, quais são as opções que eu tenho nesse servidor?” e o servidor vai responder essas opções, como um GET, POST ou ditar o domínio. Caso ele responder qual o domínio, o próprio navegador não vai fazer a outra requisição, por exemplo, caso tenhamos feito um post para salvar algum dado no tuliofaria.net, o próprio navegador manda um Options, checa esse retorno e aí sim faz o post se ele puder.

CORS nada mais é do que esse bloqueio, ou como a gente controla esses recursos, então durante essa troca de informações temos algumas trocas de cabeçalhos que vão dizer se esse servidor permite outro servidor acessar ou manipular os dados.

É sempre bom tomarmos cuidado com isso porque vamos supor que se a gente testar nossa API no postman, por exemplo, ele não tem problema de CORS, já que ele é uma aplicação stand-alone e não uma página estática.

Algumas coisas que aconteceram conosco aqui na empresa foi colocar sistemas com domínios diferentes mas acessando a mesma API, por exemplo. O desafio era controlar o CORS para saber se esse domínio tinha acesso ou não. Esse é mais um conceito da arquitetura WEB.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Entenda%20sobre%20CORS%20-%20Cross%20Origin%20Resource%20Sharing&url=https%3A%2F%2Fdevpleno.com%2Fentenda-sobre-cors-cross-origin-resource-sharing) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fentenda-sobre-cors-cross-origin-resource-sharing)

---

# DevPleno Entrevista - Carlos Drury e Thiago Coelho - DevPleno

URL: https://devpleno.com/entrevista-carlos-drury-e-thiago-coelho

> Carlos Drury e Thiago Coelho fazem parte do GDG Vale da Eletrônica. Essa entrevista aconteceu durante um evento organizado por eles no Vale da Eletrônica, ...

Carreira

## DevPleno Entrevista - Carlos Drury e Thiago Coelho

T
Por Tulio Faria • 3 de agosto de 2017

[Carreira](/tag/carreira)

Carlos Drury e Thiago Coelho fazem parte do GDG Vale da Eletrônica. Essa entrevista aconteceu durante um evento organizado por eles no Vale da Eletrônica, em Santa Rita do Sapucaí.

O Carlos é desenvolvedor JavaScript e atualmente trabalha no INATEL, em um projeto da Ericsson, uma das empresas que o INATEL presta serviço.

O Thiago é especialista em JavaScript e trabalha no INATEL com desenvolvimento WEB. Tem experiência de mais de 10 anos em São Paulo e hoje atua em um projeto chamado OSS da Ericcsson.

O Vale da Eletrônica é uma região que tem muita empresa tecnológica que atende clientes gigantescos lá fora e em projetos totalmente distintos, e o mais bacana é que não é em um grande centro, então temos uma certa facilidade de ter esses eventos contando com gente que tem atuação internacional e de grande porte.

O que é o GDG (Grupo de Desenvolvedores Google) em si de maneira geral?

**Carlos Drury**: “O GDG surge através de uma comunidade de desenvolvedores dentro de uma localidade, geralmente são desenvolvedores que têm interesse em difundir conhecimento ou aumentar seu network, com isso o Google libera algum material e suporte para esses grupos, onde podemos ter esses materiais para ministrar palestras e convidar alguns palestrantes. Lembrando que o GDG é aberto para todos.”

Existem outros GDG’s espalhados, eu gostaria de saber como uma pessoa pode participar de um GDG específico, se existe uma formalização do seu membro e quais as desvantagens de participar do GDG como um participante comum?

**Carlos Drury**: “Uma pessoa que quer se envolver com o GDG pode primeiramente ir no site do Google de diretórios de group developers tool e lá ela consegue encontrar um GDG mais próximo. O benefício para a pessoa que participa do GDG é a forma de compartilhar conhecimento, o GDG não está aqui para ganhar dinheiro, nem promover uma pessoa e sim para ajudar projetos.”

Uma coisa que eu queria ressaltar é toda vez que eu participo de um evento eu aprendo até mais do que eu ensino ou compartilho. Toda vez que me preparo para um evento, a minha preparação é um estudo muito grande. Como vocês estão integrados em vários projetos grandes e têm a qualidade de vida do desenvolvedor em um lugar que não é em um grande centro, o crescimento demora um pouco para chegar, porém com uma vantagem que economizamos tempo (em 10 minutos estamos na academia, em cidades vizinhas estamos a vinte minutos), então se você fosse dar uma dica de carreira, independente se é de cidade grande ou em uma cidade do interior, qual seria?

**Carlos Drury**: “Minha primeira dica é a pessoa ser pró-ativa, procurar saber sobre assuntos que interessam, tecnologias que ela quer aprender. Uma segunda indiscutivelmente é o Inglês, hoje é fundamental para se comunicar com pessoas do mundo inteiro e até mesmo entender novas ferramentas disponíveis no mercado. O mais importante para mim, para conseguir o emprego que tive hoje foi o intercâmbio.”

**Thiago Coelho**: “Como tinha dito antes, eu vim de São Paulo, sou formado pela FAI, tenho cursos técnicos em Pouso Alegre, minha paixão por desenvolvimento começou no SENAI e no IMPETTECC que foi onde eu tive o primeiro contato com tecnologia em si, quando eu comecei a fazer faculdade, o mundo era Desktop e JAVA, nesse momento eu estava começando a aprender um pouco de PHP, HTML e JavaScript, na época eu enxerguei um nicho muito grande nessas tecnologias. Trabalhei na faculdade por 4 anos na parte de desenvolvimento WEB, nessa época eu decidi ir para São Paulo pelo fator oportunidade. Mas como você disse, hoje a vida no interior tem uma qualidade de vida muito melhor, por isso eu voltei. Agora em termo de carreira, uma dica que eu posso dar para as pessoas é o Inglês, no meu caso para entrar na INATEL eu deveria ter o inglês, o que me salvou foi o JavaScript, meu conhecimento é avançado em JavaScript, mas não sou muito avançado em inglês.”

Para complementar uma informação, estávamos conversando anteriormente, o inglês é o que mata, porque a gente acha que tem o inglês, mas quando está em uma chamada onde tem um indiano, um alemão e um argentino é muito complicado conversar com o pessoal. Então o inglês as vezes atrapalha a gente a conseguir algo melhor na carreira. Eu tive o mesmo teto que o Thiago teve, os clientes que eu tinha cheguei no meu limite de testar e enfrentar desafios, foi quando eu comecei a tentar coisas fora e eu não sabia inglês, o que me salvou também foi o conhecimento técnico. Enfim, Obrigado pela participação de vocês e por me receberem, sempre que puder eu vou convidar vocês para compartilhar conhecimento porque é algo muito válido.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=DevPleno%20Entrevista%20-%20Carlos%20Drury%20e%20Thiago%20Coelho&url=https%3A%2F%2Fdevpleno.com%2Fentrevista-carlos-drury-e-thiago-coelho) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fentrevista-carlos-drury-e-thiago-coelho)

---

# DevPleno Entrevista - Edy Segura - DevPleno

URL: https://devpleno.com/entrevista-com-edy-segura

> Edy Segura é professor da graduação da UNIVAS e da pósgraduação do INATEL e também trabalha com desenvolvimento de software, além de ser um grande amigo me...

Carreira

## DevPleno Entrevista - Edy Segura

T
Por Tulio Faria • 3 de agosto de 2017

[Carreira](/tag/carreira)

Edy Segura é professor da graduação da UNIVAS e da pós-graduação do INATEL e também trabalha com desenvolvimento de software, além de ser um grande amigo meu.

Uma das coisas que nós compartilhamos é que você é uma das poucas pessoas que, assim como eu, tem uma formação completa, ou seja, começamos juntos no técnico, fizemos uma graduação e temos uma pós graduação também, mas eu gostaria de saber do início, o que foi o curso técnico para você e o que ele influenciou na sua carreira?

“Ele foi a porta de entrada, até então nós só mexíamos em casa, tentando desenvolver algo, montando e desmontando computadores e com isso eu senti que era aquilo que eu queria fazer, então pesquisei e descobri o curso técnico que nós dois fizemos, cheguei para o meu pai e pedi o que chamamos de “paitrocinio”. Eu já trabalhava com formatação e montagem de computadores mas gostaria de saber o que mais dava pra fazer com eles. Isso abriu portas para podermos desenvolver.”

Uma coisa muito interessante é que começamos a programar WEB no curso técnico, no meu caso estágio do técnico e do Edy já na graduação. Nós tocavamos um provedor de internet só com estagiário e lá conseguimos nos “destravar”, ele permitiu que entrássemos realmente na área e na graduação sem medo. Conte pra gente com que tipo de projeto você lida em linhas gerais.

“Hoje eu sou desenvolvedor FullStack Sênior no INATEL. Desenvolvemos soluções de mídia, em vários projetos de IPTV, OTT, soluções como Netflix que foram projetos legais onde trabalhamos para fora do país. Hoje trabalho com soluções para telecomunicações. Tem um misto de tecnologias bem interessante.”

Há uma diferença dos profissionais brasileiros e os estrangeiros, não só americanos, mas alemães entre outros. Você sente essa diferença? O brasileiro tem uma vantagem ou desvantagem em relação ao pessoal de fora?

“O brasileiro tem uma dinâmica, a gente se mistura, corre atrás, quando recebemos uma tarefa queremos resolver. Lá fora, o que eu vejo em alguns perfis de outros países é, por exemplo, eles pedem para fazer X, e se tem algo que saiu desse X, os profissionais não fazem ou ficam travados. Já nós, baseado nos brasileiros que eu já trabalhei, se travou em algum lugar, vamos querer resolver.”

Eu percebo isso também, faço bastante projeto fora e da pra perceber muito que o pessoal é mais objetivo, se ele é contratado para fazer X, ele não faz X+1. Se você fosse dar uma dica de carreira, analisando o que você fez, ou avaliando o que as pessoas fizeram, o que você diria a elas?

“Principalmente para nossa área é fundamental o Inglês, eu me arrependo por não ter dado importância cedo para o inglês, tive que sofrer um pouco com isso e perdi algumas oportunidades, mas é fundamental, já que é a língua internacional da tecnologia. Quando você aprende o inglês abre portas de tal maneira que você se liberta para pegar conteúdos gratuitos de qualidade na internet. Em projetos open-source, existe gente de todas as nacionalidades, então minha dica de carreira número um nessa área é o inglês.”

E sobre tecnologia, o que você acha que o pessoal deveria estar antenado para 2017?

“Eu acredito que o JavaScript com certeza para quem está começando vai ajudar muito, porque mesmo que o projeto não é focado em JavaScript o ferramentario é feito em JavaScript. Outra linguagem que está há bastante tempo e não vai sair tão cedo é o Java, é uma linguagem standard, que em algum momento você vai ter contato.”

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=DevPleno%20Entrevista%20-%20Edy%20Segura&url=https%3A%2F%2Fdevpleno.com%2Fentrevista-com-edy-segura) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fentrevista-com-edy-segura)

---

# Javascript - ES6 Default Parameters - DevPleno

URL: https://devpleno.com/es6-default-parameters

> Hoje vou falar um pouquinho de JavaScript, mais especificamente sobre como podemos fazer o parâmetro padrão para uma função e as alternativas que a gente t...

Javascript

## Javascript - ES6 Default Parameters

T
Por Tulio Faria • 10 de outubro de 2017

*

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje vou falar um pouquinho de JavaScript, mais especificamente sobre como podemos fazer o parâmetro padrão para uma função e as alternativas que a gente tem atualmente com ES6 para esse tipo de atividade.

O que é um parâmetro padrão?

Vamos supor que temos uma função aplicarImposto, um valor e o quanto de imposto que queremos aplicar para esse valor:

function aplicarImposto(valor, imposto) {
return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))
Então estamos aplicando o imposto nesse valor. Agora vamos supor que eu não quero deixar o imposto ser obrigatório, deixando um valor padrão para ele:

function aplicarImposto(valor, imposto) {
console.log(imposto)

return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))
Ao retornarmos apenas isso vai ser retornado NaN (not a number). Isso acontece porque se tentarmos checar o imposto como boolean, sabemos que ele é um falsy por ser undefined. Para corrigir isso, podemos fazer o seguinte:

function aplicarImposto(valor, imposto) {
Imposto = imposto || 0.07

return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))
Se rodarmos novamente, temos o 7% em cima do 200. Mas temos um outro problema. Vamos supor que eu não queira aplicar um imposto (por algum milagre o produto não cobre imposto):*

console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))

console.log(aplicarImposto(300, 0))
Repare que ele retorna 321 ao invés de 300, mesmo colocando 0 de imposto. Isso acontece porque checamos **Imposto = imposto || 0.07** como falsy, e como zero é false, ele retorna o imposto. Poderíamos contornar isso checando se o tipo da variável não é uma undefined:

Imposto = typeof imposto === 'undefined' ? 0.07 : imposto
Ainda podemos fazer de uma outra forma, com o ES6:

function aplicarImpostES6(valor, imposto = 0.07) {
return valor + valor * imposto
}

console.log(aplicarImpostoES6(100, 0.1))

console.log(aplicarImpostoES6(200))

console.log(aplicarImpostoES6(300, 0))
Com isso fica um pouco mais simples, porém podemos ir um além. Vamos supor que eu tenha um adicional, posso colocar esse adicional passando um valor, ou ele é um valor vezes o imposto mais porcentagem:

function aplicarImpostES6(
valor,
imposto = 0.07,
adicional = valor * (imposto + 0.1)
) {
return valor + valor * imposto + adicional
}

console.log(aplicarImpostoES6(100, 0.1, 0))

console.log(aplicarImpostoES6(200))

console.log(aplicarImpostoES6(300, 0, 0))
No primeiro e último setei adicional como 0, então apenas no 200 ele vai aplicar os 10% além dos 7% já colocados antes. Essas são possibilidades interessantes de utilizar o default parameters no ES6, isso aumenta muito as possibilidades no nosso código.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Javascript%20-%20ES6%20Default%20Parameters&url=https%3A%2F%2Fdevpleno.com%2Fes6-default-parameters) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fes6-default-parameters)

---

# ES7 Array Includes - DevPleno

URL: https://devpleno.com/es7-array-includes

> Na dica de hoje, quero falar um pouco sobre o ES7 e uma funcionalidade que foi adicionada ao vetor. Primeiramente vou mostrar como fazemos comumente em ES6...

Javascript

## ES7 Array Includes

T
Por Tulio Faria • 10 de outubro de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Na dica de hoje, quero falar um pouco sobre o ES7 e uma funcionalidade que foi adicionada ao vetor. Primeiramente vou mostrar como fazemos comumente em ES6 e ES5, seguido de como podemos começar a fazer no ES7 citando sua vantagem. Vou criar um vetor:

const nums = [1, 2, 3, 4]
Se quiséssemos checar se um valor está ou não dentro desse vetor, faríamos normalmente, checaríamos se o índice não é -1:

console.log(nums.indexOf(4) != -1)
Com isso, quando ele não encontrar, vai ser retornado -1. O problema do indexOf falha quando tentamos buscar por NaN (not a number). Já com o includes, é possível checar e buscar dentro dele se temos o valor:

console.log(nums.includes(NaN))
Com isso, conseguimos buscar o NaN de uma forma mais coesa. Outra coisa que ganhamos com isso é que o nosso código fica mais legível, já que não fazemos mais “gambiarra”, afinal estamos apenas checando se ele inclui ou não, isso de maneira funcional.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ES7%20Array%20Includes&url=https%3A%2F%2Fdevpleno.com%2Fes7-array-includes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fes7-array-includes)

---

# Escopos e Closures - NodeJS Primeiros Passos - DevPleno

URL: https://devpleno.com/escopos-e-closures

> Entender Escopos e Closures do JavaScript é muito importante para conseguir avançar no NodeJS. Primeiramente tenho um diretório criado com nossos exemplos....

Javascript

## Escopos e Closures - NodeJS Primeiros Passos

T
Por Tulio Faria • 25 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Entender Escopos e Closures do JavaScript é muito importante para conseguir avançar no NodeJS. Primeiramente tenho um diretório criado com nossos exemplos. Vou criar um arquivo novo e mostrar um exemplo básico:

var a = 10

console.log(a)
ou simplesmente:

a = 10

console.log(a)
Perceba que tem apenas uma declaração de variável e o console.log para fazer a saída dela, ou seja, escrever a variável no console. Se rodarmos este script, teremos o retorno 10. Esse tipo de variável está sendo criada no escopo Global, mas o que é interessante nisso? Se eu fizer um function de incrementação a ela, terei um segundo escopo.

var a = 10

function inc() {
a++
}

inc()

console.log(a)
Esse segundo escopo consegue enxergar o escopo de fora. Podemos manipular as variáveis do lado de fora. Embora pareça vantagem, em alguns momentos pode atrapalhar o escopo principal. Logo acima, fizemos uma versão sem a variável var. Quando não colocamos o var, não travamos o escopo dela.

var a = 10

function inc() {
a++

b = 11
}

inc()

console.log(a, b)
Se fizermos como no exemplo acima, o segundo escopo já morreu, mas mesmo assim vai sair o valor de b, pois conseguimos escrever o b fora do escopo definido a ele. Então, quando criamos arquivos JavaScript que fazem esse tipo de coisa, estamos sujando o escopo global, e isso não é algo que desejamos fazer.

**Por que?** Vamos supor que exista um outro trecho de código que dependesse desse b, então a função ‘inc’ estaria alterando essa variável que está no contexto global podendo alterar o comportamento do código, isso para achar bug é extremamente difícil.

**O que podemos fazer para isso não acontecer?** Uma das coisas que podemos utilizar é guardar a variável sendo válida apenas dentro do escopo, utilizando o var, por exemplo:

function inc() {
a++

var b = 11
}
Com isso, travamos a variável apenas para o escopo definido. Temos um tipo de escopo que chamamos de Self involking function, onde temos um parenteses e colocamos uma função anônima dentro.

;(function () {
var a,
b = 1

console.log(1)
})()
Perceba que existe um abrir e fechar parênteses no fim, assim, estamos ‘chamando’ a função. Sem isso, nada acontece.

**Qual a vantagem de fazermos códigos dentro de uma Self Involking function?** Tudo que fizer lá dentro, como var a, b = 1, não estará sujando o escopo global, além disso, caso eu queira alterar o escopo dentro não consiguirá, as únicas que conseguem são as que estiverem dentro do self involking. Uma outra coisa interessante no JavaScript é que podemos fazer é a seguinte:

;(function () {
var a = 10

function inc() {
a++
}

inc()

console.log(a)
})()
Assim o escopo é realmente isolado. Note que o escopo filho (a++) busca o valor do escopos pai. Isso nos permite fazer, por exemplo, um contador tentando imitar um comportamento de singleton, ou seja, mantendo uma função só de uma classe. Como não temos classe, podemos simular algo semelhante.

var conta = (function() {

var contador = 0;

return function(){
contador++; console.log(contador);
}
}();

conta();

conta();

conta();
Pegamos essa função e jogamos dentro de uma variável.

**O que aconteceu ali?** A var ‘conta’ vai receber a self invoking function, que retorna automaticamente uma outra function, e como ela está dentro do escopo, é possível acessar o escopo pai. O javaScript mantém esse escopo mesmo quando a função deixou de ser executada, e então temos um comportamento parecido com o singleton. Quando uma função tem acesso a uma variável do escopo pai mesmo depois que acabou de ser executada, chamamos de Closer. Mais um exemplo:

var conta = (function() {
var contador = 0;

return {
contar = function(){
contador++;
},
out: function(){
console.log(contador);
}
}
}();

conta.contar();

conta.out();

conta.contar();

conta.out();
Complicando um pouco mais, podemos fazer essa Self Invoking function retornar um objeto com duas funções dentro. Então ele contou a primeira, deu um out, contou a segunda e deu outro out.

Podemos fazer algumas composições e organizações de código muito interessantes apenas utilizando esse tipo de construção. Confira a explicação em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Escopos%20e%20Closures%20-%20NodeJS%20Primeiros%20Passos&url=https%3A%2F%2Fdevpleno.com%2Fescopos-e-closures) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fescopos-e-closures)

---

# Estudar 1 hora por dia ou 8 horas no sábado? - DevPleno

URL: https://devpleno.com/estudar-1-hora-por-dia-ou-8-horas-no-sabado

> Descubra a melhor rotina de estudos para programadores: consistência diária ou maratonas no fim de semana? Dicas para organizar seus estudos.

Carreira

## Estudar 1 hora por dia ou 8 horas no sábado?

T
Por Tulio Faria • 18 de julho de 2017

[Carreira](/tag/carreira)

O que é melhor, estudar 1 hora por dia ou 8 horas no fim de semana?

Primeiro depende da sua disponibilidade, se você tem 8 horas no sábado, então utilize esse tempo. Porém tudo que fazemos todos os dias acabamos tendo uma certa maestria, então se você programa todo dia, acaba programando melhor depois de 7 dias, você acaba programando melhor do que se ficar 8 horas de um sábado, que a carga horária é maior e teoricamente você está mais focado.

Eu acredito nisso por alguns motivos, primeiro que você cria o hábito de estudar. Quando você consegue reservar um pouquinho por dia, mesmo que seja 20 minutos, eu ainda acredito que seja melhor que juntar tudo em um sábado ou domingo.

No DevPleno, eu gero vídeo todo dia (antigamente eu gerava uma vez por semana), e uma coisa que eu percebi é que é muito mais difícil para mim sentar e gravar um vídeo por semana do que eu gravar um vídeo por dia, isso é bizarro mas é verdade, porque se eu gravo um vídeo por dia, eu gero um hábito de gravar, já se eu faço uma vez por semana, esse hábito não é tão forte. Se pensar que vai fazer algo só no fim de semana ou em um dia só, você acaba ficando mais preguiçoso e vai postergando. Fazendo todo dia, você cria esse hábito e percebe que não consegue parar mais, já fica mais fluido e assim consegue atingir mais resultados.

É muito melhor você melhorar aos poucos do que dar saltos, por exemplos se você estudar 2 sábados seguidos, esses 5 dias que vão separar seus fins de semana vão te atrapalhar porque você vai esquecer as coisas que já estudou. Então é importante estar estudando sempre, quando você diminui o tempo, mas dilui durante sua semana melhor vai ser sua performance em aprender.

Uma coisa que eu fazia na faculdade que funcionava muito bem para mim era relembrar todo o conteúdo da aula anterior antes de assistir outra aula. Se minhas aulas eram na terça e quinta, na segunda eu relembrava as aulas da terça e na quarta o de quinta, então dos 7 dias eu já estava estudando 4 dias, isso facilitou e eu evolui muito rápido em programação, sem contar os outros dias que eu brincava um pouco.

É muito importante manter esse ritmo de estudo para gerar um hábito. Então meu conselho para você é: estude um pouco todo dia ao invés de fazer uma vez só no fim de semana. Se você pegar 20 minutos focado em um dia, é mais fácil de cumprir do que 4 ou até 8 horas seguidas, é mais fácil desfocar quando a carga horária é maior.

Por esse motivo, quando vamos estudar para prova e damos aquele gás, ele pode parecer efetivo, mas na verdade pouquíssimo do tempo que você estudou é realmente efetivo, porque o estudo que dura é a prática e o conhecimento que você faz de forma recorrente, e isso vai levar você a performar melhor.

Porém, se você não tem tempo durante a semana, ainda é melhor estudar 8 horas no sábado do que não estudar nada nunca, nem que sua frequência de estudo seja menor ainda sim é bom ter uma frequência de estudo, mas o ideal é manter uma frequência e enraíze seu dia a dia.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Estudar%201%20hora%20por%20dia%20ou%208%20horas%20no%20s%C3%A1bado%3F&url=https%3A%2F%2Fdevpleno.com%2Festudar-1-hora-por-dia-ou-8-horas-no-sabado) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Festudar-1-hora-por-dia-ou-8-horas-no-sabado)

---

# Eu já sei! Evite uma mentalidade que não te deixa evoluir - DevPleno

URL: https://devpleno.com/eu-ja-sei-carreira

> Evite uma mentalidade que não te deixa evoluir e aprender sempre. Confira o video: <div className=&#34;embedresponsive embedresponsive16by9&#34;   <iframe classNam...

Carreira

## Eu já sei! Evite uma mentalidade que não te deixa evoluir

T
Por Tulio Faria • 30 de julho de 2016

[Carreira](/tag/carreira)

Evite uma mentalidade que não te deixa evoluir e aprender sempre.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Eu%20j%C3%A1%20sei!%20Evite%20uma%20mentalidade%20que%20n%C3%A3o%20te%20deixa%20evoluir&url=https%3A%2F%2Fdevpleno.com%2Feu-ja-sei-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Feu-ja-sei-carreira)

---

# Evite o this em JavaScript - DevPleno

URL: https://devpleno.com/evite-o-this-em-js

> Venho programando cada vez mais de forma funcional e muitas coisas que víamos com preconceito começamos a entender o porque faz sentido ser da forma que é....

Javascript

## Evite o this em JavaScript

T
Por Tulio Faria • 3 de julho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Venho programando cada vez mais de forma funcional e muitas coisas que víamos com preconceito começamos a entender o porque faz sentido ser da forma que é. Toda vez que você for pensar em utilizar o ‘this’ em JavaScript pense 10 vezes antes, porque toda vez que tem um ‘this’ você tem um estado interno nesse componente ou classe caso fossemos utilizar ES6.

**Qual o problema disso?** Se eu estou utilizando o ‘this’, naturalmente esse método já não é mais puro.

**O que é uma função pura?** É uma função que depende exclusivamente da entrada dela para ter um retorno. Então, ao utilizar o this dentro do seu componente, pense melhor, pois ele não é funcional e isso vai atrapalhar o seus testes. Por exemplo, podemos utilizar o exemplo que fizemos anteriormente do [React recursivo](https://www.devpleno.com/renderizar-estruturas-em-formato-de-arvore/), que fizemos utilizando uma functional stateless component, ou seja, um componente em React, que é uma closer. No exemplo, foi criado com uma arrow function e retorna JSX, nela eu não tenho ‘this’ e sim o contexto onde posso guardar algumas variáveis.

const Node = (props) => {
return (
&#x3C;span>
{props.node.l &#x26;&#x26; props.node.r &#x26;&#x26; &#x3C;span>(&#x3C;/span>}

{props.node.l &#x26;&#x26; &#x3C;Node node={props.node.l} />}

{props.node.v}

{props.node.l &#x26;&#x26; props.node.r &#x26;&#x26; &#x3C;span>)&#x3C;/span>}
&#x3C;/span>
)
}
Com isso, é possível saber qual o resultado esperado, ou seja, consigo testar esse componente de uma forma muito melhor. Prefira sempre utilizar uma closer, arrow function ou functional stateless component onde não se tem o ‘this’.

Uma coisa interessante é que quando você começa a ficar mais ciente para isso, naturalmente, no caso do React, você começa a construir os componentes dessa forma e evita alguns deslizes.

Isso deixa muito mais fácil manutenção, testabilidade e etc. Principalmente se houver outro método e nesse método você usa o ‘this’ tem que se criar um construtor, deixando o código muito mais verboso.

Obviamente tem algumas situações que não conseguimos não utilizar, inclusive temos alguns exemplos anteriores que criamos utilizamos o ‘this’ dentro de um componente só e depois replicamos esse state do componente para frente através de uma passagem props.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Evite%20o%20this%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Fevite-o-this-em-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fevite-o-this-em-js)

---

# Gere seu projeto em Express - Hands-on: Express-Generator - DevPleno

URL: https://devpleno.com/express-generator

> Neste handson, vamos falar sobre o ExpressGenerator, um gerador de projetos em expressJS. Com ele conseguimos criar a base da nossa aplicação. Primeirament...

Javascript

## Gere seu projeto em Express - Hands-on: Express-Generator

T
Por Tulio Faria • 6 de junho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands-on, vamos falar sobre o Express-Generator, um gerador de projetos em expressJS. Com ele conseguimos criar a base da nossa aplicação. Primeiramente, para instalar o generator, faça o seguinte comando:

npm install -g express-generator
Lembrando que usando o express -h aparece uma lista com algumas opções, o que é muito legal para podermos escolher a linguagem de template que queremos utilizar, como por exemplo —ejs. O default dele é o —pug ou —jade.

É possível também adicionar um compilador de CSS. Para o exemplo ficar mais completo, vou colocar tudo no projeto. No diretório pai que quero construir minha aplicação, vou colocar:

dica-express --ejs --git --css sass
E em seguida, para instalar as dependencias, vou digitar:

yarn
Feito isso, se dermos um cd dica-express/ acessamos o diretório e com o ls -l podemos ver que temos todo os arquivos com detalhe. Usando o ./ podemos abrir no visual code e ver a estrutura que acabamos de criar com o express-generator:

É interessante, pois a aplicação é construida no app.js e ainda cria uma boa prática, que é exportar o app, e quem vai iniciar esse app (no caso o bin/www) é quem vai definir as portas e etc.

Qual a vantagem disso? Quando formos criar testes em trend para EPI, por exemplo, podemos importar o app e rodar os testes em cima disso e não necessariamente abrir uma porta. O teste controla isso. Na pasta pub, tem o meu style.sass, que é o meu estilo configurado para SaSS.

No package.json, já tem alguns scripts para conseguirmos utilizar. Podemos, então, fazer um yarn start para abrir o projeto no browser utilizando o localhost:3000 . Perceba que ele já faz a compilação do SaSS pelo app

var sassMiddleware = require(‘node-sass-middleware’);

Nessa linha de código, já é feito a tradução. Quando ele bate em um js, procura no SaSS e gera automaticamente os styles.css. O Express-Generator já configura tudo para nós. Quando quisermos dar esse bootstraping na aplicação nova, ele nos poupa muito trabalho. Confira a explicação em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Gere%20seu%20projeto%20em%20Express%20-%20Hands-on%3A%20Express-Generator&url=https%3A%2F%2Fdevpleno.com%2Fexpress-generator) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fexpress-generator)

---

# Resolvendo Expressão Aritmética do CodeFights - DevPleno

URL: https://devpleno.com/expressao-aritmetica-codefights

> Hoje vamos resolver um problema disponível no Code Fights, conhecido como Expressão aritmética. É bastante simples, basicamente temos um número A, B e C e ...

Algoritmos

## Resolvendo Expressão Aritmética do CodeFights

T
Por Tulio Faria • 13 de novembro de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos resolver um problema disponível no Code Fights, conhecido como Expressão aritmética. É bastante simples, basicamente temos um número A, B e C e temos que descobrir se existe um operador que faça A#B = C ser verdadeira, temos algumas maneiras de fazer, a primeira que eu fiz foi a seguinte:

function arithmeticExpression(a, b, c) {
const ops = ['+','-','/','*']]

const op = (a, b, o) => {
if(o === '+'){
return a+b
} else if(o === '-') {
return a-b
} else if(o === '/'){
return a/b
}

return a*b
}

return ops
.map(o =>(a, b, o)===c)
.filter(o => o)
.length > 0
}

console.log('2,3,5 = ',arithmeticExpression(2,3,5))
Eu defini uma lista de operadores e cada uma delas representado com seu próprio operador aritmético em JavaScript, em seguida criei uma arrow function que dado a, b e a operação que eu quero, ele faça a operação em si.

Feito isso, peguei todas as operações e fiz um map que converte uma lista de operações para uma lista do resultado dessas operações aplicadas.

Também poderia ter feito de outra maneira, por exemplo, já que eu já tenho o operador, porque não tentar aplicar o operador sem utilizar o if? Uma das ideias seria algo nesse sentido:

function arithmeticExpression(a, b, c) {
const ops = ['+','-','/','*']]

const op = (a, b, o) => eval(`a ${o} b`)

return ops
.map(o =>(a, b, o)===c)
.filter(o => o)
.length > 0
}

console.log('2,3,5 = ',arithmeticExpression(2,3,5))
Esse eval converte para código em JavaScritp e executa, não é um código que tem uma segurança muito grande e é até um pouco mais lento, mas é uma possibilidade.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Resolvendo%20Express%C3%A3o%20Aritm%C3%A9tica%20do%20CodeFights&url=https%3A%2F%2Fdevpleno.com%2Fexpressao-aritmetica-codefights) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fexpressao-aritmetica-codefights)

---

# 3 Padrões para Iniciar com Expressões Regulares (RegExp) - DevPleno

URL: https://devpleno.com/expressoes-regulares

> Hoje venho trazer três padrões de expressões regulares que você pode utilizar para checar se uma string parece com algo. O que é expressão regular? É uma f...

Javascript

## 3 Padrões para Iniciar com Expressões Regulares (RegExp)

T
Por Tulio Faria • 21 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje venho trazer três padrões de expressões regulares que você pode utilizar para checar se uma string parece com algo. O que é expressão regular? É uma forma que temos de tentar achar um padrão dentro de um texto.

Agora vou mostrar como funciona uma expressão regular utilizando três formas que são muito úteis para checar se uma string começa com alguma coisa, se ela termina com alguma coisa ou se no meio dela tem algo que pode ser alternado:

const str1 = 'Olá DevPleno'

const pattern1 = new RegExp('^Ol')

console.log(pattern1.test(str1))
Toda vez que eu uso, dentro da expressão regular, o circunflexo, eu indico que estou travando o início da string. Por exemplo, se eu quero saber se a string começa com “Olá” basta criar a expressão baseada em “Ol”. Nesse nosso caso será retornado True, pois ele começa com “Ol”. O segundo padrão que vou mostrar é quando terminamos com outro padrão:

const pattern2 = new RegExp('DevPleno$')

console.log(pattern2.test(str1))
Assim ele irá retornar o True novamente, pois ele termina com “DevPleno”, caso a gente modifique e coloque, por exemplo, um ‘s’ no fim da string vai ser retornado false. Lembrando que travamos o fim da string utilizando o $.

Agora o último padrão. Imagine o seguinte: se quiséssemos encontrar um padrão no meio, utilizando ou um ou outro:

const str1 = 'Olá oi DevPleno'

const pattern3 = new RegExp('Olá (oi|tchau) DevPleno')

console.log(
'====' ,
pattern3.test('Olá Mundo')
pattern3.test('Olá oi DevPleno')
pattern3.test('Olá tchau DevPleno')
pattern3.test('Olá opa DevPleno')
)
Perceba que temos false para o primeiro, true para o segundo, true para o terceiro e false para o último. Esses são padrões que já podemos combinar entre eles, por exemplo, começar com o “Olá” e terminar com o “DevPleno”.

Isso é algo muito poderoso. Essas são dicas para dar os primeiros passos se você nunca ouviu falar de expressão regular.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=3%20Padr%C3%B5es%20para%20Iniciar%20com%20Express%C3%B5es%20Regulares%20(RegExp)&url=https%3A%2F%2Fdevpleno.com%2Fexpressoes-regulares) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fexpressoes-regulares)

---

# Factory Function em JavaScript - DevPleno

URL: https://devpleno.com/factory-function

> Aprenda como usar Factory Functions em JavaScript para criar objetos sem classes. Exemplos práticos com closures e estado privado.

Javascript

## Factory Function em JavaScript

T
Por Tulio Faria • 20 de julho de 2017

[Javascript](/tag/javascript)

Hoje vou dar uma dica de JavaScript, mais especificamente como implementar o Patern Factory. Factory é bastante conhecido em Java, C# e outras linguagens com orientação a objeto. Nessas linguagens, retornamos uma instancia de uma classe, no JavaScript, poderíamos também, mas para ser mais funcional, podemos retornar um objeto de forma literal, ou seja, já em JavaScript. Vamos supor que eu tenha um Person Factory onde é passado o name:

function personFactory(name) {
return {
name: name,

type: 'person'
}
}

console.log(personFactory('Tulio'))

console.log(personFactory('João'))
Quando executarmos o código, ele vai criar um objeto novo com o nome Tulio e outro com o nome João. Então uma das funcionalidades que temos para factory é criar objetos novos. Outra coisa bacana, mas bem especifico de linguagens funcionais e até da característica do JavaScript, é que temos uma closure, então acabamos conseguindo fazer um contador, por exemplo, com um count retornando uma arrow function..

function personFactory(name) {
let count = 0

return {
count () => count++,
name: name,
type: 'person'
}
}

const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio)

console.log(joao)
O primeiro count não é o mesmo que o de dentro, o de dentro é o que retornamos para a factory. Quando eu chamo o Person Factory passando o nome ‘Tulio’, ele vai criar um escopo novo que vai retornar somente esses dados, e junto com ele vai travar o contexto. O count vai ter o valor 0 para o objeto Tulio e depois para o objeto João, então se fizermos o seguinte:

const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio.count())

console.log(tulio.count())
Assim, conseguimos manter um estado para esse objeto porque temos uma closure sem nenhum this ou coisa desse sentido, com isso não temos problema nenhum de localização. Muita gente vai falar que não conseguimos o isolamento das variáveis, só que, na verdade, conseguimos sim utilizando closure. Vamos fazer um outro teste só que ao invés de chamar de count vou chamar de opa:

function personFactory(name) {
let count = 0

return {
opa () => count++,
name: name,
type: 'person'
}
}

const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio.opa())

console.log(tulio.opa())
Continua funcionando normalmente, porém se eu tentar fazer um console.log(tulio.count), que teoricamente seria o count de fora, ele apareceria undefined porque está dentro da closure.

Quando retornado, ele cria uma nova interface publica para o objeto e as únicas que temos é o opa, name e type. Então podemos utilizar para gerar como se fosse uma classe de uma maneira mais funcional ou quando queremos retornar um objeto com várias propriedades que queremos deixar um ou dois dinâmicos apenas, construindo uma factory de um objeto que é um pouco mais complexo.

O factory em outras linguagens segue mais ou menos a mesma linha, a única diferença é que ele instancia realmente uma classe. Uma dica é que quando for pensar em programação funcional comece a restringir o uso do this, quanto mais longe estamos do this, mais próximo estamos da programação funcional.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Factory%20Function%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Ffactory-function) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffactory-function)

---

# Fake API - Como testar seus projetos front-end - DevPleno

URL: https://devpleno.com/fake-api

> Hoje eu trago uma dica que eu utilizo bastante com a minha equipe que é quando temos ainda uma fonte de dados para fornecer para um frontend, por exemplo, ...

Javascript

## Fake API - Como testar seus projetos front-end

T
Por Tulio Faria • 4 de agosto de 2017

[Javascript](/tag/javascript)

Hoje eu trago uma dica que eu utilizo bastante com a minha equipe que é quando temos ainda uma fonte de dados para fornecer para um front-end, por exemplo, quando estamos construindo um SPA (geralmente essa aplicação precisa consumir dados) e quando não temos uma API pronta, temos uma possibilidade para trabalhar sem depender do back-end.

Nós utilizamos algumas API’s falsas para trazer os dados, porque basicamente se a gente executar uma interface qualquer de um sistema, é possível baixar uma lista de clientes, pedidos etc. Se a aplicação for construída da maneira correta, vai ser só uma questão de trocar a camada que faz esse carregamento para refletir os dados reais da sua aplicação. Esse tipo de coisa é muito bom para acelerar o desenvolvimento e deixar um pouco mais flexível a parte do front-end.

Eu vou mostrar dois exemplos: primeiramente temos o Json Place Holder e também temos o SWAP, eu criei um arquivo index apenas para testarmos, a ideia é que ao invés de consultarmos os dados no nosso servidor que ainda não existe ou não está pronto, nós vamos consultar dados desses sites:

&#x3C;html>
&#x3C;body>
&#x3C;h1> testing API&#x3C;/h1>

&#x3C;pre id='contents'>&#x3C;/pre>

&#x3C;script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'>&#x3C;/script>

&#x3C;script>
$(function()
{$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
$('#contents').html(JSON.stringfy(data))
})})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Com isso ele já retorna todos os posts. Se olharmos em network, ele já foi lá, bateu no servidor deles e retornou a lista de posts. Eu posso trabalhar essa lista de posts por exemplo:

&#x3C;html>
&#x3C;body>
&#x3C;h1> testing API&#x3C;/h1>

&#x3C;div id='contents'>&#x3C;/div>

&#x3C;script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'>&#x3C;/script>
&#x3C;script>
$(function()
{$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
data.forEach(function (post) {
$('#contents').append('&#x3C;h1>' + post.title + '&#x3C;/h1>')
})
})})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Lembrando que isso não é uma boa prática, mas como é apenas para intuito de aprendizado, então estou fazendo dessa forma. Perceba que ele tem um body também caso queira:

$('#contents').append('&#x3C;h2>' + post.title + '&#x3C;/h2>')

$('#contents').append('&#x3C;div>' + post.body + '&#x3C;/div>')
Por exemplo, caso você esteja fazendo uma lista de pedidos ou clientes, pode utilizar esses dados para simular como a aplicação vai se comportar com os dados. Deve haver outras opções mas essas são duas que eu utilizo bastante, funciona muito bem e agiliza muito o desenvolvimento no front-end.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Fake%20API%20-%20Como%20testar%20seus%20projetos%20front-end&url=https%3A%2F%2Fdevpleno.com%2Ffake-api) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffake-api)

---

# Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS - DevPleno

URL: https://devpleno.com/falsy-e-truthy-values

> Hoje eu gostaria de falar sobre um assunto que surgiu nos comentários do vídeo sobre shortcircuit e valores padrão. Eu não comentei sobre que valores são c...

Javascript

## Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS

T
Por Tulio Faria • 7 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje eu gostaria de falar sobre um assunto que surgiu nos comentários do vídeo sobre [short-circuit e valores padrão](https://www.devpleno.com/short-circuit-e-valores-padrao/).

Eu não comentei sobre que valores são convertidos para verdadeiro ou falso porque, na verdade, eu não sabia que eram chamados de falsy e truthy values, então quero trazer essa racionalização. O exemplo que tínhamos feito era:

let a = null

let b = a || 'teste'
Quando eu passo o valor e o operador ou é atribuído o valor padrão. Existe uma série de valores que fazem ele retornar false e consequentemente ele traria o valor padrão ‘teste’, alguns desses valores são ‘null’, uma string vazia ’ ’, o ‘false’ em si, undefined, que seria o caso de uma entrada no express, outro valor considerado ou convertido para false é o Zero ‘o’ e um último é o NaN.

Existe uma situação, que está documentada no site da mozilla, que é o (document.all)[1]. Ele é bastante utilizado para verificar navegadores antigos, mas vamos focar nos anteriores principalmente para o Node.

Em contrapartida, temos tudo que não são valores passados anteriormente, nesse caso seria retornado o valor ‘true’, por exemplo:

let c = true
Outros valores considerados truthy seriam por exemplo {}, que seria um objetct, um array [], um número qualquer, uma string com algo dentro ‘test’ , um new Date(), um número negativo, float e uma constant em JavaScript (Infinity), que também retornaria True. Por esse motivo em alguns condicionais, como por exemplo:

{
comments &#x26;&#x26; comments.map()
}
Vai retornar true porque ele é um object, já que podemos iterar sobre os comments, porém se comments for undefined ou algum valor falso que a gente não consiga iterar no Map, ele não executa a instrução. Por esse motivo é interessante que a gente saiba os valores possíveis. Uma observação importante, se nós fizemos a conversão para apenas um, por exemplo:

console.log(42 == true)
Irá retornar False, mas se fizermos isso:

console.log(!!42 == true)
Estamos negando ele para ser true, então irá retornar true. Inicialmente ele não funcionou porque o == não faz essa conversão de tipos, já os &#x26;&#x26;, que é um operador booleano, força esse valor a ser convertido para truthy ou falsy value. Sempre for fazer comparações desse tipo, é bom fazer com === para que realmente fique idêntico e assim ele realmente verifica se os valores são os mesmos e isso evita qualquer problema no futuro.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Falsy%20e%20Truthy%20Values%20-%20Valores%20considerados%20verdadeiro%20e%20falso%20em%20JS&url=https%3A%2F%2Fdevpleno.com%2Ffalsy-e-truthy-values) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffalsy-e-truthy-values)

---

# Falta de apoio - DevPleno

URL: https://devpleno.com/falta-de-apoio

> Quando estamos em uma empresa ou até mesmo fazendo projetos por conta própria, temos ideias criativas e percebemos que, quando comunicamos essas ideias par...

Carreira

## Falta de apoio

T
Por Tulio Faria • 28 de agosto de 2017

[Carreira](/tag/carreira)

Quando estamos em uma empresa ou até mesmo fazendo projetos por conta própria, temos ideias criativas e percebemos que, quando comunicamos essas ideias para outras pessoas, não temos o apoio necessário para realizá-las

Imagine que você começou a planejar um aplicativo e então começa a falar para as pessoas e ninguém te apoia. O que você fazer nesse momento?

A primeira coisa você precisa fazer é avaliar qual a relevância da falta de apoio por esse grupo de pessoas. Se for sua família ou amigos mais próximos, pode ser que eles estejam te protegendo de um possível fracasso, afinal, todos sabem que toda ideia corre risco de fracasso.

Tirando essa consideração, existe uma segunda vertente que é saber qual a relevância dessa pessoa para essa sua ideia. Vamos supor que você está fazendo um aplicativo para um mercado farmacêutico, se a pessoa que você perguntou for do mercado esportivo, a relevância é um pouco baixa, mesmo tendo que ouvir a todos. Algumas pessoas não têm o viés do assunto e acaba ponto uma opinião pessoal sobre esse determinado assunto.

Quando você está em uma equipe, muitas vezes você não tem apoio pelos mesmos motivos da primeira opção: seu possível fracasso. Então a falta de apoio pode ser uma falta de relevância dessa pessoa, ou seja, ela não sabe do que se trata, ou simplesmente é uma tentativa de te proteger.

Tente avaliar se você comunicou corretamente o que você quer fazer, muitas vezes você está pensando em criar um projeto, mas não ficou claro da forma que explicou.Essa falta de claridade traz uma insegurança que consequentemente gera a falta de apoio, e finalmente, mesmo que você não tenha apoio para sua ideia ou projeto novo, se você conseguir levar isso adiante sozinho, aplique, porque não adianta as pessoas te apoiarem, a única coisa que isso faz é te dar motivação, mas não vai fazer por você. Vale muito a pena ter essa postura de sempre fazer independente do apoio.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Falta%20de%20apoio&url=https%3A%2F%2Fdevpleno.com%2Ffalta-de-apoio) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffalta-de-apoio)

---

# Falta tempo para realizar aquele projeto? - DevPleno

URL: https://devpleno.com/falta-de-tempo

> Você sempre diz para as pessoas que não tem tempo para realizar um projeto? Quando te perguntam se conseguiu implementar aquela ideia, você responde “Sabe ...

Carreira

## Falta tempo para realizar aquele projeto?

T
Por Tulio Faria • 19 de setembro de 2017

[Carreira](/tag/carreira)

Você sempre diz para as pessoas que não tem tempo para realizar um projeto? Quando te perguntam se conseguiu implementar aquela ideia, você responde “Sabe como é, eu não tenho tempo”…?

Se você é uma pessoa que fala sempre que não tem tempo para alguma coisa, na verdade você não tem prioridade para aquela coisa. Achei uma frase bastante interessante e se encaixa bem aqui: “se tudo dependesse de tempo, desocupado teria sucesso”.

A minha dica de hoje para você é: pegue aquele projeto que você sempre quis implementar e dedique um pouco de tempo, todos os dias, para aquele projeto. Isso é o suficiente para você perceber que ele está andando, mas que não vai te sacrificar tanto e vai fazer muita diferença no final de um mês ou no final de um ano.

Se você reclama muito que não tem tempo, avalie suas prioridades, será que você está dando prioridade para a coisa certa? Será que não está deixando um tempinho escapar assistindo televisão, por exemplo?

É engraçado pensar nisso porque eu até mudei a forma como falo atualmente. Não falo mais que não tenho tempo para realizar alguns projetos, mas sim que eles não são prioridades no momento. Uma das coisas que fiz quando tirei o DevPleno do papel é que não existiria mais essa de tempo, o DevPleno era (e ainda é) prioridade, e assim engavetei outros projetos e foquei no DevPleno.

É muito mais maduro dizer que você priorizou algum projeto em comparação a outros do que dizer que não tem tempo, porque muitas vezes você vai usar seu tempo para um hobby, por exemplo. Então é muito melhor dizer que não tem prioridade.

Essa é uma pequena reflexão sobre o tempo que eu faço diariamente sobre minha carreira, sobre minha vida. Será que eu estou empregando o tempo da maneira correta? Quanto mais eu reflito sobre isso, mais fico racional e isso é muito bom porque consigo performar mais.

Avalie se você não está perdendo tempo em algumas tarefas ou coisas que não deveria fazer. Isso é muito importante para sempre conseguir objetivos cada vez maiores.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Falta%20tempo%20para%20realizar%20aquele%20projeto%3F&url=https%3A%2F%2Fdevpleno.com%2Ffalta-de-tempo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffalta-de-tempo)

---

# Férias e feriados trabalhando por meio da toptal - DevPleno

URL: https://devpleno.com/ferias-e-feriados-trabalhando-por-meio-da-toptal

> Muita gente me pergunta sobre a questão das férias e dos feriados quando se trabalha por meio da Toptal. Explico tudo neste vídeo: <div className=&#34;embedres...

Carreira

## Férias e feriados trabalhando por meio da toptal

T
Por Tulio Faria • 16 de fevereiro de 2018

[Carreira](/tag/carreira)

Muita gente me pergunta sobre a questão das férias e dos feriados quando se trabalha por meio da Toptal. Explico tudo neste vídeo:

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS aqui](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=F%C3%A9rias%20e%20feriados%20trabalhando%20por%20meio%20da%20toptal&url=https%3A%2F%2Fdevpleno.com%2Fferias-e-feriados-trabalhando-por-meio-da-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fferias-e-feriados-trabalhando-por-meio-da-toptal)

---

# Hands-on: Ferramentas visuais para Flexbox - DevPleno

URL: https://devpleno.com/ferramentas-par-layouts-com-flexbox

> Flexbox é uma nova forma de criar layouts em CSS. Neste handson, mostro algumas ferramentas que ajudam bastante na hora de ver o impacto de cada propriedad...

Javascript

## Hands-on: Ferramentas visuais para Flexbox

T
Por Tulio Faria • 2 de maio de 2017

[Javascript](/tag/javascript)

Flexbox é uma nova forma de criar layouts em CSS. Neste hands-on, mostro algumas ferramentas que ajudam bastante na hora de ver o impacto de cada propriedade visualmente.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Ferramentas%20visuais%20para%20Flexbox&url=https%3A%2F%2Fdevpleno.com%2Fferramentas-par-layouts-com-flexbox) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fferramentas-par-layouts-com-flexbox)

---

# Ferramentas Visuais para Flexbox - DevPleno

URL: https://devpleno.com/ferramentas-visuais-para-flexbox

> Há um tempo passei por uma situação onde precisava criar algumas coisas com Flexbox (uma nova forma de display do CSS) na parte de layout do react native (...

Javascript

## Ferramentas Visuais para Flexbox

T
Por Tulio Faria • 5 de maio de 2017

[Javascript](/tag/javascript)

Há um tempo passei por uma situação onde precisava criar algumas coisas com Flexbox (uma nova forma de display do CSS) na parte de layout do react native (já que é feita em flexbox). Para decidir quais atributos vamos utilizar no flexbox, temos algumas ferramentas que podem nos ajudar, e é isso que eu quero mostrar.

**Por que ele foi criado?**
O flexbox veio resolver um problema grande que tínhamos de layout, afinal no CSS fazíamos algumas ‘gambiarras’ com float e virava uma bagunça. Ele ‘flexibilizou’ isso, e temos muito a ganhar com a ferramenta.

**Apresentando as Ferramentas**

Temos 3 ferramentas, que eu particularmente uso bastante, e com elas fica bem fácil criar um layout. O primeiro é o **Flexys-boxes.**

[https://the-echoplex.net/flexyboxes/](https://the-echoplex.net/flexyboxes/)

Podemos mudar o eixo principal (flex-direction) que por padrão esta row, para outras orientações, como por exemplo, column, e a ferramenta vai simular como vai ser a apresentação.

Dentro de cada um dos Box eu consigo mudar também order, align-self e até mesmo o flex. Com isso, nos é apresentada a linha de código CSS com as propriedades sendo atualizada a cada modificação feita.

Isso é muito legal, pois podemos ir adicionando novos box e ter um preview de como vai ficar e nos ajuda bastante na hora de criar um layout com o flexbox. A segunda ferramenta é o **Interative Flexbox Generator**.

[https://loading.io/flexbox/](https://loading.io/flexbox/)

Nele, já temos um preview de alguns tipos de item, como imagens, blocos ou textos dentro do content in item.

Também conseguimos mudar o main direction, assim como no flexys-boxes, visualizar como queremos o Wrapping, main align, cross align, etc. Tudo isso tendo um preview de como será o layout.

E a terceira e ultima ferramenta é o visual **Guide to CSS3 flexbox.**

[https://demos.scotch.io/visual-guide-to-css3-flexb](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

[ox-flexbox-playground/demos/](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

Nele, podemos mudar a largura de todos os Box, e também modificar dentro de cada Box, mais ou menos como nas outras duas ferramentas.

Confira mais detalhes no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Ferramentas%20Visuais%20para%20Flexbox&url=https%3A%2F%2Fdevpleno.com%2Fferramentas-visuais-para-flexbox) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fferramentas-visuais-para-flexbox)

---

# Fetch - Uma nova forma de fazer requisições HTTP - DevPleno

URL: https://devpleno.com/fetch-hands-on

> Neste hands on, vamos testar o Fetch, uma alternativa que vem sendo adotada e implementada nos navegadores para substituir a forma como fazíamos requisiçõe...

Javascript

## Fetch - Uma nova forma de fazer requisições HTTP

T
Por Tulio Faria • 27 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands on, vamos testar o Fetch, uma alternativa que vem sendo adotada e implementada nos navegadores para substituir a forma como fazíamos requisições http no browser. Já existem módulos que implementam isso no Node, o interessante é que podemos usar a mesma API para os dois lados. Quando o navegador não tem suporte, podemos usar um Polifill.

A primeira coisa que vou fazer é adicionar como dependência no meu projeto:

yarn add node-fetch
Agora precisamos importá-lo. A primeira coisa muito interessante no fetch é que ele retorna promises, com isso fica muito mais simples de trabalharmos:

const fetch = require('node-fetch')

const url = 'http//httpbin.org.get'

fetch(url).then((res)=>{
console.log(res)
}
Perceba que estou dando um fetch para mandar pegar essa url e em seguida ele retorna o res. Ele retorna os resultados e também um json, que é uma promise. Então simplesmente se eu fizer:

fetch(url)
.then((res) => res.json())
.then((json) => console.log(json))
Ele vai dar o retorno do nosso httpbin, vamos passar algum parâmetro para saber se está alterando mesmo:

const url = 'http//httpbin.org.get?t=1'
Perceba que o args dele virá com o t=1 Utilizando essas promises fica muito mais fácil de se fazer o código e assim podemos utilizar também outros módulos, como generator ou até mesmo fazer um post com essa mesma ideia:

const urlPost = 'http//httpbin.org/post'

fetch(urlPost, { method: 'Post', body: 'tulio=faria' })
.then((res) => res.json())
.then((json) => console.log(json))
A única diferença é que passamos um método para ele. Ele pega esse post e mostra para mim, inclusive o data. O interessante é que conseguimos fazer o mesmo controle de erro:

.catch((e)=>console.log(e))
Caso a URL esteja errada, ele vai retornar que não foi encontrada. Fica muito mais fácil de fazer essas requisições em HTTP. Como é uma promise, nós conseguimos fazer várias ao mesmo tempo, utilizar com generator, await async e por ai vai, fica bem mais organizado.

Eu mostrei essas duas formas, post e get, mas é simples fazer as outras formas também. Uma última coisa interessante é que, nos navegadores, ele já está disponível como window.fetch

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Fetch%20-%20Uma%20nova%20forma%20de%20fazer%20requisi%C3%A7%C3%B5es%20HTTP&url=https%3A%2F%2Fdevpleno.com%2Ffetch-hands-on) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffetch-hands-on)

---

# High-order Function Filter - DevPleno

URL: https://devpleno.com/filter

> Hoje vamos de continuar falando sobre as highorder functions que podemos aplicar em um vetor em JavaScript. Nós já tínhamos feito algumas highorder functio...

Javascript

## High-order Function Filter

T
Por Tulio Faria • 2 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje vamos de continuar falando sobre as [high-order functions](https://www.devpleno.com/high-order-functions/) que podemos aplicar em um vetor em JavaScript. Nós já tínhamos feito algumas high-order functions anteriormente, nas quais mostrei o [Map](https://www.devpleno.com/map/) e o [Reduce](https://www.devpleno.com/reduce/), nesse exemplo, vou mostrar o FIlter, que também é muito interessante.

Vamos imaginar que temos um estoque que atualiza em tempo real e que por algum motivo a segunda peça está zerada. Quando eu for mostrar o carrinho eu quero que mostre apenas a soma das compras pro estoque maior que zero, para isso podemos usar a high-order function chamada de ‘filter’, ela filtra os itens que estão fora de estoque:

const carrinho = [{ id: 1, preco: 2, qtd: 2, estoque: 10 },
{ id: 1, preco: 3, qtd: 1, estoque: 0 }]

const subtotal = (item) => item.preco * item.qtd

const total = carrinho
.map(subtotal)
.reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque &#x3C; item.qtd)

console.log(semEstoque)
Assim ele já mostra quais têm a quantidade zero. Caso ele tivesse 2 de estoque, ele também mostraria que não consegue atender porque o estoque é menor que a quantidade. Então, quando formos somar o total do carrinho, podemos usar o filter para passar uma arrow function:

const total = carrinho
.filter((item) => item.estoque >= item.qtd)
.map(subtotal)
.reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque &#x3C; item.qtd)

console.log(total)
Perceba que ele não considerou um dos itens, isso acontece porque as high-order function sempre retornam um novo vetor, então quando eu passo o filtro, removo o item do vetor. Então eu estou passando um novo vetor só com o item 1 para o map, que vai multiplicar o preço pela quantidade e vai passar esse novo vetor para o reduce, que vai reduzir somando os valores.

Podemos utilizar essas funções com imutabilidade porque toda vez que filtro, uso o reduce ou map, eu não estou alterando o vetor original, isso é muito importante para a programação funcional. Podemos também o seguinte:

const filtroEmEstoque = (item) => item.estoque &#x3C; item.qtd

const total = carrinho
.filter(filtroEmEstoque)
.map(subtotal)
.reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque &#x3C; item.qtd)

console.log(total)
A vantagem de fazermos isso é que acaba ficando cada vez mais fácil de entender, além de ser facilmente testado. Tudo isso feito com funções puras, quanto mais utilizamos essas high-order functions, mais limpo ele fica.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=High-order%20Function%20Filter&url=https%3A%2F%2Fdevpleno.com%2Ffilter) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffilter)

---

# High-order Function Find - DevPleno

URL: https://devpleno.com/find

> Já falamos sobre map, reduce e filter, hoje vou mostrar uma highorder function bem parecida chamada de find. Vamos aproveitar o exemplo do reduce: Perceba ...

Javascript

## High-order Function Find

T
Por Tulio Faria • 2 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Já falamos sobre [map](https://www.devpleno.com/map/), [reduce](https://www.devpleno.com/reduce/) e [filter](https://www.devpleno.com/filter), hoje vou mostrar uma [high-order function](https://www.devpleno.com/high-order-functions/) bem parecida chamada de find. Vamos aproveitar o exemplo do reduce:

const carrinho = [{ id: 1, preco: 2, qtd: 2, estoque: 10 },
{ id: 1, preco: 3, qtd: 5, estoque: 2 }]

const subtotal = (item) => item.preço * item.qtd

const filtroEmEstoque = (item) => item.estoque * item.qtd

const soma = (soma, subtotal) => subtotal + soma

const total = carrinho.filter(filtroEmEstoque).map(subtotal).reduce(soma, 0)

const produtoId1 = (item) => item.id === 1

const produtoId1Retorno = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
Perceba que pedimos o produto com o id 1, mandamos procurar com o find no carrinho e buscamos esse ID 1. Uma coisa interessante e comum é fazermos como fizemos em cima, até meu filtro ser uma variável e apenas fazermos o retorno. Agora imaginem que a gente queira parametrizar ainda mais, um conceito bem legal é a seguinte:

const idEquals = (id, item) => item.id === id

const idEquals1 = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
Perceba que eu fiz uma arrow function e nela estou passando o ID com o item que estou iterando. Quando for criar mais filtros, posso usar essa função de idEquals e fixar quem eu quero nesse primeiro parâmetro.

const idEquals = (id, item) => item.id === id

const idEquals1 = idEquals.bind(null, 1)

const idEquals1 = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
Essa nova função que eu criei sempre terá um do ID fixo, então quando eu fizer:

console.log(carrinho.find(idEquals1)
Eu já sei que estou travando o ID em um, criando uma nova função a partir da função que eu já tinha. A vantagem disso é que vamos saindo de funções mais genéricas para funções mais específicas que também são fáceis de testar, deixando o código cada vez mais legível. Óbvio que esse exemplo é bem simples, mas poderíamos travar uma dependência com um banco, por exemplo.

Podemos usar o bind junto com find e qualquer outra função para travar algumas variáveis criando funções novas que travam alguns desses valores.

Confira o video:

o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=High-order%20Function%20Find&url=https%3A%2F%2Fdevpleno.com%2Ffind) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffind)

---

# Float e precisão - DevPleno

URL: https://devpleno.com/float-e-precisao

> Hoje quero dar uma dica e também mostrar um problema que acontece em várias linguagens que é quanto à precisão de número 

Javascript

## Float e precisão

T
Por Tulio Faria • 28 de julho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje quero dar uma dica e também mostrar um problema que acontece em várias linguagens que é quanto à precisão de número ‘quebrados’ ou Float. Esse problema em específico já caiu em uma entrevista de emprego que eu fiz.

Me passaram um caso de teste e infelizmente eu não lembro exatamente como foi, mas eu vou mostrar como podemos resolver isso de uma forma interessante.

Primeiramente vou mostrar qual o problema que nós temos com precisão de números float, tanto em Node quanto em outras linguagens. Vamos supor que temos a seguinte situação:

const num1 = 0.1

const num2 = 0.2

const num3 = num1 + num2
Ao darmos o console.log no num3 reparem o número que nós temos: Essa sujeira atrapalha tudo que vamos fazer. Lembrando que essa sujeira vem da conversão para binário e esses números acabam se atrapalhando.

Qual a solução para isso? Quando temos números monetários, como preço ou algo nesse sentido, nós tentamos tratar esses números como inteiro, por exemplo, no caso de um banco que fizemos o sistema, eles precisavam de cinco casas decimais de precisão, então nós multiplicávamos isso por 100000 e em seguida dividíamos

const precisao = 100

const num1 = parseInt(0.1 * precisao)

const num2 = parseInt(0.2 * precisao)
A regra é multiplicar pelo número de casas decimais que queremos e converter em seguida para inteiro, depois fazemos a conta com inteiros, já que ele não tem esse problema. Depois disso, quando formos retornar o valor, nós dividimos pela precisão:

const num3 = ((num1 + num2) / precisao).toFixed(2)
Obviamente, depois precisamos fazer mais um tratamento porque ele volta a ficar sujo, então precisamos fixar, por exemplo, com 2 zeros depois da vírgula.

Quando fazemos essa conversão para inteiro, não temos mais esse problema de precisão. Um exemplo para ficar mais claro: vamos supor que você quer armazenar uma camisa que custa R$10.99, ao invés de armazenar 10.99, armazena 1099 centavos, com um centavo não é divisível fica muito mais simples de fazermos essa conta.

Se você passar por esse problema, agora já sabe como resolver. :)

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Float%20e%20precis%C3%A3o&url=https%3A%2F%2Fdevpleno.com%2Ffloat-e-precisao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffloat-e-precisao)

---

# Formas de trabalho na Toptal - DevPleno

URL: https://devpleno.com/formas-de-trabalho-por-meio-da-toptal

> Você sabe quais as formas de trabalho quando se atua por meio da Toptal? Confira neste vídeo: <div className=&#34;embedresponsive embedresponsive16by9&#34;   <ifra...

Carreira

## Formas de trabalho na Toptal

T
Por Tulio Faria • 15 de fevereiro de 2018

[Carreira](/tag/carreira)

Você sabe quais as formas de trabalho quando se atua por meio da Toptal? Confira neste vídeo:

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS aqui](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Formas%20de%20trabalho%20na%20Toptal&url=https%3A%2F%2Fdevpleno.com%2Fformas-de-trabalho-por-meio-da-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fformas-de-trabalho-por-meio-da-toptal)

---

# Formatos de troca de dados em Aplicações Web - DevPleno

URL: https://devpleno.com/formatos-de-troca-de-dados

> Hoje vamos continuar falando sobre arquitetura de uma aplicação WEB, mais especificamente sobre os formatos de troca de dados entre backend e frontend. Lem...

Fundamentos

## Formatos de troca de dados em Aplicações Web

T
Por Tulio Faria • 19 de maio de 2017

*

[Fundamentos](/tag/fundamentos)

Hoje vamos continuar falando sobre arquitetura de uma aplicação WEB, mais especificamente sobre os formatos de troca de dados entre back-end e front-end. Lembrando que o Front-end envia algo ao back-end, como por exemplo um POST em /users.

Quando fazemos isso, a requisição é formada por alguns componentes: O Header de requisição; O Body de requisição; Em seguida temos as respostas de ambos. Quando fazemos um post para o users, podemos passar estes dados em alguns formatos. O mais conhecido hoje em dia é o JSON, por exemplo:

{
'name' = 'tulio'
}
No body da requisição, vamos mandar esta string, já no Header temos que enviar a informação para o servidor de que o que estamos enviando no body é um JSON. Temos outras formas de envio como o XML:

&#x3C;user>
&#x3C;name>tulio&#x3C;/name>
&#x3C;/user>
(XML era muito comum de ser utilizado antes do JSON e RESTful ficarem tão famosos).* A forma que ainda é muito comum de enviar estas strings é o URL encoded, nela vamos mandar os dados da seguinte forma no body da requisição:

?name = tulio

Se colocarmos mais dados:

?name = Tulio &#x26; lastName = Faria.

Outra forma é o mult-part form data, que diz mais ou menos assim:

field = name value
No header ele envia um separador outro camp = valor outro separador. Quando ele faz este multiform data, conseguimos mandar grandes quantidades de informação.

**Quando isso é recomendado?** Quando estamos fazendo um Upload como enviar uma foto ou vídeo, por exemplo. Estes são os formatos que temos para troca de dados enviando do front-end para o back-end. Já a resposta do servidor pode ser retornado com um JSON, um XML, os dados como textuais e também HTML, img, PDF, CSS, etc, basicamente qualquer tipo de arquivo que quisermos do servidor para o cliente, desde que o navegador suporte isso.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Formatos%20de%20troca%20de%20dados%20em%20Aplica%C3%A7%C3%B5es%20Web&url=https%3A%2F%2Fdevpleno.com%2Fformatos-de-troca-de-dados) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fformatos-de-troca-de-dados)

---

# Vídeo sobre Formatos de troca de dados em Aplicações Web - DevPleno

URL: https://devpleno.com/formatos-de-troca-de-dados-em-aplicacoes-web

> Neste vídeo da série Web Basic, vou explicar sobre os formatos de troca de dados entre as camadas do frontend e backend. Confira o video: <div className=&#34;e...

Fundamentos

## Vídeo sobre Formatos de troca de dados em Aplicações Web

T
Por Tulio Faria • 20 de julho de 2016

[Fundamentos](/tag/fundamentos)

Neste vídeo da série Web Basic, vou explicar sobre os formatos de troca de dados entre as camadas do front-end e back-end.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=V%C3%ADdeo%20sobre%20Formatos%20de%20troca%20de%20dados%20em%20Aplica%C3%A7%C3%B5es%20Web&url=https%3A%2F%2Fdevpleno.com%2Fformatos-de-troca-de-dados-em-aplicacoes-web) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fformatos-de-troca-de-dados-em-aplicacoes-web)

---

# Freelancer no exterior: 7 dicas para ter sucesso na carreira - DevPleno

URL: https://devpleno.com/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira

> O trabalho de freelancer no exterior configura uma grande oportunidade para muitos profissionais que aderem a esse regime de trabalho. No entanto, a maiori...

Carreira

## Freelancer no exterior: 7 dicas para ter sucesso na carreira

T
Por Tulio Faria • 3 de julho de 2017

[Carreira](/tag/carreira)

O trabalho de freelancer no exterior configura uma grande oportunidade para muitos profissionais que aderem a esse regime de trabalho.

No entanto, a maioria das pessoas têm pouco conhecimento sobre a preparação que envolve essa empreitada fora do Brasil.

Quer saber tudo sobre trabalho de freelancer no exterior? Acompanhe, nesse post, 7 dicas fundamentais que preparamos para você!

## 1. Conquiste uma demanda constante de trabalho

Uma questão central no dia a dia de qualquer freelancer é fidelizar certo número de clientes para, assim, manter uma demanda mais ou menos estável de trabalho. Ter sucesso em relação a isso significa conseguir estabelecer uma previsão de ganho mensal, algo muito importante para quem não tem um salário fixo.

Quando se trata de freelancer no exterior, esse ponto ganha uma centralidade ainda maior. Isso porque, morar fora demanda um esforço significativo de [planejamento financeiro](https://www.devpleno.com/carreira-preciso-de-investimento-para-minha-ideia?utm_source=blog&#x26;utm_campaign=rc_blogpost). Atrasar as contas do mês, por exemplo, a depender do país, pode ser um desconforto muito maior do que no Brasil.

Além disso, uma vida financeira estável fora do país contribui para uma adaptação sem contratempos. Isso é, você poderá desfrutar de uma vida mais confortável e de outras possibilidades que o lugar ofereça, como opções de lazer e viagens.

## 2. Incorpore hábitos de freelancers de excelência

Existem muitos hábitos virtuosos que freelancers de excelência devem incorporar a seu dia a dia. Esses hábitos dizem respeito a uma rotina de trabalho cujo foco é propiciar maior produtividade e otimizar seus ganhos.

Quanto a isso, podemos falar de uma “cartilha” de sucesso para pessoas que trabalham em casa:

- **Vista roupas diferentes daquelas que, normalmente, você veste em casa**. Passar o dia de pijama, para muitas pessoas, pode ser um convite à procrastinação. Com roupas adequadas, você estará dizendo a si mesmo que é hora do trabalho, mensagem que sua própria mente saberá identificar.

- **Estabeleça um horário fixo para desenvolver seu trabalho.** Isso contribui para que você organize melhor seu dia e não comprometa seu tempo com outros compromissos que podem ser adiados, como um médico no meio do dia que pode ser remarcado para o fim da tarde. Dessa maneira, você estará zelando pelas suas entregas e não perderá prazos.

- **Destine um ambiente de sua casa para chamar de escritório**. Não se trata de um alto investimento em um ambiente bem decorado e tudo mais que envolva um escritório bem equipado. Longe disso! Um pequeno espaço que reúna os recursos de que você precisa já é suficiente. Assim, é mais fácil você manter a organização, a privacidade e o silêncio para trabalhar.

Para um freelancer no exterior, seguir essa cartilha é ainda mais aconselhável. Isso se deve ao fato de demorarmos um pouco mais para incorporar uma rotina quando estamos longe de casa.

Nesse caso, não menospreze a necessidade de impor disciplina à realização das tarefas que você deve desenvolver ao longo do dia.

## 3. Conheça detalhes operacionais do trabalho de freelancer no exterior

Trabalhar como freelancer fora do país requer uma série de cuidados que, muitas vezes, não precisaríamos ter no Brasil. Entre essas precauções, a principal delas talvez seja emitir nota fiscal referente aos serviços prestados.

No Brasil, essa não é uma preocupação recorrente entre profissionais que aderem a esse regime de trabalho, tampouco configura uma necessidade para grande maioria dos trabalhos.

No entanto, no exterior, a depender do país, é muito importante habilitar-se para emitir nota fiscal. Muitos freelancers fora do país perdem trabalhos importantes por não se organizarem nesse sentido.

## 4. Saiba o que evitar no trabalho freelancer

Tanto no Brasil, quanto no exterior, atrasos e quebras de contrato prejudicam sua reputação. Em muitas plataformas que fazem a mediação entre freelancers e clientes, visando a entrega de determinado serviço, isso pode representar a diminuição de sua nota ou, até mesmo, a exclusão de seu perfil.

Em alguns países, pode existir uma intolerância ainda mais aguda em relação a esse problema. Por isso, seja comprometido com seus prazos e entregas a fim de obter [sucesso como freelancer](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&#x26;utm_campaign=rc_blogpost) no exterior.

## 5. Avalie se o trabalho de freelancer combina com você

Há muitas pessoas em empregos formais que jamais se arriscariam na vida de freelancer. A maior parte delas atribui essa forma de pensar às incertezas desse regime de trabalho ou à falta de disciplina para ser seu próprio chefe.

Por outro lado, se você acredita ser capaz de organizar-se para ter uma rotina mais flexível, não se apega a cargos ou a hierarquias e, ainda, sabe lidar com uma margem variável de rendimento mensal, o trabalho como freelancer é uma ótima opção.

A flexibilidade relacionada à prestação desse tipo de serviço pode trazer a possibilidade de viver em outros países. Para quem tem fluência em outras línguas, como o inglês, por exemplo, há um grande número de oportunidades no exterior.

## 6. Esteja em constante capacitação

Uma particularidade do trabalho de freelancer é a baixa adesão a cursos de capacitação. Trabalhar por conta própria leva muitos profissionais a pensar que não é preciso estar em constante atualização.

Esse é um engano que não pode ser cometido. As constantes mudanças no mercado de trabalho têm a mesma repercussão para pessoas em empregos formais e para quem presta serviço freelancer.

Nos Estados Unidos e nos países da Europa, a média de qualificação dos profissionais freelancers pode ser superior à média do Brasil. Como se sobressair diante de tamanha concorrência? [Atualize-se, esteja em constante capacitação](https://www.devpleno.com/carreira-tomar-decisoes?utm_source=blog&#x26;utm_campaign=rc_blogpost).

## 7. Conheça as especificidades de seu campo de atuação no exterior

Uma mudança para outro país sempre requer um período de adaptação. No que se refere, especificamente, a questões ligadas ao trabalho freelancer, não é diferente.

As exigências para um [desenvolvedor no Brasil](https://www.youtube.com/watch?v=vOoqJ7l2ng8&#x26;utm_source=blog&#x26;utm_campaign=rc_blogpost), por exemplo, podem ser diferentes daquelas existentes no Reino Unido. Antes de iniciar uma trajetória profissional fora do país é importante se ater a questões como essa.

Ser um freelancer no exterior pode ser uma experiência incrível. Muitas pessoas conseguem combinar a oportunidade de trabalho com uma rotina de viagens muito interessante. Ou, simplesmente, conseguem se estabelecer naquele país em que sempre sonharam viver.

Para alcançar esses objetivos, o freelancer deve priorizar a realização de uma etapa de preparação. Nesse sentido, todas as dicas apresentadas aqui não podem ser deixadas de lado.

Gostou das nossas dicas sobre ser freelancer no exterior? Siga compartilhando nossos conteúdos nas redes sociais!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Freelancer%20no%20exterior%3A%207%20dicas%20para%20ter%20sucesso%20na%20carreira&url=https%3A%2F%2Fdevpleno.com%2Ffreelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffreelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira)

---

# Fs-extra - Filesystem com Promises e mais funcionalidades - DevPleno

URL: https://devpleno.com/fs-extra

> O Fsextra é uma forma de otimizar as funcionalidades do SF normal do node. Primeiramente, temos que executar o comando yarn sfextra. Uma utilidade interess...

Javascript

## Fs-extra - Filesystem com Promises e mais funcionalidades

T
Por Tulio Faria • 15 de maio de 2017

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O Fs-extra é uma forma de otimizar as funcionalidades do SF normal do node. Primeiramente, temos que executar o comando yarn sf-extra. Uma utilidade interessante do SF-extra é que, importando o outputFile, é possível criar um arquivo, um TXT, por exemplo. Ele funciona tanto com callback quanto com promises.

fs.outputFile('file.txt', 'olá').then(() => console.log('ok'))
Com isso, ele irá criar um arquivo file.txt com o texto olá* dentro e o console nos enviará uma mensagem *ok*. Isso possibilita usarmos mais facilmente com async await, generator e por aí vai. Outra coisa interessante é que ele trás alguns métodos que não são comuns no FS como o fs.copy, que é possível copiar o arquivo diretamente por ele usando uma versão ‘promiseficada’.

fs.copy('file.txt', 'file2.txt').then(() => console.log('ok'))
Assim. será criado um arquivo file2.txt copiando o arquivo file.txt Este foi apenas uma pequena apresentação do FS-extra, ele permite utilizarmos mais tranquilamente essas novidades do ES6, ES7, async await e por ai vai, isso fica muito legal para usarmos com promises.

Ele também agiliza bastante, já que com generator poderíamos, por exemplo, só usar o yield fs.copy sem mesmo usar o then, e já resolveria a promise tranquilamente.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Fs-extra%20-%20Filesystem%20com%20Promises%20e%20mais%20funcionalidades&url=https%3A%2F%2Fdevpleno.com%2Ffs-extra) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffs-extra)

---

# FS-Watch - Checando mudanças em um arquivo-diretório - DevPleno

URL: https://devpleno.com/fs-watch

> Hoje eu quero mostrar duas funcionalidades que nós temos no FS padrão no Node e que podem ajudar bastante em alguns tipos de situações, como por exemplo ch...

Javascript

## FS-Watch - Checando mudanças em um arquivo-diretório

T
Por Tulio Faria • 17 de outubro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje eu quero mostrar duas funcionalidades que nós temos no FS padrão no Node e que podem ajudar bastante em alguns tipos de situações, como por exemplo checar se algum arquivo de log foi gerado em um diretório ou, às vezes, um arquivo de exportação.

Primeiramente temos uma pasta criada, nele vou criar um arquivo novo chamado fs-watch.js e fazer o seguinte:

const fs = require('fs')
Dentro do próprio FS eu tenho duas possibilidades: o watchFile, onde eu posso checar se um arquivo está sendo alterado:

fs.watchFile('file.txt', (curr, next) => {
console.log(curr, next)
})
Basicamente ele vai mostrar para o que mudou em cada alteração do arquivo, por exemplo, se rodarmos ele, editar o arquivo file.txt e salvar, vai ser mostrado o que foi mudado. Se colocarmos apenas o size, podemos ver como era atualmente e anteriormente esse mesmo arquivo:

fs.watchFile('file.txt', (curr, prev) => {
console.log(curr.size, prev.size)
})
Assim, sempre que mudarmos o número de caracteres do arquivo, ele vai mostrar o quanto nós temos agora e o quanto tinha anteriormente.

Essa é uma das formas que temos de saber se o arquivo foi ou não alterado. O que podemos fazer com isso? Podemos, por exemplo, fazer um WatchFile simplesmente para saber se o atual é maior que o anterior, pensando em arquivos de log, geralmente colocamos no final para caso haja algum incremento no arquivo, com isso é possível saber quantos bytes foram adicionados.

Outra forma que temos de fazer é utilizando o fs.watch(). Com ele podemos checar um diretório contra mudanças:

fs.watch('./', (changeType, file) => {
console.log('change', changeType, file)
})
Ao fazermos isso, ele vai checar nesse diretório qualquer arquivo que foi alterado, assim temos bastante precisão neste tipo de operação.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=FS-Watch%20-%20Checando%20mudan%C3%A7as%20em%20um%20arquivo-diret%C3%B3rio&url=https%3A%2F%2Fdevpleno.com%2Ffs-watch) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffs-watch)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsl

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsl to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: /

URL: https://devpleno.com/fsl-materialdeapoio

Redirecting to: / [Redirecting from /fsl-materialdeapoio to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/fsl2-aulas

Redirecting to: / [Redirecting from /fsl2-aulas to /](/)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsm-inscricao

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsm-inscricao to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsm-reservar

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsm-reservar to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsm-reservar-fbads

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsm-reservar-fbads to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsm-turmarelampago

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsm-turmarelampago to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsmrelampago-email

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsmrelampago-email to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsmrelampago-fbads

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsmrelampago-fbads to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsmrelampago-wpp

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsmrelampago-wpp to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsmrelampago-ytads

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsmrelampago-ytads to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fsmrelampago-ytorg

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fsmrelampago-ytorg to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-lab-especial-fsm-relampago

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-lab-especial-fsm-relampago to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-master

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-master to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-master-2

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-master-2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-master-li1

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-master-li1 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-master-li2

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-master-li2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstack-master-listadeespera

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstack-master-listadeespera to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackacademy

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackacademy to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackacademy-aula-1

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackacademy-aula-1 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackacademy-aula-2

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackacademy-aula-2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackacademy-aula-3

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackacademy-aula-3 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackacademy-materiaisdeapoio

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackacademy-materiaisdeapoio to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: /

URL: https://devpleno.com/fullstacklab

Redirecting to: / [Redirecting from /fullstacklab to /](/)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstacklab-fbad

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstacklab-fbad to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: /

URL: https://devpleno.com/fullstacklab-fborg

Redirecting to: / [Redirecting from /fullstacklab-fborg to /](/)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstacklab-google

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstacklab-google to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstacklab-whatsapp

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstacklab-whatsapp to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstacklab-ytad

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstacklab-ytad to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackmaster

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackmaster to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/fullstackmaster4

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstackmaster4 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# 4 funcionalidades do Console no DevTools que você não conhece - DevPleno

URL: https://devpleno.com/funcionalidades-do-console

> O console no DevTools do Chrome apresenta algumas funcionalidades que muitos utilizam raramente ou até mesmo nem sabem que existem. Para fazer este teste, ...

Javascript

## 4 funcionalidades do Console no DevTools que você não conhece

T
Por Tulio Faria • 25 de maio de 2017

[Javascript](/tag/javascript)

O console no DevTools do Chrome apresenta algumas funcionalidades que muitos utilizam raramente ou até mesmo nem sabem que existem.

Para fazer este teste, vamos criar um HTML simples com um script começando com o console.log normal.

&#x3C;html>
&#x3C;body>
&#x3C;script>console.log('este é um log')&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Nele temos apenas uma saída e nada além disso. Agora vamos falar sobre alguns que quase não utilizamos. **#1 error**

console.error('um erro')
Caso tenha algum erro no console, você pode marcá-lo de vermelho, assim, ele te mostra onde ocorreu esse erro. Quando estiver debugando o código e quiser achar algo, pode usar o console.error e ele irá pegar o stack trace também.

**#2 time** Com ele você pode checar quanto tempo foi gasto para executar uma dada função.

console.time('nomeCounter')
console.log('este é um log')
console.log('este é um log')
console.timeEnd('nomeCounter')
Em muitos testes que fazemos, o console.log consome recurso da máquina pois ele tem que lidar com o IO. **#3 count**

console.count(contador)
Ele conta quantas vezes uma string foi chamada ou quantas você passou em um trecho específico de código, o que é muito bom para fazer algum check.

**#4 table** Nele você pode colocar uma lista de nomes e ele monta uma tabela no auto do console. Isso facilita bastante na hora de depurar o código, pois pode mostrar os dados em forma de tabela se quiser.

console.table([{nome: 'Tulio'};
{nome: 'Faria'};])
Todos eles, se bem utilizados, podem ajudar muito na melhora de desempenho do código ou simplesmente ajudar a depurar mais facilmente.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=4%20funcionalidades%20do%20Console%20no%20DevTools%20que%20voc%C3%AA%20n%C3%A3o%20conhece&url=https%3A%2F%2Fdevpleno.com%2Ffuncionalidades-do-console) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ffuncionalidades-do-console)

---

# Generators Functions - o que acontece por baixo dos panos - DevPleno

URL: https://devpleno.com/generators-functions

> Hoje vamos continuar falando sobre Generators Functions em JavaScript. O que é Generator? É uma função que podemos pausar ou iterar sobre ela. Já falamos s...

Javascript

## Generators Functions - o que acontece por baixo dos panos

T
Por Tulio Faria • 29 de junho de 2017

[Javascript](/tag/javascript)

Hoje vamos continuar falando sobre Generators Functions em JavaScript.

**O que é Generator?**

É uma função que podemos pausar ou iterar sobre ela. Já falamos sobre generators no hands-on do Módulo CO, que resolve um generator, mas hoje vamos falar como ele funciona ‘por baixo dos panos’ e até mesmo como o CO foi construído.

A primeira coisa que temos que saber é que a sintaxe do generator é criada com uma function e um asterisco. Se fizermos isso, dizemos que é uma função generator, então é possível pausar essa função com CO, o que deixa o código mais linear:

function* generator() {
console.log('Entrou no generator')
}
const gen = generator()
Ao executar o código, perceba que não saiu nada. Primeiro precisamos iterar sobre ele para que consigamos ter um valor, para isso criamos um:

const iteration = gen.next()
O next é muito comum em outras linguagens, nas quais temos algumas estruturas que são iteráveis. Enquanto você utilizar o .next significa que você ainda tem dados para iterar.

Agora executamos para ver o que acontece novamente. Perceba que aparece a mensagem (‘Entrou no generator’) porque ele depende do next para entrar na primeira linha.

Agora vamos fazer algo diferente:

function* generator() {
console.log('Entrou no generator')
console.log('Segundo passo')
console.log('Penultimo passo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
Ele executou tudo de uma vez. Agora vamos fazer o seguinte:

yield 'outro valor'
Olha que interessante, ele parou agora no segundo passo, se eu der um console.log no iteration ele retorna um objeto com um value ‘outro valor’ dentro e um done: false. Ele parou e retornou esse valor, então ela é uma função que além de iterável, conseguimos ter vários retorno de valor. Se eu quisesse continuar executando, tenho que chamar novamente gen. next:

function* generator() {
console.log('Entrou no generator')
console.log('Segundo passo')
yield 'outro valor'
console.log('Penultimo passo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
gen.next()
Perceba que ele fez os dois primeiros passos, pausou para retornar o yeild, e por fim fez os dois últimos passos, por isso é chamada de função pausavel.

No yeild, podemos por exemplo retornar uma promise:

function* generator(){
console.log('Entrou no generator')
console.log('Segundo passo')
yield new Promise((resolve, reject) => {
setTimeout(() => resolve(10), 2000
})
console.log('Penultimo passo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then(() => {
gen.next()
})
Imagine que estamos buscando no banco de dados alguma informação; quando fazemos isso, estamos fazendo uma operação assíncrona e ela vai demorar mais tempo porque é um IO, o yeild está simulando essa busca e o iteration.value.then está esperando essa ‘busca’ para retornar as próximas informações.

Então o que o CO faz é o controle de chamar o next e executar o then de forma organizada. Vamos supor que esse código fosse um function ReadFilePromise:

function ReadFilePromise () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(10), 2000
)})
}
function* generator(){
console.log('Entrou no generator')
console.log('Segundo passo')
const value = yield readFilePromise()
console.log('Penultimo passo' value)
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then(()=>{
gen.next()
})
Ao fazer isso, ele vai chamar a nossa function ReadFilePromise e esperar. Para aproximar mais do CO o value tem que vir preenchido, mas perceba que ele veio com undefined porque não aproveitamos o value no then. Então vamos aproveitar:

const gen = generator()
const iteration = gen.next()
iteration.value.then((val) => {
gen.next(val)
})
Assim vai ser retornado o penúltimo com o valor 10. O CO faz exatamente isso, conseguimos transformar facilmente em uma função genérica que resolva qualquer generator, por isso é tão legal resolver com promise, porque se fosse com readFile comum a gente não tem esse retorno de valor. Confira a dica em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Generators%20Functions%20-%20o%20que%20acontece%20por%20baixo%20dos%20panos&url=https%3A%2F%2Fdevpleno.com%2Fgenerators-functions) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fgenerators-functions)

---

# Generators: O que há &quot;por baixo dos panos&quot; - DevPleno

URL: https://devpleno.com/generators-o-que-ha-por-baixo-dos-panos

> Neste post, continuo falando sobre Generatiors em javaScript e como funciona 

Javascript

## Generators: O que há "por baixo dos panos"

T
Por Tulio Faria • 8 de maio de 2017

[Javascript](/tag/javascript)

Neste post, continuo falando sobre Generatiors em javaScript e como funciona ‘por baixo dos panos’.

**O que é um Generator?**

É uma função que podemos pausar (ou iteravel). A primeira coisa que temos que saber é que a sintaxe do generator é criada com um function e um asterisco, com isso é possível pausar esta função. Se for utilizado com CO, por exemplo, é possível transforma-la em uma função mais linear.

Primeiro vamos criar uma function generator e em seguida criar uma variavel denominada gen e chamar um generator.

function* generator() {
console.log('entrou no generator')
}
const gen = generator()
Percebam que nada aconteceu, por isso eu gosto de dizer que ela é iteravel, pois precisamos iterar sobre ele para que a gente consiga ter um valor e comece a executar.

**Como fazemos isso?**

Precisamos criar um const = iteration no código.

Lembrando que o next é bastante comum em outras linguagens como java que existe algumas estruturas que são iteraveis (no Java, Iterator). Enquanto você conseguir ter um .next significa que você ainda tem dados para iterar.

function* generator() {
console.log('entrou no generator')
console.log('segundo passo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
Com isso é possível entrar no Generator. Perceba que ele executou tudo de uma vez. Agora vamos fazer da seguinte forma:

function* generator() {
console.log('entrou no generator')
console.log('segundo passo')
yield 'outro valor'
console.log('penultimo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
Ao testar o código, note que ele parou em ‘segundo passo’. Se dermos um console.log(iteration) ele irá retornar um value: ‘outro valor’ e um done: false, ou seja, é uma função que além de iteravel conseguimos ter vários retornos de valor.

**Se eu quiser continuar executando o que eu preciso fazer?**

Chamaremos novamente gen.next()

function* generator() {
console.log('entrou no generator')
console.log('segundo passo')
yield 'outro valor'
console.log('penultimo')
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
gen.next()
Com isso será retornado os valores em três etapas. Podemos, por exemplo, chamar uma function:

function readFilePromise(){
return new Promise((resolve, reject) => {
setTimeout(() => resolve(10), 2000)
}
function* generator(){
console.log('entrou no generator')
console.log('segundo passo')
const value = yield readFilePromise()
console.log('penultimo' value)
console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then((val) =>{
gen.next(val)
}
Afinal, o que o CO faz?

Com ele conseguimos transformar facilmente em uma função generica que resolva qualquer Generator. Por este motivo é interessante resolvermos com Promise, pois se fosse com o ReadFile comum não teríamos este retorno de valor.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Generators%3A%20O%20que%20h%C3%A1%20%22por%20baixo%20dos%20panos%22&url=https%3A%2F%2Fdevpleno.com%2Fgenerators-o-que-ha-por-baixo-dos-panos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fgenerators-o-que-ha-por-baixo-dos-panos)

---

# Construindo um App gerenciador de séries com ReactJS - DevPleno

URL: https://devpleno.com/gerenciador-de-series-p1

> Nesta nova série, vamos construir um aplicativo na prática, mais especificamente um gerenciador de séries, para você nunca mais esquecer as séries que assi...

Javascript

## Construindo um App gerenciador de séries com ReactJS

T
Por Tulio Faria • 19 de julho de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Nesta nova série, vamos construir um aplicativo na prática, mais especificamente um gerenciador de séries, para você nunca mais esquecer as séries que assistiu no Netflix e também as que você tem para assistir que algum amigo te indicou. Para isso, vamos utilizar o ReactJS, a tecnologia que eu utilizo no meu dia a dia nos projetos para uma empresa americana e nos que a minha empresa desenvolve. É um potencial muito grande para o mercado conhecer e saber desenvolver projetos com o ReactJS.

Atualmente dizemos que o ReactJS é unanimidade em todos os lugares, pois podemos desenvolver para WEB, aplicativos nativos para celular, Windows… basicamente tudo. Por esse motivo, está muito em alta e é importante aprender essa biblioteca neste momento.

Hoje vamos preparar a máquina para criar o projeto, configurando como vamos armazenar esses dados para podemos fazer as quatro operações que são inserir um registro novo nesse banco, retornar esses registros do banco, atualizá-los e excluir os registros.

No fim disso, vamos fazer um primeiro projetinho para que você saiba como é um componente em React, ver funcionando e falar um pouco sobre JSX, que é a linguagem que o React usa para conseguir manipular as coisas na tela. Nas próximas aulas, vamos começar realmente a construir essa aplicação com navegação e tudo mais. Outro ponto legal é que você pode utilizar essa aplicação como portfólio.

VAMOS LÁ!

Para construir esse projeto, vamos precisar de três módulos:

npm install -g json-server
npm install -g create-react-app
npm install -g yarn
O Create React App é uma forma de iniciar o projeto em React de forma muito rápida e sem ‘briga’, afinal, quando temos que configurar muito webpack, gastamos muito tempo porque dá muito problema, então o Create React App já é uma forma muito boa de começarmos um projeto, pois diminuímos muito o número de dependências diretas do projeto deixando ele mais limpo.

Já o Yarn é bom instalar porque o Create React-App usa muito o Yarn, que é uma NPM com mais coisas, isso faz com que o Create React-App rode mais rápido.

Depois podemos criar realmente nosso projeto:

create-react-app primeiro-projeto
Perceba que ele está instalando o React, react-dom, and react-scripts. Quando criamos um projeto com o Create React-App, ele coloca dependência apenas para esses três módulos, isso deixa o projeto mais leve e fica mais claro quais dependências estamos colocando.

Com isso, ele vai criar dentro do diretório ‘primeiro-projeto’ e vamos acessar esse diretório utilizando cd e depois startando o yarn:

cd primeiro-projeto/
yarn start
ele irá abrir o projeto: Se você conseguiu acessar, tem um projeto em React funcionando. Vou parar o servidor um pouco e fazer o seguinte:

code./
Ele vai abrir o Visual Studio Code com esse diretório aberto. Note que ao criar nosso primeiro projeto, ele já criou algumas coisas como o package.json e dentro dele as dependências são muito curtas.

Vamos entrar em index, já que ele é nosso ponto de entrada, ele instancia um componente chamado app e renderiza isso no elemento root que está em public/index.html.

Ele irá trocar esse div root pelo componente app. Falando em componente, o React usa componentes como sua base mínima de código.

**O que é um componente?**

Um componente no React é uma junção de um ‘template’ mais um pouco de comportamento e, dependendo de como organizamos isso, podemos ter mais ou menos elementos. Essa forma de utilizar componentes permite uma reutilização de códigos muito grande. Por exemplo, se abrir o app.js, você vai perceber que há um class app extends component, que é do próprio React que estamos estendendo.

Também é possível perceber que temos um método Render que renderiza algo na tela. Temos como se fosse um HTML:

Esse HTML, na verdade, não é HTML, é o que chamamos de JSX.

**O que é o JSX?**

É uma forma que o React achou para representar elementos ou hierarquia de elementos em JavaScript de uma maneira que pareça HTML. Com isso, ao invés de criarmos uma árvore de elementos em JavaScript, que seria algo muito complexo, eles criaram uma anotação que com algo semelhante a HTML e transforma isso depois em código quando precisa ser renderizado na tela. Quando ele percebe que tem um div, o react-dom ele transforma em HTML, mas o className continua, pois é uma palavra reservada do JavaScript.

Voltando ao App, temos algumas regrinhas: a primeira delas é que o render, que é o método responsável pelo que vai ser renderizado na tela, sempre retorna um elemento, por isso temos uma div que começa e é fechado mais abaixo. A segunda coisa importante é que quando o elemento começa com letra minúscula, ele já sabe que esse elemento é uma Tag do HTML, como por exemplo o div e o img, já se usarmos letra maiúscula ele sabe que é um componente. Outro item importante, perceba que importamos o React e o Componente, mas não os utilizamos explicitamente, eles vão ser utilizados na hora que tivermos escrevendo JSX.

Vamos criar um componente agora para você ter essa ideia de como é criado, por exemplo Ola.js.

A primeira coisa é importar o React e o componente, depois vamos criar a classe estendendo o componente, lembrando que todo componente deve ter um render, que deve retornar algo:

import React, { Component } from 'react'

class Ola extends Component {
render() {
return &#x3C;span>Olá DevPleno!&#x3C;/span>
}
}

export default Ola
Esse componente está preso ali, temos que avisar o ‘mundo externo’ que esse componente existe para podemos utilizá-lo, por isso utilizamos o export. Agora dentro de app.js, por exemplo, podemos fazer o seguinte:

import Ola from './Ola'
Podemos depois colocar no final:

&#x3C;Ola>&#x3C;/Ola>
e o resultado é o seguinte:

Acabamos de criar um componente. Outra coisa importante é que conseguimos injetar dados, como por exemplo:

&#x3C;Ola name='Tulio' />
E dentro do Ola.js fazer o seguinte:

import React, { Component } from 'react'
class Ola extends Component {
render() {
return &#x3C;span>Olá {this.props.name}!&#x3C;/span>
}
}
export default Ola
Essa é uma forma de enviar dados do componente pai para o filho, afinal estamos passando propriedades (ou props) para o componente.

Durante a execução do projeto que vamos fazer, utilizaremos bastante isso.

Por fim, vou mostrar como vamos criar o banco de dados que vamos utilizar com o Json Server. Vou criar dentro de src mesmo, apenas para teste, chamado db.json.

Esse db.json vai ter o seguinte formato:

{
"series":[{
"id": 1,
"name": "How I met your mother"
},
{
"id": 2,
"name": "Friends"
}]
}
Vamos salvar e dentro do diretório colocar

json-server --watch db.json
Com isso, temos um resource Séries dentro do nosso localhost. Então, se acessarmos o código via browser, temos acesso ao Json preparado para podermos assumir dentro da aplicação, apenas utilizando a url.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Construindo%20um%20App%20gerenciador%20de%20s%C3%A9ries%20com%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Fgerenciador-de-series-p1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fgerenciador-de-series-p1)

---

# Grandes quantidades de dados com menos recursos - DevPleno

URL: https://devpleno.com/grandes-quantidades-de-dados-com-menos-recursos

> A dica de hoje é um ponto bastante importante para performance em NodeJS. Eu já comentei um pouquinho sobre esse assunto, mas vou reforçar esse cuidado que...

Javascript

## Grandes quantidades de dados com menos recursos

T
Por Tulio Faria • 17 de outubro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

A dica de hoje é um ponto bastante importante para performance em NodeJS. Eu já comentei um pouquinho sobre esse assunto, mas vou reforçar esse cuidado que a gente pode ter aqui para poupar memória quando estamos processando grandes quantidades de dados.

Primeiramente eu baixei um arquivo com mil registros em CSV, eu quero então processar esses arquivos. Vou criar um arquivo sem-otimizar.js:

const fs = require('fs')
fs.readFile('data.csv', (err, contents) => {
console.log(contentes.toString())
})
Uma outra abordagem seria, por exemplo:

const fs = require('fs')
fs.readFile('data.csv', (err, contents) => {
const lines = contents.toString().split('\\n')
line.forEach((line) => console.log(lines.split(',')))
})
Agora imagine o seguinte, ao invés de colocar da forma anterior, vamos imaginar que vai ser salva a linha no banco de dados:

const fs = require('fs')

fs.readFile('data.csv', (err, contents) => {
const lines = contents.toString().split('\\n')
line.forEach((line) => {
console.log()
})
})
Nosso primeiro erro é fazer essa operação sem se preocupar muito se ela retornou algo ou não. Para simular isso, vamos fazer um record e retornar uma promise:

const saveDB = (record) => {
return new Promise((resolve, reject) => {
setTimeOut(resolve, Math.ceil(Math.random() * 4000))
})
}
Com isso vamos simular um save no banco de dados, variando o tempo de resposta não ultrapassando 4 segundos. Agora vamos fazer algumas modificações no código readFiles:

fs.readFile('data.csv', (err, contents) =>{
const lines = contents.toString().split('\\n')
line.forEach(line, i) => {
saveDB(line).then(() => console.log(i))
})
})
Perceba que ao rodar o código, ele trará os registros lentamente e fora de ordem. Estamos empilhando de forma gigantesca, gastando muita memória, porque carregamos todos os registros, fizemos um split e depois ainda mandei salvar tudo de uma vez, além do banco tendo que lidar com todas as requisições ao mesmo tempo.

**Mas qual a maneira ideal de fazer isso?**

Deixar que esses dados passem pelo aplicativo, nós resolvemos o que tem que resolver e vamos para o próximo.

Vou criar um arquivo otimizado.js para fazer da maneira correta e vou utilizar o fast-csv:

yarn add fast-csv
Em seguida, no código, faremos algo um pouco diferente. Vamos importar o fast-csv e criar um readStream para a entrada e outro construtor para essa entrada:

const fs = require('fs')
const csv = require('fast-csv')
const entrada = fs.createReadStream('data.csv')
const csvStream = csv
.fromStream(entrada, {
headers: true
})
.on('data', (data) => {
console.log(data)
})
Agora imagine que temos a mesma função de salvar, o caminho mais interessante é passar os dados, porém, enquanto não terminarmos de salvar esses dados, não manda mais nada:

const fs = require('fs')
const csv =require('fast-csv')
const entrada = fs.createReadStream('data.csv')
const saveDB = record => {
return new Promise((resolve, reject) =>{
setTimeOut(resolve, Math.ceil(Math.random()*4000))
})
}
const csvStream = csv.fromStream(entrada, {
headers: true
}).on('data', data => {
csvStream.pause()
saveDB(data).then((){
console.log(data)
csvStream.resume
})
})
Dessa maneira, utilizando o pause, não jogamos tudo na memória para processar. Resolvido o problema no banco de dados, vamos mandar mais informações.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Grandes%20quantidades%20de%20dados%20com%20menos%20recursos&url=https%3A%2F%2Fdevpleno.com%2Fgrandes-quantidades-de-dados-com-menos-recursos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fgrandes-quantidades-de-dados-com-menos-recursos)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/grupovipfsm

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /grupovipfsm to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: /

URL: https://devpleno.com/guiatrabalhoremoto

Redirecting to: / [Redirecting from /guiatrabalhoremoto to /](/)

---

# HA e AS em Aplicação Web - Web Basic - DevPleno

URL: https://devpleno.com/ha-e-as

> Hoje vamos continuar com mais alguns conceitos de uma Aplicação WEB que são muito importantes quando falamos de Startups, onde temos um poder de escala mui...

Fundamentos

## HA e AS em Aplicação Web - Web Basic

T
Por Tulio Faria • 16 de junho de 2017

[Fundamentos](/tag/fundamentos)

Hoje vamos continuar com mais alguns conceitos de uma Aplicação WEB que são muito importantes quando falamos de Startups, onde temos um poder de escala muito grande. São duas siglas, HA e AS:

HA = High Availabilty (alta disponibilidade);

AS = Auto Scale (Escala automática).

**O que esses conceitos querem dizer na prática?**

A alta disponibilidade quer dizer que o sistema praticamente não cai ou vai ter a disponibilidade mais alta possível, assim o sistema não fica offline nenhum segundo sequer porque caso tenhamos uma escala de clientes muito grande, se ficarmos 10 segundos fora, o prejuízo financeiro que isso vai gerar é muito grande, então a disponibilidade traz dinheiro.

Outro fator para termos essa disponibilidade é o quanto a arquitetura que planejamos tem de elasticidade para suportar o sistema. Vamos supor que eu tenho um servidor que suporte 100 usuários, se tivermos uma carga de 300 usuários, precisamos de 3 servers, então o Auto Scale é uma forma de você escalar a aplicação para termos alta disponibilidade.

Essas duas palavras combinadas é o que nós desejamos para todo o sistema, principalmente em uma startup, que o sistema fique online 100% do tempo e quando se tem picos de acesso o Auto Scaling suporte a elasticidade tanto para cima quanto para baixo, por exemplo, se eu tenho 100 usuários eu uso apenas um servidor, se subir eu aumento o numero de servidores e se baixar novamente, volto para um servidor, aumentando e diminuindo meus recursos computacionais de forma dinâmica. Isso é muito famoso usando a AMAZON, ela já tem ferramentas para esse tipo de dinamismo.

Obviamente apenas a alta disponibilidade já envolve muitas coisas, além do auto scaling, talvez precisamos de uma migração com zero down time, por exemplo, caso precisarmos aplicar uma atualização de software, que é um desafio bem grande. Essas duas siglas são muito comuns em requisitos de sistemas para startups.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=HA%20e%20AS%20em%20Aplica%C3%A7%C3%A3o%20Web%20-%20Web%20Basic&url=https%3A%2F%2Fdevpleno.com%2Fha-e-as) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fha-e-as)

---

# HA (High Availability) e AS (Auto Scale) - DevPleno

URL: https://devpleno.com/ha-high-availability-e-as-auto-scale

> Neste vídeo falo de 2 características que é a auto disponibilidade e o auto scaling, muito buscadas por startups para suportar a escalabilidade do negócio....

Fundamentos

## HA (High Availability) e AS (Auto Scale)

T
Por Tulio Faria • 9 de agosto de 2016

[Fundamentos](/tag/fundamentos)

Neste vídeo falo de 2 características que é a auto disponibilidade e o auto scaling, muito buscadas por startups para suportar a escalabilidade do negócio.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=HA%20(High%20Availability)%20e%20AS%20(Auto%20Scale)&url=https%3A%2F%2Fdevpleno.com%2Fha-high-availability-e-as-auto-scale) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fha-high-availability-e-as-auto-scale)

---

# Template HTML simples - Hands-on Handlebars - DevPleno

URL: https://devpleno.com/handlebars-template-html-simples

> O Handlebars é uma forma de lidarmos com template HTML. É algo simples, mas que possui diversas opções que podemos fazer. Vou mostrar um caso bem específic...

Javascript

## Template HTML simples - Hands-on Handlebars

T
Por Tulio Faria • 13 de junho de 2017

[Javascript](/tag/javascript)

O Handlebars é uma forma de lidarmos com template HTML. É algo simples, mas que possui diversas opções que podemos fazer. Vou mostrar um caso bem específico dele. Podemos utilizar com NodeJS, ExpressJS, mas eu vou mostrar em conjunto com jQuery para um tipo de solução que eu venho utilizando para fazer algumas coisas mais rápidas.

Tenho aqui um arquivo dados.json que vai servir para simular o consumo de uma EPI, vamos carregar os dados via AJAX para o html:

;[{
name: 'Tulio',
lastName: 'Faria'
},
{
name: 'Vitor',
lastName: 'Machado'
}]
No HTML, vamos importar da CDN o jQuery e o Handlebars e testar se estão carregando os nomes do Json:

&#x3C;html>
&#x3C;body>
&#x3C;div id="people">
people
&#x3C;/div>
&#x3C;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">&#x3C;/script>
&#x3C;script src="https://cdnjs.cloudflare.com/ajax/libs/handleba
rs.js/4.0.10/handlebars.amd.js"&#x3C;/script>
&#x3C;script>
$function(){
$.get('dados.json't=' +new Date().getTime(), function(data){
console.log(data);
}
})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Se eu quiser criar uma lista com esses nomes para colocar na DIV ‘people’ e que seja da seguinte forma:

&#x3C;div id='people'>
&#x3C;div>
&#x3C;strong>Name: &#x3C;/strong>nome
&#x3C;br />
&#x3C;strong>Last Name: &#x3C;/strong>last
&#x3C;br />
&#x3C;/div>
&#x3C;/div>
Se fossemos fazer isso com jquery teríamos que interpolar a string dentro da function, como por exemplo:

&#x3C;script>
$function(){
$.get('dados.json't=' +new Date().getTime(), function(data){
$("#people").append('&#x3C;div>&#x3C;strong>Name: &#x3C;/strong> '+nome)
$("#people").append('&#x3C;div>&#x3C;strong>Last Name: &#x3C;/strong> '+last)
}
})
&#x3C;/script>
Isso dá muito trabalho, então vamos criar uma parte do template usando Script do handlebars. Ao invés de ficar concatenando Strings, vou colar a div dentro dele e onde eu quiser colocar o nome apenas coloco {{name}}:

&#x3C;script type='text/x-handlebars-templete' id='person-templete'>
&#x3C;div>
&#x3C;strong>Name: &#x3C;/strong>
{{ nome }}
&#x3C;br />
&#x3C;strong>Last Name: &#x3C;/strong>
{{ lastName }}
&#x3C;br />
&#x3C;/div>
&#x3C;/script>
Temos, então, que pegar essa String de dentro do script, correto? Então vamos fazer o seguinte: pegar o html que está ali dentro, que é um template do Handlebars, ele vai trocar de forma automática. Depois disso, vamos criar um template do handlebars. Lembrando que o personTemplete você pode renderizar:

&#x3C;script>
$function(){
$.get'dados.json't=' +new Date().getTime(), function(data){
const templeteString = $("#person-templete").html();
const personTemplete = Handlebars.compile(templeteString);
const html = personTemplete({
name: 'Tulio',
lastName: 'Faria'
})
$("people").html(html);
}
})
&#x3C;/script>
Com isso, o template já ficou bem mais fácil, pois apenas damos um append no html. Se funcionar, podemos até tirar a div da parte de cima do nosso HTML que vai funcionar perfeitamente.

Obviamente, para uma pessoa, só daria para fazer na mão, mas imagine se quisermos colocar várias pessoas, é possível fazer isso também por meio da linguagem de script e ao invés de passar uma pessoa só, vou passar a minha lista de pessoas.

&#x3C;html>
&#x3C;body>
&#x3C;div id="people">
Loading...
&#x3C;/div>
&#x3C;script type="text/x-handlebars-templete" id="person-templete">
{{#earch people}}
&#x3C;div>
&#x3C;strong>Name: &#x3C;/strong>{{nome}}&#x3C;br />
&#x3C;strong>Last Name: &#x3C;/strong>{{lastName}}&#x3C;br />
&#x3C;hr />
&#x3C;/div>
{{/each}}
&#x3C;/script>

&#x3C;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">&#x3C;/script>

&#x3C;script src="https://cdnjs.cloudflare.com/ajax/libs/handleb
ars.js/4.0.10/handlebars.amd.js"&#x3C;/script>

&#x3C;script>
$function(){
$.get('dados.json't=' +new Date().getTime(), function(data){
const templeteString = $("#person-templete").html();
const personTemplete = Handlebars.compile(templeteString);
const html = personTemplete({ people: data })
$("people").html(html);
}
})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Perceba que o Name e o lastName ele pega de dentro do contexto do people do dados.json. Outra coisa legal é que se eu colocar algo dentro de dados.json:

[{
"name": "Tulio",
"lastName": "Faria",
"adress": {
"city": "Pouso Alegre"
}
},{
"name": "Vitor",
"lastName": "Machado"
"adress": {
"city": "São Paulo"
}
}]
Podemos utilizar a seguinte estrutura:

{{#earch people}}
&#x3C;div>
&#x3C;strong>Name: &#x3C;/strong>{{nome}}&#x3C;br />
&#x3C;strong>Last Name: &#x3C;/strong>{{lastName}}&#x3C;br />
&#x3C;strong>City: &#x3C;/strong>{{adress.city}}&#x3C;br />
&#x3C;hr />
&#x3C;/div>
{{/each}}
Perceba que estamos pegando o adress e o que tem dentro dele. Isso é bem bacana, podemos fazer muitas coisas com Handlebars.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Template%20HTML%20simples%20-%20Hands-on%20Handlebars&url=https%3A%2F%2Fdevpleno.com%2Fhandlebars-template-html-simples) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhandlebars-template-html-simples)

---

# Hands-on: Creat-React-App - DevPleno

URL: https://devpleno.com/hands-creat-react-app

> Neste Handson, testo um pacote para React, o CreateReactApp. Confira: <div className=&#34;embedresponsive embedresponsive16by9&#34;   <iframe className=&#34;embedrespo...

Javascript

## Hands-on: Creat-React-App

T
Por Tulio Faria • 9 de março de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Neste Hands-on, testo um pacote para React, o Create-React-App.

Confira:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Creat-React-App&url=https%3A%2F%2Fdevpleno.com%2Fhands-creat-react-app) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-creat-react-app)

---

# Hands-on: Injeção de Dependência é bom mesmo? - DevPleno

URL: https://devpleno.com/hands-injecao-de-dependencia-e-bom-mesmo

> Muitas pessoas ainda me perguntam se injeção de dependência é realmente bom. Você também ainda não está convencido sobre isso? Neste vídeo, crio um mock e ...

Javascript

## Hands-on: Injeção de Dependência é bom mesmo?

T
Por Tulio Faria • 17 de abril de 2017

[Javascript](/tag/javascript)

Muitas pessoas ainda me perguntam se injeção de dependência é realmente bom. Você também ainda não está convencido sobre isso? Neste vídeo, crio um mock e um teste com injeção de dependência para te convencer ainda mais sobre a importância desta técnica.

Confira o video:

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Inje%C3%A7%C3%A3o%20de%20Depend%C3%AAncia%20%C3%A9%20bom%20mesmo%3F&url=https%3A%2F%2Fdevpleno.com%2Fhands-injecao-de-dependencia-e-bom-mesmo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-injecao-de-dependencia-e-bom-mesmo)

---

# Hands-on: Json-Server - DevPleno

URL: https://devpleno.com/hands-json-server

> Todo mundo já passou pela situação onde precisava fazer um teste com frontend e precisou de uma API funcionando. Não seria interessante ter uma forma de ac...

Javascript

## Hands-on: Json-Server

T
Por Tulio Faria • 10 de abril de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Todo mundo já passou pela situação onde precisava fazer um teste com front-end e precisou de uma API funcionando. Não seria interessante ter uma forma de acessar um formato de dados simples, sem muita configuração? Veja como é simples criar uma REST API para testes com o Json-server.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Json-Server&url=https%3A%2F%2Fdevpleno.com%2Fhands-json-server) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-json-server)

---

# Hands-on: Ler arquivo linha a linha - DevPleno

URL: https://devpleno.com/hands-ler-arquivo-linha-linha

> Neste handson, vamos ver como conseguimos utilizar o readline em conjunto com Readable Stream para ler linhas de um arquivo texto. Como faremos isso? Prime...

Javascript

## Hands-on: Ler arquivo linha a linha

T
Por Tulio Faria • 8 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands-on, vamos ver como conseguimos utilizar o readline em conjunto com Readable Stream para ler linhas de um arquivo texto.

**Como faremos isso?**

Primeiramente vamos importar o headline (que já faz parte do core do node) e o FS (file System). Em seguida, vamos ler o arquivo com o readable.

const readline = require('readline')
const fs = require('fs')
const readable = sf.createReadStream('arquivo.html')
Vamos criar uma instancia do readline e no imput vamos passar o readable

const rl = readline.creatInterface({
input: readable,
output: process.stdout
})
**Mas para que isso serve?**

Isso é legal, pois podemos fazer assim por exemplo: rl

.on('line', (line) => {
console.log('>>>', line)
})
Se rodarmos este código, o node vai mostrar o HTML inteiro linha a linha.

Para provar realmente que ele esta fazendo isso, podemos fazer o seguinte:

rl.on('line', (line) => {
console.log('>>>', line.toUpperCase())
})
Então o node retornará tudo em maiúsculo. Neste código, também podemos ler um CSV, bastaria eu processar a linha do CSV dentro do console.log e temos uma forma de rodar o arquivo sem precisar gastar muita memória.

**Conclusão**

Quando temos muitos dados, não é necessário jogar na memória. Utilizando essa forma, a leitura vai ser bem mais vantajosa.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Ler%20arquivo%20linha%20a%20linha&url=https%3A%2F%2Fdevpleno.com%2Fhands-ler-arquivo-linha-linha) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-ler-arquivo-linha-linha)

---

# Hands-on: Low-db - DevPleno

URL: https://devpleno.com/hands-low-db

> Neste handson, um módulo muito interessante para termos um banco de dados bem simples baseado em Json. Uma boa alternativa para aplicações desktop/electron...

Javascript

## Hands-on: Low-db

T
Por Tulio Faria • 24 de abril de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands-on, um módulo muito interessante para termos um banco de dados bem simples baseado em Json. Uma boa alternativa para aplicações desktop/electron e para guardar configurações de aplicações.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Low-db&url=https%3A%2F%2Fdevpleno.com%2Fhands-low-db) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-low-db)

---

# Hands-on: Benchmark - DevPleno

URL: https://devpleno.com/hands-on-benchmark

> Neste vídeo, fazemos o Benchmark entre duas funções em Javascript utilizando o Benchmark.js. A vantagem deste módulo é que ele compara as funções rodando v...

Javascript

## Hands-on: Benchmark

T
Por Tulio Faria • 3 de março de 2017

[Javascript](/tag/javascript)

Neste vídeo, fazemos o Benchmark entre duas funções em Javascript utilizando o Benchmark.js. A vantagem deste módulo é que ele compara as funções rodando várias vezes e fazendo a média entre as execuções.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Benchmark&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-benchmark) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-benchmark)

---

# ChalkJS - Deixe as saídas de seu console.log coloridas e com estilo - DevPleno

URL: https://devpleno.com/hands-on-chalkjs

> O ChalkJS é um módulo que basicamente permite uma saída colorida no console. Primeiramente vamos importar o módulo: Agora, no editor, vamos escrever um cód...

Javascript

## ChalkJS - Deixe as saídas de seu console.log coloridas e com estilo

T
Por Tulio Faria • 11 de setembro de 2017

[Javascript](/tag/javascript)

O ChalkJS é um módulo que basicamente permite uma saída colorida no console. Primeiramente vamos importar o módulo:

yarn add chalk
Agora, no editor, vamos escrever um código. Eu criei um arquivo chalk.js e dentro dele vamos colocar o seguinte:

const chalk = require('chalk')

console.log('DevPleno')
Ao mandarmos rodar o código, a resposta sairá normalmente, mas agora vamos utilizar de uma forma diferente:

console.log(chalk.red('DevPleno'))
Agora, se rodarmos o código, ele vira da seguinte forma:

O interessante é que podemos combinar as seguintes variações:

Ao aparecer um erro ou um alerta, por exemplo, podemos colocar um ‘bgRed’:

Uma outra coisa interessante é que podemos abrir o estilo, por exemplo:

console.log(chalk.styles.red.open + 'Vermelho' + chalk.style.red.close)

Então podemos estilizar todos os console.log que tiverem entre o open e o close, isso é muito legal, pois podemos, por exemplo, printar uma mensagem em vermelho que é grande, podemos dar só um open e um close. Vale muito a pena dar uma olhada na documentação até para saber quais são os parâmetros que ele aceita.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ChalkJS%20-%20Deixe%20as%20sa%C3%ADdas%20de%20seu%20console.log%20coloridas%20e%20com%20estilo&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-chalkjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-chalkjs)

---

# Hands-on: CO - DevPleno

URL: https://devpleno.com/hands-on-co

> Neste handson iremos usar o CO, um módulo que permite que você organize o fluxo de seu código assíncrono com generators, o que faz seu código parecer muito...

Javascript

## Hands-on: CO

T
Por Tulio Faria • 7 de março de 2017

[Javascript](/tag/javascript)

Neste hands-on iremos usar o CO, um módulo que permite que você organize o fluxo de seu código assíncrono com generators, o que faz seu código parecer muito com código síncrono.

## Confira:

Deixe suas sugestões e dúvidas nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), inscreva-se no canal e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20CO&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-co) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-co)

---

# Hands-on: Currying - DevPleno

URL: https://devpleno.com/hands-on-currying

> Continuando o assunto sobre programação funcional, o assunto deste vídeo é Currying  uma técnica bastante interessante para composição de funções.  Confira...

Javascript

## Hands-on: Currying

T
Por Tulio Faria • 17 de abril de 2017

[Javascript](/tag/javascript)

Continuando o assunto sobre programação funcional, o assunto deste vídeo é Currying - uma técnica bastante interessante para composição de funções.

## Confira:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Currying&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-currying) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-currying)

---

# Hands-on: Faker - DevPleno

URL: https://devpleno.com/hands-on-faker

> Você já precisou gerar dados fictícios para seus projetos? As chances são que sim, e de forma bem recorrente, né? Neste vídeo, um handson do Faker, uma fer...

Javascript

## Hands-on: Faker

T
Por Tulio Faria • 24 de abril de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Você já precisou gerar dados fictícios para seus projetos? As chances são que sim, e de forma bem recorrente, né? Neste vídeo, um hands-on do Faker, uma ferramenta que facilita bastante este processo de geração de dados de testes.

Confira o video:

Não esqueça de deixe suas dúvidas e sugestões nos comentários, curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Faker&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-faker) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-faker)

---

# Jest - Como utilizar a ferramenta de testes criada pelo Facebook - DevPleno

URL: https://devpleno.com/hands-on-jest

> O Jest foi criado pelo Facebook com o objetivo de rodar os testes de uma maneira eficiente e com menos configurações. Aqui eu já tenho um diretório para o ...

Javascript

## Jest - Como utilizar a ferramenta de testes criada pelo Facebook

T
Por Tulio Faria • 8 de julho de 2017

[Javascript](/tag/javascript)

O Jest foi criado pelo Facebook com o objetivo de rodar os testes de uma maneira eficiente e com menos configurações.

Aqui eu já tenho um diretório para o nosso teste chamado jest-handson, então vou rodar:

yarn add jest --dev
Vamos colocar como dependência de desenvolvimento, que é o que precisamos realmente e o yarn já vai resolver até mesmo a questão de criar um package.json.

Dentro do Package.json tem o código:

{
"devDependencies": {
"jest": "^19.0.2"
}
}
E vamos adicionar:

{
"devDependencies": {
"jest": "^19.0.2"
},
"scripts":{
"test": "jest"
}
}
Se rodarmos o yarn test agora, ele já sabe como rodar e retornou que não temos nenhum teste para rodar.

Então vamos criar um módulo chamado modulo1 para testarmos:

const modulo1 = {
func1: (a) => a + 1
}
module.exports = modulo1
Uma coisa que acho muito interessante de fazer com os testes é criá-los juntos com a implementação, por exemplo, modulo1.js e modulo1.test.js. Até os testes ficam mais fáceis porque não é preciso navegar nos diretórios quando salvá-lo na mesma pasta do módulo. Dentro do modulo1.test, vamos importar o modulo1:

const modulo1 = require('./modulo1')
describe('basic features', () => {
it('should return the right value', () => {
expect(modulo1.func1(10)).toBe(11)
})
})
Perceba que o Jest tem as mesmas de outros test runners, como por exemplo, criar uma switch test e dentro usar um it. Vamos passar 10 e ele deve retornar o valor 11. Ao rodar o yarn, ele organiza dizendo que os testes deram certo. Lembrando que é sempre bom fazer o teste falhar, colocando 12, por exemplo, no lugar do 11, e rodar para ver se o teste em si está funcionando.

Agora imagine que por algum motivo no local de ‘a’ deve rodar uma função em específico, vamos supor uma função 2:

const modulo1 = {
func1: (a) => a + 1,
func2: (a, cb) => a + cb(a)
}
module.exports = modulo1
Podemos fazer o seguinte para testar essa função:

const modulo1 = require('./modulo1')
describe('basic features', () => {
it('should return the right value', () => {
expect(modulo1.func1(10)).toBe(11)
})
it('func2', () => {
const cb = jest.fn()
cb.mockReturnValue(1)
expet(modulo1.func2(10, cb)).toBe(11)
})
})
Não implementamos ali a função 2, mas passamos um mock para ele, ou seja, passamos uma função falsa para essa função 2 usando o jest.fn, que serve exatamente para mockar funções. Dentro do mock, queremos que ele retorne 1.

Se colocarmos um

console.log(cb.mock.calls)
vamos conseguir até mesmo inspecionar se a chamada foi com o valor correto.

O Jest é muito interessante, pois já vem com esquema de mock, a parte de axceptions, parte de test runner e é um pouco mais rápido, principalmente quando formos testar componentes em React, e ainda tem um esquema chamado SnapShot, que tira ‘fotos’ dos componentes que você fizer no React para ele perceber se precisa ou não executar aquele componente. Por exemplo, renderizamos esse componente usando o JSDom e, se falhar, comparando essas fotos do componente de antes e depois, você será avisado.

Confira:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Jest%20-%20Como%20utilizar%20a%20ferramenta%20de%20testes%20criada%20pelo%20Facebook&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-jest) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-jest)

---

# Hands-on: Marked - DevPleno

URL: https://devpleno.com/hands-on-marked

> Neste vídeo, faço um handson do módulo Marked, que tem a função de converter Markdown para HTML. Confira o video: <div className=&#34;embedresponsive embedresp...

Javascript

## Hands-on: Marked

T
Por Tulio Faria • 2 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste vídeo, faço um hands-on do módulo Marked, que tem a função de converter Markdown para HTML.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Marked&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-marked) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-marked)

---

# Hands-on: Node JS - Request - DevPleno

URL: https://devpleno.com/hands-on-node-js-request

> Nesta nova série, experimento módulos, pacotes ou ferramentas. O pacote demonstrado neste vídeo é o request, que nos permite fazer requisições HTTP de mane...

Javascript

## Hands-on: Node JS - Request

T
Por Tulio Faria • 24 de fevereiro de 2017

[Javascript](/tag/javascript)

Nesta nova série, experimento módulos, pacotes ou ferramentas. O pacote demonstrado neste vídeo é o request, que nos permite fazer requisições HTTP de maneira simples.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Node%20JS%20-%20Request&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-node-js-request) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-node-js-request)

---

# Hands-on: NodeJS - PM2 - DevPleno

URL: https://devpleno.com/hands-on-nodejs-pm2

> Você precisa deixar seu script rodando direto sem precisar iniciálo ou travando seu console? No handson deste post, vou mostrar o PM2, um gerenciador de pr...

Javascript

## Hands-on: NodeJS - PM2

T
Por Tulio Faria • 24 de fevereiro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Você precisa deixar seu script rodando direto sem precisar iniciá-lo ou travando seu console? No hands-on deste post, vou mostrar o PM2, um gerenciador de processos que pode ser utilizado em node ou para outras linguagens e tecnologias também. Confira o vídeo-tutorial.:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20NodeJS%20-%20PM2&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-nodejs-pm2) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-nodejs-pm2)

---

# Nodemon: Monitore alterações e reinicie automaticamente seus scripts - DevPleno

URL: https://devpleno.com/hands-on-nodemon

> Neste handson, vamos falar mais especificamente sobre o Nodemon. Primeiramente vamos instalar: Eu poderia instalar localmente também apenas tirando o g, as...

Javascript

## Nodemon: Monitore alterações e reinicie automaticamente seus scripts

T
Por Tulio Faria • 28 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands-on, vamos falar mais especificamente sobre o Nodemon. Primeiramente vamos instalar:

npm install -g nodemon
Eu poderia instalar localmente também apenas tirando o -g, assim ele não ficaria disponível no sistema inteiro. Mas, o que o nodemon faz?

Ele permite que a gente rode um script em node e que ele fique monitorando os arquivos. Caso você altere, ele restarta automaticamente o servidor, isso é muito interessante principalmente quando vamos fazer algo com o express. Eu tenho um server.js:

const express = require('express');

const = express();
app.get('/', function (req, res){
console.log('>> here...' +new Date().getTime())
res.send('Hello World');
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
Caso eu modifique alguma linha, por exemplo:

console.log('Example app listening on port 3000!****')
Ele restarta o server e já me diz o server foi reiniciado devido a mudanças:

Vamos supor que por algum motivo eu não quero alguns arquivos, então eu posso fazer ele ignorar esses arquivos. Vou fazer o teste na pasta lib:

nodemon --ignore lib/ server.js
Assim nada que modificarmos dentro dessa pasta vai fazer o server ser restartado.

Outra coisa interessante é que se digitarmos rs e dermos um enter, conseguimos forçar um restart dele também.

Essa ferramenta ajuda bastante a agilizar o processo de desenvolvimento recarregando os arquivos sempre que precisarmos. Tem outras opções, por exemplo, conseguimos criar um arquivo de configuração, mas se usarmos apenas para restartar o servidor, já é muito útil e aumenta muito a produtividade.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Nodemon%3A%20Monitore%20altera%C3%A7%C3%B5es%20e%20reinicie%20automaticamente%20seus%20scripts&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-nodemon) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-nodemon)

---

# PKG - Transforme seu aplicativo Node em executável - DevPleno

URL: https://devpleno.com/hands-on-pkg

> Use o PKG para compilar seu app Node.js em executável para Windows, Mac e Linux. Tutorial passo a passo com exemplos.

Javascript

## PKG - Transforme seu aplicativo Node em executável

T
Por Tulio Faria • 9 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste post, faremos um hands-on do módulo PKG, que serve basicamente para transformarmos nosso aplicativo node em executável, ou seja, podemos distribuir esta aplicação sem precisar instalar o ambiente do node ou até mesmo mandar o mesmo dentro deste executável.

**Qual a vantagem disso?**

Com isso, podemos, por exemplo, efetuar demonstrações ou distribuir o software em si. Uma das ideias que vou mostrar aqui é distribuir uma aplicação em express, podendo enviar este arquivo a um cliente apenas dentro de um executável.

Primeiramente vamos instalar este módulo:

npm install -g pkg
Em seguida vamos adicionar um express:

yarn add express
Depois iremos no Visual Studio Code e criamos um index.js

const express = require('express')
const app = express()
app.get('/', (req, res)=>{
res.send('Bem vindo ao meu-app')
)}
app.listen(3000, ()=>{
console.log('Running meu-app')
}
Ele irá ‘ouvir’ a porta 3000 e, se tudo ocorrer bem, mostrará a mensagem “running meu-app”

Originalmente o package virá assim:

{
"dependencies": {
"express": "^4.15.2"
}
}
Mas iremos fazer algumas modificações. A primeira coisa que devemos fazer é adicionar o nome do nosso aplicativo (“name”: “meuapp”), precisamos também dizer quem é nosso ponto de entrada (“bin”: “index.js”)

e a última modificação é opcional, pois nele podemos dizer se queremos mandar algum diretório além do module e qual target, ou seja, quais versões do Node quero ‘empacotar’ neste aplicativo.

{
name": "meuapp",
"dependencies": {
"express": "^4.15.2"
},
"bin": "index.js",
"pkg":{
"assets":["view/\*\*/\*"],
"target": ["node7"]
}
}
Para executarmos isso, vamos no Node e colocamos:

pkg . (pkg ponto)
Com isso, solicitamos o node para empacotar a aplicação utilizando o package.json. Isso é legal porque podemos entregar este aplicativo para o cliente, demo, trial, etc, criando um instalador.

Lembrando que nós continuamos tendo acesso total ao código. Usando o express, podemos abrir em outra máquina e ler a faixa de IP que a máquina principal está rodando e na interface mostrar para o cliente “para acessar este aplicativo use o IP xxx.xxx.xxx.xxx em uma máquina de sua rede.”

Assim, várias pessoas conseguem acessar o mesmo aplicativo. É possível utilizar o Package sem a necessidade do Package.json, por exemplo passando direto o ponto de entrada, mas eu prefiro usar o package.json para ficar documentado, deste modo não precisamos lembrar todos os parâmetros sempre.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=PKG%20-%20Transforme%20seu%20aplicativo%20Node%20em%20execut%C3%A1vel&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-pkg) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-pkg)

---

# Hands-on: Pre-Commit - DevPleno

URL: https://devpleno.com/hands-on-pre-commit

> O módulo testado neste post é o PreCommit, que nos permite executar tarefas antes de fazer Commit em seus repositórios Git. Assista o vídeo para entender c...

Javascript

## Hands-on: Pre-Commit

T
Por Tulio Faria • 24 de fevereiro de 2017

[Javascript](/tag/javascript)

O módulo testado neste post é o Pre-Commit, que nos permite executar tarefas antes de fazer Commit em seus repositórios Git.

Assista o vídeo para entender como funciona:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Pre-Commit&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-pre-commit) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-pre-commit)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/hands-on-reactjs-materiaisdeapoio

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /hands-on-reactjs-materiaisdeapoio to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Hands-on: Readline - DevPleno

URL: https://devpleno.com/hands-on-readline

> Neste post vamos fazer um handson é de um módulo padrão com o core do node: o readline. O que temos que fazer? Vamos importar primeiro o readline e instanc...

Javascript

## Hands-on: Readline

T
Por Tulio Faria • 8 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste post vamos fazer um hands-on é de um módulo padrão com o core do node: o readline.

**O que temos que fazer?**

Vamos importar primeiro o readline e instanciar um novo readline.

const readline = require('readline')
const rl = readline.createInterface({
input: process.stdin,
output: process.stout
})
Como o readline é um modulo que permite que lidemos com entrada e saída, podemos atrelar um readable stream no input e output padrão.

**Pra que serve isso?**

Podemos construir várias ‘ferramentinhas’ com o readline, a principal delas é a seguinte:

rl.on('line', (line)==>{
console.log('line >>', line)
})
E toda vez que eu digitar algo, ele irá retornar o que escrevi adicionando o que esta no line. Mas não é só isso. Podemos saber, por exemplo, se o usuário apertou Ctrl+C para fechar o prompt:

rl.on('line', (line)==>{
console.log('line >>', line)
})
rl.on('SIGINT', () => {
console.log('bye'),
rl.pause()
})
Ao fazer isso, quando o usuário apertar Ctrl+C ele irá escrever ‘bye’ e irá sair, isso acontece, pois estamos chamando o rl.pause() já que estamos pausando e não pegando mais nada do stdin.

Podemos criar várias formas de interação, vou dar mais um exemplo prático.

rl.question('qual o seu nome?', (nome) => {
console.log('prazer ', nome)
})
Rodando o node, a pergunta irá aparecer e ao escrever o console.log vai ser retorndado: prazer mais o nome que você digitou.

Em Java, temos algo bem semelhante. Conseguimos dar o readline no stream e ele devolve a linha digitada pelo usuário.

**Conclusão**

Apenas com o realine já é possível construir uma ferramenta simples como ler dois arquivos e fazer algo apenas utilizando puramente o rl.on e o rl.question.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Readline&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-readline) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-readline)

---

# Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios - DevPleno

URL: https://devpleno.com/hands-on-rimraf

> Durante a semana fizemos diversos procedimentos em lot, e uma das coisas que nós fizemos foi apagar um diretório de maneira recursiva (pegar o diretório co...

Javascript

## Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios

T
Por Tulio Faria • 10 de agosto de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Durante a semana fizemos diversos procedimentos em lot, e uma das coisas que nós fizemos foi apagar um diretório de maneira recursiva (pegar o diretório completo e apagar).

Seria mais ou menos o seguinte: tenho um diretório no VS Code e dentro desse diretório tivesse um dir1, dentro dele um dir2, dentro um dir3 e por aí vai. Precisamos apagar a estrutura toda.

A forma que temos para fazer isso no padrão do node usando o FS é ter que apagar um por um, mas vamos utilizar um módulo chamado Rimraf para que ele faça esse processo.

yarn add rimraf
Ele é um pacote bem simples. Ao adicionar, o [Yarn](https://www.devpleno.com/hands-on-yarn/) já cria o package.json e o yarn.lock para travar as versões. Agora vamos criar um arquivo que vai apagar o diretório. Esse arquivo vai se chamar apagar.js:

const rimraf = require('rimraf')
rimraf('dir1', function () {
console.log('done')
})
Ao rodar, o código perceba que ele apagou o diretório. É muito legal utilizar isso porque o filesystem padrão do node não permite que a gente apague diretório de forma recursiva, isso é muito importante para conseguir agilizar, já que não precisamos criar nada recursivamente.

O Rimraf tem outra coisa muito interessante que é apagar diretórios que não estão vazios, temos algumas limitações como, por exemplo, se pegarmos os rmdir que só apaga diretório vazio.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Rimraf%20-%20Remova%20diret%C3%B3rios%20inteiros%20mesmo%20que%20eles%20n%C3%A3o%20estejam%20vazios&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-rimraf) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-rimraf)

---

# Hands-on: ShellJS - DevPleno

URL: https://devpleno.com/hands-on-shelljs

> Uma tarefa que faço bastante no meu dia a dia é a construção de ferramentas para transformar dados, fazer algum processamento ou até mesmo copiar montantes...

Javascript

## Hands-on: ShellJS

T
Por Tulio Faria • 3 de março de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Uma tarefa que faço bastante no meu dia a dia é a construção de ferramentas para transformar dados, fazer algum processamento ou até mesmo copiar montantes de dados.

Estas ferramentas quando precisam de algum comando do shell do linux, acabam restringindo a execução destas ferramentas a uma só plataforma. O ShellJS é um módulo que implementa comandos do shell do linux em Javascript multi-plataforma.

Assim seu script pode utilizar recursos do shell e ainda ser multiplataforma.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20ShellJS&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-shelljs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-shelljs)

---

# Hands-on: Slack - DevPleno

URL: https://devpleno.com/hands-on-slack

> Neste handson iremos fazer um bot simples que envia notificações utilizando o Slack. O Slack vem sendo bastante utilizado para comunicação corporativa (eu ...

Javascript

## Hands-on: Slack

T
Por Tulio Faria • 6 de março de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste hands-on iremos fazer um bot simples que envia notificações utilizando o Slack.

O Slack vem sendo bastante utilizado para comunicação corporativa (eu mesmo uso bastante). E concentrar informações a respeito da sua empresa ou projeto nele é bem interessante.

[Para criar um bot no slack entre aqui.](https://my.slack.com/apps/A0F7YS25R-bots)

const token = 'xoxb-....'
const Api = require('@slack/client').WebClient
const api = new Api(token)
const RtmClient = require('@slack/client').RtmClient
const rtm = new RtmClient(token)
const RTM_EVENTS = require('@slack/client').RTM_EVENTS
api.channels.list(function (err, info) {
const channelId = info.channels
.filter((channel) => channel.name === 'general')
.map((channel) => channel.id)[0]
rtm.on(RTM_EVENTS.MESSAGE, (msg) => {
rtm.sendMessage(msg.text, channelId)
})

rtm.start()
})
Já pensou o que você vai criar notificar no Slack para sua equipe de forma automática?

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Slack&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-slack) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-slack)

---

# Hands-on - Socket.io Parte 3 - DevPleno

URL: https://devpleno.com/hands-on-socket-io-parte-3

> Nesta terceira parte sobre comunicação em temporeal com NodeJS e Socket.io, vamos começar com algo muito interessante: como podemos agrupar usuários para o...

Javascript

## Hands-on - Socket.io Parte 3

T
Por Tulio Faria • 15 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Nesta terceira parte sobre comunicação em tempo-real com NodeJS e Socket.io, vamos começar com algo muito interessante: como podemos agrupar usuários para o envio de notificações. Também será abordado o conceito de rooms, uma maneira de segmentar os usuários. Vamos lá?!

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res)=>{
res.sendFile(__dirname+'/index.html')
})
io.on('connection', (socket)=>{
console.log('New connection', socket.id)
socket.on('msg', (msg)=>{
console.log(msg)
socket.broadcast.emit('msg', msg);
})
http.listen(3000, function(){
console.log('listening on port 3000')
})
}
Quando mandamos mensagens neste nosso código, estamos emitindo para todos os usuários. Se formos criar um jogo online, chat, temos um conceito de sala ou seção de um jogo. Agora vamos imaginar o seguinte: O usuário se conecta e a partir disso vamos pegar seu Socket, que é a representação do seu ID de usuário entre em uma sala utilizando um join, no exemplo utilizado ‘contador’. O join vai dizer que o usuário quer entrar na sala, ou canal, e a partir desse momento o usuário vai receber qualquer mensagem que for disparada neste canal.

io.on('connection', (socket)=>{
console.log('New connection', socket.id)
socket.on('msg', (msg)=>{
console.log(msg)
socket.broadcast.emit('msg', msg);
socket.join('contador');
})
Com isso podemos, por exemplo, contar quantas pessoas existem na sala e emitir uma mensagem com o número de pessoas nela de tempos em tempos.

Vamos executar um exemplo rápido onde criamos um contador, um set interval utilizando um io.to (que é uma instância do socket.io), selecionamos a sala a qual queremos mandar a mensagem e enviaremos a mensagem a cada 1 segundo.

let.counter = 0
setInterval(() => io.to('contador'))
io.to('contador').emit('msg', counter++)
}, 1000 )
Essa é uma das formas que temos de criar aplicações sem criar uma instância do socket.io para cada sala, o que seria muito trabalhoso. Além disso, ainda temos outro problema: existem situações em que temos que enviar a mensagem para todos, como no caso anterior, onde enviamos um broadcast para todos os usuários, mas também existem situações onde precisamos enviar para apenas um grupo de pessoas, então com isso podemos saber como vamos mediar, ou seja qual o alcance a mensagem terá.

Existem outras técnicas possíveis de aplicar no socket.io para ficar ainda mais rápido, como distribuir em mais máquinas por exemplo, mas isso já é um assunto avançado que vamos deixar para uma outra ocasião.

Confira o hands-on desta terceira parte também em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%20-%20Socket.io%20Parte%203&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-socket-io-parte-3) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-socket-io-parte-3)

---

# Hands-on: Standard - DevPleno

URL: https://devpleno.com/hands-on-standard

> Neste Handson, vou falar sobre um módulo da NPM, o Standard, com o qual você pode padronize o código fonte JavaScript da sua equipe. Confira os detalhes no...

Javascript

## Hands-on: Standard

T
Por Tulio Faria • 3 de março de 2017

[Javascript](/tag/javascript)

Neste Hands-on, vou falar sobre um módulo da NPM, o Standard, com o qual você pode padronize o código fonte JavaScript da sua equipe.

Confira os detalhes nos vídeos:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Standard&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-standard) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-standard)

---

# Hands-on - Three.JS - DevPleno

URL: https://devpleno.com/hands-on-threejs

> Hoje vamos falar um pouco sobre Three.JS, que é uma biblioteca muito interessante para conseguirmos fazer 3d no browser, melhor dizendo, ele faz essa compa...

Javascript

## Hands-on - Three.JS

T
Por Tulio Faria • 16 de novembro de 2017

[Javascript](/tag/javascript)

Hoje vamos falar um pouco sobre Three.JS, que é uma biblioteca muito interessante para conseguirmos fazer 3d no browser, melhor dizendo, ele faz essa compatibilidade para renderizar no browser com WebGL ou canvas. Para testar isso, vamos fazer um teste utilizando um cubo em 3d. No site deles, existem vários exemplos que já fizeram utilizando o three.js. Nós podemos baixar ele direto no site threejs.org ou simplesmente pegar um three.js de um CDN. Vamos criar um arquivo HTML. Quem já trabalhou com software 3d sabe que basicamente temos uma cena onde acontece as coisas em 3d :

&#x3C;html>
&#x3C;body>
&#x3C;script src='//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js'>&#x3C;/script>
&#x3C;script>
const scene = new THREE.Scene() const camera = new
THREE.PerspectiveCamera(75, window.in nerWidth / window.innerHight, 0.1,
1000) const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
documnet.body.appenChild(renderer.domElement)
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Esse parâmetro 75 é a profundidade de campo e o window é a proporção da câmera. Com isso, vamos criar uma câmera que tem uma visão cônica, igual a visão de uma câmera normal. Além disso, temos um renderizador que vai ser responsável por transformar isso em algo a ser enxergado. Por fim vamos adicionar ele dentro do body.

Ao rodar, temos uma tela preta, que é nossa scene. Agora vamos começar a adicionar alguns objetos:

&#x3C;html>
&#x3C;body>
&#x3C;script src="//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js">
&#x3C;/script>
&#x3C;script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.in
nerWidth / window.innerHight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
documnet.body.appenChild(renderer.domElement)
const box = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const cube = new THREE.Mesh( box, material )
scene.add( cube )
camera.position.z = 5
const animated = () => {
requestAnimationFrame( animate )
renderer.render( scene, camera)
}
animate()
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
O renderizador pega uma câmera e renderiza a cena na câmera, com isso ele cria a imagem a partir disso.

O animated fica renderizando a todo momento, então caso eu faça alguma alteração no meu objeto que está dentro da cena, vai ser atualizado na tela:

const animated = () => {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
cube.rotation.z += 0.01
renderer.render(scene, camera)
}
Fazendo isso, nosso cubo começa a girar em todas as direções. Isso está sendo renderizado com o WebGL e 3D. Conseguimos carregar modelos 3d, etc.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%20-%20Three.JS&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-threejs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-threejs)

---

# Yarn (uma alternativa ao gerenciador de pacotes/dependências NPM) - DevPleno

URL: https://devpleno.com/hands-on-yarn

> O 

Javascript

## Yarn (uma alternativa ao gerenciador de pacotes/dependências NPM)

T
Por Tulio Faria • 10 de agosto de 2017

[Javascript](/tag/javascript)

O ‘Yarn’ é uma maneira que temos de agilizar a instalação de algumas dependências. É uma alternativa ao NPM, um pouco mais rápido. A primeira coisa que temos que fazer é instalar:

npm install -g yarn
O Yarn usa o mesmo package.json que já temos no projeto em JavaScript e não adiciona nenhuma outra dependência, vai ser usado exatamente o mesmo repositório que o NPM já roda.

**Qual a vantagem do Yarn?** Uma das vantagens do Yarn é ele ser mais rápido, tende a resolver alguns conflitos de versão de módulo, cria um cash local para, por exemplo, caso você já tenha utilizado algum módulo qualquer com Yarn, aquela versão específica do módulo fica salva na sua máquina, caso você precise usar em outro projeto, ele utiliza do cash e não precisa baixar um novo. Além disso, ele resolve algumas coisas interessantes, por exemplo, é muito comum fazermos:

npm install nome-do-pacote
Quando fazemos isso, não adicionamos o pacote no package.json e isso gera um problema, nós podemos fazer um comid e em seguida um push para o git e quebrar na máquina de um outro desenvolvedor ou servidor porque na sua máquina vai rodar e quando chegar em outro computador, vai dar erro. Uma das coisas que o Yarn resolve é exatamente isso, não temos essa distinção de save ou não, se você adicionou um pacote, ele vai entrar no package.json. Vamos fazer um teste de velocidade. Eu criei um projeto onde só tem o package.json e só adiciona o async, primeiramente vamos fazer o npm:

npm install
A instalação demorou mais ou menos 6 segundos, não demorou tanto, agora vou deletar o node_modules e instalar via yarn:

yarn
O tempo de instalação foi de 3.39 segundos

Uma coisa que chateia bastante em projetos grandes é a ordem em que os pacotes são instalados. No NPM, ele segue uma forma não determinística, se rodarmos duas vezes com as mesmas circunstâncias, pode acontecer dos pacotes serem instalados em uma ordem diferente, o yarn resolve isso e ainda gera um checkson para cada dependência, então ele checa realmente se você está instalando a mesma versão que você travou no projeto. Além disso, é muito simples de verificar o yarn.lock, afinal é um arquivo texto bem simples.

Também podemos colocar:

yarn global add nome-do-pacote
Com isso ele deixa em escopo global.

Então ele é muito bom para aumentar a velocidade de instalação, principalmente no servidor de continuous integration porque, a medida que o servidor vai cacheando os módulos, é possível fazer o build da sua aplicação muito mais rápido.

Apenas por curiosidade, o Yarn foi desenvolvido pelo facebook em parceria com o google porque eles perceberam exatamente isso, quando você começa a escalar o projeto e aumentar o número de dependências, o npm começa a atrapalhar um pouco.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Yarn%20(uma%20alternativa%20ao%20gerenciador%20de%20pacotes%2Fdepend%C3%AAncias%20NPM)&url=https%3A%2F%2Fdevpleno.com%2Fhands-on-yarn) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhands-on-yarn)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreact

Redirecting to: / [Redirecting from /handsonreact to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreact-fb

Redirecting to: / [Redirecting from /handsonreact-fb to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreact-gg

Redirecting to: / [Redirecting from /handsonreact-gg to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreact-wpp

Redirecting to: / [Redirecting from /handsonreact-wpp to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreact-yt

Redirecting to: / [Redirecting from /handsonreact-yt to /](/)

---

# Redirecting to: /

URL: https://devpleno.com/handsonreactjs

Redirecting to: / [Redirecting from /handsonreactjs to /](/)

---

# High-order Functions - DevPleno

URL: https://devpleno.com/high-order-functions

> A dica de hoje é sobre Highorder Functions, que são funções que recebem ou retornam funções. Nós temos alguns tipos diferentes, como por exemplo vetor, map...

Javascript

## High-order Functions

T
Por Tulio Faria • 7 de abril de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

A dica de hoje é sobre High-order Functions, que são funções que recebem ou retornam funções. Nós temos alguns tipos diferentes, como por exemplo vetor, map e forEach, elas são high-order functions porque podemos passar um método que ele vai iterar dando o console.log.

const vetor = [1, 2, 3]

vetor.forEach((item) => console.log(item))
Perceba que estamos passando uma função para essa outra função que é uma high-order function, a função que passamos para ela chamamos de firt order function. Com ela conseguimos construir nossas próprias funções high-order. Por exemplo, caso queiramos fazer uma função mathOperator, que pega dois termos e retorna os números, e uma função que faz a operação que eu quero:

function mathOrder(num1, num2, op) {
return op(num1, num2)
}

console.log(mathOperator(1, 2, (num1, num2) => num1 + num2))
Então eu quis que essa high-order function chame o num1 e num2 e retorne a soma das duas.

Não necessariamente as high-order functions precisam ser puras, a única regra que temos é que ela recebe ou retorna uma função. No exemplo que fizemos, o op naquele momento é uma função. É importante lembrar que em JavaScript funções podem ser colocadas dentro de variáveis, por isso é possível criar high-order functions, uma coisa que não é tão simples de se fazer em Java por exemplo.

Lembrando que eu utilizei arrow function para facilitar mas eu poderia também fazer a operação:

function mathOrder(num1, num2, op) {
return op(num1, num2)
}
function operadorMult(num1, num2) {
return (
num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1\ *
num2
)
}
console.log(mathOperator(1, 2, (num1, num2) => num1 + num2))
console.log(mathOperator(1, 2, operadorMult))
High-order functions é um conceito muito importante para podermos injetar comportamento em uma função, esse é o grande ponto delas. Podemos compor funções que são muito mais simples, e isso é muito importante não só em programação funcional mas principalmente para simplificar as funções.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=High-order%20Functions&url=https%3A%2F%2Fdevpleno.com%2Fhigh-order-functions) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhigh-order-functions)

---

# Horário de trabalho na toptal - DevPleno

URL: https://devpleno.com/horario-de-trabalho-na-toptal

> Você também tem dúvida sobre como é o horário de trabalho quando se trabalha remotamente? Descubra como é na Toptal. <div className=&#34;embedresponsive embedr...

Carreira

## Horário de trabalho na toptal

T
Por Tulio Faria • 15 de fevereiro de 2018

[Carreira](/tag/carreira)

Você também tem dúvida sobre como é o horário de trabalho quando se trabalha remotamente? Descubra como é na Toptal.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hor%C3%A1rio%20de%20trabalho%20na%20toptal&url=https%3A%2F%2Fdevpleno.com%2Fhorario-de-trabalho-na-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhorario-de-trabalho-na-toptal)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/hr2

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /hr2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/hr2-aula1

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /hr2-aula1 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/hr2-aula2

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /hr2-aula2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/hr2-aula3

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /hr2-aula3 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/hrn0012019

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /hrn0012019 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/hrn0012019aula2

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /hrn0012019aula2 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/hrn0012019aula3

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /hrn0012019aula3 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Gerando HTML estáticos a partir de templates – EJS - DevPleno

URL: https://devpleno.com/html-estatico-com-templates-ejs

> Hoje quero mostrar como podemos utilizar os Templates Engines, que já temos no Express como EJS, PUG, etc, para gerar arquivos HTML estáticos. Com esse pro...

Javascript

## Gerando HTML estáticos a partir de templates – EJS

T
Por Tulio Faria • 22 de setembro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje quero mostrar como podemos utilizar os Templates Engines, que já temos no Express como EJS, PUG, etc, para gerar arquivos HTML estáticos. Com esse processo, conseguimos fazer um gerador de site estático tranquilamente. Obviamente já existem alguns sistemas que fazem isso, mas quero mostrar que também é possível utilizando somente essas linguagens de template. Eu já tenho um diretório criado, vou utilizar o EJS por ser mais parecido com JavaScript e fica mais fácil de utilizar:

yarn add ejs
Feito isso, vamos criar um arquivo novo index.js. A ideia é criar um template de teste. Vamos supor que ele tenha o seguinte:

&#x3C;h1>Teste&#x3C;/h1>
&#x3C;p>Teste de paragrafo&#x3C;/p>
Então, se eu colocar uma variável, como uma lista, eu posso fazer essa lista baseado em valores que eu mandei do meu script. A maneira mais comum de se utilizar o EJS é plugado-o dentro do express, porém nós também conseguimos utilizá-lo de forma independente, assim podemos simplesmente importar o EJS e, de alguma forma, dar um render nele:

const ejs = require('ejs')
const html = ejs.render('&#x3C;h1>&#x3C;%= teste %>&#x3C;/h1> ', { teste: 1234 })
console.log(html)
Se rodarmos isso, nós temos o nosso html. Nós processamos o html dentro dele, que era uma variável e gerou uma string a partir disso. Isso é bastante poderoso porque se formos pensar, as páginas de um site estático nada mais são do que strings processadas. Vamos fazer outro teste:

const ejs = require('ejs')
ejs.renderFile(
'./templete.ejs',
{
items: ['Tulio', 'Faria']
},
(err, html) => {
console.log(html)
}
)
Então estamos passando uma lista para items para ele jogar dentro do template, ao final disso, retorna um callback. Como estamos utilizando o items, podemos fazer o seguinte no nosso arquivo template.ejs:

&#x3C;h1>Teste&#x3C;/h1>
&#x3C;p>Teste de paragrafo&#x3C;/p>
&#x3C;ul>
&#x3C;% items.forEach(i => {%>
&#x3C;li>&#x3C;%= i %>&#x3C;/li>
&#x3C;% }) %>
&#x3C;/ul>
Se rodarmos novamente o script podemos ver ele processando isso:

Perceba que é muito melhor gerar dessa forma porque deixamos o template isolado. Podemos também importar, por exemplo, o file system e escrever o código em um novo html:

const ejs = require('ejs')
const fs = require('fs')
ejs.renderFile(
'./templete.ejs',
{
items: ['Tulio', 'Faria']
},
(err, html) => {
fs.writeFile('templete.html', html, (err) => {
console.log('ok')
})
console.log(html)
}
)
Ao rodar, ele gerará um template.html com o código. Caso você queira gerar seu site estático no gitHub, por exemplo, você pode criar alguns templates, configurar um script que manda essas informações para ele, como um json de configuração, depois disso criar um outro script que chama o ghpages, que publica esse site.

Essas são algumas dicas para utilizar no portfólio, sem usar um módulo ou um sistema já existente. Deixe suas dúvidas e sugestões nos comentários.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Gerando%20HTML%20est%C3%A1ticos%20a%20partir%20de%20templates%20%E2%80%93%20EJS&url=https%3A%2F%2Fdevpleno.com%2Fhtml-estatico-com-templates-ejs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fhtml-estatico-com-templates-ejs)

---

# Immutability e ImmutableJS - DevPleno

URL: https://devpleno.com/immutability-e-immutablejs

> Neste handson/dica, falo um pouco da importância da imutabilidade em programação funcional em Javascript. Além disso, apresento o módulo Immutable que nos ...

Javascript

## Immutability e ImmutableJS

T
Por Tulio Faria • 28 de março de 2017

[Javascript](/tag/javascript)

Neste hands-on/dica, falo um pouco da importância da imutabilidade em programação funcional em Javascript. Além disso, apresento o módulo Immutable que nos ajuda a lidar com imutabilidade.

Apenas para simplificar:

-
Imutabilidade / Immutability: nome da técnica

-
Imutável / Immutable: nome do módulo e qualidade da variável que não é alterada ao longo do tempo (ex: variável imutável)

## Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Immutability%20e%20ImmutableJS&url=https%3A%2F%2Fdevpleno.com%2Fimmutability-e-immutablejs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fimmutability-e-immutablejs)

---

# DevPleno - Ajudando desenvolvedores a construir produtos de classe mundial

URL: https://devpleno.com

> Cursos, mentorias e conteudo para desenvolvedores que querem evoluir na carreira e construir produtos incriveis.

Você pode tudo

## Code Hard. **
Live Free.

Ajudo desenvolvedores a construir produtos de classe mundial mantendo o estilo de vida que os fez começar a programar.

[Assistir no YouTube](https://youtube.com/@devpleno) [Ver Programas](#programas)
[](https://youtube.com/@devpleno)[](https://github.com/tuliofaria)[](https://x.com/devpleno)[](https://instagram.com/devpleno)

Em Desenvolvimento

proximo-projeto.ts

<div className="hero-container">
<Developer profile={tulio} />
<Life style="coding" />
</div>

## // Trilhas Curadas

### Escolha Seu Programa de Crescimento

Experiências de aprendizado personalizadas para cada estágio da sua jornada como desenvolvedor, da primeira linha de código ao seu próprio SaaS.

Iniciante

#### Fullstack Master 101

O plano definitivo para quem quer entrar na área de tecnologia com uma base sólida.

Em Breve

Avançado

#### Fullstack Master Pro

Eleve suas habilidades para liderar times e entregar produtos de alto desempenho.

[Conhecer Programa](https://go.devpleno.com/fsm)

Mentoria

#### TheSiders

Mentoria exclusiva 1:1 focada em construir e escalar seus produtos de software.

[Conhecer Programa](https://do.devpleno.com/thesiders)

Empreendedorismo

#### Simple SaaS

Da validação à escala. Uma jornada completa para transformar ideias em negócios.

Em Breve

Arquitetura

#### TheBestStack

Prepare sua arquitetura para o futuro. Aprenda a preparar sua stack para a velocidade da IA.

[Conhecer Programa](https://do.devpleno.com/the-best-stack)

Produtividade

#### My AI Way

Os bastidores do meu workflow pessoal com IA para entregar 10x mais em metade do tempo.

[Conhecer Programa](https://do.devpleno.com/the-best-stack)

[Finanças Conta49 Contabilidade Trabalha como PJ? Quer receber do seu SaaS de forma correta? A Conta49 é a minha contabil](https://www.conta49.com.br)

#### Origem

Comecei como dev ainda adolescente, entregando projetos às 3 da manhã (para aproveitar a internet discada mais barata).

#### Filosofia

"Código é apenas uma ferramenta; o valor está nos problemas que você resolve e na vida que você constrói."

## // Conheça o Humano

### Além da <sintaxe />

São 25 anos de carreira e um Mestrado na USP em Sistemas de Informação. Passei os primeiros 17 anos perseguindo cada nova onda — frameworks, linguagens, metodologias — até entender que experiência de verdade** não é colecionar tecnologias, é saber quando cada uma importa. Hoje ensino devs a construir carreiras sólidas com essa clareza.

##### Pragmático Sobre Dogmático

Uso qualquer ferramenta que resolva o problema mais rápido sem sacrificar a sanidade a longo prazo.

##### Orientado pela Comunidade

Construir em público não é apenas uma tendência; é como permanecemos responsáveis e aprendemos juntos.

##### Programação com Saúde em Primeiro Lugar

Seu cérebro é seu hardware. Se você não cuidar dele, o software vai sofrer.

25+

Anos de Carreira

50+

Projetos

## // Diario de Bordo

### Últimos Insights

Mergulhos profundos em tech e vida de desenvolvedor.

[Ver Todos](/blog)

[Ferramentas 5 de abr. de 2026 Como Usar o Describe Session do Claude Code para Conectar Projetos](/claude-code-describe-session)

[Ferramentas 5 de abr. de 2026 Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente](/claude-code-otimizacao-arquivos)

[Carreira 4 de abr. de 2026 Trabalhar como freelancer: 7 sites para conseguir jobs como programador](/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador)

---

# Injeção de dependência - Aumente a testabilidade do seu código - DevPleno

URL: https://devpleno.com/injecao-de-dependencia

> Pode parecer besteira, mas eu sempre ouvia sobre injeção de dependência. porém nunca tinha refletido tanto sobre ela. Quando passei a testar mais o meu cód...

Javascript

## Injeção de dependência - Aumente a testabilidade do seu código

T
Por Tulio Faria • 1 de junho de 2017

[Javascript](/tag/javascript)

Pode parecer besteira, mas eu sempre ouvia sobre injeção de dependência. porém nunca tinha refletido tanto sobre ela. Quando passei a testar mais o meu código com teste unitário, comecei a usar essa técnica e percebi que fez muita diferença. Para contextualizar, vamos supor que temos o código:

const model = require('./model1')

function findAll() {
return model.find({})
}
Desconsiderando a parte assíncrona, temos, por exemplo, uma função que depende do model que está em um contexto externo. Quando estamos no ambiente de testes, perdemos totalmente a visibilidade de onde ele está, isso deixa extremamente complicado para realizarmos um teste de forma unitária já que dependemos do ambiente para ele rodar.

No contexto do Node, quando vamos testar, temos apenas o escopo da função, não temos o escopo de onde ele está sendo executado, inclusive se rodarmos com mocka, o contexto será do mocka e não um global.

Se passarmos ele para dependência, passando como model, na hora de chamar essa função temos que injetar esse model

function findAll(model) {
return model.find({})
}
const modelAA = require('./model1')
findAll(modelAA)
Estou simplificando bastante apenas para ilustrar, já que até assim seria ruim. Precisaríamos de uma forma melhor de organizar, mas mesmo assim temos uma visibilidade maior do código. Eu sei que findAll depende do model, coisa que eu não sabia antes, pois na função eu não sabia que ela dependia de model. Então, quando fazemos injeção de dependência, estamos dando uma documentação ‘a mais’, afinal ele é um código que se auto descreve. Ele também fica um pouco mais puro, pois dependemos apenas dos parâmetros para fazer o que queremos, já que não há dependência externa.

Vamos fazer o seguinte teste: imagine que temos um código que valida, e essa função vai haver um if que se for maior que 100 ela mostrará ERROR e retorna false:

function valina(um) {
if (num > 100) {
alert('erro')
return false
}
return true
}
Se rodarmos isso no node, teremos um erro, já que o alert não está no contexto do Node, pois o alert é um window.alert que faz parte do browser. Então, mesmo que eu chame ele direto no navegador, em qualquer lugar que eu chamar vai ser como um global, ou seja, ele pega de qualquer lugar que executarmos no browser, mas quando formos fazer um teste unitário, não vai funcionar porque ele não tem o alert, isso é um problema. Outro problema é que o alert não está sendo usado mais por exemplo. Então como trocamos ele? Isso gera muita dependência.

O que podemos fazer?

Se transformarmos ele em uma injeção de dependência, podemos passar o alert. Quando formos utilizar no browser, manda um window.alert e quando formos testar nossa função, se ela retornar false e erro caso o número for maior que 100.

function valina(um) {
if (num > 100) {
alert('erro')
return false
}
return true
}

const assert = require('assert')
describe('validations', () => {
it('should return false and an error if num gt 100', () => {
const fakeAlert = (msg) => {
assert.equal(msg, 'erro')
}
const returnedValue = valida(fakeAlert, 101)
assert.equal(returnedValue, false)
})
})
Perceba que adicionamos um fakeAlert, que é uma função, e dentro dela quero checar se a mensagem que vai chamar é igual a mensagem que eu espero. Para fazer isso, usamos o const assert, que é do próprio node, ele verifica se a msg é igual a erro e quando formos chamar o valida, vamos passar esse fake Alert. Fizemos dois testes. Para o primeiro, passar os dois assert tem que valer, lembrando que vamos rodar ele com mocha.

Vamos supor que agora você vai dar manutenção neste código e a mensagem mudou, então vamos apenas no alert e corrigimos que está tudo certo.

O que eu quero ressaltar é o seguinte: fica mais claro para nós o que o valida faz, assim que expomos as dependências dele, o nosso código começa a criar essa auto documentação, o que gera uma qualidade de código muito grande.

Confira a explicação em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Inje%C3%A7%C3%A3o%20de%20depend%C3%AAncia%20-%20Aumente%20a%20testabilidade%20do%20seu%20c%C3%B3digo&url=https%3A%2F%2Fdevpleno.com%2Finjecao-de-dependencia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Finjecao-de-dependencia)

---

# Injeção de Dependência em ReactJS - DevPleno

URL: https://devpleno.com/injecao-de-dependencia-em-reactjs

> Como estávamos comentando anteriormente sobre injeção de dependência, achei relevante mostrar como podemos fazer Injeção de Dependência em ReactJS. Para il...

Javascript

## Injeção de Dependência em ReactJS

T
Por Tulio Faria • 5 de junho de 2017

[Javascript](/tag/javascript)

Como estávamos comentando anteriormente sobre [injeção de dependência](https://www.devpleno.com/vantagens-da-injecao-de-depencia/), achei relevante mostrar como podemos fazer Injeção de Dependência em ReactJS.

Para ilustrar, temos o exemplo abaixo, que quando carregamos o componente, utilizamos o axios para fazer uma requisição http e pegar o IP da origem e seta no estado atual do componente mostrando o IP na tela.

import React, { Component } from 'react'
import axios from 'axios'

class App extends Component {
constructor(props) {
super(props)
this.state = {
ip: ' '
}
}
componentDiMount() {
const url = 'https://httpbin.org/ip'
axios.get(url).then((res) => {
this.setState({
ip: res.data.origin
})
})
}
render() {
return &#x3C;div>Your IP adress is: {this.state.ip}&#x3C;/div>
}
}
O problema aqui é que se fossemos testar esse app, teríamos que contornar o axios de alguma forma,pois estamos importando ele direto. Assim, o componente está muito dependente do axios. Se quisermos rodar o componente ou testar com o Indesign, por exemplo, não vai ser possível.

O que podemos fazer?

Uma coisa que às vezes esquecemos com o ReactJS: ele tem um ponto de montagem. Temos um index.js que faz a montagem inicial.

import React from 'react'
import reactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
&#x3C;App />
document.getElementById('root')
)
Perceba que temos o App e ele faz a montagem em si do html.

Com isso, podemos simplesmente passar a dependência do código anterior para o nosso index.js, já que podemos colocá-las em lugares onde não vamos testar códigos.

Então, ao invés de importarmos o axios no nosso app.js, por exemplo, vamos colocar no ponto de montagem

app.js:

import React, { Component } from 'react'

index.js:

import React from 'react'
import reactDOM from 'react-dom'
import App from './App'
//dependencias
import axios from 'axios'
Como o index monta a aplicação React no HTML, vou trazer o axios. Podemos fazer uma lista de dependências para injetar no componente.

Qual a diferença?

Ao invés de utilizar o axios direto, vou passar essa dependência via props:

ReactDOM.render(
&#x3C;App axios={axios}/>
document.getElementById('root')
)
O App vai ter acesso a propriedade axios, que é o que eu importei.

Podemos, então, ir no componente em si e fazer o seguinte:

componentDiMount(){
const url = 'https://httpbin.org/ip'
this.props.axios.get(url)
.then((res)=>{
this.setState({
ip: res.data.origin
})
})
}
E fazemos a requisição normal. Se quiser fazer um teste unitário desse componente, posso fazer tranquilamente porque, quando for renderizar este componente para testar, eu crio um mock ou um axios fake e vejo se esse componente chama o axios falso, da mesma forma que fizemos anteriormente.

O mais importante aqui é lembrarmos que o props é uma forma que temos de injetar dependência, por isso que muitas vezes construímos aplicação com o estado todo da aplicação em um app e passamos as funções para os próximos componentes, assim ele pode ser executado em qualquer ambiente.

Em toda a arquitetura, seja ela em React, em Node, etc, vai ter um lugar com uma cola (ou um ponto de montagem) e eu acredito que estes pontos são interessantes para analisar como potenciais locais de adicionar dependências.

Confira o vídeo-tutorial:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Inje%C3%A7%C3%A3o%20de%20Depend%C3%AAncia%20em%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Finjecao-de-dependencia-em-reactjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Finjecao-de-dependencia-em-reactjs)

---

# Mantenha sua Integridade - Dica de carreira DevPleno - DevPleno

URL: https://devpleno.com/integridade

> Você sabe o que é integridade? Na faculdade, eu tinha um professor que, pra mim, era um exemplo de integridade e honestidade. No último ano, eu estava faze...

Carreira

## Mantenha sua Integridade - Dica de carreira DevPleno

T
Por Tulio Faria • 26 de julho de 2017

[Carreira](/tag/carreira)

Você sabe o que é integridade?

Na faculdade, eu tinha um professor que, pra mim, era um exemplo de integridade e honestidade. No último ano, eu estava fazendo meu TCC e uma parte seria corrigida por esse professor. Enviei meu trabalho por e-mail, porém sem essa parte que seria corrigida por ele, já não tive tempo de fazer. Quando recebeu, ele me respondeu o e-mail perguntando se eu havia esquecido de anexar alguma parte, pois estava incompleto.

Nesse momento, uma voz na minha cabeça ficava me dizendo para usar essa brecha e enviar depois que estivesse tudo certo, mas o detalhe é que existe algo que eu acredito cada vez mais e sempre fui criado com essa mentalidade, e naquele momento eu pensei “nossa, por que eu vou enganá-lo se eu construí minha vida baseado em verdades?” (ainda mais com um professor que é muito honesto). Acabei explicando a ele o que realmente tinha ocorrido.

Quando você é íntegro, você acaba impactando outras pessoas, esse professor sempre foi íntegro comigo então no momento em que tive alguma chance de não ser com ele, eu pensei muito nisso. Imagine o efeito cascata que isso tem, a integridade gera integridade, assim como generosidade gera generosidade. A dica de carreira de hoje é: SEJA ÍNTEGRO, afinal você tem que proteger seu nome, pois ele é sua carreira.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Mantenha%20sua%20Integridade%20-%20Dica%20de%20carreira%20DevPleno&url=https%3A%2F%2Fdevpleno.com%2Fintegridade) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fintegridade)

---

# Preciso de investimento para minha ideia? - DevPleno

URL: https://devpleno.com/investimento-para-executar-ideias

> Hoje eu gostaria de falar com vocês sobre como executar uma ideia de forma mais efetiva. Uma coisa que eu vejo com recorrência é que as pessoas costumam te...

Carreira

## Preciso de investimento para minha ideia?

T
Por Tulio Faria • 6 de julho de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de falar com vocês sobre como executar uma ideia de forma mais efetiva. Uma coisa que eu vejo com recorrência é que as pessoas costumam ter boas ideias, começam a montar um projeto, mas quando chega em uma certa parte, principalmente quando fica ligada nesse mundo de startups, logo pensam que só conseguirão executar com o auxílio de um investidor.

Na verdade, você não precisa de um investidor para colocar sua ideia no ar, precisa acreditar na sua ideia! Hoje eu acredito muito mais nas minhas ideias do que antes; contrato pessoas para trabalhar em meus projetos e tenho um caminho definido para trilhar para conseguir pelo menos fazer as primeiras vendas e aí sim, se eu precisar escalar isso ou pensar em uma escala que eu precise de um parceiro ou investidor mais forte, eu procuro esse tipo de ajuda, mas o grande detalhe é não deixar que seu projeto morra por falta de investimento, invista você mesmo! Quando você investe na sua ideia, é um ponto a mais para o investidor vir e pensar “esse cara está levando a sério, afinal você não depende de alguém externo para executar.” Isso é muito importante porque hoje há muitas startups na cena e está todo mundo em busca de investimento, mas ninguém querendo investir na própria ideia.

Uma coisa que eu pensei muito, isso aconteceu comigo, eu já tive investimento em uma empresa minha, na verdade eu não tive a ideia, mas eu entrei como CTO e era responsável pela área técnica e uma das coisa que percebi é que a gente perde um pouco da noção de como usar o dinheiro quando ele entra muito “fácil”. Pelo menos quando você começa com um investimento próprio, tem uma visão diferente.

Enfim, Se você não acredita na sua ideia, vai ser difícil encontrar alguém que acredite. Muitas vezes a ideia que vai te dar dinheiro é a que você realmente acredita e coloca seu coração.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Preciso%20de%20investimento%20para%20minha%20ideia%3F&url=https%3A%2F%2Fdevpleno.com%2Finvestimento-para-executar-ideias) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Finvestimento-para-executar-ideias)

---

# JavaScript: Apply - DevPleno

URL: https://devpleno.com/javascript-apply

> Hoje vou falar um pouco sobre o Apply em JavaScript e mostrar um exemplo de como podemos utilizálo para calcular o menor e o maior valor em um conjunto de ...

Javascript

## JavaScript: Apply

T
Por Tulio Faria • 24 de maio de 2017

[Javascript](/tag/javascript)

Hoje vou falar um pouco sobre o Apply em JavaScript e mostrar um exemplo de como podemos utilizá-lo para calcular o menor e o maior valor em um conjunto de dados. Primeiramente vamos fazer um teste: criar uma função e se chamar a funTeste junto com o this, virá o contexto de onde a função está sendo executada.

function funTeste(at1, at2) {
console.log(this, at1, at2)
}
funTeste(1, 2)
Porém, ao invés defazer funTeste e executar, podemos fazer um apply, e dentro dele podemos fazer, por exemplo:

funTeste.apply(1, [2, 3])
O primeiro atributo do apply (um), é o que eu quero para o this, ou seja, em qual contexto eu quero que essa função seja executada, e o segundo atributo são os valores que eu quero dar para os parâmetros que a função espera.

Se executarmos novamente, o resultado virá: [Number: 1] 2 3, referente ao número 1, e o 2 e 3 referentes aos atributos 1 e 2.

Mais alguns testes seguindo essa ideia:

function funTeste(at1, at2) {
console.log(this, at1, at2)
}
console.log(Math.min(98, 78, 50))
Ao executar o número retornado, será 50, pois 50 é o menor valor daquele conjunto de dados.

**O interessante no apply**

Note que não estamos passando um vetor de valores e sim com vírgula, como se fossem vários atributos. Podemos utilizar o apply para que possamos passar um vetor onde tiver uma função que recebe uma lista de parâmetros.

Exemplo: Vamos passar um vetor em que quero descobrir o menor dos valores. A forma mais fácil é utilizando o apply.

function funTeste(at1, at2) {
console.log(this, at1, at2)
}
const vetor1 = [89, 70, 50, 48]
console.log(Math.min.apply(Math, vetor1))
O Math é o meu this, pois o que estiver dentro dele como contexto está ótimo.

Podemos fazer a mesma coisa com o valor máximo apenas trocando o min por max:

console.log(Math.max.apply(Math, vetor1))
Com o apply, podemos adaptar como vamos executar a função e também é uma forma de manipular em qual contexto essa função está sendo executada, assim como o bind. Ela é muito útil quando precisamos converter ou passar atributos para a função como vetor ao invés de individualmente.

Confira o vídeo:

Deixe seu comentário. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=JavaScript%3A%20Apply&url=https%3A%2F%2Fdevpleno.com%2Fjavascript-apply) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjavascript-apply)

---

# Javascript: Streams (P-1: Readable Streams) - DevPleno

URL: https://devpleno.com/javascript-streams-p-1-readable-streams

> Neste vídeo, um assunto bastante interessante para ser utilizado no diaadia: Streams. A primeira parte fala sobre readable streams ou streams de leitura. E...

Javascript

## Javascript: Streams (P-1: Readable Streams)

T
Por Tulio Faria • 24 de abril de 2017

[Javascript](/tag/javascript)

Neste vídeo, um assunto bastante interessante para ser utilizado no dia-a-dia: Streams. A primeira parte fala sobre readable streams ou streams de leitura.

ERRA:

O evento ‘readable’ é disparado sempre que a tem dados disponíveis, assim, poderíamos trocar o while por if (pois ele também será chamado no fim do stream).

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Javascript%3A%20Streams%20(P-1%3A%20Readable%20Streams)&url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-1-readable-streams) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-1-readable-streams)

---

# Javascript: Streams (P-2: Writable Streams) - DevPleno

URL: https://devpleno.com/javascript-streams-p-2-writable-streams

> Neste vídeo, um assunto bastante interessante para ser utilizado no diaadia: Streams. A primeira parte fala sobre writable streams ou streams de gravação. ...

Javascript

## Javascript: Streams (P-2: Writable Streams)

T
Por Tulio Faria • 24 de abril de 2017

[Javascript](/tag/javascript)

Neste vídeo, um assunto bastante interessante para ser utilizado no dia-a-dia: Streams. A primeira parte fala sobre writable streams ou streams de gravação.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Javascript%3A%20Streams%20(P-2%3A%20Writable%20Streams)&url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-2-writable-streams) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-2-writable-streams)

---

# Javascript: Streams (P-3: Duplex) - DevPleno

URL: https://devpleno.com/javascript-streams-p-3-duplex

> Nesta terceira parte da série sobre Streams, falo sobre o Streams Duplex, que permite tanto o envio quanto o recebimento de dados. Confira o video: <div cl...

Javascript

## Javascript: Streams (P-3: Duplex)

T
Por Tulio Faria • 28 de abril de 2017

[Javascript](/tag/javascript)

Nesta terceira parte da série sobre Streams, falo sobre o Streams Duplex, que permite tanto o envio quanto o recebimento de dados.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Javascript%3A%20Streams%20(P-3%3A%20Duplex)&url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-3-duplex) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-3-duplex)

---

# Javascript: Streams (P-4: Transform) - DevPleno

URL: https://devpleno.com/javascript-streams-p-4-transform

> Na quarta parte sobre Streams, falo sobre Transform. Confira! <div className=&#34;embedresponsive embedresponsive16by9&#34;   <iframe className=&#34;embedresponsiveite...

Javascript

## Javascript: Streams (P-4: Transform)

T
Por Tulio Faria • 28 de abril de 2017

[Javascript](/tag/javascript)

Na quarta parte sobre Streams, falo sobre Transform. Confira!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Javascript%3A%20Streams%20(P-4%3A%20Transform)&url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-4-transform) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjavascript-streams-p-4-transform)

---

# Json-server - Como criar uma REST API para testes de forma simples - DevPleno

URL: https://devpleno.com/json-server-como-criar-uma-rest-api-para-testes-de-forma-simples

> Neste handson onde vou mostrar uma ferramenta que é bastante interessante no dia a dia, o Jsonserver. Primeiro vamos instalar: O que ele faz? Muitas vezes ...

Javascript

## Json-server - Como criar uma REST API para testes de forma simples

T
Por Tulio Faria • 31 de julho de 2017

[Javascript](/tag/javascript)

Neste hands-on onde vou mostrar uma ferramenta que é bastante interessante no dia a dia, o Json-server.

Primeiro vamos instalar:

npm install -g json-server
**O que ele faz?**

Muitas vezes estamos criando uma aplicação apenas front-end, como React ou Angular e ele é uma rest API para podermos testar, trazer dados, alterar esses dados, etc. Ele permite que a gente faça isso de uma forma muito simples.

Vou criar um novo arquivo, por exemplo db.json, e dentro dele vou colocar o seguinte:

{
"produtos": [{"id": 1, "name": "bike"}]
}
Criamos uma base de produtos onde tenho uma bicicleta com o ID 1. Com isso posso ir por exemplo no Shell e escrever:

json-server --watch db.json
Ele retorna que já temos um recurso, que é:

https://localhost:3000/produtos
Esse produto é o key que foi criado, que seria como se fosse nosso banco de dados. Se abrirmos o [Postman](https://www.devpleno.com/postman-como-testar-apis/) para testar, podemos colar essa url e dar um get, ele irá retornar nosso json.

Então podemos fazer uma requisição em jQuery, por exemplo, que ele já baixa. O mais legal é que podemos criar um produto novo copiamos o retorno do nosso get:

{
"id": 1,
"name": "bike"
}
E depois mudamos o parâmetro para post e vamos postar um produto com ID 2. No body, temos que colocar que ele será em Raw

{
"id": 2,
"name": "carrinho"
}
Se clicarmos em Send e voltarmos a dar um Get, ele retorna os dois produtos, então eu consigo criar um registro e retornar esse registro apenas fazendo isso. Podemos também fazer com um ID direto dessa maneira:

https://localhost:3000/produtos/1
Ele retornará apenas o ID 1.

Perceba que ele transforma um Json em um banquinho de dados para podermos testar. À medida que vamos trocando, percebemos que o Json vai mudando também, então podemos criar essas alterações de uma forma persistida.

Use bastante, é uma ótima forma para poder ilustrar que está havendo uma comunicação com o servidor, e ele também é muito flexível, já vem com os métodos do HTTP implementados, então se quisermos excluir, podemos também. Não dá para usar em produção, seria muito inseguro, mas é possível para prototiparmos uma interface ou quem sabe um aplicativo móvel.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Json-server%20-%20Como%20criar%20uma%20REST%20API%20para%20testes%20de%20forma%20simples&url=https%3A%2F%2Fdevpleno.com%2Fjson-server-como-criar-uma-rest-api-para-testes-de-forma-simples) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fjson-server-como-criar-uma-rest-api-para-testes-de-forma-simples)

---

# Lista de sites para trabalhar remotamente como programador em 2022 - DevPleno

URL: https://devpleno.com/lista-definitiva-de-sites-para-progradores-remotos

> Se tem uma profissão que já se beneficiava dos benefícios de trabalhar remotamente bem antes de virar moda é a de programador. Eu mesmo atuo neste modelo a...

Carreira

## Lista de sites para trabalhar remotamente como programador em 2022

T
Por Tulio Faria • 5 de setembro de 2021

[Carreira](/tag/carreira)

Se tem uma profissão que já se beneficiava dos benefícios de trabalhar remotamente bem antes de virar moda é a de programador. Eu mesmo atuo neste modelo a bastante tempo.

A pergunta que mais recebo é: quais os melhores sites para trabalhar remotamente como programador?

Neste artigo vamos explorar um pouco desta lista. Os links terão uma indicação de quando são de referência meus (fazendo o cadastro por estes links você também pode ganhar alguns benefícios).

## Toptal

Uma das empresas mais famosas para trabalhar como programador é a Toptal (Toptal é a junção de Top talent). Um ponto bastante importante é que a Toptal tem 2 formas de trabalho: você pode trabalhar no Core Team (ou seja, na Toptal em si) ou fazer parte do Network da Toptal (trabalhar para clientes da Toptal). E sim, é no Network que a Toptal é reconhecida por ter um processo seletivo bastante exigente - onde apenas 3% dos aplicantes conseguem passar, e também, é a forma que eu tenho relacionamento com eles.

No Network da Toptal, após passar pelo processo seletivo, você poderá ser alocado em clientes (que também passam por um processo seletivo). A Toptal cuidará de tudo que é burocrático (inclusive pagamento) e você somente tem que trabalhar/programar.

A forma de trabalho pode variar entre: horista (ou por hora), part-time (meio-período - 4 horas por dia) ou full-time (período integral - 8 horas por dia).

[Entre aqui para fazer seu cadastro na Toptal!](https://www.toptal.com/qaVGKx/worlds-top-talent). Algumas especialidades (React e React-native são uma delas) dão bônus de USD 2500 para ambos, para mim e para você que se cadastrou.

## Scalable Path

A Scalable Path é bastante semelhante ao Network da Toptal, porém, eles não possuem o screening process inicial. Assim, você cria seu perfil para que os recrutadores da Scalable Path te achem e façam a ponte com a empresa.

Uma ótima pedida para as primeiras experiências.

[Entre aqui para fazer seu cadastro na Scalable Path!](https://www.scalablepath.com/apply?r=tf5226)

## RemoteOk.io

Este site é mais como um agregador de vagas para trabalho remoto. Possui muitas vagas e é bastante organizado neste sentido.

[https://remoteok.io/](https://remoteok.io/)

## Crossover.com

Crossover também é um Network (assim com o a Total). O que é bastante atrativo neles é o job board - onde eles incluem vagas bastante interessantes - que passam dos 200 mil dólares anuais (nada mal hein!).

[https://www.crossover.com](https://www.crossover.com)

[https://www.crossover.com/jobs - página com as vagas abertas](https://www.crossover.com/jobs)

## StackOverflow Jobs

Outro agregador de vagas bastante interessante é o StackOverflow Jobs. Ele possui integração com seu perfil da plataforma.

[https://stackoverflow.com/jobs](https://stackoverflow.com/jobs)

## LinkedIn

O LinkedIn também é bastante poderoso para conseguir a sua próxima vaga remota como programador. Basta deixar seu perfil bem preenchido, buscar e aplicar para as vagas que você acredita serem ideias para você.

Não esqueça de filtrar por vagas remotas (se esse for o seu objetivo.)

Aproveite e siga o DevPleno por lá:

[https://www.linkedin.com/school/odevpleno/](https://www.linkedin.com/school/odevpleno/)

[https://linkedin.com/in/tuliofaria](https://linkedin.com/in/tuliofaria)

Esta lista ainda é preliminar :) Vamos trazer mais itens em breve.

## Você já trabalha remotamente (no Brasil ou no exterior)?

Se você já trabalha para o exterior e precisa de ajuda para nacionalizar o dinheiro de forma correta, além de decidir se é melhor como pessoa física ou jurídica, entre em contato conosco pelo e-mail [contato@devpleno.com](mailto:contato@devpleno.com) que te ajudaremos.

.

Conheça o [Fullstack Master](https://go.devpleno.com/fsm?sck=blog-como-gerar-um-array-populado-em-javascript)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Lista%20de%20sites%20para%20trabalhar%20remotamente%20como%20programador%20em%202022&url=https%3A%2F%2Fdevpleno.com%2Flista-definitiva-de-sites-para-progradores-remotos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flista-definitiva-de-sites-para-progradores-remotos)

---

# Lista encadeada - Adicionar com O(1) - DevPleno

URL: https://devpleno.com/lista-encadeada-adicionar-com-o1

> Hoje vamos continuar falando mais um pouco sobre algoritmos que principalmente caem ou em listas de emprego ou competições de programação, mas vai ser um p...

Algoritmos

## Lista encadeada - Adicionar com O(1)

T
Por Tulio Faria • 25 de julho de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos continuar falando mais um pouco sobre [algoritmos](https://www.devpleno.com/tag/algoritmos/) que principalmente caem ou em listas de emprego ou competições de programação, mas vai ser um pouco diferente. Estamos falando sobre listas encadeadas e já fizemos uma forma de [adicionar um nó em que a complexidade é 0(n)](https://www.devpleno.com/lista-encadeada-adicionar-no/), pois precisamos navegar até o final da lista toda vez que vamos adicionar um item novo. Porém uma das pessoas que acompanham a gente no YouTube comentou que podemos fazer com o O(1), ou seja, um valor constante, desde que a gente armazene além da cabeça da lista, o rabo, então eu decidi fazer dessa forma também para ficar bem claro as duas formas. A primeira coisa que temos que fazer no algoritmo é, além de utilizar o head, utilizar também o tail:

let head = null
let tail = null
Agora vamos fazer um add e, caso estivermos adicionando pela primeira vez, vamos seguir a mesma regra utilizada anteriormente:

const add2 = (value) => {
if (!head) {
head = Node(value)
tail = head
length++
return head
}
}
Perceba que tail é igual a head, afinal se não tivermos nenhum nó, ao adicionar, o início e o fim serão o mesmo.

Agora, caso o Head não for nulo, temos que fazer o Tail que será o nosso último. Para isso vamos criar um nó e pegar o tail.next e apontar para o novo nó:

const add2 = (value) => {
if (!head) {
head = Node(value)
tail = head
length++
return head
}
let node = Node(value)
tail.next = node
tail = node
return node
}
Quando a lista não está vazia criamos um novo nó, vamos nesse último nó e colocamos no ultimo, logo nosso tail será o novo nó. Para checar se isso funciona no return, temos que adicionar:

add2: (value) => add2(value)
Vamos fazer um teste:

list.add2(1)
list.add2(2)
list.add2(3)
list.print()
Perceba que retornou 0 e 1 e nossa lista, a diferença que guardamos uma referência para o tail e utilizou apenas dele para checar e adicionar novos itens. Pode ser que consigamos otimizar esse código, a grande questão é que agora nosso algoritmo tem complexidade 0(1), a vantagem é que independente do tamanho da minha lista, adicionar a ela sempre custará uma constante.

O único detalhe é que guardamos dois valores, vamos pensar que esses valores variam dependendo do tamanho da lista, geralmente pensaríamos o seguinte: se ele variasse muito seria um um temporal 2,mas ele sempre será 0(1) mesmo com o resultado 2 porque não faz diferença quando nós falamos em escala.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Lista%20encadeada%20-%20Adicionar%20com%20O(1)&url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-adicionar-com-o1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-adicionar-com-o1)

---

# Lista encadeada - Adicionar nó - DevPleno

URL: https://devpleno.com/lista-encadeada-adicionar-no

> Vamos explorar um pouco mais de estrutura de dados de algoritmos que são comuns na base curricular, principalmente em computação, e caem muito em competiçã...

Algoritmos

## Lista encadeada - Adicionar nó

T
Por Tulio Faria • 12 de julho de 2017

[Algoritmos](/tag/algoritmos)

Vamos explorar um pouco mais de estrutura de dados de algoritmos que são comuns na base curricular, principalmente em computação, e caem muito em competição de programação e em entrevistas de emprego. Quando falamos de entrevista no exterior, é muito comum fazer essa entrevista com esse tipo de questão.

Hoje vamos falar sobre lista, com questões do google. Isso mostra que você tem essa desenvoltura, mesmo que não use na prática, nas entrevistas o que eles procuram é essa capacidade de conseguir resolver o problema.

A lista encadeada, também conhecida como Linked-List basicamente é composta por nós que têm dois valores dentro, sendo que o segundo valor aponta para o próximo nó, por esse motivo se chama lista encadeada. Podemos ter uma estrutura de dados que represente isso, para isso podemos, por exemplo, citar uma função em JavaScript que vai funcionar quase que igual a uma classe em orientação de objeto, mas vamos utilizar somente closure e travar o contexto dentro da função para fazer toda a operação na lista.

Então eu vou criar algumas variáveis dentro e retornar qual vai ser a interface pública dessa lista:

function LinkedList() {
let head = null
length = 0
return {
length: () => length
}
}
Perceba que eu defini um head, que é o ponto inicial da nossa lista, e além disso eu defini o length, que é o tamanho da nossa lista. O legal é que estamos retornando um length, porém esse length vai ser uma função que retorna length. Nós não utilizamos o this, esse tipo de operação é o melhor possível porque não temos essa mistura de contexto. No JavaScript funcional, quanto mais utilizarmos dessa forma melhor vai ser.

Se eu fizer:

const list = LinkedList()
console.log(list.length())
Ele irá retornar o objeto length, como é uma função, ela será executada. Ao executar será retornado o valor 0, então temos que implementar todas as operações dentro de LinkedList, por exemplo, eu quero fazer a operação Add para adicionar um valor novo:

function LinkedList(){
let head = null
length = 0
const add (value) =>{
if(!head){
}
}
return{
length: () => length
}
}
const list = LinkedList()
console.log(list.length())
A lógica é que o head seria a cabeça de nossa lista, por isso utilizamos o if, então se existe um nó no head, eu tenho que andar até o final para poder colocar esse valor, se não existe eu vou poder criar um valor dentro do próprio head.

Como eu tenho que criar um novo nó, vamos criar um const Node que vai retornar um outro nó:

function LinkedList(){
let head = null
length = 0
const Node = (value) => {
return {
value,
next: null
}
}
const add (value) =>{
if(!head){
}
}
return {
length: () => length
}
}
const list = LinkedList()
console.log(list.length())
Então criamos uma outra função, que é uma arrow function, ela vai receber um value e retornar um objeto composto por esse value e um next igual a null. Voltando ao nosso if, se o head não existir ou false, vamos fazer o head ser igual a Node, passar nosso value e podemos retornar o head:

const add (value) =>{
if(!head){
head = Node(value)
length++
return head
}
}
return{
length: () => length
add: (value) => add(value)
}
Lembrando que o return é a interface pública desse método, então tudo que eu quero mostrar para o exterior é passado ali. Vamos fazer um teste adicionando um valor 1:

const list = LinkedList()
console.log(list.length())
list.add(1)
console.log(list.length())
A lista estava vazia eu adicionei um valor e ele retornou uma lista igual a 1. Para escrever a lista, vamos escrever um método print que vai escrever head:

return{
length: () => length
add: (value) => add(value)
print: () => console.log(head)
}
const list = LinkedList()
console.log(list.length())
list.add(1)
console.log(list.length())
list.print()
Perceba que é retornado 0, 1 e em seguida **value:1 next: null**, mas tem um detalhe: se eu chamar novamente um add e adicionar um valor dois, não vai acontecer nada; vamos continuar apenas com um porque agora o head não é mais um false. Agora eu preciso descobrir qual o nó que o next vai ser null para aí sim adicionar nesse null:

const add (value) =>{
if(!head){
head = Node(value)
length++
return head
}
let node = head
while(node.next){
node = node.next
}
node.next = Node(value)
length++
return node.next
console.log(node)
}
Então conseguimos chegar no nó, começa com o head e enquanto o node.next for verdadeiro vai andar para frente, quando ele for falso o nó vai ter a representação do último item, então podemos colocar o nó igual a node(value), novamente dou um length++ e um return no next, já que estou retornando o nó que foi adicionado.

Vamos recapitular o que fizemos: se minha lista está vazia, eu vou adicionar no head um novo nó, incremento o length. Se isso não acontecer eu vou pegar o head, coloco em uma variável node e enquanto esse nó for verdadeiro, eu vou para o próximo, quando chegar no próximo, que está com null, pego ele e adiciono um novo nó, incremento e retorno esse nó.

A ideia é a gente conseguir adicionar novos nós infinitamente. Quando pensamos isso em uma estrutura de dados sem ser JavaScript, conseguimos adicionar nós dinamicamente, podemos alocar esses espaço de memória e ir adicionando de forma dinâmica, por exemplo, em linguagens como C é um pouco mais utilizado.

A última observação importante é que como estamos falando bastante de entrevistas, é importante sabermos qual a [complexidade do algoritmo](https://www.devpleno.com/complexidade-de-um-algoritmo/), para isso temos que avaliar como ele cresce. Se pensarmos em proporção, ela crescer mais ou menos em **0(length)**, quando é do tamanho, geralmente o pessoal chama de **0(n)** porque n seria o número máximo de itens que você tem que colocar. Vamos imaginar que temos 2 whiles ao invés de apenas um, teoricamente um while fora do outro seria 0(2n), mas o 2 perto do N não é nada, então continua 0(n). Já se o while fosse dentro, caminhando até o final do nó ai sim teriamos um 0(n²), como não temos, ele está crescendo baseado no tamanho da lista. A complexidade de espaço também será 0(n) porque eu vou ocupar espaços de memória baseado no tamanho de N.

Vamos continuar esse algoritmo comparando e comentando a complexidade de cada uma delas, lembrando que estou resolvendo em JavaScript para mostrar como podemos fazer isso em uma entrevista, afinal meu propósito é ajudar você a se recolocar no mercado ou achar sua vaga sonhada. Em qualquer cenário isso é muito importante para treinar algoritmo.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Lista%20encadeada%20-%20Adicionar%20n%C3%B3&url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-adicionar-no) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-adicionar-no)

---

# Lista encadeada - Como remover um nó - DevPleno

URL: https://devpleno.com/lista-encadeada-remover-um-no

> Nós já falamos sobre alguns métodos, adicionamos itens na lista, criamos nó com complexidade O(n) e O(1) e agora vamos remover um nó desse nosso algoritmo....

Algoritmos

## Lista encadeada - Como remover um nó

T
Por Tulio Faria • 25 de julho de 2017

[Algoritmos](/tag/algoritmos)

Nós já falamos sobre alguns métodos, adicionamos itens na lista, criamos nó com [complexidade O(n)](https://www.devpleno.com/lista-encadeada-adicionar-no/) e [O(1)](https://www.devpleno.com/lista-encadeada-adicionar-com-o1/) e agora vamos remover um nó desse nosso algoritmo.

Primeiro temos que criar um método remove, vamos passar um nó para ele e, baseado nesse nó, ele vai excluir da lista.

const remove = (node) => {}
Lembrando que em return temos que adicionar o remove:

return{
remove(node) => remove(node)
}
O primeiro cenário que temos é se a lista for igual a null:

const remove = (node) => {
if (lenght === 0) return
}
Agora, se o nó for igual ao primeiro nó da minha lista, eu simplesmente vou fazer meu head ser o node.next

const remove = (node) => {
if (lenght === 0) return
if (node === head) {
head = node.next
return
}
}
Agora temos a parte complexa, afinal já cobrimos a situação em que nossa lista está vazia, remover o primeiro item e agora precisamos remover o item que escolhermos. Vamos imaginar que queremos, por exemplo, excluir o nó 2, temos que pegar o next do nó 1 e apontar para o nó 3, então temos que descobrir quem é o nó 1 para fazermos esse mapeamento:

const remove = (node) => {
if (lenght === 0) return
if (node === head) {
head = node.next
return
}
let currentNode = head
while (currentNode.next &#x26;&#x26; currentNode.next != node) {
currentNode = currentNode.next
}
console.log(currentNode)
}
Agora eu quero pegar o valor 2 da nossa lista e checar se eu peguei realmente esse valor:

let node = list.getByValue(2)
console.log(node)
Agora eu preciso mandar excluir esse nó 2:

list.remove(node)
Pronto, conseguimos excluir, agora precisamos pegar nosso currentNode, que é nosso nó 1 e apontar para o nó 3, já que ele seria nosso next a partir do momento em que excluímos o nó 2:

let currentNode = head
while (currentNode.next &#x26;&#x26; currentNode.next != node) {
currentNode = currentNode.next
}
currentNode.next = node.next
Fizemos o currentNode ser igual ao head, logo ele será o nosso nó 1, em seguida fiz uma condição: se eu tenho um próximo para andar e esse próximo não é o node, vou fazer o currentNode igual a currentNode.next, com isso vou caminhar para frente. Porém, na primeira vez que roda, ele já descobre que o Nó 1 já é o next, então precisamos fazer mais um caso de teste. Vamos adicionar uma posição 4 e em seguida remover a posição 3:

list.add2(4)
let node = list.getByValue(3)
console.log(node)
list.remove(node)
list.print()
Lembrando que eu estou mostrando o que eu geralmente faço de testes, afinal o teste seria bastante viciado caso eu testasse apenas com o nó 1. Então conseguimos fazer ele caminhar nos nós e só depois então caminhar nele de verdade.

A complexidade desse código é O(n), não tem como ser diferente, pois temos que passar em todos os nós, basicamente é quase o mesmo cenário de adicionar com O(n).

Assista ao vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Lista%20encadeada%20-%20Como%20remover%20um%20n%C3%B3&url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-remover-um-no) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-remover-um-no)

---

# Lista encadeada - Como retornar um item - DevPleno

URL: https://devpleno.com/lista-encadeada-retornar-um-item

> Hoje vamos continuar falando sobre algoritmos e também estrutura de dados. Vamos discutir um pouco sobre essas técnicas que aprendemos na base da computaçã...

Algoritmos

## Lista encadeada - Como retornar um item

T
Por Tulio Faria • 25 de julho de 2017

[Algoritmos](/tag/algoritmos)

Hoje vamos continuar falando sobre algoritmos e também estrutura de dados. Vamos discutir um pouco sobre essas técnicas que aprendemos na base da computação e que é bastante útil tanto para entrevistas de emprego quanto para competições em programação, pois geralmente aplicam esse tipo de teste para saber se você sabe gerenciar uma lista encadeada, por exemplo. Vamos continuar falando sobre [lista encadeada](https://www.devpleno.com/lista-encadeada-adicionar-no/) que é um assunto bastante interessante, nós já fizemos a adição de itens nessa lista, agora vamos criar um método para retornar um item que eu quero.

const getByIndex = (index) => {
if (index &#x3C; length) {
}
}
Perceba o seguinte, se eu quiser pegar o item 0 e minha lista estiver vazia ou seja, o length for igual a zero, temos que adicionar ao return primeiramente:

return {
length: () => add(value),
print: () => console.log(head),
getByIndex: (index) => getByIndex(index)
}
Em seguida faremos o seguinte:

const getByIndex = (index) => {
if (length === 0) {
return null
}
let node = head
let count = 0
while (count &#x3C; index &#x26;&#x26; node.next) {
node = node.next
count++
}
return node
}
Teoricamente, ao retomarmos o node, já temos nosso método. Vamos recapitular o que fizemos: se a minha lista estiver vazia eu retorno null; se não eu pego o primeiro nó e coloco em node, minha contagem está em zero; caso meu count for zero e meu index for zero, ele irá retornar o nó.

Vamos fazer o teste:

console.log(list.getByIndex(0))
Perceba que o índice zero tem toda a estrutura montada anteriormente, em um segundo caso de teste vamos fazer o seguinte:

console.log(list.getByIndex(1))
Já o resultado do índice um retorna o 2 e o 3. Se pegarmos o índice 2 irá retornar apenas o 3, agora se tentarmos pegar o índice 3, ele irá retornar null, porque o 3 não existe.

O que podemos fazer para corrigir?

Temos que pensar o seguinte, se o length for igual a zero ou o índice que queremos é maior do que o length, então temos que retornar null:

const getByIndex = (index) => {
if (length === 0 || index >= length) {
return null
}
let node = head
let count = 0
while (count &#x3C; index &#x26;&#x26; node.next) {
node = node.next
count++
}
return node
}
Novamente essa complexidade é 0(n), porque em meu pior cenário eu não tenho índice ou vou pegar o último. Esse é o algoritmo para pegar o índice, caso a gente queira pegar por valor conseguimos também, com a única diferença que temos que checar se o valor é igual e retornar caso seja:

const getByValue = (value) => {
if (length === 0) {
return null
}
let node = head
if (node.value === value) {
return node
}
while (node.net) {
node = node.next
if (node.value === value) {
return node
}
}
return null
}
Lembrando que temos que exportar ele também:

getByValue (value) => getByValue(value)
No teste **console.log(list.getByValue(2))** ele funcionará, agora caso pegarmos um valor que não existe, vai ser retornado null. Fizemos duas abordagens, uma voltando por valor e outra pelo índice. Lembrando que o segundo IF que fizemos não altera a complexidade do algoritmo, então ela também será 0(n), então no pior cenário ele vai passar em todos os nós e não encontrar. Esses são os exemplos de como podemos retornar um nó em lista encadeada, uma dica final é: resolva da forma que você conseguir e depois vai discutindo como chegar com o melhor desempenho possível, mas sempre resolva primeiro.

Confira todos os passos em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Lista%20encadeada%20-%20Como%20retornar%20um%20item&url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-retornar-um-item) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flista-encadeada-retornar-um-item)

---

# Listar arquivos em JS (async, await, promise e Promise.all) - DevPleno

URL: https://devpleno.com/listar-arquivos-em-js

> Hoje eu quero corrigir um exercício que passei no FullStack Academy que gera muitas dúvidas, principalmente para quem está começando na linguagem e quer ap...

Javascript

## Listar arquivos em JS (async, await, promise e Promise.all)

T
Por Tulio Faria • 8 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje eu quero corrigir um exercício que passei no FullStack Academy que gera muitas dúvidas, principalmente para quem está começando na linguagem e quer aprender a lidar melhor com assincronia.

Então o exercício passado foi o seguinte: Dado uma lista de arquivos e diretórios retornada de uma função que lista o que tem no diretório, precisamos mostrar quais delas são arquivos. Para isso usamos uma função FS.stat.

Primeiramente precisamos saber a lista de arquivos que tem em um diretório, então vamos importar o nosso ‘fs’ e testar a função de ler um diretório retornando o nosso callback:

const fs = require('fs')
fs.readdir('./', (err, paths) => {
console.log(paths)
})
Ao executar esse código, ele irá trazer um monte de nomes, alguns com extensão, outros sem. Podemos concluir então que esse diretório tem arquivos e diretórios misturados. Agora como eu vou checar se cada um desses arquivos são ou não arquivos? Precisamos criar uma versão em promise desse fs.readdir e, baseado nesse readdir, podemos resolver a promise ou recusar essa promise:

function readdir(path){
return new Promise((resolve, reject) => {
fs.readdir(path, (err, paths) =>{
if(err){
reject(err)
} else {
resolve(paths)
}
}
}
}
Simplesmente estou retornando uma promise desse readdir, o que muda é que agora eu posso chamar o readdir passando o ./ com o then:

readdir('./')then((paths) => console.log(paths))
Do ponto de vista de assincronismo, continua tendo a mesma coisa, usufruindo das vantagens da parte assíncrona do JavaScript e no nosso caso, no Node. Agora a função que eu tenho para saber se um arquivo é arquivo mesmo é o fs.stat, eu falo qual o path que eu quero e nesse path ele vai retornar stat desse arquivo:

fs.stat(path, (err, stat) => {
console.log(stat.isFile())
})
Com isso conseguimos saber se é um arquivo ou não através do isFile, por exemplo, se eu passasse o diretório atual e executar o código, ele vai passar false, Isso acontece porque ele não é um arquivo:

fs.stat('./', (err, stat) => {
console.log(stat.isFile())
})
Agora precisamos transformar o fs.stat também em uma função:

function stat(path){
return new Promise((resolve, reject) => {
fs.stat(path, (err, stat) =>{
if(err){
reject(err)
} else {
resolve(stat)
}
})
}
}
Agora podermos fazer uma nova versão:

fs.stat('./').then,
(stat) => {
console.log(stat.isFile())
}
Agora precisamos de um jeito de unir os dois para ter o resultado que queremos.No exercício no Fullstack Academy, utilizamos a função assíncrona ‘async’, então fizemos o seguinte:

async function lista() {
const paths = await readdir('./')
console.log(paths)
}
lista()
Lembrando que descobrimos durante o Fullstack Academy que se utilizarmos o ‘await’ para uma promise, essa função continua sendo assíncrona, porém visualmente quando estamos construindo o código, podemos garantir que embaixo só vai ser executado quando o readdir terminar.

Perceba que vai continuar retornando a listagem, então na verdade o ‘await’ seria como fazermos um then com paths com a única diferença que eu posso fazer meu próximo passo, que será checar todos os arquivos se eles são ou não realmente arquivos. Para isso vamos fazer um const stats que vai utilizar um map para passar por todos os caminhos e utilizar um async passando um path e dar um await no stat.path:

async function lista() {
const paths = await readdir('./')
const stats = paths.map(async (path) => await stat(path))
console.log(paths)
}
lista()
Se dermos um console.log no stats, vamos ter uma lista de promises pendentes, então esse código roda síncronamente, até mesmo o map, toda vez que tenho um async tenho uma promises disfarçada e como ele retorna uma outra promise, eu tenho várias sem resolver. Com isso eu precisaria pensar em uma forma de resolver todas essas promises. Para resolver, podemos utilizar o promises.all que também retorna uma promise e retornar todas as promises que estão pendentes:

async function lista() {
const paths = await readdir('./')
const stats = paths.map(async (path) => await stat(path))
const stats = await Prmise.all(statsPromises)
console.log(paths)
}
lista()
Agrupamos então todas essas promises em uma, o await vai esperar a promise retornada do promise.all, se rodarmos o código agora, teremos os resultados de todos os arquivos.

Agora como eu vou saber qual caminho é o que?

Na minha função stat, ao invés de retornar só o stat, vou retornar o path também para sabermos que arquivo é esse:

function stat(path){
return new Promise((resolve, reject) => {
fs.stat(path, (err, stat) =>{
if(err){
reject(err)
} else {
resolve({path, stat })
}
})
}
}
Agora precisamos filtrar qual desses caras são realmente arquivos, para isso vamos fazer o seguinte:

async function lista() {
const paths = await readdir('./')
const stats = paths.map(async (path) => await stat(path))
const stats = await Prmise.all(statsPromises)
const pathsWithIsFile = stats.map((path) => ({
path: path,
isFile: path.stat.isFile()
}))
const files = pathsWithIsFile.filter((path) => path.isFile)
console.log(files)
}

lista()
Agora ele irá retornar apenas os caminhos que são arquivos, o grande segredo de tudo é essa parte:

const stats = paths.map(async (path) => await stat(path))
const stats = await Prmise.all(statsPromises)
Onde concatena essas promises de volta, isso é muito importante para conseguirmos fazer esse exercício. Se você esta vendo esse exercício e não participou do Fullstack Academy, confira a gravação das aulas no nosso [Canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww/featured).

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Listar%20arquivos%20em%20JS%20(async%2C%20await%2C%20promise%20e%20Promise.all)&url=https%3A%2F%2Fdevpleno.com%2Flistar-arquivos-em-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flistar-arquivos-em-js)

---

# Redirecting to: https://lp.devpleno.com/devreactjs/

URL: https://devpleno.com/listavip-devreactjs

Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /listavip-devreactjs to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)

---

# Loops/Repetições/Iterações no JSX do React - DevPleno

URL: https://devpleno.com/loopsrepeticoesiteracoes-no-jsx-do-react

> JSX é a sintaxe que permite escrevermos HTML dentro do Javascript (sim, isso parece estranho, rs) em componentes ReactJS. E um fator muito interessante do ...

Javascript

## Loops/Repetições/Iterações no JSX do React

T
Por Tulio Faria • 27 de dezembro de 2016

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

JSX é a sintaxe que permite escrevermos HTML dentro do Javascript (sim, isso parece estranho, rs) em componentes ReactJS. E um fator muito interessante do JSX é que ele não permite trocar o escopo, assim como é possível fazer um loop/repetição em PHP. Onde apenas deixamos o for/foreach/while dentro do escopo do PHP e o HTML fora do escopo seria repetido.

Algo como:

&#x3C;ul>&#x3C;!-- aqui temos HTML normalmente -->
&#x3C;?php for($i=0; $i&#x3C;10; $i++){ // trocamos o escopo para PHP ?>
&#x3C;li>&#x3C;?php echo $x ?>&#x3C;/li>&#x3C;!-- aqui alternamos o escopo entre HTML/PHP -->
&#x3C;?php } ?>
&#x3C;/ul>
Perceba que no exemplo anterior, sempre que queremos alternar para PHP, apenas usamos o &#x3C;?php. Em JSX podemos tentar fazer algo semelhante, porém isso não funcionaria. Pois JSX é Javascript, então não tem como alternarmos o escopo. :(

## Forma 1:

Nesta maneira geramos fragmentos de JSX dentro de um array e escrevemos este array onde desejamos a nossa saída. Olhando o código fica mais simples entender:

class Loop1 extends React.Component {
render() {
let rows = []
for (let i = 0; i &#x3C; 5; i++) {
rows.push(&#x3C;li>Num: {i}&#x3C;/li>)
}
return (
&#x3C;div>
&#x3C;h1>Loop 1:&#x3C;/h1>
&#x3C;ul>{rows}&#x3C;/ul>
&#x3C;/div>
)
}
}
Apesar de funcionar bem, esta maneira acaba ficando um pouco confusa em componentes um pouco mais complexos.

## Forma 2:

Nesta maneira utilizamos um método separado para renderizar cada linha e o método array.map para iterar sobre os valores. Na verdade, poderíamos até mesmo utilizar outro componente na renderização.

class Loop2 extends React.Component {
renderRow(row) {
return &#x3C;li>Num: {row}&#x3C;/li>
}
render() {
let rows = []
for (let i = 0; i &#x3C; 5; i++) {
rows.push(i)
}
return (
&#x3C;div>
&#x3C;h1>Loop 2:&#x3C;/h1>
&#x3C;ul>{rows.map(this.renderRow)}&#x3C;/ul>
&#x3C;/div>
)
}
}
Esta forma é a minha favorita para renderizar lista de dados, pois mantem o código bem organizado e permite tratar quando a lista é vazia. Veja este exemplo:

class Loop3 extends React.Component {
renderRow(row) {
return &#x3C;li>Num: {row}&#x3C;/li>
}
render() {
let rows = []
for (let i = 0; i &#x3C; 5; i++) {
rows.push(i)
}
if (rows.length == 0) {
return &#x3C;p>Nenhum item&#x3C;/p>
}
return (
&#x3C;div>
&#x3C;h1>Loop 3:&#x3C;/h1>
&#x3C;ul>{rows.map(this.renderRow)}&#x3C;/ul>
&#x3C;/div>
)
}
}
Se a lista for vazia, ele retorna uma mensagem e não renderiza o loop :)

Você pode ver estes exemplos rodando aqui: [https://codepen.io/tuliofaria/pen/NbZgqK](https://codepen.io/tuliofaria/pen/NbZgqK)

Bom pessoal, estas são algumas ideias para utilizar loops em JSX. Como sempre, fiquem a vontade para comentar e até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Loops%2FRepeti%C3%A7%C3%B5es%2FItera%C3%A7%C3%B5es%20no%20JSX%20do%20React&url=https%3A%2F%2Fdevpleno.com%2Floopsrepeticoesiteracoes-no-jsx-do-react) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Floopsrepeticoesiteracoes-no-jsx-do-react)

---

# Low-DB - Banco de dados para NodeJS baseado em JSON - DevPleno

URL: https://devpleno.com/low-db

> O LowDB é uma forma bem interessante de termos um banco de dados baseado em JSON para utilizarmos em aplicações mais simples ou talvez aplicações desktop, ...

Javascript

## Low-DB - Banco de dados para NodeJS baseado em JSON

T
Por Tulio Faria • 11 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O Low-DB é uma forma bem interessante de termos um banco de dados baseado em JSON para utilizarmos em aplicações mais simples ou talvez aplicações desktop, onde podemos utilizar electron, por exemplo.

Primeiro vamos instalar o módulo:

yarn add lowdb
Criamos então o low-db. Com isso, precisamos de uma instância de um banco mostrando qual arquivo queremos utilizar.

const lowdb = require('lowdb')
const db = lowdb('banco.json')
db.defauts({
noticias: [],
usuarios: []
}).write()
O interessante é que podemos definir os valores padrão quando o banco for criado, como por exemplo notícias e usuários. Lembrando que com o low-db temos que escrever estas operações para a classe começar a valer.

Ao dar um node no arquivo.js, ele irá criar um novo arquivo com o nome banco.json com os valores padrão pra cada um deles.

Vamos fazer mais alguns testes, por exemplo, adicionar uma notícia nova com id, assunto e conteúdo e por fim escreva no json.

db.get('noticias')
.push({
id: '1',
assunto: 'crime',
conteudo: 'teste'
})
.write()
O mais interessante: você mandar adicionar novamente, ele irá adicionar ao anterior e não sobrepor. Podemos setar um valor de uma maneira em que podemos guardar as configurações.

db.set('settings.toggledOption', true).write
Utilizamos o ponto no código acima para dizer que a opção toggledOption do settings deve estar aberta. Podemos gerar estas atualizações mais profundas apenas colocando ponto.

**Um banco não é um banco se não pudéssemos buscar as informações nele, correto?**

Então vamos buscar uma informação (e única do nosso banco de exemplo) que é a notícia com o ID igual a 1.

const n = bd.get('noticias').find({ id: '1' }).value()
console.log(n)
Percebam que atribuímos um value para o bd, e então chamamos este value no console.log. Por fim, podemos remover um item deste banco, fazemos isso apenas retirando o set do bd e trocando o .find por .remove

bd.get('noticias').find({ id: '1' }).write()
Esta é uma ótima ferramenta para utilizarmos em projetos pequenos, não vamos utilizar um banco de dados expansive ou até mesmo para armazenar settings de sua aplicação.

Confira o Hands-on no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Low-DB%20-%20Banco%20de%20dados%20para%20NodeJS%20baseado%20em%20JSON&url=https%3A%2F%2Fdevpleno.com%2Flow-db) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Flow-db)

---

# High-order Function MAP - DevPleno

URL: https://devpleno.com/map

> Hoje vamos continuar falando sobre programação funcional e High Order Functions, alguns tipos específicos que já vêm com o JavaScript, o primeiro que vamos...

Javascript

## High-order Function MAP

T
Por Tulio Faria • 27 de junho de 2017

*

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje vamos continuar falando sobre programação funcional e High Order Functions, alguns tipos específicos que já vêm com o JavaScript, o primeiro que vamos falar é o MAP, ele transforma os dados ou cada item de um vetor. Vou mostrar um exemplo para ficar mais fácil:

const vetor = [{id: 1, nome: 'Bicicleta', categoria: 1}
{id: 2, nome: 'Toca de natação', categoria: 2}]
vetor.map( function(item){
console.log(item)
return item
})
Esse MAP que utilizamos é uma High Order Function porque ela aceita uma função e retorna alguma coisa. Ela fica mais interessante quando utilizamos uma Arrow Function porque conseguimos reduzir o código:

vetor.map((item) => {
console.log(item)
return item
})
Então, uma das utilidades do MAP é apenas fazer ele passar pelos itens do vetor. Em React, é muito comum renderizar uma lista de valores na tela dessa forma. A segunda forma é realmente transformar esse vetor, mapear cada valor desse para uma coisa diferente. Para complementar, vamos fazer um exemplo:

Vou criar um outro vetor no qual utilizaria a função para retornar algo específico como só o nome dos itens.

const vetor2 = vetor.map((item) => {
return 'Nome: ' + item.nome
})
console.log(vetor2)
Então eu estou transformando esse vetor1 em um vetor que só tem nome, poderíamos fazer um cálculo ou algo do tipo. Podemos simplificar ainda mais o código:

const vetor2 = vetor.map((item) => item.nome)
console.log(vetor2)
Se fossemos fazer sem utilizar o MAP, teríamos que utilizar um for* e isso daria bem mais trabalho. Uma outra ideia que podemos ter é, por exemplo, definir quais são as categorias que eu tenho e que a gente atribua um item a mais, trocando o ID da categoria pelo nome:

const categoria = {
1: 'Bicicletas',
2: 'Natação'
}

const vetor2 = vetor.map((item) => {
item.categoria = categorias[item.categoria]
return item
})

console.log(vetor2)
Essas são algumas ideias do que podemos fazer com o MAP, é bastante interessante utilizar isso porque a gente consegue fazer uma sequência de transformações dos dados que provavelmente consiga resolver boa parte dos problemas nos sistemas convencionais. Lembrando que no caso acima ela é uma função pura porque depende exclusivamente dos parâmetros que vêm pra ela, então isso a deixa mais fácil de ser testada, consequentemente a qualidade do código aumenta.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=High-order%20Function%20MAP&url=https%3A%2F%2Fdevpleno.com%2Fmap) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmap)

---

# Melhoria Contínua - DevPleno

URL: https://devpleno.com/melhoria-continua

> A dica de carreira de hoje é sempre tentar melhorar, ou seja, aplicar a melhoria contínua em seu processo de desenvolvimento de software, tecnologia que vo...

Carreira

## Melhoria Contínua

T
Por Tulio Faria • 5 de julho de 2017

[Carreira](/tag/carreira)

A dica de carreira de hoje é sempre tentar melhorar, ou seja, aplicar a melhoria contínua em seu processo de desenvolvimento de software, tecnologia que você domina e em tudo que você faz.

Vou contar uma história rapidinho para vocês terem uma ideia de onde eu quero chegar e porque essa dica é tão importante.

Temos um cliente que pegamos um projeto já caminhando e sempre acontecia um problema. Iamos migrar o código de um servidor de desenvolvimento para um servidor de production e acontecia um monte de problemas, então entrava uma pessoa no servidor de produção e fazia uma alteração. Tudo que acontece eu anoto ou presto atenção para tentar uma forma melhor de fazer. Por exemplo, neste cliente conseguimos achar que o grande problema era que o código não passava de versões. Com isso, um dos primeiros itens que trabalhei foi organizar a ‘casa’, obviamente entramos para corrigir um monte de bugs emergenciais e agora estamos em uma melhoria contínua.

A melhoria pode ter estágios, não precisa melhorar para o software dos sonhos de primeira. Quando um processo está complicado, é importante para a sua carreira que você consiga resolver o problema. Isso é até um treino, afinal, para treinar resolver problemas, você tem que resolvê-los, mesmo se você não tem autoridade para alterar o projeto, imagine as soluções que você poderia aplicar.

Então, a melhoria contínua é dar soluções novas para problemas que estão acontecendo no software. É uma obrigação, pois mostra que você é um DEVPLENO, ou seja, que tem a capacidade além do que você foi designado.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Melhoria%20Cont%C3%ADnua&url=https%3A%2F%2Fdevpleno.com%2Fmelhoria-continua) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmelhoria-continua)

---

# Metas na carreira de desenvolvedor - DevPleno

URL: https://devpleno.com/metas-na-carreira-de-desenvolvedor

> Metas são muito importantes tanto para nossa carreira quanto para nossa vida. Você define metas para sua carreira? Você sabe aonde quer estar daqui dez ano...

Carreira

## Metas na carreira de desenvolvedor

T
Por Tulio Faria • 22 de maio de 2017

[Carreira](/tag/carreira)

Metas são muito importantes tanto para nossa carreira quanto para nossa vida.

**Você define metas para sua carreira?**

**Você sabe aonde quer estar daqui dez anos?**

**Quais conhecimentos quer ter daqui um ano?**

Um exercício que eu faço para minha vida, e acredito que você consiga adaptar para a sua, é definir algumas metas pessoais relacionadas a parte acadêmica, como aprender alguma linguagem de programação ou framework por ano. No meu caso, não é só aprender, eu meço se eu domino e se consigo fazer um projeto envolvendo essa tecnologia para um cliente.

Por exemplo, minha meta anos atrás era aprender Minstech e só percebi que dominava quando consegui concluir um projeto com Minstech. Hoje já é natural para mim trabalhar com essa tecnologia.

Podemos criar outras metas também, até mesmo relacionadas com hobby. No momento, estou focado em aprender a tocar guitarra, pois é algo que sempre gostei. Minha meta é simplesmente tocar de 40 minutos a 1 hora por dia. Nesse período, eu paro exclusivamente para estudar guitarra.

Este tipo de meta é muito bom, pois quanto mais você faz isso constantemente, mais você melhora como pessoa, pois transforma sua vida através de metas.

Podem ser coisas simples: Tem que escrever algo? Escreva um parágrafo por dia, isso já vai adicionar muito em um período e no final das contas você acaba gerando um produto muito grande baseado em pequenas metas.

Eu conheço muitas linguagens de programação atualmente. Consigo coordenar, projetar e desenvolver em muitas tecnologias diferentes, mas tudo começou com uma primeira, como PHP, Java, JavaScript, etc.

Para finalizar, não postergue suas metas! Se você tem a meta de aprender uma linguagem por ano, se organize e cumpra. Se começar a postergar, nunca irá realizar isto.

Para ser um profissional melhor, é importante criar essas pequenas metas e cumpri-las, pois ao longo do tempo a evolução ocorre de forma fantástica.

Deixe sugestões de temas para os próximos posts.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Metas%20na%20carreira%20de%20desenvolvedor&url=https%3A%2F%2Fdevpleno.com%2Fmetas-na-carreira-de-desenvolvedor) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmetas-na-carreira-de-desenvolvedor)

---

# Metodologia ágil: entenda o que é e como se aplica para programadores! - DevPleno

URL: https://devpleno.com/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores

> Nascidas nos anos 80, só vieram a ficar conhecidas depois dos anos 2000. Muito comuns no desenvolvimento de softwares, essas ferramentas ganharam espaço em...

Carreira

## Metodologia ágil: entenda o que é e como se aplica para programadores!

T
Por Tulio Faria • 24 de julho de 2017

[Carreira](/tag/carreira)

Nascidas nos anos 80, só vieram a ficar conhecidas depois dos anos 2000. Muito comuns no desenvolvimento de [softwares](https://www.devpleno.com/como-cobrar-por-software?utm_source=blog&#x26;utm_campaign=rc_blogpost), essas ferramentas ganharam espaço em um mercado concorrido que exige projetos rápidos, bem-feitos e sob medida para o cliente.

Estamos falando sobre a metodologia ágil!

Muito se fala sobre esse assunto, mas poucos entendem o que, de fato, são os métodos ágeis. Os equívocos acerca disso podem levar a uma aplicação equivocada e, em consequência, uma perda de produção e qualidade.

Para evitar que isso aconteça com você, separamos neste artigo algumas informações úteis para o seu trabalho. Confira!

## O que é uma metodologia ágil?

Antes de sair gritando aos sete ventos sobre métodos ágeis, precisamos entender o que eles são. Concorda?

Metodologias ágeis são uma alternativa para a gestão de projetos focado na [produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&#x26;utm_campaign=rc_blogpost). Suas bases estão na relação entre os envolvidos no projeto. Isso inclui os gestores, a equipe de produção e o cliente.

Esse método de trabalho é pautado no empirismo, ou seja: entre em contato, resolva na prática. Por esse motivo, as metodologias ágeis visam dividir as adversidades em problemas menores e resolver em etapas.

Assim, diz-se que os projetos geridos por essas metodologias implicam em entregas incrementais — a entrega é apenas um incremento ao que já existe, e não um [software](https://www.devpleno.com/precificacao-em-software?utm_source=blog&#x26;utm_campaign=rc_blogpost) pronto, por exemplo — e ciclos interativos —, os trabalhos são divididos em ciclos e estes têm como objetivo melhorar os projetos anteriores.

Quer um exemplo legal?

Quando estamos jogando um MMORPG, por exemplo, não montamos o set do personagem de uma vez só. Em vez disso farmamos as partes dele, individualmente. Cada parte é um incremento ao personagem e facilita a aquisição de novos itens, mas só ao fim de todo o ciclo de farm é que temos o modelo pronto.

E é exatamente assim que é o desenvolvimento de softwares com a metodologia ágil. Em vez de estruturar um sistema inteiro de uma vez, faz-se partes de um módulo, integra-se esse módulo e depois outro, e outro e assim por diante, até finalizar todas as funcionalidades que o programa precisa.

Ficou claro o que é uma metodologia ágil? Então vamos adiante!

## Quais são os valores fundamentais da metodologia ágil?

Em 2001 um grupo de 17 desenvolvedores criaram o [Manifesto Para o Desenvolvimento Ágil de Softwares](https://www.manifestoagil.com.br?utm_source=blog&#x26;utm_campaign=rc_blogpost). Esse manifesto aponta 4 bases para a aplicação de métodos ágeis. Confira:

**Indivíduos e interações** mais que processos e ferramentas

**Software em funcionamento** mais que documentação abrangente

**Colaboração com o cliente** mais que negociação de contratos

**Responder a mudanças** mais que seguir um plano

De um modo geral, esse manifesto só comprova para o que falamos que é a metodologia ágil. Ela prioriza o contato da equipe entre si e com o cliente, assim como o empirismo no lugar da teorização.

Logo, é mais importante fazer o trabalho, deixá-lo como o cliente quer e se adaptar às mudanças do que seguir rígidos processos e usar ferramentas definidas.

## Quais são os benefícios dos métodos ágeis em TI?

Além de tornar o trabalho muito mais divertido de ser feito, e desafiador, os métodos ágeis apresentam uma série de vantagens para a área da tecnologia da informação. Dá só uma olhada:

**As equipes ficam mais produtivas (e criativas):** sem os bloqueios causados por excesso de papelada, necessidade de projetar um programa inteiro sozinho ou ferramentas de uso obrigatório, a equipe pode criar e produzir da forma que gosta.

**Melhorias na comunicação:** que tal chamar o cliente para uma conversa? O trabalho dividido em ciclos permite testar e apresentar cada pedaço do projeto, melhorando o entendimento do que o cliente quer e facilitando o trabalho da equipe de TI.

**Melhor definição do objetivo:** com a redução na burocracia, sem linguagem rebuscada e com definição de cada etapa dos trabalhos é muito mais fácil ter um objetivo final definido, e cumprir isso.

**Melhor atendimento ao cliente:** além de um software feito na medida, o cliente também recebe um ótimo tratamento da equipe de TI, que tem um contato próximo durante os trabalhos.

## Quais são as metodologias ágeis que existem?

E, no final das contas, que metodologias ágeis existem?

Na realidade existem centenas de métodos ágeis e cada um deles tem N variações. Isso significa que é quase impossível listar todos em um único texto, ainda mais sem que fique cansativo. Assim, nós separamos aqui os 5 mais utilizados para o desenvolvimento de softwares para você ter exemplos. Dá só uma olhada!

### 1. Feature Driven Development (FDD)

O FDD é uma metodologia focada em funcionalidades. Por considerar o todo maior que a soma das partes, primeiro analisa-se o projeto inteiro, depois divide-se em partes e, então, divide-se as áreas a serem modeladas (funcionalidades).

### 2. eXtreme Programming (XP)

O método XP é orientado por três bases: agilidade, economia e qualidade. Assim, uma equipe que utiliza o XP baseia-se em valores comportamentais que pautam seu trabalho — aqui entram questões como comunicação, simplicidade, feedback etc.

### 3. Microsoft Solutions Framework (MSF)

O MFS tende a ser usado por equipes reduzidas. Ele é pautado na diminuição de riscos e na qualidade do produto final. O objetivo é identificar as falhas mais comuns e evitá-las.

### 4. Dynamic System Development Model (DSDM)

O DSDM pode ser chamado de pai dos métodos ágeis. Ele é destinado ao desenvolvimento de projetos com [orçamento fixo](https://www.devpleno.com/precificacao-em-software?utm_source=blog&#x26;utm_campaign=rc_blogpost), assim como prazos curtos e bem definidos. O DSDM se difere das demais metodologias ágeis pois é composto por processos interligados de modelagem e é restrito no tempo. Assim, ele é um método um pouco mais rígido que os outros.

### 5. Scrum

Mais conhecido atualmente, algumas pessoas acreditam que Scrum é a definição de metodologia ágil. Sua grande fama não veio ao acaso: o Scrum tem uma estrutura de planejamento e divisão de tarefas em ciclos que permitem que outros métodos ágeis sejam implementadas no próprio Scrum.

Existem diversos tutoriais sobre como funciona o Scrum. Mas, de uma maneira mais simples: é criado um Product Sprint Backlog, nele são listadas as funcionalidades que precisam ser mantidas no programa. Cria-se, em cima disso, ciclos de implementação chamados sprints. Entre as definições e trabalhos de cada sprint existem reuniões de equipe.

Assim, a medida que cada sprint é feito, outro se inicia. E esse ciclo continua até a conclusão do projeto.

## Gostou das metodologias? Então implemente-as!

Agora você já entendeu o que é uma metodologia ágil, como funciona, o que a rege, quais são seus principais norteadores e quais as principais representantes dessa forma de trabalhar. Toda a informação ficou clara?

Se a sua resposta é “sim”, agora é hora de colocar a mão na massa. Dê uma lida mais aprofundada sobre cada metodologia — [existem vários tutoriais espalhados pela internet](https://www.youtube.com/devplenocom?utm_source=blog&#x26;utm_campaign=rc_blogpost), principalmente sobre o Scrum, e dá para aprender a usar cada metodologia passo a passo. Depois de escolher a metodologia ágil que melhor se encaixa no seu trabalho, coloque ela em ação e veja os resultados. Você não vai se arrepender!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e

---

# Metrônomo com JavaScript - DevPleno

URL: https://devpleno.com/metronomo-com-javascript

> O metrônomo um dispositivo que deixa uma batida constante e ajuda os músicos a manterem um ritmo quando estão treinando. Esse ritmo pode aumentar ou diminu...

Javascript

## Metrônomo com JavaScript

T
Por Tulio Faria • 26 de maio de 2017

*

[Javascript](/tag/javascript)

O metrônomo um dispositivo que deixa uma batida constante e ajuda os músicos a manterem um ritmo quando estão treinando. Esse ritmo pode aumentar ou diminuir de acordo com a escolha do músico.

Teremos um HTML simples, e primeiro vamos criar um input type range para gerar uma barra que será onde vamos controlar a velocidade do nosso metrônomo. Nele conseguimos colocar qual o valor mínimo e qual o valor máximo. Vamos pegar o do google como exemplo, o mínimo será 40 e o máximo 218. Um value inicial e um ID para conseguirmos recuperar este valor.

Em seguida, vamos colocar o áudio que será tocado (no meu caso tenho um clap.wav e um botão play para controlar o metrônomo).*

&#x3C;html>
&#x3C;head>
&#x3C;tittle>Metronomo&#x3C;/tittle>
&#x3C;/head>
&#x3C;body>
&#x3C;input type="range" min="40" max="218" value="40" id="bpm"/>
&#x3C;audio src="clap.wav">&#x3C;/audio>
&#x3C;button id="play">Play&#x3C;/button>
&#x3C;/body>
&#x3C;html>
Ele ficará assim:

Também é interessante colocarmos antes do input um H1 com o número inicial de batida que está configurado.

&#x3C;h1>40bpm&#x3C;/h1>
Feito isso, podemos começar a adicionar um pouco de comportamento. Vamos colocar o script no corpo do HTML mesmo, pois a intenção no exemplo é só demonstrar como poderíamos reconstruir o metrônomo.

Toda vez que trocar o valor do range tem que ser trocado o que está escrito em H1. Então vamos pegar o BPM e o H1. Toda vez que o BPM mudar, ou seja, dar um change, o h1 tem que mudar também. Lembrando que essa técnica de colocar todos os seletores em cima é chamada de cash.

Primeiro faremos um teste com um valor fixo criando uma função que faz o play. Vamos chamá-la de tick e um intervalo fixo, que em sequência vamos resolver.

Nessa função tick, temos que pegar o áudio

&#x3C;script>
const bpm = document.getElementById('bpm')
const h1 = document.querySelector('h1')
const play = document.getElementByld('play')
const.audio = document.querySelector('audio')
let currentBpm = 40
function tick(){
audio.currentTime= 0
audio.play()
}
bpm.addEventListener('change', function(){
h1.innerHTML = this.value + ' bpm'
currentBpm = parseInt(this.value)
})
play.addEventListener('click', function(){
const timer = setInterval(tick, 100)
})
&#x3C;/script>
Agora vamos pensar um pouco: Se precisamos ter 40 batimentos por minuto e o minuto tem 60 segundos, 60 segundos tem 60 mil milissegundos, temos que distribuir 40 batidas dentro de 60 mil, então vamos dividir isso no valor do Bpm, ficando assim:

play.addEventListener('click', function () {
const timer = setInterval(tick, (60 * 1000) / currentBpm)
})
Precisamos agora de uma forma para desligar essa batida, para isso vamos usar declarar o let isPlaying, o timer, e um if para, caso ele estiver tocando, darmos um clearInterval nesse timer.

&#x3C;script>
const bpm = document.getElementById('bpm')
const h1 = document.querySelector('h1')
const play = document.getElementByld('play')
const.audio = document.querySelector('audio')
let currentBpm = 40
let isPlaying = false
let timer = null
function tick(){
audio.currentTime= 0
audio.play()
}
bpm.addEventListener('change', function(){
h1.innerHTML = this.value + ' bpm'
currentBpm = parseInt(this.value)
})
play.addEventListener('click', function(){
if(isPlaying){
clearInterval(timer)
} else {
const timer = setInterval(tick, (60*1000)/currentBpm)
}
isPlaying = !isPlaying
})
&#x3C;/script>
Uma vez que estartamos o timer, ele começa a tocar. Ao clicar novamente, ele para, pois carrega na página com valor null. Ao clicarmos, damos um valor para ele e clicando de novo ele cai no isPlaying = !isPlaying que faz ele voltar a Null. Chamamos isso de toggle.

Também podemos trocar o texto do botão para play caso esteja tocando e Stop para quando estiver parado. Perceba que, ao apertar o play, ele começa a tocar apenas no próximo tick, pois o setInterval demora esse tick. Podemos fazer ele começar já com esse tick.

play.addEventListener('click', function () {
if (isPlaying) {
play.innerHTML = 'Play'
clearInterval(timer)
} else {
tick()
play.innerHTML = 'Stop'
const timer = setInterval(tick, (60 * 1000) / currentBpm)
}
isPlaying = !isPlaying
})
Para esse valor atualizar sempre que mudamos o range, temos que fazer um if, que vai limpar o intervalo e começar um novo valor baseado no cálculo.

bpm.addEventListener('change', function () {
h1.innerHTML = this.value + ' bpm'
currentBpm = parseInt(this.value)
if (isPlaying) {
clearInterval(timer)
timer = setInterval(tick, (60 * 1000) / currentBpm)
}
})
Com isso, acabamos de construir um metrônomo.

Essa é uma ideia do que se pode construir com javaScript e HTML. Algumas outras ideias faremos posteriormente.

Confira o passo a passo em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Metr%C3%B4nomo%20com%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Fmetronomo-com-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmetronomo-com-javascript)

---

# Capturando áudio do microfone pelo Navegador - DevPleno

URL: https://devpleno.com/microfone-pelo-navegador

> Hoje eu quero mostrar como podemos capturar um áudio do microfone pelo navegador. Da onde surgiu essa ideia? Nós construímos um chat em tempo real no Curso...

Javascript

## Capturando áudio do microfone pelo Navegador

T
Por Tulio Faria • 13 de novembro de 2017

[Javascript](/tag/javascript)

Hoje eu quero mostrar como podemos capturar um áudio do microfone pelo navegador.

Da onde surgiu essa ideia?

Nós construímos um chat em tempo real no Curso Completo de Socket.io, que faz parte do Fullstack Master. Nele construímos um chat semelhante ao WhatsApp, onde conseguiríamos mandar uma mensagem de voz. Quero mostrar mais ou menos a ideia de como podemos capturar este áudio.

Primeiramente vamos acessar o jQuery CDN para conseguirmos copiar o link do jQuery.

Vamos criar um arquivo index.html bem rápido, apenas para começarmos o nosso exemplo:

&#x3C;html>
&#x3C;body>
&#x3C;script
src='https://code.jquery.com/jquery-3.2.1.slim.js'
integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='
crossorigin='anonymous'
>&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Vou criar um script que vai dentro do próprio body, já que o que importa mesmo é o que estamos executando:

&#x3C;script>
$(function()
{navigator.mediaDevices.getUserMedia({ audio: true }).then(
(stream) => {
console.log(stream)
},
(err) => {
console.log(err)
}
)})
&#x3C;/script>
Quando temos o getUserMedia, temos uma promise e essa promise pode ser resolvida tendo o stream ou tendo um erro.

Repare que ao rodar o navegador ele já está capturando o áudio e foi criado um stream para isso. Se formos fazer um sistema real, ao dar erro como acesso negado, precisamos avisar o porque não funcionou:

}, err =>{
$('body').append('&#x3C;p>Você deve permitir o áudio&#x3C;/p>')
})

Eu sempre gosto de definir um mediaRecorder, assim, quando o stream for criado, é criado junto o mediaRecorder:

&#x3C;script>
$(function(){
let mediaRecorder
navigator
.mediaDevices
.getUserMedia({audio: true})
.then( stream => {
mediaRecorder = new MediaRecorder(stream)
mediaRecorder.ondataavailable = data => {
console.log(data)
}
mediaRecorder.onstop = () => {
console.log('stop')
}
mediaRecorder.start()
setTimeOut(() => mediaRecorder.stop(), 3000)
}, err =>{
console.log(err)
})
})
&#x3C;/script>
Feito isso, ele vai começar a gravar e três segundos depois ele da um stop e diz que tem dados disponíveis para ser utilizados.

Depois que terminamos de gravar, pode ser que seja interessante fazer alguma coisa com esse áudio, mandar para algum lugar ou coisa nesse sentido. Caso o evento seja muito longo, podemos definir que algumas partes desse áudio vão ser colocados em um vetor e no ondataavailable à medida que formos recebendo os dados do stream vai ser organizado dentro de chunks que são grupos de informação:

mediaRecorder = new MediaRecorder(stream)
let chunks = []
mediaRecorder.ondataavailable = (data) => {
chunks.push(data.data)
}
Agora, no Stop, podemos fazer algo para transformar isso em algum dado que podemos utilizar de alguma forma:

mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'audio/ogg; code=opus' })
const reader = new window.fileReader()
reader.readAsDtaURL(blob)
reader.onloadend = () => {
console.log(reader.result)
}
}
Com isso, ele junta os dados em binário em um só chamado blob. Além disso, utilizamos um reader para gerar um URL.

Ao rodar, perceba que ele converteu para um base 64, que é um texto, ou seja, ele transformou o que era binário em texto.

Por que isso é importante?

Porque geralmente o protocolo HTTP em si não lida bem com binário, principalmente quando precisamos misturar binário com conteúdo em texto. Por esse motivo usamos essa codificação dos dados binários para algo e transferimos isso como texto.

Além disso, temos uma outra vantagem, podemos, por exemplo, utilizar a url para dar play no body:

mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'audio/ogg; code=opus' })
const reader = new window.fileReader()
reader.readAsDtaURL(blob)
reader.onloadend = () => {
const audio = document.createElement('audio')
audio.src = reader.result
audio.controls = true
$('body').append(audio)
}
}
A partir disso podemos por exemplo mandar o áudio em um post, ou fazer o start e o stop baseado em um botão, assim cada vez que apertarmos um botão vai ser feito a ação. Isso abre um leque de possibilidades muito grande.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Capturando%20%C3%A1udio%20do%20microfone%20pelo%20Navegador&url=https%3A%2F%2Fdevpleno.com%2Fmicrofone-pelo-navegador) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmicrofone-pelo-navegador)

---

# Minicurso Socket.IO - Parte 01 - Começando o projeto - DevPleno

URL: https://devpleno.com/minicurso-socket-io-parte-1

> Essa é a primeira parte do nosso minicurso de Socket.IO. Nesta etapa, vamos começar o projeto e criar as primeiras páginas para dar o suporte à aplicação. ...

Javascript

## Minicurso Socket.IO - Parte 01 - Começando o projeto

T
Por Tulio Faria • 5 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Essa é a primeira parte do nosso minicurso de Socket.IO. Nesta etapa, vamos começar o projeto e criar as primeiras páginas para dar o suporte à aplicação.

A primeira coisa que temos que fazer é garantir que o express generator está instalado.

npm install -g express-generator
Esse express generator instala um gerador de aplicações em expressJS que é o que vamos utilizar. Escrevendo **express -h** ele mostra o nosso help, com isso consigo criar um projeto do zero já falando as especificidades que eu quero para ele. Por exemplo, vamos fazer o seguinte:

express placar-online --ejs
Então colocamos o express, o nome do diretório que queremos e —ejs porque queremos utilizá-lo como engine para template. Nos arquivos de apoio ([https://www.devpleno.com/minicurso-socket-io-parte-1/](https://www.devpleno.com/minicurso-socket-io-parte-1/)) já estão em EJS, mas nada te impede usar o —pug ou —handlesbar por exemplo.

Instalamos depois o yarn:

yarn
Ao dar enter, ele já cria todos nossos arquivos, agora precisamos entrar no diretório do placar-online e damos um start no yarn:

yarn start
Para acessarmos a aplicação, entramos em **localhost:3000**. Nela temos nossa aplicação.

Vamos abrir esse diretório no Visual Code, perceba que o express generator já criou uma pasta bin, code_modules, publc, routes e uma pasta views. Dentro desse views, teremos nossos templates, no routes teremos nossas rotas e em public nossa pasta pública, ou seja, o que conseguimos acessar publicamente nesse servidor.

Para começar, vamos deletar da pasta **public** os diretórios **images, javascript e stylesheets** e, na pasta **routes,** deletar o arquivo **users.js**. Lembrando que estamos deletando apenas o que não precisamos.

Agora vamos abrir o **app.js** e remover o users, já que apagamos o diretório:

var users = require('./routes/users')
app.use('./users', users)
Agora vamos aos arquivos de apoio. Você vai receber um zip com os diretórios **data**, **public**, **views** e um arquivo **funções.js**. Dentro da pasta public, temos o css, imagens, o JavaScript e os áudios. Na views, temos os templates que vamos utilizar e a pasta data, que é o BD que eu preparei para podermos utilizar e consumir esses dados.

Dentro de public, vamos copiar tudo que está lá e colocar na pasta public do projeto. O data iremos copiar a pasta inteira e colocar na pasta raiz do projeto, e views iremos copiar um a um assim que for necessário.

**Como foi gerado isso tudo pelo express generator?**

O app.js é a base da nossa aplicação e segue uma boa prática do express, que é criar a aplicação nesse independente da parte que starta o servidor, que na nossa aplicação é em bin/www onde ele importa o app, define a porta e etc. Ele faz isso de uma maneira bem legal porque se quisermos criar testes, conseguimos apenas importando o app e rodamos em cima do app sem precisar realmente ouvir uma porta. Esse app.js também importa o routes que é nosso arquivo de rotas, ele diz o seguinte: quando você entrar no ’/’ vai renderizar o index. Aí ele irá em views e abrirá o index.ejs.

Como ele sabe que o index está em views?

Se voltarmos em app.js ele definiu que é um ejs que está dentro de views:

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
Se dermos um render, ele irá pegar o index. Vamos fazer um teste para ver se é isso mesmo, vamos mudar o Welcome e trocar por Olá para saber se estamos realmente alterando ele:

&#x3C;p>Olá &#x3C;%= title %>&#x3C;/p>
Agora, dentro desse index, iremos fazer uma lista de jogos, mais especificamente quais estão acontecendo nesse momento. Para fazermos isso, a primeira coisa que temos que fazer é utilizar um banco de dados baseado em json que se chama **lowdb**, então vamos dar um yarn nele:

yarn add lowdb
Esse lowdb vai criar um banco novo onde iremos puxar os jogos de lá:

var express = require('express');
var router = express.Router();
//definindo o bd
const low = require('lowdb')
const db = low(__dirname+'/../data/db.json')
const defaultData = require('../data/default-data.json')
db.defaults(defaultData).write()

/\*Get home page. \*/
router.get('/', function(req, res, next){
res.render('index', {title: 'Express'});
});
module.exports = router;
Estamos carregando o defaultData que tem um exemplo de jogo, com ele vamos definir para o db que o padrão dele, se não tiver nada, será o defaultData.

Perceba que o db.json está vazio, mas ao darmos um yarn start ele será preenchido com as informações do defaultData.

Nosso próximo passo é carregar todos os jogos e enviar para nossa rota, com isso conseguimos exibir esses jogos na tela. Vamos criar um const matches. Vamos pegar do nosso db o value de matches e mandar ele para nosso view:

;/\*Get home page. \*/
router.get('/', function (req, res, next) {
const matches = db.get('matches').value()
res.render('index', { matches })
})
module.exports = router
Agora, dentro de index.js, vamos remover o title de todas as linhas de código e adicionar matches dentro do &#x3C;p>:

&#x3C;p>Olá &#x3C;%= matches %>&#x3C;/p>
Perceba que ele irá retornar dois objetos, ou seja, serão dois jogos. Agora vamos colocar o JSON.stringfy para sabermos o que está chegando realmente:

&#x3C;p>Olá &#x3C;%= JSON.stringfy(matches) %>&#x3C;/p>
Então o jogo está funcionando perfeitamente.

Como já temos nossa lista de jogos, vamos trazer nosso primeiro template. Nos arquivos de apoio, dentro de views, vou copiar o index.ejs e jogar para dentro da pasta views do projeto, substituindo o existente.

Perceba que existe um parcial, que é uma técnica muito legal que ao invés de ficarmos fazendo e repetindo o cabeçalho, criamos alguns elementos que só importamos e ele já resolve esses arquivos. Então, também dentro dos arquivos de apoio, vamos copiar a pasta partials e adicionar nos arquivos de apoio. Por exemplo dentro de partials/head temos apenas os links do css e etc, isso deixa mais fácil pois vamos importar em todos os arquivos.

Ao atualizar, já temos dois jogos funcionando.

**Como funciona esse template?**

Nós definimos que vamos renderizar o index enviando matches para lá, quando vamos no template existe um matches e utilizamos tudo em javaScript normal, então estamos usando um forEach para fazer essa iteração, ou seja, estou repetindo esse div várias vezes (esse div nada mais é que o template que eu criei com algumas classes).

Se voltarmos ao bd, a gente percebe que existe um team-a, team-b e todos os dados dentro dele, no index puxamos esse time a e time b:

&#x3C;div class="text-block-5">
&#x3C;%- match['team-a'].name %>
&#x3C;%- match['team-b'].name %>
&#x3C;/div>
Um ponto importante é que estamos utilizando o db mapeado por índices, ou seja, pegamos o jogo na primeira posição e que depois nós poderíamos fazer com um banco de dados de verdade, linkar para uma chave primária. No link, vamos passar o indice com o parâmetro para ele saber qual o jogo que vai ter que renderizar.

Se clicarmos em acompanhar agora, ele vai dar um erro, porque não encontrou, obviamente, já que não construímos essa página ainda.

Agora vamos em index.js, dentro de routes, falar que queremos responder quando o entramos em match e tiver um ID nesse jogos e também vamos pegar o jogo em especifico:

router.get('/match', function (req, res, next) {
const matches = db.get('matches').value()
const match = db.get('matches[' + req.params.id + ']').value()
res.render('match', { matches, match, id: req.param.id })
})
Ao final, renderizamos o view match e mandamos uma lista para la, matches, match e id.

Ele não vai encontrar o view match, então vamos novamente nos arquivos de apoio, pegamos o arquivo match.ejs dentro do diretório views e colamos dentro de views do projeto. Agora já temos os dados sendo jogados na tela.

**Como ele está colocando esses dados na tela?**

Dentro do view/match.ejs importamos o

---

# Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO - DevPleno

URL: https://devpleno.com/minicurso-socket-io-parte-2

> Na primeira aula do minicurso de Sockt.IO, fizemos a listagem dos jogos puxando do banco de dados baseado em json e quando clicamos conseguimos visualizar ...

Javascript

## Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO

T
Por Tulio Faria • 6 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Na [primeira aula do minicurso de Sockt.IO](https://www.devpleno.com/minicurso-socket-io-parte-1/), fizemos a listagem dos jogos puxando do banco de dados baseado em json e quando clicamos conseguimos visualizar os dados dos jogos. Agora vamos adicionar o Socket.IO realmente a essa interface, configurando a parte do client e do server. Vamos começar pela parte do servidor, primeiramente vamos adicionar o Socket.IO:

yarn add socket.io
Depois que ele adicionar, vou abrir o app.js do express e fazer algumas alterações, a primeira delas é adicionar um app.io e dar um require no Socket.IO já chamando o construtor dele. Como não temos o servidor, deixamos por enquanto, como se fosse uma promise que vamos criar o servidor depois.

app.io = require('socket.io')()
Feito isso, eu vou alterar o www para poder anexar ao Socket.IO. Abrindo o www, perceba que temos um server e uma instancia daquele app, vamos adicionar à instancia desse app a instancia do Socket.IO passando o server que definimos

var server = http.createServer(app)
app.io.attach(server)
Agora ele vai conseguir responder nesse server. De alguma forma, precisamos conectar as coisas, então vamos no partials que já tem algo pronto:

&#x3C;script src='/socket.io/socket.io.js'>&#x3C;/script>
Perceba que eu já deixei a inclusão do /socket.io, que é o JavaScript que faz a parte client do Socket.IO. Vamos olhar na rede se o JavaScript está realmente sendo carregado corretamente. Ao clicar nele, perceba que ele já mostra o font do Socket.IO:

Esta tudo correto, estamos com o Socket.IO conectado ao express. Agora temos que fazer o client conectar no server, vamos criar mais um JavaScript e incluir diretamente no app. Em public/js vamos criar um arquivo novo chamado match.js, dentro dele vai ter o um jQuery para simplificarmos um pouco e dentro dele terá um alert:

$(function)(){
alert(1)
})
Já em match.ejs vamos adicionar o JavaScript lá em baixo, depois de todo o footer:

&#x3C;% include partials/footer %>
&#x3C;script src="/js/match.js">&#x3C;/script>
Ao atualizar ele vai mostrar o alert, isso significa que está funcionando perfeitamente. Então agora vamos começar a conectar o front-end ao back-end. Voltando ao match.js, vamos retirar o alert e adicionar o seguinte:

$(function)(){
const socket = io();
})
Ao fazer isso, se formos ao WS, perceba que ele já tentou fazer uma conexão: Como eu tenho certeza se isso está ok? Vamos fazer o seguinte teste:

$(function)(){
const socket = io();
socket.on('connect', function(){
console.log('conected');
})
})
Para vermos se ele está conectado ao servidor, voltamos em index.js e precisamos checar se ele se conectou. O problema é que preciso pegar o IO que está no arquivo anterior, o DB também está estranho porque precisamos ter um admin para criar e gerenciar esses jogos e ele vai utilizar o mesmo banco, então estamos deixando esse index muito dependente, precisamos fazer algo que a gente possa injetar o DB e o IO ali dentro.

Como fazemos isso?

Poderíamos em app.js ao invés de deixar o index em cima, vamos passar um pouco para baixo. Antes de importar, vamos injetar a dependência que temos do IO para ele:

Se olharmos esse index, ele exporta um router, vamos fazer ele exportar também um router, mas de uma maneira diferente, vamos criar uma função indexRouter e colocar as dependências:

function indexRouter(dependecies) {}
E lá em baixo ao invés de exportar um router vamos exportar o indexRouter:

module.exports = indexRouter
Voltando a função que acabamos de criar, vamos tirar essa chave e colocar todas as dependencias da pagina dentro:

function indexRouter(dependecies){
//definindo o bd
const low = require('lowdb')
const db = low(__dirname+'/../data/db.json')
const defaultData = require('../data/default-data.json')
db.defaults(defaultData).write()
....
});
return router;
}
Então tiramos todo o código que estava dentro do index, criamos uma função indexRouter, fizemos todo o código rodar normal e ao fim retornamos esse router, passando a referencia dessa função para quem chamar ele, exatamente a mesma coisa que o construtor do Socket.IO faz.

Agora temos acesso a essas dependências:

function indexRouter(dependecies){
console.log(dependencies)
//definindo o bd
...
}
Voltando ao app.js vamos fazer o seguinte:

var index = require('./routes/index')({ io: app.io })
O require irá retornar uma função, não a execução dessa função e sim a função em si, já o io:app.io fala para executar esse função e eu passo um parâmetro para ele, que são as dependências que eu quero injetar nesse router.

Ao executar o código, perceba que agora temos uma instancia de IO dentro do indexRouter. Voltando ao index, vamos trocar o BD de lugar também, recortamos ele do index.js e vamos colar em app.js. Como o app está na raiz, eu preciso concertar os caminhos:

//definindo o bd
const low = require('lowdb')
const db = low(__dirname + '/data/db.json')
const defaultData = require('./data/default-data.json')
db.defaults(defaultData).write()
Ele vai quebrar o código, mas fique tranquilo, era para isso acontecer mesmo. Agora vamos enviar o banco para o index.js também

var index = require('./routes/index')({ io: app.io, db })
Agora vocês podem perceber que ao startar o projeto temos a dependência do DB. Como construímos um projeto todo dependendo de DB, eu posso apagar o console.log que colocamos dentro da função indexRouter e colocar o seguinte:

const { db, io } = dependencies
Isso é um destructor assignment, ele cria variáveis novas a partir de propriedades das dependências. Ainda dentro da função, abaixo do const que acabamos de criar, vamos fazer o seguinte:

io.on('connect', function (socket) {
console.log('a new client conected')
})
Uma coisa interessante do Socket.IO é que ele já tenta a conexão automaticamente.

O último objetivo desta etapa é criar uma rota administrativa para que a gente consiga gerenciar esses jogos. Primeiramente vou copiar o index.js do routes e colar no mesmo diretório, em seguida vamos renomear a cópia para admin.js e no admin vou tirar esse conect que acabamos de criar. Em seguida, vamos trocar o nome da função de indexRouter para adminRouter, lembrando que ao final do código temos que exportar adminRouter também.

Em app.js vamos vamos importar o admin nele:

var admin = require('./routes/admin')({ io: app.io, bd })
em seguida vamos linkar ele na aplicação:

app.use('/admin', admin)
Lembrando que estou apenas colocando abaixo do original, que é index. Esse use no express fala que a partir de ’/’ você vai rotear para index, e quando eu falo ‘/admin’ ele vai prefixa isso, então terei /admin/ e /admin/match com o ide do jogo.

Apenas por curiosidade, o app.use é conhecido como middleware. Esse middleware só vai checar as rotas se são administrativas ou não se ela começar com /admin. Nós não temos o administrativo ainda, ele é um clone do administrador, vamos fazer algumas alterações. Dentro do diretório views, vamos criar uma pasta nova chamada admin. Se voltar aos arquivos de apoio, você pode perceber que dentro da pasta view tem uma pasta admin com dois layouts, copie esses dois e cole na pasta do projeto que acabamos de criar.

Dentro desses dois itens, vamos olhar primeiro o index, ele é igual o index anterior com a diferença que estamos importando um header diferente. Já dentro do admin, quando formos dar um render, temos que colocar admin/:

router.get('/, function(req, res, next){
const matches = db.get('matches').value()
res.render('admin/index, { matches});
});

router.get('/match', function(req, res, next){
const matches = db.get('matches').value()
const match = db.get('matches['+req.params.id+']').value()
res.render('admin/match', { matches, match, id: req.param.id });
});
Fazemos isso para ele saber que o view não vai ser um view comum, ele vai ser do admin. As únicas diferenças que temos no

---

# Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol - DevPleno

URL: https://devpleno.com/minicurso-socket-io-parte-3

> Nas aulas anteriores do minicurso de Socket.IO, já preparamos o ambiente, conectamos o websocket do client para o servidor e agora vamos começar a emitir r...

Javascript

## Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol

T
Por Tulio Faria • 7 de julho de 2017

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Nas [aulas anteriores do minicurso de Socket.IO](https://www.devpleno.com/minicurso-socket-io-parte-2/), já preparamos o ambiente, conectamos o websocket do client para o servidor e agora vamos começar a emitir realmente as notificações.

A primeira coisa que vamos fazer é enviar o placar, vamos abrir o template match.ejs dentro de admin. A única coisa que temos de diferente é o time e os gols, nós vamos pegar esses dados e quando o usuário clicar em atualizar placar, iremos enviar isso ao servidor e ele vai disparar via socket.io para todos os clients.

Primeiramente lá no final, após incluir o footer, vamos adicionar um script:

&#x3C;script src='/js/admin.js'>&#x3C;/script>
Esse script ainda não existe, vamos criar agora no diretório public/js, primeiro temos que descobrir qual o ID do botão do formulário, que é update-score e quando o usuário clicar nesse botão, eu quero dar um alert apenas para saber se está rodando:

$(function)(){
$("#update-score").click(function(){
alert(1)
return false;
})
});
Agora precisamos pegar os dois valores do jogo nos ID’s score, e score-b, o notify-score e damos um console.log para saber se está tudo correto:

$(function)(){
$("#update-score").click(function(){
const scoreA = $("#score-a").val();
const scoreB = $("#score-b").val();
const notify = $("#score-notify").val();
console.log(scoreA, scoreB, notofy)
return false;
})
});
Perceba que o notify continuou com o value 1, isso acontece porque não está checando se esta checked ou não, então fazemos isso:

const notify = $('#score-notify:checked').val()
Agora precisamos enviar isso para o express para ele distribuir via Socket.IO para todos os clients. Ao invés de mandar essa atualização via Socket.IO, eu posso mandar via API, salvar essa informação no banco e aí sim notificar (eu prefiro usar sempre essa forma para eu garantir que eu só envie essa notificação para todo mundo).*

$(function)(){
$("#update-score").click(function(){
const scoreA = $("#score-a").val();
const scoreB = $("#score-b").val();
const notify = $("#score-notify").val();
$.post("/admin/match/0/score", post {
scoreA, scoreB, notify
}, function(data){
console.log(data)
})
return false;
})
});
Ele não vai conseguir, pois não achou, mas se olharmos a conexão os dados já estão sendo enviados, então temos que receber esses dados lá. Vamos voltar em routes/admin.js e criar novo router:

router.post('/match/:id/score', function (req, res) {
res.send(req.body)
})
Fizemos isso para termos certeza que os dados estão chegando aqui, então vamos parar o servidor e a resposta do score vai ser exatamente o que eu enviei para ele, agora podemos processar esses dados. Vamos setar o valor no placar do banco de dados. Uma das formas que temos de fazer isso no low-db é pegando o índice do jogo e setar lá dentro falando qual o valor vou enviar para ele. Essa informação vai para todos os jogos, então eu devo emitir para todos que estão conectados no Socket.IO:

router.post('/match/:id/score', function (req, res) {
db.set(
'matches[' + req.params.id + '].team-a.score',
parseInt(req.body.scoreA)
).write()
db.set(
'matches[' + req.params.id + '].team-b.score',
parseInt(req.body.scoreB)
).write()
io.emit('score', {
match: req.params.id,
scoreA: req.body.scoreA,
scoreB: req.body.scoreB,
notify: req.body.notify || 0
})
res.send(req.body)
})
Se o notify não existir, ele não vai ser enviado e eu mando zero para não notificar meus usuários. Agora está funcionando perfeitamente, se startarmos o servidor e dermos um f5, vai ser mostrado o valor enviado. Como eu tenho que dar f5 toda hora, tenho que receber no meu client a atualização que o jogo foi alterado, então vamos abrir na pasta js o arquivo match.js:

$(function)(){
const socket = io();
socket.on('connect', function(){
console.log('conected');
})
socket.on('score', function(score){
console.log('score', score)
})
})
Perceba que agora, ao atualizar o placar, o usuário recebe o objeto score, então precisamos checar se o jogo está na barra de cima e se é o jogo atual para atualizar na barra principal. Para isso vamos em match.ejs e na lista de jogo que fica na parte de cima, já temos um forEach que vai renderizar todos os jogos e temos para cada jogo um ‘em’ que tem o nome da class com uma referência para o jogo como um todo.

Vamos copiar esse trecho de código em negrito:

&#x3C;em class="match-&#x3C;%- index %>-b">
Agora vamos voltar para nosso match do client em js/match.js e fazer o seguinte:

$(function)(){
const socket = io();
socket.on('connect', function(){
console.log('conected');
})
socket.on('score', function(score){
console.log('score', score)
//na lista de jogos
$(". match-"+score.match+"-a").html(score.scoreA)
$(". match-"+score.match+"-b").html(score.scoreb)
})
})
Perceba que em A nós escrevemos o valor de score.scoreA e o mesmo no B. Agora temos que atualizar a parte de baixo também, então nós temos o score-team-A e o valor do score por exemplo, porém como eu vou saber se esse jogo é o que eu estou atualmente? Em match.ejs, lá no final, antes do include do footer, vamos fazer um script que define uma constante:

&#x3C;script>
const MATCH_INDEX = "&#x3C;%- id %>";
&#x3C;/script>
Quando faço isso, o match.index consegue acessar esse valor, então dentro do nosso match conseguimos checar se estamos em nosso jogo atual:

socket.on('score', function (score) {
console.log('score', score)
//na lista de jogos
$('. match-' + score.match + '-a').html(score.scoreA)
$('. match-' + score.match + '-b').html(score.scoreb)
// atualizar o jogo
if (MATCH_INDEX == score.match) {
$('.score-team-a').html(score.scoreA)
$('.score-team-b').html(score.scoreB)
if (score.notify == '1') {
console.log('notificar')
}
}
})
Se o jogo é o que recebemos a notificação, nós notificamos esse gol. Em view/match, lá no final, temos uma div que é uma class goooolllll com um áudio, então se estivermos com o notificado ligado vamos dar um play nesse áudio, voltamos no código anterior e adicionamos o seguinte:

if (score.notify == '1') {
console.log('notificar')
$('#audio-gol')[0].currentTime = 0
$('audio-gol')[0].play()
}
Por que fizemos o notificar sim ou não? É possível notificar um gol e caso ele seja anulado, você tira o notificar e tira o placar sem alarmar todos. Podemos também fazer uma animação com aquele div que está ali

if(score.notify=='1'){
console.log('notificar')
$('#audio-gol')[0].currentTime=0;
$('audio-gol')[0].play();
$('.goooolllll')addClass('goooolllll-anim')
$('.goooolllll-text')addClass('goooolllll-text-anim')
$('.goooolllll-text')on('transitionend webkitTransitionEnd oTransitionEnd', function(){
$('.goooolllll')removeClass('goooolllll-anim')
$('.goooolllll-text')removeClass('goooolllll-text-anim')
})
}
Para testar temos que notificar em uma outra aba. Ao clicar, aparece duas classes com essa animação, quando a animação terminar nós removemos essa animação.

Na próxima aula vamos colocar a comunicação do lance a lance e dos vídeos, além de colocar o projeto em um servidor no digitalhost para conseguirmos acessar externamente.

Confira o passo a passo em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Minicurso%20Socket.IO%20-%20Parte%203%20-%20Recebendo%20a%20notifica%C3%A7%C3%A3o%20de%20Gol&url=https%3A%2F%2Fdevpleno.com%2Fminicurso-socket-io-parte-3) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fminicurso-socket-io-parte-3)

---

# Minicurso Socket.IO Parte 4 - Separando notificações por Rooms - DevPleno

URL: https://devpleno.com/minicurso-socket-io-parte-4

> Nesta etapa do nosso minicurso de Socket.IO, vamos fazer as atualizações específicas de cada jogo. Primeiro vamos fazer o gráfico da torcida se movimentar....

Javascript

## Minicurso Socket.IO Parte 4 - Separando notificações por Rooms

T
Por Tulio Faria • 10 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Nesta etapa do nosso minicurso de Socket.IO, vamos fazer as atualizações específicas de cada jogo. Primeiro vamos fazer o gráfico da torcida se movimentar.

Dentro de match.ejs, vamos mudar para refletir realmente os valores da porcentagem, se olharmos as barras, vamos ver que na torcida está apenas uma barra fixa:

&#x3C;div class="bar-team-a" style="width: 80%">&#x3C;/div>
&#x3C;div class="bar-team-b" style="width: 20%">&#x3C;/div>
Precisamos alterar esse valor, vamos em routes/index.js e quando pegarmos um jogo vamos calcular a porcentagem da torcida. Se pegarmos nosso banco, para cada time nós temos um **‘supporters’,** que é o número de pessoas que clicaram na torcida para aquele time em específico, então vamos pegar os dois times e calcular a porcentagem:

const supportersA = match['team-a'].supporters
const supportersB = match['team-b'].supporters
const total = supportersA + supportersB
const porcentagem = {
teamA: 50,
teamB: 50
}
if (total > 0) {
porcentagem.teamA = ((supportersA / total) * 100).toFixed(0)
porcentagem.teamB = ((supportersB / total) * 100).toFixed(0)
}
match.porcentagem = porcentagem
Então temos como padrão 50/50, e se for maior que zero, o time A vai ser igual ao número de votos que o time A tem dividido pelo total e multiplicado por 100. Fizemos a mesma coisa para o time B. Por fim, enviamos o objeto porcentagem dentro de match.

Voltando ao match.ejs, temos que colocar os valores lá dentro:

&#x3C;div class="bar-team-a" style="width: &#x3C;%- JSON.stringfy(match.porcentagem.teamA) %>%">&#x3C;/div>
&#x3C;div class="bar-team-b" style="width: &#x3C;%- JSON.stringfy(match.porcentagem.teamB) %>%">&#x3C;/div>
Pronto, agora nossa barra está 50/50, quando eu clicar na torcida do time A, vou somar 1 e preciso retornar via Socket.IO a atualização na torcida para a barra.

Nos botões das torcidas, vamos colocar um ID para cada:

&#x3C;div class"column w-col w-col-2">&#x3C;a class="button w-button" id="na-torcida-a" href="#"/> Na torcida &#x3C;/div>
&#x3C;div class"column w-col w-col-2">&#x3C;a class="button w-button" id="na-torcida-b" href="#"/> Na torcida &#x3C;/div>
Agora precisamos fazer tudo via JavaScript lá em js/match.js, quando clicar no ‘na torcida’ do time A ou time B, ele precisa mandar o valor para a barra:

$("#na-torcida-a").click(function(){
$.post("/match/")+MATCH_INDEX+"/supporters", { team: 'a'}, function(data){})
return false;
}
$("#na-torcida-a").click(function(){
$.post("/match/")+MATCH_INDEX+"/supporters", { team: 'b'}, function(data){})
return false;
}
Ao clicar em “na torcida” ele envia, mas não recebe nada, pois não existe a rota ainda, então temos que ir no nosso routes/indexjs para criar essa rota logo acima de ‘return router’:

router.post('/match/:id/supporters', function(req, res, next){
const match = db.get('matches['+req.params.id+']).value()
if(req.body.team==='a'){
const newValue = match['team-a'].supporters+1
db.set('matches['+req.params.id+'].team-a.supporters', newValue).write()
}
if(req.body.team==='b'){
const newValue = match['team-b'].supporters+1
db.set('matches['+req.params.id+'].team-b.supporters', newValue).write()
}
res.send({ ok: true })
})
Perceba que pegamos o const match para saber o valor do jogo, em seguida fizemos um IF onde incrementamos o A ou B dependendo de qual botão for apertado.

Agora eu preciso falar para todo mundo desse jogo que houve uma atualização nessa partida. Quando a gente cria um projeto no Socket.IO, tudo que se conecta, é conectado a uma sala geral. Vou explicar para ficar mais fácil.

Temos duas formas de atualização, uma que vai para todos os usuários, ou seja, um geral, e também temos uma atualização que vai por jogo.

Imagine que temos um servidor e cinco usuários, porém dois usuários estão no jogo um e três no jogo dois, eu poderia mandar essa informação para todos e separar no client, mas fazendo isso eu vou matar a performance na rede. Imagine mandar a atualização de um vídeo novo, se não estiver selecionando os usuários do jogo especifico, eu mandaria para três usuários de forma desnecessária e se pensarmos em escala perdemos muito recurso trafegando dado que não precisa.

Também temos a situação onde temos que gerar atualização para todo mundo, nesse caso já estamos consumindo o recurso necessário. O importante é conseguir segmentar isso caso a gente queira. Um conceito importante no Socket.IO é o ‘room’, que são as salas que nós temos, toda vez que um usuário conecta, ele está na sala geral, então já tem um room que engloba todos os usuários que estão conectados ao Socket.IO naquele momento, depois conseguimos criar novas rooms, por exemplo match-1 para o jogo 1, e quando eu quiser mandar uma informação para os usuários dessa sala específica, fica mais simples e é isso que vamos fazer agora. Dentro de js/match.js, vamos fazer uma modificação no código para falar para o servidor em qual sala estamos conectado, isso vai ser feito quando formos chamar o construtor do Socket.IO do client, vai ser passado uma string vazia como url e depois vamos passar um query, que será um objeto com match e dentro dele um MATCH_INDEX:

$function(){
const socket = io('', { query: { match: MATCH_INDEX}});
...
}
Perceba que agora no route/index.js, quando o usuário conectar, vamos colocar ele na sala:

io.on('connect', function (socket) {
if (socket.handshake.query.match) {
console.log('user connnected on match', socket.handshake.query.match)
socket.join('match-' + socket.handshake.query.match)
} else {
console.log('a new client connected')
}
})
Agora nosso usuário está na sala especifica do jogo e também na geral. Caso queira que ele receba só a notificação da sala, eu consigo e também consigo que ele receba a atualização de geral como a atualização de placar, por exemplo. Lembrando que não difere em nada para o cliente, afinal ele já vai receber a informação já filtrada.

Continuando em routes/index.js, na hora de atualizar nossos supporters vamos pegar a nossa porcentagem e mandar via Socket.IO:

router.post('/match/:id/supporters', function(req, res, next){
const match = db.get('matches['+req.params.id+']').value()
if(req.body.team==='a'){
const newValue = match['team-a'].supporters+1
db.set('matches['+req.params.id+'].team-a.supporters', newValue).write()
}
if(req.body.team==='b'){
const newValue = match['team-b'].supporters+1
db.set('matches['+req.params.id+'].team-b.supporters', newValue).write()
}
const supportersA = match.['team-a'].supporters
const supportersB = match.['team-b'].supporters
const total = supportersA+supportersB
const porcentagem = {
teamA: 50,
teamB: 50
}
if(total > 0){
porcentagem.teamA = ((supportersA / total) * 100).toFixed(0)
porcentagem.teamB = ((supportersB/ total) * 100).toFixed(0)
}
io.to('match-'+req.paramns.id).emit('supporters'), porcentagem)
res.send({ ok: true })
})
Como vamos emitir uma atualização ‘supporters’, temos que ir no js/match.js e falar para o Socket que ele precisa esperar um evento chama supporters:

socke.on('supporters', function (supporters) {
console.log(supporters)
})
Com isso sempre que clicar em “na torcida” ele já irá mostrar o novo valor de supporters, agora eu preciso aplicar isso nas barras, quando chegar esse evento em supporters eu preciso atualizar:

socke.on('supporters', function (supporters) {
console.log(supporters)
$('.bar-team-a').css('width', supporters.teamA + '%')
$('.bar-team-b').css('width', supporters.teamB + '%')
})
Perceba que as atualizações de jogo 1 não chegam em jogo 2, isso significa que já estamos filtrando o que vai chegar em cada um dos jogos.

Agora precisamos fazer a atualização dos vídeos e do lance a lance.

Se abrir o match, você vai perceber que temos vários formulários, como atualizar placar, embaixo temos um formulário de novo lance e por último o vídeo. Vamos começar pelo vídeo, mas os dois são a mesma coisa,

---

# Minicurso Socketio - Parte 05 - Colocando o projeto no ar - DevPleno

URL: https://devpleno.com/minicurso-socket-io-parte-5

> Chegamos à última etapa do nosso Minicurso de Socket.IO. Nessa aula, nós vamos colocar o projeto no ar para que você possa utilizálo como um projeto de por...

Javascript

## Minicurso Socketio - Parte 05 - Colocando o projeto no ar

T
Por Tulio Faria • 11 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Chegamos à última etapa do nosso Minicurso de Socket.IO. Nessa aula, nós vamos colocar o projeto no ar para que você possa utilizá-lo como um projeto de portfólio e também mostrar as atualizações em tempo real para um potencial cliente. Além disso, eu vou mostrar como a gente pode deixar ele mais resiliente a falhas, como podemos gerar auto scalling, como aumentar a disponibilidade desse projeto. Além disso, vamos falar sobre outras melhorias que são muito importantes quando colocadas em produção.

A primeira coisa é que vamos colocar o projeto para rodar no digital ocean, se você ainda não colocou nada no ar, ele é a melhor experiência para fazer isso porque ele é bastante simples e também barato, custa em torno de 5 dólares por mês por uma máquina que tem 512mb de ram, então se você for rodar um site de portfólio já é o suficiente.

Eu já estou logado na minha conta, nela já tenho o cartão de crédito atrelado então já consigo criar um droplet aqui sem nenhum problema, eu aconselho a entrar em digitalocean.com e colocar os seus dados bancários também porque eles vão pedir.

Vou dar um create Droplet. Uma coisa que é muito legal do digital ocean é que podemos começar uma máquina do zero, instalar o node e etc, ou ir em One-click apps e escolher uma máquina já preparada para isso, ali já tem o Node em uma versão boa, que é a 6.10.3 e no Ubunto 16.04. Então eu vou clicar em NodeJS 6.10.3:

E no tamanho da máquina eu vou escolher a de 5 colares:

Eu já rodei aplicações production read e, em uma máquina de 10 dólares. tivemos 100 conexões simultâneas no Socket.IO, então não é uma escala muito grande, mas já deu para medir bastante e não teve quase nada de uso de memória.

Quando trabalhamos em escala, pensamos exatamente isso, máquinas menores, mas trabalhando juntas, com isso conseguimos ligar e desligá-las de maneira mais satisfatória, então se você tiver um pico de acesso é possível aumentar o número de máquinas e diminuir caso caia o número de acesso.

Em seguida, escolhemos qual a região que queremos, eles não têm na América do Sul, então obviamente eu deixo no padrão de New York, não mexo em mais nada, apenas ativo o monitoramento.

E no nome vou colocar placar-online.

Em seguida vou dar um Create (o legal do digital ocean é que ele é muito rápido para criar). Terminando, ele vai enviar um email com os dados do servidor, nome de usuário e senha.

Vamos fazer alguns testes, primeiro precisamos acessar a máquina com o ssh primeiro para poder depois enviar os arquivos, então vamos copiar o ip - no caso do Mac, a gente consegue acessar o ssh direto. No caso do Windows, vou mandar um e-mail para você de como fazemos esse acesso usando o putty.

Se você estiver utilizando o comander no Windows, é possível fazer da mesma forma que vamos fazer agora.

Vamos lá, primeiro damos o comando:

SSH root@IpDoServidor
Lembrando que é muito importante que coloquei **root@**, porque senão ele vai tentar logar com o usuário da sua máquina. Em seguida, ele pede a senha (basta só colocar a senha, ele irá pedir para trocar a senha no primeiro acesso).

Agora já estou no placar online, vamos **em cd/opt/** e aqui já temos uma pasta digital ocean, vamos criar outra com **mkdir placar-online** e dar um cd nela.

Por enquanto, essa parte eu vou parar por aqui e vou abrir o fileZilla que será um processo igual para os dois, tanto Mac quanto Windows e colocar o ip do meu servidor, login root e senha:

Agora irei na mesma pasta que eu estava no shell, que é a /opt/, dentro dela temos o placar online, vamos fazer o upload dos nossos arquivos dentro dessa pasta, mais especificamente as pastas **bin, data, public, routes, views** e os arquivos **package.json, app.js e yarn.lock**. A única pasta que não vamos subir é a node_modules. Sempre que formos instalar dependências, temos que fazer isso dentro da máquina que vamos rodar, isso é uma boa prática porque às vezes têm alguns módulos do node que são compilados de acordo com a plataforma.

Voltando ao shell, depois que todos os arquivos forem upados, vou dar um **npm install** apenas para instalar as dependências.

Agora já temos o projeto rodando, vamos checar se ele está rodando realmente:

node bin/www
como ele está com a saída vazia vamos fazer:

PORT= 80 npm start
Agora vou abrir o navegador e verificar se está realmente rodando:

Está rodando perfeitamente! Perceba que eu coloquei PORT= 80, isso significa que eu defini uma variável de ambiente antes de iniciar o servidor. Não seria interessante deixar o shell aberto para que nosso serviço fique online, então vamos fazer o seguinte:

npm install -g pm2
O pm2 é um pacote do npm que permite startar serviços como serviços do linux.

Agora vou dar um **vi start.json**, quando nós vamos startar uma aplicação pelo pm2 temos que definir para ele algumas variáveis de ambiente, igual o port que colocamos logo acima, porque ele não reconhece automaticamente essas variáveis do ambiente:

{
"script": "bin/www",
"env":{
"PORT": 80,
"NODE_ENV": "production"
}}
Então vou criar um Json com um script que é um env com duas propriedades dentro.

Agora faremos **pm2 start start.json**, perceba que ele já startou o próprio json:

A vantagem é que pelo pm2 eu consigo ver como ele está utilizando o **pm2 status**

Uma dica adicional: se quiser parar o serviço, digite:

pm2 stop all
Se alterar o json com a configuração de início, ele não vai funcionar, então temos que fazer um **pm2 delete** para ele apagar o processo e depois sim startar o serviço, senão ele vai pegar sempre o cache. Então aqui já temos o nosso projeto rodando perfeitamente para poder usar como portfólio e com isso chegamos ao fim do nosso minicurso sobre Socket.IO.

Podemos deixar ainda melhor para produção esse nosso serviço, usando escalabilidade, e você pode saber mais sobre esse assunto [na Formação Fullstack Master](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Minicurso%20Socketio%20-%20Parte%2005%20-%20Colocando%20o%20projeto%20no%20ar&url=https%3A%2F%2Fdevpleno.com%2Fminicurso-socket-io-parte-5) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fminicurso-socket-io-parte-5)

---

# Módulo Co - Organize o fluxo de seu código assíncrono - DevPleno

URL: https://devpleno.com/modulo-co

> Neste handson, vamos utilizar uma ferramenta bastante útil no nosso dia a dia, o módulo CO, que é uma forma de controlar o fluxo das funções por meio de ge...

Javascript

## Módulo Co - Organize o fluxo de seu código assíncrono

T
Por Tulio Faria • 29 de julho de 2017

[Javascript](/tag/javascript)

Neste hands-on, vamos utilizar uma ferramenta bastante útil no nosso dia a dia, o módulo CO, que é uma forma de controlar o fluxo das funções por meio de generator no JavaScript. Vamos lá, a primeira coisa é adicionar o co:

yarn add co
O problema que tínhamos era de ler um arquivo, baseado no conteúdo desse arquivo, iterávamos sobre ele e dentro dessa iteração tínhamos que escrever outros arquivos. Se formos fazer isso com código assíncrono normal, isso se torna extremamente confuso porque temos iteração sobre operações assíncronas que dependem de outras operações assíncronas, já com o generator é muito mais simples porque podemos fazer o seguinte:

No diretório CO, eu criei um arquivo test.js, dentro dele vou importar o CO e o FS e criar uma função readFile onde passamos apenas o arquivo que queremos.

const co = require('co')
const fs = require('fs')
function readFile(file) {
fs.readFile(file, 'utf-8', function (err, data) {
console.log(data)
})
}
readFile('yarn.lock')
Teoricamente, para fazer essa função funcionar, normalmente eu preciso passar para ela um callBack, mas vamos fazer um pouco diferente. Para usar o generator, as funções que chamamos assíncronas têm que ser promises, ou seja, temos que converter essas funções:

function readFile(file){
return new promise(function(resolve, reject){
fs.readFile(file, 'utf-8', function(err, data){
if(err){
reject(err)
}else{
resolve(data)
}
})
})
}
readFile('yarn.lock')
.then(function(data)){console.log(data)})
Estamos pegando essa função que depende de um callBack e ao invés de retorná-la, retornamos uma promise e isso será executado no futuro. Quando ele chamar o callBack, vai rejeitar a promise ou resolver e passa os dados de volta.

Esse código funcionou igual o anterior, mas perceba que ainda está muito chato. Imagine se tivermos que ler 10 arquivos, como faríamos? Vamos melhorar isso usando o CO:

function readFile(file) {
return new promise(function (resolve, reject) {
fs.readFile(file, 'utf-8', function (err, data) {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
co(function* () {
const contents = yield readFile('yarn.lock')
console.log(contents)
})
Como tem um * ele é um generator, e podemos interromper a execução dele com yield e por baixo dos panos ele retorna um iterator que consegue voltar depois, o código continua sendo assíncrono, mas a única diferença é que ele mostra o código de uma forma mais fácil de entender.

Nós transformamos um código que era assíncrono com callBack, o transformamos em uma promise e quando usamos o CO conseguimos fazer que essa função seja executada de uma forma que parece que ela é síncrona, mas na verdade é assíncrona. Podemos, por exemplo, ler dois arquivos ao invés de um:

co(function* () {
const file = ['yarn.lock', 'package.json']
for (let i = 0; i &#x3C; file.length; i++) {
let contents = yield readFile(file[i])
console.log(contents)
}
})
Executando esse código ele conseguiu carregar todos os arquivos em sequência. Imagine o quanto você consegue simplificar o seu fluxo de um programa assíncrono só utilizando o próprio CO e o generator function. Podemos também fazer uma lista de promises e depois retornar todos os arrays processados segurando o código com o yield. A vantagem disso é que criamos um paralelismo, fazendo com que as promises sejam executadas de forma paralela.

co(function* () {
const file = ['yarn.lock', 'package.json']
const filePromises = []
for (let i = 0; i &#x3C; file.length; i++) {
filePromises.push(readFile(file[i]))
}
const contents = yield filePromises
console.log(contents)
})
Agora colocamos o yield para baixo e ele está esperando uma lista de promises para serem resolvidas, já o contents é um vetor com todas as respostas dessas promises. Isso é muito legal quando você for fazer um script que precisava mover arquivo, movendo diretório, fazendo coisas recursivas, etc. Com o generator e ajuda do CO fica muito mais fácil de entender o processo.

Agora entenda melhor sobre [Generators Functions e tudo que acontece “por baixo dos panos”.](https://www.devpleno.com/generators-functions/)

Confira o Hands-on em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=M%C3%B3dulo%20Co%20-%20Organize%20o%20fluxo%20de%20seu%20c%C3%B3digo%20ass%C3%ADncrono&url=https%3A%2F%2Fdevpleno.com%2Fmodulo-co) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmodulo-co)

---

# NodeJS Primeiros Passos: Módulo em NodeJS - DevPleno

URL: https://devpleno.com/modulos

> O que é Módulo em NodeJS? É um script php no qual você consegue incluir em um outro script. É uma maneira bem tradicional de se organizar as partes funcion...

Javascript

## NodeJS Primeiros Passos: Módulo em NodeJS

T
Por Tulio Faria • 30 de maio de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

**O que é Módulo em NodeJS?**

É um script php no qual você consegue incluir em um outro script. É uma maneira bem tradicional de se organizar as partes funcionais do código.

Vamos fazer um teste simples apenas para testar o require, que é a forma de importar esse módulo.

Crie um novo arquivo no Node e coloque um nome qualquer, o meu será modulo01.js, esse arquivo será meu módulo, dentro dele terá:

console.log('Dentro do modulo')
Salve e crie um novo arquivo chamado app.js. Nele vamos fazer o seguinte:

require('./modulo01')
Ao executar o app.js, o require chama o modulo01 e apresenta a frase do nosso arquivo modulo01.js

O interessante nessa forma de gerir os módulos no node é que seria como se ele estivesse em uma closer como uma self invoking, porque ele isola o nosso escopo inteiro.

Para fazermos uma funcionalidade um pouco melhor, podemos falar para esse módulo exportar, por exemplo, um contar:

var contador = 0
module.exports.contar = function () {
contador++
console.log(contador)
}
Com isso estamos expondo um pedaço do nosso módulo para o que está externo, criando uma pequena interface chamada contar.

Quando fizermos o require do módulo no app.js, podemos atribuir ele a uma variável:

var m1 = require('./modulo01')
m1.contar()
Assim o m1 recebe uma self invoking e conseguimos ter acesso ao contar que expomos para o que está externo.

Um exemplo que podemos fazer é o seguinte:

var m1 = require('./modulo01')
m1.contar()
var m2 = require('./modulo01')
m2.contar()
O require só é executado uma vez. Mesmo sendo executado duas vezes, a primeira vez que ele executar a self invoking function vai ser mantida. Esse comportamento é semelhante ao singleton do java e c#, por exemplo.

Vamos criar um novo arquivo modulo02 e um app02, no módulo 2 terá um exemplo um pouco diferente, ao invés de deixar ele criar o escopo como quiser, eu vou criar o modulo02 dentro de uma variável e criar minha própria function, ou seja, vou criar um escopo só para esse módulo:

var modulo02 = function (initialValue) {
var contador = initialValue
return {
contar: function () {
contador++
},
escrever: function () {
console.log(contador)
}
}
}
module.exports = modulo02
Essa variável contador é semelhante a um atributo da classe de forma privada, ou seja, não está disponível de forma global, com isso podemos ‘explicitar’ uma interface que queremos que todos os outros enxerguem, retornando um objeto com duas funções.

A primeira vai só incrementar, a segunda function só escreve e finalmente vamos expor o nosso módulo todo para o ‘mundo’.

Agora, indo para o app02.js, faremos o seguinte:

var m1 = require('./modulo02')
Se fizermos apenas isso, perceba que a function será retornada mas não vai executar a função, então temos que passar o valor inicial que eu quero:

var m1 = require('./modulo02')(1)
var m2 = require('./modulo02')(2)
m1.contar()
m2.escrever()
Fazendo isso, isolamos os 2 módulos através de uma closer, que é muito semelhante a uma classe.

Teríamos atributos, métodos públicos e métodos privados, pois como eu não exponho ele, então seria visível em um mesmo escopo.

var modulo02 = function (initialValue) {
//atributos
var contador = initialValue
//metodo privado
var ooo = function () {}
//metodos publicos
return {
contar: function () {
contador++
},
escrever: function () {
console.log(contador)
}
}
}
Isso seria um constructor porque ele consegue definir os valores iniciais e seria executado quando instanciamos o módulo.

Essa é uma das maneiras que temos de organizar módulos, vamos falar mais sobre isso posteriormente.

Confira a explicação completa em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20M%C3%B3dulo%20em%20NodeJS&url=https%3A%2F%2Fdevpleno.com%2Fmodulos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmodulos)

---

# Mono ou multi thread - POO para JS - DevPleno

URL: https://devpleno.com/mono-ou-multi-thread-poo-para-js

> Hoje vou continuar falando um pouco mais sobre como podemos fazer a transição de uma linguagem orientadaobjeto, como PHP ou Java, para JavaScript cada vez ...

Javascript

## Mono ou multi thread - POO para JS

T
Por Tulio Faria • 6 de novembro de 2017

[Javascript](/tag/javascript)

Hoje vou continuar falando um pouco mais sobre como podemos fazer a transição de uma linguagem orientada-objeto, como PHP ou Java, para JavaScript cada vez mais funcional.

Mais especificamente vamos falar sobre “processamento concorrente”, entre aspas, porque hoje, com vários núcleos, nós conseguimos ter um processamento praticamente concorrente. Quero mostrar um problema que é muito comum quando a gente quer exercitar concorrência em linguagens POO. Principalmente em Java, trabalhamos muito com isso para mostrar essa concorrência.

O que fazemos com concorrência em Java?

Nós criamos o que chamamos de threads, que é uma linha de execução. Por exemplo, se eu criar algo

como:

const a = 1
const b = 10
Essa linha de execução em Java, por ser uma linguagem síncrona, então eu posso travar a linha de execução. Para evitar que isso aconteça, nós criamos uma nova thread.

É muito comum nessas linguagens termos um while(true) checando se algo chegou, como por exemplo conexão de socket. Ela tem suas vantagens e suas desvantagens, mas ela tem um limite onde acabamos tendo alguns problemas para gerenciar essas threads.

Já o JavaScript é mono-thread, com isso ele não mantém várias linhas de execução em paralelo, e sim mantém uma estrutura que vai ser executada depois. Por exemplo:

const a = 1
const b = 2
Quando executamos essa linha de código em JavaScript, ele entra em algo que chamamos de event loop. É como se fosse uma caixa onde colocamos coisas lá dentro, tudo que vai para ela podemos desempilhar depois. É assim que ele consegue lidar com várias coisas ao mesmo tempo.

Por que isso é tão importante?

Principalmente no navegador, essa característica do JavaScript permite que a gente não bloqueie a tela. É muito comum em Java por exemplo, se você não criar uma thread nova e clicar em um botão swing, ao passar o mouse em cima da interface, ela fica com loading. Em JavaScript isso não acontece porque um dos stacks que ele tem é o de processamento gráfico, então ele não deixa acontecer se utilizarmos as boas práticas.

Para evitar que nosso programa trave no tempo que está executando uma linha de código, podemos utilizar o seguinte:

const fs = require('fs')
const a = 1
const b = 2
console.log('inicio')
fs.readdir('./', (err, files) => console.log(files))
console.log('fim')
Com isso o resultado é que o início e fim virão antes do readdir. Ela vai ser empilhada no event loop e quando acabar a execução, vai sair da pilha.

Agora vamos supor que eu tenho uma operação um pouco pesada, temos uma forma de mandar para o event loop utilizando o setTimeOut(() => console.log(‘event loop’), 0) e ao invés de passar um tempo, se passarmos zero vamos empilhar isso dentro do event loop.

Para fechar, vamos fazer um problema conhecido como Produtor-Consumidor, esse é um problema muito recorrente que utilizamos para aprender essa forma de lidar com várias threads em Java.

Temos uma função producer, que é a que produz, e uma função consumer, onde consome algo:

const stock = \[\]
function producer() {}
function consumer() {}
Então, quando eu produzo, jogo em stock e o consumidor irá consumir do stock. O problema é que essas duas functions rodam separadamente, se fossemos fazer isso em Java, teríamos que ter duas threads. Para simular essa questão em JavaScript:

const stock = \[\]
function producer(){
console.log('producer')
setTimeOut(producer, Math.ceil(Math.random()\*3000))
}
function consumer(){
console.log('consumer')
setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
Lembrando que o math.random retorna um número de 0 a 1, em seguida vamos multiplicar pelo valor máximo e arredonda para cima.

Com isso vamos mandar produzir pelo menos um e começar a consumir:

producer()
consumer()
Agora, quando quisermos produzir, vamos colocar no stock:

const stock = \[\]
function producer(){
console.log('producer', stock.length)
stock.push(Math.random()\*100)
setTimeOut(producer, Math.ceil(Math.random()\*3000))
}
Agora eu preciso consumir esse valor:

function consumer(){
const item = stock\[stock.length-1\]
stock.splice(stock.length-1, 1)
console.log('consumer', stock.length)
setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
Se tentarmos consumir e não tiver no estoque, não vai dar certo, então podemos fazer o seguinte:

function consumer(){
if(stock.length===0){
console.log('não foi possível consumir')
} else {
const item = stock\[stock.length-1\]
stock.splice(stock.length-1, 1)
console.log('consumer', stock.length)
}
setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
Com isso temos uma sensação de que estão trabalhando separadamente, mas na verdade estamos empilhando e depois desempilhando após um tempo aproximado.

Por que é importante saber que isso acontece?

Porque basicamente qualquer operação pesada acontece de forma assíncrona.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Mono%20ou%20multi%20thread%20-%20POO%20para%20JS&url=https%3A%2F%2Fdevpleno.com%2Fmono-ou-multi-thread-poo-para-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmono-ou-multi-thread-poo-para-js)

---

# O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express - DevPleno

URL: https://devpleno.com/morgan

> Aprenda o que é o Morgan, como instalar e configurar no Express para logar requisições HTTP. Exemplos práticos com todos os formatos de log.

Javascript

## O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express

T
Por Tulio Faria • 23 de agosto de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O hands-on de hoje é sobre o Morgan, que é uma forma de logar ou mostrar quais requisições estão chegando em nosso servidor HTTP, seja ele feito no Express ou em Node puro utilizando o módulo HTTP.

A primeira coisa que temos que fazer é adicionar as dependências:

yarn add express morgan
Eu já tenho um arquivo teste criado e vou começar a importar o que precisamos:

const express = require('express')
const morgan = require('morgan')
const app = express()
app.get('/', (req, res) => {
res.send('olá DevPleno')
})
app.listen(3000, () => console.log('listenning'))
Agora vamos colocar o Morgan como um Middleware e ele vai interceptar toda a requisição que chegar:

app.use(morgan('combined'))
Perceba que, ao dar F5 na página, ele traz as informações:

Isso é muito legal porque no Apache já temos isso, e se estivermos rodando isso na Amazon, temos a possibilidade de conseguir recuperar esses dados. Temos uma outra versão que é o Tiny:

app.use(morgan('tiny'))

Nele temos um retorno mais simples, o método, saída e tempo de resposta. Ainda temos uma terceira forma, que é um padrão personalizado:

app.use(morgan(':method :url :response-time'))

Lembrando que, pela Amazon, você pode guardar isso enviando para o S3. Indo para lá, você pode guardar essas informações por muito tempo.

Essa é a ideia para gerar dados toda vez que a gente recebe uma requisição no Express, isso é bastante útil, é algo que já existe no Apache, mas temos que adicionar como Middleware no Express e assim configurar da maneira que queremos.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=O%20Que%20%C3%A9%20Morgan%20no%20Node.js%3F%20Guia%20Pr%C3%A1tico%20de%20HTTP%20Logging%20com%20Express&url=https%3A%2F%2Fdevpleno.com%2Fmorgan) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmorgan)

---

# Morro de vontade... - DevPleno

URL: https://devpleno.com/morro-de-vontade

> Você sempre morre de vontade de aprender alguma tecnologia ou algo novo? Saiba que isso na área de tecnologia da informação não é muito desculpa.... Confir...

Carreira

## Morro de vontade...

T
Por Tulio Faria • 1 de agosto de 2016

[Carreira](/tag/carreira)

Você sempre morre de vontade de aprender alguma tecnologia ou algo novo? Saiba que isso na área de tecnologia da informação não é muito desculpa…

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Morro%20de%20vontade...&url=https%3A%2F%2Fdevpleno.com%2Fmorro-de-vontade) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmorro-de-vontade)

---

# Multer upload de imagens com nodejs e express - DevPleno

URL: https://devpleno.com/multer-upload-de-imagens-com-nodejs-e-express

> Hoje vou mostrar uma dica rápida de como podemos fazer upload no NodeJS utilizando o Express. Para isso vamos utilizar o Multer. A primeira coisa que vamos...

Javascript

## Multer upload de imagens com nodejs e express

T
Por Tulio Faria • 29 de novembro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje vou mostrar uma dica rápida de como podemos fazer upload no NodeJS utilizando o Express. Para isso vamos utilizar o Multer.

A primeira coisa que vamos fazer é o seguinte:

yarn add express ejs multer
Agora, com o Visual Studio Code aberto, vamos criar um arquivo novo index.js e também uma pasta view com um arquivo home.ejs dentro dele, em seguida faremos o seguinte em index.js:

const express = require('express')
const app = express()
app.set('view-engine', 'ejs')
app.get('/', (req, res) => res.render('home'))
app.post('/', (req, res) => {
console.log(req.body, req.files)
res.send('ok')
})
app.listen(3000, () => console.log('running...'))
Já dentro de home.ejs vai ter o seguinte:

&#x3C;h1>Upload&#x3C;/h1>

&#x3C;form method="post" ectype="multipart/form-data">
&#x3C;input type="file" name="img" />
&#x3C;button type="submit">Enviar&#x3C;/button>
&#x3C;/form>
O ‘enctype=”multipart/form-data”’ significa que vamos mandar os campos em vários formatos.

Quando enviamos uma foto, por exemplo, vai retornar dois undefined, isso significa que não estamos tratando nem o file e nem o body, por isso precisamos do multer.

O multer é um middleware, por esse motivo conseguimos rodar antes da requisição:

const express = require('express')
const app = express()
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.set('view-engine', 'ejs')
app.get('/', (req, res) => res.render('home'))
app.post('/', upload.single('img'), (req, res) => {
console.log(req.body, req.file)
res.send('ok')
})
app.listen(3000, () => console.log('running...'))
Reparem que agora temos no body um arquivo vazio e o outro undefined traz informações sobre a imagem juntamente com onde foi salva a imagem.

Nós conseguimos controlar também qual o nome que vamos dar para essa imagem.

Podemos criar um diskStorage, ele é um objeto que tem duas keys, destination que é onde eu vou salvar. Além disso, posso pegar um filename:

const express = require('express')
const app = express()
const multer = require('multer')
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/')
},
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.ogirinalname)
}
})
const upload = multer({ storage })
Nós conseguimos controlar como vamos fazer o upload através do storage. Além disso, podemos criar um memory storage, onde ele vai retornar para nós um buffer dentro do file. É aconselhável utilizar ele exatamente onde você precisa, nunca coloque esse middleware como global.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Multer%20upload%20de%20imagens%20com%20nodejs%20e%20express&url=https%3A%2F%2Fdevpleno.com%2Fmulter-upload-de-imagens-com-nodejs-e-express) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmulter-upload-de-imagens-com-nodejs-e-express)

---

# Sobreviver em um mundo de abundância - DevPleno

URL: https://devpleno.com/mundo-de-abundancia

> Hoje eu gostaria de compartilhar uma lição que a minha mãe sempre falava pra mim quando estava em um momento de decidir algo em minha carreira. Ela sempre ...

Carreira

## Sobreviver em um mundo de abundância

T
Por Tulio Faria • 7 de novembro de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de compartilhar uma lição que a minha mãe sempre falava pra mim quando estava em um momento de decidir algo em minha carreira.

Ela sempre falava de uma maneira bastante simples que as coisas podem ser melhores no futuro. Toda vez que eu vejo uma oportunidade, lembro disso. Vou contar uma história para vocês entenderem melhor.

Eu estava para decidir se eu iria trabalhar em uma empresa ou não, meu cenário na época era fazer faculdade de manhã e dar aula a noite, então eu tinha a tarde livre. Então eu recebi uma oferta de trabalho para ganhar mais ou menos 3 ou 4 vezes mais, porém trabalhando de manhã e à tarde, tendo que mudar meu horário da faculdade para noite. Estava nesse dilema e resolvi perguntar para minha mãe, ela disse o seguinte:

“Você já está no terceiro ano de faculdade e já está aparecendo oportunidades como essa, se você continuar como está, vai poder se dedicar mais à faculdade para que, no futuro, quando você se formar, oportunidades ainda melhores apareçam.”

Isso é uma visão que hoje eu vejo como uma visão de abundância. Se encararmos que a oportunidade que temos é única, não vamos evoluir nunca. Ela pode ser uma boa oportunidade, mas eu posso ter outras. Vivemos em um mundo de abundância de conhecimento e existe fartura.

Depois que eu fiz isso, fiquei muito apertado financeiramente e você comecei a pensar na decisão que fiz de não aceitar a oportunidade, então minha mãe também me disse para não olhar mais para trás. Ela estava certa mais uma vez. Quando se toma uma decisão, é importante que não ficar se questionando sobre como poderia ter sido caso tivesse feito uma escolha diferente. Pense nisso.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sobreviver%20em%20um%20mundo%20de%20abund%C3%A2ncia&url=https%3A%2F%2Fdevpleno.com%2Fmundo-de-abundancia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fmundo-de-abundancia)

---

# Trabalhar na Toptal ou por meio da Toptal? - DevPleno

URL: https://devpleno.com/na-toptal-ou-por-meio-da-toptal

> Qual a diferença de trabalhar na Toptal e por meio da Toptal? Sim, existe diferença! Entenda tudo que precisa saber neste vídeo: <div className=&#34;embedrespo...

Carreira

## Trabalhar na Toptal ou por meio da Toptal?

T
Por Tulio Faria • 9 de fevereiro de 2018

[Carreira](/tag/carreira)

Qual a diferença de trabalhar na Toptal e por meio da Toptal? Sim, existe diferença! Entenda tudo que precisa saber neste vídeo:

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais em [https://go.devpleno.com/fsm/](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Trabalhar%20na%20Toptal%20ou%20por%20meio%20da%20Toptal%3F&url=https%3A%2F%2Fdevpleno.com%2Fna-toptal-ou-por-meio-da-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fna-toptal-ou-por-meio-da-toptal)

---

# Navigator Geolocation API - Sabendo a localização do usuário - DevPleno

URL: https://devpleno.com/navigator-geolocation

> Hoje quero dar uma dica para vocês sobre geolocalização no navegador. É uma API que está cada vez mais disponível nos navegadores. O interessante é que con...

Javascript

## Navigator Geolocation API - Sabendo a localização do usuário

T
Por Tulio Faria • 5 de outubro de 2017

[Javascript](/tag/javascript)

Hoje quero dar uma dica para vocês sobre geolocalização no navegador. É uma API que está cada vez mais disponível nos navegadores. O interessante é que conseguimos fazer aplicações WEB que tenham esse senso de localização.

Alguns dos métodos que eles têm:

&#x3C;html>
&#x3C;body>
&#x3C;script>
if('geolocation' in navigator){} else {Alert('ops')}
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
A partir disso, conseguiríamos checar a nossa localização. Podemos, por exemplo, fazer:

if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position)
},
function (error) {
Console.log(error)
}
)
} else {
Alert('ops')
}
Ao rodar o código e inspecionar, perceba que ele retorna a nossa posição.

Se sua aplicação necessita ter essa possibilidade de checar a posição, é importante checar se não retornou um erro caso o usuário não aceite a verificação.

Outra coisa bem interessante é que podemos checar, de tempos em tempos, a posição do usuário, fazendo um tracker, por exemplo:

watcher: navigator.geolocation.watchPosition(function (position) {
console.log(position)
})
Agora, à medida que essa coordenada ficar mais precisa, vai ser melhor, pois ela vai nos trazendo essas informações.

Conseguimos aumentar essa precisão também utilizando o enableHighAccuracy:

watcher: navigator.geolocation.watchPosition(
function (position) {
console.log(position)
},
function (error) {
console.log(error)
},
{ enableHighAccuracy: true, maximumAge: 30000, timeout: 30000 }
)
No caso do watcher, podemos apagar, equivalente ao que podemos fazer com o clear interval:

Geolocation.clearWatch(watcher)
Esse é um pouco do geolocation. Eu trouxe essa dica pois a utilizamos no Fullstack Academy e eu já construí algumas aplicações utilizando isso também.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Navigator%20Geolocation%20API%20-%20Sabendo%20a%20localiza%C3%A7%C3%A3o%20do%20usu%C3%A1rio&url=https%3A%2F%2Fdevpleno.com%2Fnavigator-geolocation) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnavigator-geolocation)

---

# Como fazer Networking corretamente - DevPleno

URL: https://devpleno.com/networking

> Networking é uma palavra muito utilizada atualmente. A maioria acha que deve ser feito o tempo todo, em todo lugar, e tenta forçar isso. O que é problemáti...

Carreira

## Como fazer Networking corretamente

T
Por Tulio Faria • 23 de maio de 2017

[Carreira](/tag/carreira)

Networking é uma palavra muito utilizada atualmente. A maioria acha que deve ser feito o tempo todo, em todo lugar, e tenta forçar isso.

**O que é problemático?**

É exatamente esse networking forçado, no qual você não tem uma sinergia tão grande, então pega cartão por pegar, entrega por entregar, faz por fazer.

**Como fazer Networking?**

A resposta mais simples é: NÃO faça networking! Se você tem na sua cabeça que precisa fazer isso, você não está fazendo.

A maneira mais interessante capaz de te gerar valor ao longo do tempo é ajudar as pessoas. Gere valor a elas, esse é o primeiro ponto. Na faculdade, você tem facilidade em programação? Ajude colegas com os exercícios. Tem facilidade em gestão de projetos? Ajude as pessoas em gestão de projetos.

Um outro ponto interessante é fazer o que você se propôs de uma maneira muito bem feita e entregue o seu melhor, assim você deixa claro que é muito bom.

Por exemplo, se você entregou algo a um cliente, ele é um ponto de networking. Eu tenho vários clientes antigos, para os quais eu entregava tanto valor, que até hoje nos encontramos e ficamos conversando por horas. Eles não são mais cliente, mas eu ainda mantenho contato.

Isso é networking! Gerar valor, não tentar fazer networking pedindo algo à pessoa logo após entregar um cartão.

Não se esqueça de que o networking é gerar amizades. Não é legal querer ter contatos puramente por resultados financeiros. Reflita sobre isso, você está mesmo fazendo networking do jeito certo?

Deixe suas sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20fazer%20Networking%20corretamente&url=https%3A%2F%2Fdevpleno.com%2Fnetworking) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnetworking)

---

# Networking da maneira certa - DevPleno

URL: https://devpleno.com/networking-da-maneira-certa-carreira

> É muito comum e difundido que temos que fazer networking custe o que custar. Mas veja como fazer isso da maneira que te dê mais resultados e a forma que ve...

Carreira

## Networking da maneira certa

T
Por Tulio Faria • 23 de julho de 2016

[Carreira](/tag/carreira)

É muito comum e difundido que temos que fazer networking custe o que custar. Mas veja como fazer isso da maneira que te dê mais resultados e a forma que venho fazendo em minha vida.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Networking%20da%20maneira%20certa&url=https%3A%2F%2Fdevpleno.com%2Fnetworking-da-maneira-certa-carreira) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnetworking-da-maneira-certa-carreira)

---

# Qual o nível de inglês para trabalhar por meio da Toptal? - DevPleno

URL: https://devpleno.com/nivel-de-ingles-para-a-toptal

> O inglês é um fator importante para ingressar na Toptal, já que toda comunicação é feita nesse idioma. Mas qual o nível de inglês necessário? Descubra nest...

Carreira

## Qual o nível de inglês para trabalhar por meio da Toptal?

T
Por Tulio Faria • 15 de fevereiro de 2018

[Carreira](/tag/carreira)

O inglês é um fator importante para ingressar na Toptal, já que toda comunicação é feita nesse idioma. Mas qual o nível de inglês necessário? Descubra neste vídeo.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Qual%20o%20n%C3%ADvel%20de%20ingl%C3%AAs%20para%20trabalhar%20por%20meio%20da%20Toptal%3F&url=https%3A%2F%2Fdevpleno.com%2Fnivel-de-ingles-para-a-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnivel-de-ingles-para-a-toptal)

---

# NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas - DevPleno

URL: https://devpleno.com/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas

> Neste vídeo da série NodeJS Primeiros Passou vamos conferir um módulo que nos auxilia muito no controle de operações assíncronas/async, principalmente, qua...

Javascript

## NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas

T
Por Tulio Faria • 12 de agosto de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Neste vídeo da série NodeJS Primeiros Passou vamos conferir um módulo que nos auxilia muito no controle de operações assíncronas/async, principalmente, quando potencialmente poderão ser executadas em cascata.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20Async%20-%20Como%20Controlar%20Opera%C3%A7%C3%B5es%20Ass%C3%ADncronas&url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-como-controlar-operacoes-assincronas) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-como-controlar-operacoes-assincronas)

---

# NodeJS Primeiros Passos: Async - Map - DevPleno

URL: https://devpleno.com/nodejs-primeiros-passos-async-map

> Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando a mesma operação assíncrona em uma lista de dados e agrupa...

Javascript

## NodeJS Primeiros Passos: Async - Map

T
Por Tulio Faria • 17 de agosto de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando a mesma operação assíncrona em uma lista de dados e agrupando o resultado no fim.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20Async%20-%20Map&url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-map) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-map)

---

# NodeJS Primeiros Passos: Async - Waterfall - DevPleno

URL: https://devpleno.com/nodejs-primeiros-passos-async-waterfall

> Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando em cascata (um após o outro). Confira o video: <div classN...

Javascript

## NodeJS Primeiros Passos: Async - Waterfall

T
Por Tulio Faria • 15 de agosto de 2016

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando em cascata (um após o outro).

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20Async%20-%20Waterfall&url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-waterfall) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-async-waterfall)

---

# NodeJS Primeiros Passos: Módulos - DevPleno

URL: https://devpleno.com/nodejs-primeiros-passos-modulos

> Neste vídeo vamos abordar organização de código em NodeJS através de módulos. Código fonte criado no vídeo: https://github.com/devpleno/nodejsmodulos <div ...

Javascript

## NodeJS Primeiros Passos: Módulos

T
Por Tulio Faria • 27 de julho de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Neste vídeo vamos abordar organização de código em NodeJS através de módulos.

Código fonte criado no vídeo: [https://github.com/devpleno/nodejs-modulos](https://github.com/devpleno/nodejs-modulos)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20M%C3%B3dulos&url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-modulos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-modulos)

---

# Vídeo sobre NodeJS com Promises - DevPleno

URL: https://devpleno.com/nodejs-primeiros-passos-promises

> Neste vídeo vamos organizar o código assíncrono para facilitar a manutenção posterior do código. Evitando que o código &#34;cresça para frente&#34; :) <div classNa...

Javascript

## Vídeo sobre NodeJS com Promises

T
Por Tulio Faria • 12 de julho de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Neste vídeo vamos organizar o código assíncrono para facilitar a manutenção posterior do código. Evitando que o código “cresça para frente” :)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=V%C3%ADdeo%20sobre%20NodeJS%20com%20Promises&url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-promises) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnodejs-primeiros-passos-promises)

---

# Normalizar-email - DevPleno

URL: https://devpleno.com/normalizar-email

> Hoje eu quero comentar um detalhe de implementação de email muito interessante e como podemos contornar essa característica que temos em alguns endereços d...

Javascript

## Normalizar-email

T
Por Tulio Faria • 30 de novembro de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje eu quero comentar um detalhe de implementação de e-mail muito interessante e como podemos contornar essa característica que temos em alguns endereços de e-mail.

Uma coisa que muita gente acredita é que nossos e-mails somente funcionam dessa maneira:

tuliofaria@devpleno.com
Um detalhe é que podemos adicionar alguns itens a mais nesse e-mail e aí depende do provedor permitir ou não esse e-mail.

No caso do Gmail nós conseguimos colocar alguma string qualquer na frente:

tuliofaria+string@devpleno.com

tulio.faria@devpleno.com
Nós podemos utilizar o primeiro exemplo em alguns sistemas, onde queremos criar mais de uma conta com o mesmo e-mail e também para verificar de onde veio esse e-mail.

Se eu cadastrei esse e-mail em [americanas.com](https://www.americanas.com.br/) eu posso utilizar por exemplo:

tuliofaria+americanas@devpleno.com

Se a gente quiser construir um sistema e desconsiderar essas características de que cada provedor corrige podemos utilizar um módulo chamado normalize-e-mail, ele vai fazer exatamente isso, pegar esse e-mail que está sujo e, dependendo das normalizações que o provedor faz, vai fazer também:

yarn add normalize-email
const normalize-email = require('normalize-email')
console.log(normalizeEmail('tuliofaria+americanas@gmail.com'))
console.log(normalizeEmail('tulio.faria+americanas@outlook.com'))
Com isso ele vai fazer as devidas correções. É muito simples, porém muito útil.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Normalizar-email&url=https%3A%2F%2Fdevpleno.com%2Fnormalizar-email) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnormalizar-email)

---

# Novas Skills: O preço que tem que ser pago - DevPleno

URL: https://devpleno.com/nova-skills-preco-que-tem-que-ser-pago

> Recentemente ministrei uma palestra e passei a refletir o quanto de tempo nós que investir para conseguir realizar alguma coisa. Conhecimento ou Skills são...

Carreira

## Novas Skills: O preço que tem que ser pago

T
Por Tulio Faria • 8 de maio de 2017

[Carreira](/tag/carreira)

Recentemente ministrei uma palestra e passei a refletir o quanto de tempo nós que investir para conseguir realizar alguma coisa. Conhecimento ou Skills são como se fosse uma conta bancaria. Por exemplo, se você quer aprender a programar alguma uma certa linguagem, tem que depositar tempo nessa linguagem. Quando se quer uma nova Skill, você entra devendo nesta conta.

Por exemplo, quero ter uma Skill que é saber a complexidade de um algoritmo, como não sei nada sobre este algoritmo começo negativo, e, na medida que estuda esta linguagem, você vai se aproximando de não dever nada, ou seja, conhecer o algoritmo. E quando você começa a tirar lucro disso podemos fazer a analogia de dinheiro investido, ou positivo nesta conta.

**Sempre começamos no negativo.**

Como a música do Mr Big, Price you gonna pay, se você quer aprender algo novo, é o preço que você tem que pagar. Muitas vezes, com alguns treinamentos, você pode reduzir esse tempo gasto, mas estaria trocando menos tempo por dinheiro investido.

Isso é muito interessante para refletirmos sobre nossa vida, às vezes estamos empolgados para fazer algo, mas não queremos pagar o preço.

“Eu quero ter uma empresa milionária, mas não quero pagar o preço”

“Quero fazer meu aplicativo funcionar, mas não quero pagar o preço”

É importante termos essa ciência de que tudo tem um preço para se pagar: seu tempo, dinheiro… Algo deve ser depositado para trazer resultados.

**Meu conselho:**

Se você já está dedicando seu tempo a estudar alguma coisa, estude de um jeito que não vai precisar se dedicar novamente. Da mesma forma que ficamos negativos em uma Skill por não ter nenhuma experiencia, com o tempo vamos ficando cada vez mais positivos.

**Qual o intuito disso?**

Se pararmos um pouco de cuidar dessa Skill, ela começa a ser esquecida, pois ela não está enraizada em você, e por esse motivo é muito importante na nossa carreira continuar estudando para não perder esses conhecimentos.

Reflita sobre isso.

Às vezes na vida estamos reclamando de alguma coisa, mas evitamos pagar o preço para alcançar esse objetivo.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Novas%20Skills%3A%20O%20pre%C3%A7o%20que%20tem%20que%20ser%20pago&url=https%3A%2F%2Fdevpleno.com%2Fnova-skills-preco-que-tem-que-ser-pago) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnova-skills-preco-que-tem-que-ser-pago)

---

# NPM e Módulos de Terceiros - NodeJS - DevPleno

URL: https://devpleno.com/npm-e-modulos-de-terceiros

> O Node já vem com um gerenciador de pacotes chamado NPM (Node Package Mananger), com o qual é possível gerenciar todas as dependências de pacotes, então el...

Javascript

## NPM e Módulos de Terceiros - NodeJS

T
Por Tulio Faria • 5 de julho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O Node já vem com um gerenciador de pacotes chamado NPM (Node Package Mananger), com o qual é possível gerenciar todas as dependências de pacotes, então ele é tanto um repositório de módulos quanto uma ferramenta que já vem instalada com o Node. Se colocarmos no CMD:

npm - v
Depois de ter instalado o Node, conseguimos ver a versão do NPM, no meu caso é o 3.6.0.

Por exemplo, eu quero instalar um módulo chamado String, então coloco:

npm install string
É meio estranho, mas esse módulo String tem algumas facilidades a mais. Feito isso, será mostrado a mensagem de que foi instalado, no meu caso deu um warning pois eu não tenho um package.json, mas vamos criá-lo mais tarde.

Agora, na pasta do seu projeto, vai ser criada uma pasta node_modules, nela fica todos os módulos que foram instalados pelo NPM, como o módulo String. Especificamente esse pacote String usamos com o S maiúsculo

var S = require('string');
var txt = S('olá').replaceAll("o", "O').toString();
console.log(txt)
Usamos, por exemplo, o replaceAll, que não tem efetivamente no javaScript. Perceba que ele trocou o ‘o’ de minúsculo para maiúsculo.

Quais os detalhes temos que reparar quando usamos módulos de terceiros?

Fizemos um módulo anteriormente, e nele importávamos colocando ./, por exemplo:

var S = require('./string')
Mas usamos ./ apenas quando os módulos são locais e não uma dependência externa ao seu projeto. No caso do String, que é publicado no NPM, podemos referenciar diretamente pelo nome porque o node vai procurar no módulo da sua pasta. Se não acha, ele começa a procurar nas pastas pai.

Note que quando formos instalar uma dependência, não precisa falar para todo mundo ‘olha, ele depende do String’, senão toda vez que for copiar o projeto para alguém e não copiar as dependências, tem que avisar qual vamos usar. Para evitar de ter que fazer isso, conseguimos colocar um Descriptor, onde já dizemos todas as dependências que tem no projeto.

Uma maneira bem fácil de fazer isso é utilizando o:

npm init
Ele irá perguntar qual o nome do projeto, qual o description, qual o entry point (que no nosso caso é o test.js), password, author, etc. No fim, ele gera um JSON e pergunta se eu quero salvar. Então ele gera as informações do projeto ali.

**Qual a vantagem quando eu tenho um package.json?**

Vamos supor que eu fiz um teste com a minha lib. Se ele funcionar, então o inserimos como dependência.

**Como fazemos isso?***

npm install string --save
Além de eu instalar a dependência, também estamos salvando ele no package.json. Se abrirmos ele na área e dependência vamos ver o módulo String.

Perceba que ele tenta achar o major version e o mantém, por exemplo ‘3.3.1’ e pode atualizar para ‘3.4.1’. Ele faz isso para manter seu projeto estável. Isso serve para que quando for comitar esse código no git, você não coloque os módulos, pois caso você esteja rodando no Windows, quando fizer um npm install, alguns módulos compilam algumas coisas a mais como código em C.

Quando baixar esse código em outra máquina, você só vai rodar o NPM install. O próprio NPM vai resolver os módulos e instalar as dependências. Por isso é importante termos as dependências dentro do package.json.

Tempos atrás, as pessoas programavam em Java e ainda não tinham tão definido alguns repositórios de dependência, então tinham que sair caçando as dependências. Atualmente, apenas com esses gerenciadores conseguimos fazer isso adicionando um descritor e isso deixa seu projeto muito mais organizado e independente de plataformas, já que não têm módulos extremamente dependentes de arquitetura.

Confira a explicação em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NPM%20e%20M%C3%B3dulos%20de%20Terceiros%20-%20NodeJS&url=https%3A%2F%2Fdevpleno.com%2Fnpm-e-modulos-de-terceiros) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fnpm-e-modulos-de-terceiros)

---

# O que é o app.use no NodeJS/ExpressJS? - DevPleno

URL: https://devpleno.com/o-que-e-o-app-use-no-nodejsexpressjs

> Entenda o que é o app.use no Express.js, como funciona o sistema de middlewares e como usá-lo para organizar sua aplicação Node.js.

Javascript

## O que é o app.use no NodeJS/ExpressJS?

T
Por Tulio Faria • 28 de dezembro de 2016

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Você já reparou que praticamente qualquer módulo que plugamos no Express atualmente é feito através do uso do app.use? Mas afinal, o que é o app.use?

Ps: você pode ver este material em vídeo também no fim do post

A partir da versão 4 do Express, a extensibilidade é realizada por meio do uso de middlewares. Middleware é um bloco de código que é executado em todas as requisições ou nas que respeitam um certo padrão. E é respeitado a ordem de adição de cada um deles.

Para adicionarmos um middleware em nosso app (ou router):

const express = require('express')
const app = express()

// middleware
app.use(function (req, res, next) {
console.log('middleware 1')
next()
})

app.get('/', function (req, res) {
console.log('requisição')
res.send('Requisição!')
})

app.listen(3001, function () {
console.log('Example app listening on port 3000!')
})
Alguns pontos importantes:

- Este middleware será aplicado antes da execução de qualquer rota que vier depois dele;

- Caso não adicionamos o next(), as rotas subsequentes nem serão executadas. Por isso, middleware é uma ótima forma de fazer controle de acesso a rotas.

Vamos analisar este outro exemplo:

const express = require('express')
const app = express()

app.use(function (req, res, next) {
console.log('middleware 1')
next()
})
app.use(function (req, res, next) {
console.log('middleware 2')
next()
})
app.get('/', function (req, res) {
console.log('requisição')
res.send('Requisição!')
})

app.use(function (req, res, next) {
res.send('nada encontrado')
})
app.get('/url', function (req, res) {
console.log('requisição')
res.send('Requisição!')
})

app.listen(3001, function () {
console.log('Example app listening on port 3000!')
})
Quando fizermos uma requisição para /, passaremos pelos 2 primeiros middlewares mas não pelo terceiro. O res.send (que envia a resposta ao browser) encerra a pilha de execução.

Já quando executamos qualquer outra url diferente de /, o terceiro middleware é executado. E como ele não tem next(), ele não deixa nada abaixo dele ser executado. Ou seja, neste exemplo, ele está ocultando a última rota.

**Aplicando um middleware a um conjunto de URLs específicas**

Veja o seguinte exemplo:

const express = require('express')
const app = express()

app.use(function (req, res, next) {
console.log('middleware 1')
next()
})
app.use(function (req, res, next) {
console.log('middleware 2')
next()
})
app.get('/', function (req, res) {
console.log('requisição')
res.send('Requisição!')
})

app.use('/admin', function (req, res, next) {
console.log('checar se tem permissao')
next()
})
app.get('/admin', function (req, res) {
console.log('requisição admin')
res.send('Requisição admin!')
})
app.get('/admin/teste', function (req, res) {
console.log('requisição admin')
res.send('Requisição admin!')
})

app.use(function (req, res, next) {
res.send('nada encontrado')
})
app.get('/url', function (req, res) {
console.log('requisição')
res.send('Requisição!')
})

app.listen(3001, function () {
console.log('Example app listening on port 3000!')
})
Repare que adicionamos um middleware passando uma URL base. Nestes casos, apenas se a URL iniciar, no exemplo, por /admin, o middleware será executado. Isso também é muito útil para autenticação e autorização.

## Veja este material em vídeo

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=O%20que%20%C3%A9%20o%20app.use%20no%20NodeJS%2FExpressJS%3F&url=https%3A%2F%2Fdevpleno.com%2Fo-que-e-o-app-use-no-nodejsexpressjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fo-que-e-o-app-use-no-nodejsexpressjs)

---

# Web Basic - RESTful - DevPleno

URL: https://devpleno.com/o-que-e-restful

> Apenas para lembrar o que vimos no post anterior sobre arquitetura Web, existem as duas pontas da aplicação: o backend e o frondend e uma troca de mensagen...

Fundamentos

## Web Basic - RESTful

T
Por Tulio Faria • 15 de maio de 2017

[Fundamentos](/tag/fundamentos)

Apenas para lembrar o que vimos no post anterior sobre arquitetura Web, existem as duas pontas da aplicação: o back-end e o frond-end e uma troca de mensagens entre eles.

Entre essas duas camadas, há um padrão que é a forma que eles trocam essa mensagem. Quando o cliente fala com o server, temos o protocolo HTTP, o method diz algo como por exemplo “servidor, altere algo no servidor” (POST), mas temos outros tipos como Delete, Get, Put, etc.
Há algum tempo, usávamos bastante o POST e o GET, que seria um formulário com POST ou um link com o GET (praticamente não usávamos os outros dois) mas com o tempo a aplicação foi evoluindo até que chegou em um ponto que começou a voltar um padrão para não precisarmos mais passar informação na URL que estamos chamando, pois o método já faz isso.
Antigamente era comum, por exemplo, fazer um Script que se chamava usuários/save. Este save acaba não precisando ser assim, pois o POST já era feito para isso, com isso estávamos sendo redundantes. Assim, começamos a adotar um padrão chamado RESTful

**O que é o RESTful?**

Basicamente seria usarmos estes métodos de uma forma que ele já indique que tipo de alteração queremos fazer no servidor, por exemplo:
POST(enviar dados) para /users, o back-end irá entender que queremos criar um usuário novo;
GET no /users ele nos passará todos os users;
GET em /users/tulio, quero apenas o usuário especifico; PUT (também submetemos dados para lá) e dizemos que queremos alterar os dados do user/tulio.
Com isso, ficou muito mais simples, pois não precisamos, por exemplo, passar na URL que tipo de operação queremos fazer, simplesmente fazemos no método. E com a evolução dos navegadores e a chegada de novos frameworks, conseguimos construir uma forma de comunicação que chamamos então de RESTful, conseguindo usar todos os métodos da especificação HTTP para essa comunicação entre front-end e back-end.
Graças ao HTTP e algumas padronizações que temos na comunicação, a internet é o que é hoje, pois sem padronização não teríamos comunicação, já que cada um faria seu próprio padrão.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Web%20Basic%20-%20RESTful&url=https%3A%2F%2Fdevpleno.com%2Fo-que-e-restful) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fo-que-e-restful)

---

# O que fazer para dar certo? - DevPleno

URL: https://devpleno.com/o-que-fazer-para-dar-certo

> Hoje eu gostaria de responder uma coisa que eu ouço muito. As pessoas sempre me perguntam como que eu faço para dar certo. Como dar certo para trabalhar no...

Carreira

## O que fazer para dar certo?

T
Por Tulio Faria • 10 de novembro de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de responder uma coisa que eu ouço muito. As pessoas sempre me perguntam como que eu faço para dar certo. Como dar certo para trabalhar no exterior, nos projetos, no emprego novo, etc.

Uma coisa que eu venho refletindo de tudo que eu venho fazendo e coincidiu com o que um mentor meu me disse e eu achei fantástica é a seguinte:

A primeira coisa é mudar de pensar e trocar o PARA por ATÉ. Comece a pensar nas coisas ATÈ conseguir alcançar seus objetivos, assim elas vão dar certo.

Pode parecer besteira, mas quando colocamos isso na cabeça, mudamos a forma de pensar e tudo muda. Faça as coisas até elas darem certo. Se você fizer isso, pode ter certeza que vai fazer muita diferença no seu mind-set.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=O%20que%20fazer%20para%20dar%20certo%3F&url=https%3A%2F%2Fdevpleno.com%2Fo-que-fazer-para-dar-certo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fo-que-fazer-para-dar-certo)

---

# Você sofre de Obesidade Mental? - DevPleno

URL: https://devpleno.com/obesidade-mental

> Hoje quero contar para você o que aconteceu comigo há mais ou menos 1 ano / 1 ano e meio, até mesmo antes de começar o DevPleno. Eu comecei a perceber que ...

Carreira

## Você sofre de Obesidade Mental?

T
Por Tulio Faria • 17 de outubro de 2017

[Carreira](/tag/carreira)

Hoje quero contar para você o que aconteceu comigo há mais ou menos 1 ano / 1 ano e meio, até mesmo antes de começar o DevPleno.

Eu comecei a perceber que eu queria lançar meus cursos e colocar o DevPleno no ar, porém eu fiquei apenas estudando, já que queria fazer da melhor forma possível.

Estudei React, Angular, Node, JavaScript, Mongo, DevOps, etc, pois eu queria saber cada vez mais para conseguir compartilhar. Eu estava lendo o livro geração de Valor (que recomendo para quem quer pensar um pouco diferente) e comecei a refletir um pouco sobre a carreira.

Nesse livro tinha uma citação para o que eu estava fazendo, chamava-se “Obesidade mental”, ela acontece quando sabemos muito, mas executamos pouco.

Quando a gente começa a estudar muito e não executa, parece que nunca vamos ser completos. Depois que começamos a executar, não conseguimos mais parar.

Desde que eu coloquei meu primeiro vídeo no ar e compartilhei com todo mundo, eu comecei a executar cada vez mais.

Uma das coisas que eu acho fundamental para executar as coisas é seguir algum método, por exemplo, no Fullstack Master e no DevReactJS, temos uma linha de raciocínio, é muito mais fácil fazer os exercícios e ir executando. Além disso, é bem legal porque os alunos compartilham os repositórios deles no GitHub com todos os exercícios dos cursos.

Por hoje é só, apenas queria deixar essa reflexão para vocês. Até a próxima.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Voc%C3%AA%20sofre%20de%20Obesidade%20Mental%3F&url=https%3A%2F%2Fdevpleno.com%2Fobesidade-mental) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fobesidade-mental)

---

# Once N vezes - DevPleno

URL: https://devpleno.com/once-n-vezes

> Essa dica é sobre uma técnica em JavaScript de uma função utilitária que permite que uma outra função só seja executada uma única vez (Once). Para que faze...

Algoritmos

## Once N vezes

T
Por Tulio Faria • 22 de maio de 2017

[Algoritmos](/tag/algoritmos)

Essa dica é sobre uma técnica em JavaScript de uma função utilitária que permite que uma outra função só seja executada uma única vez (Once).

**Para que fazer isso?**

Vamos supor que você carregou uma página ou algo via AJAX e deve fazer alguma operação,mas essa operação só pode acontecer uma única vez (e você pode ter mais de uma operação) então se colocar no final de cada uma, a que acontecer primeiro não deixa as posteriores acontecerem. isso evita algum tipo de concorrência.

Vamos criar uma função func1. Ela só vai poder ser chamada uma vez, mesmo sendo chamada duas vezes. Para isso, vou criar uma função once, essa vai ser a função que permitirá que uma outra função qualquer (que no caso vai ser a fn) seja executada somente uma vez. Para isso, precisamos de uma variável resultado e uma return function.

function once(fn, context){
let result
return function(){
}
}
const func1 = once(function){
console.log('opah')
})
func1()
func1()
Quando chamamos o once e passamos a function

'console.log('opah')'
estamos passando ele para dentro de fn, então ela vai retornar uma outra função. O detalhe é que essa função que estamos retornando volta e fica dentro de func1, porém o contexto **let result** fica travado, então é possível saber quantas vezes essa função foi chamada.

function once(fn, context) {
let result
let contador = 0
return function () {
contador++
console.log(contador)
}
}
Chamando o arquivo.js será mostrado o número de vezes que foi chamada a função (no caso, 2 vezes).

Agora vamos fazer com que ele bloqueie as próximas chamadas usando um if. Se o contador for igual a 0, chamamos a função. Caso já tenha sido executada uma vez, ela vai parar.

Para isso, chamaremos a função fn, o contexto – caso não venha contexto nenhum, ele mandará o da própria função – guardamos isso dentro de result e por fim incrementamos o contador e damos o retorno do result.

function once(fn, context) {
let result
let contador = 0
return function () {
contador++
if (contador === 0) {
result = fn.apply(context || this)
}
contador++
return result
}
}
Podemos aumentar isso ainda mais, dizer o número máximo de vezes que queremos que chame a função, por exemplo.

function once(fn, max, context){
let result
let contador = 0
return function(){
contador++
if(contador&#x3C;max){
result = fn.apply(context || this)
}
contador++
return result
}
}
const func1 = once(function){
console.log('opah')
}, 2)
Essa técnica é muito poderosa para fazer alguns tipos de restrições.

Perceba que fizemos duas coisas: travar a função para rodar apenas uma vez e em seguida rodar um número N de vezes que determinamos utilizando a mesma técnica.

Confira o passo a passo no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Once%20N%20vezes&url=https%3A%2F%2Fdevpleno.com%2Fonce-n-vezes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fonce-n-vezes)

---

# Árvore Binária de Busca - Operação de Busca - DevPleno

URL: https://devpleno.com/operacao-de-busca

> Agora que você já entendeu sobre Árvore Binária e Árvore Binária de Busca, vamos falar sobre a operação de busca. Estou utilizando o exemplo do exercício a...

Algoritmos

## Árvore Binária de Busca - Operação de Busca

T
Por Tulio Faria • 4 de julho de 2017

[Algoritmos](/tag/algoritmos)

Agora que você já entendeu sobre [Árvore Binária](https://www.devpleno.com/arvore-binaria/) e [Árvore Binária de Busca](https://www.devpleno.com/arvore-binaria-de-busca/), vamos falar sobre a operação de busca.

Estou utilizando o exemplo do exercício anterior de árvores binárias. Nós sabemos que a árvore binária tem uma regra de inserção, então podemos esperar algumas coisas dela, por exemplo:

insert(arvore, 10)
//console.log(arvore)
insert(arvore, 11)
//console.log(arvore)
insert(arvore, 9)
//console.log(arvore)
//insert(arvore, 8)
console.log(arvore)
function seach(tree, value){
if(!tree.value || tree.value === value){
return tree.value
}
if(tree.value &#x3C; value){
return search(tree.left, value)
}
return serach (tree.right, value)

}
console.log(search(arvore, 10)
Criamos um search onde passamos uma árvore para ela e quero buscar um valor. Sabemos que se o valor dessa árvore não existir, temos que retornar undefined ou se a árvore for igual ao valor que estou buscando, vou retornar o valor. Caso contrário, se o valor que estou buscando for menor que o nó atual, ele deve estar do lado esquerdo, então vamos buscar o valor apenas no lado esquerdo e por último, se for maior, procuramos do lado direito.

Perceba que encontrou o 10, pois ele tinha na árvore. Se procurarmos um valor que não está na árvore, será retornado o undefined.

Ela sempre dividirá o problema em dois, então ao pensarmos na complexidade do código, é o contrário de termos um ‘for’ dentro do outro. Como ele sempre divide em dois, no pior caso, o nosso algoritmo é 0(raiz(n)) então se tivermos 25 elementos, teremos mais ou menos 5 comparações, no nosso caso que temos 4, vamos ter 2 comparações. É algo muito rápido, logo a complexidade do algoritmo é 0(log n) que é uma performance muito boa para um algoritmo de busca. O search é o mais importante das árvores, não é atoa que se chama de busca.

Finalizamos todas as operações em árvore, visitar em pré order, in order e pós order, inserção e a busca em si que é muito utilizada.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=%C3%81rvore%20Bin%C3%A1ria%20de%20Busca%20-%20Opera%C3%A7%C3%A3o%20de%20Busca&url=https%3A%2F%2Fdevpleno.com%2Foperacao-de-busca) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Foperacao-de-busca)

---

# Sou contra a orientação-objetos (OO)? - DevPleno

URL: https://devpleno.com/orientacao-objeto

> Hoje eu queria responder uma pergunta que sempre me fazem: “Tulio, você é contra orientaçãoobjetos?” Primeiramente, eu não sou contra orientaçãoobjetos. Se...

Javascript

## Sou contra a orientação-objetos (OO)?

T
Por Tulio Faria • 19 de setembro de 2017

[Javascript](/tag/javascript)

Hoje eu queria responder uma pergunta que sempre me fazem: “Tulio, você é contra orientação-objetos?”

Primeiramente, eu não sou contra orientação-objetos. Se pegarmos linguagens como JAVA, é um paradigma interessante.

Coisas que eu não gosto em orientação-objeto:

Nós temos muito Pattern. A “Patternite”, como eu costumo brincar, faz com a a gente utilize o Pattern às vezes antes do tempo, aplicamos de forma prematura. E quando você começa a usar muito isso sem ter a concepção do seu sistema bem definida, pode ser que você comece a ter problemas de abstração, então sempre vai ter algo que não encaixa direito dentro da arquitetura.

Voltando para a programação funcional, quando trazemos muitos Patterns e conceitos para a programação funcional, também temos esse problema, já que estamos abstraindo demais no começo. É Interessante lembrar que a menor unidade de código que temos dentro do JavaScript é a função. Quando a gente replica uma característica de orientação-objeto dentro de uma programação funcional é o que eu acho estranho, já que não precisamos necessariamente criar uma classe dentro do JavaScript, apesar de conseguirmos.

Então eu não sou contra a orientação-objetos em si, e sim aplicá-la demais em cima de uma linguagem funcional. A minha dica pra você é: tente não organizar demais de começo, senão vai começar a classificar coisas de maneira errada, já que vão ser classificadas em um estágio muito prematuro do projeto.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sou%20contra%20a%20orienta%C3%A7%C3%A3o-objetos%20(OO)%3F&url=https%3A%2F%2Fdevpleno.com%2Forientacao-objeto) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Forientacao-objeto)

---

# Diferença entre as programações Orientação-objetos, Imperativa e Funcional - DevPleno

URL: https://devpleno.com/orientacao-objetos-imperativa-e-funcional

> Hoje eu quero explicar um pouco melhor essa diferença entre Programação Funcional, Orientaçãoobjetos e Imperativa. Primeiro, todos os paradigmas são intere...

Javascript

## Diferença entre as programações Orientação-objetos, Imperativa e Funcional

T
Por Tulio Faria • 21 de setembro de 2017

[Javascript](/tag/javascript)

Hoje eu quero explicar um pouco melhor essa diferença entre Programação Funcional, Orientação-objetos e Imperativa.

Primeiro, todos os paradigmas são interessantes e importantes, mas antes de falarmos sobre cada um deles, o que é um paradigma?

Ele vai dizer como você abstrai seu problema do “mundo real” para a computação. Por exemplo, se você vende doces, como você transformar essa venda em uma forma computadorizada. O problema é que na primeira abordagem, que foi a ‘Imperativa’, nós simplesmente executávamos códigos, como comandos diretos, mas foi chegando em uma situação onde ficava muito complexo para entender, não existia uma forma de classificar esse código que deixasse ele um pouco mais fácil de dar manutenção.

Uma das formas que surgiram para resolver isso foi a orientação-objetos. Ela tenta abstrair os objetos que estão envolvidas nos problemas e então agrupamos essas funções e dados dentro desses objetos. Por exemplo, eu quero modelar um produto, ele é uma classe, quando eu quiser instanciar essa classe eu vou ter um objeto, que são os valores dentro dessa classe. O problema é que para você programar com orientação-objetos, você tem que conhecer algumas regras ou boas práticas, como patterns, mas o problema maior é quando o pessoal programa em uma linguagem orientada objeto, porém ainda faz imperativa. Para dominar o orientado objeto demora para conseguir fazer essa abstração de maneira interessante.

Quando pegamos uma linguagem funcional, o pessoal aplica o mesmo conceito de orientação-objetos dentro do funcional, isso é algo que não me agrada. Você trazer muita coisa de orientação-objeto para um paradigma diferente. Cada paradigma tem suas próprias características.

Fazendo isso, nós começamos a classificar as coisas cedo demais. Algo que eu acho muito legal da programação funcional é que conseguimos construir pequenos blocos, que são as funções, podemos passar elas como parâmetros, por exemplo. O legal disso é que não assumimos nenhuma classificação inicial para isso. Caso a gente queira fazer tudo em um arquivo só e depois ir quebrando em funções, é possível. Fazendo isso nós podemos amadurecer e estabilizar melhor para depois organizar. Não precisamos ter isso de começo, porque muitas vezes uma arquitetura te impõe erros, pois temos uma arquitetura muito bem definida mas tem coisas que não se encaixam em nem um lugar nem em outro.

Para não acontecer isso em programação funcional, é interessante não trazer esses conceitos e apenas a ideia desse pattern.

Mas o maior problema que eu vejo hoje em orientação-objetos é exatamente a questão de que, quando ele começa a crescer, existem coisas que não se encaixam em nenhum lugar dentro da arquitetura.

Então a grande vantagem para as três abstrações é saber utilizar elas do jeito delas e não tentar aplicar esse paradigma em outro.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Diferen%C3%A7a%20entre%20as%20programa%C3%A7%C3%B5es%20Orienta%C3%A7%C3%A3o-objetos%2C%20Imperativa%20e%20Funcional&url=https%3A%2F%2Fdevpleno.com%2Forientacao-objetos-imperativa-e-funcional) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Forientacao-objetos-imperativa-e-funcional)

---

# Parceiros e Amigos - DevPleno

URL: https://devpleno.com/parceiros

> Empresas parceiras que oferecem descontos e benefícios exclusivos para a comunidade DevPleno.

## Parceiros e Amigos

Empresas que acreditam no nosso trabalho e oferecem benefícios exclusivos para a comunidade DevPleno.

[Contabilidade Conta49 Contabilidade A minha contabilidade especializada para profissionais de tecnologia e SaaS. Abertur](https://www.conta49.com.br)

[Cloud DigitalOcean Infraestrutura cloud simples e escalável para desenvolvedores. Servidores, bancos de dados e Kubernet](https://m.do.co/c/90c6221fd51a)

[Câmbio TechFX Plataforma de câmbio para recebimentos do exterior. Ideal para quem precisa receber da gringa. Taxa de 0,1](https://www.techfx.com.br/tulio-faria/)

[Câmbio Payoneer Plataforma de câmbio e recebimentos do exterior. Possui cartão de débito em dólar. Receba USD 250,00* ao](https://discover.payoneer.com/partner/conta49)

[Cloud Hostinger Hospedagem e VPS no Brasil. Use o cupom: DEVPLENO para 10% de desconto. Visitar Parceiro](https://www.hostg.xyz/SHEDX)

[Câmbio Husky Plataforma de câmbio e recebimentos do exterior. Isenção de taxa (TAXA ZERO) no seu primeiro recebimento. V](https://app.husky.io/onboarding?ref=tuliovitormachadofaria)

---

# Pare de pensar em classes!  Série - POO para JS - DevPleno

URL: https://devpleno.com/pare-de-pensar-em-classes

> Nesta nova série do DevPleno, mostro como podemos passar de programação orientadaobjetos para JavaScript mais funcional. A primeira coisa (que é muito impo...

Javascript

## Pare de pensar em classes! Série - POO para JS

T
Por Tulio Faria • 25 de outubro de 2017

*

[Javascript](/tag/javascript)

Nesta nova série do DevPleno, mostro como podemos passar de programação orientada-objetos para JavaScript mais funcional.

A primeira coisa (que é muito importante)* é tentar parar de pensar estruturado.Se você quer mudar de programação orientada objetos para JavaSxript cada vez mais funcional funcional, precisa parar de pensar em classes. Apesar do JavaScript ter uma forma de criar classes,

por exemplo:

class Calc {
constructor(num1, num2) {
this.num1 = num1
this.num2 = num2
}
out() {
console.log(this.num1, this.num2)
}
}
const a = new Calc(1, 2)
a.out()
Devo utilizar?

Se você quer programar mais de uma maneira que faça sentido em JavaScript, você deve evitar. Vou mostrar algo que é bastante estranho principalmente para quem vem de Java, PHP, etc:

a.out.bind({ num: 4, num2: 5 })()
Então eu peguei o meu objeto ‘a’, o método out e dou um bind passando num1 e num2, com isso eu consigo sobrescrever um parâmetro que teoricamente estaria restrito a esse objeto.

Uma forma de construir sem utilizar o class seria assim:

const Calc = function (num1, num2) {
this.num1 = num1
this.num2 = num2
return {
out: function () {
console.log(this.num1, this.num2)
}
}
}
Mas eu consigo resolver isso de mutar o objeto, evitando por exemplo que o bind funcionasse? Toda function cria um contexto novo.

Para que isso não aconteça, podemos utilizar uma outra construção que não permita que façamos isso:

return {
out: () => {
console.log(this.num1, this.num2)
}
}
A partir de uma arrow function, não temos mais uma forma de sobrescrever o this. Assim eu evitei essa criação excessiva de contextos. Utilizando dessa forma, você vai perceber que ele parece muito uma classe mas existem vários conceitos de programação funcional que vão fazer muito sentido à medida que você for evoluindo.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Pare%20de%20pensar%20em%20classes!%20%20S%C3%A9rie%20-%20POO%20para%20JS&url=https%3A%2F%2Fdevpleno.com%2Fpare-de-pensar-em-classes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpare-de-pensar-em-classes)

---

# Participação em Eventos e Comunidades - DevPleno

URL: https://devpleno.com/participacao-em-eventos-e-comunidades

> Hoje eu vou comentar um pouco sobre a participação em eventos e em comunidades, esse tema foi sugerido pelo Ian Magalhães que comentou no nosso canal do Yo...

Carreira

## Participação em Eventos e Comunidades

T
Por Tulio Faria • 19 de julho de 2017

[Carreira](/tag/carreira)

Hoje eu vou comentar um pouco sobre a participação em eventos e em comunidades, esse tema foi sugerido pelo Ian Magalhães que comentou no nosso [canal do YouTube](https://www.youtube.com/deplenocom), e se você quiser fazer isso pode ficar à vontade, mande sua dúvida ou pergunta no e-mail ou pelo YouTube, estamos abertos para novos questionamentos.

O que eu acho sobre comunidades e participação em eventos?

Qualquer comunidade que você participar eu acho muito importante, desde a do seu bairro ou de algum tema específico (seja de tecnologia ou não). É importante porque você tem a oportunidade de se conectar com pessoas e muitas vezes a gente esquece disso, não adianta desenvolver um software bem se não tem pessoas querendo utilizar isso, por exemplo, e as comunidades são uma grande oportunidade para fazer isso.

Aqui temos a associação de bairro, associação comercial e coisas do gênero que são pessoas reunidas tentando resolver um problema do assunto. Nada melhor que isso para conseguirmos trocar experiências com as pessoas.

O DevPleno é uma comunidade em que estamos construindo, trocando experiências, utilizando até mesmo as informações que vocês passam para mim para passar para mais pessoas. Então se você não tem uma comunidade para discutir tecnologia na sua cidade, é muito importante você dar o passo rumo a isso.

Já sobre a participação em eventos, eu acho extremamente importante. Novamente o mais importante é fazer conexões com pessoas, vá em eventos para conversar com as pessoas. Uma das coisas que eu faço sempre é ir sozinho aos eventos, porque as dinâmicas se você está com alguém fará com essa pessoa e isso é uma grande perda de chance de conhecer novas pessoas, trocar contato e talvez perder uma parceria que pode mudar sua vida. Pode ser que você converse com alguém sobre um tema e isso mude sua vida ou perspectiva de como enxergar as coisas.

Em um último evento que eu fui, que foi sobre negócios, eu conheci uma pessoa que falava sobre como controlar a ansiedade e isso foi muito legal, ele fez até um experimento para eu me acalmar e reduzir a ansiedade. Cada dia do evento eu fui conhecendo uma pessoa diferente, pois cada dia eu sentava em um lugar diferente, isso é bastante importante para nos conectarmos.

O grande problema que o pessoal reclama é que não tem eventos na sua região, então a minha postura quanto a isso é encabeçar esses eventos, não presencialmente pois hoje não consigo mais, mas online eu consigo, como o Fullstack Academy. Eu deixo isso claro para minha comunidade que sempre que precisar eu estou disponível para dar palestra em qualquer evento na região que eu possa abordar algum tema. Eu faço isso porque temos que fortalecer primeiramente os eventos que estão perto da gente.

Tínhamos um evento na cidade que aconteceu quatro ou cinco anos seguidos e depois teve uma pausa e agora voltou esse ano e sempre que é preciso eu estou lá, antes dessa pausa eu era um dos poucos palestrantes que tinham e com isso acabamos inspirando novas pessoas a palestrar e no último ano antes da pausa, tivemos muitas palestras, isso foi muito legal porque conseguimos fortalecer um evento regional.

Se você tem um evento na sua cidade que você não esteja alinhado com ele, converse com a coordenação desse evento para palestrar ao invés de criar outro evento. Eu faço muito disso, esse ano dei por volta de três palestras e principalmente na região.

Então fortaleça as comunidades e eventos que estão perto de você. Nós vivemos em comunidade, trabalhamos em comunidade, então porque não aprender em comunidade?

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Participa%C3%A7%C3%A3o%20em%20Eventos%20e%20Comunidades&url=https%3A%2F%2Fdevpleno.com%2Fparticipacao-em-eventos-e-comunidades) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fparticipacao-em-eventos-e-comunidades)

---

# Entenda o que é Patternite - DevPleno

URL: https://devpleno.com/patternite

> Hoje eu gostaria de falar sobre um item que é bastante impeditivo quando as pessoas que já tem experiência tentam vir para o JavaScript. Eu chamava isso de...

Javascript

## Entenda o que é Patternite

T
Por Tulio Faria • 10 de novembro de 2017

[Javascript](/tag/javascript)

Hoje eu gostaria de falar sobre um item que é bastante impeditivo quando as pessoas que já tem experiência tentam vir para o JavaScript. Eu chamava isso de Patternite, isso nada mais é que a vontade de aplicar Pattern em todos os lugares.

O que é um Pattern ou Design Pattern?

Ele é um padrão de projeto. Todo mundo que vem de outras linguagens, provavelmente já com alguns padrões de projeto na mente, como por exemplo Singleton, MVC, Factory, etc, eu sugiro que antes de começar a classificar classes entender o que está acontecendo no código e aí sim aplicar um design pattern muito melhor.

Eu vou fazer um exemplo na prática para ficar mais simples. Primeiramente vou instalar o EJS que é uma engine de template baseada em JavaScript. Além disso, vou instalar o Express, que é um micro-framework:

yarn add ejs express
Agora vou criar um arquivo novo chamado index.js e dentro dele farei o seguinte:

const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('olá poo2js')
})
app.listen(3000, (err) => console.log(err, 'server'))
O detalhe que quero realçar aqui é que não criei nem um controller, nenhum view nem nada no sentido. A vantagem disso é que eu tive meu primeiro small win.

Quando formos aprender uma linguagem nova acho que essa é a parte mais importante para aprender cada vez mais. Agora a segunda small win é a seguinte, é muito ruim construir o código dessa forma então se fizermos o seguinte:

const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get('/', (req, res) => {
res.render('home')
})
app.listen(3000, (err) => console.log(err, 'server'))
Dessa forma conseguimos utilizar templates e não precisamos criar a resposta falando o conteúdo. Ao rodar, perceba que não conseguimos ver o home dentro do diretório views.

Precisamos criar um diretório Views e dentro dele o home.ejs, ai sim, lá dentro, fazer o nosso html:

&#x3C;html>
&#x3C;head>
&#x3C;tittle>POO2JS&#x3C;/tittle>
&#x3C;/head>
&#x3C;body>
&#x3C;h1>Olá&#x3C;/h1>
&#x3C;/body>
&#x3C;/html>
Isso são coisas que naturalmente eu iria perceber que iria acontecer. Caso a gente queira criar mais páginas, começa a perceber que existe um certo padrão. Se quiséssemos saber como a minha aplicação está realmente funcionando, é muito melhor saber qual a URL e para onde ele manda.

Para não ficar uma bagunça, poderíamos por exemplo, criar um arquivo routes e colocar nossas rotas lá dentro:

const app = require('express').Router()
app.get('/', (req, res) => {
res.render('home')
})
app.get('/page1', (req, res) => {
res.render('page1')
})
app.get('/page2', (req, res) => {
res.render('page2')
})
module.exports = app
Agora, no nosso código inicial, podemos fazer o seguinte:

const express = require('express')
const app = express()
app.set('view engine', 'ejs')
const routes = require('./routes')
app.use(routes)
app.listen(3000, (err) => console.log(err, 'server'))
Perceba que eu estou classificando as coisas de uma maneira que faz sentido para mim. A gente começou simplesmente com o arquivo index.

Então o meu conselho é que se comece construindo tudo em um arquivo apenas e, com o tempo, você percebe que as coisas conseguem se agrupar.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Entenda%20o%20que%20%C3%A9%20Patternite&url=https%3A%2F%2Fdevpleno.com%2Fpatternite) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpatternite)

---

# Pegadinha #1 de entrevistas em JavaScript - DevPleno

URL: https://devpleno.com/pegadinha-de-entrevistas-de-javascript

> Hoje quero comentar uma questão muito comum em entrevistas de JavaScript. Qual é a saída desse código? Detalhe que estamos utilizando um setTimeOut com um ...

Javascript

## Pegadinha #1 de entrevistas em JavaScript

T
Por Tulio Faria • 7 de novembro de 2017

[Javascript](/tag/javascript)

Hoje quero comentar uma questão muito comum em entrevistas de JavaScript.

Qual é a saída desse código?

const arr = ['a', 'b', 'c', 'd']
for (var i = 0; i &#x3C; arr.length; i++) {
setTimeOut(() => {
console.log(i, arr[i])
}, 0)
}
console.log('out', i)
Detalhe que estamos utilizando um setTimeOut com um zero, mas poderia ser qualquer valor.

O primeiro detalhe é que percebemos que o out saiu primeiro com o número 4. O ‘var’ foi definido dentro do for, porém eu consegui dar um console log lá é baixo. Podemos chegar a conclusão que ele não respeitou o escopo. Outro ponto importante é que ele aconteceu antes do restante, isso acontece porque sempre que utilizamos o setTimeOut, ele leva essa execução da arrow function para dentro do event loop.

Como o i já está com 4, ele não é um número válido, pois nosso array inicia-se em zero e termina em 3. Por esse motivo virá o seguinte:

out 4

4 undefined
4 undefined
4 undefined
4 undefined
Como arrumamos essa função?

Temos algumas formas de arrumar isso. Existe uma bem simples e algumas que podemos brincar um pouco mais.

A primeira bem simples é trocar o var por let:

for (let i=0; i&#x3C;arr.length; i++){
setTimeOut(() => {
console.log(i, arr[i])
},0)

Agora funcionou perfeitamente:

0 'a'
1 'b'
2 'c'
3 'd'

Por que essa diferença?

Quando estamos com o var, seria equivalente a quando ele estiver executando o código ele puxa todos os vars pra cima, isso é conhecido como hoisting.

Por esse motivo, sempre que possível, utilize let e const.

Outra maneira seria transformar em setTimeOut em uma maneira que eu consiga injetar as variáveis dentro dele mesmo, como uma self invoked:

setTimeOut(
(function (ii) {
return () => {
console.log(ii, arr[ii])
}
})(i),
0
)
Iremos executar a função e a partir da function o ii vai estar válido. Assim funcionará também do jeito que esperávamos.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Pegadinha%20%231%20de%20entrevistas%20em%20JavaScript&url=https%3A%2F%2Fdevpleno.com%2Fpegadinha-de-entrevistas-de-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpegadinha-de-entrevistas-de-javascript)

---

# Pensamentos limitantes - DevPleno

URL: https://devpleno.com/pensamentos-limitantes

> Hoje eu gostaria de dar uma dica de carreira de como ser um profissional melhor. Muitas vezes nos pegamos tendo, mesmo sem querer, o pensamento limitante. ...

Carreira

## Pensamentos limitantes

T
Por Tulio Faria • 18 de julho de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de dar uma dica de carreira de como ser um profissional melhor. Muitas vezes nos pegamos tendo, mesmo sem querer, o pensamento limitante. Toda vez que você for aprender algo novo ou tentar fazer algo, vai ter uma voz dizendo “não é agora” ou “você não nasceu pra isso”. Por exemplo, você tem a ideia de um software ou app novo e envolve um monte de coisa que você não sabe, a sua cabeça diz “desiste, você não vai conseguir fazer”, ai naturalmente sua parte física do corpo vai começar a responder de acordo. Seu corpo entra em um estado de se manter na zona de conforto e começa a poupar energia, então você terá menos energia para pensar nesse projeto, porque o seu pensamento te limitou nessa caixinha.

A primeira que precisa pensar quando se quer ser um desenvolvedor pleno é estudar cada vez mais, conseguir coisas novas e não ter pensamento limitante.

Quando vier esse pensamento, proteja-se contra isso. Responda esse pensamento de forma a mostrar que você realmente consegue e aquilo não passa de uma tentativa de seu corpo e sua mente de se proteger de algo que possa dar errado. Com isso você conseguirá realizar muito mais apenas estudando seu estado mental.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Pensamentos%20limitantes&url=https%3A%2F%2Fdevpleno.com%2Fpensamentos-limitantes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpensamentos-limitantes)

---

# Estruturas de Dados - Pilhas - DevPleno

URL: https://devpleno.com/pilha

> Hoje vamos falar um pouco sobre uma estrutura de dados que é muito comum em computação, principalmente em sua base, a Pilha. O primeiro conceito que temos ...

Javascript

## Estruturas de Dados - Pilhas

T
Por Tulio Faria • 21 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje vamos falar um pouco sobre uma estrutura de dados que é muito comum em computação, principalmente em sua base, a Pilha. O primeiro conceito que temos que saber sobre Pilha é que ela segue o conceito de LIFO (Last In First Out), então o último que entra é o primeiro que sai. Uma coisa bem legal em JavaScript é que já temos uma Pilha naturalmente no vetor, então se fizermos, por exemplo:

const vetor = []
vetor.push(1)
vetor.push(2)
console.log(vetor.pop())
console.log(vetor)
Percebam que quando desempilhamos ele volta o último item que foi empilhado e modifica o vetor. Agora vamos implementar isso sem precisar utilizar o vetor dessa forma, criando nossa própria implementação de stack:

const Stack = () => {
const data = []
let top = -1
}
Como estamos fazendo no modo funcional, não temos o this, estamos guardando apenas no próprio contexto e podemos retornar os métodos que queremos criar:

const Stack = () => {
const data = []
let top = -1
const push = (value) => {
top++
data[top] = value
console.log(data)
}
return {
push
}
}
const stack = Stack
stack.push(1)
stack.push(2)
Perceba que ele está montando o vetor perfeitamente adicionando sempre na frente. Agora precisamos remover esse último item:

const push = (value) => {
top++
data[top] = value
console.log(data)
}
const pop = () => {
if (top &#x3C; 0) {
return false
} else {
const itemToReturn = data[top]
delete data[top]
top--
return itemToReturn
}
}
return {
push,
pop
}
console.log(stack.pop())
Agora funcionou perfeitamente, ele retirou o um e deixou apenas o dois. Vamos criar um novo método chamado print para sabermos como está a estrutura:

const print = () => {
console.log(data)
}
return {
push,
pop,
print
}
Perceba que nós temos um item vazio, então ele não removeu esse item. Ao invés de utilizar o delete, podemos utilizar o splice:

} else {
const itemToReturn = data[top]
data.splice(top, 1)
top--
return itemToReturn
}
O splice já faz essa fatia, cortando nosso array no item top.

Acabamos de implementar uma pilha. É muito interessante conhecer o que é pilha, faz mais sentido quando recebemos os erro stack overflow, acontece que as estruturas de dados vão se empilhando tanto que não aguenta mais o tamanho, por esse motivo é um erro bem comum.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Estruturas%20de%20Dados%20-%20Pilhas&url=https%3A%2F%2Fdevpleno.com%2Fpilha) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpilha)

---

# Política de Privacidade - DevPleno

URL: https://devpleno.com/politica-de-privacidade

> Esta Política de Privacidade foi formulada com o intuito de manter a privacidade e a segurança das informações coletadas de nossos clientes e usuários. Pol...

Blog

## Política de Privacidade

T
Por Tulio Faria • 14 de março de 2017

Esta Política de Privacidade foi formulada com o intuito de manter a privacidade e a segurança das informações coletadas de nossos clientes e usuários.

Política de privacidade para **DevPleno**.

Todas as suas informações pessoais recolhidas, serão usadas para o ajudar a tornar a sua visita no nosso site o mais produtiva e agradável possível.

A garantia da confidencialidade dos dados pessoais dos utilizadores do nosso site é importante para o **DevPleno**.

Todas as informações pessoais relativas a membros, assinantes, clientes ou visitantes que usem o **DevPleno** serão tratadas em concordância com a Lei da Proteção de Dados Pessoais de 26 de outubro de 1998 (Lei n.º 67/98).

A informação pessoal recolhida pode incluir o seu nome, e-mail, número de telefone e/ou telemóvel, morada, data de nascimento e/ou outros.

O uso do **DevPleno** pressupõe a aceitação deste Acordo de privacidade. A equipe do **DevPleno** reserva-se ao direito de alterar este acordo sem aviso prévio. Deste modo, recomendamos que consulte esta página com regularidade de forma a estar sempre atualizado.

Os anúncios

Tal como outros websites, coletamos e utilizamos informação contida nos anúncios. A informação contida nos anúncios, inclui o seu endereço IP (Internet Protocol), o seu ISP (Internet Service Provider, como o Sapo, Clix, ou outro), o browser que utilizou ao visitar o nosso website (como o Internet Explorer ou o Firefox), o tempo da sua visita e que páginas visitou dentro do nosso website.

Os Cookies e Web Beacons

Utilizamos cookies para armazenar informação, tais como as suas preferências pessoas quando visita o nosso website. Isto poderá incluir um simples popup, ou uma ligação em vários serviços que providenciamos, tais como fóruns.

Em adição também utilizamos publicidade de terceiros no nosso website para suportar os custos de manutenção. Alguns destes publicitários, poderão utilizar tecnologias como os cookies e/ou web beacons quando publicitam no nosso website, o que fará com que esses publicitários (como o Google através do Google AdSense) também recebam a sua informação pessoal, como o endereço IP, o seu ISP, o seu browser, etc. Esta função é geralmente utilizada para geotargeting (mostrar publicidade de Lisboa apenas aos leitores oriundos de Lisboa por ex.) ou apresentar publicidade direcionada a um tipo de utilizador (como mostrar publicidade de restaurante a um utilizador que visita sites de culinária regularmente, por ex.).

Você detém o poder de desligar os seus cookies, nas opções do seu browser, ou efetuando alterações nas ferramentas de programas Anti-Virus, como o Norton Internet Security. No entanto, isso poderá alterar a forma como interage com o nosso website, ou outros websites. Isso poderá afetar ou não permitir que faça logins em programas, sites ou fóruns da nossa e de outras redes.

Ligações a Sites de terceiros

O **DevPleno** possui ligações para outros sites, os quais, a nosso ver, podem conter informações / ferramentas úteis para os nossos visitantes. A nossa política de privacidade não é aplicada a sites de terceiros, pelo que, caso visite outro site a partir do nosso deverá ler a política de privacidade do mesmo.

Não nos responsabilizamos pela política de privacidade ou conteúdo presente nesses mesmos sites.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Pol%C3%ADtica%20de%20Privacidade&url=https%3A%2F%2Fdevpleno.com%2Fpolitica-de-privacidade) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpolitica-de-privacidade)

---

# Por que a Toptal é tão valorizada no mercado? - DevPleno

URL: https://devpleno.com/por-que-a-toptal-e-tao-valorizada

> Você sabe porque a Toptal é tão valorizada no mercado? Neste vídeo, você vai entender melhor sobre o top 3%. <div className=&#34;embedresponsive embedresponsiv...

Carreira

## Por que a Toptal é tão valorizada no mercado?

T
Por Tulio Faria • 9 de fevereiro de 2018

[Carreira](/tag/carreira)

Você sabe porque a Toptal é tão valorizada no mercado? Neste vídeo, você vai entender melhor sobre o top 3%.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS.](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Por%20que%20a%20Toptal%20%C3%A9%20t%C3%A3o%20valorizada%20no%20mercado%3F&url=https%3A%2F%2Fdevpleno.com%2Fpor-que-a-toptal-e-tao-valorizada) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpor-que-a-toptal-e-tao-valorizada)

---

# Por que fazer um curso de programação voltado para a prática? - DevPleno

URL: https://devpleno.com/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica

> A área de tecnologia da informação oferece muitas oportunidades e, para aproveitálas, o profissional deve se preparar continuamente. Para tanto, o desenvol...

Carreira

## Por que fazer um curso de programação voltado para a prática?

T
Por Tulio Faria • 31 de julho de 2017

[Carreira](/tag/carreira)

A área de tecnologia da informação oferece muitas oportunidades e, para aproveitá-las, o profissional deve se preparar continuamente. Para tanto, o desenvolvedor pode encontrar na web uma grande diversidade de vídeos e tutoriais a respeito de diversas tecnologias, principalmente em blogs, redes sociais, fóruns, youtube e nos [cursos gratuitos](https://www.devpleno.com/ensino-formal-ou-cursos-livres?utm_source=blog&#x26;utm_campaign=rc_blogpost) em plataformas de ensino.

Porém, uma capacitação mais sólida, encontrada em um bom curso de programação deve ser considerada para quem quer se destacar, especialmente em um momento tão favorável para o desenvolvedor profissional.

O uso de smartphones e plataformas de serviços aumenta diariamente. Já dentro das empresas, sistemas mais complexos são usados para o controle de produção e analise de dados para melhoria da performance nos negócios.

Para se ter uma ideia, mesmo com a crise no Brasil, os gastos com tecnologia, pessoais e corporativos só crescem. [Segundo a Fundação Getúlio Vargas](https://link.estadao.com.br/noticias/gadget,ate-o-fim-de-2017-brasil-tera-um-smartphone-por-habitante-diz-pesquisa-da-fgv,70001744407?utm_source=blog&#x26;utm_campaign=rc_blogpost), o Brasil terá um smartphone por habitante até o final de 2017.

Outo [estudo](https://www.valor.com.br/empresas/4943024/crise-nao-afeta-investimento-das-empresas-em-tecnologia-diz-fgv?utm_source=blog&#x26;utm_campaign=rc_blogpost) feito pela mesma instituição mostra que a TI foi uma das áreas que mantiveram níveis de investimentos estáveis pelas empresas em 2016, com uma taxa média de 7,6% da receita aplicado em novas tecnologias.

São muitas as razões para se [profissionalizar em TI](https://www.devpleno.com/integridade?utm_source=blog&#x26;utm_campaign=rc_blogpost) não é mesmo? Vamos mostrar no artigo de hoje a importância de escolher um curso que valorize a prática. Isso leva o profissional a apresentar resultados com maior rapidez ao ser contratado ou mesmo o favorece em processos de seleção, especialmente nas entrevistas! Preparado? Então vamos lá!

## Para conhecer as tecnologias usadas pelas empresas

Quando uma empresa contrata ou um desenvolvedor, seja para um emprego fixo, seja para um [freela](https://www.devpleno.com/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira?utm_source=blog&#x26;utm_campaign=rc_blogpost), exige-se, fundamentalmente, conhecimentos e habilidades específicas das tecnologias relacionadas ao projeto ou que são mais usadas na empresa. Geralmente, é necessário que tenha capacidade de trabalhar com múltiplas tecnologias, especialmente em projetos para web.

Entre as competências que se pode exigir de um desenvolvedor para que entre um projeto, normalmente podemos encontrar:

### Para desenvolvimento de front-end:

-
conhecimento em html5, css3 e javascprit;

-
conhecimentos em algum framework para trabalhar com as linguagens acima, como [ReactJs](https://www.devpleno.com/renderizar-estruturas-em-formato-de-arvore?utm_source=blog&#x26;utm_campaign=rc_blogpost), AngularJs, CanJs, jQuery, Bootstrap etc.

-
pelo menos um conhecimento básico de sistemas para tratamento de imagens e criação de vetores.

### Já para o desenvolvimento de back-end:

-
conhecimento aprofundado em pelo menos uma linguagens de back-end, como NodeJS, Java, Python, PHP, C# etc;

-
em relação à linguagem que será trabalhada, é importante ter pelo menos um Framework , como Spring, Django, Laravel, ExpressJS;

-
bancos de dados SQL e NoSql;

-
sistemas operacionais.

Já para o desenvolvimento de aplicativos móveis, são usados Java para Android, Swift para iPhone ou Cordova. Esse último é um framework que possibilita a utilização de linguagens de WEB para desenvolvimento de aplicações mobile híbridas, que rodam em praticamente todas as plataformas móveis. Além disso podemos também utilizar o próprio ReactJS (react-native) para criar aplicações móveis nativas.

Realmente são muitas as opções, não é? Então, ai entra a importância do know-how do instrutor do curso. Quem tem experiência de mercado poderá direcionar o aluno para que saiba quais [ferramentas deve aprender para cada tipo de projeto](https://www.devpleno.com/ensino-formal-ou-cursos-livres?utm_source=blog&#x26;utm_campaign=rc_blogpost). Também mostrará como integrar as tenologias utilizadas, como veremos a seguir.

## Para ter um visão de projeto

O desenvolvedor profissional precisa lidar com problemas complexos e integrar diversas tecnologias. Para que sejam usadas, normalmente existem macetes que agilizam sua instalação e atualização como o uso de Webpack, Bower, Npm, composer. Também entram o uso de IDEs para gerenciamento de código.

Cabe ressaltar que, em projetos profissionais, dezenas ou centenas de milhares de linhas de código são geradas ou incorporadas de bibliotecas prontas criadas por terceiros. Assim é fundamental contar com esses sistemas para que se possa fazer um gerenciamento adequado do que está sendo produzido.

Está aí mais uma vantagem de se aprender na prática, ou seja, com quem entende. O instrutor pode dar dicas valiosas de ferramentas de desenvolvimento e bibliotecas já prontas para agilizar a criação de artefatos mais comuns, porém com relativa complexidade. Muitas encontram-se disponíveis no GitHub.

Também há a necessidade de manutenção do projeto e compartilhamento com outros programadores. Atualmente, o GitHub vem sendo a plataforma mais usada para armazenar projetos que podem pertencer a uma empresa ou que são públicos.

Outra coisa importante são os padrões de projeto. Atualmente é muito utilizado o padrão MVC – Model View Controller para programação web. Nesse modelo, o desenvolvimento das camadas de banco de dados, interface, e do código que faz o meio de campo entre eles é claramente dividido. Há outros padrões como MMVC, MVP.

Saber onde são encontradas bibliotecas, usar padrões de projetos e ferramentas para gerenciamento diminui o tempo para entrega e aumenta a performance. Isso melhora o relacionamento com o cliente, como veremos a seguir.

## Para saber lidar com as necessidades dos clientes

Quem desenvolve profissionalmente sabe como é lidar com as expectativas e, muitas vezes, despreparo do cliente para lidar com a criação de um projeto. Normalmente o programador tem que se virar para que possa, [com prazos e orçamentos apertados](https://www.devpleno.com/precificacao-em-software?utm_source=blog&#x26;utm_campaign=rc_blogpost), entregar projetos grandes.

Há também aquelas mudanças que são solicitadas logo que o sistema é pronto. É comum que o programador tenha inclusive que informar ao cliente o que o próprio cliente quer.

Assim, é importante que ao aprender a desenvolver receba orientações a respeito de como entregar o sistema em partes, apresentando versões mais simplificadas do sistema, com versões até a entrega do produto final. Isso aumenta a satisfação do cliente pois a chance de frustração cai e, consequentemente, aumenta-se o seu engajamento e o seu entendimento a respeito do que está sendo feito.

## Para aumentar a qualidade do projeto

Além da questão da produtividade, para que um projeto seja bem-sucedido, ele não pode apresentar bugs ou desalinhamento em relação aos requisitos de negócio.

Existem várias ferramentas gratuitas que podem ser encontradas na web que ajudam o desenvolvedor a debugar o sistema e, em um curso voltado para a prática, certamente haverá o contato com soluções assim.

## Para conhecer ferramentas de configuração do ambiente de desenvolvimento

Para que uma linguagem seja usada, normalmente são necessários sistemas que dão suporte ao seu funcionamento, como drivers e bibliotecas para que possam se integrar a outros tipos tecnologias.

Quer um exemplo? O desenvolvimento de aplicações web completas com Javascript pode ser acelerado e feito como mais qualidade us

---

# Por que todo Dev usa Mac? - DevPleno

URL: https://devpleno.com/por-que-todo-dev-usa-mac

> Uma pergunta comum que sempre me fazem é: Por que a maioria dos desenvolvedores usa Mac? Bom, vou comentar algumas coisas que eu vejo. O primeiro motivo é ...

Carreira

## Por que todo Dev usa Mac?

T
Por Tulio Faria • 15 de maio de 2017

[Carreira](/tag/carreira)

Uma pergunta comum que sempre me fazem é: Por que a maioria dos desenvolvedores usa Mac?

Bom, vou comentar algumas coisas que eu vejo. O primeiro motivo é moda, afinal é uma máquina que te garante um status. Se você chega em uma reunião com um notebook ruim, não transmite a autoridade que precisa, uma vez que, como desenvolvedores, lidamos com máquinas o dia todo, o que pressupõe-se que temos uma máquina boa.

**Por que eu uso MAC?**

Eu uso Mac hoje porque sou programador IOS a maior parte do tempo. Crio aplicativos utilizando o React native para Android e para IOS, e não é possível fazer isso no Windows ou Linux. Já tentei todos os hacks possíveis, como rodar em uma maquina virtual, comprei até uma maquina melhor para isso, com 32GB de ram e rodar um Mac virtual com 16gb, mesmo assim não é a mesma experiência, pois na hora de testar algumas animações, o emulador do IOS não fica tão bem quanto na máquina nativa. Outra coisa que acontece é que, quando vamos tentar emular o android dentro do emulador do IOS, já não funciona mais, não é possível emular dentro de um emulador. Isso começou a me atrasar muito.

Se você faz aplicativos para IOS, tem algumas saídas como alguns serviços em que é possível alugar um Mac online para publicar seu aplicativo através dele, ou então contratar um serviço de build, mas isso só funciona quando estamos fazendo algum aplicativo utilizando o ionics ou react-native, não é possível fazer com objetive C sem ter um Mac, afinal como você vai emular?

Outro motivo é que o Mac é unix like, ou seja, ele é baseado em unix, então muitas coisas feitas no servidor e aplicativos no shell funcionam muito bem, já que ele é muito parecido com o Linux. Por isso quando existe a migração de Windows para o Mac, você sente muita diferença, pois com ele é possível automatizar mais coisas.

Outro ponto muito importante é que existem muitos aplicativos exclusivos para Mac e outros exclusivos para Windows. Existe, por exemplo, um aplicativo chamado Sketch que te ajuda a criar um layout, esboçar o aplicativo, como um photoshop misturado com illustrator para criar interfaces, e ele existe apenas no Mac.

Mas no final das contas isso não importa muito, afinal eu programei minha vida inteira em Windows e não há vergonha nenhuma nisso. Minha mudança foi por causa da performance que eu precisava no Mac. Se algo está te atrasando, você deve mudar, não é natural gastar muito tempo por conta da sua máquina.

Caso você ande com um notebook para cima e para baixo, o Mac te da a sensação de ser mais ‘parrudo’, é a única coisa que é MUITO diferente de um DELL, por exemplo. O Mac é melhor acabado. O maior empecilho é que no Brasil você terá que investir por volta de R$18.000,00 para ter um Mac, a não ser que você peça para alguém trazer do exterior, como foi o meu caso. :)

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Por%20que%20todo%20Dev%20usa%20Mac%3F&url=https%3A%2F%2Fdevpleno.com%2Fpor-que-todo-dev-usa-mac) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpor-que-todo-dev-usa-mac)

---

# Por que tudo na vida acontece 2x? - DevPleno

URL: https://devpleno.com/por-que-tudo-na-vida-acontece-2x

> No vídeo anterior, falamos que os pensamentos limitantes nos atrapalham a alcançar resultados. Neste vídeo, falo sobre como fazer o oposto disso. <div clas...

Carreira

## Por que tudo na vida acontece 2x?

T
Por Tulio Faria • 14 de agosto de 2016

[Carreira](/tag/carreira)

No vídeo anterior, falamos que os pensamentos limitantes nos atrapalham a alcançar resultados. Neste vídeo, falo sobre como fazer o oposto disso.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Por%20que%20tudo%20na%20vida%20acontece%202x%3F&url=https%3A%2F%2Fdevpleno.com%2Fpor-que-tudo-na-vida-acontece-2x) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpor-que-tudo-na-vida-acontece-2x)

---

# Postman - Como testar APIs - Hands-on - DevPleno

URL: https://devpleno.com/postman-como-testar-apis

> O Postman é uma ferramenta indispensável para o desenvolvimento de aplicativos API, principalmente Rest API, pois ele é um client para uma API em Rest. Exi...

Javascript

## Postman - Como testar APIs - Hands-on

T
Por Tulio Faria • 19 de maio de 2017

*

[Javascript](/tag/javascript)

O Postman é uma ferramenta indispensável para o desenvolvimento de aplicativos API, principalmente Rest API, pois ele é um client para uma API em Rest. Existem outras ferramentas para isso, mas o Postman é o mais conhecido no mercado.

O primeiro ponto interessante é que o Postman é uma extensão do Google Chrome, então ele segue uma tendência de aplicações que são desenvolvidas como extensões, e à medida com que elas vão tendo propriedades a mais, você pode adicionar como um aplicativo na sua máquina.

Primeiro precisamos criar uma conta para ser possível salvar links. Você vai encontrar uma tela parecida com essa:

Como eu já havia criado e feito alguns testes, já tem um histórico do lado, mas o seu estará vazio.

Perceba que existe o History e o Collections. No Collections, há alguns exemplos de como fazer algumas requisições, como mudar o tipo de request, mas também é possível criar uma Collection nossa.

Isso nada mais é que um conjunto de requisições que criamos. Por exemplo, suponhamos que vou criar um projeto DevReactJS, eu crio então uma Collection e dentro da Collection é possível criar uma pasta (folder).

Podemos criar, por exemplo, uma pasta Users e salvar a requisição dentro.

Vou colocar em GET [https://httpbin.org/ip](https://httpbin.org/ip), ir em Save (ao lado de Send), Save as (podemos dar um nome, como GetIP),* escolher o projeto e a pasta que queremos e pronto. Note que vai ficar salvo dentro da pasta, o que é muito legal pois posso compartilhar depois, clicando em share, collection link. Assim, posso mandar o link para outra pessoa testar o sistema que estou fazendo.

Se for uma API, você pode mandar um exemplo de API para o usuário e ele precisa apenas mudar a parte de autenticação. Mas caso você mesmo queira trocar a autenticação, basta ir em Authorization, nele você diz qual o tipo de autenticação está usando. Lembrando que sempre que fizer algo em Authorization precisa dar um update request para atualizar os Headers correspondentes.

Se clicarmos em Send ele irá executar e retornar com o status. No nosso caso deu OK, tempo 391ms, todos os headers que tivemos e em body é possível visualizar como Pretty, Raw e Preview. Veja o exemplo abaixo:

Vamos criar mais uma requisição, mas dessa vez um POST utilizando o link https://httpbin.org/post, mas podemos criar todos os métodos do HTTP.

Vamos criar mais uma requisição, mas dessa vez um POST utilizando o link https://httpbin.org/post, mas podemos criar todos os métodos do HTTP.

Perceba que o POST suporta body, então é possível mandar dados para ele. Vou mandar um name e enviar Tulio:

O form retorna com o valor que coloquei.

Também podemos enviar um arquivo apenas mudando o text para file.

Temos o environment, que cria alguns ambientes e podemos customizar os requests baseados neles, mas basicamente, para mim, já é possível usar boa parte apenas usando collections e requisições.

Confira todos detalhes no vídeo:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Postman%20-%20Como%20testar%20APIs%20-%20Hands-on&url=https%3A%2F%2Fdevpleno.com%2Fpostman-como-testar-apis) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpostman-como-testar-apis)

---

# Precificação de softwares: você sabe como fazer? - DevPleno

URL: https://devpleno.com/precificacao-de-softwares-voce-sabe-como-fazer

> Um dos desafios de quem trabalha na área de tecnologia, especificamente em desenvolvimento de programas, é a precificação de softwares. Por envolver ativos...

Carreira

## Precificação de softwares: você sabe como fazer?

T
Por Tulio Faria • 28 de junho de 2017

[Carreira](/tag/carreira)

Um dos desafios de quem trabalha na área de tecnologia, especificamente em desenvolvimento de programas, é a precificação de softwares. Por envolver ativos imateriais, virtuais, esse processo acaba suscitando dúvidas no profissional ou na empresa desenvolvedora, que pode acabar por subestimar ou superestimar os valores.

Para evitar a definição equivocada de preços que podem espantar clientes ou serem insuficientes para remunerar o trabalho envolvido, é importante ficar atento aos recursos e conhecimentos envolvidos no processo. Aliás, tais pontos são até comuns de serem avaliados em outros setores que envolvem serviços e produtos físicos, embora nem sempre sejam aplicados de maneira adequada na hora de [cobrar por software](https://www.devpleno.com/como-cobrar-por-software?utm_source=blog&#x26;utm_campaign=rc_blogpost).

Portanto, se você quer saber o que considerar nesse processo, continue lendo e veja nossas dicas!

## Como precificar um software?

É importante precificar um software de modo inteligente, buscando valorizar o trabalho empregado mas sem perder o foco num valor atrativo, pois é necessário estar atento aos concorrentes e o mercado em geral.

É preciso levar em consideração os custos fixos e os variáveis, bem como o valor necessário em cada projeto para a delimitação do seu salário. Também é indicado incluir uma porcentagem para a definição do seu lucro e de uma quantia caso deseje contratar um profissional para complementar o seu trabalho. Além disso, é vital acrescentar uma quantia para o pagamento de tributos, especialmente o Imposto de Renda (IR).

Após isso, você pode definir a forma como pretende trabalhar, se por projeto independente, com começo, meio e fim, ou por meio da criação e manutenção de softwares. Nesse primeiro caso entram os pacotes mensais. Nesse segundo caso, os serviços de atualização, manutenção e prestação de suporte contínuo devem entra na conta.

## Quais os critérios para precificar um software?

Além dos pontos mencionados acima, há critérios mais específicos que ajudam a compor o valor final a ser cobrado, seja por software ou por pacotes mensais. São eles:

### Tempo

A primeira coisa a pensar é o tempo gasto para a produção de um programa. Isso geralmente é calculado em valor/hora, pois facilita a mensuração de quanto o profissional deve ganhar por dia e semana para compor o seu salário. Além disso, durante a produção de uma solução, você basicamente comercializará o seu tempo e seus conhecimentos.

Para definir o seu valor/hora você precisa avaliar o seu nível de experiência e seus conhecimentos. Por exemplo, um profissional júnior pode produzir até três vezes menos do que um de nível pleno, o que significa que o segundo poderá ganhar o triplo dele.

Além disso, é preciso contabilizar o grau de urgência do projeto a ser desenvolvido, pois quanto menor o prazo, maior é o valor a ser cobrado por hora.

### Disponibilidade

A sua disponibilidade também deve entrar na conta, principalmente se você é constantemente requisitado para muitos projetos. É a chamada lei de oferta e demanda: se há grande procura pelos seus serviços, você consegue aumentar mais o seu preço. Quando houver baixa demanda, então é indicado reduzir um pouco seus valores.

Nesse ponto, há um porém: existem momentos em que há poucos projetos, mas porque são períodos de transição de trabalhos.

### Nível de experiência

Cada tipo de projeto exige um nível de experiência para que seja conduzido corretamente. Por exemplo, uma página de HTML pode necessitar de um profissional com menos experiência do que um software que exija um analista de dados, o qual terá de empregar estatística, matemática, programação e outros conhecimentos no projeto.

Se você domina mais de um tipo de [linguagem](https://www.devpleno.com/como-escolher-linguagem-de-tecnologia?utm_source=blog&#x26;utm_campaign=rc_blogpost) de programação, sabe trabalhar com análises especiais, entre outras competências, você poderá elevar o seu preço desde que esses conhecimentos sejam necessários nos projetos assumidos. Ou que possam entregar um adicional, otimizando-os.

Além disso, profissionais com maior experiência podem entregar serviços mais bem-acabados, justificando o valor a mais que cobram, mesmo que seja numa área com muita concorrência. Aqueles que possuem capacitação para consultoria também podem cobrar valores ainda maiores.

### Valor agregado

Para definir seu preço, você também precisa mensurar o quanto o seu trabalho rende. Por exemplo, se você cobra R$ 80,00 por hora, é importante que o seu trabalho renda para o cliente acima desse valor, como R$ 100,00 ou R$ 120,00 reais por hora.

É importante também que você entregue um adicional que os seus concorrentes não façam, como um atendimento mais personalizado, possibilidade de maior número de ajustes, entre outros benefícios. Esses pontos possibilitam que você eleve o seu preço.

### Os custos envolvidos

Como mencionado acima, você precisa considerar seus custos, como a quantia paga com internet e telefone. É preciso pegar os valores de ambas e dividir pelas horas trabalhadas, para que você some esse número ao seu preço cobrado por hora, mesmo que existam momentos em que você utilize esses serviços para fins diferentes do trabalho. Afinal, você está compondo a sua remuneração para pagá-los também.

Se você recebe por Paypal, por exemplo, é preciso acrescentar as taxas e porcentagem cobrados pelo serviço nas transferências. O mesmo vale na hora de receber por transferências bancárias, como DOCs ou TEDs.

### Os impostos

Não se esqueça de incluir no seu preço uma porcentagem a mais para pagar impostos que podem variar de 7,5% a 27,5% dependendo da quantia envolvida. Isso é ainda mais importante para quem possui uma empresa, pois há diferentes tributos.

## Como explicar o valor do software para o cliente?

A precificação de software precisa, antes de mais nada, ser justa e, mais do que isso, ser entendida como justa pelo cliente. Caso contrário, será difícil você obter consumidores dispostos a pagar pelo valor cobrado, pois dificilmente terão noção de todos os recursos e habilidades empregadas no desenvolvimento do programa.

É preciso também esclarecer qual o valor que o software terá para o consumidor, o que é diferente de preço. Esse se baseia em dados “palpáveis”, podendo ser quantificado com base nos recursos empregados num produto. Já o valor tem a ver com algo subjetivo, variando de indivíduo para indivíduo. Dependendo da necessidade da pessoa, seu software poderá ter menor ou maior valor.

Também é importante literalmente abrir o jogo com o cliente, sendo honesto e apresentando as razões reais da quantia cobrada pelo programa. Para isso, fale sobre:

-
os preços praticados pelo mercado;

-
os gastos com mão de obra não só sua, mas de outros profissionais caso tenha sido preciso contratá-los;

-
a experiência necessária para o desenvolvimento do software;

-
o tempo de trabalho exigido, especialmente se foi necessário trabalhar em feriados e fins de semana, até mesmo de noite;

-
o grau de complexidade do programa e os [estudos sobre tecnologia](https://www.devpleno.com/como-organizar-os-estudos-em-tecnologia?utm_source=blog&#x26;utm_campaign=rc_blogpost) necessários etc.

## Qual a diferença entre precificação de softwares e de outros tipos de produto?

Para convencer um cliente, é preciso utilizar a racionalização em cima dos recursos necessários, mesmo que subjetivos. Aliás, isso é um dos fatores que diferenciam um produto convencional de um software.

O primeiro demanda insumos mais concretos, físicos, enquanto que o segundo necessita de conhecimentos e insumos intangíveis, que exigem muito tempo de experiência e estudo para serem adquiridos.

Por fim, lembre-se de ser correto na definição de seus preços, alertando seus clientes caso o custo de um software fique alto demais e o pr

---

# Dica: Precificação em Software - DevPleno

URL: https://devpleno.com/precificacao-em-software

> Uma dúvida comum em desenvolvedores é como precificar softwares. Neste vídeo, comento como eu costumo cobrar e dicas de como você pode fazer de maneira jus...

Carreira

## Dica: Precificação em Software

T
Por Tulio Faria • 24 de abril de 2017

[Carreira](/tag/carreira)

Uma dúvida comum em desenvolvedores é como precificar softwares. Neste vídeo, comento como eu costumo cobrar e dicas de como você pode fazer de maneira justa para você e para seu cliente.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Precifica%C3%A7%C3%A3o%20em%20Software&url=https%3A%2F%2Fdevpleno.com%2Fprecificacao-em-software) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprecificacao-em-software)

---

# Precisa ter diploma para trabalhar por meio da Toptal? - DevPleno

URL: https://devpleno.com/precisa-ter-diploma-para-a-toptal

> Você não é graduado, mas quer trabalhar por meio da Toptal? Entenda se isso é possível ou não neste vídeo: <div className=&#34;embedresponsive embedresponsive1...

Carreira

## Precisa ter diploma para trabalhar por meio da Toptal?

T
Por Tulio Faria • 15 de fevereiro de 2018

[Carreira](/tag/carreira)

Você não é graduado, mas quer trabalhar por meio da Toptal? Entenda se isso é possível ou não neste vídeo:

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Precisa%20ter%20diploma%20para%20trabalhar%20por%20meio%20da%20Toptal%3F&url=https%3A%2F%2Fdevpleno.com%2Fprecisa-ter-diploma-para-a-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprecisa-ter-diploma-para-a-toptal)

---

# Preconceito com JS? Não preparado para corporativo? - DevPleno

URL: https://devpleno.com/preconceito-com-js-nao-preparado-para-corporativo

> Hoje quero falar mais um pouco sobre o POO para JavaScript. Basicamente as últimas considerações sobre essa transição e o preconceito que o JavaScript enfr...

Javascript

## Preconceito com JS? Não preparado para corporativo?

T
Por Tulio Faria • 10 de novembro de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje quero falar mais um pouco sobre o POO para JavaScript. Basicamente as últimas considerações sobre essa transição e o preconceito que o JavaScript enfrenta.

Por que isso acontece?

Principalmente porque o JavaScript já foi muito simples, mas estamos entrando em um mundo onde está sendo padronizado o JavaScript como linguagem front-end e isso é muito bom. Quando falamos do Servidor, também temos essa maturidade da linguagem, principalmente quando grandes empresas como Wallmart começaram a utilizar do javaScript.

Outra coisa que está quebrando essa barreira é o tooling, muitas das ferramentas que utilizamos hoje é construído com o NODE e baseado no NPM.

Mas o grande detalhe é, se você está vindo de JAVA, PHP ou qualquer outra linguagem, tente não ter esse preconceito do JavaScript. Não se leve pela simplicidade da linguagem porque ela é bem poderosa.

Uma vantagem do que eu vejo hoje e ajuda a quebrar o preconceito é que muitas empresas estão preferindo desenvolvedores JavaScript do que em outras stacks. Um ponto que gostaria de deixar realçado é que o conceito de melhor, pior, certo e errado é muito relativo. Eu aprendi muito isso durante meu mestrado. Hoje eu acredito que algum paradigma mais funcional fica mais elegante dentro do JavaScript, mas é muito difícil colocar pontos. Quanto mais a gente conseguir pensar que essas ferramentas e o que a gente conhece, aumenta a nossa bagagem para saber o que é melhor ou pior naquela situação específica.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Preconceito%20com%20JS%3F%20N%C3%A3o%20preparado%20para%20corporativo%3F&url=https%3A%2F%2Fdevpleno.com%2Fpreconceito-com-js-nao-preparado-para-corporativo) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpreconceito-com-js-nao-preparado-para-corporativo)

---

# Preview de imagens antes do upload - DevPleno

URL: https://devpleno.com/preview-de-imagens-antes-do-upload

> Hoje vamos fazer o preview da imagem que está sendo selecionada para fazer upload, isso é bastante interessante de se fazer quando o usuário está seleciona...

Javascript

## Preview de imagens antes do upload

T
Por Tulio Faria • 13 de novembro de 2017

[Javascript](/tag/javascript)

Hoje vamos fazer o preview da imagem que está sendo selecionada para fazer upload, isso é bastante interessante de se fazer quando o usuário está selecionando uma foto.

Vamos criar inicialmente um html, em seguida criar um input type do tipo file e um img:

&#x3C;html>
&#x3C;head>Preview Upload&#x3C;/head>
&#x3C;body>
&#x3C;input type='file' id='upload' />
&#x3C;img id='img' />
&#x3C;script
src='https://code.jquery.com/jquery-3.2.1.slim.js'
integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='
crossorigin='anonymous'
>&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Agora vamos abrir uma tag script nele. Quando o documento estiver pronto e for feito um change, vamos fazer um console.log this:

&#x3C;script>
$(function()
{$('#upload').change(function () {
console.log($(this)[0].files)
})})
&#x3C;/script>
Assim estamos pegando o arquivo na posição zero. A partir disso, vamos criar um const que vai ser igual a this na posição 0. Já que ele é uma instância de files, conseguimos utilizar um fileReader e ler e processar esse arquivo:

&#x3C;script>
$(function()
{$('#upload').change(function () {
const file = $(this)[0].files[0]
const fileReader = new fileReader()
fileReader.onLoadend = function () {
console.log(fileReader.result)
}
fileReader.readAsDataURL(file)
})})
&#x3C;/script>
Como a imagem gera uma URL válida, se eu colocá-lo como source da imagem, ele vai dar um preview.

&#x3C;script>
$(function(){
$('#upload').change(function(){
const file = $(this)[0].files[0]
const fileReader = new fileReader()
fileReader.onLoadend = function(){
$('#img')attrib('src', .fileReader.result)
}
fileReader.readAsDataURL(file)
})
})
&#x3C;/script>
Isso é muito interessante para a experiência do usuário como um todo. Imagine se eu estivesse selecionando um documento, seria muito mais fácil se eu estivesse prevendo ele.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Preview%20de%20imagens%20antes%20do%20upload&url=https%3A%2F%2Fdevpleno.com%2Fpreview-de-imagens-antes-do-upload) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpreview-de-imagens-antes-do-upload)

---

# Primeiros passos na Toptal – Série Trabalho Remoto - DevPleno

URL: https://devpleno.com/primeiros-passos-na-toptal

> Depois de passar pelo processo seletivo da Toptal, quais são os primeiros passos? Descubra neste vídeo. <div className=&#34;embedresponsive embedresponsive16by...

Carreira

## Primeiros passos na Toptal – Série Trabalho Remoto

T
Por Tulio Faria • 21 de fevereiro de 2018

[Carreira](/tag/carreira)

Depois de passar pelo processo seletivo da Toptal, quais são os primeiros passos? Descubra neste vídeo.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Primeiros%20passos%20na%20Toptal%20%E2%80%93%20S%C3%A9rie%20Trabalho%20Remoto&url=https%3A%2F%2Fdevpleno.com%2Fprimeiros-passos-na-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprimeiros-passos-na-toptal)

---

# Processo Seletivo da Toptal – Série Trabalho Remoto - DevPleno

URL: https://devpleno.com/processo-seletivo-da-toptal

> Seu objetivo é trabalhar remotamente por meio da Toptal? Neste vídeo, você vai entender como funciona o processo seletivo. <div className=&#34;embedresponsive ...

Carreira

## Processo Seletivo da Toptal – Série Trabalho Remoto

T
Por Tulio Faria • 21 de fevereiro de 2018

[Carreira](/tag/carreira)

Seu objetivo é trabalhar remotamente por meio da Toptal? Neste vídeo, você vai entender como funciona o processo seletivo.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog).

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Processo%20Seletivo%20da%20Toptal%20%E2%80%93%20S%C3%A9rie%20Trabalho%20Remoto&url=https%3A%2F%2Fdevpleno.com%2Fprocesso-seletivo-da-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprocesso-seletivo-da-toptal)

---

# Programação Assíncrona - NodeJS Primeiros Passos - DevPleno

URL: https://devpleno.com/programacao-assincrona

> Continuando nossa série sobre NodeJS, falando um pouco sobre como funciona a Programação Assíncrona do JS, vamos fazer alguns testes para você ver a difere...

Javascript

## Programação Assíncrona - NodeJS Primeiros Passos

T
Por Tulio Faria • 16 de junho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Continuando nossa série sobre NodeJS, falando um pouco sobre como funciona a Programação Assíncrona do JS, vamos fazer alguns testes para você ver a diferença de como o JavaScript (e nesse caso alguns módulos do NodeJS) trabalham esse assincronismo.

**Por que o assíncrono é tão interessante?**

Quando temos uma tarefa ou alguma instrução que vamos fazer e ela pode ser demorada demais, por exemplo, se ela for um pouco diferente de qualquer estrutura de dados que estamos acostumados como IF e por ai vai, ele simplesmente deixa para executar quando os dados dessas operações estiverem disponíveis.

Como exemplo, vamos ler um arquivo texto de modo síncrono e um de modo assíncrono e mostrar as vantagens disso. Em um novo arquivo, vamos criar um arquivo de texto ‘dados.txt’ e colocar dentro uma frase, “Conteúdo do arquivo texto.” Agora criamos um novo arquivoJS, importamos o FS, um módulo padrão no Node para manipulação do file system.

var fs = require('fs')
var contents = fs.readFileSyinc('dados.txt', 'utf8')
console.log(contents)
Vamos salvar como Sync.js e mandar rodar usando o comando

node sync.js
Perceba o seguinte: como a linha **“var contents = fs.readFileSyinc(‘dados.txt’, ‘utf8’);“**é síncrona, enquanto arquivo não for lido por completo ela não passa para a linha seguinte, isso pode ser legal ou não, dependendo do ponto de vista. Em linguagens que não são assíncronas como no JAVA ou PHP abrimos uma tread nova, ou seja uma linha de execução nova para caso chegue uma outra requisição não fique demorando muito para essa resposta demorar para o usuário. Na escala, isso é muito ruim. Imagine que apenas um usuário está usando, teremos pouco de prejuízo, mas se temos um sistema com 10 mil usuários ao mesmo tempo fazendo operações como essa, isso é muito problemático.

Vamos fazer um exemplo com Assíncrono para que fique mais claro:

var fs = require('fs');
fs.readFile('dados.txt', 'utf8'), function (err, contents){
console.log(contents)
});
console.log('continuar...')
Vamos salvar como async.js. Note que eu passo como parâmetro para essa instrução um callback.

**O que faz uma função de callback?**

Essa operação de IO demora um pouco para finalizar, então como é assíncrono, ele vai rodar e vai passar reto enquanto os dados não estiverem prontos e não pararem nela como no sync.js. Quando ele bater na linha ReadFile ele vai passar todas as camadas do SO pedindo para fazer esse IO e, internamente, vai gerenciar avisando quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.

No async, repare o seguinte: o ‘continuar…’ apareceu antes do conteúdo do contents. Imagine se fossemos ler mil arquivos, não teria problema nenhum porque os arquivos vão lendo a medida que vão chegando. Por exemplo, se eu mandei 10 arquivos, não significa que os 10 vão ser lidos ao mesmo tempo, pode ser que o primeiro esteja disponível primeiro, depois o quinto, depois o terceiro e por ai vai. Enfim, de forma assíncrona não consegue saber quando vai ser retornado mas isso é legal porque não travamos o nosso programa principal apenas para fazer uma leitura de IO.

Isso é fantástico porque qualquer aplicação mais robusta hoje em dia é uma aplicação que chamamos de IO intensive, ou seja, eles usam muita entrada e saída. Se você for pensar, por exemplo, no facebook, a parte de chat e autorizações automáticas são muitas operações de IO acontecendo ao mesmo tempo, então se temos uma engine como o node que consegue lidar com isso de uma forma muito boa, podemos lidar com essas operações de IO intensive de forma assíncrona e não vai travar a tread principal.

Se criarmos uma aplicação em node com 100 usuários usando ao mesmo tempo, ele consegue responder os 100 usuários com apenas uma linha de código. Para quem já programou em JAVA sabe que o minimo seriam 100 treads se não tivesse nenhuma otimização. O node é muito baseado em assíncrono, praticamente tudo que vamos fazer é feito de forma assíncrona e a única coisa que você precisa tomar cuidado é de não achar que o console.log de dentro do callback executaria antes do que está fora, as vezes a pessoa fica atentada a querer fazer uma operação atrás da outra mas são várias operações assíncronas, logo não vai funcionar porque vão retornar em tempos diferentes. Existe algumas estruturas que utilizamos para controlar esse fluxo e vamos falar mais a frente.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Programa%C3%A7%C3%A3o%20Ass%C3%ADncrona%20-%20NodeJS%20Primeiros%20Passos&url=https%3A%2F%2Fdevpleno.com%2Fprogramacao-assincrona) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprogramacao-assincrona)

---

# Qual o projeto certo para estudar programação? - DevPleno

URL: https://devpleno.com/projeto-certo-para-estudar-programacao

> Ao iniciar a jornada de estudos sobre programação, livros, vídeos, tutoriais e dicas em sites são os principais recursos para aprender como desenvolver um ...

Carreira

## Qual o projeto certo para estudar programação?

T
Por Tulio Faria • 20 de fevereiro de 2018

[Carreira](/tag/carreira)

Ao iniciar a jornada de estudos sobre programação, livros, vídeos, tutoriais e dicas em sites são os principais recursos para aprender como desenvolver um sistema que realiza uma determinada tarefa. Mas, depois de dominarmos as ferramentas de uma linguagem ficamos sem a noção de como seguir aprendendo mais e desenvolvendo nossas habilidades. O que mais acrescentaria aos meus conhecimentos sobre programação? Devo buscar novas fontes de informação para aprender? Quais serão os meus próximos desafios?

É comum estarmos sem ideias de projetos que podemos criar para aprender mais sobre programação. Por isso, hoje vamos responder a seguinte pergunta do Eric Luz: “Que tipo de projeto posso utilizar para estudar?”

Neste post, listamos três formas para continuar desenvolvendo aplicações e manter o seu ritmo de estudo em programação.

### 1) Faça um projeto social

A primeira forma de aprimorar seu aprendizado é procurar uma creche, asilo, orfanato ou uma instituição em prol dos animais e propor uma solução para determinado problema não resolvido. Além de colocar o desenvolvedor para usar suas ferramentas, esse exercício também provê algo bom para a sociedade. Alguns exemplos:

Vá a um orfanato próximo de sua casa, converse com os funcionários e veja se um sistema para organizar e administrar o estoque de mantimentos, utensílios, produtos de limpeza, brinquedos e doações seria útil;

Vá a um asilo e veja se eles precisam de uma aplicação para registrar e controlar as pessoas que visitam os idosos que moram ali;

Vá a uma ONG de proteção aos animais e veja se eles têm algum site ou meio de divulgar o seu trabalho.

Outro ponto muito importante é que você tem a chance de colocar o projeto “no ar” ou “em produção” para que seja realmente utilizado no dia a dia traga benefícios para os seus usuários.

### 2) Inspire-se em soluções do mercado

A segunda forma para manter seu ritmo de aprendizado é observar o mercado de soluções em TI e ver quais as aplicações poderiam ser replicadas. Um exemplo que temos no DevPleno é o MercadoDev, inspirado no Mercado Livre, mas implementado como uma versão reduzida utilizando o React para manter o foco nas funcionalidades de mostrar os dados do Firebase e fazer uploads de arquivos.

Uma dica de estudo que sempre mencionamos por aqui é “Poucas coisas novas ao mesmo tempo”. Os projetos criados no DevPleno possuem algumas funcionalidades, mas as restringimos para estudar cada aspecto de maneira focada, compreendê-la adequadamente e aplicar o conhecimento aprendido no código sem perder muito tempo. Dessa forma, garantimos que o projeto será finalizado, testado para verificar sua execução, alterado caso haja algo que não funcionou como o esperado e colocado em produção. Ao começar um projeto menor e terminar cada etapa aos poucos, sentimos a gratificação em concluir um sistema inspirado em algo que existe e funciona – o que nos motiva a estudar e aprender cada vez mais.

### 3) Crie um projeto de sua autoria

Não fique com vergonha de suas próprias ideias! Pegue aquela ideia esquecida na gaveta e coloque-a em prática. Lembre-se sempre de começar um projeto com poucas funcionalidades e (o que é mais importante) coloque em produção. Uma coisa muito interessante aqui no DevPleno é que as pessoas que estão acompanhando nossos minicursos gratuitos como o de [Socket.IO](https://go.devpleno.com/fsm?sck=blog), o de [ReactJS](https://go.devpleno.com/fsm?sck=blog) e o [Fullstack Academy](https://go.devpleno.com/fsm?sck=blog), estão colocando no ar suas aplicações. Já vimos várias versões do MercadoDev, iRango, MinhasSéries rodando online, o que é fantástico!

Colocar o seu programa em produção é muito importante para você, desenvolvedor, porque ao disponibilizar suas aplicações em seu Github, por exemplo, um recrutador terá mais facilidade de avaliar o seu trabalho e saber se você é o profissional que ele procura para uma vaga de emprego. Além disso, você exercita como publicar os seus projetos.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Qual%20o%20projeto%20certo%20para%20estudar%20programa%C3%A7%C3%A3o%3F&url=https%3A%2F%2Fdevpleno.com%2Fprojeto-certo-para-estudar-programacao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fprojeto-certo-para-estudar-programacao)

---

# Promise Constante - como criar situações assíncronas de teste - DevPleno

URL: https://devpleno.com/promise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste

> A dica de hoje é bastante interessante porque ela nos ajuda a criar algumas situações de teste, principalmente envolvendo promises, que é uma forma de lida...

Javascript

## Promise Constante - como criar situações assíncronas de teste

T
Por Tulio Faria • 3 de outubro de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

A dica de hoje é bastante interessante porque ela nos ajuda a criar algumas situações de teste, principalmente envolvendo promises, que é uma forma de lidar com o assincronismo em JavaScript. Muitas vezes precisamos testar essa promise, então imagine o seguinte cenário, onde eu quero construir uma função readDir e promisificá-la:

const fs = require('fs')
const readdir = (path) =>
new Promise((resolve, reject) => {
fs.readdir(path, (err, list) => {
if (err) {
reject(err)
} else {
resolve(list)
}
})
})
Agora imagine que temos uma outra função chamada path, que é assíncrona:

const functA = (path) => {
const list = await readdir(path)
console.log(list)
}
Se nós quiséssemos, por exemplo, testar essa função, rodaríamos o funcA:

funcA('./')
Ela irá trazer todos os arquivos que eu tenho no meu diretório atual. Agora imaginem que eu quero testar esse readdir, mas sem efetivamente passar pelo fs, quero que minha promise retorne os valores para que possa apenas testar se o funcA está correto. É equivalente ao mock.

Quando queremos ter uma promise que é uma constante para a situação que estamos utilizamos, podemos fazer o seguinte:

const readdir = (path) => Promise.resolve(['arquivo1.txt', arquivo2.txt])
Ele irá retornar uma lista com esses resultados. Então se eu quiser ter uma lista que sempre resolve pro mesmo valor, sendo utilizado parecido com mock para teste, utilizamos o promise.resolve.

Quando estamos aprendendo programação assíncrona e queremos fazer esses testes, isso é muito interessante.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Promise%20Constante%20-%20como%20criar%20situa%C3%A7%C3%B5es%20ass%C3%ADncronas%20de%20teste&url=https%3A%2F%2Fdevpleno.com%2Fpromise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpromise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste)

---

# Promise Race - Qual promise resolve/rejeita primeiro - DevPleno

URL: https://devpleno.com/promise-race

> Hoje quero mostrar uma funcionalidade que chamada Promise.race. Ela vai receber uma lista de promises no JavaScript e ele vai retornar apenas uma dessas pr...

Javascript

## Promise Race - Qual promise resolve/rejeita primeiro

T
Por Tulio Faria • 26 de setembro de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje quero mostrar uma funcionalidade que chamada Promise.race. Ela vai receber uma lista de promises no JavaScript e ele vai retornar apenas uma dessas promise: a que rejeitar ou resolver primeiro. Vamos criar uma função que é uma promise:

const p = (time, name) => {
return new Promise((resolve, reject) => {
setTimeOut(() => resolve(time + ' ' + name), time)
})
}
p(100, 'opa').then((e) => console.log(e))
Ao rodar esse código, ele retorna opa depois de 100ms. Agora vamos criar uma lista chamada de OS, e dentro dela faremos uma lista de promises:

const os = [P(100, 'opa'), P(200, 'opa2')]
Promise.race(os).then((e) => console.log(e))
Ao rodar, vai trazer a primeira promise, isso não quer dizer que ele pare a operação do outro. Ele continua executando, porém não retorna para o resultado, mesmo se rejeitarmos. Obviamente é o contrário do Promise.all, que é quando retornamos todos:

Promise.all(os).then((e) => console.log(e))
Assim vamos ter todos os retornos, ao contrário do race.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Promise%20Race%20-%20Qual%20promise%20resolve%2Frejeita%20primeiro&url=https%3A%2F%2Fdevpleno.com%2Fpromise-race) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpromise-race)

---

# NodeJS Primeiros Passos - Promises - DevPleno

URL: https://devpleno.com/promises

> Continuando nosso assunto sobre NodeJS, vamos tratar sobre como podemos organizar o fluxo para que o código fique realmente organizado. Olhe esse exemplo: ...

Javascript

## NodeJS Primeiros Passos - Promises

T
Por Tulio Faria • 27 de junho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Continuando nosso assunto sobre NodeJS, vamos tratar sobre como podemos organizar o fluxo para que o código fique realmente organizado. Olhe esse exemplo:

var fs = require('fs')
fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {
fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {
console.log('tudo certo')
})
})
})
Aqui faço três operações assíncronas e você pode perceber que o código vai crescendo para frente, porque os dois códigos estão dentro do callback do primeiro readFile, o terceiro está dentro do segundo e o console log está dentro do terceiro. Imagine se eu tivesse mais trechos de código assíncrono e estivesse tratando com IO, então o código iria crescendo cada vez mais para frente, deixando a manutenção muito complicada. Chamamos esse tipo de código de código hadouken. **Como podemos fazer para esse código saia dessa forma e comece a crescer para baixo?** Uma das alternativas é utilizar promises. Para isso, vamos utilizar um módulo hamado ‘q’.

npm install q
No meu caso, retornou um warning porque eu não tenho o package.json, mas como estamos apenas testando, está tudo bem. Então vamos lá:

var Q = require('q')
var fs = require('fs')
function readArquivo1() {
fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {})
}
function readArquivo2() {
fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {})
}
function readArquivo3() {
fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {})
}
Vamos salvar ele como com.promises.js. Apesar de estar com bastante texto, podemos perceber que o arquivo ficou mais fácil de ler. Se eu chamar esses arquivos, ele vai executar a linha 1, pular, executar a próxima e depois de um certo tempo vai executar o callback:

function readArquivo1(){
... &#x3C;linha1>
fs.readFile('arquivo1.txt', 'utf8', function(err, arquivo1){
});
...&#x3C; linha 2>
}
Não é muito bem isso que queremos, afinal queremos um atrás do outro, então podemos fazer o seguinte:

function readArquivo1() {
var deferred = '.defer()'
fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
deferred.resolve(arquivo1)
})
return deferred.promise
}
Perceba que estou retornando uma promise avisando que vai ser retornado algo. Quando esse algo estiver pronto, ele devolve a promise, no caso o arquivo 1. Como eu chamo os arquivos agora usando promises? Valos ler os arquivos e quando ele estiver pronto vai ser chamado o then.function(arquivo1):

function readArquivo1() {
var deferred = '.defer()'
fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
deferred.resolve(arquivo1)
})
return deferred.promise
}
function readArquivo2() {
var deferred = '.defer()'
fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {
deferred.resolve(arquivo2)
})
return deferred.promise
}
function readArquivo3() {
var deferred = '.defer()'
fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {
deferred.resolve()
})
return deferred.promise
}
readArquivo1().then(function (arquivo1) {
console.log(arquivo1)
})
O readArquivo1 retorna uma promise dizendo que quando tiver essa operação IO disponível, eu chamo de volta para então executar o then. Ao executar o código, vai ser retornado o conteúdo do arquivo 1. Poderiamos fazer também:

var conteudo = ''
readArquivo1()
.then(function (arquivo1) {
conteudo += arquivo1
return readArquivo2()
})
.then(function (arquivo2) {
conteudo += arquivo2
console.log(conteudo)
})
Então vamos ler o arquivo 1, colocar no conteúdo, ler o arquivo 2 e então dar o console.log no conteúdo, a resposta será o conteúdo dos dois arquivos concatenados. Podemos chamar o arquivo 3 e passar o conteúdo nele.

function readArquivo3(conteudo){
var deferred = ".defer()";
fs.readFile('arquivo3.txt', conteudo, function(err){
deferred.resolve();
});
return deferred.promise;
}
var conteudo="";
readArquivo1()
.then(function(arquivo1){
conteudo+= arquivo1;
return readArquivo2();
}).then(function(arquivo2){
conteudo+= arquivo2;
return writeArquivo3(conteudo)
}).then(function())
console.log('tudo certo');
});
Perceba que meu código começa a crescer para baixo e, ao executar, será retornado a mensagem e criado o arquivo 3 com o conteúdo dentro. A manutenção desse código fica muito mais simples porque eu consigo ver claramente o que cada função está fazendo e também a sequência de passos. Uma das coisas que dá para ser feito também é a seguinte:

readArquivo1().then(readArquivo2).then(readArquivo2)
Ele vai passar pelo arquivo 1, arquivo 2 e novamente no arquivo 2. Se eu não tiver que passar atributo para frente, posso fazer isso. Caso a gente queira que o arquivo 2 receba um conteúdo que veio arquivo 1, também podemos utilizar assim, mas o problema é que ela fica muito dependente uma função da outra, eu prefiro fazer de uma forma que uma função não dependa muito da outra para que eu consiga modularizar melhor.

Confira todos os detalhes no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%20-%20Promises&url=https%3A%2F%2Fdevpleno.com%2Fpromises) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpromises)

---

# Promisify-Node: Convertendo funções clássicas do Node em Promises - DevPleno

URL: https://devpleno.com/promisify-node

> Neste post, vamos fazer um handson do PromisifyNode, uma forma de converter as funções clássicas do Node em JavaScript que retornam callback em promises. E...

Javascript

## Promisify-Node: Convertendo funções clássicas do Node em Promises

T
Por Tulio Faria • 4 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)

Neste post, vamos fazer um hands-on do Promisify-Node, uma forma de converter as funções clássicas do Node em JavaScript que retornam callback em promises. Existem vários módulos que já fazem isso, como em módulos utilitários de promises, o q, bluebird, por exemplo.

**Então por que usar o Promisify-Node?**

Ele tem uma funcionalidade bastante relevante que vou mostrar durante o hands-on, vamos lá. Para instalar e adicionar como dependência o Promisify-Node:

yarn add promisify-node
Vamos importar o promisify e o fs(file system) para termos uma função com o callBack.

const promisify = require('promisify-node')
const fs = require('fs')
Se fossemos utilizar o fs normalmente, iriamos fazer o seguinte:

fs.readFile('arquivo.js', (err, data) => console.log(data.toString()))
Então ele retorna um callBack, onde eu consigo escrever o conteúdo do arquivo. Então vamos converter essa função em promise para, por exemplo, usar o then dentro de um generator ou com async/await.

Podemos pegar essa função fs.readFile, criar uma nova readFile e passar para promisify, assim:

const readFile = promisyfy(fs.readFile)
**Qual a diferença?**

Agora eu posso chamar a readFile, falar qual arquivo eu quero (no caso o arquivo.js) e chamar ele no modo promisify.

readFile('arquivo.js').then((data) => console.log(data.toString()))
**Qual a vantagem?**

Além da promisify ser mais fácil de manipular, evitamos o callback hell ou código hadouken, que faz uma barrigona de tanto callback que tem um dentro do outro.

Também podemos utilizar com generator e com async/await. Outra coisa legal é que, se quisermos usar todas as funções do fs como uma promise, podemos mudar o Const fs = require(‘fs’) assim:

const fs = promisify('fs')
E, assim, qualquer função que eu for utilizar, como por exemplo:

fs.readFile('arquivo.js', (err, data) => console.log(data.toString()))
Já irá virar naturalmente uma promise, com isso posso fazer:

fs.readFile('arquivo.js').then((data) => console.log(data.toString()))
Convertendo todos os métodos e funções disponíveis dentro desse módulo, de callback para promise.

**Concluindo**

Ainda estamos usando o fs.readFile, mas em uma versão ‘promisifiada’ :) Isso é bastante poderoso, afinal assim podemos converter um módulo inteiro, de callback para promise utilizando generator ou async/await tranquilamente.

Você também pode conferir o passo a passo desse hands-on por vídeo:

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Promisify-Node%3A%20Convertendo%20fun%C3%A7%C3%B5es%20cl%C3%A1ssicas%20do%20Node%20em%20Promises&url=https%3A%2F%2Fdevpleno.com%2Fpromisify-node) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpromisify-node)

---

# Pure Functions (Funções Puras) - DevPleno

URL: https://devpleno.com/pure-functions-funcoes-puras

> Uma forma de construir funções muito difundido pela programação é usar funções puras. Veja neste vídeo as vantagens dessas funções ao construir aplicações ...

Javascript

## Pure Functions (Funções Puras)

T
Por Tulio Faria • 3 de março de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Uma forma de construir funções muito difundido pela programação é usar funções puras. Veja neste vídeo as vantagens dessas funções ao construir aplicações com Javascript.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Pure%20Functions%20(Fun%C3%A7%C3%B5es%20Puras)&url=https%3A%2F%2Fdevpleno.com%2Fpure-functions-funcoes-puras) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fpure-functions-funcoes-puras)

---

# As vantagens do Javascript em todas as camadas de uma aplicação - DevPleno

URL: https://devpleno.com/quais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao

> As muitas vantagens de usar JavaScript fizeram com que ela se tornasse a linguagem de programação mais popular do mundo. Extremamente versátil, o JavaScrip...

Javascript

## As vantagens do Javascript em todas as camadas de uma aplicação

T
Por Tulio Faria • 6 de outubro de 2017

[Javascript](/tag/javascript)

As muitas vantagens de usar JavaScript fizeram com que ela se tornasse a linguagem de programação mais popular do mundo.

Extremamente versátil, o JavaScript pode até ter começado de forma tímida com foco limitado ao client-side. Mas isso mudou com a chegada do node.js em 2009: com a possibilidade de utilizar a linguagem também no server-side, cada vez mais devs defendem a utilização desta linguagem em todas as camadas de uma aplicação.

Neste artigo, explicaremos melhor quais são as vantagens da utilização do JavaScript de ponta a ponta, em todas as camadas de uma aplicação.

## O que são exatamente as camadas de uma aplicação?

Também chamadas de stacks, as camadas de uma aplicação são simplesmente o front-end e o back-end de uma aplicação.

E no caso de uma aplicação web, o front-end é a camada que roda no navegador, ou seja, no lado do cliente, ou client-side. Em resumo, qualquer componente que é manipulado pelo usuário e utilizado para coletar sua entrada em um sistema é qualificado com front-end.

Já o back-end é o server-side, ou lado do servidor. Ele recebe as entradas feitas pelo usuário no front-end, as processa e então devolve uma saída que será exibida ao usuário mais uma vez pelo front-end.

Existem várias linguagens que podem ser usadas tanto no front-end quanto no back-end de uma aplicação, mas o JavaScript pode ser aplicado em ambas. E isso é o que significa utilizar a linguagem em todas as camadas de uma aplicação.

Um dev full stack, ou seja, um desenvolvedor capaz de programar nas duas camadas de uma aplicação, usualmente conhecerá o JavaScript e poderá escrever seu código com essa linguagem em ambas.

## O que são Node.js + Express + EJS + MongoDB?

Para compreender melhor como exatamente o JavaScript pode ser utilizado em todas as camadas de uma aplicação, é preciso conhecer também alguns outros nomes: Node JS, Express, EJS e MongoDB.

Com a união de todos esses, é possível fazer algo com o JavaScript do começo ao fim. E, se hoje essa linguagem é utilizada de ponta a ponta, isso se deve ao trabalho brilhante do programador Ryan Dahl, que apresentou o [Node.js](https://www.devpleno.com/modulos?utm_source=blog&#x26;utm_campaign=rc_blogpost) durante uma conferência JSConf na Europa e foi aplaudido de pé na ocasião.

O node.js é uma plataforma que permite a interpretação de código JavaScript do lado do servidor. Ou seja, com o node.js, é possível levar o JavaScript ao back-end.

Quando uma equipe de programadores começa a criar um ambiente de desenvolvimento e instala o node.js, também é instalada uma ferramenta chamada [NPM](https://www.devpleno.com/npm-e-modulos-de-terceiros?utm_source=blog&#x26;utm_campaign=rc_blogpost), sigla para Node Package Manager.

O NPM é utilizado para instalação e gerenciamento de módulos no Node.js. Muitas pessoas preferem utilizar, para o mesmo trabalho, o [Yarn](https://www.devpleno.com/hands-on-yarn?utm_source=blog&#x26;utm_campaign=rc_blogpost), que é mais rápido e eficaz, mas independentemente da opção escolhida, é com o gerenciador de módulos que será feita a instalação do Express, um framework para o Node.js.

O Express é ao mesmo tempo minimalista e robusto: com ele, é possível criar com mais facilidade qualquer tipo de aplicação web. Ele permite a passagem facilitada do navegador para back-end e economiza trabalho de programação.

Já o EJS é a sigla para Embedded JavaScript templates, que é uma linguagem de templates que permite a criação de HTML com apenas JavaScript. A utilização do EJS simplifica a vida do desenvolvedor, que poderá realmente utilizar essa linguagem em todo o desenvolvimento do produto.

Com isso, o processo de desenvolvimento é mais rápido e o código completo fica mais integrado e padronizado, pois apenas JavaScript é utilizado, ainda que o EJS emita o resultado em HTML.

E por fim, o MongoDB é uma ferramenta de banco de dados que armazena tudo em arquivos JSON-like. Ele é um banco de dados gratuito e open-source que pode ser utilizado em conjunto com todas as demais ferramentas já citadas para que a aplicação utilize JavaScript de ponta a ponta.

## Quais são as vantagens de usar JavaScript em todas as camadas?

O JavaScript já foi ridicularizado por ser uma linguagem simples demais e limitadora do potencial de um programador. Ainda hoje, muitos devs ainda torcem o nariz para ela, mas a verdade é que, desde o seu lançamento oficial em 1996 até os dias de hoje, o JavaScript evoluiu muito e não foi à toa que se tornou a linguagem mais popular do mundo, desbancando Java, C#, PHP, Phyton e outras.

Entre as vantagens de utilização dessa linguagem em todas as camadas de uma aplicação, a mais clara é a padronização: com tudo sendo escrito em JavaScript, a uniformidade da linguagem é maior e o trabalho é mais compreensivo para quem está envolvido no projeto, seja um dev front-end, back-end ou full stack.

E se um programador compreende bem os fundamentos da linguagem, ele será capaz de escrever também em todas as camadas, reduzindo gargalos em que o desenvolvimento para porque metade do time espera o pessoal do back-end terminar algo, por exemplo.

Se uma equipe for boa em JavaScript, já é um passo dado para que todos sejam, de certa forma, full stack, ou seja, capazes de trabalhar nas duas camadas da aplicação. E um time full stack é mais versátil, ágil e compreende melhor o produto como um todo.

Outra vantagem bem significativa é a possibilidade de reaproveitamento do código. Reutilizar trechos de código que já foram feitos é uma forma de reduzir a carga de trabalho dos desenvolvedores e acelerar o término do projeto.

E com o MongoDB, é possível inclusive usar o JavaScript no banco de dados. Isso faz com que realmente todo o fluxo de um objeto em uma aplicação seja realizado com o JavaScript.

É possível receber a entrada no navegador com JavaScript, transportar a demanda para o back end ainda com a linguagem e, por fim, salvar um objeto no MongoDB ainda com o JavaScript. Naturalmente, o fluxo reverso também será tão prático quanto.

E você, já está pronto para trabalhar com o JavaScript e se tornar um desenvolvedor full stack? Entre em [contato com a gente](https://www.devpleno.com/contato?utm_source=blog&#x26;utm_campaign=rc_blogpost) para aprender mais sobre essa possibilidade e potencializar seu currículo para o mercado! Esperamos você!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=As%20vantagens%20do%20Javascript%20em%20todas%20as%20camadas%20de%20uma%20aplica%C3%A7%C3%A3o&url=https%3A%2F%2Fdevpleno.com%2Fquais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fquais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao)

---

# Qual é a sua desculpa? - DevPleno

URL: https://devpleno.com/qual-a-sua-desculpa

> Qual a sua desculpa para não fazer ou não estudar alguma coisa hoje? Nosso corpo e nossa mente tem essa mania de dar desculpas para tudo, então sempre que ...

Carreira

## Qual é a sua desculpa?

T
Por Tulio Faria • 22 de junho de 2017

[Carreira](/tag/carreira)

Qual a sua desculpa para não fazer ou não estudar alguma coisa hoje?

Nosso corpo e nossa mente tem essa mania de dar desculpas para tudo, então sempre que queremos dar um passo a mais, estudar algo novo ou fazer algo interessante, a nossa mente nos dá desculpas para não fazer e muitas vezes acreditamos nessas desculpas. Por exemplo, estou muito cansado para aprender uma linguagem nova ou um idioma novo.

O problema nisso é que como conhecemos muito bem nosso corpo e mente, damos desculpas que nós mesmos acreditamos, então é muito difícil lutar contra isso. A minha dica é que sempre que você se pegar dando uma desculpa, converta isso em uma motivação, afinal esse é seu corpo tentando te ‘proteger’ e você deve lutar contra isso porque é apenas a sua mente tentando me desviar do seu objetivo.

Sempre que ouvir de alguém que algo é difícil de ser feito, pegue isso e transforme em motivação para você, pois quem quer fazer arruma um jeito e quem não quer arruma desculpa.

Veja o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Qual%20%C3%A9%20a%20sua%20desculpa%3F&url=https%3A%2F%2Fdevpleno.com%2Fqual-a-sua-desculpa) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fqual-a-sua-desculpa)

---

# Qual é o seu maior desafio nesse momento? - DevPleno

URL: https://devpleno.com/qual-seu-maior-desafio

> Há um tempo venho ajudando desenvolvedores e profissionais de outras áreas e isso vem me proporcionando muita felicidade. É algo que faz parte do meu propó...

Carreira

## Qual é o seu maior desafio nesse momento?

T
Por Tulio Faria • 24 de maio de 2017

[Carreira](/tag/carreira)

Há um tempo venho ajudando desenvolvedores e profissionais de outras áreas e isso vem me proporcionando muita felicidade. É algo que faz parte do meu propósito de vida. Por isso também quero te ajudar a resolver o seu desafio.

**O que você precisa fazer**

Escreva um e-mail para [tuliofaria@devpleno.com](mailto:tuliofaria@devpleno.com) contando um pouco da sua trajetória de vida (como trabalha, quando começou a programar, etc), me diga também qual é o seu maior desafio (qual o seu objetivo e em que exatamente precisa de ajuda) e como você pode ajudar outras pessoas.

Pode ficar tranquilo quanto à privacidade, somente eu tenho acesso a este e-mail

**O projeto**

Depois de ler os e-mails recebidos e fazer uma triagem para descobrir quem no grupo pode se ajudar. Inicialmente não vai ser público porque ainda não consegui achar uma ferramenta que possa fazer isso de uma maneira ótima. Um grupo no facebook seria uma opção, mas eu não gosto de usar esse formato, já que as informações se perdem lá dentro, então quero achar uma forma de ter mais privacidade para os dados já que estamos lidando com informações sensíveis.

Então, por enquanto, eu mesmo irei fazer este roteamento manualmente para apresentar as pessoas (ou eu mesmo vou ajudar se for o caso). A ideia é que a gente cresça junto.

Posteriormente, provavelmente, vamos transformar isso em um sistema, mas quero ver como vai funcionar primeiro nessa forma manual. Acredito que quando desenvolvemos um sistema, temos que conhecer como ele funcionaria manualmente antes de tentar automatizar algo que não existia.

Venho fazendo esse projeto localmente com alguns profissionais de outras áreas (discutimos negócios, como podemos melhorar as pessoas…) e isso está sendo fantástico, então quero aplicar isso aos desenvolvedores que acompanham o DevPleno. Acredito muito no resultado disso, podemos tornar o mundo melhor começando por onde temos forças: ajudando as pessoas de alguma forma.

Aceita entrar nesse desafio? Mande seu e-mail!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Qual%20%C3%A9%20o%20seu%20maior%20desafio%20nesse%20momento%3F&url=https%3A%2F%2Fdevpleno.com%2Fqual-seu-maior-desafio) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fqual-seu-maior-desafio)

---

# Quantas linguagens devo programar? - DevPleno

URL: https://devpleno.com/quantas-linguagens-programar

> Hoje vou começar perguntando uma coisa, quantas linguagens você sabe programar? Essa foi uma das perguntas que recebi recentemente em uma live, achei bem i...

Carreira

## Quantas linguagens devo programar?

T
Por Tulio Faria • 20 de junho de 2017

[Carreira](/tag/carreira)

Hoje vou começar perguntando uma coisa, quantas linguagens você sabe programar?

Essa foi uma das perguntas que recebi recentemente em uma live, achei bem interessante responder isso e mostrar algumas coisas que acho legal quando pensamos nessas quantidades.

Respondendo quantas linguagens eu programo, na verdade, eu não sei, mas deve estar na faixa de umas dez linguagens. Hoje programo com JavaScript, JAVA, PHP, já programei em linguagens muito específicas como C, C++, Pascal, Delphi e por aí vai.

Uma coisa que acho bastante interessante e é também um ponto onde podemos evoluir na carreira é que ao invés de contar quantas linguagens, definir uma meta para cada item na carreira. Por exemplo, uma das coisas que defini como meta para mim é aprender um framework ou uma tecnologia nova por ano. Com isso, todo ano eu tenho que perceber que eu fui melhor que o ano anterior. Nos últimos 4 anos, eu fiquei muito encabulado com qualidade, então estou cada vez mais aplicando continuous integration, continuous deployment, teste unitário, etc.

Além de definir, também é importante se comprometer a completar essa meta. Não vale somente dizer que quer programar uma linguagem por ano, é importante definir o que é programar essa linguagem e conhecer a tecnologia. E como se faz isso? Colocamos em produção.

Sabemos que projetos simples de estudo não dão os mesmos problemas que quando colocamos em produção, então, esse processo é muito importante para o aprendizado. Quando você coloca seu software para usuários normais usarem, estão testando pra valer. Eu acredito bastante que quando fazemos isso pensamos diferente, a segurança como um todo, conexão externa e por aí vai. É por isso que uma das características que eu venho trazendo para os cursos do DevPleno é essa característica de trazer processos que usamos no mercado. O nosso curso de ReactJS traz essa bagagem porque quero trazer esse caminho das pedras, o React sozinho é muito legal, mas faltam coisas para colocar em produção, afinal essa é a última milha da experiência que precisamos. Então eu programo com várias linguagens, mas o principal é definir o critério que você vai definir se você conhece ou não essa linguagem. O meu critério é colocar ele em produção.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Quantas%20linguagens%20devo%20programar%3F&url=https%3A%2F%2Fdevpleno.com%2Fquantas-linguagens-programar) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fquantas-linguagens-programar)

---

# Quanto ganha quem trabalha por meio da Toptal? - DevPleno

URL: https://devpleno.com/quanto-ganha-quem-trabalha-por-meio-da-toptal

> A pergunta que não quer calar: Quanto se ganha trabalhando por meio da Toptal? <div className=&#34;embedresponsive embedresponsive16by9&#34;   <iframe className=&#34;e...

Carreira

## Quanto ganha quem trabalha por meio da Toptal?

T
Por Tulio Faria • 16 de fevereiro de 2018

[Carreira](/tag/carreira)

A pergunta que não quer calar: Quanto se ganha trabalhando por meio da Toptal?

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Quanto%20ganha%20quem%20trabalha%20por%20meio%20da%20Toptal%3F&url=https%3A%2F%2Fdevpleno.com%2Fquanto-ganha-quem-trabalha-por-meio-da-toptal) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fquanto-ganha-quem-trabalha-por-meio-da-toptal)

---

# Racionalização: Tomando decisões racionais - DevPleno

URL: https://devpleno.com/racionalizacao

> Hoje gostaria de dar uma dica bem rápida para você sobre o que eu chamo de Racionalização, que é basicamente olharmos o que estamos fazendo de uma maneira ...

Carreira

## Racionalização: Tomando decisões racionais

T
Por Tulio Faria • 8 de maio de 2017

[Carreira](/tag/carreira)

Hoje gostaria de dar uma dica bem rápida para você sobre o que eu chamo de Racionalização, que é basicamente olharmos o que estamos fazendo de uma maneira mais racional.

**Como assim?**

Por exemplo, você está criando sua empresa do zero e faz uma ação totalmente no “achismo”, então se não foi racionalizado esta ação, não temos o feedback de que foi acertado ou não.

Usando o próprio devPleno como exemplo: Se uma postagem X foi bem recebida, por que ela foi bem recebida? Então fazemos uma racionalização analisando tudo o que os dados nos dizem para saber o motivo.

Quanto mais racionalizamos, melhor ficamos nesta área. Caso olhamos para um projeto que não está performando como queríamos e tentamos racionalizar o que esta acontecendo, começamo a olhar de uma maneira muito diferente.

**Como fazer isso?**

Comece a olhar outros projetos de outros ‘lugares’ e ache razão neles, trazendo para o seu projeto.

Podemos usar como exemplo o Youtube. Existe uma forma de aplicar uma alteração em lot, fazendo tudo via interface, então você olha para seu projeto e pensa: por que estou tentando fazer uma operação em lot no servidor se eu posso criar uma ação em lot no react que chama varias requests para cada alteração no servidor? Assim você começa a analisar melhor e achar solução olhando estes exemplos externos, outro aplicativo, outra empresa, etc.

É muito interessante fazer a Racionalização para tudo que esta ao nosso redor, não só como empreendedor, mas também como desenvolvedor ou até mesmo cidadão.

Então a dica de hoje é: Racionalize sobre as coisas. Tomou uma decisão? Por que você fez isso? Por que retornou aquele resultado? Entenda, ache as razões do motivo por ter acontecido, e não apenas deixe as ideias ‘voando’.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Racionaliza%C3%A7%C3%A3o%3A%20Tomando%20decis%C3%B5es%20racionais&url=https%3A%2F%2Fdevpleno.com%2Fracionalizacao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fracionalizacao)

---

# React 16 - o Pacificador - DevPleno

URL: https://devpleno.com/react-16-o-pacificador

> Hoje quero trazer as boas novas do mundo React, era algo que já esperava e esperava que fosse acontecer. Muito se discutiu, nos últimos tempos, sobre a lic...

Javascript

## React 16 - o Pacificador

T
Por Tulio Faria • 2 de outubro de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Hoje quero trazer as boas novas do mundo React, era algo que já esperava e esperava que fosse acontecer. Muito se discutiu, nos últimos tempos, sobre a licença, que era um pouco restritiva e muitas empresas estavam saindo do ecossistema por esse motivo.

No dia 25 de setembro de 2017, na versão 15.6.2, já foi mudada essa licença para algo mais permissiva, saindo dessa BSD + patentes para MIT, assim ela fica aberta.

A nova versão do React, a versão 16 também já está nessa licença, isso ficou bastante interessante.

Quero comentar algumas coisas também referente ao React que são coisas que me motivaram aos meus estudos serem focados em React e não em Angular, por exemplo.

Algumas coisas novas, como por exemplo, ele pode retornar um vetor de JSX, uma string, deu uma melhor forma de lidar com erros, mas o que eu queria comentar é que, além da troca da licença, o tamanho foi reduzido. Isso era algo que atrapalhava bastante quando você gerava um bundle. Se não tivesse utilizando uma forma de quebrar esse bundle, ficava muito pesado.

Outra mudança que achei bastante interessante foi que a característica do React foi reescrita todo o core do zero utilizando o projeto Fiber.

Além disso, eles não mexeram nas API’s, então é possível atualizar o React sem quebrar muita coisa, algo que aconteceu, por exemplo, com o Angular.

Eu considero essa versão do React a versão das “pazes” porque a comunidade estava um pouco desanimada.

Deixe suas dúvidas e sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=React%2016%20-%20o%20Pacificador&url=https%3A%2F%2Fdevpleno.com%2Freact-16-o-pacificador) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Freact-16-o-pacificador)

---

# ReactJS: comentários em JSX - DevPleno

URL: https://devpleno.com/reactjs-comentarios-em-jsx

> Estes dias passei por uma situação engraçada: queria apenas comentar uma parte de um JSX. JSX é a sintaxe utilizada para renderizar HTML do ReactJS. Porém,...

Javascript

## ReactJS: comentários em JSX

T
Por Tulio Faria • 23 de novembro de 2016

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Estes dias passei por uma situação engraçada: queria apenas comentar uma parte de um JSX. JSX é a sintaxe utilizada para renderizar HTML do ReactJS. Porém, isso não foi tão simples :)

A primeira tentativa seria fazer como um comentário em HTML:

render(){
return (
&#x3C;div>
&#x3C;!-- isso não vai funcionar :) -->
&#x3C;/div>
)
}
Porém, rapidamente iremos perceber que isso não funciona :)

A segunda tentativa (já que JSX é meio HTML meio JS) seria tentar:

render(){
return (
&#x3C;div>
{ &#x3C;-- isso não vai funcionar :) ---> }
&#x3C;/div>
)
}
Hum, mas não funcionou :(

Bom, mas aí que está o pulo do gato. Precisamos avisar o JSX que ele tem que renderizar este trecho de código como javascript e não como JSX.

E aí está o motivo do qual temos que usar { }.

render(){
return (
&#x3C;div>
{ /* isso vai funcionar :) */ }
&#x3C;/div>
)
}
Neste caso, quando utilizamos as chaves, estamos alternando o contexto entre JSX e JS, e por isso,o comentário agora irá funcionar. Basta lembrar que quando queremos “escrever” algo no JSX utilizamos { nomeDaVariavel }.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ReactJS%3A%20coment%C3%A1rios%20em%20JSX&url=https%3A%2F%2Fdevpleno.com%2Freactjs-comentarios-em-jsx) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Freactjs-comentarios-em-jsx)

---

# Redirecting to: /

URL: https://devpleno.com/reactnative

Redirecting to: / [Redirecting from /reactnative to /](/)

---

# Reconhecimento de nudez com js - DevPleno

URL: https://devpleno.com/reconhecimento-de-nudez-com-js

> Hoje quero complementar aquela dica passada sobre reconhecimento facial. Outra atividade que fazemos bastante quando permitimos que um usuário envie uma fo...

Javascript

## Reconhecimento de nudez com js

T
Por Tulio Faria • 24 de novembro de 2017

[Javascript](/tag/javascript)

Hoje quero complementar aquela dica passada sobre [reconhecimento facial](https://www.devpleno.com/reconhecimento-facial-com-js/). Outra atividade que fazemos bastante quando permitimos que um usuário envie uma foto é checar por nudez. Isso também é conhecido como feature detection.

O mais comum é checar o quanto de pele ou roupa tem naquela foto.

Para fazer isso vamos utilizar o nude.js, primeiramente vamos baixar as versões compressas, nude.min.js e worker.nude.min.js.

Agora em um html faremos o seguinte:

&#x3C;html>
&#x3C;head>
&#x3C;title>Nude&#x3C;/title>
&#x3C;/head>
&#x3C;body>
&#x3C;img src='imgsemnudez.jpg' />
&#x3C;script src='nude.min.js'>&#x3C;/script>
&#x3C;script>
const img = document.getElementById('img') nude.load(img) nude.scan(
result => {console.log(result)})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
O próprio worker vai arrumar e carregar. Simplesmente temos que carregar essa foto nele e em seguida dar um scan.

No exemplo acima, eu coloquei uma imagem sem nudez, ao retornar o result percebam que será um false. Caso mudemos para uma imagem de uma pessoa nua ele vai retornar um true, com isso poderíamos negar essa foto. Por exemplo, quando o usuário tentar utilizar a foto podemos pegar a imagem quando selecionarmos, jogar em um canvas e passar pelo nude.js

Toda vez que for colocar uma imagem que você tenha medo, por exemplo, por serem desnecessárias, poderíamos rodar esse script para checar e ver se tem indícios de nudez. Outra coisa comum é checar. Se der falso, tudo bem, se der verdadeiro, você manda para uma checagem manual.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Reconhecimento%20de%20nudez%20com%20js&url=https%3A%2F%2Fdevpleno.com%2Freconhecimento-de-nudez-com-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Freconhecimento-de-nudez-com-js)

---

# Reconhecimento facial com JS - DevPleno

URL: https://devpleno.com/reconhecimento-facial-com-js

> Implemente reconhecimento facial no navegador com JavaScript usando a biblioteca TrackingJS. Hands-on com visão computacional.

Javascript

## Reconhecimento facial com JS

T
Por Tulio Faria • 24 de novembro de 2017

[Javascript](/tag/javascript)

Hoje vamos fazer um hands-on em uma biblioteca que eu achei muito interessante chamada TrackingJS. Ela nos ajuda a trabalhar com visão computacional.

Visão computacional é uma forma que temos de processar imagens para extrair alguma coisa delas, nesse exemplo vamos fazer um tracking facial, reconhecer a face em uma imagem.

Um exemplo prático seria por exemplo, se a pessoa subir uma foto para o perfil dela, esse tracking facial poderia te ajudar a centralizar e realizar o crop da foto.

A primeira coisa que vamos fazer é acessar o site “trackingjs.com” e baixar um pacote com todos os arquivos. Vamos pegar a pasta build e deixar dentro do diretório em que vamos criar a aplicação. Além disso, vou rodar também o HTTP server na pasta que eu estou criando os arquivos.

Vamos criar um arquivo index.html. O trackingjs já vem com várias coisas que podemos reaproveitar,uma delas é reconhecer o vídeo da webcam. Para fazer isso, vamos importar da pasta build o traking-min.js e o data/face-min.js:

&#x3C;html>
&#x3C;head>
&#x3C;title>Face Traking&#x3C;/title>
&#x3C;style>
video, canvas {
position: absolute;
border: 1px solid red;
}
&#x3C;/style>
&#x3C;/head>
&#x3C;body>
&#x3C;script rsc="tracking-min.js">&#x3C;/script>
&#x3C;script rsc="data/face-min.js">&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
O reconhecimento de faces funciona basicamente por meio de um treinamento, onde fazemos em uma rede neural e precisamos desse arquivo de dados, que é o treinamento realizado.

Agora vamos criar dois itens, um deles é uma tag víde. Vamos definir uma largura e altura. O outro é um canvas para podermos desenhar em cima desse vídeo e mostrar onde está sendo reconhecido realmente o rosto:

&#x3C;body>
&#x3C;video
id='video'
width='320'
height='240'
preload
autoplay
loop
muted
>&#x3C;/video>
&#x3C;canvas id='canvas' width='320' height='240'>&#x3C;/canvas>
&#x3C;script rsc='tracking-min.js'>&#x3C;/script>
&#x3C;script rsc='data/face-min.js'>&#x3C;/script>
&#x3C;/body>
Agora vamos começar realmente a fazer esse tracking do rosto. Quando carregarmos a página, vamos chamar a função init que vai ter nosso vídeo, canvas um contexto para o canvas e um tracker, que é nosso rastreador em específico:

&#x3C;script>
function init(){
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const tracker = new traking.ObjectTracker('face')
}
window.onload = init()
&#x3C;/script>
Agora podemos mandar rastrear a tag vídeo utilizando a câmera. Fazendo isso, eu consigo enviar um event:

tracking.track('#video', tracker, { camera: true })
tracker.on('track', (event) => {
console.log(event)
})
Ao dar F5 no browser e acessar o F12, percebam que ele muda à medida que o rosto se mexe dentro do limite que escolhemos, com isso vamos desenhar em cima do canvas:

&#x3C;script>
function init(){
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const tracker = new traking.ObjectTracker('face')
tracking.track('#video', tracker, {camera: true})
tracker.on('track', event => {
console.log(event)
context.clearRect(0,0,canvas.width, canvas.height )
event.data.foEach( rect => {
console.log(rect)
})
})
}
window.onload = init()
&#x3C;/script>
O retângulo já está lá reconhecendo a cabeça ao se mexer, porém ainda não conseguimos visualizar ele.

Então, para cada retângulo reconhecido, vamos desenhar ele na tela:

event.data.foEach((rect) => {
context.strokeStyle = '#ff0000'
context.lineWidth = 2
context.strokeRect(rect.x, rect.y, rect.width, rect.height)
})
Com isso já conseguimos ver o reconhecimento do meu rosto. Em uma aplicação real, eu poderia, por exemplo, reconhecer o rosto, dar um freeze e cortar a imagem um pouco para cima e para os lados para ajudar no crop.

Além disso ainda podemos mostrar uma informação de onde está sendo reconhecido esse retângulo:

event.data.foEach((rect) => {
context.strokeStyle = '#ff0000'
context.lineWidth = 2
context.strokeRect(rect.x, rect.y, rect.width, rect.height)
context.fillText(
`x: ${rect.x}`,
`w: $:{rect.width}`,
rect.x + rect.width + 20,
rect.y + 20
)
context.fillText(
`y: ${rect.y}`,
`h: $:{rect.height}`,
rect.x + rect.width + 20,
rect.y + 40
)
})
Assim temos a informação precisa de onde foi encontrado o nosso rosto. Poderíamos utilizar isso para fazer o crop.

Como colocamos isso em um vetor, é possível reconhecer mais de um rosto no vetor, a partir disso podemos fazer, por exemplo, um sistema de tag para marcar os amigos.

Veja o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Reconhecimento%20facial%20com%20JS&url=https%3A%2F%2Fdevpleno.com%2Freconhecimento-facial-com-js) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Freconhecimento-facial-com-js)

---

# High-order Function - Reduce - DevPleno

URL: https://devpleno.com/reduce

> Hoje vamos continuar falando sobre high order functions, principalmente as que estão disponíveis nos vetores em JavaScript. Vamos falar mais especificament...

Javascript

## High-order Function - Reduce

T
Por Tulio Faria • 30 de junho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Hoje vamos continuar falando sobre high order functions, principalmente as que estão disponíveis nos vetores em JavaScript. Vamos falar mais especificamente do Reduce. É muito comum utilizarmos o [Map](https://www.devpleno.com/map/) junto com o Reduce, ele existe em algumas outras formas como no mongoDB que é o map.reduce, uma técnica bastante utilizada para concatenar dados de forma distribuída.

Suponhamos que nossa ideia é ter um carrinho de compras e somar esse carrinho, para isso podemos utilizar o Reduce e passamos uma função que vai ser responsável por reduzir esse vetor em um valor só.

Como fazer isso?

Primeiramente podemos fazer com uma Arrow Function:

const carrinho = [{ id: 1, preco: 2, qtd: 2 },
{ id: 1, preco: 3, qtd: 1 }]

carrinho.reduce()

const total = carrinho.reduce((soma, item) => item.preco + soma, 0)

console.log(total)
Perceba que dentro de item e soma retornamos como queremos somar esse valor e ela começa a soma com 0. Podemos fazer de uma forma mais interessante.

Você se lembra que o MAP transforma de um valor para outro? Então poderíamos fazer o seguinte:

const carrinho = [{ id: 1, preco: 2, qtd: 2 },
{ id: 1, preco: 3, qtd: 1 }]

carrinho.reduce()
const total = carrinho
.map((item) => item.preço * item.qtd)
.reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)
Com isso, o Map vai transformar o item em um subtotal e meu Reduce vai somar esses valores transformados. Perceba que são funções bem simples, então é bem tranquilo de testarmos essas funções.

Poderíamos, por exemplo, colocar o item em uma const e passar apenas o subtotal:

const subtotal = (item) => item.preço * item.qtd
const total = carrinho
.map(subtotal)
.reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)
Essa é uma forma bem fácil de se fazer em teste unitários, utilizando bastante funções puras no Map, Reduce, etc. Isso ajuda muito a aumentar a testabilidade do código e consequentemente a qualidade dele.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=High-order%20Function%20-%20Reduce&url=https%3A%2F%2Fdevpleno.com%2Freduce) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Freduce)

---

# [SEGREDO] Muitos registros do MySQL no NodeJS - DevPleno

URL: https://devpleno.com/registros-do-mysql-no-nodejs

> Hoje quero contar um segredo para você: como utilizar o driver padrão do MySQL no Node para lidar com grandes quantidades de dados. A primeira coisa que va...

Javascript

## [SEGREDO] Muitos registros do MySQL no NodeJS

T
Por Tulio Faria • 18 de agosto de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Hoje quero contar um segredo para você: como utilizar o driver padrão do MySQL no Node para lidar com grandes quantidades de dados.

A primeira coisa que vamos fazer é instalar o driver padrão:

yarn add mysql
Tudo que formos fazer em Node e envolve grandes quantidades de dados, temos que pensar em Stream (fique com isso na cabeça). Precisamos utilizar o Stream de alguma forma:

const mysql = require('mysql')
const connection = mysql.createConnection({
host: '127.0.0.1',
user: 'root',
password: '',
database: 'cadastro'
})
connection.connect(() => console.log('connected'))
Lembrando que eu já tenho um banco de dados para testes. Fizemos algo bem rápido para chegar logo na parte que interessa :)

Depois que conectamos, temos que fazer uma busca. Imagine que você tem que retornar um milhão de registros, a primeira coisa é que você não vai conseguir retornar isso em interface nenhuma, então provavelmente terá que gerar um arquivo xml, json ou qualquer coisa desse tipo.

connection.connect(() => {
console.log('connected')
connection.query('select * from pessoas', (err, results) => {
console.log(results)
})
})
Com isso ele vai mostrar todas as pessoas que estão cadastradas; no meu caso, tenho mais de 900 itens. Isso já é muito peso para ser lidado dessa forma porque a query vai pro banco e volta de uma vez dentro de “results”. Nesse ponto, estamos matando as duas pontas porque precisamos fazer o banco inteiro trazer todos os registros e depois processando todos. Pensando em uma escala de milhão, quando trouxermos para o Node, teremos problema de memória.

Precisamos então fazer essa query de uma outra maneira:

connection.connect(() => {
console.log('connected')
const query = connection.query('select * from pessoas')
query.on('result', (row) => {
console.log(row)
})
})
A query tem algo bem interessante; ela mostra que algum resultado chegou no Stream porque quando fazemos essa consulta, ela é muito pesada, então trará linha a linha. Perceba que à medida que ele for recebendo de forma assíncrona, a gente vai processando os registros e isso é muito mais performático do que tentar usar o callback como estávamos fazendo antes.

Imagine, por exemplo, que temos algum arquivo que não fosse executado de primeira:

query.on('result', (row) => {
setTimeout(() => {
console.log(row)
}, 300)
})
Quando trazemos esse resultado, travaremos o Stream (lembrando que o Node é mono-thread), então enquanto eu estiver processando, ele vai ter várias coisas pendentes e corre o risco de ser mais rápido trazer da rede do que processar. Temos que falar para o driver do MySQL segurar:

query.on('result', (row) => {
connection.pause()
setTimeout(() => {
console.log(row)
connection.resume()
}, 300)
})
Assim vamos conseguir controlar esse fluxo de dados e podemos processar grandes quantidades de registros sem ter problema com memória. Outra coisa que podemos fazer é o seguinte: terminou de processar, pode finalizar a conexão:

...
},300)
})
query.on('end', () => connection.end())
É muito interessante utilizarmos essa query como um eventStream, ele vai enviando eventos e pausa a conexão, restabelecendo ela para continuar mandando dados sempre que estiver fazendo esse processamento dos dados, assim evitamos trazer todos os registros para memória de uma vez.

Se você for fazer processo em lote, que é muito pesado, deixe os ‘console.log’ somente para debug porque ele também é pesado. Pensando em escala, você perde alguns mili segundos sempre que o faz. Outra coisa: se o processamento é muito lento, limite enquanto está testando:

const query = connection.query('select * from pessoas limit 100')
Obviamente que não elimina você ter que testar, mas já ajuda a agilizar seus testes de começo.

Veja o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=%5BSEGREDO%5D%20Muitos%20registros%20do%20MySQL%20no%20NodeJS&url=https%3A%2F%2Fdevpleno.com%2Fregistros-do-mysql-no-nodejs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fregistros-do-mysql-no-nodejs)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/relampagofsm

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /relampagofsm to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Render condicional em ReactJS - DevPleno

URL: https://devpleno.com/render-condicional-em-reactjs

> Durante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no Rea...

Javascript

## Render condicional em ReactJS

T
Por Tulio Faria • 25 de janeiro de 2017

*

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Durante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no ReactJS/JSX temos algumas alternativas.

## Primeira maneira: utilizando if´s

JSX é basicamente um Javascript disfarçado de HTML (sim, apenas para facilitar a criação de templates). Então, podemos utilizar JS para renderizar ou não um treco de template.

import React, { Component } from 'react'

class CondComIf extends Component {
render() {
if (this.props.condicao) {
return &#x3C;p>Condicao é verdadeira&#x3C;/p>
}
return &#x3C;p>Condicao é falsa&#x3C;/p>
}
}

// para renderizarmos este componente
// &#x3C;CondComIf condicao={true} />
**Importante:** sempre o método render precisa retornar algo e que este algo seja apenas uma tag.

## Segunda maneira: condicional com operador lógico

Este formato utiliza a precedência de operadores para funcionar como uma condicional. Por exemplo, se fizermos isso:

a === 10 &#x26;&#x26; b === 20
Temos uma característica interessante. Caso a===10 retorne falso, na grande maioria das linguagens (por termos um &#x26;&#x26;) não ira nem executar a comparação de b===20.

Isso nos permite fazer o seguinte:

const a = 10
const b = 20

a===b &#x26;&#x26; console.log('A eh igual a B)
Claro que neste exemplo, nunca o console.log será executado, mas creio que fez sentido para você.

Utilizando a mesma ideia, podemos fazer o seguinte:

import React, { Component } from 'react'

class CondComOp extends Component {
render() {
return (
&#x3C;p>
&#x3C;h2>Vamos fazer o condicional: &#x3C;/h2>
{this.props.condicao &#x26;&#x26; &#x3C;span>Condicao é verdadeira&#x3C;/span>}
{!this.props.condicao &#x26;&#x26; &#x3C;span>Condicao é falsa&#x3C;/span>}
&#x3C;/p>
)
}
}

// para renderizarmos este componente
// &#x3C;CondComOp condicao={true} />
**Importante:** o trecho de template que vem após o &#x26;&#x26; deve seguir a mesma regra do return do render. Ou seja, temos que retornar sempre um nó filho (no caso do exemplo um span).

A combinação destas técnicas nos permite chegar a componentes muito bem organizados. Pois se precisarmos renderizar algo totalmente diferente, podemos usar o if. Caso desejamos apenas mostrar/ocultar trechos menores dentro do render, a segunda opção é muito viável.

Não deixe de comentar e nos seguir em todo lugar :) Ah, e para você que quer aprender ReactJS mais rapidamente, temos o nosso curso completo!*

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Render%20condicional%20em%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Frender-condicional-em-reactjs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frender-condicional-em-reactjs)

---

# ReactJS Recursivo? - DevPleno

URL: https://devpleno.com/renderizar-estruturas-em-formato-de-arvore

> Hoje vamos fazer algo que é bastante convencional em sistemas: renderizar estruturas de dados em formato de árvore. No exemplo, será uma árvore binária, ma...

Javascript

## ReactJS Recursivo?

T
Por Tulio Faria • 28 de junho de 2017

*

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Hoje vamos fazer algo que é bastante convencional em sistemas: renderizar estruturas de dados em formato de árvore. No exemplo, será uma árvore binária, mas como poderíamos renderizar no ReactJS.

Em que isso é útil?

Vamos supor que você tenha uma interface com um menu lateral e esse menu tem formato de uma pasta dentro da outra, seria muito útil, pois você poderia fazer um item dentro do outro sendo renderizado de forma ‘infinita’. Recursividade é algo muito importante para qualquer sistema, e podemos fazer isso dentro do React utilizando alguns conceitos de recursividade.

Eu já tenho um projeto criado, apenas com create React App, nada além disso. Primeiro vamos criar uma estrutura chamada nodes que vai ser nossa árvore em si. Teremos o lado direito, esquerdo e o valor que será uma multiplicação. Do lado esquerdo, vamos ter um valor 1, do lado direito, um outro valor 2 e o ‘v’ dele vai ser uma divisão.

class App extends Component {
render(){
const nodes = {
l:{ l:{ v: 1 }, r:{v: 2},
v: '/'},

r:{v: 10}
v:'*'
}
return(
&#x3C;div>
&#x3C;h1> welcome to React&#x3C;/h1>
&#x3C;/div>
)
}
}
Perceba que do lado direito temos somente um valor 10. Vamos colocar como se fosse um parênteses do lado esquerdo e depois colocar multiplicado por 10 do lado direito, temos que renderizar os itens do lado esquerdo e depois do lado direito de forma recursiva, então não preciso fazer nenhum for*.

Como fazemos isso de forma recursiva?

A primeira coisa que vamos fazer é criar um outro arquivo chamado node.js, importar o react para usarmos o JSX e, para ficar simples, vamos fazer com functional stateless component:

import React from 'react'

const Node = (props) => {
return &#x3C;p> Node &#x3C;/p>
}
export default Node
Voltando ao App.js vamos importar o node e ao invés de colocarmos o H2 vamos colocar o nó dentro dele:

import Node from './node'
return (
&#x3C;div>
&#x3C;h2>
{' '}
&#x3C;Node node={nodes} />
&#x3C;/h2>
&#x3C;/div>
)
Então ele escreveu o node, que é o que está dentro do nó.

Vamos mudar, colocar um span em node.js e colocar um JSON com um props.node para sabermos o que tem ali dentro:

const Node = (props) =>{
return(
&#x3C;span> {JSON.stringfy(props.node) &#x3C;/span>
)
}
Perceba que é retornado o nó inteiro. Se eu tiver o lado esquerdo, tenho que renderizar esse nó, para isso podemos pedir para o node renderizar do lado esquerdo.

const Node = (props) => {
return (
&#x3C;span>
{props.node.l &#x26;&#x26; &#x3C;Node node={props.node.l} />}
{props.node.v}
&#x3C;/span>
)
}
Com isso ele andou apenas para o lado esquerdo. Podemos adicionar também, por exemplo, apenas o lado direito:

{
props.node.r &#x26;&#x26; &#x3C;Node node={props.node.r} />
}
Agora eu quero saber quando eu renderizar um nó colocar um parênteses para saber quando foi realizado uma conta:

const Node = (props) => {
return (
&#x3C;span>
({props.node.l &#x26;&#x26; &#x3C;Node node={props.node.l} />}
{props.node.v})
&#x3C;/span>
)
}
Com isso conseguimos reparar como foi feito a conta, afinal ele mantém as precedências dos parênteses, ou seja, ele está entrando realmente na árvore.

Perceba que fizemos recursividade sem utilizar nada de repetição, apenas mandamos renderizar a função, que nada mais é do que um componente chamando ele mesmo. Uma coisa importante é sabermos que ele tem um nó base, então toda vez que ele for um V não tem nel left nem right, logo ele é o passo base, onde eu paro a recursividade.

Poderíamos fazer o parênteses não aparecer nos valores, deixando o resultado muito mais simples.

const Node = (props) => {
return (
&#x3C;span>
{props.node.l &#x26;&#x26; props.node.r &#x26;&#x26; &#x3C;span>(&#x3C;/span>}
{props.node.l &#x26;&#x26; &#x3C;Node node={props.node.l} />}
{props.node.v}
{props.node.l &#x26;&#x26; props.node.r &#x26;&#x26; &#x3C;span>)&#x3C;/span>}
&#x3C;/span>
)
}
Uma coisa interessante é que se fizermos um inspect no browser e usar o react dev tools é possível ver toda a estrutura sendo criada.

Fizemos aqui um forma de renderizar expressões, mas poderíamos utilizar para renderizar uma árvore, lista de diretórios, etc. Tudo isso utilizando essa simples estrutura.

Confira todos os passos no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ReactJS%20Recursivo%3F&url=https%3A%2F%2Fdevpleno.com%2Frenderizar-estruturas-em-formato-de-arvore) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frenderizar-estruturas-em-formato-de-arvore)

---

# Request - Requisições HTTP de forma rápida e simples - DevPleno

URL: https://devpleno.com/request

> O Request é um pacote que permite que façamos requisições HTTP. Uma coisa interessante sobre ele é que é uma ferramenta muito simples, conseguimos fazer re...

Javascript

## Request - Requisições HTTP de forma rápida e simples

T
Por Tulio Faria • 14 de agosto de 2017

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

O Request é um pacote que permite que façamos requisições HTTP. Uma coisa interessante sobre ele é que é uma ferramenta muito simples, conseguimos fazer requisições em algum ambiente ou servidor HTTP de uma forma rápida.

Primeiramente vamos instalar:

npm install request
Agora vamos criar um novo arquivo e fazer um require no nosso request e pegar o site da UOL por exemplo:

const request = require('request')
request('https://www.uol.com.br', function (err, res, body) {
if (!err &#x26;&#x26; res.statusCode === 200) {
console.log(body)
}
})
Então se não retornar nenhum erro e a resposta for um http 200, ele retorna o body, que é um parâmetro da nossa function.

Ao rodar o código, perceba que retornará todo o HTML da página principal do UOL, isso é útil, pois sempre que quisermos consumir uma API, podemos usar o request, lembrando que ele permite outros métodos HTTP também, como um post e principalmente para baixar dados.

Vamos supor que eu quisesse salvar o site da UOL (pode ser um site, um arquivo, uma imagem, mas vou salvar o site todo para demonstrar):

const request = require('request')
const fs = require('fs')
request('https://www.uol.com.br').pipe(fs.createWriteStream('home.html'))
(Lembrando que o ‘fs’ já faz parte do core do Node, então não precisamos instalar nada).* Então ele vai ligar o output stream do request com o writeStream do ‘fs’ que acabamos de criar, no fim das contas ele vai salvar em um home.html.

Um caso de uso que eu já fiz com esse pacote foi a seguinte: eu tinha um serviço em que agregava os logs entre as minhas aplicações, então ela estava distribuída em servidores distintos e esse serviço que utilizava o request para baixar os arquivos de log e depois de baixado ele fazia o processamento das informações. Isso era bastante útil para poder importar os dados, mas lembrando que podemos usá-lo para muitas outras coisas além disso.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Request%20-%20Requisi%C3%A7%C3%B5es%20HTTP%20de%20forma%20r%C3%A1pida%20e%20simples&url=https%3A%2F%2Fdevpleno.com%2Frequest) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frequest)

---

# Request e Response - DevPleno

URL: https://devpleno.com/request-e-response

> Nos posts anteriores já falamos sobre backend, frontend, como eles se comunicam através de uma requisição, e agora você verá um exemplo prático de um reque...

Javascript

## Request e Response

T
Por Tulio Faria • 22 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Nos posts anteriores já falamos sobre back-end, front-end, como eles se comunicam através de uma requisição, e agora você verá um exemplo prático de um request e um response.

Vamos usar o NodeJS, mas não é obrigatório focar nisso, pois depois vou falar exclusivamente sobre ele. Toda vez que você entra em um site, como o google, está fazendo um GET no [Google](https://www.google.com/).

Como checar se isso está realmente acontecendo?

No caso do Windows, apertamos F12 usando o Chrome e então irá aparecer esta aba Network:

Perceba que temos várias abas, isso é uma barra de desenvolvimento. A medida que formos avançando iremos passar por algumas delas. O importante para agora é o Network, aperte o F5 e irá aparecer muitas requisições:

Se você clicar em alguma delas, é possível ver tudo sobre ela, e uma das coisas é o request method do tipo GET, qual o servidor, etc. Temos também o response reader logo a baixo:

No caso do GET, não temos um Request Body, mas temos um Response Body, que fica ao lado de preview. Lá seria a pagina inicial do google já retornada para o usuário. Agora vamos fazer o seguinte: quando vier um GET em ’/’ irei retornar todos os GET’s da requisição e os dados de resposta em uma function req e res, pegamos o requests da requisição e devolvo ao cliente.

var express = require ('express');
var app express();
app.get('/', function (req, res){
//res.send('Esta é uma requisição GET.');
//res.send(req.query);
res.send(req.headers);
});
Quando rodarmos o exemplo irá aparecer o seguinte:

Mostrando todos os Headers que eu solicitei.

Lembrando que, quando temos um request/response, sempre temos um cabeçalho para cada. Dependendo da requisição. podemos ter o body ou não. Também há outros tipos de requisição, como é o caso do POST. Nele podemos fazer a mesma coisa, porém com uma diferença: não conseguimos fazer no mesmo nível do GET pelo navegador. Vou mostrar agora o Postman, que permite que a gente faça um POST. Vamos então fazer um POST em /users:

var express = require ('express');
var app express();
app.post('/users', function(req,res){
res.send(req.headers);
req.on('data', function(chunk){
//res.send(chunk);
});
});
Vamos mandar para [https://localhost:3000/users](https://localhost:3000/users) o tipo de requisição, no caso o POST, e um raw, ou seja, um texto puro.

Em Text, selecionamos JSON e ele já troca o cabeçalho de solicitação para JSON. Apertamos o Send, e a resposta que vem são os cabeçalhos do request.

Note que o content-length retornou 20 bytes, pois estou enviando 20 bytes de dados, diferente do anterior onde não estou enviando nada. Lembrando que no post eu tenho o body da minha requisição. O básico de uma aplicação WEB sempre funciona dessa forma, então o front-end faz uma request e recebe uma resposta.

Assista ao vídeo da explicação:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Request%20e%20Response&url=https%3A%2F%2Fdevpleno.com%2Frequest-e-response) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frequest-e-response)

---

# Hands-on: Request-promise - DevPleno

URL: https://devpleno.com/request-promise

> Este handson vai ser complementar a outro módulo que eu já mostrei por aqui, o Request. O módulo de hoje é o RequestPromise, que é basicamente o Resquest 

Javascript

## Hands-on: Request-promise

T
Por Tulio Faria • 17 de agosto de 2017

[Javascript](/tag/javascript)

Este hands-on vai ser complementar a outro módulo que eu já mostrei por aqui, o Request. O módulo de hoje é o Request-Promise, que é basicamente o Resquest ‘Promisificado’, então ele retorna uma Promise e assim fica muito mais fácil de fazer tratamentos de várias requisições HTTP, porque podemos utilizar, por exemplo, tanto o Generator com o Wild ou dentro do Async/await, que é uma maneira mais moderna de se fazer.

Então vamos colocar a mão na massa. Primeiro vou instalar as duas dependências que precisamos. Uma coisa importante: o Request promise depende do Request, então temos que adicionar os dois:

yarn request

yarn request promise
Em seguida, basta simplesmente importar ele. A assinatura é exatamente a mesma do Request, então eu posso simplesmente trocar para o Request-Promise:

const request = require('request-promise')
request('https://httpbin.org/ip').then((res) => console.log(res))
Então a versão com promise eu não tenho um callback, e sim um then com catch para tratar. Ao rodar, perceba que ele vai bater no servidor e retornar o IP.

Outra vantagem que temos é que podemos fazer o seguinte:

const pegarIp = async () => {
const ip = await request('https://httpbin.org/ip')
console.log(ip)
}
pegarIp()
Perceba que o código ficou muito mais simples, conseguimos fazer a mesma operação, porém trocando a Promise por Async/await. Outra coisa que poderíamos fazer é pegar esse IP e enviar de volta:

const pegarIp = async () => {
const ip = await request('https://httpbin.org/ip')
const ipPost = await request({
method: 'POST',
json: ip,
uri: 'https://httpbin.org/post'
})
console.log(ipPost)
}
pegarIp()
Ele já vai mostrar o data como o IP que eu recebi.

O interessante é que poderiamos criar um Request-Promise se a gente quisesse, não é tão complicado, podemos importar ele direto e, utilizando com Async/await, podemos fazer várias operações de rede. Um detalhe importante, como sempre falo, o Async await não vai transformar esse código em síncrono, ele continua sendo assíncrono e tendo as mesmas vantagens.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Request-promise&url=https%3A%2F%2Fdevpleno.com%2Frequest-promise) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frequest-promise)

---

# Dica: Router Props - DevPleno

URL: https://devpleno.com/router-props

> Como passar props para rotas (em reactrouter) em uma app react? Dica interessante para injetarmos dependências nos componentes que são dinamicamente render...

Javascript

## Dica: Router Props

T
Por Tulio Faria • 24 de abril de 2017

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Como passar props para rotas (em react-router) em uma app react?

Dica interessante para injetarmos dependências nos componentes que são dinamicamente renderizados pelo router.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dica%3A%20Router%20Props&url=https%3A%2F%2Fdevpleno.com%2Frouter-props) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frouter-props)

---

# React-router-dom: como injetar props em rotas em ReactJS - DevPleno

URL: https://devpleno.com/router-props-2

> Confesso que tive muito trabalho até conseguir encontrar uma maneira não tão difícil de fazer a passagem de propriedades para o componente. Neste post, voc...

Javascript

## React-router-dom: como injetar props em rotas em ReactJS

T
Por Tulio Faria • 17 de maio de 2017

*

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Confesso que tive muito trabalho até conseguir encontrar uma maneira não tão difícil de fazer a passagem de propriedades para o componente. Neste post, você vai conferir uma dica sobre React Router.

**
Temos também um outro material somente sobre [React-router que você pode ver aqui](https://devpleno.com/router-props).

Vamos fazer a partir de um exemplo básico no qual ele só tem um componente criado com Create-react-app.

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Home from './Home'

class App extends Component {
render() {
return (
&#x3C;div className='App'>
&#x3C;div className='App-header'>
&#x3C;img src={logo} className='App-logo' alt='logo' />
&#x3C;h2>Welcome to React&#x3C;/h2>
&#x3C;/div>
&#x3C;div className='App-intro'>
&#x3C;home name='Tulio' />
&#x3C;/div>
&#x3C;/div>
)
}
}
Primeiramente vamos colocar a navegação com o React Router em

&#x3C;home name='Tulio' />
Isso significa que agora temos uma rota exata que vai apontar para o caminho padrão e qual componente ele vai usar. Vamos colocar Home, mas também criaremos um componente em seguida.

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Home from './Home'
import Teste from './Teste'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

class App extends Component {
render() {
return (
&#x3C;Router>
&#x3C;div className='App'>
&#x3C;div className='App-header'>
&#x3C;img src={logo} className='App-logo' alt='logo' />
&#x3C;h2>Welcome to React&#x3C;/h2>
&#x3C;/div>
&#x3C;div className='App-intro'>
&#x3C;Route exact path='/' component={Home} />
&#x3C;Route exact path='/teste' component={Teste} />
&#x3C;/div>
&#x3C;/div>
&#x3C;/Router>
)
}
}
Feito isso, vamos criar o teste.js

import React from 'react'

const Teste = () => &#x3C;p>Teste&#x3C;/p>

export default Teste
Agora vamos até o cabeçalho da aplicação e criar um link para a home e um link para teste, assim, já temos uma navegação funcionando normalmente.

&#x3C;div className='App'>
&#x3C;div className='App-header'>
&#x3C;img src={logo} className='App-logo' alt='logo' />
&#x3C;h2>Welcome to React&#x3C;/h2>
&#x3C;p>
&#x3C;Link to='/'>Home&#x3C;/Link>
&#x3C;Link to='/teste'>Teste&#x3C;/Link>
&#x3C;/p>
&#x3C;/div>
&#x3C;/div>
Qual o problema?**

Eu preciso passar parâmetros ou props para o componente Home, mas ele não irá funcionar se fizermos assim:

&#x3C;Route exact path='/' component={Home} name='Tulio' />
**Como podemos passar essa props para o componente home?**

Ao invés de chamar component, vamos chamar render. Ele é legal porque podemos passar uma arrow function com props e dizemos que essa arrow function vai retornar este componente /Home.

&#x3C;div className='App-intro'>
&#x3C;Route exact path='/' render={(props) => &#x3C;Home />} name='Tulio' />
&#x3C;Route exact path='/teste' component={Teste} />
&#x3C;/div>
Esses props são as propriedades que o próprio route passa para o componente, então temos que injetar essas props (vai que por algum motivo ele precisa saber em qual URL ele está, ou algo nesse sentido).*

Com isso, conseguimos efetivamente passar os props que queremos.

&#x3C;Route
exact
path='/'
render={(props) => &#x3C;Home {...props} name='Tulio' />}
name='Tulio'
/>
Além das propriedades que já tínhamos no componente por causa da route, caso olharmos em teste, percebemos que só temos as propriedades que foram passadas pelo route e não pela importação do componente.

Isso é muito importante para conseguirmos injetar dependência, eu descobri essa forma de utilizar a passada de props através de uma rota por que precisava injetar uma dependência.

Confira o passo a passo em vídeo:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=React-router-dom%3A%20como%20injetar%20props%20em%20rotas%20em%20ReactJS&url=https%3A%2F%2Fdevpleno.com%2Frouter-props-2) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Frouter-props-2)

---

# Por que o Salário em TI é baixo? DevPleno Reponde - DevPleno

URL: https://devpleno.com/salario-em-ti

> Uma pergunta que ouço com frequência, principalmente dos profissionais da área de T.I, é: &#34;Por que o salário em TI é baixo?&#34;. A primeira coisa que eu acho ...

Carreira

## Por que o Salário em TI é baixo? DevPleno Reponde

T
Por Tulio Faria • 8 de junho de 2017

[Carreira](/tag/carreira)

Uma pergunta que ouço com frequência, principalmente dos profissionais da área de T.I, é: “Por que o salário em TI é baixo?”.

A primeira coisa que eu acho importante é definir o que é um salário alto ou um salário baixo. Muitos profissionais recebem um salário que é “normal” na média do mercado. Isso varia muito de uma área para outra.

Um médico, por exemplo, recebe muito bem, já que há uma escassez grande na área. Em TI, também tem escassez, porém as pessoas podem trabalhar sem ter formação, o que diminui a escassez e acaba quebrando um pouco essa dificuldade.

Antes de falar se o valor está baixo ou alto, é bom olhar em volta do mercado: Qual o seu salário hoje? Qual a média das pessoas que trabalham na minha cidade?

Talvez você esteja em uma cidade na qual a média salarial não é muito grande porque a cidade é pequena, por exemplo. Então é bom avaliar isso na sua cidade ou região.

O segundo ponto (o que acho mais importante): Avalie o seu trabalho atual, você mesmo e a sua carreira para saber se está valendo tudo isso. O salário que você ganha hoje deve contribuir para a empresa com o mesmo valor.

Vamos supor que o salário que você considera alto é R$10.000,00, então suas ações e o que você faz na empresa precisam gerar de R$10.000,00 a 15.000,00 no mínimo. Se não gerar isso, a empresa não ganha nada. Obviamente se você contribui muito pouco, seu salário vai ser baixo, por isso quanto mais gerencial for o cargo, maior será o salário, já que eles lidam com estratégias de extremo risco.

Esqueça o salário dos outros. Às vezes achamos que valemos mais do que valeria. Claro que muitas empresas pagam menos do que você vale e isso é natural no mercado, mas se você não consegue um outro emprego em um lugar que paga melhor, talvez o problema não seja na área e sim com você.

Isso se aplica em todas as áreas. Existe personal trainer que ganha menos de um salário mínimo, mas também existe personal que ganha R$100mil por mês. O mesmo acontece com TI.

Então avalie esse tipo de coisa. Você está gerando faturamento ou é só um custo para a empresa? Obviamente, em algumas empresas, você não está diretamente relacionado com a área ou gerando faturamento, mas é bom avaliar nesse sentido que citei acima. Assim, você conseguirá saber se seu salário está baixo ou alto, essa é uma boa métrica.

Outra métrica é saber se você está qualificado. Se você está lendo isso, é porque quer se qualificar, já que está procurando conhecimento, quer melhorar sua carreira e isso me deixa mais tranquilo. Por mais que você sofra essa dor de achar que o salário é baixo, está buscando melhorar sua carreira e isso já é uma boa coisa. Para você ganhar mais, tem que se dedicar à sua carreira. “Seja quente ou seja frio.” Quem é morno não tem previsão de evoluir. Se quiser destacar na área, faça com garra, com amor, vontade, faça dar resultados, um código limpo com processo cada vez melhor, dê seu sangue, gere ideias, ajude seu chefe, faça tudo. Claro, não precisa deixar de curtir a vida, mas não seja comum.

Existe um treinamento de um grande mentor meu que trabalha mais sobre essa mentalidade.

Se tiver interesse, mande um e-mail para [tuliofaria@devpleno.com](mailto:tuliofaria@devpleno.com). Irei te passar o link.

Confira minha fala em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Por%20que%20o%20Sal%C3%A1rio%20em%20TI%20%C3%A9%20baixo%3F%20DevPleno%20Reponde&url=https%3A%2F%2Fdevpleno.com%2Fsalario-em-ti) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsalario-em-ti)

---

# Porque se sujar faz bem! - DevPleno

URL: https://devpleno.com/se-sujar-faz-bem

> Uma coisa que sempre marcou a minha infância foram as propagandas do sabão em pó OMO que via na TV. O slogan era “Se sujar faz bem” e mostrava as crianças ...

Carreira

## Porque se sujar faz bem!

T
Por Tulio Faria • 9 de agosto de 2017

[Carreira](/tag/carreira)

Uma coisa que sempre marcou a minha infância foram as propagandas do sabão em pó OMO que via na TV. O slogan era “Se sujar faz bem” e mostrava as crianças pulando e brincando na lama sem medo de se sujar.

Se fossemos trazer esse ensinamento para o nosso meio profissional, percebemos que tem muita gente que, por mais que queira fazer algo, tem medo de errar, medo de se sujar. Muitas vezes você tem medo de assumir um compromisso em um projeto com um pouco a mais de conhecimento que você não tem por de falhar e nisso o slogan da OMO tem todo sentido, você errar, dar esse passo a mais faz bem mesmo quando você se suja, o risco é grande mas você aprende muito com isso.

Sempre que você puder fazer algum projeto que tem algo a mais ou precisa tomar alguma atitude que vai um pouco além da sua zona de descanso, se realmente almeja uma carreira melhor, arrisque-se. Muitas vezes você vai errar e esse erro irá fazer você ficar cada vez melhor.

Outra coisa bastante importante é não achar que tem que dar certo de primeira, por exemplo, sua empresa tem que dar certo de primeira, arriscar uma tecnologia nova e tem que dar certo de primeira e por aí vai… Eu sempre gosto de primar é fazer até dar certo, não importa se vai ser de primeira, segunda. Se você acredita naquilo, tem que correr o risco. Não fique com medo de testar uma tecnologia nova ou pegar algum projeto novo porque isso vai te trazer muito aprendizado.

Para eu conseguir negociar um serviço atualmente, eu tive que errar muito lá atrás. Existe uma possibilidade. Se você acompanha nosso trabalho, tem uma chance e uma oportunidade muito legal, quando você consome os conteúdos, é a chance que você tem de aprender com os erros que eu já cometi. Quando eu construo algo com em ReactJS ou Socket.IO, já errei muito nisso, seja aprendendo ou na aplicação em si, e aqui você tem uma oportunidade muito legal de conhecer um pouco mais disso sem precisar se sujar tanto, afinal estamos passando um caminho mais confortável para você trilhar na sua carreira. Então se você está aqui, já tem uma vantagem muito grande competitivamente no mercado de trabalho.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Porque%20se%20sujar%20faz%20bem!&url=https%3A%2F%2Fdevpleno.com%2Fse-sujar-faz-bem) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fse-sujar-faz-bem)

---

# Você é passageiro ou motorista da sua vida? - DevPleno

URL: https://devpleno.com/seja-o-motorista-da-sua-vida

> Você é passageiro ou motorista da sua vida? Eu vou contar uma história para vocês e acho que faz bastante sentido pelo momento que passei. Eu estava no emb...

Carreira

## Você é passageiro ou motorista da sua vida?

T
Por Tulio Faria • 9 de agosto de 2017

*

[Carreira](/tag/carreira)

Você é passageiro ou motorista da sua vida? Eu vou contar uma história para vocês e acho que faz bastante sentido pelo momento que passei.

Eu estava no embalo de deixar as coisas me levarem. Estava trabalhando, mas com algo que eu não gostava, fazia coisas muito repetidas e projetos que não achava interessantes, já não tinha mais propósito naquilo e, consequentemente, a qualidade começou a cair. A decisão de mudança ocorreu no ano passado, mas Isso vinha me incomodando há pelo menos três anos.

Quando você passa por uma situação como essa e passa a refletir sobre isso, percebe que precisa mudar, cai a ficha de que você não é mais o motorista da sua vida, afinal não está mais conduzindo para onde você quer chegar, logo você é um passageiro.

Uma coisa que venho aplicando desde o ano passado é criar as próprias oportunidades. Por exemplo, se você quer trabalhar fora do Brasil, não adianta continuar mandando CV aqui, não vai surgir uma oportunidade para fora do nada (na verdade, para mim aconteceu porque eu conhecia uma pessoa e fui indicado, mas é raro)*. Tem coisas que são tão simples que basta você começar a refletir sobre o que quer para realmente tomar as rédeas e voltar a ser o motorista da sua vida.

Mude um pouco sua percepção! É o que venho fazendo e faz muito sentido, pelo menos para mim. Depois que eu destravei, percebi que trabalhar para fora era algo que eu queria fazer, então comecei a distribuir currículo e fazer mais contatos nesse sentido e hoje eu atuo lá fora também.

Quando você toma as rédeas da sua vida, começa a dar os passos na direção certa. Eu comecei a fazer isso em tudo, se você quer chegar em algum lugar sem depender de fatores de sorte e etc, comece a ser mais motorista.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Voc%C3%AA%20%C3%A9%20passageiro%20ou%20motorista%20da%20sua%20vida%3F&url=https%3A%2F%2Fdevpleno.com%2Fseja-o-motorista-da-sua-vida) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fseja-o-motorista-da-sua-vida)

---

# Redirecting to: /sobre

URL: https://devpleno.com/ser-devpleno

Redirecting to: /sobre [Redirecting from /ser-devpleno to /sobre](/sobre)

---

# Servidor de arquivos e sistemas locais com HTTPS - DevPleno

URL: https://devpleno.com/servidor-de-arquivos

> Neste vídeo, vou mostrar como servir arquivos estáticos de forma simples e ainda como expor um servidor local de testes para a internet utilizando uma cone...

Javascript

## Servidor de arquivos e sistemas locais com HTTPS

T
Por Tulio Faria • 7 de agosto de 2016

[Javascript](/tag/javascript)

Neste vídeo, vou mostrar como servir arquivos estáticos de forma simples e ainda como expor um servidor local de testes para a internet utilizando uma conexão segura (HTTPS).

Perfeito para testes de webhooks ou de APIs do HTML5 que precisam de HTTPS para funcionar.

Para baixar o ngrok: [https://ngrok.com](https://ngrok.com)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Servidor%20de%20arquivos%20e%20sistemas%20locais%20com%20HTTPS&url=https%3A%2F%2Fdevpleno.com%2Fservidor-de-arquivos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidor-de-arquivos)

---

# NodeJS Primeiros Passos: Servidor HTTP Básico - DevPleno

URL: https://devpleno.com/servidor-http-basico

> Aprenda NodeJS do zero com esta nova série de vídeos do DevPleno. Neste primeiro vídeo iremos introduzir um pouco de como criamos um servidor HTTP básico. ...

Javascript

## NodeJS Primeiros Passos: Servidor HTTP Básico

T
Por Tulio Faria • 25 de julho de 2016

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Aprenda NodeJS do zero com esta nova série de vídeos do DevPleno. Neste primeiro vídeo iremos introduzir um pouco de como criamos um servidor HTTP básico.

O código construído está disponível [Aqui](https://github.com/devpleno/nodejs-servidor-http-basico)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=NodeJS%20Primeiros%20Passos%3A%20Servidor%20HTTP%20B%C3%A1sico&url=https%3A%2F%2Fdevpleno.com%2Fservidor-http-basico) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidor-http-basico)

---

# Servidor HTTP Básico - NodeJS Primeiros Passos - DevPleno

URL: https://devpleno.com/servidor-http-basico-2

> Na série NodeJS Primeiros Passos, você poderá os conceitos básicos de Javascript e NodeJS e, assim, poder colocar a mão na massa. Neste primeiro post, conf...

Javascript

## Servidor HTTP Básico - NodeJS Primeiros Passos

T
Por Tulio Faria • 15 de maio de 2017

*

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Na série NodeJS Primeiros Passos, você poderá os conceitos básicos de Javascript e NodeJS e, assim, poder colocar a mão na massa. Neste primeiro post, confira como criar um Servidor HTTP básico.

Primeira coisa que temos que fazer é acessar o [www.nodejs.org](https://www.nodejs.org) e fazer o download (não vou entrar nessa parte, pois depende da plataforma que você está utilizando, mas de modo geral é bem simples de se fazer)*.

Você precisa conseguir pelo menos escrever no Shell (prompt de comando) o seguinte:

npm - v
Com isso, conseguimos ver a versão do node package mananger.

E se colocarmos:

node - v
Aparecerá a versão do node que estamos usando. Se aparecer normalmente a versão deles, significa que estão no path do seu sistema e você conseguirá executá-los diretamente. Se ele não estiver no path do sistema, recomendo que coloque a pasta de instalação do Node no path.

Como Node é JavaScript, no sublime vou criar um arquivo novo e importar um módulo do node chamado http, ele permite que manipulemos requisições http. Também vamos criar um servidor com uma função request e response, assim, tudo que entrar no meu servidor, vou devolver o texto “devpleno.com”:

var http: require('http');
http.createServer(function(req, res){
res.end('DevPleno.com');
});
Uma coisa interessante de se notar é que esta função é uma função anonima e também é executada de forma assíncrona. Isso quer dizer que o servidor fica ‘ouvindo’ uma porta, mas só irá executar a função quando um evento acontecer, ou seja, quando um cliente fizer uma requisição para o servidor. Qual a vantagem disso? Chamamos isso de não blocking, ou seja, o servidor não fica esperando chegar uma requisição. Quando um evento de requisição chegar, ele irá executar o trecho do código. Depois de criado o servidor, precisamos ouvir a porta *(a porta diferencia que vai receber a solicitação dentro da máquina).*

var http: require('http');
http.createServer(function(req, res){
res.end('DevPleno.com');
}).listen(3000);
Vamos salvá-lo como server.js, abrir o prompt de comando e executar o seguinte comando:

Node server.js
Isso vai ‘Startar’ nosso servidor. Quando abrirmos o browser e escrevermos localhost:3000, recebemos a mensagem DevPleno.com, assim, é possível ver que o servidor está rodando normalmente. O bom disso é que não precisamos importar bibliotecas de terceiros, já que o HTTP é um módulo que faz parte do core do node. O que podemos fazer a mais? Podemos, por exemplo, importar um módulo que lida com FileSystem, criar uma var contents que receberá um readFileSync *(lembrando que não é muito bom usar o Sync, mas estou fazendo apenas com intuíto de demonstração).*

var http: require('http');
var fs = require('fs');
var contents = fs.readFileSync('contents.html')
http.createServer(function(req, res){
res.end(contents);
}).listen(3000);
Em seguida, criar um HTML com o nome contents

&#x3C;html>
&#x3C;body>
&#x3C;h1>DevPleno.com&#x3C;/h1>
&#x3C;/body>
&#x3C;html>
Aperte Ctrl C para parar o servidor. Vamos reiniciar o servidor com node server.js, recarregar o browser e ele irá requisitar o contents.html do jeito que criamos.

Claro que para criarmos uma aplicação mais avançada, iremos utilizar alguns módulos de terceiros para que esse processo todo fique um pouco mais fácil e mais robusto, mas essa é só uma parte introdutória.

Confira o passo a passo no vídeo:

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Servidor%20HTTP%20B%C3%A1sico%20-%20NodeJS%20Primeiros%20Passos&url=https%3A%2F%2Fdevpleno.com%2Fservidor-http-basico-2) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidor-http-basico-2)

---

# Servidor JSON simples em PHP (parte 1) - DevPleno

URL: https://devpleno.com/servidor-json-simples-em-php-parte-1

> Hoje quero mostrar para vocês como criar um servidor JSON utilizando o PHP. Mas por que PHP e não JavaScript? Porque ainda é uma linguagem que tem hospedag...

Javascript

## Servidor JSON simples em PHP (parte 1)

T
Por Tulio Faria • 8 de setembro de 2017

[Javascript](/tag/javascript)

Hoje quero mostrar para vocês como criar um servidor JSON utilizando o PHP. Mas por que PHP e não JavaScript? Porque ainda é uma linguagem que tem hospedagem muito fácil de achar até mesmo gratuitamente. Se você já tiver um WordPress ou um site que suporte PHP já vai conseguir rodar isso, assim é possível rodar, por exemplo, projetos de teste como nosso Minhas Séries, que foi feito em ReactJS. A ideia é bem simples, apenas dois métodos por enquanto. Então vamos criar um arquivo chamado db.JSON e dentro dele vamos colocar assim:

{
“series”: [],
“genres”:[]
}
Esse é nosso banco de dados. Feito isso, vou criar um index.php e adicionar alguns detalhes, primeiro dividir o que vier como get na variável e em seguida carregar o banco:

&#x3C;?php
$path = explode('/', $_GET['path']);
$contents = file_get_contents('bd.json');
$json = json_decode($contents, true);
$method = $_SERVER['REQUEST_METHOD'];
header('Content-type: application/json');
$body = file_get_contents('php://input');
Agora que já lemos tudo, temos que adicionar um if. Caso o method for get, vamos apenas retornar o Json:

if($method === 'GET'){
if($json[$path[0]]){
echo json_encode($json[$path[0]]);
}else{
echo '[]';
}
}
Com isso, caso tivermos uma série dentro do campo séries, ele retornará essa série. Além disso, podemos inserir também:

if($method === 'POST'){
$jsonBody = json_decode($body, true);
$jsonBody[id] = time();
if(!$json[$path[0]]){
$json[$path[0]] = [];
}
$json[$path[0]][] = $jsonBody;
echo json_encode($jsonBody);
file_put_contents('db.json', json_encode($json));
}
Caso não exista aquele caminho, vamos criar com um vazio, inserir um item novo e salvar. Caso olharmos o banco depois disso, temos a adição do novo item, caso usarmos o get novamente ele puxará todas as séries que existe lá mais a que foi adicionada por último. Você pode subir esse arquivo e o DB para o servidor que suporte PHP.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Servidor%20JSON%20simples%20em%20PHP%20(parte%201)&url=https%3A%2F%2Fdevpleno.com%2Fservidor-json-simples-em-php-parte-1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidor-json-simples-em-php-parte-1)

---

# Vídeo sobre Servidores Web - o back-end de uma aplicação web - DevPleno

URL: https://devpleno.com/servidores-web-entendo-back-end

> Neste vídeo, vamos &#34;entrar&#34; um pouco mais a fundo no backend, entendendo servidores web. O que são e como eles recebem as requisições. <div className=&#34;embe...

Javascript

## Vídeo sobre Servidores Web - o back-end de uma aplicação web

T
Por Tulio Faria • 24 de julho de 2016

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Neste vídeo, vamos “entrar” um pouco mais a fundo no back-end, entendendo servidores web. O que são e como eles recebem as requisições.

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=V%C3%ADdeo%20sobre%20Servidores%20Web%20-%20o%20back-end%20de%20uma%20aplica%C3%A7%C3%A3o%20web&url=https%3A%2F%2Fdevpleno.com%2Fservidores-web-entendo-back-end) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidores-web-entendo-back-end)

---

# Servidores Web -  Um pouco mais do back-end de uma Aplicação Web - DevPleno

URL: https://devpleno.com/servidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web

> Servidores Web são um serviço usado no servidor que fornece páginas ou algum asset para o frontend. Dentro de uma máquina, configuramos uma pasta (/site po...

Javascript

## Servidores Web - Um pouco mais do back-end de uma Aplicação Web

T
Por Tulio Faria • 23 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Servidores Web são um serviço usado no servidor que fornece páginas ou algum asset para o front-end. Dentro de uma máquina, configuramos uma pasta (/site por exemplo) e quando a pessoa tenta acessar, por exemplo, na porta 80 dessa máquina, o servidor aponta para ela e essa pasta vai ser ‘servida’ para o front-end.

Este tipo de arquitetura ainda é muito comum. Atualmente temos algumas outras alternativas, mas esse formato ainda é o mais utilizado.

Quando o front-end solicita um .php, por exemplo, o servidor não sabe o que tem que fazer com esse .php, mas na configuração ele sabe que tem um php.exe que sabe o que deve ser feito, então ele envia o script php para o php.exe e este manda a resposta para o APACHE HTTPD. Por fim, o APACHE envia para o cliente. Essa estrutura acontece em grande parte dos sites em que acessamos, como nos que são feitos em Wordpress.

Geralmente, quando é um arquivo como uma IMG ou um CSS, o APACHE já envia diretamente, pois ele já sabe que não precisa pré-processar esses arquivos.

**Quais as opções disponíveis no mercado?**

O APACHE HTTPD - mais conhecido e utilizado para o PHP - o HAProxy, NgineX e o IIS da Microsoft. Podemos escolher qualquer um desses e configurar o site para rodar.

Antigamente comparavam linguagens dizendo coisas como: “O PHP é mais lento que o NodeJS”, mas essa comparação é um pouco injusta, já que o PHP precisa do APACHE, que se não for configurado para ser apto a receber muita requisição, pode atrapalhar os acessos do site. Para compararmos as duas, temos que desconsiderar o APACHE ou colocá-lo na frente do Node também.

Hoje temos algumas linguagens que não precisam de servidor WEB como é o caso do NodeJS, pois ele já é um servidor embutido, já consegue abrir uma porta e responder solicitações por si só, e por esse motivo ele acaba sendo um pouco mais rápido e visível.

Sempre que for utilizar PHP ou ASP precisa utilizar servidores web, mas em alguns casos, que chamamos servidor de aplicação, ainda existem umas coisas a mais, muito comum no mundo JAVA, mas isso fica para uma próxima vez.

Deixe suas dúvidas e sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Servidores%20Web%20-%20%20Um%20pouco%20mais%20do%20back-end%20de%20uma%20Aplica%C3%A7%C3%A3o%20Web&url=https%3A%2F%2Fdevpleno.com%2Fservidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web)

---

# Como servir arquivos e expor servidor local com HTTPS - DevPleno

URL: https://devpleno.com/servir-arquivos-e-expor-servidor

> Nesta dica, vou mostrar como servir arquivos estáticos de forma simples, além disso, como expor um servidor local de testes para a internet e ainda utiliza...

Javascript

## Como servir arquivos e expor servidor local com HTTPS

T
Por Tulio Faria • 26 de junho de 2017

[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)

Nesta dica, vou mostrar como servir arquivos estáticos de forma simples, além disso, como expor um servidor local de testes para a internet e ainda utilizando uma conexão segura (HTTPS).

Pressupondo que a gente já tenha o NodeJS e o NPM instalado vamos fazer o seguinte no cmd:

npm install -g http-server
Ele vai instalar o HTTP server, que é mais ou menos parecido com o APACHE, porém mais simples porque podemos servir qualquer pasta, geralmente de forma temporária e não startado como serviço.

Então vamos lá. Já estou na minha pasta, na qual tenho o HTML, e vou colocar:

http - server
Ele me mostra alguns endereços, disponibilizando para um servidor e ouve as placas de rede.

Vamos pegar o primeiro, abrir uma aba nova no browser e mandar rodar. A partir daí, estamos acessando via um servidor. Algumas API’s do JavaScript e HTML eu já conseguiria acessar por estar no servidor, mas algumas delas eu preciso estar em uma conexão segura para esse endereço, e como faço isso?

Uma das maneiras que eu acho interessante é usando uma ferramenta chamada [ngrok](https://ngrok.com/download). É um arquivo zip com um .exe dentro. Podemos colocar ele dentro de uma pasta e colocar a pasta no path. No meu caso, sempre coloco ele na área de trabalho, abro outro CMD e faço:

ngrok http 8080
8080 representa a porta que estamos utilizando. Com isso, ele libera dois endereços, um https e um http, abrindo um túnel pela internet.

Se copiarmos o endereço https e colar no browser, a conexão para o mesmo arquivo vai ser com https, assim podemos testar muito mais coisas da API do HTML5.

Uma vantagem do ngrok é que como ele é um túnel, o endereço vai estar disponível na internet, logo você pode enviar esse endereço para seu cliente por exemplo, que vai acessar normalmente.

Outra vantagem é quando você for testar Webhook. Vamos supor que você vá integrar com um gateway de pagamento, eles geralmente oferecem o Webhook, caso aconteça alguma coisa no pagamento, ele faz uma requisição em seu servidor falando que algo aconteceu. Uma das coisas que a nossa empresa faz bastante é definir a URL do ngrok com uma URL do Webhook, então mandamos para o pagseguro e quando houver uma alteração no status do pagamento, mandamos uma requisição e meu sistema, rodando na minha máquina, consegue receber sem eu precisar fazer configuração nenhuma de roteador porque o ngrok está fazendo o túnel dessa aplicação.

Uma coisa interessante: quando abrimos a interface no prompt, perceba que existe um web interface. Se abrirmos esse endereço, temos acesso a esse painel:

Nele são mostradas todas as requisições que foram feitas naquele endereço, o código em summary,os headers que foram enviados e por aí vai.

Quando formos refazer este teste com o Webhook, é possível reproduzi-lo apenas apertando em Replay. Já que o Webhook acontece uma vez só, por exemplo em uma transação de teste que eu fiz, chegou no ngrok e foi passado para a aplicação, vamos supor que você cometeu um erro na aplicação e ela não processou, podemos vir aqui e mandar dar um replay, assim ele vai fazer a requisição para o servidor de testes e você vai conseguir recriar o teste.

Confira a dica em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Como%20servir%20arquivos%20e%20expor%20servidor%20local%20com%20HTTPS&url=https%3A%2F%2Fdevpleno.com%2Fservir-arquivos-e-expor-servidor) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fservir-arquivos-e-expor-servidor)

---

# ShellJS - Crie ferramentas multiplataformas baseadas no Shell do Linux - DevPleno

URL: https://devpleno.com/shelljs

> Neste handson, vou falar mais especificamente sobre o ShellJS, uma implementação do Shell do linux em JavaScript. Qual a vantagem do ShellJS? A grande vant...

Javascript

## ShellJS - Crie ferramentas multiplataformas baseadas no Shell do Linux

T
Por Tulio Faria • 6 de agosto de 2017

[Javascript](/tag/javascript)

Neste hands-on, vou falar mais especificamente sobre o ShellJS, uma implementação do Shell do linux em JavaScript.

Qual a vantagem do ShellJS?

A grande vantagem é que ele é multiplataforma, então podemos criar nossos códigos independente da plataforma. Caso a gente queira, por exemplo, criar um catch no arquivo para ver o conteúdo dele, podemos fazer isso tanto no Mac, quanto no Windows ou no Linux da mesma forma. Isso é muito legal para construir um sincronizador de log, por exemplo, ou alguma ferramenta que é só para uso interno.

Para utilizar o ShellJS precisamos primeiro instalar a ferramenta:

yarn add shelljs
Vou criar um arquivo novo teste1.js, e importar o o shell e usar o cat para ver o arquivo, por exemplo:

const sh = require('shelljs')
const contents = sh.cat('arq1.txt')
console.log(contents.toString())
Lembrando que estamos fazendo isso em multiplataforma, então se eu rodar o cat direto, pode ser que eu não consiga o mesmo resultado. Isso vale para todos os outros comandos, por exemplo copiar um arquivo:

const sh = require('shelljs')
sh.cp('arq1.txt', 'arq2.txt')
É muito legal quando conseguimos fazer esse tipo de código que funciona em todas as plataformas, isso gera mais liberdade para construir nossos scripts que dependem de algum IO ou Shell virtual. Vamos supor que eu quisesse copiar um diretório de forma recursiva:

sh.cp('-R', 'node_modules', 'mods')
Ele replicou exatamente como nós queremos fazer no Shell do Linux. Uma curiosidade é que ele transforma esse código em síncrono, ele usa por baixo dos panos assíncrono, mas a interface que o Shell lida pra gente é síncrona, o que deixa muito mais fácil de fazer e construir os scripts.

Nós utilizamos bastante em alguns projetos para, por exemplo, transformar dados, conectar no banco, atualizar o banco, manipular grandes quantidades de dados, etc.

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ShellJS%20-%20Crie%20ferramentas%20multiplataformas%20baseadas%20no%20Shell%20do%20Linux&url=https%3A%2F%2Fdevpleno.com%2Fshelljs) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fshelljs)

---

# Short-circuit e valores padrão - DevPleno

URL: https://devpleno.com/short-circuit-e-valores-padrao

> Essa dica pode ser utilizada tanto em JavaScript quanto em outras linguagens de programação, apenas com um pouco de adaptação. Vamos falar primeiramente so...

Javascript

## Short-circuit e valores padrão

T
Por Tulio Faria • 7 de agosto de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Essa dica pode ser utilizada tanto em JavaScript quanto em outras linguagens de programação, apenas com um pouco de adaptação. Vamos falar primeiramente sobre o short-circuit.

Imagine que temos uma constante que se chama debug, que eu posso ligar e desligar esse debug. Quando o debug estiver ligado, eu quero que ele tenha mais saídas no console.log, por exemplo, caso ele não esteja ativado, não vai escrever nada:

const DEBUG = true
console.log(1)
Geralmente as pessoas fariam algo assim:
if(DEBUG)
console.log(1)
O detalhe é que existe outra forma de fazer isso, chamada de short-circuit, onde deixamos o DEBUG na frente e colocamos &#x26;&#x26; (‘e’ comercial). Vai acontecer a mesma coisa:

DEBUG &#x26;&#x26; console.log(1)
Se colocarmos o false em DEBUG, o console.log não irá rodar. Isso acontece porque quando fazemos os ‘E’s comerciais, temos uma precedência, ou seja, ele depende que tudo seja verdade para que retorne verdadeiro, se DEBUG é false, ele nem valida o restante do código, por esse motivo chamamos de short-circuit (curto-circuito), afinal nós cortamos esse circuito e isso evita de executarmos o restante das operações. Eu posso definir todas as minhas linhas de DEBUG dessa forma por exemplo.

Essa variável pode vir de uma variável de ambiente, podemos rodar nosso script em modo DEBUG e setar algumas coisas a mais, como definir um banco diferente ou coisas no sentido que funcionaria normalmente.

A segunda dica que quero mostrar é o uso do operador || (‘ou’), que usamos para valores padrão. Vamos supor que ‘a’ eu não defina nada dentro dele e em ‘b’ eu quero colocar o valor de ‘a’ ou um valor padrão caso o ‘a’ seja vazio.

let a = null
let b = a || 'padrão'
Se o ‘a’ for iniciado com algo, como por exemplo a= ‘valor de a’, a atribuição de ‘b’ será o valor de ‘a’, com isso conseguimos fazer uma leitura de dados de formulário e utilizar esse valor padrão utilizando o ||.

Temos dois usos alternativos dos operadores &#x26;&#x26; e ||, posso usar o ‘ou’ para o valor padrão e o &#x26;&#x26; para um short-circuit e evitar que a linha continue sendo executada.

Confira o video:

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Short-circuit%20e%20valores%20padr%C3%A3o&url=https%3A%2F%2Fdevpleno.com%2Fshort-circuit-e-valores-padrao) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fshort-circuit-e-valores-padrao)

---

# Sleep em Generator - DevPleno

URL: https://devpleno.com/sleep-em-generator

> Hoje quero mostrar como podemos recriar o famoso sleep, que temos em algumas linguagens que não são assíncronas como JAVA e PHP, quando queremos usar dentr...

Javascript

## Sleep em Generator

T
Por Tulio Faria • 28 de junho de 2017

[Javascript](/tag/javascript)

Hoje quero mostrar como podemos recriar o famoso sleep, que temos em algumas linguagens que não são assíncronas como JAVA e PHP, quando queremos usar dentro de um Generator function. Eu cheguei nessa função porque queria fazer testes de algumas operações e naquele dado momento que queria rodar a Generator, queria pausar um pouco entre elas para ver um detalhe acontecer a fim de depurar o código. Então acabei refletindo como poderia criar esse sleep para conseguir fazer esse teste.

Para fazer o teste vamos utilizar o CO, que é uma forma de rodarmos uma Generator Function. Lembrando que uma Generator Function é uma função que pode ser pausada e retornada posteriormente, com isso podemos escrever uma função síncrona, porém continua tendo os benefícios da função assíncrona.

Vamos lá, a primeira coisa que vou fazer é importar o CO.

const co = require('co')
Se fossemos escrever realmente uma Generator Function iriamos fazer o seguinte:

co(function* () {
console.log('Step 1')
sleep(1000)
console.log('Step 2')
})
Em JavaScript não temos sleep, obviamente, porque não faz muito sentido porque temos o setTimeout.

Como transformamos o setTimeout em um sleep?

Primeiro vamos criar uma função chamada sleep e para transformar esse setTimeOut em um sleep. Eu teria que transformá-la em uma [promise](https://www.devpleno.com/promises/) e para essa promise passar uma função que vai receber 2 parâmetros, o resolve e o reject, ou seja, dois callBacks:

function sleep(time){
return new Promise((resolve, reject) =>
setTimeout(resolve, time)
})
Com isso, quando chamar o sleep eu consigo utilizar o then para saber que ele rodou depois de um segundo:

sleep(1000).then(() => console.log('Depois de um segundo'))
Mas queremos utilizar dentro do CO porque quero essa ‘cara’ de assíncrona, então ao invés de utilizar apenas o sleep, vou utilizar o yield sleep, pausando entre os steps.

co(function* () {
console.log('Step 1')
yield sleep(1000)
console.log('Step 2')
})
Com isso temo um sleep mais próximo que tínhamos por exemplo em C, Pascal ou até o PHP.

Confira os passos em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sleep%20em%20Generator&url=https%3A%2F%2Fdevpleno.com%2Fsleep-em-generator) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsleep-em-generator)

---

# Redirecting to: /sobre-o-devpleno

URL: https://devpleno.com/sobre-a-devpleno

Redirecting to: /sobre-o-devpleno [Redirecting from /sobre-a-devpleno to /sobre-o-devpleno](/sobre-o-devpleno)

---

# Sobre abrir exceções e como lidar quando elas dão errado - DevPleno

URL: https://devpleno.com/sobre-abrir-excecoes

> Por que devemos ser mais rígidos com as decisões e com os objetivos que a gente define tanto para nossa carreira quanto para nossa vida? Nessa semana, volt...

Carreira

## Sobre abrir exceções e como lidar quando elas dão errado

T
Por Tulio Faria • 27 de outubro de 2017

[Carreira](/tag/carreira)

Por que devemos ser mais rígidos com as decisões e com os objetivos que a gente define tanto para nossa carreira quanto para nossa vida?

Nessa semana, voltei a focar ainda mais no meu objetivo, pois eu tinha aberto uma exceção para uma situação. Qual o problema nisso?

Toda vez que você abre uma exceção e ela gera um problema para você, vem na sua cabeça uma sensação muito ruim, afinal não era para você ter feito aquilo.

A lição que eu tiro disso é que lá atrás eu deveria ser mais rígido. Aprendi duas coisas com isso,eu não deveria ter fugido do meu objetivo e a não ficar remoendo uma decisão mal tomada e sim quando voltar a ter foco.

Muitas vezes, tomamos decisões que não podemos acertar, mas pode ser que no futuro tudo converta novamente no foco. É isso que eu estou fazendo atualmente, cada vez mais estou focando no DevPleno e escolhendo a dedo os clientes que vou atender.

Então, não tome decisões visando apenas ajudar se tiver que fugir do seu objetivo.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sobre%20abrir%20exce%C3%A7%C3%B5es%20e%20como%20lidar%20quando%20elas%20d%C3%A3o%20errado&url=https%3A%2F%2Fdevpleno.com%2Fsobre-abrir-excecoes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsobre-abrir-excecoes)

---

# Sobre o DevPleno - DevPleno

URL: https://devpleno.com/sobre-o-devpleno

> Olá, tudo bem? Meu nome é Tulio Faria e sou o criador do DevPleno, e com certeza você já se perguntou:  Como posso ser um desenvolvedor melhor?  Como apren...

Carreira

## Sobre o DevPleno

T
Por Tulio Faria • 15 de março de 2017

[Carreira](/tag/carreira)

Olá, tudo bem? Meu nome é Tulio Faria e sou o criador do DevPleno, e com certeza você já se perguntou:

- Como posso ser um desenvolvedor melhor?

- Como aprender as tecnologias que fazem a diferença para sua carreira?

- Como posso cada vez ser mais valorizado em minha profissão?

- Como viver de desenvolvimento de software mesmo morando no interior?

- Como entregar resultados através de meus projetos?

Se você já se fez pelo menos uma destas perguntas, você está no lugar certo!

## Agora, leia a seguir como o DevPleno irá lhe ajudar a melhorar sua vida e sua carreira

Como você bem sabe, uma das carreiras mais cobiçadas atualmente envolvem trabalhar com tecnologia. Toda empresa já é dependente de software em algum ponto de suas atividades. Tornando o desenvolvedor uma peça chave em todo modelo de negócios.

### Mas sabe o que eu vejo como o mais problemático para a profissão?

O ensino convencional ainda não consegue preparar um desenvolvedor 100% para o mercado de trabalho. Seja para trabalhar em outras empresas, seja para abrir o seu próprio negócio. Ainda falta alguns pontos muito importantes para a formação ser plena:

- Conhecimento e prática em tecnologias de mercado

- Uso de processos que ajudam a entregar mais qualidade e resultados

- Conhecimento de mercado para alavancar a carreira e projetos

- E essa lista só está começando, vou aprofundar mais a respeito durante o restante do texto.

Analisando este cenário, vi que precisava fazer algo. Afinal, eu mesmo já aprendi muito na prática. Já é mais de uma década sofrendo e aprendendo com meus próprios erros e eu seria muito egoísta se guardasse isso apenas para mim. Foi aí que reacendeu um vontade muito forte e que acabou virando meu propósito de vida: Preciso ajudar as pessoas a passarem mais facilmente por tudo que já passei! E serem felizes como hoje me considero ser

Bingo! Nunca estive tão motivado a começar algo como o DevPleno que impacta diretamente a vida de tantas pessoas!

### Tecnologia+Processos+Negócios = DevPleno – um profissional que entrega resultados

## Um pouco da minha história até virar DevPleno

Eu fui criado em uma família humilde. Meus pais não possuem curso superior. Porém, eles fizeram muito por mim e meus irmãos: eles investiram toda a energia e recursos possíveis para que tivéssemos chances de estudar nos melhores colégios (claro que neste ponto também fazíamos nossa parte – por exemplo, do ensino fundamental ao médio – sempre estudei com bolsas de estudo por mérito).

Neste caminho pude assistir e participar da superação deles para financeiramente prover uma educação de qualidade para mim e meus irmãos. Vi a trajetória da minha mãe, saindo de dona de casa a criar uma mercearia/quitanda que mantinha muitas das contas da casa. Além de meu pai, que era funcionário e fora do horário comercial e nos fim de semana estendia a mercearia para virar também um bar. Isso foi muito importante para a minha formação como pessoa: pois eu pude aprender o valor da persistência e do empreendedorismo. Assisti inúmeras vezes meu pai literalmente caindo de sono nas suas empreitadas fora do horário comercial. Porém, totalmente alinhado e comprometido com seu objetivo. As lições de empreendedorismo que aprendi com minha mãe são incontáveis e bastante surpreendentes! Ela sabia exatamente como agregar valor aos seus produtos (na época minha mãe chegou a vender cheiro-verde (cebolinha e salsinha) e couve picadas, pois percebeu que algumas clientes não gostavam de fazer isso. Então ela fazia e cobrava mais caro

Nesta época, ajudávamos como podíamos. Eu fui entregador, atendente e garçom. Além de ajudar a realizar as compras nos centro de abastecimentos. Isso foi muito importante para a minha formação!

Meu pai aposentou-se e com o dinheiro que recebeu, nos presenteou com um computador (na época era muito caro!) E isso mudou tudo! Descobri que amava computadores e que essa era a área que gostaria de seguir. Ao mesmo tempo, comecei a ter aulas de programação na escola e brincava de criar meus próprios jogos com um vizinho e amigo meu. Meu ensino médio foi junto com o curso técnico em processamento de dados. Quando me formei aos 18 anos, tive uma ideia e fiz de tudo para desenvolvê-la. Abri realmente uma empresa (com CNPJ) e fui a briga. Consegui apresentar para grandes empresas, mas logo percebi que eu não entendi tanto da área que eu queria entrar.

Depois deste projeto, tive várias outras ideias e projetos. Executando cada um destes projetos e analisando seus resultados obtidos (aprendendo a cada acerto e a cada erro). Ao mesmo tempo desenvolvi aplicações de todos os portes, dentro e fora do Brasil. Terminei minha graduação em Sistemas de Informação, e cada vez me envolvia em projetos maiores e mais desafiadores (aliás, isso me dá uma energia fora do sério).

Após alguns anos de graduado, já tinha 3 empresas em meu nome, com projetos acontecendo em todas elas. É bastante intenso Durante pouco mais de 2 anos, desacelerei um pouco os negócios e fiz mestrado na USP, também em Sistemas de Informação. E neste período, ficou evidente para mim que eu precisava fazer algo a relacionado a educação tecnológica e que pudesse fomentar termos cada vez desenvolvedores mais bem preparados tecnicamente e com uma bagagem estratégica diferenciado-os dos demais. Foi então que superei minha zona de conforto, e resolvi criar o DevPleno. Aliás, foi aí que percebi o quanto compartilhar o que sei me faz tão bem. Não lembrava que já fiz isso por anos e isso me incendiava

Você pode conhecer um pouco mais sobre o motivo pelo qual lancei este projeto neste vídeo:

## O DevPleno é diferente

O meu grande propósito e objetivo com o DevPleno é trazer conteúdo relevante. E para conseguir mostrar realmente como é o dia-a-dia de um desenvolvedor, eu atuo na minha própria empresa e também como funcionário em outras (inclusive fora do Brasil). Então espere muitos insights direto do campo de batalha, seja empreendendo no meu próprio negócio ou como funcionário .

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sobre%20o%20DevPleno&url=https%3A%2F%2Fdevpleno.com%2Fsobre-o-devpleno) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsobre-o-devpleno)

---

# Comunicação em tempo-real com Node e Socket.io - DevPleno

URL: https://devpleno.com/socket-io-parte1

> O que é Socket.io e para que vamos precisar dele? Socket.io é uma implementação em node para web socket, ou seja, uma forma de fazer comunicação em tempo r...

Javascript

## Comunicação em tempo-real com Node e Socket.io

T
Por Tulio Faria • 11 de maio de 2017

*

[Javascript](/tag/javascript)

**O que é Socket.io e para que vamos precisar dele?**

Socket.io é uma implementação em node para web socket, ou seja, uma forma de fazer comunicação em tempo real, mas mais importante que isso é sua possibilidade de fallBack. O Socket.io foi lançado há mais ou menos cinco anos e mesmo assim ele ainda continua sendo a melhor opção para comunicação em tempo real quando utilizamos o node.

Outra coisa muito importante é o fato de poder integrá-lo a outros Stacks, como em uma aplicação feita em PHP, Java, etc. E o mais interessante é que é possível fazer com autenticação e tudo mais.

O Socket.io também é muito fácil de escalar, como é em tempo real, o chamamos de io intensive, ou seja, acontece muito io quando estamos utilizando o mesmo.

Exemplo:* Por algum motivo seus clientes que estão se conectando ao Socket.io não têm suporte ao web Socket, então ele vai tentar outras maneiras (não tão performáticas como AJAX). Nesta situação, o Node se destaca de outras tecnologias, pois ele suporta mais usuários.

Para começarmos o projeto, devemos instalar os módulos Socket.io e o Express :

yarn add socket.io
yarn add express
Feito isso, vamos criar um arquivo (vou chamá-lo de server.js), que será nosso servidor express. Nele vamos criar a instância do socket.io e passar o http.

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
Vamos fazer um teste para ver se esta tudo funcionando corretamente:

http.listen(3000, function () {
console.log('listening on port 3000')
})
Com o Server respondendo corretamente, precisamos pelo menos ter um arquivo HTML para conectar ao secket.io, então vamos mandar um arquivo index apenas para ter algo para mandar ao navegador.

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
res.sendFile(
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_dirname + '/index.html'
)
})
Mas não temos o index.html, certo? Então vamos criar um novo arquivo index.html, dentro dele você vai perceber algo interessante do socket.io, ele é um módulo que já vem com a parte server e a parte client, com isso é possível fazer um src chamando o socket.io. Irá funcionar porque já injetamos no http para disponibilizar na aplicação. Em seguida vamos instanciar o módulo

&#x3C;html>
&#x3C;body>
&#x3C;h1>Socket.io&#x3C;/h1>
&#x3C;script src='/socket.io/socket.io.js'>&#x3C;/script>
&#x3C;script>const socket = io()&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Se olharmos no inspect do browser e irmos em network, podemos perceber que ele já começou uma conexão e websocket. Assim, podemos saber, por exemplo, se algum cliente conectou apenas adicionando no server.js um callback para quando ele se conectar:

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
res.sendFile(
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_dirname + '/index.html'
)
})
io.on('connection', (socket) => {
console.log('New connection', socket)
})
**O que aconteceu?**

O Socket.io tem o socket que é uma instância da conexão que criamos para o usuário, com isso podemos mandar uma mensagem de volta, logar o usuário por exemplo. Basicamente se eu mandar algo para este socket, esse algo irá somente para este cliente. Mas temos opções no socket.io de mandar só para um cliente ou vários.

Perceba que o módulo já descobriu qual a melhor forma de se conectar, no caso websocket, o interessante é que, se caso a conexão pare ao voltar, ele irá se reconectar sozinho, então não precisamos nos preocupar se o usuário está conectado ou não, pois tratamos na interface a medida que novas conexões vão surgindo. A única preocupação que temos é de checar se o estado da conexão que o usuário deixou continua valendo.

Cada socket que temos é gerado um ID da conexão para cada usuário, vamos escrever o ID para saber qual é:

io.on('connection', (socket) => {
console.log('New connection', socket.id)
})
**Conclusão**

Já deu para termos uma ideia do que é o Socket.io, e este é um assunto que rende muito conteúdo, pois é muito extenso, temos vários desafios para fazê-lo funcionar bem, mas agora já temos uma base de como ele funciona.

Em breve tem a parte 2 deste hands-on.

Enquanto isso confira o também o vídeo dessa primeira parte:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Comunica%C3%A7%C3%A3o%20em%20tempo-real%20com%20Node%20e%20Socket.io&url=https%3A%2F%2Fdevpleno.com%2Fsocket-io-parte1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsocket-io-parte1)

---

# Hands-on - Socket.io Parte 2 - DevPleno

URL: https://devpleno.com/socket-io-parte2

> Continuando nossa série sobre Socket.io, vamos aprofundar um pouco mais no assunto. Lembrando nosso código do lado server: Simplesmente estávamos tratando ...

Javascript

## Hands-on - Socket.io Parte 2

T
Por Tulio Faria • 12 de maio de 2017

*

[Javascript](/tag/javascript)

Continuando nossa série sobre Socket.io, vamos aprofundar um pouco mais no assunto. Lembrando nosso código do lado server:

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
io.on('connection', (socket) => {
console.log('New connection', socket.id)
})
http.listen(3000, function () {
console.log('listening on port 3000')
})
Simplesmente estávamos tratando a conexão, então se o cliente conectou, isso nos era mostrado, além do ID da conexão. (Lembrando que cada Socket criado tem um ID diferente. Mesmo que o cliente abra duas abas com links da mesma sessão, elas são tratadas separadamente).*

Vamos abrir o cliente e adicionar o Jquery _(apenas procure no Google jquery CDN, copiar a url e adicionar em source) e e_m seguida adicionar um socket.on. Com isso, sabemos do lado do cliente que foi conectado.

&#x3C;html>
&#x3C;body>
&#x3C;h1>Socket.io&#x3C;/h1>
&#x3C;script src='/socket.io/socket.io.js'>&#x3C;/script>
&#x3C;script src='https://code.jquery.com/jquery-3.2.1.min.js'> &#x3C;/script>
&#x3C;div id='msgs'>&#x3C;/div>
&#x3C;script>
const socket = io() socket.on('connect', function()
{$('msgs').append('connected with id: ' + socket.id + '&#x3C;br>')}
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
**E como isso será notificado?**

Perceba que criamos uma DIV msgs para podermos colocar as mensagens dentro a medida que recebemos. Quando o cliente conectar nosso div msgs, irá chamar o append e mostrar a conexão com o ID utilizado. Assim, podemos, por exemplo, identificar o usuário baseado nesta conexão.

**O que podemos fazer?**

Quando o cliente se conectar, podemos mandar uma mensagem para o servidor, por exemplo, que o ID especifico está conectado. Adicionando no lado do cliente um socket emit dentro da function e mandamos escrever a msg gerado do lado servidor.

&#x3C;script>
const socket = io()
socket.on('connect', function(){
$("msgs").append('connected with id: '+socket.id+'&#x3C;br>'
socket.emit('msg', 'I am connected '+socket.id);
)}
socket.on('msg', function(msg){
$("#msgs")append(msg+' &#x3C;br>')
}
&#x3C;/script>
E do lado servidor adicionando um gerenciador de evento para que, quando ele receber uma mensagem,possa só escrever por enquanto (apenas modificamos esta linha de código).

io.on('connection', (socket)=>{
console.log('New connection', socket.id)
}
socket.on('msg', (msg)=>{
console.log(msg)
socket.broadcast.emit('msg', socket.id+' connected');
})
Se reiniciarmos o servidor e gerarmos uma nova conexão do lado cliente, irá aparecer a mensagem de “I am connected + ID” do lado servidor, já que o Socket representa o cliente que está conectado. Depois com o broadcast estamos avisando todos que o ID específico foi conectado.

**Não aconteceu nada. Está dando erro?**

No lado cliente, abra uma nova aba, copie o link da sessão e rode, então verá que ele irá se conectar, mostrar um novo id, e na sessão anterior vai ser emitida uma mensagem que aquele ID foi conectado, como queríamos, afinal estávamos enviando para todos quando algum novo ID se conectasse.

**Por que isso aconteceu?**

Isso acontece porque o broadcast não manda a mensagem para o próprio Socket. Isso é feito para não permitir que não receba mensagens duplicadas.

Perceba que com isso já é possível criar um chat. Precisamos apenas adicionar ao lado cliente um input type text e criar um function keyDown, em seguida gerar um if dizendo que se o keyCode for igual ao número que representa o enter (no caso 13), vamos disparar a mensagem com o valor dentro do text.

&#x3C;html>
&#x3C;body>
&#x3C;h1>Socket.io&#x3C;/h1>
&#x3C;script src="/socket.io/socket.io.js">&#x3C;/script>
&#x3C;script src="https://code.jquery.com/jquery-3.2.1.min.js"> &#x3C;/script>
&#x3C;div id="msgs">&#x3C;/div>
&#x3C;input type="text" />
&#x3C;script>
const socket = io()
socket.on('connect', function(){
$("msgs").append('connected with id: '+socket.id+'&#x3C;br>'
socket.emit('msg', 'I am connected '+socket.id);
)}
socket.on('msg', function(msg){
$("#msgs")append(msg+' &#x3C;br>')
}
$(function(){
$("imput").keyDown(function(key){
if(key.keyCode===13){
socket.emit('msg', $(this).val());
}
})
})
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Já do lado servidor, temos que pedir para enviar a mensagem do campo texto ao invés do socket.id, substituindo:

socket.broadcast.emit('msg', socket.id + ' connected')
Por:

socket.broadcast.emit('msg', msg)
Confira todos os detalhes no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%20-%20Socket.io%20Parte%202&url=https%3A%2F%2Fdevpleno.com%2Fsocket-io-parte2) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsocket-io-parte2)

---

# Dicas utilizando o Split em Strings - DevPleno

URL: https://devpleno.com/split-em-strings

> Na dica de hoje quero mostrar alguns 

Javascript

## Dicas utilizando o Split em Strings

T
Por Tulio Faria • 5 de outubro de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Na dica de hoje quero mostrar alguns ‘macetes’ que podemos fazer com o Split, uma função de uma String em JavaScript.

Primeiramente o que é Split? Ele divide uma String em partes, por exemplo:

const str = 'Tulio Faria'
const parts = str.split(' ')
console.log(parts)
Com isso, criamos um vetor com o nome e o sobrenome. O interessante disso é que podemos combinar ele com algumas coisas, por exemplo, com o join:

const parts = str.split(' ').join('====')
Assim o resultado seria Tulio===Faria. Em algumas situações, é possível fazer alguns processamentos mais inteligentes com essa técnica.

Além disso podemos parar de utilizar expressão regular, afinal aqui usamos somente a string pura. Outra coisa interessante é que podemos utilizar até mesmo arrow functions, vamos supor que eu quisesse, por exemplo, fazer o seguinte:

const str = 'Tulio 0 Faria'
const parts = str.split(' ').filter((p) => p != '0')
Assim conseguimos remover o zero do meio da String. São algumas combinações bastante legais, principalmente quando começamos a cascatear ou fazer um link de uma para outra.

Outro ‘macete’ interessante é o seguinte: se eu der um Split em espaço, ele divide letra a letra:

.split(' ')
Assim poderíamos, por exemplo, tirar as vogais:

const vogais = 'aeiou'
.plit(' ')
.split(' ')
.filter((letra) => vogais.indexOf(letra) &#x3C; 0)
Com isso retornamos apenas as consoantes do meu nome.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Dicas%20utilizando%20o%20Split%20em%20Strings&url=https%3A%2F%2Fdevpleno.com%2Fsplit-em-strings) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsplit-em-strings)

---

# Testando o Spread Operator: Novidade do ES6 - DevPleno

URL: https://devpleno.com/spread-operator

> Olá! Neste post, vou mostrar uma novidade do ES6: o Spread Operator. Você deve estar se perguntando agora (ou não): Para que serve o Spread Operator? O Spr...

Javascript

## Testando o Spread Operator: Novidade do ES6

T
Por Tulio Faria • 5 de maio de 2017

*

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Olá!

Neste post, vou mostrar uma novidade do ES6: o Spread Operator.

Você deve estar se perguntando agora (ou não)*:

**Para que serve o Spread Operator?**

O Spread Operator é usado com bastante frequência principalmente quando queremos utilizar a imutabilidade, ou seja, criar um objeto novo a partir de um objeto existente.

**Mãos na massa**

Ele é bastante simples, vou criar um exemplo utilizando Array.

Primeiramente temos que criar o Array:

const arr = [0, 1, 2]
Então, se eu quisesse criar um novo vetor eu faria:

constNewArr = [...arr, 3]
Somente esses 3 pontinhos já é o Spread Operator.

**E o que ele faz?**

Vai ficar bem claro quando fizermos um teste com funções. Se eu pedir para rodar:

console.log(newArr)
Ele nos retornará um vetor novo com o 0,1,2,3.

Eu adicionei o item 3 no final e posso manipulá-lo em qualquer posição, por exemplo

const NewArr = [3, ...arr]
Ele irá aparecer 3,0,1,2. Não ficou claro? Então vamos para outro exemplo e ficará mais fácil de entender. Quando colocamos …arr é basicamente o mesmo que colocarmos o que está dentro do Array, por esse motivo se chama Spread Operator, pois é um operador que espalha os valores.

Se pensarmos assim, podemos fazer o seguinte:

function soma(a, b, c) {
returna + b + c
}
Ao mandar rodar o

console.log(soma(...arr))
Ele irá espalhar estes valores em a, b e c e vamos conseguir somar esses valores.

Podemos utilizar isso de várias maneiras, como por exemplo tirando um valor do arr

const arr = [0, 1, 2]
deixando

const arr = [0, 2]
E passando para o

console.log(soma(1, ...arr))
**Dica**

Uma dica fácil é lembrar que ele espalha os valores colocando virgula entre eles. Isso é bastante útil, principalmente quando a gente quer duplicar um vetor.

Você pode conferir o Hands-on também pelo vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades.

Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Testando%20o%20Spread%20Operator%3A%20Novidade%20do%20ES6&url=https%3A%2F%2Fdevpleno.com%2Fspread-operator) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fspread-operator)

---

# Redirecting to: https://go.devpleno.com/fsm

URL: https://devpleno.com/stack-master

Redirecting to: https://go.devpleno.com/fsm [Redirecting from /stack-master to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)

---

# Standard - Padronize o código fonte JavaScript da sua equipe - DevPleno

URL: https://devpleno.com/standard-parte-1

> O módulo Standard é uma ferramenta bastante útil no nosso dia a dia, ele aplica algumas regras para você manter seu código fonte. Por exemplo, se você vai ...

Javascript

## Standard - Padronize o código fonte JavaScript da sua equipe

T
Por Tulio Faria • 24 de julho de 2017

[Javascript](/tag/javascript)

O módulo Standard é uma ferramenta bastante útil no nosso dia a dia, ele aplica algumas regras para você manter seu código fonte. Por exemplo, se você vai fazer um ‘if’, tem que deixar um espaço porque facilita a leitura:

if (i === 1) {
}
Com o tempo você sente que seu código precisa melhorar, tanto em performance quanto em organização. Quando começamos temos que resolver um código, depois de um tempo isso já não é o suficiente. Precisa ser feito de forma que outras pessoas entendam e que fique bem organizado, que é algo que levo pra minha carreira hoje, procuro resolver o problema da melhor forma possível. Uma das formas que temos para aumentar a qualidade de um código é mantendo um padrão de escrita. Em Java, é muito comum utilizarmos o Java Cult, em JavaScript temos algumas opções como o Standard.

No caso do Standart, ele tem uma ferramente que checa o código. Para usar, primeiramente tem que dar um npm:

npm install -g standard
Quando você roda o módulo, ele procura todos os arquivos JS dentro do seu diretório atual e vê se está faltando alguma coisa, por exemplo no meu ele achou alguns erros:

Então o ‘i’ em nosso ‘if’ não foi definido, com isso conseguimos pegar um bug antes mesmo dele acontecer, então vamos resolver o primeiro bug:

let i = 0
if (i === 1) {
}
Ao rodar, percebam que já diminuiu um bug:

Agora temos um espaço vazio na linha 3

let i = 0
if (i === 1) {
console.log(1)
}
E por fim, adicionar uma nova linha no final do arquivo. Quando fazemos isso não retorna nenhum erro no nosso código. Se eu der um ‘tab’ a mais, por exemplo, no console.log, ele vai retornar que está identado errado.

Uma coisa que dá bastante discussão é onde colocar a abertura da chave. Se você colocar na linha de baixo, ele irá dar um erro:

if (i === 1) {
console.log(1)
}

Porque temos que colocar o nosso curly brace na mesma linha do controlador. Se você criar um projeto e seguir esse padrão, as chances do seu código ter menos erros é maior, além disso, ele fica bem mais legível.

Ele também tem algumas coisas de lint também, o próprio Standard utiliza o ES Lint para resolver isso. A ideia é que você comece a utilizar algum padrão de código em JavaScript, em todas as linguagens tem alguma recomendação para utilizar as melhores práticas.

Confira o hands-on em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Standard%20-%20Padronize%20o%20c%C3%B3digo%20fonte%20JavaScript%20da%20sua%20equipe&url=https%3A%2F%2Fdevpleno.com%2Fstandard-parte-1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstandard-parte-1)

---

# Standard Parte 2 - DevPleno

URL: https://devpleno.com/standard-parte-2

> Para complementar o handson que fizemos sobre Standard, vou passar mais duas dicas sobre a ferramenta. A primeira é uma biblioteca que se chama Snazzy e a ...

Javascript

## Standard Parte 2

T
Por Tulio Faria • 24 de julho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Para complementar o hands-on que fizemos sobre [Standard](https://www.devpleno.com/standard-parte-1/), vou passar mais duas dicas sobre a ferramenta. A primeira é uma biblioteca que se chama Snazzy e a segunda é uma forma de automatizar a formatação do código fonte.

Imagine o seguinte, você tem um código gigante que precisa passar para o Standard, o que podemos fazer? Vamos lá:

standard --fix script.js
Com isso ele já corrigiu o arquivo fonte. Podemos utilizar para formatar automaticamente, eu não uso tanto para formatar dependendo do arquivo porque eu gosto de corrigir para não errar novamente. O segundo módulo se chama Snazzy. Primeiramente vamos instalar:

npm install -g snazzy
Se rodarmos Standard no nosso código, percebemos que é bem difícil de entender ou achar onde está o problema, então se fizermos:

standard | snazzy
Ele vai organizar os erros da seguinte forma:

Ele formata as saídas falando os problemas do código de forma organizada, então temos um erro na linha 1 no caracter 6, na linha 2 também, no caracter 6; e na linha 3, o caracter 1, todos eles explicando os erros.

Eu geralmente uso o Snazzy, dou uma olhada no arquivo, se não for nada muito grave, uso o —fix para corrigir o arquivo. Recomendo que façam isso também, porque talvez alguma alteração pode atrapalhar seu código.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Standard%20Parte%202&url=https%3A%2F%2Fdevpleno.com%2Fstandard-parte-2) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstandard-parte-2)

---

# Criando componente mais simples e eficaz em React - DevPleno

URL: https://devpleno.com/stateless-functional-component

> Vamos começar esse handson Stateless Functional Component com um projeto do zero criado com Createreactapp. Primeiro vamos criar um arquivo novo chamado ho...

Javascript

## Criando componente mais simples e eficaz em React

T
Por Tulio Faria • 18 de maio de 2017

*

[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)

Vamos começar esse hands-on Stateless Functional Component com um projeto do zero criado com Create-react-app. Primeiro vamos criar um arquivo novo chamado home.js (iremos importar o React, pois ainda vamos usar JSX).*

Um Stateless Functional Component, na verdade, é apenas uma arrow function, então iremos fazê-lo desta forma:

import React from 'react'
const Home = () => &#x3C;p>Olá&#x3C;/p>
export default home
Este const home = () =>

Olá

já é o nosso Stateless Functional Component. Ele é uma função, mas perceba que não tem classe, o que o deixa muito mais simples. Essa é a primeira vantagem se comparado com a outra forma de criar componente, afinal é muito simples para saber o que há dentro dele. Outra coisa bacana é que ele é mais rápido, já que não tem todo aquele overload de classe.

**Por que ele é Stateless Functional?**

Ele é uma função pura, ou seja, é mais fácil de ser testado e a qualidade do código é maior. Outro ponto interessante é que não usamos o this, pois se temos uma função pura, não temos um estado interno. Ela também só depende das entradas, que são os props.

**Quando usamos esse component?**

Quando temos um componente de apresentação, como por exemplo um componente que só é responsável por renderizar algo na tela. Isso faz com que ele não tenha um comportamento muito complexo. Podemos passar Props para ele também:

import React from 'react'
const Home = ({ name }) => &#x3C;p>Olá {name}&#x3C;/p>
export default home
E no nosso arquivo App.js, faremos o seguinte:

import React,{ Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home'

class App extends Component {
render() {
return (
&#x3C;div className="App">
&#x3C;div className="App-header">
&#x3C;img src={logo} className="App-logo" alt="logo" />
&#x3C;h2>Welcome to React&#x3C;/h2>
&#x3C;/div>
&#x3C;div className="App-intro">
&#x3C;home name='Tulio' />
&#x3C;/div>
);
}
}
Perceba que passei um props chamado name, e então fiz o destructor assignment, extraindo do objeto apenas o que eu quero. Também poderia colocar Props e props.name, funcionaria normalmente, mas como temos uma forma mais simplificada, não é necessário.

Podemos fazer também alguma checagem. Não tem problema nenhum o componente ter uma condicional, desde que retorne o JSX.

Existe uma premissa no React que quanto mais você utiliza o Stateless Functional Component, mais seu código vai estar otimizado.

Assista o passo a passo desse hands-on:

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Criando%20componente%20mais%20simples%20e%20eficaz%20em%20React&url=https%3A%2F%2Fdevpleno.com%2Fstateless-functional-component) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstateless-functional-component)

---

# Hands-on: Streams Parte 03 - Duplex - DevPleno

URL: https://devpleno.com/stream-duplex

> Já falamos sobre Readable e Writable Streams, agora falaremos sobre o tipo Duplex. Ele nos permite tanto enviar quanto receber dados. Para testarmos este S...

Javascript

## Hands-on: Streams Parte 03 - Duplex

T
Por Tulio Faria • 10 de maio de 2017

[Javascript](/tag/javascript)

Já falamos sobre Readable e Writable Streams, agora falaremos sobre o tipo Duplex. Ele nos permite tanto enviar quanto receber dados. Para testarmos este Stream, vamos utilizar a classe net.Socket, que implementa um Socket, o que permite fazer uma comunicação em rede no Node. Vale lembrar que o Socket é muito comum em outras linguagens como Java.

**O que o Socket faz?**

Basicamente um Socket abre uma porta na rede e fica ‘ouvindo’ essa porta, possibilitando que um cliente a acesse e feche uma conexão. Lembrando que Socket é um tipo Duplex, pois é possível ler e escrever dados deste Stream.

**Vamos ao exemplo:**

Se a última posição do process.argv for igual a server, teremos que rodar duas versões: a server, que irá ouvir e receber este Sockt, e uma versão client, que irá se conectar a este Socket.

const net = require('net');
const readLine = require('readLine')
if(process.argv\[process.argv.length-1\] === 'server'){
//server
const server = net.creatServer((socket) =>{
socket.on('data'), (data) => {
socket.write(data)
console.log('Receive from client ' + data)
})
})
server.listen(1337, '127.0.0.1')

}else{
//client
const rl = readLine.createInterface({
input: process.stdin,
output:process.stdout
})
const client = new.net.Socket()
client.connect(1337, '127.0.0.1', () => {
console.log('Connected');
cliente.write('Hello, server!');
rl.addListener('Line', (line) => client.write(line))
})
client.on('data', (data) => console.log('Received: ' + data))
client.on('close', ()=> console.log('Connection clesed'))
Quando criamos o servidor, iremos criar um callBack que retorna o Socket, ou seja, sempre que houver uma conexão nova ele irá chamar a arrow function que terá as duas funções do socket, socket.on que é equivalente ao readable Stream e o socket.write, que é equivalente ao writable Stream.

**O que acontece neste código?**

**No Server:**

Quando for executado a arrow function, ele irá criar uma instância para comunicarmos com o cliente. Quando este cliente enviar algum dado, será feito um ‘ping-pong’, ou seja, vamos mandar de volta esses dados para o cliente. O servidor fica ouvindo uma porta, no exemplo acima, a porta 1337.

Uma curiosidade é que isto segue a mesma ideia quando criamos uma aplicação com xpress, pois ele ouve uma porta e faz o tratamento, a única diferença é que ‘por baixo dos panos’ para não precisarmos ficar preocupados em criar socket.

**No cliente:**

Nele iremos criar um novo Socket e conectar a porta do servidor (no exemplo 1337). Quando conectamos a esta porta será executado o callBack, que devolverá as respostas de conexão (console.log(‘Connected’);). Toda vez que tivermos uma linha nova no console será escrita no Stream.

Ressaltando que o Client também é um Stream Duplex, afinal, nele executamos um.write, que é writable, e o client.on data que é readable.

Por fim, temos um on data. Isso faz com que toda vez que recebermos dados esteja escrito na tela.

**E como isso vai funcionar?**

Para fazermos este código rodar, temos que executar o node socket.js server para startar o servidor. Em uma outra janela iremos rodar o client com node socket.js.

**Conclusão**

Isso é legal porque podemos gerenciar mais de um socket.js client e funcionaria perfeitamente, uma vez que na aplicação, sempre que receber uma conexão nova, ele irá executar o socket com uma instancia nova.

Este exemplo de socket é muito usado para mostrar multi thread em outras linguagens como java. No caso do Node, ele é mono thread, o que torna sua performance muito melhor. Confira o Hands-on no vídeo:

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Streams%20Parte%2003%20-%20Duplex&url=https%3A%2F%2Fdevpleno.com%2Fstream-duplex) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstream-duplex)

---

# Hands-on: Streams Parte 2 - Writable - DevPleno

URL: https://devpleno.com/stream-parte-2-writable

> Vamos continuar falando sobre o Stream em node, mais especificamente sobre o Writable, lembrando que podemos usar estes conceitos em outras linguagens. Se ...

Javascript

## Hands-on: Streams Parte 2 - Writable

T
Por Tulio Faria • 9 de maio de 2017

[Javascript](/tag/javascript)

Vamos continuar falando sobre o Stream em node, mais especificamente sobre o Writable, lembrando que podemos usar estes conceitos em outras linguagens. Se você ainda não viu a parte 1, clique [AQUI](https://www.devpleno.com/streams-parte-1/).

**O que é Writable Stream?**

São Stream’s onde podemos escrever algo neles, diferente do Readable que apenas lemos os dados. Dizemos que o Writable é um stream de destination. Podemos utiliza-los, por exemplo, em operações em rede, escrever em arquivos, etc. Hoje vamos trabalhar fazendo testes em um arquivo por ser mais simples.

**Qual a vantagem em relação ao modo sem Stream?**

Do mesmo modo que o readable Stream, iremos escrever ‘parcelado’ neste arquivo, sem necessidade de termos ele inteiro em memória.

**Como ulizamos o Writable Stream?**

Primeiro vamos chamar o fs para ter acesso a ele e em seguida chamar o WritableStream, lembrando que no Writable temos algumas opões, como flags, que irá indicar como eu vou escrever este arquivo e o encoding para setar o tipo de codificação (UTF8 é o mais consolidado).

const sf = require('sf')
const writable = sf.createWriteStream('arquivo.txt', {
flags: 'w',
encoding: 'utf8'
})
writable.write('exemplo\\n')
writable.write('acabou')
Temos então o Writable Stream, dizendo onde eu quero gravar meu arquivo e qual flag quero utilizar, neste caso utilizamos o W que é somente para escrever criando um novo arquivo ou sobrescrevendo um já existente por completo.

Ao trocar o W pelo A entramos no modo append, ou seja, ele acrescenta a escrita no final do arquivo, somando o anterior com as novas adições.

**Por que utilizamos o Writable Stream?**

Podemos construir um arquivo nosso com stream parcialmente e, a medida em que temos acesso a novos dados para serem escritos, podemos adiciona-los.

**Concluindo**

Percebam que quando usamos xpress, a requisição tem um Readable Stream e a saída é um Writable Stream, então já podemos imaginar que é possível criar algumas coisas no próprio xpress, isso acontece por que o xpress implementa stream.

Outras comunicações que utilizam streams como socket io também seguem a mesma sintaxe. Confira o hands-on completo no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Streams%20Parte%202%20-%20Writable&url=https%3A%2F%2Fdevpleno.com%2Fstream-parte-2-writable) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstream-parte-2-writable)

---

# Hands-on: Streams - Parte 1 - DevPleno

URL: https://devpleno.com/streams-parte-1

> Olá! Neste post, vamos falar sobre Streams, um conceito utilizando em JavaScript mas que pode ser aplicado em outras linguagens. Nele temos uma grande quan...

Javascript

## Hands-on: Streams - Parte 1

T
Por Tulio Faria • 8 de maio de 2017

*

[Javascript](/tag/javascript)

Olá!

Neste post, vamos falar sobre Streams, um conceito utilizando em JavaScript mas que pode ser aplicado em outras linguagens. Nele temos uma grande quantidade de conteúdo para explorar.

**O que é um Stream?**

É um Fluxo de dados. Quando queremos ler um arquivo muito grande, por exemplo, ele permite que façamos um fluxo de dados na leitura deste arquivo.

**Qual a vantagem de existir este fluxo de dados?**

Primeiramente isso permite lermos arquivos gigantescos e transformar os dados na medida que vamos lendo estes dados.

Outra coisa interessante sobre o Stream é que podemos fazer o Pipe (uma ligação) de um Stream com outro, como por exemplo um Stream de leitura com um Stream de escrita integrando os dois de forma fluída. Isso é muito bom para trabalharmos com movimento de dados, tratando pedaços deste arquivo à medida que eu vou lendo, sem precisar colocar ele todo na memória.

No JavaScript, temos quatro tipos de Stream: Readable (leitura), Writable (escrita), Duplex(ambos os anteriores juntos) e Transform (permite transformação de dados).

**Readable**

Primeiro vamos pegar um arquivo grande, por exemplo arquivo.txt e vamos ler ele com Stream. Vamos chamar o fs para ter acesso a isso.

Uma curiosidade: o Stream no Node é implementável, ou seja, quando algum módulo implementa o Stream, podemos tratá-lo da mesma forma, podendo utilizar os mesmos métodos em outros Streams.*

const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
Nós temos dois tipos de readable Stream: o paused mode, onde ele para e eu solicito os dados, e o flowing mode, em que a medida que ele consegue ler os arquivos já vai devolvendo os dados.

Para fazermos o Flowing mode, vamos criar uma arrow function data passando o data para dentro. Lembrando que o data é um buffer, então precisamos adicionar um toString para sabermos o que tem dentro dele.

const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('data', (data) => {
console.log(data.toString())
})
Quando colocamos o readable.on, ele ‘ouve’ o tipo data e o readable entra em modo flowing, também conhecido como modo push. Este modo é muito utilizado em operações de rede, como por exemplo ler um upload de um arquivo de um usuário (javaScritp client side), com isso vamos tratando estes dados na medida que vai sendo enviado.

Podemos criar, também, uma forma em que o readable nos envie a leitura de tempo em tempo usando readable.pause e readable.resume, da seguinte forma:

const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('data', (data) => {
console.log(data.toString())
readable.pause()
setTimeout(() => readable.resume(), 2000)
})
No exemplo acima, o readable nos retorna partes do arquivo a cada 2 segundos. A segunda forma que podemos fazer é usando o paused mode. Quando o arquivo tiver um evento readable (consegue ler dados do Stream), eu solicito o envio desses dados ao invés dele me enviar de tempo em tempo. Fazemos isso usando o chunk.

const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('readable', () => {
while ((chunk = readable.read())) {
console.log(chunk.toString())
}
})
**Qual a vantagem do modo paused?**

Eu posso ir processando uma pequena quantia de dados de acordo com o que eu quero.

**Conclusão**

Essa foi uma noção inicial dos readable Streams, vamos passar por todos os outros modos, mas dentro do readable temos os 2 modos, o pause e o flowing. Confira o hands-on completo no vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Streams%20-%20Parte%201&url=https%3A%2F%2Fdevpleno.com%2Fstreams-parte-1) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstreams-parte-1)

---

# Hands-on: Streams Parte 4 - Transform - DevPleno

URL: https://devpleno.com/streams-parte-3-transform

> Continuando nossa série sobre Streams, iremos falar sobre como podemos ligar um readable em um writable e viceversa, e como criamos o tipo Transform. Prime...

Javascript

## Hands-on: Streams Parte 4 - Transform

T
Por Tulio Faria • 10 de maio de 2017

[Javascript](/tag/javascript)

Continuando nossa série sobre Streams, iremos falar sobre como podemos ligar um readable em um writable e vice-versa, e como criamos o tipo Transform. Primeiramente, para linkarmos um stream a outro, temos que importar o fs. Em seguida, criamos os Streams que vão ser linkados, por exemplo:

const fs = require('fs')
const readable = fs.createReadStream('arquivo.txt')
const writable = fs.createWritableStream('arquivo-2.txt')
readable.pipe(writable)
Com isso, estamos vinculando o on data do Readable com o Write do Stream Writable. Ao executar o código acima, criaremos uma cópia do arquivo.txt.

**Para que serve o Pipe?**

O Pipe permite criar a saída de um Stream com a entrada de outro, o readable, que somente envia dados com o writable, que apenas recebe dados. Podemos utilizar vários Pipes de uma vez, como por exemplo:

const fs = require('fs')
const zlib = require('zlib')
const readable = fs.createReadStream('arquivo.txt')
const writable = fs.createWritableStream('arquivo-2.txt')
const zipper = zlib.createGzip()
readable.pipe(zipper).pipe(writable)
Com a execução do código, iremos pegar esta saída do readable, jogar na entrada do zipper e a saída do zipper adicionando em writable. Lembrando que zlib já faz parte do core do Node, com isso é possível compactar usando apenas o mesmo.

**O que o Zipper faz?**

O Zipper é um Stream do tipo Transform, basicamente ele transforma a entrada em uma saída utilizando pipe. Podemos transformar estes dados a medida que utilizamos este pipe. É interessante que o readable seja a entrada e o Writable seja a saída. Vamos a outro exemplo para que fique mais claro:

const fs = require('fs')
const zlib = require('zlib')
const readable = fs.createReadStream('arquivo.txt')
const readable = fs.createWriteStream('arquivo-upper.txt')
const Transform = require('Stream').Transform
const upperCase = new Transform({
transform(chunk, encoding, callback) {
const chunkUpper = (chunk + '').toUpperCase()
this.push(chunkUpper)
callback()
}
})
readable.pipe(upperCase).pipe(writable)
No código acima, criamos um Stream transform pegando o Stream do core do Node utilizando a instancia de transform. Em seguida, criamos uma função upperCase e essa mesma função espera que passamos um método transform, enviando um chunk, encoding e um callback. Transformamos este chunck em um tipo string eo retornamos eem push.

Temos um callback ali, pois este método poderia ser assíncrono, fazendo outra operação que dependesse de um IO e, com isso, chamaríamos o callback quando tivéssemos terminado de transformar o chunk de dado.

Em resumo, pegamos o que o readable enviou, criamos uma variável nova e passamos esta informação para maiúsculo.

**Qual a utilidade do Transform?**

É muito comum utilizarmos este stream para zippar arquivos e transformá-los para maiúsculos. Isso é muito poderoso para podermos criar aplicações que não precisam ler realmente estes dados em memória para depois ser processados. Por exemplo, o zipper que criamos irá zippar pedaços do arquivo e isso não consome tanto recurso da maquina.

**Conclusão**

Este tipo de Stream é muito interessante e eu recomendo fortemente que você faça alguns testes. Existem outras maneiras de fazer o transform, como por exemplo em alguns casos em que estendemos a classe, mas acredito que a forma explicada aqui seja mais convencional ou ‘java way’.

Confira também o vídeo do hand-on:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Hands-on%3A%20Streams%20Parte%204%20-%20Transform&url=https%3A%2F%2Fdevpleno.com%2Fstreams-parte-3-transform) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fstreams-parte-3-transform)

---

# Sua carreira pode mudar durante o carnaval? - DevPleno

URL: https://devpleno.com/sua-carreira-pode-mudar-durante-o-carnaval

> Geralmente, acreditase que não… Afinal de contas, carnaval, feriado, festas, bebedeira, ninguém quer se preocupar com carreira ou trabalho. Não é verdade? ...

Carreira

## Sua carreira pode mudar durante o carnaval?

T
Por Tulio Faria • 1 de março de 2019

[Carreira](/tag/carreira)

Geralmente, acredita-se que não… Afinal de contas, carnaval, feriado, festas, bebedeira, ninguém quer se preocupar com carreira ou trabalho. Não é verdade?

Bom, pelo menos muita coisa mudou em minha carreira a partir de uma terça feira de carnaval. Estranho isso, né?

Toda essa mudança na minha carreira começou dia 9 de fev de 2016, às 14h18 - também conhecida como terça-feira de carnaval. :)

Só para entender o cenário, eu já estava com alguns problemas financeiros e durante o carnaval (sem dinheiro) estava explorando formas de mudar minha carreira - pois a situação estava ficando insuportável…

Neste carnaval de 2016, eu estava buscando e explorando possibilidades de negócios e realmente empenhado em dar uma mudança financeira na minha vida. Perto desta época, comecei a considerar trabalhos remotos e já havia enviado meu CV para dezenas de vagas sem ter nenhuma resposta. Mas a minha intenção já estava setada. ;)

Foi quando recebi o e-mail desta foto:

Sim, uma pessoa que eu havia sido apresentado há 2 anos, lembrou-se de que eu poderia ajudá-la em um projeto.

E apesar do e-mail estar em português, ela estava em Nova Iorque e precisava resolver um grande problema no projeto. Toda a negociação aconteceu durante a terça feira de carnaval e quarta-feira de cinzas. Ao final da quarta-feira de cinzas, eu estava contratado - com contrato assinado e tudo mais - e já tinha recebido um e-mail (em inglês) de um outro membro da equipe para falar com o CTO (eu havia sido contratado pela CEO).

Relembrando este acontecimento, eu consegui desconstruir vários pontos interessantes que gostaria de compartilhar com vocês:

**Network não acontece do dia para a noite!**

Eu conheci a pessoa 2 anos antes deste e-mail. Sim, 2 anos! E pasmem, quem me apresentou a ela foi um colega que havia estudado comigo 13 anos antes. Network é um jogo de longo prazo e tem que ser cultivado o tempo todo!

**Quanto você está comprometido com a mudança que quer?**

Eu queria uma mudança na minha carreira. Eu não sabia que ia acontecer no carnaval, mas mesmo assim, eu estava usando esse feriado para, de alguma forma, achar uma solução para a época. E isso me fez estar presente, disponível e apto a responder prontamente a uma oportunidade bastante interessante.

**Quanto você se coloca em risco?**

Uma preocupação da pessoa pelos e-mails sempre foi a comunicação em inglês. E mesmo não estando preparado, eu mantive a clareza de dizer que talvez não conseguiria mas que eu estaria preparado em um prazo determinado. Da última vez que você foi questionado sobre algo que não domina, você respondeu com um prazo para isso acontecer? No meu caso, respondi que em 3-4 meses eu iria conduzir/liderar uma reunião toda em inglês. Na época eu nunca havia feito isso, muito menos tinha conversado com alguém em inglês. Como eu sabia que 3-4 meses era o suficiente? Na verdade, o que eu sabia era que eu FARIA esse período ser o suficiente para alcançar isso. Independente do que acontecesse, eu ia dar o meu jeito. Sem desculpas! Durante o projeto, destravei meu inglês, aprendi a negociar e a resolver muitos problemas em equipes extremamente diversas. Mas o mais importante: descobri que eu era capaz de contribuir em projetos mundiais e o Brasil já não era mais o meu limite. Depois disso veio a Toptal e vários outros projetos de grande impacto no mundo e na minha carreira… Mas é interessante pensar que tudo começou com uma troca de e-mails no carnaval. E a minha reflexão aqui é: será que a mudança que você quer não está onde você menos espera? Será que você não poderia usar seu carnaval para aprender React ou estudar um tema que vai te proporcionar a mudança que você tanto quer para sua vida? Chega de desculpas!

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Sua%20carreira%20pode%20mudar%20durante%20o%20carnaval%3F&url=https%3A%2F%2Fdevpleno.com%2Fsua-carreira-pode-mudar-durante-o-carnaval) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fsua-carreira-pode-mudar-durante-o-carnaval)

---

# Algoritmos - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/algoritmos/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

Algoritmos

## Arquivo de Insights

23 posts encontrados com a tag Algoritmos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Algoritmos 7 de jun. de 2017 Codility: Como Resolver os Desafios e Passar nos Testes de Código](/codility)

[Algoritmos 22 de mai. de 2017 Once N vezes](/once-n-vezes)

[Algoritmos 10 de abr. de 2017 Dica: Como saber a complexidade de um algoritmo](/dica-como-saber-complexidade-de-um-algoritmo)

[Algoritmos 31 de mar. de 2017 Vídeo sobre Algoritmos: XOR Swap](/algoritmos-xor-swap)

[Algoritmos 27 de mar. de 2017 Dica e Algoritmo: XOR e Odd Occurences in Array](/dica-e-algoritmo-xor-e-odd-occurences-array)

[Algoritmos 15 de mar. de 2017 Algoritmos: PermMissingElement](/algoritmos-permmissingelement)

[Algoritmos 14 de mar. de 2017 Algoritmos: Cyclic Rotation](/algoritmos-cyclic-rotation)

[Algoritmos 13 de mar. de 2017 Algoritmos: Odd Occurrences in Array](/algoritmos-odd-occurrences-array)

[Algoritmos 3 de mar. de 2017 Algoritmos: Contar números negativos](/algoritmos-contar-numeros-negativos)

[Algoritmos 24 de fev. de 2017 Algoritmos: Campo Minado (Minesweeper)](/algoritmo-campo-minado-minesweeper)

[Algoritmos 19 de fev. de 2017 Algoritmos: Problema 3n+1](/algoritmo-3n-1)

[Anterior](/tag/algoritmos)2 / 2
Próxima

---

# Algoritmos - DevPleno

URL: https://devpleno.com/tag/algoritmos

> Artigos sobre desenvolvimento, carreira e tecnologia.

Algoritmos

## Arquivo de Insights

23 posts encontrados com a tag Algoritmos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Algoritmos 16 de nov. de 2017 code fights - Metro Card](/code-fights-metro-card)

[Algoritmos 13 de nov. de 2017 Resolvendo Expressão Aritmética do CodeFights](/expressao-aritmetica-codefights)

[Algoritmos 29 de ago. de 2017 Busca Binária](/busca-binaria)

[Algoritmos 4 de ago. de 2017 Algoritmos: XOR Swap](/algoritmos-xoe-swap)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Adicionar com O(1)](/lista-encadeada-adicionar-com-o1)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Como remover um nó](/lista-encadeada-remover-um-no)

[Algoritmos 25 de jul. de 2017 Lista encadeada - Como retornar um item](/lista-encadeada-retornar-um-item)

[Algoritmos 12 de jul. de 2017 Lista encadeada - Adicionar nó](/lista-encadeada-adicionar-no)

[Algoritmos 11 de jul. de 2017 Como saber a complexidade de um algoritmo](/complexidade-de-um-algoritmo)

[Algoritmos 4 de jul. de 2017 Árvore Binária de Busca - Operação de Busca](/operacao-de-busca)

[Algoritmos 3 de jul. de 2017 Árvore Binária em JavaScript](/arvore-binaria)

[Algoritmos 3 de jul. de 2017 Árvore Binária de Busca em JavaScript](/arvore-binaria-de-busca)

Anterior
1 / 2[Próxima](/tag/algoritmos/2)

---

# Carreira - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/carreira/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 15 de fev. de 2018 Qual o nível de inglês para trabalhar por meio da Toptal?](/nivel-de-ingles-para-a-toptal)

[Carreira 15 de fev. de 2018 Precisa ter diploma para trabalhar por meio da Toptal?](/precisa-ter-diploma-para-a-toptal)

[Carreira 9 de fev. de 2018 Trabalhar na Toptal ou por meio da Toptal?](/na-toptal-ou-por-meio-da-toptal)

[Carreira 9 de fev. de 2018 Por que a Toptal é tão valorizada no mercado?](/por-que-a-toptal-e-tao-valorizada)

[Carreira 9 de fev. de 2018 O que é a Toptal? | Série Trabalho Remoto](/toptal-serietrabalhoremoto)

[Carreira 30 de nov. de 2017 Como manter-se motivado](/como-manter-se-motivado)

[Carreira 10 de nov. de 2017 O que fazer para dar certo?](/o-que-fazer-para-dar-certo)

[Carreira 7 de nov. de 2017 Sobreviver em um mundo de abundância](/mundo-de-abundancia)

[Carreira 27 de out. de 2017 Sobre abrir exceções e como lidar quando elas dão errado](/sobre-abrir-excecoes)

[Carreira 25 de out. de 2017 Decisões baseadas apenas na questão financeira](/decisoes-baseadas-apenas-na-questao-financeira)

[Carreira 17 de out. de 2017 Você sofre de Obesidade Mental?](/obesidade-mental)

[Carreira 13 de out. de 2017 2 Tipos de Soluções de Software que você pode entregar](/2-tipos-de-solucoes-de-software-que-voce-pode-entregar)

[Anterior](/tag/carreira)2 / 8[Próxima](/tag/carreira/3)

---

# Carreira - Pagina 3 - DevPleno

URL: https://devpleno.com/tag/carreira/3

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 6 de out. de 2017 Confira 4 dicas de UX para programadores](/confira-4-dicas-de-ux-para-programadores)

[Carreira 26 de set. de 2017 Descrição das vagas de emprego no Brasil x no exterior](/vagas-de-emprego-no-brasil-e-no-exterior)

[Carreira 19 de set. de 2017 Falta tempo para realizar aquele projeto?](/falta-de-tempo)

[Carreira 8 de set. de 2017 Tudo na vida acontece duas vezes!](/tudo-acontece-duas-vezes)

[Carreira 6 de set. de 2017 Validade de um projeto/ideia/ação](/validade)

[Carreira 5 de set. de 2017 Tenha cicatrizes](/tenha-cicatrizes)

[Carreira 30 de ago. de 2017 CLT ou PJ em Software - O que vale mais a pena?](/clt-ou-pj)

[Carreira 29 de ago. de 2017 Técnica para eliminar o que não te faz alcançar seus objetivos](/tecnica-para-alcancar-seus-objetivos)

[Carreira 28 de ago. de 2017 Coisas ruins normais](/coisas-ruins-normais)

[Carreira 28 de ago. de 2017 Falta de apoio](/falta-de-apoio)

[Carreira 18 de ago. de 2017 Impostos e como receber de empresas estrangeiras](/como-receber-de-empresas-estrangeiras)

[Carreira 16 de ago. de 2017 negociação - Como vender um Software](/como-vender-software)

[Anterior](/tag/carreira/2)3 / 8[Próxima](/tag/carreira/4)

---

# Carreira - Pagina 4 - DevPleno

URL: https://devpleno.com/tag/carreira/4

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 16 de ago. de 2017 3 dicas para começar a empreender na área de software](/empreender-na-area-de-software)

[Carreira 12 de ago. de 2017 Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão!](/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao)

[Carreira 9 de ago. de 2017 Porque se sujar faz bem!](/se-sujar-faz-bem)

[Carreira 9 de ago. de 2017 Você é passageiro ou motorista da sua vida?](/seja-o-motorista-da-sua-vida)

[Carreira 8 de ago. de 2017 Decisão técnica não precisa ser eterna](/decisao-tecnica)

[Carreira 8 de ago. de 2017 Tomar decisões](/tomar-decisoes)

[Carreira 3 de ago. de 2017 DevPleno Entrevista - Carlos Drury e Thiago Coelho](/entrevista-carlos-drury-e-thiago-coelho)

[Carreira 3 de ago. de 2017 DevPleno Entrevista - Edy Segura](/entrevista-com-edy-segura)

[Carreira 1 de ago. de 2017 Ensinar algo a alguém todos os dias](/ensinar-algo)

[Carreira 31 de jul. de 2017 Por que fazer um curso de programação voltado para a prática?](/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica)

[Carreira 26 de jul. de 2017 Mantenha sua Integridade - Dica de carreira DevPleno](/integridade)

[Carreira 24 de jul. de 2017 10 dicas de produtividade para programadores](/10-dicas-de-produtividade-para-programadores)

[Anterior](/tag/carreira/3)4 / 8[Próxima](/tag/carreira/5)

---

# Carreira - Pagina 5 - DevPleno

URL: https://devpleno.com/tag/carreira/5

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 24 de jul. de 2017 Metodologia ágil: entenda o que é e como se aplica para programadores!](/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores)

[Carreira 19 de jul. de 2017 Como fazer anotações em eventos](/anotacoes-em-eventos)

[Carreira 19 de jul. de 2017 Comprometimento com as suas metas](/comprometimento-com-suas-metas)

[Carreira 19 de jul. de 2017 Participação em Eventos e Comunidades](/participacao-em-eventos-e-comunidades)

[Carreira 18 de jul. de 2017 Estudar 1 hora por dia ou 8 horas no sábado?](/estudar-1-hora-por-dia-ou-8-horas-no-sabado)

[Carreira 18 de jul. de 2017 Pensamentos limitantes](/pensamentos-limitantes)

[Carreira 14 de jul. de 2017 8 dicas de organização para freelancers se darem bem na carreira](/8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira)

[Carreira 13 de jul. de 2017 Ensino Formal ou Cursos Livres - Por qual optar?](/ensino-formal-ou-cursos-livres)

[Carreira 12 de jul. de 2017 Aprenda a aprender](/aprenda-a-aprender)

[Carreira 11 de jul. de 2017 Porque você não deve abaixar a guarda](/abaixar-a-guarda)

[Carreira 7 de jul. de 2017 Aprenda a dizer NÃO!](/aprenda-a-dizer-nao)

[Carreira 7 de jul. de 2017 Entenda a importância de cursos para desenvolvedores](/entenda-a-importancia-de-cursos-para-desenvolvedores)

[Anterior](/tag/carreira/4)5 / 8[Próxima](/tag/carreira/6)

---

# Carreira - Pagina 6 - DevPleno

URL: https://devpleno.com/tag/carreira/6

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 6 de jul. de 2017 Você precisar ter DOM para ser um bom profissional?](/dom)

[Carreira 6 de jul. de 2017 Preciso de investimento para minha ideia?](/investimento-para-executar-ideias)

[Carreira 5 de jul. de 2017 Como escolher uma linguagem de tecnologia?](/como-escolher-linguagem-de-tecnologia)

[Carreira 5 de jul. de 2017 Melhoria Contínua](/melhoria-continua)

[Carreira 3 de jul. de 2017 Freelancer no exterior: 7 dicas para ter sucesso na carreira](/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira)

[Carreira 28 de jun. de 2017 Precificação de softwares: você sabe como fazer?](/precificacao-de-softwares-voce-sabe-como-fazer)

[Carreira 22 de jun. de 2017 Qual é a sua desculpa?](/qual-a-sua-desculpa)

[Carreira 20 de jun. de 2017 Quantas linguagens devo programar?](/quantas-linguagens-programar)

[Carreira 8 de jun. de 2017 Por que o Salário em TI é baixo? DevPleno Reponde](/salario-em-ti)

[Carreira 7 de jun. de 2017 Desenvolvedor Full Stack: o que é e como se tornar?](/desenvolvedor-full-stack-o-que-e-e-como-se-tornar)

[Carreira 24 de mai. de 2017 Qual é o seu maior desafio nesse momento?](/qual-seu-maior-desafio)

[Carreira 23 de mai. de 2017 Como aumentar a produtividade diminuindo a troca de contexto](/como-aumentar-a-produtividade)

[Anterior](/tag/carreira/5)6 / 8[Próxima](/tag/carreira/7)

---

# Carreira - Pagina 7 - DevPleno

URL: https://devpleno.com/tag/carreira/7

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 23 de mai. de 2017 Como fazer Networking corretamente](/networking)

[Carreira 22 de mai. de 2017 Metas na carreira de desenvolvedor](/metas-na-carreira-de-desenvolvedor)

[Carreira 17 de mai. de 2017 Como organizar os estudos em tecnologia](/como-organizar-os-estudos-em-tecnologia)

[Carreira 15 de mai. de 2017 Como cobrar por Software](/como-cobrar-por-software)

[Carreira 15 de mai. de 2017 Por que todo Dev usa Mac?](/por-que-todo-dev-usa-mac)

[Carreira 8 de mai. de 2017 Novas Skills: O preço que tem que ser pago](/nova-skills-preco-que-tem-que-ser-pago)

[Carreira 8 de mai. de 2017 Racionalização: Tomando decisões racionais](/racionalizacao)

[Carreira 3 de mai. de 2017 Como ser MUITO mais produtivo?](/como-ser-muito-mais-produtivo)

[Carreira 2 de mai. de 2017 Carreira: Preço que tem que ser pago](/carreira-preco-que-tem-que-ser-pago)

[Carreira 24 de abr. de 2017 Dica: Precificação em Software](/precificacao-em-software)

[Carreira 4 de abr. de 2017 Carreira: Tomar decisões](/carreira-tomar-decisoes)

[Carreira 27 de mar. de 2017 Carreira: Você é o passageiro da sua Vida?](/carreira-voce-e-o-passageiro-da-sua-vida)

[Anterior](/tag/carreira/6)7 / 8[Próxima](/tag/carreira/8)

---

# Carreira - Pagina 8 - DevPleno

URL: https://devpleno.com/tag/carreira/8

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 22 de mar. de 2017 Carreira: Preciso de investimento para minha ideia?](/carreira-preciso-de-investimento-para-minha-ideia)

[Carreira 22 de mar. de 2017 Você precisa ter DOM para ser um bom profissional?](/voce-precisa-ter-dom-para-ser-um-bom-profissional)

[Carreira 15 de mar. de 2017 Sobre o DevPleno](/sobre-o-devpleno)

[Carreira 14 de ago. de 2016 Por que tudo na vida acontece 2x?](/por-que-tudo-na-vida-acontece-2x)

[Carreira 2 de ago. de 2016 Como está seu inglês?](/como-esta-seu-ingles-carreira)

[Carreira 1 de ago. de 2016 Morro de vontade...](/morro-de-vontade)

[Carreira 30 de jul. de 2016 Eu já sei! Evite uma mentalidade que não te deixa evoluir](/eu-ja-sei-carreira)

[Carreira 23 de jul. de 2016 Networking da maneira certa](/networking-da-maneira-certa-carreira)

[Carreira 21 de jul. de 2016 Defina metas](/defina-metas)

[Anterior](/tag/carreira/7)8 / 8
Próxima

---

# Carreira - DevPleno

URL: https://devpleno.com/tag/carreira

> Artigos sobre desenvolvimento, carreira e tecnologia.

Carreira

## Arquivo de Insights

93 posts encontrados com a tag Carreira

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Carreira 4 de abr. de 2026 Trabalhar como freelancer: 7 sites para conseguir jobs como programador](/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador)

[Carreira 5 de set. de 2021 Lista de sites para trabalhar remotamente como programador em 2022](/lista-definitiva-de-sites-para-progradores-remotos)

[Carreira 13 de mai. de 2021 A habilidade mais importante que um programador deveria ter (e praticar)](/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar)

[Carreira 19 de mar. de 2019 Como as maratonas de programação da faculdade impactaram a minha carreira](/como-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira)

[Carreira 1 de mar. de 2019 Sua carreira pode mudar durante o carnaval?](/sua-carreira-pode-mudar-durante-o-carnaval)

[Carreira 21 de fev. de 2018 Primeiros passos na Toptal – Série Trabalho Remoto](/primeiros-passos-na-toptal)

[Carreira 21 de fev. de 2018 Processo Seletivo da Toptal – Série Trabalho Remoto](/processo-seletivo-da-toptal)

[Carreira 20 de fev. de 2018 Qual o projeto certo para estudar programação?](/projeto-certo-para-estudar-programacao)

[Carreira 16 de fev. de 2018 Férias e feriados trabalhando por meio da toptal](/ferias-e-feriados-trabalhando-por-meio-da-toptal)

[Carreira 16 de fev. de 2018 Quanto ganha quem trabalha por meio da Toptal?](/quanto-ganha-quem-trabalha-por-meio-da-toptal)

[Carreira 15 de fev. de 2018 Formas de trabalho na Toptal](/formas-de-trabalho-por-meio-da-toptal)

[Carreira 15 de fev. de 2018 Horário de trabalho na toptal](/horario-de-trabalho-na-toptal)

Anterior
1 / 8[Próxima](/tag/carreira/2)

---

# Ferramentas - DevPleno

URL: https://devpleno.com/tag/ferramentas

> Artigos sobre desenvolvimento, carreira e tecnologia.

Ferramentas

## Arquivo de Insights

2 posts encontrados com a tag Ferramentas

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Ferramentas 5 de abr. de 2026 Como Usar o Describe Session do Claude Code para Conectar Projetos](/claude-code-describe-session)

[Ferramentas 5 de abr. de 2026 Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente](/claude-code-otimizacao-arquivos)

---

# Fundamentos - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/fundamentos/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

Fundamentos

## Arquivo de Insights

56 posts encontrados com a tag Fundamentos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 7 de ago. de 2017 Short-circuit e valores padrão](/short-circuit-e-valores-padrao)

[Fundamentos 2 de ago. de 2017 Arrow Functions - Construindo funções anônimas de forma mais simplificada](/arrow-functions)

[Javascript 2 de ago. de 2017 High-order Function Filter](/filter)

[Javascript 2 de ago. de 2017 High-order Function Find](/find)

[Javascript 30 de jul. de 2017 Async - Como Controlar Operações Assíncronas](/async)

[Javascript 28 de jul. de 2017 Float e precisão](/float-e-precisao)

[Javascript 27 de jul. de 2017 Bind - Altere comportamento e contexto de execução de suas funções](/bind)

[Javascript 24 de jul. de 2017 Standard Parte 2](/standard-parte-2)

[Algoritmos 11 de jul. de 2017 Como saber a complexidade de um algoritmo](/complexidade-de-um-algoritmo)

[Javascript 3 de jul. de 2017 Evite o this em JavaScript](/evite-o-this-em-js)

[Javascript 30 de jun. de 2017 High-order Function - Reduce](/reduce)

[Javascript 27 de jun. de 2017 High-order Function MAP](/map)

[Anterior](/tag/fundamentos)2 / 5[Próxima](/tag/fundamentos/3)

---

# Fundamentos - Pagina 3 - DevPleno

URL: https://devpleno.com/tag/fundamentos/3

> Artigos sobre desenvolvimento, carreira e tecnologia.

Fundamentos

## Arquivo de Insights

56 posts encontrados com a tag Fundamentos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 27 de jun. de 2017 NodeJS Primeiros Passos - Promises](/promises)

[Fundamentos 16 de jun. de 2017 HA e AS em Aplicação Web - Web Basic](/ha-e-as)

[Javascript 16 de jun. de 2017 Programação Assíncrona - NodeJS Primeiros Passos](/programacao-assincrona)

[Fundamentos 6 de jun. de 2017 Autenticação e Autorização - Entenda os termos](/autenticacao-e-autorizacao)

[Javascript 1 de jun. de 2017 Vantagens da Injeção de dependência para a testabilidade do código](/vantagens-da-injecao-de-depencia)

[Javascript 30 de mai. de 2017 Dica: ES6 - Destructuring Assignament](/dica-es6-destructuring-assignament)

[Javascript 30 de mai. de 2017 ES6 - Template Strings](/template-strings)

[Javascript 26 de mai. de 2017 Currying - Uma técnica interessante usada em programação funcional](/currying)

[Javascript 25 de mai. de 2017 Escopos e Closures - NodeJS Primeiros Passos](/escopos-e-closures)

[Javascript 23 de mai. de 2017 Servidores Web - Um pouco mais do back-end de uma Aplicação Web](/servidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web)

[Fundamentos 22 de mai. de 2017 Animação basica em CSS3](/animacao-basica-css3)

[Javascript 22 de mai. de 2017 Request e Response](/request-e-response)

[Anterior](/tag/fundamentos/2)3 / 5[Próxima](/tag/fundamentos/4)

---

# Fundamentos - Pagina 4 - DevPleno

URL: https://devpleno.com/tag/fundamentos/4

> Artigos sobre desenvolvimento, carreira e tecnologia.

Fundamentos

## Arquivo de Insights

56 posts encontrados com a tag Fundamentos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Fundamentos 19 de mai. de 2017 Formatos de troca de dados em Aplicações Web](/formatos-de-troca-de-dados)

[Fundamentos 15 de mai. de 2017 Web Basic - RESTful](/o-que-e-restful)

[Fundamentos 12 de mai. de 2017 Aplicação Web - Entendendo Back-end e Front-end](/aplicacao-web)

[Javascript 8 de mai. de 2017 Listar arquivos em JS (async, await, promise e Promise.all)](/listar-arquivos-em-js)

[Javascript 5 de mai. de 2017 ES6 - Async/Await](/async-await)

[Javascript 5 de mai. de 2017 Testando o Spread Operator: Novidade do ES6](/spread-operator)

[Javascript 4 de mai. de 2017 Promisify-Node: Convertendo funções clássicas do Node em Promises](/promisify-node)

[Javascript 7 de abr. de 2017 High-order Functions](/high-order-functions)

[Javascript 4 de abr. de 2017 Dica: Injeção de Dependência no ReactJS](/dica-injecao-de-dependencia-no-reactjs)

[Javascript 23 de mar. de 2017 Dica: Self-Invoked Function (Self-invoking Function)](/dica-self-invoked-function-self-invoking-function)

[Javascript 7 de mar. de 2017 Dica: Injeção de dependência com Destructuring Assignament](/dica-injecao-de-dependencia-com-destructuring-assignament)

[Javascript 3 de mar. de 2017 Pure Functions (Funções Puras)](/pure-functions-funcoes-puras)

[Anterior](/tag/fundamentos/3)4 / 5[Próxima](/tag/fundamentos/5)

---

# Fundamentos - Pagina 5 - DevPleno

URL: https://devpleno.com/tag/fundamentos/5

> Artigos sobre desenvolvimento, carreira e tecnologia.

Fundamentos

## Arquivo de Insights

56 posts encontrados com a tag Fundamentos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 17 de ago. de 2016 NodeJS Primeiros Passos: Async - Map](/nodejs-primeiros-passos-async-map)

[Javascript 12 de ago. de 2016 NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas](/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas)

[Fundamentos 9 de ago. de 2016 HA (High Availability) e AS (Auto Scale)](/ha-high-availability-e-as-auto-scale)

[Javascript 5 de ago. de 2016 NodeJS Primeiros Passos Assíncrono](/assincrono)

[Javascript 27 de jul. de 2016 NodeJS Primeiros Passos: Módulos](/nodejs-primeiros-passos-modulos)

[Javascript 24 de jul. de 2016 Vídeo sobre Servidores Web - o back-end de uma aplicação web](/servidores-web-entendo-back-end)

[Fundamentos 20 de jul. de 2016 Vídeo sobre Formatos de troca de dados em Aplicações Web](/formatos-de-troca-de-dados-em-aplicacoes-web)

[Javascript 12 de jul. de 2016 Vídeo sobre NodeJS com Promises](/nodejs-primeiros-passos-promises)

[Anterior](/tag/fundamentos/4)5 / 5
Próxima

---

# Fundamentos - DevPleno

URL: https://devpleno.com/tag/fundamentos

> Artigos sobre desenvolvimento, carreira e tecnologia.

Fundamentos

## Arquivo de Insights

56 posts encontrados com a tag Fundamentos

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de nov. de 2017 Preconceito com JS? Não preparado para corporativo?](/preconceito-com-js-nao-preparado-para-corporativo)

[Javascript 10 de out. de 2017 Javascript - ES6 Default Parameters](/es6-default-parameters)

[Javascript 10 de out. de 2017 ES7 Array Includes](/es7-array-includes)

[Javascript 5 de out. de 2017 Dicas utilizando o Split em Strings](/split-em-strings)

[Javascript 3 de out. de 2017 Promise Constante - como criar situações assíncronas de teste](/promise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste)

[Javascript 26 de set. de 2017 Promise Race - Qual promise resolve/rejeita primeiro](/promise-race)

[Fundamentos 15 de set. de 2017 Como testar domínios localmente](/como-testar-dominios-localmente)

[Fundamentos 6 de set. de 2017 Entenda sobre CORS - Cross Origin Resource Sharing](/entenda-sobre-cors-cross-origin-resource-sharing)

[Javascript 31 de ago. de 2017 Como encadear promises](/como-encadear-promises)

[Javascript 21 de ago. de 2017 3 Padrões para Iniciar com Expressões Regulares (RegExp)](/expressoes-regulares)

[Javascript 21 de ago. de 2017 Estruturas de Dados - Pilhas](/pilha)

[Javascript 7 de ago. de 2017 Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS](/falsy-e-truthy-values)

Anterior
1 / 5[Próxima](/tag/fundamentos/2)

---

# Javascript - Pagina 10 - DevPleno

URL: https://devpleno.com/tag/javascript/10

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 19 de mai. de 2017 Postman - Como testar APIs - Hands-on](/postman-como-testar-apis)

[Javascript 18 de mai. de 2017 Ctrl+C / Copy to Clipboard em JS](/copy-to-clipboard-em-js)

[Javascript 18 de mai. de 2017 Criando componente mais simples e eficaz em React](/stateless-functional-component)

[Javascript 17 de mai. de 2017 React-router-dom: como injetar props em rotas em ReactJS](/router-props-2)

[Javascript 16 de mai. de 2017 Faker - Como gerar grandes massas de dados fictícios para testes](/dados-ficticios-para-testes)

[Javascript 16 de mai. de 2017 3 dicas para NPM + 1 dica extra](/dicas-paranpm)

[Javascript 15 de mai. de 2017 Fs-extra - Filesystem com Promises e mais funcionalidades](/fs-extra)

[Javascript 15 de mai. de 2017 Hands-on - Socket.io Parte 3](/hands-on-socket-io-parte-3)

[Javascript 15 de mai. de 2017 Servidor HTTP Básico - NodeJS Primeiros Passos](/servidor-http-basico-2)

[Javascript 12 de mai. de 2017 Hands-on - Socket.io Parte 2](/socket-io-parte2)

[Javascript 11 de mai. de 2017 Low-DB - Banco de dados para NodeJS baseado em JSON](/low-db)

[Javascript 11 de mai. de 2017 Comunicação em tempo-real com Node e Socket.io](/socket-io-parte1)

[Anterior](/tag/javascript/9)10 / 16[Próxima](/tag/javascript/11)

---

# Javascript - Pagina 11 - DevPleno

URL: https://devpleno.com/tag/javascript/11

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de mai. de 2017 Hands-on: Streams Parte 03 - Duplex](/stream-duplex)

[Javascript 10 de mai. de 2017 Hands-on: Streams Parte 4 - Transform](/streams-parte-3-transform)

[Javascript 9 de mai. de 2017 PKG - Transforme seu aplicativo Node em executável](/hands-on-pkg)

[Javascript 9 de mai. de 2017 Hands-on: Streams Parte 2 - Writable](/stream-parte-2-writable)

[Javascript 8 de mai. de 2017 Generators: O que há "por baixo dos panos"](/generators-o-que-ha-por-baixo-dos-panos)

[Javascript 8 de mai. de 2017 Hands-on: Ler arquivo linha a linha](/hands-ler-arquivo-linha-linha)

[Javascript 8 de mai. de 2017 Hands-on: Readline](/hands-on-readline)

[Javascript 8 de mai. de 2017 Listar arquivos em JS (async, await, promise e Promise.all)](/listar-arquivos-em-js)

[Javascript 8 de mai. de 2017 Hands-on: Streams - Parte 1](/streams-parte-1)

[Javascript 5 de mai. de 2017 ES6 - Async/Await](/async-await)

[Javascript 5 de mai. de 2017 Ferramentas Visuais para Flexbox](/ferramentas-visuais-para-flexbox)

[Javascript 5 de mai. de 2017 Testando o Spread Operator: Novidade do ES6](/spread-operator)

[Anterior](/tag/javascript/10)11 / 16[Próxima](/tag/javascript/12)

---

# Javascript - Pagina 12 - DevPleno

URL: https://devpleno.com/tag/javascript/12

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 4 de mai. de 2017 Promisify-Node: Convertendo funções clássicas do Node em Promises](/promisify-node)

[Javascript 3 de mai. de 2017 Como converter Markdown para HTML usando Marked](/converter-markdown-para-html)

[Javascript 2 de mai. de 2017 Hands-on: Ferramentas visuais para Flexbox](/ferramentas-par-layouts-com-flexbox)

[Javascript 2 de mai. de 2017 Hands-on: Marked](/hands-on-marked)

[Javascript 28 de abr. de 2017 Javascript: Streams (P-3: Duplex)](/javascript-streams-p-3-duplex)

[Javascript 28 de abr. de 2017 Javascript: Streams (P-4: Transform)](/javascript-streams-p-4-transform)

[Javascript 24 de abr. de 2017 Hands-on: Low-db](/hands-low-db)

[Javascript 24 de abr. de 2017 Hands-on: Faker](/hands-on-faker)

[Javascript 24 de abr. de 2017 Javascript: Streams (P-1: Readable Streams)](/javascript-streams-p-1-readable-streams)

[Javascript 24 de abr. de 2017 Javascript: Streams (P-2: Writable Streams)](/javascript-streams-p-2-writable-streams)

[Javascript 24 de abr. de 2017 Dica: Router Props](/router-props)

[Javascript 17 de abr. de 2017 Dica: Once n vezes](/dica-n-vezes)

[Anterior](/tag/javascript/11)12 / 16[Próxima](/tag/javascript/13)

---

# Javascript - Pagina 13 - DevPleno

URL: https://devpleno.com/tag/javascript/13

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 17 de abr. de 2017 Hands-on: Injeção de Dependência é bom mesmo?](/hands-injecao-de-dependencia-e-bom-mesmo)

[Javascript 17 de abr. de 2017 Hands-on: Currying](/hands-on-currying)

[Javascript 10 de abr. de 2017 Hands-on: Json-Server](/hands-json-server)

[Javascript 7 de abr. de 2017 High-order Functions](/high-order-functions)

[Javascript 4 de abr. de 2017 Dica: Debounce](/dica-debounce)

[Javascript 4 de abr. de 2017 Dica: Injeção de Dependência no ReactJS](/dica-injecao-de-dependencia-no-reactjs)

[Javascript 28 de mar. de 2017 Immutability e ImmutableJS](/immutability-e-immutablejs)

[Javascript 23 de mar. de 2017 Dica: Self-Invoked Function (Self-invoking Function)](/dica-self-invoked-function-self-invoking-function)

[Javascript 22 de mar. de 2017 Dica: Debug de NodeJS no VS Code](/dica-debug-de-nodejs-no-vs-code)

[Javascript 9 de mar. de 2017 Apresentação em HTML](/apresentacao-em-html)

[Javascript 9 de mar. de 2017 Hands-on: Creat-React-App](/hands-creat-react-app)

[Javascript 7 de mar. de 2017 Dica: Injeção de dependência com Destructuring Assignament](/dica-injecao-de-dependencia-com-destructuring-assignament)

[Anterior](/tag/javascript/12)13 / 16[Próxima](/tag/javascript/14)

---

# Javascript - Pagina 14 - DevPleno

URL: https://devpleno.com/tag/javascript/14

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 7 de mar. de 2017 Hands-on: CO](/hands-on-co)

[Javascript 6 de mar. de 2017 Hands-on: Slack](/hands-on-slack)

[Javascript 3 de mar. de 2017 Hands-on: Benchmark](/hands-on-benchmark)

[Javascript 3 de mar. de 2017 Hands-on: ShellJS](/hands-on-shelljs)

[Javascript 3 de mar. de 2017 Hands-on: Standard](/hands-on-standard)

[Javascript 3 de mar. de 2017 Pure Functions (Funções Puras)](/pure-functions-funcoes-puras)

[Javascript 24 de fev. de 2017 Hands-on: Node JS - Request](/hands-on-node-js-request)

[Javascript 24 de fev. de 2017 Hands-on: NodeJS - PM2](/hands-on-nodejs-pm2)

[Javascript 24 de fev. de 2017 Hands-on: Pre-Commit](/hands-on-pre-commit)

[Javascript 1 de fev. de 2017 Verificando o tempo para executar um trecho de código em Javascript](/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript)

[Javascript 25 de jan. de 2017 Render condicional em ReactJS](/render-condicional-em-reactjs)

[Javascript 28 de dez. de 2016 O que é o app.use no NodeJS/ExpressJS?](/o-que-e-o-app-use-no-nodejsexpressjs)

[Anterior](/tag/javascript/13)14 / 16[Próxima](/tag/javascript/15)

---

# Javascript - Pagina 15 - DevPleno

URL: https://devpleno.com/tag/javascript/15

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 27 de dez. de 2016 Loops/Repetições/Iterações no JSX do React](/loopsrepeticoesiteracoes-no-jsx-do-react)

[Javascript 23 de nov. de 2016 ReactJS: comentários em JSX](/reactjs-comentarios-em-jsx)

[Javascript 13 de out. de 2016 cmder: Turbine seu cmd no Windows](/cmder-turbine-seu-cmd-no-windows)

[Javascript 4 de out. de 2016 Como converter uma string em Base64 em JavaScript (Navegador e NodeJS)](/como-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs)

[Javascript 3 de out. de 2016 Mongoose: corrigindo "Cannot overwrite 'Model' model once compiled"](/corrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose)

[Javascript 17 de ago. de 2016 NodeJS Primeiros Passos: Async - Map](/nodejs-primeiros-passos-async-map)

[Javascript 15 de ago. de 2016 NodeJS Primeiros Passos: Async - Waterfall](/nodejs-primeiros-passos-async-waterfall)

[Javascript 12 de ago. de 2016 NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas](/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas)

[Javascript 7 de ago. de 2016 Servidor de arquivos e sistemas locais com HTTPS](/servidor-de-arquivos)

[Javascript 5 de ago. de 2016 NodeJS Primeiros Passos Assíncrono](/assincrono)

[Javascript 27 de jul. de 2016 NodeJS Primeiros Passos: Módulos](/nodejs-primeiros-passos-modulos)

[Javascript 26 de jul. de 2016 NodeJS Primeiros Passos: Closures e Escopos](/closures-e-escopos)

[Anterior](/tag/javascript/14)15 / 16[Próxima](/tag/javascript/16)

---

# Javascript - Pagina 16 - DevPleno

URL: https://devpleno.com/tag/javascript/16

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 25 de jul. de 2016 NodeJS Primeiros Passos: Servidor HTTP Básico](/servidor-http-basico)

[Javascript 24 de jul. de 2016 Vídeo sobre Servidores Web - o back-end de uma aplicação web](/servidores-web-entendo-back-end)

[Javascript 12 de jul. de 2016 Vídeo sobre NodeJS com Promises](/nodejs-primeiros-passos-promises)

[Anterior](/tag/javascript/15)16 / 16
Próxima

---

# Javascript - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/javascript/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de nov. de 2017 Chainability com Javascript](/chainability-com-javascript)

[Javascript 10 de nov. de 2017 Entenda o que é Patternite](/patternite)

[Javascript 10 de nov. de 2017 Preconceito com JS? Não preparado para corporativo?](/preconceito-com-js-nao-preparado-para-corporativo)

[Javascript 7 de nov. de 2017 Closure Série - POO para JS](/closure-poo-para-js)

[Javascript 7 de nov. de 2017 Pegadinha #1 de entrevistas em JavaScript](/pegadinha-de-entrevistas-de-javascript)

[Javascript 6 de nov. de 2017 Mono ou multi thread - POO para JS](/mono-ou-multi-thread-poo-para-js)

[Javascript 25 de out. de 2017 Pare de pensar em classes! Série - POO para JS](/pare-de-pensar-em-classes)

[Javascript 18 de out. de 2017 Criando um teclado com WebAudioAPI](/teclado-com-webaudioapi)

[Javascript 17 de out. de 2017 FS-Watch - Checando mudanças em um arquivo-diretório](/fs-watch)

[Javascript 17 de out. de 2017 Grandes quantidades de dados com menos recursos](/grandes-quantidades-de-dados-com-menos-recursos)

[Javascript 17 de out. de 2017 WebAudioAPI - Gerando um som no browser](/webaudioapi)

[Javascript 10 de out. de 2017 Javascript - ES6 Default Parameters](/es6-default-parameters)

[Anterior](/tag/javascript)2 / 16[Próxima](/tag/javascript/3)

---

# Javascript - Pagina 3 - DevPleno

URL: https://devpleno.com/tag/javascript/3

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de out. de 2017 ES7 Array Includes](/es7-array-includes)

[Javascript 6 de out. de 2017 GH-Pages e como publicar seu site no Github](/como-publicar-seu-site-no-github)

[Javascript 6 de out. de 2017 As vantagens do Javascript em todas as camadas de uma aplicação](/quais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao)

[Javascript 5 de out. de 2017 Navigator Geolocation API - Sabendo a localização do usuário](/navigator-geolocation)

[Javascript 5 de out. de 2017 Dicas utilizando o Split em Strings](/split-em-strings)

[Javascript 3 de out. de 2017 Promise Constante - como criar situações assíncronas de teste](/promise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste)

[Javascript 2 de out. de 2017 React 16 - o Pacificador](/react-16-o-pacificador)

[Javascript 26 de set. de 2017 Promise Race - Qual promise resolve/rejeita primeiro](/promise-race)

[Javascript 22 de set. de 2017 Gerando HTML estáticos a partir de templates – EJS](/html-estatico-com-templates-ejs)

[Javascript 21 de set. de 2017 Diferença entre as programações Orientação-objetos, Imperativa e Funcional](/orientacao-objetos-imperativa-e-funcional)

[Javascript 19 de set. de 2017 Sou contra a orientação-objetos (OO)?](/orientacao-objeto)

[Javascript 11 de set. de 2017 Dica: Debug NodeJS com Chrome DevTools](/dica-debug-nodejs-com-chrome-devtools)

[Anterior](/tag/javascript/2)3 / 16[Próxima](/tag/javascript/4)

---

# Javascript - Pagina 4 - DevPleno

URL: https://devpleno.com/tag/javascript/4

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 11 de set. de 2017 ChalkJS - Deixe as saídas de seu console.log coloridas e com estilo](/hands-on-chalkjs)

[Javascript 8 de set. de 2017 Servidor JSON simples em PHP (parte 1)](/servidor-json-simples-em-php-parte-1)

[Javascript 5 de set. de 2017 Módulo MS - Convertendo timestamps](/convertendo-timestamps)

[Javascript 31 de ago. de 2017 Como encadear promises](/como-encadear-promises)

[Javascript 23 de ago. de 2017 Dotenv e variáveis de ambiente no NodeJS](/dotenv-e-variaveis-de-ambiente)

[Javascript 23 de ago. de 2017 O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express](/morgan)

[Javascript 21 de ago. de 2017 3 Padrões para Iniciar com Expressões Regulares (RegExp)](/expressoes-regulares)

[Javascript 21 de ago. de 2017 Estruturas de Dados - Pilhas](/pilha)

[Javascript 18 de ago. de 2017 [SEGREDO] Muitos registros do MySQL no NodeJS](/registros-do-mysql-no-nodejs)

[Javascript 17 de ago. de 2017 Hands-on: Request-promise](/request-promise)

[Javascript 14 de ago. de 2017 Cheerio: Uma implementação jQuery para Node](/cheerio)

[Javascript 14 de ago. de 2017 Request - Requisições HTTP de forma rápida e simples](/request)

[Anterior](/tag/javascript/3)4 / 16[Próxima](/tag/javascript/5)

---

# Javascript - Pagina 5 - DevPleno

URL: https://devpleno.com/tag/javascript/5

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de ago. de 2017 Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios](/hands-on-rimraf)

[Javascript 10 de ago. de 2017 Yarn (uma alternativa ao gerenciador de pacotes/dependências NPM)](/hands-on-yarn)

[Javascript 7 de ago. de 2017 Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS](/falsy-e-truthy-values)

[Javascript 7 de ago. de 2017 Short-circuit e valores padrão](/short-circuit-e-valores-padrao)

[Javascript 6 de ago. de 2017 ShellJS - Crie ferramentas multiplataformas baseadas no Shell do Linux](/shelljs)

[Javascript 4 de ago. de 2017 Fake API - Como testar seus projetos front-end](/fake-api)

[Fundamentos 2 de ago. de 2017 Arrow Functions - Construindo funções anônimas de forma mais simplificada](/arrow-functions)

[Javascript 2 de ago. de 2017 High-order Function Filter](/filter)

[Javascript 2 de ago. de 2017 High-order Function Find](/find)

[Javascript 1 de ago. de 2017 Composição de componentes em ReactJS](/composicao-de-componentes-em-reactjs)

[Javascript 31 de jul. de 2017 Json-server - Como criar uma REST API para testes de forma simples](/json-server-como-criar-uma-rest-api-para-testes-de-forma-simples)

[Javascript 30 de jul. de 2017 Async - Como Controlar Operações Assíncronas](/async)

[Anterior](/tag/javascript/4)5 / 16[Próxima](/tag/javascript/6)

---

# Javascript - Pagina 6 - DevPleno

URL: https://devpleno.com/tag/javascript/6

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 29 de jul. de 2017 Módulo Co - Organize o fluxo de seu código assíncrono](/modulo-co)

[Javascript 28 de jul. de 2017 Float e precisão](/float-e-precisao)

[Javascript 28 de jul. de 2017 Nodemon: Monitore alterações e reinicie automaticamente seus scripts](/hands-on-nodemon)

[Javascript 27 de jul. de 2017 Bind - Altere comportamento e contexto de execução de suas funções](/bind)

[Javascript 27 de jul. de 2017 Fetch - Uma nova forma de fazer requisições HTTP](/fetch-hands-on)

[Javascript 24 de jul. de 2017 Standard - Padronize o código fonte JavaScript da sua equipe](/standard-parte-1)

[Javascript 24 de jul. de 2017 Standard Parte 2](/standard-parte-2)

[Javascript 20 de jul. de 2017 Factory Function em JavaScript](/factory-function)

[Javascript 19 de jul. de 2017 Construindo um App gerenciador de séries com ReactJS](/gerenciador-de-series-p1)

[Javascript 11 de jul. de 2017 Minicurso Socketio - Parte 05 - Colocando o projeto no ar](/minicurso-socket-io-parte-5)

[Javascript 10 de jul. de 2017 Minicurso Socket.IO Parte 4 - Separando notificações por Rooms](/minicurso-socket-io-parte-4)

[Javascript 8 de jul. de 2017 Jest - Como utilizar a ferramenta de testes criada pelo Facebook](/hands-on-jest)

[Anterior](/tag/javascript/5)6 / 16[Próxima](/tag/javascript/7)

---

# Javascript - Pagina 7 - DevPleno

URL: https://devpleno.com/tag/javascript/7

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 7 de jul. de 2017 Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol](/minicurso-socket-io-parte-3)

[Javascript 6 de jul. de 2017 Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO](/minicurso-socket-io-parte-2)

[Javascript 5 de jul. de 2017 Minicurso Socket.IO - Parte 01 - Começando o projeto](/minicurso-socket-io-parte-1)

[Javascript 5 de jul. de 2017 NPM e Módulos de Terceiros - NodeJS](/npm-e-modulos-de-terceiros)

[Javascript 3 de jul. de 2017 Evite o this em JavaScript](/evite-o-this-em-js)

[Javascript 30 de jun. de 2017 High-order Function - Reduce](/reduce)

[Javascript 29 de jun. de 2017 Generators Functions - o que acontece por baixo dos panos](/generators-functions)

[Javascript 28 de jun. de 2017 ReactJS Recursivo?](/renderizar-estruturas-em-formato-de-arvore)

[Javascript 28 de jun. de 2017 Sleep em Generator](/sleep-em-generator)

[Javascript 27 de jun. de 2017 High-order Function MAP](/map)

[Javascript 27 de jun. de 2017 NodeJS Primeiros Passos - Promises](/promises)

[Javascript 26 de jun. de 2017 Como servir arquivos e expor servidor local com HTTPS](/servir-arquivos-e-expor-servidor)

[Anterior](/tag/javascript/6)7 / 16[Próxima](/tag/javascript/8)

---

# Javascript - Pagina 8 - DevPleno

URL: https://devpleno.com/tag/javascript/8

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 22 de jun. de 2017 Debug de código JavaScript no Navegador](/debug-no-navegador)

[Javascript 16 de jun. de 2017 Programação Assíncrona - NodeJS Primeiros Passos](/programacao-assincrona)

[Javascript 13 de jun. de 2017 Template HTML simples - Hands-on Handlebars](/handlebars-template-html-simples)

[Algoritmos 7 de jun. de 2017 Codility: Como Resolver os Desafios e Passar nos Testes de Código](/codility)

[Javascript 6 de jun. de 2017 Gere seu projeto em Express - Hands-on: Express-Generator](/express-generator)

[Javascript 5 de jun. de 2017 Injeção de Dependência em ReactJS](/injecao-de-dependencia-em-reactjs)

[Javascript 1 de jun. de 2017 Injeção de dependência - Aumente a testabilidade do seu código](/injecao-de-dependencia)

[Javascript 1 de jun. de 2017 Vantagens da Injeção de dependência para a testabilidade do código](/vantagens-da-injecao-de-depencia)

[Javascript 30 de mai. de 2017 4 novos Métodos Strings que você precisa conhecer](/4-novos-metodos)

[Javascript 30 de mai. de 2017 Dica: ES6 - Destructuring Assignament](/dica-es6-destructuring-assignament)

[Javascript 30 de mai. de 2017 NodeJS Primeiros Passos: Módulo em NodeJS](/modulos)

[Javascript 30 de mai. de 2017 ES6 - Template Strings](/template-strings)

[Anterior](/tag/javascript/7)8 / 16[Próxima](/tag/javascript/9)

---

# Javascript - Pagina 9 - DevPleno

URL: https://devpleno.com/tag/javascript/9

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 29 de mai. de 2017 Como construir um beatbox com JavaScript](/beatbox-com-javascript)

[Javascript 29 de mai. de 2017 Construindo um Beatbox Manipulável com JS](/beatbox-manipulavel-com-js)

[Javascript 29 de mai. de 2017 Chocolatey - Gerenciador de Pacotes para Windows](/chocolatey)

[Javascript 26 de mai. de 2017 Currying - Uma técnica interessante usada em programação funcional](/currying)

[Javascript 26 de mai. de 2017 Metrônomo com JavaScript](/metronomo-com-javascript)

[Javascript 25 de mai. de 2017 Escopos e Closures - NodeJS Primeiros Passos](/escopos-e-closures)

[Javascript 25 de mai. de 2017 4 funcionalidades do Console no DevTools que você não conhece](/funcionalidades-do-console)

[Javascript 24 de mai. de 2017 Tocando um Áudio com JS puro](/audio-com-js-puro)

[Javascript 24 de mai. de 2017 JavaScript: Apply](/javascript-apply)

[Javascript 23 de mai. de 2017 Servidores Web - Um pouco mais do back-end de uma Aplicação Web](/servidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web)

[Fundamentos 22 de mai. de 2017 Animação basica em CSS3](/animacao-basica-css3)

[Javascript 22 de mai. de 2017 Request e Response](/request-e-response)

[Anterior](/tag/javascript/8)9 / 16[Próxima](/tag/javascript/10)

---

# Javascript - DevPleno

URL: https://devpleno.com/tag/javascript

> Artigos sobre desenvolvimento, carreira e tecnologia.

Javascript

## Arquivo de Insights

183 posts encontrados com a tag Javascript

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 25 de jul. de 2021 Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos](/como-gerar-um-array-populado-em-javascript)

[Javascript 19 de fev. de 2018 Como invocar funções dinamicas em JavaScript](/como-invocar-funcoes-dinamicamente-com-js)

[Javascript 30 de nov. de 2017 Classificação de imagens com Azure](/azure-cognitive-service)

[Javascript 30 de nov. de 2017 Normalizar-email](/normalizar-email)

[Javascript 29 de nov. de 2017 Como criar e reutilizar seus módulos no NodeJS com Git](/como-criar-e-reutilizando-seus-proprios-modulos)

[Javascript 29 de nov. de 2017 Multer upload de imagens com nodejs e express](/multer-upload-de-imagens-com-nodejs-e-express)

[Javascript 24 de nov. de 2017 Reconhecimento de nudez com js](/reconhecimento-de-nudez-com-js)

[Javascript 24 de nov. de 2017 Reconhecimento facial com JS](/reconhecimento-facial-com-js)

[Javascript 23 de nov. de 2017 CHAVES DINÂMICAS](/chaves-dinamicas)

[Javascript 16 de nov. de 2017 Hands-on - Three.JS](/hands-on-threejs)

[Javascript 13 de nov. de 2017 Capturando áudio do microfone pelo Navegador](/microfone-pelo-navegador)

[Javascript 13 de nov. de 2017 Preview de imagens antes do upload](/preview-de-imagens-antes-do-upload)

Anterior
1 / 16[Próxima](/tag/javascript/2)

---

# NodeJS - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/nodejs/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

NodeJS

## Arquivo de Insights

58 posts encontrados com a tag NodeJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 10 de ago. de 2017 Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios](/hands-on-rimraf)

[Javascript 28 de jul. de 2017 Nodemon: Monitore alterações e reinicie automaticamente seus scripts](/hands-on-nodemon)

[Javascript 27 de jul. de 2017 Fetch - Uma nova forma de fazer requisições HTTP](/fetch-hands-on)

[Javascript 11 de jul. de 2017 Minicurso Socketio - Parte 05 - Colocando o projeto no ar](/minicurso-socket-io-parte-5)

[Javascript 10 de jul. de 2017 Minicurso Socket.IO Parte 4 - Separando notificações por Rooms](/minicurso-socket-io-parte-4)

[Javascript 7 de jul. de 2017 Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol](/minicurso-socket-io-parte-3)

[Javascript 6 de jul. de 2017 Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO](/minicurso-socket-io-parte-2)

[Javascript 5 de jul. de 2017 Minicurso Socket.IO - Parte 01 - Começando o projeto](/minicurso-socket-io-parte-1)

[Javascript 5 de jul. de 2017 NPM e Módulos de Terceiros - NodeJS](/npm-e-modulos-de-terceiros)

[Javascript 27 de jun. de 2017 NodeJS Primeiros Passos - Promises](/promises)

[Javascript 26 de jun. de 2017 Como servir arquivos e expor servidor local com HTTPS](/servir-arquivos-e-expor-servidor)

[Javascript 16 de jun. de 2017 Programação Assíncrona - NodeJS Primeiros Passos](/programacao-assincrona)

[Anterior](/tag/nodejs)2 / 5[Próxima](/tag/nodejs/3)

---

# NodeJS - Pagina 3 - DevPleno

URL: https://devpleno.com/tag/nodejs/3

> Artigos sobre desenvolvimento, carreira e tecnologia.

NodeJS

## Arquivo de Insights

58 posts encontrados com a tag NodeJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 6 de jun. de 2017 Gere seu projeto em Express - Hands-on: Express-Generator](/express-generator)

[Javascript 30 de mai. de 2017 NodeJS Primeiros Passos: Módulo em NodeJS](/modulos)

[Javascript 29 de mai. de 2017 Chocolatey - Gerenciador de Pacotes para Windows](/chocolatey)

[Javascript 25 de mai. de 2017 Escopos e Closures - NodeJS Primeiros Passos](/escopos-e-closures)

[Javascript 16 de mai. de 2017 Faker - Como gerar grandes massas de dados fictícios para testes](/dados-ficticios-para-testes)

[Javascript 16 de mai. de 2017 3 dicas para NPM + 1 dica extra](/dicas-paranpm)

[Javascript 15 de mai. de 2017 Fs-extra - Filesystem com Promises e mais funcionalidades](/fs-extra)

[Javascript 15 de mai. de 2017 Hands-on - Socket.io Parte 3](/hands-on-socket-io-parte-3)

[Javascript 15 de mai. de 2017 Servidor HTTP Básico - NodeJS Primeiros Passos](/servidor-http-basico-2)

[Javascript 11 de mai. de 2017 Low-DB - Banco de dados para NodeJS baseado em JSON](/low-db)

[Javascript 9 de mai. de 2017 PKG - Transforme seu aplicativo Node em executável](/hands-on-pkg)

[Javascript 8 de mai. de 2017 Hands-on: Ler arquivo linha a linha](/hands-ler-arquivo-linha-linha)

[Anterior](/tag/nodejs/2)3 / 5[Próxima](/tag/nodejs/4)

---

# NodeJS - Pagina 4 - DevPleno

URL: https://devpleno.com/tag/nodejs/4

> Artigos sobre desenvolvimento, carreira e tecnologia.

NodeJS

## Arquivo de Insights

58 posts encontrados com a tag NodeJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 8 de mai. de 2017 Hands-on: Readline](/hands-on-readline)

[Javascript 4 de mai. de 2017 Promisify-Node: Convertendo funções clássicas do Node em Promises](/promisify-node)

[Javascript 2 de mai. de 2017 Hands-on: Marked](/hands-on-marked)

[Javascript 24 de abr. de 2017 Hands-on: Low-db](/hands-low-db)

[Javascript 24 de abr. de 2017 Hands-on: Faker](/hands-on-faker)

[Javascript 17 de abr. de 2017 Dica: Once n vezes](/dica-n-vezes)

[Javascript 10 de abr. de 2017 Hands-on: Json-Server](/hands-json-server)

[Javascript 22 de mar. de 2017 Dica: Debug de NodeJS no VS Code](/dica-debug-de-nodejs-no-vs-code)

[Javascript 7 de mar. de 2017 Dica: Injeção de dependência com Destructuring Assignament](/dica-injecao-de-dependencia-com-destructuring-assignament)

[Javascript 6 de mar. de 2017 Hands-on: Slack](/hands-on-slack)

[Javascript 3 de mar. de 2017 Hands-on: ShellJS](/hands-on-shelljs)

[Javascript 24 de fev. de 2017 Hands-on: NodeJS - PM2](/hands-on-nodejs-pm2)

[Anterior](/tag/nodejs/3)4 / 5[Próxima](/tag/nodejs/5)

---

# NodeJS - Pagina 5 - DevPleno

URL: https://devpleno.com/tag/nodejs/5

> Artigos sobre desenvolvimento, carreira e tecnologia.

NodeJS

## Arquivo de Insights

58 posts encontrados com a tag NodeJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 28 de dez. de 2016 O que é o app.use no NodeJS/ExpressJS?](/o-que-e-o-app-use-no-nodejsexpressjs)

[Javascript 4 de out. de 2016 Como converter uma string em Base64 em JavaScript (Navegador e NodeJS)](/como-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs)

[Javascript 3 de out. de 2016 Mongoose: corrigindo "Cannot overwrite 'Model' model once compiled"](/corrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose)

[Javascript 17 de ago. de 2016 NodeJS Primeiros Passos: Async - Map](/nodejs-primeiros-passos-async-map)

[Javascript 15 de ago. de 2016 NodeJS Primeiros Passos: Async - Waterfall](/nodejs-primeiros-passos-async-waterfall)

[Javascript 12 de ago. de 2016 NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas](/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas)

[Javascript 27 de jul. de 2016 NodeJS Primeiros Passos: Módulos](/nodejs-primeiros-passos-modulos)

[Javascript 26 de jul. de 2016 NodeJS Primeiros Passos: Closures e Escopos](/closures-e-escopos)

[Javascript 25 de jul. de 2016 NodeJS Primeiros Passos: Servidor HTTP Básico](/servidor-http-basico)

[Javascript 12 de jul. de 2016 Vídeo sobre NodeJS com Promises](/nodejs-primeiros-passos-promises)

[Anterior](/tag/nodejs/4)5 / 5
Próxima

---

# NodeJS - DevPleno

URL: https://devpleno.com/tag/nodejs

> Artigos sobre desenvolvimento, carreira e tecnologia.

NodeJS

## Arquivo de Insights

58 posts encontrados com a tag NodeJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 30 de nov. de 2017 Normalizar-email](/normalizar-email)

[Javascript 29 de nov. de 2017 Como criar e reutilizar seus módulos no NodeJS com Git](/como-criar-e-reutilizando-seus-proprios-modulos)

[Javascript 29 de nov. de 2017 Multer upload de imagens com nodejs e express](/multer-upload-de-imagens-com-nodejs-e-express)

[Javascript 17 de out. de 2017 FS-Watch - Checando mudanças em um arquivo-diretório](/fs-watch)

[Javascript 17 de out. de 2017 Grandes quantidades de dados com menos recursos](/grandes-quantidades-de-dados-com-menos-recursos)

[Javascript 22 de set. de 2017 Gerando HTML estáticos a partir de templates – EJS](/html-estatico-com-templates-ejs)

[Javascript 11 de set. de 2017 Dica: Debug NodeJS com Chrome DevTools](/dica-debug-nodejs-com-chrome-devtools)

[Javascript 23 de ago. de 2017 Dotenv e variáveis de ambiente no NodeJS](/dotenv-e-variaveis-de-ambiente)

[Javascript 23 de ago. de 2017 O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express](/morgan)

[Javascript 18 de ago. de 2017 [SEGREDO] Muitos registros do MySQL no NodeJS](/registros-do-mysql-no-nodejs)

[Javascript 14 de ago. de 2017 Cheerio: Uma implementação jQuery para Node](/cheerio)

[Javascript 14 de ago. de 2017 Request - Requisições HTTP de forma rápida e simples](/request)

Anterior
1 / 5[Próxima](/tag/nodejs/2)

---

# ReactJS - Pagina 2 - DevPleno

URL: https://devpleno.com/tag/reactjs/2

> Artigos sobre desenvolvimento, carreira e tecnologia.

ReactJS

## Arquivo de Insights

13 posts encontrados com a tag ReactJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 23 de nov. de 2016 ReactJS: comentários em JSX](/reactjs-comentarios-em-jsx)

[Anterior](/tag/reactjs)2 / 2
Próxima

---

# ReactJS - DevPleno

URL: https://devpleno.com/tag/reactjs

> Artigos sobre desenvolvimento, carreira e tecnologia.

ReactJS

## Arquivo de Insights

13 posts encontrados com a tag ReactJS

[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)

[Javascript 6 de out. de 2017 GH-Pages e como publicar seu site no Github](/como-publicar-seu-site-no-github)

[Javascript 2 de out. de 2017 React 16 - o Pacificador](/react-16-o-pacificador)

[Javascript 1 de ago. de 2017 Composição de componentes em ReactJS](/composicao-de-componentes-em-reactjs)

[Javascript 19 de jul. de 2017 Construindo um App gerenciador de séries com ReactJS](/gerenciador-de-series-p1)

[Javascript 28 de jun. de 2017 ReactJS Recursivo?](/renderizar-estruturas-em-formato-de-arvore)

[Javascript 18 de mai. de 2017 Criando componente mais simples e eficaz em React](/stateless-functional-component)

[Javascript 17 de mai. de 2017 React-router-dom: como injetar props em rotas em ReactJS](/router-props-2)

[Javascript 24 de abr. de 2017 Dica: Router Props](/router-props)

[Javascript 4 de abr. de 2017 Dica: Injeção de Dependência no ReactJS](/dica-injecao-de-dependencia-no-reactjs)

[Javascript 9 de mar. de 2017 Hands-on: Creat-React-App](/hands-creat-react-app)

[Javascript 25 de jan. de 2017 Render condicional em ReactJS](/render-condicional-em-reactjs)

[Javascript 27 de dez. de 2016 Loops/Repetições/Iterações no JSX do React](/loopsrepeticoesiteracoes-no-jsx-do-react)

Anterior
1 / 2[Próxima](/tag/reactjs/2)

---

# Criando um teclado com WebAudioAPI - DevPleno

URL: https://devpleno.com/teclado-com-webaudioapi

> Hoje quero continuar falando sobre WebAudioAPI. Vamos um pouco além do que já fizemos anteriormente. No nosso arquivo HTML, teremos dois scripts com função...

Javascript

## Criando um teclado com WebAudioAPI

T
Por Tulio Faria • 18 de outubro de 2017

[Javascript](/tag/javascript)

Hoje quero continuar falando sobre [WebAudioAPI](https://www.devpleno.com/webaudioapi/). Vamos um pouco além do que já fizemos anteriormente. No nosso arquivo HTML, teremos dois scripts com função para ler qual tecla no teclado estamos apertando e outra para quando soltarmos a tecla:

&#x3C;html>
&#x3C;body>
&#x3C;script>
function onKeyDown(key){console.log(key)}
function onKeyUp(key){console.log(key)}
window.onkeydown = onKeyDown window.onkeyup = onKeyUp
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
A partir disso, podemos utilizar o contexto para tocar um áudio, mas não podemos utilizar vários deles, por esse motivo temos que checar se já apertamos a tecla, mas antes disso vamos fazer um check para saber qual tecla estamos pressionando. Para isso, tenho o mapeamento das teclas:

&#x3C;html>
&#x3C;body>
&#x3C;script>
const notes = { 'C3': 130.81,
'C#3': 138.59,
'D3': 146.83,
'D#3': 155.56,
'E3': 164.81,
'F3': 174.61,
'F#3': 185.00,
'G3': 196.00,
'G#3': 207.65,
'A3': 220.00,
'A#3': 233.08,
'B3': 246.94,
'C4': 261.63,
'C#4': 277.18,
'D4': 293.66,
'D#4': 311.13,
'E4': 329.63,
'F4': 349.23,
'F#4': 369.99,
'G4': 392.00,
'G#4': 415.30,
'A4': 440.00,
'A#4': 466.16,
'B4': 493.88,
'C5': 523.25,
'C#5': 554.37,
'D5': 587.33,
'D#5': 622.25,
'E5': 659.25,
'F5': 698.46,
'F#5': 739.99,
'G5': 783.99,
'G#5': 830.61,
'A5': 880.00,
'A#5': 932.33,
'B5': 987.77
}
const map = {
65 = 'C3',
83 = 'D3',
68 = 'E3',
70 = 'F3',
71 = 'G3',
72 = 'A3',
74 = 'B3'
}
const context = new (window.AudioContext || window.webkitAudioContext)()
function onKeyDown(key){
if(key.keyCode in map){
const osc = constext.createOscillator()
osc.type = 'sine'
osc.frequency.value = notes[map[key.keyCode]]
osc.connect(contexto.destination)
osc.start()
osc.stop(contexto.currentTime+2)
}
}
function onKeyUp(key){
console.log(key)
}
window.onkeydown = onKeyDown
window.onkeyup = onKeyUp
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Dessa maneira fica mais interessante, pois conseguimos recapear caso quisermos. Além disso, posso guardar uma lista de osciladores para dar um stop. Dessa maneira, quando apertarmos a tecla, ele se inicia, e quando eu solto, ele para:

const mapOsc = {}
function onKeyDown(key) {
if (map[key.keyCode] &#x26;&#x26; !mapOsc[key.keyCode]) {
const osc = constext.createOscillator()
osc.type = 'sine'
osc.frequency.value = notes[map[key.keyCode]]
osc.connect(contexto.destination)
osc.start()
mapOsc[key.keyCode] = osc
}
}
function onKeyUp(key) {
if (key.keyCode in mapOsc) {
const osc = mapOsc[key.keyCode]
osc.stop(0)
mapOsc[key.keyCode] = undefined
}
}
Assim temos um teclado bem interessante. Além disso, utilizando a tabela de notas, podemos colocar, por exemplo, os sustenidos. Caso você queira treinar, pode transformar isso em forma visual utilizando uma imagem de teclas de piano e quando você clicar em cada uma delas, é gerado os áudios.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Criando%20um%20teclado%20com%20WebAudioAPI&url=https%3A%2F%2Fdevpleno.com%2Fteclado-com-webaudioapi) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fteclado-com-webaudioapi)

---

# Técnica para eliminar o que não te faz alcançar seus objetivos - DevPleno

URL: https://devpleno.com/tecnica-para-alcancar-seus-objetivos

> Hoje eu gostaria de compartilhar uma dica bem rápida, basicamente de como você pode, de uma maneira bem fácil, evoluir na sua vida, seja ela financeira, or...

Carreira

## Técnica para eliminar o que não te faz alcançar seus objetivos

T
Por Tulio Faria • 29 de agosto de 2017

[Carreira](/tag/carreira)

Hoje eu gostaria de compartilhar uma dica bem rápida, basicamente de como você pode, de uma maneira bem fácil, evoluir na sua vida, seja ela financeira, organização ou saúde e alcançar seus objetivos.

Eu venho fazendo isso há algum tempo, mas não tinha racionalizado sobre esse processo. É algo muito simples: vamos supor que você trabalha como freelancer e quer melhorar sua parte financeira, então você vai organizar isso como projeto 1, projeto 2, empresa 1, empresa 2, horas gastas e quanto isso vai dar de retorno financeiro. Feito isso, você vai ordenar do que te dá mais lucro para o que dá menos lucro.

O passo primordial é que depois de ordenado, você vai pegar 20% dessas atividades que não te dão o resultado que você quer e vai cortar da lista para abrir espaço na sua agenda para que coisas novas e melhores possam acontecer.

Eu venho fazendo isso de forma irracional há mais ou menos 8 meses, o resultado é muito bom. Além disso, podemos usar como exemplo para complementar essa ideia, a dica sobre falar NÃO quando necessário. Por exemplo, um projeto que pague bem, mas não te dá lucro é puro risco, imagine um projeto que te pague R$10mil por mês e você tem que contratar uma pessoa, pagar gastos e no final esse projeto te gera 500 reais de lucro… Ele te dá prejuízo pelo fato do lucro ser pequeno e o risco ser grande.

Hoje em dia, temos que escolher como queremos viver, escolher o que queremos fazer, o que dá mais resultado, e pessoas que nos agregam coisas boas. Pessoas tóxicas sugam a nossa energia, comece a listar esse tipo de pessoa e corte da sua vida também.

Você vai perceber que isso faz muito sentido. Novamente, eu venho fazendo isso de forma consistente e o resultado é incrível. Coisas que eu não pensava que eu ia fazer agora eu estou fazendo como por exemplo pedir para sair de projeto por estar me dando muito estresse ou financeiramente inviável.

Uma coisa interessante, fazendo isso, ou vai entrar coisas melhores na sua vida ou você foca na lista menor, afinal os projetos que ficaram vão ter mais energia.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=T%C3%A9cnica%20para%20eliminar%20o%20que%20n%C3%A3o%20te%20faz%20alcan%C3%A7ar%20seus%20objetivos&url=https%3A%2F%2Fdevpleno.com%2Ftecnica-para-alcancar-seus-objetivos) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftecnica-para-alcancar-seus-objetivos)

---

# ES6 - Template Strings - DevPleno

URL: https://devpleno.com/template-strings

> Como já citei em outros posts, (como em: ES6 Spread Operator, Async/await, Destructuring Assignment) o ES6 apresenta algumas novidades, uma delas é o Templ...

Javascript

## ES6 - Template Strings

T
Por Tulio Faria • 30 de maio de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Como já citei em outros posts, (como em: [ES6 Spread Operator](https://www.devpleno.com/spread-operator/), [Async/await](https://devpleno.com/async-await), [Destructuring Assignment](https://devpleno.com/dica-es6-destructuring-assignament)) o ES6 apresenta algumas novidades, uma delas é o Template Strings, uma forma de declarar uma string em JavaScript.

const str1 = `teste`
console.log(str1)
Ela será o mesmo que se fizermos uma String convencional, porém podemos fazer algumas coisas extras. Exemplo: Se eu quisesse uma String multilinha, teria que fazer o seguinte:

const str1 = `teste`
const strMultiLinha = 'linha1 \n linha2'
console.log(strMultiLinha)
Ou seja, teria que utilizar o contra barra (ou scape) em todas as linhas, o que é um tanto chato.

### O que pode ser feito?

Com o Template String é possível fazer simplesmente isso:

const strMultiLinha = `linha1
linha meio
linha2`
console.log(strMultiLinha)
Não é mais necessário utilizar o \n, isso deixa o código mais limpo. Outra coisa do Template String é que podemos criar uma string interpolada, ou seja, misturar uma expressão com a string que vai ser avaliada e depois colocar ela entre pólos, ao invés de concatenar. Fazemos isso apenas abrindo um \$ {expressão}, por exemplo:

const str = `Ola \$ {1 + 1} !`
console.log(str)
Obviamente também podemos colocar variáveis dentro:

const a = 10
const str = `Ola \$ {a + 1} !`
console.log(str)
Existe ainda uma outra funcionalidade interessante: utilizar algumas tags com o Template String. Exemplo: Vamos criar uma tag e ela vai receber strings e values.

function tag(strings, ...values) {
console.log(strings, values)
return 'opa'
}
const str = tag`Olá \$ {10} mundo!`
Perceba que a strings vai ter olá e mundo e o value terá o 10. Ele está entre as strings, por isso o nome interpolação. Com isso podemos criar uma tag em HTML sem grandes problemas. Uma última coisa que conseguimos fazer é checar o valor raw das variáveis apenas adicionando:

console.log(strings.raw[0])
Estamos pegando o raw da posição zero neste exemplo. Quando colocamos o raw, ele mostra exatamente como foi definido, então se você colocar um \n, será mostrado realmente o raw disso, o \n.

Confira o vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=ES6%20-%20Template%20Strings&url=https%3A%2F%2Fdevpleno.com%2Ftemplate-strings) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftemplate-strings)

---

# Tenha cicatrizes - DevPleno

URL: https://devpleno.com/tenha-cicatrizes

> Na dica de carreira de hoje, eu quero explicar porque é tão bom e útil pra gente ter 

Carreira

## Tenha cicatrizes

T
Por Tulio Faria • 5 de setembro de 2017

[Carreira](/tag/carreira)

Na dica de carreira de hoje, eu quero explicar porque é tão bom e útil pra gente ter ‘cicatrizes de guerra’, obviamente não na forma literal :)

Essa é uma expressão que eu ouvi em um evento e que faz total sentido.

O que significa ter cicatrizes?

É você ter se permitido cometer um erro ou ter ido para o ‘campo de batalha’, afinal só quem conhece o campo sabe como ele é. Você deve ter percebido que em quase todas as vezes que falo sobre carreira, eu digo que só conheço e sei construir algo com determinada tecnologia quando eu coloco em produção, porque aquilo vai me deixar cicatrizes.

Arrisque colocar em produção, dar um passo a mais além da sua zona de descanso, nem que gere algum probleminha, afinal nada pode ficar 100%. Por exemplo, ao construir um projeto tente colocar 1% a mais do que você está acostumado para que realmente tenha um pouco mais de dificuldade, assim esse projeto te dará uma cicatriz, isso vai te deixar mais calejado.

Quando mais você passa por essas situações, mais você vai se transformar em um profissional melhor, isso é muito importante para nossa carreira. Invente maneiras novas de fazer algo, tanto para te motivar quanto para aprender. Lembrando que é no erro que nós aprendemos. Um desenvolvedor pleno tem que ter essa visão de que percorrer caminhos difíceis é o que vai fazer ele se transformar em um desenvolvedor melhor, mais preparado e mais calejado. Se você conseguir construir um sistema que mil pessoas utilizam, aquilo te da uma força para saber que você pode construir um de dez mil.

Essas cicatrizes que marcam sua carreira é o que vai fazer você crescer cada vez mais. Sempre levar cicatrizes para que você realmente evolua na sua carreira. Eu ouvi isso em um processo seletivo onde disseram que precisam de gente que tem cicatrizes, ou seja, tenham passado por esses problemas, virado madrugada, batido no teto da zona de conforto e teve que se destacar de alguma maneira.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Tenha%20cicatrizes&url=https%3A%2F%2Fdevpleno.com%2Ftenha-cicatrizes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftenha-cicatrizes)

---

# Termos de uso - DevPleno

URL: https://devpleno.com/termos-de-uso

> Estes termos de serviço regulam o uso deste site. Ao acessálo você concorda com estes termos. Por favor, consulte regularmente os nossos termos de serviço....

Blog

## Termos de uso

T
Por Tulio Faria • 14 de março de 2017

Estes termos de serviço regulam o uso deste site. Ao acessá-lo você concorda com estes termos. Por favor, consulte regularmente os nossos termos de serviço.

O website DevPleno (gerenciado e mantido por We Dev Ideas – Eirelli – ME) é um serviço interativo oferecido em por meio de página eletrônica na internet que oferece informações sobre negócios, cultura, etc, e serviços relacionados a desenvolvedores a partir da integração de diversas fontes de informação. O acesso ao DevPleno representa a aceitação expressa e irrestrita dos termos de uso abaixo descritos. Se você não concorda com os termos, por favor, não acesse nem utilize este website.

O visitante poderá usar este site apenas para finalidades lícitas. Este espaço não poderá ser utilizado para para publicar, enviar, distribuir ou divulgar conteúdos ou informação de caráter difamatório, obsceno ou ilícito, inclusive informações de propriedade exclusiva pertencentes a outras pessoas ou empresas, bem como marcas registradas ou informações protegidas por direitos autorais, sem a expressa autorização do detentor desses direitos. Ainda, o visitante não poderá usar o site DevPleno para obter ou divulgar informações pessoais, inclusive endereços na Internet, sobre os usuários do site.

O DevPleno empenha-se em manter a qualidade, atualidade e autenticidade das informações do site, mas seus criadores e colaboradores não se responsabilizam por eventuais falhas nos serviços ou inexatidão das informações oferecidas. O usuário não deve ter como pressuposto que tais serviços e informações são isentos de erros ou serão adequados aos seus objetivos particulares. Os criadores e colaboradores tampouco assumem o compromisso de atualizar as informações, e reservam-se o direito de alterar as condições de uso ou preços dos serviços e produtos oferecidos no site a qualquer momento.

O acesso ao site DevPleno é gratuito. O DevPleno poderá criar áreas de acesso exclusivo aos seus clientes ou para terceiros especialmente autorizados.

Os criadores e colaboradores do DevPleno poderão a seu exclusivo critério e em qualquer tempo, modificar ou desativar o site, bem como limitar, cancelar ou suspender seu uso ou o acesso. Também estes Termos de Uso poderão ser alterados a qualquer tempo. Visite regularmente esta página e consulte os Termos então vigentes. Algumas disposições destes Termos podem ser substituídas por termos ou avisos legais expressos localizados em determinadas páginas deste site.

## Erros e falhas

Os documentos, informações, imagens e gráficos publicados neste site podem conter imprecisões técnicas ou erros tipográficos. Em nenhuma hipótese o DevPleno e/ou seus respectivos fornecedores serão responsáveis por qualquer dano direto ou indireto decorrente da impossibilidade de uso, perda de dados ou lucros, resultante do acesso e desempenho do site, dos serviços oferecidos ou de informações disponíveis neste site. O acesso aos serviços, materiais, informações e facilidades contidas neste website não garante a sua qualidade.

## Limitação da responsabilidade

Os materiais são fornecidos neste website sem nenhuma garantia explícita ou implícita de comercialização ou adequação a qualquer objetivo específico. Em nenhum caso o DevPleno ou os seus colaboradores serão responsabilizados por quaisquer danos, incluindo lucros cessantes, interrupção de negócio, ou perda de informação que resultem do uso ou da incapacidade de usar os materiais. O DevPleno não garante a precisão ou integridade das informações, textos, gráficos, links e outros itens dos materiais.

ODevPleno não se responsabiliza pelo conteúdo dos artigos e informações aqui publicadas, uma vez que os textos são de autoria de terceiros e não traduzem, necessariamente, a opinião do website.

O DevPleno tampouco é responsável pela violação de direitos autorais decorrente de informações, documentos e materiais publicados neste website, comprometendo-se a retirá-los do ar assim que notificado da infração.

## Informações enviadas pelos usuários e colaboradores

Qualquer material, informação, artigos ou outras comunicações que forem transmitidas, enviadas ou publicadas neste site serão considerados informação não confidencial, e qualquer violação aos direitos dos seus criadores não será de responsabilidade do DevPleno. É terminantemente proibido transmitir, trocar ou publicar, através deste website, qualquer material de cunho obsceno, difamatório ou ilegal, bem como textos ou criações de terceiros sem a autorização do autor. O DevPleno reserva-se o direito de restringir o acesso às informações enviadas por terceiros aos seus usuários.

O DevPleno poderá, mas não é obrigado, a monitorar, revistar e restringir o acesso a qualquer área no site onde usuários transmitem e trocam informações entre si, incluindo, mas não limitado a, salas de chat, centro de mensagens ou outros fóruns de debates, podendo retirar do ar ou retirar o acesso a qualquer destas informações ou comunicações. Porém, o DevPleno não é responsável pelo conteúdo de qualquer uma das informações trocadas entre os usuários, sejam elas lícitas ou ilícitas.

## Links para sites de terceiros

Os sites apontados não estão sob o controle do DevPleno que não é responsável pelo conteúdo de qualquer outro website indicado ou acessado por meio do DevPleno reserva-se o direito de eliminar qualquer link ou direcionamento a outros sites ou serviços a qualquer momento. O DevPleno não endossa firmas ou produtos indicados, acessados ou divulgados através deste website, tampouco pelos anúncios aqui publicados, reservando-se o direito de publicar este alerta em suas páginas eletrônicas sempre que considerar necessário.

## Direitos autorais e propriedade intelectual

Os documentos, conteúdos e criações contidos neste website pertencem aos seus criadores e colaboradores. A autoria dos conteúdo, material e imagens exibidos no DevPleno é protegida por leis nacionais e internacionais. Não podem ser copiados, reproduzidos, modificados, publicados, atualizados, postados, transmitidos ou distribuídos de qualquer maneira sem autorização prévia e por escrito do DevPleno.

As imagens contidas neste website são aqui incorporadas apenas para fins de visualização, e, salvo autorização expressa por escrito, não podem ser gravadas ou baixadas via download. A reprodução ou armazenamento de materiais recuperados a partir deste serviço sujeitará os infratores às penas da lei.

O nome do site DevPleno seu logotipo, o nome de domínio para acesso na Internet, bem como todos os elementos característicos da tecnologia desenvolvida e aqui apresentada, sob a forma da articulação de bases de dados, constituem marcas registradas e propriedades intelectuais privadas e todos os direitos decorrentes de seu registro são assegurados por lei. Alguns direitos de uso podem ser cedidos por DevPleno em contrato ou licença especial, que pode ser cancelada a qualquer momento se não cumpridos os seus termos.

As marcas registradas do DevPleno só podem ser usadas publicamente com autorização expressa. O uso destas marcas registradas em publicidade e promoção de produtos deve ser adequadamente informado.

## Reclamações sobre violação de direitos autorais

O DevPleno respeita a propriedade intelectual de outras pessoas ou empresas e solicitamos aos nossos membros que façam o mesmo. Toda e qualquer violação de direitos autorais deverá ser notificada ao DevPleno e acompanhada dos documentos e informações que confirmam a autoria. A notificação poderá ser enviada pelos e-mails constantes do site ou via postal para o endereço do site.

## Leis aplicáveis

Este site é controlado e operado pela We Dev Ideas – Eirelli – ME a partir de seu escritório no endereço Rua Maria das Dores, 49 – Esplanada, Pouso Alegre, MG e não garante que o conteúdo ou materiais estejam disponíveis para uso em outras localidades. Seu acesso é proibido em territórios onde o conteúdo seja considerado ilegal. Aqueles que optarem 

---

# Redirecting to: /

URL: https://devpleno.com/teste

Redirecting to: / [Redirecting from /teste to /](/)

---

# Tomar decisões - DevPleno

URL: https://devpleno.com/tomar-decisoes

> Você costuma tomar decisões necessárias ou espera ter tudo na sua mão? Independente se você está em um cargo de liderança ou se é liderado, é muito importa...

Carreira

## Tomar decisões

T
Por Tulio Faria • 8 de agosto de 2017

[Carreira](/tag/carreira)

Você costuma tomar decisões necessárias ou espera ter tudo na sua mão?

Independente se você está em um cargo de liderança ou se é liderado, é muito importante tomar algumas decisões, nem que sejam microdecisões.

Se você for um liderado, precisa ajudar o seu líder, mesmo que sejam microdecisões. Estudar as alternativas e explicar o porquê delas serem as melhores para sua equipe facilita para seu líder tomar a decisão correta.

Na minha empresa, somos o braço direito em algumas outras empresas, ajudamos a desenrolar essa parte tecnológica, então elas acham que qualquer decisão que envolvam um software depende da gente, com isso a empresa inteira fica enroscada porque as pessoas não querem tomar decisão, tem medo ou algo do tipo. A postura que eu acredito que funcione mais é se a decisão está no seu ambiente, se você sabe resolver, tem a informação para resolver e consigue fazer, por que não faz?

Às vezes é algo muito simples, mas as pessoas complicam, com isso a produtividade da empresa como um todo vai para baixo.

Para uma empresa mais produtiva, as pessoas têm que assumir mais esses riscos. Quando você é liderado, assuma mais riscos, não precisa ser inconsequente, mas comece a tomar decisões.

Quanto mais decisões você tomar, mais treinado você vai estar para tomar decisões. Já se você é o líder, existe a contrapartida, às vezes você concentra em você e não quer que sua equipe tome decisões porque você tem medo de algo dar errado e você ser o responsável, aí vem a outra dica: você tem que treinar sua equipe a tomar decisões também, ajudar você a organizar isso, porque se concentrar tudo em você, vai ser o cara que vai atrasar a equipe, afinal vai ser tanta decisão para se tomar que as microdecisões, que as pessoas poderiam tomar, não vão ser feitas porque você não deixa.

Um exemplo interessante: prestavamos consultoria para um cliente, e teve um dia em que chegamos lá para conversar sobre outro assunto e uma das sócias estava extremamente estressada, perguntamos o que estava acontecendo e ela respondeu “esses funcionários não resolvem nada. Pra comprar um café eles tem que me pedir dinheiro!” Então perguntamos porque eles tinham que pedir a ela. Ela respondeu que era porque eles não tinham acesso ao dinheiro. Ou seja, ela não deixava os funcionários tomarem decisão, por mais que eles quisessem tomar. A sugestão que demos foi deixar uma caixa com o dinheiro, avisar para quando precisar de dinheiro para comprar algo para a empresa pegue lá e devolva a nota na caixa com o nome da pessoa que comprou. Uma coisa simples que desenrola tudo.

Então, caso você seja subordinado, comece a tomar decisões menores, em que o impacto não atrapalhe e a medida que você vai acostumando com isso, comece a ajudar seu líder a tomar decisões, isso vai gerar uma produtividade muito grande para sua equipe.

Já se você é um líder, dê poder às pessoas da sua equipe para que elas te ajudem, caso a decisão seja um pouco mais de risco deixe claro que você tem que estar envolvido ou peçam para a equipe manter você informado.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Tomar%20decis%C3%B5es&url=https%3A%2F%2Fdevpleno.com%2Ftomar-decisoes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftomar-decisoes)

---

# O que é a Toptal?

URL: https://devpleno.com/toptal-serietrabalhoremoto

> Você já conhece a Toptal? Entenda o papel desta empresa que é uma das principais referências quando falamos em trabalho remoto. <div className=&#34;embedrespon...

Carreira

## O que é a Toptal? | Série Trabalho Remoto

T
Por Tulio Faria • 9 de fevereiro de 2018

[Carreira](/tag/carreira)

Você já conhece a Toptal? Entenda o papel desta empresa que é uma das principais referências quando falamos em trabalho remoto.

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

[](https://go.devpleno.com/fsm?utm_source=blog&#x26;utm_campaign=rc_blogpost&#x26;sck=blog)

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=O%20que%20%C3%A9%20a%20Toptal%3F%20%7C%20S%C3%A9rie%20Trabalho%20Remoto&url=https%3A%2F%2Fdevpleno.com%2Ftoptal-serietrabalhoremoto) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftoptal-serietrabalhoremoto)

---

# Trabalhar como freelancer: 7 sites para conseguir jobs como programador - DevPleno

URL: https://devpleno.com/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador

> Conheça 7 plataformas para encontrar trabalho como programador freelancer, incluindo Toptal, Upwork e 99Freelas. Dicas para come��ar.

Carreira

## Trabalhar como freelancer: 7 sites para conseguir jobs como programador

T
Por Tulio Faria • 4 de abril de 2026

[Carreira](/tag/carreira)

A demanda por programadores freelancers nunca foi tão alta. Com o crescimento do trabalho remoto nos últimos anos, cada vez mais empresas ao redor do mundo contratam desenvolvedores de qualquer lugar — e o Brasil tem se destacado como um dos maiores exportadores de talento tech.

Trabalhar como freelancer oferece vantagens reais: você monta seus próprios horários, pratica inglês no dia a dia, ganha em moeda forte e constrói uma [carreira](https://www.devpleno.com/carreira-tomar-decisoes) com experiência internacional. E o melhor: você não precisa ser sênior para começar.

**
Se você já trabalha ou pretende trabalhar para empresas do exterior, precisa legalizar seus recebimentos no Brasil. A [Conta49](https://www.conta49.com.br) é uma contabilidade especializada em programadores que atuam remotamente para o exterior. Eles entendem as particularidades de receber em dólar, abrir PJ para tech e lidar com a tributação de serviços exportados. Acesse [www.conta49.com.br](https://www.conta49.com.br) e conheça os serviços.

Reuni 7 plataformas onde você pode encontrar trabalhos freelance como programador — desde opções para quem está começando até redes que pagam em dólar para os mais experientes.

## 1. Toptal

A [Toptal](https://www.toptal.com) é uma rede que seleciona apenas os top 3% dos freelancers do mundo por meio de um processo seletivo rigoroso. Eu trabalho por meio da Toptal e posso dizer que, uma vez aprovado, você tem acesso a projetos de grandes empresas e multinacionais, com pagamento em dólar.

Os projetos variam entre tempo integral, meio período e por hora. A grande vantagem é a qualidade dos clientes e a estabilidade — muitos contratos duram meses ou anos. O processo seletivo é puxado (envolve entrevista técnica, live coding e projeto teste), mas compensa pelo nível dos projetos e da remuneração.

Ideal para:** devs com experiência sólida que querem projetos de alto nível pagos em dólar.

## 2. Upwork

O [Upwork](https://www.upwork.com) é a maior plataforma de freelance do mundo. Você cria um perfil, anexa seu portfólio e se candidata a projetos de clientes internacionais. Há trabalhos pagos por hora e por projeto, em áreas como JavaScript, Python, React, Node.js, mobile e muito mais.

A plataforma funciona com um sistema de propostas — você encontra um projeto, envia sua oferta com preço e prazo, e o cliente escolhe. Conforme você acumula avaliações positivas, fica mais fácil conseguir projetos melhores. O pagamento é em dólar.

**Ideal para:** qualquer nível de experiência, especialmente quem quer começar a trabalhar para o exterior.

## 3. Freelancer.com

O [Freelancer.com](https://www.br.freelancer.com) é um dos maiores marketplaces do mundo, com milhões de usuários. A plataforma oferece projetos em diversas áreas — programação, desenvolvimento de apps, HTML, processamento de dados e mais.

Você se cadastra, participa de testes que certificam suas habilidades e se candidata aos projetos disponíveis. Há também categorias de concursos e programas de freelancer preferencial com comissões menores.

**Ideal para:** quem está começando e quer construir um portfólio com projetos variados.

## 4. Workana

O [Workana](https://www.workana.com/pt) tem foco na América Latina e oferece milhares de projetos, desde desenvolvimento web e mobile até tradução e design. Uma vez cadastrado, você pesquisa projetos que se encaixam nas suas habilidades, compara os que pagam por hora vs. preço fixo, e envia propostas.

A plataforma é bastante usada no Brasil e em toda a América Latina, o que facilita a comunicação — muitos projetos são em português ou espanhol.

**Ideal para:** devs que preferem projetos em português/espanhol e querem começar no mercado freelancer latino-americano.

## 5. 99Freelas

O [99Freelas](https://www.99freelas.com.br) é uma plataforma brasileira com mais de 3 milhões de freelancers cadastrados e mais de 138 mil projetos realizados. Os projetos abrangem TI, design, marketing e mais.

Você se cadastra, completa seu perfil e se candidata aos projetos disponíveis. A cada tarefa concluída, recebe avaliações que aumentam sua visibilidade. O pagamento é intermediado pela plataforma, o que dá mais segurança para ambas as partes.

**Ideal para:** quem quer começar com projetos nacionais em português, sem a barreira do idioma.

## 6. Scalable Path

O [Scalable Path](https://www.scalablepath.com) funciona de forma diferente dos marketplaces tradicionais. A própria equipe da plataforma faz testes e entrevistas com você, e depois conecta com clientes internacionais que procuram habilidades específicas — como desenvolvimento iOS, Android, React, PHP ou Node.js.

Isso significa que você não precisa ficar buscando projetos ativamente. Uma vez aprovado, eles fazem o match com empresas que precisam do seu perfil. Os projetos são internacionais e pagos em dólar.

**Ideal para:** devs com experiência que preferem ser selecionados em vez de competir em leilões.

## 7. Trampos.co

O [Trampos.co](https://trampos.co) é uma plataforma brasileira com mais de 1,2 milhão de profissionais cadastrados. Não é exclusivamente para freelancers — também lista vagas CLT, PJ e estágio — mas tem uma boa oferta de trabalho remoto para desenvolvedores.

Você pesquisa vagas por cidade, área (programação, criação, marketing) e tipo de contrato. O cadastro é gratuito para profissionais, e a plataforma também oferece conteúdo educacional pelo Trampos Academy.

**Ideal para:** quem busca tanto freelance quanto vagas fixas remotas no mercado brasileiro.

## Como escolher a plataforma certa?

Não existe uma resposta única. Minha recomendação:

- **Está começando?** Comece pelo 99Freelas ou Workana para construir reputação sem a barreira do idioma.

- **Tem inglês intermediário?** Crie perfil no Upwork e no Freelancer.com para acessar o mercado internacional.

- **Tem experiência sólida?** Invista no processo seletivo da Toptal ou Scalable Path — os projetos e a remuneração compensam.

- **Quer diversificar?** Mantenha perfis em 2-3 plataformas e veja onde consegue mais tração.

O mais importante é começar. Não espere estar “pronto” — muitos freelancers de sucesso começaram com projetos simples e foram evoluindo conforme ganhavam experiência e avaliações positivas.

Aproveite para [saber mais sobre trabalho remoto](https://www.youtube.com/watch?v=37Jxj1DhSjg) e o que é necessário para trabalhar para empresas nacionais e internacionais!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Trabalhar%20como%20freelancer%3A%207%20sites%20para%20conseguir%20jobs%20como%20programador&url=https%3A%2F%2Fdevpleno.com%2Ftrabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftrabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador)

---

# Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão! - DevPleno

URL: https://devpleno.com/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao

> Todo profissional já deve ter se perguntado as reais vantagens de se trabalhar em uma grande empresa ou de se criar um negócio próprio. E isso não é difere...

Carreira

## Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão!

T
Por Tulio Faria • 12 de agosto de 2017

*

[Carreira](/tag/carreira)

Todo profissional já deve ter se perguntado as reais vantagens de se trabalhar em uma grande empresa ou de se criar um negócio próprio. E isso não é diferente para os programadores. A possibilidade de fazer seu próprio horário e de não possuir um chefe cobrando prazos se revela bem atrativa. Por outro lado, abrir uma empresa é também correr riscos e ter de assumir responsabilidades compatíveis com essa escolha.

Na verdade, não existe um caminho certo. Ao optar em seguir por um ou por outro, você deve ter em mente, em primeiro lugar, qual é o seu perfil. Não dá pra decidir isso baseado no amigo que fez algo que deu muito certo e por isso vai dar para você também. Quando vemos de fora, o caminho pode parecer mais fácil do que realmente é.

Antes que desperdice tempo, dinheiro e energia, separamos algumas perguntas para ajudar você a pensar melhor em qual tipo de escolha se encaixaria melhor para os seus objetivos. Confira!

**Como você administra suas tarefas?**

No momento de realizar tarefas você prefere fazê-las com antecedência ou espera até o prazo final de entrega? Todo grande empreendedor é um curioso e, principalmente, um realizador. Por isso, no momento de pensar em abrir uma empresa, é importante ter essa postura.

Se você considera que se encaixa mais no perfil de procrastinador, tente analisar se possui [pensamentos limitantes](https://www.devpleno.com/pensamentos-limitantes?utm_source=blog&#x26;utm_campaign=rc_blogpost). Existe uma palavra muito comum no mundo do empreendedorismo chamada mindset*, que significa “modelos mentais”.

Desde que nascemos, estamos acostumados com certos modelos mentais, que nos são passados pela família e pela cultura em geral. Apenas uma pessoa “inquieta” consegue ultrapassar os limites desses modelos e realizar uma verdadeira mudança de *mindset*. É por meio dessa consciência que a inovação se torna possível e, consequentemente, os grandes feitos.

Então, você prefere a comodidade de receber e executar tarefas ou o desafio de buscar mudanças de pensamento que podem trazer grandes impactos para as pessoas e para a sociedade?

**Você se sente capaz de definir metas e atingi-las?**

Na vida empreendedora, é muito importante que exista [comprometimento com as metas](https://www.devpleno.com/comprometimento-com-suas-metas?utm_source=blog&#x26;utm_campaign=rc_blogpost). Como citado, o ato de realizar é o que diferencia um empreendedor de um criador. De pouco vale ser muito criativo, mas viver cheio de ideias dentro da sua mente. Isso não vai criar algo realmente transformador.

Portanto, saber definir objetivos acaba tendo um papel fundamental. Onde você quer chegar? Como pretende alcançar isso e em quanto tempo? Trabalhando dentro de uma empresa você estará cumprindo metas de outras pessoas, e não as suas.

Se você quer ser o dono de suas metas, deve responder também pelo planejamento, comercialização e fiscalização do andamento de todos os processos de seu negócio. Nesse caso, a medida do sucesso é saber não só criar um plano de ação eficaz, como executá-lo da melhor forma a partir dos recursos disponíveis.

**Você se considera uma pessoa disciplinada?**

Um empreendedor está sempre atarefado com muitas coisas, realizando e gerenciando várias atividades ao mesmo tempo, sem que ninguém peça para que ele faça isso. Ele sabe a verdadeira importância de realizá-las. Diferente de um colaborador que, basicamente, deve cumprir tarefas e uma quantidade de horas de trabalho indicadas por um gerente.

Um grande passo para a auto-disciplina é [aprender a aprender.](https://www.devpleno.com/aprenda-a-aprender?utm_source=blog&#x26;utm_campaign=rc_blogpost) Encontre o jeito que você absorve os conhecimentos de forma mais eficaz e se apaixone por isso. Aprender é sempre muito gratificante**.** Portanto, saber o que realmente mobiliza você e desperta o seu interesse pode ser o ponto crucial para uma mudança de comportamento.

Adquirir disciplina é uma questão de prática. Reflita melhor sobre as coisas que fazem você vibrar e aprenda a realizá-las da melhor forma, a partir do seu jeito. Não existem caminhos certos na vida empreendedora: existem ferramentas que auxiliam. O modo como você vai aplicá-las pode ser único e até então impensado, e essa é a maior graça disso tudo.

**Como é a sua relação com o dinheiro?**

Esse é um dos pontos muito importantes nessa história. Muito do que falamos até agora pode ser uma questão apenas de mudança de comportamento. Porém, como diria o velho ditado “é pelo bolso que se pega o sujeito”.

Você seria capaz de injetar seu dinheiro em um projeto**,** sem garantias alguma de que dará certo? E mais: sendo você o maior responsável por fazer tudo acontecer? Um funcionário de uma empresa prefere ter o salário dele garantido ao final do mês, a ter que arriscar perder tudo. Por isso, muitas vezes, os empreendedores são chamados de “loucos”.

Um ponto importante em se abrir uma empresa é estar preparado para os altos e baixos financeiros, principalmente no início. Se você não se considera apto para isso, também pode buscar ajuda de profissionais ou ir atrás de maior conhecimento sobre gestão de dinheiro e de negócios.

**Como medir o sucesso?**

Um funcionário de uma grande companhia recebe orientações sobre medidas de sucesso e formas de recompensa para os que melhor colaborarem. Por exemplo: prêmios, bonificação salarial, reconhecimentos etc.

Quando se é empresário, essas medidas já são estabelecidas e internalizadas no momento que se escolhe o próprio padrão de excelência. Muitas vezes, a depender do objetivo, não é somente o dinheiro o que importa, mas pode ser fortalecimento da marca, reconhecimento e/ou feedbacks espontâneos.

**Quanto vale o seu trabalho?**

Um conceito muito importante no momento de fazer um negócio decolar é o de [Valuation](https://endeavor.org.br/valuation-como-calcular-o-valor-da-sua-empresa?utm_source=blog&#x26;utm_campaign=rc_blogpost) (Valor). A partir dele, é possível calcular quanto vale o seu trabalho, se você for o empreendedor. Se você for o funcionário, esse valor já vem preestabelecido no momento da contratação.

Essa questão é um pouco subjetiva, mas o que deve ter em mente é que quanto mais valoriza o que faz, mais as pessoas veem isso e estão dispostas a pagar pelo preço que você considera justo.

Trabalhar a preços irrisórios só para conseguir clientes é, muitas vezes, um tiro no pé. Você se sente explorado e desmotivado no desempenho de suas funções, pois sabe que vale mais e o cliente pode exigir muito mais por isso. Dessa forma, é muito importante [aprender a dizer não](https://www.devpleno.com/aprenda-a-dizer-nao?utm_source=blog&#x26;utm_campaign=rc_blogpost) e buscar as condições que condizem com sua real capacidade.

A partir desses questionamentos, certamente, você vai conseguir entender melhor se a decisão de abrir uma empresa é realmente a melhor para sua vida!

Por falar em empreendedorismo, você pode gostar destes nossos 2 vídeos:

- [3 dicas para empreender em software](https://www.youtube.com/watch?v=A5RgxkpJIrA&#x26;utm_source=blog&#x26;utm_campaign=rc_blogpost)

- [Como negociar software (ou qualquer outra coisa)](https://www.youtube.com/watch?v=FszhDTUw2E0&#x26;utm_source=blog&#x26;utm_campaign=rc_blogpost)

Se você gostou do conteúdo e deseja estar sempre atualizado com dicas e cursos para empreender como programador, [curta a nossa página no Facebook](https://www.facebook.com/devpleno?utm_source=blog&#x26;utm_campaign=rc_blogpost) e não fique de fora das novidades!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Trabalhar%20em%20uma%20grande%20empresa%20ou%20abrir%20uma%20empresa%3F%20Desvende%20a%20quest%C3%A3o!&url=https%3A%2F%2Fdevpleno.com%2Ftrabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao) [](ht

---

# Tudo na vida acontece duas vezes! - DevPleno

URL: https://devpleno.com/tudo-acontece-duas-vezes

> Você sabia que tudo que você pensa acontece duas vezes? Uma vez na sua cabeça e outra vez quando você implementa ou realiza isso de fato. Isso acontece com...

Carreira

## Tudo na vida acontece duas vezes!

T
Por Tulio Faria • 8 de setembro de 2017

[Carreira](/tag/carreira)

Você sabia que tudo que você pensa acontece duas vezes? Uma vez na sua cabeça e outra vez quando você implementa ou realiza isso de fato. Isso acontece com tudo, desde o código que você está programando até um projeto que está implementando.

O detalhe é que toda vez que você for pensar em projetos ou qualquer outra coisa que queira realizar, pense com um máximo de detalhes, sentimentos e sensações que você puder. Por exemplo, se você sonha em ter sua startup de tecnologia, sonhe com você acordando cedo, trocando de roupa empolgado e entrando nela, sentindo o cheiro do ambiente… Quando mais dessas sensações você conseguir sentir, mais vai estar preparado na hora de implementar.

Os pensamentos limitantes são o contrário de você pensar duas vezes, porque você usa esse poder da mente no modo negativo, ou simplesmente não usa. Quando começamos a visualizar as coisas positivas, estamos realmente usando ela para alcançar coisas novas.

Vamos supor que você quer comprar um carro novo, imagine você dirigindo o carro, sentindo o cheiro dele… Você vai perceber que vai ficar mais próximo de comprar um carro novo do que se você só estivesse vendo uma foto de revista, por exemplo. Então faça isso irá perceber que vai prosperar muito na carreira.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Tudo%20na%20vida%20acontece%20duas%20vezes!&url=https%3A%2F%2Fdevpleno.com%2Ftudo-acontece-duas-vezes) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Ftudo-acontece-duas-vezes)

---

# Descrição das vagas de emprego no Brasil x no exterior - DevPleno

URL: https://devpleno.com/vagas-de-emprego-no-brasil-e-no-exterior

> Hoje quero comentar um email que recebi e achei bastante relevante falar sobre, principalmente quando estamos olhando para o mercado de desenvolvedor web. ...

Carreira

## Descrição das vagas de emprego no Brasil x no exterior

T
Por Tulio Faria • 26 de setembro de 2017

[Carreira](/tag/carreira)

Hoje quero comentar um e-mail que recebi e achei bastante relevante falar sobre, principalmente quando estamos olhando para o mercado de desenvolvedor web.

A pergunta no e-mail era a seguinte: Em vagas de empregos no exterior para desenvolvedor fullstack, existem informações bem pontuais, ou seja, exatamente o que os profissionais precisam saber.

Em contrapartida, as vagas no Brasil exigem tudo e não pagam nada. Por quê? Eu acredito que no Brasil o pessoal ainda não está acostumado a contratar pessoas de tecnologia, geralmente são empresas de RH que não tem a ideia do perfil que eles vão procurar.

Como eles procuram de forma abrangente, não é filtrado o que a pessoa precisa saber. À medida que começarmos a ter mais empresas de RH conhecendo a área, melhor vai ficar a contratação.

No exterior isso já é muito comum, quem contrata engenheiros ou desenvolvedores de softwares são outros engenheiros ou desenvolvedores, não mais pessoas somente do RH, por esse motivo há essa diferença.

O que eu fiz para contratar meus funcionários?

Um deles aconteceu dele conversar comigo e eu estar precisando, como já o conhecia, acabei contratando. O outro eu coloquei na descrição da vaga que precisava de pessoas que trabalhem com JavaScript e tivessem vontade de desenvolver nessa área, simplesmente isso.

Isso vai muito da preparação da pessoa que está recrutando, muitas vezes a pessoa não sabe o que quer ou esperar de habilidade desse profissional. Para mim não era importante o JavaScript, eu coloquei para eu ter um norte, já que precisava de alguém que tivesse vontade de aprender e foi o que aconteceu.

Na Toptal, por exemplo, todos os testes que fiz, foram feitos por engenheiros de softwares da Toptal.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Descri%C3%A7%C3%A3o%20das%20vagas%20de%20emprego%20no%20Brasil%20x%20no%20exterior&url=https%3A%2F%2Fdevpleno.com%2Fvagas-de-emprego-no-brasil-e-no-exterior) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fvagas-de-emprego-no-brasil-e-no-exterior)

---

# Validade de um projeto/ideia/ação - DevPleno

URL: https://devpleno.com/validade

> Na dica de hoje, eu quero mostrar pra você que nem sempre a gente tem que ir até o fim com as coisas, é algo que eu estou passando nesse momento e sempre r...

Carreira

## Validade de um projeto/ideia/ação

T
Por Tulio Faria • 6 de setembro de 2017

[Carreira](/tag/carreira)

Na dica de hoje, eu quero mostrar pra você que nem sempre a gente tem que ir até o fim com as coisas, é algo que eu estou passando nesse momento e sempre repenso sobre a minha empresa, sobre as coisas que estamos fazendo e se estamos indo pelo caminho certo.

Quando você cria um projeto novo e está em uma empreitada nova, além do empenho e tudo que você precisa para executar, uma das coisas que a gente esquece de definir é quando parar, qual o prazo de validade do projeto ou do atendimento a um cliente específico.

Por exemplo, coisas que já errei na minha vida: eu já tive empresas que não defini um prazo para acabar. Se ela não conseguiu ter X de faturamento, precisava fechar as portas. Isso é muito importante para que a gente consiga alinhar se estamos indo para um caminho certo ou não.

Quando você for atender um cliente é a mesma coisa, muitas vezes um projeto começa sobre uma perspectiva e, à medida que ele vai evoluindo, você começa a mudar esse rumo. Se você não consegue chegar ao fim e bate na validade do projeto que definiu, pode ser contratual ou uma meta pessoal, principalmente se o resultado é importante para você assim como é para mim e você não está conseguindo entregar resultado, isso é um indício de que a validade com ele acabou.

Outra coisa que pode acontecer quando está atendendo um cliente é ele não ficar lucrativo. Às vezes você está gastando muito mais energia para atender esse cliente do que você está tendo de lucro, então esse projeto que está “empatando”, é prejuízo. Eu considero que se você está muito próximo de ter uma margem de lucro, às vezes esse lucro não vale a pena e isso é um indício de que você precisa ou renegociar ou simplesmente expirar e não atender mais esse cliente. São pontos muito importantes que temos que definir para nosso negócio ou carreira.

Muitas pessoas dizem “mas você não quer ganhar dinheiro?, mas esquecem que tem várias contas que você tem que fazer e pensar por fora além disso. Um exemplo interessante: eu já recebi várias propostas de trabalho no exterior, muitas vezes é para receber um salário inferior ao que eu consigo gerar de resultado aqui no Brasil, então temos que ver o custo dessa oportunidade, que é a validade. Quando eu tiver uma estabilidade financeira, posso arriscar mais e ter essa nova experiência. Isso é muito importante, pois quando você chegar nesse ponto não vai ser a dor que vai fazer você tomar a decisão e sim a validade que você colocou quando estava confortável para decidir aquilo.

Quando você está fazendo sua empresa dar certo, por exemplo, se você definir a validade no momento em que você está passando aperto, não é a validade que está fazendo você tomar a decisão e sim a dor, por isso é importante fazer a validade antes que você passe por aquela situação.

Então toda vez que você for começar um projeto novo, uma empreitada nova, atender um cliente novo, qualquer coisa que dependa da sua energia, defina uma validade.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Validade%20de%20um%20projeto%2Fideia%2Fa%C3%A7%C3%A3o&url=https%3A%2F%2Fdevpleno.com%2Fvalidade) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fvalidade)

---

# Vantagens da Injeção de dependência para a testabilidade do código - DevPleno

URL: https://devpleno.com/vantagens-da-injecao-de-depencia

> Já havia falado por aqui sobre injeção de dependência, disse que muitas vezes não temos acesso ao que estamos testando. Desta vez, falo sobre as vantagens ...

Javascript

## Vantagens da Injeção de dependência para a testabilidade do código

T
Por Tulio Faria • 1 de junho de 2017

[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)

Já havia falado por aqui sobre [injeção de dependência](https://www.devpleno.com/injecao-de-dependencia/), disse que muitas vezes não temos acesso ao que estamos testando. Desta vez, falo sobre as vantagens da injeção de dependência na testabilidade do código. Vamos criar um alert que é uma arrow function no qual eu passo um alert e uma mensagem. Lembrando que, nesse caso, o alert é a injeção de dependência, então é ele quem eu estou mandando para essa função chamar.

const alerts = {
alerts: (alert, message) => alert(message)
}

module.exports = alerts
No exemplo acima, temos um módulo que alerta o usuário. É igual o alert do browser, tanto é que chamamos o alert. Então, qual a diferença? Se eu chamasse realmente o alert do browser, ele não conseguiria rodar este teste no node, então usualmente rodamos os testes sem o browser primeiro e depois rodamos em um browser que ainda não tem tela. A ideia é conseguir testar as funcionalidades do código sem necessariamente startar um browser porque isso é muito pesado. Se fossemos utilizar essa função no browser, faríamos assim:

const alerts = {
alerts: (alert, message) => alert(message)
}
alerts.alert(window.alert, 'message')
module.exports = alerts
Mas como vamos testar sem ter um browser, eu sei que tem um window.alert, e quando for utilizar, eu vou passar este valor para ele, mas na hora do meu teste temos que importar o alertUser:

const alertUser = require('./alert-user')
test('it calls alert', () => {
const alertMock = jest.fn()
alertUser.alert(alertMock, 'message')
console.log(alertMock.mock.calls)
}
Perceba que criei um Mock para o alert. **O que é um Mock?** Uma função que está no nosso controle e que usamos apenas para retornar um valor. Assim é possível testar o nosso código. Temos, então, que garantir que o alert faça o que ele deveria fazer, que é passar a mensagem. Note que se passarmos o alertMock.mock.calls, sabemos exatamente que o alert foi chamado. Se quisermos deixar o código mais organizado, sem aquele aspecto de gambiarra, podemos fazer o seguinte:

const alertUser = require('./alert-user')
test('it calls alert', () => {
const alertMock = jest.fn()
const msg = 'message'
alertUser.alert(alertMock, msg)
expect(alertMock.mock.calls [0][0]).toBe('msg')
}
Agora vamos supor que nosso código tem algum erro, então ele não chama o alert, apenas retorna

const alerts = {
alerts: (alert, message) => 1
}
module.exports = alerts
Perceba que ele daria um erro, pois o mock não foi chamado. Quando ‘mockamos’ temos um controle ainda maior dos nossos testes, sem depender de nada externo ou gambiarra de injetar no módulo. O grande detalhe é o seguinte: quando vamos chamar o alertUser no visual studio, ele já mostra o alert e qual message eu quero, assim fica muito mais claro o que precisa para ele rodar. Portanto, a vantagem de injetarmos dependência é ter essa facilidade de testar sem depender desse load dinâmico das dependências. Simplesmente mockamos a dependência que temos e nosso código vai funcionar. Além disso, fica mais fácil de ler. Confira o hands-on em vídeo:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Vantagens%20da%20Inje%C3%A7%C3%A3o%20de%20depend%C3%AAncia%20para%20a%20testabilidade%20do%20c%C3%B3digo&url=https%3A%2F%2Fdevpleno.com%2Fvantagens-da-injecao-de-depencia) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fvantagens-da-injecao-de-depencia)

---

# Verificando o tempo para executar um trecho de código em Javascript - DevPleno

URL: https://devpleno.com/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript

> Uma tarefa que venho executando bastante nos últimos dias, principalmente por participar de alguns processos de seleção para projetos é em relação a perfor...

Javascript

## Verificando o tempo para executar um trecho de código em Javascript

T
Por Tulio Faria • 1 de fevereiro de 2017

[Javascript](/tag/javascript)

Uma tarefa que venho executando bastante nos últimos dias, principalmente por participar de alguns processos de seleção para projetos é em relação a performance de um trecho de código. Em muitas destas entrevistas, fui questionado sobre a complexidade de minha solução utilizando a notação big-o (sim, aquela que gera algo como O(n) ou O(n²) para uma dada complexidade - iremos falar mais sobre isso em outros posts). Fora do mundo acadêmico (ou destes testes), eu prefiro checar a complexidade através do tempo de execução de um trecho de código. Então, a ideia é a seguinte:

- salvamos a data/hora atual

- executamos o trecho de código

- pegamos a data/hora atual e subtraímos o valor encontrado no item 1.

Simples né? Vamos fazer agora em Javascritp:

const inicio = new Date().getTime()
// trecho de código que queremos mensurar
const total = new Date().getTime() - inicio
console.log('Foi executado em: ', total)
O interessante é que em Javascript já temos uma maneira mais específica de fazer isso. Bastando apenas chamar console.time(“nome do timer”) no início, e console.endTime(“nome do timer”) no fim da execução. O código ficaria assim:

console.time('TempoLoop')
// trecho de código a ser medido
console.endTime('TempoLoop')
O tempo de execução será exibido em milisegundos em ambos os casos. Um ponto muito importante quando estamos medindo o tempo de execução de um trecho de código é não executar console.log dentro de laços repetição ou dentro de algorítmo onde ele será executado várias vezes. O node/browser ou até mesmo a saída no console em outras linguagens é muito custosa, e vai atrapalhar seus testes, por deixar de maneira geral seu código rodando mais lentamente. Existem outras formas de fazer isso, com profiling e outras ferramentas. Mas esse será tema para outro post :) Não deixem de comentar e nos seguir em todas as redes sociais, até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastra seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Verificando%20o%20tempo%20para%20executar%20um%20trecho%20de%20c%C3%B3digo%20em%20Javascript&url=https%3A%2F%2Fdevpleno.com%2Fverificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fverificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript)

---

# Redirecting to: /

URL: https://devpleno.com/viverdesoftware

Redirecting to: / [Redirecting from /viverdesoftware to /](/)

---

# Você precisa ter DOM para ser um bom profissional? - DevPleno

URL: https://devpleno.com/voce-precisa-ter-dom-para-ser-um-bom-profissional

> Você acredita que as pessoas realmente só aprendem se têm DOM? Neste vídeo, comento a opinião sobre este assunto e explico porque não acredito em dom. Conf...

Carreira

## Você precisa ter DOM para ser um bom profissional?

T
Por Tulio Faria • 22 de março de 2017

[Carreira](/tag/carreira)

Você acredita que as pessoas realmente só aprendem se têm DOM? Neste vídeo, comento a opinião sobre este assunto e explico porque não acredito em dom. Confira!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastra seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=Voc%C3%AA%20precisa%20ter%20DOM%20para%20ser%20um%20bom%20profissional%3F&url=https%3A%2F%2Fdevpleno.com%2Fvoce-precisa-ter-dom-para-ser-um-bom-profissional) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fvoce-precisa-ter-dom-para-ser-um-bom-profissional)

---

# WebAudioAPI - Gerando um som no browser - DevPleno

URL: https://devpleno.com/webaudioapi

> Hoje eu quero falar um pouco sobre WebAudioAPI e como podemos gerar sons dinamicamente no browser. Vamos começar fazendo uma função que toca um som e depoi...

Javascript

## WebAudioAPI - Gerando um som no browser

T
Por Tulio Faria • 17 de outubro de 2017

[Javascript](/tag/javascript)

Hoje eu quero falar um pouco sobre WebAudioAPI e como podemos gerar sons dinamicamente no browser. Vamos começar fazendo uma função que toca um som e depois vamos fazer uma variação do formato de onda. Todo som que eu quiser reproduzir aqui eu preciso de um contexto de áudio. Eu consigo trazer ele de duas formas: utilizando o áudio contexto ou nos browser de webkit, webkit audiocontext:

&#x3C;html>
&#x3C;head>
&#x3C;tittle>WebAudioAPI&#x3C;/tittle>
&#x3C;/head>
&#x3C;body>
&#x3C;script>
const contexto = (window.AudioContext || window.webkitAudioContext)
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
Agora, com o contexto pronto, precisamos criar um oscilador, que é uma forma de gerar essa onda dinâmica:

const osc = contexto.createOscillator()
Com isso conseguimos começar a brincar com o oscilador, por exemplo:

osc.type = 'sine'

osc.frequency.value = 440
No exemplo, colocamos ele em uma frequência de 440 hertz e agora vamos linkar com o destino do contexto e iniciar o oscilador e depois pedimos para ele pausar depois de dois segundos:

osc.connect(context.destination)

osc.start()

osc.stop(contexto.currentTime + 2)
Ao rodar por dois segundos, ele emitirá um som. Agora vamos criar um select, dentro dele podemos variar o tipo de onda:

&#x3C;select id=”type” onchange=”play()”>
&#x3C;option>-&#x3C;/option>
&#x3C;option value=”sine”>Sine&#x3C;/option>
&#x3C;option value=”square”>Square&#x3C;/option>
&#x3C;option value=”sawtooth”> Sawtooth &#x3C;/option>
&#x3C;option value=”triangle”> Triangle &#x3C;/option>
&#x3C;/select>
Agora, dentro de script, colocaremos uma function play:

&#x3C;script>

function play(){
const contexto = (window.AudioContext || window.webkitAudioContex)t
const osc = contexto.createOscillator()
osc.type = document.getElementById('type').value
osc.frequency.value = 440
osc.connect(context.destination)
osc.start()
osc.stop(contexto.currentTime +2)
}
&#x3C;/script>
Assim já conseguimos criar um sintetizador de áudio, sem precisar de um arquivo de áudio. Podemos, por exemplo, pegar a frequência de cada nota e trabalhar em cima dela.

Confira o video:

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!

#### Gostou do conteúdo?

Compartilhe este artigo com outros devs.

[](https://twitter.com/intent/tweet?text=WebAudioAPI%20-%20Gerando%20um%20som%20no%20browser&url=https%3A%2F%2Fdevpleno.com%2Fwebaudioapi) [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fdevpleno.com%2Fwebaudioapi)

---

# authors/tulio-faria.md

Source: authors/tulio-faria.md



---

# 10 dicas de produtividade para programadores

Source: blog/10-dicas-de-produtividade-para-programadores/index.md

Ser um profissional produtivo é uma exigência do mercado de trabalho no cenário altamente competitivo em que vivemos. Os resultados são requisitados cada vez mais rapidamente e sempre com a melhor qualidade. E aqueles profissionais que conseguem atender a essa demanda são muito valorizados.

Na era digital, porém, há muitas distrações que podem fazer os níveis de [produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&utm_campaign=rc_blogpost) despencar. É assim em todas as áreas, inclusive no mundo do desenvolvimento de _software_. Contudo, existem soluções e comportamentos que podem ajudar a melhorar isso. Apresentamos algumas dicas de produtividade na lista a seguir.

### 1\. Escolha a ferramenta certa

Há diversas ferramentas que podem ser utilizadas para organizar os fluxos de trabalho e, assim, melhorar a sua produtividade. Elas auxiliam em diferentes atividades. Confira:

#### Gestão de projetos

Planejamento e produtividade sempre andam de mãos dadas. Um bom planejamento aumenta a produtividade, mas a falta dele pode fazer com que algumas tarefas sejam adiadas caso haja atrasos em atividades das quais dependem. Com essa quebra de sequência e os constantes retornos aos processos anteriores, a produtividade cai.

Entre os programas que podem ajudar você em seus projetos estão o [Gantter](https://gantter.com?utm_source=blog&utm_campaign=rc_blogpost) (integrável ao Drive do Google), e o [MS Project](https://products.office.com/pt-br/project/project-management?utm_source=blog&utm_campaign=rc_blogpost), da Microsoft. Com eles, é possível definir o cronograma detalhado do projeto, com prazos para cada atividade e relação de dependência entre elas. Enquanto o Project apresenta mais funcionalidades que o Gantter, este último é gratuito e online — e eles são compatíveis.

#### Gestão de tarefas

Saber definir prioridades entre as tarefas é crucial para a produtividade. Ferramentas como o [Trello](https://trello.com?utm_source=blog&utm_campaign=rc_blogpost) e o [Asana](https://asana.com?utm_source=blog&utm_campaign=rc_blogpost) ajudam a gerenciar tarefas, definindo responsáveis e prazos para cada uma. Desta forma, visualizar as diversas atividades que compõem o projeto fica mais simples, possibilitando elencar a prioridade entre elas.

#### Editores de texto

Entre os editores de texto mais usados pelos programadores estão o [Notepad++](https://notepad-plus-plus.org?utm_source=blog&utm_campaign=rc_blogpost), [Sublime Text](https://www.sublimetext.com?utm_source=blog&utm_campaign=rc_blogpost) e o VS Code. Todos são leves e aceitam _plugins/extensões_ que agregam funcionalidades ao _software_. [Na hora de utilizar o editor, uma dica é reduzir a troca de contextos em prol da produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&utm_campaign=rc_blogpost).

#### Versionamento

Quando se está criando um _software_, é essencial não perder linhas de código já desenvolvidas. Uma das melhores formas de prevenir que um trecho de código seja sobrescrito ou que ocorra um _bug_ causado por alguma alteração no código-fonte é usar o sistema de versionamento [git](https://git-scm.com?utm_source=blog&utm_campaign=rc_blogpost), disponível nas plataformas [Bitbucket](https://bitbucket.org?utm_source=blog&utm_campaign=rc_blogpost) e [Github](https://github.com?utm_source=blog&utm_campaign=rc_blogpost).

#### Qualidade do código

A qualidade do código está diretamente relacionada à produtividade do desenvolvedor. Com o [SonarQube](https://www.sonarqube.org?utm_source=blog&utm_campaign=rc_blogpost), por exemplo, é possível analisar a qualidade do código em mais de 40 [linguagens](https://www.devpleno.com/quantas-linguagens-programar?utm_source=blog&utm_campaign=rc_blogpost), como PHP, Java, Javascript, Python, C#, C/C++, entre outros. Outra possibilidade é utilizar algum módulo, como o [StandardJS](https://www.devpleno.com/standard-parte-1?utm_source=blog&utm_campaign=rc_blogpost).

### 2\. Aposte nos atalhos e _snippets_

Atalhos, _snippets_ e templates (partes de código já prontas e com lacunas a serem preenchidas) ajudam o desenvolvedor que precisa lidar com instruções, trechos, blocos e partes de código-fonte. É interessante, ainda, personalizar atalhos complexos — que vão além daqueles disponíveis no sistema operacional.

### 3\. Hardware

Algumas soluções de _hardware_ podem melhorar a produtividade. É o caso dos múltiplos monitores e dos mouses com botões programáveis, que podem reduzir o tempo necessário para a execução das tarefas. Além disso, existem aplicações que modificam o _desktop_ para torná-lo mais eficiente.

### 4\. Conforto para o cérebro

Outra dica importante para aumentar a sua [produtividade](https://www.youtube.com/watch?v=6Dx0abJtNvY&utm_source=blog&utm_campaign=rc_blogpost) tem a ver com o bem-estar mental. O desenvolvimento de *software *é uma atividade que demanda bastante do cérebro do programador, pois envolve raciocínio lógico e concentração.

Além disso, a preocupação com os prazos e a necessidade de estar sempre atento às novidades do mercado acabam causando estresse. Por isso, é muito importante procurar manter o seu cérebro confortável e motivado. Ações simples podem ajudar:

#### Plantas

Um [estudo](https://www.uq.edu.au/news/article/2014/09/leafy-green-better-lean?utm_source=blog&utm_campaign=rc_blogpost) da Universidade de Queensland, na Austrália, descobriu que a presença de plantas no ambiente de trabalho aumenta a produtividade em até 15%.

#### Pausas

Embora pareçam difíceis de encaixar na rotina, segundo Tony Schwartz, autor de [The Way We’re Working Isn’t Working](https://www.amazon.com/Way-Were-Working-Isnt-Performance/dp/1439127662/ref=sr_1_1?ie=UTF8&s=books&qid=1273182790&sr=1-1&utm_source=blog&utm_campaign=rc_blogpost), pausas de 20 minutos a cada 90 minutos trabalhados aumentam a atenção, o foco e a energia.

Um [estudo](https://www.health.harvard.edu/newsletter_article/napping-may-not-be-such-a-no-no?utm_source=blog&utm_campaign=rc_blogpost) da Universidade de Harvard, também mostra que cochilar de 20 a 30 minutos toda tarde incentiva o hipotálamo a funcionar melhor. Você pode ainda gerenciar seu tempo utilizando o Pomodoro, falamos mais disso [neste post](https://www.devpleno.com/como-ser-muito-mais-produtivo?utm_source=blog&utm_campaign=rc_blogpost).

### 5\. Alimentação saudável

Dados da [Organização Mundial da Saúde](https://www.mindflash.com/blog/2011/09/does-the-food-we-eat-affect-our-productivity?utm_source=blog&utm_campaign=rc_blogpost) (OMS) demonstram que uma alimentação adequada também pode aumentar a produtividade em 20%.

### 6\. Música e redes sociais

As suas músicas preferidas ajudam na concentração, segundo [Teresa Lesiuk](https://graphics8.nytimes.com/packages/pdf/business/LESIUKarticle2005.pdf?utm_source=blog&utm_campaign=rc_blogpost), professora de terapia musical da Universidade de Miami. Com elas, é possível fazer as tarefas mais rapidamente e ter ideias melhores, já que ouvir sons melodiosos libera dopamina, um hormônio relacionado ao prazer.

Além disso, pausas para usar as redes sociais no _smartphone_ tornam as pessoas mais dispostas para trabalhar, segundo um [estudo](https://www.k-state.edu/media/newsreleases/jul14/smartphone7714.html?utm_source=blog&utm_campaign=rc_blogpost) da Universidade do Kansas, nos EUA.

### 7\. Pense rápido

A capacidade de tomar decisões rápidas é útil para qualquer profissional. Algumas estratégias podem ajudar nisso.

- planejamento: vai nortear as ações e fundamentar a tomada de decisões. Se for bem feito, aumenta as chances de ajudar no acerto das escolhas;
- criatividade: a coragem para inovar pode ser a chave do sucesso em um processo de desenvolvimento de _software_;
- plano B: quando algo não sai como previsto, é preciso ter um plano B para que as decisões sejam mais automáticas;
- pense rápido: pensar de forma ágil é essencial para não comprometer o andamento das atividades;
- experiência: expertise, conhecimento de mundo, _know how_ de executivo, informações da vida acadêmica, livros lidos e desafios enfrentados formam um repertório importante na tomada de decisões;
- fundamentação: fatos, relatórios, documentos, planilhas, gráficos e projeções financeiras tornam as decisões mais consistentes.

### 8\. Home office

Uma [pesquisa](https://web.stanford.edu/~nbloom/WFH.pdf?utm_source=blog&utm_campaign=rc_blogpost) da Universidade de Stanford, nos EUA, indica que trabalhar em casa pode tornar o profissional 12% mais produtivo. Os fatores responsáveis por isso são o silêncio do ambiente e o fato de não haver colegas para tirarem sua atenção.

### 9\. Uma coisa de cada vez

Um [estudo](https://www.nber.org/papers/w16502?utm_source=blog&utm_campaign=rc_blogpost) do Bureau Nacional de Pesquisas Econômicas dos EUA revelou que aqueles profissionais que fazem muitas tarefas ao mesmo tempo são menos produtivos. Isso acontece porque o cérebro não consegue se concentrar em duas atividades cognitivas de uma só vez.

### 10\. Evite procrastinar

Adiar compromissos pode ter um impacto negativo na produtividade. Assim, definir metas e estipular prazos para a conclusão de cada atividade ajuda a evitar atrasos.

Com tudo organizado, haverá tempo para a diversão, com atividades relaxantes e prazerosas (praticar esportes, assistir filmes e ler), que podem tornar a rotina mais leve. Ser produtivo não é o mesmo que trabalhar compulsivamente; o descanso é essencial para recuperar as energias.

Gostou destas dicas de produtividade? Então venha [conhecer](https://www.devpleno.com/qual-a-sua-desculpa?utm_source=blog&utm_campaign=rc_blogpost) um pouco mais dos nossos conteúdos.


---

# 2 Tipos de Soluções de Software que você pode entregar

Source: blog/2-tipos-de-solucoes-de-software-que-voce-pode-entregar/index.md

Hoje quero falar com vocês um pouco sobre venda de software. É um conceito bastante interessante sobre as possibilidades que nós temos de entrega para o cliente.

Basicamente temos duas opções para entregar uma solução para nosso cliente.

### 1 - Entregar exatamente o que o cliente quer

Essa é a opção mais simples, geralmente é a mais utilizada por quem está começando na área. A vantagem desse tipo de solução é que entregamos o serviço muito mais facilmente. O problema é que quando o cliente quer algo e é entregue da forma que ele quer, não necessariamente dá o resultado que ele espera.

### 2 - Entregar o que o cliente realmente precisa

À medida que vai ganhando experiência, você começa a perceber que o que o cliente quer nem sempre é o que ele precisa. O problema nisso é que você precisa convencer o seu cliente que o que ele precisa é diferente do que ele quer.

Quando entregamos o que ele precisa, geralmente estamos focados no resultado final, porém isso não necessariamente significa entregar um software para o cliente.

Por exemplo, já aconteceu comigo de um potencial cliente querer mensurar algumas informações, mas na verdade, ele não precisava de um software para fazer isso, apenas um formulário de papel resolveria o problema, e foi o que fizemos.

Dessa forma, muitas vezes você não entrega software e não consegue cobrar por aquilo.

Quando estamos começando na área, com projetos menores, a chance do cliente se frustrar é menor, por esse motivo é mais seguro entregar o que o cliente quer.

Quando vamos entregar uma solução eficaz para o cliente, muitas vezes não é desenvolver um software, porém tem clientes que não estão abertos a isso (atualmente eu tento entregar o máximo que o cliente precisa, mas não brigo se o cliente fala o que ele quer mais de três vezes.

Reflita sobre essas duas formas, quando um cliente te pedir um software, você está entregando o que o cliente quer ou o que ele precisa?

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/0u63cCONX-Y" allowFullScreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# 4 novos Métodos Strings que você precisa conhecer

Source: blog/4-novos-metodos/index.md

Quatro novas funções foram adicionadas às Strings no ES6 e são bastante interessantes para usarmos no dia a dia. Veja só:

## startsWith

Nela temos uma string qualquer e fazemos o seguinte:

```javascript
console.log('Tulio Faria'.startsWith('Tulio'))
```

Será que Tulio Faria começa com a palavra Tulio? Se sim, é retornado true. Lembrando que ele é case sensitive, então se tiver a palavra 'tulio' dentro do startsWith, seria retornado um false. Ainda não é possível fazer isso sem o case sensitive.

Podemos também definir a partir de qual parte ele comece a considerar, por exemplo:

```javascript
console.log('Tulio Faria'.startsWith('ulio', 1))
```

Assim ele começa a considerar a partir da primeira letra.

## endsWith

Ele que faz basicamente a mesma coisa que o Starts, mas pega o final, por exemplo:

```javascript
console.log('Tulio Faria'.endsWith('ria'))
```

Lembrando que no endsWith também conseguimos escolher a partir de qual parte considerar:

```javascript
console.log('Tulio Faria'.endsWith('ulio', 5))
```

Consideramos o parâmetro onde irá parar a string.

## Includes

Supondo que eu quero saber se no meu nome inclui 'Machado':

```javascript
console.log('Tulio Machado Faria'.includes('Machado'))
```

Ele verifica se a string está incluída.

## Repeat

Com ela podemos repetir a string quantas vezes quisermos:

```javascript
console.log('01'.repeat(10))
```

Podemos paddings de strings, pegar essa string e colocar na frente de outra, por exemplo, que funciona normalmente.

Considerando as três primeiras, se quisermos de forma insensitiva, temos algumas alternativas como passar todas para maiúsculas, todas para minúsculas ou por expressão regular.

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/CuR966gt1CU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# 8 dicas de organização para freelancers se darem bem na carreira

Source: blog/8-dicas-de-organizacao-para-freelancers-se-darem-bem-na-carreira/index.md

Nada melhor do que ter uma rotina flexível, com a possibilidade de trabalhar nos seus próprios horários, não é mesmo? Não à toa, ser freelancer é uma alternativa cada vez mais atrativa para os desenvolvedores de software.

Contudo, é preciso ter muita disciplina para atuar nessa modalidade. Afinal, o seu rendimento no final do mês será proporcional à sua dedicação e produtividade.

Para ajudá-lo a ter um melhor desempenho, compilamos algumas dicas de organização. Ao segui-las, você com certeza se sairá muito bem nessa [carreira](https://www.devpleno.com/carreira-preco-que-tem-que-ser-pago?utm_source=blog&utm_campaign=rc_blogpost). Confira:

### 1\. Tenha um fundo de reserva

Aqueles que já estão há algum tempo atuando em formas alternativas de trabalho sabem que no início é mais complicado. Como a pessoa ainda é nova nesse universo, será necessário fazer o nome dela como freelancer. Além do mais, é preciso conhecer bem o mercado para encontrar boas propostas de projetos.

No entanto, isso requer tempo. Portanto, é essencial ter uma reserva financeira, que dará o devido suporte até que você se estabilize.

O ideal nesse caso é ter uma quantia suficiente para todas as suas despesas por pelo menos três meses. Nesse período, você conseguirá ampliar sua carteira de clientes e ampliar suas possibilidades de jobs.

### 2\. Faça um planejamento

Diferente do emprego fixo, em que o profissional possui carteira assinada com um valor específico, no mundo dos freelancers a remuneração pode ser bastante diversificada. Em um mês, por exemplo, você pode tirar um valor muito alto, já em outro a remuneração pode ser menor — devido à baixa demanda.

Diante desse cenário, o profissional precisa ter um planejamento bem estruturado. O recomendado é que ele estabeleça [metas](https://www.devpleno.com/comprometimento-com-suas-metas?utm_source=blog&utm_campaign=rc_blogpost) semanais e/ou mensais, certificando-se de cumpri-las. Afinal, a sua renda depende diretamente da sua produção.

Como você não mais possuirá benefícios empresariais como plano de saúde, vale-transporte e vale-alimentação, é preciso colocar tudo isso na ponta do lápis. Somente assim você conseguirá chegar a um valor real. Afinal, você não quer ser pego de surpresa por uma despesa extra e não ter o dinheiro necessário.

Lembre-se de que você não tem uma garantia de renda. Isso significa que, ao surgir imprevistos, impossibilitando-o de trabalhar, você não receberá. Por isso, é importante sempre poupar uma certa quantia da renda, fator que proporcionará mais segurança.

### 3\. Invista em cursos de capacitação

O mundo está em constante mudança e os profissionais que buscam se destacar devem apostar em cursos de capacitação. Essa premissa também vale para os freelancers: o que te diferencia dos demais profissionais? Por que o contratante deve escolher você e não o seu colega?

Perceba, nesse aspecto, que é preciso ter habilidades e características singulares que vão agregar valor ao serviço. São tais aptidões que vão te deixar na frente dos concorrentes, facilitando a conquista de mais jobs.

Sendo assim, não tenha medo em investir na sua área, realizando cursos que vão torná-lo um freelancer mais competente.

### 4\. Organize o seu ambiente de trabalho

Ao ser freelancer, nada mais natural do que fazer _home office_, que é a possibilidade de trabalhar em casa. Mas isso não significa que você não precisa ter um local apropriado para executar as tarefas.

Pelo contrário: o mais indicado é que você organize um ambiente específico para o serviço. Essa simples ação evitará a dispersão, o que contribuirá com o seu rendimento. E, é claro, maior [produtividade](https://www.devpleno.com/como-ser-muito-mais-produtivo?utm_source=blog&utm_campaign=rc_blogpost) é garantia de maior remuneração.

Para não ter erro, separe um espaço do seu lar e transforme em uma mini-escritório, que precisará apenas de uma mesinha adequada, uma cadeira e os devidos objetos de trabalho.

### 5\. Honre os prazos

Não são raros os casos em que os freelancers assumem vários compromissos com clientes distintos e acabam não honrando os prazos. É o tal de tentar abraçar todo o mundo com apenas dois braços.

O resultado disso, como se pode imaginar, é a entrega de um serviço de baixa qualidade e fora do prazo combinado. Essa característica deixa os clientes insatisfeitos (com toda razão, né?), afetando assim sua reputação no mercado.

Portanto, uma das mais importantes dicas de organização é priorizar sempre a excelência e não a quantidade. Além do mais, em hipótese alguma faça promessas que não poderá cumprir. Como já dizia o ditado: "O combinado não sai caro".

### 6\. Defina prioridades

O freelancer deve tornar o relógio o seu principal amigo. Claro que, às vezes, vai surgir um enorme desespero originado da sensação de que não vai dar tempo de concluir todas as tarefas pretendidas. Contudo, isso somente acontece porque o profissional não conseguiu ainda se adequar à nova realidade.

Ele, nesse aspecto, precisa entender que o tempo não é seu inimigo. Entretanto, somente é possível chegar a essa mentalidade quando o freelancer começar a criar uma lista de prioridades.

Organize bem a sua agenda e estabeleça uma ordem de prioridade nos seus trabalhos. Comece por aqueles que têm a data de entrega mais próxima — afinal, você não quer correr o risco de perder o prazo, certo? Simples assim: verifique a urgência de cada projeto e produza primeiro aqueles que são emergenciais.

### 7\. Seja focado

WhatsApp, redes sociais, músicas e televisão: são várias as fontes de distrações que fazem a sua produtividade reduzir substancialmente.

Uma paradinha aqui para olhar o Facebook, outra para assistir aquele seriado bacana e, quando se der conta, o dia já está quase acabando e você não fez o que pretendia (ou deveria) fazer.

Esse é um cenário familiar? Então, provavelmente, você não está destinando a devida atenção para as suas obrigações. Para focar no seu trabalho, elimine todos os focos de distração. Desligue o celular ou faça o que for preciso para ficar concentrado.

Não existe uma regra aqui. O importante é saber como se manter compenetrado com a atividade que está sendo executada. Afinal, somente você sabe o que desvia sua atenção.

### 8\. Crie rituais

Realizar sistematicamente determinadas atividades pode ajudá-lo a se habituar com a vida de freelancer. O que você fazia antes de ir para a empresa em que trabalhava? Tomava café, lia algumas notícias e via um pouco de TV? Saiba, então, que você pode continuar tendo tais hábitos. Na verdade, você não só pode como deve, pois, assim, quando finalizá-los, a sua mente vai entender que é horário de pegar no batente.

Como em todo trabalho, existe alguns desafios que precisam ser superados no mundo dos freelancers. Mas pode apostar: não há nada mais gratificante — afinal, poder controlar seus horários e trabalhar com aquilo que se ama já é motivo o suficiente para curtir essa opção.

E você, já coloca essas dicas de organização em prática? Tem mais alguma sugestão que ajuda a lidar com a rotina de freelancer? Deixe um comentário!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# A habilidade mais importante que um programador deveria ter (e praticar)

Source: blog/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar/index.md

É muito comum na área de programação todos pensarem que a habilidade mais importante esteja relacionada ao pensamento lógico e a capacidade de resolver problemas. E não que estas habilidades não sejam importantes, mas existe uma habilidade que potencializa o resultados delas: **perguntar**.

Sim, exatamente. Perguntar é uma habilidade importantíssima. E antes que você ache isso muito estranho, vamos entender melhor.

O ato de perguntar é relacionado inclusive ao processo científico. Você já deve ter ouvido algo como "o que move o mundo são as perguntas e não as respostas". Perguntar destrava caminhos alternativos. Perguntar te leva a caminhos que talvez nem havia pensado sobre.

![Imagine este cenário](processo-perguntas.png 'O processo de perguntar')

Neste cenário hipotético da imagem anterior, o seu processo te leva a um `resultado 1`. E questionamentos e perguntas podem gerar no mínimo 3 novas opções de cenários:

- Um resultado pior (neste caso, o resultado 2)
- Nenhum resultado
- Um resultado melhor (neste caso, o resultado 3)

## Qual seria a vantagem de explorar o resultado com mais perguntas?

O grande ganho deste tipo de pensamento e processo é a exploração de potenciais resultados melhores, re-afirmar o resultado obtido como um resultado bom e ainda aumentar a possibilidade argumentativa dos motivos por qual processo ter sido melhor.

## Mas como saberei qual resultado seria o melhor?

Neste caso, para todo problema que você esteja buscando uma solução é importante ter em mente quais critérios essa solução deverá ser mensurada. Ainda usando o cenário anterior, o resultado 3, poderia ser melhor sobre um critério que não era o seu objetivo inicial, e inclusive ter sido descartado.

Trazendo para algo mais próximo do cotidiano de programação: você pode chegar em um resultado em que a performance é muito boa, porém a manutenção fica mais complexa.

Agora o grande poder: caso alguém te questione sobre o motivo de não ter usado o processo para chegar ao Resultado 3, você sabe baseado nos seus critérios.

Isso ainda vai te ajudar a solucionar problemas de uma maneira bastante inteligente, visto que cada nova decisão estará pautada.

## Como exercitar "perguntar" na prática?

**Maneira 1:** sempre questione como tudo é resolvido. Sempre que vejo alguma solução, ferramenta ou até mesmo slogan de um produto de software eu me questiono:

- Qual o motivo de fazerem desta maneira?
- Será que fazem o que estão dizendo?

**Maneira 2:** revisite suas perguntas (e suas respostas). Muitas perguntas, critérios e respostas podem ser temporárias ou atemporais. E bastante interessante revisitá-las, pois tudo pode mudar.

A muito tempo atrás, eu havia testado uma placa para IoT chamada NodeMCU (validado inclusive com várias perguntas). Na época, ela não havia passado nos critérios de uma solução que estava desenvolvendo. Refiz as perguntas recentemente, e tudo havia mudado - e agora ela é uma solução viável.

**Maneira 3:** faça provas de conceitos (proof of concept) (famosas PoCs) daquele aspecto/pergunta que você está buscando uma solução. Qual banco seria o mais adequado para uma aplicação x? Faça uma prova de conceito com seus bancos de dados candidatos respondendo a perguntas que te ajudem a desenvolver sua aplicação e critérios para avaliar os resultados.

Fazemos muitas provas de conceitos dentro da [Formação Fullstack Master](https://go.devpleno.com/fsm?sck=blog) para explorar esta habilidade. Em breve vamos aplicar em todos os nossos treinamentos - pois é uma ferramenta muito poderosa de aprendizado, masterização e argumentativo.

**Maneira 4:** crie o hábito de questionar soluções trazidas por colegas de trabalho e por sua equipe. Importante você deixar claro o motivo das perguntas para não passar por "cri-cri" ou chato. Caso você prefira, você pode guardar as perguntas e potenciais respostas para você como uma forma de praticar esta habilidade (funciona muito bem em cenários que você - por questões hierárquicas não será ouvido - e está tudo bem).

## Antes de encerrar, procure por perguntas de outras pessoas / empresas

Muitas vezes consumimos conteúdos de casos de uso de uma tecnologia x. Ou como uma big tech começou a usar y. Entenda sempre as perguntas que eles fizeram até chegarem a aquelas respostas. Isso vai te ajudar a entender se é viável para todos os cenários ou somente para quando você tem um nível de escalada desta big tech.


---

# Porque você não deve abaixar a guarda

Source: blog/abaixar-a-guarda/index.md

A dica de carreira de hoje é sobre apoio. Muitas vezes você está fazendo um projeto na faculdade, por exemplo, e todo mundo fica dizendo coisas boas sobre ele, dizendo que você vai ficar muito rico e coisas do tipo… É muito legal quando as pessoas te motivam e você quando recebe essa energia, mas dependendo do tipo de apoio, você vai abaixar sua guarda. Isso significa que você fica mais suscetível a errar e não estar preparado a entrar no mercado.

Vamos supor que você está criando um App e todo mundo só fala bem, o risco disso é você começar a parar de ser crítico com você mesmo. O grande exercício que eu gosto de fazer quando eu estou criando algo é o **“what if”**, e se a opinião dessas pessoas não está viciada, ou e se eles estão querendo me agradar? Esse é o perigo, quando você abaixa a guarda, está desprotegido e para de fazer o **“what if”** porque todos a sua volta estão aprovando essa ideia, porém elas não são o mercado como um todo e sim uma parte muito pequena.

Então minha dica é, independente se você está recebendo menos ou mais apoio, valide bastante sua ideia, pesquise com pessoas que não tem o viés, ou seja, não tem essa opinião muito pessoal sobre o assunto, assim você não abaixa a guarda e não entra despreparado para o mercado de trabalho.

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/zxYkrgMZ_Us" allowfullscreen></iframe>
</div>

Curta o DevPleno no <a href="https://www.facebook.com/devpleno">Facebook</a>,<a href="https://www.youtube.com/devplenocom">inscreva-se no canal</a> e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Algoritmos: Problema 3n+1

Source: blog/algoritmo-3n-1/index.md

Criando a solução em Javascript para o Problema 3n+1.Neste post continuamos a série de conteúdos sobre algoritmos. Principalmente sobre tipos de algoritmos que são utilizados em competições de programação e em entrevistas de emprego. O Problema 3n+1 foi retirado do livro Programming Challenges de Miguel Skiena. O objetivo do algoritmo é, dado i e j, como um intervalo de início e fim, achar o maior ciclo. O processo começa processando os valores de n. Se n é um número par, o próximo valor de n será n /2. Caso n seja impar, o próximo valor de n será 3 \* n + 1. O algoritmo termina em n = 1. A ideia é calcular o número de passos até que n seja 1. Fazendo este processo entre i e j, e achando o maior número. Neste vídeo, explico um pouco melhor como funciona o algoritmo e como ele foi resolvido.

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/voV5OBCqlVs" allowfullscreen></iframe>
</div>

[Veja no meu Gist](https://gist.github.com/tuliofaria/a92d387b68931d1294fddb1c4e259723)

Não deixe de comentar com sua opinião, sugestão ou dúvida! E cadastre seu e-mail para receber nossas últimas novidades. Abraços!

E aqui o algoritmo completo:

```js
{
  function cycleLen(n) {
    let steps = 1
    while (n !== 1) {
      if (n % 2 === 0) {
        n = n / 2
      } else {
        n = 3 * n + 1
      }
      steps++
    }
    return steps
  }
  function maxCycle(i, j) {
    let max = cycleLen(i)
    for (let k = i + 1; k <= j; k++) {
      let currentCycle = cycleLen(k)
      if (currentCycle > max) {
        max = currentCycle
      }
    }
    return i + ' ' + j + ' ' + max
  }
  console.log(maxCycle(1, 10))
  console.log(maxCycle(100, 200))
  console.log(maxCycle(201, 210))
  console.log(maxCycle(900, 1000))
}
```

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Algoritmos: Campo Minado (Minesweeper)

Source: blog/algoritmo-campo-minado-minesweeper/index.md

Continuando nossa série sobre algoritmos que são utilizados em questões de competições/maratonas de programação e em entrevistas, neste post, iremos tratar sobre o algoritmo campo minado (minesweeper), retirado do livro Programming Challenges de Miguel Skiena. No vídeo, explico detalhadamente sobre o algoritmo e como resolvê-lo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/lJbqOpm2WGg" allowfullscreen></iframe>
</div>

```jsx
const input = \`4 4
\*...
....
.\*..
....
3 5
\*\*...
.....
.\*...
0 0\`

let lines = input.split('\\n')

let current = 0
let currentField = 1

function minesweeper(field, numCols){
  let filledField = \[\]
  const len = field.length
  for(let i = 0; i<len; i++){
    let line = \[\]
    for(let k=0; k<numCols; k++){
      if(field\[i\].charAt(k)==='\*'){
        line.push('\*')
      }else{
        line.push(0)
      }
    }
    filledField.push(line)
  }
  for(let i = 0; i<len; i++){
    for(let k=0; k<numCols; k++){
      if(filledField\[i\]\[k\]!=='\*'){
        if(i>0){
          if(k>0){
            if(filledField\[i-1\]\[k-1\]==='\*'){
              filledField\[i\]\[k\]++
            }
          }
          if(filledField\[i-1\]\[k\]==='\*'){
            filledField\[i\]\[k\]++
          }
          if(k+1<numCols){
            if(filledField\[i-1\]\[k+1\]==='\*'){
              filledField\[i\]\[k\]++
            }
          }
        }

        if(k>0){
          if(filledField\[i\]\[k-1\]==='\*'){
            filledField\[i\]\[k\]++
          }
        }
        if(k+1<numCols){
          if(filledField\[i\]\[k+1\]==='\*'){
            filledField\[i\]\[k\]++
          }
        }

        if(i+1<len){
          if(k>0){
            if(filledField\[i+1\]\[k-1\]==='\*'){
              filledField\[i\]\[k\]++
            }
          }
          if(filledField\[i+1\]\[k\]==='\*'){
            filledField\[i\]\[k\]++
          }
          if(k+1<numCols){
            if(filledField\[i+1\]\[k+1\]==='\*'){
              filledField\[i\]\[k\]++
            }
          }
        }
      }
    }
  }
  for(let i=0; i<len; i++){
    console.log(filledField\[i\].join(''))
  }
  console.log('')
}

do{
  line = lines\[current++\]
  let nums = line.split(' ')
  if(nums.length===2){
    const numLines = parseInt(nums\[0\])
    const numCols = parseInt(nums\[1\])
    if(numLines!==0 && numCols!==0){
      console.log('Field #'+currentField+':')
      minesweeper(lines.slice(current, current+numLines), numCols)
      currentField++
    }
  }
}while(line !== '0 0')
```

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Algoritmos: Contar números negativos

Source: blog/algoritmos-contar-numeros-negativos/index.md

Continuando nossa série sobre algoritmos que caem em entrevistas e competições, neste vídeo falo sobre Contar Números Negativos, que já caiu em entrevistas da Amazon. Então fique ligado no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/eFC51WkFge4" allowfullscreen></iframe>
</div>

confira o codigo abaixo:

```js
const input = [
  [-3, -2, -1, 1],
  [-2, 2, 3, 4],
  [4, 5, 7, 8]
]

function countNegative(input) {
  let line = 0
  let column = input[line].length - 1
  let count = 0
  while (line < input.length && column >= 0) {
    if (input[line][column] < 0) {
      count += column + 1
      line++
    } else {
      column--
    }
  }
  console.log(input[line][column])
}

countNegative(input[line][column])
```

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Algoritmos: Cyclic Rotation

Source: blog/algoritmos-cyclic-rotation/index.md

Este é mais um vídeo da série algoritmos, na qual explico sobre algoritmos que frequentemente caem em entrevistas de emprego e competições de programação. Desta vez, comento sobre o Cyclic Rotation.

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/qzurtPlVjFc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Algoritmos: Odd Occurrences in Array

Source: blog/algoritmos-odd-occurrences-array/index.md

Neste vídeo, comento sobre o algoritmo Odd Occurrences in Array, disponível no Codility. O interessante deste algorítimo é mantermos a complexidade em O(n). Confira no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/bgaUjbQ8NsQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Algoritmos: PermMissingElement

Source: blog/algoritmos-permmissingelement/index.md

Continuando nossa série sobre algoritmos que caem em entrevistas de emprego e competições de programação, neste vídeo, explico sobre o Algoritmo PermMissingElement.

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/fslpyQRYLOA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Algoritmos: XOR Swap

Source: blog/algoritmos-xoe-swap/index.md

A dica de hoje é sobre o operador XOR, que eu achei bem interessante. Estava estudando outra coisa e apareceu
essa informação, então resolvi checar e realmente faz muito sentido.

Imagine que temos duas variáveis:

```jsx
let a = 3

let b = 4
```

Eu quero simplesmente colocar A em B e B em A, geralmente faríamos uma variável TMP, colocaríamos A,
colocaríamos A = B e em seguida B = TMP:

```jsx
let TMP = a

a = b

b = TMP
```

Precisamos de mais uma variável para conseguir fazer essa troca. Se a gente quisesse fazer utilizando o XOR, é possível:

```jsx
a = a ^ b

b = a ^ b

a = a ^ b

console.log(a, b)
```

Com isso conseguimos inverter os valores, essa é uma forma diferente de fazer troca de valores. Algo que acho muito legal na nossa área é quando começamos a pegar operadores que nem são tão famosos, como o XOR mesmo, e começamos a ter alguns usos incomuns.

Imaginamos que em binário seria:

```jsx
3 | 011

4 | 100
```

Então no primeiro XOR nós teriamos de resultado o 1

```jsx
a | 111
```

Agora vamos pegar nosso x que agora é o valor de A e fazer com o B:

```jsx
a | 111

4 | 100
```

Nosso resultado sera:

```jsx
b | 011
```

Agora faremos um terceiro XOR com o A:

```jsx
b | 011

a | 111
```

E o resultado será:

```jsx
a | 100
```

Perceba que o A agora é 100, que é 4, e o B ficou com 011, que é 3. O legal é que se formos lembrar daquele algoritmo que fizemos de achar os pares que estão faltando, é o mesmo caso porque a medida que nós aplicamos duas vezes o mesmo número, em cima nós removemos, então podemos adicionar ele com outro e tirar o que não queremos. Resumindo, colocamos em A a soma de A com B, em B nós somamos B novamente.

Obviamente ele só funciona com tipos de variáveis numéricas e do mesmo tipo, no nosso exemplo são dois inteiros.

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/5E_1usjXc_E" allowfullscreen></iframe>
</div>

E Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Vídeo sobre Algoritmos: XOR Swap

Source: blog/algoritmos-xor-swap/index.md

O XOR é um operador bem versátil e uma coisa que gosto bastante é de estudar e analisar formas alternativas de utilização destes operadores. Neste vídeo mostro como é possível usar o XOR para trocar variáveis de lugar além de explorar o porquê isso acontece. Confira!

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/5E_1usjXc_E" allowfullscreen></iframe>
</div>

E Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Animação basica em CSS3

Source: blog/animacao-basica-css3/index.md

Recentemente eu estava planejando e desenvolvendo a interface para o curso de Socket.io, e como ela terá algumas animações à medida em que os dados chegam em tempo real, resolvi voltar a estudar CSS3, algo que há tempos não utilizo.

Às vezes ficamos focando em um navegador mais novo e esquecemos que algumas coisas podemos utilizar sem o Javascript, apenas com CSS. Vou criar uma pequena página HTML, um pouco de CSS e Javascript apenas para poder controlar a class:

```js
.hello{
  border:2px solid grey;
  transition: all 3s;
}
.hello-active{
  border:2px solid red;
  background: grey;
}
<body>
  <div class="hello">
    Olá!
  </div>
  <script>
    const node = document.querySelector('.hello')
    node.addEventListener('click', function(){
      this.classList.add('hello-active');
    })
  </script>
</body>
```

O que o transition faz? Ele fala basicamente assim, "qualquer transição que você fizer envolvendo essa classe vai ter uma animação de X segundos". Apenas a propriedade transition já é possível fazer muita coisa.

No caso acima, ao clicar, a borda grey muda para red e o background grey em uma transição que dura 3 segundos. Também podemos fazer uma animação 'ao contrário', fazendo ele voltar ao estado original adicionando ao script a seguinte linha:

```js
<script>
  const node = document.querySelector('.hello')
  node.addEventListener('click', function(){
    this.classList.add('hello-active');
  })
  node.addEventLiestener('transitionend', function(){
    this.classList.remove('hello-active');
  })
</script>
```

O evento transitionend faz com que, ao terminar o tempo determinado, remova do classList a class. Isso faz com que o CSS volte ao seu estado inicial em uma transição de 'vai e volta'. Podemos também adicionar animação em hover:

```js
.hello.hover{
  background: green;
}
```

Como grande parte dos navegadores suporta CSS3 atualmente, conseguimos fazer tudo com ele, pelo menos para alguns tipos de aplicativos. Tudo isso utilizando apenas o transition, sem precisar utilizar Jquery. Confira os detalhes no vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9jB1oDP5NmA" allowfullscreen></iframe>
</div>

Não perca nenhuma atualização. Cadastre seu e-mail, curta o [DevPleno no Facebook](https://www.facebook.com) e [inscreva-se no canal](https://goo.gl/VBU2PR). Deixe suas dúvidas e sugestões nos comentários.


---

# Como fazer anotações em eventos

Source: blog/anotacoes-em-eventos/index.md

Quando vamos em um evento é muito legal que vamos anotando tudo, então tem várias ideias, conteúdo, etc, coisas que você nem sabe como vai converter isso em execução. A dica de hoje é uma maneira sobre como anotar o que ouvir durante um evento para que possa aproveitar melhor isso depois.

Eu fui a um evento um tempo atrás e recebi essa dica, e ela mudou totalmente a forma de como tomei nota das coisas, hoje eu basicamente trago as anotações e conteúdo já com as ideias separadas.

Quando você for tomar nota em eventos ou até mesmo em uma aula, ao invés de anotar ideias que você tem durante a aulas e o conteúdo junto, você fará o seguinte, se for um caderno por exemplo, você vai pegar a página esquerda e anotar somente o conteúdo e na página direita, vai anotar as ideias que teve a partir do conteúdo da página da esquerda.

Essa dica é tão simples quanto isso, mas o efeito prático disso é enorme, afinal quando você voltar para sua casa para relembrar as notas, você sabe que de um lado é só conteúdo. Se alguém te pedir as anotações da palestra você passa apenas o lado esquerdo, já que do outro lado são coisas que você pode aplicar no seu dia a dia ou no dia a dia da sua empresa.

Isso é muito poderoso, antigamente eu misturava tudo e quando eu voltava para casa eu tinha que garimpar as anotações para achar algo de valor e esse tempo perdido me serve para outras coisas.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qLI9gm8CQQg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Aplicação Web - Entendendo Back-end e Front-end

Source: blog/aplicacao-web/index.md

Uma Aplicação Web sempre é composta por dois "blocos": o front-end e o back-end. Podemos classificar nossas tecnologias, arquiteturas, etc baseado nessas duas separações. É comum ouvir dizer também que o beck-end é Server Side, e o front-end Client Side.

**O que é back-end?**

São todas as tecnologias que rodam em um "Servidor", uma ou mais maquinas.

**E o front-end?**

Ele é tudo que roda do lado cliente, ou seja, o que o usuário final vê.

Para a parte do cliente, geralmente temos o Navegador (browser), ele faz o Request para o servidor ou tecnologia back-end. (\_Apenas esclarecendo, o request é o front-end pedindo alguma coisa ao back-end, por exemplo, uma página, uma imagem, por aí vai).

A primeira comunicação sempre é feita do Front-end para o Beck-end. Por exemplo, ao entrar no site [www.devpleno.com]
(https://www.devpleno.com) seu navegador faz uma requisição à máquina que está o servidor devpleno, com isso o server irá mandar uma resposta (response) para o navegador, que é nosso front-end. Essa comunicação é chamada de request-response, pois tudo é baseado nisso, entre a requisição do front, resposta do server.

**Quais tecnologias temos para cada tipo?**

Algumas tecnologias front-end são: HTML, Javascript, CSS. Temos tembem alguns assets como imagem e PDF, eles são alguns arquivos que precisamos para funcionar o front-end. Antigamente existia o Flash e o Java Applet, mas hoje em dia estão em desuso por causa do HTML5.

Ja do lado Server side temos N tecnologias, tais como: PHP, ASP, JAVA, NodeJS, C#, Python, C++, etc. Além disso, podemos também ter banco de dados.

O lado back-end, é o lado que, se não for padronizado a WEB, continuará normal, mas já o lado do front tivemos que ter uma padronização, por esse motivo temos um número reduzido de tecnologias, ela é padronizada pelo W3C, já que ali está a maior parte dos usuários e diversidade de dispositivos que vão usar o client side para acessar o server side. Já o Server side tem a função de devolver algo padronizado para o cliente.

Confira a explicação no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/EEeLl-M5YmI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Aprenda a aprender

Source: blog/aprenda-a-aprender/index.md

Nesta dica de carreira, vou contar como podemos aprender mais. O ponto mais importante de quando estamos aprendendo algo novo, seja uma tecnologia, uma linguagem ou qualquer outra coisa, é tentar achar a melhor forma para aprender.

Muita gente me diz “eu não consigo ler um livro e entender o que está no livro”, existe uma teoria que se chama a teoria das múltiplas inteligências, na qual diz que cada um tem uma combinação de tipos de inteligência, então você pode ter facilidade para algumas coisas e dificuldades para outras, isso é normal e você consegue praticar uma ou outra.

Quando você aprende o jeito que você aprende fica muito mais fácil. Por exemplo, para eu aprender algo, preciso fazer um paralelo com a aplicação prática disso, se eu quero aprender uma teoria sobre algo, tento trazer para qual a aplicação prática eu tenho e como eu posso aplicar isso na prática. No ensino médio, quando estava aprendendo geometria, eu já programava, então tentava trazer para o mundo que eu gostava, programava jogo, por exemplo, aplicando isso. São coisas que não esqueço mais porque eu aprendi como aprender de uma forma mais efetiva.

Vamos supor que você tenha uma facilidade maior de aprender ouvindo, então tudo que você tem que aprender, leia e grave em um gravador, depois ouça sua própria voz lendo esse conteúdo. Gosta de vídeos? Então ache vídeos no YouTube e assista para absorver da melhor forma possível.

Uma outra forma que me ajuda bastante é, ao invés de eu ler um texto longo, separar por tópicos, organizar em causa e efeito, com isso uma mapa mental me ajuda bastante a organizar a informação.

A dica de hoje é experimente formatos diferentes quando você está aprendendo algo, pode ser que você está tentando aprender da maneira que não é bom para você. Cada um aprende de uma maneira, encontre a sua!

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/srvQS8G_rx4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Aprenda a dizer NÃO!

Source: blog/aprenda-a-dizer-nao/index.md

Uma das coisas que eu aprendi ultimamente é dizer NÃO. Se alguma coisa não me agrada, não faz bem para minha empresa ou não está de acordo com o que eu quero para minha vida, eu simplesmente digo não. Por exemplo, eu me nego a pegar um serviço que não está alinhado ao meu objetivo maior e isso fez uma diferença muito grande para minha empresa. Ao invés de pegar projetos igual um louco, eu pego somente os projetos que fazem sentido para minha empresa.

Muitas vezes a gente pega algumas coisas para estudar que não faz sentido para nós, temos que dizer não para nós mesmos. Se você tem N projetos que acha que não vai dar em nada, precisa dizer não, afinal está perdendo tempo e energia.

Uma coisa que achei muito interessante foi uma das conversas que eu tive no mestrado com alguns colegas. Um deles estava reclamando que não gostava do tema do mestrado dele e que não sabia o que fazer porque não estava produzindo, já que não se dava bem com o tema. O que foi unânime na mesa foi dizer “Você não está na idade de falar sim para tudo, se você não gostou desse tema, está na hora de falar que não quer continuar.”

Quando eu era mais novo, por exemplo, não gostava de balada, então quando as pessoas me convidavam eu não sabia falar não e ia porque simplesmente não me aceitava como eu era, e me sentia péssimo, porque não era algo que eu gostava ou queria fazer. Quando você vai ficando um pouco mais velho, começa a aprender a falar não.

Já está mais do que na hora de aprender e descobrir o que você gosta, chega de aceitar tudo, se algo não está indo bem, fale, se seu chefe faz algo que você não gosta fale para ele, converse e explique.

Outra coisa interessante também é você comemorar seus ”nãos”. Se você conseguiu dar um não em algo que não te fazia bem ou não era o seu objetivo, comemore essa escolha. Uma lição que eu aprendi com a minha mãe é que quando você diz não, não fique remoendo isso. Se teve uma chance de ir para uma empresa e se recusou, não fique olhando mais para trás, afinal você tomou a decisão e acabou.

A alguns meses atrás eu disse não para morar em Amsterdã, eu tinha passado no processo seletivo do Booking e disse não porque não estava alinhado com o meu objetivo de vida para aquele momento, mesmo tendo uma oportunidade de vida no exterior. Essa foi uma lição que mudou muito a minha vida, hoje minha empresa fatura 6 vezes mais do que estava quando eu fiz essa transformação.

Então pense nisso. Essa dica pode mudar a sua vida!

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/ldtqxsz22xg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Apresentação em HTML

Source: blog/apresentacao-em-html/index.md

Neste vídeo, explico como você pode criar apresentação de slides em HTML, uma alternativa às apresentações tradicionais em Power Point!

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/OuVn4M8Ea-A" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Arrow Functions - Construindo funções anônimas de forma mais simplificada

Source: blog/arrow-functions/index.md

As Arrow Functions são uma maneira mais simples ou menor de construir funções anônimas. foi uma novidade no ES6, e hoje todo mundo já está utilizando bastante. Então, no modo anterior, tínhamos:

```jsx
const funct1 = function (param1) {}
```

Se fossemos construir isso com uma Arrow Function, poderíamos fazer simplesmente isso:

```jsx
const funct1 = (param) => {}
```

**Por que ela se chama Arrow Function?**

Porque a definimos utilizando uma arrow. É a mesma funcionalidade, mas com uma arrow, existe apenas uma particularidade que vou mostrar para você. Quando temos algo com um cenário acima, chamamos essa arrow function de statement, ou seja, ela tem instruções dentro do corpo dela, por isso ela tem a chave. Temos um outro tipo de arrow function que é a seguinte:

```jsx
const2 = function (valor) {
  return valor * 2
}
```

Se quisermos criar uma Arrow Function nesse sentido, precisamos passar também o valor, mas podemos fazer apenas isso:

```jsx
const funct2 = (valor) => valor * 2
```

Chamamos esse tipo de Expression Body, afinal o corpo dela é uma expressão. Perceba como fica bem mais simples. Vamos supor que eu tenha um vetor e eu quero fazer um map:

```jsx
const vetor = [1, 2, 3]

vetor.map((valor) => valor * 2)
```

A única diferença em relação ao function, no primeiro caso quando criamos uma function, ele cria um contexto novo, então se eu tivesse uma variável dentro, o contexto é o da função. Caso eu use this, vou estar referenciando a function, quando eu faço this dentro de uma arrow function, estou referenciando um contexto externo. Então, se eu estiver com duas funções, uma dentro da outra, o this irá referenciar o contexto global, logo ela não tem esse this que é somente dela, e sim é atrelada ao contexto do pai. Vamos supor que existe um botão em react e ele está dentro de um render:

```jsx
class Componente extends Component{

  loadData(){
    //anything
  }

  render(){
    return(
      <button onClick={() => this.loadData()}
    )
  }
}
```

Se eu quisesse chamar o loadData dentro do render, eu posso fazer um this dentro sem problema algum. Reparem que estou utilizando uma arrow function e existe um this dentro dela, mas esse this referencia o component de fora. Isso é muito útil porque reduz muito. Anteriormente tínhamos que travar uma variável no contexto de cima para depois poder referenciar dentro da função anônima:

```jsx
render(){

  var that = this

  return(
    <button onClick={() => that.loadData()}
  )
}
```

Já com a Arrow Function não é mais necessário porque o contexto já é o contexto do pai e isso facilitou bastante na construção de códigos mais legíveis. Lembrando que nós temos as Expression Body, que são funções com apenas uma expressão no corpo e a Statement Body, em que existem instruções dentro do corpo. Confira a explicação em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/AgOwGKB8D2M" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Árvore Binária em JavaScript

Source: blog/arvore-binaria/index.md

Continuando o assunto sobre alguns algoritmos que utilizamos em computação em geral, neste port falaremos sobre árvore binária, uma estrutura de dados que me fascina bastante pela versatilidade.

Então vamos implementar uma árvore, ainda não será uma árvore de busca, e vamos fazer o algoritmo base para navegar nessa árvore porque envolve recursividade. Por definição, a árvore binária tem o nó da esquerda, direita e o valor no elemento:

```js
let arvore = {
  left: undefined,
  right: undefined,
  value: 10
}
```

A regra de navegação que temos na árvore é baseada em como a gente passa nesses nós. Então vamos criar, por exemplo, uma função que chamamos de pré order. Ela imprime o valor, vai para a esquerda e depois para a direita.

```js
function preOrder(tree) {
  console.log(tree.value)

  preOrder(tree.left)
  preOrder(tree.right)
}
```

Perceba que passamos a tree recursivamente para o lado esquerdo e em seguida para o direito.

**Por que ele se chama preOrder?**

Porque ele vem primeiro de tudo. Por isso ele é diferente o inOrder e o poOrder que vem no meio e no final da navegação respectivamente. Podemos checar se o 'preOrder(tree.left)' e o 'preOrder(tree.right)' são vazios por exemplo:

```js
function preOrder(tree) {
  console.log(tree.value)

  tree.left && preOrder(tree.left)
  tree.right && preOrder(tree.right)
}

console.log('preOrder')

preOrder(arvore)
```

Se ele é um dos valores que é convertido para verdadeiro, consequentemente, tem algo dentro, então ele vai navegar para o lado esquerdo. Se acontecer o mesmo depois, ele navegará para o lado direito. Ao somar o preOrder e passar a árvore, ele imprime o valor 10.

Vamos colocar algum valor do lado esquerdo:

```js
let arvore = {
  left: {
    left: undefined,
    right: {
      value: 3
    },
    value: 2
  },
  right: undefined,
  value: 10
}
```

Ele imprimirá 10,2 e 3, o que está correto porque ele imprimiu o nó principal que é 10, depois ele foi para a esquerda, imprime o 2, como na esquerda não tem nada. ele vai para a direita e imprime o 3, depois vai para a próxima direita e não imprime nada pois esta como undefined. Esse é o preOrder, agora vamos testar o inOrder:

```js
function inOrder(tree) {
  tree.left && inOrder(tree.left)

  console.log(tree.value)

  tree.right && inOrder(tree.right)
}

console.log('inOrder')

inOrder(arvore)
```

A diferença é que o console.log virá no meio.

Perceba que o inOrder vai para a esquerda primeiro, tenta ir novamente para a esquerda, não acha nada, ai ele visita o nó 2, vai para a direita, tenta ir para a esquerda e não consegue, visita o nó 3, vai para a direita e não tem nada, volta, imprime o nó 10 e por fim tenta ir para a direita e está undefined.

O mais importante é que guardamos os tipos de navegação da seguinte forma, preOrder escreve primeiro, inOrder escreve no meio e o posOrder escreve no final.

Outra coisa importante é que como ele é recursivo eu preciso saber qual o meu passo base, que é o passo onde nenhum dos dois vão ser executados, ou seja, quando chegar no left e no right não ter mais ninguém para navegar.

Com JavaScript fica muito simples a navegação em árvore, perceba que construímos a navegação com um Object normal, posteriormente vamos ver inserção e tudo mais em árvores de busca, onde colocamos o elemento menor para o lado esquerdo e o maior para o lado direito.

Confira todo a explicação no vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/_jBCy4VX4C4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Árvore Binária de Busca em JavaScript

Source: blog/arvore-binaria-de-busca/index.md

Hoje vamos falar mais sobre árvores binárias, porém um tipo específico, a árvore binária de busca.

**Qual a diferença da árvore binária de busca para a árvore binária normal?**

Na normal, simplesmente inserimos os nós dentro da árvore sem garantir nenhuma regra, já a de busca segue a seguinte regra:

Temos a raiz e inserimos um valor nessa raiz. Quando inserimos o segundo valor, se for maior que a raiz, ele fica à direita, se ele for menor, ficará à esquerda. Com isso conseguimos fazer muitas outras operações utilizando essa árvore binária.

Primeiramente vamos fazer a inserção em uma árvore binária de busca. Para fazermos isso, temos que checar se essa árvore tem algum valor, depois verificamos se ele é maior ou menor para inserirmos para left ou right.

```jsx
const arvore = {}

function insert(tree, value) {
  if (tree.value) {
    if (value > tree.value) {
      insert(tree.right, value)
    } else {
      insert(tree.left, value)
    }
  } else {
    tree.value = value

    tree.right = {}

    tree.left = {}
  }
}

insert(arvore, 10)

console.log(arvore)
```

Se não for inserido o tree.value, vai ser igual a value, o tree.right e tree.left serão árvores vazias. Eu estou definindo isso porque quando inserirmos podemos passar uma árvore vazia no insert e ele continua fazendo isso de forma recursiva. Colocando o valor 10, perceba que será retornado: Se inserirmos, por exemplo, um valor 11 em seguida:

```jsx
insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)
```

Será retornado o seguinte:

Agora vamos colocar o valor 9:

```jsx
insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)

insert(arvore, 9)

console.log(arvore)
```

Será retornado o seguinte: Na primeira inserção, retorna 10, na segunda 10 e 11 e na terceira 10, 11 e 9, sendo 11 do lado direito, 9 do lado esquerdo e 10 nossa raiz. Vamos colocar um 8 agora:

```jsx
insert(arvore, 10)

console.log(arvore)

insert(arvore, 11)

console.log(arvore)

insert(arvore, 9)

console.log(arvore)

insert(arvore, 8)

console.log(arvore)
```

O resultado será:

Com o 8 agora temos 10 na raiz, 11 do lado direito, do lado esquerdo 9 e do lado esquerdo do lado esquerdo 8.

Com isso conseguimos fazer o algoritmo de inserção na árvore de busca. É importante ressaltar que isso não é programação funcional, já que não estamos retornando uma nova árvore. Fiz isso apenas para mostrar que boa parte dos algoritmos que fazemos em C ou alguma linguagem que vemos na graduação utilizam a passagem por referência.

Confira o passo a passo no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ewb1WUuTgRU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos Assíncrono

Source: blog/assincrono/index.md

Uma das grandes características do Javascript/NodeJS é seu assincronismo. Isso é muito importante, pois há um grande ganho de performance principalmente quando temos aplicações IO Intensive (praticamente todas atualmente são assim). Veja neste vídeo um exemplo entre um script síncrono e um assíncrono!

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/wKqEwKP-E1E" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Async - Como Controlar Operações Assíncronas

Source: blog/async/index.md

O Async é um módulo que nos ajuda a controlar processamento assíncrono. Primeiramente temos que instalar o async:

```jsx
npm install async
```

Outro detalhe é que eu tenho 2 arquivos de texto, um escrito “arquivo 1” e o outro “arquivo 2”, vamos usá-los posteriormente.

Se você lembra bem, no exemplo de promises, nós escrevemos 2 arquivos e concatenou o conteúdo desses arquivos. Aqui vou fazer um exemplo um pouquinho diferente. Vou criar um vetor com o nome dos arquivos dentro:

```jsx
var fs = require('fs')

var async = require('async')

var files = ['arquivo1.txt', 'arquivo2.txt']
```

Vamos supor que eu tenha que ler 100 arquivos de log e processá-los, então são 100 arquivos, um atrás do outro, de operações assíncronas, esse é o grande detalhe do que vamos fazer agora. Se fosse uma linguagem síncrona, seria muito fácil.

```jsx
async.each(files, function (file, callback) {
  fs.readFile(file, 'utf-8', function (err, contents) {
    console.log(contents)

    callback(null)
  })
})
```

Para cada arquivo, ele irá executar uma vez o código acima, quando ele retornar o conteúdo vou escrever na tela e o async espera que você o avise quando terminou esse processamento, então temos que chamar esse callback. Nele passamos null, mas também podemos passar um error, que é o padrão de callback no Node, se esse Error for Null significa que não deu erro nenhum.

Ao rodar o arquivo, vai ser retornado arquivo1 e arquivo2. Pode acontecer do arquivo 1 terminar mais rápido que o arquivo 2 porque não estamos impondo nenhuma ordem. Para o async não importa, ele vai executar todos, mas vai respeitar a ordem das operações de IO que vão sendo resolvidas.

Um detalhe é que ele abre isso de forma paralela, então o 'each' é para otimizar pode abrir ao mesmo tempo. Para forçar a abrir um de cada vez, faremos o seguinte:

```jsx
async.eachSeries(files, function (file, callback) {
  fs.readFile(file, 'utf-8', function (err, contents) {
    console.log(contents)

    callback(null)
  })
})
```

Agora garantimos que ele vai abrir um após o outro.

O async é muito bom para fazermos esse tipo de processamento, por exemplo, podemos fazer uma busca no banco, retornar uma sequência de registros e fazer um outro processamento com esse resultado de forma assíncrona.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Hllw7QKsJac" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# ES6 - Async/Await

Source: blog/async-await/index.md

Olá!
Neste post, falo sobre o Async/Await, uma funcionalidade que vem com o ES6 e é possível ser utilizada no Node, permitindo o aumento da qualidade do nosso código.
Obs: A versão do Node que estou rodando é a 7.7.3.
O Async/Await, assim como um generator, depende de uma promise para funcionar.

```jsx
const fs = require('fs')
const readFilePromise = (filename) => new Promise((resolve, (reject = {})))
```

Com isso, transformamos uma função callBack, que segue a forma do Node tradicional, em uma promise, criando uma Arrow Funciton Filename, que retornará uma new Promise, passando uma nova Arrow Function para ela com resolve e reject.

**Como fazemos isso?**

Chamaremos então um readFile comum no Node, passando o nome do arquivo desejado. Em seguida, recebemos o callBack passando uma arrow function e, caso existir um erro e não for vazio, ele irá rejeitar e envia esse erro. Caso tenha dado tudo certo, será enviado o data para o solicitante:

```jsx
const fs = require('fs')
const readFilePromise = (filename) => new Promise((resolve, reject = {
  fs.readFile(filename, (err, data) => {
    if(err){
      reject(err)
    } else {
      resolve(data)
    }
  }
}))
```

Com o Arrow Function, fica muito mais simples como vocês podem ver. Para verificarmos se esta tudo OK fazemos:

```jsx
readFilePromise('arquivo.js').then((data) => console.log(data.toString()))
```

Depois de testado, vamos lá. Crie uma function que terá um Async, ele irá ler o conteúdo do arquivo, e este arquivo vai ter um Await que lerá o arquivo.js:

```jsx
async function read() {
  const contents = await readFilePromise('arquivo.js')
  console.log(contents.toString())
}
```

Quando o código for executado, ele vai chegar até o await e vai parar até a promise ser resolvida, então vai retornar o que tiver dentro do arquivo para dentro do contents.

**Para que serve?**

Com isso, podemos, por exemplo, ler 2 arquivos seguidos apenas adicionando um novo Await no código. Dois detalhes importantes: 1. Se formos usar o Await dentro de uma função, eu tenho que marcar esta function como Async. 2. Caso haja uma rejeição da promise, o node irá retornar o erro, mas com o código quebrado, com isso temos uma maneira correta de checar os erros com o Async/Await, usando o try catch:

```jsx
try {
    async function read(){
    const contents = await readFilePromise ('arquivo.js')
    console.log(contents.toString())
  } catch(e){
    console.log('erro', e)
  }
}
```

**Conclusão**
Uma coisa que percebemos muito nessa evolução do javaScript é que está ficando cada vez mais fácil de escrever código assincrono, que realmente era o calcanhar de Aquiles da linguagem, pois temos callBack hell e vários outros erros, atrapalhando a qualidade do código, então essas features novas que vem sendo adicionadas simplifica muito nossa forma de construir códigos.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/D01xWkT2W7c" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Tocando um Áudio com JS puro

Source: blog/audio-com-js-puro/index.md

Uma das coisas que utilizaremos na interface que vamos construir no Minicurso de Socket.io para que fique mais próximo do real são os efeitos sonoros. Por isso, essa dica é para você entender como dar play em um arquivo de áudio com JS puro, ou seja, usando somente HTML, sem usar nenhuma lib.

A primeira coisa que vamos fazer é criar uma tag audio no HTML. Esse áudio vai representar um arquivo de som (lembrando que também há, em especificações mais novas, a tag vídeo, que é parecida com a tag audio, mas é um pouco mais complicada, pois temos várias 'camadas', como por exemplo vídeos específicos para celular).

```jsx
<html>
  <head>
    <tittle>Audio</tittle>
  </head>

  <body>
    <h1>Audio</h1>

    <audio></audio>
  </body>
</html>
```

No caso do áudio, tenho um arquivo chamado clap.wav e, quando o coloco dentro da tag áudio, ele automaticamente coloca esse áudio quando a página carregar em memória.

Em seguida, vamos criar um botão com o nome de Play e adicionar alguns scripts, um com uma instância desse botão e outro com um eventListener, assim, quando alguém clicar no botão vai ser ser pego esse áudio e dar um play.

```jsx
<html>
  <head>
    <tittle>Audio</tittle>
  </head>

  <body>
    <h1>Audio</h1>

    <audio></audio>
    <button></button>

    <script>
      const button = document.querySelector('button')

      button.addEventListener('click', function(){

      cont audio = document.querySelector('audio')

      audio.play

      })
    </script>
  </body>
</html>
```

Outra ponto interessante é que podemos começar a tocar o áudio a partir de um ponto específico,, por exemplo, aos 0.2 segundos. Para isso adicionamos apenas o código entre o querySelector e o audio.play:

```jsx
audio.currentTime = 0.1
```

Dentro desse clap podemos fazer até alguns efeitos diferentes, pois à medida com que eu mexo o currentTime e dou o play, o efeito do áudio é um pouco diferente. Para fazer isso, usamos apenas o javaScript.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ESq1xOs2HsU" allowfullscreen></iframe>
</div>

Gostou dessa dica sobre áudio com JS puro? Deixe seu comentário! Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Autenticação e Autorização - Entenda os termos

Source: blog/autenticacao-e-autorizacao/index.md

Dois termos estão muito relacionados quando estamos desenvolvendo um sistema para Web ou Mobile: AUTENTICAÇÃO e AUTORIZAÇÃO.

Vamos pensar o seguinte: temos uma empresa na qual você precisa apresentar um crachá na portaria para conseguir entrar. O crachá prova que você é quem você diz ser. Esse processo de confirmação é o que chamamos de autenticação.

No momento em que o segurança te deixa passar ou não, baseado na sua função ou algo nesse sentido, ele vai te dar a autorização, que é o segundo passo.

Geralmente o que fazemos em um sistema é identificar o usuário, com usuário e senha e a partir disso verificamos se pode ou não fazer.

Quando pensamos em um sistema digital, temos algumas formas de nos identificarmos. No mundo offline, temos o CPF, o RG, a CNH, etc. No mundo digital, temos algumas outras formas, que podem ser dividas em três categorias:

– Algo que sabemos: Usuário e senha.

– Algo que temos: Token, posse de um celular.

– Algo que somos: Biometria.

Temos um número cada vez maior de autenticação e podemos misturar as categorias, como token e usuário e senha, que chamamos de Autenticação de dois fatores.

A autorização é um pouco mais complexa, afinal uma vez que o usuário provou que é realmente ele, vamos ter que ir no banco do sistema para saber se esse usuário é mesmo ele e qual é o tipo de acesso ele tem.

Quando for montar um sistema, pense em qual tipo de autenticação o público-alvo está acostumado a utilizar para se identificar, e só depois disso pense na autorização.

Pense um pouco sobre esses dois termos, vamos voltar a falar mais das formas de autenticação posteriormente. Por enquanto esse conceito básico é o suficiente.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/acGpu4z0azk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Aviso legal

Source: blog/aviso-legal/index.md

Você deve saber que todos os produtos e materiais produzidos pela We Dev Ideas – Eirelli – ME, são feitos para fins educacionais e informacionais e por isso, a We Dev Ideas não garante que você conseguirá obter quaisquer resultados ou ganhar algum dinheiro usando qualquer uma de nossas ideias, ferramentas, estratégias e recomendações, e nada em nossos Sites é uma promessa ou garantia para você de ganhos futuros.

VOCÊ CONCORDA QUE O USO OU INCAPACIDADE DE USO DOS PRODUTOS DA WE DEV IDEAS É POR SUA CONTA E RISCO. Ao adquirir um produto de nossa empresa, você aceita, concorda e entende que você é totalmente responsável por seu progresso e resultados de sua participação e que nós não oferecemos nenhuma representação, garantia ou garantias verbalmente ou por escrito sobre seus ganhos, o lucro do negócio, o desempenho do marketing, o crescimento da audiência ou resultados de qualquer tipo.

Qualquer dado presente no site **DevPleno** ou de seus produtos, são somente ilustrativos e não devem ser considerados como um ganho comum, ganho exato ou promessa de renda no futuro.

Você é totalmente responsável pelas suas decisões, ações e resultados na vida, e através dos seus registros no site, você concorda em não nos responsabilizar por qualquer decisão, ações ou resultados a qualquer momento, em nenhuma circunstância.

Quaisquer declarações descritas no nosso website, conteúdos e ofertas são simplesmente nossa opinião e, portanto, não são garantias ou promessas de desempenho real. Nós não oferecemos assessoria jurídica, médica, psicológica ou financeira profissional.


---

# Classificação de imagens com Azure

Source: blog/azure-cognitive-service/index.md

Na dica de hoje, vamos continuar falando sobre classificação de imagens de forma automática, mas será uma outra abordagem, a de utilizar um serviço de visão computacional para reconhecer e classificar essa imagem.

Vamos utilizar a API Azure Computer Vídeo. Como pegamos uma key dessa API?

Se você colocar no Google Azure Cognitive Services, vamos ter serviços cognitivos, clique no link e você pode experimentar os serviços gratuitamente, apenas acessando 'computer vision API' para conseguir a Key.

Novamente no Google, vamos procurar o 'axios http' e importá-lo utilizando a CDN:

```jsx
<script src='https://unpkg.com/axios/dist/axios.min.js'></script>
```

Agora, no Visual Studio Code, vou criar um arquivo novo e salvar como azure-image.html. A ideia é a seguinte, vamos ter um input type text onde vamos por uma url para poder reconhecer a imagem:

```html
<html>
  <head>
    <title>Image</title>
  </head>

  <body>
    <input
      type="text"
      id="imgInput"
      value="https://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png"
    />
    <input type="button" id="btn" value="Analisar imagem" />
    <img src="" id="img" />

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      const imgInput = document.getElementById('img')
      const img = document.getElementById('img')
      imgInput.addEventListener('blur', () => (img.src = imgInput.value))
    </script>
  </body>
</html>
```

Assim podemos colocar a url de uma imagem e clicar em analisar imagem, mas temos também uma imagem padrão. Toda vez que essa imagem padrão for trocada, nós trocamos essa imagem.

Agora vamos fazer uma requisição utilizando axios para que a gente consiga classificar essa imagem. Para isso precisamos colocar nossa chave do Azure e também uma instância do axios para passarmos o baseURL e o headers que é onde preciso mandar algumas coisas como content type:

```html
<script>
  const btn = document.getElementById('btn')
  const imgInput = document.getElementById('imgInput')
  const img = document.getElementById('img')
  const key = 'keyDoAzure'
  const azure = axios.create({
    baseURL:
      'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze',
    headers: {
      'Content-type': 'application/json',
      'Ocp-apim-Subscription-Key': key
    }
  })

  imgInput.addEventListener('blur', () => {
    img.src = imgInput.value
  })

  btn.addEventListener('click', () => {
    azure
      .post(
        '?visualFeactures=Categories,Description,Color&details=&language=en',
        { url: imgInput.value }
      )
      .then((data) => {
        console.log(data)
      })
  })
</script>
```

Ao rodar, perceba que ele consegue capturar várias tags, além de cores dominantes no background, na frente, etc. Podemos utilizar isso para classificar, por exemplo, se a foto tem algum tipo de violência.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Evl1tRMMh0o" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como construir um beatbox com JavaScript

Source: blog/beatbox-com-javascript/index.md

Continuando nossos experimentos utilizando áudio no HTML (você deve ter percebido que me empolguei com este assunto), vamos mudar o exemplo do metrônomo para construir uma 'bateria' e poder criar uma música somente dando 'plays' de forma ordenada em alguns trechos. Então vamos lá!

Vamos ter um botão que será um play/stop. Ao dar o play, será tocado uma sequência de áudios para simular uma bateria em loop. Para que isso ocorra, temos que ter alguns áudios e também tratar isso em javaScript.

```jsx
<html>
  <head>
    <tittle>beat-box</tittle>
  </head>

  <body>
    <button id="play">Play</button>
    <audio src="prato.wav" id="prato"></audio>
    <audio src="prato-fechado.wav" id="prato-fechado"></audio>
    <audio src="bumbo.wav" id="bumbo"></audio>
    <audio src="boca.wav" id="boca"></audio>
    <audio src="caixa.wav" id="caixa"></audio>

    <script></script>
  </body>
<html>
```

Dentro do Script, vamos tratar como fizemos no exemplo do metrônomo, então vamos criar o mesmo timer, criar uma função tick, porém fazer ela rodar a 90bpm (60\*1000/90), isso dá a distância entre uma batida e outra.

A ideia é que a cada interação do tick, toque um áudio. Exemplo: Supondo que nossa música seja prato, bumbo, boca e caixa, o tick vai tocar essas 4 coisas para cada repetição que fizer. Para isso vamos pegar o music na posição currentAudio++.

```jsx
<script>
  const  play = constGetElementById('play')

  let timer = null

  let currentAudio = 0

  const bpm = 90

  const music = ['prato', 'bumbo', 'boca', 'caixa']

  function tick(){
    console.log(music[(currentAudio++)%music.length])
  }

  play.addEventListener('click', function(){
    timer = setInterval(tick, (60 *1000 / bpm)
  })
</script>
```

Acabamos de criar uma técnica para fazer os áudios circularem. A cada interação vamos incrementar o currentAudio e quando esse currentAudio chegar em 4, ele voltará para o 0. Com isso já é possível fazer uma bateria apenas mudando o console.log por:

```jsx
function tick(){
  const audioID = (music[(currentAudio++)%music.length]

  const audio = document.getElementById(audioID)

  audio.play()
}
```

Conseguimos tocar uma trilha, mas para a música ficar legal, podemos colocar essa trilha de uma forma diferente, por exemplo:

```jsx
<script>
  const  play = constGetElementById('play')

  let timer = null

  let currentAudio = 0

  const bpm = 90

  const music = \[
    \['bumbo', 'bumbo', 'bumbo', 'bumbo', \],
    \['prato', 'prato-fechado', 'boca', 'caixa'\]
   \]

  function tick(){
    const current = (music\[(currentAudio++)%music\[0\].length\]

    const audioID1 = music\[0\]\[current\]

    const audioID2 = music\[1\]\[current\]

    const audio1 = document.getElementById(audioID1)

    audio1.play()

    audio1.currentTime = 0

    const audio2 = document.getElementById(audioID2)

    audio2.play()

    audio2.currentTime = 0
  }

  play.addEventListener('click', function(){
    timer = setInterval(tick, (60*1000/bpm)
  })
</script>
```

Você pode baixar os arquivos de áudio aqui: [Download](https://goo.gl/zHKuad)

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/01iPnENtCiQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Construindo um Beatbox Manipulável com JS

Source: blog/beatbox-manipulavel-com-js/index.md

Agora que já entendemos [como dar play em áudio com JS](https://www.devpleno.com/audio-com-js-puro/), [como manipular para compor uma batida](https://www.devpleno.com/beatbox-com-javascript/), faremos com que o usuário escolha a forma como seja tocado, ou seja, um Beatbox Manipulável com JS

Vamos começar utilizando um pouco da estrutura do HTML usado anteriormente (os áudios importados e o play) e implementar esse código. Criaremos um div.

A ideia é ter vários checkbox para cada instrumento, por exemplo, temos um prato e vários checkbox, os quais podemos marcar. Onde estiver marcado será tocado o áudio e onde não estiver não será tocado. Para não precisarmos criar manualmente todo os inputs, podemos criar um script JS que terá um contador que gera vários checkbox.

```jsx
<html>
  <head>
    <tittle>beat-box</tittle>
  </head>
  <body>
    <button id="play">Play</button>

    <audio src="prato.wav" id="prato"></audio>
    <audio src="prato-fechado.wav" id="prato-fechado"></audio>
    <audio src="bumbo.wav" id="bumbo"></audio>
    <audio src="boca.wav" id="boca"></audio>
    <audio src="caixa.wav" id="caixa"></audio>

    <div id="track1" rel="prato">
      <h2>Prato</h2>
    </div>
    <div id="track2" rel="prato-fechado">
      <h2>Prato-fechado</h2>
    </div>
    <div id="track3" rel="bumbo">
      <h2>Bumbo</h2>
    </div>

    <script>
      const numItems = 10
      function generationTrack(trackId){
        const track = document.getElementById('track'+trackId)

        for (let i=0; i<10; i++){
          track.innerHTML += '<input type="checkbox id="i-'+trackId+'-'+i+'" />'
        }
      }

      generateTrack(1)
      generateTrack(2)
      generateTrack(2)
    </script>
  </body>
<html>
```

O objetivo é que o usuário possa escolher quando quer que cada item toque, por exemplo, com o bumbo batendo em um ritmo e o prato nos intervalos. ![aa](c97fc2c7-ec01-49c4-9be8-b96d40b8395b.png) Para que isso aconteça, cada tick da música tem que checar se naquela linha aquele áudio está marcado.

```jsx
<script>
  //gera o check-box
  const numItems = 10
  function generationTrack(trackId){
    const track = document.getElementById('track'+trackId)

    for (let i=0; i<10; i++){
      track.innerHTML += '<input type="checkbox id="i-'+trackId+'-'+i+'" />'
    }
  }
  generateTrack(1)
  generateTrack(2)
  generateTrack(2)
  //fim gerar check-box

  const bpm = 90
  let current = 0
  function tick(){
    const currentItem = current++ % numItems

    console.log(currentItem)
  }

  setInterval(tick, (60*1000)/bpm)
</script>
```

Note que ele está caminhando entre os itens, mas temos que andar entre os tracks e pegar os que vão ser tocados. Para isso vamos implementar o script criando um for com i iniciado em 1 e i menor ou igual a 3, então podemos checar se aquele item em especifico está marcado. Quando for true, daremos play, e por último 'startar' quando apertarmos no play:

```jsx
<script>
  const bpm = 90
  let current = 0
  let isPlaying = false
  let timer = null
  function tick(){
    const currentItem = current++ % numItems
    for(let i=1; i<=3; i++){
      const item = document.getElementById('i-'+i+'-'+currentItem)
      const track = document.getElementById('track' +i)
      if (item.checked){
        const audio = document.getElementById(track.attributes.rel.value)
        audio.currentTime = 0
        audio.play()
      }
    }
  }
  const play = document.getElementById('play')
  play.addEventListener('click', function(){
    if (isPlaying){
      clearInterval(timer)
      play.innerHTML = 'Play'
    } else {
      timer = setInterval(tick, (60*1000)/bpm)
      play.innerHTML = 'Stop'
    }

    isPlaying = !isPlaying
  }
</script>
```

Todo check ativo irá gerar um som e os inativos serão ignorados. No botão, sempre que estiver tocando vai ter o stop e quando tiver parado vai ter play. Assim geramos um beat-box que o usuário escolhe a forma em que vai ser tocado utilizando o checkbox.

Poderíamos transformar esses checkbox em caixinhas e isso deixaria muito mais parecido com softwares como fruitLoops, que são bem simples de criar batidas.
Esse código está bastante flexível, se quisermos colocar mais itens só aumentar o número de itens no 'numItems'.

Baixe os arquivos de áudio aqui: [download](https://goo.gl/zHKuad)

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/01iPnENtCiQ/uqRtwdxH9-s" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Bind - Altere comportamento e contexto de execução de suas funções

Source: blog/bind/index.md

O que é um bind em JavaScript? Para mostrar uma das utilidades do bind, eu criei um pequeno exemplo:

```jsx
;(function () {
  this.valor = 10

  const modulo = {
    valor: 20,

    getValor: function () {
      return this.valor
    }
  }

  console.log(modulo.getValor())

  const getValor = modulo.getValor

  console.log(getValor())
})()
```

Eu tenho um objeto literal que cria um contexto novo. Para esse contexto, o this.valor vai ser igual a 20 e quando eu der um getValor, ele irá retornar o this.valor. Logo acima temos um this.valor que faz referência a primeira função e ao colocarmos o console.log = modulo.getValor ele vai executar referente ao pai dele.

Se criarmos uma nova constante e pegamos só a função extraindo desse objeto literal de cima, quando eu dou console.log(getvalor()), ele trás 20 e 10. 20 é o valor que está dentro do módulo e a segunda vez está pegando o 10 que está fora do módulo.

Isso acontece porque quando eu criei a cópia dele e não especifiquei nada, ele vai utilizar o this na chamada de onde ele está, então acabamos criando um cenário meio inconsistente.

Uma das coisas que o bind permite é exatamente isso, quando eu crio essa cópia, eu posso passar um bind onde eu falo em qual contexto eu quero que ele execute. Por exemplo, eu quero que ele execute no contexto do módulo:

```jsx
const getValor = modulo.getValor.bind(modulo)
```

isso é bastante útil quando criamos as classes em ES6 porque naturalmente ele não tem o bind para o contexto da classe, então podemos fazer no construtor.

A outra utilidade que temos para o bind é, por exemplo, criar uma função que recebe dois parâmetros e criar uma função2, que é a função1 com bind fixando o parâmetro:

```jsx
function func1(param1, param2) {
  console.log(param1, param2)
}

const funct2 = func1.bind(null, 'paramfixo')

console.log(func2('param2'))
```

Ao executar, ele vai chamar o paramfixo e param2, então eu consigo criar novas funções que tenham um valor fixo, isso também é conhecido como funções parciais. Podemos utilizar por exemplo para criar funções que filtram determinados valores em um filter.

Utilizamos bastante o bind quando estamos criando um componente em react utilizando as classes em ES6 por causa dessa característica dela não ter o bind automático para this.

Uma coisa interessante é que quando você dá o bind, tem que estar ciente de que está alterando alguma coisa do estado atual do seu componente. Quando estamos tentando cada vez mais programação funcional, mesmo que seja alguns métodos do componente, a ideia é que elas se transformem em funções puras, então sempre que se deparar tendo que criar um bind para o método, precisa checar se realmente é necessário, porque muitas vezes conseguimos fazer isso sem o bind. Quando isso é possível, fazemos uma função pura, então a testabilidade do código fica melhor porque ela não depende de nada do contexto.

Confira o vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/96Gfio4Tiz0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Busca Binária

Source: blog/busca-binaria/index.md

Hoje vamos falar um pouco mais sobre algoritmos, que são as bases da computação. Especificamente sobre um tipo de busca que eu já utilizei em um projeto e nunca imaginei que iria utilizar, a busca binária.

Os algoritmos de busca inicialmente parecem teóricos demais, mas, na verdade, podemos usar bastante em projetos. Há algum tempo, antes de termos o Android e IOS, era comum termos os Palmtops, eles tinham memória péssima e precisávamos fazer uma busca que nem era tão grande (essa busca demorava demais de forma sequencial) a partir disso, assumimos uma restrição nos dados, deixando-os ordenados para a busca binária e assim conseguimos resolver o problema.

Vou dar um exemplo de um problema com um vetor de 5 itens. Deixávamos o vetor de forma sequencial e salvavamos esses slots de dados sequencialmente, mas isolados, com isso era possível saber que quando fossemos naquele ponto de memória, teria poucas iterações.

A estratégia era a seguinte: tentamos acertar primeiro o item do meio, por exemplo, o número 3, se o número 3 é igual ao número que eu estou buscando, ele é retornado, caso eu esteja procurando o 2 por exemplo, eu sei que ele é menor que o 3, então meu próximo espaço de busca será 1 ou 2, com isso é tentado de novo, se acertar, ele retorna, caso contrário tentará de novo e por aí vai.

Por esse motivo é chamado de busca binária, porque sempre vamos dividir em dois espaços. O pior dos casos é ele dividir todos pela metade. Vamos implementar agora:

```jsx
const vetor = [1, 2, 3, 4, 5]

const binSearch = (vetor, left, right, valor) => {
  if (right >= left) {
    const indice = parseInt(left + (right - left) / 2)

    if (vetor[indice] === valor) {
      return valor
    }

    if (vetor[indice] > valor) {
      return binSearch(vetor, left, indice - 1, valor)
    }

    return binSearch(vetor, indice + 1, right, valor)
  }

  return -1
}

console.log(binSearch(vetor, 0, vetor.length - 1, 20))

console.log(binSearch(vetor, 0, vetor.length - 1, 5))
```

Para saber se o algoritmo acabou, uma das maneiras é se por algum motivo o item do lado direito for maior que do lado esquerdo, é válido, já que vamos marcar os lados para acertar a metade, caso ele não encontre do lado esquerdo, vamos procurar do lado direito, e por fim retornar -1 caso não encontrarmos em nenhum dos lados.

Nos casos, fizemos um valor que não existe, 20, e um que existe, 5. A vantagem que tirei nesse projeto é que toda vez que acessavamos o índice sempre gastava muito tempo, então poderíamos fazer o seguinte para economizar:

```jsx
const binSearch = (vetor, left, right, valor) => {
  if (right >= left) {
    const indice = parseInt(left + (right - left) / 2)

    const atual = vetor[indice]

    if (atual === valor) {
      return valor
    }

    if (atual > valor) {
      return binSearch(vetor, left, indice - 1, valor)
    }
  }
}
```

A medida que escalamos, isso vai ficando cada vez mais interessante já que aumentamos muito o número de itens e o número de vezes que ele passa é pequeno.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/l6pxuyV3mKQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Carreira: Preciso de investimento para minha ideia?

Source: blog/carreira-preciso-de-investimento-para-minha-ideia/index.md

Na hora de planejar suas ideias, a maioria das pessoas logo pensa em um investidor. Mas será que ele realmente é preciso para executar sua ideia? Neste vídeo, dou dicas sobre esse assunto baseado em experiências próprias. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações.

### Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7fk_Zm8d0W0" allowfullscreen></iframe>
</div>


---

# Carreira: Preço que tem que ser pago

Source: blog/carreira-preco-que-tem-que-ser-pago/index.md

Neste vídeo, faço uma análise de como aprendemos novas skills. Confira!

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/_yWmWVqKnAg" allowfullscreen></iframe>
</div>


---

# Carreira: Tomar decisões

Source: blog/carreira-tomar-decisoes/index.md

Você toma decisões na sua equipe? Mesmo não sendo o líder?

Você líder deixa as pessoas tomarem decisões?

Neste vídeo faço uma pequena reflexão sobre como decisões podem desenrolar e deixar equipes e empresas muito mais produtivas.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/0xSnZSKiAu4" allowfullscreen></iframe>
</div>

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Um abraço!


---

# Carreira: Você é o passageiro da sua Vida?

Source: blog/carreira-voce-e-o-passageiro-da-sua-vida/index.md

Você está levando sua vida para alcançar seus objetivos?

Você está sendo o motorista ou passageiro na sua própria vida?

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/o0VuFJPKZnU" allowfullscreen></iframe>
</div>

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Um abraço!


---

# Chainability com Javascript

Source: blog/chainability-com-javascript/index.md

Hoje eu quero mostrar como podemos construir um pattern que é muito utilizado no Jquery. Apesar de não ser um pattern que muita gente gosta, é bastante interessante.

Vamos construir um para você ter uma ideia de como podemos fazer e também para entender um pouco da linguagem que está ali por trás.

Ele também pode ser utilizado em outras linguagens além do JavaScript.

Em jQuery, podemos fazer o seguinte:

```jsx
$('.opa').attr('', '').css('', '').click()
```

Essa possibilidade de encadear coisas relacionadas a um elemento é chamado de Chainability, isso é bastante interessante para o JavaScript.

Como podemos ter um comportamento semelhante a esse?

Vamos criar uma calculadora para você ter uma ideia de como se utiliza:

```jsx
const calculador = (initial = 0) => {
  const obj = {
    total: initial,

    add: (num) => {},

    sub: (num) => {},

    div: (num) => {},

    mult: (num) => {}
  }

  return obj
}
```

A calculadora foi construída, mas até agora não temos a possibilidade de fazer esse chain. O que permite a gente fazer isso é o seguinte:

```jsx
const calculador = (initial = 0) => {

  const obj = {
    total: initial,

    add: (num) => {
      obj.total+=num

      return obj
    },

    sub: (num) => {
      obj.total-=num

      return obj
    },

    div: (num) => {
      obj.total/=num

      return obj
    },

    mult: (num) => {
      obj.total*=num

      return obj
    }

    out: () => {
      console.log(obj.total)

      return obj
    }
  }

  return obj

}
```

Só o fato de conseguirmos retornar o obj, já é possível fazer o seguinte:

```jsx
calculadora().add(10).sub(5).out()
```

Assim já conseguimos saber qual é o retorno dele. A ideia do chainlability é que toda operação que ele faz ele vai retornar o próprio objeto. Isso faz muito sentido para o jQuery, já que mudamos o html de forma imperativa.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/L3dyVrLP6Ic" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# CHAVES DINÂMICAS

Source: blog/chaves-dinamicas/index.md

Hoje eu quero comentar uma novidade no ES6, mostrando a forma de como faríamos isso anteriormente. A partir do ES6, conseguimos inicializar um objeto JavaScript passando uma Key dinâmica, mas anteriormente nós conseguiamos fazer isso apenas posteriormente, ou seja, tínhamos que criar o objeto para depois conseguir alterá-lo.

Anteriormente fazíamos dessa forma:

```jsx
const obj = {
  a: 1
}

obj['b'] = 2

console.log(obj)
```

Porém, assim não tínhamos um jeito de fazer dinamicamente. Inspirado por essa forma de construir, o ES6 trouxe essa novidade, onde podemos fazer isso já de começo. Se eu quisesse colocar esse 2 na inicialização do objeto, eu poderia fazer simplesmente:

```jsx
const obj = {
  a: 1,
  ['b']: 2
}

console.log(obj)
```

Assim já inicializamos esse objeto com o key dinâmico, coisa que não era possível no ES6. É muito interessante eles aproveitarem o property accessor já na inicialização.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/V-lJhz4gyFs" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Cheerio: Uma implementação jQuery para Node

Source: blog/cheerio/index.md

Cheerio é um módulo muito interessante porque é uma implementação do jQuery para Node. Vou criar um arquivo novo para ilustrar melhor. Vou salvar como cheereio.js e colocá-lo como dependência, mas para isso é preciso instalar ele primeiro:

```jsx
npm install cheerio
```

e dentro do arquivo faremos o seguinte:

```jsx
const cheerio = require('cheereio')

let $ = cheerio.load('<ul><li>1</li><li>2</li></ul>')
```

A partir desse momento, o Cheerio vai carregar esse HTML que coloquei dentro e permitir que eu navegue ou faça tudo que eu faria com jQuery no HTML. Por exemplo, eu posso pedir para pegar todos os li e caminhar por eles, depois escrever na tela:

```js
$('li').each(function () {
  console.log($(this).html())
})
```

Ao rodar, ele irá retornar o 1 e 2. Podemos alterar o HTML também, vamos supor que eu queira adicionar mais um li:

```js
$('ul').append('<li>3</li>')

$('li').each(function () {
  console.log($(this).html())
})
```

Com isso eu consigo manipular o HTML exatamente como se estivesse no jQuery ou no browser. Eu poderia pegar esse código, voltar para o request e, ao invés de escrever o site da UOL na tela, jogar o Body dentro. Vamos supor que eu quero saber qual o título do site:

```js
const request = require('request')
const cheerio = require('cheerio')

request('https://www.uol.com.br', function (err, res, body) {
  if (!err && res.statusCode == 200) {
    let $ = cheerio.load(body)

    $('title').each(function () {
      console.log($(this).html())
    })
  }
})

// Resposta: UOL - Seu universo online
```

Então o request buscou o HTML, trouxe para o Cheerio, mandei ele carregar e fizemos um transversing e caminhei pelo HTML. Posso fazer ele trazer todos os p's do site da uol:

```js
const request = require('request')
const cheerio = require('cheerio')

request('https://www.uol.com.br', function (err, res, body) {
  if (!err && res.statusCode == 200) {
    let $ = cheerio.load(body)

    $('p').each(function () {
      console.log($(this).html())
    })
  }
})
```

O Cheerio não é um browser completo, então vai permitir que você apenas navegue pelo HTML, isso é muito legal para fazermos um crawler, por exemplo, podemos acessar um outro site como se fosse um navegador e escolher a informação que a gente quer, usando seletores do próprio jQuery.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/j6dSq6k5Q6g" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.


---

# Chocolatey - Gerenciador de Pacotes para Windows

Source: blog/chocolatey/index.md

Essa dica é para você utiliza o windows para desenvolvimento: um package manenger chamado chocolatey, semelhante ao yum. Ele facilita bastante quando vamos instalar algumas dependências ou pacotes de software como o NodeJS.

**Como instalar o chocolatey?**

A primeira coisa é entrar em [https://www.chocolatey.org/install](https://www.chocolatey.org/install){:rel="nofollow"}, rodar o CMD.exe como administrador e copiar esse trecho de código:

```jsx
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\\chocolatey\\bin"
```

Cole no CMD, dê enter e espere a instalação. Pronto! Agora vamos fazer um teste para instalar alguma dependência.
Note que no site há uma aba Packeges, nele temos todos os pacotes disponíveis para instalação. Vamos tentar instalar o 7zip. Selecione a linha de código referente ao programa e cole no CMD:

```jsx
choco install 7zip.install
```

Aparecerá uma mensagem para aceitar as licenças do pacote e, em seguida, que o pacote foi aprovado. Então perguntará se quer rodar o script, aperte Y para continuar. Pronto, o 7Zip está instalado na sua máquina.

Este é um utilitário muito interessante, pois podemos instalar Java, NodeJS, Python… Tudo a partir desse gerador de dependência. Facilita bastante para nós que sempre temos que ficar instalando algumas coisas no ambiente de desenvolvimento.

Confira os passos no vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RfbgCBCWME8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como Usar o Describe Session do Claude Code para Conectar Projetos

Source: blog/claude-code-describe-session/index.md

> Aprenda a usar o describe session do Claude Code para passar contexto entre sessões e projetos diferentes. Guia prático com exemplo real de CMS + front-end.

O **describe session** é uma funcionalidade do Claude Code que permite que uma sessão descreva seu próprio contexto de forma estruturada — como se estivesse gerando um briefing para outro agente ou sessão.

Na prática, você pede para o Claude explicar o que está acontecendo no projeto atual, e ele gera uma descrição completa: o que foi feito, qual é o estado atual e o que a próxima sessão precisa saber para continuar o trabalho.

Isso é especialmente útil quando você trabalha com **dois ou mais projetos que precisam se comunicar**, como um back-end e um front-end separados.

### Por que isso é útil ao trabalhar com múltiplos projetos

Quem desenvolve com projetos separados conhece o problema: você está no projeto A e precisa que o projeto B entenda exatamente o que mudou, quais endpoints estão disponíveis ou como uma integração deve funcionar.

Sem o describe session, a alternativa seria:

- Escrever manualmente um resumo do que foi feito
- Copiar trechos de código entre sessões
- Tentar explicar o contexto do zero em cada nova sessão

Com o describe session, o próprio Claude gera essa passagem de contexto de forma automática e estruturada. Ele entende o projeto, sabe o que foi implementado e consegue descrever isso como outro agente faria.

### Como usar na prática

Veja um caso real: um **CMS** criado com Claude Code que possui um **front-end** separado fazendo a integração.

O front-end começou a ter dificuldades para consumir a API do CMS. Em vez de abrir a sessão do front-end e tentar explicar tudo manualmente, o caminho foi diferente:

1. **Abra a sessão do Claude Code no projeto do CMS** (o projeto que tem o contexto que você quer compartilhar)
2. **Peça para o Claude descrever a sessão** pensando em como outro agente usaria essa informação. Algo como: *"Describe this session so another Claude session working on the front-end can understand how to integrate with this CMS"*
3. **O Claude gera a descrição completa** — endpoints disponíveis, estrutura de dados, autenticação, tudo o que a outra sessão precisa saber
4. **Use essa descrição na sessão do front-end** como contexto inicial, colando o output ou referenciando-o

O resultado é que a sessão do front-end recebe um briefing claro e estruturado, sem perda de informação.

### Indo além: passando contexto entre agentes e modelos diferentes

O describe session não se limita a conectar duas sessões do Claude Code. Você pode usar essa mesma técnica para:

- **Passar contexto entre agentes diferentes** — por exemplo, de um agente de código para um agente de revisão
- **Gerar prompts para outros modelos** — pedir para o Claude descrever a sessão em formato de prompt otimizado para outro LLM
- **Criar documentação de handoff** — quando outro desenvolvedor (humano ou IA) vai assumir o trabalho

A ideia central é a mesma: transformar o contexto implícito de uma sessão de trabalho em uma descrição explícita e reutilizável.

### Quer dominar o Claude Code e IA na prática?

Se você quer ir além e aprender a usar o Claude Code como ferramenta principal no seu fluxo de desenvolvimento, temos um curso bônus sobre IA e Claude Code dentro do **The Best Stack**. Lá você aprende na prática como integrar IA no seu dia a dia como dev.

**[Acesse o The Best Stack e comece agora](https://do.devpleno.com/the-best-stack)**

### FAQ

#### O describe session funciona entre projetos diferentes?

Sim. Você pode usar o describe session em um projeto e levar a descrição gerada para qualquer outro projeto ou sessão. O contexto é gerado como texto, então é portável.

#### Preciso usar algum comando específico?

Você pode simplesmente pedir em linguagem natural para o Claude descrever a sessão atual. Use instruções claras sobre para quem é a descrição (outro agente, outro projeto, outro modelo) para obter o melhor resultado.

#### Funciona com outros modelos além do Claude?

Sim. Como o output é texto estruturado, você pode usar a descrição gerada como prompt para qualquer outro modelo ou ferramenta de IA.

#### Qual a diferença entre describe session e os arquivos CLAUDE.md?

Os arquivos CLAUDE.md são instruções persistentes que você escreve manualmente para dar contexto ao Claude em todas as sessões de um projeto. O describe session é uma descrição gerada sob demanda do estado atual de uma sessão específica — útil para passagens pontuais de contexto.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "O describe session funciona entre projetos diferentes?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Sim. Você pode usar o describe session em um projeto e levar a descrição gerada para qualquer outro projeto ou sessão. O contexto é gerado como texto, então é portável."
      }
    },
    {
      "@type": "Question",
      "name": "Preciso usar algum comando específico?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Você pode simplesmente pedir em linguagem natural para o Claude descrever a sessão atual. Use instruções claras sobre para quem é a descrição para obter o melhor resultado."
      }
    },
    {
      "@type": "Question",
      "name": "Funciona com outros modelos além do Claude?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Sim. Como o output é texto estruturado, você pode usar a descrição gerada como prompt para qualquer outro modelo ou ferramenta de IA."
      }
    },
    {
      "@type": "Question",
      "name": "Qual a diferença entre describe session e os arquivos CLAUDE.md?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Os arquivos CLAUDE.md são instruções persistentes que você escreve manualmente para dar contexto ao Claude em todas as sessões de um projeto. O describe session é uma descrição gerada sob demanda do estado atual de uma sessão específica."
      }
    }
  ]
}
</script>


---

# Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente

Source: blog/claude-code-otimizacao-arquivos/index.md

> Aprenda como o Claude Code pode otimizar PNGs, imagens e outros arquivos do seu projeto com um simples pedido. Reduza até 80% do tamanho dos arquivos.

Você sabia que pode simplesmente pedir para o Claude Code otimizar os arquivos do seu projeto — e ele faz tudo sozinho? Sem pesquisar ferramenta, sem ler documentação, sem configurar nada. Em um teste real com PNGs, conseguimos **reduzir 80% do tamanho dos arquivos** com um único pedido.

Se você trabalha com projetos que têm imagens, assets ou bundles pesados, essa é uma das formas mais rápidas de ganhar performance sem esforço manual.

### O Claude Code Otimiza Arquivos Por Você

A ideia é simples: você abre o Claude Code no terminal, descreve o que precisa, e ele cuida do resto.

Quando pedimos "otimize os PNGs deste projeto", o Claude Code:

1. **Analisou o projeto** e identificou os arquivos PNG
2. **Sugeriu a ferramenta certa** — no caso, o pngquant, uma das melhores opções para compressão de PNG com perda controlada
3. **Perguntou se queríamos rodar automaticamente** — sem impor nada
4. **Executou a otimização** em todos os arquivos de uma vez

Nenhuma etapa exigiu que soubéssemos qual ferramenta usar ou como configurá-la. O Claude Code trouxe o conhecimento técnico e a execução.

### Exemplo Prático — 80% de Redução em PNGs

Em um projeto real, pedimos para o Claude Code otimizar as imagens PNG. Ele escolheu o **pngquant**, uma ferramenta de linha de comando que reduz o tamanho de PNGs usando quantização de cores com canal alfa.

**Os resultados:**

| Métrica | Antes | Depois |
|---------|-------|--------|
| Tamanho total dos PNGs | 100% | ~20% |
| Redução média | — | **~80%** |
| Qualidade visual | Original | Praticamente idêntica |

O Claude Code ainda ofereceu criar uma comparação lado a lado para checar a qualidade de cada imagem. Como estávamos usando **Git e GitHub**, conseguimos revisar o antes e depois diretamente no pull request — cada alteração de imagem ficava visível no diff.

**Dica:** sempre faça a otimização em um branch separado. Assim você compara visualmente no GitHub antes de fazer o merge, sem risco de perder qualidade sem perceber.

### Outros Tipos de Otimização Que Você Pode Pedir

PNG é só o começo. O Claude Code consegue sugerir e executar otimizações para praticamente qualquer tipo de arquivo ou recurso do seu projeto:

- **Imagens (SVG, JPEG, WebP)** — ferramentas como svgo, mozjpeg ou cwebp, escolhidas automaticamente conforme o formato
- **Bundles JavaScript e CSS** — minificação, tree-shaking, análise de tamanho com ferramentas como esbuild ou terser
- **Dockerfiles** — redução de camadas, multi-stage builds, imagens base menores
- **Queries SQL** — reescrita de consultas lentas, sugestão de índices
- **Fontes** — subsetting para incluir apenas os caracteres usados

O padrão é sempre o mesmo: você descreve o problema, o Claude Code encontra a ferramenta, explica o que vai fazer e executa com sua aprovação.

### Erros Comuns ao Otimizar Arquivos com IA

Mesmo com uma ferramenta inteligente, alguns cuidados são importantes:

**Não revisar a qualidade visual.** Compressão de imagem sempre envolve trade-offs. Mesmo com 80% de redução, revise as imagens mais importantes. O GitHub facilita isso — o diff de imagens mostra o antes e depois lado a lado.

**Não versionar antes de otimizar.** Sempre rode otimizações em um branch separado no Git. Se algo der errado, você volta ao estado anterior em um comando. Sem versionamento, uma otimização agressiva pode destruir assets originais.

**Aceitar tudo sem entender.** O Claude Code explica o que vai fazer antes de rodar. Leia a sugestão. Entenda se a ferramenta proposta faz compressão com perda (lossy) ou sem perda (lossless). Para ícones e screenshots, lossy geralmente funciona bem. Para assets de design que serão editados depois, prefira lossless.

**Otimizar uma vez e esquecer.** Novos arquivos entram no projeto o tempo todo. Considere criar um script ou hook de CI que rode a otimização automaticamente em cada PR.

### Quer dominar o Claude Code e IA na prática?

Se você quer ir além e aprender a usar o Claude Code como ferramenta principal no seu fluxo de desenvolvimento, temos um curso bônus sobre IA e Claude Code dentro do **The Best Stack**. Lá você aprende na prática como integrar IA no seu dia a dia como dev.

**[Acesse o The Best Stack e comece agora](https://do.devpleno.com/the-best-stack)**

### FAQ

#### O Claude Code instala ferramentas sozinho?

Sim. Quando o Claude Code sugere uma ferramenta como o pngquant, ele pede sua aprovação e executa a instalação via gerenciador de pacotes (brew, npm, apt, etc.). Você mantém o controle — nada roda sem seu OK.

#### Funciona com qualquer tipo de arquivo?

O Claude Code trabalha com qualquer arquivo que tenha uma ferramenta de otimização disponível via linha de comando. Imagens, vídeos, fontes, código minificado, containers Docker — se existe uma ferramenta para isso, ele consegue sugerir e rodar.

#### Preciso saber usar linha de comando?

Não. Esse é justamente o ponto. Você descreve o que precisa em linguagem natural — "otimize os PNGs", "reduza o tamanho do bundle", "comprima as imagens" — e o Claude Code traduz isso em comandos técnicos. Ele explica o que vai fazer antes de executar.

#### É seguro rodar otimizações automáticas no meu projeto?

Sim, desde que você use Git. Crie um branch, rode a otimização, revise as mudanças no diff e só faça merge quando estiver satisfeito. É o mesmo fluxo de qualquer mudança de código.

#### Quanto de redução posso esperar?

Depende do tipo de arquivo e do nível de otimização anterior. PNGs não otimizados costumam ter reduções de 50-80%. SVGs com código desnecessário podem cair 30-60%. O Claude Code mostra os resultados para você avaliar.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BlogPosting",
      "headline": "Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente",
      "description": "Aprenda como o Claude Code pode otimizar PNGs, imagens e outros arquivos do seu projeto com um simples pedido. Reduza até 80% do tamanho dos arquivos.",
      "inLanguage": "pt-BR",
      "keywords": ["Claude Code otimização", "otimizar PNG com IA", "pngquant automático", "otimizar imagens com Claude"]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "O Claude Code instala ferramentas sozinho?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Sim. Quando o Claude Code sugere uma ferramenta como o pngquant, ele pede sua aprovação e executa a instalação via gerenciador de pacotes. Você mantém o controle."
          }
        },
        {
          "@type": "Question",
          "name": "Funciona com qualquer tipo de arquivo?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "O Claude Code trabalha com qualquer arquivo que tenha uma ferramenta de otimização disponível via linha de comando. Imagens, vídeos, fontes, código minificado, containers Docker."
          }
        },
        {
          "@type": "Question",
          "name": "Preciso saber usar linha de comando?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Não. Você descreve o que precisa em linguagem natural e o Claude Code traduz isso em comandos técnicos, explicando o que vai fazer antes de executar."
          }
        },
        {
          "@type": "Question",
          "name": "É seguro rodar otimizações automáticas no meu projeto?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Sim, desde que você use Git. Crie um branch, rode a otimização, revise as mudanças no diff e só faça merge quando estiver satisfeito."
          }
        },
        {
          "@type": "Question",
          "name": "Quanto de redução posso esperar?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Depende do tipo de arquivo. PNGs não otimizados costumam ter reduções de 50-80%. SVGs com código desnecessário podem cair 30-60%."
          }
        }
      ]
    }
  ]
}
</script>


---

# Closure Série - POO para JS

Source: blog/closure-poo-para-js/index.md

Hoje vou continuar a falar sobre como passar de Programação Orientada-objetos para JavaScript cada vez mais funcional.

Uma outra coisa bastante diferente para se comparar entre ambos os paradigmas é o uso de closure. No JavaScript, anteriormente tínhamos reproduzido aquela “classe” e acabamos criando uma closure. Vamos supor que eu faça uma função dessa forma:

```jsx
function func1() {
  const name = 'tulio faria'

  function func1b() {
    console.log(name)
  }

  func1b()
}

func1()
```

Em JavaScript é normal e podemos fazer uma função dentro de uma função como no exemplo acima. Você percebeu que eu consegui acessar o 'name'? Isso é uma característica do JS. Por conseguir colocar uma função em uma variável, é possível ter funções dentro de funções. Essa função interna consegue acessar o escopo da função pai.

No cenário, vamos executar esse código todo síncrono e em seguida ele morre, porém, existe uma outra situação onde eu consigo manter esse escopo vivo. Vamos supor que eu queira passar uma saudação:

```js
function func1() {
  const saudacao = 'Ola' + name

  function func1b() {
    console.log(saudacao)
  }

  return func1b
}

const saudarOTulio = func1('Tulio Faria')

saudarOTulio()
```

Quando eu fiz isso, a func1 passou a ser uma closure porque ela travou esse escopo inteiro, nisso eu posso a qualquer momento chamar essa saudação. Existem alguns tipos de funcionalidades dentro do JS que permitem que a gente faça alguns tipos interessantes, como por exemplo:

```js
const contador = function (num) {
  let atual = 1

  let timer = setInterval(() => {
    if (atual === num) {
      clearInterval(timer)
    }

    console.log(atual++)
  }, 1000)
}

contador(5)
```

Temos um contador que está usando todas as variáveis do lado de fora e temos um contador separado. Perceba que o setInterval está usando as variáveis de fora, isso cria um enclausuramento dessas variáveis. Outra coisa importante: esse código é assíncrono, então sempre que chamamos o setInterval, colocamos isso no event loop.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Iyp4F5TRjU8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# NodeJS Primeiros Passos: Closures e Escopos

Source: blog/closures-e-escopos/index.md

Neste vídeo é abordado mais sobre closures e escopos em javascript, conceitos bastante importantes para a criação futura de módulos.

[Código fonte:](https://gist.github.com/tuliofaria/72953c6c4b898561aee5e8d91dd589ab)

### Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xexyc2J-Di0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# CLT ou PJ em Software - O que vale mais a pena?

Source: blog/clt-ou-pj/index.md

Hoje eu gostaria de mostrar uma continha que eu acho bastante interessante quando vamos analisar ofertas de emprego, que o pessoal fala sobre CLT ou PJ. Entenda qual o custo de cada uma delas e porque você deveria escolher uma ou outra.

A primeira coisa que temos que definir é o salário (lembrando que eu não sou contador, essa é uma conta que eu geralmente faço caso alguém me ofereça um emprego). Vamos colocar, por exemplo, R$10 mil.

Qual o custo disso para a empresa que está empregando?

O custo para ela vai ser na faixa de 13x esse valor, pois é acrescentado o décimo terceiro, férias, etc, mais um encargo em torno de 30%:

10.000,00 x 13 x 1,3 = 169.000,00
Valor para a empresa: R$169.000,00

Então se você recebe R$10 mil por mês, em um ano você custa em torno de R$169 mil para a empresa. No meu caso, como eu sou Super Simples, eu acabo pagando meus funcionários todos juntos no CLT, então não dá pra ter uma ideia muito grande de quanto é.

Quanto desses R$169 mil você vai levar efetivamente?

Lembrando que se você recebe R$10 mil, vai bater na alíquota máxima do imposto de renda, então temos que multiplicar também por 0,725

10.000,00 x 13 x 0,725 = 94.250,00
Valor líquido: R$94.250,00

Perceba que isso já é uma diferença de R$74.750,00 (isso é apenas uma comparação no caso da CLT). Agora, qual o custo como PJ para a empresa que está te contratando?

10.000,00 x 12 = 120.000,00

No fim das contas a empresa não vai gastar mais nada, mas qual o líquido que você vai receber em cima desses R$120 mil? Você terá que pagar um imposto, que se for no Super Simples, por exemplo, pode cair em torno de 8%:

10.000,00 x 12 x 0,93 = 111.600,00
Valor líquido: R$111.600,00

Esse é um cálculo bem por cima, mas recebendo como PJ, você teria um custo menor para a empresa e seu lucro também seria muito maior. Obviamente as pessoas se perguntam sobre os benefícios de ser registrado, mas esquecem que o seguro desemprego, por exemplo, tem um teto salarial, então se você ganha R$10 mil por mês, não vai ganhar isso de seguro desemprego então, nos seus 6 primeiros meses de PJ, você pode e deve, por exemplo, fazer uma reserva de segurança. Agora é a grande vantagem do que eu vejo em pensar como uma pessoa PJ, mesmo você sendo CLT.

Como PJ, você não tem algumas seguranças como o seguro desemprego, a vantagem que eu vejo é que você vai ter mais consciência das coisas, quanto custa um plano de saúde, plano B caso aconteça algo e por fim não vai ser enganado pelo décimo terceiro, porque você acha que está ganhando a mais quando, na verdade, o custo que você tem vai ser maior como CLT.

Se a empresa tiver R$169 mil para pagar um profissional ao invés de R$10 mil, seu salário poderia ser 169000/12 que daria uma quantia de R$ 14.083,33.
Isso é apenas um apanhado sobre tributações. Existem vários trâmites, se é legal ou não… isso não é o mérito dessa aula, e sim mostrar a diferença efetiva dos dois lados.

Na parte do PJ, pode ser, por exemplo, que precise pagar um contador. Vamos colocar um valor de R$300,00/mês como exemplo, então seria R$3600,00 por ano, mesmo assim a diferença é muito gritante. Falando em valores finais, ainda vale a pena ser PJ. Se você tiver que escolher, pense com calma o que realmente quer, faça os cálculos.

### Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kvu_JVO3BYE" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# cmder: Turbine seu cmd no Windows

Source: blog/cmder-turbine-seu-cmd-no-windows/index.md

Olá pessoal,
hoje vai uma dica interessante para quem desenvolve no windows (sim, eu ainda me incluo neste grupo, mas logo logo estarei de mudança :)).

Eu fico bastante irritado com o cmd padrão do windows. Simplesmente porque tudo nele é meio burocrático de se fazer (aka copiar saídas, etc). Bom, resolvi então buscar uma solução, e uma das que estou utilizando atualmente e estou gostando muito é o Cmder.

Bom, começando pela interface:
![Interface do Cmder](9ea5e58b-1300-45dc-9d53-8ab2f8bde11d.png)

Achei muito bacana esse efeito translucido, mas além de ser só um corpinho bonito, ele realmente é muito funcional e ajuda bastante na produtividade. Alguns pontos que já me chamaram a atenção:

1 – Várias abas
Basta utilizar o atalho: Shif+Alt+1 para adicionar uma aba do CMD, ou Shit+Alt+2 para uma do PowerShell. Ah, e elas ficam todas organizadinhas na parte de baixo da interface (quem já teve que lidar com um zilhão de cmd´s abertos ao mesmo tempo no windows sabe como isso é um grande avanço).

2 – Copiar e colar
Copiar e colar no cmd padrão é bem complicadinho. Você não consegue selecionar o texto diretamente. Já no cmder basta selecionar o texto que você quer que ele já copia. Se quiser colar, basta clicar com o botão direito do mouse.

3 – Cmd on esteroids
O cmder utiliza um “enhancer” para ampliar os comandos disponíveis no shell. Inclusive com SSH, CURL, VI e grep 🙂

4 – Isso é só o começo
Recomendo vocês a entrarem nas preferências do Cmder (clicando no title com o botão direito) ou pressionando win+alt+p, e o personalizar ainda mais (aumentar a fonte entre outros). É possível também configurar como novas abas serão abertas. Vale a pena explorar 🙂

Eu explorei alguns destes itens, porém, só com o básico já ganhei bastante produtividade, acredito que vocês também ganharão. Até a próxima dica 😉

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# code fights - Metro Card

Source: blog/code-fights-metro-card/index.md

Hoje vamos resolver mais um problema que está disponível no Code Fights. Esse problema é chamado de metro card. Pode parecer simples, mas tem algumas coisas bastante interessantes de ter na cabeça.

O que é o problema do metro card?

Nós temos uma função que você vai informar qual o último número de dias. Vamos supor que eu tenho um cartão de metro com 30 dias, eu utilizei os 30 dias, o vetor vai me retornar as possibilidades de próxima recarga baseado em como os meses são organizados.

```js
function metroCard(lastNumberOfDays) {}
```

Por exemplo, se colocarmos 28 no lastNumberOfDays, teríamos que retornar 31, que é o próximo mês que podemos recarregar. Minha ideia inicial foi montar um vetor com os meses do ano:

```js
function metroCard(lastNumberOfDays) {
  const months = [
    31, //jan
    28, // fev
    31, //mar
    30, //apr
    31, //may
    30, //jun
    31, //jul
    31, //aug
    30, //set
    31, //oct
    30, //nov
    31 //dec
  ]
}
```

Outra coisa bastante importante é ficar ligado no que o problema pede como saída, especificamente nesse problema, temos que retornar um vetor ordenado crescente.

Agora podemos fazer o seguinte: vamos guardar todos os dias que a gente tem posterior a esse valor informado. Por exemplo, se eu informei 28, a única possibilidade que tenho é 31:

```js
const days = {
  months.forEach((elem, index) => {
    if(elem === lastNumberOfDays){
      console.log(months[index+1])
    }
  })
}

metroCard(28)

metroCard(30)
```

Percebam que o mês vai ser retornado como undefined. Nós precisamos de mais um ajuste, precisamos somar que o índice precisa fazer o resto por %12. Sempre que usamos o %, ele volta para zero e pega o restante, por exemplo 4 %12 retorna 4.

```js
const days = {
  months.forEach((elem, index) => {
    if(elem === lastNumberOfDays){
      console.log(months[(index+1)%12])
    }
  })
}
```

Agora podemos criar um key utilizando o número do dia e retornar o nosso object com as keys. Além disso, essa chave trás strings, precisamos retornar inteiros para garantir que o sort vai ordenar ele como queríamos:

```js
const days = {
  months.forEach((elem, index) => {
    if(elem === lastNumberOfDays) {
      days[months[(index+1)%12] = 1]
    }
  })

  return Object
    .keys(days)
    .map( item => parseInt(item))
    .sort()
}

```

Ele é uma estrutura de dados muito comum. Além disso, vimos a estratégia de como resolver a parte cíclica. Quanto mais olharmos abordagens diferentes, mais preparados vamos estar para resolver esses problemas.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/d8K0xTGb014" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Codility: Como Resolver os Desafios e Passar nos Testes de Código

Source: blog/codility/index.md

> Guia prático para resolver desafios do Codility. Dicas, estratégias e exemplos de soluções para testes técnicos de programação.

O Codility é uma plataforma que pode ser utilizada para treinar programação e, no caso de recrutadores, para selecionar programadores para a equipe. No meu caso. utilizei o Codility para passar em uma das provas da Toptal e já aproveitei para estudar um pouco mais sobre programação.

**Vamos ao hands-on**

Depois de logado no Codility, já caímos em Codility Programers, que é o ambiente para programadores. Na parte superior, temos duas abas: as Lessons e os Challenges. Lessons são as lições que ele tem sobre assuntos de programação, conceitos básicos como iterações, vetores, etc. Já Challenges, são 'competições' que podemos participar. Ele é um ambiente completo. Conseguimos rodar baseados nas entradas, desenvolver normalmente utilizando a ferramenta.

**Como me preparei para a Toptal?**

Fui em lessons e fiz tudo que tinha para fazer, deixando tudo em 100%. Eu gosto de fazer na minha máquina depois submeter a solução, mas é possível fazer diretamente no Codility.

Vamos fazer um exemplo. Vou entrar em Iterations e dar o Start na lição. Vai aparecer a mensagem que eu tenho 120 minutos para concluir. Ao começar, é possível mudar de linguagem na aba superior.

O problema vem escrito do lado esquerdo e temos que resolver do lado direito. Ele já cria uma função solução.

Conseguimos dar um run para fazermos alguns casos de teste que rodarmos diretamente pelo Codility. Temos também o submit this task, aí sim ele vai passar por todos os processos de qualidade. É preciso ficar atento ao fato de que o Codility considera a complexidade. Na lesson escolhida, por exemplo, ele espera que o pior cenário a complexidade seja O(log(N));

Ele não consegue fazer isso igual fazemos manualmente, ele tem uma estimativa de qual o custo desse algoritmo, ou seja, uma estimativa baseada no que ele percebe que você definiu de variáveis por causa da complexidade de espaço e, no caso de tempo, mede o tempo, então isso pode variar bastante. Isso é bom para ficarmos atentos para reduzirmos esse tempo de consumo, tanto de processador quanto de memória. Também em lessons, temos os materiais para ler e entender o assunto daquela lição especifica. É recomendável ler os materiais também, pois muita das técnicas computacionais mostradas ali são interessantes para relembrar.

O Codility é tão simples quanto isso que eu mostrei. Quando você for fazer uma prova, alguém vai te mandar um link, você vai clicar e cair em uma prova específica da empresa, então ele escolhe a dificuldade das questões e define o tempo da prova inteira ou para cada questão.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/xbJ-ZAVL_vM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Coisas ruins normais

Source: blog/coisas-ruins-normais/index.md

Essa dica de carreira é bem rápida, mas muito importante. Uma coisa que eu vejo acontecer com frequência é o fato das pessoas acharem que certas coisas ruins são normais. Por exemplo, vamos supor que você vá colocar o seu site ou uma atualização do seu sistema no ar e aquilo demora muito tempo… Quando está muito trabalhoso de se fazer, não está bom porque deve ser natural. Imagine que você tem que lembrar uma sequência de 50 pastas para colocar o sistema no ar.

Sempre que você perceber algumas situações como essa, verifique se não há uma maneira melhor de fazer isso. Já aconteceu de eu entrar em algumas equipes, nas quais algumas pessoas falavam algo do tipo: “isso funciona muito bem, só precisamos fazer isso, ou aquilo e depois isso.” No fim das contas, você tinha 50 processos para fazer em cada coisa. Se você organizasse, aquilo funcionaria muito melhor. Então não ache que está tudo normal se você está tendo muito trabalho para fazer algo.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/gmNoxscFPWQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Como as maratonas de programação da faculdade impactaram a minha carreira

Source: blog/como-as-maratonas-de-programacao-da-faculdade-impactaram-a-minha-carreira/index.md

A história do post de hoje já tem mais de 10 anos e faz parte de lembranças que eu tenho de quando ainda estava na faculdade, mais precisamente, de quando participava das maratonas de programação, onde me graduei. E fique comigo até o fim, pois a lição aqui não é só baseada nos prêmios e competição, mas tem total relação a minha aprovação na Toptal.

Esses são prêmios que ganhei participando das competições de programação. Apesar de simbólicos, eles não estão aqui para me gabar ou algo assim, mas claro, eles representam muito para mim e para o meu crescimento profissional e carregam histórias e lembranças da minha evolução como dev.

![Minhas premiações em competição de programação](d4880d63-4e4d-4521-be16-4ff5c668fd69.jpeg)

Na época foi gratificante, por exemplo, em uma competição onde havia alunos de todos os períodos, ter ficado em primeiro lugar mesmo competindo com o pessoal prestes a se formar (que além de mais experiência, já tinham participado das semi-finais nacionais da mesma competição).

No segundo ano de competição, como eu havia vencido no primeiro ano de faculdade, fui com a mentalidade de “já ganhei”. Bom, e aí vem mais uma lição: aprender que nem sempre vencemos. Sim, no meu segundo, fiquei em segundo lugar.

Ainda tinha mais 2 anos de competição, dava para vencer mais 2. Sim, sou muito competitivo e isso não é errado se você não deixar a competitividade passar por cima da sua ética.

Vamos para terceira vez competindo e… Caramba! Ficamos em segundo de novo! E a mesma equipe que havia nos desbancado no ano anterior venceu novamente. O que mais me chocava era que eles venceram sempre utilizando Pascal (perdemos realizando tudo em C puro).

Antes de ir para a minha última competição, refleti sobre o que eu tinha feito de diferente no primeiro ano e que não fiz nos outros 2 e também sobre como perdemos.

No quesito preparação, foi basicamente a mesma coisa, sempre me preparei. Fiz um aquecimento resolvendo vários problemas semelhantes nas semanas que antecederam a competição…

Mas havia algo a mais. Foi aí que lembrei que perdíamos por tempo e não por assertividade. Em maratonas de competição, o primeiro critério é o número de problemas resolvidos: quem resolve mais, vence e em caso de empate, quem os resolve mais rápido. Reparei que como a outra equipe entregava muito rápido (sim, os caras eram muito rápidos em Pascal e eram bem assertivos), tínhamos que vencer de outra forma: na quantidade.

Na minha última participação, faltando 30 minutos para acabar a competição, estávamos perdendo de novo – por tempo. Mesmo número de problemas resolvidos, porém, a equipe Pascal era rápida, tsc.

Restavam problemas cabeludos para resolver… Bom, dá para imaginar que fiquei nervoso e ansioso, mas foquei em fazer passar mais uma solução de problema. Tenta que tenta que tenta… Passamos! \o/

Caramba! Que alívio! Agora, era esperar que o Pascal Team não fizesse mais um – pois perderíamos no desempate por tempo. Lembro que fui embora da sala de competição e brinquei com a equipe do Pascal: “Agora é com vocês”.

![Minha equipe na nossa última participação](a1357667-cbd4-4514-93cb-7e6edc9202de.jpeg)

É, desta vez foi! Vencemos! Conseguimos encerrar a graduação com mais uma vitória. 🙂

### Algumas lições que tirei durante os quatro anos de competição

O que mais aprendi durante a minha última vez competindo foi: precisamos repetir o que dá certo e mudar o que não dá. Parece simples, mas na prática é um pouco mais complicado.

Outro ponto importante: como manter a cabeça no lugar sob pressão. Daqueles 30 minutos finais, 20 passaram como se fosse 1 segundo (até que conseguimos resolver o problema). já os 10 minutos esperando, na ansiedade para descobrir se a outra equipe conseguiria resolver, pareciam dias. Isso me ensinou na prática como controlar o máximo que dava meu emocional.

Mas agora vem uma parte mais importante de toda essa história: a competição foi muito legal, ser premiado melhor ainda. Porém, naquele momento, eu não sabia o quanto ter vivenciado tudo isso teria de impacto na minha carreira.

### Como as maratonas de programação da faculdade me ajudaram a prosperar na carreira de Dev

Muitas vezes, os alunos ignoram atividades extracurriculares durante a faculdade e não dão a importância que elas realmente merecem. No meu caso, foi justamente nessas maratonas que eu passei a treinar programação e, sem dúvidas, isso fez toda a diferença na minha carreira e impactou (positivamente) na criação do DevPleno.

Quase 9 anos depois, fui participar do processo seletivo da Toptal, e adivinhem: em uma das fases (por sinal uma das que mais reprovam) o objetivo era resolver o máximo de problemas em 1 hora. Além do formato parecer muito com a maratona de programação, os tipos de problemas também eram bem semelhantes… Eu já tinha feito isso antes! 🙂

![Tulio Faria](35b9725c-0bb4-414a-8ecd-760771c84d88.jpg)

E deu certo! Não passei de primeira – e está tudo bem. Mas o melhor foi que, mesmo não tendo passando de primeira, a mentalidade já vinha sendo preparada para conseguir passar na segunda tentativa.

### Aproveite as oportunidades

Mais importante do que ter oportunidades é saber aproveitar cada uma delas ao máximo. Às vezes, estamos com a “faca e o queijo na mão” e não enxergamos o quão preciosas são as chances que aparecem na nossa vida.

Por isso, agarre cada oportunidade que surgir na sua vida, seja na faculdade, no trabalho, nas viagens, nos estudos… Veja cada momento como uma chance de se dedicar e explorar os conhecimentos ao máximo. Isso pode te levar a outro patamar e com certeza vai te fazer crescer. Muito.

Talvez não agora… Talvez daqui 10 ou 20 anos, mas a semente vai estar plantada. Aproveite!

Ps 1: Aqui fiz uma brincadeira sobre utilizar Pascal, mas é notório que toda linguagem bem utilizada traz resultados.

PS 2: Nas competições que citei, eu não estava sozinho. Obrigado aos meus amigos Luana Lima e Herick Ferreira, pela companhia na equipe Bender. Nós fizemos um ótimo trabalho em equipe.

PS 3: Obrigado, professor Roberto Porto, pelo apoio e incentivo às competições.

PS 4: Na segunda foto, Roberto Porto, eu, Luana Lima e Herick Ferreira.


---

# Como aumentar a produtividade diminuindo a troca de contexto

Source: blog/como-aumentar-a-produtividade/index.md

Você sente que não está sendo tão produtivo quanto poderia? Após fazer algumas mudanças na forma como desenvolvo projetos, estou aumentando a minha produtividade.

A primeira coisa que mudei foi deixar de usar o sublime e passei a usar o Visual Studio code (VScode).

**Por que eu fiz isso?**

O VScode tem algumas coisas integradas, que eu sei que é possível integrar no Sublime, mas achei mais interessante no próprio VScode: o modo como ele funciona o Git e como depurar códigos, por exemplo.

No Sublime, eu deixava todos os projetos abertos ao mesmo tempo, com muitas abas, já no VScode, ao invés de abrir todas as abas de todos os projetos ao mesmo tempo, passei a abrir apenas um diretório e ele se mantém da forma como abri da última vez.

Uma coisa que percebi foi o tempo que gastava nessa mudança de contexto, pois eu estava com todos os projetos abertos e acabava virando uma bagunça. Perdia tempo achando o contexto em que eu estava e, como eu trabalho com vários projetos simultâneos, deixava aberto e esquecia.

Abrindo apenas um projeto fica muito mais fácil. No Git, ele já irá acender se tiver algo para comitar ou enviar, além de me permitir fazer isso e adicionar os arquivos que vou comitar de forma mais precisa.

Então muitas vezes uma mudança simples como essa pode nos deixar mais produtivo, afinal perdemos menos tempo nessa troca de contexto.

No meu caso demorou para eu perceber que isso reduzia minha produtividade, então comecei a trabalhar dessa forma diferente e senti uma mudança. E você, como desenvolve software hoje: como eu fazia antes ou assim como estou fazendo agora?

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/dXLLWMtXfww" allowfullscreen></iframe>
</div>

Deixe seu comentário. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como cobrar por Software

Source: blog/como-cobrar-por-software/index.md

Para precificar software, alguns fatores devem ser levados em consideração e você deve responder algumas perguntas a si mesmo. Confira:

**O que você está vendendo?**

A primeira coisa que deve pensar é chegar em no valor/hora, afinal vai ter que gastar horas e mais horas neste software, logo estará vendendo seu tempo para o cliente.

**O que avaliar nesse valor/hora?**

Quando pensar no valor, deve pensar no nível de experiência que essa hora demanda. (Por exemplo, para um site em HTML simples, o quanto da sua especialidade este conteúdo vai utilizar?) Por isso a hora de um analista de dados atualmente é tão alta, afinal não tem no mercado e isso exige muito conteúdo, como mineração de dados, matemática, etc. Já para o HTML, por exemplo, não precisa de muita habilidade para ser feito, logo é uma hora mais barata.

Também precisa em sua disponibilidade. Hoje você tem tempo disponível para executar o projeto? Por exemplo, se você trabalha com HTML e todas suas horas estão ocupadas, isso significa que você é bom nesta especialidade (oferta e demanda), logo esta sua hora é um pouco mais cara, pois ao invés de jogar videogame em suas poucas horas disponíveis, você vai estar programando. Porém é preciso tomar cuidado com o viés da sobrevivência, às vezes sua disponibilidade está alta, mas não porque você é ruim, mas sim porque você está entre um projeto e outro.
Qual o valor agregado desta sua hora?
Quanto sua hora rende? Às vezes você é muito bom e cobra, por exemplo. R$100,00 e um profissional mediano que não renderia tanto cobra R$150,00, neste caso sua hora está desvalorizada, pois sua ela rende mais que a dele. Se você tem experiência e consegue resolver mais rápido e com mais eficiência, então o valor agregado à sua hora é maior. Ao final qual o resultado dessa sua hora aplicada? Vai fazer uma diferença muito grande no projeto? Se sim, sua hora também vai ser mais cara.

**Isso é tudo?**

Precisa pensar também quais são os custos que algumas vezes você não enxerga: Internet, telefone, luz ou algum outro serviço. Quais são os custos que impactam nesse valor da sua hora? Quais os impostos deve pagar? (Sua hora pode R$100,00, mas você esquece de que, dependendo da situação, precisa pagar de 7 a 18% de imposto, então acaba recebendo R$82,oo. Concorda?)
É importante que defina uma porcentagem de lucro. Quando você vai conseguir contratar alguém? Quando você tiver uma hora bem paga, conseguirá pagar o funcionário e ter um lucro não envolvendo sua hora?

Faça estimativas das horas gastas no projeto, por exemplo, sua hora custa R$100,00 e o projeto tem uma estimativa de 40 horas, então o projeto custará em torno de R$4.ooo,oo. A partir disso, avalie se esse valor realmente irá trazer o resultado esperado desta hora. (Já teve casos que deixei de passar o orçamento para o cliente porque ficaria muito caro, de acordo com minha disponibilidade, experiência e o que o projeto exigia, não valeria a pena para ele, já que ele não teria o retorno tão rápido disso).
Avalie se você não está superestimando o valor. A margem de lucro muito alta pode assustar o cliente, já que ele não vai ver seu cálculo sobre o valor.

**Como saber a base para a hora de acordo com o seu nível?**

Você está atuando como PJ? Se sim, pense o seguinte: R$30,00 por hora para um Junior é um valor interessante, pensando que um Junior rende mais ou menos um terço de uma pessoa com experiência. E para um pleno R$100,00 é um valor muito alto, pois pouquíssimos projetos justificariam este valor, a não ser que sua disponibilidade seja muito pequena e sua especialidade muito grande (em casos de consultorias, por exemplo, poderia subir mais).
Muitas vezes as pessoas olham no sindicato. Lá as horas são totalmente desproporcionais e não servem de referência. O ideal é ir ajustando, por exemplo, o projeto você estimou que demoraria 40 horas, mas terminou antes, então entrega um pouco mais ao cliente e no próximo você ajusta essa hora. O mesmo vale para o inverso: deu mais tempo? Então ajuste para mais.
O mais importante é colocar um valor que você ache justo, mas não justo para ficar milionário no primeiro projeto. (Quando eu comecei, cobrava meus sites em torno de R$2.000,00. Fazia o site muito rápido, mas era péssimo de layout, então contratava alguém por R$1.000,00, então minhas 4 horas valiam R$250,00. Assim, conseguia entregar muitos sites, pois terceirizava uma parte do processo).

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como converter uma string em Base64 em JavaScript (Navegador e NodeJS)

Source: blog/como-converter-uma-string-em-base64-em-javascript-navegador-e-nodejs/index.md

> Aprenda a converter strings em Base64 no JavaScript com btoa/atob no navegador e Buffer no Node.js. Exemplos práticos de encode e decode.

A codificação em Base64 é uma maneira de converter qualquer texto/conteúdo para uma codificação que utiliza apenas 64 caracteres. Provavelmente você já deve ter se deparado com uma string destas por aí. Muitos sites e aplicações web utilizam esta códificação para trocar dados entre páginas "ocultando" informações na URL. Porém, é bom lembrar que Base64 não é uma forma segura de criptografia. Mas se ele não é seguro quais as vantagens de utilizá-la? Bom, algumas:

- Você pode converter caracteres que geram problemas na URL (ou em algum protocolo), como por exemplo: ?, & e "
- Você pode simplesmente atrapalhar um pouco pessoas ficarem _chutando_ ids em suas URLs
- Você pode transferir dados binários codificados em Base64. Aliás, é assim que o protocolo HTTP lida com o upload de arquivos.

### Utilizando Base64 no navegador (Internet Explorer 10 e acima):

O código abaixo pode ser copiado e colado dentro do Console do Chrome, para vê-lo executando.

```js
// Uma string qualquer
var string = 'DevPleno'

// Convertendo para Base64
var emBase64 = btoa(string)
console.log(emBase64) // Saída: "RGV2UGxlbm8="

// Voltando para string
var deBase64 = atob(emBase64)
console.log(deBase64) // Outputs: "DevPleno"
```

### Método cross-browser (pode ser utilizado no NodeJS também):

```jsx
// Criar objeto Base64
var Base64={\_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function
(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64.\_utf8\_encode(e);while(f<e.length){n=e.charCodeAt(f++);
r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}
else if(isNaN(i)){a=64}t=t+this.\_keyStr.charAt(s)+this.\_keyStr.charAt(o)+this.\_keyStr.charAt(u)
+this.\_keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace
(/\[^A-Za-z0-9+/=\]/g,"");while(f<e.length){s=this.\_keyStr.indexOf(e.charAt(f++));o=this.\_keyStr.indexOf
(e.charAt(f++));u=this.\_keyStr.indexOf(e.charAt(f++));a=this.\_keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=
(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64)
{t=t+String.fromCharCode(i)}}t=Base64.\_utf8\_decode(t);return t},\_utf8\_encode:function(e){e=e.replace
(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}
else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else
{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}
return t},\_utf8\_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);
if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode
((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode
((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

// Uma string qualquer
var string = 'DevPleno';

// Convertendo para Base64
var emBase64 = Base64.encode(string);
console.log(emBase64); // Saída: "RGV2UGxlbm8="

// Decode the String
var deBase64 = Base64.decode(emBase64);
console.log(deBase64); // Saída: "DevPleno"
```

### Em NodeJS:

Em NodeJS você pode utilizar Buffers para converter de uma codificação para outra. Por exemplo:

```js
var string = 'DevPleno'
var emBase64 = new Buffer(string).toString('base64')
console.log(emBase64) // Saída: RGV2UGxlbm8=

var deBase64 = new Buffer(emBase64, 'base64').toString('ascii')
console.log(deBase64) // Saída: DevPleno
```


---

# Como criar e reutilizar seus módulos no NodeJS com Git

Source: blog/como-criar-e-reutilizando-seus-proprios-modulos/index.md

Hoje quero mostrar um recurso que nós temos na ferramenta NPM e que poucas pessoas sabem que existem. Com ela, podemos criar nossos próprios módulos sem precisar registrar no repositório do NPM.

Uma coisa interessante do yarn e NPM é que podemos colocar como dependência do nosso projeto um repositório GIT, inclusive um commit específico ou tag especifica.

Qual a vantagem dessa situação?

Muita gente não utiliza reaproveitamento de código, nem cria seus próprios módulos e bibliotecas porque não tem como compartilhar isso de forma privada. Aqui vamos fazer um exemplo utilizando o repositório do Github.

Nós poderíamos utilizar um repositório privado desde que, na máquina que estiver utilizando, esse repositório tivéssemos uma chave para baixar essa dependência.

Para simplificar esse processo, vou criar um repositório novo e deixar inicializando com o README e dar um create repository:

![Criando Repositório](de7951f6-bdba-4379-a42b-0b480929ba55.png)

Ele vai conter meu código e que vai ser compartilhado com outros projetos. Primeiramente vamos copiar o link que ele nos gera:

![Copiando Url](d0051514-24c8-46c2-a57e-c0a945565281.png)

Vamos agora clonar na máquina. Como ela já está com o tortoise git e a chave atrelada, então eu consigo dar um ok e ele já baixa.

Agora eu posso ir para minha pasta e dar um NPM init nessa pasta para iniciar meu módulo.

Com o package.json aberto, o mais importante é o arquivo main, ele é o que vai ser nosso arquivo principal, ou seja, o ponto de entrada do nosso módulo.

Vamos criar então um index.js e exportar uma função que retorna uma string:

```jsx
module.exports = function (str) {
  return str + ' - DevPleno!'
}
```

Agora vamos dar um commit e push. Se formos agora em meu repositório, ele já vai estar lá. Nós podemos utilizar a URL do repositório como dependência do projeto. Para isso, vamos voltar um diretório e criar um novo diretório 'meuprojeto', acessamos ele e damos um npm init, em seguida um install passando o link do github:

```jsx
npm install --save <url-copiado-aqui>
```

![Package.json](b77e70a1-ca40-4c94-ad2e-65b8b2a1016b.png)

Em uma próxima aula vamos criar um repositório e publicar no NPM. Primeiramente queria apenas mostrar que podemos publicar um módulo sem ser pelo npm.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/t24_DGvUa30" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Como encadear promises

Source: blog/como-encadear-promises/index.md

Na dica de hoje, vamos continuar falando sobre promises. Vou mostrar um detalhe na promise que é bastante interessante: como podemos encadear promises, ou seja, vincular uma promise à outra.

Para poder fazer isso funcionar, vamos começar importando nosso tão usado FS, já que ele é sempre uma chave para isso e em seguida vamos criar uma função readFile, que vai ser uma arrow function. Nós passamos para ele um path de um arquivo e ele vai retornar uma promise nova:

```jsx
const fs = require('fs')

const readFile = (file) => {
  return new Promise((resolve, reject) => {
    fs.readFile(file, (err, contents) => {
      if (err) {
        reject(err)
      } else {
        resolve(contents.toString())
      }
    })
  })
}
```

Consideramos que quem vai receber o conteúdo da nova promise queira esse conteúdo em string. Vamos fazer também um writeFile, que também irá passar um file, e um contents, que vai retornar uma nova promise:

```jsx
const writeFile = (file, contents) => {
  return new Promise((resolve, reject) => {
    fs.writeFile((file, contents), (err) => {
      if (err) {
        reject(err)
      } else {
        resolve()
      }
    })
  })
}
```

O nosso problema agora é que precisamos ler um arquivo e passar para o write, então precisamos fazer o seguinte:

```jsx
readFile('promises.js').then((contents) => console.log(contents))
```

Ao mandar rodar o arquivo, perceba que ele retorna o nosso código em string, a vantagem disso é que agora conseguimos 'encavalar' uma promise depois da outra. A primeira alternativa que temos é utilizar o then dessa forma, então precisamos colocar o próprio writeFile:

```jsx
readFile('promises.js').then((contents) => writeFile('tst.js', contents))
```

Essa é a primeira maneira que temos de encadear as promises. Ao rodar o arquivo, perceba que foi criado um tst.js como queríamos. A segunda forma é colocarmos encadeado realmente:

```jsx
readFile('promises.js').then(writeFile('tst.js', contents))
```

Vamos dizer a ele para ler o nosso arquivo e em seguida escrever um outro arquivo, o problema é que se fizermos dessa forma, quando ele passar 'parseando' o código, ele já vai executar esse primeiro writeFile, se não estivéssemos passando um file, poderíamos fazer isso direto, mas como isso não acontece, temos que utilizar o bind, pois ele vai criar uma nova função, a onde eu posso passar o contexto que eu quero executar essa função e fazer um curring fixando alguns atributos da esquerda para a direita:

```jsx
readFile('promises.js').then(writeFile.bind(null, 'tst2.js'))
```

A grande dica é entender como funciona isso. Podemos colocar um then após o outro, podemos fazer um novo teste:

```jsx
const out (contents) => {
  return new Promise(resolve =>{
    setTimeout(() => {
      console.log(contents)

      resolve()
    }, 2000)
  })
}
```

Com isso, caso a gente queira fazer um teste no then, podemos fazer o seguinte:

```jsx
readFile('promises.js')
  .then(out)
  .then(() => console.log('final'))
```

Retornando as promises nós conseguimos encadear, essa é uma grande vantagem em relação a um callback, afinal conseguimos fazer o código crescer para baixo ao invés de crescer para frente, evitamos o callback hell.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-xcbKhbk2ec" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como escolher uma linguagem de tecnologia?

Source: blog/como-escolher-linguagem-de-tecnologia/index.md

Eu sou uma pessoa que sempre tem que estar conhecendo coisas novas e estar confortável com essas coisas, por isso resolvi compartilhar como escolher uma linguagem de tecnologia ou algo novo para estudar.

Tem coisas que eu gosto de fazer, como programar em aplicativos web e também tenho algumas missões com isso, como deixar mais fácil de organizar o código. Então, a minha decisão é tomada em cima do resultado que eu consigo ter com aquela linguagem. Eu não tomava decisão baseado em dinheiro, porque uma das coisas que as pessoas esquecem muito é que não é a linguagem que você vai usar que faz a diferença, e sim o quão bom é o produto que você vai construir com aquela linguagem. Por exemplo, tem muita gente que faz sistemas e plataformas maravilhosas com linguagens que nem imaginamos.

Se você souber usar o máximo da linguagem para tirar o máximo de resultado, você será bem remunerado sobre isso.

O mais importante: depois que você sabe algumas linguagens, elas ficam irrelevantes, por exemplo uma das formas que eu defino em qual linguagem eu programo é se consigo entregar algo comercial com garantia pro cliente nessa linguagem. Esse é meu parâmetro para saber se eu estou preparado naquela linguagem e não somente focado no dinheiro.

Se você se sente confortável com aquilo que você aprende, então você faz gerar resultado, já que aquilo não vai ser um peso para você.

Assista ao vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-OMEUwlXewU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como está seu inglês?

Source: blog/como-esta-seu-ingles-carreira/index.md

Na carreira de um DevPleno que lida com tecnologia o dia todo é muito importante saber se comunicar em inglês. Veja algumas dicas de como melhorar seu inglês técnico e do cotidiano.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/IhP90Dk962I" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos

Source: blog/como-gerar-um-array-populado-em-javascript/index.md

> Aprenda 5 formas de gerar arrays populados em JavaScript: Array.from, fill, spread, map e mais. Exemplos práticos para copiar e usar.

É muito comum durante a solução de alguns problems com algorítmos de precisarmos de um array com valores padrão já inseridos.

Inclusive para gerar dados de testes. E podemos gerar o array com os mais diversos valores, como números, strings e até mesmo objetos.

### O bom e velho `for`

A forma mais tradicional de fazer esta tarefa é utilizar o bom e velho `for`. Sem muitos segredos, podemos fazer o seguinte:

```javascript
const array = []
const size = 10
for (let i = 0; i < size; i++) {
  array.push(i)
}
// array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```

Desta maneira podemos inclusive criar valores diferentes de inteiros, por exemplo:

```javascript
const names = []
const size = 7
for (let i = 0; i < size; i++) {
  names.push({
    id: i,
    name: `Name ${i}`
  })
}
/*
names = 
    0: {id: 0, name: "Name 0"}
    1: {id: 1, name: "Name 1"}
    2: {id: 2, name: "Name 2"}
    3: {id: 3, name: "Name 3"}
    4: {id: 4, name: "Name 4"}
    5: {id: 5, name: "Name 5"}
    6: {id: 6, name: "Name 6"}
*/
```

Uma versão alternativa:

```javascript
const size = 7
const names = new Array(size)

for (let i = 0; i < size; i++) {
  names[i] = {
    id: i,
    name: `Name ${i}`
  }
}
/*
names = 
    0: {id: 0, name: "Name 0"}
    1: {id: 1, name: "Name 1"}
    2: {id: 2, name: "Name 2"}
    3: {id: 3, name: "Name 3"}
    4: {id: 4, name: "Name 4"}
    5: {id: 5, name: "Name 5"}
    6: {id: 6, name: "Name 6"}
*/
```

### Array.fill

Outra forma de gerar o array com valores é utilizando o `Array.fill`. Nesta forma, criamos um array com o tamanho desejado e informamos o valor para qual queremos preenchê-lo.

```javascript
const array = new Array(15).fill('valor')
// array = ["valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor"]
```

Uma observação importante é que o método `fill` usa a mesma referência. Ou seja, se passarmos um objeto como valor no fill, todos os itens do vetor referenciarão o mesmo objeto. E caso alteramos um deles, iremos alterar todos.

```javascript
const people = new Array(3).fill({ name: 'Person' })
people[0].name = 'Changed Person'
/*
people = 
  0: {name: "Changed Person"}
  1: {name: "Changed Person"}
  2: {name: "Changed Person"}
*/
```

Existe uma forma de mudar ligeiramente este comportamento, bastando para isso conectar o `fill` com um `map` (lembrando que `map` transforma um vetor em outro).

```javascript
const people = new Array(3).fill(null).map(() => ({ name: 'Person' }))
people[0].name = 'Changed Person'
/*
people = 
  0: {name: "Changed Person"}
  1: {name: "Person"}
  2: {name: "Person"}
*/
```

## Array.from

Uma outra forma de criar um array é usando o `Array.from`. Esta versão é bastante simples:

```javascript
const array = Array.from({ length: 5 }, () => 1)
// array = [1, 1, 1, 1, 1]
const people = Array.from({ length: 3 }, () => ({ name: 'Person' }))
/*
people = 
  0: {name: "Person"}
  1: {name: "Person"}
  2: {name: "Person"}
*/
```

### Usando o `Object.keys`

Uma forma bastante interessante de gerar um array preenchido com números é usando uma característica de objetos (sim, objetos). Usaremos o `Object.keys`.

```javascript
const numbers = Object.keys(new Array(5).fill(null))
// numbers = ["0", "1", "2", "3", "4"]
```

Repare que os números que foram inseridos no array estão com `string`. Podemos usar um map para convertê-los:

```javascript
const numbers = Object.keys(new Array(5).fill(null)).map(Number)
// numbers = [0, 1, 2, 3, 4]
```

Bom é isso :) O que gostou destas formas de gerar um vetor? Qual a sua forma favorita?

Ah, todos os nossos cursos tem um módulos somente de Javascript ;) Conheça o [Fullstack Master](https://go.devpleno.com/fsm?sck=blog-como-gerar-um-array-populado-em-javascript)


---

# Como invocar funções dinamicas em JavaScript

Source: blog/como-invocar-funcoes-dinamicamente-com-js/index.md

Em programação, blocos de código que executam instruções específicas são chamadas de funções e, no Javascript, são conhecidas como métodos. Agora, imagine o seguinte cenário: como desenvolvedor, você não conhece o nome do método que quer chamar mas sabe que existe o nome dele em uma variável. Então, como faremos para chamá-lo?

Os métodos são muito úteis em casos onde queremos uma programação mais dinâmica, por exemplo: você tem um serviço e não sabe os nomes dos métodos disponíveis e é possível programar a forma como serão chamados ou se você tem uma forma de integrar módulos com pontos de entrada na aplicação para importar o módulo baseado nessa variável, chamando seus métodos dinamicamente.

Imagine o seguinte cenário em temos um console como o da imagem abaixo, onde deixamos para o usuário a opção de escolher o método **log** ou o **debug**:

![Console](ee3e4af7-e305-4b07-b8dc-6b89ad845b2b.png)

Ao executarmos o código acima (dinamicamente.js) no prompt de comando, vemos o resultado a seguir com destaque para o “opa” que foi impresso:

![Console](f1479302-5455-4de5-992a-b2895a8fc040.png)

Ao criar um objeto obj, definindo valores para suas variáveis a e b, tal qual a imagem abaixo:

![Console](b5a5732c-9784-490c-8689-aa0ca2d9c0f2.png)

Podemos pegar o valor da variável a do objeto obj com a instrução `console.log(obj.a)` e mostrar o conteúdo de a como um resultado:

![Console](8b328403-f896-4bd5-84f1-c8d290947dfa.png)

Outra forma de obter o valor de a consiste em definirmos uma constante (variável com valor fixo) que chamaremos de key e com a instrução `console.log(obj[key])` conseguimos o valor de a como resultado:

![Console](d9b43f66-b423-47d3-affa-1d3e0e59f3e0.png)

Com os métodos, o processo é semelhante. Alteremos o código acima para deixar apenas a definição da constante key como 'log' e, como não sabemos a posição do método que iremos chamar, colocamos `console[key]`.

![Console](f07b0ccb-43c2-4b32-ab41-329b91806f31.png)

Para entender o que `console[key]` retornaria, escreveremos a instrução `console.log(console[key])` para observar o valor de retorno:

![Console](7251b686-324c-4117-96bb-201286874331.png)

Pelo resultado, notamos uma coisa muito legal no Javascript: as funções também são valores – o que nos permite escrever `console[key]('valor1')` e obter seu resultado no prompt:

![Console](2ad70e26-f38f-4062-833a-0fd88cc4c07c.png)

O resultado anterior permite que façamos coisas como imprimir com `console[key]('valor')`, a partir de um vetor de constantes key, o valor associado a cada constante:

![Console](7aa0a9d1-88e8-4e33-be22-de062373704f.png)

![Console](494afd56-2b54-4a03-9d1c-b9f63285910a.png)

Modificando a definição de const keys, podemos obter todos os métodos de console:

![Console](0b5a79bb-db9b-4f8b-9cc8-e594cce81b86.png)

![Console](24e5a378-262f-42ac-ae02-32e7ef04be24.png)

ou então passar a constante key como um valor:

![Console](69e0b8c0-c0a3-473c-8e0a-259c7b6d288f.png)

![Console](0176837b-d7d6-402d-874e-7fa2162e7866.png)

Se você seguiu os passos até aqui, então conseguiu chamar métodos de uma forma dinâmica – algo muito poderoso no Javascript. Outra coisa que podemos fazer está no Web Console do navegador (Ctrl+Shift+I no Google Chrome). Nesse `console`, temos um objeto chamado window que traz as mesmas funcionalidades para chamada dinâmica de métodos, assim como fizemos com `console`, vide o exemplo abaixo:

![Navegador](a6593685-2ae7-4c45-8819-2d884be791d1.png)

E assim, surge uma mensagem “opa” na tela do navegador:

![Navegador](541d05d0-a49f-4719-8e9c-dc40e883e8e2.png)

Podemos, ainda, guardar uma função dentro de uma constante alertOpa:

![Navegador](a189c254-1702-49c8-b6b0-8677939c9626.png)

E, ao acessarmos alertOpa como um objeto, faremos a chamada da função com o texto 'lopa' que escrevemos como valor:

![Navegador](2cdbbd23-6e5f-4ea2-b635-387c58d698a9.png)

A principal ideia do que aprendemos é criar funções dinâmicas e facilitar o uso de módulos de extensões de uma aplicação com essa abordagem, tanto para carregar um módulo dinâmico quanto para executar algo dentro desse módulo dinamicamente.

E essa é a dica de hoje. Confira o passo a passo no vídeo abaixo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/c6C5j1_Xwig" allowfullscreen></iframe>
</div>

Até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Como manter-se motivado

Source: blog/como-manter-se-motivado/index.md

A dica de hoje foi baseada em uma pergunta de um inscrito do canal, a pergunta foi a seguinte:

> Como eu consigo me manter motivado a fazer um projeto?

A primeira coisa que precisamos saber e aceitar é que nem sempre vamos ter 100% de motivação, vão haver altos e baixos e isso é normal. Vão existir dias em que você não vai estar conseguindo focar em seu objetivo. O importante é conseguir estar consciente disso e perceber que está fugindo daquilo que é seu objetivo. Quando começar a perceber isso, existem algumas formas de voltar a ter motivação:

Eu vou passar dois pontos que eu acredito que fazem bastante diferença. Toda vez que percebo que estou perdendo motivação, eu utilizo dessas técnicas para me motivar.

A primeira delas é a transformação que meu trabalho faz na vida das pessoas, esse é um dos motivos principais que me mantém muito motivado. Por exemplo, você ler isso já é um gatilho motivacional que eu uso para me motivar a fazer cada vez mais coisas. Ache esse seu gatilho e você vai perceber que as chances de perder o foco são menores.

A segunda delas é que quando você está se sentindo um pouco desmotivado, tente fazer algo que te dê uma pequena vitória. Por exemplo, se você não está entendendo uma tecnologia muito complexa e não está conseguindo ver resultado, tente fazer algo com essa tecnologia, nem que seja um 'olá mundo', que te dê uma sensação de vitória.

Ao invés de focar em um objetivo grande, foque em um pequeno passo naquele objetivo, isso vai te ajuda a manter mais motivado.

Essas duas dicas eu uso para me manter motivado, espero que isso também te ajude a se manter assim.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/MZv21GmQcv0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como organizar os estudos em tecnologia

Source: blog/como-organizar-os-estudos-em-tecnologia/index.md

O inscrito Leonardo Oliveira deixou uma pergunta no canal e achei interessante compartilhar a resposta, afinal pode ser a dúvida de outras pessoas, inclusive a sua. A pergunta é a seguinte:

“Gostei das dicas! Eu curso sistema de informação, já aprendi um bocado de coisa mas tenho um problema em não conseguir definir prioridades. Sempre quero aprender muita coisa e, no fim, acabo ficando perdido. Queria achar uma técnica que me ajude a ser mais produtivo.”

É muito legal estar aprendendo bastante na faculdade, pois vai te dar uma bagagem muito boa e permitir que você comece a dar seus primeiros passos. Acontece que atualmente vivemos com um overload de informações, ou seja, temos muita informação, mas sem saber para onde ir, que curso fazer, o que estudar primeiro, etc.

O que eu costumo fazer é priorizar o que tenho mais experiência ou mais conhecimento sobre o assunto. Se tenho 5 tecnologias que quero aprender, tento filtrar e ver em qual delas estou mais perto de ficar bom. Por exemplo, se estou entre Mongo, Express, React e Node, então verei qual eu estou mais próximo de dominar.

**Por que fazer isso?**

Para conseguir ter mais motivação para começar as demais. Supondo que você está bom em React, então você vai treinar mais para chegar em um nível mais alto e o React não será mais um problema. Depois de ter dominado essa primeira tecnologia, então você vai para a segunda que tinha mais experiência, depois a terceira, e por ai vai. Isso é muito bom para cuidar da sua motivação.

Uma outra forma de priorizar o que estudar, essa um pouco mais arriscada, é entregar um projeto com essa tecnologia. Eu fiz isso ano passado, pois queria ficar muito bom em React. Defini que iria fazer o projeto com ele e entreguei, mas isso é perigoso, apesar de bom, porque você definirá um projeto que tem uma contrapartida muito grande, afinal você vai ter um deadline e precisa entregar de alguma forma, o que vai te motivar ainda mais a estudar essa tecnologia.

Essas são algumas dicas para você lidar com essa grande quantidade de tecnologia e não ficar perdido nas prioridades de linguagens ou tecnologias que quer aprender. Eu me organizo assim e tem dado certo, portanto acredito que seja efetivo.

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# GH-Pages e como publicar seu site no Github

Source: blog/como-publicar-seu-site-no-github/index.md

Hoje quero mostrar para vocês como a gente pode postar o nosso site no GitHub utilizando o GH-Pages, sem precisar trocar ou fazer qualquer trâmite com o Git, tudo isso de uma maneira bastante fácil. Além disso, integrar isso em um WorkFlow ou em um processo junto no Node.

A primeira coisa que vou fazer é criar um repositório chamado gh-pages-teste só para termos um lugar para testar. Vou deixar de forma pública:

![Criando Repositório](3a0355e2-7bf9-4e69-934f-b1f8ba766c75.png)
![Permissões](acc06856-5b96-4e3b-b657-ac35205c3091.png)

Agora vamos no SHELL e dar um create-react-app apenas para criar uma aplicação em React, que vai ser nosso site. Lembrando que não é necessário ser em React, é apenas para mostrar como a gente poderia criar algo estático e hospedar dentro do GitHub.

Uma coisa bastante interessante: o Git permite que a gente mantenha um site estático, basta colocar os arquivos estáticos dentro de um branch chamado GH-Pages, feito isso ele já vai conseguir manter o nosso site.

Agora vou abrir o visual studio code e vamos trocar apenas o que está escrito no App.js, ao invés de Welcome, vou colocar GH-Pages DevPleno.

Agora um detalhe, se no próprio React dermos um yarn build ou npm run build, ele vai gerar os arquivos compilados dentro do diretório build que já tem nosso site todo, agora temos que colocar esses arquivos dentro do Branch do GH-Pages.

Feito isso vamos dar um git init no shell e adicionar os arquivos, lembrando que já iniciamos o repositório:

![Git init](3666a984-c0f2-4f87-8b29-64ae21f78843.png)

Vamos também dar um git remote add origin e add o ssh que no meu caso é:

![Git remote](6e5872fe-0494-4784-8ce6-79fc8cba6791.png)

Também vamos adicionar o upstream:
![Adicionando dependências](0a87d57f-27b0-493b-b84b-be444a75c3d5.png)

Feito isso ele subiu, então temos nosso fonte do master. Agora temos que fazer uma forma de criar um brait novo para colocar o site lá. Para isso vamos fazer o seguinte:

```jsx
yarn add --dev gh-pages
```

Estamos instalando esse módulo que consegue fazer isso para nós. Depois de instalado vamos construir o diretório que eu quero colocar os arquivos:

```jsx
./node_modules/.bin/gh-pages -d build
```

Ele já está se conectando ao github. Agora se irmos em branch, podemos visualizar o gh-pages, ao olharmos o conteúdo, é exatamente a pasta que foi definida: ![Visualizando o resultado](f1a10ca7-82b1-47c9-8409-12031a9eab15.png)

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qItPnwBbj2s" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Impostos e como receber de empresas estrangeiras

Source: blog/como-receber-de-empresas-estrangeiras/index.md

Você sabe como receber de empresas estrangeiras (Toptal, Crossover, Scalable Path e outras)?

Cada empresa dessa tem a possibilidade de enviar o dinheiro de uma forma específica, como o Paypal, Payoneer, no caso da Toptal eles têm uma parceria com a Hyper Wallet, ou seja, cada um tem um gateway.

Para o governo brasileiro, independente de como foi recebido, é preciso declarar esse dinheiro. Quando receber, por exemplo, $1000,00 pela Hyper Wallet, vai ser descontado uma taxa, algo em torno de $13,00, ou seja, vai receber $987,00. Depois o valor é multiplicado pelo câmbio atual, vamos supor que esteja R$3,00, o resultado final será em torno de R$2961,00.

> Antes de continuar, preciso te contar uma novidade. Nós conseguimos te ajudar a legalizar o seu dinheiro aqui no Brasil - sim, eu criei um serviço de contabilidade e assessoria jurídica/tributária com esse objetivo. A <a href='https://www.conta49.com.br'>Conta49 é uma contabilidade e assessoria jurídica</a> que entende as especificidades vividas pelos programadores, principalmente os que atuam no exterior. Inclusive temos serviços específicos com esse objetivo (caso você precise legalizar somente uma vez o recebimento ou ainda se possui dúvidas sobre este processo). Acesse o <a href='https://www.conta49.com.br'>site: www.conta49.com.br</a> e conheça todos os serviços.
>
> <a href='https://www.conta49.com.br'><img src='logo_conta49.png' noNext='true' alt='Conta49 Logo' /></a>

.

O detalhe é que eles vão fazer uma TED para sua conta aqui no Brasil e em seguida você precisa declarar esse dinheiro porque é uma renda que você está tendo. Para fazer isso, há algumas maneiras: a primeira é pedir para que eles façam essa transferência para uma conta de pessoa física, geralmente esses valores na conta de pessoa física não são valores pequenos. Vamos supor que essa conta gere R$100mil em um ano, isso já faz com que você caia na alíquota máxima de 27,5%, ou seja, de R$100mil você vai pagar R$27,5mil somente de impostos.

Agora imagine o seguinte: você declarou esse valor, caso receba como pessoa física, precisa baixar um programa chamado Carnê Leão, esse programa da Receita calcula baseado no valor que você recebeu naquele mês (lembrando que tem a opção para dinheiro vindo do exterior), ele vai gerar uma guia que você deve pagar. Você é obrigado a recolher o Carnê Leão de forma mensal, geralmente não achamos essa informação tão facilmente na internet, então é bom lembrar isso, devemos pagar ele no mês que recebemos. Eu acredito que isso seja muito bom, porque você não esquece de guardar esse dinheiro, imagine você receber R$100mil em um ano em 12x e esquecer de recolher e guardar esses 27,5%, depois vai faltar dinheiro para pagar o imposto. Pagando corretamente você pode ter restituição de imposto de renda.

**Mas qual valor declarar?**

Eu declaro o valor que caiu na minha conta, porque a empresa lá de fora não tem essa informação para a receita daqui, então só é validado quando cai no banco da sua conta.

Outra opção é com pessoa jurídica. Vamos utilizar os mesmos R$100mil como exemplo. Nesse caso, você vai pagar mais ou menos 10%, a minha alíquota hoje no simples nacional está mais ou menos 7%.

Nessa opção então não vamos pagar os 27,5% de imposto, mas em compensação temos que emitir uma nota fiscal para uma empresa do exterior como pessoa jurídica. A unica diferença é que quando ela está no exterior, ela não tem CNPJ. Feito isso, a transferência vai para a conta corrente da pessoa jurídica. No caso do Simples Nacional, eles vão mandar uma DARF só por mês, já coletando esse imposto. Caso você não for enquadrado como Super Simples, provavelmente você vai receber umas quatro ou cinco guias.

O interessante é que, como a nota fiscal pode ser emitida para uma empresa que não tem CNPJ, o que eu declaro geralmente são alguns serviços que estão dentro da área, mas que são incluídos no Simples Nacional. (Lembrando que é importante conversar com seu contador para fazer um planejamento tributário para que você pague menos impostos).

Obviamente se você colocar que seu Pró-labore é de R$8mil por mês, você irá pagar mais alguns impostos.

**O que é Pró-labore?**

Seria mais ou menos o mesmo que a sua empresa te contratar para trabalhar para ela; essa empresa que você usa para receber vai te pagar um salário.

Os contadores geralmente já indicam fazer o seguinte: colocar um Pró-labore de um salário mínimo, depois vai pegar o restante e colocar como retirada de lucro. A retirada de lucro não tem impostos, então quando você vai declarar esse dinheiro no seu imposto de renda de pessoa física, vai ter um campo que você vai declarar o quanto de retirada de lucro teve.

**Por que estamos falando de tudo isso?**

Porque não adianta nada você receber R$100mil do exterior e não declarar. Imagine que você vai lá e compra um carro, então você não vai ter renda nenhuma declarada na receita, então eles virão atrás.

Obviamente pode ser que no primeiro ano passe, o segundo passe, mas depois de um tempo eles vão achar você e descobrir o que está acontecendo.

Um ponto adicional bem rápido: para a empresa americana, você precisa assinar um documento para a receita de lá. Esse documento se chama FORM A para pessoa física ou FORM B para pessoa jurídica. Basicamente esse formulário vai dizer que você está recebendo realmente esse dinheiro e que o envio da empresa não é crime, e sim que a empresa está contratando um serviço que está sendo realizado no exterior. Isso é importante, pois se um dia a Receita Federal Americana for até essa empresa, eles têm os formulários para provar para onde está indo, lembrando que esses documentos você assina digitalmente.

Esse é um pouco do que eu aprendi até hoje de como receber dinheiro do exterior, não sou contador, mas aprendi isso tudo fazendo e queria compartilhar com vocês porque eu sei que é uma dor que todos passam.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/E69thpoxrtI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Como ser MUITO mais produtivo?

Source: blog/como-ser-muito-mais-produtivo/index.md

Venho aplicando 2 técnicas bastante interessantes: medir o tempo que gasto em cada tarefa e fazer pausas durante as mesmas. Neste vídeo, falo destas técnicas e mostro ferramentas que podem te ajudar a fazer isso e tornar-se mais produtivo no seu dia-a-dia.

Pomodoro: [https://cirillocompany.de/pages/pomodo...](https://cirillocompany.de/pages/pomodoro-technique)

Toggl (não esquece de baixar o Toggl Desktop): [https://toggl.com](https://toggl.com/)

Pomodoro para windows: [https://tomighty.org/](https://tomighty.org/)

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/6Dx0abJtNvY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Como testar domínios localmente

Source: blog/como-testar-dominios-localmente/index.md

Hoje quero dar uma dica bem rapidinha de como você pode testar o seu site local com domínios válidos para sua máquina. Com isso você consegue, por exemplo, fazer um domínio que você ainda não publicou ou registrou funcionar somente na sua máquina para testes. Outra coisa bastante útil é se você precisa, no seu sistema, lidar com diferentes domínios. É possível fazer essa configuração local na sua máquina para fazer esse teste.

Nós vamos fazer no Mac, mas vou deixar logo o caminho do arquivo para o Linux e para o Windows:

```jsx
- Mac OS: /etc/hosts

- Linux: /etc/hosts

- Windows: c:\\windows\\system32\\drivers\\etc\\hosts
```

Com o Shell aberto vou dar um 'sudo' para fazer algo como super user, como estamos mexendo em uma configuração do sistema operacional, precisamos ser administrador para fazer isso:

```jsx
sudo nano/etc/host
```

Você pode perceber que eu já tenho dois servers mapeando para o mesmo IP:

![Dois servers no mesmo ip](4263515b-509e-402f-b953-1ee429c91daf.png)

Agora podemos digitar nesse arquivo e adicionar um novo IP e mapear para o site que eu quero, por exemplo:

```jsx
127.0.0.1     devpleno.local
```

Eu já tenho uma aplicação para teste rodando no localhost, vamos testar agora mudando o url:

![Navegador rodando](07244a91-df89-41a3-8ca8-199506879f24.png)

Perceba que ele está mapeando normalmente. Lembrando que isso não vale para máquinas externas.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kh5gLNqxxeM" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# negociação - Como vender um Software

Source: blog/como-vender-software/index.md

Hoje vou complementar um pouco sobre como vender software, mais especificamente sobre negociação.

O primeiro ponto que temos que desconstruir é que negociação não é uma briga, e sim um consenso. Lembrando que a gente negocia o tempo todo, se você quer convencer seu amigo a ir em uma festa com você, precisa negociar e vender isso para ele. Isso é o que fazemos também para fechar contrato, precisamos negociar para mostrar para a outra pessoa que isso é bom e vai trazer resultado para ela ou para a empresa dela.

O primeiro ponto que eu acho muito importante, até mesmo antes da negociação, é o quanto o projeto vai trazer de resultados, isso vai te dar insumo de até onde pode negociar. Um dos projetos que eu fechei (e foi um dos mais altos em valor) eu sabia que o prazo estava muito curto, então não tinha tempo para combinar, nem mesmo para reunião. Eles iriam inaugurar uma estrutura muito grande e precisavam do software funcionando em quarenta dias e nós éramos os únicos que eles conseguiram conversar no Brasil inteiro que topariam fazer isso. Quando a gente sabe disso e assume alguns riscos, a coisa se torna um pouco mais complexa.

Geralmente, quando o risco é muito alto, o preço sobe. Isso fica muito claro porque quanto mais curto o prazo, mais você tem que trabalhar sem um período de descanso, imagine que você precise virar quase 40 noites para entregar a tempo.

A dica de ouro da negociação: depois que você tem o formato da ideia de preço, nunca tire algo da proposta sem colocar outra. Basicamente é o seguinte, imagine que seu cliente peça um desconto de um software de R$10 mil pagos em quatro vezes, quando isso acontece eu dou desconto, mas se o prazo está curto, por exemplo, eu aumento o prazo, então eu faço por R$8 mil, mas demoro o dobro do tempo. Se ele disser algo como “o que mais você pode fazer por mim?” você vai utilizar essa jogada que funciona muito bem, diga por exemplo, “eu te dou 5% de desconto se você pagar a vista”. Percebam que sempre você está tirando algo para dar outra.

Vamos supor que você já negociou com o cliente e está definido o que vai criar, e o cliente vem tentar adicionar uma funcionalidade nova, lembre-se da regra: você coloca algo novo, mas tem que tirar outra. Se adicionar uma funcionalidade nova, diga precisa tirar outra coisa porque não dá para fazer tudo pelo valor que foi negociado. Essa regra de negociação funciona muito bem. Tudo isso você vai construindo quando conhece bem o cliente.

Negociação não é para “sangrar”, sem cobrar muito além do que vale, precisa ser algo justo. Quando eu tenho um potencial cliente que começa a tentar sangrar meu negócio, eu paro de conversar.

Uma outra coisa que eu parei de fazer, a não ser nesses modelos que comentei acima, é evitar fazer muita transação de preço na frente do cliente porque você pode cometer erros gravíssimos à medida que começar a pegar projetos maiores. Se você fazer uma conta errada na frente do cliente e assumir o compromisso de uma proposta, vai assumir um risco muito grande. Pode ser que você combine algo ali e, posteriormente, perceba que vai dar mais trabalho do que foi imaginado. Por esse motivo, sempre peça um tempo para pensar, não dê a resposta final sem que você tenha refletido sobre isso. A negociação dá uma adrenalina e no ímpeto de querer fechar, pode ser que acabe fazendo algo sem pensar e isso te prejudique futuramente.

Uma última dica: eu nunca dou mais que 5% de desconto. Imagine que você cobrou R$10 mil de um cliente e do nada baixou para R$5 mil. A sensação que o cliente vai ter é que aquilo não valia R$10 mil, e sim 5 mil, então a empresa é taxada como uma empresa que queria extorquir dinheiro. Isso acaba com a credibilidade.

Se você fizer essas dicas que eu passei, tenho certeza que vai se dar bem, eu utilizo elas sempre

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/FszhDTUw2E0" allowfullscreen></iframe>
</div>

Curta o DevPleno no <a href="https://www.facebook.com/devpleno">Facebook</a>,<a href="https://www.youtube.com/devplenocom">inscreva-se no canal</a> e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como saber a complexidade de um algoritmo

Source: blog/complexidade-de-um-algoritmo/index.md

Hoje eu gostaria de dar uma dica rápida, principalmente para o pessoal que estiver fazendo alguns testes no codelite, porque ele considera a complexidade de um algoritmo quando vai avaliar, obviamente depende muito de enunciado de problema.

O grande problema que eu vejo é saber se a notação big-O, que usamos para saber a complexidade do algoritmo, é uma solução boa ou não. Uma ideia que gosto bastante de usar é a seguinte: se você tem uma função qualquer, e você passa um vetor para essa função:

```jsx
function calculo(vetor) {}
```

Como saber a complexidade desse cálculo? Temos que olhar as coisas que podem variar no cálculo, no caso acima, o tamanho do vetor. Geralmente o tamanho do vetor seria um const n por exemplo:

```jsx
function calculo(vetor) {
  const n = vetor.lenght

  for (let i = 0; i < n; i++) {
    console.log(n)
  }
}
```

Então ela poderia variar de acordo com N. Se considerarmos que o tamanho do vetor é N (geralmente no problema eles falam isso) logo esse é um algoritmo O(n) porque ele vai rodar a coisa mais pesada dele e vai iterar N vezes, quanto maior for esse N, mais vezes vamos rodar esse pedaço de código.

Se tivermos outra função, por exemplo um outro _for,_ e tivermos que fazer um cálculo baseado no N:

```jsx
function calculo(vetor, m) {
  const n = vetor.lenght

  for (let i = 0; i < n; i++) {
    console.log(n)
    for (let k = 0; k < m; k++) {
      console.log(n * k)
    }
  }
}
```

Nesse cenário, sabemos que tem dois for, um dentro do outro, o de cima varia em N e o de baixo varia em M. Se o M for um valor diferente, a complexidade dele é O(n*m), porque ele depende de dois fatores de entrada para saber a complexidade e o número de vezes que vai rodar o segundo console.log vai ser n*m.

Se por algum propósito do algoritmo o M for N, então teremos uma complexidade O(n²) que é o pior algoritmo que temos, porque ele cresce de forma exponencial.

Por isso em algumas entrevistas em inglês eles vão te questionar se essa é a melhor solução, se você sabe que ela é O(n²), pode ser que não seja a melhor.

Existe ainda um outro cenário, no qual passamos o for para fora:

```jsx
function calculo(vetor) {
  const n = vetor.lenght

  for (let i = 0; i < n; i++) {}

  for (let k = 0; k < n; k++) {
    console.log(n * k)
  }
}
```

Esse algoritmo volta a ser O(2n), pois ele vai rodar N depois rodar novamente o N. Ele não é nada comparado a 1000, por exemplo, porque ele varia muito pouco. O grande problema então é o N e não o 2, por isso consideramos a complexidade O(n) porque somamos os dois.

Agora vamos supor que esse algoritmo faça uma ordenação de sort:

```jsx
functon(vetor){
  vetor = vetor.sort()
}
```

O quick sort na média é N log N, ou seja, ele tem uma complexidade boa e qualquer coisa que fizermos, além disso temos que multiplicar ou somar, então provavelmente vai predominar o N log N.

No codelite, ele vai usar algo muito interessante que é uma estimativa do tempo que demorou para rodar o seu algoritmo para descobrir a complexidade, por isso quando você roda o algoritmo para ser avaliado, toda complexidade que ele descobre é estimada e não a real, por isso se tivermos essa noção de como evolui o algoritmo já é muito importante para resolvermos os problemas.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/f--A1FK6KK4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Composição de componentes em ReactJS

Source: blog/composicao-de-componentes-em-reactjs/index.md

A dica de hoje é sobre o ReactJS, mais especificamente sobre como podemos criar composição de componentes em ReactJS de uma forma um pouco diferente, como podemos utilizar algumas áreas de um componente para ejetar outros componentes por exemplo. Na prática ficará mais simples de entender.

Eu criei um aplicativo básico utilizando o create react app e agora vou criar dois componentes para mostrar como podemos utilizar essa composição. No app.js, logo após o importe do React e do './app.css'; criarei um Panel, ele será um functional stateless component porque não temos o estado interno dele.

```jsx
const Panel = (props) => {
  return(
    <div>
      <h1>header</h1>
    </div>
    <p>Footer</p>
  )
}
```

Ele me retorna duas coisas, uma div e tem header que pode ser um H1. Abaixo temos um P com um footer, isso para termos uma ideia de como podemos fazer. A primeira forma de composição é exatamente essa, eu posso trocar esse header e esse footer, por exemplo, ao invés de um texto chamar outra coisa:

```jsx
const Panel = (props) => {
  return (
    <div>
      <h1>{props.header}</h1>
      <p>{props.footer}</p>
    </div>
  )
}
```

Se eu pegar esse código e chamar mais abaixo, dentro do nosso app component:

```jsx
<p className="App-intro">
  To get started, edit <code>src/App.js</code>
</p>

<Panel header='Olá mundo!' footer='rodape' />
```

Então onde eu mandar esse valor, ele vai escrever o texto, mas o interessante é que eu posso fazer algo diferente: ao invés de mandar dessa forma, posso mandar um JSX:

```jsx
<Panel
  header={
    <span>
      'Olá <u>mundo!</u>
    </span>
  }
/>
```

Com isso fizemos uma composição porque eu posso passar outro componente para ele, como é um JSX eu posso passar o html ou passar efetivamente um outro componente. Por exemplo, podemos passar um componente que depende de dois outros componentes, um que fica só no header e um no footer e qualquer coisa que você quiser colocar você pode, como um mapa por exemplo.

Isso facilita bastante criar essa composição. Podemos criar componentes mais genéricos, principalmente os estilo containers e injetamos duas informações dentro. Outra coisa que podemos fazer o é o seguinte:

```jsx
const Panel = (props) => {
  return (
    <div>
      <h1>{props.header}</h1>

      <p>{props.footer}</p>
    </div>
  )
}

const Header = (props) => {
  return <div>.....</div>
}
```

O que passarem para ele eu vou colocar dentro do div. Como assim? Imagine que isso é meu header:

```jsx
<Panel
  header={
    <span>
      'Olá <u>mundo!</u>
    </span>
  }
/>
```

E eu vou dizer para ele que é um header com as coisas dentro:

```jsx
<Header>
  <span>
    'Olá <u>mudo!</u>
  </span>
</Header>
```

Para utilizar o que está dentro do header e o /header utilizamos uma outra propriedade chamada props.children:

```jsx
const Header = (props) => {
  return <div>{props.children}</div>
}
```

Essas duas formas são bastante interessantes de se criar uma composição, ou com uma props normal ou se eu passar no corpo desse componente podemos gerar o props.children, com isso consigo pensar em componentes cada vez mais genéricos, porque eu posso fazer um header, por exemplo, para todas as minhas páginas e se eu quiser aplicar um class diferente, aplico no div.

Isso libera um potencial para o React muito grande, porque a gente consegue reutilizar muito código a partir dessa componentização.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/HdSrcNnZPEM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Comprometimento com as suas metas

Source: blog/comprometimento-com-suas-metas/index.md

Hoje vamos tratar de um ponto muito importante para toda a carreira: o comprometimento com as suas metas. Quais são as suas? Aprender uma linguagem de programação por ano? Fazer algo diferente envolvendo tecnologia? Todos nós devemos definir metas para que a carreira evolua, afinal você define uma e então consegue conquistas novas cada vez mais.

O mais importante após definir a meta é o quanto você está comprometido com ela. Para contextualizar, lembro que nas olimpíadas de 96 eu tinha 11 anos de idade e naquela época não existia a internet como ela é hoje (não existia Wikipedia nem nada do tipo) e uma tínhamos que fazer um trabalho na escola sobre as olimpíadas. Todo mundo procurava na enciclopédia e escrevia o que tinha lá, então no mínimo 4 anos atrasado porque ela não estava atualizada para os jogos da época. Eu coloquei uma meta para mim mesmo: além de colocar o conteúdo da enciclopédia, eu iria colocar também todos os países que participariam dos jogos e escrever algo sobre cada um deles.

Comecei a procurar como implementar essa meta, então decidi gravar em um vídeo cassete e descobri uma função nele que gravava por várias horas, com isso, gravei a abertura inteira, já que antigamente as aberturas demoravam horas e horas. Como eu era criança e sabia da minha limitação de não conseguir ficar acordado até tarde, defini que iria gravar.

Posteriormente eu fui assistindo e consegui escrever tudo, mas o mais importante é que na época eu não pensei o efeito que isso teria na minha vida. Hoje em dia, eu vejo que naquele tempo eu não coloquei muita desculpa para não fazer o que queria e esse é um ponto muito interessante, mesmo com algum empecilho, não devemos usá-lo como desculpa para não cumprir a meta. O segundo ponto, que é a chave do que estou falando, é que você se comprometa com uma meta para você mesmo, você precisa cumpri-la, senão vai acabar não fazendo nada de diferente e consequentemente não evoluindo como você deveria evoluir. O grande ponto é ter um comprometimento muito forte.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/zrOJVx8IO64" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Confira 4 dicas de UX para programadores

Source: blog/confira-4-dicas-de-ux-para-programadores/index.md

Você já tentou usar um aplicativo e desistiu porque não conseguia encontrar as informações corretas ou um botão não funcionava por não ser responsivo para celular? Em quanto tempo você desistiu? Você voltaria a usar essa marca ou indicaria para os seus amigos?

Não é segredo que os consumidores estão cada vez mais exigentes, principalmente quando falamos dos mais jovens e conectados. A quantidade de opções faz com que o cliente deseje mais do que o básico; ele quer produtos simples de usar, intuitivos e que entregam mais do que prometem.

Nesse contexto, o termo UX (Experiência do Usuário) tem se destacado como um dos objetivos centrais que direcionam os produtos para atender a esse novo público. As empresas cada vez mais criam seus produtos para oferecer uma experiência completa para os clientes, a fim de conquistá-los e fidelizá-los.

Se você é programador, deve estar se perguntando:_mas o que eu tenho com isso? Eu só desenvolvo o produto, não sou responsável pela experiência._

É exatamente aí que você está enganado. Hoje,[ profissionais completos](https://www.devpleno.com/desenvolvedor-full-stack-o-que-e-e-como-se-tornar?utm_source=blog&utm_campaign=rc_blogpost) de TI possuem pelo menos noções básicas de UX e as usam para entregar plataformas mais eficientes, que colaboram para uma boa experiência do usuário. Afinal, você contribui para criar um produto que pode ou não fornecer uma experiência única para os clientes.

Pensando nisso, reunimos todas as informações e dicas de UX, para que você seja um profissional mais completo e atinja suas [metas](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&utm_campaign=rc_blogpost). Vamos lá?

### O que é UX?

Antes de mais nada, você precisa compreender o que é essa técnica e como ela se difere de UI (User Interface). Ambas as técnicas são confundidas, mesmo sendo coisas bem distintas. Confira!

#### User Experience (UX)

Traduzindo na forma literal, UX significa Experiência do Usuário. Ela é definida como a sensação que o consumidor tem ao navegar por uma interface, seja ela de um aplicativo, site ou software.

Quanto melhor a experiência, mais bem avaliado o produto é, aumentando as chances de fidelização de clientes.

#### User Interface (UI)

Por outro lado, User Interface (UI) pode ser entendido como a interface do usuário, na tradução literal. Ela diz respeito a toda a parte que o usuário realmente utiliza: telas, botões, menus e formulários.

Porém, o seu papel é muito mais do que construir esses elementos de layout. Profissionais que fazem UI são responsáveis por criar o caminho que determina a experiência do usuário, para que ele seja fácil e intuitivo.

Portanto, podemos dizer que não existe uma agradável UX sem uma boa UI, uma vez que a interface do usuário é o objeto usado pela pessoa, que define a experiência. Isso diz que as duas devem ser trabalhadas em conjunto, buscando os melhores resultados para as soluções criadas.

### Por que eu preciso entender de UX?

Apesar de naturalmente associada a área de design, a responsabilidade de fornecer uma experiência única para o usuário também é do programador. Além disso, a tendência é que essas áreas trabalhem cada vez mais próximas, com o surgimento de profissionais como designer Front-End e Back-end.

Muitos designers estão se especializando em design de interfaces e assumindo atividades da área de desenvolvimento. É natural que as empresas busquem esse tipo de profissional para integrar o time, mais completo e interdisciplinar, podendo contribuir de forma ampla no produto.

Portanto, se você quer ser um profissional de destaque no mercado e não ficar para trás, ou até mesmo ser um [empreendedor](https://www.devpleno.com/empreender-na-area-de-software?utm_source=blog&utm_campaign=rc_blogpost), você precisa ter pelo menos noções básicas de UX e colocá-las em seus projetos.

Abaixo, listamos quatro dicas para você começar esse processo.

#### 1. Entenda o seu consumidor

Você claramente não constrói um software para uso próprio na empresa, certo? Toda solução é construída para resolver algum problema para um público específico, e você, como programador responsável pelo produto, deve conhecer quem são essas pessoas, para criar uma solução que faça sentido para elas.

Saiba quem é o usuário ideal do seu produto, quais são seus gostos, qual o problema que ele está solucionando e como se comporta dentro de plataformas. Descubra informações sobre como ele usaria a sua solução e utilize esses dados como base para desenvolver o produto.

É garantido que as áreas de marketing e vendas podem fornecer todas as informações sobre quem são os clientes que utilizam o produto, e aqui introduzimos nossa próxima dica.

#### 2. Trabalhe com as demais áreas de empresa

Se a experiência do usuário não depende só de marketing ou vendas, ela é responsabilidade de toda a empresa e deve ser pensada em conjunto. É óbvio que você deve trabalhar com as demais áreas para desenvolver a solução com a melhor experiência para os clientes, certo?

Uma boa dica é, antes de começar a desenvolver, fazer uma reunião de alinhamento com as áreas de marketing, vendas e design para definir um road map do produto, que considera o que é mais importante para impactar a experiência do usuário de forma positiva.

Além disso, busque feedbacks constantes com essas áreas que fazem contato direto com o consumidor, para direcionar e aprimorar suas demandas, focando em UX. Mantenha o contato com esse novo [network](https://www.devpleno.com/networking?utm_source=blog&utm_campaign=rc_blogpost).

#### 3. Estude o mercado

Quantas vezes você recebeu a tarefa de desenvolver um software e programa e só buscou referências técnicas para criá-lo? Se costuma fazer isso, você não considera a experiência do usuário em seus projetos.

O ideal é que teste alguma solução concorrente ao seu projeto, que seja bem avaliada pelos consumidores, para entender como é sua usabilidade. Faça uma avaliação de como as informações são dispostas, como os elementos interagem, quais funções são essenciais e quais não tão necessárias.

Essa análise, juntamente com as informações do seu usuário, vai te direcionar na criação de uma solução mais otimizada, em função não só de técnica, mas também da experiência que proporcionará.

#### 4. Mantenha-se atualizado

Assim como você busca novas informações e [cursos ](https://www.devpleno.com/entenda-a-importancia-de-cursos-para-desenvolvedores?utm_source=blog&utm_campaign=rc_blogpost)sobre linguagens, técnicas e métodos de programação, é preciso também se atualizar sobre as novidades de UX, como conhecimentos que simplificam processos ou podem deixar o seu sistema mais eficiente no front-end.

Existem diversos meios em que você encontra dicas de como se manter atualizado e [aprendendo sempre](https://www.devpleno.com/aprenda-a-aprender?utm_source=blog&utm_campaign=rc_blogpost).

Essas são as dicas de UX para programadores que você deve seguir para se tornar um profissional mais completo e entregar melhores resultados na sua empresa. E para se manter atualizado sobre experiência do usuário, acompanhe o canal [UXNOW](https://www.youtube.com/channel/UCgfaifzmqadwKyCd0lagylQ?utm_source=blog&utm_campaign=rc_blogpost) e receba novidades sobre essa técnica tão importante!


---

# Devpleno - Como entrar em Contato?

Source: blog/contato/index.md

Surgiu alguma dúvida durante as aulas? Gostaria de conversar sobre algum assunto específico?
Entre em contato conosco através do email contato@devpleno.com ou enviando uma mensagem em nosso Whatsapp: (35) 999 090 011


---

# Módulo MS - Convertendo timestamps

Source: blog/convertendo-timestamps/index.md

O hands-on de hoje é bem curto, apenas para mostrar um módulo que achei bastante interessante e funciona tanto para Node quanto para Browser. Esse módulo se chama MS e faz a conversão de qualquer formato para milissegundo e vice-versa. Primeiramente precisamos adicionar as dependências:

```jsx
yarn add ms
```

Em um arquivo qualquer, no meu caso criei um chamado timestamp, vamos fazer alguns testes:

```jsx
const ms = require('ms')
```

A forma como ele funciona é bastante interessante porque, por exemplo, se passarmos um valor inteiro para ele, ele já converte para uma string:

```jsx
console.log(ms(100000))
```

Vai ser retornado o valor de 2m. Lembrando que ao contrário ele também faz:

```jsx
console.log(ms('1d'))
```

O resultado será 86400000. Além disso, ainda podemos fazer algo bem interessante:

```jsx
console.log(ms(100000){
  long: true
})
```

Assim, ao invés de falar a inicial, ele trará o nome completo 'minutes'. Isso é muito útil principalmente quando queremos saber delta de tempo, quando temos dois timestamps com milissegundos e queremos achar a diferença entre eles.

Uma coisa bastante comum é utilizar o timestamp desde a era linux, tudo que fazemos é em relação a essa data. Só por curiosidade, eu achei o MS quando estava procurando coisas sobre JWT e uma das formas de passar a validação do token é através de uma string curta.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/30WpotUCUso" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como converter Markdown para HTML usando Marked

Source: blog/converter-markdown-para-html/index.md

O Markdown é uma forma de escrevermos documentação que foi popularizada pelo Github (e que é uma mão na roda, diga-se de passagem). Com ele, podemos pegar um texto e criar algumas marcações, o que gera uma interface mais organizada, sem perigo de existir sujeiras provenientes do Word por exemplo.

**1 – Usando o módulo Marked**

Para entender como o Markdown funciona, vamos fazer um hands-on no módulo chamado Marked, que tem a função de converter Markdown para HTML.

Primeiro, vamos criar um arquivo novo para testarmos (vou chamar o meu de teste.js)

**2 – Importando o Marked**

Com o arquivo aberto, vamos dar um Require chamando o módulo Marked

```jsx
const marked = require('marked')

console.log(marked('# teste'))
```

**3 – Rodando o arquivo**

Ao dar node no arquivo teste.js, perceba que ele vai retornar

```jsx
<h1> id='teste'>Teste</h1>


O # trás pra gente a tag H1, podemos usar 2 # por exemplo e ele nos retornaria a tag H2

console.log(marked('## teste'))

<h2> id="teste">Teste</h2>
```

**4 – Por que usar o Markdown?**

Com ele, conseguimos colocar esses textos de forma mais limpa e também plugarmos renderes nele.

Por exemplo, quando renderizar o H1, quero que seja um pouco diferente. Se colocarmos um texto formatado, poderia converter isso em view no react native, text, HTML, etc.

Exemplo:

```jsx
constmarked = requie('marked')

constrenderer = new marked.Renderer()

renderer.heading = function (Text, level) {
  return 'Text: ' + text + ' Level: ' + level
}

console.log(marked('# teste', { renderer: renderer }))
```

Lembrando que ao criar um renderer temos que avisar o marked que estamos criando um renderer diferente. Neste caso, como ele é um Heading, vamos chamar o renderer.heading. Novamente, para visualizarmos o que foi feito, vamos dar um node teste.js e ele vai retornar pra gente:

```jsx
Text: Teste Level: 2
```

Com isso, o Marked sabe que o texto que eu quero é o Teste, e o level que eu quero é o 2, ou no caso a heading tag H2. Eu consigo retornar uma fontSize maior como no exemplo abaixo:

```jsx
renderer.heading = function (Text, level) {
  return<Textstyle={{fontSize: }}>'Text: ' +text+' Level: '+level
}
```

Checando obviamente o level e por aí vai. Assim podemos gerar uma interface que vai ser reproduzida de forma igual tanto no react native quanto na Web, já que é possível converter para HTML e estaria tudo rodando normalmente.

**5 – Concluindo**

Venho usando bastante Markdown para documentação. Uma outra ideia interessante seria pegar esse HTML gerado pelo Markdown e, a partir dele, gerar um PDF para salvar isso para outros desenvolvedores.

Marked é uma forma que temos no Node de converter o Markdown em HTML, mas também podemos utilizá-lo no browser.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Ctrl+C / Copy to Clipboard em JS

Source: blog/copy-to-clipboard-em-js/index.md

Essa é uma dica bem rápida de como podemos mandar algo com o clipboard, ou seja, o equivalente a dar um CTRL + C em um texto na sua página.

Para fazer este exemplo, vamos usar o jQuery por que escrevemos pouquíssimas linhas de código. Então temos uma página bem simples, apenas com algumas tags, e vamos criar um input type text com um ID url e um value:

```jsx
<html>
  <head>
    <title>Copy to Clipboard</title>
    <style>
      #url{
        text-align: center;
        padding: 40px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="url" value="https://devpleno.com" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js">
    </script>
  </body>
</html>
```

Com isso teremos o input, e a ideia é que quando clicarmos nele. já ser copiado para a área de transferência, apenas precisando dar CTRL + V para funcionar.

Lembrando que já importamos o jQuery da CDN. Vamos então abrir no body um novo Script. Nele, quando clicar na URL, quero que selecione e depois execute o comando copy.

```jsx
<script>
  $("url").click(function(){
    $(this).select();

    document.execCommand('copy');
  })
</script>
```

Algumas pessoas colocam um Botão para copiar e deixam apenas o select quando clicarmos no texto. Isso é muito útil quando temos URL's para compartilhar e é legal para deixar essa facilidade na experiência do usuário quando ele estiver utilizando o seu sistema.

Um exemplo de onde isso é muito útil é na URL do github, pois poupamos a tarefa de copiar do usuário. Confira a explicação em vídeo para entender melhor.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/K7r2-hBydBE" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Mongoose: corrigindo "Cannot overwrite ''Model'' model once compiled"

Source: blog/corrigindo-o-erro-cannot-overwrite-model-model-once-compiled-no-mongoose/index.md

Durante o desenvolvimento de um protótipo aqui na empresa, eu me deparei com uma situação bem interessante no Mongoose. Por algum motivo, comecei a receber o seguinte erro: _OverwriteModelError: Cannot overwrite \`User\` model once compiled. _

```jsx
C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\node\_modules\\mongoose\\lib\\index.js:361
      throw new mongoose.Error.OverwriteModelError(name);
      ^
 OverwriteModelError: Cannot overwrite \`User\` model once compiled.
    at Mongoose.model (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\node\_modules\\mongoose\\lib\\index.js:361:13)
    at Object.<anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\User.js:8:27)
    at Module.\_compile (module.js:413:34)
    at Object.Module.\_extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module.\_load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\postsController.js:1:74)
    at Module.\_compile (module.js:413:34)
    at Object.Module.\_extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module.\_load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (C:\\Arquivos\\devpleno\\conteudos\\mongoose-problem-windows\\index.js:6:1)
```

O que me intrigou muito foi que sempre utilizei o Mongoose praticamente da mesma forma. O exemplo que gerou este erro é este aqui:

```jsx
var mongoose = require('mongoose')
mongoose.connect('mongodb://localhost/mongoose-problem')

require('./usersController.js')
require('./postsController.js')
```

O model User:

```jsx
var mongoose = require('mongoose')

var userSchema = mongoose.Schema({
  email: String,
  password: String
})

module.exports = mongoose.model('User', userSchema)
```

E os 2 controllers, que simulam a utilização deste model:

```jsx
var User = require('./user')
// restante do código do controller

var Post = require('./User')
// restante do código do controller
```

Bom, analisando o erro novamente, podemos notar que por algum motivo ao executar o código, o módulo onde está o model está sendo instanciado mais de uma vez. E isso acarreta em setar o schema duas vezes, gerando assim este erro.

Se analisarmos como está sendo dado o require em cada controller, vamos notar que um deles está como user e no outro User. No Windows, se tentarmos abrir um arquivo User.js ou user.js, ambos irão apontar para o mesmo local (que foi o que aconteceu aqui).

Porém, o nodejs gerencia os módulos em si de maneira case-sensitive. Então se fizermos: require('./User') e require('./user'), o nodejs vai tentar registrar 2x. O que duplica o registro do schema User no mongoose.

No Linux/Mac isso não aconteceria, pois bem antes de esse erro "pipocar", o node já iria gritar dizendo que o módulo User.js não existe. E ficaria bem mais simples de encontrar o erro.

### Outros efeitos colaterais deste problema:

Se por algum motivo, tivéssemos um trecho de código que não possuísse a restrição do mongoose+schema (de não poder ser registrado mais de uma vez). Este código seria executado 2x no Windows (pois o node registraria 2x o módulo).

Isso poderia gerar um bug/efeito colateral que aconteceria somente no Windows. E o código quebraria quando fosse colocado em produção no Linux. O ideal então é manter um padrão, e chamar no require da mesma forma que o arquivo foi salvo. Evitando assim, muita dor de cabeça.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Currying -  Uma técnica interessante usada em programação funcional

Source: blog/currying/index.md

O Currying é basicamente uma forma de informar para uma função os parâmetros de forma parcial. Você pode pegar uma função qualquer que recebe, por exemplo, três parâmetros, mandar um por vez e no fim obter o resultado. Assim, você injeta os parâmetros à medida que estiverem disponíveis. Um exemplo usando JavaScript puro e Currying _(lembrando que ele é uma função normal. Nele teremos os valores 1 e 2)._

```jsx
function func(valor1, valor2) {
  return valor1 + valor2
}

console.log('normal', func1(1, 2))
```

A única forma que temos de chamar essa função é passando os valores para ele, mas o ideal é passarmos o 1, e o valor 2 só quando ele estiver disponível. Vamos criar agora uma função 2 onde isso seja possível.

Essa função não vai receber os dois valores, apenas um e dar um return em uma função que recebe o segundo valor e essa, por sua vez, retorna valor 1 mais valor 2.

```jsx
function func2(valor1){
  return function(valor2){
    return valor1+valor2
  }
}

const func2Valor1 = func2(10)

console.log('curried', func2Valor1(20)
```

Suponhamos que quero fazer um read de um arquivo curried e cada hora que eu ler ele será passado um callback diferente, deixando apenas o primeiro parâmetro fixo. Isso é o Currying.

Vamos preenchendo os parâmetros à medida com que vamos executando o código e, quando chegamos no passo final, estará disponível todos os valores que passamos.

Quando fazemos isso, precisamos retornar a função e guardar em uma variável, e uma segunda função espera que você passe o segundo valor. Podemos também executar de uma vez fazendo assim:

```jsx
console.log('curried', func2(10)(20))
```

Na versão curried, precisamos lembrar que a primeira parte retorna uma função e então conseguimos chamar a segunda função com o segundo parâmetro que queremos. Uma outra coisa que podemos fazer é uma curried function só com arrow function, por exemplo:

```jsx
const functArrow = (valor1) => (valor2) => (valor3) => {
  return valor1 + valor2 + valor3
}

console.log(functArrow(1)(2)(3))
```

Perceba que isso deixa ainda mais simplificado uma curried function e vamos compondo cada vez mais nossas funções. Isso deixa mais fácil de ser testado, pois, à medida que a parte elementar dela é testada, só precisamos passar os valores corretamente que não vai ter problema. Confira a explicação em vídeo.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rec4I8zfYjc" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Faker - Como gerar grandes massas de dados fictícios para testes

Source: blog/dados-ficticios-para-testes/index.md

O Faker é um módulo do Node que usamos para gerar dados fictícios para testes, como para popular um banco de dados, por exemplo. Isso é muito útil quando queremos gerar uma grande massa de dados e estamos sem criatividade para gerá-la. Além disso, ele evita a utilização de dados que pareçam reais, pois eles podem gerar algum desconforto posteriormente. A primeira coisa que você precisa fazer é instalar o módulo:

```jsx
yarn add faker
```

Vamos criar um arquivo novo. _(No meu caso, usarei o nome gen-data.js, mas pode ser qualquer nome que lhe agrade)._ :) Dentro dele faremos o seguinte código:

```jsx
const faker = require('faker')

console.log(faker.name.firstName(), faker.name.lastName())
```

Neste código, primeiro vamos importar o módulo Faker. (Perceba que nele existem vários tipos de dados: nome, phone, random, image, etc). Vamos importar o nome por exemplo. Irá aparecer mais tipos de dados como firstName, lastName, jobArea, entre outros. Salvamos e rodamos no Node, ele nos dará um Nome e um Sobrenome aleatório. Podemos pedir para o Faker fazer isso várias vezes gerando, assim, uma grande massa de dados sem que tenhamos tanto trabalho para popular um banco de dados. Veja o exemplo abaixo.

```jsx
const faker = require('faker')

for (let i = 0; i < 10; i++)
  console.log(faker.name.firstName(), faker.name.lastName())
```

O Faker gera uma série dados interessantes, como:

```jsx
console.log(faker.helpers.createCard())
```

Que irá gerar uma lista com todos os dados de uma pessoa fictícia. Outro exemplo poderia ser:

```jsx
console.log(faker.internet.avatar())
```

Nele, o Faker busca uma imagem aleatória como avatar.

Isso é diferente de gerar o loren y, pois nele geralmente há um formato padrão que começa sempre com "loren y", o que não fica muito interessante para nomes.

Depois de utilizar o Faker, você perceberá que vai ajudar muito na hora de criar novos dados para testes de forma rápida. Confira o hands-on em vídeo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/bvfHQHgVzG8" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Debug de código JavaScript no Navegador

Source: blog/debug-no-navegador/index.md

Hoje vou dar uma dica rápida de como podemos fazer o debug de código JavaScript no navegador. É bastante simples, se você já trabalha com Java ou alguma ID, já deve ter uma ideia de como fazer isso na ID.

Podemos fazer isso também no front-end com JavaScript. Para ilustrar, vamos usar o seguinte código, que apenas inclui o jQuery e fiz um scripts.js:

```jsx
<html>
  <body>
    <button id='btn'>Test</button>
    <script src='jquery-3.1.0.js'></script>
    <script src='scripts.js'></script>
  </body>
</html>
```

O script em si tem um contador e duas funções assíncronas:

```jsx
var counter = 0;

counter = counter+1;

$(function)(){
  $("btn").click(function(){
    counter+=1;

    console.log(counter);
  });
});
```

Provavelmente quando você executar esse código no browser ele não vai fazer nada, pois estamos passando um console.log O que fazer?

No Windows, aperte F12 para abrir o developer toolbar:

![Developer toolbar](14bf19f2-ae82-4643-90af-9c8d5902e607.png)

Uma dica interessante: podemos dar CTRL + e CTRL – dentro da toolbar, com isso ele aumenta e diminui o zoom.

Há vários painéis e no sourse vemos todos nossos arquivos fontes. Nele você escolhe, na barra lateral, qual o arquivo quer visualizar e ele mostrará o código. Também é possível saber o que está acontecendo no script, por exemplo, clicar no número 2 da linha 2, voltar no script e dar F5. Ele pausou para podermos debugar o código.

![Inspecionando o resultado](961d454d-4e91-4b8a-8bf8-2fcfcadc36b8.png)

Se passar o mouse em cima da variável, ele mostra que ela não foi definida ainda, se clicar em step over  ![Icone step over](d1fe7ef8-44cd-465d-9df9-90f065f223b8.png)

ele executa a instrução e passa para a próxima linha. Ao passar o mouse em counter, ele recebeu 0 porque agora foi atribuído o valor a ele.

Uma das coisas que acho fantástico no Chrome é o counter estar com o valor zero. Se eu quiser prever quanto ele vai ficar, posso selecionar o pedaço de código que quero e ele já faz um preview do valor que essa variável vai retornar. Isso é muito bom para quando vamos debugar um código mais extenso. O problema é que quando continuamos apertando o step over, vai entrar em uma parte de um código jQuery, se eu der um step over de novo, ele irá para dentro desse jQuery, então para evitar isso, eu coloco o meu break point dentro da função anônima que vai ser chamada de forma assíncrona.

![Visualizando o scripts.js](b12bc8e3-839e-40f4-9188-a1c31dd1f04d.png)

Se deixarmos no 7, ele nunca vai fazer nada porque nunca vai passar pelo console.log, então vamos no botão resume ![Ícone de resume](727e6c6e-cbd2-45f7-aa41-bf42b4550573.png) para continuar executando.Ele executou tudo que podia de forma síncrona e como coloquei o break point dentro da função anônima, vamos clicar em test para ver o que acontece. Perceba que agora podemos selecionar e checar o preview normalmente como fizemos anteriormente.

Esse tipo de debug ajuda muito quando precisamos achar algum erro de lógica, afinal é equivalente a fazer aquela execução passo a passo. Confira o vídeo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/I6RCJ6BDHz0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Decisão técnica não precisa ser eterna

Source: blog/decisao-tecnica/index.md

Muitas pessoas, principalmente na época em que dava aulas presenciais, costumavam me perguntar qual tecnologia estudar. Geralmente as pessoas colocam a linguagem ou a tecnologia como se fosse uma decisão exclusiva que não pode ser mudada nunca mais. Não existe isso, se você é um profissional desse tipo, eu sinto lhe informar que está fadado ao fracasso, pois suas decisões devem estar sempre evoluindo, sua melhor decisão tem que ser a melhor decisão para aquele momento. Decisão técnica não precisa ser eterna!

Eu já fiz muito projeto em Angular por exemplo, e hoje para mim o React acaba sendo mais interessante, mas não que o Angular seja ruim, é que para mim o React é melhor no momento.

Já aconteceu de eu dizer que ASP é ruim porque estava começando minha carreira com ASP e comparei com o PHP, que eu já era bem melhor, nesse caso óbvio que ASP vai ser pior que PHP, pois os meus parâmetros eram diferentes. Então precisamos tomar cuidado com esse tipo de pensamento porque essas decisões não vão ser para o resto da vida, você pode e até deve mudar de opinião e se reciclar sempre. Quando for tomar uma decisão, como criar um projeto novo, meu conselho é conhecer mais opções, não precisa tomar a decisão final com a linguagem e pronto… Aprenda Angular e React, por exemplo, e veja qual você se sente mais confortável para fazer aquele projeto e não para todos os projetos da sua vida. Isso vai permitir que você evolua na sua carreira.

Comigo aconteceu várias coisas nesse sentido, antes eu achava que a HS era cara, ai eu hospedava tudo na Digital Ocean, hoje eu uso a HS e ela não custa caro, tudo depende do ponto de vista.

Eu gosto de deixar meu aprendizado sempre atualizado, então quando eu posso comprar cursos, eu compro. Se eu quero aprender React ou Angular para testar, eu faço ambos os cursos e, aí sim, eu tomo a decisão ao invés de ficar só olhando e tentando achar conteúdo dentro daquilo. Testar e ver possibilidades faz parte da nossa profissão. Descobrir e ponderar qual é a melhor escolha para aquele momento.

Obviamente, dependendo de onde você trabalha, não consegue tomar decisão de qual tecnologia utilizar, comece utilizar suas horas vagas para testar novas tecnologias em outros projetos, é bom estar renovando o seu 'cinto de ferramentas'.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/p4-XQvw5VSM" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Decisões baseadas apenas na questão financeira

Source: blog/decisoes-baseadas-apenas-na-questao-financeira/index.md

Pare de tomar todas as decisões da sua carreira única e exclusivamente baseadas na parte financeira! Isso mudou a forma como eu atuo no mercado hoje.

Quando você coloca isso na sua cabeça, você começa a fazer naturalmente. Eu fazia isso desde meu primeiro emprego, onde ganhava R$100,00 por mês, era muito pouco pelo montante que eu fazia, porém foi a maior escola que eu tive. Se eu tivesse tomado a decisão de ir pelo dinheiro, eu não teria feito uma grande escolha para minha vida, afinal foi de lá eu tirei toda a minha base de Web.

É muito comum olharmos apenas para o valor que vamos receber, mas quando quando você para de olhar para o dinheiro, ele acaba aparecendo. O financeiro não vai te trazer a felicidade na profissão, isso é o ponto mais importante para nós como desenvolvedores e profissionais.

Atualmente muitos amigos meus que fizeram escolhas parecidas também tiveram muito sucesso. Um deles deixou de ir trabalhar em uma empresa que pagaria muito dinheiro para trabalhar em uma outra que lhe daria apenas experiência, e essa experiência foi o que permitiu que ele morasse um tempo na alemanha.

Pense mais estrategicamente em sua carreira. Quais os pontos que te motivam? Qual tecnologia vai trazer mais felicidade?

Por exemplo, hoje eu poderia programar em JAVA, mas eu não programo porque não é uma linguagem que eu gosto.

Se você não focar em dinheiro e sim na sua formação e na sua satisfação profissional, mais oportunidades vão aparecer para você.

Apesar de ser importante, o dinheiro não é tudo. Pense melhor sobre isso.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/8vEyw2--TRQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Defina metas

Source: blog/defina-metas/index.md

A carreira de um desenvolvedor é bastante agitada, principalmente, por termos que nos manter sempre atualizados e antenados no mercado. Para isso, nada mais interessante que definir metas profissionais e pessoais. Veja neste vídeo mais dicas e sacadas sobre esse assunto.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Pp40lio_98Y" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Desenvolvedor Full Stack: o que é e como se tornar?

Source: blog/desenvolvedor-full-stack-o-que-e-e-como-se-tornar/index.md

Cada vez mais a figura do desenvolvedor Full Stack ganha espaço em empresas de TI e desenvolvimento de software. Esse perfil profissional que combina as habilidades de front end e back end é cada vez mais procurado porque, além de poder cobrir qualquer espaço em um time de desenvolvimento, ele é capaz de enxergar o processo de produção como um todo. Se tornar um desenvolvedor Full Stack pode parecer um desafio tão grande que às vezes é até desencorajador: se já não é fácil ser um dev front-end ou back-end, dominar as duas camadas então seria impossível. Mas na verdade, ter visão holística do Full Stack não é tão complicado quanto parece: neste artigo, vamos explicar melhor o que é um dev Full Stack e o que é preciso fazer para se tornar um deles. Boa leitura!

### O que é um desenvolvedor Full Stack?

Em algumas empresas ainda é muito usual dividir os desenvolvedores de softwares em duas categorias: os especialistas em front-end, que lidam com interfaces e a experiência do usuário e os de back end que trabalham com a camada mais profunda do código, além de outras tarefas como as integrações com bancos de dados. Só que essa especialização intensa começou a ser problemática em alguns casos, porque como os devs eram muito especializados nas funções específicas dos seus times, faltava alguém capaz de enxergar toda a produção como algo único e integrar melhor essas duas camadas do desenvolvimento. E é aí que entra o desenvolvedor Full Stack: um profissional capaz de trabalhar tanto no front-end quanto no back-end, com uma visão holística do processo. Esse perfil profissional é útil tanto em organizações que não dividem os times de forma tão direta quanto em empresas mais modernas, que esperam dos seus colaboradores um conjunto de competências variadas e versatilidade.

### Como se tornar um desenvolvedor Full Stack?

Para se tornar um desenvolvedor Full Stack é preciso, naturalmente, estudar muito. O profissional que opta por esse tipo de carreira deve ser ávido por novos conhecimentos. Ele precisa se sentir confortável com o desafio de encarar uma linguagem desconhecida como parte da sua rotina de trabalho. Esse perfil de desenvolvedor também costuma ser chamado de profissional com conhecimento em forma de 'T'. A linha vertical da letra representa a área em que o dev é um especialista, que pode ser algo dentro do front-end ou do back-end. Já a linha horizontal simboliza que, além de ser especializado em algo, esse profissional expande suas competências em diversas áreas, sem se aprofundar tanto nelas. Em essência, o desenvolvedor Full Stack compreende todo o processo de desenvolvimento do produto. Portanto, para conseguir se capacitar nesse perfil, o dev precisa, antes de tudo, conhecer um pouco sobre quase tudo dos processos de criação de um software.

### O que preciso saber para ser um desenvolvedor Full Stack?

Em essência, podemos dizer que o desenvolvedor Full Stack precisa dominar toda a estrutura de produção do software, do back-end ao front-end. Esses conhecimentos vão variar de acordo com cada empresa, pois times diferentes trabalham com tecnologias e técnicas diversas. Logo, é importante que o dev que pretende se tornar Full Stack tenha a consciência de que ele precisa ser aberto a novos conhecimentos sempre. Também é essencial que ele não tente ser um especialista em todas as áreas, pois além de ser inviável, isso atrapalharia a ampliação dos seus horizontes. Dito isso, vale a pena listar algumas técnicas e tecnologias que o desenvolvedor Full Stack deve conhecer melhor:

- **usabilidade**: é um engano achar que a experiência do usuário está apenas nas mãos dos devs front-end. A visão de usabilidade deve começar já na hora que uma funcionalidade é concebida, portanto, esse conhecimento deve fazer parte do repertório de um desenvolvedor Full Stack;
- **controle de versão**: é básico que qualquer desenvolvedor domine tecnologias como o Git e o SVN, seja ele Full Stack ou não;
- **linguagens de programação back-end**: além de estudar a noção de lógica do back-end, o Full Stack precisa saber pelo menos uma linguagem como JavaScript, Java, C# ou PHP;
- **banco de dados**: muitos devs se amedrontam com o degrau de aprendizado que são os banco de dados. Mas para se tornar Full Stack, é preciso conhecer bem esses mecanismos;
- **mobile**: a abordagem padrão hoje é o 'mobile first'. Devs oriundos do front-end costumam ter essa visão, mas quem vem do back-end pode se aprofundar mais;
- **infraestrutura e nuvem:** conhecimentos como virtualização de máquinas, infraestrutura de redes e serviços de nuvem são muito bem-vindos para o desenvolvedor Full Stack;
- **linguagens de programação Front-End**: Javascript e HTML, por exemplo, são algumas das habilidades básicas de qualquer desenvolvedor Full Stack.

Depois de dominar todos esses conhecimentos listados acima, um desenvolvedor pode até se dar por satisfeito e adotar o sufixo “Full Stack” no seu cartão de visitas. Mas é preciso que ele tenha plena consciência de que, na verdade, sua evolução como profissional será contínua e ele nunca deixará de aprender. As tecnologias e linguagens de programação estão sempre se transformando. Para não correr o risco de se tornar obsoleto em alguma das suas competências, o desenvolvedor precisa estudar cada vez mais e incluir a busca por novos conhecimentos como parte da sua rotina.

### Um desenvolvedor Full Stack precisa conhecer também do negócio?

O objetivo do desenvolvedor Full Stack é ter a visão holística sobre o processo de desenvolvimento de um produto. Logo, apesar de não ser uma exigência básica, é muito recomendável que esse profissional busque conhecimentos também na área de negócios.

Em boa parte das empresas, os desenvolvedores Full Stack são vistos como representantes da área de desenvolvimento, capazes de responder questionamentos sobre toda a estrutura de produção do setor. Mas para se comunicar claramente e compreender as demandas e dúvidas externas, é necessário que ele conheça também a regra do negócio.

Além disso, com uma visão que englobe também a parte de negócios, o dev será capaz de enxergar quais são as funcionalidades que vão agregar valor efetivo ao software, facilitando a priorização delas.

Ou seja, mesmo depois de expandir seus horizontes aprendendo tudo sobre front-end e back-end, é desejável que o desenvolvedor Full Stack amplie ainda mais o seu conhecimento em 'T'. Além de aprender sobre essa parte de negócios, ele também pode desbravar outras áreas, como o desenvolvimento ágil de projetos, networking e habilidades de liderança.

E você, o que considera essencial e desejável para se tornar um desenvolvedor Full Stack e dominar o processo de produção de softwares?

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Dica: Como saber a complexidade de um algoritmo

Source: blog/dica-como-saber-complexidade-de-um-algoritmo/index.md

Nos últimos vídeos e na última live, comentei sobre o Codility. Ele tem uma característica de avaliar a complexidade do algoritmo que você respondeu. Neste vídeo, dou uma dica rápida de como avaliar e ter uma ideia da complexidade. Confira:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/f--A1FK6KK4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Debounce

Source: blog/dica-debounce/index.md

Debounce é uma técnica bastante útil para restringir o tempo entre a chamada de uma mesma função. Por exemplo, se um usuário clicar 6x em um botão em menos de 2s, apenas a última vez será contada. Neste vídeo, construiremos uma forma genérica de controlar isso.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/X8wo1b2Eem0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Debug de NodeJS no VS Code

Source: blog/dica-debug-de-nodejs-no-vs-code/index.md

Neste dica, vamos ver como depurar nosso código NodeJS utilizando o VS Code.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7YJxKgflboE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), i[nscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre se e-mail para não perder as novidades. Deixe suas sugestões e dúvidas nos comentários. Abraços!


---

# Dica: Debug NodeJS com Chrome DevTools

Source: blog/dica-debug-nodejs-com-chrome-devtools/index.md

A dica de hoje é sobre como podemos fazer o debug dos nossos scripts em Node (de um script que fica rodando direto como o express e de um script simples) utilizando o chrome. Eu tenho em minha máquina um servidor em express e no meu shell eu vou rodar esse servidor:

```jsx
node -- inspect server.js
```

Perceba que ele mostra um link:

![link gerado](37aa5d6c-532e-4a51-a147-613d2eea808d.png)

Esse link eu vou copiar e colar no navegador. Com isso ele abre para mim o devTools do Chrome e eu posso ir em Source, por exemplo, apertar CTRL+P e colocar o nome do arquivo, no caso o meu se chama servser.js:

![Visualizando o devtools](f1e7e4ad-efcb-4224-b20b-8a382ea9d542.png)

Agora eu quero que ele pare a execução quando passar no primeiro console.log:

![Trecho do código](c67620e0-32e1-4c86-97d9-cb15d01b0bf1.png)

É muito comum em algumas ferramentas como o visual studio fazer o debug dessa forma, setando um break point e quando o script for executar, ele vai parar nesse ponto que marcamos.

Agora vamos rodar nosso localhost:3000 e quando voltamos para o devtools, perceba que ele parou e nós conseguimos checar o que tem dentro do req, res:

![Analizando o devtools](160a9ae0-d734-4a17-9e08-5a61858f3c69.png)

Eu posso pedir para ele ir para a próxima linha ou mandar continuar o script utilizando os botões:

![(73aa926e-a947-4d9d-8c54-4f3920ba916b.png)

Vamos supor que eu queira saber o que vai sair em uma expressão, eu posso selecionar e passar o mouse em cima que ele mostra sendo executado. Isso é muito útil para achar alguma inconsistência no código.

Sempre que você for testar, principalmente código assíncrono, coloque um break point onde você quer que pare, principalmente para call back.

Outra forma que temos de depurar um código é depurar desde a primeira linha, para isso vou utilizar um algoritmo que já fizemos em outra aula:

![Depurando o código](d13fda26-e1b3-4b5d-afeb-5c48b0f5a2e7.png)

```jsx
node --inspect --debug-brk cyclic_rotation.js
```

Percebam que eu não tenho nada de assíncrono no meu algoritmo, mas mesmo assim ele deu uma URL para depurar:

![Visualizando a url](adef2276-d1ab-49b9-b0b9-b47206147e10.png)

Então vamos colocar essa URL no Chrome e ele já para na primeira linha do meu código executável. Vamos colocar um break point e dar um resume para ver o que acontece: Como é uma função executável ele mostra para mim algo muito semelhante ao teste de mesa que é executar passo a passo o algoritmo.

![Mostrando o uso](6e6bf58c-e02f-4b14-901e-18d430290ffc.png)

E eu posso também ir passando linha a linha apenas clicando no botão usado anteriormente e ele vai mostrar como está o valor que foi alterado.

![Mostrando o uso](87d4a952-c3fd-4122-871b-588a19e64db3.png)

Com isso nós conseguimos saber exatamente oque está acontecendo no nosso algoritmo, fazer a depuração do script de uma forma mais precisa, ainda mais quando é uma função pura porque conseguimos injetar os valores e ir testando passo a passo.

## Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/mNTPo_9FEKU" allowfullscreen></iframe>
</div>

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder nenhuma atualização.


---

# Dica e Algoritmo: XOR e Odd Occurences in Array

Source: blog/dica-e-algoritmo-xor-e-odd-occurences-array/index.md

Neste vídeo você vai entender como melhorar a performance do algoritmo Odd Occurrences in Array com o operador XOR. Confira! Deixe suas dúvidas e sugestões nos comentários.

Não se esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno/), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Abraços!

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/68hCa3SY2aM" allowfullscreen></iframe>
</div>


---

# Dica: ES6 - Destructuring Assignament

Source: blog/dica-es6-destructuring-assignament/index.md

Nesta dica, comento sobre uma novidade que veio com o ES6: o Destructuring Assignament, que permite uma grande organização e aumento de legibilidade do código. Confira!

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/XhPCG9JZ_yE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Injeção de dependência com Destructuring Assignament

Source: blog/dica-injecao-de-dependencia-com-destructuring-assignament/index.md

Uma maneira de injetar dependências, que permite uma organização ainda maior do código, é utilizando o Destructuring Assignament. Neste vídeo mostro como utilizar as 2 técnicas.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/T6-QKo3ACBQ" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Dica: Injeção de Dependência no ReactJS

Source: blog/dica-injecao-de-dependencia-no-reactjs/index.md

Injeção de dependência ajuda muito na testabilidade do código e de certa forma em aumentar a legibilidade do código. Veja como podemos implementar Injeção de dependências no ReactJS

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/tQ80uAP_B_M" allowfullscreen></iframe>
</div>

Veja mais sobre injeção de dependências em [https://www.devpleno.com/injecao-de-dependencia/](https://www.devpleno.com/injecao-de-dependencia/) Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Once n vezes

Source: blog/dica-n-vezes/index.md

Neste vídeo. iremos implementar em Javascript uma função utilitária que permite uma função ser executada apenas uma vez (once) e também modificamos um pouco este exemplo para que possa ser limitado a n-vezes.

Dependendo da regra de negócio, poderia ser utilizado para permitir que uma ação seja executada apenas x vezes.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/6dB2dVep_UQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Self-Invoked Function (Self-invoking Function)

Source: blog/dica-self-invoked-function-self-invoking-function/index.md

Self-invoked Functions é uma técnica bastante interessante no Javascript, e pode resolver alguns problemas de conflito de contexto (que já estão sendo reduzidos pelo ES6/ES7). Nesta dica, mostro o que é esta técnica e onde você pode utilizá-la.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GErCwWAFheA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno/), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# 3 dicas para NPM + 1 dica extra

Source: blog/dicas-paranpm/index.md

Se você acompanha o DevPleno há algum tempo. deve ter percebido que eu utilizo bastante o learn, mas o repositório onde ficam esses módulos é o NPM. Esse repositório tem diversas funções interessantes para o nosso dia a dia, e é sobre algumas delas que vou abordar neste post. Confira:

#1 – Se você quiser instalar algum módulo em uma versão especifica, pode utilizar o @ depois do nome do módulo que irá instalar. Por exemplo, o Express está no 4.1.5, mas você quer instalar o 4.0.0, então basta fazer o seguinte:

```jsx
npm install express@4.0.0
```

Uma das vantagens disso é em relação a compatibilidade. Caso você esteja utilizando um outro módulo, por exemplo, que por questão de compatibilidade precisa do express 4.0.0, poderia fazer isso facilmente apenas utilizando o @.

#2 – Você pode usar repo (repositório) para acessar o repositório do módulo e procurar as issues dele.

```jsx
npm repo express
```

#3 – Você também pode usar home para ir direto ao site do módulo.

```jsx
npm home express
```

Obviamente ele está utilizando informações do próprio NPM, ou seja, se a informação não existir nele, não é possível recuperar.

Extra – NPM Outdated

O NPM Outdated checa suas dependências e vê se algo pode ser atualizado. Por exemplo, como forçamos o express 4.0.0, ele irá mostrar que a atual é a 4.0.0, a melhor a ser utilizada é a 4.15.2 e a ultima também é a 4.15.2.

Ele pode ser bastante útil caso você tenha muitas dependências para fazer na 'mão', o que é muito trabalhoso, e isso te livra de todo esse trabalho.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/XR4iMcOKvkg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Você precisar ter DOM para ser um bom profissional?

Source: blog/dom/index.md

**Já te contaram a mentira do Dom?**

Vou te explicar melhor. Uma coisa que eu sempre vejo as pessoas falando é “ah, Tulio, você tem o dom para aprender tecnologias”. As pessoas se escondem atrás desse “dom”, mas o que é o dom?

Na verdade, eu considero isso uma grande mentira que as pessoas geralmente te contam quando você é novo e isso vem se arrastando com o tempo e pode demorar muito para aprendermos que isso não é uma verdade. A minha sorte é que meus pais não acreditam nesse tipo de coisa, então tudo que eu queria fazer eles deixavam, por exemplo, eu quero desenhar? Tudo bem, vamos desenhar e apoiavam aquilo. Eles me deixavam errar muito, afinal não é um dom que vai definir se você é bom ou não em uma coisa.

O que pode acontecer é que, dependendo da sua criação ou da sua afinidade com certas coisas, tem mais facilidade de aprender sobre elas. Como nunca fui barrado em aprender nada, isso me deixou mais maleável a testar, errar, testar e dar certo e isso me deixou com uma facilidade um pouco maior em aprender por não ter medo de errar.

Eu espero que você também não acredite em dom, que se alguém chegar e te perguntar, por exemplo, “você tem dom para música?” você responda “eu não tenho dom para música, mas tenho força de vontade aprender.”

Programação e tecnologia é a mesma coisa, temos que repetir exaustivamente para fazer algo bem feito com maestria. Então coloque na cabeça que não existe DOM! Obviamente existem pessoas brilhantes, mas a genética delas favoreceu, mas o dom sempre vem com a dedicação. A prática leva a perfeição.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/KwdUislTWbA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Dotenv e variáveis de ambiente no NodeJS

Source: blog/dotenv-e-variaveis-de-ambiente/index.md

Hoje eu tenho duas dicas, como podemos configurar uma aplicação sem precisar alterar o código fonte. Essa é uma boa prática, apesar de muita gente ainda não usar, então quero reforçar o conceito de como podemos fazer isso. A ideia é que o sistema fique immutable e que a gente construa esse artefato no sistema e se colocarmos em uma máquina de desenvolvimento, ele vira desenvolvimento, em uma máquina de produção vai virar produção, isso baseado somente em variáveis de ambiente. Como pegamos uma variável de ambiente?

```jsx
console.log(process.env.NODE_ENV)
```

Ao rodar, perceba que vai dar undefined, porém se fizermos:

```jsx
NODE_ENV=production node test.js
```

vamos ter uma variável de ambiente production. Porém se rodar de novo, ele volta para undefined, então quando definimos essa variável ele carrega de forma automática qual banco conectar e qual usuário. Isso fica no ambiente e não mais na aplicação. Mas se toda vez que formos desenvolver tivermos que lembrar as informações, é bastante trabalhoso, correto? Então podemos utilizar um módulo que se chama Dotenv, onde criamos um arquivo com uma variável de ambiente que a gente quer e ele carrega automaticamente:

```jsx
yarn add dotenv
```

Já no nosso script, vamos fazer o seguinte:

```jsx
require('dotenv').config()
```

Assim carregamos o arquivo .env Agora vamos criar um arquivo na raiz do projeto chamado .env, nele vamos colocar o nome da variável que a gente quer, por exemplo:

```jsx
NODE_ENV = tulio
```

Ao rodar novamente percebam que agora vai ser retornado 'tulio'. A ideia é que, na máquina de desenvolvimento, você vai criar o arquivo .env com todas as variáveis que você precisa para rodar na máquina e quando você colocar no servidor, vão ser colocadas essas variáveis no ambiente e não mais no arquivo. Podemos também, se ele estiver em produção, evitar que ele acesse o ambiente de desenvolvimento:

```jsx
require('dotenv').config()
if (process.env.NODE_ENV !== 'production') {
  console.log('Desenvolvimento')
} else {
  console.log('Produção')
}

// Retorno: Desenvolvimento
```

Quando começamos a utilizar essas técnicas, a nossa aplicação fica muito mais independente, rodando em qualquer lugar, basta que você informe qual a configuração de banco de dados, Mongo, SQL, etc e ela vai se moldar para cada ambiente.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/KOYQDxaL9ag" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# 3 dicas para começar a empreender na área de software

Source: blog/empreender-na-area-de-software/index.md

Hoje quero dar três dicas para você que está começando a empreender na área de software. Vou aproveitar uma dúvida e comentário do João Henrique, em um vídeo nosso, dizendo que ele está começando na área, gosta de programar, está começando a empreender na área e qual dica eu daria a ele.

**Dica #1 – Comece simples**

Não tente pegar o maior sistema que você puder de primeira porque você não tem experiência. Eu aconselho a começar com um site com uma parte mais dinâmica, por exemplo, e vai aumentando gradativamente à medida que você for ganhando experiência. Isso é muito importante para que você consiga ir melhorando cada vez mais.

**Dica #2 – Tenha um portfólio**

Se você não tem nada para mostrar, eu aconselho que faça um projeto social. Vá em um asilo/creche e crie um projeto para ajudar alguma dessas instituições. O portfólio vai te mostrar duas coisas: a primeira é mostrar para um potencial cliente e a segunda é aprender com um projeto em produção, além de ajudar outras pessoas, claro.

**Dica #3 – Aprenda a vender**

Se você quer realmente continuar nessa carreira, aprenda a vender, foi uma das melhores coisas que eu aprendi. Estude muito como fazer marketing. Já cheguei a vender sistemas de R$150 mil porque eu aprendi a vender.

Na primeira venda tente tirar todas as lições disso, o que você aprendeu e o que você errou. Eu faço isso em toda reunião que faço para vender algo.

**Dica #4 (bônus) – Negociar é deixar as duas partes alinhadas**

Negociação não é pra sugar a outra parte e sim para deixar as duas partes alinhadas. Você não tem que explorar o seu cliente, mas sim alinhar o valor cobrado. Não é aquilo de baixar R$5,00 ou R$1.000,00, negociação de verdade é quando as duas partes saem de um contrato muito felizes por terem feito um bom negócio.

Vender é algo necessário para qualquer empresa e negociação é a base que você tem para alinhar as expectativas. Você tem que estar cobrando um valor justo e seu cliente deve sair com a sensação que você está pagando um valor justo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/A5RgxkpJIrA" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.


---

# Ensinar algo a alguém todos os dias

Source: blog/ensinar-algo/index.md

Você já ensinou algo a alguém hoje? Quando estamos na faculdade, por exemplo, as pessoas tendem a nos perguntar dicas sobre de computação/informática ou pedir ajuda em algumas situações como configurar o roteador, e nós algumas vezes pensamos “Esse cara acha que eu sou o que? Sou analista,mas não mexo com rede”.

A dica de hoje é fazer exatamente o contrário disso. Uma das coisas que venho tentando aplicar na minha vida é que se as pessoas me perguntam sobre isso, eu falo algo como “eu não sou especialista em rede, mas, se você quiser, eu tento te ajudar”.

Quando você está ajudando ou ensinando uma pessoa, mesmo sem querer nada em troca, a gente gera algo bem interessante que é uma sensação de gratidão nessa pessoa com você. Isso gera uma positividade muito boa para a sua carreira e vida.

O detalhe é que a pessoa se sente em débito com você, sempre que ela precisar ou lembrar de alguém, ela vai lembrar de você. É muito legal se você puder ensinar as pessoas ou ajudar pelo menos uma vez por dia, por exemplo “hoje eu consigo ensinar alguém a programar tal coisa”, “eu consigo ensinar a minha mãe a mexer no controle remoto” e por aí vai. Toda vez que você ensina algo, está praticando o que falamos de doar conhecimento aos outros e com certeza você vai receber muito mais que você doa.

A conclusão de hoje é sempre doe mais do que você pretende receber, ajude as pessoas a vencer alguma barreira. Eu tenho certeza que isso vai gerar muitos frutos legais para a sua carreira e pra sua vida pessoal, pois as pessoas não vão lembrar de você apenas com coisas vinculadas a dinheiro e profissional, quando tiramos o olho do dinheiro ele aparece no bolso. Quando você pratica gerar valor às pessoas, o dinheiro vem por consequência.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/WGdAsrIZCrk" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço


---

# Ensino Formal ou Cursos Livres - Por qual optar?

Source: blog/ensino-formal-ou-cursos-livres/index.md

Que tipo de ensino e de novos estudos devemos buscar: o ensino formaL (curso técnico, faculdade, pós graduação, etc) ou cursos livres (cursos pela internet ou presenciais sem vínculo com o MEC ou CAPES)?

Hoje sou mestre em Sistema de Informações pela USP, ou seja, fui pelo ensino formal também, mas tenho muito conhecimento através de cursos livres. Terminei minha graduação e sempre pesquisei e estudei muito por cursos livres, conhecimento gratuito, livros, etc, mas eu precisava ser desafiado e sair da minha zona de conforto, por isso acabei indo para o Mestrado, podendo também contribuir um pouco com a sociedade por meio do meu projeto.

O grande detalhe que costumo analisar é o custo-benefício. Se o que eu preciso necessariamente vai ser suprido com o curso. Por exemplo, eu quero aprender a fazer deploy de sistemas de forma contínua, mas não existe uma faculdade disso, então preciso fazer um curso livre. Se quero aprender um pouco mais sobre o meio acadêmico e fugir um pouco do que estou acostumado, então vou para o formal.

Depende muito de qual o seu objetivo ou necessidade. Muitas vezes você vai precisar do título (mesmo sabendo que às vezes não quer dizer nada). Se for lecionar para ensino superior, por exemplo, você precisa de no mínimo um mestrado (em instituições públicas, precisa de doutorado), então sua titulação também depende do seu objetivo. Se ele precisa de titulação, busque uma formação que te dê isso, mas se não precisa e onde você for atuar não exige, vá em cursos livres e prove na prática. Tudo que fiz até hoje não precisei de titulação para mostrar apesar de tê-la.

É importante ressaltar que geralmente o ensino formal é um pouco mais teórico que o ensino livre, pois um foca no conhecimento geral enquanto o outro em pontos específicos.

Portanto, a dica é analisar o custo-benefício. O que você precisa no momento? Qual o seu objetivo para o futuro?

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/FFfrKB3-NEc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Entenda a importância de cursos para desenvolvedores

Source: blog/entenda-a-importancia-de-cursos-para-desenvolvedores/index.md

Você está pronto para atuar em uma grande empresa? O mercado de tecnologia está crescendo cada vez mais, e para conseguir se destacar no cenário atual, é preciso desenvolver habilidades essenciais à profissão. A melhor maneira é se capacitando por meio de cursos para desenvolvedores.

Descubra as principais vantagens de investir em sua capacitação nesta área!

### Empregabilidade

Empregabilidade é o conjunto de técnicas e habilidades que um profissional precisa ter para ser desejado pelas empresas. Ao estudar e aprender novas técnicas ou aprimorar as já existentes, você começa a ser disputado pelas empresas e pode até mesmo ser chamado para colaborar naquela desenvolvedora dos seus [sonhos](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&utm_campaign=rc_blogpost).

Já pensou poder contribuir com o próximo UBER, Airbnb, Netflix ou Angry Birds?

### Oportunidades

Essa é uma vantagem que anda de mãos dadas com a empregabilidade. Quanto maior a sua empregabilidade, mais portas se abrirão. Capacitação significa oportunidades melhores e salários maiores. A qualidade das oportunidades é proporcional à qualidade dos profissionais.

### Crescimento

Você é “o cara” da programação e ama a empresa em que trabalha? Neste caso é ainda mais importante fazer um curso. Apenas desenvolvendo novas habilidades é que você poderá crescer dentro da empresa e ser promovido.

### Networking

É possível crescer profissionalmente sem contar com o apoio de ninguém? Sim. Porém, este é o caminho mais difícil. Com uma boa rede de networking os resultados aparecem mais rapidamente e de maneira mais fácil.

Ao se capacitar você faz contato com pessoas que estão na mesma área. Essa interação – que pode ser tanto presencial quanto online (em fóruns e grupos) – ampliará sua visão da profissão.

Além disso, o colega do outro lado do computador pode ter uma ideia de negócio com você ou conhecer uma empresa que está contratando pessoas com seu perfil. É possível até mesmo que ele seja dono de uma empresa de informática com vagas abertas.

O [network](https://www.devpleno.com/networking?utm_source=blog&utm_campaign=rc_blogpost) é essencial em qualquer área e no campo de desenvolvimento não é diferente. Quanto mais pessoas o conhecerem e souberem de suas habilidades, melhor.

### Credibilidade

Ter credibilidade significa ser respeitado em sua área de atuação e, com o tempo e o acúmulo de conhecimentos, é possível tornar-se até mesmo uma referência. Para que isso aconteça, conviva e aprenda com quem sabe. Para isso, escolha cursos com grandes nomes da área.

### Planejamento

É imprescindível ter um plano de carreira. Comece definindo quais são seus pontos fracos e fortes. Um curso de capacitação ajudará a avaliar seu atual nível de conhecimento e compará-lo a outros profissionais da sua área. Estude para desenvolver seus pontos fracos e aprimorar os fortes.

### Melhores cursos para desenvolvedores

Existem algumas capacidades que todo desenvolvedor precisa ter e é nisso que você deve investir sua energia e dinheiro. As habilidades básicas sempre podem ser aprimoradas, por isso é importante não se acomodar.

Além disso, fique atento também às tendências do mercado. Identifique quais são as competências que estão em alta e escolha cursos para que possa aprendê-las.

Veja algumas tendências atuais de desenvolvimento e programação:

#### ReactJS

ReactJS é uma biblioteca JavaScrips do Facebook para criar interfaces de usuários. O foco do React, ao contrário de outras bibliotecas, é a view, deixando de lado os demais componentes de uma aplicação front-end. O ReactJS estrutura a representação do HTML em objetos.

Não se pode negar que o ReactJS está em alta, especialmente por ter sido desenvolvido pelo Facebook e Instagram. Porém, mais do que uma moda, ele veio para ficar.

A novidade facilita a escrita em Javascript, é eficiente, excelente para SEO, tem suporte da equipe do Facebook (apesar de ser opensource) e funciona muito bem em aplicativos mobile.

#### Firebase

Por falar em mobile, não dá para não mencionar o Firebase como uma ferramenta em alta. Trata-se de uma plataforma móvel do Google que ajuda o desenvolvedor a criar aplicativos, aumentar a base de usuários e obter mais conversões.

Com APIs intuitivas em um único SDK, o Firebase permite a criação de apps sem a necessidade de infraestrutura complexa, facilitando o ensino e a aprendizagem de desenvolvimento. Assim, dê preferência para cursos que usem esta ferramenta. Há uma grande chance de você continuar utilizando-a nos desafios futuros.

#### Integração contínua

Os desenvolvedores estão se unindo cada vez mais. Aprender a trabalhar em integração contínua é fundamental para sua carreira. No “Continuous Integration” os membros da equipe integram seu trabalho com frequência.

Nesse caso, “integração” é uma fase do desenvolvimento de software em que todo o trabalho do time é agregado, validado e testado. Desta forma, é possível identificar rapidamente possíveis falhas. A técnica reduz o prazo para a entrada em operação do aplicativo que está sendo projetado.

#### Continous-deployment

Segurança nunca é demais. Por isso outra prática em alta é a realização de continuous deployment — processo de inserção de um novo código em um brench ou trunk. A técnica permite testar rapidamente um código por meio de testes automatizados. Isso pode acelerar o desenvolvimento do aplicativo.

#### Redux

Por fim, mas não menos importante, vale a pena considerar o aprendizado em Redux, uma nova forma de controle e organização do estado da aplicação. O Redux oferece ganhos de qualidade e estabilidade e saber usá-lo é um grande diferencial para qualquer profissional.

Cada capacitação é como evoluir um nível e pode lhe deixar mais perto do seu sonho.

O ideal é que os cursos tenham aulas práticas para que você possa colocar a mão na massa. O DevPleno oferece um excelente curso de ReactJS para que você possa se aprimorar e manter-se bem qualificado no mercado de trabalho. Conheça o [devReactJS](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog).


---

# Entenda sobre CORS - Cross Origin Resource Sharing

Source: blog/entenda-sobre-cors-cross-origin-resource-sharing/index.md

Hoje vou falar sobre um assunto que é bastante interessante: CORS (ou Cross Origin Resourse Sharing).

O que isso quer dizer?

É como dois servidores ou dois domínios diferentes poderiam compartilhar um recurso. Imagine o seguinte: nós temos o site do DevPleno e o tuliofaria.net, se eu fizer uma requisição no DevPleno, especificamente utilizando o AJAX, que tenta fazer uma requisição de dados do tuliofaria.net, o servidor do tuliofaria.net corre um risco de ter uma forma de exploração.

Imagine o site dos Correios, se tivéssemos que fazer isso direto com o CEP, as pessoas não sairiam do site delas e faríamos as requisições todas do site dos Correios, isso sobrecarregaria o site, além de ser uma falha de segurança porque podemos fazer algo nesse script para fazer um exploid e mandar para outro servidor. Um exemplo disso é onde você coloca o nome em uma aplicação, é possível colocar um script ali que quando o administrador for listar todos os nomes, tenha um script injetado que mande os dados para outro servidor. Por esse motivo não é possível fazer requisições para outro domínio a não ser que esse domínio permita isso.

Algumas operações falamos que são 'pre-fligth', isso quer dizer que antes dela executar é mandado uma requisição chamada 'option', nisso ele pergunta algo como “nesse CEP, quais são as opções que eu tenho nesse servidor?” e o servidor vai responder essas opções, como um GET, POST ou ditar o domínio. Caso ele responder qual o domínio, o próprio navegador não vai fazer a outra requisição, por exemplo, caso tenhamos feito um post para salvar algum dado no tuliofaria.net, o próprio navegador manda um Options, checa esse retorno e aí sim faz o post se ele puder.

CORS nada mais é do que esse bloqueio, ou como a gente controla esses recursos, então durante essa troca de informações temos algumas trocas de cabeçalhos que vão dizer se esse servidor permite outro servidor acessar ou manipular os dados.

É sempre bom tomarmos cuidado com isso porque vamos supor que se a gente testar nossa API no postman, por exemplo, ele não tem problema de CORS, já que ele é uma aplicação stand-alone e não uma página estática.

Algumas coisas que aconteceram conosco aqui na empresa foi colocar sistemas com domínios diferentes mas acessando a mesma API, por exemplo. O desafio era controlar o CORS para saber se esse domínio tinha acesso ou não. Esse é mais um conceito da arquitetura WEB.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3hzidd-sQfY" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# DevPleno Entrevista - Carlos Drury e Thiago Coelho

Source: blog/entrevista-carlos-drury-e-thiago-coelho/index.md

Carlos Drury e Thiago Coelho fazem parte do GDG Vale da Eletrônica. Essa entrevista aconteceu durante um evento organizado por eles no Vale da Eletrônica, em Santa Rita do Sapucaí.

O Carlos é desenvolvedor JavaScript e atualmente trabalha no INATEL, em um projeto da Ericsson, uma das empresas que o INATEL presta serviço.

O Thiago é especialista em JavaScript e trabalha no INATEL com desenvolvimento WEB. Tem experiência de mais de 10 anos em São Paulo e hoje atua em um projeto chamado OSS da Ericcsson.

O Vale da Eletrônica é uma região que tem muita empresa tecnológica que atende clientes gigantescos lá fora e em projetos totalmente distintos, e o mais bacana é que não é em um grande centro, então temos uma certa facilidade de ter esses eventos contando com gente que tem atuação internacional e de grande porte.

O que é o GDG (Grupo de Desenvolvedores Google) em si de maneira geral?

**Carlos Drury**: “O GDG surge através de uma comunidade de desenvolvedores dentro de uma localidade, geralmente são desenvolvedores que têm interesse em difundir conhecimento ou aumentar seu network, com isso o Google libera algum material e suporte para esses grupos, onde podemos ter esses materiais para ministrar palestras e convidar alguns palestrantes. Lembrando que o GDG é aberto para todos.”

Existem outros GDG's espalhados, eu gostaria de saber como uma pessoa pode participar de um GDG específico, se existe uma formalização do seu membro e quais as desvantagens de participar do GDG como um participante comum?

**Carlos Drury**: “Uma pessoa que quer se envolver com o GDG pode primeiramente ir no site do Google de diretórios de group developers tool e lá ela consegue encontrar um GDG mais próximo. O benefício para a pessoa que participa do GDG é a forma de compartilhar conhecimento, o GDG não está aqui para ganhar dinheiro, nem promover uma pessoa e sim para ajudar projetos.”

Uma coisa que eu queria ressaltar é toda vez que eu participo de um evento eu aprendo até mais do que eu ensino ou compartilho. Toda vez que me preparo para um evento, a minha preparação é um estudo muito grande. Como vocês estão integrados em vários projetos grandes e têm a qualidade de vida do desenvolvedor em um lugar que não é em um grande centro, o crescimento demora um pouco para chegar, porém com uma vantagem que economizamos tempo (em 10 minutos estamos na academia, em cidades vizinhas estamos a vinte minutos), então se você fosse dar uma dica de carreira, independente se é de cidade grande ou em uma cidade do interior, qual seria?

**Carlos Drury**: “Minha primeira dica é a pessoa ser pró-ativa, procurar saber sobre assuntos que interessam, tecnologias que ela quer aprender. Uma segunda indiscutivelmente é o Inglês, hoje é fundamental para se comunicar com pessoas do mundo inteiro e até mesmo entender novas ferramentas disponíveis no mercado. O mais importante para mim, para conseguir o emprego que tive hoje foi o intercâmbio.”

**Thiago Coelho**: “Como tinha dito antes, eu vim de São Paulo, sou formado pela FAI, tenho cursos técnicos em Pouso Alegre, minha paixão por desenvolvimento começou no SENAI e no IMPETTECC que foi onde eu tive o primeiro contato com tecnologia em si, quando eu comecei a fazer faculdade, o mundo era Desktop e JAVA, nesse momento eu estava começando a aprender um pouco de PHP, HTML e JavaScript, na época eu enxerguei um nicho muito grande nessas tecnologias. Trabalhei na faculdade por 4 anos na parte de desenvolvimento WEB, nessa época eu decidi ir para São Paulo pelo fator oportunidade. Mas como você disse, hoje a vida no interior tem uma qualidade de vida muito melhor, por isso eu voltei. Agora em termo de carreira, uma dica que eu posso dar para as pessoas é o Inglês, no meu caso para entrar na INATEL eu deveria ter o inglês, o que me salvou foi o JavaScript, meu conhecimento é avançado em JavaScript, mas não sou muito avançado em inglês.”

Para complementar uma informação, estávamos conversando anteriormente, o inglês é o que mata, porque a gente acha que tem o inglês, mas quando está em uma chamada onde tem um indiano, um alemão e um argentino é muito complicado conversar com o pessoal. Então o inglês as vezes atrapalha a gente a conseguir algo melhor na carreira. Eu tive o mesmo teto que o Thiago teve, os clientes que eu tinha cheguei no meu limite de testar e enfrentar desafios, foi quando eu comecei a tentar coisas fora e eu não sabia inglês, o que me salvou também foi o conhecimento técnico. Enfim, Obrigado pela participação de vocês e por me receberem, sempre que puder eu vou convidar vocês para compartilhar conhecimento porque é algo muito válido.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/HmaVuyn9opU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# DevPleno Entrevista - Edy Segura

Source: blog/entrevista-com-edy-segura/index.md

Edy Segura é professor da graduação da UNIVAS e da pós-graduação do INATEL e também trabalha com desenvolvimento de software, além de ser um grande amigo meu.

Uma das coisas que nós compartilhamos é que você é uma das poucas pessoas que, assim como eu, tem uma formação completa, ou seja, começamos juntos no técnico, fizemos uma graduação e temos uma pós graduação também, mas eu gostaria de saber do início, o que foi o curso técnico para você e o que ele influenciou na sua carreira?

“Ele foi a porta de entrada, até então nós só mexíamos em casa, tentando desenvolver algo, montando e desmontando computadores e com isso eu senti que era aquilo que eu queria fazer, então pesquisei e descobri o curso técnico que nós dois fizemos, cheguei para o meu pai e pedi o que chamamos de “paitrocinio”. Eu já trabalhava com formatação e montagem de computadores mas gostaria de saber o que mais dava pra fazer com eles. Isso abriu portas para podermos desenvolver.”

Uma coisa muito interessante é que começamos a programar WEB no curso técnico, no meu caso estágio do técnico e do Edy já na graduação. Nós tocavamos um provedor de internet só com estagiário e lá conseguimos nos “destravar”, ele permitiu que entrássemos realmente na área e na graduação sem medo. Conte pra gente com que tipo de projeto você lida em linhas gerais.

“Hoje eu sou desenvolvedor FullStack Sênior no INATEL. Desenvolvemos soluções de mídia, em vários projetos de IPTV, OTT, soluções como Netflix que foram projetos legais onde trabalhamos para fora do país. Hoje trabalho com soluções para telecomunicações. Tem um misto de tecnologias bem interessante.”

Há uma diferença dos profissionais brasileiros e os estrangeiros, não só americanos, mas alemães entre outros. Você sente essa diferença? O brasileiro tem uma vantagem ou desvantagem em relação ao pessoal de fora?

“O brasileiro tem uma dinâmica, a gente se mistura, corre atrás, quando recebemos uma tarefa queremos resolver. Lá fora, o que eu vejo em alguns perfis de outros países é, por exemplo, eles pedem para fazer X, e se tem algo que saiu desse X, os profissionais não fazem ou ficam travados. Já nós, baseado nos brasileiros que eu já trabalhei, se travou em algum lugar, vamos querer resolver.”

Eu percebo isso também, faço bastante projeto fora e da pra perceber muito que o pessoal é mais objetivo, se ele é contratado para fazer X, ele não faz X+1. Se você fosse dar uma dica de carreira, analisando o que você fez, ou avaliando o que as pessoas fizeram, o que você diria a elas?

“Principalmente para nossa área é fundamental o Inglês, eu me arrependo por não ter dado importância cedo para o inglês, tive que sofrer um pouco com isso e perdi algumas oportunidades, mas é fundamental, já que é a língua internacional da tecnologia. Quando você aprende o inglês abre portas de tal maneira que você se liberta para pegar conteúdos gratuitos de qualidade na internet. Em projetos open-source, existe gente de todas as nacionalidades, então minha dica de carreira número um nessa área é o inglês.”

E sobre tecnologia, o que você acha que o pessoal deveria estar antenado para 2017?

“Eu acredito que o JavaScript com certeza para quem está começando vai ajudar muito, porque mesmo que o projeto não é focado em JavaScript o ferramentario é feito em JavaScript. Outra linguagem que está há bastante tempo e não vai sair tão cedo é o Java, é uma linguagem standard, que em algum momento você vai ter contato.”

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Cdatj4bxWx4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Javascript - ES6 Default Parameters

Source: blog/es6-default-parameters/index.md

Hoje vou falar um pouquinho de JavaScript, mais especificamente sobre como podemos fazer o parâmetro padrão para uma função e as alternativas que a gente tem atualmente com ES6 para esse tipo de atividade.

O que é um parâmetro padrão?

Vamos supor que temos uma função aplicarImposto, um valor e o quanto de imposto que queremos aplicar para esse valor:

```jsx
function aplicarImposto(valor, imposto) {
  return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))
```

Então estamos aplicando o imposto nesse valor. Agora vamos supor que eu não quero deixar o imposto ser obrigatório, deixando um valor padrão para ele:

```jsx
function aplicarImposto(valor, imposto) {
  console.log(imposto)

  return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))
```

Ao retornarmos apenas isso vai ser retornado NaN (not a number). Isso acontece porque se tentarmos checar o imposto como boolean, sabemos que ele é um falsy por ser undefined. Para corrigir isso, podemos fazer o seguinte:

```jsx
function aplicarImposto(valor, imposto) {
  Imposto = imposto || 0.07

  return valor + valor * imposto
}

console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))
```

Se rodarmos novamente, temos o 7% em cima do 200. Mas temos um outro problema. Vamos supor que eu não queira aplicar um imposto _(por algum milagre o produto não cobre imposto):_

```jsx
console.log(aplicarImposto(100, 0.1))

console.log(aplicarImposto(200))

console.log(aplicarImposto(300, 0))
```

Repare que ele retorna 321 ao invés de 300, mesmo colocando 0 de imposto. Isso acontece porque checamos **Imposto = imposto || 0.07** como falsy, e como zero é false, ele retorna o imposto. Poderíamos contornar isso checando se o tipo da variável não é uma undefined:

```jsx
Imposto = typeof imposto === 'undefined' ? 0.07 : imposto
```

Ainda podemos fazer de uma outra forma, com o ES6:

```jsx
function aplicarImpostES6(valor, imposto = 0.07) {
  return valor + valor * imposto
}

console.log(aplicarImpostoES6(100, 0.1))

console.log(aplicarImpostoES6(200))

console.log(aplicarImpostoES6(300, 0))
```

Com isso fica um pouco mais simples, porém podemos ir um além. Vamos supor que eu tenha um adicional, posso colocar esse adicional passando um valor, ou ele é um valor vezes o imposto mais porcentagem:

```jsx
function aplicarImpostES6(
  valor,
  imposto = 0.07,
  adicional = valor * (imposto + 0.1)
) {
  return valor + valor * imposto + adicional
}

console.log(aplicarImpostoES6(100, 0.1, 0))

console.log(aplicarImpostoES6(200))

console.log(aplicarImpostoES6(300, 0, 0))
```

No primeiro e último setei adicional como 0, então apenas no 200 ele vai aplicar os 10% além dos 7% já colocados antes. Essas são possibilidades interessantes de utilizar o default parameters no ES6, isso aumenta muito as possibilidades no nosso código.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/1QiaCrc-fms" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# ES7 Array Includes

Source: blog/es7-array-includes/index.md

Na dica de hoje, quero falar um pouco sobre o ES7 e uma funcionalidade que foi adicionada ao vetor. Primeiramente vou mostrar como fazemos comumente em ES6 e ES5, seguido de como podemos começar a fazer no ES7 citando sua vantagem. Vou criar um vetor:

```jsx
const nums = [1, 2, 3, 4]
```

Se quiséssemos checar se um valor está ou não dentro desse vetor, faríamos normalmente, checaríamos se o índice não é -1:

```jsx
console.log(nums.indexOf(4) != -1)
```

Com isso, quando ele não encontrar, vai ser retornado -1. O problema do indexOf falha quando tentamos buscar por NaN (not a number). Já com o includes, é possível checar e buscar dentro dele se temos o valor:

```jsx
console.log(nums.includes(NaN))
```

Com isso, conseguimos buscar o NaN de uma forma mais coesa. Outra coisa que ganhamos com isso é que o nosso código fica mais legível, já que não fazemos mais “gambiarra”, afinal estamos apenas checando se ele inclui ou não, isso de maneira funcional.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ZwJ8_kJdvmk" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Escopos e Closures - NodeJS Primeiros Passos

Source: blog/escopos-e-closures/index.md

Entender Escopos e Closures do JavaScript é muito importante para conseguir avançar no NodeJS. Primeiramente tenho um diretório criado com nossos exemplos. Vou criar um arquivo novo e mostrar um exemplo básico:

```jsx
var a = 10

console.log(a)
```

ou simplesmente:

```jsx
a = 10

console.log(a)
```

Perceba que tem apenas uma declaração de variável e o console.log para fazer a saída dela, ou seja, escrever a variável no console. Se rodarmos este script, teremos o retorno 10. Esse tipo de variável está sendo criada no escopo Global, mas o que é interessante nisso? Se eu fizer um function de incrementação a ela, terei um segundo escopo.

```jsx
var a = 10

function inc() {
  a++
}

inc()

console.log(a)
```

Esse segundo escopo consegue enxergar o escopo de fora. Podemos manipular as variáveis do lado de fora. Embora pareça vantagem, em alguns momentos pode atrapalhar o escopo principal. Logo acima, fizemos uma versão sem a variável var. Quando não colocamos o var, não travamos o escopo dela.

```jsx
var a = 10

function inc() {
  a++

  b = 11
}

inc()

console.log(a, b)
```

Se fizermos como no exemplo acima, o segundo escopo já morreu, mas mesmo assim vai sair o valor de b, pois conseguimos escrever o b fora do escopo definido a ele. Então, quando criamos arquivos JavaScript que fazem esse tipo de coisa, estamos sujando o escopo global, e isso não é algo que desejamos fazer.

**Por que?** Vamos supor que exista um outro trecho de código que dependesse desse b, então a função 'inc' estaria alterando essa variável que está no contexto global podendo alterar o comportamento do código, isso para achar bug é extremamente difícil.

**O que podemos fazer para isso não acontecer?** Uma das coisas que podemos utilizar é guardar a variável sendo válida apenas dentro do escopo, utilizando o var, por exemplo:

```jsx
function inc() {
  a++

  var b = 11
}
```

Com isso, travamos a variável apenas para o escopo definido. Temos um tipo de escopo que chamamos de Self involking function, onde temos um parenteses e colocamos uma função anônima dentro.

```jsx
;(function () {
  var a,
    b = 1

  console.log(1)
})()
```

Perceba que existe um abrir e fechar parênteses no fim, assim, estamos 'chamando' a função. Sem isso, nada acontece.

**Qual a vantagem de fazermos códigos dentro de uma Self Involking function?** Tudo que fizer lá dentro, como var a, b = 1, não estará sujando o escopo global, além disso, caso eu queira alterar o escopo dentro não consiguirá, as únicas que conseguem são as que estiverem dentro do self involking. Uma outra coisa interessante no JavaScript é que podemos fazer é a seguinte:

```jsx
;(function () {
  var a = 10

  function inc() {
    a++
  }

  inc()

  console.log(a)
})()
```

Assim o escopo é realmente isolado. Note que o escopo filho (a++) busca o valor do escopos pai. Isso nos permite fazer, por exemplo, um contador tentando imitar um comportamento de singleton, ou seja, mantendo uma função só de uma classe. Como não temos classe, podemos simular algo semelhante.

```jsx
var conta = (function() {

  var contador = 0;

  return function(){
    contador++; console.log(contador);
  }
}();

conta();

conta();

conta();
```

Pegamos essa função e jogamos dentro de uma variável.

**O que aconteceu ali?** A var 'conta' vai receber a self invoking function, que retorna automaticamente uma outra function, e como ela está dentro do escopo, é possível acessar o escopo pai. O javaScript mantém esse escopo mesmo quando a função deixou de ser executada, e então temos um comportamento parecido com o singleton. Quando uma função tem acesso a uma variável do escopo pai mesmo depois que acabou de ser executada, chamamos de Closer. Mais um exemplo:

```jsx
var conta = (function() {
  var contador = 0;

  return {
    contar = function(){
      contador++;
    },
    out: function(){
      console.log(contador);
    }
  }
}();

conta.contar();

conta.out();

conta.contar();

conta.out();
```

Complicando um pouco mais, podemos fazer essa Self Invoking function retornar um objeto com duas funções dentro. Então ele contou a primeira, deu um out, contou a segunda e deu outro out.

Podemos fazer algumas composições e organizações de código muito interessantes apenas utilizando esse tipo de construção. Confira a explicação em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Xexyc2J-Di0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Estudar 1 hora por dia ou 8 horas no sábado?

Source: blog/estudar-1-hora-por-dia-ou-8-horas-no-sabado/index.md

> Descubra a melhor rotina de estudos para programadores: consistência diária ou maratonas no fim de semana? Dicas para organizar seus estudos.

O que é melhor, estudar 1 hora por dia ou 8 horas no fim de semana?

Primeiro depende da sua disponibilidade, se você tem 8 horas no sábado, então utilize esse tempo. Porém tudo que fazemos todos os dias acabamos tendo uma certa maestria, então se você programa todo dia, acaba programando melhor depois de 7 dias, você acaba programando melhor do que se ficar 8 horas de um sábado, que a carga horária é maior e teoricamente você está mais focado.

Eu acredito nisso por alguns motivos, primeiro que você cria o hábito de estudar. Quando você consegue reservar um pouquinho por dia, mesmo que seja 20 minutos, eu ainda acredito que seja melhor que juntar tudo em um sábado ou domingo.

No DevPleno, eu gero vídeo todo dia (antigamente eu gerava uma vez por semana), e uma coisa que eu percebi é que é muito mais difícil para mim sentar e gravar um vídeo por semana do que eu gravar um vídeo por dia, isso é bizarro mas é verdade, porque se eu gravo um vídeo por dia, eu gero um hábito de gravar, já se eu faço uma vez por semana, esse hábito não é tão forte. Se pensar que vai fazer algo só no fim de semana ou em um dia só, você acaba ficando mais preguiçoso e vai postergando. Fazendo todo dia, você cria esse hábito e percebe que não consegue parar mais, já fica mais fluido e assim consegue atingir mais resultados.

É muito melhor você melhorar aos poucos do que dar saltos, por exemplos se você estudar 2 sábados seguidos, esses 5 dias que vão separar seus fins de semana vão te atrapalhar porque você vai esquecer as coisas que já estudou. Então é importante estar estudando sempre, quando você diminui o tempo, mas dilui durante sua semana melhor vai ser sua performance em aprender.

Uma coisa que eu fazia na faculdade que funcionava muito bem para mim era relembrar todo o conteúdo da aula anterior antes de assistir outra aula. Se minhas aulas eram na terça e quinta, na segunda eu relembrava as aulas da terça e na quarta o de quinta, então dos 7 dias eu já estava estudando 4 dias, isso facilitou e eu evolui muito rápido em programação, sem contar os outros dias que eu brincava um pouco.

É muito importante manter esse ritmo de estudo para gerar um hábito. Então meu conselho para você é: estude um pouco todo dia ao invés de fazer uma vez só no fim de semana. Se você pegar 20 minutos focado em um dia, é mais fácil de cumprir do que 4 ou até 8 horas seguidas, é mais fácil desfocar quando a carga horária é maior.

Por esse motivo, quando vamos estudar para prova e damos aquele gás, ele pode parecer efetivo, mas na verdade pouquíssimo do tempo que você estudou é realmente efetivo, porque o estudo que dura é a prática e o conhecimento que você faz de forma recorrente, e isso vai levar você a performar melhor.

Porém, se você não tem tempo durante a semana, ainda é melhor estudar 8 horas no sábado do que não estudar nada nunca, nem que sua frequência de estudo seja menor ainda sim é bom ter uma frequência de estudo, mas o ideal é manter uma frequência e enraíze seu dia a dia.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3eIyF4i8104" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Eu já sei! Evite uma mentalidade que não te deixa evoluir

Source: blog/eu-ja-sei-carreira/index.md

Evite uma mentalidade que não te deixa evoluir e aprender sempre.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/eNVCYzdiirk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Evite o this em JavaScript

Source: blog/evite-o-this-em-js/index.md

Venho programando cada vez mais de forma funcional e muitas coisas que víamos com preconceito começamos a entender o porque faz sentido ser da forma que é. Toda vez que você for pensar em utilizar o 'this' em JavaScript pense 10 vezes antes, porque toda vez que tem um 'this' você tem um estado interno nesse componente ou classe caso fossemos utilizar ES6.

**Qual o problema disso?** Se eu estou utilizando o 'this', naturalmente esse método já não é mais puro.

**O que é uma função pura?** É uma função que depende exclusivamente da entrada dela para ter um retorno. Então, ao utilizar o this dentro do seu componente, pense melhor, pois ele não é funcional e isso vai atrapalhar o seus testes. Por exemplo, podemos utilizar o exemplo que fizemos anteriormente do [React recursivo](https://www.devpleno.com/renderizar-estruturas-em-formato-de-arvore/), que fizemos utilizando uma functional stateless component, ou seja, um componente em React, que é uma closer. No exemplo, foi criado com uma arrow function e retorna JSX, nela eu não tenho 'this' e sim o contexto onde posso guardar algumas variáveis.

```jsx
const Node = (props) => {
  return (
    <span>
      {props.node.l && props.node.r && <span>(</span>}

      {props.node.l && <Node node={props.node.l} />}

      {props.node.v}

      {props.node.l && props.node.r && <span>)</span>}
    </span>
  )
}
```

Com isso, é possível saber qual o resultado esperado, ou seja, consigo testar esse componente de uma forma muito melhor. Prefira sempre utilizar uma closer, arrow function ou functional stateless component onde não se tem o 'this'.

Uma coisa interessante é que quando você começa a ficar mais ciente para isso, naturalmente, no caso do React, você começa a construir os componentes dessa forma e evita alguns deslizes.

Isso deixa muito mais fácil manutenção, testabilidade e etc. Principalmente se houver outro método e nesse método você usa o 'this' tem que se criar um construtor, deixando o código muito mais verboso.

Obviamente tem algumas situações que não conseguimos não utilizar, inclusive temos alguns exemplos anteriores que criamos utilizamos o 'this' dentro de um componente só e depois replicamos esse state do componente para frente através de uma passagem props.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ACZi0KRIsoc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Gere seu projeto em Express - Hands-on: Express-Generator

Source: blog/express-generator/index.md

Neste hands-on, vamos falar sobre o Express-Generator, um gerador de projetos em expressJS. Com ele conseguimos criar a base da nossa aplicação. Primeiramente, para instalar o generator, faça o seguinte comando:

```jsx
npm install -g express-generator
```

Lembrando que usando o express -h aparece uma lista com algumas opções, o que é muito legal para podermos escolher a linguagem de template que queremos utilizar, como por exemplo --ejs. O default dele é o --pug ou --jade.

É possível também adicionar um compilador de CSS. Para o exemplo ficar mais completo, vou colocar tudo no projeto. No diretório pai que quero construir minha aplicação, vou colocar:

```jsx
dica-express --ejs --git --css sass
```

E em seguida, para instalar as dependencias, vou digitar:

```jsx
yarn
```

Feito isso, se dermos um cd dica-express/ acessamos o diretório e com o ls -l podemos ver que temos todo os arquivos com detalhe. Usando o ./ podemos abrir no visual code e ver a estrutura que acabamos de criar com o express-generator:
![Visualizando o VSCode](bb74c12b-39a9-4e93-bd5c-ef7516e54765.png)

É interessante, pois a aplicação é construida no app.js e ainda cria uma boa prática, que é exportar o app, e quem vai iniciar esse app (no caso o bin/www) é quem vai definir as portas e etc.

Qual a vantagem disso? Quando formos criar testes em trend para EPI, por exemplo, podemos importar o app e rodar os testes em cima disso e não necessariamente abrir uma porta. O teste controla isso. Na pasta pub, tem o meu style.sass, que é o meu estilo configurado para SaSS.

No package.json, já tem alguns scripts para conseguirmos utilizar. Podemos, então, fazer um yarn start para abrir o projeto no browser utilizando o localhost:3000 . Perceba que ele já faz a compilação do SaSS pelo app

var sassMiddleware = require('node-sass-middleware');

Nessa linha de código, já é feito a tradução. Quando ele bate em um js, procura no SaSS e gera automaticamente os styles.css. O Express-Generator já configura tudo para nós. Quando quisermos dar esse bootstraping na aplicação nova, ele nos poupa muito trabalho. Confira a explicação em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/EykUOF7Ah2Y" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Resolvendo Expressão Aritmética do CodeFights

Source: blog/expressao-aritmetica-codefights/index.md

Hoje vamos resolver um problema disponível no Code Fights, conhecido como Expressão aritmética. É bastante simples, basicamente temos um número A, B e C e temos que descobrir se existe um operador que faça A#B = C ser verdadeira, temos algumas maneiras de fazer, a primeira que eu fiz foi a seguinte:

```jsx
function arithmeticExpression(a, b, c) {
  const ops =  ['+','-','/','*']]

  const op = (a, b, o) => {
    if(o === '+'){
      return a+b
    } else if(o === '-') {
      return a-b
    } else if(o === '/'){
      return a/b
    }

    return a*b
  }

  return ops
    .map(o =>(a, b, o)===c)
    .filter(o => o)
    .length > 0
}

console.log('2,3,5 =  ',arithmeticExpression(2,3,5))
```

Eu defini uma lista de operadores e cada uma delas representado com seu próprio operador aritmético em JavaScript, em seguida criei uma arrow function que dado a, b e a operação que eu quero, ele faça a operação em si.

Feito isso, peguei todas as operações e fiz um map que converte uma lista de operações para uma lista do resultado dessas operações aplicadas.

Também poderia ter feito de outra maneira, por exemplo, já que eu já tenho o operador, porque não tentar aplicar o operador sem utilizar o if? Uma das ideias seria algo nesse sentido:

```jsx
function arithmeticExpression(a, b, c) {
  const ops =  ['+','-','/','*']]

  const op = (a, b, o) => eval(`a ${o} b`)

  return ops
    .map(o =>(a, b, o)===c)
    .filter(o => o)
    .length > 0
}

console.log('2,3,5 =  ',arithmeticExpression(2,3,5))
```

Esse eval converte para código em JavaScritp e executa, não é um código que tem uma segurança muito grande e é até um pouco mais lento, mas é uma possibilidade.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# 3 Padrões para Iniciar com Expressões Regulares (RegExp)

Source: blog/expressoes-regulares/index.md

Hoje venho trazer três padrões de expressões regulares que você pode utilizar para checar se uma string parece com algo. O que é expressão regular? É uma forma que temos de tentar achar um padrão dentro de um texto.

Agora vou mostrar como funciona uma expressão regular utilizando três formas que são muito úteis para checar se uma string começa com alguma coisa, se ela termina com alguma coisa ou se no meio dela tem algo que pode ser alternado:

```jsx
const str1 = 'Olá DevPleno'

const pattern1 = new RegExp('^Ol')

console.log(pattern1.test(str1))
```

Toda vez que eu uso, dentro da expressão regular, o circunflexo, eu indico que estou travando o início da string. Por exemplo, se eu quero saber se a string começa com “Olá” basta criar a expressão baseada em “Ol”. Nesse nosso caso será retornado True, pois ele começa com “Ol”. O segundo padrão que vou mostrar é quando terminamos com outro padrão:

```jsx
const pattern2 = new RegExp('DevPleno$')

console.log(pattern2.test(str1))
```

Assim ele irá retornar o True novamente, pois ele termina com “DevPleno”, caso a gente modifique e coloque, por exemplo, um 's' no fim da string vai ser retornado false. Lembrando que travamos o fim da string utilizando o $.

Agora o último padrão. Imagine o seguinte: se quiséssemos encontrar um padrão no meio, utilizando ou um ou outro:

```jsx
const str1 = 'Olá oi DevPleno'

const pattern3 =  new RegExp('Olá (oi|tchau) DevPleno')

console.log(
  '====' ,
  pattern3.test('Olá Mundo')
  pattern3.test('Olá oi DevPleno')
  pattern3.test('Olá tchau DevPleno')
  pattern3.test('Olá opa DevPleno')
)
```

Perceba que temos false para o primeiro, true para o segundo, true para o terceiro e false para o último. Esses são padrões que já podemos combinar entre eles, por exemplo, começar com o “Olá” e terminar com o “DevPleno”.

Isso é algo muito poderoso. Essas são dicas para dar os primeiros passos se você nunca ouviu falar de expressão regular.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/skJE3zpaj_M" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Factory Function em JavaScript

Source: blog/factory-function/index.md

> Aprenda como usar Factory Functions em JavaScript para criar objetos sem classes. Exemplos práticos com closures e estado privado.

Hoje vou dar uma dica de JavaScript, mais especificamente como implementar o Patern Factory. Factory é bastante conhecido em Java, C# e outras linguagens com orientação a objeto. Nessas linguagens, retornamos uma instancia de uma classe, no JavaScript, poderíamos também, mas para ser mais funcional, podemos retornar um objeto de forma literal, ou seja, já em JavaScript. Vamos supor que eu tenha um Person Factory onde é passado o name:

```jsx
function personFactory(name) {
  return {
    name: name,

    type: 'person'
  }
}

console.log(personFactory('Tulio'))

console.log(personFactory('João'))
```

Quando executarmos o código, ele vai criar um objeto novo com o nome Tulio e outro com o nome João. Então uma das funcionalidades que temos para factory é criar objetos novos. Outra coisa bacana, mas bem especifico de linguagens funcionais e até da característica do JavaScript, é que temos uma closure, então acabamos conseguindo fazer um contador, por exemplo, com um count retornando uma arrow function..

```jsx
function personFactory(name) {
  let count = 0

  return {
    count () => count++,
    name: name,
    type: 'person'
  }
}

const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio)

console.log(joao)
```

O primeiro count não é o mesmo que o de dentro, o de dentro é o que retornamos para a factory. Quando eu chamo o Person Factory passando o nome 'Tulio', ele vai criar um escopo novo que vai retornar somente esses dados, e junto com ele vai travar o contexto. O count vai ter o valor 0 para o objeto Tulio e depois para o objeto João, então se fizermos o seguinte:

```jsx
const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio.count())

console.log(tulio.count())
```

Assim, conseguimos manter um estado para esse objeto porque temos uma closure sem nenhum this ou coisa desse sentido, com isso não temos problema nenhum de localização. Muita gente vai falar que não conseguimos o isolamento das variáveis, só que, na verdade, conseguimos sim utilizando closure. Vamos fazer um outro teste só que ao invés de chamar de count vou chamar de opa:

```jsx
function personFactory(name) {
  let count = 0

  return {
    opa () => count++,
    name: name,
    type: 'person'
  }
}

const tulio = personFactory('Tulio')

const joao = personFactory('João')

console.log(tulio.opa())

console.log(tulio.opa())
```

Continua funcionando normalmente, porém se eu tentar fazer um console.log(tulio.count), que teoricamente seria o count de fora, ele apareceria undefined porque está dentro da closure.

Quando retornado, ele cria uma nova interface publica para o objeto e as únicas que temos é o opa, name e type. Então podemos utilizar para gerar como se fosse uma classe de uma maneira mais funcional ou quando queremos retornar um objeto com várias propriedades que queremos deixar um ou dois dinâmicos apenas, construindo uma factory de um objeto que é um pouco mais complexo.

O factory em outras linguagens segue mais ou menos a mesma linha, a única diferença é que ele instancia realmente uma classe. Uma dica é que quando for pensar em programação funcional comece a restringir o uso do this, quanto mais longe estamos do this, mais próximo estamos da programação funcional.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/w5rzHhGx-bw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Fake API - Como testar seus projetos front-end

Source: blog/fake-api/index.md

Hoje eu trago uma dica que eu utilizo bastante com a minha equipe que é quando temos ainda uma fonte de dados para fornecer para um front-end, por exemplo, quando estamos construindo um SPA (geralmente essa aplicação precisa consumir dados) e quando não temos uma API pronta, temos uma possibilidade para trabalhar sem depender do back-end.

Nós utilizamos algumas API's falsas para trazer os dados, porque basicamente se a gente executar uma interface qualquer de um sistema, é possível baixar uma lista de clientes, pedidos etc. Se a aplicação for construída da maneira correta, vai ser só uma questão de trocar a camada que faz esse carregamento para refletir os dados reais da sua aplicação. Esse tipo de coisa é muito bom para acelerar o desenvolvimento e deixar um pouco mais flexível a parte do front-end.

Eu vou mostrar dois exemplos: primeiramente temos o Json Place Holder e também temos o SWAP, eu criei um arquivo index apenas para testarmos, a ideia é que ao invés de consultarmos os dados no nosso servidor que ainda não existe ou não está pronto, nós vamos consultar dados desses sites:

```jsx
<html>
  <body>
    <h1> testing API</h1>

    <pre id='contents'></pre>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

    <script>
      $(function()
      {$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
        $('#contents').html(JSON.stringfy(data))
      })})
    </script>
  </body>
</html>
```

Com isso ele já retorna todos os posts. Se olharmos em network, ele já foi lá, bateu no servidor deles e retornou a lista de posts. Eu posso trabalhar essa lista de posts por exemplo:

```jsx
<html>
  <body>
    <h1> testing API</h1>

    <div id='contents'></div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script>
      $(function()
      {$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
        data.forEach(function (post) {
          $('#contents').append('<h1>' + post.title + '</h1>')
        })
      })})
    </script>
  </body>
</html>
```

Lembrando que isso não é uma boa prática, mas como é apenas para intuito de aprendizado, então estou fazendo dessa forma. Perceba que ele tem um body também caso queira:

```jsx
$('#contents').append('<h2>' + post.title + '</h2>')

$('#contents').append('<div>' + post.body + '</div>')
```

Por exemplo, caso você esteja fazendo uma lista de pedidos ou clientes, pode utilizar esses dados para simular como a aplicação vai se comportar com os dados. Deve haver outras opções mas essas são duas que eu utilizo bastante, funciona muito bem e agiliza muito o desenvolvimento no front-end.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/RDqevtTeN10" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS

Source: blog/falsy-e-truthy-values/index.md

Hoje eu gostaria de falar sobre um assunto que surgiu nos comentários do vídeo sobre [short-circuit e valores padrão](https://www.devpleno.com/short-circuit-e-valores-padrao/).

Eu não comentei sobre que valores são convertidos para verdadeiro ou falso porque, na verdade, eu não sabia que eram chamados de falsy e truthy values, então quero trazer essa racionalização. O exemplo que tínhamos feito era:

```jsx
let a = null

let b = a || 'teste'
```

Quando eu passo o valor e o operador ou é atribuído o valor padrão. Existe uma série de valores que fazem ele retornar false e consequentemente ele traria o valor padrão 'teste', alguns desses valores são 'null', uma string vazia ' ', o 'false' em si, undefined, que seria o caso de uma entrada no express, outro valor considerado ou convertido para false é o Zero 'o' e um último é o NaN.

Existe uma situação, que está documentada no site da mozilla, que é o (document.all)[1]. Ele é bastante utilizado para verificar navegadores antigos, mas vamos focar nos anteriores principalmente para o Node.

Em contrapartida, temos tudo que não são valores passados anteriormente, nesse caso seria retornado o valor 'true', por exemplo:

```jsx
let c = true
```

Outros valores considerados truthy seriam por exemplo {}, que seria um objetct, um array [], um número qualquer, uma string com algo dentro 'test' , um new Date(), um número negativo, float e uma constant em JavaScript (Infinity), que também retornaria True. Por esse motivo em alguns condicionais, como por exemplo:

```jsx
{
  comments && comments.map()
}
```

Vai retornar true porque ele é um object, já que podemos iterar sobre os comments, porém se comments for undefined ou algum valor falso que a gente não consiga iterar no Map, ele não executa a instrução. Por esse motivo é interessante que a gente saiba os valores possíveis. Uma observação importante, se nós fizemos a conversão para apenas um, por exemplo:

```jsx
console.log(42 == true)
```

Irá retornar False, mas se fizermos isso:

```jsx
console.log(!!42 == true)
```

Estamos negando ele para ser true, então irá retornar true. Inicialmente ele não funcionou porque o == não faz essa conversão de tipos, já os &&, que é um operador booleano, força esse valor a ser convertido para truthy ou falsy value. Sempre for fazer comparações desse tipo, é bom fazer com === para que realmente fique idêntico e assim ele realmente verifica se os valores são os mesmos e isso evita qualquer problema no futuro.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/gQl0DCNImqw" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Falta de apoio

Source: blog/falta-de-apoio/index.md

Quando estamos em uma empresa ou até mesmo fazendo projetos por conta própria, temos ideias criativas e percebemos que, quando comunicamos essas ideias para outras pessoas, não temos o apoio necessário para realizá-las

Imagine que você começou a planejar um aplicativo e então começa a falar para as pessoas e ninguém te apoia. O que você fazer nesse momento?

A primeira coisa você precisa fazer é avaliar qual a relevância da falta de apoio por esse grupo de pessoas. Se for sua família ou amigos mais próximos, pode ser que eles estejam te protegendo de um possível fracasso, afinal, todos sabem que toda ideia corre risco de fracasso.

Tirando essa consideração, existe uma segunda vertente que é saber qual a relevância dessa pessoa para essa sua ideia. Vamos supor que você está fazendo um aplicativo para um mercado farmacêutico, se a pessoa que você perguntou for do mercado esportivo, a relevância é um pouco baixa, mesmo tendo que ouvir a todos. Algumas pessoas não têm o viés do assunto e acaba ponto uma opinião pessoal sobre esse determinado assunto.

Quando você está em uma equipe, muitas vezes você não tem apoio pelos mesmos motivos da primeira opção: seu possível fracasso. Então a falta de apoio pode ser uma falta de relevância dessa pessoa, ou seja, ela não sabe do que se trata, ou simplesmente é uma tentativa de te proteger.

Tente avaliar se você comunicou corretamente o que você quer fazer, muitas vezes você está pensando em criar um projeto, mas não ficou claro da forma que explicou.Essa falta de claridade traz uma insegurança que consequentemente gera a falta de apoio, e finalmente, mesmo que você não tenha apoio para sua ideia ou projeto novo, se você conseguir levar isso adiante sozinho, aplique, porque não adianta as pessoas te apoiarem, a única coisa que isso faz é te dar motivação, mas não vai fazer por você. Vale muito a pena ter essa postura de sempre fazer independente do apoio.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/CLtuFdthvz0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Falta tempo para realizar aquele projeto?

Source: blog/falta-de-tempo/index.md

Você sempre diz para as pessoas que não tem tempo para realizar um projeto? Quando te perguntam se conseguiu implementar aquela ideia, você responde “Sabe como é, eu não tenho tempo”…?

Se você é uma pessoa que fala sempre que não tem tempo para alguma coisa, na verdade você não tem prioridade para aquela coisa. Achei uma frase bastante interessante e se encaixa bem aqui: “se tudo dependesse de tempo, desocupado teria sucesso”.

A minha dica de hoje para você é: pegue aquele projeto que você sempre quis implementar e dedique um pouco de tempo, todos os dias, para aquele projeto. Isso é o suficiente para você perceber que ele está andando, mas que não vai te sacrificar tanto e vai fazer muita diferença no final de um mês ou no final de um ano.

Se você reclama muito que não tem tempo, avalie suas prioridades, será que você está dando prioridade para a coisa certa? Será que não está deixando um tempinho escapar assistindo televisão, por exemplo?

É engraçado pensar nisso porque eu até mudei a forma como falo atualmente. Não falo mais que não tenho tempo para realizar alguns projetos, mas sim que eles não são prioridades no momento. Uma das coisas que fiz quando tirei o DevPleno do papel é que não existiria mais essa de tempo, o DevPleno era (e ainda é) prioridade, e assim engavetei outros projetos e foquei no DevPleno.

É muito mais maduro dizer que você priorizou algum projeto em comparação a outros do que dizer que não tem tempo, porque muitas vezes você vai usar seu tempo para um hobby, por exemplo. Então é muito melhor dizer que não tem prioridade.

Essa é uma pequena reflexão sobre o tempo que eu faço diariamente sobre minha carreira, sobre minha vida. Será que eu estou empregando o tempo da maneira correta? Quanto mais eu reflito sobre isso, mais fico racional e isso é muito bom porque consigo performar mais.

Avalie se você não está perdendo tempo em algumas tarefas ou coisas que não deveria fazer. Isso é muito importante para sempre conseguir objetivos cada vez maiores.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/B9o6PCw9I58" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Férias e feriados trabalhando por meio da toptal

Source: blog/ferias-e-feriados-trabalhando-por-meio-da-toptal/index.md

Muita gente me pergunta sobre a questão das férias e dos feriados quando se trabalha por meio da Toptal. Explico tudo neste vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/qfBXpVbPkhM" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais <a href="https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog">sobre o DevReactJS aqui</a>.

![DevReact](8aa14ebd-12a1-4290-90b2-f4906f1f1811.png)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Ferramentas visuais para Flexbox

Source: blog/ferramentas-par-layouts-com-flexbox/index.md

Flexbox é uma nova forma de criar layouts em CSS. Neste hands-on, mostro algumas ferramentas que ajudam bastante na hora de ver o impacto de cada propriedade visualmente.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Puz6RHPQ_uM" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Ferramentas Visuais para Flexbox

Source: blog/ferramentas-visuais-para-flexbox/index.md

Há um tempo passei por uma situação onde precisava criar algumas coisas com Flexbox (uma nova forma de display do CSS) na parte de layout do react native (já que é feita em flexbox). Para decidir quais atributos vamos utilizar no flexbox, temos algumas ferramentas que podem nos ajudar, e é isso que eu quero mostrar.

**Por que ele foi criado?**
O flexbox veio resolver um problema grande que tínhamos de layout, afinal no CSS fazíamos algumas 'gambiarras' com float e virava uma bagunça. Ele 'flexibilizou' isso, e temos muito a ganhar com a ferramenta.

**Apresentando as Ferramentas**

Temos 3 ferramentas, que eu particularmente uso bastante, e com elas fica bem fácil criar um layout. O primeiro é o **Flexys-boxes.**

[https://the-echoplex.net/flexyboxes/](https://the-echoplex.net/flexyboxes/)

![Tela do Flexyboxes](eecb164f-2fe4-4336-af81-32e7492be37a.png)

Podemos mudar o eixo principal (flex-direction) que por padrão esta row, para outras orientações, como por exemplo, column, e a ferramenta vai simular como vai ser a apresentação.

![Eixo principal](41af88e8-59f7-42bb-862d-37974b103aa3.png)

Dentro de cada um dos Box eu consigo mudar também order, align-self e até mesmo o flex. Com isso, nos é apresentada a linha de código CSS com as propriedades sendo atualizada a cada modificação feita.

Isso é muito legal, pois podemos ir adicionando novos box e ter um preview de como vai ficar e nos ajuda bastante na hora de criar um layout com o flexbox. A segunda ferramenta é o **Interative Flexbox Generator**.

[https://loading.io/flexbox/](https://loading.io/flexbox/)

Nele, já temos um preview de alguns tipos de item, como imagens, blocos ou textos dentro do content in item.

![Visualizando o preview](b0845ffc-55a7-4186-b1a1-7841c7d8b58d.png)

Também conseguimos mudar o main direction, assim como no flexys-boxes, visualizar como queremos o Wrapping, main align, cross align, etc. Tudo isso tendo um preview de como será o layout.

E a terceira e ultima ferramenta é o visual **Guide to CSS3 flexbox.**

[https://demos.scotch.io/visual-guide-to-css3-flexb](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

[ox-flexbox-playground/demos/](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

![Resultados](3bae047d-f9c3-4f6f-958e-cb024ac769e2.png)

Nele, podemos mudar a largura de todos os Box, e também modificar dentro de cada Box, mais ou menos como nas outras duas ferramentas.

Confira mais detalhes no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Puz6RHPQ_uM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Fetch - Uma nova forma de fazer requisições HTTP

Source: blog/fetch-hands-on/index.md

Neste hands on, vamos testar o Fetch, uma alternativa que vem sendo adotada e implementada nos navegadores para substituir a forma como fazíamos requisições http no browser. Já existem módulos que implementam isso no Node, o interessante é que podemos usar a mesma API para os dois lados. Quando o navegador não tem suporte, podemos usar um Polifill.

A primeira coisa que vou fazer é adicionar como dependência no meu projeto:

```jsx
yarn add node-fetch
```

Agora precisamos importá-lo. A primeira coisa muito interessante no fetch é que ele retorna promises, com isso fica muito mais simples de trabalharmos:

```jsx
const fetch = require('node-fetch')

const url = 'http//httpbin.org.get'

fetch(url).then((res)=>{
  console.log(res)
}
```

Perceba que estou dando um fetch para mandar pegar essa url e em seguida ele retorna o res. Ele retorna os resultados e também um json, que é uma promise. Então simplesmente se eu fizer:

```jsx
fetch(url)
  .then((res) => res.json())
  .then((json) => console.log(json))
```

Ele vai dar o retorno do nosso httpbin, vamos passar algum parâmetro para saber se está alterando mesmo:

```jsx
const url = 'http//httpbin.org.get?t=1'
```

Perceba que o args dele virá com o t=1 Utilizando essas promises fica muito mais fácil de se fazer o código e assim podemos utilizar também outros módulos, como generator ou até mesmo fazer um post com essa mesma ideia:

```jsx
const urlPost = 'http//httpbin.org/post'

fetch(urlPost, { method: 'Post', body: 'tulio=faria' })
  .then((res) => res.json())
  .then((json) => console.log(json))
```

A única diferença é que passamos um método para ele. Ele pega esse post e mostra para mim, inclusive o data. O interessante é que conseguimos fazer o mesmo controle de erro:

```jsx
.catch((e)=>console.log(e))
```

Caso a URL esteja errada, ele vai retornar que não foi encontrada. Fica muito mais fácil de fazer essas requisições em HTTP. Como é uma promise, nós conseguimos fazer várias ao mesmo tempo, utilizar com generator, await async e por ai vai, fica bem mais organizado.

Eu mostrei essas duas formas, post e get, mas é simples fazer as outras formas também. Uma última coisa interessante é que, nos navegadores, ele já está disponível como window.fetch

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/z3GOk4nOf7g" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# High-order Function Filter

Source: blog/filter/index.md

Hoje vamos de continuar falando sobre as [high-order functions](https://www.devpleno.com/high-order-functions/) que podemos aplicar em um vetor em JavaScript. Nós já tínhamos feito algumas high-order functions anteriormente, nas quais mostrei o [Map](https://www.devpleno.com/map/) e o [Reduce](https://www.devpleno.com/reduce/), nesse exemplo, vou mostrar o FIlter, que também é muito interessante.

Vamos imaginar que temos um estoque que atualiza em tempo real e que por algum motivo a segunda peça está zerada. Quando eu for mostrar o carrinho eu quero que mostre apenas a soma das compras pro estoque maior que zero, para isso podemos usar a high-order function chamada de 'filter', ela filtra os itens que estão fora de estoque:

```js
const carrinho = [
  { id: 1, preco: 2, qtd: 2, estoque: 10 },
  { id: 1, preco: 3, qtd: 1, estoque: 0 }
]

const subtotal = (item) => item.preco * item.qtd

const total = carrinho
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(semEstoque)
```

Assim ele já mostra quais têm a quantidade zero. Caso ele tivesse 2 de estoque, ele também mostraria que não consegue atender porque o estoque é menor que a quantidade. Então, quando formos somar o total do carrinho, podemos usar o filter para passar uma arrow function:

```js
const total = carrinho
  .filter((item) => item.estoque >= item.qtd)
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(total)
```

Perceba que ele não considerou um dos itens, isso acontece porque as high-order function sempre retornam um novo vetor, então quando eu passo o filtro, removo o item do vetor. Então eu estou passando um novo vetor só com o item 1 para o map, que vai multiplicar o preço pela quantidade e vai passar esse novo vetor para o reduce, que vai reduzir somando os valores.

Podemos utilizar essas funções com imutabilidade porque toda vez que filtro, uso o reduce ou map, eu não estou alterando o vetor original, isso é muito importante para a programação funcional. Podemos também o seguinte:

```js
const filtroEmEstoque = (item) => item.estoque < item.qtd

const total = carrinho
  .filter(filtroEmEstoque)
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(total)
```

A vantagem de fazermos isso é que acaba ficando cada vez mais fácil de entender, além de ser facilmente testado. Tudo isso feito com funções puras, quanto mais utilizamos essas high-order functions, mais limpo ele fica.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3tu35hvhmQA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# High-order Function Find

Source: blog/find/index.md

Já falamos sobre [map](https://www.devpleno.com/map/), [reduce](https://www.devpleno.com/reduce/) e [filter](https://www.devpleno.com/filter), hoje vou mostrar uma [high-order function](https://www.devpleno.com/high-order-functions/) bem parecida chamada de find. Vamos aproveitar o exemplo do reduce:

```jsx
const carrinho = [
  { id: 1, preco: 2, qtd: 2, estoque: 10 },
  { id: 1, preco: 3, qtd: 5, estoque: 2 }
]

const subtotal = (item) => item.preço * item.qtd

const filtroEmEstoque = (item) => item.estoque * item.qtd

const soma = (soma, subtotal) => subtotal + soma

const total = carrinho.filter(filtroEmEstoque).map(subtotal).reduce(soma, 0)

const produtoId1 = (item) => item.id === 1

const produtoId1Retorno = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
```

Perceba que pedimos o produto com o id 1, mandamos procurar com o find no carrinho e buscamos esse ID 1. Uma coisa interessante e comum é fazermos como fizemos em cima, até meu filtro ser uma variável e apenas fazermos o retorno. Agora imaginem que a gente queira parametrizar ainda mais, um conceito bem legal é a seguinte:

```jsx
const idEquals = (id, item) => item.id === id

const idEquals1 = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
```

Perceba que eu fiz uma arrow function e nela estou passando o ID com o item que estou iterando. Quando for criar mais filtros, posso usar essa função de idEquals e fixar quem eu quero nesse primeiro parâmetro.

```jsx
const idEquals = (id, item) => item.id === id

const idEquals1 = idEquals.bind(null, 1)

const idEquals1 = carrinho.find(produtoId1)

console.log(produtoId1Retorno)
```

Essa nova função que eu criei sempre terá um do ID fixo, então quando eu fizer:

```jsx
console.log(carrinho.find(idEquals1)
```

Eu já sei que estou travando o ID em um, criando uma nova função a partir da função que eu já tinha. A vantagem disso é que vamos saindo de funções mais genéricas para funções mais específicas que também são fáceis de testar, deixando o código cada vez mais legível. Óbvio que esse exemplo é bem simples, mas poderíamos travar uma dependência com um banco, por exemplo.

Podemos usar o bind junto com find e qualquer outra função para travar algumas variáveis criando funções novas que travam alguns desses valores.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/q1rIICZaxTI" allowfullscreen></iframe>
</div>

o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Float e precisão

Source: blog/float-e-precisao/index.md

Hoje quero dar uma dica e também mostrar um problema que acontece em várias linguagens que é quanto à precisão de número 'quebrados' ou Float. Esse problema em específico já caiu em uma entrevista de emprego que eu fiz.

Me passaram um caso de teste e infelizmente eu não lembro exatamente como foi, mas eu vou mostrar como podemos resolver isso de uma forma interessante.

Primeiramente vou mostrar qual o problema que nós temos com precisão de números float, tanto em Node quanto em outras linguagens. Vamos supor que temos a seguinte situação:

```jsx
const num1 = 0.1

const num2 = 0.2

const num3 = num1 + num2
```

Ao darmos o console.log no num3 reparem o número que nós temos: ![Visualizando o terminal](screen.png) Essa sujeira atrapalha tudo que vamos fazer. Lembrando que essa sujeira vem da conversão para binário e esses números acabam se atrapalhando.

Qual a solução para isso? Quando temos números monetários, como preço ou algo nesse sentido, nós tentamos tratar esses números como inteiro, por exemplo, no caso de um banco que fizemos o sistema, eles precisavam de cinco casas decimais de precisão, então nós multiplicávamos isso por 100000 e em seguida dividíamos

```jsx
const precisao = 100

const num1 = parseInt(0.1 * precisao)

const num2 = parseInt(0.2 * precisao)
```

A regra é multiplicar pelo número de casas decimais que queremos e converter em seguida para inteiro, depois fazemos a conta com inteiros, já que ele não tem esse problema. Depois disso, quando formos retornar o valor, nós dividimos pela precisão:

```jsx
const num3 = ((num1 + num2) / precisao).toFixed(2)
```

Obviamente, depois precisamos fazer mais um tratamento porque ele volta a ficar sujo, então precisamos fixar, por exemplo, com 2 zeros depois da vírgula.

Quando fazemos essa conversão para inteiro, não temos mais esse problema de precisão. Um exemplo para ficar mais claro: vamos supor que você quer armazenar uma camisa que custa R\$10.99, ao invés de armazenar 10.99, armazena 1099 centavos, com um centavo não é divisível fica muito mais simples de fazermos essa conta.

Se você passar por esse problema, agora já sabe como resolver. :)

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/CnmcnS70Soc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Formas de trabalho na Toptal

Source: blog/formas-de-trabalho-por-meio-da-toptal/index.md

Você sabe quais as formas de trabalho quando se atua por meio da Toptal? Confira neste vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/BqwZploELyA" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais <a href="https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog">sobre o DevReactJS aqui</a>.

![DevReact](295333ff-cec1-4499-a626-c5101ff9c5f5.png)


---

# Formatos de troca de dados em Aplicações Web

Source: blog/formatos-de-troca-de-dados/index.md

Hoje vamos continuar falando sobre arquitetura de uma aplicação WEB, mais especificamente sobre os formatos de troca de dados entre back-end e front-end. Lembrando que o Front-end envia algo ao back-end, como por exemplo um POST em /users.

Quando fazemos isso, a requisição é formada por alguns componentes: O Header de requisição; O Body de requisição; Em seguida temos as respostas de ambos. Quando fazemos um post para o users, podemos passar estes dados em alguns formatos. O mais conhecido hoje em dia é o JSON, por exemplo:

```jsx
{
  'name' = 'tulio'
}
```

No body da requisição, vamos mandar esta string, já no Header temos que enviar a informação para o servidor de que o que estamos enviando no body é um JSON. Temos outras formas de envio como o XML:

```jsx
<user>
  <name>tulio</name>
</user>
```

_(XML era muito comum de ser utilizado antes do JSON e RESTful ficarem tão famosos)._ A forma que ainda é muito comum de enviar estas strings é o URL encoded, nela vamos mandar os dados da seguinte forma no body da requisição:

```jsx
?name = tulio

Se colocarmos mais dados:

?name = Tulio & lastName = Faria.

Outra forma é o mult-part form data, que diz mais ou menos assim:

field = name value
```

No header ele envia um separador outro camp = valor outro separador. Quando ele faz este multiform data, conseguimos mandar grandes quantidades de informação.

**Quando isso é recomendado?** Quando estamos fazendo um Upload como enviar uma foto ou vídeo, por exemplo. Estes são os formatos que temos para troca de dados enviando do front-end para o back-end. Já a resposta do servidor pode ser retornado com um JSON, um XML, os dados como textuais e também HTML, img, PDF, CSS, etc, basicamente qualquer tipo de arquivo que quisermos do servidor para o cliente, desde que o navegador suporte isso.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/BBNYp0YsE-s" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Vídeo sobre Formatos de troca de dados em Aplicações Web

Source: blog/formatos-de-troca-de-dados-em-aplicacoes-web/index.md

Neste vídeo da série Web Basic, vou explicar sobre os formatos de troca de dados entre as camadas do front-end e back-end.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/BBNYp0YsE-s" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Freelancer no exterior: 7 dicas para ter sucesso na carreira

Source: blog/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira/index.md

O trabalho de freelancer no exterior configura uma grande oportunidade para muitos profissionais que aderem a esse regime de trabalho.

No entanto, a maioria das pessoas têm pouco conhecimento sobre a preparação que envolve essa empreitada fora do Brasil.

Quer saber tudo sobre trabalho de freelancer no exterior? Acompanhe, nesse post, 7 dicas fundamentais que preparamos para você!

### 1. Conquiste uma demanda constante de trabalho

Uma questão central no dia a dia de qualquer freelancer é fidelizar certo número de clientes para, assim, manter uma demanda mais ou menos estável de trabalho. Ter sucesso em relação a isso significa conseguir estabelecer uma previsão de ganho mensal, algo muito importante para quem não tem um salário fixo.

Quando se trata de freelancer no exterior, esse ponto ganha uma centralidade ainda maior. Isso porque, morar fora demanda um esforço significativo de [planejamento financeiro](https://www.devpleno.com/carreira-preciso-de-investimento-para-minha-ideia?utm_source=blog&utm_campaign=rc_blogpost). Atrasar as contas do mês, por exemplo, a depender do país, pode ser um desconforto muito maior do que no Brasil.

Além disso, uma vida financeira estável fora do país contribui para uma adaptação sem contratempos. Isso é, você poderá desfrutar de uma vida mais confortável e de outras possibilidades que o lugar ofereça, como opções de lazer e viagens.

### 2. Incorpore hábitos de freelancers de excelência

Existem muitos hábitos virtuosos que freelancers de excelência devem incorporar a seu dia a dia. Esses hábitos dizem respeito a uma rotina de trabalho cujo foco é propiciar maior produtividade e otimizar seus ganhos.

Quanto a isso, podemos falar de uma "cartilha" de sucesso para pessoas que trabalham em casa:

- **Vista roupas diferentes daquelas que, normalmente, você veste em casa**. Passar o dia de pijama, para muitas pessoas, pode ser um convite à procrastinação. Com roupas adequadas, você estará dizendo a si mesmo que é hora do trabalho, mensagem que sua própria mente saberá identificar.
- **Estabeleça um horário fixo para desenvolver seu trabalho.** Isso contribui para que você organize melhor seu dia e não comprometa seu tempo com outros compromissos que podem ser adiados, como um médico no meio do dia que pode ser remarcado para o fim da tarde. Dessa maneira, você estará zelando pelas suas entregas e não perderá prazos.
- **Destine um ambiente de sua casa para chamar de escritório**. Não se trata de um alto investimento em um ambiente bem decorado e tudo mais que envolva um escritório bem equipado. Longe disso! Um pequeno espaço que reúna os recursos de que você precisa já é suficiente. Assim, é mais fácil você manter a organização, a privacidade e o silêncio para trabalhar.

Para um freelancer no exterior, seguir essa cartilha é ainda mais aconselhável. Isso se deve ao fato de demorarmos um pouco mais para incorporar uma rotina quando estamos longe de casa.

Nesse caso, não menospreze a necessidade de impor disciplina à realização das tarefas que você deve desenvolver ao longo do dia.

### 3. Conheça detalhes operacionais do trabalho de freelancer no exterior

Trabalhar como freelancer fora do país requer uma série de cuidados que, muitas vezes, não precisaríamos ter no Brasil. Entre essas precauções, a principal delas talvez seja emitir nota fiscal referente aos serviços prestados.

No Brasil, essa não é uma preocupação recorrente entre profissionais que aderem a esse regime de trabalho, tampouco configura uma necessidade para grande maioria dos trabalhos.

No entanto, no exterior, a depender do país, é muito importante habilitar-se para emitir nota fiscal. Muitos freelancers fora do país perdem trabalhos importantes por não se organizarem nesse sentido.

### 4. Saiba o que evitar no trabalho freelancer

Tanto no Brasil, quanto no exterior, atrasos e quebras de contrato prejudicam sua reputação. Em muitas plataformas que fazem a mediação entre freelancers e clientes, visando a entrega de determinado serviço, isso pode representar a diminuição de sua nota ou, até mesmo, a exclusão de seu perfil.

Em alguns países, pode existir uma intolerância ainda mais aguda em relação a esse problema. Por isso, seja comprometido com seus prazos e entregas a fim de obter [sucesso como freelancer](https://www.devpleno.com/metas-na-carreira-de-desenvolvedor?utm_source=blog&utm_campaign=rc_blogpost) no exterior.

### 5. Avalie se o trabalho de freelancer combina com você

Há muitas pessoas em empregos formais que jamais se arriscariam na vida de freelancer. A maior parte delas atribui essa forma de pensar às incertezas desse regime de trabalho ou à falta de disciplina para ser seu próprio chefe.

Por outro lado, se você acredita ser capaz de organizar-se para ter uma rotina mais flexível, não se apega a cargos ou a hierarquias e, ainda, sabe lidar com uma margem variável de rendimento mensal, o trabalho como freelancer é uma ótima opção.

A flexibilidade relacionada à prestação desse tipo de serviço pode trazer a possibilidade de viver em outros países. Para quem tem fluência em outras línguas, como o inglês, por exemplo, há um grande número de oportunidades no exterior.

### 6. Esteja em constante capacitação

Uma particularidade do trabalho de freelancer é a baixa adesão a cursos de capacitação. Trabalhar por conta própria leva muitos profissionais a pensar que não é preciso estar em constante atualização.

Esse é um engano que não pode ser cometido. As constantes mudanças no mercado de trabalho têm a mesma repercussão para pessoas em empregos formais e para quem presta serviço freelancer.

Nos Estados Unidos e nos países da Europa, a média de qualificação dos profissionais freelancers pode ser superior à média do Brasil. Como se sobressair diante de tamanha concorrência? [Atualize-se, esteja em constante capacitação](https://www.devpleno.com/carreira-tomar-decisoes?utm_source=blog&utm_campaign=rc_blogpost).

### 7. Conheça as especificidades de seu campo de atuação no exterior

Uma mudança para outro país sempre requer um período de adaptação. No que se refere, especificamente, a questões ligadas ao trabalho freelancer, não é diferente.

As exigências para um [desenvolvedor no Brasil](https://www.youtube.com/watch?v=vOoqJ7l2ng8&utm_source=blog&utm_campaign=rc_blogpost), por exemplo, podem ser diferentes daquelas existentes no Reino Unido. Antes de iniciar uma trajetória profissional fora do país é importante se ater a questões como essa.

Ser um freelancer no exterior pode ser uma experiência incrível. Muitas pessoas conseguem combinar a oportunidade de trabalho com uma rotina de viagens muito interessante. Ou, simplesmente, conseguem se estabelecer naquele país em que sempre sonharam viver.

Para alcançar esses objetivos, o freelancer deve priorizar a realização de uma etapa de preparação. Nesse sentido, todas as dicas apresentadas aqui não podem ser deixadas de lado.

Gostou das nossas dicas sobre ser freelancer no exterior? Siga compartilhando nossos conteúdos nas redes sociais!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Fs-extra - Filesystem com Promises e mais funcionalidades

Source: blog/fs-extra/index.md

O Fs-extra é uma forma de otimizar as funcionalidades do SF normal do node. Primeiramente, temos que executar o comando yarn sf-extra. Uma utilidade interessante do SF-extra é que, importando o outputFile, é possível criar um arquivo, um TXT, por exemplo. Ele funciona tanto com callback quanto com promises.

```jsx
fs.outputFile('file.txt', 'olá').then(() => console.log('ok'))
```

Com isso, ele irá criar um arquivo file.txt com o texto _olá_ dentro e o console nos enviará uma mensagem _ok_. Isso possibilita usarmos mais facilmente com async await, generator e por aí vai. Outra coisa interessante é que ele trás alguns métodos que não são comuns no FS como o fs.copy, que é possível copiar o arquivo diretamente por ele usando uma versão 'promiseficada'.

```jsx
fs.copy('file.txt', 'file2.txt').then(() => console.log('ok'))
```

Assim. será criado um arquivo file2.txt copiando o arquivo file.txt Este foi apenas uma pequena apresentação do FS-extra, ele permite utilizarmos mais tranquilamente essas novidades do ES6, ES7, async await e por ai vai, isso fica muito legal para usarmos com promises.

Ele também agiliza bastante, já que com generator poderíamos, por exemplo, só usar o yield fs.copy sem mesmo usar o then, e já resolveria a promise tranquilamente.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/fTf-fORqQrs" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# FS-Watch - Checando mudanças em um arquivo-diretório

Source: blog/fs-watch/index.md

Hoje eu quero mostrar duas funcionalidades que nós temos no FS padrão no Node e que podem ajudar bastante em alguns tipos de situações, como por exemplo checar se algum arquivo de log foi gerado em um diretório ou, às vezes, um arquivo de exportação.

Primeiramente temos uma pasta criada, nele vou criar um arquivo novo chamado fs-watch.js e fazer o seguinte:

```jsx
const fs = require('fs')
```

Dentro do próprio FS eu tenho duas possibilidades: o watchFile, onde eu posso checar se um arquivo está sendo alterado:

```jsx
fs.watchFile('file.txt', (curr, next) => {
  console.log(curr, next)
})
```

Basicamente ele vai mostrar para o que mudou em cada alteração do arquivo, por exemplo, se rodarmos ele, editar o arquivo file.txt e salvar, vai ser mostrado o que foi mudado. Se colocarmos apenas o size, podemos ver como era atualmente e anteriormente esse mesmo arquivo:

```jsx
fs.watchFile('file.txt', (curr, prev) => {
  console.log(curr.size, prev.size)
})
```

Assim, sempre que mudarmos o número de caracteres do arquivo, ele vai mostrar o quanto nós temos agora e o quanto tinha anteriormente.

Essa é uma das formas que temos de saber se o arquivo foi ou não alterado. O que podemos fazer com isso? Podemos, por exemplo, fazer um WatchFile simplesmente para saber se o atual é maior que o anterior, pensando em arquivos de log, geralmente colocamos no final para caso haja algum incremento no arquivo, com isso é possível saber quantos bytes foram adicionados.

Outra forma que temos de fazer é utilizando o fs.watch(). Com ele podemos checar um diretório contra mudanças:

```jsx
fs.watch('./', (changeType, file) => {
  console.log('change', changeType, file)
})
```

Ao fazermos isso, ele vai checar nesse diretório qualquer arquivo que foi alterado, assim temos bastante precisão neste tipo de operação.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/kJxdeJ55GOI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# 4 funcionalidades do Console no DevTools que você não conhece

Source: blog/funcionalidades-do-console/index.md

O console no DevTools do Chrome apresenta algumas funcionalidades que muitos utilizam raramente ou até mesmo nem sabem que existem.

Para fazer este teste, vamos criar um HTML simples com um script começando com o console.log normal.

```jsx
<html>
  <body>
    <script>console.log('este é um log')</script>
  </body>
</html>
```

Nele temos apenas uma saída e nada além disso. Agora vamos falar sobre alguns que quase não utilizamos. **#1 error**

```jsx
console.error('um erro')
```

Caso tenha algum erro no console, você pode marcá-lo de vermelho, assim, ele te mostra onde ocorreu esse erro. Quando estiver debugando o código e quiser achar algo, pode usar o console.error e ele irá pegar o stack trace também.

**#2 time** Com ele você pode checar quanto tempo foi gasto para executar uma dada função.

```jsx
console.time('nomeCounter')
console.log('este é um log')
console.log('este é um log')
console.timeEnd('nomeCounter')
```

Em muitos testes que fazemos, o console.log consome recurso da máquina pois ele tem que lidar com o IO. **#3 count**

```jsx
console.count(contador)
```

Ele conta quantas vezes uma string foi chamada ou quantas você passou em um trecho específico de código, o que é muito bom para fazer algum check.

**#4 table** Nele você pode colocar uma lista de nomes e ele monta uma tabela no auto do console. Isso facilita bastante na hora de depurar o código, pois pode mostrar os dados em forma de tabela se quiser.

```jsx
console.table([
{nome: 'Tulio'};
{nome: 'Faria'};
])
```

Todos eles, se bem utilizados, podem ajudar muito na melhora de desempenho do código ou simplesmente ajudar a depurar mais facilmente.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/v4GFy72sIR8" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Generators Functions - o que acontece por baixo dos panos

Source: blog/generators-functions/index.md

Hoje vamos continuar falando sobre Generators Functions em JavaScript.

**O que é Generator?**

É uma função que podemos pausar ou iterar sobre ela. Já falamos sobre generators no hands-on do Módulo CO, que resolve um generator, mas hoje vamos falar como ele funciona 'por baixo dos panos' e até mesmo como o CO foi construído.

A primeira coisa que temos que saber é que a sintaxe do generator é criada com uma function e um asterisco. Se fizermos isso, dizemos que é uma função generator, então é possível pausar essa função com CO, o que deixa o código mais linear:

```jsx
function* generator() {
  console.log('Entrou no generator')
}
const gen = generator()
```

Ao executar o código, perceba que não saiu nada. Primeiro precisamos iterar sobre ele para que consigamos ter um valor, para isso criamos um:

```jsx
const iteration = gen.next()
```

O next é muito comum em outras linguagens, nas quais temos algumas estruturas que são iteráveis. Enquanto você utilizar o .next significa que você ainda tem dados para iterar.

Agora executamos para ver o que acontece novamente. Perceba que aparece a mensagem ('Entrou no generator') porque ele depende do next para entrar na primeira linha.

Agora vamos fazer algo diferente:

```jsx
function* generator() {
  console.log('Entrou no generator')
  console.log('Segundo passo')
  console.log('Penultimo passo')
  console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
```

Ele executou tudo de uma vez. Agora vamos fazer o seguinte:

```jsx
yield 'outro valor'
```

Olha que interessante, ele parou agora no segundo passo, se eu der um console.log no iteration ele retorna um objeto com um value 'outro valor' dentro e um done: false. Ele parou e retornou esse valor, então ela é uma função que além de iterável, conseguimos ter vários retorno de valor. Se eu quisesse continuar executando, tenho que chamar novamente gen. next:

```jsx
function* generator() {
  console.log('Entrou no generator')
  console.log('Segundo passo')
  yield 'outro valor'
  console.log('Penultimo passo')
  console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
gen.next()
```

Perceba que ele fez os dois primeiros passos, pausou para retornar o yeild, e por fim fez os dois últimos passos, por isso é chamada de função pausavel.

No yeild, podemos por exemplo retornar uma promise:

```jsx
function* generator(){
    console.log('Entrou no generator')
    console.log('Segundo passo')
    yield new Promise((resolve, reject) => {
        setTimeout(() => resolve(10),  2000
    })
    console.log('Penultimo passo')
    console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then(() => {
    gen.next()
})
```

Imagine que estamos buscando no banco de dados alguma informação; quando fazemos isso, estamos fazendo uma operação assíncrona e ela vai demorar mais tempo porque é um IO, o yeild está simulando essa busca e o iteration.value.then está esperando essa 'busca' para retornar as próximas informações.

Então o que o CO faz é o controle de chamar o next e executar o then de forma organizada. Vamos supor que esse código fosse um function ReadFilePromise:

```jsx
function ReadFilePromise () {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(10),  2000
    )})
}
function* generator(){
    console.log('Entrou no generator')
    console.log('Segundo passo')
    const value = yield readFilePromise()
    console.log('Penultimo passo' value)
    console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then(()=>{
    gen.next()
})
```

Ao fazer isso, ele vai chamar a nossa function ReadFilePromise e esperar. Para aproximar mais do CO o value tem que vir preenchido, mas perceba que ele veio com undefined porque não aproveitamos o value no then. Então vamos aproveitar:

```jsx
const gen = generator()
const iteration = gen.next()
iteration.value.then((val) => {
  gen.next(val)
})
```

Assim vai ser retornado o penúltimo com o valor 10. O CO faz exatamente isso, conseguimos transformar facilmente em uma função genérica que resolva qualquer generator, por isso é tão legal resolver com promise, porque se fosse com readFile comum a gente não tem esse retorno de valor. Confira a dica em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/H13rOIqFVPk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Generators: O que há "por baixo dos panos"

Source: blog/generators-o-que-ha-por-baixo-dos-panos/index.md

Neste post, continuo falando sobre Generatiors em javaScript e como funciona 'por baixo dos panos'.

**O que é um Generator?**

É uma função que podemos pausar (ou iteravel). A primeira coisa que temos que saber é que a sintaxe do generator é criada com um function e um asterisco, com isso é possível pausar esta função. Se for utilizado com CO, por exemplo, é possível transforma-la em uma função mais linear.

Primeiro vamos criar uma function generator e em seguida criar uma variavel denominada gen e chamar um generator.

```jsx
function* generator() {
  console.log('entrou  no generator')
}
const gen = generator()
```

Percebam que nada aconteceu, por isso eu gosto de dizer que ela é iteravel, pois precisamos iterar sobre ele para que a gente consiga ter um valor e comece a executar.

**Como fazemos isso?**

Precisamos criar um const = iteration no código.

Lembrando que o next é bastante comum em outras linguagens como java que existe algumas estruturas que são iteraveis (no Java, Iterator). Enquanto você conseguir ter um .next significa que você ainda tem dados para iterar.

```jsx
function* generator() {
  console.log('entrou  no generator')
  console.log('segundo passo')
  console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
```

Com isso é possível entrar no Generator. Perceba que ele executou tudo de uma vez. Agora vamos fazer da seguinte forma:

```jsx
function* generator() {
  console.log('entrou  no generator')
  console.log('segundo passo')
  yield 'outro valor'
  console.log('penultimo')
  console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
```

Ao testar o código, note que ele parou em 'segundo passo'. Se dermos um console.log(iteration) ele irá retornar um value: 'outro valor' e um done: false, ou seja, é uma função que além de iteravel conseguimos ter vários retornos de valor.

**Se eu quiser continuar executando o que eu preciso fazer?**

Chamaremos novamente gen.next()

```jsx
function* generator() {
  console.log('entrou  no generator')
  console.log('segundo passo')
  yield 'outro valor'
  console.log('penultimo')
  console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
gen.next()
```

Com isso será retornado os valores em três etapas. Podemos, por exemplo, chamar uma function:

```jsx
function readFilePromise(){
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(10), 2000)
}
function* generator(){
    console.log('entrou  no generator')
    console.log('segundo passo')
    const value = yield readFilePromise()
    console.log('penultimo' value)
    console.log('fim do generator')
}
const gen = generator()
const iteration = gen.next()
iteration.value.then((val) =>{
    gen.next(val)
}
```

Afinal, o que o CO faz?

Com ele conseguimos transformar facilmente em uma função generica que resolva qualquer Generator. Por este motivo é interessante resolvermos com Promise, pois se fosse com o ReadFile comum não teríamos este retorno de valor.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/H13rOIqFVPk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Construindo um App gerenciador de séries com ReactJS

Source: blog/gerenciador-de-series-p1/index.md

Nesta nova série, vamos construir um aplicativo na prática, mais especificamente um gerenciador de séries, para você nunca mais esquecer as séries que assistiu no Netflix e também as que você tem para assistir que algum amigo te indicou. Para isso, vamos utilizar o ReactJS, a tecnologia que eu utilizo no meu dia a dia nos projetos para uma empresa americana e nos que a minha empresa desenvolve. É um potencial muito grande para o mercado conhecer e saber desenvolver projetos com o ReactJS.

Atualmente dizemos que o ReactJS é unanimidade em todos os lugares, pois podemos desenvolver para WEB, aplicativos nativos para celular, Windows… basicamente tudo. Por esse motivo, está muito em alta e é importante aprender essa biblioteca neste momento.

Hoje vamos preparar a máquina para criar o projeto, configurando como vamos armazenar esses dados para podemos fazer as quatro operações que são inserir um registro novo nesse banco, retornar esses registros do banco, atualizá-los e excluir os registros.

No fim disso, vamos fazer um primeiro projetinho para que você saiba como é um componente em React, ver funcionando e falar um pouco sobre JSX, que é a linguagem que o React usa para conseguir manipular as coisas na tela. Nas próximas aulas, vamos começar realmente a construir essa aplicação com navegação e tudo mais. Outro ponto legal é que você pode utilizar essa aplicação como portfólio.

VAMOS LÁ!

Para construir esse projeto, vamos precisar de três módulos:

```jsx
npm install -g json-server
npm install -g create-react-app
npm install -g yarn
```

O Create React App é uma forma de iniciar o projeto em React de forma muito rápida e sem 'briga', afinal, quando temos que configurar muito webpack, gastamos muito tempo porque dá muito problema, então o Create React App já é uma forma muito boa de começarmos um projeto, pois diminuímos muito o número de dependências diretas do projeto deixando ele mais limpo.

Já o Yarn é bom instalar porque o Create React-App usa muito o Yarn, que é uma NPM com mais coisas, isso faz com que o Create React-App rode mais rápido.

Depois podemos criar realmente nosso projeto:

```jsx
create-react-app primeiro-projeto
```

Perceba que ele está instalando o React, react-dom, and react-scripts. Quando criamos um projeto com o Create React-App, ele coloca dependência apenas para esses três módulos, isso deixa o projeto mais leve e fica mais claro quais dependências estamos colocando.

Com isso, ele vai criar dentro do diretório 'primeiro-projeto' e vamos acessar esse diretório utilizando cd e depois startando o yarn:

```jsx
cd primeiro-projeto/
yarn start
```

ele irá abrir o projeto: Se você conseguiu acessar, tem um projeto em React funcionando. Vou parar o servidor um pouco e fazer o seguinte:

![React iniciado](4f8e92c7-838a-4fc8-b230-fb889b56f0cd.png)

```jsx
code./
```

Ele vai abrir o Visual Studio Code com esse diretório aberto. Note que ao criar nosso primeiro projeto, ele já criou algumas coisas como o package.json e dentro dele as dependências são muito curtas.

Vamos entrar em index, já que ele é nosso ponto de entrada, ele instancia um componente chamado app e renderiza isso no elemento root que está em public/index.html.

![index reactjs](ccd333e3-f2ee-497c-afe2-4626167a0273.png)

Ele irá trocar esse div root pelo componente app. Falando em componente, o React usa componentes como sua base mínima de código.

**O que é um componente?**

Um componente no React é uma junção de um 'template' mais um pouco de comportamento e, dependendo de como organizamos isso, podemos ter mais ou menos elementos. Essa forma de utilizar componentes permite uma reutilização de códigos muito grande. Por exemplo, se abrir o app.js, você vai perceber que há um class app extends component, que é do próprio React que estamos estendendo.

Também é possível perceber que temos um método Render que renderiza algo na tela. Temos como se fosse um HTML:

![Trecho de código no vscode](90fb8664-2799-4a91-92fe-eb0229df3ce5.png)

Esse HTML, na verdade, não é HTML, é o que chamamos de JSX.

**O que é o JSX?**

É uma forma que o React achou para representar elementos ou hierarquia de elementos em JavaScript de uma maneira que pareça HTML. Com isso, ao invés de criarmos uma árvore de elementos em JavaScript, que seria algo muito complexo, eles criaram uma anotação que com algo semelhante a HTML e transforma isso depois em código quando precisa ser renderizado na tela. Quando ele percebe que tem um div, o react-dom ele transforma em HTML, mas o className continua, pois é uma palavra reservada do JavaScript.

Voltando ao App, temos algumas regrinhas: a primeira delas é que o render, que é o método responsável pelo que vai ser renderizado na tela, sempre retorna um elemento, por isso temos uma div que começa e é fechado mais abaixo. A segunda coisa importante é que quando o elemento começa com letra minúscula, ele já sabe que esse elemento é uma Tag do HTML, como por exemplo o div e o img, já se usarmos letra maiúscula ele sabe que é um componente. Outro item importante, perceba que importamos o React e o Componente, mas não os utilizamos explicitamente, eles vão ser utilizados na hora que tivermos escrevendo JSX.

Vamos criar um componente agora para você ter essa ideia de como é criado, por exemplo Ola.js.

A primeira coisa é importar o React e o componente, depois vamos criar a classe estendendo o componente, lembrando que todo componente deve ter um render, que deve retornar algo:

```jsx
import React, { Component } from 'react'

class Ola extends Component {
  render() {
    return <span>Olá DevPleno!</span>
  }
}

export default Ola
```

Esse componente está preso ali, temos que avisar o 'mundo externo' que esse componente existe para podemos utilizá-lo, por isso utilizamos o export. Agora dentro de app.js, por exemplo, podemos fazer o seguinte:

```jsx
import Ola from './Ola'
```

Podemos depois colocar no final:

```jsx
<Ola></Ola>
```

e o resultado é o seguinte:

![componente em ReactJS](4177607c-e413-43a6-bcaa-129d3a163cba.png)

Acabamos de criar um componente. Outra coisa importante é que conseguimos injetar dados, como por exemplo:

```jsx
<Ola name='Tulio' />
```

E dentro do Ola.js fazer o seguinte:

```jsx
import React, { Component } from 'react'
class Ola extends Component {
  render() {
    return <span>Olá {this.props.name}!</span>
  }
}
export default Ola
```

Essa é uma forma de enviar dados do componente pai para o filho, afinal estamos passando propriedades (ou props) para o componente.

Durante a execução do projeto que vamos fazer, utilizaremos bastante isso.

Por fim, vou mostrar como vamos criar o banco de dados que vamos utilizar com o Json Server. Vou criar dentro de src mesmo, apenas para teste, chamado db.json.

Esse db.json vai ter o seguinte formato:

```jsx
{
  "series":[
    {
    "id": 1,
    "name": "How I met your mother"
    },
    {
    "id": 2,
    "name": "Friends"
    }
  ]
}
```

Vamos salvar e dentro do diretório colocar

```jsx
json-server --watch db.json
```

Com isso, temos um resource Séries dentro do nosso localhost. Então, se acessarmos o código via browser, temos acesso ao Json preparado para podermos assumir dentro da aplicação, apenas utilizando a url.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Ckp23FEAVQ8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Grandes quantidades de dados com menos recursos

Source: blog/grandes-quantidades-de-dados-com-menos-recursos/index.md

A dica de hoje é um ponto bastante importante para performance em NodeJS. Eu já comentei um pouquinho sobre esse assunto, mas vou reforçar esse cuidado que a gente pode ter aqui para poupar memória quando estamos processando grandes quantidades de dados.

Primeiramente eu baixei um arquivo com mil registros em CSV, eu quero então processar esses arquivos. Vou criar um arquivo sem-otimizar.js:

```jsx
const fs = require('fs')
fs.readFile('data.csv', (err, contents) => {
  console.log(contentes.toString())
})
```

Uma outra abordagem seria, por exemplo:

```jsx
const fs = require('fs')
fs.readFile('data.csv', (err, contents) => {
  const lines = contents.toString().split('\\n')
  line.forEach((line) => console.log(lines.split(',')))
})
```

Agora imagine o seguinte, ao invés de colocar da forma anterior, vamos imaginar que vai ser salva a linha no banco de dados:

```jsx
const fs = require('fs')

fs.readFile('data.csv', (err, contents) => {
  const lines = contents.toString().split('\\n')
  line.forEach((line) => {
    console.log()
  })
})
```

Nosso primeiro erro é fazer essa operação sem se preocupar muito se ela retornou algo ou não. Para simular isso, vamos fazer um record e retornar uma promise:

```jsx
const saveDB = (record) => {
  return new Promise((resolve, reject) => {
    setTimeOut(resolve, Math.ceil(Math.random() * 4000))
  })
}
```

Com isso vamos simular um save no banco de dados, variando o tempo de resposta não ultrapassando 4 segundos. Agora vamos fazer algumas modificações no código readFiles:

```jsx
fs.readFile('data.csv', (err, contents) =>{
    const lines = contents.toString().split('\\n')
    line.forEach(line, i) => {
        saveDB(line).then(() => console.log(i))
    })
})
```

Perceba que ao rodar o código, ele trará os registros lentamente e fora de ordem. Estamos empilhando de forma gigantesca, gastando muita memória, porque carregamos todos os registros, fizemos um split e depois ainda mandei salvar tudo de uma vez, além do banco tendo que lidar com todas as requisições ao mesmo tempo.

**Mas qual a maneira ideal de fazer isso?**

Deixar que esses dados passem pelo aplicativo, nós resolvemos o que tem que resolver e vamos para o próximo.

Vou criar um arquivo otimizado.js para fazer da maneira correta e vou utilizar o fast-csv:

```jsx
yarn add fast-csv
```

Em seguida, no código, faremos algo um pouco diferente. Vamos importar o fast-csv e criar um readStream para a entrada e outro construtor para essa entrada:

```jsx
const fs = require('fs')
const csv = require('fast-csv')
const entrada = fs.createReadStream('data.csv')
const csvStream = csv
  .fromStream(entrada, {
    headers: true
  })
  .on('data', (data) => {
    console.log(data)
  })
```

Agora imagine que temos a mesma função de salvar, o caminho mais interessante é passar os dados, porém, enquanto não terminarmos de salvar esses dados, não manda mais nada:

```jsx
const fs = require('fs')
const csv =require('fast-csv')
const entrada = fs.createReadStream('data.csv')
const saveDB = record => {
    return new Promise((resolve, reject) =>{
        setTimeOut(resolve, Math.ceil(Math.random()*4000))
    })
}
const csvStream = csv.fromStream(entrada, {
    headers: true
}).on('data', data => {
    csvStream.pause()
    saveDB(data).then((){
        console.log(data)
        csvStream.resume
    })
})
```

Dessa maneira, utilizando o pause, não jogamos tudo na memória para processar. Resolvido o problema no banco de dados, vamos mandar mais informações.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/apAP7IrO3Fg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# HA e AS em Aplicação Web - Web Basic

Source: blog/ha-e-as/index.md

Hoje vamos continuar com mais alguns conceitos de uma Aplicação WEB que são muito importantes quando falamos de Startups, onde temos um poder de escala muito grande. São duas siglas, HA e AS:

HA = High Availabilty (alta disponibilidade);

AS = Auto Scale (Escala automática).

**O que esses conceitos querem dizer na prática?**

A alta disponibilidade quer dizer que o sistema praticamente não cai ou vai ter a disponibilidade mais alta possível, assim o sistema não fica offline nenhum segundo sequer porque caso tenhamos uma escala de clientes muito grande, se ficarmos 10 segundos fora, o prejuízo financeiro que isso vai gerar é muito grande, então a disponibilidade traz dinheiro.

Outro fator para termos essa disponibilidade é o quanto a arquitetura que planejamos tem de elasticidade para suportar o sistema. Vamos supor que eu tenho um servidor que suporte 100 usuários, se tivermos uma carga de 300 usuários, precisamos de 3 servers, então o Auto Scale é uma forma de você escalar a aplicação para termos alta disponibilidade.

Essas duas palavras combinadas é o que nós desejamos para todo o sistema, principalmente em uma startup, que o sistema fique online 100% do tempo e quando se tem picos de acesso o Auto Scaling suporte a elasticidade tanto para cima quanto para baixo, por exemplo, se eu tenho 100 usuários eu uso apenas um servidor, se subir eu aumento o numero de servidores e se baixar novamente, volto para um servidor, aumentando e diminuindo meus recursos computacionais de forma dinâmica. Isso é muito famoso usando a AMAZON, ela já tem ferramentas para esse tipo de dinamismo.

Obviamente apenas a alta disponibilidade já envolve muitas coisas, além do auto scaling, talvez precisamos de uma migração com zero down time, por exemplo, caso precisarmos aplicar uma atualização de software, que é um desafio bem grande. Essas duas siglas são muito comuns em requisitos de sistemas para startups.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-ynU21-FPFY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# HA (High Availability) e AS (Auto Scale)

Source: blog/ha-high-availability-e-as-auto-scale/index.md

Neste vídeo falo de 2 características que é a auto disponibilidade e o auto scaling, muito buscadas por startups para suportar a escalabilidade do negócio.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-ynU21-FPFY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Template HTML simples - Hands-on Handlebars

Source: blog/handlebars-template-html-simples/index.md

O Handlebars é uma forma de lidarmos com template HTML. É algo simples, mas que possui diversas opções que podemos fazer. Vou mostrar um caso bem específico dele. Podemos utilizar com NodeJS, ExpressJS, mas eu vou mostrar em conjunto com jQuery para um tipo de solução que eu venho utilizando para fazer algumas coisas mais rápidas.

Tenho aqui um arquivo dados.json que vai servir para simular o consumo de uma EPI, vamos carregar os dados via AJAX para o html:

```jsx
;[
  {
    name: 'Tulio',
    lastName: 'Faria'
  },
  {
    name: 'Vitor',
    lastName: 'Machado'
  }
]
```

No HTML, vamos importar da CDN o jQuery e o Handlebars e testar se estão carregando os nomes do Json:

```jsx
<html>
    <body>
        <div id="people">
         people
        </div>
        <script  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handleba
        rs.js/4.0.10/handlebars.amd.js"</script>
        <script>
            $function(){
                $.get('dados.json't=' +new Date().getTime(),  function(data){
                    console.log(data);
                }
            })
        </script>
    </body>
</html>
```

Se eu quiser criar uma lista com esses nomes para colocar na DIV 'people' e que seja da seguinte forma:

```jsx
<div id='people'>
  <div>
    <strong>Name: </strong>nome
    <br />
    <strong>Last Name: </strong>last
    <br />
  </div>
</div>
```

Se fossemos fazer isso com jquery teríamos que interpolar a string dentro da function, como por exemplo:

```jsx
<script>
    $function(){
            $.get('dados.json't=' +new Date().getTime(), function(data){
                $("#people").append('<div><strong>Name: </strong> '+nome)
                $("#people").append('<div><strong>Last Name: </strong> '+last)
            }
        })
</script>
```

Isso dá muito trabalho, então vamos criar uma parte do template usando Script do handlebars. Ao invés de ficar concatenando Strings, vou colar a div dentro dele e onde eu quiser colocar o nome apenas coloco {{name}}:

```jsx
<script type='text/x-handlebars-templete' id='person-templete'>
  <div>
    <strong>Name: </strong>
    {{ nome }}
    <br />
    <strong>Last Name: </strong>
    {{ lastName }}
    <br />
  </div>
</script>
```

Temos, então, que pegar essa String de dentro do script, correto? Então vamos fazer o seguinte: pegar o html que está ali dentro, que é um template do Handlebars, ele vai trocar de forma automática. Depois disso, vamos criar um template do handlebars. Lembrando que o personTemplete você pode renderizar:

```jsx
<script>
    $function(){
        $.get'dados.json't=' +new Date().getTime(), function(data){
        const templeteString = $("#person-templete").html();
        const personTemplete = Handlebars.compile(templeteString);
        const html = personTemplete({
            name: 'Tulio',
            lastName: 'Faria'
        })
        $("people").html(html);
        }
    })
</script>
```

Com isso, o template já ficou bem mais fácil, pois apenas damos um append no html. Se funcionar, podemos até tirar a div da parte de cima do nosso HTML que vai funcionar perfeitamente.

Obviamente, para uma pessoa, só daria para fazer na mão, mas imagine se quisermos colocar várias pessoas, é possível fazer isso também por meio da linguagem de script e ao invés de passar uma pessoa só, vou passar a minha lista de pessoas.

```jsx
<html>
    <body>
        <div id="people">
            Loading...
        </div>
        <script type="text/x-handlebars-templete" id="person-templete">
            {{#earch people}}
            <div>
                <strong>Name: </strong>{{nome}}<br />
                <strong>Last Name: </strong>{{lastName}}<br />
                <hr />
            </div>
            {{/each}}
        </script>

        <script  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/handleb
        ars.js/4.0.10/handlebars.amd.js"</script>

        <script>
            $function(){
                $.get('dados.json't=' +new Date().getTime(), function(data){
                    const templeteString = $("#person-templete").html();
                    const personTemplete = Handlebars.compile(templeteString);
                    const html = personTemplete({ people: data })
                    $("people").html(html);
                }
            })
        </script>
    </body>
</html>
```

Perceba que o Name e o lastName ele pega de dentro do contexto do people do dados.json. Outra coisa legal é que se eu colocar algo dentro de dados.json:

```jsx
[{
    "name": "Tulio",
    "lastName": "Faria",
    "adress": {
        "city": "Pouso Alegre"
    }
},{
    "name": "Vitor",
    "lastName": "Machado"
    "adress": {
        "city": "São Paulo"
    }
}]
```

Podemos utilizar a seguinte estrutura:

```jsx
{{#earch people}}
    <div>
        <strong>Name: </strong>{{nome}}<br />
        <strong>Last Name: </strong>{{lastName}}<br />
        <strong>City: </strong>{{adress.city}}<br />
        <hr />
    </div>
{{/each}}
```

Perceba que estamos pegando o adress e o que tem dentro dele. Isso é bem bacana, podemos fazer muitas coisas com Handlebars.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-bJl1zBJbFU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Creat-React-App

Source: blog/hands-creat-react-app/index.md

Neste Hands-on, testo um pacote para React, o Create-React-App.

Confira:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/jNJmp7iic8c" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Injeção de Dependência é bom mesmo?

Source: blog/hands-injecao-de-dependencia-e-bom-mesmo/index.md

Muitas pessoas ainda me perguntam se injeção de dependência é realmente bom. Você também ainda não está convencido sobre isso? Neste vídeo, crio um mock e um teste com injeção de dependência para te convencer ainda mais sobre a importância desta técnica.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/sCt69a0i4WE" allowfullscreen></iframe>
</div>

Não esqueça de curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Json-Server

Source: blog/hands-json-server/index.md

Todo mundo já passou pela situação onde precisava fazer um teste com front-end e precisou de uma API funcionando. Não seria interessante ter uma forma de acessar um formato de dados simples, sem muita configuração? Veja como é simples criar uma REST API para testes com o Json-server.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VrPByfYy9PE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Ler arquivo linha a linha

Source: blog/hands-ler-arquivo-linha-linha/index.md

Neste hands-on, vamos ver como conseguimos utilizar o readline em conjunto com Readable Stream para ler linhas de um arquivo texto.

**Como faremos isso?**

Primeiramente vamos importar o headline (que já faz parte do core do node) e o FS (file System). Em seguida, vamos ler o arquivo com o readable.

```jsx
const readline = require('readline')
const fs = require('fs')
const readable = sf.createReadStream('arquivo.html')
```

Vamos criar uma instancia do readline e no imput vamos passar o readable

```jsx
const rl = readline.creatInterface({
  input: readable,
  output: process.stdout
})
```

**Mas para que isso serve?**

Isso é legal, pois podemos fazer assim por exemplo: rl

```jsx
.on('line', (line) => {
    console.log('>>>', line)
})
```

Se rodarmos este código, o node vai mostrar o HTML inteiro linha a linha.

Para provar realmente que ele esta fazendo isso, podemos fazer o seguinte:

```jsx
rl.on('line', (line) => {
  console.log('>>>', line.toUpperCase())
})
```

Então o node retornará tudo em maiúsculo. Neste código, também podemos ler um CSV, bastaria eu processar a linha do CSV dentro do console.log e temos uma forma de rodar o arquivo sem precisar gastar muita memória.

**Conclusão**

Quando temos muitos dados, não é necessário jogar na memória. Utilizando essa forma, a leitura vai ser bem mais vantajosa.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/bNKi8_J4TLI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Low-db

Source: blog/hands-low-db/index.md

Neste hands-on, um módulo muito interessante para termos um banco de dados bem simples baseado em Json. Uma boa alternativa para aplicações desktop/electron e para guardar configurações de aplicações.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Zej3O0o7v4o" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Benchmark

Source: blog/hands-on-benchmark/index.md

Neste vídeo, fazemos o Benchmark entre duas funções em Javascript utilizando o Benchmark.js. A vantagem deste módulo é que ele compara as funções rodando várias vezes e fazendo a média entre as execuções.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/oV907Yl2WSA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# ChalkJS - Deixe as saídas de seu console.log coloridas e com estilo

Source: blog/hands-on-chalkjs/index.md

O ChalkJS é um módulo que basicamente permite uma saída colorida no console. Primeiramente vamos importar o módulo:

```jsx
yarn add chalk
```

Agora, no editor, vamos escrever um código. Eu criei um arquivo chalk.js e dentro dele vamos colocar o seguinte:

```jsx
const chalk = require('chalk')

console.log('DevPleno')
```

Ao mandarmos rodar o código, a resposta sairá normalmente, mas agora vamos utilizar de uma forma diferente:

```jsx
console.log(chalk.red('DevPleno'))
```

Agora, se rodarmos o código, ele vira da seguinte forma:

![Exemplo 1](ff4477ba-6ca8-499f-a918-a0e050e3c9e0.png)

O interessante é que podemos combinar as seguintes variações:

![Exemplo 2](60e315f1-a434-41cf-86f3-9594b082c0fc.png)

Ao aparecer um erro ou um alerta, por exemplo, podemos colocar um 'bgRed':

![Exemplo 3](5a2daeac-aeb9-4fb7-8562-b3ecfbd14709.png)

Uma outra coisa interessante é que podemos abrir o estilo, por exemplo:

```jsx
console.log(chalk.styles.red.open + 'Vermelho' + chalk.style.red.close)
```

![Exemplo 4](6ceda996-cfda-4626-939c-7dba360c3262.png)

Então podemos estilizar todos os console.log que tiverem entre o open e o close, isso é muito legal, pois podemos, por exemplo, printar uma mensagem em vermelho que é grande, podemos dar só um open e um close. Vale muito a pena dar uma olhada na documentação até para saber quais são os parâmetros que ele aceita.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-ikx1d25Efw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: CO

Source: blog/hands-on-co/index.md

Neste hands-on iremos usar o CO, um módulo que permite que você organize o fluxo de seu código assíncrono com generators, o que faz seu código parecer muito com código síncrono.

### Confira:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/IXsxtIZuY90" allowfullscreen></iframe>
</div>

Deixe suas sugestões e dúvidas nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), inscreva-se no canal e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Currying

Source: blog/hands-on-currying/index.md

Continuando o assunto sobre programação funcional, o assunto deste vídeo é Currying - uma técnica bastante interessante para composição de funções.

### Confira:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/rec4I8zfYjc" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Faker

Source: blog/hands-on-faker/index.md

Você já precisou gerar dados fictícios para seus projetos? As chances são que sim, e de forma bem recorrente, né? Neste vídeo, um hands-on do Faker, uma ferramenta que facilita bastante este processo de geração de dados de testes.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/bvfHQHgVzG8" allowfullscreen></iframe>
</div>

Não esqueça de deixe suas dúvidas e sugestões nos comentários, curtir o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscrever-se no canal](https://www.youtube.com/devplenocom) e cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Jest - Como utilizar a ferramenta de testes criada pelo Facebook

Source: blog/hands-on-jest/index.md

O Jest foi criado pelo Facebook com o objetivo de rodar os testes de uma maneira eficiente e com menos configurações.

Aqui eu já tenho um diretório para o nosso teste chamado jest-handson, então vou rodar:

```js
yarn add jest --dev
```

Vamos colocar como dependência de desenvolvimento, que é o que precisamos realmente e o yarn já vai resolver até mesmo a questão de criar um package.json.

Dentro do Package.json tem o código:

```jsx
{
  "devDependencies": {
  "jest": "^19.0.2"
  }
}
```

E vamos adicionar:

```jsx
{
  "devDependencies": {
    "jest": "^19.0.2"
  },
  "scripts":{
    "test": "jest"
  }
}
```

Se rodarmos o yarn test agora, ele já sabe como rodar e retornou que não temos nenhum teste para rodar.

Então vamos criar um módulo chamado modulo1 para testarmos:

```jsx
const modulo1 = {
  func1: (a) => a + 1
}
module.exports = modulo1
```

Uma coisa que acho muito interessante de fazer com os testes é criá-los juntos com a implementação, por exemplo, modulo1.js e modulo1.test.js. Até os testes ficam mais fáceis porque não é preciso navegar nos diretórios quando salvá-lo na mesma pasta do módulo. Dentro do modulo1.test, vamos importar o modulo1:

```jsx
const modulo1 = require('./modulo1')
describe('basic features', () => {
  it('should return the right value', () => {
    expect(modulo1.func1(10)).toBe(11)
  })
})
```

Perceba que o Jest tem as mesmas de outros test runners, como por exemplo, criar uma switch test e dentro usar um it. Vamos passar 10 e ele deve retornar o valor 11. Ao rodar o yarn, ele organiza dizendo que os testes deram certo. Lembrando que é sempre bom fazer o teste falhar, colocando 12, por exemplo, no lugar do 11, e rodar para ver se o teste em si está funcionando.

Agora imagine que por algum motivo no local de 'a' deve rodar uma função em específico, vamos supor uma função 2:

```jsx
const modulo1 = {
  func1: (a) => a + 1,
  func2: (a, cb) => a + cb(a)
}
module.exports = modulo1
```

Podemos fazer o seguinte para testar essa função:

```jsx
const modulo1 = require('./modulo1')
describe('basic features', () => {
  it('should return the right value', () => {
    expect(modulo1.func1(10)).toBe(11)
  })
  it('func2', () => {
    const cb = jest.fn()
    cb.mockReturnValue(1)
    expet(modulo1.func2(10, cb)).toBe(11)
  })
})
```

Não implementamos ali a função 2, mas passamos um mock para ele, ou seja, passamos uma função falsa para essa função 2 usando o jest.fn, que serve exatamente para mockar funções. Dentro do mock, queremos que ele retorne 1.

Se colocarmos um

```js
console.log(cb.mock.calls)
```

vamos conseguir até mesmo inspecionar se a chamada foi com o valor correto.

O Jest é muito interessante, pois já vem com esquema de mock, a parte de axceptions, parte de test runner e é um pouco mais rápido, principalmente quando formos testar componentes em React, e ainda tem um esquema chamado SnapShot, que tira 'fotos' dos componentes que você fizer no React para ele perceber se precisa ou não executar aquele componente. Por exemplo, renderizamos esse componente usando o JSDom e, se falhar, comparando essas fotos do componente de antes e depois, você será avisado.

Confira:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/uRTKUjeua3g" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Marked

Source: blog/hands-on-marked/index.md

Neste vídeo, faço um hands-on do módulo Marked, que tem a função de converter Markdown para HTML.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/bXOCbvSkdEg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Node JS - Request

Source: blog/hands-on-node-js-request/index.md

Nesta nova série, experimento módulos, pacotes ou ferramentas. O pacote demonstrado neste vídeo é o request, que nos permite fazer requisições HTTP de maneira simples.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/elOGmIL7qws" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: NodeJS - PM2

Source: blog/hands-on-nodejs-pm2/index.md

Você precisa deixar seu script rodando direto sem precisar iniciá-lo ou travando seu console? No hands-on deste post, vou mostrar o PM2, um gerenciador de processos que pode ser utilizado em node ou para outras linguagens e tecnologias também. Confira o vídeo-tutorial.:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/rFv_PRU2nrU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Nodemon: Monitore alterações e reinicie automaticamente seus scripts

Source: blog/hands-on-nodemon/index.md

Neste hands-on, vamos falar mais especificamente sobre o Nodemon. Primeiramente vamos instalar:

```jsx
npm install -g nodemon
```

Eu poderia instalar localmente também apenas tirando o -g, assim ele não ficaria disponível no sistema inteiro. Mas, o que o nodemon faz?

Ele permite que a gente rode um script em node e que ele fique monitorando os arquivos. Caso você altere, ele restarta automaticamente o servidor, isso é muito interessante principalmente quando vamos fazer algo com o express. Eu tenho um server.js:

```jsx
const express = require('express');

const = express();
app.get('/', function (req, res){
    console.log('>> here...' +new Date().getTime())
    res.send('Hello World');
})
app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});
```

Caso eu modifique alguma linha, por exemplo:

```jsx
console.log('Example app listening on port 3000!****')
```

Ele restarta o server e já me diz o server foi reiniciado devido a mudanças:

![Exemplo](Ex1.png)

Vamos supor que por algum motivo eu não quero alguns arquivos, então eu posso fazer ele ignorar esses arquivos. Vou fazer o teste na pasta lib:

```js
nodemon --ignore lib/ server.js
```

Assim nada que modificarmos dentro dessa pasta vai fazer o server ser restartado.

Outra coisa interessante é que se digitarmos rs e dermos um enter, conseguimos forçar um restart dele também.

Essa ferramenta ajuda bastante a agilizar o processo de desenvolvimento recarregando os arquivos sempre que precisarmos. Tem outras opções, por exemplo, conseguimos criar um arquivo de configuração, mas se usarmos apenas para restartar o servidor, já é muito útil e aumenta muito a produtividade.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/iZpvJm6Oq6I" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# PKG - Transforme seu aplicativo Node em executável

Source: blog/hands-on-pkg/index.md

> Use o PKG para compilar seu app Node.js em executável para Windows, Mac e Linux. Tutorial passo a passo com exemplos.

Neste post, faremos um hands-on do módulo PKG, que serve basicamente para transformarmos nosso aplicativo node em executável, ou seja, podemos distribuir esta aplicação sem precisar instalar o ambiente do node ou até mesmo mandar o mesmo dentro deste executável.

**Qual a vantagem disso?**

Com isso, podemos, por exemplo, efetuar demonstrações ou distribuir o software em si. Uma das ideias que vou mostrar aqui é distribuir uma aplicação em express, podendo enviar este arquivo a um cliente apenas dentro de um executável.

Primeiramente vamos instalar este módulo:

```jsx
npm install -g pkg
```

Em seguida vamos adicionar um express:

```jsx
yarn add express
```

Depois iremos no Visual Studio Code e criamos um index.js

```jsx
const express = require('express')
const app =  express()
app.get('/', (req, res)=>{
    res.send('Bem vindo ao meu-app')
)}
app.listen(3000, ()=>{
    console.log('Running meu-app')
}
```

Ele irá 'ouvir' a porta 3000 e, se tudo ocorrer bem, mostrará a mensagem "running meu-app"

Originalmente o package virá assim:

```jsx
{
    "dependencies": {
        "express": "^4.15.2"
    }
}
```

Mas iremos fazer algumas modificações. A primeira coisa que devemos fazer é adicionar o nome do nosso aplicativo ("name": "meuapp"), precisamos também dizer quem é nosso ponto de entrada ("bin": "index.js")

e a última modificação é opcional, pois nele podemos dizer se queremos mandar algum diretório além do module e qual target, ou seja, quais versões do Node quero 'empacotar' neste aplicativo.

```jsx
{
    name": "meuapp",
    "dependencies": {
        "express": "^4.15.2"
    },
    "bin": "index.js",
    "pkg":{
        "assets":[
            "view/\*\*/\*"
        ],
        "target": [
            "node7"
        ]
    }
}
```

Para executarmos isso, vamos no Node e colocamos:

```jsx
pkg . (pkg ponto)
```

Com isso, solicitamos o node para empacotar a aplicação utilizando o package.json. Isso é legal porque podemos entregar este aplicativo para o cliente, demo, trial, etc, criando um instalador.

Lembrando que nós continuamos tendo acesso total ao código. Usando o express, podemos abrir em outra máquina e ler a faixa de IP que a máquina principal está rodando e na interface mostrar para o cliente "para acessar este aplicativo use o IP xxx.xxx.xxx.xxx em uma máquina de sua rede.”

Assim, várias pessoas conseguem acessar o mesmo aplicativo. É possível utilizar o Package sem a necessidade do Package.json, por exemplo passando direto o ponto de entrada, mas eu prefiro usar o package.json para ficar documentado, deste modo não precisamos lembrar todos os parâmetros sempre.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/pZNeUcCPwEs" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Pre-Commit

Source: blog/hands-on-pre-commit/index.md

O módulo testado neste post é o Pre-Commit, que nos permite executar tarefas antes de fazer Commit em seus repositórios Git.

Assista o vídeo para entender como funciona:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Yf7uJuqjtTg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Readline

Source: blog/hands-on-readline/index.md

Neste post vamos fazer um hands-on é de um módulo padrão com o core do node: o readline.

**O que temos que fazer?**

Vamos importar primeiro o readline e instanciar um novo readline.

```jsx
const readline = require('readline')
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stout
})
```

Como o readline é um modulo que permite que lidemos com entrada e saída, podemos atrelar um readable stream no input e output padrão.

**Pra que serve isso?**

Podemos construir várias 'ferramentinhas' com o readline, a principal delas é a seguinte:

```jsx
rl.on('line', (line)==>{
    console.log('line >>', line)
})
```

E toda vez que eu digitar algo, ele irá retornar o que escrevi adicionando o que esta no line. Mas não é só isso. Podemos saber, por exemplo, se o usuário apertou Ctrl+C para fechar o prompt:

```jsx
rl.on('line', (line)==>{
    console.log('line >>', line)
})
rl.on('SIGINT', () => {
    console.log('bye'),
    rl.pause()
})
```

Ao fazer isso, quando o usuário apertar Ctrl+C ele irá escrever 'bye' e irá sair, isso acontece, pois estamos chamando o rl.pause() já que estamos pausando e não pegando mais nada do stdin.

Podemos criar várias formas de interação, vou dar mais um exemplo prático.

```js
rl.question('qual o seu nome?', (nome) => {
  console.log('prazer ', nome)
})
```

Rodando o node, a pergunta irá aparecer e ao escrever o console.log vai ser retorndado: prazer mais o nome que você digitou.

Em Java, temos algo bem semelhante. Conseguimos dar o readline no stream e ele devolve a linha digitada pelo usuário.

**Conclusão**

Apenas com o realine já é possível construir uma ferramenta simples como ler dois arquivos e fazer algo apenas utilizando puramente o rl.on e o rl.question.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ebFK_aSxo2Y" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Rimraf - Remova diretórios inteiros mesmo que eles não estejam vazios

Source: blog/hands-on-rimraf/index.md

Durante a semana fizemos diversos procedimentos em lot, e uma das coisas que nós fizemos foi apagar um diretório de maneira recursiva (pegar o diretório completo e apagar).

Seria mais ou menos o seguinte: tenho um diretório no VS Code e dentro desse diretório tivesse um dir1, dentro dele um dir2, dentro um dir3 e por aí vai. Precisamos apagar a estrutura toda.

A forma que temos para fazer isso no padrão do node usando o FS é ter que apagar um por um, mas vamos utilizar um módulo chamado Rimraf para que ele faça esse processo.

```jsx
yarn add rimraf
```

Ele é um pacote bem simples. Ao adicionar, o [Yarn](https://www.devpleno.com/hands-on-yarn/) já cria o package.json e o yarn.lock para travar as versões. Agora vamos criar um arquivo que vai apagar o diretório. Esse arquivo vai se chamar apagar.js:

```jsx
const rimraf = require('rimraf')
rimraf('dir1', function () {
  console.log('done')
})
```

Ao rodar, o código perceba que ele apagou o diretório. É muito legal utilizar isso porque o filesystem padrão do node não permite que a gente apague diretório de forma recursiva, isso é muito importante para conseguir agilizar, já que não precisamos criar nada recursivamente.

O Rimraf tem outra coisa muito interessante que é apagar diretórios que não estão vazios, temos algumas limitações como, por exemplo, se pegarmos os rmdir que só apaga diretório vazio.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/N9lvwnRZIoM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: ShellJS

Source: blog/hands-on-shelljs/index.md

Uma tarefa que faço bastante no meu dia a dia é a construção de ferramentas para transformar dados, fazer algum processamento ou até mesmo copiar montantes de dados.

Estas ferramentas quando precisam de algum comando do shell do linux, acabam restringindo a execução destas ferramentas a uma só plataforma. O ShellJS é um módulo que implementa comandos do shell do linux em Javascript multi-plataforma.

Assim seu script pode utilizar recursos do shell e ainda ser multiplataforma.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7ICR9KhNTGo" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Slack

Source: blog/hands-on-slack/index.md

Neste hands-on iremos fazer um bot simples que envia notificações utilizando o Slack.

O Slack vem sendo bastante utilizado para comunicação corporativa (eu mesmo uso bastante). E concentrar informações a respeito da sua empresa ou projeto nele é bem interessante.

[Para criar um bot no slack entre aqui.](https://my.slack.com/apps/A0F7YS25R-bots)

```jsx
const token = 'xoxb-....'
const Api = require('@slack/client').WebClient
const api = new Api(token)
const RtmClient = require('@slack/client').RtmClient
const rtm = new RtmClient(token)
const RTM_EVENTS = require('@slack/client').RTM_EVENTS
api.channels.list(function (err, info) {
  const channelId = info.channels
    .filter((channel) => channel.name === 'general')
    .map((channel) => channel.id)[0]
  rtm.on(RTM_EVENTS.MESSAGE, (msg) => {
    rtm.sendMessage(msg.text, channelId)
  })

  rtm.start()
})
```

Já pensou o que você vai criar notificar no Slack para sua equipe de forma automática?

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/dfM5ZPETIEI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on - Socket.io Parte 3

Source: blog/hands-on-socket-io-parte-3/index.md

Nesta terceira parte sobre comunicação em tempo-real com NodeJS e Socket.io, vamos começar com algo muito interessante: como podemos agrupar usuários para o envio de notificações. Também será abordado o conceito de rooms, uma maneira de segmentar os usuários. Vamos lá?!

```jsx
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res)=>{
    res.sendFile(__dirname+'/index.html')
})
io.on('connection', (socket)=>{
    console.log('New connection', socket.id)
    socket.on('msg', (msg)=>{
        console.log(msg)
        socket.broadcast.emit('msg', msg);
    })
    http.listen(3000, function(){
        console.log('listening on port 3000')
    })
}
```

Quando mandamos mensagens neste nosso código, estamos emitindo para todos os usuários. Se formos criar um jogo online, chat, temos um conceito de sala ou seção de um jogo. Agora vamos imaginar o seguinte: O usuário se conecta e a partir disso vamos pegar seu Socket, que é a representação do seu ID de usuário entre em uma sala utilizando um join, no exemplo utilizado 'contador'. O join vai dizer que o usuário quer entrar na sala, ou canal, e a partir desse momento o usuário vai receber qualquer mensagem que for disparada neste canal.

```jsx

io.on('connection', (socket)=>{
    console.log('New connection', socket.id)
    socket.on('msg', (msg)=>{
        console.log(msg)
        socket.broadcast.emit('msg', msg);
        socket.join('contador');
    })
```

Com isso podemos, por exemplo, contar quantas pessoas existem na sala e emitir uma mensagem com o número de pessoas nela de tempos em tempos.

Vamos executar um exemplo rápido onde criamos um contador, um set interval utilizando um io.to (que é uma instância do socket.io), selecionamos a sala a qual queremos mandar a mensagem e enviaremos a mensagem a cada 1 segundo.

```jsx
let.counter = 0
setInterval(() => io.to('contador'))
    io.to('contador').emit('msg', counter++)
}, 1000 )
```

Essa é uma das formas que temos de criar aplicações sem criar uma instância do socket.io para cada sala, o que seria muito trabalhoso. Além disso, ainda temos outro problema: existem situações em que temos que enviar a mensagem para todos, como no caso anterior, onde enviamos um broadcast para todos os usuários, mas também existem situações onde precisamos enviar para apenas um grupo de pessoas, então com isso podemos saber como vamos mediar, ou seja qual o alcance a mensagem terá.

Existem outras técnicas possíveis de aplicar no socket.io para ficar ainda mais rápido, como distribuir em mais máquinas por exemplo, mas isso já é um assunto avançado que vamos deixar para uma outra ocasião.

Confira o hands-on desta terceira parte também em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/dn2FujGp_xw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on: Standard

Source: blog/hands-on-standard/index.md

Neste Hands-on, vou falar sobre um módulo da NPM, o Standard, com o qual você pode padronize o código fonte JavaScript da sua equipe.

Confira os detalhes nos vídeos:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vZNbbRgIBo8" allowfullscreen></iframe>
</div>

<div className="embed-responsive embed-responsive-16by9" style={{ marginTop: 30 }}>
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ISVp1mlB1BA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Hands-on - Three.JS

Source: blog/hands-on-threejs/index.md

Hoje vamos falar um pouco sobre Three.JS, que é uma biblioteca muito interessante para conseguirmos fazer 3d no browser, melhor dizendo, ele faz essa compatibilidade para renderizar no browser com WebGL ou canvas. Para testar isso, vamos fazer um teste utilizando um cubo em 3d. No site deles, existem vários exemplos que já fizeram utilizando o three.js. Nós podemos baixar ele direto no site threejs.org ou simplesmente pegar um three.js de um CDN. Vamos criar um arquivo HTML. Quem já trabalhou com software 3d sabe que basicamente temos uma cena onde acontece as coisas em 3d :

```jsx
<html>
  <body>
    <script src='//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js'></script>
    <script>
      const scene = new THREE.Scene() const camera = new
      THREE.PerspectiveCamera(75, window.in nerWidth / window.innerHight, 0.1,
      1000) const renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      documnet.body.appenChild(renderer.domElement)
    </script>
  </body>
</html>
```

Esse parâmetro 75 é a profundidade de campo e o window é a proporção da câmera. Com isso, vamos criar uma câmera que tem uma visão cônica, igual a visão de uma câmera normal. Além disso, temos um renderizador que vai ser responsável por transformar isso em algo a ser enxergado. Por fim vamos adicionar ele dentro do body.

Ao rodar, temos uma tela preta, que é nossa scene. Agora vamos começar a adicionar alguns objetos:

```jsx
<html>
    <body>
        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js">
        </script>
        <script>
            const scene = new THREE.Scene()
            const camera = new THREE.PerspectiveCamera(75, window.in
            nerWidth / window.innerHight, 0.1, 1000)
            const renderer = new THREE.WebGLRenderer()
            renderer.setSize(window.innerWidth, window.innerHeight)
            documnet.body.appenChild(renderer.domElement)
            const box = new THREE.BoxGeometry(1,1,1)
            const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
            const cube = new THREE.Mesh( box, material )
            scene.add( cube )
            camera.position.z = 5
            const animated = () => {
                requestAnimationFrame( animate )
                renderer.render( scene, camera)
            }
            animate()
        </script>
    </body>
</html>
```

O renderizador pega uma câmera e renderiza a cena na câmera, com isso ele cria a imagem a partir disso.

O animated fica renderizando a todo momento, então caso eu faça alguma alteração no meu objeto que está dentro da cena, vai ser atualizado na tela:

```jsx
const animated = () => {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  cube.rotation.z += 0.01
  renderer.render(scene, camera)
}
```

Fazendo isso, nosso cubo começa a girar em todas as direções. Isso está sendo renderizado com o WebGL e 3D. Conseguimos carregar modelos 3d, etc.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/WMFNaTFkVyg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Yarn (uma alternativa ao gerenciador de pacotes/dependências NPM)

Source: blog/hands-on-yarn/index.md

O 'Yarn' é uma maneira que temos de agilizar a instalação de algumas dependências. É uma alternativa ao NPM, um pouco mais rápido. A primeira coisa que temos que fazer é instalar:

```jsx
npm install -g yarn
```

O Yarn usa o mesmo package.json que já temos no projeto em JavaScript e não adiciona nenhuma outra dependência, vai ser usado exatamente o mesmo repositório que o NPM já roda.

**Qual a vantagem do Yarn?** Uma das vantagens do Yarn é ele ser mais rápido, tende a resolver alguns conflitos de versão de módulo, cria um cash local para, por exemplo, caso você já tenha utilizado algum módulo qualquer com Yarn, aquela versão específica do módulo fica salva na sua máquina, caso você precise usar em outro projeto, ele utiliza do cash e não precisa baixar um novo. Além disso, ele resolve algumas coisas interessantes, por exemplo, é muito comum fazermos:

```jsx
npm install nome-do-pacote
```

Quando fazemos isso, não adicionamos o pacote no package.json e isso gera um problema, nós podemos fazer um comid e em seguida um push para o git e quebrar na máquina de um outro desenvolvedor ou servidor porque na sua máquina vai rodar e quando chegar em outro computador, vai dar erro. Uma das coisas que o Yarn resolve é exatamente isso, não temos essa distinção de save ou não, se você adicionou um pacote, ele vai entrar no package.json. Vamos fazer um teste de velocidade. Eu criei um projeto onde só tem o package.json e só adiciona o async, primeiramente vamos fazer o npm:

```jsx
npm install
```

A instalação demorou mais ou menos 6 segundos, não demorou tanto, agora vou deletar o node_modules e instalar via yarn:

```jsx
yarn
```

O tempo de instalação foi de 3.39 segundos

Uma coisa que chateia bastante em projetos grandes é a ordem em que os pacotes são instalados. No NPM, ele segue uma forma não determinística, se rodarmos duas vezes com as mesmas circunstâncias, pode acontecer dos pacotes serem instalados em uma ordem diferente, o yarn resolve isso e ainda gera um checkson para cada dependência, então ele checa realmente se você está instalando a mesma versão que você travou no projeto. Além disso, é muito simples de verificar o yarn.lock, afinal é um arquivo texto bem simples.

Também podemos colocar:

```jsx
yarn global add nome-do-pacote
```

Com isso ele deixa em escopo global.

Então ele é muito bom para aumentar a velocidade de instalação, principalmente no servidor de continuous integration porque, a medida que o servidor vai cacheando os módulos, é possível fazer o build da sua aplicação muito mais rápido.

Apenas por curiosidade, o Yarn foi desenvolvido pelo facebook em parceria com o google porque eles perceberam exatamente isso, quando você começa a escalar o projeto e aumentar o número de dependências, o npm começa a atrapalhar um pouco.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3BPfDo4arHc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# High-order Functions

Source: blog/high-order-functions/index.md

A dica de hoje é sobre High-order Functions, que são funções que recebem ou retornam funções. Nós temos alguns tipos diferentes, como por exemplo vetor, map e forEach, elas são high-order functions porque podemos passar um método que ele vai iterar dando o console.log.

```jsx
const vetor = [1, 2, 3]

vetor.forEach((item) => console.log(item))
```

Perceba que estamos passando uma função para essa outra função que é uma high-order function, a função que passamos para ela chamamos de firt order function. Com ela conseguimos construir nossas próprias funções high-order. Por exemplo, caso queiramos fazer uma função mathOperator, que pega dois termos e retorna os números, e uma função que faz a operação que eu quero:

```jsx
function mathOrder(num1, num2, op) {
  return op(num1, num2)
}

console.log(mathOperator(1, 2, (num1, num2) => num1 + num2))
```

Então eu quis que essa high-order function chame o num1 e num2 e retorne a soma das duas.

Não necessariamente as high-order functions precisam ser puras, a única regra que temos é que ela recebe ou retorna uma função. No exemplo que fizemos, o op naquele momento é uma função. É importante lembrar que em JavaScript funções podem ser colocadas dentro de variáveis, por isso é possível criar high-order functions, uma coisa que não é tão simples de se fazer em Java por exemplo.

Lembrando que eu utilizei arrow function para facilitar mas eu poderia também fazer a operação:

```jsx
function mathOrder(num1, num2, op) {
  return op(num1, num2)
}
function operadorMult(num1, num2) {
  return (
    num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1num1\ *
    num2
  )
}
console.log(mathOperator(1, 2, (num1, num2) => num1 + num2))
console.log(mathOperator(1, 2, operadorMult))
```

High-order functions é um conceito muito importante para podermos injetar comportamento em uma função, esse é o grande ponto delas. Podemos compor funções que são muito mais simples, e isso é muito importante não só em programação funcional mas principalmente para simplificar as funções.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/yST5SzsFXZI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Horário de trabalho na toptal

Source: blog/horario-de-trabalho-na-toptal/index.md

Você também tem dúvida sobre como é o horário de trabalho quando se trabalha remotamente? Descubra como é na Toptal.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/FGIZLWcLhsc" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais

[![Curso DevReactJS](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Gerando HTML estáticos a partir de templates – EJS

Source: blog/html-estatico-com-templates-ejs/index.md

Hoje quero mostrar como podemos utilizar os Templates Engines, que já temos no Express como EJS, PUG, etc, para gerar arquivos HTML estáticos. Com esse processo, conseguimos fazer um gerador de site estático tranquilamente. Obviamente já existem alguns sistemas que fazem isso, mas quero mostrar que também é possível utilizando somente essas linguagens de template. Eu já tenho um diretório criado, vou utilizar o EJS por ser mais parecido com JavaScript e fica mais fácil de utilizar:

```jsx
yarn add ejs
```

Feito isso, vamos criar um arquivo novo index.js. A ideia é criar um template de teste. Vamos supor que ele tenha o seguinte:

```jsx
<h1>Teste</h1>
<p>Teste de paragrafo</p>
```

Então, se eu colocar uma variável, como uma lista, eu posso fazer essa lista baseado em valores que eu mandei do meu script. A maneira mais comum de se utilizar o EJS é plugado-o dentro do express, porém nós também conseguimos utilizá-lo de forma independente, assim podemos simplesmente importar o EJS e, de alguma forma, dar um render nele:

```jsx
const ejs = require('ejs')
const html = ejs.render('<h1><%= teste %></h1> ', { teste: 1234 })
console.log(html)
```

Se rodarmos isso, nós temos o nosso html. Nós processamos o html dentro dele, que era uma variável e gerou uma string a partir disso. Isso é bastante poderoso porque se formos pensar, as páginas de um site estático nada mais são do que strings processadas. Vamos fazer outro teste:

```jsx
const ejs = require('ejs')
ejs.renderFile(
  './templete.ejs',
  {
    items: ['Tulio', 'Faria']
  },
  (err, html) => {
    console.log(html)
  }
)
```

Então estamos passando uma lista para items para ele jogar dentro do template, ao final disso, retorna um callback. Como estamos utilizando o items, podemos fazer o seguinte no nosso arquivo template.ejs:

```jsx
<h1>Teste</h1>
<p>Teste de paragrafo</p>
<ul>
    <% items.forEach(i => {%>
    <li><%= i %></li>
    <% }) %>
</ul>
```

Se rodarmos novamente o script podemos ver ele processando isso:

![Visualizando o terminal](05a4fe0f-9a7f-4375-ae8b-d333bc7a6714.png)

Perceba que é muito melhor gerar dessa forma porque deixamos o template isolado. Podemos também importar, por exemplo, o file system e escrever o código em um novo html:

```jsx
const ejs = require('ejs')
const fs = require('fs')
ejs.renderFile(
  './templete.ejs',
  {
    items: ['Tulio', 'Faria']
  },
  (err, html) => {
    fs.writeFile('templete.html', html, (err) => {
      console.log('ok')
    })
    console.log(html)
  }
)
```

Ao rodar, ele gerará um template.html com o código. Caso você queira gerar seu site estático no gitHub, por exemplo, você pode criar alguns templates, configurar um script que manda essas informações para ele, como um json de configuração, depois disso criar um outro script que chama o ghpages, que publica esse site.

Essas são algumas dicas para utilizar no portfólio, sem usar um módulo ou um sistema já existente. Deixe suas dúvidas e sugestões nos comentários.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/l09qRMEq_7U" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Immutability e ImmutableJS

Source: blog/immutability-e-immutablejs/index.md

Neste hands-on/dica, falo um pouco da importância da imutabilidade em programação funcional em Javascript. Além disso, apresento o módulo Immutable que nos ajuda a lidar com imutabilidade.

Apenas para simplificar:

- Imutabilidade / Immutability: nome da técnica

- Imutável / Immutable: nome do módulo e qualidade da variável que não é alterada ao longo do tempo (ex: variável imutável)

## Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ZgAmnOHR7u8" allowFullScreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Injeção de dependência - Aumente a testabilidade do seu código

Source: blog/injecao-de-dependencia/index.md

Pode parecer besteira, mas eu sempre ouvia sobre injeção de dependência. porém nunca tinha refletido tanto sobre ela. Quando passei a testar mais o meu código com teste unitário, comecei a usar essa técnica e percebi que fez muita diferença. Para contextualizar, vamos supor que temos o código:

```jsx
const model = require('./model1')

function findAll() {
  return model.find({})
}
```

Desconsiderando a parte assíncrona, temos, por exemplo, uma função que depende do model que está em um contexto externo. Quando estamos no ambiente de testes, perdemos totalmente a visibilidade de onde ele está, isso deixa extremamente complicado para realizarmos um teste de forma unitária já que dependemos do ambiente para ele rodar.

No contexto do Node, quando vamos testar, temos apenas o escopo da função, não temos o escopo de onde ele está sendo executado, inclusive se rodarmos com mocka, o contexto será do mocka e não um global.

Se passarmos ele para dependência, passando como model, na hora de chamar essa função temos que injetar esse model

```jsx
function findAll(model) {
  return model.find({})
}
const modelAA = require('./model1')
findAll(modelAA)
```

Estou simplificando bastante apenas para ilustrar, já que até assim seria ruim. Precisaríamos de uma forma melhor de organizar, mas mesmo assim temos uma visibilidade maior do código. Eu sei que findAll depende do model, coisa que eu não sabia antes, pois na função eu não sabia que ela dependia de model. Então, quando fazemos injeção de dependência, estamos dando uma documentação 'a mais', afinal ele é um código que se auto descreve. Ele também fica um pouco mais puro, pois dependemos apenas dos parâmetros para fazer o que queremos, já que não há dependência externa.

Vamos fazer o seguinte teste: imagine que temos um código que valida, e essa função vai haver um if que se for maior que 100 ela mostrará ERROR e retorna false:

```jsx
function valina(um) {
  if (num > 100) {
    alert('erro')
    return false
  }
  return true
}
```

Se rodarmos isso no node, teremos um erro, já que o alert não está no contexto do Node, pois o alert é um window.alert que faz parte do browser. Então, mesmo que eu chame ele direto no navegador, em qualquer lugar que eu chamar vai ser como um global, ou seja, ele pega de qualquer lugar que executarmos no browser, mas quando formos fazer um teste unitário, não vai funcionar porque ele não tem o alert, isso é um problema. Outro problema é que o alert não está sendo usado mais por exemplo. Então como trocamos ele? Isso gera muita dependência.

O que podemos fazer?

Se transformarmos ele em uma injeção de dependência, podemos passar o alert. Quando formos utilizar no browser, manda um window.alert e quando formos testar nossa função, se ela retornar false e erro caso o número for maior que 100.

```jsx
function valina(um) {
  if (num > 100) {
    alert('erro')
    return false
  }
  return true
}

const assert = require('assert')
describe('validations', () => {
  it('should return false and an error if num gt 100', () => {
    const fakeAlert = (msg) => {
      assert.equal(msg, 'erro')
    }
    const returnedValue = valida(fakeAlert, 101)
    assert.equal(returnedValue, false)
  })
})
```

Perceba que adicionamos um fakeAlert, que é uma função, e dentro dela quero checar se a mensagem que vai chamar é igual a mensagem que eu espero. Para fazer isso, usamos o const assert, que é do próprio node, ele verifica se a msg é igual a erro e quando formos chamar o valida, vamos passar esse fake Alert. Fizemos dois testes. Para o primeiro, passar os dois assert tem que valer, lembrando que vamos rodar ele com mocha.

Vamos supor que agora você vai dar manutenção neste código e a mensagem mudou, então vamos apenas no alert e corrigimos que está tudo certo.

O que eu quero ressaltar é o seguinte: fica mais claro para nós o que o valida faz, assim que expomos as dependências dele, o nosso código começa a criar essa auto documentação, o que gera uma qualidade de código muito grande.

Confira a explicação em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/L_Hp97n2als" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Injeção de Dependência em ReactJS

Source: blog/injecao-de-dependencia-em-reactjs/index.md

Como estávamos comentando anteriormente sobre [injeção de dependência](https://www.devpleno.com/vantagens-da-injecao-de-depencia/), achei relevante mostrar como podemos fazer Injeção de Dependência em ReactJS.

Para ilustrar, temos o exemplo abaixo, que quando carregamos o componente, utilizamos o axios para fazer uma requisição http e pegar o IP da origem e seta no estado atual do componente mostrando o IP na tela.

```jsx
import React, { Component } from 'react'
import axios from 'axios'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ip: ' '
    }
  }
  componentDiMount() {
    const url = 'https://httpbin.org/ip'
    axios.get(url).then((res) => {
      this.setState({
        ip: res.data.origin
      })
    })
  }
  render() {
    return <div>Your IP adress is: {this.state.ip}</div>
  }
}
```

O problema aqui é que se fossemos testar esse app, teríamos que contornar o axios de alguma forma,pois estamos importando ele direto. Assim, o componente está muito dependente do axios. Se quisermos rodar o componente ou testar com o Indesign, por exemplo, não vai ser possível.

O que podemos fazer?

Uma coisa que às vezes esquecemos com o ReactJS: ele tem um ponto de montagem. Temos um index.js que faz a montagem inicial.

```jsx
import React from 'react'
import reactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
    <App />
    document.getElementById('root')
)
```

Perceba que temos o App e ele faz a montagem em si do html.

Com isso, podemos simplesmente passar a dependência do código anterior para o nosso index.js, já que podemos colocá-las em lugares onde não vamos testar códigos.

Então, ao invés de importarmos o axios no nosso app.js, por exemplo, vamos colocar no ponto de montagem

```jsx
app.js:

import React, { Component } from 'react'


index.js:


import React from 'react'
import reactDOM from 'react-dom'
import App from './App'
//dependencias
import axios from 'axios'
```

Como o index monta a aplicação React no HTML, vou trazer o axios. Podemos fazer uma lista de dependências para injetar no componente.

Qual a diferença?

Ao invés de utilizar o axios direto, vou passar essa dependência via props:

```jsx
ReactDOM.render(
    <App  axios={axios}/>
    document.getElementById('root')
)
```

O App vai ter acesso a propriedade axios, que é o que eu importei.

Podemos, então, ir no componente em si e fazer o seguinte:

```jsx
componentDiMount(){
    const url = 'https://httpbin.org/ip'
    this.props.axios.get(url)
    .then((res)=>{
        this.setState({
            ip: res.data.origin
        })
    })
}
```

E fazemos a requisição normal. Se quiser fazer um teste unitário desse componente, posso fazer tranquilamente porque, quando for renderizar este componente para testar, eu crio um mock ou um axios fake e vejo se esse componente chama o axios falso, da mesma forma que fizemos anteriormente.

O mais importante aqui é lembrarmos que o props é uma forma que temos de injetar dependência, por isso que muitas vezes construímos aplicação com o estado todo da aplicação em um app e passamos as funções para os próximos componentes, assim ele pode ser executado em qualquer ambiente.

Em toda a arquitetura, seja ela em React, em Node, etc, vai ter um lugar com uma cola (ou um ponto de montagem) e eu acredito que estes pontos são interessantes para analisar como potenciais locais de adicionar dependências.

Confira o vídeo-tutorial:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/tQ80uAP_B_M" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Mantenha sua Integridade - Dica de carreira DevPleno

Source: blog/integridade/index.md

Você sabe o que é integridade?

Na faculdade, eu tinha um professor que, pra mim, era um exemplo de integridade e honestidade. No último ano, eu estava fazendo meu TCC e uma parte seria corrigida por esse professor. Enviei meu trabalho por e-mail, porém sem essa parte que seria corrigida por ele, já não tive tempo de fazer. Quando recebeu, ele me respondeu o e-mail perguntando se eu havia esquecido de anexar alguma parte, pois estava incompleto.

Nesse momento, uma voz na minha cabeça ficava me dizendo para usar essa brecha e enviar depois que estivesse tudo certo, mas o detalhe é que existe algo que eu acredito cada vez mais e sempre fui criado com essa mentalidade, e naquele momento eu pensei "nossa, por que eu vou enganá-lo se eu construí minha vida baseado em verdades?" (ainda mais com um professor que é muito honesto). Acabei explicando a ele o que realmente tinha ocorrido.

Quando você é íntegro, você acaba impactando outras pessoas, esse professor sempre foi íntegro comigo então no momento em que tive alguma chance de não ser com ele, eu pensei muito nisso. Imagine o efeito cascata que isso tem, a integridade gera integridade, assim como generosidade gera generosidade. A dica de carreira de hoje é: SEJA ÍNTEGRO, afinal você tem que proteger seu nome, pois ele é sua carreira.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/sJ2M_nkNRnw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Preciso de investimento para minha ideia?

Source: blog/investimento-para-executar-ideias/index.md

Hoje eu gostaria de falar com vocês sobre como executar uma ideia de forma mais efetiva. Uma coisa que eu vejo com recorrência é que as pessoas costumam ter boas ideias, começam a montar um projeto, mas quando chega em uma certa parte, principalmente quando fica ligada nesse mundo de startups, logo pensam que só conseguirão executar com o auxílio de um investidor.

Na verdade, você não precisa de um investidor para colocar sua ideia no ar, precisa acreditar na sua ideia! Hoje eu acredito muito mais nas minhas ideias do que antes; contrato pessoas para trabalhar em meus projetos e tenho um caminho definido para trilhar para conseguir pelo menos fazer as primeiras vendas e aí sim, se eu precisar escalar isso ou pensar em uma escala que eu precise de um parceiro ou investidor mais forte, eu procuro esse tipo de ajuda, mas o grande detalhe é não deixar que seu projeto morra por falta de investimento, invista você mesmo! Quando você investe na sua ideia, é um ponto a mais para o investidor vir e pensar "esse cara está levando a sério, afinal você não depende de alguém externo para executar.” Isso é muito importante porque hoje há muitas startups na cena e está todo mundo em busca de investimento, mas ninguém querendo investir na própria ideia.

Uma coisa que eu pensei muito, isso aconteceu comigo, eu já tive investimento em uma empresa minha, na verdade eu não tive a ideia, mas eu entrei como CTO e era responsável pela área técnica e uma das coisa que percebi é que a gente perde um pouco da noção de como usar o dinheiro quando ele entra muito "fácil”. Pelo menos quando você começa com um investimento próprio, tem uma visão diferente.

Enfim, Se você não acredita na sua ideia, vai ser difícil encontrar alguém que acredite. Muitas vezes a ideia que vai te dar dinheiro é a que você realmente acredita e coloca seu coração.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7fk_Zm8d0W0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# JavaScript: Apply

Source: blog/javascript-apply/index.md

Hoje vou falar um pouco sobre o Apply em JavaScript e mostrar um exemplo de como podemos utilizá-lo para calcular o menor e o maior valor em um conjunto de dados. Primeiramente vamos fazer um teste: criar uma função e se chamar a funTeste junto com o this, virá o contexto de onde a função está sendo executada.

```jsx
function funTeste(at1, at2) {
  console.log(this, at1, at2)
}
funTeste(1, 2)
```

Porém, ao invés defazer funTeste e executar, podemos fazer um apply, e dentro dele podemos fazer, por exemplo:

```jsx
funTeste.apply(1, [2, 3])
```

O primeiro atributo do apply (um), é o que eu quero para o this, ou seja, em qual contexto eu quero que essa função seja executada, e o segundo atributo são os valores que eu quero dar para os parâmetros que a função espera.

Se executarmos novamente, o resultado virá: [Number: 1] 2 3, referente ao número 1, e o 2 e 3 referentes aos atributos 1 e 2.

Mais alguns testes seguindo essa ideia:

```jsx
function funTeste(at1, at2) {
  console.log(this, at1, at2)
}
console.log(Math.min(98, 78, 50))
```

Ao executar o número retornado, será 50, pois 50 é o menor valor daquele conjunto de dados.

**O interessante no apply**

Note que não estamos passando um vetor de valores e sim com vírgula, como se fossem vários atributos. Podemos utilizar o apply para que possamos passar um vetor onde tiver uma função que recebe uma lista de parâmetros.

Exemplo: Vamos passar um vetor em que quero descobrir o menor dos valores. A forma mais fácil é utilizando o apply.

```jsx
function funTeste(at1, at2) {
  console.log(this, at1, at2)
}
const vetor1 = [89, 70, 50, 48]
console.log(Math.min.apply(Math, vetor1))
```

O Math é o meu this, pois o que estiver dentro dele como contexto está ótimo.

Podemos fazer a mesma coisa com o valor máximo apenas trocando o min por max:

```jsx
console.log(Math.max.apply(Math, vetor1))
```

Com o apply, podemos adaptar como vamos executar a função e também é uma forma de manipular em qual contexto essa função está sendo executada, assim como o bind. Ela é muito útil quando precisamos converter ou passar atributos para a função como vetor ao invés de individualmente.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/_IiC50zIUlY" allowfullscreen></iframe>
</div>

Deixe seu comentário. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Javascript: Streams (P-1: Readable Streams)

Source: blog/javascript-streams-p-1-readable-streams/index.md

Neste vídeo, um assunto bastante interessante para ser utilizado no dia-a-dia: Streams. A primeira parte fala sobre readable streams ou streams de leitura.

ERRA:

O evento 'readable' é disparado sempre que a tem dados disponíveis, assim, poderíamos trocar o while por if (pois ele também será chamado no fim do stream).

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/PcvJm2QqSS4" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as novidades. Abraço!


---

# Javascript: Streams (P-2: Writable Streams)

Source: blog/javascript-streams-p-2-writable-streams/index.md

Neste vídeo, um assunto bastante interessante para ser utilizado no dia-a-dia: Streams. A primeira parte fala sobre writable streams ou streams de gravação.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/9fVNChUKfZ4" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Javascript: Streams (P-3: Duplex)

Source: blog/javascript-streams-p-3-duplex/index.md

Nesta terceira parte da série sobre Streams, falo sobre o Streams Duplex, que permite tanto o envio quanto o recebimento de dados.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/kYoVIIqEFZQ" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Javascript: Streams (P-4: Transform)

Source: blog/javascript-streams-p-4-transform/index.md

Na quarta parte sobre Streams, falo sobre Transform. Confira!

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/gp7sB7-bPAg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Json-server - Como criar uma REST API para testes de forma simples

Source: blog/json-server-como-criar-uma-rest-api-para-testes-de-forma-simples/index.md

Neste hands-on onde vou mostrar uma ferramenta que é bastante interessante no dia a dia, o Json-server.

Primeiro vamos instalar:

```jsx
npm install -g json-server
```

**O que ele faz?**

Muitas vezes estamos criando uma aplicação apenas front-end, como React ou Angular e ele é uma rest API para podermos testar, trazer dados, alterar esses dados, etc. Ele permite que a gente faça isso de uma forma muito simples.

Vou criar um novo arquivo, por exemplo db.json, e dentro dele vou colocar o seguinte:

```jsx
{
  "produtos": [
    {"id": 1, "name": "bike"}
  ]
}
```

Criamos uma base de produtos onde tenho uma bicicleta com o ID 1. Com isso posso ir por exemplo no Shell e escrever:

```jsx
json-server --watch db.json
```

Ele retorna que já temos um recurso, que é:

```jsx
https://localhost:3000/produtos
```

Esse produto é o key que foi criado, que seria como se fosse nosso banco de dados. Se abrirmos o [Postman](https://www.devpleno.com/postman-como-testar-apis/) para testar, podemos colar essa url e dar um get, ele irá retornar nosso json.

Então podemos fazer uma requisição em jQuery, por exemplo, que ele já baixa. O mais legal é que podemos criar um produto novo copiamos o retorno do nosso get:

```jsx
{
"id": 1,
"name": "bike"
}
```

E depois mudamos o parâmetro para post e vamos postar um produto com ID 2. No body, temos que colocar que ele será em Raw

```jsx
{
"id": 2,
"name": "carrinho"
}
```

Se clicarmos em Send e voltarmos a dar um Get, ele retorna os dois produtos, então eu consigo criar um registro e retornar esse registro apenas fazendo isso. Podemos também fazer com um ID direto dessa maneira:

```jsx
https://localhost:3000/produtos/1
```

Ele retornará apenas o ID 1.

Perceba que ele transforma um Json em um banquinho de dados para podermos testar. À medida que vamos trocando, percebemos que o Json vai mudando também, então podemos criar essas alterações de uma forma persistida.

Use bastante, é uma ótima forma para poder ilustrar que está havendo uma comunicação com o servidor, e ele também é muito flexível, já vem com os métodos do HTTP implementados, então se quisermos excluir, podemos também. Não dá para usar em produção, seria muito inseguro, mas é possível para prototiparmos uma interface ou quem sabe um aplicativo móvel.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/VrPByfYy9PE" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Lista de sites para trabalhar remotamente como programador em 2022

Source: blog/lista-definitiva-de-sites-para-progradores-remotos/index.md

Se tem uma profissão que já se beneficiava dos benefícios de trabalhar remotamente bem antes de virar moda é a de programador. Eu mesmo atuo neste modelo a bastante tempo.

A pergunta que mais recebo é: quais os melhores sites para trabalhar remotamente como programador?

Neste artigo vamos explorar um pouco desta lista. Os links terão uma indicação de quando são de referência meus (fazendo o cadastro por estes links você também pode ganhar alguns benefícios).

### Toptal

Uma das empresas mais famosas para trabalhar como programador é a Toptal (Toptal é a junção de Top talent). Um ponto bastante importante é que a Toptal tem 2 formas de trabalho: você pode trabalhar no Core Team (ou seja, na Toptal em si) ou fazer parte do Network da Toptal (trabalhar para clientes da Toptal). E sim, é no Network que a Toptal é reconhecida por ter um processo seletivo bastante exigente - onde apenas 3% dos aplicantes conseguem passar, e também, é a forma que eu tenho relacionamento com eles.

No Network da Toptal, após passar pelo processo seletivo, você poderá ser alocado em clientes (que também passam por um processo seletivo). A Toptal cuidará de tudo que é burocrático (inclusive pagamento) e você somente tem que trabalhar/programar.

A forma de trabalho pode variar entre: horista (ou por hora), part-time (meio-período - 4 horas por dia) ou full-time (período integral - 8 horas por dia).

[Entre aqui para fazer seu cadastro na Toptal!](https://www.toptal.com/qaVGKx/worlds-top-talent). Algumas especialidades (React e React-native são uma delas) dão bônus de USD 2500 para ambos, para mim e para você que se cadastrou.

## Scalable Path

A Scalable Path é bastante semelhante ao Network da Toptal, porém, eles não possuem o screening process inicial. Assim, você cria seu perfil para que os recrutadores da Scalable Path te achem e façam a ponte com a empresa.

Uma ótima pedida para as primeiras experiências.

[Entre aqui para fazer seu cadastro na Scalable Path!](https://www.scalablepath.com/apply?r=tf5226)

## RemoteOk.io

Este site é mais como um agregador de vagas para trabalho remoto. Possui muitas vagas e é bastante organizado neste sentido.

[https://remoteok.io/](https://remoteok.io/)

## Crossover.com

Crossover também é um Network (assim com o a Total). O que é bastante atrativo neles é o job board - onde eles incluem vagas bastante interessantes - que passam dos 200 mil dólares anuais (nada mal hein!).

[https://www.crossover.com](https://www.crossover.com)

[https://www.crossover.com/jobs - página com as vagas abertas](https://www.crossover.com/jobs)

## StackOverflow Jobs

Outro agregador de vagas bastante interessante é o StackOverflow Jobs. Ele possui integração com seu perfil da plataforma.

[https://stackoverflow.com/jobs](https://stackoverflow.com/jobs)

## LinkedIn

O LinkedIn também é bastante poderoso para conseguir a sua próxima vaga remota como programador. Basta deixar seu perfil bem preenchido, buscar e aplicar para as vagas que você acredita serem ideias para você.

Não esqueça de filtrar por vagas remotas (se esse for o seu objetivo.)

Aproveite e siga o DevPleno por lá:

[https://www.linkedin.com/school/odevpleno/](https://www.linkedin.com/school/odevpleno/)

[https://linkedin.com/in/tuliofaria](https://linkedin.com/in/tuliofaria)

Esta lista ainda é preliminar :) Vamos trazer mais itens em breve.

## Você já trabalha remotamente (no Brasil ou no exterior)?

Se você já trabalha para o exterior e precisa de ajuda para nacionalizar o dinheiro de forma correta, além de decidir se é melhor como pessoa física ou jurídica, entre em contato conosco pelo e-mail contato@devpleno.com que te ajudaremos.

.

Conheça o [Fullstack Master](https://go.devpleno.com/fsm?sck=blog-como-gerar-um-array-populado-em-javascript)


---

# Lista encadeada - Adicionar com O(1)

Source: blog/lista-encadeada-adicionar-com-o1/index.md

Hoje vamos continuar falando mais um pouco sobre [algoritmos](https://www.devpleno.com/tag/algoritmos/) que principalmente caem ou em listas de emprego ou competições de programação, mas vai ser um pouco diferente. Estamos falando sobre listas encadeadas e já fizemos uma forma de [adicionar um nó em que a complexidade é 0(n)](https://www.devpleno.com/lista-encadeada-adicionar-no/), pois precisamos navegar até o final da lista toda vez que vamos adicionar um item novo. Porém uma das pessoas que acompanham a gente no YouTube comentou que podemos fazer com o O(1), ou seja, um valor constante, desde que a gente armazene além da cabeça da lista, o rabo, então eu decidi fazer dessa forma também para ficar bem claro as duas formas. A primeira coisa que temos que fazer no algoritmo é, além de utilizar o head, utilizar também o tail:

```jsx
let head = null
let tail = null
```

Agora vamos fazer um add e, caso estivermos adicionando pela primeira vez, vamos seguir a mesma regra utilizada anteriormente:

```jsx
const add2 = (value) => {
  if (!head) {
    head = Node(value)
    tail = head
    length++
    return head
  }
}
```

Perceba que tail é igual a head, afinal se não tivermos nenhum nó, ao adicionar, o início e o fim serão o mesmo.

Agora, caso o Head não for nulo, temos que fazer o Tail que será o nosso último. Para isso vamos criar um nó e pegar o tail.next e apontar para o novo nó:

```jsx
const add2 = (value) => {
  if (!head) {
    head = Node(value)
    tail = head
    length++
    return head
  }
  let node = Node(value)
  tail.next = node
  tail = node
  return node
}
```

Quando a lista não está vazia criamos um novo nó, vamos nesse último nó e colocamos no ultimo, logo nosso tail será o novo nó. Para checar se isso funciona no return, temos que adicionar:

```jsx
add2: (value) => add2(value)
```

Vamos fazer um teste:

```jsx
list.add2(1)
list.add2(2)
list.add2(3)
list.print()
```

Perceba que retornou 0 e 1 e nossa lista, a diferença que guardamos uma referência para o tail e utilizou apenas dele para checar e adicionar novos itens. Pode ser que consigamos otimizar esse código, a grande questão é que agora nosso algoritmo tem complexidade 0(1), a vantagem é que independente do tamanho da minha lista, adicionar a ela sempre custará uma constante.

O único detalhe é que guardamos dois valores, vamos pensar que esses valores variam dependendo do tamanho da lista, geralmente pensaríamos o seguinte: se ele variasse muito seria um um temporal 2,mas ele sempre será 0(1) mesmo com o resultado 2 porque não faz diferença quando nós falamos em escala.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-spW0EURyNk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Lista encadeada - Adicionar nó

Source: blog/lista-encadeada-adicionar-no/index.md

Vamos explorar um pouco mais de estrutura de dados de algoritmos que são comuns na base curricular, principalmente em computação, e caem muito em competição de programação e em entrevistas de emprego. Quando falamos de entrevista no exterior, é muito comum fazer essa entrevista com esse tipo de questão.

Hoje vamos falar sobre lista, com questões do google. Isso mostra que você tem essa desenvoltura, mesmo que não use na prática, nas entrevistas o que eles procuram é essa capacidade de conseguir resolver o problema.

A lista encadeada, também conhecida como Linked-List basicamente é composta por nós que têm dois valores dentro, sendo que o segundo valor aponta para o próximo nó, por esse motivo se chama lista encadeada. Podemos ter uma estrutura de dados que represente isso, para isso podemos, por exemplo, citar uma função em JavaScript que vai funcionar quase que igual a uma classe em orientação de objeto, mas vamos utilizar somente closure e travar o contexto dentro da função para fazer toda a operação na lista.

Então eu vou criar algumas variáveis dentro e retornar qual vai ser a interface pública dessa lista:

```jsx
function LinkedList() {
  let head = null
  length = 0
  return {
    length: () => length
  }
}
```

Perceba que eu defini um head, que é o ponto inicial da nossa lista, e além disso eu defini o length, que é o tamanho da nossa lista. O legal é que estamos retornando um length, porém esse length vai ser uma função que retorna length. Nós não utilizamos o this, esse tipo de operação é o melhor possível porque não temos essa mistura de contexto. No JavaScript funcional, quanto mais utilizarmos dessa forma melhor vai ser.

Se eu fizer:

```jsx
const list = LinkedList()
console.log(list.length())
```

Ele irá retornar o objeto length, como é uma função, ela será executada. Ao executar será retornado o valor 0, então temos que implementar todas as operações dentro de LinkedList, por exemplo, eu quero fazer a operação Add para adicionar um valor novo:

```jsx
function LinkedList(){
    let head = null
    length =  0
    const add (value) =>{
        if(!head){
        }
    }
    return{
        length: () => length
    }
}
const list = LinkedList()
console.log(list.length())
```

A lógica é que o head seria a cabeça de nossa lista, por isso utilizamos o if, então se existe um nó no head, eu tenho que andar até o final para poder colocar esse valor, se não existe eu vou poder criar um valor dentro do próprio head.

Como eu tenho que criar um novo nó, vamos criar um const Node que vai retornar um outro nó:

```jsx
function LinkedList(){
    let head = null
    length =  0
    const Node = (value) => {
        return {
            value,
            next: null
        }
    }
    const add (value) =>{
        if(!head){
        }
    }
    return {
        length: () => length
    }
}
const list = LinkedList()
console.log(list.length())
```

Então criamos uma outra função, que é uma arrow function, ela vai receber um value e retornar um objeto composto por esse value e um next igual a null. Voltando ao nosso if, se o head não existir ou false, vamos fazer o head ser igual a Node, passar nosso value e podemos retornar o head:

```jsx
const add (value) =>{
    if(!head){
        head = Node(value)
        length++
        return head
    }
}
return{
    length: () => length
    add: (value) => add(value)
}
```

Lembrando que o return é a interface pública desse método, então tudo que eu quero mostrar para o exterior é passado ali. Vamos fazer um teste adicionando um valor 1:

```jsx
const list = LinkedList()
console.log(list.length())
list.add(1)
console.log(list.length())
```

A lista estava vazia eu adicionei um valor e ele retornou uma lista igual a 1. Para escrever a lista, vamos escrever um método print que vai escrever head:

```jsx
return{
    length: () => length
    add: (value) => add(value)
    print: () => console.log(head)
}
const list = LinkedList()
console.log(list.length())
list.add(1)
console.log(list.length())
list.print()
```

Perceba que é retornado 0, 1 e em seguida **value:1 next: null**, mas tem um detalhe: se eu chamar novamente um add e adicionar um valor dois, não vai acontecer nada; vamos continuar apenas com um porque agora o head não é mais um false. Agora eu preciso descobrir qual o nó que o next vai ser null para aí sim adicionar nesse null:

```jsx
const add (value) =>{
    if(!head){
        head = Node(value)
        length++
        return head
    }
    let node = head
    while(node.next){
        node = node.next
    }
    node.next = Node(value)
    length++
    return node.next
    console.log(node)
}
```

Então conseguimos chegar no nó, começa com o head e enquanto o node.next for verdadeiro vai andar para frente, quando ele for falso o nó vai ter a representação do último item, então podemos colocar o nó igual a node(value), novamente dou um length++ e um return no next, já que estou retornando o nó que foi adicionado.

Vamos recapitular o que fizemos: se minha lista está vazia, eu vou adicionar no head um novo nó, incremento o length. Se isso não acontecer eu vou pegar o head, coloco em uma variável node e enquanto esse nó for verdadeiro, eu vou para o próximo, quando chegar no próximo, que está com null, pego ele e adiciono um novo nó, incremento e retorno esse nó.

A ideia é a gente conseguir adicionar novos nós infinitamente. Quando pensamos isso em uma estrutura de dados sem ser JavaScript, conseguimos adicionar nós dinamicamente, podemos alocar esses espaço de memória e ir adicionando de forma dinâmica, por exemplo, em linguagens como C é um pouco mais utilizado.

A última observação importante é que como estamos falando bastante de entrevistas, é importante sabermos qual a [complexidade do algoritmo](https://www.devpleno.com/complexidade-de-um-algoritmo/), para isso temos que avaliar como ele cresce. Se pensarmos em proporção, ela crescer mais ou menos em **0(length)**, quando é do tamanho, geralmente o pessoal chama de **0(n)** porque n seria o número máximo de itens que você tem que colocar. Vamos imaginar que temos 2 whiles ao invés de apenas um, teoricamente um while fora do outro seria 0(2n), mas o 2 perto do N não é nada, então continua 0(n). Já se o while fosse dentro, caminhando até o final do nó ai sim teriamos um 0(n²), como não temos, ele está crescendo baseado no tamanho da lista. A complexidade de espaço também será 0(n) porque eu vou ocupar espaços de memória baseado no tamanho de N.

Vamos continuar esse algoritmo comparando e comentando a complexidade de cada uma delas, lembrando que estou resolvendo em JavaScript para mostrar como podemos fazer isso em uma entrevista, afinal meu propósito é ajudar você a se recolocar no mercado ou achar sua vaga sonhada. Em qualquer cenário isso é muito importante para treinar algoritmo.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ANrh76RUvHs" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Lista encadeada - Como remover um nó

Source: blog/lista-encadeada-remover-um-no/index.md

Nós já falamos sobre alguns métodos, adicionamos itens na lista, criamos nó com [complexidade O(n)](https://www.devpleno.com/lista-encadeada-adicionar-no/) e [O(1)](https://www.devpleno.com/lista-encadeada-adicionar-com-o1/) e agora vamos remover um nó desse nosso algoritmo.

Primeiro temos que criar um método remove, vamos passar um nó para ele e, baseado nesse nó, ele vai excluir da lista.

```js
const remove = (node) => {}
```

Lembrando que em return temos que adicionar o remove:

```js
return{
    remove(node) => remove(node)
}
```

O primeiro cenário que temos é se a lista for igual a null:

```js
const remove = (node) => {
  if (lenght === 0) return
}
```

Agora, se o nó for igual ao primeiro nó da minha lista, eu simplesmente vou fazer meu head ser o node.next

```js
const remove = (node) => {
  if (lenght === 0) return
  if (node === head) {
    head = node.next
    return
  }
}
```

Agora temos a parte complexa, afinal já cobrimos a situação em que nossa lista está vazia, remover o primeiro item e agora precisamos remover o item que escolhermos. Vamos imaginar que queremos, por exemplo, excluir o nó 2, temos que pegar o next do nó 1 e apontar para o nó 3, então temos que descobrir quem é o nó 1 para fazermos esse mapeamento:

```js
const remove = (node) => {
  if (lenght === 0) return
  if (node === head) {
    head = node.next
    return
  }
  let currentNode = head
  while (currentNode.next && currentNode.next != node) {
    currentNode = currentNode.next
  }
  console.log(currentNode)
}
```

Agora eu quero pegar o valor 2 da nossa lista e checar se eu peguei realmente esse valor:

```js
let node = list.getByValue(2)
console.log(node)
```

Agora eu preciso mandar excluir esse nó 2:

```js
list.remove(node)
```

Pronto, conseguimos excluir, agora precisamos pegar nosso currentNode, que é nosso nó 1 e apontar para o nó 3, já que ele seria nosso next a partir do momento em que excluímos o nó 2:

```js
let currentNode = head
while (currentNode.next && currentNode.next != node) {
  currentNode = currentNode.next
}
currentNode.next = node.next
```

Fizemos o currentNode ser igual ao head, logo ele será o nosso nó 1, em seguida fiz uma condição: se eu tenho um próximo para andar e esse próximo não é o node, vou fazer o currentNode igual a currentNode.next, com isso vou caminhar para frente. Porém, na primeira vez que roda, ele já descobre que o Nó 1 já é o next, então precisamos fazer mais um caso de teste. Vamos adicionar uma posição 4 e em seguida remover a posição 3:

```js
list.add2(4)
let node = list.getByValue(3)
console.log(node)
list.remove(node)
list.print()
```

Lembrando que eu estou mostrando o que eu geralmente faço de testes, afinal o teste seria bastante viciado caso eu testasse apenas com o nó 1. Então conseguimos fazer ele caminhar nos nós e só depois então caminhar nele de verdade.

A complexidade desse código é O(n), não tem como ser diferente, pois temos que passar em todos os nós, basicamente é quase o mesmo cenário de adicionar com O(n).

Assista ao vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/tVl7Z-FnQ50" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Lista encadeada - Como retornar um item

Source: blog/lista-encadeada-retornar-um-item/index.md

Hoje vamos continuar falando sobre algoritmos e também estrutura de dados. Vamos discutir um pouco sobre essas técnicas que aprendemos na base da computação e que é bastante útil tanto para entrevistas de emprego quanto para competições em programação, pois geralmente aplicam esse tipo de teste para saber se você sabe gerenciar uma lista encadeada, por exemplo. Vamos continuar falando sobre [lista encadeada](https://www.devpleno.com/lista-encadeada-adicionar-no/) que é um assunto bastante interessante, nós já fizemos a adição de itens nessa lista, agora vamos criar um método para retornar um item que eu quero.

```jsx
const getByIndex = (index) => {
  if (index < length) {
  }
}
```

Perceba o seguinte, se eu quiser pegar o item 0 e minha lista estiver vazia ou seja, o length for igual a zero, temos que adicionar ao return primeiramente:

```jsx
return {
  length: () => add(value),
  print: () => console.log(head),
  getByIndex: (index) => getByIndex(index)
}
```

Em seguida faremos o seguinte:

```jsx
const getByIndex = (index) => {
  if (length === 0) {
    return null
  }
  let node = head
  let count = 0
  while (count < index && node.next) {
    node = node.next
    count++
  }
  return node
}
```

Teoricamente, ao retomarmos o node, já temos nosso método. Vamos recapitular o que fizemos: se a minha lista estiver vazia eu retorno null; se não eu pego o primeiro nó e coloco em node, minha contagem está em zero; caso meu count for zero e meu index for zero, ele irá retornar o nó.

Vamos fazer o teste:

```jsx
console.log(list.getByIndex(0))
```

Perceba que o índice zero tem toda a estrutura montada anteriormente, em um segundo caso de teste vamos fazer o seguinte:

```jsx
console.log(list.getByIndex(1))
```

Já o resultado do índice um retorna o 2 e o 3. Se pegarmos o índice 2 irá retornar apenas o 3, agora se tentarmos pegar o índice 3, ele irá retornar null, porque o 3 não existe.

O que podemos fazer para corrigir?

Temos que pensar o seguinte, se o length for igual a zero ou o índice que queremos é maior do que o length, então temos que retornar null:

```jsx
const getByIndex = (index) => {
  if (length === 0 || index >= length) {
    return null
  }
  let node = head
  let count = 0
  while (count < index && node.next) {
    node = node.next
    count++
  }
  return node
}
```

Novamente essa complexidade é 0(n), porque em meu pior cenário eu não tenho índice ou vou pegar o último. Esse é o algoritmo para pegar o índice, caso a gente queira pegar por valor conseguimos também, com a única diferença que temos que checar se o valor é igual e retornar caso seja:

```jsx
const getByValue = (value) => {
  if (length === 0) {
    return null
  }
  let node = head
  if (node.value === value) {
    return node
  }
  while (node.net) {
    node = node.next
    if (node.value === value) {
      return node
    }
  }
  return null
}
```

Lembrando que temos que exportar ele também:

```jsx
getByValue (value) => getByValue(value)
```

No teste **console.log(list.getByValue(2))** ele funcionará, agora caso pegarmos um valor que não existe, vai ser retornado null. Fizemos duas abordagens, uma voltando por valor e outra pelo índice. Lembrando que o segundo IF que fizemos não altera a complexidade do algoritmo, então ela também será 0(n), então no pior cenário ele vai passar em todos os nós e não encontrar. Esses são os exemplos de como podemos retornar um nó em lista encadeada, uma dica final é: resolva da forma que você conseguir e depois vai discutindo como chegar com o melhor desempenho possível, mas sempre resolva primeiro.

Confira todos os passos em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/yUz6MlTPAfU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Listar arquivos em JS (async, await, promise e Promise.all)

Source: blog/listar-arquivos-em-js/index.md

Hoje eu quero corrigir um exercício que passei no FullStack Academy que gera muitas dúvidas, principalmente para quem está começando na linguagem e quer aprender a lidar melhor com assincronia.

Então o exercício passado foi o seguinte: Dado uma lista de arquivos e diretórios retornada de uma função que lista o que tem no diretório, precisamos mostrar quais delas são arquivos. Para isso usamos uma função FS.stat.

Primeiramente precisamos saber a lista de arquivos que tem em um diretório, então vamos importar o nosso 'fs' e testar a função de ler um diretório retornando o nosso callback:

```jsx
const fs = require('fs')
fs.readdir('./', (err, paths) => {
  console.log(paths)
})
```

Ao executar esse código, ele irá trazer um monte de nomes, alguns com extensão, outros sem. Podemos concluir então que esse diretório tem arquivos e diretórios misturados. Agora como eu vou checar se cada um desses arquivos são ou não arquivos? Precisamos criar uma versão em promise desse fs.readdir e, baseado nesse readdir, podemos resolver a promise ou recusar essa promise:

```jsx
function readdir(path){
    return new Promise((resolve, reject) => {
        fs.readdir(path, (err, paths) =>{
            if(err){
                reject(err)
            } else {
                resolve(paths)
            }
        }
    }
}
```

Simplesmente estou retornando uma promise desse readdir, o que muda é que agora eu posso chamar o readdir passando o ./ com o then:

```jsx
readdir('./')then((paths) => console.log(paths))
```

Do ponto de vista de assincronismo, continua tendo a mesma coisa, usufruindo das vantagens da parte assíncrona do JavaScript e no nosso caso, no Node. Agora a função que eu tenho para saber se um arquivo é arquivo mesmo é o fs.stat, eu falo qual o path que eu quero e nesse path ele vai retornar stat desse arquivo:

```jsx
fs.stat(path, (err, stat) => {
  console.log(stat.isFile())
})
```

Com isso conseguimos saber se é um arquivo ou não através do isFile, por exemplo, se eu passasse o diretório atual e executar o código, ele vai passar false, Isso acontece porque ele não é um arquivo:

```jsx
fs.stat('./', (err, stat) => {
  console.log(stat.isFile())
})
```

Agora precisamos transformar o fs.stat também em uma função:

```jsx
function stat(path){
    return new Promise((resolve, reject) => {
        fs.stat(path, (err, stat) =>{
            if(err){
                reject(err)
            } else {
                resolve(stat)
            }
        })
    }
}
```

Agora podermos fazer uma nova versão:

```jsx
fs.stat('./').then,
  (stat) => {
    console.log(stat.isFile())
  }
```

Agora precisamos de um jeito de unir os dois para ter o resultado que queremos.No exercício no Fullstack Academy, utilizamos a função assíncrona 'async', então fizemos o seguinte:

```jsx
async function lista() {
  const paths = await readdir('./')
  console.log(paths)
}
lista()
```

Lembrando que descobrimos durante o Fullstack Academy que se utilizarmos o 'await' para uma promise, essa função continua sendo assíncrona, porém visualmente quando estamos construindo o código, podemos garantir que embaixo só vai ser executado quando o readdir terminar.

Perceba que vai continuar retornando a listagem, então na verdade o 'await' seria como fazermos um then com paths com a única diferença que eu posso fazer meu próximo passo, que será checar todos os arquivos se eles são ou não realmente arquivos. Para isso vamos fazer um const stats que vai utilizar um map para passar por todos os caminhos e utilizar um async passando um path e dar um await no stat.path:

```jsx
async function lista() {
  const paths = await readdir('./')
  const stats = paths.map(async (path) => await stat(path))
  console.log(paths)
}
lista()
```

Se dermos um console.log no stats, vamos ter uma lista de promises pendentes, então esse código roda síncronamente, até mesmo o map, toda vez que tenho um async tenho uma promises disfarçada e como ele retorna uma outra promise, eu tenho várias sem resolver. Com isso eu precisaria pensar em uma forma de resolver todas essas promises. Para resolver, podemos utilizar o promises.all que também retorna uma promise e retornar todas as promises que estão pendentes:

```jsx
async function lista() {
  const paths = await readdir('./')
  const stats = paths.map(async (path) => await stat(path))
  const stats = await Prmise.all(statsPromises)
  console.log(paths)
}
lista()
```

Agrupamos então todas essas promises em uma, o await vai esperar a promise retornada do promise.all, se rodarmos o código agora, teremos os resultados de todos os arquivos.

Agora como eu vou saber qual caminho é o que?

Na minha função stat, ao invés de retornar só o stat, vou retornar o path também para sabermos que arquivo é esse:

```jsx
function stat(path){
    return new Promise((resolve, reject) => {
        fs.stat(path, (err, stat) =>{
        if(err){
            reject(err)
            } else {
                resolve({path, stat })
            }
        })
    }
}
```

Agora precisamos filtrar qual desses caras são realmente arquivos, para isso vamos fazer o seguinte:

```jsx
async function lista() {
  const paths = await readdir('./')
  const stats = paths.map(async (path) => await stat(path))
  const stats = await Prmise.all(statsPromises)
  const pathsWithIsFile = stats.map((path) => ({
    path: path,
    isFile: path.stat.isFile()
  }))
  const files = pathsWithIsFile.filter((path) => path.isFile)
  console.log(files)
}

lista()
```

Agora ele irá retornar apenas os caminhos que são arquivos, o grande segredo de tudo é essa parte:

```jsx
const stats = paths.map(async (path) => await stat(path))
const stats = await Prmise.all(statsPromises)
```

Onde concatena essas promises de volta, isso é muito importante para conseguirmos fazer esse exercício. Se você esta vendo esse exercício e não participou do Fullstack Academy, confira a gravação das aulas no nosso [Canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww/featured).


---

# Loops/Repetições/Iterações no JSX do React

Source: blog/loopsrepeticoesiteracoes-no-jsx-do-react/index.md

JSX é a sintaxe que permite escrevermos HTML dentro do Javascript (sim, isso parece estranho, rs) em componentes ReactJS. E um fator muito interessante do JSX é que ele não permite trocar o escopo, assim como é possível fazer um loop/repetição em PHP. Onde apenas deixamos o for/foreach/while dentro do escopo do PHP e o HTML fora do escopo seria repetido.

Algo como:

```jsx
<ul><!-- aqui temos HTML normalmente -->
<?php for($i=0; $i<10; $i++){ // trocamos o escopo para PHP ?>
<li><?php echo $x ?></li><!-- aqui alternamos o escopo entre HTML/PHP -->
<?php } ?>
</ul>
```

Perceba que no exemplo anterior, sempre que queremos alternar para PHP, apenas usamos o <?php. Em JSX podemos tentar fazer algo semelhante, porém isso não funcionaria. Pois JSX é Javascript, então não tem como alternarmos o escopo. :(

### Forma 1:

Nesta maneira geramos fragmentos de JSX dentro de um array e escrevemos este array onde desejamos a nossa saída. Olhando o código fica mais simples entender:

```jsx
class Loop1 extends React.Component {
  render() {
    let rows = []
    for (let i = 0; i < 5; i++) {
      rows.push(<li>Num: {i}</li>)
    }
    return (
      <div>
        <h1>Loop 1:</h1>
        <ul>{rows}</ul>
      </div>
    )
  }
}
```

Apesar de funcionar bem, esta maneira acaba ficando um pouco confusa em componentes um pouco mais complexos.

### Forma 2:

Nesta maneira utilizamos um método separado para renderizar cada linha e o método array.map para iterar sobre os valores. Na verdade, poderíamos até mesmo utilizar outro componente na renderização.

```jsx
class Loop2 extends React.Component {
  renderRow(row) {
    return <li>Num: {row}</li>
  }
  render() {
    let rows = []
    for (let i = 0; i < 5; i++) {
      rows.push(i)
    }
    return (
      <div>
        <h1>Loop 2:</h1>
        <ul>{rows.map(this.renderRow)}</ul>
      </div>
    )
  }
}
```

Esta forma é a minha favorita para renderizar lista de dados, pois mantem o código bem organizado e permite tratar quando a lista é vazia. Veja este exemplo:

```jsx
class Loop3 extends React.Component {
  renderRow(row) {
    return <li>Num: {row}</li>
  }
  render() {
    let rows = []
    for (let i = 0; i < 5; i++) {
      rows.push(i)
    }
    if (rows.length == 0) {
      return <p>Nenhum item</p>
    }
    return (
      <div>
        <h1>Loop 3:</h1>
        <ul>{rows.map(this.renderRow)}</ul>
      </div>
    )
  }
}
```

Se a lista for vazia, ele retorna uma mensagem e não renderiza o loop :)

Você pode ver estes exemplos rodando aqui: [https://codepen.io/tuliofaria/pen/NbZgqK](https://codepen.io/tuliofaria/pen/NbZgqK)

Bom pessoal, estas são algumas ideias para utilizar loops em JSX. Como sempre, fiquem a vontade para comentar e até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Low-DB - Banco de dados para NodeJS baseado em JSON

Source: blog/low-db/index.md

O Low-DB é uma forma bem interessante de termos um banco de dados baseado em JSON para utilizarmos em aplicações mais simples ou talvez aplicações desktop, onde podemos utilizar electron, por exemplo.

Primeiro vamos instalar o módulo:

```jsx
yarn add lowdb
```

Criamos então o low-db. Com isso, precisamos de uma instância de um banco mostrando qual arquivo queremos utilizar.

```jsx
const lowdb = require('lowdb')
const db = lowdb('banco.json')
db.defauts({
  noticias: [],
  usuarios: []
}).write()
```

O interessante é que podemos definir os valores padrão quando o banco for criado, como por exemplo notícias e usuários. Lembrando que com o low-db temos que escrever estas operações para a classe começar a valer.

Ao dar um node no arquivo.js, ele irá criar um novo arquivo com o nome banco.json com os valores padrão pra cada um deles.

Vamos fazer mais alguns testes, por exemplo, adicionar uma notícia nova com id, assunto e conteúdo e por fim escreva no json.

```jsx
db.get('noticias')
  .push({
    id: '1',
    assunto: 'crime',
    conteudo: 'teste'
  })
  .write()
```

O mais interessante: você mandar adicionar novamente, ele irá adicionar ao anterior e não sobrepor. Podemos setar um valor de uma maneira em que podemos guardar as configurações.

```jsx
db.set('settings.toggledOption', true).write
```

Utilizamos o ponto no código acima para dizer que a opção toggledOption do settings deve estar aberta. Podemos gerar estas atualizações mais profundas apenas colocando ponto.

**Um banco não é um banco se não pudéssemos buscar as informações nele, correto?**

Então vamos buscar uma informação (e única do nosso banco de exemplo) que é a notícia com o ID igual a 1.

```jsx
const n = bd.get('noticias').find({ id: '1' }).value()
console.log(n)
```

Percebam que atribuímos um value para o bd, e então chamamos este value no console.log. Por fim, podemos remover um item deste banco, fazemos isso apenas retirando o set do bd e trocando o .find por .remove

```jsx
bd.get('noticias').find({ id: '1' }).write()
```

Esta é uma ótima ferramenta para utilizarmos em projetos pequenos, não vamos utilizar um banco de dados expansive ou até mesmo para armazenar settings de sua aplicação.

Confira o Hands-on no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Zej3O0o7v4o" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# High-order Function MAP

Source: blog/map/index.md

Hoje vamos continuar falando sobre programação funcional e High Order Functions, alguns tipos específicos que já vêm com o JavaScript, o primeiro que vamos falar é o MAP, ele transforma os dados ou cada item de um vetor. Vou mostrar um exemplo para ficar mais fácil:

```jsx
const vetor = [{id: 1, nome: 'Bicicleta', categoria: 1}
{id: 2, nome: 'Toca de natação', categoria: 2}]
vetor.map( function(item){
    console.log(item)
    return item
})
```

Esse MAP que utilizamos é uma High Order Function porque ela aceita uma função e retorna alguma coisa. Ela fica mais interessante quando utilizamos uma Arrow Function porque conseguimos reduzir o código:

```jsx
vetor.map((item) => {
  console.log(item)
  return item
})
```

Então, uma das utilidades do MAP é apenas fazer ele passar pelos itens do vetor. Em React, é muito comum renderizar uma lista de valores na tela dessa forma. A segunda forma é realmente transformar esse vetor, mapear cada valor desse para uma coisa diferente. Para complementar, vamos fazer um exemplo:

Vou criar um outro vetor no qual utilizaria a função para retornar algo específico como só o nome dos itens.

```jsx
const vetor2 = vetor.map((item) => {
  return 'Nome: ' + item.nome
})
console.log(vetor2)
```

Então eu estou transformando esse vetor1 em um vetor que só tem nome, poderíamos fazer um cálculo ou algo do tipo. Podemos simplificar ainda mais o código:

```jsx
const vetor2 = vetor.map((item) => item.nome)
console.log(vetor2)
```

Se fossemos fazer sem utilizar o MAP, teríamos que utilizar um _for_ e isso daria bem mais trabalho. Uma outra ideia que podemos ter é, por exemplo, definir quais são as categorias que eu tenho e que a gente atribua um item a mais, trocando o ID da categoria pelo nome:

```jsx
const categoria = {
  1: 'Bicicletas',
  2: 'Natação'
}

const vetor2 = vetor.map((item) => {
  item.categoria = categorias[item.categoria]
  return item
})

console.log(vetor2)
```

Essas são algumas ideias do que podemos fazer com o MAP, é bastante interessante utilizar isso porque a gente consegue fazer uma sequência de transformações dos dados que provavelmente consiga resolver boa parte dos problemas nos sistemas convencionais. Lembrando que no caso acima ela é uma função pura porque depende exclusivamente dos parâmetros que vêm pra ela, então isso a deixa mais fácil de ser testada, consequentemente a qualidade do código aumenta.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Ax101agfFB0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Melhoria Contínua

Source: blog/melhoria-continua/index.md

A dica de carreira de hoje é sempre tentar melhorar, ou seja, aplicar a melhoria contínua em seu processo de desenvolvimento de software, tecnologia que você domina e em tudo que você faz.

Vou contar uma história rapidinho para vocês terem uma ideia de onde eu quero chegar e porque essa dica é tão importante.

Temos um cliente que pegamos um projeto já caminhando e sempre acontecia um problema. Iamos migrar o código de um servidor de desenvolvimento para um servidor de production e acontecia um monte de problemas, então entrava uma pessoa no servidor de produção e fazia uma alteração. Tudo que acontece eu anoto ou presto atenção para tentar uma forma melhor de fazer. Por exemplo, neste cliente conseguimos achar que o grande problema era que o código não passava de versões. Com isso, um dos primeiros itens que trabalhei foi organizar a 'casa', obviamente entramos para corrigir um monte de bugs emergenciais e agora estamos em uma melhoria contínua.

A melhoria pode ter estágios, não precisa melhorar para o software dos sonhos de primeira. Quando um processo está complicado, é importante para a sua carreira que você consiga resolver o problema. Isso é até um treino, afinal, para treinar resolver problemas, você tem que resolvê-los, mesmo se você não tem autoridade para alterar o projeto, imagine as soluções que você poderia aplicar.

Então, a melhoria contínua é dar soluções novas para problemas que estão acontecendo no software. É uma obrigação, pois mostra que você é um DEVPLENO, ou seja, que tem a capacidade além do que você foi designado.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Ybqweo5aKc0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Metas na carreira de desenvolvedor

Source: blog/metas-na-carreira-de-desenvolvedor/index.md

Metas são muito importantes tanto para nossa carreira quanto para nossa vida.

**Você define metas para sua carreira?**

**Você sabe aonde quer estar daqui dez anos?**

**Quais conhecimentos quer ter daqui um ano?**

Um exercício que eu faço para minha vida, e acredito que você consiga adaptar para a sua, é definir algumas metas pessoais relacionadas a parte acadêmica, como aprender alguma linguagem de programação ou framework por ano. No meu caso, não é só aprender, eu meço se eu domino e se consigo fazer um projeto envolvendo essa tecnologia para um cliente.

Por exemplo, minha meta anos atrás era aprender Minstech e só percebi que dominava quando consegui concluir um projeto com Minstech. Hoje já é natural para mim trabalhar com essa tecnologia.

Podemos criar outras metas também, até mesmo relacionadas com hobby. No momento, estou focado em aprender a tocar guitarra, pois é algo que sempre gostei. Minha meta é simplesmente tocar de 40 minutos a 1 hora por dia. Nesse período, eu paro exclusivamente para estudar guitarra.

Este tipo de meta é muito bom, pois quanto mais você faz isso constantemente, mais você melhora como pessoa, pois transforma sua vida através de metas.

Podem ser coisas simples: Tem que escrever algo? Escreva um parágrafo por dia, isso já vai adicionar muito em um período e no final das contas você acaba gerando um produto muito grande baseado em pequenas metas.

Eu conheço muitas linguagens de programação atualmente. Consigo coordenar, projetar e desenvolver em muitas tecnologias diferentes, mas tudo começou com uma primeira, como PHP, Java, JavaScript, etc.

Para finalizar, não postergue suas metas! Se você tem a meta de aprender uma linguagem por ano, se organize e cumpra. Se começar a postergar, nunca irá realizar isto.

Para ser um profissional melhor, é importante criar essas pequenas metas e cumpri-las, pois ao longo do tempo a evolução ocorre de forma fantástica.

Deixe sugestões de temas para os próximos posts.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Metodologia ágil: entenda o que é e como se aplica para programadores!

Source: blog/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores/index.md

Nascidas nos anos 80, só vieram a ficar conhecidas depois dos anos 2000. Muito comuns no desenvolvimento de [softwares](https://www.devpleno.com/como-cobrar-por-software?utm_source=blog&utm_campaign=rc_blogpost), essas ferramentas ganharam espaço em um mercado concorrido que exige projetos rápidos, bem-feitos e sob medida para o cliente.

Estamos falando sobre a metodologia ágil!

Muito se fala sobre esse assunto, mas poucos entendem o que, de fato, são os métodos ágeis. Os equívocos acerca disso podem levar a uma aplicação equivocada e, em consequência, uma perda de produção e qualidade.

Para evitar que isso aconteça com você, separamos neste artigo algumas informações úteis para o seu trabalho. Confira!

### O que é uma metodologia ágil?

Antes de sair gritando aos sete ventos sobre métodos ágeis, precisamos entender o que eles são. Concorda?

Metodologias ágeis são uma alternativa para a gestão de projetos focado na [produtividade](https://www.devpleno.com/como-aumentar-a-produtividade?utm_source=blog&utm_campaign=rc_blogpost). Suas bases estão na relação entre os envolvidos no projeto. Isso inclui os gestores, a equipe de produção e o cliente.

Esse método de trabalho é pautado no empirismo, ou seja: entre em contato, resolva na prática. Por esse motivo, as metodologias ágeis visam dividir as adversidades em problemas menores e resolver em etapas.

Assim, diz-se que os projetos geridos por essas metodologias implicam em entregas incrementais — a entrega é apenas um incremento ao que já existe, e não um [software](https://www.devpleno.com/precificacao-em-software?utm_source=blog&utm_campaign=rc_blogpost) pronto, por exemplo — e ciclos interativos —, os trabalhos são divididos em ciclos e estes têm como objetivo melhorar os projetos anteriores.

Quer um exemplo legal?

Quando estamos jogando um MMORPG, por exemplo, não montamos o set do personagem de uma vez só. Em vez disso farmamos as partes dele, individualmente. Cada parte é um incremento ao personagem e facilita a aquisição de novos itens, mas só ao fim de todo o ciclo de farm é que temos o modelo pronto.

E é exatamente assim que é o desenvolvimento de softwares com a metodologia ágil. Em vez de estruturar um sistema inteiro de uma vez, faz-se partes de um módulo, integra-se esse módulo e depois outro, e outro e assim por diante, até finalizar todas as funcionalidades que o programa precisa.

Ficou claro o que é uma metodologia ágil? Então vamos adiante!

### Quais são os valores fundamentais da metodologia ágil?

Em 2001 um grupo de 17 desenvolvedores criaram o [Manifesto Para o Desenvolvimento Ágil de Softwares](https://www.manifestoagil.com.br?utm_source=blog&utm_campaign=rc_blogpost). Esse manifesto aponta 4 bases para a aplicação de métodos ágeis. Confira:

**Indivíduos e interações** mais que processos e ferramentas

**Software em funcionamento** mais que documentação abrangente

**Colaboração com o cliente** mais que negociação de contratos

**Responder a mudanças** mais que seguir um plano

De um modo geral, esse manifesto só comprova para o que falamos que é a metodologia ágil. Ela prioriza o contato da equipe entre si e com o cliente, assim como o empirismo no lugar da teorização.

Logo, é mais importante fazer o trabalho, deixá-lo como o cliente quer e se adaptar às mudanças do que seguir rígidos processos e usar ferramentas definidas.

### Quais são os benefícios dos métodos ágeis em TI?

Além de tornar o trabalho muito mais divertido de ser feito, e desafiador, os métodos ágeis apresentam uma série de vantagens para a área da tecnologia da informação. Dá só uma olhada:

**As equipes ficam mais produtivas (e criativas):** sem os bloqueios causados por excesso de papelada, necessidade de projetar um programa inteiro sozinho ou ferramentas de uso obrigatório, a equipe pode criar e produzir da forma que gosta.

**Melhorias na comunicação:** que tal chamar o cliente para uma conversa? O trabalho dividido em ciclos permite testar e apresentar cada pedaço do projeto, melhorando o entendimento do que o cliente quer e facilitando o trabalho da equipe de TI.

**Melhor definição do objetivo:** com a redução na burocracia, sem linguagem rebuscada e com definição de cada etapa dos trabalhos é muito mais fácil ter um objetivo final definido, e cumprir isso.

**Melhor atendimento ao cliente:** além de um software feito na medida, o cliente também recebe um ótimo tratamento da equipe de TI, que tem um contato próximo durante os trabalhos.

### Quais são as metodologias ágeis que existem?

E, no final das contas, que metodologias ágeis existem?

Na realidade existem centenas de métodos ágeis e cada um deles tem N variações. Isso significa que é quase impossível listar todos em um único texto, ainda mais sem que fique cansativo. Assim, nós separamos aqui os 5 mais utilizados para o desenvolvimento de softwares para você ter exemplos. Dá só uma olhada!

#### 1. Feature Driven Development (FDD)

O FDD é uma metodologia focada em funcionalidades. Por considerar o todo maior que a soma das partes, primeiro analisa-se o projeto inteiro, depois divide-se em partes e, então, divide-se as áreas a serem modeladas (funcionalidades).

#### 2. eXtreme Programming (XP)

O método XP é orientado por três bases: agilidade, economia e qualidade. Assim, uma equipe que utiliza o XP baseia-se em valores comportamentais que pautam seu trabalho — aqui entram questões como comunicação, simplicidade, feedback etc.

#### 3. Microsoft Solutions Framework (MSF)

O MFS tende a ser usado por equipes reduzidas. Ele é pautado na diminuição de riscos e na qualidade do produto final. O objetivo é identificar as falhas mais comuns e evitá-las.

#### 4. Dynamic System Development Model (DSDM)

O DSDM pode ser chamado de pai dos métodos ágeis. Ele é destinado ao desenvolvimento de projetos com [orçamento fixo](https://www.devpleno.com/precificacao-em-software?utm_source=blog&utm_campaign=rc_blogpost), assim como prazos curtos e bem definidos. O DSDM se difere das demais metodologias ágeis pois é composto por processos interligados de modelagem e é restrito no tempo. Assim, ele é um método um pouco mais rígido que os outros.

#### 5. Scrum

Mais conhecido atualmente, algumas pessoas acreditam que Scrum é a definição de metodologia ágil. Sua grande fama não veio ao acaso: o Scrum tem uma estrutura de planejamento e divisão de tarefas em ciclos que permitem que outros métodos ágeis sejam implementadas no próprio Scrum.

Existem diversos tutoriais sobre como funciona o Scrum. Mas, de uma maneira mais simples: é criado um Product Sprint Backlog, nele são listadas as funcionalidades que precisam ser mantidas no programa. Cria-se, em cima disso, ciclos de implementação chamados sprints. Entre as definições e trabalhos de cada sprint existem reuniões de equipe.

Assim, a medida que cada sprint é feito, outro se inicia. E esse ciclo continua até a conclusão do projeto.

### Gostou das metodologias? Então implemente-as!

Agora você já entendeu o que é uma metodologia ágil, como funciona, o que a rege, quais são seus principais norteadores e quais as principais representantes dessa forma de trabalhar. Toda a informação ficou clara?

Se a sua resposta é “sim”, agora é hora de colocar a mão na massa. Dê uma lida mais aprofundada sobre cada metodologia — [existem vários tutoriais espalhados pela internet](https://www.youtube.com/devplenocom?utm_source=blog&utm_campaign=rc_blogpost), principalmente sobre o Scrum, e dá para aprender a usar cada metodologia passo a passo. Depois de escolher a metodologia ágil que melhor se encaixa no seu trabalho, coloque ela em ação e veja os resultados. Você não vai se arrepender!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Metrônomo com JavaScript

Source: blog/metronomo-com-javascript/index.md

O metrônomo um dispositivo que deixa uma batida constante e ajuda os músicos a manterem um ritmo quando estão treinando. Esse ritmo pode aumentar ou diminuir de acordo com a escolha do músico.

Teremos um HTML simples, e primeiro vamos criar um input type range para gerar uma barra que será onde vamos controlar a velocidade do nosso metrônomo. Nele conseguimos colocar qual o valor mínimo e qual o valor máximo. Vamos pegar o do google como exemplo, o mínimo será 40 e o máximo 218. Um value inicial e um ID para conseguirmos recuperar este valor.

Em seguida, vamos colocar o áudio que será tocado _(no meu caso tenho um clap.wav e um botão play para controlar o metrônomo)._

```jsx
<html>
    <head>
        <tittle>Metronomo</tittle>
    </head>
    <body>
        <input type="range"  min="40" max="218" value="40" id="bpm"/>
        <audio src="clap.wav"></audio>
        <button id="play">Play</button>
    </body>
<html>
```

Ele ficará assim:

![Exemplo 1](AudioEx.png)

Também é interessante colocarmos antes do input um H1 com o número inicial de batida que está configurado.

```jsx
<h1>40bpm</h1>
```

Feito isso, podemos começar a adicionar um pouco de comportamento. Vamos colocar o script no corpo do HTML mesmo, pois a intenção no exemplo é só demonstrar como poderíamos reconstruir o metrônomo.

Toda vez que trocar o valor do range tem que ser trocado o que está escrito em H1. Então vamos pegar o BPM e o H1. Toda vez que o BPM mudar, ou seja, dar um change, o h1 tem que mudar também. Lembrando que essa técnica de colocar todos os seletores em cima é chamada de cash.

Primeiro faremos um teste com um valor fixo criando uma função que faz o play. Vamos chamá-la de tick e um intervalo fixo, que em sequência vamos resolver.

Nessa função tick, temos que pegar o áudio

```jsx
<script>
    const bpm = document.getElementById('bpm')
    const h1 = document.querySelector('h1')
    const play = document.getElementByld('play')
    const.audio = document.querySelector('audio')
    let currentBpm = 40
    function tick(){
        audio.currentTime= 0
        audio.play()
    }
    bpm.addEventListener('change', function(){
        h1.innerHTML = this.value + ' bpm'
        currentBpm = parseInt(this.value)
    })
    play.addEventListener('click', function(){
        const timer = setInterval(tick, 100)
    })
    </script>
```

Agora vamos pensar um pouco: Se precisamos ter 40 batimentos por minuto e o minuto tem 60 segundos, 60 segundos tem 60 mil milissegundos, temos que distribuir 40 batidas dentro de 60 mil, então vamos dividir isso no valor do Bpm, ficando assim:

```jsx
play.addEventListener('click', function () {
  const timer = setInterval(tick, (60 * 1000) / currentBpm)
})
```

Precisamos agora de uma forma para desligar essa batida, para isso vamos usar declarar o let isPlaying, o timer, e um if para, caso ele estiver tocando, darmos um clearInterval nesse timer.

```jsx
<script>
    const bpm = document.getElementById('bpm')
    const h1 = document.querySelector('h1')
    const play = document.getElementByld('play')
    const.audio = document.querySelector('audio')
    let currentBpm = 40
    let isPlaying = false
    let timer = null
    function tick(){
        audio.currentTime= 0
        audio.play()
    }
    bpm.addEventListener('change', function(){
        h1.innerHTML = this.value + ' bpm'
        currentBpm = parseInt(this.value)
    })
    play.addEventListener('click', function(){
        if(isPlaying){
            clearInterval(timer)
        } else {
            const timer = setInterval(tick, (60*1000)/currentBpm)
        }
        isPlaying = !isPlaying
    })
</script>
```

Uma vez que estartamos o timer, ele começa a tocar. Ao clicar novamente, ele para, pois carrega na página com valor null. Ao clicarmos, damos um valor para ele e clicando de novo ele cai no isPlaying = !isPlaying que faz ele voltar a Null. Chamamos isso de toggle.

Também podemos trocar o texto do botão para play caso esteja tocando e Stop para quando estiver parado. Perceba que, ao apertar o play, ele começa a tocar apenas no próximo tick, pois o setInterval demora esse tick. Podemos fazer ele começar já com esse tick.

```jsx
play.addEventListener('click', function () {
  if (isPlaying) {
    play.innerHTML = 'Play'
    clearInterval(timer)
  } else {
    tick()
    play.innerHTML = 'Stop'
    const timer = setInterval(tick, (60 * 1000) / currentBpm)
  }
  isPlaying = !isPlaying
})
```

Para esse valor atualizar sempre que mudamos o range, temos que fazer um if, que vai limpar o intervalo e começar um novo valor baseado no cálculo.

```jsx
bpm.addEventListener('change', function () {
  h1.innerHTML = this.value + ' bpm'
  currentBpm = parseInt(this.value)
  if (isPlaying) {
    clearInterval(timer)
    timer = setInterval(tick, (60 * 1000) / currentBpm)
  }
})
```

Com isso, acabamos de construir um metrônomo.

Essa é uma ideia do que se pode construir com javaScript e HTML. Algumas outras ideias faremos posteriormente.

Confira o passo a passo em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/9M7OY47OFzg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Capturando áudio do microfone pelo Navegador

Source: blog/microfone-pelo-navegador/index.md

Hoje eu quero mostrar como podemos capturar um áudio do microfone pelo navegador.

Da onde surgiu essa ideia?

Nós construímos um chat em tempo real no Curso Completo de Socket.io, que faz parte do Fullstack Master. Nele construímos um chat semelhante ao WhatsApp, onde conseguiríamos mandar uma mensagem de voz. Quero mostrar mais ou menos a ideia de como podemos capturar este áudio.

Primeiramente vamos acessar o jQuery CDN para conseguirmos copiar o link do jQuery.

Vamos criar um arquivo index.html bem rápido, apenas para começarmos o nosso exemplo:

```jsx
<html>
  <body>
    <script
      src='https://code.jquery.com/jquery-3.2.1.slim.js'
      integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='
      crossorigin='anonymous'
    ></script>
  </body>
</html>
```

Vou criar um script que vai dentro do próprio body, já que o que importa mesmo é o que estamos executando:

```jsx
<script>
  $(function()
  {navigator.mediaDevices.getUserMedia({ audio: true }).then(
    (stream) => {
      console.log(stream)
    },
    (err) => {
      console.log(err)
    }
  )})
</script>
```

Quando temos o getUserMedia, temos uma promise e essa promise pode ser resolvida tendo o stream ou tendo um erro.

Repare que ao rodar o navegador ele já está capturando o áudio e foi criado um stream para isso. Se formos fazer um sistema real, ao dar erro como acesso negado, precisamos avisar o porque não funcionou:

```jsx
}, err =>{
    $('body').append('<p>Você deve permitir o áudio</p>')
})

```

Eu sempre gosto de definir um mediaRecorder, assim, quando o stream for criado, é criado junto o mediaRecorder:

```jsx
<script>
    $(function(){
        let mediaRecorder
        navigator
        .mediaDevices
        .getUserMedia({audio: true})
        .then( stream => {
            mediaRecorder = new MediaRecorder(stream)
            mediaRecorder.ondataavailable = data => {
                console.log(data)
            }
            mediaRecorder.onstop = () => {
                console.log('stop')
            }
            mediaRecorder.start()
            setTimeOut(() => mediaRecorder.stop(), 3000)
        }, err =>{
            console.log(err)
        })
    })
</script>
```

Feito isso, ele vai começar a gravar e três segundos depois ele da um stop e diz que tem dados disponíveis para ser utilizados.

Depois que terminamos de gravar, pode ser que seja interessante fazer alguma coisa com esse áudio, mandar para algum lugar ou coisa nesse sentido. Caso o evento seja muito longo, podemos definir que algumas partes desse áudio vão ser colocados em um vetor e no ondataavailable à medida que formos recebendo os dados do stream vai ser organizado dentro de chunks que são grupos de informação:

```jsx
mediaRecorder = new MediaRecorder(stream)
let chunks = []
mediaRecorder.ondataavailable = (data) => {
  chunks.push(data.data)
}
```

Agora, no Stop, podemos fazer algo para transformar isso em algum dado que podemos utilizar de alguma forma:

```jsx
mediaRecorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'audio/ogg; code=opus' })
  const reader = new window.fileReader()
  reader.readAsDtaURL(blob)
  reader.onloadend = () => {
    console.log(reader.result)
  }
}
```

Com isso, ele junta os dados em binário em um só chamado blob. Além disso, utilizamos um reader para gerar um URL.

Ao rodar, perceba que ele converteu para um base 64, que é um texto, ou seja, ele transformou o que era binário em texto.

Por que isso é importante?

Porque geralmente o protocolo HTTP em si não lida bem com binário, principalmente quando precisamos misturar binário com conteúdo em texto. Por esse motivo usamos essa codificação dos dados binários para algo e transferimos isso como texto.

Além disso, temos uma outra vantagem, podemos, por exemplo, utilizar a url para dar play no body:

```jsx
mediaRecorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'audio/ogg; code=opus' })
  const reader = new window.fileReader()
  reader.readAsDtaURL(blob)
  reader.onloadend = () => {
    const audio = document.createElement('audio')
    audio.src = reader.result
    audio.controls = true
    $('body').append(audio)
  }
}
```

A partir disso podemos por exemplo mandar o áudio em um post, ou fazer o start e o stop baseado em um botão, assim cada vez que apertarmos um botão vai ser feito a ação. Isso abre um leque de possibilidades muito grande.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/80giIJkO5V8" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Minicurso Socket.IO - Parte 01 - Começando o projeto

Source: blog/minicurso-socket-io-parte-1/index.md

Essa é a primeira parte do nosso minicurso de Socket.IO. Nesta etapa, vamos começar o projeto e criar as primeiras páginas para dar o suporte à aplicação.

A primeira coisa que temos que fazer é garantir que o express generator está instalado.

```jsx
npm install -g express-generator
```

Esse express generator instala um gerador de aplicações em expressJS que é o que vamos utilizar. Escrevendo **express -h** ele mostra o nosso help, com isso consigo criar um projeto do zero já falando as especificidades que eu quero para ele. Por exemplo, vamos fazer o seguinte:

```jsx
express placar-online --ejs
```

Então colocamos o express, o nome do diretório que queremos e --ejs porque queremos utilizá-lo como engine para template. Nos arquivos de apoio ([https://www.devpleno.com/minicurso-socket-io-parte-1/](https://www.devpleno.com/minicurso-socket-io-parte-1/)) já estão em EJS, mas nada te impede usar o --pug ou --handlesbar por exemplo.

Instalamos depois o yarn:

```jsx
yarn
```

Ao dar enter, ele já cria todos nossos arquivos, agora precisamos entrar no diretório do placar-online e damos um start no yarn:

```jsx
yarn start
```

Para acessarmos a aplicação, entramos em **localhost:3000**. Nela temos nossa aplicação.

Vamos abrir esse diretório no Visual Code, perceba que o express generator já criou uma pasta bin, code_modules, publc, routes e uma pasta views. Dentro desse views, teremos nossos templates, no routes teremos nossas rotas e em public nossa pasta pública, ou seja, o que conseguimos acessar publicamente nesse servidor.

Para começar, vamos deletar da pasta **public** os diretórios **images, javascript e stylesheets** e, na pasta **routes,** deletar o arquivo **users.js**. Lembrando que estamos deletando apenas o que não precisamos.

Agora vamos abrir o **app.js** e remover o users, já que apagamos o diretório:

```jsx
var users = require('./routes/users')
app.use('./users', users)
```

Agora vamos aos arquivos de apoio. Você vai receber um zip com os diretórios **data**, **public**, **views** e um arquivo **funções.js**. Dentro da pasta public, temos o css, imagens, o JavaScript e os áudios. Na views, temos os templates que vamos utilizar e a pasta data, que é o BD que eu preparei para podermos utilizar e consumir esses dados.

Dentro de public, vamos copiar tudo que está lá e colocar na pasta public do projeto. O data iremos copiar a pasta inteira e colocar na pasta raiz do projeto, e views iremos copiar um a um assim que for necessário.

**Como foi gerado isso tudo pelo express generator?**

O app.js é a base da nossa aplicação e segue uma boa prática do express, que é criar a aplicação nesse independente da parte que starta o servidor, que na nossa aplicação é em bin/www onde ele importa o app, define a porta e etc. Ele faz isso de uma maneira bem legal porque se quisermos criar testes, conseguimos apenas importando o app e rodamos em cima do app sem precisar realmente ouvir uma porta. Esse app.js também importa o routes que é nosso arquivo de rotas, ele diz o seguinte: quando você entrar no '/' vai renderizar o index. Aí ele irá em views e abrirá o index.ejs.

Como ele sabe que o index está em views?

Se voltarmos em app.js ele definiu que é um ejs que está dentro de views:

```jsx
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
```

Se dermos um render, ele irá pegar o index. Vamos fazer um teste para ver se é isso mesmo, vamos mudar o Welcome e trocar por Olá para saber se estamos realmente alterando ele:

```jsx
<p>Olá <%= title %></p>
```

Agora, dentro desse index, iremos fazer uma lista de jogos, mais especificamente quais estão acontecendo nesse momento. Para fazermos isso, a primeira coisa que temos que fazer é utilizar um banco de dados baseado em json que se chama **lowdb**, então vamos dar um yarn nele:

```jsx
yarn add lowdb
```

Esse lowdb vai criar um banco novo onde iremos puxar os jogos de lá:

```jsx
var express = require('express');
var router = express.Router();
//definindo o bd
const low  = require('lowdb')
const db = low(__dirname+'/../data/db.json')
const defaultData = require('../data/default-data.json')
db.defaults(defaultData).write()

/\*Get home page. \*/
router.get('/', function(req, res, next){
    res.render('index', {title: 'Express'});
});
module.exports = router;
```

Estamos carregando o defaultData que tem um exemplo de jogo, com ele vamos definir para o db que o padrão dele, se não tiver nada, será o defaultData.

Perceba que o db.json está vazio, mas ao darmos um yarn start ele será preenchido com as informações do defaultData.

Nosso próximo passo é carregar todos os jogos e enviar para nossa rota, com isso conseguimos exibir esses jogos na tela. Vamos criar um const matches. Vamos pegar do nosso db o value de matches e mandar ele para nosso view:

```jsx
;/\*Get home page. \*/
router.get('/', function (req, res, next) {
  const matches = db.get('matches').value()
  res.render('index', { matches })
})
module.exports = router
```

Agora, dentro de index.js, vamos remover o title de todas as linhas de código e adicionar matches dentro do `<p>`:

```jsx
<p>Olá <%= matches %></p>
```

Perceba que ele irá retornar dois objetos, ou seja, serão dois jogos. Agora vamos colocar o JSON.stringfy para sabermos o que está chegando realmente:

```jsx
<p>Olá <%= JSON.stringfy(matches) %></p>
```

Então o jogo está funcionando perfeitamente.

Como já temos nossa lista de jogos, vamos trazer nosso primeiro template. Nos arquivos de apoio, dentro de views, vou copiar o index.ejs e jogar para dentro da pasta views do projeto, substituindo o existente.

Perceba que existe um parcial, que é uma técnica muito legal que ao invés de ficarmos fazendo e repetindo o cabeçalho, criamos alguns elementos que só importamos e ele já resolve esses arquivos. Então, também dentro dos arquivos de apoio, vamos copiar a pasta partials e adicionar nos arquivos de apoio. Por exemplo dentro de partials/head temos apenas os links do css e etc, isso deixa mais fácil pois vamos importar em todos os arquivos.

Ao atualizar, já temos dois jogos funcionando.

**Como funciona esse template?**

Nós definimos que vamos renderizar o index enviando matches para lá, quando vamos no template existe um matches e utilizamos tudo em javaScript normal, então estamos usando um forEach para fazer essa iteração, ou seja, estou repetindo esse div várias vezes (esse div nada mais é que o template que eu criei com algumas classes).

Se voltarmos ao bd, a gente percebe que existe um team-a, team-b e todos os dados dentro dele, no index puxamos esse time a e time b:

```jsx
<div class="text-block-5">
<%- match['team-a'].name %>
<%- match['team-b'].name %>
</div>
```

Um ponto importante é que estamos utilizando o db mapeado por índices, ou seja, pegamos o jogo na primeira posição e que depois nós poderíamos fazer com um banco de dados de verdade, linkar para uma chave primária. No link, vamos passar o indice com o parâmetro para ele saber qual o jogo que vai ter que renderizar.

Se clicarmos em acompanhar agora, ele vai dar um erro, porque não encontrou, obviamente, já que não construímos essa página ainda.

Agora vamos em index.js, dentro de routes, falar que queremos responder quando o entramos em match e tiver um ID nesse jogos e também vamos pegar o jogo em especifico:

```jsx
router.get('/match', function (req, res, next) {
  const matches = db.get('matches').value()
  const match = db.get('matches[' + req.params.id + ']').value()
  res.render('match', { matches, match, id: req.param.id })
})
```

Ao final, renderizamos o view match e mandamos uma lista para la, matches, match e id.

Ele não vai encontrar o view match, então vamos novamente nos arquivos de apoio, pegamos o arquivo match.ejs dentro do diretório views e colamos dentro de views do projeto. Agora já temos os dados sendo jogados na tela.

**Como ele está colocando esses dados na tela?**

Dentro do view/match.ejs importamos o head, header como de praxe, e a parte de cima temos um forEach novamente com todos os jogos em que eu repito um div, onde mostro a abreviação do campeonato que ele está, o time a, b e score desses times.

Ao continuar o template, temos as informações do jogo em match-info, por exemplo qual campeonato, rodada, nome do time, o escudo dele (e repare que já estamos redirecionando ele para public). Temos também a lista de suportes, que é a torcida, nós ainda não fizemos essa parte, vamos fazer mais a frente. Uma lista de vídeos que pegamos do db, fazemos um embed do youtube e o lance a lance. Uma coisa que você pode ter percebido é que esse lance a lance está ao contrário, geralmente os lances entram em cima e vão empurrando os lances mais antigos para baixo. Para ordenar esses lances, vamos em index.ejs, importar o lodash e importar o próprio match e ordenar pelo half e o tempo em minutos de forma descendente:

```jsx
const _ = require('lodash')
router.get('/match', function(req, res, next){
    const matches =  db.get('matches').value()
    const match = db.get('matches['+req.params.id+']').value()
    match.bids = _.orderBy(match.bids,['half', 'time']), ['desc' , 'desc'])
    res.render('match', { matches, match, id: req.param.id });
});
```

Na próxima aula, iremos começar a colocar o socket.IO nessa interface, ligando ele nas duas pontas, tanto no client quanto no servidor para conseguirmos distribuir essas atualizações em tempo real. Baixe os arquivos e apoio e vai ver que está tranquilo de entender, assim não vamos perder tanto tempo com layout e vamos direto para o que interessa, esse layout é apenas para caso você queira demonstrar um projeto, pois ele já fica com cara mais profissional.

Confira a aula em vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Yquf8dNe89w" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO

Source: blog/minicurso-socket-io-parte-2/index.md

Na [primeira aula do minicurso de Sockt.IO](https://www.devpleno.com/minicurso-socket-io-parte-1/), fizemos a listagem dos jogos puxando do banco de dados baseado em json e quando clicamos conseguimos visualizar os dados dos jogos. Agora vamos adicionar o Socket.IO realmente a essa interface, configurando a parte do client e do server. Vamos começar pela parte do servidor, primeiramente vamos adicionar o Socket.IO:

```jsx
yarn add socket.io
```

Depois que ele adicionar, vou abrir o app.js do express e fazer algumas alterações, a primeira delas é adicionar um app.io e dar um require no Socket.IO já chamando o construtor dele. Como não temos o servidor, deixamos por enquanto, como se fosse uma promise que vamos criar o servidor depois.

```jsx
app.io = require('socket.io')()
```

Feito isso, eu vou alterar o www para poder anexar ao Socket.IO. Abrindo o www, perceba que temos um server e uma instancia daquele app, vamos adicionar à instancia desse app a instancia do Socket.IO passando o server que definimos

```jsx
var server = http.createServer(app)
app.io.attach(server)
```

Agora ele vai conseguir responder nesse server. De alguma forma, precisamos conectar as coisas, então vamos no partials que já tem algo pronto:

```jsx
<script src='/socket.io/socket.io.js'></script>
```

Perceba que eu já deixei a inclusão do /socket.io, que é o JavaScript que faz a parte client do Socket.IO. Vamos olhar na rede se o JavaScript está realmente sendo carregado corretamente. Ao clicar nele, perceba que ele já mostra o font do Socket.IO:

Esta tudo correto, estamos com o Socket.IO conectado ao express. Agora temos que fazer o client conectar no server, vamos criar mais um JavaScript e incluir diretamente no app. Em public/js vamos criar um arquivo novo chamado match.js, dentro dele vai ter o um jQuery para simplificarmos um pouco e dentro dele terá um alert:

```jsx
$(function)(){
    alert(1)
})
```

Já em match.ejs vamos adicionar o JavaScript lá em baixo, depois de todo o footer:

```jsx
<% include partials/footer %>
<script src="/js/match.js"></script>
```

Ao atualizar ele vai mostrar o alert, isso significa que está funcionando perfeitamente. Então agora vamos começar a conectar o front-end ao back-end. Voltando ao match.js, vamos retirar o alert e adicionar o seguinte:

```jsx
$(function)(){
    const socket = io();
})
```

Ao fazer isso, se formos ao WS, perceba que ele já tentou fazer uma conexão: Como eu tenho certeza se isso está ok? Vamos fazer o seguinte teste:

```jsx
$(function)(){
    const socket = io();
    socket.on('connect', function(){
        console.log('conected');
    })
})
```

Para vermos se ele está conectado ao servidor, voltamos em index.js e precisamos checar se ele se conectou. O problema é que preciso pegar o IO que está no arquivo anterior, o DB também está estranho porque precisamos ter um admin para criar e gerenciar esses jogos e ele vai utilizar o mesmo banco, então estamos deixando esse index muito dependente, precisamos fazer algo que a gente possa injetar o DB e o IO ali dentro.

Como fazemos isso?

Poderíamos em app.js ao invés de deixar o index em cima, vamos passar um pouco para baixo. Antes de importar, vamos injetar a dependência que temos do IO para ele:

Se olharmos esse index, ele exporta um router, vamos fazer ele exportar também um router, mas de uma maneira diferente, vamos criar uma função indexRouter e colocar as dependências:

```jsx
function indexRouter(dependecies) {}
```

E lá em baixo ao invés de exportar um router vamos exportar o indexRouter:

```jsx
module.exports = indexRouter
```

Voltando a função que acabamos de criar, vamos tirar essa chave e colocar todas as dependencias da pagina dentro:

```jsx
    function indexRouter(dependecies){
        //definindo o bd
        const low = require('lowdb')
        const db = low(__dirname+'/../data/db.json')
        const defaultData = require('../data/default-data.json')
        db.defaults(defaultData).write()
        ....
    });
    return router;
}
```

Então tiramos todo o código que estava dentro do index, criamos uma função indexRouter, fizemos todo o código rodar normal e ao fim retornamos esse router, passando a referencia dessa função para quem chamar ele, exatamente a mesma coisa que o construtor do Socket.IO faz.

Agora temos acesso a essas dependências:

```jsx
function indexRouter(dependecies){
    console.log(dependencies)
    //definindo o bd
    ...
}
```

Voltando ao app.js vamos fazer o seguinte:

```jsx
var index = require('./routes/index')({ io: app.io })
```

O require irá retornar uma função, não a execução dessa função e sim a função em si, já o io:app.io fala para executar esse função e eu passo um parâmetro para ele, que são as dependências que eu quero injetar nesse router.

Ao executar o código, perceba que agora temos uma instancia de IO dentro do indexRouter. Voltando ao index, vamos trocar o BD de lugar também, recortamos ele do index.js e vamos colar em app.js. Como o app está na raiz, eu preciso concertar os caminhos:

```jsx
//definindo o bd
const low = require('lowdb')
const db = low(__dirname + '/data/db.json')
const defaultData = require('./data/default-data.json')
db.defaults(defaultData).write()
```

Ele vai quebrar o código, mas fique tranquilo, era para isso acontecer mesmo. Agora vamos enviar o banco para o index.js também

```jsx
var index = require('./routes/index')({ io: app.io, db })
```

Agora vocês podem perceber que ao startar o projeto temos a dependência do DB. Como construímos um projeto todo dependendo de DB, eu posso apagar o console.log que colocamos dentro da função indexRouter e colocar o seguinte:

```jsx
const { db, io } = dependencies
```

Isso é um destructor assignment, ele cria variáveis novas a partir de propriedades das dependências. Ainda dentro da função, abaixo do const que acabamos de criar, vamos fazer o seguinte:

```jsx
io.on('connect', function (socket) {
  console.log('a new client conected')
})
```

Uma coisa interessante do Socket.IO é que ele já tenta a conexão automaticamente.

O último objetivo desta etapa é criar uma rota administrativa para que a gente consiga gerenciar esses jogos. Primeiramente vou copiar o index.js do routes e colar no mesmo diretório, em seguida vamos renomear a cópia para admin.js e no admin vou tirar esse conect que acabamos de criar. Em seguida, vamos trocar o nome da função de indexRouter para adminRouter, lembrando que ao final do código temos que exportar adminRouter também.

Em app.js vamos vamos importar o admin nele:

```jsx
var admin = require('./routes/admin')({ io: app.io, bd })
```

em seguida vamos linkar ele na aplicação:

```jsx
app.use('/admin', admin)
```

Lembrando que estou apenas colocando abaixo do original, que é index. Esse use no express fala que a partir de '/' você vai rotear para index, e quando eu falo '/admin' ele vai prefixa isso, então terei /admin/ e /admin/match com o ide do jogo.

Apenas por curiosidade, o app.use é conhecido como middleware. Esse middleware só vai checar as rotas se são administrativas ou não se ela começar com /admin. Nós não temos o administrativo ainda, ele é um clone do administrador, vamos fazer algumas alterações. Dentro do diretório views, vamos criar uma pasta nova chamada admin. Se voltar aos arquivos de apoio, você pode perceber que dentro da pasta view tem uma pasta admin com dois layouts, copie esses dois e cole na pasta do projeto que acabamos de criar.

Dentro desses dois itens, vamos olhar primeiro o index, ele é igual o index anterior com a diferença que estamos importando um header diferente. Já dentro do admin, quando formos dar um render, temos que colocar admin/:

```jsx
router.get('/, function(req, res, next){
    const matches = db.get('matches').value()
    res.render('admin/index, { matches});
});

router.get('/match', function(req, res, next){
    const matches = db.get('matches').value()
    const match = db.get('matches['+req.params.id+']').value()
    res.render('admin/match', { matches, match, id: req.param.id });
});
```

Fazemos isso para ele saber que o view não vai ser um view comum, ele vai ser do admin. As únicas diferenças que temos no index é a cor do header, troquei o nome do botão para gerenciar e foi adicionado um botão "gerar jogo", que é onde vai criar um jogo aleatório apenas para não precisarmos adicionar a lista de jogadores, etc. Não fizemos esse código ainda, vamos fazer na próxima aula.

Confira a aula em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/QX-0mjQOV2U" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol

Source: blog/minicurso-socket-io-parte-3/index.md

Nas [aulas anteriores do minicurso de Socket.IO](https://www.devpleno.com/minicurso-socket-io-parte-2/), já preparamos o ambiente, conectamos o websocket do client para o servidor e agora vamos começar a emitir realmente as notificações.

A primeira coisa que vamos fazer é enviar o placar, vamos abrir o template match.ejs dentro de admin. A única coisa que temos de diferente é o time e os gols, nós vamos pegar esses dados e quando o usuário clicar em atualizar placar, iremos enviar isso ao servidor e ele vai disparar via socket.io para todos os clients.

Primeiramente lá no final, após incluir o footer, vamos adicionar um script:

```jsx
<script src='/js/admin.js'></script>
```

Esse script ainda não existe, vamos criar agora no diretório public/js, primeiro temos que descobrir qual o ID do botão do formulário, que é update-score e quando o usuário clicar nesse botão, eu quero dar um alert apenas para saber se está rodando:

```jsx
$(function)(){
    $("#update-score").click(function(){
        alert(1)
        return false;
    })
});
```

Agora precisamos pegar os dois valores do jogo nos ID's score, e score-b, o notify-score e damos um console.log para saber se está tudo correto:

```jsx
$(function)(){
    $("#update-score").click(function(){
        const scoreA = $("#score-a").val();
        const scoreB = $("#score-b").val();
        const notify = $("#score-notify").val();
        console.log(scoreA, scoreB, notofy)
        return false;
    })
});
```

Perceba que o notify continuou com o value 1, isso acontece porque não está checando se esta checked ou não, então fazemos isso:

```jsx
const notify = $('#score-notify:checked').val()
```

Agora precisamos enviar isso para o express para ele distribuir via Socket.IO para todos os clients. Ao invés de mandar essa atualização via Socket.IO, eu posso mandar via API, salvar essa informação no banco e aí sim notificar _(eu prefiro usar sempre essa forma para eu garantir que eu só envie essa notificação para todo mundo)._

```jsx
$(function)(){
    $("#update-score").click(function(){
        const scoreA = $("#score-a").val();
        const scoreB = $("#score-b").val();
        const notify = $("#score-notify").val();
        $.post("/admin/match/0/score", post {
            scoreA, scoreB, notify
        }, function(data){
            console.log(data)
        })
        return false;
    })
});
```

Ele não vai conseguir, pois não achou, mas se olharmos a conexão os dados já estão sendo enviados, então temos que receber esses dados lá. Vamos voltar em routes/admin.js e criar novo router:

```jsx
router.post('/match/:id/score', function (req, res) {
  res.send(req.body)
})
```

Fizemos isso para termos certeza que os dados estão chegando aqui, então vamos parar o servidor e a resposta do score vai ser exatamente o que eu enviei para ele, agora podemos processar esses dados. Vamos setar o valor no placar do banco de dados. Uma das formas que temos de fazer isso no low-db é pegando o índice do jogo e setar lá dentro falando qual o valor vou enviar para ele. Essa informação vai para todos os jogos, então eu devo emitir para todos que estão conectados no Socket.IO:

```jsx
router.post('/match/:id/score', function (req, res) {
  db.set(
    'matches[' + req.params.id + '].team-a.score',
    parseInt(req.body.scoreA)
  ).write()
  db.set(
    'matches[' + req.params.id + '].team-b.score',
    parseInt(req.body.scoreB)
  ).write()
  io.emit('score', {
    match: req.params.id,
    scoreA: req.body.scoreA,
    scoreB: req.body.scoreB,
    notify: req.body.notify || 0
  })
  res.send(req.body)
})
```

Se o notify não existir, ele não vai ser enviado e eu mando zero para não notificar meus usuários. Agora está funcionando perfeitamente, se startarmos o servidor e dermos um f5, vai ser mostrado o valor enviado. Como eu tenho que dar f5 toda hora, tenho que receber no meu client a atualização que o jogo foi alterado, então vamos abrir na pasta js o arquivo match.js:

```jsx
$(function)(){
    const socket = io();
    socket.on('connect', function(){
        console.log('conected');
    })
    socket.on('score', function(score){
        console.log('score', score)
    })
})
```

Perceba que agora, ao atualizar o placar, o usuário recebe o objeto score, então precisamos checar se o jogo está na barra de cima e se é o jogo atual para atualizar na barra principal. Para isso vamos em match.ejs e na lista de jogo que fica na parte de cima, já temos um forEach que vai renderizar todos os jogos e temos para cada jogo um 'em' que tem o nome da class com uma referência para o jogo como um todo.

Vamos copiar esse trecho de código em negrito:

```jsx
<em class="match-<%- index %>-b">
```

Agora vamos voltar para nosso match do client em js/match.js e fazer o seguinte:

```jsx
$(function)(){
    const socket = io();
    socket.on('connect', function(){
        console.log('conected');
    })
    socket.on('score', function(score){
        console.log('score', score)
        //na lista de jogos
        $(". match-"+score.match+"-a").html(score.scoreA)
        $(". match-"+score.match+"-b").html(score.scoreb)
    })
})
```

Perceba que em A nós escrevemos o valor de score.scoreA e o mesmo no B. Agora temos que atualizar a parte de baixo também, então nós temos o score-team-A e o valor do score por exemplo, porém como eu vou saber se esse jogo é o que eu estou atualmente? Em match.ejs, lá no final, antes do include do footer, vamos fazer um script que define uma constante:

```jsx
<script>
const MATCH_INDEX = "<%- id %>";
</script>
```

Quando faço isso, o match.index consegue acessar esse valor, então dentro do nosso match conseguimos checar se estamos em nosso jogo atual:

```jsx
socket.on('score', function (score) {
  console.log('score', score)
  //na lista de jogos
  $('. match-' + score.match + '-a').html(score.scoreA)
  $('. match-' + score.match + '-b').html(score.scoreb)
  //  atualizar o jogo
  if (MATCH_INDEX == score.match) {
    $('.score-team-a').html(score.scoreA)
    $('.score-team-b').html(score.scoreB)
    if (score.notify == '1') {
      console.log('notificar')
    }
  }
})
```

Se o jogo é o que recebemos a notificação, nós notificamos esse gol. Em view/match, lá no final, temos uma div que é uma class goooolllll com um áudio, então se estivermos com o notificado ligado vamos dar um play nesse áudio, voltamos no código anterior e adicionamos o seguinte:

```jsx
if (score.notify == '1') {
  console.log('notificar')
  $('#audio-gol')[0].currentTime = 0
  $('audio-gol')[0].play()
}
```

Por que fizemos o notificar sim ou não? É possível notificar um gol e caso ele seja anulado, você tira o notificar e tira o placar sem alarmar todos. Podemos também fazer uma animação com aquele div que está ali

```jsx
if(score.notify=='1'){
    console.log('notificar')
    $('#audio-gol')[0].currentTime=0;
    $('audio-gol')[0].play();
    $('.goooolllll')addClass('goooolllll-anim')
    $('.goooolllll-text')addClass('goooolllll-text-anim')
    $('.goooolllll-text')on('transitionend webkitTransitionEnd oTransitionEnd', function(){
        $('.goooolllll')removeClass('goooolllll-anim')
        $('.goooolllll-text')removeClass('goooolllll-text-anim')
    })
}
```

Para testar temos que notificar em uma outra aba. Ao clicar, aparece duas classes com essa animação, quando a animação terminar nós removemos essa animação.

Na próxima aula vamos colocar a comunicação do lance a lance e dos vídeos, além de colocar o projeto em um servidor no digitalhost para conseguirmos acessar externamente.

Confira o passo a passo em vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ZJqDWCfxrVw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Minicurso Socket.IO Parte 4 - Separando notificações por Rooms

Source: blog/minicurso-socket-io-parte-4/index.md

Nesta etapa do nosso minicurso de Socket.IO, vamos fazer as atualizações específicas de cada jogo. Primeiro vamos fazer o gráfico da torcida se movimentar.

Dentro de match.ejs, vamos mudar para refletir realmente os valores da porcentagem, se olharmos as barras, vamos ver que na torcida está apenas uma barra fixa:

```jsx
<div class="bar-team-a" style="width: 80%"></div>
<div class="bar-team-b" style="width: 20%"></div>
```

Precisamos alterar esse valor, vamos em routes/index.js e quando pegarmos um jogo vamos calcular a porcentagem da torcida. Se pegarmos nosso banco, para cada time nós temos um **'supporters',** que é o número de pessoas que clicaram na torcida para aquele time em específico, então vamos pegar os dois times e calcular a porcentagem:

```jsx
const supportersA = match['team-a'].supporters
const supportersB = match['team-b'].supporters
const total = supportersA + supportersB
const porcentagem = {
  teamA: 50,
  teamB: 50
}
if (total > 0) {
  porcentagem.teamA = ((supportersA / total) * 100).toFixed(0)
  porcentagem.teamB = ((supportersB / total) * 100).toFixed(0)
}
match.porcentagem = porcentagem
```

Então temos como padrão 50/50, e se for maior que zero, o time A vai ser igual ao número de votos que o time A tem dividido pelo total e multiplicado por 100. Fizemos a mesma coisa para o time B. Por fim, enviamos o objeto porcentagem dentro de match.

Voltando ao match.ejs, temos que colocar os valores lá dentro:

```jsx
<div class="bar-team-a" style="width: <%- JSON.stringfy(match.porcentagem.teamA) %>%"></div>
<div class="bar-team-b" style="width: <%- JSON.stringfy(match.porcentagem.teamB) %>%"></div>
```

Pronto, agora nossa barra está 50/50, quando eu clicar na torcida do time A, vou somar 1 e preciso retornar via Socket.IO a atualização na torcida para a barra.

Nos botões das torcidas, vamos colocar um ID para cada:

```jsx
<div class"column w-col w-col-2"><a class="button w-button" id="na-torcida-a" href="#"/> Na torcida </div>
<div class"column w-col w-col-2"><a class="button w-button" id="na-torcida-b" href="#"/> Na torcida </div>
```

Agora precisamos fazer tudo via JavaScript lá em js/match.js, quando clicar no 'na torcida' do time A ou time B, ele precisa mandar o valor para a barra:

```jsx
$("#na-torcida-a").click(function(){
    $.post("/match/")+MATCH_INDEX+"/supporters", { team: 'a'}, function(data){})
    return false;
}
$("#na-torcida-a").click(function(){
    $.post("/match/")+MATCH_INDEX+"/supporters", { team: 'b'}, function(data){})
    return false;
}
```

Ao clicar em "na torcida" ele envia, mas não recebe nada, pois não existe a rota ainda, então temos que ir no nosso routes/indexjs para criar essa rota logo acima de 'return router':

```jsx
router.post('/match/:id/supporters', function(req, res, next){
    const match = db.get('matches['+req.params.id+']).value()
    if(req.body.team==='a'){
        const newValue =  match['team-a'].supporters+1
        db.set('matches['+req.params.id+'].team-a.supporters', newValue).write()
    }
    if(req.body.team==='b'){
        const newValue =  match['team-b'].supporters+1
        db.set('matches['+req.params.id+'].team-b.supporters', newValue).write()
    }
    res.send({ ok: true })
})
```

Perceba que pegamos o const match para saber o valor do jogo, em seguida fizemos um IF onde incrementamos o A ou B dependendo de qual botão for apertado.

Agora eu preciso falar para todo mundo desse jogo que houve uma atualização nessa partida. Quando a gente cria um projeto no Socket.IO, tudo que se conecta, é conectado a uma sala geral. Vou explicar para ficar mais fácil.

Temos duas formas de atualização, uma que vai para todos os usuários, ou seja, um geral, e também temos uma atualização que vai por jogo.

Imagine que temos um servidor e cinco usuários, porém dois usuários estão no jogo um e três no jogo dois, eu poderia mandar essa informação para todos e separar no client, mas fazendo isso eu vou matar a performance na rede. Imagine mandar a atualização de um vídeo novo, se não estiver selecionando os usuários do jogo especifico, eu mandaria para três usuários de forma desnecessária e se pensarmos em escala perdemos muito recurso trafegando dado que não precisa.

Também temos a situação onde temos que gerar atualização para todo mundo, nesse caso já estamos consumindo o recurso necessário. O importante é conseguir segmentar isso caso a gente queira. Um conceito importante no Socket.IO é o 'room', que são as salas que nós temos, toda vez que um usuário conecta, ele está na sala geral, então já tem um room que engloba todos os usuários que estão conectados ao Socket.IO naquele momento, depois conseguimos criar novas rooms, por exemplo match-1 para o jogo 1, e quando eu quiser mandar uma informação para os usuários dessa sala específica, fica mais simples e é isso que vamos fazer agora. Dentro de js/match.js, vamos fazer uma modificação no código para falar para o servidor em qual sala estamos conectado, isso vai ser feito quando formos chamar o construtor do Socket.IO do client, vai ser passado uma string vazia como url e depois vamos passar um query, que será um objeto com match e dentro dele um MATCH_INDEX:

```jsx
$function(){
    const socket = io('', { query: { match: MATCH_INDEX}});
    ...
}
```

Perceba que agora no route/index.js, quando o usuário conectar, vamos colocar ele na sala:

```jsx
io.on('connect', function (socket) {
  if (socket.handshake.query.match) {
    console.log('user connnected on match', socket.handshake.query.match)
    socket.join('match-' + socket.handshake.query.match)
  } else {
    console.log('a new client connected')
  }
})
```

Agora nosso usuário está na sala especifica do jogo e também na geral. Caso queira que ele receba só a notificação da sala, eu consigo e também consigo que ele receba a atualização de geral como a atualização de placar, por exemplo. Lembrando que não difere em nada para o cliente, afinal ele já vai receber a informação já filtrada.

Continuando em routes/index.js, na hora de atualizar nossos supporters vamos pegar a nossa porcentagem e mandar via Socket.IO:

```jsx
router.post('/match/:id/supporters', function(req, res, next){
    const match = db.get('matches['+req.params.id+']').value()
    if(req.body.team==='a'){
        const newValue =  match['team-a'].supporters+1
        db.set('matches['+req.params.id+'].team-a.supporters', newValue).write()
    }
    if(req.body.team==='b'){
        const newValue =  match['team-b'].supporters+1
        db.set('matches['+req.params.id+'].team-b.supporters', newValue).write()
    }
    const supportersA = match.['team-a'].supporters
    const supportersB = match.['team-b'].supporters
    const total = supportersA+supportersB
    const porcentagem = {
        teamA: 50,
        teamB: 50
    }
    if(total > 0){
        porcentagem.teamA = ((supportersA / total) * 100).toFixed(0)
        porcentagem.teamB = ((supportersB/ total) * 100).toFixed(0)
    }
    io.to('match-'+req.paramns.id).emit('supporters'), porcentagem)
    res.send({ ok: true })
})
```

Como vamos emitir uma atualização 'supporters', temos que ir no js/match.js e falar para o Socket que ele precisa esperar um evento chama supporters:

```jsx
socke.on('supporters', function (supporters) {
  console.log(supporters)
})
```

Com isso sempre que clicar em "na torcida" ele já irá mostrar o novo valor de supporters, agora eu preciso aplicar isso nas barras, quando chegar esse evento em supporters eu preciso atualizar:

```jsx
socke.on('supporters', function (supporters) {
  console.log(supporters)
  $('.bar-team-a').css('width', supporters.teamA + '%')
  $('.bar-team-b').css('width', supporters.teamB + '%')
})
```

Perceba que as atualizações de jogo 1 não chegam em jogo 2, isso significa que já estamos filtrando o que vai chegar em cada um dos jogos.

Agora precisamos fazer a atualização dos vídeos e do lance a lance.

Se abrir o match, você vai perceber que temos vários formulários, como atualizar placar, embaixo temos um formulário de novo lance e por último o vídeo. Vamos começar pelo vídeo, mas os dois são a mesma coisa, vamos fazer apenas porque o do vídeo é um pouquinho mais curto, afinal só temos um ID do vídeo no YouTube e ele já vai subir automaticamente.

Vamos abrir o admin/match.ejs e vamos pegar o botão do vídeo:

```jsx
<div class='text-block-5'>
  <h3>Novo Vídeo</h3>
  <input type='text' id='video-id' placeholder='ID Vídeo' />
  <a class='watch-game-btn' id='video-new'>
    Enviar Vídeo
  </a>
</div>
```

Perceba que temos um vide-ID, que é nosso input, e um vídeo-new que é nosso botão, vamos agora para js/admin.js, lá no final vamos fazer o seguinte:

```jsx
$('#video-new').click(function () {
  alert(1)
})
```

Então quando clicar em video-new, demos um alert para saber se deu certo. Agora vamos fazer um post nesse vídeo

```jsx
$('#video-new').click(function () {
  $.post(
    '/admin/match/' + MATCH_INDEX + '/videos',
    { video: $('#video-id').val() },
    function (data) {}
  )
})
```

Lembrando que temos que atualizar o post anterior:

```jsx
$.post("/admin/match/"+MATCH_INDEX+"/score", {
    scoreA, scoreB, notify
}, function(data){
    console.log(data)
}
```

Vamos voltar em admin/match.ejs e checar, afinal ele não tem definido ainda o MATCH_INDEX:

```jsx
<script>const MATCH_INDEX = "<%- id %>;</script>
```

Agora vamos fazer a rota que vai realmente salvar o vídeo, para isso precisamos ir em routes/admin.js e da mesma forma que fizemos uma rota para o supporters vamos fazer uma para vídeos:

```jsx
router.post('/match/:id/videos, function(req, res, next){
db.get('matches['+req.params.id+'].videos)
    .push(req.body.video).write()
    io.to('match-'+ req.params.id).emit('video', req.body.video)
    res.send(req.body)
})
```

Demos um push no setor de vídeos para adicionar um vídeo novo e depois emitimos que esse vídeo na sala match com o ID específico. Agora quando a gente adicionar e chegar via Socket.IO no jogo que queremos eu preciso atualizar esse vídeo na página, então eu vou voltar ao match.js que é nosso client e colocar mais um evento:

```jsx
socket.on('video', function (video) {
  console.log(video)
})
```

Vou fazer algo um pouco diferente. Se pegarmos o match.js, vamos perceber que os vídeos têm um monte de coisas, não é igual a barra de supporters. Nos arquivos de apoio que foram enviados, você vai perceber que tem um outro item embaixo do vídeo que é um script, que é do tipo x-handlebars-templete. Eu fiz isso para que ao invés de ter que escrever tudo isso dentro de JavaScript, vou usar isso como template e vai ficar muito mais fácil de conseguir atualizar esse trecho de código porque vamos conseguir escrever esse trecho de html sem necessariamente escrever o html no JavaScript.

Então vamos em js/match.js e lá em cima, antes de começar todos os códigos, vamos deixar em cach:

```jsx
const videoTemplete =  Handlebars.compile($("#video-templete).html())
```

Então estamos pegando o valor do vídeo em html e falando para o handlebars compilar. Perceba que no script que eu citei antes tem uma variável lá dentro, a gente vai conseguir adicionar o vídeo apenas trocando essa variável {{ video }} de lá de dentro.

Quando chegar um vídeo, vou fazer o seguinte:

```jsx
socket.on('video', function (video) {
  console.log(video)
  $('videos-wrapper').append(videoTemplete({ video }))
})
```

Com isso, não precisamos mais escrever html, apenas compilamos o templete. Agora precisamos fazer o mesmo para o lance a lance, e aproveitando que estamos em js/match.js, vamos fazer o seguinte:

```jsx
socket.on('bid'), function(bid){
    $("#bids-wrapper").prepend(bidTemplete)(bid))
})
```

Lembrando que temos que compilar o template lá em cima do código:

```jsx
const bidTemplete =  Handlebars.compile($("#bid-templete).html())
```

Vamos voltar em nosso js/admin.js e quando eu clicar em enviar lance que tem o ID bid-new, vou fazer um post para /admin/match/"+MATCH_INDEX+"/videos

```jsx
$('#video-new').click(function () {
  $.post(
    '/admin/match/' + MATCH_INDEX + '/videos',
    { video: $('#video-id').val() },
    function (data) {}
  )
})

$('bid-new').click(function () {
  $.post(
    '/admin/match/' + MATCH_INDEX + '/bids',
    {
      time: $('#bit-time').val(),
      half: $('#bid-half').val(),
      team: $('#bid-team').val(),
      subjct: $('bid-subject').val(),
      description: $('bid-description').val()
    },
    function (data) {}
  )
})
```

Enviamos todos esses dados para lá o admin.js e criar a mesma coisa que o router.post do vídeo com a diferença que temos que criar um objeto bid, mudar os nomes e enviar o bid via Socket.IO.

```jsx
router.post('/match/:id/bids', function (req, res, next) {
  const bid = {
    time: req.body.time,
    half: req.body.half,
    team: req.body.team,
    subject: req.body.subject,
    description: req.body.description
  }
  db.get('matches[' + req.params.id + ']'.bids)
    .push(bid)
    .write()
  io.to('match-' + req.params.id).emit('bid', bid)
  res.send(req.body)
})
```

Nossa interface já está atualizando em tempo real já segmentado pela sala. [Na próxima aula](https://www.devpleno.com/minicurso-socket-io-parte-5/), vamos ver como colocar esse projeto no ar, assim você pode utilizar esse projeto como portfólio para um potencial cliente, como o projeto com atualização em tempo real vai ficar e também o que fazer a partir daí.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/UFKOeDqbhsc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Minicurso Socketio - Parte 05 - Colocando o projeto no ar

Source: blog/minicurso-socket-io-parte-5/index.md

Chegamos à última etapa do nosso Minicurso de Socket.IO. Nessa aula, nós vamos colocar o projeto no ar para que você possa utilizá-lo como um projeto de portfólio e também mostrar as atualizações em tempo real para um potencial cliente. Além disso, eu vou mostrar como a gente pode deixar ele mais resiliente a falhas, como podemos gerar auto scalling, como aumentar a disponibilidade desse projeto. Além disso, vamos falar sobre outras melhorias que são muito importantes quando colocadas em produção.

A primeira coisa é que vamos colocar o projeto para rodar no digital ocean, se você ainda não colocou nada no ar, ele é a melhor experiência para fazer isso porque ele é bastante simples e também barato, custa em torno de 5 dólares por mês por uma máquina que tem 512mb de ram, então se você for rodar um site de portfólio já é o suficiente.

Eu já estou logado na minha conta, nela já tenho o cartão de crédito atrelado então já consigo criar um droplet aqui sem nenhum problema, eu aconselho a entrar em digitalocean.com e colocar os seus dados bancários também porque eles vão pedir.

Vou dar um create Droplet. Uma coisa que é muito legal do digital ocean é que podemos começar uma máquina do zero, instalar o node e etc, ou ir em One-click apps e escolher uma máquina já preparada para isso, ali já tem o Node em uma versão boa, que é a 6.10.3 e no Ubunto 16.04. Então eu vou clicar em NodeJS 6.10.3:

![Exemplo 1](socketpart5Ex1.png)

E no tamanho da máquina eu vou escolher a de 5 colares:

![Exemplo 2](socketpart5Ex2.png)

Eu já rodei aplicações production read e, em uma máquina de 10 dólares. tivemos 100 conexões simultâneas no Socket.IO, então não é uma escala muito grande, mas já deu para medir bastante e não teve quase nada de uso de memória.

Quando trabalhamos em escala, pensamos exatamente isso, máquinas menores, mas trabalhando juntas, com isso conseguimos ligar e desligá-las de maneira mais satisfatória, então se você tiver um pico de acesso é possível aumentar o número de máquinas e diminuir caso caia o número de acesso.

Em seguida, escolhemos qual a região que queremos, eles não têm na América do Sul, então obviamente eu deixo no padrão de New York, não mexo em mais nada, apenas ativo o monitoramento.

![Exemplo 3](socketpart5Ex3.png)

E no nome vou colocar placar-online.

Em seguida vou dar um Create (o legal do digital ocean é que ele é muito rápido para criar). Terminando, ele vai enviar um email com os dados do servidor, nome de usuário e senha.

Vamos fazer alguns testes, primeiro precisamos acessar a máquina com o ssh primeiro para poder depois enviar os arquivos, então vamos copiar o ip - no caso do Mac, a gente consegue acessar o ssh direto. No caso do Windows, vou mandar um e-mail para você de como fazemos esse acesso usando o putty.

Se você estiver utilizando o comander no Windows, é possível fazer da mesma forma que vamos fazer agora.

Vamos lá, primeiro damos o comando:

```jsx
SSH root@IpDoServidor
```

Lembrando que é muito importante que coloquei **root@**, porque senão ele vai tentar logar com o usuário da sua máquina. Em seguida, ele pede a senha (basta só colocar a senha, ele irá pedir para trocar a senha no primeiro acesso).

Agora já estou no placar online, vamos **em cd/opt/** e aqui já temos uma pasta digital ocean, vamos criar outra com **mkdir placar-online** e dar um cd nela.

Por enquanto, essa parte eu vou parar por aqui e vou abrir o fileZilla que será um processo igual para os dois, tanto Mac quanto Windows e colocar o ip do meu servidor, login root e senha:

![Exemlplo 4](socketpart5Ex4.png)

Agora irei na mesma pasta que eu estava no shell, que é a /opt/, dentro dela temos o placar online, vamos fazer o upload dos nossos arquivos dentro dessa pasta, mais especificamente as pastas **bin, data, public, routes, views** e os arquivos **package.json, app.js e yarn.lock**. A única pasta que não vamos subir é a node_modules. Sempre que formos instalar dependências, temos que fazer isso dentro da máquina que vamos rodar, isso é uma boa prática porque às vezes têm alguns módulos do node que são compilados de acordo com a plataforma.

Voltando ao shell, depois que todos os arquivos forem upados, vou dar um **npm install** apenas para instalar as dependências.

Agora já temos o projeto rodando, vamos checar se ele está rodando realmente:

```jsx
node bin/www
```

como ele está com a saída vazia vamos fazer:

```jsx
PORT= 80 npm start
```

Agora vou abrir o navegador e verificar se está realmente rodando:

![Exemplo 5](socketpart5Ex5.png)

Está rodando perfeitamente! Perceba que eu coloquei PORT= 80, isso significa que eu defini uma variável de ambiente antes de iniciar o servidor. Não seria interessante deixar o shell aberto para que nosso serviço fique online, então vamos fazer o seguinte:

```jsx
npm install -g pm2
```

O pm2 é um pacote do npm que permite startar serviços como serviços do linux.

Agora vou dar um **vi start.json**, quando nós vamos startar uma aplicação pelo pm2 temos que definir para ele algumas variáveis de ambiente, igual o port que colocamos logo acima, porque ele não reconhece automaticamente essas variáveis do ambiente:

```jsx
{
    "script": "bin/www",
    "env":{
    "PORT": 80,
    "NODE_ENV": "production"
}}
```

Então vou criar um Json com um script que é um env com duas propriedades dentro.

Agora faremos **pm2 start start.json**, perceba que ele já startou o próprio json:

![Exemplo 6](socketpart5Ex6.png)

A vantagem é que pelo pm2 eu consigo ver como ele está utilizando o **pm2 status**

![Exemplo 7](socketpart5Ex7.png)

Uma dica adicional: se quiser parar o serviço, digite:

```jsx
pm2 stop all
```

Se alterar o json com a configuração de início, ele não vai funcionar, então temos que fazer um **pm2 delete** para ele apagar o processo e depois sim startar o serviço, senão ele vai pegar sempre o cache. Então aqui já temos o nosso projeto rodando perfeitamente para poder usar como portfólio e com isso chegamos ao fim do nosso minicurso sobre Socket.IO.

Podemos deixar ainda melhor para produção esse nosso serviço, usando escalabilidade, e você pode saber mais sobre esse assunto [na Formação Fullstack Master](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog).

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/wtF5Cv_-SyU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Módulo Co - Organize o fluxo de seu código assíncrono

Source: blog/modulo-co/index.md

Neste hands-on, vamos utilizar uma ferramenta bastante útil no nosso dia a dia, o módulo CO, que é uma forma de controlar o fluxo das funções por meio de generator no JavaScript. Vamos lá, a primeira coisa é adicionar o co:

```jsx
yarn add co
```

O problema que tínhamos era de ler um arquivo, baseado no conteúdo desse arquivo, iterávamos sobre ele e dentro dessa iteração tínhamos que escrever outros arquivos. Se formos fazer isso com código assíncrono normal, isso se torna extremamente confuso porque temos iteração sobre operações assíncronas que dependem de outras operações assíncronas, já com o generator é muito mais simples porque podemos fazer o seguinte:

No diretório CO, eu criei um arquivo test.js, dentro dele vou importar o CO e o FS e criar uma função readFile onde passamos apenas o arquivo que queremos.

```jsx
const co = require('co')
const fs = require('fs')
function readFile(file) {
  fs.readFile(file, 'utf-8', function (err, data) {
    console.log(data)
  })
}
readFile('yarn.lock')
```

Teoricamente, para fazer essa função funcionar, normalmente eu preciso passar para ela um callBack, mas vamos fazer um pouco diferente. Para usar o generator, as funções que chamamos assíncronas têm que ser promises, ou seja, temos que converter essas funções:

```jsx
function readFile(file){
    return new promise(function(resolve, reject){
        fs.readFile(file, 'utf-8', function(err, data){
            if(err){
                reject(err)
            }else{
            resolve(data)
            }
        })
    })
}
readFile('yarn.lock')
.then(function(data)){console.log(data)})
```

Estamos pegando essa função que depende de um callBack e ao invés de retorná-la, retornamos uma promise e isso será executado no futuro. Quando ele chamar o callBack, vai rejeitar a promise ou resolver e passa os dados de volta.

Esse código funcionou igual o anterior, mas perceba que ainda está muito chato. Imagine se tivermos que ler 10 arquivos, como faríamos? Vamos melhorar isso usando o CO:

```jsx
function readFile(file) {
  return new promise(function (resolve, reject) {
    fs.readFile(file, 'utf-8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}
co(function* () {
  const contents = yield readFile('yarn.lock')
  console.log(contents)
})
```

Como tem um \* ele é um generator, e podemos interromper a execução dele com yield e por baixo dos panos ele retorna um iterator que consegue voltar depois, o código continua sendo assíncrono, mas a única diferença é que ele mostra o código de uma forma mais fácil de entender.

Nós transformamos um código que era assíncrono com callBack, o transformamos em uma promise e quando usamos o CO conseguimos fazer que essa função seja executada de uma forma que parece que ela é síncrona, mas na verdade é assíncrona. Podemos, por exemplo, ler dois arquivos ao invés de um:

```jsx
co(function* () {
  const file = ['yarn.lock', 'package.json']
  for (let i = 0; i < file.length; i++) {
    let contents = yield readFile(file[i])
    console.log(contents)
  }
})
```

Executando esse código ele conseguiu carregar todos os arquivos em sequência. Imagine o quanto você consegue simplificar o seu fluxo de um programa assíncrono só utilizando o próprio CO e o generator function. Podemos também fazer uma lista de promises e depois retornar todos os arrays processados segurando o código com o yield. A vantagem disso é que criamos um paralelismo, fazendo com que as promises sejam executadas de forma paralela.

```jsx
co(function* () {
  const file = ['yarn.lock', 'package.json']
  const filePromises = []
  for (let i = 0; i < file.length; i++) {
    filePromises.push(readFile(file[i]))
  }
  const contents = yield filePromises
  console.log(contents)
})
```

Agora colocamos o yield para baixo e ele está esperando uma lista de promises para serem resolvidas, já o contents é um vetor com todas as respostas dessas promises. Isso é muito legal quando você for fazer um script que precisava mover arquivo, movendo diretório, fazendo coisas recursivas, etc. Com o generator e ajuda do CO fica muito mais fácil de entender o processo.

Agora entenda melhor sobre [Generators Functions e tudo que acontece "por baixo dos panos".](https://www.devpleno.com/generators-functions/)

Confira o Hands-on em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/IXsxtIZuY90" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos: Módulo em NodeJS

Source: blog/modulos/index.md

**O que é Módulo em NodeJS?**

É um script php no qual você consegue incluir em um outro script. É uma maneira bem tradicional de se organizar as partes funcionais do código.

Vamos fazer um teste simples apenas para testar o require, que é a forma de importar esse módulo.

Crie um novo arquivo no Node e coloque um nome qualquer, o meu será modulo01.js, esse arquivo será meu módulo, dentro dele terá:

```jsx
console.log('Dentro do modulo')
```

Salve e crie um novo arquivo chamado app.js. Nele vamos fazer o seguinte:

```jsx
require('./modulo01')
```

Ao executar o app.js, o require chama o modulo01 e apresenta a frase do nosso arquivo modulo01.js

O interessante nessa forma de gerir os módulos no node é que seria como se ele estivesse em uma closer como uma self invoking, porque ele isola o nosso escopo inteiro.

Para fazermos uma funcionalidade um pouco melhor, podemos falar para esse módulo exportar, por exemplo, um contar:

```jsx
var contador = 0
module.exports.contar = function () {
  contador++
  console.log(contador)
}
```

Com isso estamos expondo um pedaço do nosso módulo para o que está externo, criando uma pequena interface chamada contar.

Quando fizermos o require do módulo no app.js, podemos atribuir ele a uma variável:

```jsx
var m1 = require('./modulo01')
m1.contar()
```

Assim o m1 recebe uma self invoking e conseguimos ter acesso ao contar que expomos para o que está externo.

Um exemplo que podemos fazer é o seguinte:

```jsx
var m1 = require('./modulo01')
m1.contar()
var m2 = require('./modulo01')
m2.contar()
```

O require só é executado uma vez. Mesmo sendo executado duas vezes, a primeira vez que ele executar a self invoking function vai ser mantida. Esse comportamento é semelhante ao singleton do java e c#, por exemplo.

Vamos criar um novo arquivo modulo02 e um app02, no módulo 2 terá um exemplo um pouco diferente, ao invés de deixar ele criar o escopo como quiser, eu vou criar o modulo02 dentro de uma variável e criar minha própria function, ou seja, vou criar um escopo só para esse módulo:

```jsx
var modulo02 = function (initialValue) {
  var contador = initialValue
  return {
    contar: function () {
      contador++
    },
    escrever: function () {
      console.log(contador)
    }
  }
}
module.exports = modulo02
```

Essa variável contador é semelhante a um atributo da classe de forma privada, ou seja, não está disponível de forma global, com isso podemos 'explicitar' uma interface que queremos que todos os outros enxerguem, retornando um objeto com duas funções.

A primeira vai só incrementar, a segunda function só escreve e finalmente vamos expor o nosso módulo todo para o 'mundo'.

Agora, indo para o app02.js, faremos o seguinte:

```jsx
var m1 = require('./modulo02')
```

Se fizermos apenas isso, perceba que a function será retornada mas não vai executar a função, então temos que passar o valor inicial que eu quero:

```jsx
var m1 = require('./modulo02')(1)
var m2 = require('./modulo02')(2)
m1.contar()
m2.escrever()
```

Fazendo isso, isolamos os 2 módulos através de uma closer, que é muito semelhante a uma classe.

Teríamos atributos, métodos públicos e métodos privados, pois como eu não exponho ele, então seria visível em um mesmo escopo.

```jsx
var modulo02 = function (initialValue) {
  //atributos
  var contador = initialValue
  //metodo privado
  var ooo = function () {}
  //metodos publicos
  return {
    contar: function () {
      contador++
    },
    escrever: function () {
      console.log(contador)
    }
  }
}
```

Isso seria um constructor porque ele consegue definir os valores iniciais e seria executado quando instanciamos o módulo.

Essa é uma das maneiras que temos de organizar módulos, vamos falar mais sobre isso posteriormente.

Confira a explicação completa em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/IXsxtIZuY90" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Mono ou multi thread - POO para JS

Source: blog/mono-ou-multi-thread-poo-para-js/index.md

Hoje vou continuar falando um pouco mais sobre como podemos fazer a transição de uma linguagem orientada-objeto, como PHP ou Java, para JavaScript cada vez mais funcional.

Mais especificamente vamos falar sobre “processamento concorrente”, entre aspas, porque hoje, com vários núcleos, nós conseguimos ter um processamento praticamente concorrente. Quero mostrar um problema que é muito comum quando a gente quer exercitar concorrência em linguagens POO. Principalmente em Java, trabalhamos muito com isso para mostrar essa concorrência.

O que fazemos com concorrência em Java?

Nós criamos o que chamamos de threads, que é uma linha de execução. Por exemplo, se eu criar algo

como:

```jsx
const a = 1
const b = 10
```

Essa linha de execução em Java, por ser uma linguagem síncrona, então eu posso travar a linha de execução. Para evitar que isso aconteça, nós criamos uma nova thread.

É muito comum nessas linguagens termos um while(true) checando se algo chegou, como por exemplo conexão de socket. Ela tem suas vantagens e suas desvantagens, mas ela tem um limite onde acabamos tendo alguns problemas para gerenciar essas threads.

Já o JavaScript é mono-thread, com isso ele não mantém várias linhas de execução em paralelo, e sim mantém uma estrutura que vai ser executada depois. Por exemplo:

```jsx
const a = 1
const b = 2
```

Quando executamos essa linha de código em JavaScript, ele entra em algo que chamamos de event loop. É como se fosse uma caixa onde colocamos coisas lá dentro, tudo que vai para ela podemos desempilhar depois. É assim que ele consegue lidar com várias coisas ao mesmo tempo.

Por que isso é tão importante?

Principalmente no navegador, essa característica do JavaScript permite que a gente não bloqueie a tela. É muito comum em Java por exemplo, se você não criar uma thread nova e clicar em um botão swing, ao passar o mouse em cima da interface, ela fica com loading. Em JavaScript isso não acontece porque um dos stacks que ele tem é o de processamento gráfico, então ele não deixa acontecer se utilizarmos as boas práticas.

Para evitar que nosso programa trave no tempo que está executando uma linha de código, podemos utilizar o seguinte:

```jsx
const fs = require('fs')
const a = 1
const b = 2
console.log('inicio')
fs.readdir('./', (err, files) => console.log(files))
console.log('fim')
```

Com isso o resultado é que o início e fim virão antes do readdir. Ela vai ser empilhada no event loop e quando acabar a execução, vai sair da pilha.

Agora vamos supor que eu tenho uma operação um pouco pesada, temos uma forma de mandar para o event loop utilizando o setTimeOut(() => console.log('event loop'), 0) e ao invés de passar um tempo, se passarmos zero vamos empilhar isso dentro do event loop.

Para fechar, vamos fazer um problema conhecido como Produtor-Consumidor, esse é um problema muito recorrente que utilizamos para aprender essa forma de lidar com várias threads em Java.

Temos uma função producer, que é a que produz, e uma função consumer, onde consome algo:

```jsx
const stock = \[\]
function producer() {}
function consumer() {}
```

Então, quando eu produzo, jogo em stock e o consumidor irá consumir do stock. O problema é que essas duas functions rodam separadamente, se fossemos fazer isso em Java, teríamos que ter duas threads. Para simular essa questão em JavaScript:

```jsx
const stock = \[\]
function producer(){
    console.log('producer')
    setTimeOut(producer, Math.ceil(Math.random()\*3000))
}
function consumer(){
    console.log('consumer')
    setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
```

Lembrando que o math.random retorna um número de 0 a 1, em seguida vamos multiplicar pelo valor máximo e arredonda para cima.

Com isso vamos mandar produzir pelo menos um e começar a consumir:

```jsx
producer()
consumer()
```

Agora, quando quisermos produzir, vamos colocar no stock:

```jsx
const stock = \[\]
function producer(){
    console.log('producer', stock.length)
    stock.push(Math.random()\*100)
    setTimeOut(producer, Math.ceil(Math.random()\*3000))
}
```

Agora eu preciso consumir esse valor:

```jsx
function consumer(){
    const item =  stock\[stock.length-1\]
    stock.splice(stock.length-1, 1)
    console.log('consumer', stock.length)
    setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
```

Se tentarmos consumir e não tiver no estoque, não vai dar certo, então podemos fazer o seguinte:

```jsx
function consumer(){
    if(stock.length===0){
        console.log('não foi possível consumir')
    } else {
        const item =  stock\[stock.length-1\]
        stock.splice(stock.length-1, 1)
        console.log('consumer', stock.length)
    }
    setTimeOut(consumer, Math.ceil(Math.random()\*3000))
}
```

Com isso temos uma sensação de que estão trabalhando separadamente, mas na verdade estamos empilhando e depois desempilhando após um tempo aproximado.

Por que é importante saber que isso acontece?

Porque basicamente qualquer operação pesada acontece de forma assíncrona.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/iGV8gjzx3to" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# O Que é Morgan no Node.js? Guia Prático de HTTP Logging com Express

Source: blog/morgan/index.md

> Aprenda o que é o Morgan, como instalar e configurar no Express para logar requisições HTTP. Exemplos práticos com todos os formatos de log.

O hands-on de hoje é sobre o Morgan, que é uma forma de logar ou mostrar quais requisições estão chegando em nosso servidor HTTP, seja ele feito no Express ou em Node puro utilizando o módulo HTTP.

A primeira coisa que temos que fazer é adicionar as dependências:

```jsx
yarn add express morgan
```

Eu já tenho um arquivo teste criado e vou começar a importar o que precisamos:

```jsx
const express = require('express')
const morgan = require('morgan')
const app = express()
app.get('/', (req, res) => {
  res.send('olá DevPleno')
})
app.listen(3000, () => console.log('listenning'))
```

Agora vamos colocar o Morgan como um Middleware e ele vai interceptar toda a requisição que chegar:

```jsx
app.use(morgan('combined'))
```

Perceba que, ao dar F5 na página, ele traz as informações:

![Exemplo 1](MorganEx1.png)

Isso é muito legal porque no Apache já temos isso, e se estivermos rodando isso na Amazon, temos a possibilidade de conseguir recuperar esses dados. Temos uma outra versão que é o Tiny:

```jsx
app.use(morgan('tiny'))
```

![Exemplo 2](MorganEx2.png)

Nele temos um retorno mais simples, o método, saída e tempo de resposta. Ainda temos uma terceira forma, que é um padrão personalizado:

```jsx
app.use(morgan(':method :url :response-time'))
```

![Exemplo 3](morganEx3.png)

Lembrando que, pela Amazon, você pode guardar isso enviando para o S3. Indo para lá, você pode guardar essas informações por muito tempo.

Essa é a ideia para gerar dados toda vez que a gente recebe uma requisição no Express, isso é bastante útil, é algo que já existe no Apache, mas temos que adicionar como Middleware no Express e assim configurar da maneira que queremos.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/19HkfrtUm38" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Morro de vontade...

Source: blog/morro-de-vontade/index.md

Você sempre morre de vontade de aprender alguma tecnologia ou algo novo? Saiba que isso na área de tecnologia da informação não é muito desculpa....

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-r_AKkjd1_c" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Multer upload de imagens com nodejs e express

Source: blog/multer-upload-de-imagens-com-nodejs-e-express/index.md

Hoje vou mostrar uma dica rápida de como podemos fazer upload no NodeJS utilizando o Express. Para isso vamos utilizar o Multer.

A primeira coisa que vamos fazer é o seguinte:

```jsx
yarn add express ejs multer
```

Agora, com o Visual Studio Code aberto, vamos criar um arquivo novo index.js e também uma pasta view com um arquivo home.ejs dentro dele, em seguida faremos o seguinte em index.js:

```jsx
const express = require('express')
const app = express()
app.set('view-engine', 'ejs')
app.get('/', (req, res) => res.render('home'))
app.post('/', (req, res) => {
  console.log(req.body, req.files)
  res.send('ok')
})
app.listen(3000, () => console.log('running...'))
```

Já dentro de home.ejs vai ter o seguinte:

```jsx
<h1>Upload</h1>

<form method="post" ectype="multipart/form-data">
    <input type="file" name="img" />
    <button type="submit">Enviar</button>
</form>
```

O 'enctype=”multipart/form-data”' significa que vamos mandar os campos em vários formatos.

Quando enviamos uma foto, por exemplo, vai retornar dois undefined, isso significa que não estamos tratando nem o file e nem o body, por isso precisamos do multer.

O multer é um middleware, por esse motivo conseguimos rodar antes da requisição:

```jsx
const express = require('express')
const app = express()
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.set('view-engine', 'ejs')
app.get('/', (req, res) => res.render('home'))
app.post('/', upload.single('img'), (req, res) => {
  console.log(req.body, req.file)
  res.send('ok')
})
app.listen(3000, () => console.log('running...'))
```

Reparem que agora temos no body um arquivo vazio e o outro undefined traz informações sobre a imagem juntamente com onde foi salva a imagem.

Nós conseguimos controlar também qual o nome que vamos dar para essa imagem.

Podemos criar um diskStorage, ele é um objeto que tem duas keys, destination que é onde eu vou salvar. Além disso, posso pegar um filename:

```jsx
const express = require('express')
const app = express()
const multer = require('multer')
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/')
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.ogirinalname)
  }
})
const upload = multer({ storage })
```

Nós conseguimos controlar como vamos fazer o upload através do storage. Além disso, podemos criar um memory storage, onde ele vai retornar para nós um buffer dentro do file. É aconselhável utilizar ele exatamente onde você precisa, nunca coloque esse middleware como global.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/FKnDvu_eODY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Sobreviver em um mundo de abundância

Source: blog/mundo-de-abundancia/index.md

Hoje eu gostaria de compartilhar uma lição que a minha mãe sempre falava pra mim quando estava em um momento de decidir algo em minha carreira.

Ela sempre falava de uma maneira bastante simples que as coisas podem ser melhores no futuro. Toda vez que eu vejo uma oportunidade, lembro disso. Vou contar uma história para vocês entenderem melhor.

Eu estava para decidir se eu iria trabalhar em uma empresa ou não, meu cenário na época era fazer faculdade de manhã e dar aula a noite, então eu tinha a tarde livre. Então eu recebi uma oferta de trabalho para ganhar mais ou menos 3 ou 4 vezes mais, porém trabalhando de manhã e à tarde, tendo que mudar meu horário da faculdade para noite. Estava nesse dilema e resolvi perguntar para minha mãe, ela disse o seguinte:

“Você já está no terceiro ano de faculdade e já está aparecendo oportunidades como essa, se você continuar como está, vai poder se dedicar mais à faculdade para que, no futuro, quando você se formar, oportunidades ainda melhores apareçam.”

Isso é uma visão que hoje eu vejo como uma visão de abundância. Se encararmos que a oportunidade que temos é única, não vamos evoluir nunca. Ela pode ser uma boa oportunidade, mas eu posso ter outras. Vivemos em um mundo de abundância de conhecimento e existe fartura.

Depois que eu fiz isso, fiquei muito apertado financeiramente e você comecei a pensar na decisão que fiz de não aceitar a oportunidade, então minha mãe também me disse para não olhar mais para trás. Ela estava certa mais uma vez. Quando se toma uma decisão, é importante que não ficar se questionando sobre como poderia ter sido caso tivesse feito uma escolha diferente. Pense nisso.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/e-7FXzaYPt8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Trabalhar na Toptal ou por meio da Toptal?

Source: blog/na-toptal-ou-por-meio-da-toptal/index.md

Qual a diferença de trabalhar na Toptal e por meio da Toptal? Sim, existe diferença! Entenda tudo que precisa saber neste vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7jcWMc712Wc" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais em [https://go.devpleno.com/fsm/](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

[![Curso DevReactJS](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Navigator Geolocation API - Sabendo a localização do usuário

Source: blog/navigator-geolocation/index.md

Hoje quero dar uma dica para vocês sobre geolocalização no navegador. É uma API que está cada vez mais disponível nos navegadores. O interessante é que conseguimos fazer aplicações WEB que tenham esse senso de localização.

Alguns dos métodos que eles têm:

```jsx
<html>
  <body>
    <script>
      if('geolocation' in navigator){} else {Alert('ops')}
    </script>
  </body>
</html>
```

A partir disso, conseguiríamos checar a nossa localização. Podemos, por exemplo, fazer:

```jsx
if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      console.log(position)
    },
    function (error) {
      Console.log(error)
    }
  )
} else {
  Alert('ops')
}
```

Ao rodar o código e inspecionar, perceba que ele retorna a nossa posição.

Se sua aplicação necessita ter essa possibilidade de checar a posição, é importante checar se não retornou um erro caso o usuário não aceite a verificação.

Outra coisa bem interessante é que podemos checar, de tempos em tempos, a posição do usuário, fazendo um tracker, por exemplo:

```jsx
watcher: navigator.geolocation.watchPosition(function (position) {
  console.log(position)
})
```

Agora, à medida que essa coordenada ficar mais precisa, vai ser melhor, pois ela vai nos trazendo essas informações.

Conseguimos aumentar essa precisão também utilizando o enableHighAccuracy:

```jsx
watcher: navigator.geolocation.watchPosition(
  function (position) {
    console.log(position)
  },
  function (error) {
    console.log(error)
  },
  { enableHighAccuracy: true, maximumAge: 30000, timeout: 30000 }
)
```

No caso do watcher, podemos apagar, equivalente ao que podemos fazer com o clear interval:

```jsx
Geolocation.clearWatch(watcher)
```

Esse é um pouco do geolocation. Eu trouxe essa dica pois a utilizamos no Fullstack Academy e eu já construí algumas aplicações utilizando isso também.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/WrzA8oqcxjA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Como fazer Networking corretamente

Source: blog/networking/index.md

Networking é uma palavra muito utilizada atualmente. A maioria acha que deve ser feito o tempo todo, em todo lugar, e tenta forçar isso.

**O que é problemático?**

É exatamente esse networking forçado, no qual você não tem uma sinergia tão grande, então pega cartão por pegar, entrega por entregar, faz por fazer.

**Como fazer Networking?**

A resposta mais simples é: NÃO faça networking! Se você tem na sua cabeça que precisa fazer isso, você não está fazendo.

A maneira mais interessante capaz de te gerar valor ao longo do tempo é ajudar as pessoas. Gere valor a elas, esse é o primeiro ponto. Na faculdade, você tem facilidade em programação? Ajude colegas com os exercícios. Tem facilidade em gestão de projetos? Ajude as pessoas em gestão de projetos.

Um outro ponto interessante é fazer o que você se propôs de uma maneira muito bem feita e entregue o seu melhor, assim você deixa claro que é muito bom.

Por exemplo, se você entregou algo a um cliente, ele é um ponto de networking. Eu tenho vários clientes antigos, para os quais eu entregava tanto valor, que até hoje nos encontramos e ficamos conversando por horas. Eles não são mais cliente, mas eu ainda mantenho contato.

Isso é networking! Gerar valor, não tentar fazer networking pedindo algo à pessoa logo após entregar um cartão.

Não se esqueça de que o networking é gerar amizades. Não é legal querer ter contatos puramente por resultados financeiros. Reflita sobre isso, você está mesmo fazendo networking do jeito certo?

Deixe suas sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Networking da maneira certa

Source: blog/networking-da-maneira-certa-carreira/index.md

É muito comum e difundido que temos que fazer networking custe o que custar. Mas veja como fazer isso da maneira que te dê mais resultados e a forma que venho fazendo em minha vida.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/wWiB2ojkaRA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Qual o nível de inglês para trabalhar por meio da Toptal?

Source: blog/nivel-de-ingles-para-a-toptal/index.md

O inglês é um fator importante para ingressar na Toptal, já que toda comunicação é feita nesse idioma. Mas qual o nível de inglês necessário? Descubra neste vídeo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/BJbXYqUYxBg" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

[![Curso](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas

Source: blog/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas/index.md

Neste vídeo da série NodeJS Primeiros Passou vamos conferir um módulo que nos auxilia muito no controle de operações assíncronas/async, principalmente, quando potencialmente poderão ser executadas em cascata.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Hllw7QKsJac" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos: Async - Map

Source: blog/nodejs-primeiros-passos-async-map/index.md

Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando a mesma operação assíncrona em uma lista de dados e agrupando o resultado no fim.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/gBRGWY71pcw" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos: Async - Waterfall

Source: blog/nodejs-primeiros-passos-async-waterfall/index.md

Neste vídeo, vou mostrar uma outra forma de organizar códigos assíncrono, neste caso, executando em cascata (um após o outro).

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/p_CxjcgovRc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# NodeJS Primeiros Passos: Módulos

Source: blog/nodejs-primeiros-passos-modulos/index.md

Neste vídeo vamos abordar organização de código em NodeJS através de módulos.

Código fonte criado no vídeo: https://github.com/devpleno/nodejs-modulos

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/9yX4ifWa0YU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Vídeo sobre NodeJS com Promises

Source: blog/nodejs-primeiros-passos-promises/index.md

Neste vídeo vamos organizar o código assíncrono para facilitar a manutenção posterior do código. Evitando que o código "cresça para frente" :)

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ogg4mDfgGHg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Normalizar-email

Source: blog/normalizar-email/index.md

Hoje eu quero comentar um detalhe de implementação de e-mail muito interessante e como podemos contornar essa característica que temos em alguns endereços de e-mail.

Uma coisa que muita gente acredita é que nossos e-mails somente funcionam dessa maneira:

```jsx
tuliofaria@devpleno.com
```

Um detalhe é que podemos adicionar alguns itens a mais nesse e-mail e aí depende do provedor permitir ou não esse e-mail.

No caso do Gmail nós conseguimos colocar alguma string qualquer na frente:

```jsx
tuliofaria+string@devpleno.com

tulio.faria@devpleno.com
```

Nós podemos utilizar o primeiro exemplo em alguns sistemas, onde queremos criar mais de uma conta com o mesmo e-mail e também para verificar de onde veio esse e-mail.

Se eu cadastrei esse e-mail em [americanas.com](https://www.americanas.com.br/) eu posso utilizar por exemplo:

```jsx
tuliofaria+americanas@devpleno.com

```

Se a gente quiser construir um sistema e desconsiderar essas características de que cada provedor corrige podemos utilizar um módulo chamado normalize-e-mail, ele vai fazer exatamente isso, pegar esse e-mail que está sujo e, dependendo das normalizações que o provedor faz, vai fazer também:

```jsx
yarn add normalize-email
const normalize-email = require('normalize-email')
console.log(normalizeEmail('tuliofaria+americanas@gmail.com'))
console.log(normalizeEmail('tulio.faria+americanas@outlook.com'))
```

Com isso ele vai fazer as devidas correções. É muito simples, porém muito útil.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/6urhRR9es5M" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Novas Skills: O preço que tem que ser pago

Source: blog/nova-skills-preco-que-tem-que-ser-pago/index.md

Recentemente ministrei uma palestra e passei a refletir o quanto de tempo nós que investir para conseguir realizar alguma coisa. Conhecimento ou Skills são como se fosse uma conta bancaria. Por exemplo, se você quer aprender a programar alguma uma certa linguagem, tem que depositar tempo nessa linguagem. Quando se quer uma nova Skill, você entra devendo nesta conta.

Por exemplo, quero ter uma Skill que é saber a complexidade de um algoritmo, como não sei nada sobre este algoritmo começo negativo, e, na medida que estuda esta linguagem, você vai se aproximando de não dever nada, ou seja, conhecer o algoritmo. E quando você começa a tirar lucro disso podemos fazer a analogia de dinheiro investido, ou positivo nesta conta.

**Sempre começamos no negativo.**

Como a música do Mr Big, Price you gonna pay, se você quer aprender algo novo, é o preço que você tem que pagar. Muitas vezes, com alguns treinamentos, você pode reduzir esse tempo gasto, mas estaria trocando menos tempo por dinheiro investido.

Isso é muito interessante para refletirmos sobre nossa vida, às vezes estamos empolgados para fazer algo, mas não queremos pagar o preço.

"Eu quero ter uma empresa milionária, mas não quero pagar o preço"

"Quero fazer meu aplicativo funcionar, mas não quero pagar o preço"

É importante termos essa ciência de que tudo tem um preço para se pagar: seu tempo, dinheiro... Algo deve ser depositado para trazer resultados.

**Meu conselho:**

Se você já está dedicando seu tempo a estudar alguma coisa, estude de um jeito que não vai precisar se dedicar novamente. Da mesma forma que ficamos negativos em uma Skill por não ter nenhuma experiencia, com o tempo vamos ficando cada vez mais positivos.

**Qual o intuito disso?**

Se pararmos um pouco de cuidar dessa Skill, ela começa a ser esquecida, pois ela não está enraizada em você, e por esse motivo é muito importante na nossa carreira continuar estudando para não perder esses conhecimentos.

Reflita sobre isso.

Às vezes na vida estamos reclamando de alguma coisa, mas evitamos pagar o preço para alcançar esse objetivo.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# NPM e Módulos de Terceiros - NodeJS

Source: blog/npm-e-modulos-de-terceiros/index.md

O Node já vem com um gerenciador de pacotes chamado NPM (Node Package Mananger), com o qual é possível gerenciar todas as dependências de pacotes, então ele é tanto um repositório de módulos quanto uma ferramenta que já vem instalada com o Node. Se colocarmos no CMD:

```jsx
npm - v
```

Depois de ter instalado o Node, conseguimos ver a versão do NPM, no meu caso é o 3.6.0.

Por exemplo, eu quero instalar um módulo chamado String, então coloco:

```jsx
npm install string
```

É meio estranho, mas esse módulo String tem algumas facilidades a mais. Feito isso, será mostrado a mensagem de que foi instalado, no meu caso deu um warning pois eu não tenho um package.json, mas vamos criá-lo mais tarde.

Agora, na pasta do seu projeto, vai ser criada uma pasta node_modules, nela fica todos os módulos que foram instalados pelo NPM, como o módulo String. Especificamente esse pacote String usamos com o S maiúsculo

```jsx
var S = require('string');
var txt = S('olá').replaceAll("o", "O').toString();
console.log(txt)
```

Usamos, por exemplo, o replaceAll, que não tem efetivamente no javaScript. Perceba que ele trocou o 'o' de minúsculo para maiúsculo.

Quais os detalhes temos que reparar quando usamos módulos de terceiros?

Fizemos um módulo anteriormente, e nele importávamos colocando ./, por exemplo:

```jsx
var S = require('./string')
```

Mas usamos ./ apenas quando os módulos são locais e não uma dependência externa ao seu projeto. No caso do String, que é publicado no NPM, podemos referenciar diretamente pelo nome porque o node vai procurar no módulo da sua pasta. Se não acha, ele começa a procurar nas pastas pai.

Note que quando formos instalar uma dependência, não precisa falar para todo mundo 'olha, ele depende do String', senão toda vez que for copiar o projeto para alguém e não copiar as dependências, tem que avisar qual vamos usar. Para evitar de ter que fazer isso, conseguimos colocar um Descriptor, onde já dizemos todas as dependências que tem no projeto.

Uma maneira bem fácil de fazer isso é utilizando o:

```jsx
npm init
```

Ele irá perguntar qual o nome do projeto, qual o description, qual o entry point (que no nosso caso é o test.js), password, author, etc. No fim, ele gera um JSON e pergunta se eu quero salvar. Então ele gera as informações do projeto ali.

**Qual a vantagem quando eu tenho um package.json?**

Vamos supor que eu fiz um teste com a minha lib. Se ele funcionar, então o inserimos como dependência.

**Como fazemos isso?\***

```jsx
npm install string --save
```

Além de eu instalar a dependência, também estamos salvando ele no package.json. Se abrirmos ele na área e dependência vamos ver o módulo String.

Perceba que ele tenta achar o major version e o mantém, por exemplo '3.3.1' e pode atualizar para '3.4.1'. Ele faz isso para manter seu projeto estável. Isso serve para que quando for comitar esse código no git, você não coloque os módulos, pois caso você esteja rodando no Windows, quando fizer um npm install, alguns módulos compilam algumas coisas a mais como código em C.

Quando baixar esse código em outra máquina, você só vai rodar o NPM install. O próprio NPM vai resolver os módulos e instalar as dependências. Por isso é importante termos as dependências dentro do package.json.

Tempos atrás, as pessoas programavam em Java e ainda não tinham tão definido alguns repositórios de dependência, então tinham que sair caçando as dependências. Atualmente, apenas com esses gerenciadores conseguimos fazer isso adicionando um descritor e isso deixa seu projeto muito mais organizado e independente de plataformas, já que não têm módulos extremamente dependentes de arquitetura.

Confira a explicação em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/p6XThe7spdE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# O que é o app.use no NodeJS/ExpressJS?

Source: blog/o-que-e-o-app-use-no-nodejsexpressjs/index.md

> Entenda o que é o app.use no Express.js, como funciona o sistema de middlewares e como usá-lo para organizar sua aplicação Node.js.

Você já reparou que praticamente qualquer módulo que plugamos no Express atualmente é feito através do uso do app.use? Mas afinal, o que é o app.use?

Ps: você pode ver este material em vídeo também no fim do post 🙂

A partir da versão 4 do Express, a extensibilidade é realizada por meio do uso de middlewares. Middleware é um bloco de código que é executado em todas as requisições ou nas que respeitam um certo padrão. E é respeitado a ordem de adição de cada um deles.

Para adicionarmos um middleware em nosso app (ou router):

```jsx
const express = require('express')
const app = express()

// middleware
app.use(function (req, res, next) {
  console.log('middleware 1')
  next()
})

app.get('/', function (req, res) {
  console.log('requisição')
  res.send('Requisição!')
})

app.listen(3001, function () {
  console.log('Example app listening on port 3000!')
})
```

Alguns pontos importantes:

- Este middleware será aplicado antes da execução de qualquer rota que vier depois dele;
- Caso não adicionamos o next(), as rotas subsequentes nem serão executadas. Por isso, middleware é uma ótima forma de fazer controle de acesso a rotas.

Vamos analisar este outro exemplo:

```jsx
const express = require('express')
const app = express()

app.use(function (req, res, next) {
  console.log('middleware 1')
  next()
})
app.use(function (req, res, next) {
  console.log('middleware 2')
  next()
})
app.get('/', function (req, res) {
  console.log('requisição')
  res.send('Requisição!')
})

app.use(function (req, res, next) {
  res.send('nada encontrado')
})
app.get('/url', function (req, res) {
  console.log('requisição')
  res.send('Requisição!')
})

app.listen(3001, function () {
  console.log('Example app listening on port 3000!')
})
```

Quando fizermos uma requisição para /, passaremos pelos 2 primeiros middlewares mas não pelo terceiro. O res.send (que envia a resposta ao browser) encerra a pilha de execução.

Já quando executamos qualquer outra url diferente de /, o terceiro middleware é executado. E como ele não tem next(), ele não deixa nada abaixo dele ser executado. Ou seja, neste exemplo, ele está ocultando a última rota.

**Aplicando um middleware a um conjunto de URLs específicas**

Veja o seguinte exemplo:

```jsx
const express = require('express')
const app = express()

app.use(function (req, res, next) {
  console.log('middleware 1')
  next()
})
app.use(function (req, res, next) {
  console.log('middleware 2')
  next()
})
app.get('/', function (req, res) {
  console.log('requisição')
  res.send('Requisição!')
})

app.use('/admin', function (req, res, next) {
  console.log('checar se tem permissao')
  next()
})
app.get('/admin', function (req, res) {
  console.log('requisição admin')
  res.send('Requisição admin!')
})
app.get('/admin/teste', function (req, res) {
  console.log('requisição admin')
  res.send('Requisição admin!')
})

app.use(function (req, res, next) {
  res.send('nada encontrado')
})
app.get('/url', function (req, res) {
  console.log('requisição')
  res.send('Requisição!')
})

app.listen(3001, function () {
  console.log('Example app listening on port 3000!')
})
```

Repare que adicionamos um middleware passando uma URL base. Nestes casos, apenas se a URL iniciar, no exemplo, por /admin, o middleware será executado. Isso também é muito útil para autenticação e autorização.

### Veja este material em vídeo

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-d2DLqOHOGM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Web Basic - RESTful

Source: blog/o-que-e-restful/index.md

Apenas para lembrar o que vimos no post anterior sobre arquitetura Web, existem as duas pontas da aplicação: o back-end e o frond-end e uma troca de mensagens entre eles.

Entre essas duas camadas, há um padrão que é a forma que eles trocam essa mensagem. Quando o cliente fala com o server, temos o protocolo HTTP, o method diz algo como por exemplo “servidor, altere algo no servidor” (POST), mas temos outros tipos como Delete, Get, Put, etc.
Há algum tempo, usávamos bastante o POST e o GET, que seria um formulário com POST ou um link com o GET (praticamente não usávamos os outros dois) mas com o tempo a aplicação foi evoluindo até que chegou em um ponto que começou a voltar um padrão para não precisarmos mais passar informação na URL que estamos chamando, pois o método já faz isso.
Antigamente era comum, por exemplo, fazer um Script que se chamava usuários/save. Este save acaba não precisando ser assim, pois o POST já era feito para isso, com isso estávamos sendo redundantes. Assim, começamos a adotar um padrão chamado RESTful

**O que é o RESTful?**

Basicamente seria usarmos estes métodos de uma forma que ele já indique que tipo de alteração queremos fazer no servidor, por exemplo:
POST(enviar dados) para /users, o back-end irá entender que queremos criar um usuário novo;
GET no /users ele nos passará todos os users;
GET em /users/tulio, quero apenas o usuário especifico; PUT (também submetemos dados para lá) e dizemos que queremos alterar os dados do user/tulio.
Com isso, ficou muito mais simples, pois não precisamos, por exemplo, passar na URL que tipo de operação queremos fazer, simplesmente fazemos no método. E com a evolução dos navegadores e a chegada de novos frameworks, conseguimos construir uma forma de comunicação que chamamos então de RESTful, conseguindo usar todos os métodos da especificação HTTP para essa comunicação entre front-end e back-end.
Graças ao HTTP e algumas padronizações que temos na comunicação, a internet é o que é hoje, pois sem padronização não teríamos comunicação, já que cada um faria seu próprio padrão.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# O que fazer para dar certo?

Source: blog/o-que-fazer-para-dar-certo/index.md

Hoje eu gostaria de responder uma coisa que eu ouço muito. As pessoas sempre me perguntam como que eu faço para dar certo. Como dar certo para trabalhar no exterior, nos projetos, no emprego novo, etc.

Uma coisa que eu venho refletindo de tudo que eu venho fazendo e coincidiu com o que um mentor meu me disse e eu achei fantástica é a seguinte:

A primeira coisa é mudar de pensar e trocar o PARA por ATÉ. Comece a pensar nas coisas ATÈ conseguir alcançar seus objetivos, assim elas vão dar certo.

Pode parecer besteira, mas quando colocamos isso na cabeça, mudamos a forma de pensar e tudo muda. Faça as coisas até elas darem certo. Se você fizer isso, pode ter certeza que vai fazer muita diferença no seu mind-set.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/k1PaQVoV3Z4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Você sofre de Obesidade Mental?

Source: blog/obesidade-mental/index.md

Hoje quero contar para você o que aconteceu comigo há mais ou menos 1 ano / 1 ano e meio, até mesmo antes de começar o DevPleno.

Eu comecei a perceber que eu queria lançar meus cursos e colocar o DevPleno no ar, porém eu fiquei apenas estudando, já que queria fazer da melhor forma possível.

Estudei React, Angular, Node, JavaScript, Mongo, DevOps, etc, pois eu queria saber cada vez mais para conseguir compartilhar. Eu estava lendo o livro geração de Valor (que recomendo para quem quer pensar um pouco diferente) e comecei a refletir um pouco sobre a carreira.

Nesse livro tinha uma citação para o que eu estava fazendo, chamava-se “Obesidade mental”, ela acontece quando sabemos muito, mas executamos pouco.

Quando a gente começa a estudar muito e não executa, parece que nunca vamos ser completos. Depois que começamos a executar, não conseguimos mais parar.

Desde que eu coloquei meu primeiro vídeo no ar e compartilhei com todo mundo, eu comecei a executar cada vez mais.

Uma das coisas que eu acho fundamental para executar as coisas é seguir algum método, por exemplo, no Fullstack Master e no DevReactJS, temos uma linha de raciocínio, é muito mais fácil fazer os exercícios e ir executando. Além disso, é bem legal porque os alunos compartilham os repositórios deles no GitHub com todos os exercícios dos cursos.

Por hoje é só, apenas queria deixar essa reflexão para vocês. Até a próxima.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/b9JA-JCXRmY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Once N vezes

Source: blog/once-n-vezes/index.md

Essa dica é sobre uma técnica em JavaScript de uma função utilitária que permite que uma outra função só seja executada uma única vez (Once).

**Para que fazer isso?**

Vamos supor que você carregou uma página ou algo via AJAX e deve fazer alguma operação,mas essa operação só pode acontecer uma única vez (e você pode ter mais de uma operação) então se colocar no final de cada uma, a que acontecer primeiro não deixa as posteriores acontecerem. isso evita algum tipo de concorrência.

Vamos criar uma função func1. Ela só vai poder ser chamada uma vez, mesmo sendo chamada duas vezes. Para isso, vou criar uma função once, essa vai ser a função que permitirá que uma outra função qualquer (que no caso vai ser a fn) seja executada somente uma vez. Para isso, precisamos de uma variável resultado e uma return function.

```jsx
function once(fn, context){
    let result
        return function(){
    }
}
const func1 = once(function){
    console.log('opah')
})
func1()
func1()
```

Quando chamamos o once e passamos a function

```jsx
'console.log('opah')'
```

estamos passando ele para dentro de fn, então ela vai retornar uma outra função. O detalhe é que essa função que estamos retornando volta e fica dentro de func1, porém o contexto **let result** fica travado, então é possível saber quantas vezes essa função foi chamada.

```jsx
function once(fn, context) {
  let result
  let contador = 0
  return function () {
    contador++
    console.log(contador)
  }
}
```

Chamando o arquivo.js será mostrado o número de vezes que foi chamada a função (no caso, 2 vezes).

Agora vamos fazer com que ele bloqueie as próximas chamadas usando um if. Se o contador for igual a 0, chamamos a função. Caso já tenha sido executada uma vez, ela vai parar.

Para isso, chamaremos a função fn, o contexto – caso não venha contexto nenhum, ele mandará o da própria função – guardamos isso dentro de result e por fim incrementamos o contador e damos o retorno do result.

```jsx
function once(fn, context) {
  let result
  let contador = 0
  return function () {
    contador++
    if (contador === 0) {
      result = fn.apply(context || this)
    }
    contador++
    return result
  }
}
```

Podemos aumentar isso ainda mais, dizer o número máximo de vezes que queremos que chame a função, por exemplo.

```jsx
function once(fn, max, context){
    let result
    let contador = 0
    return function(){
        contador++
        if(contador<max){
            result = fn.apply(context || this)
        }
        contador++
        return result
    }
}
const func1 = once(function){
    console.log('opah')
}, 2)
```

Essa técnica é muito poderosa para fazer alguns tipos de restrições.

Perceba que fizemos duas coisas: travar a função para rodar apenas uma vez e em seguida rodar um número N de vezes que determinamos utilizando a mesma técnica.

Confira o passo a passo no vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6dB2dVep_UQ" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Árvore Binária de Busca - Operação de Busca

Source: blog/operacao-de-busca/index.md

Agora que você já entendeu sobre [Árvore Binária](https://www.devpleno.com/arvore-binaria/) e [Árvore Binária de Busca](https://www.devpleno.com/arvore-binaria-de-busca/), vamos falar sobre a operação de busca.

Estou utilizando o exemplo do exercício anterior de árvores binárias. Nós sabemos que a árvore binária tem uma regra de inserção, então podemos esperar algumas coisas dela, por exemplo:

```jsx
insert(arvore, 10)
//console.log(arvore)
insert(arvore, 11)
//console.log(arvore)
insert(arvore, 9)
//console.log(arvore)
//insert(arvore, 8)
console.log(arvore)
function seach(tree, value){
    if(!tree.value || tree.value === value){
        return tree.value
    }
    if(tree.value < value){
        return search(tree.left, value)
    }
    return serach (tree.right, value)

}
console.log(search(arvore, 10)
```

Criamos um search onde passamos uma árvore para ela e quero buscar um valor. Sabemos que se o valor dessa árvore não existir, temos que retornar undefined ou se a árvore for igual ao valor que estou buscando, vou retornar o valor. Caso contrário, se o valor que estou buscando for menor que o nó atual, ele deve estar do lado esquerdo, então vamos buscar o valor apenas no lado esquerdo e por último, se for maior, procuramos do lado direito.

Perceba que encontrou o 10, pois ele tinha na árvore. Se procurarmos um valor que não está na árvore, será retornado o undefined.

Ela sempre dividirá o problema em dois, então ao pensarmos na complexidade do código, é o contrário de termos um 'for' dentro do outro. Como ele sempre divide em dois, no pior caso, o nosso algoritmo é 0(raiz(n)) então se tivermos 25 elementos, teremos mais ou menos 5 comparações, no nosso caso que temos 4, vamos ter 2 comparações. É algo muito rápido, logo a complexidade do algoritmo é 0(log n) que é uma performance muito boa para um algoritmo de busca. O search é o mais importante das árvores, não é atoa que se chama de busca.

Finalizamos todas as operações em árvore, visitar em pré order, in order e pós order, inserção e a busca em si que é muito utilizada.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/UqM6GFlnaOE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Sou contra a orientação-objetos (OO)?

Source: blog/orientacao-objeto/index.md

Hoje eu queria responder uma pergunta que sempre me fazem: “Tulio, você é contra orientação-objetos?”

Primeiramente, eu não sou contra orientação-objetos. Se pegarmos linguagens como JAVA, é um paradigma interessante.

Coisas que eu não gosto em orientação-objeto:

Nós temos muito Pattern. A “Patternite”, como eu costumo brincar, faz com a a gente utilize o Pattern às vezes antes do tempo, aplicamos de forma prematura. E quando você começa a usar muito isso sem ter a concepção do seu sistema bem definida, pode ser que você comece a ter problemas de abstração, então sempre vai ter algo que não encaixa direito dentro da arquitetura.

Voltando para a programação funcional, quando trazemos muitos Patterns e conceitos para a programação funcional, também temos esse problema, já que estamos abstraindo demais no começo. É Interessante lembrar que a menor unidade de código que temos dentro do JavaScript é a função. Quando a gente replica uma característica de orientação-objeto dentro de uma programação funcional é o que eu acho estranho, já que não precisamos necessariamente criar uma classe dentro do JavaScript, apesar de conseguirmos.

Então eu não sou contra a orientação-objetos em si, e sim aplicá-la demais em cima de uma linguagem funcional. A minha dica pra você é: tente não organizar demais de começo, senão vai começar a classificar coisas de maneira errada, já que vão ser classificadas em um estágio muito prematuro do projeto.

Confira o video:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/GOb-0G4HnBM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Diferença entre as programações Orientação-objetos, Imperativa e Funcional

Source: blog/orientacao-objetos-imperativa-e-funcional/index.md

Hoje eu quero explicar um pouco melhor essa diferença entre Programação Funcional, Orientação-objetos e Imperativa.

Primeiro, todos os paradigmas são interessantes e importantes, mas antes de falarmos sobre cada um deles, o que é um paradigma?

Ele vai dizer como você abstrai seu problema do “mundo real” para a computação. Por exemplo, se você vende doces, como você transformar essa venda em uma forma computadorizada. O problema é que na primeira abordagem, que foi a 'Imperativa', nós simplesmente executávamos códigos, como comandos diretos, mas foi chegando em uma situação onde ficava muito complexo para entender, não existia uma forma de classificar esse código que deixasse ele um pouco mais fácil de dar manutenção.

Uma das formas que surgiram para resolver isso foi a orientação-objetos. Ela tenta abstrair os objetos que estão envolvidas nos problemas e então agrupamos essas funções e dados dentro desses objetos. Por exemplo, eu quero modelar um produto, ele é uma classe, quando eu quiser instanciar essa classe eu vou ter um objeto, que são os valores dentro dessa classe. O problema é que para você programar com orientação-objetos, você tem que conhecer algumas regras ou boas práticas, como patterns, mas o problema maior é quando o pessoal programa em uma linguagem orientada objeto, porém ainda faz imperativa. Para dominar o orientado objeto demora para conseguir fazer essa abstração de maneira interessante.

Quando pegamos uma linguagem funcional, o pessoal aplica o mesmo conceito de orientação-objetos dentro do funcional, isso é algo que não me agrada. Você trazer muita coisa de orientação-objeto para um paradigma diferente. Cada paradigma tem suas próprias características.

Fazendo isso, nós começamos a classificar as coisas cedo demais. Algo que eu acho muito legal da programação funcional é que conseguimos construir pequenos blocos, que são as funções, podemos passar elas como parâmetros, por exemplo. O legal disso é que não assumimos nenhuma classificação inicial para isso. Caso a gente queira fazer tudo em um arquivo só e depois ir quebrando em funções, é possível. Fazendo isso nós podemos amadurecer e estabilizar melhor para depois organizar. Não precisamos ter isso de começo, porque muitas vezes uma arquitetura te impõe erros, pois temos uma arquitetura muito bem definida mas tem coisas que não se encaixam em nem um lugar nem em outro.

Para não acontecer isso em programação funcional, é interessante não trazer esses conceitos e apenas a ideia desse pattern.

Mas o maior problema que eu vejo hoje em orientação-objetos é exatamente a questão de que, quando ele começa a crescer, existem coisas que não se encaixam em nenhum lugar dentro da arquitetura.

Então a grande vantagem para as três abstrações é saber utilizar elas do jeito delas e não tentar aplicar esse paradigma em outro.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/JDSglOBvhw8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/channel/UC07JWf9A0B1scApbS1Te7Ww) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Pare de pensar em classes!  Série - POO para JS

Source: blog/pare-de-pensar-em-classes/index.md

Nesta nova série do DevPleno, mostro como podemos passar de programação orientada-objetos para JavaScript mais funcional.

A primeira coisa _(que é muito importante)_ é tentar parar de pensar estruturado.Se você quer mudar de programação orientada objetos para JavaSxript cada vez mais funcional funcional, precisa parar de pensar em classes. Apesar do JavaScript ter uma forma de criar classes,

por exemplo:

```jsx
class Calc {
  constructor(num1, num2) {
    this.num1 = num1
    this.num2 = num2
  }
  out() {
    console.log(this.num1, this.num2)
  }
}
const a = new Calc(1, 2)
a.out()
```

Devo utilizar?

Se você quer programar mais de uma maneira que faça sentido em JavaScript, você deve evitar. Vou mostrar algo que é bastante estranho principalmente para quem vem de Java, PHP, etc:

```jsx
a.out.bind({ num: 4, num2: 5 })()
```

Então eu peguei o meu objeto 'a', o método out e dou um bind passando num1 e num2, com isso eu consigo sobrescrever um parâmetro que teoricamente estaria restrito a esse objeto.

Uma forma de construir sem utilizar o class seria assim:

```jsx
const Calc = function (num1, num2) {
  this.num1 = num1
  this.num2 = num2
  return {
    out: function () {
      console.log(this.num1, this.num2)
    }
  }
}
```

Mas eu consigo resolver isso de mutar o objeto, evitando por exemplo que o bind funcionasse? Toda function cria um contexto novo.

Para que isso não aconteça, podemos utilizar uma outra construção que não permita que façamos isso:

```jsx
return {
  out: () => {
    console.log(this.num1, this.num2)
  }
}
```

A partir de uma arrow function, não temos mais uma forma de sobrescrever o this. Assim eu evitei essa criação excessiva de contextos. Utilizando dessa forma, você vai perceber que ele parece muito uma classe mas existem vários conceitos de programação funcional que vão fazer muito sentido à medida que você for evoluindo.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/po9Ik_v5koU" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Participação em Eventos e Comunidades

Source: blog/participacao-em-eventos-e-comunidades/index.md

Hoje eu vou comentar um pouco sobre a participação em eventos e em comunidades, esse tema foi sugerido pelo Ian Magalhães que comentou no nosso [canal do YouTube](https://www.youtube.com/deplenocom), e se você quiser fazer isso pode ficar à vontade, mande sua dúvida ou pergunta no e-mail ou pelo YouTube, estamos abertos para novos questionamentos.

O que eu acho sobre comunidades e participação em eventos?

Qualquer comunidade que você participar eu acho muito importante, desde a do seu bairro ou de algum tema específico (seja de tecnologia ou não). É importante porque você tem a oportunidade de se conectar com pessoas e muitas vezes a gente esquece disso, não adianta desenvolver um software bem se não tem pessoas querendo utilizar isso, por exemplo, e as comunidades são uma grande oportunidade para fazer isso.

Aqui temos a associação de bairro, associação comercial e coisas do gênero que são pessoas reunidas tentando resolver um problema do assunto. Nada melhor que isso para conseguirmos trocar experiências com as pessoas.

O DevPleno é uma comunidade em que estamos construindo, trocando experiências, utilizando até mesmo as informações que vocês passam para mim para passar para mais pessoas. Então se você não tem uma comunidade para discutir tecnologia na sua cidade, é muito importante você dar o passo rumo a isso.

Já sobre a participação em eventos, eu acho extremamente importante. Novamente o mais importante é fazer conexões com pessoas, vá em eventos para conversar com as pessoas. Uma das coisas que eu faço sempre é ir sozinho aos eventos, porque as dinâmicas se você está com alguém fará com essa pessoa e isso é uma grande perda de chance de conhecer novas pessoas, trocar contato e talvez perder uma parceria que pode mudar sua vida. Pode ser que você converse com alguém sobre um tema e isso mude sua vida ou perspectiva de como enxergar as coisas.

Em um último evento que eu fui, que foi sobre negócios, eu conheci uma pessoa que falava sobre como controlar a ansiedade e isso foi muito legal, ele fez até um experimento para eu me acalmar e reduzir a ansiedade. Cada dia do evento eu fui conhecendo uma pessoa diferente, pois cada dia eu sentava em um lugar diferente, isso é bastante importante para nos conectarmos.

O grande problema que o pessoal reclama é que não tem eventos na sua região, então a minha postura quanto a isso é encabeçar esses eventos, não presencialmente pois hoje não consigo mais, mas online eu consigo, como o Fullstack Academy. Eu deixo isso claro para minha comunidade que sempre que precisar eu estou disponível para dar palestra em qualquer evento na região que eu possa abordar algum tema. Eu faço isso porque temos que fortalecer primeiramente os eventos que estão perto da gente.

Tínhamos um evento na cidade que aconteceu quatro ou cinco anos seguidos e depois teve uma pausa e agora voltou esse ano e sempre que é preciso eu estou lá, antes dessa pausa eu era um dos poucos palestrantes que tinham e com isso acabamos inspirando novas pessoas a palestrar e no último ano antes da pausa, tivemos muitas palestras, isso foi muito legal porque conseguimos fortalecer um evento regional.

Se você tem um evento na sua cidade que você não esteja alinhado com ele, converse com a coordenação desse evento para palestrar ao invés de criar outro evento. Eu faço muito disso, esse ano dei por volta de três palestras e principalmente na região.

Então fortaleça as comunidades e eventos que estão perto de você. Nós vivemos em comunidade, trabalhamos em comunidade, então porque não aprender em comunidade?

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/qvMqSNpzyjk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Entenda o que é Patternite

Source: blog/patternite/index.md

Hoje eu gostaria de falar sobre um item que é bastante impeditivo quando as pessoas que já tem experiência tentam vir para o JavaScript. Eu chamava isso de Patternite, isso nada mais é que a vontade de aplicar Pattern em todos os lugares.

O que é um Pattern ou Design Pattern?

Ele é um padrão de projeto. Todo mundo que vem de outras linguagens, provavelmente já com alguns padrões de projeto na mente, como por exemplo Singleton, MVC, Factory, etc, eu sugiro que antes de começar a classificar classes entender o que está acontecendo no código e aí sim aplicar um design pattern muito melhor.

Eu vou fazer um exemplo na prática para ficar mais simples. Primeiramente vou instalar o EJS que é uma engine de template baseada em JavaScript. Além disso, vou instalar o Express, que é um micro-framework:

```jsx
yarn add ejs express
```

Agora vou criar um arquivo novo chamado index.js e dentro dele farei o seguinte:

```jsx
const express = require('express')
const app = express()
app.get('/', (req, res) => {
  res.send('olá poo2js')
})
app.listen(3000, (err) => console.log(err, 'server'))
```

O detalhe que quero realçar aqui é que não criei nem um controller, nenhum view nem nada no sentido. A vantagem disso é que eu tive meu primeiro small win.

Quando formos aprender uma linguagem nova acho que essa é a parte mais importante para aprender cada vez mais. Agora a segunda small win é a seguinte, é muito ruim construir o código dessa forma então se fizermos o seguinte:

```jsx
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get('/', (req, res) => {
  res.render('home')
})
app.listen(3000, (err) => console.log(err, 'server'))
```

Dessa forma conseguimos utilizar templates e não precisamos criar a resposta falando o conteúdo. Ao rodar, perceba que não conseguimos ver o home dentro do diretório views.

Precisamos criar um diretório Views e dentro dele o home.ejs, ai sim, lá dentro, fazer o nosso html:

```jsx
<html>
  <head>
    <tittle>POO2JS</tittle>
  </head>
  <body>
    <h1>Olá</h1>
  </body>
</html>
```

Isso são coisas que naturalmente eu iria perceber que iria acontecer. Caso a gente queira criar mais páginas, começa a perceber que existe um certo padrão. Se quiséssemos saber como a minha aplicação está realmente funcionando, é muito melhor saber qual a URL e para onde ele manda.

Para não ficar uma bagunça, poderíamos por exemplo, criar um arquivo routes e colocar nossas rotas lá dentro:

```jsx
const app = require('express').Router()
app.get('/', (req, res) => {
  res.render('home')
})
app.get('/page1', (req, res) => {
  res.render('page1')
})
app.get('/page2', (req, res) => {
  res.render('page2')
})
module.exports = app
```

Agora, no nosso código inicial, podemos fazer o seguinte:

```jsx
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
const routes = require('./routes')
app.use(routes)
app.listen(3000, (err) => console.log(err, 'server'))
```

Perceba que eu estou classificando as coisas de uma maneira que faz sentido para mim. A gente começou simplesmente com o arquivo index.

Então o meu conselho é que se comece construindo tudo em um arquivo apenas e, com o tempo, você percebe que as coisas conseguem se agrupar.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/v0c_02nrMZI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Pegadinha #1 de entrevistas em JavaScript

Source: blog/pegadinha-de-entrevistas-de-javascript/index.md

Hoje quero comentar uma questão muito comum em entrevistas de JavaScript.

Qual é a saída desse código?

```jsx
const arr = ['a', 'b', 'c', 'd']
for (var i = 0; i < arr.length; i++) {
  setTimeOut(() => {
    console.log(i, arr[i])
  }, 0)
}
console.log('out', i)
```

Detalhe que estamos utilizando um setTimeOut com um zero, mas poderia ser qualquer valor.

O primeiro detalhe é que percebemos que o out saiu primeiro com o número 4. O 'var' foi definido dentro do for, porém eu consegui dar um console log lá é baixo. Podemos chegar a conclusão que ele não respeitou o escopo. Outro ponto importante é que ele aconteceu antes do restante, isso acontece porque sempre que utilizamos o setTimeOut, ele leva essa execução da arrow function para dentro do event loop.

Como o i já está com 4, ele não é um número válido, pois nosso array inicia-se em zero e termina em 3. Por esse motivo virá o seguinte:

```jsx
out 4

4 undefined
4 undefined
4 undefined
4 undefined
```

Como arrumamos essa função?

Temos algumas formas de arrumar isso. Existe uma bem simples e algumas que podemos brincar um pouco mais.

A primeira bem simples é trocar o var por let:

```jsx
for (let i=0; i<arr.length; i++){
    setTimeOut(() => {
    console.log(i, arr[i])
    },0)

```

Agora funcionou perfeitamente:

```jsx
0 'a'
1 'b'
2 'c'
3 'd'

```

Por que essa diferença?

Quando estamos com o var, seria equivalente a quando ele estiver executando o código ele puxa todos os vars pra cima, isso é conhecido como hoisting.

Por esse motivo, sempre que possível, utilize let e const.

Outra maneira seria transformar em setTimeOut em uma maneira que eu consiga injetar as variáveis dentro dele mesmo, como uma self invoked:

```jsx
setTimeOut(
  (function (ii) {
    return () => {
      console.log(ii, arr[ii])
    }
  })(i),
  0
)
```

Iremos executar a função e a partir da function o ii vai estar válido. Assim funcionará também do jeito que esperávamos.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ODBoaezEfMo" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Pensamentos limitantes

Source: blog/pensamentos-limitantes/index.md

Hoje eu gostaria de dar uma dica de carreira de como ser um profissional melhor. Muitas vezes nos pegamos tendo, mesmo sem querer, o pensamento limitante. Toda vez que você for aprender algo novo ou tentar fazer algo, vai ter uma voz dizendo "não é agora" ou "você não nasceu pra isso". Por exemplo, você tem a ideia de um software ou app novo e envolve um monte de coisa que você não sabe, a sua cabeça diz "desiste, você não vai conseguir fazer", ai naturalmente sua parte física do corpo vai começar a responder de acordo. Seu corpo entra em um estado de se manter na zona de conforto e começa a poupar energia, então você terá menos energia para pensar nesse projeto, porque o seu pensamento te limitou nessa caixinha.

A primeira que precisa pensar quando se quer ser um desenvolvedor pleno é estudar cada vez mais, conseguir coisas novas e não ter pensamento limitante.

Quando vier esse pensamento, proteja-se contra isso. Responda esse pensamento de forma a mostrar que você realmente consegue e aquilo não passa de uma tentativa de seu corpo e sua mente de se proteger de algo que possa dar errado. Com isso você conseguirá realizar muito mais apenas estudando seu estado mental.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/bNfNxpoKApY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Estruturas de Dados - Pilhas

Source: blog/pilha/index.md

Hoje vamos falar um pouco sobre uma estrutura de dados que é muito comum em computação, principalmente em sua base, a Pilha. O primeiro conceito que temos que saber sobre Pilha é que ela segue o conceito de LIFO (Last In First Out), então o último que entra é o primeiro que sai. Uma coisa bem legal em JavaScript é que já temos uma Pilha naturalmente no vetor, então se fizermos, por exemplo:

```jsx
const vetor = []
vetor.push(1)
vetor.push(2)
console.log(vetor.pop())
console.log(vetor)
```

Percebam que quando desempilhamos ele volta o último item que foi empilhado e modifica o vetor. Agora vamos implementar isso sem precisar utilizar o vetor dessa forma, criando nossa própria implementação de stack:

```jsx
const Stack = () => {
  const data = []
  let top = -1
}
```

Como estamos fazendo no modo funcional, não temos o this, estamos guardando apenas no próprio contexto e podemos retornar os métodos que queremos criar:

```jsx
const Stack = () => {
  const data = []
  let top = -1
  const push = (value) => {
    top++
    data[top] = value
    console.log(data)
  }
  return {
    push
  }
}
const stack = Stack
stack.push(1)
stack.push(2)
```

Perceba que ele está montando o vetor perfeitamente adicionando sempre na frente. Agora precisamos remover esse último item:

```jsx
const push = (value) => {
  top++
  data[top] = value
  console.log(data)
}
const pop = () => {
  if (top < 0) {
    return false
  } else {
    const itemToReturn = data[top]
    delete data[top]
    top--
    return itemToReturn
  }
}
return {
  push,
  pop
}
console.log(stack.pop())
```

Agora funcionou perfeitamente, ele retirou o um e deixou apenas o dois. Vamos criar um novo método chamado print para sabermos como está a estrutura:

```jsx
const print = () => {
  console.log(data)
}
return {
  push,
  pop,
  print
}
```

Perceba que nós temos um item vazio, então ele não removeu esse item. Ao invés de utilizar o delete, podemos utilizar o splice:

```jsx
    } else {
        const itemToReturn = data[top]
        data.splice(top, 1)
        top--
        return itemToReturn
    }
```

O splice já faz essa fatia, cortando nosso array no item top.

Acabamos de implementar uma pilha. É muito interessante conhecer o que é pilha, faz mais sentido quando recebemos os erro stack overflow, acontece que as estruturas de dados vão se empilhando tanto que não aguenta mais o tamanho, por esse motivo é um erro bem comum.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/DnHSTYuk-V4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Política de Privacidade

Source: blog/politica-de-privacidade/index.md

Esta Política de Privacidade foi formulada com o intuito de manter a privacidade e a segurança das informações coletadas de nossos clientes e usuários.

Política de privacidade para **DevPleno**.

Todas as suas informações pessoais recolhidas, serão usadas para o ajudar a tornar a sua visita no nosso site o mais produtiva e agradável possível.

A garantia da confidencialidade dos dados pessoais dos utilizadores do nosso site é importante para o **DevPleno**.

Todas as informações pessoais relativas a membros, assinantes, clientes ou visitantes que usem o **DevPleno** serão tratadas em concordância com a Lei da Proteção de Dados Pessoais de 26 de outubro de 1998 (Lei n.º 67/98).

A informação pessoal recolhida pode incluir o seu nome, e-mail, número de telefone e/ou telemóvel, morada, data de nascimento e/ou outros.

O uso do **DevPleno** pressupõe a aceitação deste Acordo de privacidade. A equipe do **DevPleno** reserva-se ao direito de alterar este acordo sem aviso prévio. Deste modo, recomendamos que consulte esta página com regularidade de forma a estar sempre atualizado.

Os anúncios

Tal como outros websites, coletamos e utilizamos informação contida nos anúncios. A informação contida nos anúncios, inclui o seu endereço IP (Internet Protocol), o seu ISP (Internet Service Provider, como o Sapo, Clix, ou outro), o browser que utilizou ao visitar o nosso website (como o Internet Explorer ou o Firefox), o tempo da sua visita e que páginas visitou dentro do nosso website.

Os Cookies e Web Beacons

Utilizamos cookies para armazenar informação, tais como as suas preferências pessoas quando visita o nosso website. Isto poderá incluir um simples popup, ou uma ligação em vários serviços que providenciamos, tais como fóruns.

Em adição também utilizamos publicidade de terceiros no nosso website para suportar os custos de manutenção. Alguns destes publicitários, poderão utilizar tecnologias como os cookies e/ou web beacons quando publicitam no nosso website, o que fará com que esses publicitários (como o Google através do Google AdSense) também recebam a sua informação pessoal, como o endereço IP, o seu ISP, o seu browser, etc. Esta função é geralmente utilizada para geotargeting (mostrar publicidade de Lisboa apenas aos leitores oriundos de Lisboa por ex.) ou apresentar publicidade direcionada a um tipo de utilizador (como mostrar publicidade de restaurante a um utilizador que visita sites de culinária regularmente, por ex.).

Você detém o poder de desligar os seus cookies, nas opções do seu browser, ou efetuando alterações nas ferramentas de programas Anti-Virus, como o Norton Internet Security. No entanto, isso poderá alterar a forma como interage com o nosso website, ou outros websites. Isso poderá afetar ou não permitir que faça logins em programas, sites ou fóruns da nossa e de outras redes.

Ligações a Sites de terceiros

O **DevPleno** possui ligações para outros sites, os quais, a nosso ver, podem conter informações / ferramentas úteis para os nossos visitantes. A nossa política de privacidade não é aplicada a sites de terceiros, pelo que, caso visite outro site a partir do nosso deverá ler a política de privacidade do mesmo.

Não nos responsabilizamos pela política de privacidade ou conteúdo presente nesses mesmos sites.


---

# Por que a Toptal é tão valorizada no mercado?

Source: blog/por-que-a-toptal-e-tao-valorizada/index.md

Você sabe porque a Toptal é tão valorizada no mercado? Neste vídeo, você vai entender melhor sobre o top 3%.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/F521oI7g83k" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS.](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

[![Curso](CursoReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Por que fazer um curso de programação voltado para a prática?

Source: blog/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica/index.md

A área de tecnologia da informação oferece muitas oportunidades e, para aproveitá-las, o profissional deve se preparar continuamente. Para tanto, o desenvolvedor pode encontrar na web uma grande diversidade de vídeos e tutoriais a respeito de diversas tecnologias, principalmente em blogs, redes sociais, fóruns, youtube e nos [cursos gratuitos](https://www.devpleno.com/ensino-formal-ou-cursos-livres?utm_source=blog&utm_campaign=rc_blogpost) em plataformas de ensino.

Porém, uma capacitação mais sólida, encontrada em um bom curso de programação deve ser considerada para quem quer se destacar, especialmente em um momento tão favorável para o desenvolvedor profissional.

O uso de smartphones e plataformas de serviços aumenta diariamente. Já dentro das empresas, sistemas mais complexos são usados para o controle de produção e analise de dados para melhoria da performance nos negócios.

Para se ter uma ideia, mesmo com a crise no Brasil, os gastos com tecnologia, pessoais e corporativos só crescem. [Segundo a Fundação Getúlio Vargas](https://link.estadao.com.br/noticias/gadget,ate-o-fim-de-2017-brasil-tera-um-smartphone-por-habitante-diz-pesquisa-da-fgv,70001744407?utm_source=blog&utm_campaign=rc_blogpost), o Brasil terá um smartphone por habitante até o final de 2017.

Outo [estudo](https://www.valor.com.br/empresas/4943024/crise-nao-afeta-investimento-das-empresas-em-tecnologia-diz-fgv?utm_source=blog&utm_campaign=rc_blogpost) feito pela mesma instituição mostra que a TI foi uma das áreas que mantiveram níveis de investimentos estáveis pelas empresas em 2016, com uma taxa média de 7,6% da receita aplicado em novas tecnologias.

São muitas as razões para se [profissionalizar em TI](https://www.devpleno.com/integridade?utm_source=blog&utm_campaign=rc_blogpost) não é mesmo? Vamos mostrar no artigo de hoje a importância de escolher um curso que valorize a prática. Isso leva o profissional a apresentar resultados com maior rapidez ao ser contratado ou mesmo o favorece em processos de seleção, especialmente nas entrevistas! Preparado? Então vamos lá!

### Para conhecer as tecnologias usadas pelas empresas

Quando uma empresa contrata ou um desenvolvedor, seja para um emprego fixo, seja para um [freela](https://www.devpleno.com/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira?utm_source=blog&utm_campaign=rc_blogpost), exige-se, fundamentalmente, conhecimentos e habilidades específicas das tecnologias relacionadas ao projeto ou que são mais usadas na empresa. Geralmente, é necessário que tenha capacidade de trabalhar com múltiplas tecnologias, especialmente em projetos para web.

Entre as competências que se pode exigir de um desenvolvedor para que entre um projeto, normalmente podemos encontrar:

#### Para desenvolvimento de front-end:

- conhecimento em html5, css3 e javascprit;

- conhecimentos em algum framework para trabalhar com as linguagens acima, como [ReactJs](https://www.devpleno.com/renderizar-estruturas-em-formato-de-arvore?utm_source=blog&utm_campaign=rc_blogpost), AngularJs, CanJs, jQuery, Bootstrap etc.

- pelo menos um conhecimento básico de sistemas para tratamento de imagens e criação de vetores.

#### Já para o desenvolvimento de back-end:

- conhecimento aprofundado em pelo menos uma linguagens de back-end, como NodeJS, Java, Python, PHP, C# etc;

- em relação à linguagem que será trabalhada, é importante ter pelo menos um Framework , como Spring, Django, Laravel, ExpressJS;

- bancos de dados SQL e NoSql;

- sistemas operacionais.

Já para o desenvolvimento de aplicativos móveis, são usados Java para Android, Swift para iPhone ou Cordova. Esse último é um framework que possibilita a utilização de linguagens de WEB para desenvolvimento de aplicações mobile híbridas, que rodam em praticamente todas as plataformas móveis. Além disso podemos também utilizar o próprio ReactJS (react-native) para criar aplicações móveis nativas.

Realmente são muitas as opções, não é? Então, ai entra a importância do know-how do instrutor do curso. Quem tem experiência de mercado poderá direcionar o aluno para que saiba quais [ferramentas deve aprender para cada tipo de projeto](https://www.devpleno.com/ensino-formal-ou-cursos-livres?utm_source=blog&utm_campaign=rc_blogpost). Também mostrará como integrar as tenologias utilizadas, como veremos a seguir.

### Para ter um visão de projeto

O desenvolvedor profissional precisa lidar com problemas complexos e integrar diversas tecnologias. Para que sejam usadas, normalmente existem macetes que agilizam sua instalação e atualização como o uso de Webpack, Bower, Npm, composer. Também entram o uso de IDEs para gerenciamento de código.

Cabe ressaltar que, em projetos profissionais, dezenas ou centenas de milhares de linhas de código são geradas ou incorporadas de bibliotecas prontas criadas por terceiros. Assim é fundamental contar com esses sistemas para que se possa fazer um gerenciamento adequado do que está sendo produzido.

Está aí mais uma vantagem de se aprender na prática, ou seja, com quem entende. O instrutor pode dar dicas valiosas de ferramentas de desenvolvimento e bibliotecas já prontas para agilizar a criação de artefatos mais comuns, porém com relativa complexidade. Muitas encontram-se disponíveis no GitHub.

Também há a necessidade de manutenção do projeto e compartilhamento com outros programadores. Atualmente, o GitHub vem sendo a plataforma mais usada para armazenar projetos que podem pertencer a uma empresa ou que são públicos.

Outra coisa importante são os padrões de projeto. Atualmente é muito utilizado o padrão MVC – Model View Controller para programação web. Nesse modelo, o desenvolvimento das camadas de banco de dados, interface, e do código que faz o meio de campo entre eles é claramente dividido. Há outros padrões como MMVC, MVP.

Saber onde são encontradas bibliotecas, usar padrões de projetos e ferramentas para gerenciamento diminui o tempo para entrega e aumenta a performance. Isso melhora o relacionamento com o cliente, como veremos a seguir.

### Para saber lidar com as necessidades dos clientes

Quem desenvolve profissionalmente sabe como é lidar com as expectativas e, muitas vezes, despreparo do cliente para lidar com a criação de um projeto. Normalmente o programador tem que se virar para que possa, [com prazos e orçamentos apertados](https://www.devpleno.com/precificacao-em-software?utm_source=blog&utm_campaign=rc_blogpost), entregar projetos grandes.

Há também aquelas mudanças que são solicitadas logo que o sistema é pronto. É comum que o programador tenha inclusive que informar ao cliente o que o próprio cliente quer.

Assim, é importante que ao aprender a desenvolver receba orientações a respeito de como entregar o sistema em partes, apresentando versões mais simplificadas do sistema, com versões até a entrega do produto final. Isso aumenta a satisfação do cliente pois a chance de frustração cai e, consequentemente, aumenta-se o seu engajamento e o seu entendimento a respeito do que está sendo feito.

### Para aumentar a qualidade do projeto

Além da questão da produtividade, para que um projeto seja bem-sucedido, ele não pode apresentar bugs ou desalinhamento em relação aos requisitos de negócio.

Existem várias ferramentas gratuitas que podem ser encontradas na web que ajudam o desenvolvedor a debugar o sistema e, em um curso voltado para a prática, certamente haverá o contato com soluções assim.

### Para conhecer ferramentas de configuração do ambiente de desenvolvimento

Para que uma linguagem seja usada, normalmente são necessários sistemas que dão suporte ao seu funcionamento, como drivers e bibliotecas para que possam se integrar a outros tipos tecnologias.

Quer um exemplo? O desenvolvimento de aplicações web completas com Javascript pode ser acelerado e feito como mais qualidade usando o framewark ReactJs. No server-side é necessário instalar o NodeJs. A aplicação pode usar o MongoDB como base de dados e o Mongoose como biblioteca para modelagem do banco por exemplo.

Outro exemplo é a programação para Android ou o uso de cordova para a criação de aplicativos híbridos. Deve-se instalar o Java, configurar o ambiente de desenvolvimento para que se possa começar a desenvolver.

Em ambos os casos, seja mobile, seja web, um desenvolvedor profissional trará dicas importantes para desenvolver com mais produtividade e encontrar os atalhos para lançar o seu projeto com maior velocidade.

Vimos assim que aprender a programar, na prática, é uma excelente escolha para quem quer entrar no mercado ou para quem já atua e quer diversificar seus conhecimentos. Um curso de programação com quem tem experiência e no qual se põe a mão na massa, faz com que o aluno não apenas aprenda a desenvolver em uma linguagem, mas também a se encaixar em uma equipe e em projetos reais.

Até a próxima :)

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Por que todo Dev usa Mac?

Source: blog/por-que-todo-dev-usa-mac/index.md

Uma pergunta comum que sempre me fazem é: Por que a maioria dos desenvolvedores usa Mac?

Bom, vou comentar algumas coisas que eu vejo. O primeiro motivo é moda, afinal é uma máquina que te garante um status. Se você chega em uma reunião com um notebook ruim, não transmite a autoridade que precisa, uma vez que, como desenvolvedores, lidamos com máquinas o dia todo, o que pressupõe-se que temos uma máquina boa.

**Por que eu uso MAC?**

Eu uso Mac hoje porque sou programador IOS a maior parte do tempo. Crio aplicativos utilizando o React native para Android e para IOS, e não é possível fazer isso no Windows ou Linux. Já tentei todos os hacks possíveis, como rodar em uma maquina virtual, comprei até uma maquina melhor para isso, com 32GB de ram e rodar um Mac virtual com 16gb, mesmo assim não é a mesma experiência, pois na hora de testar algumas animações, o emulador do IOS não fica tão bem quanto na máquina nativa. Outra coisa que acontece é que, quando vamos tentar emular o android dentro do emulador do IOS, já não funciona mais, não é possível emular dentro de um emulador. Isso começou a me atrasar muito.

Se você faz aplicativos para IOS, tem algumas saídas como alguns serviços em que é possível alugar um Mac online para publicar seu aplicativo através dele, ou então contratar um serviço de build, mas isso só funciona quando estamos fazendo algum aplicativo utilizando o ionics ou react-native, não é possível fazer com objetive C sem ter um Mac, afinal como você vai emular?

Outro motivo é que o Mac é unix like, ou seja, ele é baseado em unix, então muitas coisas feitas no servidor e aplicativos no shell funcionam muito bem, já que ele é muito parecido com o Linux. Por isso quando existe a migração de Windows para o Mac, você sente muita diferença, pois com ele é possível automatizar mais coisas.

Outro ponto muito importante é que existem muitos aplicativos exclusivos para Mac e outros exclusivos para Windows. Existe, por exemplo, um aplicativo chamado Sketch que te ajuda a criar um layout, esboçar o aplicativo, como um photoshop misturado com illustrator para criar interfaces, e ele existe apenas no Mac.

Mas no final das contas isso não importa muito, afinal eu programei minha vida inteira em Windows e não há vergonha nenhuma nisso. Minha mudança foi por causa da performance que eu precisava no Mac. Se algo está te atrasando, você deve mudar, não é natural gastar muito tempo por conta da sua máquina.

Caso você ande com um notebook para cima e para baixo, o Mac te da a sensação de ser mais 'parrudo', é a única coisa que é MUITO diferente de um DELL, por exemplo. O Mac é melhor acabado. O maior empecilho é que no Brasil você terá que investir por volta de R$18.000,00 para ter um Mac, a não ser que você peça para alguém trazer do exterior, como foi o meu caso. :)

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Por que tudo na vida acontece 2x?

Source: blog/por-que-tudo-na-vida-acontece-2x/index.md

No vídeo anterior, falamos que os pensamentos limitantes nos atrapalham a alcançar resultados. Neste vídeo, falo sobre como fazer o oposto disso.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/MUqyTezv0ts" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Postman - Como testar APIs - Hands-on

Source: blog/postman-como-testar-apis/index.md

O Postman é uma ferramenta indispensável para o desenvolvimento de aplicativos API, principalmente Rest API, pois ele é um client para uma API em Rest. Existem outras ferramentas para isso, mas o Postman é o mais conhecido no mercado.

O primeiro ponto interessante é que o Postman é uma extensão do Google Chrome, então ele segue uma tendência de aplicações que são desenvolvidas como extensões, e à medida com que elas vão tendo propriedades a mais, você pode adicionar como um aplicativo na sua máquina.

Primeiro precisamos criar uma conta para ser possível salvar links. Você vai encontrar uma tela parecida com essa:

![Exemplo 1](PostmanEx1.png)

Como eu já havia criado e feito alguns testes, já tem um histórico do lado, mas o seu estará vazio.

Perceba que existe o History e o Collections. No Collections, há alguns exemplos de como fazer algumas requisições, como mudar o tipo de request, mas também é possível criar uma Collection nossa.

![Exemplo 2](PostmanEx2.png)

Isso nada mais é que um conjunto de requisições que criamos. Por exemplo, suponhamos que vou criar um projeto DevReactJS, eu crio então uma Collection e dentro da Collection é possível criar uma pasta (folder).

![Exemplo 3](PostmanEx3.png)

Podemos criar, por exemplo, uma pasta Users e salvar a requisição dentro.

Vou colocar em GET [https://httpbin.org/ip](https://httpbin.org/ip), ir em Save (ao lado de Send), Save as _(podemos dar um nome, como GetIP),_ escolher o projeto e a pasta que queremos e pronto. Note que vai ficar salvo dentro da pasta, o que é muito legal pois posso compartilhar depois, clicando em share, collection link. Assim, posso mandar o link para outra pessoa testar o sistema que estou fazendo.

Se for uma API, você pode mandar um exemplo de API para o usuário e ele precisa apenas mudar a parte de autenticação. Mas caso você mesmo queira trocar a autenticação, basta ir em Authorization, nele você diz qual o tipo de autenticação está usando. Lembrando que sempre que fizer algo em Authorization precisa dar um update request para atualizar os Headers correspondentes.

Se clicarmos em Send ele irá executar e retornar com o status. No nosso caso deu OK, tempo 391ms, todos os headers que tivemos e em body é possível visualizar como Pretty, Raw e Preview. Veja o exemplo abaixo:

Vamos criar mais uma requisição, mas dessa vez um POST utilizando o link `https://httpbin.org/post`, mas podemos criar todos os métodos do HTTP.

![Exemplo 4](PostmanEx4.png)

Vamos criar mais uma requisição, mas dessa vez um POST utilizando o link `https://httpbin.org/post`, mas podemos criar todos os métodos do HTTP.

![Exemplo 5](PostmanEx5.png)

Perceba que o POST suporta body, então é possível mandar dados para ele. Vou mandar um name e enviar Tulio:

![Exemplo 6](PostmanEx6.png)

O form retorna com o valor que coloquei.

Também podemos enviar um arquivo apenas mudando o text para file.

Temos o environment, que cria alguns ambientes e podemos customizar os requests baseados neles, mas basicamente, para mim, já é possível usar boa parte apenas usando collections e requisições.

Confira todos detalhes no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/rI9rhM6iJoI" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Precificação de softwares: você sabe como fazer?

Source: blog/precificacao-de-softwares-voce-sabe-como-fazer/index.md

Um dos desafios de quem trabalha na área de tecnologia, especificamente em desenvolvimento de programas, é a precificação de softwares. Por envolver ativos imateriais, virtuais, esse processo acaba suscitando dúvidas no profissional ou na empresa desenvolvedora, que pode acabar por subestimar ou superestimar os valores.

Para evitar a definição equivocada de preços que podem espantar clientes ou serem insuficientes para remunerar o trabalho envolvido, é importante ficar atento aos recursos e conhecimentos envolvidos no processo. Aliás, tais pontos são até comuns de serem avaliados em outros setores que envolvem serviços e produtos físicos, embora nem sempre sejam aplicados de maneira adequada na hora de [cobrar por software](https://www.devpleno.com/como-cobrar-por-software?utm_source=blog&utm_campaign=rc_blogpost).

Portanto, se você quer saber o que considerar nesse processo, continue lendo e veja nossas dicas!

### Como precificar um software?

É importante precificar um software de modo inteligente, buscando valorizar o trabalho empregado mas sem perder o foco num valor atrativo, pois é necessário estar atento aos concorrentes e o mercado em geral.

É preciso levar em consideração os custos fixos e os variáveis, bem como o valor necessário em cada projeto para a delimitação do seu salário. Também é indicado incluir uma porcentagem para a definição do seu lucro e de uma quantia caso deseje contratar um profissional para complementar o seu trabalho. Além disso, é vital acrescentar uma quantia para o pagamento de tributos, especialmente o Imposto de Renda (IR).

Após isso, você pode definir a forma como pretende trabalhar, se por projeto independente, com começo, meio e fim, ou por meio da criação e manutenção de softwares. Nesse primeiro caso entram os pacotes mensais. Nesse segundo caso, os serviços de atualização, manutenção e prestação de suporte contínuo devem entra na conta.

### Quais os critérios para precificar um software?

Além dos pontos mencionados acima, há critérios mais específicos que ajudam a compor o valor final a ser cobrado, seja por software ou por pacotes mensais. São eles:

#### Tempo

A primeira coisa a pensar é o tempo gasto para a produção de um programa. Isso geralmente é calculado em valor/hora, pois facilita a mensuração de quanto o profissional deve ganhar por dia e semana para compor o seu salário. Além disso, durante a produção de uma solução, você basicamente comercializará o seu tempo e seus conhecimentos.

Para definir o seu valor/hora você precisa avaliar o seu nível de experiência e seus conhecimentos. Por exemplo, um profissional júnior pode produzir até três vezes menos do que um de nível pleno, o que significa que o segundo poderá ganhar o triplo dele.

Além disso, é preciso contabilizar o grau de urgência do projeto a ser desenvolvido, pois quanto menor o prazo, maior é o valor a ser cobrado por hora.

#### Disponibilidade

A sua disponibilidade também deve entrar na conta, principalmente se você é constantemente requisitado para muitos projetos. É a chamada lei de oferta e demanda: se há grande procura pelos seus serviços, você consegue aumentar mais o seu preço. Quando houver baixa demanda, então é indicado reduzir um pouco seus valores.

Nesse ponto, há um porém: existem momentos em que há poucos projetos, mas porque são períodos de transição de trabalhos.

#### Nível de experiência

Cada tipo de projeto exige um nível de experiência para que seja conduzido corretamente. Por exemplo, uma página de HTML pode necessitar de um profissional com menos experiência do que um software que exija um analista de dados, o qual terá de empregar estatística, matemática, programação e outros conhecimentos no projeto.

Se você domina mais de um tipo de [linguagem](https://www.devpleno.com/como-escolher-linguagem-de-tecnologia?utm_source=blog&utm_campaign=rc_blogpost) de programação, sabe trabalhar com análises especiais, entre outras competências, você poderá elevar o seu preço desde que esses conhecimentos sejam necessários nos projetos assumidos. Ou que possam entregar um adicional, otimizando-os.

Além disso, profissionais com maior experiência podem entregar serviços mais bem-acabados, justificando o valor a mais que cobram, mesmo que seja numa área com muita concorrência. Aqueles que possuem capacitação para consultoria também podem cobrar valores ainda maiores.

#### Valor agregado

Para definir seu preço, você também precisa mensurar o quanto o seu trabalho rende. Por exemplo, se você cobra R$ 80,00 por hora, é importante que o seu trabalho renda para o cliente acima desse valor, como R$ 100,00 ou R$ 120,00 reais por hora.

É importante também que você entregue um adicional que os seus concorrentes não façam, como um atendimento mais personalizado, possibilidade de maior número de ajustes, entre outros benefícios. Esses pontos possibilitam que você eleve o seu preço.

#### Os custos envolvidos

Como mencionado acima, você precisa considerar seus custos, como a quantia paga com internet e telefone. É preciso pegar os valores de ambas e dividir pelas horas trabalhadas, para que você some esse número ao seu preço cobrado por hora, mesmo que existam momentos em que você utilize esses serviços para fins diferentes do trabalho. Afinal, você está compondo a sua remuneração para pagá-los também.

Se você recebe por Paypal, por exemplo, é preciso acrescentar as taxas e porcentagem cobrados pelo serviço nas transferências. O mesmo vale na hora de receber por transferências bancárias, como DOCs ou TEDs.

#### Os impostos

Não se esqueça de incluir no seu preço uma porcentagem a mais para pagar impostos que podem variar de 7,5% a 27,5% dependendo da quantia envolvida. Isso é ainda mais importante para quem possui uma empresa, pois há diferentes tributos.

### Como explicar o valor do software para o cliente?

A precificação de software precisa, antes de mais nada, ser justa e, mais do que isso, ser entendida como justa pelo cliente. Caso contrário, será difícil você obter consumidores dispostos a pagar pelo valor cobrado, pois dificilmente terão noção de todos os recursos e habilidades empregadas no desenvolvimento do programa.

É preciso também esclarecer qual o valor que o software terá para o consumidor, o que é diferente de preço. Esse se baseia em dados “palpáveis”, podendo ser quantificado com base nos recursos empregados num produto. Já o valor tem a ver com algo subjetivo, variando de indivíduo para indivíduo. Dependendo da necessidade da pessoa, seu software poderá ter menor ou maior valor.

Também é importante literalmente abrir o jogo com o cliente, sendo honesto e apresentando as razões reais da quantia cobrada pelo programa. Para isso, fale sobre:

- os preços praticados pelo mercado;

- os gastos com mão de obra não só sua, mas de outros profissionais caso tenha sido preciso contratá-los;

- a experiência necessária para o desenvolvimento do software;

- o tempo de trabalho exigido, especialmente se foi necessário trabalhar em feriados e fins de semana, até mesmo de noite;

- o grau de complexidade do programa e os [estudos sobre tecnologia](https://www.devpleno.com/como-organizar-os-estudos-em-tecnologia?utm_source=blog&utm_campaign=rc_blogpost) necessários etc.

### Qual a diferença entre precificação de softwares e de outros tipos de produto?

Para convencer um cliente, é preciso utilizar a racionalização em cima dos recursos necessários, mesmo que subjetivos. Aliás, isso é um dos fatores que diferenciam um produto convencional de um software.

O primeiro demanda insumos mais concretos, físicos, enquanto que o segundo necessita de conhecimentos e insumos intangíveis, que exigem muito tempo de experiência e estudo para serem adquiridos.

Por fim, lembre-se de ser correto na definição de seus preços, alertando seus clientes caso o custo de um software fique alto demais e o programa não traga retornos a eles. Dessa forma, você reforça o comprometimento com a satisfação dos seus consumidores, além de destacar a integridade do seu trabalho.

Também evite superestimar projetos, para que não perca clientes caso se sintam enganados. E se você avaliou equivocadamente o valor de um software, cobrando a mais, tente oferecer adicionais para compensar. Caso o preço tenha sido menor do que o necessário, ajuste isso nos projetos seguintes.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Dica: Precificação em Software

Source: blog/precificacao-em-software/index.md

Uma dúvida comum em desenvolvedores é como precificar softwares. Neste vídeo, comento como eu costumo cobrar e dicas de como você pode fazer de maneira justa para você e para seu cliente.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ho55mJ5r8Y8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Precisa ter diploma para trabalhar por meio da Toptal?

Source: blog/precisa-ter-diploma-para-a-toptal/index.md

Você não é graduado, mas quer trabalhar por meio da Toptal? Entenda se isso é possível ou não neste vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/pYXf9DXnBgI" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Preconceito com JS? Não preparado para corporativo?

Source: blog/preconceito-com-js-nao-preparado-para-corporativo/index.md

Hoje quero falar mais um pouco sobre o POO para JavaScript. Basicamente as últimas considerações sobre essa transição e o preconceito que o JavaScript enfrenta.

Por que isso acontece?

Principalmente porque o JavaScript já foi muito simples, mas estamos entrando em um mundo onde está sendo padronizado o JavaScript como linguagem front-end e isso é muito bom. Quando falamos do Servidor, também temos essa maturidade da linguagem, principalmente quando grandes empresas como Wallmart começaram a utilizar do javaScript.

Outra coisa que está quebrando essa barreira é o tooling, muitas das ferramentas que utilizamos hoje é construído com o NODE e baseado no NPM.

Mas o grande detalhe é, se você está vindo de JAVA, PHP ou qualquer outra linguagem, tente não ter esse preconceito do JavaScript. Não se leve pela simplicidade da linguagem porque ela é bem poderosa.

Uma vantagem do que eu vejo hoje e ajuda a quebrar o preconceito é que muitas empresas estão preferindo desenvolvedores JavaScript do que em outras stacks. Um ponto que gostaria de deixar realçado é que o conceito de melhor, pior, certo e errado é muito relativo. Eu aprendi muito isso durante meu mestrado. Hoje eu acredito que algum paradigma mais funcional fica mais elegante dentro do JavaScript, mas é muito difícil colocar pontos. Quanto mais a gente conseguir pensar que essas ferramentas e o que a gente conhece, aumenta a nossa bagagem para saber o que é melhor ou pior naquela situação específica.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/8yEMB8NGrI0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Preview de imagens antes do upload

Source: blog/preview-de-imagens-antes-do-upload/index.md

Hoje vamos fazer o preview da imagem que está sendo selecionada para fazer upload, isso é bastante interessante de se fazer quando o usuário está selecionando uma foto.

Vamos criar inicialmente um html, em seguida criar um input type do tipo file e um img:

```jsx
<html>
  <head>Preview Upload</head>
  <body>
    <input type='file' id='upload' />
    <img id='img' />
    <script
      src='https://code.jquery.com/jquery-3.2.1.slim.js'
      integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='
      crossorigin='anonymous'
    ></script>
  </body>
</html>
```

Agora vamos abrir uma tag script nele. Quando o documento estiver pronto e for feito um change, vamos fazer um console.log this:

```jsx
<script>
  $(function()
  {$('#upload').change(function () {
    console.log($(this)[0].files)
  })})
</script>
```

Assim estamos pegando o arquivo na posição zero. A partir disso, vamos criar um const que vai ser igual a this na posição 0. Já que ele é uma instância de files, conseguimos utilizar um fileReader e ler e processar esse arquivo:

```jsx
<script>
  $(function()
  {$('#upload').change(function () {
    const file = $(this)[0].files[0]
    const fileReader = new fileReader()
    fileReader.onLoadend = function () {
      console.log(fileReader.result)
    }
    fileReader.readAsDataURL(file)
  })})
</script>
```

Como a imagem gera uma URL válida, se eu colocá-lo como source da imagem, ele vai dar um preview.

```jsx
<script>
    $(function(){
        $('#upload').change(function(){
            const file = $(this)[0].files[0]
            const fileReader = new fileReader()
            fileReader.onLoadend = function(){
                $('#img')attrib('src', .fileReader.result)
            }
            fileReader.readAsDataURL(file)
        })
    })
</script>
```

Isso é muito interessante para a experiência do usuário como um todo. Imagine se eu estivesse selecionando um documento, seria muito mais fácil se eu estivesse prevendo ele.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/euUtDQcwsYk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Primeiros passos na Toptal – Série Trabalho Remoto

Source: blog/primeiros-passos-na-toptal/index.md

Depois de passar pelo processo seletivo da Toptal, quais são os primeiros passos? Descubra neste vídeo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/VUhDqDp23Bw" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog).

[![Thumbnail](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Processo Seletivo da Toptal – Série Trabalho Remoto

Source: blog/processo-seletivo-da-toptal/index.md

Seu objetivo é trabalhar remotamente por meio da Toptal? Neste vídeo, você vai entender como funciona o processo seletivo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/YRWgZZ2j43Q" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog).

[![Thumbnail](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Programação Assíncrona - NodeJS Primeiros Passos

Source: blog/programacao-assincrona/index.md

Continuando nossa série sobre NodeJS, falando um pouco sobre como funciona a Programação Assíncrona do JS, vamos fazer alguns testes para você ver a diferença de como o JavaScript (e nesse caso alguns módulos do NodeJS) trabalham esse assincronismo.

**Por que o assíncrono é tão interessante?**

Quando temos uma tarefa ou alguma instrução que vamos fazer e ela pode ser demorada demais, por exemplo, se ela for um pouco diferente de qualquer estrutura de dados que estamos acostumados como IF e por ai vai, ele simplesmente deixa para executar quando os dados dessas operações estiverem disponíveis.

Como exemplo, vamos ler um arquivo texto de modo síncrono e um de modo assíncrono e mostrar as vantagens disso. Em um novo arquivo, vamos criar um arquivo de texto 'dados.txt' e colocar dentro uma frase, "Conteúdo do arquivo texto." Agora criamos um novo arquivoJS, importamos o FS, um módulo padrão no Node para manipulação do file system.

```jsx
var fs = require('fs')
var contents = fs.readFileSyinc('dados.txt', 'utf8')
console.log(contents)
```

Vamos salvar como Sync.js e mandar rodar usando o comando

```jsx
node sync.js
```

Perceba o seguinte: como a linha **"var contents = fs.readFileSyinc('dados.txt', 'utf8');"**é síncrona, enquanto arquivo não for lido por completo ela não passa para a linha seguinte, isso pode ser legal ou não, dependendo do ponto de vista. Em linguagens que não são assíncronas como no JAVA ou PHP abrimos uma tread nova, ou seja uma linha de execução nova para caso chegue uma outra requisição não fique demorando muito para essa resposta demorar para o usuário. Na escala, isso é muito ruim. Imagine que apenas um usuário está usando, teremos pouco de prejuízo, mas se temos um sistema com 10 mil usuários ao mesmo tempo fazendo operações como essa, isso é muito problemático.

Vamos fazer um exemplo com Assíncrono para que fique mais claro:

```jsx
var fs = require('fs');
fs.readFile('dados.txt', 'utf8'), function (err, contents){
    console.log(contents)
});
console.log('continuar...')
```

Vamos salvar como async.js. Note que eu passo como parâmetro para essa instrução um callback.

**O que faz uma função de callback?**

Essa operação de IO demora um pouco para finalizar, então como é assíncrono, ele vai rodar e vai passar reto enquanto os dados não estiverem prontos e não pararem nela como no sync.js. Quando ele bater na linha ReadFile ele vai passar todas as camadas do SO pedindo para fazer esse IO e, internamente, vai gerenciar avisando quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.

No async, repare o seguinte: o 'continuar...' apareceu antes do conteúdo do contents. Imagine se fossemos ler mil arquivos, não teria problema nenhum porque os arquivos vão lendo a medida que vão chegando. Por exemplo, se eu mandei 10 arquivos, não significa que os 10 vão ser lidos ao mesmo tempo, pode ser que o primeiro esteja disponível primeiro, depois o quinto, depois o terceiro e por ai vai. Enfim, de forma assíncrona não consegue saber quando vai ser retornado mas isso é legal porque não travamos o nosso programa principal apenas para fazer uma leitura de IO.

Isso é fantástico porque qualquer aplicação mais robusta hoje em dia é uma aplicação que chamamos de IO intensive, ou seja, eles usam muita entrada e saída. Se você for pensar, por exemplo, no facebook, a parte de chat e autorizações automáticas são muitas operações de IO acontecendo ao mesmo tempo, então se temos uma engine como o node que consegue lidar com isso de uma forma muito boa, podemos lidar com essas operações de IO intensive de forma assíncrona e não vai travar a tread principal.

Se criarmos uma aplicação em node com 100 usuários usando ao mesmo tempo, ele consegue responder os 100 usuários com apenas uma linha de código. Para quem já programou em JAVA sabe que o minimo seriam 100 treads se não tivesse nenhuma otimização. O node é muito baseado em assíncrono, praticamente tudo que vamos fazer é feito de forma assíncrona e a única coisa que você precisa tomar cuidado é de não achar que o console.log de dentro do callback executaria antes do que está fora, as vezes a pessoa fica atentada a querer fazer uma operação atrás da outra mas são várias operações assíncronas, logo não vai funcionar porque vão retornar em tempos diferentes. Existe algumas estruturas que utilizamos para controlar esse fluxo e vamos falar mais a frente.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/wKqEwKP-E1E" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Qual o projeto certo para estudar programação?

Source: blog/projeto-certo-para-estudar-programacao/index.md

Ao iniciar a jornada de estudos sobre programação, livros, vídeos, tutoriais e dicas em sites são os principais recursos para aprender como desenvolver um sistema que realiza uma determinada tarefa. Mas, depois de dominarmos as ferramentas de uma linguagem ficamos sem a noção de como seguir aprendendo mais e desenvolvendo nossas habilidades. O que mais acrescentaria aos meus conhecimentos sobre programação? Devo buscar novas fontes de informação para aprender? Quais serão os meus próximos desafios?

É comum estarmos sem ideias de projetos que podemos criar para aprender mais sobre programação. Por isso, hoje vamos responder a seguinte pergunta do Eric Luz: “Que tipo de projeto posso utilizar para estudar?”

Neste post, listamos três formas para continuar desenvolvendo aplicações e manter o seu ritmo de estudo em programação.

#### 1) Faça um projeto social

A primeira forma de aprimorar seu aprendizado é procurar uma creche, asilo, orfanato ou uma instituição em prol dos animais e propor uma solução para determinado problema não resolvido. Além de colocar o desenvolvedor para usar suas ferramentas, esse exercício também provê algo bom para a sociedade. Alguns exemplos:

Vá a um orfanato próximo de sua casa, converse com os funcionários e veja se um sistema para organizar e administrar o estoque de mantimentos, utensílios, produtos de limpeza, brinquedos e doações seria útil;

Vá a um asilo e veja se eles precisam de uma aplicação para registrar e controlar as pessoas que visitam os idosos que moram ali;

Vá a uma ONG de proteção aos animais e veja se eles têm algum site ou meio de divulgar o seu trabalho.

Outro ponto muito importante é que você tem a chance de colocar o projeto “no ar” ou “em produção” para que seja realmente utilizado no dia a dia traga benefícios para os seus usuários.

#### 2) Inspire-se em soluções do mercado

A segunda forma para manter seu ritmo de aprendizado é observar o mercado de soluções em TI e ver quais as aplicações poderiam ser replicadas. Um exemplo que temos no DevPleno é o MercadoDev, inspirado no Mercado Livre, mas implementado como uma versão reduzida utilizando o React para manter o foco nas funcionalidades de mostrar os dados do Firebase e fazer uploads de arquivos.

Uma dica de estudo que sempre mencionamos por aqui é “Poucas coisas novas ao mesmo tempo”. Os projetos criados no DevPleno possuem algumas funcionalidades, mas as restringimos para estudar cada aspecto de maneira focada, compreendê-la adequadamente e aplicar o conhecimento aprendido no código sem perder muito tempo. Dessa forma, garantimos que o projeto será finalizado, testado para verificar sua execução, alterado caso haja algo que não funcionou como o esperado e colocado em produção. Ao começar um projeto menor e terminar cada etapa aos poucos, sentimos a gratificação em concluir um sistema inspirado em algo que existe e funciona – o que nos motiva a estudar e aprender cada vez mais.

#### 3) Crie um projeto de sua autoria

Não fique com vergonha de suas próprias ideias! Pegue aquela ideia esquecida na gaveta e coloque-a em prática. Lembre-se sempre de começar um projeto com poucas funcionalidades e (o que é mais importante) coloque em produção. Uma coisa muito interessante aqui no DevPleno é que as pessoas que estão acompanhando nossos minicursos gratuitos como o de [Socket.IO](https://go.devpleno.com/fsm?sck=blog), o de [ReactJS](https://go.devpleno.com/fsm?sck=blog) e o [Fullstack Academy](https://go.devpleno.com/fsm?sck=blog), estão colocando no ar suas aplicações. Já vimos várias versões do MercadoDev, iRango, MinhasSéries rodando online, o que é fantástico!

Colocar o seu programa em produção é muito importante para você, desenvolvedor, porque ao disponibilizar suas aplicações em seu Github, por exemplo, um recrutador terá mais facilidade de avaliar o seu trabalho e saber se você é o profissional que ele procura para uma vaga de emprego. Além disso, você exercita como publicar os seus projetos.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Promise Constante - como criar situações assíncronas de teste

Source: blog/promise-constante-uma-forma-simples-de-criar-situacoes-assincronas-de-teste/index.md

A dica de hoje é bastante interessante porque ela nos ajuda a criar algumas situações de teste, principalmente envolvendo promises, que é uma forma de lidar com o assincronismo em JavaScript. Muitas vezes precisamos testar essa promise, então imagine o seguinte cenário, onde eu quero construir uma função readDir e promisificá-la:

```jsx
const fs = require('fs')
const readdir = (path) =>
  new Promise((resolve, reject) => {
    fs.readdir(path, (err, list) => {
      if (err) {
        reject(err)
      } else {
        resolve(list)
      }
    })
  })
```

Agora imagine que temos uma outra função chamada path, que é assíncrona:

```jsx
const functA = (path) => {
  const list = await readdir(path)
  console.log(list)
}
```

Se nós quiséssemos, por exemplo, testar essa função, rodaríamos o funcA:

```jsx
funcA('./')
```

Ela irá trazer todos os arquivos que eu tenho no meu diretório atual. Agora imaginem que eu quero testar esse readdir, mas sem efetivamente passar pelo fs, quero que minha promise retorne os valores para que possa apenas testar se o funcA está correto. É equivalente ao mock.

Quando queremos ter uma promise que é uma constante para a situação que estamos utilizamos, podemos fazer o seguinte:

```jsx
const readdir = (path) => Promise.resolve(['arquivo1.txt', arquivo2.txt])
```

Ele irá retornar uma lista com esses resultados. Então se eu quiser ter uma lista que sempre resolve pro mesmo valor, sendo utilizado parecido com mock para teste, utilizamos o promise.resolve.

Quando estamos aprendendo programação assíncrona e queremos fazer esses testes, isso é muito interessante.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/OeI0CCzl0y4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Promise Race - Qual promise resolve/rejeita primeiro

Source: blog/promise-race/index.md

Hoje quero mostrar uma funcionalidade que chamada Promise.race. Ela vai receber uma lista de promises no JavaScript e ele vai retornar apenas uma dessas promise: a que rejeitar ou resolver primeiro. Vamos criar uma função que é uma promise:

```jsx
const p = (time, name) => {
  return new Promise((resolve, reject) => {
    setTimeOut(() => resolve(time + ' ' + name), time)
  })
}
p(100, 'opa').then((e) => console.log(e))
```

Ao rodar esse código, ele retorna opa depois de 100ms. Agora vamos criar uma lista chamada de OS, e dentro dela faremos uma lista de promises:

```jsx
const os = [P(100, 'opa'), P(200, 'opa2')]
Promise.race(os).then((e) => console.log(e))
```

Ao rodar, vai trazer a primeira promise, isso não quer dizer que ele pare a operação do outro. Ele continua executando, porém não retorna para o resultado, mesmo se rejeitarmos. Obviamente é o contrário do Promise.all, que é quando retornamos todos:

```jsx
Promise.all(os).then((e) => console.log(e))
```

Assim vamos ter todos os retornos, ao contrário do race.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Z_paUYXjqCI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# NodeJS Primeiros Passos - Promises

Source: blog/promises/index.md

Continuando nosso assunto sobre NodeJS, vamos tratar sobre como podemos organizar o fluxo para que o código fique realmente organizado. Olhe esse exemplo:

```jsx
var fs = require('fs')
fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
  fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {
    fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {
      console.log('tudo certo')
    })
  })
})
```

Aqui faço três operações assíncronas e você pode perceber que o código vai crescendo para frente, porque os dois códigos estão dentro do callback do primeiro readFile, o terceiro está dentro do segundo e o console log está dentro do terceiro. Imagine se eu tivesse mais trechos de código assíncrono e estivesse tratando com IO, então o código iria crescendo cada vez mais para frente, deixando a manutenção muito complicada. Chamamos esse tipo de código de código hadouken. **Como podemos fazer para esse código saia dessa forma e comece a crescer para baixo?** Uma das alternativas é utilizar promises. Para isso, vamos utilizar um módulo hamado 'q'.

```jsx
npm install q
```

No meu caso, retornou um warning porque eu não tenho o package.json, mas como estamos apenas testando, está tudo bem. Então vamos lá:

```jsx
var Q = require('q')
var fs = require('fs')
function readArquivo1() {
  fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {})
}
function readArquivo2() {
  fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {})
}
function readArquivo3() {
  fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {})
}
```

Vamos salvar ele como com.promises.js. Apesar de estar com bastante texto, podemos perceber que o arquivo ficou mais fácil de ler. Se eu chamar esses arquivos, ele vai executar a linha 1, pular, executar a próxima e depois de um certo tempo vai executar o callback:

```jsx
function readArquivo1(){
    ... <linha1>
    fs.readFile('arquivo1.txt', 'utf8', function(err, arquivo1){
    });
    ...< linha 2>
}
```

Não é muito bem isso que queremos, afinal queremos um atrás do outro, então podemos fazer o seguinte:

```jsx
function readArquivo1() {
  var deferred = '.defer()'
  fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
    deferred.resolve(arquivo1)
  })
  return deferred.promise
}
```

Perceba que estou retornando uma promise avisando que vai ser retornado algo. Quando esse algo estiver pronto, ele devolve a promise, no caso o arquivo 1. Como eu chamo os arquivos agora usando promises? Valos ler os arquivos e quando ele estiver pronto vai ser chamado o then.function(arquivo1):

```jsx
function readArquivo1() {
  var deferred = '.defer()'
  fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {
    deferred.resolve(arquivo1)
  })
  return deferred.promise
}
function readArquivo2() {
  var deferred = '.defer()'
  fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {
    deferred.resolve(arquivo2)
  })
  return deferred.promise
}
function readArquivo3() {
  var deferred = '.defer()'
  fs.readFile('arquivo3.txt', arquivo1 + '\\n' + arquivo2, function (err) {
    deferred.resolve()
  })
  return deferred.promise
}
readArquivo1().then(function (arquivo1) {
  console.log(arquivo1)
})
```

O readArquivo1 retorna uma promise dizendo que quando tiver essa operação IO disponível, eu chamo de volta para então executar o then. Ao executar o código, vai ser retornado o conteúdo do arquivo 1. Poderiamos fazer também:

```jsx
var conteudo = ''
readArquivo1()
  .then(function (arquivo1) {
    conteudo += arquivo1
    return readArquivo2()
  })
  .then(function (arquivo2) {
    conteudo += arquivo2
    console.log(conteudo)
  })
```

Então vamos ler o arquivo 1, colocar no conteúdo, ler o arquivo 2 e então dar o console.log no conteúdo, a resposta será o conteúdo dos dois arquivos concatenados. Podemos chamar o arquivo 3 e passar o conteúdo nele.

```jsx
function readArquivo3(conteudo){
    var deferred = ".defer()";
    fs.readFile('arquivo3.txt', conteudo, function(err){
        deferred.resolve();
    });
return deferred.promise;
}
var conteudo="";
readArquivo1()
.then(function(arquivo1){
    conteudo+= arquivo1;
    return readArquivo2();
}).then(function(arquivo2){
    conteudo+= arquivo2;
    return writeArquivo3(conteudo)
}).then(function())
console.log('tudo certo');
});
```

Perceba que meu código começa a crescer para baixo e, ao executar, será retornado a mensagem e criado o arquivo 3 com o conteúdo dentro. A manutenção desse código fica muito mais simples porque eu consigo ver claramente o que cada função está fazendo e também a sequência de passos. Uma das coisas que dá para ser feito também é a seguinte:

```jsx
readArquivo1().then(readArquivo2).then(readArquivo2)
```

Ele vai passar pelo arquivo 1, arquivo 2 e novamente no arquivo 2. Se eu não tiver que passar atributo para frente, posso fazer isso. Caso a gente queira que o arquivo 2 receba um conteúdo que veio arquivo 1, também podemos utilizar assim, mas o problema é que ela fica muito dependente uma função da outra, eu prefiro fazer de uma forma que uma função não dependa muito da outra para que eu consiga modularizar melhor.

Confira todos os detalhes no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ogg4mDfgGHg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Promisify-Node: Convertendo funções clássicas do Node em Promises

Source: blog/promisify-node/index.md

Neste post, vamos fazer um hands-on do Promisify-Node, uma forma de converter as funções clássicas do Node em JavaScript que retornam callback em promises. Existem vários módulos que já fazem isso, como em módulos utilitários de promises, o q, bluebird, por exemplo.

**Então por que usar o Promisify-Node?**

Ele tem uma funcionalidade bastante relevante que vou mostrar durante o hands-on, vamos lá. Para instalar e adicionar como dependência o Promisify-Node:

```jsx
yarn add promisify-node
```

Vamos importar o promisify e o fs(file system) para termos uma função com o callBack.

```jsx
const promisify = require('promisify-node')
const fs = require('fs')
```

Se fossemos utilizar o fs normalmente, iriamos fazer o seguinte:

```jsx
fs.readFile('arquivo.js', (err, data) => console.log(data.toString()))
```

Então ele retorna um callBack, onde eu consigo escrever o conteúdo do arquivo. Então vamos converter essa função em promise para, por exemplo, usar o then dentro de um generator ou com async/await.

Podemos pegar essa função fs.readFile, criar uma nova readFile e passar para promisify, assim:

```jsx
const readFile = promisyfy(fs.readFile)
```

**Qual a diferença?**

Agora eu posso chamar a readFile, falar qual arquivo eu quero (no caso o arquivo.js) e chamar ele no modo promisify.

```jsx
readFile('arquivo.js').then((data) => console.log(data.toString()))
```

**Qual a vantagem?**

Além da promisify ser mais fácil de manipular, evitamos o callback hell ou código hadouken, que faz uma barrigona de tanto callback que tem um dentro do outro.

Também podemos utilizar com generator e com async/await. Outra coisa legal é que, se quisermos usar todas as funções do fs como uma promise, podemos mudar o Const fs = require('fs') assim:

```jsx
const fs = promisify('fs')
```

E, assim, qualquer função que eu for utilizar, como por exemplo:

```jsx
fs.readFile('arquivo.js', (err, data) => console.log(data.toString()))
```

Já irá virar naturalmente uma promise, com isso posso fazer:

```jsx
fs.readFile('arquivo.js').then((data) => console.log(data.toString()))
```

Convertendo todos os métodos e funções disponíveis dentro desse módulo, de callback para promise.

**Concluindo**

Ainda estamos usando o fs.readFile, mas em uma versão 'promisifiada' :) Isso é bastante poderoso, afinal assim podemos converter um módulo inteiro, de callback para promise utilizando generator ou async/await tranquilamente.

Você também pode conferir o passo a passo desse hands-on por vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-Uy6Ri631H4" allowfullscreen></iframe>
</div>

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Pure Functions (Funções Puras)

Source: blog/pure-functions-funcoes-puras/index.md

Uma forma de construir funções muito difundido pela programação é usar funções puras. Veja neste vídeo as vantagens dessas funções ao construir aplicações com Javascript.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/1OrEqycGoiM" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# As vantagens do Javascript em todas as camadas de uma aplicação

Source: blog/quais-sao-as-vantagens-de-usar-javascript-em-todas-as-camadas-de-uma-aplicacao/index.md

As muitas vantagens de usar JavaScript fizeram com que ela se tornasse a linguagem de programação mais popular do mundo.

Extremamente versátil, o JavaScript pode até ter começado de forma tímida com foco limitado ao client-side. Mas isso mudou com a chegada do node.js em 2009: com a possibilidade de utilizar a linguagem também no server-side, cada vez mais devs defendem a utilização desta linguagem em todas as camadas de uma aplicação.

Neste artigo, explicaremos melhor quais são as vantagens da utilização do JavaScript de ponta a ponta, em todas as camadas de uma aplicação.

### O que são exatamente as camadas de uma aplicação?

Também chamadas de stacks, as camadas de uma aplicação são simplesmente o front-end e o back-end de uma aplicação.

E no caso de uma aplicação web, o front-end é a camada que roda no navegador, ou seja, no lado do cliente, ou client-side. Em resumo, qualquer componente que é manipulado pelo usuário e utilizado para coletar sua entrada em um sistema é qualificado com front-end.

Já o back-end é o server-side, ou lado do servidor. Ele recebe as entradas feitas pelo usuário no front-end, as processa e então devolve uma saída que será exibida ao usuário mais uma vez pelo front-end.

Existem várias linguagens que podem ser usadas tanto no front-end quanto no back-end de uma aplicação, mas o JavaScript pode ser aplicado em ambas. E isso é o que significa utilizar a linguagem em todas as camadas de uma aplicação.

Um dev full stack, ou seja, um desenvolvedor capaz de programar nas duas camadas de uma aplicação, usualmente conhecerá o JavaScript e poderá escrever seu código com essa linguagem em ambas.

### O que são Node.js + Express + EJS + MongoDB?

Para compreender melhor como exatamente o JavaScript pode ser utilizado em todas as camadas de uma aplicação, é preciso conhecer também alguns outros nomes: Node JS, Express, EJS e MongoDB.

Com a união de todos esses, é possível fazer algo com o JavaScript do começo ao fim. E, se hoje essa linguagem é utilizada de ponta a ponta, isso se deve ao trabalho brilhante do programador Ryan Dahl, que apresentou o [Node.js](https://www.devpleno.com/modulos?utm_source=blog&utm_campaign=rc_blogpost) durante uma conferência JSConf na Europa e foi aplaudido de pé na ocasião.

O node.js é uma plataforma que permite a interpretação de código JavaScript do lado do servidor. Ou seja, com o node.js, é possível levar o JavaScript ao back-end.

Quando uma equipe de programadores começa a criar um ambiente de desenvolvimento e instala o node.js, também é instalada uma ferramenta chamada [NPM](https://www.devpleno.com/npm-e-modulos-de-terceiros?utm_source=blog&utm_campaign=rc_blogpost), sigla para Node Package Manager.

O NPM é utilizado para instalação e gerenciamento de módulos no Node.js. Muitas pessoas preferem utilizar, para o mesmo trabalho, o [Yarn](https://www.devpleno.com/hands-on-yarn?utm_source=blog&utm_campaign=rc_blogpost), que é mais rápido e eficaz, mas independentemente da opção escolhida, é com o gerenciador de módulos que será feita a instalação do Express, um framework para o Node.js.

O Express é ao mesmo tempo minimalista e robusto: com ele, é possível criar com mais facilidade qualquer tipo de aplicação web. Ele permite a passagem facilitada do navegador para back-end e economiza trabalho de programação.

Já o EJS é a sigla para Embedded JavaScript templates, que é uma linguagem de templates que permite a criação de HTML com apenas JavaScript. A utilização do EJS simplifica a vida do desenvolvedor, que poderá realmente utilizar essa linguagem em todo o desenvolvimento do produto.

Com isso, o processo de desenvolvimento é mais rápido e o código completo fica mais integrado e padronizado, pois apenas JavaScript é utilizado, ainda que o EJS emita o resultado em HTML.

E por fim, o MongoDB é uma ferramenta de banco de dados que armazena tudo em arquivos JSON-like. Ele é um banco de dados gratuito e open-source que pode ser utilizado em conjunto com todas as demais ferramentas já citadas para que a aplicação utilize JavaScript de ponta a ponta.

### Quais são as vantagens de usar JavaScript em todas as camadas?

O JavaScript já foi ridicularizado por ser uma linguagem simples demais e limitadora do potencial de um programador. Ainda hoje, muitos devs ainda torcem o nariz para ela, mas a verdade é que, desde o seu lançamento oficial em 1996 até os dias de hoje, o JavaScript evoluiu muito e não foi à toa que se tornou a linguagem mais popular do mundo, desbancando Java, C#, PHP, Phyton e outras.

Entre as vantagens de utilização dessa linguagem em todas as camadas de uma aplicação, a mais clara é a padronização: com tudo sendo escrito em JavaScript, a uniformidade da linguagem é maior e o trabalho é mais compreensivo para quem está envolvido no projeto, seja um dev front-end, back-end ou full stack.

E se um programador compreende bem os fundamentos da linguagem, ele será capaz de escrever também em todas as camadas, reduzindo gargalos em que o desenvolvimento para porque metade do time espera o pessoal do back-end terminar algo, por exemplo.

Se uma equipe for boa em JavaScript, já é um passo dado para que todos sejam, de certa forma, full stack, ou seja, capazes de trabalhar nas duas camadas da aplicação. E um time full stack é mais versátil, ágil e compreende melhor o produto como um todo.

Outra vantagem bem significativa é a possibilidade de reaproveitamento do código. Reutilizar trechos de código que já foram feitos é uma forma de reduzir a carga de trabalho dos desenvolvedores e acelerar o término do projeto.

E com o MongoDB, é possível inclusive usar o JavaScript no banco de dados. Isso faz com que realmente todo o fluxo de um objeto em uma aplicação seja realizado com o JavaScript.

É possível receber a entrada no navegador com JavaScript, transportar a demanda para o back end ainda com a linguagem e, por fim, salvar um objeto no MongoDB ainda com o JavaScript. Naturalmente, o fluxo reverso também será tão prático quanto.

E você, já está pronto para trabalhar com o JavaScript e se tornar um desenvolvedor full stack? Entre em [contato com a gente](https://www.devpleno.com/contato?utm_source=blog&utm_campaign=rc_blogpost) para aprender mais sobre essa possibilidade e potencializar seu currículo para o mercado! Esperamos você!


---

# Qual é a sua desculpa?

Source: blog/qual-a-sua-desculpa/index.md

Qual a sua desculpa para não fazer ou não estudar alguma coisa hoje?

Nosso corpo e nossa mente tem essa mania de dar desculpas para tudo, então sempre que queremos dar um passo a mais, estudar algo novo ou fazer algo interessante, a nossa mente nos dá desculpas para não fazer e muitas vezes acreditamos nessas desculpas. Por exemplo, estou muito cansado para aprender uma linguagem nova ou um idioma novo.

O problema nisso é que como conhecemos muito bem nosso corpo e mente, damos desculpas que nós mesmos acreditamos, então é muito difícil lutar contra isso. A minha dica é que sempre que você se pegar dando uma desculpa, converta isso em uma motivação, afinal esse é seu corpo tentando te 'proteger' e você deve lutar contra isso porque é apenas a sua mente tentando me desviar do seu objetivo.

Sempre que ouvir de alguém que algo é difícil de ser feito, pegue isso e transforme em motivação para você, pois quem quer fazer arruma um jeito e quem não quer arruma desculpa.

Veja o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/jbSspugOsM4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Qual é o seu maior desafio nesse momento?

Source: blog/qual-seu-maior-desafio/index.md

Há um tempo venho ajudando desenvolvedores e profissionais de outras áreas e isso vem me proporcionando muita felicidade. É algo que faz parte do meu propósito de vida. Por isso também quero te ajudar a resolver o seu desafio.

**O que você precisa fazer**

Escreva um e-mail para tuliofaria@devpleno.com contando um pouco da sua trajetória de vida (como trabalha, quando começou a programar, etc), me diga também qual é o seu maior desafio (qual o seu objetivo e em que exatamente precisa de ajuda) e como você pode ajudar outras pessoas.

Pode ficar tranquilo quanto à privacidade, somente eu tenho acesso a este e-mail

**O projeto**

Depois de ler os e-mails recebidos e fazer uma triagem para descobrir quem no grupo pode se ajudar. Inicialmente não vai ser público porque ainda não consegui achar uma ferramenta que possa fazer isso de uma maneira ótima. Um grupo no facebook seria uma opção, mas eu não gosto de usar esse formato, já que as informações se perdem lá dentro, então quero achar uma forma de ter mais privacidade para os dados já que estamos lidando com informações sensíveis.

Então, por enquanto, eu mesmo irei fazer este roteamento manualmente para apresentar as pessoas (ou eu mesmo vou ajudar se for o caso). A ideia é que a gente cresça junto.

Posteriormente, provavelmente, vamos transformar isso em um sistema, mas quero ver como vai funcionar primeiro nessa forma manual. Acredito que quando desenvolvemos um sistema, temos que conhecer como ele funcionaria manualmente antes de tentar automatizar algo que não existia.

Venho fazendo esse projeto localmente com alguns profissionais de outras áreas (discutimos negócios, como podemos melhorar as pessoas…) e isso está sendo fantástico, então quero aplicar isso aos desenvolvedores que acompanham o DevPleno. Acredito muito no resultado disso, podemos tornar o mundo melhor começando por onde temos forças: ajudando as pessoas de alguma forma.

Aceita entrar nesse desafio? Mande seu e-mail!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Quantas linguagens devo programar?

Source: blog/quantas-linguagens-programar/index.md

Hoje vou começar perguntando uma coisa, quantas linguagens você sabe programar?

Essa foi uma das perguntas que recebi recentemente em uma live, achei bem interessante responder isso e mostrar algumas coisas que acho legal quando pensamos nessas quantidades.

Respondendo quantas linguagens eu programo, na verdade, eu não sei, mas deve estar na faixa de umas dez linguagens. Hoje programo com JavaScript, JAVA, PHP, já programei em linguagens muito específicas como C, C++, Pascal, Delphi e por aí vai.

Uma coisa que acho bastante interessante e é também um ponto onde podemos evoluir na carreira é que ao invés de contar quantas linguagens, definir uma meta para cada item na carreira. Por exemplo, uma das coisas que defini como meta para mim é aprender um framework ou uma tecnologia nova por ano. Com isso, todo ano eu tenho que perceber que eu fui melhor que o ano anterior. Nos últimos 4 anos, eu fiquei muito encabulado com qualidade, então estou cada vez mais aplicando continuous integration, continuous deployment, teste unitário, etc.

Além de definir, também é importante se comprometer a completar essa meta. Não vale somente dizer que quer programar uma linguagem por ano, é importante definir o que é programar essa linguagem e conhecer a tecnologia. E como se faz isso? Colocamos em produção.

Sabemos que projetos simples de estudo não dão os mesmos problemas que quando colocamos em produção, então, esse processo é muito importante para o aprendizado. Quando você coloca seu software para usuários normais usarem, estão testando pra valer. Eu acredito bastante que quando fazemos isso pensamos diferente, a segurança como um todo, conexão externa e por aí vai. É por isso que uma das características que eu venho trazendo para os cursos do DevPleno é essa característica de trazer processos que usamos no mercado. O nosso curso de ReactJS traz essa bagagem porque quero trazer esse caminho das pedras, o React sozinho é muito legal, mas faltam coisas para colocar em produção, afinal essa é a última milha da experiência que precisamos. Então eu programo com várias linguagens, mas o principal é definir o critério que você vai definir se você conhece ou não essa linguagem. O meu critério é colocar ele em produção.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/jPaKem2zhxI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Quanto ganha quem trabalha por meio da Toptal?

Source: blog/quanto-ganha-quem-trabalha-por-meio-da-toptal/index.md

A pergunta que não quer calar: Quanto se ganha trabalhando por meio da Toptal?

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/36dtfgmQoI4" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS.

[![Curso DevReactJS](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Racionalização: Tomando decisões racionais

Source: blog/racionalizacao/index.md

Hoje gostaria de dar uma dica bem rápida para você sobre o que eu chamo de Racionalização, que é basicamente olharmos o que estamos fazendo de uma maneira mais racional.

**Como assim?**

Por exemplo, você está criando sua empresa do zero e faz uma ação totalmente no "achismo", então se não foi racionalizado esta ação, não temos o feedback de que foi acertado ou não.

Usando o próprio devPleno como exemplo: Se uma postagem X foi bem recebida, por que ela foi bem recebida? Então fazemos uma racionalização analisando tudo o que os dados nos dizem para saber o motivo.

Quanto mais racionalizamos, melhor ficamos nesta área. Caso olhamos para um projeto que não está performando como queríamos e tentamos racionalizar o que esta acontecendo, começamo a olhar de uma maneira muito diferente.

**Como fazer isso?**

Comece a olhar outros projetos de outros 'lugares' e ache razão neles, trazendo para o seu projeto.

Podemos usar como exemplo o Youtube. Existe uma forma de aplicar uma alteração em lot, fazendo tudo via interface, então você olha para seu projeto e pensa: por que estou tentando fazer uma operação em lot no servidor se eu posso criar uma ação em lot no react que chama varias requests para cada alteração no servidor? Assim você começa a analisar melhor e achar solução olhando estes exemplos externos, outro aplicativo, outra empresa, etc.

É muito interessante fazer a Racionalização para tudo que esta ao nosso redor, não só como empreendedor, mas também como desenvolvedor ou até mesmo cidadão.

Então a dica de hoje é: Racionalize sobre as coisas. Tomou uma decisão? Por que você fez isso? Por que retornou aquele resultado? Entenda, ache as razões do motivo por ter acontecido, e não apenas deixe as ideias 'voando'.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# React 16 - o Pacificador

Source: blog/react-16-o-pacificador/index.md

Hoje quero trazer as boas novas do mundo React, era algo que já esperava e esperava que fosse acontecer. Muito se discutiu, nos últimos tempos, sobre a licença, que era um pouco restritiva e muitas empresas estavam saindo do ecossistema por esse motivo.

No dia 25 de setembro de 2017, na versão 15.6.2, já foi mudada essa licença para algo mais permissiva, saindo dessa BSD + patentes para MIT, assim ela fica aberta.

A nova versão do React, a versão 16 também já está nessa licença, isso ficou bastante interessante.

Quero comentar algumas coisas também referente ao React que são coisas que me motivaram aos meus estudos serem focados em React e não em Angular, por exemplo.

Algumas coisas novas, como por exemplo, ele pode retornar um vetor de JSX, uma string, deu uma melhor forma de lidar com erros, mas o que eu queria comentar é que, além da troca da licença, o tamanho foi reduzido. Isso era algo que atrapalhava bastante quando você gerava um bundle. Se não tivesse utilizando uma forma de quebrar esse bundle, ficava muito pesado.

Outra mudança que achei bastante interessante foi que a característica do React foi reescrita todo o core do zero utilizando o projeto Fiber.

Além disso, eles não mexeram nas API's, então é possível atualizar o React sem quebrar muita coisa, algo que aconteceu, por exemplo, com o Angular.

Eu considero essa versão do React a versão das “pazes” porque a comunidade estava um pouco desanimada.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/biLYWAlQNK4" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# ReactJS: comentários em JSX

Source: blog/reactjs-comentarios-em-jsx/index.md

Estes dias passei por uma situação engraçada: queria apenas comentar uma parte de um JSX. JSX é a sintaxe utilizada para renderizar HTML do ReactJS. Porém, isso não foi tão simples :)

A primeira tentativa seria fazer como um comentário em HTML:

```jsx
render(){
   return (
       <div>
          <!-- isso não vai funcionar :) -->
       </div>
    )
}
```

Porém, rapidamente iremos perceber que isso não funciona :)

A segunda tentativa (já que JSX é meio HTML meio JS) seria tentar:

```jsx
render(){
   return (
       <div>
          { <-- isso não vai funcionar :) ---> }
       </div>
    )
}
```

Hum, mas não funcionou :(

Bom, mas aí que está o pulo do gato. Precisamos avisar o JSX que ele tem que renderizar este trecho de código como javascript e não como JSX.

E aí está o motivo do qual temos que usar { }.

```jsx
render(){
   return (
       <div>
          { /* isso vai funcionar :) */ }
       </div>
    )
}
```

Neste caso, quando utilizamos as chaves, estamos alternando o contexto entre JSX e JS, e por isso,o comentário agora irá funcionar. Basta lembrar que quando queremos "escrever" algo no JSX utilizamos { nomeDaVariavel }.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Reconhecimento de nudez com js

Source: blog/reconhecimento-de-nudez-com-js/index.md

Hoje quero complementar aquela dica passada sobre [reconhecimento facial](https://www.devpleno.com/reconhecimento-facial-com-js/). Outra atividade que fazemos bastante quando permitimos que um usuário envie uma foto é checar por nudez. Isso também é conhecido como feature detection.

O mais comum é checar o quanto de pele ou roupa tem naquela foto.

Para fazer isso vamos utilizar o nude.js, primeiramente vamos baixar as versões compressas, nude.min.js e worker.nude.min.js.

Agora em um html faremos o seguinte:

```jsx
<html>
  <head>
    <title>Nude</title>
  </head>
  <body>
    <img src='imgsemnudez.jpg' />
    <script src='nude.min.js'></script>
    <script>
      const img = document.getElementById('img') nude.load(img) nude.scan(
      result => {console.log(result)})
    </script>
  </body>
</html>
```

O próprio worker vai arrumar e carregar. Simplesmente temos que carregar essa foto nele e em seguida dar um scan.

No exemplo acima, eu coloquei uma imagem sem nudez, ao retornar o result percebam que será um false. Caso mudemos para uma imagem de uma pessoa nua ele vai retornar um true, com isso poderíamos negar essa foto. Por exemplo, quando o usuário tentar utilizar a foto podemos pegar a imagem quando selecionarmos, jogar em um canvas e passar pelo nude.js

Toda vez que for colocar uma imagem que você tenha medo, por exemplo, por serem desnecessárias, poderíamos rodar esse script para checar e ver se tem indícios de nudez. Outra coisa comum é checar. Se der falso, tudo bem, se der verdadeiro, você manda para uma checagem manual.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-JpM5ddlN5k" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Reconhecimento facial com JS

Source: blog/reconhecimento-facial-com-js/index.md

> Implemente reconhecimento facial no navegador com JavaScript usando a biblioteca TrackingJS. Hands-on com visão computacional.

Hoje vamos fazer um hands-on em uma biblioteca que eu achei muito interessante chamada TrackingJS. Ela nos ajuda a trabalhar com visão computacional.

Visão computacional é uma forma que temos de processar imagens para extrair alguma coisa delas, nesse exemplo vamos fazer um tracking facial, reconhecer a face em uma imagem.

Um exemplo prático seria por exemplo, se a pessoa subir uma foto para o perfil dela, esse tracking facial poderia te ajudar a centralizar e realizar o crop da foto.

A primeira coisa que vamos fazer é acessar o site "trackingjs.com" e baixar um pacote com todos os arquivos. Vamos pegar a pasta build e deixar dentro do diretório em que vamos criar a aplicação. Além disso, vou rodar também o HTTP server na pasta que eu estou criando os arquivos.

Vamos criar um arquivo index.html. O trackingjs já vem com várias coisas que podemos reaproveitar,uma delas é reconhecer o vídeo da webcam. Para fazer isso, vamos importar da pasta build o traking-min.js e o data/face-min.js:

```jsx
<html>
    <head>
        <title>Face Traking</title>
        <style>
            video, canvas {
            position: absolute;
            border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <script rsc="tracking-min.js"></script>
        <script rsc="data/face-min.js"></script>
    </body>
</html>
```

O reconhecimento de faces funciona basicamente por meio de um treinamento, onde fazemos em uma rede neural e precisamos desse arquivo de dados, que é o treinamento realizado.

Agora vamos criar dois itens, um deles é uma tag víde. Vamos definir uma largura e altura. O outro é um canvas para podermos desenhar em cima desse vídeo e mostrar onde está sendo reconhecido realmente o rosto:

```jsx
<body>
  <video
    id='video'
    width='320'
    height='240'
    preload
    autoplay
    loop
    muted
  ></video>
  <canvas id='canvas' width='320' height='240'></canvas>
  <script rsc='tracking-min.js'></script>
  <script rsc='data/face-min.js'></script>
</body>
```

Agora vamos começar realmente a fazer esse tracking do rosto. Quando carregarmos a página, vamos chamar a função init que vai ter nosso vídeo, canvas um contexto para o canvas e um tracker, que é nosso rastreador em específico:

```jsx
<script>
    function init(){
        const video = document.getElementById('video')
        const canvas = document.getElementById('canvas')
        const context = canvas.getContext('2d')
        const tracker = new traking.ObjectTracker('face')
    }
    window.onload = init()
</script>
```

Agora podemos mandar rastrear a tag vídeo utilizando a câmera. Fazendo isso, eu consigo enviar um event:

```jsx
tracking.track('#video', tracker, { camera: true })
tracker.on('track', (event) => {
  console.log(event)
})
```

Ao dar F5 no browser e acessar o F12, percebam que ele muda à medida que o rosto se mexe dentro do limite que escolhemos, com isso vamos desenhar em cima do canvas:

```jsx
<script>
    function init(){
        const video = document.getElementById('video')
        const canvas = document.getElementById('canvas')
        const context = canvas.getContext('2d')
        const tracker = new traking.ObjectTracker('face')
        tracking.track('#video', tracker, {camera: true})
        tracker.on('track', event => {
            console.log(event)
            context.clearRect(0,0,canvas.width, canvas.height )
            event.data.foEach( rect => {
                console.log(rect)
            })
        })
    }
    window.onload = init()
</script>
```

O retângulo já está lá reconhecendo a cabeça ao se mexer, porém ainda não conseguimos visualizar ele.

Então, para cada retângulo reconhecido, vamos desenhar ele na tela:

```jsx
event.data.foEach((rect) => {
  context.strokeStyle = '#ff0000'
  context.lineWidth = 2
  context.strokeRect(rect.x, rect.y, rect.width, rect.height)
})
```

Com isso já conseguimos ver o reconhecimento do meu rosto. Em uma aplicação real, eu poderia, por exemplo, reconhecer o rosto, dar um freeze e cortar a imagem um pouco para cima e para os lados para ajudar no crop.

Além disso ainda podemos mostrar uma informação de onde está sendo reconhecido esse retângulo:

```jsx
event.data.foEach((rect) => {
  context.strokeStyle = '#ff0000'
  context.lineWidth = 2
  context.strokeRect(rect.x, rect.y, rect.width, rect.height)
  context.fillText(
    `x: ${rect.x}`,
    `w: $:{rect.width}`,
    rect.x + rect.width + 20,
    rect.y + 20
  )
  context.fillText(
    `y: ${rect.y}`,
    `h: $:{rect.height}`,
    rect.x + rect.width + 20,
    rect.y + 40
  )
})
```

Assim temos a informação precisa de onde foi encontrado o nosso rosto. Poderíamos utilizar isso para fazer o crop.

Como colocamos isso em um vetor, é possível reconhecer mais de um rosto no vetor, a partir disso podemos fazer, por exemplo, um sistema de tag para marcar os amigos.

Veja o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/KV7mZc3D93Y" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# High-order Function - Reduce

Source: blog/reduce/index.md

Hoje vamos continuar falando sobre high order functions, principalmente as que estão disponíveis nos vetores em JavaScript. Vamos falar mais especificamente do Reduce. É muito comum utilizarmos o [Map](https://www.devpleno.com/map/) junto com o Reduce, ele existe em algumas outras formas como no mongoDB que é o map.reduce, uma técnica bastante utilizada para concatenar dados de forma distribuída.

Suponhamos que nossa ideia é ter um carrinho de compras e somar esse carrinho, para isso podemos utilizar o Reduce e passamos uma função que vai ser responsável por reduzir esse vetor em um valor só.

Como fazer isso?

Primeiramente podemos fazer com uma Arrow Function:

```jsx
const carrinho = [
  { id: 1, preco: 2, qtd: 2 },
  { id: 1, preco: 3, qtd: 1 }
]

carrinho.reduce()

const total = carrinho.reduce((soma, item) => item.preco + soma, 0)

console.log(total)
```

Perceba que dentro de item e soma retornamos como queremos somar esse valor e ela começa a soma com 0. Podemos fazer de uma forma mais interessante.

Você se lembra que o MAP transforma de um valor para outro? Então poderíamos fazer o seguinte:

```jsx
const carrinho = [
  { id: 1, preco: 2, qtd: 2 },
  { id: 1, preco: 3, qtd: 1 }
]

carrinho.reduce()
const total = carrinho
  .map((item) => item.preço * item.qtd)
  .reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)
```

Com isso, o Map vai transformar o item em um subtotal e meu Reduce vai somar esses valores transformados. Perceba que são funções bem simples, então é bem tranquilo de testarmos essas funções.

Poderíamos, por exemplo, colocar o item em uma const e passar apenas o subtotal:

```jsx
const subtotal = (item) => item.preço * item.qtd
const total = carrinho
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)
```

Essa é uma forma bem fácil de se fazer em teste unitários, utilizando bastante funções puras no Map, Reduce, etc. Isso ajuda muito a aumentar a testabilidade do código e consequentemente a qualidade dele.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/PKnpSaAQdd4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# [SEGREDO] Muitos registros do MySQL no NodeJS

Source: blog/registros-do-mysql-no-nodejs/index.md

Hoje quero contar um segredo para você: como utilizar o driver padrão do MySQL no Node para lidar com grandes quantidades de dados.

A primeira coisa que vamos fazer é instalar o driver padrão:

```jsx
yarn add mysql
```

Tudo que formos fazer em Node e envolve grandes quantidades de dados, temos que pensar em Stream (fique com isso na cabeça). Precisamos utilizar o Stream de alguma forma:

```jsx
const mysql = require('mysql')
const connection = mysql.createConnection({
  host: '127.0.0.1',
  user: 'root',
  password: '',
  database: 'cadastro'
})
connection.connect(() => console.log('connected'))
```

Lembrando que eu já tenho um banco de dados para testes. Fizemos algo bem rápido para chegar logo na parte que interessa :)

Depois que conectamos, temos que fazer uma busca. Imagine que você tem que retornar um milhão de registros, a primeira coisa é que você não vai conseguir retornar isso em interface nenhuma, então provavelmente terá que gerar um arquivo xml, json ou qualquer coisa desse tipo.

```jsx
connection.connect(() => {
  console.log('connected')
  connection.query('select * from pessoas', (err, results) => {
    console.log(results)
  })
})
```

Com isso ele vai mostrar todas as pessoas que estão cadastradas; no meu caso, tenho mais de 900 itens. Isso já é muito peso para ser lidado dessa forma porque a query vai pro banco e volta de uma vez dentro de "results". Nesse ponto, estamos matando as duas pontas porque precisamos fazer o banco inteiro trazer todos os registros e depois processando todos. Pensando em uma escala de milhão, quando trouxermos para o Node, teremos problema de memória.

Precisamos então fazer essa query de uma outra maneira:

```jsx
connection.connect(() => {
  console.log('connected')
  const query = connection.query('select * from pessoas')
  query.on('result', (row) => {
    console.log(row)
  })
})
```

A query tem algo bem interessante; ela mostra que algum resultado chegou no Stream porque quando fazemos essa consulta, ela é muito pesada, então trará linha a linha. Perceba que à medida que ele for recebendo de forma assíncrona, a gente vai processando os registros e isso é muito mais performático do que tentar usar o callback como estávamos fazendo antes.

Imagine, por exemplo, que temos algum arquivo que não fosse executado de primeira:

```jsx
query.on('result', (row) => {
  setTimeout(() => {
    console.log(row)
  }, 300)
})
```

Quando trazemos esse resultado, travaremos o Stream (lembrando que o Node é mono-thread), então enquanto eu estiver processando, ele vai ter várias coisas pendentes e corre o risco de ser mais rápido trazer da rede do que processar. Temos que falar para o driver do MySQL segurar:

```jsx
query.on('result', (row) => {
  connection.pause()
  setTimeout(() => {
    console.log(row)
    connection.resume()
  }, 300)
})
```

Assim vamos conseguir controlar esse fluxo de dados e podemos processar grandes quantidades de registros sem ter problema com memória. Outra coisa que podemos fazer é o seguinte: terminou de processar, pode finalizar a conexão:

```jsx
  ...
    },300)
})
query.on('end', () => connection.end())
```

É muito interessante utilizarmos essa query como um eventStream, ele vai enviando eventos e pausa a conexão, restabelecendo ela para continuar mandando dados sempre que estiver fazendo esse processamento dos dados, assim evitamos trazer todos os registros para memória de uma vez.

Se você for fazer processo em lote, que é muito pesado, deixe os 'console.log' somente para debug porque ele também é pesado. Pensando em escala, você perde alguns mili segundos sempre que o faz. Outra coisa: se o processamento é muito lento, limite enquanto está testando:

```jsx
const query = connection.query('select * from pessoas limit 100')
```

Obviamente que não elimina você ter que testar, mas já ajuda a agilizar seus testes de começo.

Veja o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/dCpXvk7Pngc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Render condicional em ReactJS

Source: blog/render-condicional-em-reactjs/index.md

Durante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no ReactJS/JSX temos algumas alternativas.

### Primeira maneira: utilizando if´s

JSX é basicamente um Javascript disfarçado de HTML (sim, apenas para facilitar a criação de templates). Então, podemos utilizar JS para renderizar ou não um treco de template.

```jsx
import React, { Component } from 'react'

class CondComIf extends Component {
  render() {
    if (this.props.condicao) {
      return <p>Condicao é verdadeira</p>
    }
    return <p>Condicao é falsa</p>
  }
}

// para renderizarmos este componente
// <CondComIf condicao={true} />
```

**Importante:** sempre o método render precisa retornar algo e que este algo seja apenas uma tag.

### Segunda maneira: condicional com operador lógico

Este formato utiliza a precedência de operadores para funcionar como uma condicional. Por exemplo, se fizermos isso:

```jsx
a === 10 && b === 20
```

Temos uma característica interessante. Caso a===10 retorne falso, na grande maioria das linguagens (por termos um &&) não ira nem executar a comparação de b===20.

Isso nos permite fazer o seguinte:

```jsx
const a = 10
const b = 20

a===b && console.log('A eh igual a B)
```

Claro que neste exemplo, nunca o console.log será executado, mas creio que fez sentido para você.

Utilizando a mesma ideia, podemos fazer o seguinte:

```jsx
import React, { Component } from 'react'

class CondComOp extends Component {
  render() {
    return (
      <p>
        <h2>Vamos fazer o condicional: </h2>
        {this.props.condicao && <span>Condicao é verdadeira</span>}
        {!this.props.condicao && <span>Condicao é falsa</span>}
      </p>
    )
  }
}

// para renderizarmos este componente
// <CondComOp condicao={true} />
```

**Importante:** o trecho de template que vem após o && deve seguir a mesma regra do return do render. Ou seja, temos que retornar sempre um nó filho (no caso do exemplo um span).

A combinação destas técnicas nos permite chegar a componentes muito bem organizados. Pois se precisarmos renderizar algo totalmente diferente, podemos usar o if. Caso desejamos apenas mostrar/ocultar trechos menores dentro do render, a segunda opção é muito viável.

Não deixe de comentar e nos seguir em todo lugar :) _Ah, e para você que quer aprender ReactJS mais rapidamente, temos o nosso curso completo!_

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# ReactJS Recursivo?

Source: blog/renderizar-estruturas-em-formato-de-arvore/index.md

Hoje vamos fazer algo que é bastante convencional em sistemas: renderizar estruturas de dados em formato de árvore. No exemplo, será uma árvore binária, mas como poderíamos renderizar no ReactJS.

Em que isso é útil?

Vamos supor que você tenha uma interface com um menu lateral e esse menu tem formato de uma pasta dentro da outra, seria muito útil, pois você poderia fazer um item dentro do outro sendo renderizado de forma 'infinita'. Recursividade é algo muito importante para qualquer sistema, e podemos fazer isso dentro do React utilizando alguns conceitos de recursividade.

Eu já tenho um projeto criado, apenas com create React App, nada além disso. Primeiro vamos criar uma estrutura chamada nodes que vai ser nossa árvore em si. Teremos o lado direito, esquerdo e o valor que será uma multiplicação. Do lado esquerdo, vamos ter um valor 1, do lado direito, um outro valor 2 e o 'v' dele vai ser uma divisão.

```jsx
class App extends Component {
    render(){
        const nodes = {
        l:{ l:{ v: 1 }, r:{v: 2},
        v: '/'},

        r:{v: 10}
        v:'*'
        }
        return(
            <div>
                <h1> welcome to React</h1>
            </div>
        )
    }
}
```

Perceba que do lado direito temos somente um valor 10. Vamos colocar como se fosse um parênteses do lado esquerdo e depois colocar multiplicado por 10 do lado direito, temos que renderizar os itens do lado esquerdo e depois do lado direito de forma recursiva, então não preciso fazer nenhum _for_.

Como fazemos isso de forma recursiva?

A primeira coisa que vamos fazer é criar um outro arquivo chamado node.js, importar o react para usarmos o JSX e, para ficar simples, vamos fazer com functional stateless component:

```jsx
import React from 'react'

const Node = (props) => {
  return <p> Node </p>
}
export default Node
```

Voltando ao App.js vamos importar o node e ao invés de colocarmos o H2 vamos colocar o nó dentro dele:

```jsx
import Node from './node'
return (
  <div>
    <h2>
      {' '}
      <Node node={nodes} />
    </h2>
  </div>
)
```

Então ele escreveu o node, que é o que está dentro do nó.

Vamos mudar, colocar um span em node.js e colocar um JSON com um props.node para sabermos o que tem ali dentro:

```jsx
const Node = (props) =>{
    return(
        <span> {JSON.stringfy(props.node) </span>
    )
}
```

Perceba que é retornado o nó inteiro. Se eu tiver o lado esquerdo, tenho que renderizar esse nó, para isso podemos pedir para o node renderizar do lado esquerdo.

```jsx
const Node = (props) => {
  return (
    <span>
      {props.node.l && <Node node={props.node.l} />}
      {props.node.v}
    </span>
  )
}
```

Com isso ele andou apenas para o lado esquerdo. Podemos adicionar também, por exemplo, apenas o lado direito:

```jsx
{
  props.node.r && <Node node={props.node.r} />
}
```

Agora eu quero saber quando eu renderizar um nó colocar um parênteses para saber quando foi realizado uma conta:

```jsx
const Node = (props) => {
  return (
    <span>
      ({props.node.l && <Node node={props.node.l} />}
      {props.node.v})
    </span>
  )
}
```

Com isso conseguimos reparar como foi feito a conta, afinal ele mantém as precedências dos parênteses, ou seja, ele está entrando realmente na árvore.

Perceba que fizemos recursividade sem utilizar nada de repetição, apenas mandamos renderizar a função, que nada mais é do que um componente chamando ele mesmo. Uma coisa importante é sabermos que ele tem um nó base, então toda vez que ele for um V não tem nel left nem right, logo ele é o passo base, onde eu paro a recursividade.

Poderíamos fazer o parênteses não aparecer nos valores, deixando o resultado muito mais simples.

```jsx
const Node = (props) => {
  return (
    <span>
      {props.node.l && props.node.r && <span>(</span>}
      {props.node.l && <Node node={props.node.l} />}
      {props.node.v}
      {props.node.l && props.node.r && <span>)</span>}
    </span>
  )
}
```

Uma coisa interessante é que se fizermos um inspect no browser e usar o react dev tools é possível ver toda a estrutura sendo criada.

Fizemos aqui um forma de renderizar expressões, mas poderíamos utilizar para renderizar uma árvore, lista de diretórios, etc. Tudo isso utilizando essa simples estrutura.

Confira todos os passos no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ZYomEoLdtdE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Request - Requisições HTTP de forma rápida e simples

Source: blog/request/index.md

O Request é um pacote que permite que façamos requisições HTTP. Uma coisa interessante sobre ele é que é uma ferramenta muito simples, conseguimos fazer requisições em algum ambiente ou servidor HTTP de uma forma rápida.

Primeiramente vamos instalar:

```jsx
npm install request
```

Agora vamos criar um novo arquivo e fazer um require no nosso request e pegar o site da UOL por exemplo:

```jsx
const request = require('request')
request('https://www.uol.com.br', function (err, res, body) {
  if (!err && res.statusCode === 200) {
    console.log(body)
  }
})
```

Então se não retornar nenhum erro e a resposta for um http 200, ele retorna o body, que é um parâmetro da nossa function.

Ao rodar o código, perceba que retornará todo o HTML da página principal do UOL, isso é útil, pois sempre que quisermos consumir uma API, podemos usar o request, lembrando que ele permite outros métodos HTTP também, como um post e principalmente para baixar dados.

Vamos supor que eu quisesse salvar o site da UOL (pode ser um site, um arquivo, uma imagem, mas vou salvar o site todo para demonstrar):

```jsx
const request = require('request')
const fs = require('fs')
request('https://www.uol.com.br').pipe(fs.createWriteStream('home.html'))
```

_(Lembrando que o 'fs' já faz parte do core do Node, então não precisamos instalar nada)._ Então ele vai ligar o output stream do request com o writeStream do 'fs' que acabamos de criar, no fim das contas ele vai salvar em um home.html.

Um caso de uso que eu já fiz com esse pacote foi a seguinte: eu tinha um serviço em que agregava os logs entre as minhas aplicações, então ela estava distribuída em servidores distintos e esse serviço que utilizava o request para baixar os arquivos de log e depois de baixado ele fazia o processamento das informações. Isso era bastante útil para poder importar os dados, mas lembrando que podemos usá-lo para muitas outras coisas além disso.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/elOGmIL7qws" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://goo.gl/VBU2PR)e cadastre seu e-mail para não perder as atualizações.


---

# Request e Response

Source: blog/request-e-response/index.md

Nos posts anteriores já falamos sobre back-end, front-end, como eles se comunicam através de uma requisição, e agora você verá um exemplo prático de um request e um response.

Vamos usar o NodeJS, mas não é obrigatório focar nisso, pois depois vou falar exclusivamente sobre ele. Toda vez que você entra em um site, como o google, está fazendo um GET no [Google](https://www.google.com/).

Como checar se isso está realmente acontecendo?

No caso do Windows, apertamos F12 usando o Chrome e então irá aparecer esta aba Network:

![Exemplo 1](RequestResponseEx1.png)

Perceba que temos várias abas, isso é uma barra de desenvolvimento. A medida que formos avançando iremos passar por algumas delas. O importante para agora é o Network, aperte o F5 e irá aparecer muitas requisições:

![Exemplo 2](RequestResponseEx2.png)

Se você clicar em alguma delas, é possível ver tudo sobre ela, e uma das coisas é o request method do tipo GET, qual o servidor, etc. Temos também o response reader logo a baixo:

![Exemplo 3](RequestResponseEx3.png)

No caso do GET, não temos um Request Body, mas temos um Response Body, que fica ao lado de preview. Lá seria a pagina inicial do google já retornada para o usuário. Agora vamos fazer o seguinte: quando vier um GET em '/' irei retornar todos os GET's da requisição e os dados de resposta em uma function req e res, pegamos o requests da requisição e devolvo ao cliente.

```jsx
var express = require ('express');
var app express();
app.get('/', function (req, res){
    //res.send('Esta é uma requisição GET.');
    //res.send(req.query);
    res.send(req.headers);
});
```

Quando rodarmos o exemplo irá aparecer o seguinte:

![Exemplo 4](RequestResponseEx4.png)

Mostrando todos os Headers que eu solicitei.

Lembrando que, quando temos um request/response, sempre temos um cabeçalho para cada. Dependendo da requisição. podemos ter o body ou não. Também há outros tipos de requisição, como é o caso do POST. Nele podemos fazer a mesma coisa, porém com uma diferença: não conseguimos fazer no mesmo nível do GET pelo navegador. Vou mostrar agora o Postman, que permite que a gente faça um POST. Vamos então fazer um POST em /users:

```jsx
var express = require ('express');
var app express();
app.post('/users', function(req,res){
    res.send(req.headers);
    req.on('data', function(chunk){
        //res.send(chunk);
    });
});
```

Vamos mandar para https://localhost:3000/users o tipo de requisição, no caso o POST, e um raw, ou seja, um texto puro.

![Exemplo 5](RequestResponseEx5.png)

Em Text, selecionamos JSON e ele já troca o cabeçalho de solicitação para JSON. Apertamos o Send, e a resposta que vem são os cabeçalhos do request.

![Exemplo 6](RequestResponseEx6.png)

Note que o content-length retornou 20 bytes, pois estou enviando 20 bytes de dados, diferente do anterior onde não estou enviando nada. Lembrando que no post eu tenho o body da minha requisição. O básico de uma aplicação WEB sempre funciona dessa forma, então o front-end faz uma request e recebe uma resposta.

Assista ao vídeo da explicação:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/2Mv2ayJ3euA" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Request-promise

Source: blog/request-promise/index.md

Este hands-on vai ser complementar a outro módulo que eu já mostrei por aqui, o Request. O módulo de hoje é o Request-Promise, que é basicamente o Resquest 'Promisificado', então ele retorna uma Promise e assim fica muito mais fácil de fazer tratamentos de várias requisições HTTP, porque podemos utilizar, por exemplo, tanto o Generator com o Wild ou dentro do Async/await, que é uma maneira mais moderna de se fazer.

Então vamos colocar a mão na massa. Primeiro vou instalar as duas dependências que precisamos. Uma coisa importante: o Request promise depende do Request, então temos que adicionar os dois:

```jsx
yarn request

yarn request promise
```

Em seguida, basta simplesmente importar ele. A assinatura é exatamente a mesma do Request, então eu posso simplesmente trocar para o Request-Promise:

```jsx
const request = require('request-promise')
request('https://httpbin.org/ip').then((res) => console.log(res))
```

Então a versão com promise eu não tenho um callback, e sim um then com catch para tratar. Ao rodar, perceba que ele vai bater no servidor e retornar o IP.

Outra vantagem que temos é que podemos fazer o seguinte:

```jsx
const pegarIp = async () => {
  const ip = await request('https://httpbin.org/ip')
  console.log(ip)
}
pegarIp()
```

Perceba que o código ficou muito mais simples, conseguimos fazer a mesma operação, porém trocando a Promise por Async/await. Outra coisa que poderíamos fazer é pegar esse IP e enviar de volta:

```jsx
const pegarIp = async () => {
  const ip = await request('https://httpbin.org/ip')
  const ipPost = await request({
    method: 'POST',
    json: ip,
    uri: 'https://httpbin.org/post'
  })
  console.log(ipPost)
}
pegarIp()
```

Ele já vai mostrar o data como o IP que eu recebi.

O interessante é que poderiamos criar um Request-Promise se a gente quisesse, não é tão complicado, podemos importar ele direto e, utilizando com Async/await, podemos fazer várias operações de rede. Um detalhe importante, como sempre falo, o Async await não vai transformar esse código em síncrono, ele continua sendo assíncrono e tendo as mesmas vantagens.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/YHdaewjbSAI" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# Dica: Router Props

Source: blog/router-props/index.md

Como passar props para rotas (em react-router) em uma app react?

Dica interessante para injetarmos dependências nos componentes que são dinamicamente renderizados pelo router.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/VD7ojK3deWE" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# React-router-dom: como injetar props em rotas em ReactJS

Source: blog/router-props-2/index.md

Confesso que tive muito trabalho até conseguir encontrar uma maneira não tão difícil de fazer a passagem de propriedades para o componente. Neste post, você vai conferir uma dica sobre React Router.

> Temos também um outro material somente sobre [React-router que você pode ver aqui](https://devpleno.com/router-props).

Vamos fazer a partir de um exemplo básico no qual ele só tem um componente criado com Create-react-app.

```jsx
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Home from './Home'

class App extends Component {
  render() {
    return (
      <div className='App'>
        <div className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <h2>Welcome to React</h2>
        </div>
        <div className='App-intro'>
          <home name='Tulio' />
        </div>
      </div>
    )
  }
}
```

Primeiramente vamos colocar a navegação com o React Router em

```jsx
<home name='Tulio' />
```

Isso significa que agora temos uma rota exata que vai apontar para o caminho padrão e qual componente ele vai usar. Vamos colocar Home, mas também criaremos um componente em seguida.

```jsx
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Home from './Home'
import Teste from './Teste'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <Router>
        <div className='App'>
          <div className='App-header'>
            <img src={logo} className='App-logo' alt='logo' />
            <h2>Welcome to React</h2>
          </div>
          <div className='App-intro'>
            <Route exact path='/' component={Home} />
            <Route exact path='/teste' component={Teste} />
          </div>
        </div>
      </Router>
    )
  }
}
```

Feito isso, vamos criar o teste.js

```jsx
import React from 'react'

const Teste = () => <p>Teste</p>

export default Teste
```

Agora vamos até o cabeçalho da aplicação e criar um link para a home e um link para teste, assim, já temos uma navegação funcionando normalmente.

```jsx
<div className='App'>
  <div className='App-header'>
    <img src={logo} className='App-logo' alt='logo' />
    <h2>Welcome to React</h2>
    <p>
      <Link to='/'>Home</Link>
      <Link to='/teste'>Teste</Link>
    </p>
  </div>
</div>
```

**Qual o problema?**

Eu preciso passar parâmetros ou props para o componente Home, mas ele não irá funcionar se fizermos assim:

```jsx
<Route exact path='/' component={Home} name='Tulio' />
```

**Como podemos passar essa props para o componente home?**

Ao invés de chamar component, vamos chamar render. Ele é legal porque podemos passar uma arrow function com props e dizemos que essa arrow function vai retornar este componente /Home.

```jsx
<div className='App-intro'>
  <Route exact path='/' render={(props) => <Home />} name='Tulio' />
  <Route exact path='/teste' component={Teste} />
</div>
```

Esses props são as propriedades que o próprio route passa para o componente, então temos que injetar essas props _(vai que por algum motivo ele precisa saber em qual URL ele está, ou algo nesse sentido)._

Com isso, conseguimos efetivamente passar os props que queremos.

```jsx
<Route
  exact
  path='/'
  render={(props) => <Home {...props} name='Tulio' />}
  name='Tulio'
/>
```

Além das propriedades que já tínhamos no componente por causa da route, caso olharmos em teste, percebemos que só temos as propriedades que foram passadas pelo route e não pela importação do componente.

Isso é muito importante para conseguirmos injetar dependência, eu descobri essa forma de utilizar a passada de props através de uma rota por que precisava injetar uma dependência.

Confira o passo a passo em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/VD7ojK3deWE" allowFullScreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Por que o Salário em TI é baixo? DevPleno Reponde

Source: blog/salario-em-ti/index.md

Uma pergunta que ouço com frequência, principalmente dos profissionais da área de T.I, é: "Por que o salário em TI é baixo?".

A primeira coisa que eu acho importante é definir o que é um salário alto ou um salário baixo. Muitos profissionais recebem um salário que é “normal” na média do mercado. Isso varia muito de uma área para outra.

Um médico, por exemplo, recebe muito bem, já que há uma escassez grande na área. Em TI, também tem escassez, porém as pessoas podem trabalhar sem ter formação, o que diminui a escassez e acaba quebrando um pouco essa dificuldade.

Antes de falar se o valor está baixo ou alto, é bom olhar em volta do mercado: Qual o seu salário hoje? Qual a média das pessoas que trabalham na minha cidade?

Talvez você esteja em uma cidade na qual a média salarial não é muito grande porque a cidade é pequena, por exemplo. Então é bom avaliar isso na sua cidade ou região.

O segundo ponto (o que acho mais importante): Avalie o seu trabalho atual, você mesmo e a sua carreira para saber se está valendo tudo isso. O salário que você ganha hoje deve contribuir para a empresa com o mesmo valor.

Vamos supor que o salário que você considera alto é R$10.000,00, então suas ações e o que você faz na empresa precisam gerar de R$10.000,00 a 15.000,00 no mínimo. Se não gerar isso, a empresa não ganha nada. Obviamente se você contribui muito pouco, seu salário vai ser baixo, por isso quanto mais gerencial for o cargo, maior será o salário, já que eles lidam com estratégias de extremo risco.

Esqueça o salário dos outros. Às vezes achamos que valemos mais do que valeria. Claro que muitas empresas pagam menos do que você vale e isso é natural no mercado, mas se você não consegue um outro emprego em um lugar que paga melhor, talvez o problema não seja na área e sim com você.

Isso se aplica em todas as áreas. Existe personal trainer que ganha menos de um salário mínimo, mas também existe personal que ganha R$100mil por mês. O mesmo acontece com TI.

Então avalie esse tipo de coisa. Você está gerando faturamento ou é só um custo para a empresa? Obviamente, em algumas empresas, você não está diretamente relacionado com a área ou gerando faturamento, mas é bom avaliar nesse sentido que citei acima. Assim, você conseguirá saber se seu salário está baixo ou alto, essa é uma boa métrica.

Outra métrica é saber se você está qualificado. Se você está lendo isso, é porque quer se qualificar, já que está procurando conhecimento, quer melhorar sua carreira e isso me deixa mais tranquilo. Por mais que você sofra essa dor de achar que o salário é baixo, está buscando melhorar sua carreira e isso já é uma boa coisa. Para você ganhar mais, tem que se dedicar à sua carreira. “Seja quente ou seja frio." Quem é morno não tem previsão de evoluir. Se quiser destacar na área, faça com garra, com amor, vontade, faça dar resultados, um código limpo com processo cada vez melhor, dê seu sangue, gere ideias, ajude seu chefe, faça tudo. Claro, não precisa deixar de curtir a vida, mas não seja comum.

Existe um treinamento de um grande mentor meu que trabalha mais sobre essa mentalidade.

Se tiver interesse, mande um e-mail para tuliofaria@devpleno.com. Irei te passar o link.

Confira minha fala em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/mw_pfPv-DlE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Porque se sujar faz bem!

Source: blog/se-sujar-faz-bem/index.md

Uma coisa que sempre marcou a minha infância foram as propagandas do sabão em pó OMO que via na TV. O slogan era “Se sujar faz bem” e mostrava as crianças pulando e brincando na lama sem medo de se sujar.

Se fossemos trazer esse ensinamento para o nosso meio profissional, percebemos que tem muita gente que, por mais que queira fazer algo, tem medo de errar, medo de se sujar. Muitas vezes você tem medo de assumir um compromisso em um projeto com um pouco a mais de conhecimento que você não tem por de falhar e nisso o slogan da OMO tem todo sentido, você errar, dar esse passo a mais faz bem mesmo quando você se suja, o risco é grande mas você aprende muito com isso.

Sempre que você puder fazer algum projeto que tem algo a mais ou precisa tomar alguma atitude que vai um pouco além da sua zona de descanso, se realmente almeja uma carreira melhor, arrisque-se. Muitas vezes você vai errar e esse erro irá fazer você ficar cada vez melhor.

Outra coisa bastante importante é não achar que tem que dar certo de primeira, por exemplo, sua empresa tem que dar certo de primeira, arriscar uma tecnologia nova e tem que dar certo de primeira e por aí vai... Eu sempre gosto de primar é fazer até dar certo, não importa se vai ser de primeira, segunda. Se você acredita naquilo, tem que correr o risco. Não fique com medo de testar uma tecnologia nova ou pegar algum projeto novo porque isso vai te trazer muito aprendizado.

Para eu conseguir negociar um serviço atualmente, eu tive que errar muito lá atrás. Existe uma possibilidade. Se você acompanha nosso trabalho, tem uma chance e uma oportunidade muito legal, quando você consome os conteúdos, é a chance que você tem de aprender com os erros que eu já cometi. Quando eu construo algo com em ReactJS ou Socket.IO, já errei muito nisso, seja aprendendo ou na aplicação em si, e aqui você tem uma oportunidade muito legal de conhecer um pouco mais disso sem precisar se sujar tanto, afinal estamos passando um caminho mais confortável para você trilhar na sua carreira. Então se você está aqui, já tem uma vantagem muito grande competitivamente no mercado de trabalho.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/HROPkaKONWY" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Você é passageiro ou motorista da sua vida?

Source: blog/seja-o-motorista-da-sua-vida/index.md

Você é passageiro ou motorista da sua vida? Eu vou contar uma história para vocês e acho que faz bastante sentido pelo momento que passei.

Eu estava no embalo de deixar as coisas me levarem. Estava trabalhando, mas com algo que eu não gostava, fazia coisas muito repetidas e projetos que não achava interessantes, já não tinha mais propósito naquilo e, consequentemente, a qualidade começou a cair. A decisão de mudança ocorreu no ano passado, mas Isso vinha me incomodando há pelo menos três anos.

Quando você passa por uma situação como essa e passa a refletir sobre isso, percebe que precisa mudar, cai a ficha de que você não é mais o motorista da sua vida, afinal não está mais conduzindo para onde você quer chegar, logo você é um passageiro.

Uma coisa que venho aplicando desde o ano passado é criar as próprias oportunidades. Por exemplo, se você quer trabalhar fora do Brasil, não adianta continuar mandando CV aqui, não vai surgir uma oportunidade para fora do nada _(na verdade, para mim aconteceu porque eu conhecia uma pessoa e fui indicado, mas é raro)_. Tem coisas que são tão simples que basta você começar a refletir sobre o que quer para realmente tomar as rédeas e voltar a ser o motorista da sua vida.

Mude um pouco sua percepção! É o que venho fazendo e faz muito sentido, pelo menos para mim. Depois que eu destravei, percebi que trabalhar para fora era algo que eu queria fazer, então comecei a distribuir currículo e fazer mais contatos nesse sentido e hoje eu atuo lá fora também.

Quando você toma as rédeas da sua vida, começa a dar os passos na direção certa. Eu comecei a fazer isso em tudo, se você quer chegar em algum lugar sem depender de fatores de sorte e etc, comece a ser mais motorista.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/o0VuFJPKZnU" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Servidor de arquivos e sistemas locais com HTTPS

Source: blog/servidor-de-arquivos/index.md

Neste vídeo, vou mostrar como servir arquivos estáticos de forma simples e ainda como expor um servidor local de testes para a internet utilizando uma conexão segura (HTTPS).

Perfeito para testes de webhooks ou de APIs do HTML5 que precisam de HTTPS para funcionar.

Para baixar o ngrok: [https://ngrok.com](https://ngrok.com)

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/n_hWce2qxN4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# NodeJS Primeiros Passos: Servidor HTTP Básico

Source: blog/servidor-http-basico/index.md

Aprenda NodeJS do zero com esta nova série de vídeos do DevPleno. Neste primeiro vídeo iremos introduzir um pouco de como criamos um servidor HTTP básico.

O código construído está disponível [Aqui](https://github.com/devpleno/nodejs-servidor-http-basico)

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/5L5-EoJbMfY" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Servidor HTTP Básico - NodeJS Primeiros Passos

Source: blog/servidor-http-basico-2/index.md

Na série NodeJS Primeiros Passos, você poderá os conceitos básicos de Javascript e NodeJS e, assim, poder colocar a mão na massa. Neste primeiro post, confira como criar um Servidor HTTP básico.

Primeira coisa que temos que fazer é acessar o [www.nodejs.org](https://www.nodejs.org) e fazer o download _(não vou entrar nessa parte, pois depende da plataforma que você está utilizando, mas de modo geral é bem simples de se fazer)_.

Você precisa conseguir pelo menos escrever no Shell (prompt de comando) o seguinte:

```jsx
npm - v
```

Com isso, conseguimos ver a versão do node package mananger.

E se colocarmos:

```jsx
node - v
```

Aparecerá a versão do node que estamos usando. Se aparecer normalmente a versão deles, significa que estão no path do seu sistema e você conseguirá executá-los diretamente. Se ele não estiver no path do sistema, recomendo que coloque a pasta de instalação do Node no path.

Como Node é JavaScript, no sublime vou criar um arquivo novo e importar um módulo do node chamado http, ele permite que manipulemos requisições http. Também vamos criar um servidor com uma função request e response, assim, tudo que entrar no meu servidor, vou devolver o texto "devpleno.com":

```jsx
var http: require('http');
http.createServer(function(req, res){
    res.end('DevPleno.com');
});
```

Uma coisa interessante de se notar é que esta função é uma função anonima e também é executada de forma assíncrona. Isso quer dizer que o servidor fica 'ouvindo' uma porta, mas só irá executar a função quando um evento acontecer, ou seja, quando um cliente fizer uma requisição para o servidor. Qual a vantagem disso? Chamamos isso de não blocking, ou seja, o servidor não fica esperando chegar uma requisição. Quando um evento de requisição chegar, ele irá executar o trecho do código. Depois de criado o servidor, precisamos ouvir a porta _(a porta diferencia que vai receber a solicitação dentro da máquina)._

```jsx
var http: require('http');
http.createServer(function(req, res){
    res.end('DevPleno.com');
}).listen(3000);
```

Vamos salvá-lo como server.js, abrir o prompt de comando e executar o seguinte comando:

```jsx
Node server.js
```

Isso vai 'Startar' nosso servidor. Quando abrirmos o browser e escrevermos localhost:3000, recebemos a mensagem DevPleno.com, assim, é possível ver que o servidor está rodando normalmente. O bom disso é que não precisamos importar bibliotecas de terceiros, já que o HTTP é um módulo que faz parte do core do node. O que podemos fazer a mais? Podemos, por exemplo, importar um módulo que lida com FileSystem, criar uma var contents que receberá um readFileSync _(lembrando que não é muito bom usar o Sync, mas estou fazendo apenas com intuíto de demonstração)._

```jsx
var http: require('http');
var fs = require('fs');
var contents = fs.readFileSync('contents.html')
http.createServer(function(req, res){
    res.end(contents);
}).listen(3000);
```

Em seguida, criar um HTML com o nome contents

```jsx
<html>
    <body>
    <h1>DevPleno.com</h1>
    </body>
<html>
```

Aperte Ctrl C para parar o servidor. Vamos reiniciar o servidor com node server.js, recarregar o browser e ele irá requisitar o contents.html do jeito que criamos.

Claro que para criarmos uma aplicação mais avançada, iremos utilizar alguns módulos de terceiros para que esse processo todo fique um pouco mais fácil e mais robusto, mas essa é só uma parte introdutória.

Confira o passo a passo no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/5L5-EoJbMfY" allowfullscreen></iframe>
</div>

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Servidor JSON simples em PHP (parte 1)

Source: blog/servidor-json-simples-em-php-parte-1/index.md

Hoje quero mostrar para vocês como criar um servidor JSON utilizando o PHP. Mas por que PHP e não JavaScript? Porque ainda é uma linguagem que tem hospedagem muito fácil de achar até mesmo gratuitamente. Se você já tiver um WordPress ou um site que suporte PHP já vai conseguir rodar isso, assim é possível rodar, por exemplo, projetos de teste como nosso Minhas Séries, que foi feito em ReactJS. A ideia é bem simples, apenas dois métodos por enquanto. Então vamos criar um arquivo chamado db.JSON e dentro dele vamos colocar assim:

```jsx
{
    “series”: [],
    “genres”:[]
}
```

Esse é nosso banco de dados. Feito isso, vou criar um index.php e adicionar alguns detalhes, primeiro dividir o que vier como get na variável e em seguida carregar o banco:

```jsx
<?php
$path = explode('/', $_GET['path']);
$contents = file_get_contents('bd.json');
$json = json_decode($contents, true);
$method = $_SERVER['REQUEST_METHOD'];
header('Content-type: application/json');
$body = file_get_contents('php://input');
```

Agora que já lemos tudo, temos que adicionar um if. Caso o method for get, vamos apenas retornar o Json:

```jsx
if($method === 'GET'){
    if($json[$path[0]]){
    echo json_encode($json[$path[0]]);
    }else{
        echo '[]';
    }
}
```

Com isso, caso tivermos uma série dentro do campo séries, ele retornará essa série. Além disso, podemos inserir também:

```jsx
if($method === 'POST'){
    $jsonBody = json_decode($body, true);
    $jsonBody[id] = time();
    if(!$json[$path[0]]){
        $json[$path[0]] =  [];
    }
    $json[$path[0]][] = $jsonBody;
    echo json_encode($jsonBody);
    file_put_contents('db.json', json_encode($json));
}
```

Caso não exista aquele caminho, vamos criar com um vazio, inserir um item novo e salvar. Caso olharmos o banco depois disso, temos a adição do novo item, caso usarmos o get novamente ele puxará todas as séries que existe lá mais a que foi adicionada por último. Você pode subir esse arquivo e o DB para o servidor que suporte PHP.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7s5_TmBqZR8" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Vídeo sobre Servidores Web - o back-end de uma aplicação web

Source: blog/servidores-web-entendo-back-end/index.md

Neste vídeo, vamos "entrar" um pouco mais a fundo no back-end, entendendo servidores web. O que são e como eles recebem as requisições.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/FT29w4L8TB8" allowfullscreen></iframe>
</div>


---

# Servidores Web -  Um pouco mais do back-end de uma Aplicação Web

Source: blog/servidores-web-um-pouco-mais-back-end-de-uma-aplicacao-web/index.md

Servidores Web são um serviço usado no servidor que fornece páginas ou algum asset para o front-end. Dentro de uma máquina, configuramos uma pasta (/site por exemplo) e quando a pessoa tenta acessar, por exemplo, na porta 80 dessa máquina, o servidor aponta para ela e essa pasta vai ser 'servida' para o front-end.

Este tipo de arquitetura ainda é muito comum. Atualmente temos algumas outras alternativas, mas esse formato ainda é o mais utilizado.

Quando o front-end solicita um .php, por exemplo, o servidor não sabe o que tem que fazer com esse .php, mas na configuração ele sabe que tem um php.exe que sabe o que deve ser feito, então ele envia o script php para o php.exe e este manda a resposta para o APACHE HTTPD. Por fim, o APACHE envia para o cliente. Essa estrutura acontece em grande parte dos sites em que acessamos, como nos que são feitos em Wordpress.

Geralmente, quando é um arquivo como uma IMG ou um CSS, o APACHE já envia diretamente, pois ele já sabe que não precisa pré-processar esses arquivos.

**Quais as opções disponíveis no mercado?**

O APACHE HTTPD - mais conhecido e utilizado para o PHP - o HAProxy, NgineX e o IIS da Microsoft. Podemos escolher qualquer um desses e configurar o site para rodar.

Antigamente comparavam linguagens dizendo coisas como: "O PHP é mais lento que o NodeJS", mas essa comparação é um pouco injusta, já que o PHP precisa do APACHE, que se não for configurado para ser apto a receber muita requisição, pode atrapalhar os acessos do site. Para compararmos as duas, temos que desconsiderar o APACHE ou colocá-lo na frente do Node também.

Hoje temos algumas linguagens que não precisam de servidor WEB como é o caso do NodeJS, pois ele já é um servidor embutido, já consegue abrir uma porta e responder solicitações por si só, e por esse motivo ele acaba sendo um pouco mais rápido e visível.

Sempre que for utilizar PHP ou ASP precisa utilizar servidores web, mas em alguns casos, que chamamos servidor de aplicação, ainda existem umas coisas a mais, muito comum no mundo JAVA, mas isso fica para uma próxima vez.

Deixe suas dúvidas e sugestões nos comentários.

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Como servir arquivos e expor servidor local com HTTPS

Source: blog/servir-arquivos-e-expor-servidor/index.md

Nesta dica, vou mostrar como servir arquivos estáticos de forma simples, além disso, como expor um servidor local de testes para a internet e ainda utilizando uma conexão segura (HTTPS).

Pressupondo que a gente já tenha o NodeJS e o NPM instalado vamos fazer o seguinte no cmd:

```jsx
npm install -g http-server
```

Ele vai instalar o HTTP server, que é mais ou menos parecido com o APACHE, porém mais simples porque podemos servir qualquer pasta, geralmente de forma temporária e não startado como serviço.

Então vamos lá. Já estou na minha pasta, na qual tenho o HTML, e vou colocar:

```jsx
http - server
```

Ele me mostra alguns endereços, disponibilizando para um servidor e ouve as placas de rede.

![Exemplo 1](ArquivosEx1.png)

Vamos pegar o primeiro, abrir uma aba nova no browser e mandar rodar. A partir daí, estamos acessando via um servidor. Algumas API's do JavaScript e HTML eu já conseguiria acessar por estar no servidor, mas algumas delas eu preciso estar em uma conexão segura para esse endereço, e como faço isso?

Uma das maneiras que eu acho interessante é usando uma ferramenta chamada [ngrok](https://ngrok.com/download). É um arquivo zip com um .exe dentro. Podemos colocar ele dentro de uma pasta e colocar a pasta no path. No meu caso, sempre coloco ele na área de trabalho, abro outro CMD e faço:

```jsx
ngrok http 8080
```

8080 representa a porta que estamos utilizando. Com isso, ele libera dois endereços, um https e um http, abrindo um túnel pela internet.

![Exemplo 2](ArquivosEx2.png)

Se copiarmos o endereço https e colar no browser, a conexão para o mesmo arquivo vai ser com https, assim podemos testar muito mais coisas da API do HTML5.

Uma vantagem do ngrok é que como ele é um túnel, o endereço vai estar disponível na internet, logo você pode enviar esse endereço para seu cliente por exemplo, que vai acessar normalmente.

Outra vantagem é quando você for testar Webhook. Vamos supor que você vá integrar com um gateway de pagamento, eles geralmente oferecem o Webhook, caso aconteça alguma coisa no pagamento, ele faz uma requisição em seu servidor falando que algo aconteceu. Uma das coisas que a nossa empresa faz bastante é definir a URL do ngrok com uma URL do Webhook, então mandamos para o pagseguro e quando houver uma alteração no status do pagamento, mandamos uma requisição e meu sistema, rodando na minha máquina, consegue receber sem eu precisar fazer configuração nenhuma de roteador porque o ngrok está fazendo o túnel dessa aplicação.

Uma coisa interessante: quando abrimos a interface no prompt, perceba que existe um web interface. Se abrirmos esse endereço, temos acesso a esse painel:

![Exemplo 3](ArquivosEx3.png)

Nele são mostradas todas as requisições que foram feitas naquele endereço, o código em summary,os headers que foram enviados e por aí vai.

Quando formos refazer este teste com o Webhook, é possível reproduzi-lo apenas apertando em Replay. Já que o Webhook acontece uma vez só, por exemplo em uma transação de teste que eu fiz, chegou no ngrok e foi passado para a aplicação, vamos supor que você cometeu um erro na aplicação e ela não processou, podemos vir aqui e mandar dar um replay, assim ele vai fazer a requisição para o servidor de testes e você vai conseguir recriar o teste.

Confira a dica em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/n_hWce2qxN4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# ShellJS - Crie ferramentas multiplataformas baseadas no Shell do Linux

Source: blog/shelljs/index.md

Neste hands-on, vou falar mais especificamente sobre o ShellJS, uma implementação do Shell do linux em JavaScript.

Qual a vantagem do ShellJS?

A grande vantagem é que ele é multiplataforma, então podemos criar nossos códigos independente da plataforma. Caso a gente queira, por exemplo, criar um catch no arquivo para ver o conteúdo dele, podemos fazer isso tanto no Mac, quanto no Windows ou no Linux da mesma forma. Isso é muito legal para construir um sincronizador de log, por exemplo, ou alguma ferramenta que é só para uso interno.

Para utilizar o ShellJS precisamos primeiro instalar a ferramenta:

```jsx
yarn add shelljs
```

Vou criar um arquivo novo teste1.js, e importar o o shell e usar o cat para ver o arquivo, por exemplo:

```jsx
const sh = require('shelljs')
const contents = sh.cat('arq1.txt')
console.log(contents.toString())
```

Lembrando que estamos fazendo isso em multiplataforma, então se eu rodar o cat direto, pode ser que eu não consiga o mesmo resultado. Isso vale para todos os outros comandos, por exemplo copiar um arquivo:

```jsx
const sh = require('shelljs')
sh.cp('arq1.txt', 'arq2.txt')
```

É muito legal quando conseguimos fazer esse tipo de código que funciona em todas as plataformas, isso gera mais liberdade para construir nossos scripts que dependem de algum IO ou Shell virtual. Vamos supor que eu quisesse copiar um diretório de forma recursiva:

```jsx
sh.cp('-R', 'node_modules', 'mods')
```

Ele replicou exatamente como nós queremos fazer no Shell do Linux. Uma curiosidade é que ele transforma esse código em síncrono, ele usa por baixo dos panos assíncrono, mas a interface que o Shell lida pra gente é síncrona, o que deixa muito mais fácil de fazer e construir os scripts.

Nós utilizamos bastante em alguns projetos para, por exemplo, transformar dados, conectar no banco, atualizar o banco, manipular grandes quantidades de dados, etc.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/7ICR9KhNTGo" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Short-circuit e valores padrão

Source: blog/short-circuit-e-valores-padrao/index.md

Essa dica pode ser utilizada tanto em JavaScript quanto em outras linguagens de programação, apenas com um pouco de adaptação. Vamos falar primeiramente sobre o short-circuit.

Imagine que temos uma constante que se chama debug, que eu posso ligar e desligar esse debug. Quando o debug estiver ligado, eu quero que ele tenha mais saídas no console.log, por exemplo, caso ele não esteja ativado, não vai escrever nada:

```jsx
const DEBUG = true
console.log(1)
Geralmente as pessoas fariam algo assim:
if(DEBUG)
console.log(1)
```

O detalhe é que existe outra forma de fazer isso, chamada de short-circuit, onde deixamos o DEBUG na frente e colocamos && ('e' comercial). Vai acontecer a mesma coisa:

```jsx
DEBUG && console.log(1)
```

Se colocarmos o false em DEBUG, o console.log não irá rodar. Isso acontece porque quando fazemos os 'E's comerciais, temos uma precedência, ou seja, ele depende que tudo seja verdade para que retorne verdadeiro, se DEBUG é false, ele nem valida o restante do código, por esse motivo chamamos de short-circuit (curto-circuito), afinal nós cortamos esse circuito e isso evita de executarmos o restante das operações. Eu posso definir todas as minhas linhas de DEBUG dessa forma por exemplo.

Essa variável pode vir de uma variável de ambiente, podemos rodar nosso script em modo DEBUG e setar algumas coisas a mais, como definir um banco diferente ou coisas no sentido que funcionaria normalmente.

A segunda dica que quero mostrar é o uso do operador || ('ou'), que usamos para valores padrão. Vamos supor que 'a' eu não defina nada dentro dele e em 'b' eu quero colocar o valor de 'a' ou um valor padrão caso o 'a' seja vazio.

```jsx
let a = null
let b = a || 'padrão'
```

Se o 'a' for iniciado com algo, como por exemplo a= 'valor de a', a atribuição de 'b' será o valor de 'a', com isso conseguimos fazer uma leitura de dados de formulário e utilizar esse valor padrão utilizando o ||.

Temos dois usos alternativos dos operadores && e ||, posso usar o 'ou' para o valor padrão e o && para um short-circuit e evitar que a linha continue sendo executada.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/GBcsH6LXzK8" allowfullscreen></iframe>
</div>

Deixe seu cometário, curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Sleep em Generator

Source: blog/sleep-em-generator/index.md

Hoje quero mostrar como podemos recriar o famoso sleep, que temos em algumas linguagens que não são assíncronas como JAVA e PHP, quando queremos usar dentro de um Generator function. Eu cheguei nessa função porque queria fazer testes de algumas operações e naquele dado momento que queria rodar a Generator, queria pausar um pouco entre elas para ver um detalhe acontecer a fim de depurar o código. Então acabei refletindo como poderia criar esse sleep para conseguir fazer esse teste.

Para fazer o teste vamos utilizar o CO, que é uma forma de rodarmos uma Generator Function. Lembrando que uma Generator Function é uma função que pode ser pausada e retornada posteriormente, com isso podemos escrever uma função síncrona, porém continua tendo os benefícios da função assíncrona.

Vamos lá, a primeira coisa que vou fazer é importar o CO.

```jsx
const co = require('co')
```

Se fossemos escrever realmente uma Generator Function iriamos fazer o seguinte:

```jsx
co(function* () {
  console.log('Step 1')
  sleep(1000)
  console.log('Step 2')
})
```

Em JavaScript não temos sleep, obviamente, porque não faz muito sentido porque temos o setTimeout.

Como transformamos o setTimeout em um sleep?

Primeiro vamos criar uma função chamada sleep e para transformar esse setTimeOut em um sleep. Eu teria que transformá-la em uma [promise](https://www.devpleno.com/promises/) e para essa promise passar uma função que vai receber 2 parâmetros, o resolve e o reject, ou seja, dois callBacks:

```jsx
function sleep(time){
    return new Promise((resolve, reject) =>
    setTimeout(resolve, time)
})
```

Com isso, quando chamar o sleep eu consigo utilizar o then para saber que ele rodou depois de um segundo:

```jsx
sleep(1000).then(() => console.log('Depois de um segundo'))
```

Mas queremos utilizar dentro do CO porque quero essa 'cara' de assíncrona, então ao invés de utilizar apenas o sleep, vou utilizar o yield sleep, pausando entre os steps.

```jsx
co(function* () {
  console.log('Step 1')
  yield sleep(1000)
  console.log('Step 2')
})
```

Com isso temo um sleep mais próximo que tínhamos por exemplo em C, Pascal ou até o PHP.

Confira os passos em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/xmVWF1RU3n4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Sobre abrir exceções e como lidar quando elas dão errado

Source: blog/sobre-abrir-excecoes/index.md

Por que devemos ser mais rígidos com as decisões e com os objetivos que a gente define tanto para nossa carreira quanto para nossa vida?

Nessa semana, voltei a focar ainda mais no meu objetivo, pois eu tinha aberto uma exceção para uma situação. Qual o problema nisso?

Toda vez que você abre uma exceção e ela gera um problema para você, vem na sua cabeça uma sensação muito ruim, afinal não era para você ter feito aquilo.

A lição que eu tiro disso é que lá atrás eu deveria ser mais rígido. Aprendi duas coisas com isso,eu não deveria ter fugido do meu objetivo e a não ficar remoendo uma decisão mal tomada e sim quando voltar a ter foco.

Muitas vezes, tomamos decisões que não podemos acertar, mas pode ser que no futuro tudo converta novamente no foco. É isso que eu estou fazendo atualmente, cada vez mais estou focando no DevPleno e escolhendo a dedo os clientes que vou atender.

Então, não tome decisões visando apenas ajudar se tiver que fugir do seu objetivo.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/-VfSsqafasc" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Sobre o DevPleno

Source: blog/sobre-o-devpleno/index.md

Olá, tudo bem? Meu nome é Tulio Faria e sou o criador do DevPleno, e com certeza você já se perguntou:

- Como posso ser um desenvolvedor melhor?
- Como aprender as tecnologias que fazem a diferença para sua carreira?
- Como posso cada vez ser mais valorizado em minha profissão?
- Como viver de desenvolvimento de software mesmo morando no interior?
- Como entregar resultados através de meus projetos?

Se você já se fez pelo menos uma destas perguntas, você está no lugar certo!

### Agora, leia a seguir como o DevPleno irá lhe ajudar a melhorar sua vida e sua carreira

Como você bem sabe, uma das carreiras mais cobiçadas atualmente envolvem trabalhar com tecnologia. Toda empresa já é dependente de software em algum ponto de suas atividades. Tornando o desenvolvedor uma peça chave em todo modelo de negócios.

#### Mas sabe o que eu vejo como o mais problemático para a profissão?

O ensino convencional ainda não consegue preparar um desenvolvedor 100% para o mercado de trabalho. Seja para trabalhar em outras empresas, seja para abrir o seu próprio negócio. Ainda falta alguns pontos muito importantes para a formação ser plena:

- Conhecimento e prática em tecnologias de mercado
- Uso de processos que ajudam a entregar mais qualidade e resultados
- Conhecimento de mercado para alavancar a carreira e projetos
- E essa lista só está começando, vou aprofundar mais a respeito durante o restante do texto.

Analisando este cenário, vi que precisava fazer algo. Afinal, eu mesmo já aprendi muito na prática. Já é mais de uma década sofrendo e aprendendo com meus próprios erros e eu seria muito egoísta se guardasse isso apenas para mim. Foi aí que reacendeu um vontade muito forte e que acabou virando meu propósito de vida: Preciso ajudar as pessoas a passarem mais facilmente por tudo que já passei! E serem felizes como hoje me considero ser 🙂

Bingo! Nunca estive tão motivado a começar algo como o DevPleno que impacta diretamente a vida de tantas pessoas!

#### Tecnologia+Processos+Negócios = DevPleno – um profissional que entrega resultados

### Um pouco da minha história até virar DevPleno

Eu fui criado em uma família humilde. Meus pais não possuem curso superior. Porém, eles fizeram muito por mim e meus irmãos: eles investiram toda a energia e recursos possíveis para que tivéssemos chances de estudar nos melhores colégios (claro que neste ponto também fazíamos nossa parte – por exemplo, do ensino fundamental ao médio – sempre estudei com bolsas de estudo por mérito).

Neste caminho pude assistir e participar da superação deles para financeiramente prover uma educação de qualidade para mim e meus irmãos. Vi a trajetória da minha mãe, saindo de dona de casa a criar uma mercearia/quitanda que mantinha muitas das contas da casa. Além de meu pai, que era funcionário e fora do horário comercial e nos fim de semana estendia a mercearia para virar também um bar. Isso foi muito importante para a minha formação como pessoa: pois eu pude aprender o valor da persistência e do empreendedorismo. Assisti inúmeras vezes meu pai literalmente caindo de sono nas suas empreitadas fora do horário comercial. Porém, totalmente alinhado e comprometido com seu objetivo. As lições de empreendedorismo que aprendi com minha mãe são incontáveis e bastante surpreendentes! Ela sabia exatamente como agregar valor aos seus produtos (na época minha mãe chegou a vender cheiro-verde (cebolinha e salsinha) e couve picadas, pois percebeu que algumas clientes não gostavam de fazer isso. Então ela fazia e cobrava mais caro 🙂

Nesta época, ajudávamos como podíamos. Eu fui entregador, atendente e garçom. Além de ajudar a realizar as compras nos centro de abastecimentos. Isso foi muito importante para a minha formação!

Meu pai aposentou-se e com o dinheiro que recebeu, nos presenteou com um computador (na época era muito caro!) E isso mudou tudo! Descobri que amava computadores e que essa era a área que gostaria de seguir. Ao mesmo tempo, comecei a ter aulas de programação na escola e brincava de criar meus próprios jogos com um vizinho e amigo meu. Meu ensino médio foi junto com o curso técnico em processamento de dados. Quando me formei aos 18 anos, tive uma ideia e fiz de tudo para desenvolvê-la. Abri realmente uma empresa (com CNPJ) e fui a briga. Consegui apresentar para grandes empresas, mas logo percebi que eu não entendi tanto da área que eu queria entrar.

Depois deste projeto, tive várias outras ideias e projetos. Executando cada um destes projetos e analisando seus resultados obtidos (aprendendo a cada acerto e a cada erro). Ao mesmo tempo desenvolvi aplicações de todos os portes, dentro e fora do Brasil. Terminei minha graduação em Sistemas de Informação, e cada vez me envolvia em projetos maiores e mais desafiadores (aliás, isso me dá uma energia fora do sério).

Após alguns anos de graduado, já tinha 3 empresas em meu nome, com projetos acontecendo em todas elas. É bastante intenso 🙂 Durante pouco mais de 2 anos, desacelerei um pouco os negócios e fiz mestrado na USP, também em Sistemas de Informação. E neste período, ficou evidente para mim que eu precisava fazer algo a relacionado a educação tecnológica e que pudesse fomentar termos cada vez desenvolvedores mais bem preparados tecnicamente e com uma bagagem estratégica diferenciado-os dos demais. Foi então que superei minha zona de conforto, e resolvi criar o DevPleno. Aliás, foi aí que percebi o quanto compartilhar o que sei me faz tão bem. Não lembrava que já fiz isso por anos e isso me incendiava 🙂  
<span id="more-47"></span>

Você pode conhecer um pouco mais sobre o motivo pelo qual lancei este projeto neste vídeo:

<iframe width="790" height="444" src="https://www.youtube.com/embed/vOoqJ7l2ng8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

### O DevPleno é diferente

O meu grande propósito e objetivo com o DevPleno é trazer conteúdo relevante. E para conseguir mostrar realmente como é o dia-a-dia de um desenvolvedor, eu atuo na minha própria empresa e também como funcionário em outras (inclusive fora do Brasil). Então espere muitos insights direto do campo de batalha, seja empreendendo no meu próprio negócio ou como funcionário 🙂.


---

# Comunicação em tempo-real com Node e Socket.io

Source: blog/socket-io-parte1/index.md

**O que é Socket.io e para que vamos precisar dele?**

Socket.io é uma implementação em node para web socket, ou seja, uma forma de fazer comunicação em tempo real, mas mais importante que isso é sua possibilidade de fallBack. O Socket.io foi lançado há mais ou menos cinco anos e mesmo assim ele ainda continua sendo a melhor opção para comunicação em tempo real quando utilizamos o node.

Outra coisa muito importante é o fato de poder integrá-lo a outros Stacks, como em uma aplicação feita em PHP, Java, etc. E o mais interessante é que é possível fazer com autenticação e tudo mais.

O Socket.io também é muito fácil de escalar, como é em tempo real, o chamamos de io intensive, ou seja, acontece muito io quando estamos utilizando o mesmo.

_Exemplo:_ Por algum motivo seus clientes que estão se conectando ao Socket.io não têm suporte ao web Socket, então ele vai tentar outras maneiras (não tão performáticas como AJAX). Nesta situação, o Node se destaca de outras tecnologias, pois ele suporta mais usuários.

Para começarmos o projeto, devemos instalar os módulos Socket.io e o Express :

```jsx
yarn add socket.io
yarn add express
```

Feito isso, vamos criar um arquivo (vou chamá-lo de server.js), que será nosso servidor express. Nele vamos criar a instância do socket.io e passar o http.

```jsx
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
```

Vamos fazer um teste para ver se esta tudo funcionando corretamente:

```jsx
http.listen(3000, function () {
  console.log('listening on port 3000')
})
```

Com o Server respondendo corretamente, precisamos pelo menos ter um arquivo HTML para conectar ao secket.io, então vamos mandar um arquivo index apenas para ter algo para mandar ao navegador.

```jsx
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
  res.sendFile(
    \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_dirname + '/index.html'
  )
})
```

Mas não temos o index.html, certo? Então vamos criar um novo arquivo index.html, dentro dele você vai perceber algo interessante do socket.io, ele é um módulo que já vem com a parte server e a parte client, com isso é possível fazer um src chamando o socket.io. Irá funcionar porque já injetamos no http para disponibilizar na aplicação. Em seguida vamos instanciar o módulo

```jsx
<html>
  <body>
    <h1>Socket.io</h1>
    <script src='/socket.io/socket.io.js'></script>
    <script>const socket = io()</script>
  </body>
</html>
```

Se olharmos no inspect do browser e irmos em network, podemos perceber que ele já começou uma conexão e websocket. Assim, podemos saber, por exemplo, se algum cliente conectou apenas adicionando no server.js um callback para quando ele se conectar:

```jsx
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
  res.sendFile(
    \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_dirname + '/index.html'
  )
})
io.on('connection', (socket) => {
  console.log('New connection', socket)
})
```

**O que aconteceu?**

O Socket.io tem o socket que é uma instância da conexão que criamos para o usuário, com isso podemos mandar uma mensagem de volta, logar o usuário por exemplo. Basicamente se eu mandar algo para este socket, esse algo irá somente para este cliente. Mas temos opções no socket.io de mandar só para um cliente ou vários.

Perceba que o módulo já descobriu qual a melhor forma de se conectar, no caso websocket, o interessante é que, se caso a conexão pare ao voltar, ele irá se reconectar sozinho, então não precisamos nos preocupar se o usuário está conectado ou não, pois tratamos na interface a medida que novas conexões vão surgindo. A única preocupação que temos é de checar se o estado da conexão que o usuário deixou continua valendo.

Cada socket que temos é gerado um ID da conexão para cada usuário, vamos escrever o ID para saber qual é:

```jsx
io.on('connection', (socket) => {
  console.log('New connection', socket.id)
})
```

**Conclusão**

Já deu para termos uma ideia do que é o Socket.io, e este é um assunto que rende muito conteúdo, pois é muito extenso, temos vários desafios para fazê-lo funcionar bem, mas agora já temos uma base de como ele funciona.

Em breve tem a parte 2 deste hands-on.

Enquanto isso confira o também o vídeo dessa primeira parte:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/qZUDuBcbJ9A" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on - Socket.io Parte 2

Source: blog/socket-io-parte2/index.md

Continuando nossa série sobre Socket.io, vamos aprofundar um pouco mais no assunto. Lembrando nosso código do lado server:

```jsx
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html')
})
io.on('connection', (socket) => {
  console.log('New connection', socket.id)
})
http.listen(3000, function () {
  console.log('listening on port 3000')
})
```

Simplesmente estávamos tratando a conexão, então se o cliente conectou, isso nos era mostrado, além do ID da conexão. _(Lembrando que cada Socket criado tem um ID diferente. Mesmo que o cliente abra duas abas com links da mesma sessão, elas são tratadas separadamente)._

Vamos abrir o cliente e adicionar o Jquery \_(apenas procure no Google jquery CDN, copiar a url e adicionar em source) e e_m seguida adicionar um socket.on. Com isso, sabemos do lado do cliente que foi conectado.

```jsx
<html>
  <body>
    <h1>Socket.io</h1>
    <script src='/socket.io/socket.io.js'></script>
    <script src='https://code.jquery.com/jquery-3.2.1.min.js'> </script>
    <div id='msgs'></div>
    <script>
      const socket = io() socket.on('connect', function()
      {$('msgs').append('connected with id: ' + socket.id + '<br>')}
    </script>
  </body>
</html>
```

**E como isso será notificado?**

Perceba que criamos uma DIV msgs para podermos colocar as mensagens dentro a medida que recebemos. Quando o cliente conectar nosso div msgs, irá chamar o append e mostrar a conexão com o ID utilizado. Assim, podemos, por exemplo, identificar o usuário baseado nesta conexão.

**O que podemos fazer?**

Quando o cliente se conectar, podemos mandar uma mensagem para o servidor, por exemplo, que o ID especifico está conectado. Adicionando no lado do cliente um socket emit dentro da function e mandamos escrever a msg gerado do lado servidor.

```jsx
<script>
    const socket = io()
    socket.on('connect', function(){
        $("msgs").append('connected with id: '+socket.id+'<br>'
        socket.emit('msg', 'I am connected '+socket.id);
    )}
    socket.on('msg', function(msg){
        $("#msgs")append(msg+' <br>')
    }
</script>
```

E do lado servidor adicionando um gerenciador de evento para que, quando ele receber uma mensagem,possa só escrever por enquanto (apenas modificamos esta linha de código).

```jsx
io.on('connection', (socket)=>{
    console.log('New connection', socket.id)
}
socket.on('msg', (msg)=>{
    console.log(msg)
    socket.broadcast.emit('msg', socket.id+' connected');
})
```

Se reiniciarmos o servidor e gerarmos uma nova conexão do lado cliente, irá aparecer a mensagem de "I am connected + ID" do lado servidor, já que o Socket representa o cliente que está conectado. Depois com o broadcast estamos avisando todos que o ID específico foi conectado.

**Não aconteceu nada. Está dando erro?**

No lado cliente, abra uma nova aba, copie o link da sessão e rode, então verá que ele irá se conectar, mostrar um novo id, e na sessão anterior vai ser emitida uma mensagem que aquele ID foi conectado, como queríamos, afinal estávamos enviando para todos quando algum novo ID se conectasse.

**Por que isso aconteceu?**

Isso acontece porque o broadcast não manda a mensagem para o próprio Socket. Isso é feito para não permitir que não receba mensagens duplicadas.

Perceba que com isso já é possível criar um chat. Precisamos apenas adicionar ao lado cliente um input type text e criar um function keyDown, em seguida gerar um if dizendo que se o keyCode for igual ao número que representa o enter (no caso 13), vamos disparar a mensagem com o valor dentro do text.

```jsx
<html>
    <body>
        <h1>Socket.io</h1>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
        <div id="msgs"></div>
        <input type="text" />
        <script>
            const socket = io()
            socket.on('connect', function(){
                $("msgs").append('connected with id: '+socket.id+'<br>'
                socket.emit('msg', 'I am connected '+socket.id);
            )}
            socket.on('msg', function(msg){
                $("#msgs")append(msg+' <br>')
            }
            $(function(){
                $("imput").keyDown(function(key){
                    if(key.keyCode===13){
                        socket.emit('msg', $(this).val());
                    }
                })
            })
        </script>
    </body>
</html>
```

Já do lado servidor, temos que pedir para enviar a mensagem do campo texto ao invés do socket.id, substituindo:

```jsx
socket.broadcast.emit('msg', socket.id + ' connected')
```

Por:

```jsx
socket.broadcast.emit('msg', msg)
```

Confira todos os detalhes no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/07qqDZrZ--8" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Dicas utilizando o Split em Strings

Source: blog/split-em-strings/index.md

Na dica de hoje quero mostrar alguns 'macetes' que podemos fazer com o Split, uma função de uma String em JavaScript.

Primeiramente o que é Split? Ele divide uma String em partes, por exemplo:

```jsx
const str = 'Tulio Faria'
const parts = str.split(' ')
console.log(parts)
```

Com isso, criamos um vetor com o nome e o sobrenome. O interessante disso é que podemos combinar ele com algumas coisas, por exemplo, com o join:

```jsx
const parts = str.split(' ').join('====')
```

Assim o resultado seria Tulio===Faria. Em algumas situações, é possível fazer alguns processamentos mais inteligentes com essa técnica.

Além disso podemos parar de utilizar expressão regular, afinal aqui usamos somente a string pura. Outra coisa interessante é que podemos utilizar até mesmo arrow functions, vamos supor que eu quisesse, por exemplo, fazer o seguinte:

```jsx
const str = 'Tulio 0 Faria'
const parts = str.split(' ').filter((p) => p != '0')
```

Assim conseguimos remover o zero do meio da String. São algumas combinações bastante legais, principalmente quando começamos a cascatear ou fazer um link de uma para outra.

Outro 'macete' interessante é o seguinte: se eu der um Split em espaço, ele divide letra a letra:

```jsx
.split(' ')
```

Assim poderíamos, por exemplo, tirar as vogais:

```jsx
const vogais = 'aeiou'
  .plit(' ')
  .split(' ')
  .filter((letra) => vogais.indexOf(letra) < 0)
```

Com isso retornamos apenas as consoantes do meu nome.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3d-wAbwJKtk" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Testando o Spread Operator: Novidade do ES6

Source: blog/spread-operator/index.md

Olá!

Neste post, vou mostrar uma novidade do ES6: o Spread Operator.

Você deve estar se perguntando agora _(ou não)_:

**Para que serve o Spread Operator?**

O Spread Operator é usado com bastante frequência principalmente quando queremos utilizar a imutabilidade, ou seja, criar um objeto novo a partir de um objeto existente.

**Mãos na massa**

Ele é bastante simples, vou criar um exemplo utilizando Array.

Primeiramente temos que criar o Array:

```jsx
const arr = [0, 1, 2]
```

Então, se eu quisesse criar um novo vetor eu faria:

```jsx
constNewArr = [...arr, 3]
```

Somente esses 3 pontinhos já é o Spread Operator.

**E o que ele faz?**

Vai ficar bem claro quando fizermos um teste com funções. Se eu pedir para rodar:

```jsx
console.log(newArr)
```

Ele nos retornará um vetor novo com o 0,1,2,3.

Eu adicionei o item 3 no final e posso manipulá-lo em qualquer posição, por exemplo

```jsx
const NewArr = [3, ...arr]
```

Ele irá aparecer 3,0,1,2. Não ficou claro? Então vamos para outro exemplo e ficará mais fácil de entender. Quando colocamos ...arr é basicamente o mesmo que colocarmos o que está dentro do Array, por esse motivo se chama Spread Operator, pois é um operador que espalha os valores.

Se pensarmos assim, podemos fazer o seguinte:

```jsx
function soma(a, b, c) {
  returna + b + c
}
```

Ao mandar rodar o

```jsx
console.log(soma(...arr))
```

Ele irá espalhar estes valores em a, b e c e vamos conseguir somar esses valores.

Podemos utilizar isso de várias maneiras, como por exemplo tirando um valor do arr

```jsx
const arr = [0, 1, 2]
```

deixando

```jsx
const arr = [0, 2]
```

E passando para o

```jsx
console.log(soma(1, ...arr))
```

**Dica**

Uma dica fácil é lembrar que ele espalha os valores colocando virgula entre eles. Isso é bastante útil, principalmente quando a gente quer duplicar um vetor.

Você pode conferir o Hands-on também pelo vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Uft_UkXtqT0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades.

Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Standard - Padronize o código fonte JavaScript da sua equipe

Source: blog/standard-parte-1/index.md

O módulo Standard é uma ferramenta bastante útil no nosso dia a dia, ele aplica algumas regras para você manter seu código fonte. Por exemplo, se você vai fazer um 'if', tem que deixar um espaço porque facilita a leitura:

```jsx
if (i === 1) {
}
```

Com o tempo você sente que seu código precisa melhorar, tanto em performance quanto em organização. Quando começamos temos que resolver um código, depois de um tempo isso já não é o suficiente. Precisa ser feito de forma que outras pessoas entendam e que fique bem organizado, que é algo que levo pra minha carreira hoje, procuro resolver o problema da melhor forma possível. Uma das formas que temos para aumentar a qualidade de um código é mantendo um padrão de escrita. Em Java, é muito comum utilizarmos o Java Cult, em JavaScript temos algumas opções como o Standard.

No caso do Standart, ele tem uma ferramente que checa o código. Para usar, primeiramente tem que dar um npm:

```jsx
npm install -g standard
```

Quando você roda o módulo, ele procura todos os arquivos JS dentro do seu diretório atual e vê se está faltando alguma coisa, por exemplo no meu ele achou alguns erros:

![Exemplo](standardUExUm.png)

Então o 'i' em nosso 'if' não foi definido, com isso conseguimos pegar um bug antes mesmo dele acontecer, então vamos resolver o primeiro bug:

```jsx
let i = 0
if (i === 1) {
}
```

Ao rodar, percebam que já diminuiu um bug:

![Exemplo 2](standardUExD.png)

Agora temos um espaço vazio na linha 3

```jsx
let i = 0
if (i === 1) {
  console.log(1)
}
```

E por fim, adicionar uma nova linha no final do arquivo. Quando fazemos isso não retorna nenhum erro no nosso código. Se eu der um 'tab' a mais, por exemplo, no console.log, ele vai retornar que está identado errado.

Uma coisa que dá bastante discussão é onde colocar a abertura da chave. Se você colocar na linha de baixo, ele irá dar um erro:

```jsx
if (i === 1) {
  console.log(1)
}
```

![Exemplo 3](standardUExT.png)

Porque temos que colocar o nosso curly brace na mesma linha do controlador. Se você criar um projeto e seguir esse padrão, as chances do seu código ter menos erros é maior, além disso, ele fica bem mais legível.

Ele também tem algumas coisas de lint também, o próprio Standard utiliza o ES Lint para resolver isso. A ideia é que você comece a utilizar algum padrão de código em JavaScript, em todas as linguagens tem alguma recomendação para utilizar as melhores práticas.

Confira o hands-on em vídeo:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/H005spSyxeA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Standard Parte 2

Source: blog/standard-parte-2/index.md

Para complementar o hands-on que fizemos sobre [Standard](https://www.devpleno.com/standard-parte-1/), vou passar mais duas dicas sobre a ferramenta. A primeira é uma biblioteca que se chama Snazzy e a segunda é uma forma de automatizar a formatação do código fonte.

Imagine o seguinte, você tem um código gigante que precisa passar para o Standard, o que podemos fazer? Vamos lá:

```jsx
standard --fix script.js
```

Com isso ele já corrigiu o arquivo fonte. Podemos utilizar para formatar automaticamente, eu não uso tanto para formatar dependendo do arquivo porque eu gosto de corrigir para não errar novamente. O segundo módulo se chama Snazzy. Primeiramente vamos instalar:

```jsx
npm install -g snazzy
```

Se rodarmos Standard no nosso código, percebemos que é bem difícil de entender ou achar onde está o problema, então se fizermos:

```jsx
standard | snazzy
```

Ele vai organizar os erros da seguinte forma:

![Exemplo](standardDExU.png)

Ele formata as saídas falando os problemas do código de forma organizada, então temos um erro na linha 1 no caracter 6, na linha 2 também, no caracter 6; e na linha 3, o caracter 1, todos eles explicando os erros.

Eu geralmente uso o Snazzy, dou uma olhada no arquivo, se não for nada muito grave, uso o --fix para corrigir o arquivo. Recomendo que façam isso também, porque talvez alguma alteração pode atrapalhar seu código.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/ISVp1mlB1BA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Criando componente mais simples e eficaz em React

Source: blog/stateless-functional-component/index.md

Vamos começar esse hands-on Stateless Functional Component com um projeto do zero criado com Create-react-app. Primeiro vamos criar um arquivo novo chamado home.js _(iremos importar o React, pois ainda vamos usar JSX)._

Um Stateless Functional Component, na verdade, é apenas uma arrow function, então iremos fazê-lo desta forma:

```jsx
import React from 'react'
const Home = () => <p>Olá</p>
export default home
```

Este const home = () => <p>Olá</p> já é o nosso Stateless Functional Component. Ele é uma função, mas perceba que não tem classe, o que o deixa muito mais simples. Essa é a primeira vantagem se comparado com a outra forma de criar componente, afinal é muito simples para saber o que há dentro dele. Outra coisa bacana é que ele é mais rápido, já que não tem todo aquele overload de classe.

**Por que ele é Stateless Functional?**

Ele é uma função pura, ou seja, é mais fácil de ser testado e a qualidade do código é maior. Outro ponto interessante é que não usamos o this, pois se temos uma função pura, não temos um estado interno. Ela também só depende das entradas, que são os props.

**Quando usamos esse component?**

Quando temos um componente de apresentação, como por exemplo um componente que só é responsável por renderizar algo na tela. Isso faz com que ele não tenha um comportamento muito complexo. Podemos passar Props para ele também:

```jsx
import React from 'react'
const Home = ({ name }) => <p>Olá {name}</p>
export default home
```

E no nosso arquivo App.js, faremos o seguinte:

```jsx
import React,{ Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home'

class App extends Component {
    render() {
        return (
            <div className="App">
            <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
            </div>
            <div className="App-intro">
            <home name='Tulio' />
            </div>
        );
    }
}
```

Perceba que passei um props chamado name, e então fiz o destructor assignment, extraindo do objeto apenas o que eu quero. Também poderia colocar Props e props.name, funcionaria normalmente, mas como temos uma forma mais simplificada, não é necessário.

Podemos fazer também alguma checagem. Não tem problema nenhum o componente ter uma condicional, desde que retorne o JSX.

Existe uma premissa no React que quanto mais você utiliza o Stateless Functional Component, mais seu código vai estar otimizado.

Assista o passo a passo desse hands-on:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/LA80dqopg1M" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Streams Parte 03 - Duplex

Source: blog/stream-duplex/index.md

Já falamos sobre Readable e Writable Streams, agora falaremos sobre o tipo Duplex. Ele nos permite tanto enviar quanto receber dados. Para testarmos este Stream, vamos utilizar a classe net.Socket, que implementa um Socket, o que permite fazer uma comunicação em rede no Node. Vale lembrar que o Socket é muito comum em outras linguagens como Java.

**O que o Socket faz?**

Basicamente um Socket abre uma porta na rede e fica 'ouvindo' essa porta, possibilitando que um cliente a acesse e feche uma conexão. Lembrando que Socket é um tipo Duplex, pois é possível ler e escrever dados deste Stream.

**Vamos ao exemplo:**

Se a última posição do process.argv for igual a server, teremos que rodar duas versões: a server, que irá ouvir e receber este Sockt, e uma versão client, que irá se conectar a este Socket.

```jsx
const net = require('net');
const readLine = require('readLine')
if(process.argv\[ process.argv.length-1\] === 'server'){
//server
    const server =  net.creatServer((socket) =>{
    socket.on('data'), (data) => {
        socket.write(data)
        console.log('Receive from client ' + data)
    })
})
server.listen(1337, '127.0.0.1')

}else{
    //client
    const rl = readLine.createInterface({
        input: process.stdin,
        output:process.stdout
    })
    const client = new.net.Socket()
    client.connect(1337, '127.0.0.1', () => {
        console.log('Connected');
        cliente.write('Hello, server!');
        rl.addListener('Line', (line) => client.write(line))
    })
client.on('data', (data) => console.log('Received: ' + data))
client.on('close', ()=> console.log('Connection clesed'))
```

Quando criamos o servidor, iremos criar um callBack que retorna o Socket, ou seja, sempre que houver uma conexão nova ele irá chamar a arrow function que terá as duas funções do socket, socket.on que é equivalente ao readable Stream e o socket.write, que é equivalente ao writable Stream.

**O que acontece neste código?**

**No Server:**

Quando for executado a arrow function, ele irá criar uma instância para comunicarmos com o cliente. Quando este cliente enviar algum dado, será feito um 'ping-pong', ou seja, vamos mandar de volta esses dados para o cliente. O servidor fica ouvindo uma porta, no exemplo acima, a porta 1337.

Uma curiosidade é que isto segue a mesma ideia quando criamos uma aplicação com xpress, pois ele ouve uma porta e faz o tratamento, a única diferença é que 'por baixo dos panos' para não precisarmos ficar preocupados em criar socket.

**No cliente:**

Nele iremos criar um novo Socket e conectar a porta do servidor (no exemplo 1337). Quando conectamos a esta porta será executado o callBack, que devolverá as respostas de conexão (console.log('Connected');). Toda vez que tivermos uma linha nova no console será escrita no Stream.

Ressaltando que o Client também é um Stream Duplex, afinal, nele executamos um.write, que é writable, e o client.on data que é readable.

Por fim, temos um on data. Isso faz com que toda vez que recebermos dados esteja escrito na tela.

**E como isso vai funcionar?**

Para fazermos este código rodar, temos que executar o node socket.js server para startar o servidor. Em uma outra janela iremos rodar o client com node socket.js.

**Conclusão**

Isso é legal porque podemos gerenciar mais de um socket.js client e funcionaria perfeitamente, uma vez que na aplicação, sempre que receber uma conexão nova, ele irá executar o socket com uma instancia nova.

Este exemplo de socket é muito usado para mostrar multi thread em outras linguagens como java. No caso do Node, ele é mono thread, o que torna sua performance muito melhor. Confira o Hands-on no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/kYoVIIqEFZQ" allowfullscreen></iframe>
</div>

Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Hands-on: Streams Parte 2 - Writable

Source: blog/stream-parte-2-writable/index.md

Vamos continuar falando sobre o Stream em node, mais especificamente sobre o Writable, lembrando que podemos usar estes conceitos em outras linguagens. Se você ainda não viu a parte 1, clique [AQUI](https://www.devpleno.com/streams-parte-1/).

**O que é Writable Stream?**

São Stream's onde podemos escrever algo neles, diferente do Readable que apenas lemos os dados. Dizemos que o Writable é um stream de destination. Podemos utiliza-los, por exemplo, em operações em rede, escrever em arquivos, etc. Hoje vamos trabalhar fazendo testes em um arquivo por ser mais simples.

**Qual a vantagem em relação ao modo sem Stream?**

Do mesmo modo que o readable Stream, iremos escrever 'parcelado' neste arquivo, sem necessidade de termos ele inteiro em memória.

**Como ulizamos o Writable Stream?**

Primeiro vamos chamar o fs para ter acesso a ele e em seguida chamar o WritableStream, lembrando que no Writable temos algumas opões, como flags, que irá indicar como eu vou escrever este arquivo e o encoding para setar o tipo de codificação (UTF8 é o mais consolidado).

```jsx
const sf = require('sf')
const writable = sf.createWriteStream('arquivo.txt', {
  flags: 'w',
  encoding: 'utf8'
})
writable.write('exemplo\\n')
writable.write('acabou')
```

Temos então o Writable Stream, dizendo onde eu quero gravar meu arquivo e qual flag quero utilizar, neste caso utilizamos o W que é somente para escrever criando um novo arquivo ou sobrescrevendo um já existente por completo.

Ao trocar o W pelo A entramos no modo append, ou seja, ele acrescenta a escrita no final do arquivo, somando o anterior com as novas adições.

**Por que utilizamos o Writable Stream?**

Podemos construir um arquivo nosso com stream parcialmente e, a medida em que temos acesso a novos dados para serem escritos, podemos adiciona-los.

**Concluindo**

Percebam que quando usamos xpress, a requisição tem um Readable Stream e a saída é um Writable Stream, então já podemos imaginar que é possível criar algumas coisas no próprio xpress, isso acontece por que o xpress implementa stream.

Outras comunicações que utilizam streams como socket io também seguem a mesma sintaxe. Confira o hands-on completo no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/elOGmIL7qws" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Streams - Parte 1

Source: blog/streams-parte-1/index.md

Olá!

Neste post, vamos falar sobre Streams, um conceito utilizando em JavaScript mas que pode ser aplicado em outras linguagens. Nele temos uma grande quantidade de conteúdo para explorar.

**O que é um Stream?**

É um Fluxo de dados. Quando queremos ler um arquivo muito grande, por exemplo, ele permite que façamos um fluxo de dados na leitura deste arquivo.

**Qual a vantagem de existir este fluxo de dados?**

Primeiramente isso permite lermos arquivos gigantescos e transformar os dados na medida que vamos lendo estes dados.

Outra coisa interessante sobre o Stream é que podemos fazer o Pipe (uma ligação) de um Stream com outro, como por exemplo um Stream de leitura com um Stream de escrita integrando os dois de forma fluída. Isso é muito bom para trabalharmos com movimento de dados, tratando pedaços deste arquivo à medida que eu vou lendo, sem precisar colocar ele todo na memória.

No JavaScript, temos quatro tipos de Stream: Readable (leitura), Writable (escrita), Duplex(ambos os anteriores juntos) e Transform (permite transformação de dados).

**Readable**

Primeiro vamos pegar um arquivo grande, por exemplo arquivo.txt e vamos ler ele com Stream. Vamos chamar o fs para ter acesso a isso.

_Uma curiosidade: o Stream no Node é implementável, ou seja, quando algum módulo implementa o Stream, podemos tratá-lo da mesma forma, podendo utilizar os mesmos métodos em outros Streams._

```jsx
const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
```

Nós temos dois tipos de readable Stream: o paused mode, onde ele para e eu solicito os dados, e o flowing mode, em que a medida que ele consegue ler os arquivos já vai devolvendo os dados.

Para fazermos o Flowing mode, vamos criar uma arrow function data passando o data para dentro. Lembrando que o data é um buffer, então precisamos adicionar um toString para sabermos o que tem dentro dele.

```jsx
const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('data', (data) => {
  console.log(data.toString())
})
```

Quando colocamos o readable.on, ele 'ouve' o tipo data e o readable entra em modo flowing, também conhecido como modo push. Este modo é muito utilizado em operações de rede, como por exemplo ler um upload de um arquivo de um usuário (javaScritp client side), com isso vamos tratando estes dados na medida que vai sendo enviado.

Podemos criar, também, uma forma em que o readable nos envie a leitura de tempo em tempo usando readable.pause e readable.resume, da seguinte forma:

```jsx
const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('data', (data) => {
  console.log(data.toString())
  readable.pause()
  setTimeout(() => readable.resume(), 2000)
})
```

No exemplo acima, o readable nos retorna partes do arquivo a cada 2 segundos. A segunda forma que podemos fazer é usando o paused mode. Quando o arquivo tiver um evento readable (consegue ler dados do Stream), eu solicito o envio desses dados ao invés dele me enviar de tempo em tempo. Fazemos isso usando o chunk.

```jsx
const fs = require('fs')
const readable = sf.crateReadStream('arquivo.txt')
readable.on('readable', () => {
  while ((chunk = readable.read())) {
    console.log(chunk.toString())
  }
})
```

**Qual a vantagem do modo paused?**

Eu posso ir processando uma pequena quantia de dados de acordo com o que eu quero.

**Conclusão**

Essa foi uma noção inicial dos readable Streams, vamos passar por todos os outros modos, mas dentro do readable temos os 2 modos, o pause e o flowing. Confira o hands-on completo no vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/PcvJm2QqSS4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Hands-on: Streams Parte 4 - Transform

Source: blog/streams-parte-3-transform/index.md

Continuando nossa série sobre Streams, iremos falar sobre como podemos ligar um readable em um writable e vice-versa, e como criamos o tipo Transform. Primeiramente, para linkarmos um stream a outro, temos que importar o fs. Em seguida, criamos os Streams que vão ser linkados, por exemplo:

```jsx
const fs = require('fs')
const readable = fs.createReadStream('arquivo.txt')
const writable = fs.createWritableStream('arquivo-2.txt')
readable.pipe(writable)
```

Com isso, estamos vinculando o on data do Readable com o Write do Stream Writable. Ao executar o código acima, criaremos uma cópia do arquivo.txt.

**Para que serve o Pipe?**

O Pipe permite criar a saída de um Stream com a entrada de outro, o readable, que somente envia dados com o writable, que apenas recebe dados. Podemos utilizar vários Pipes de uma vez, como por exemplo:

```jsx
const fs = require('fs')
const zlib = require('zlib')
const readable = fs.createReadStream('arquivo.txt')
const writable = fs.createWritableStream('arquivo-2.txt')
const zipper = zlib.createGzip()
readable.pipe(zipper).pipe(writable)
```

Com a execução do código, iremos pegar esta saída do readable, jogar na entrada do zipper e a saída do zipper adicionando em writable. Lembrando que zlib já faz parte do core do Node, com isso é possível compactar usando apenas o mesmo.

**O que o Zipper faz?**

O Zipper é um Stream do tipo Transform, basicamente ele transforma a entrada em uma saída utilizando pipe. Podemos transformar estes dados a medida que utilizamos este pipe. É interessante que o readable seja a entrada e o Writable seja a saída. Vamos a outro exemplo para que fique mais claro:

```jsx
const fs = require('fs')
const zlib = require('zlib')
const readable = fs.createReadStream('arquivo.txt')
const readable = fs.createWriteStream('arquivo-upper.txt')
const Transform = require('Stream').Transform
const upperCase = new Transform({
  transform(chunk, encoding, callback) {
    const chunkUpper = (chunk + '').toUpperCase()
    this.push(chunkUpper)
    callback()
  }
})
readable.pipe(upperCase).pipe(writable)
```

No código acima, criamos um Stream transform pegando o Stream do core do Node utilizando a instancia de transform. Em seguida, criamos uma função upperCase e essa mesma função espera que passamos um método transform, enviando um chunk, encoding e um callback. Transformamos este chunck em um tipo string eo retornamos eem push.

Temos um callback ali, pois este método poderia ser assíncrono, fazendo outra operação que dependesse de um IO e, com isso, chamaríamos o callback quando tivéssemos terminado de transformar o chunk de dado.

Em resumo, pegamos o que o readable enviou, criamos uma variável nova e passamos esta informação para maiúsculo.

**Qual a utilidade do Transform?**

É muito comum utilizarmos este stream para zippar arquivos e transformá-los para maiúsculos. Isso é muito poderoso para podermos criar aplicações que não precisam ler realmente estes dados em memória para depois ser processados. Por exemplo, o zipper que criamos irá zippar pedaços do arquivo e isso não consome tanto recurso da maquina.

**Conclusão**

Este tipo de Stream é muito interessante e eu recomendo fortemente que você faça alguns testes. Existem outras maneiras de fazer o transform, como por exemplo em alguns casos em que estendemos a classe, mas acredito que a forma explicada aqui seja mais convencional ou 'java way'.

Confira também o vídeo do hand-on:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/gp7sB7-bPAg" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Sua carreira pode mudar durante o carnaval?

Source: blog/sua-carreira-pode-mudar-durante-o-carnaval/index.md

Geralmente, acredita-se que não… Afinal de contas, carnaval, feriado, festas, bebedeira, ninguém quer se preocupar com carreira ou trabalho. Não é verdade?

Bom, pelo menos muita coisa mudou em minha carreira a partir de uma terça feira de carnaval. Estranho isso, né?

Toda essa mudança na minha carreira começou dia 9 de fev de 2016, às 14h18 - também conhecida como terça-feira de carnaval. :)

Só para entender o cenário, eu já estava com alguns problemas financeiros e durante o carnaval (sem dinheiro) estava explorando formas de mudar minha carreira - pois a situação estava ficando insuportável...

Neste carnaval de 2016, eu estava buscando e explorando possibilidades de negócios e realmente empenhado em dar uma mudança financeira na minha vida. Perto desta época, comecei a considerar trabalhos remotos e já havia enviado meu CV para dezenas de vagas sem ter nenhuma resposta. Mas a minha intenção já estava setada. ;)

Foi quando recebi o e-mail desta foto:

![Email](EmailUm.png)

Sim, uma pessoa que eu havia sido apresentado há 2 anos, lembrou-se de que eu poderia ajudá-la em um projeto.

E apesar do e-mail estar em português, ela estava em Nova Iorque e precisava resolver um grande problema no projeto. Toda a negociação aconteceu durante a terça feira de carnaval e quarta-feira de cinzas. Ao final da quarta-feira de cinzas, eu estava contratado - com contrato assinado e tudo mais - e já tinha recebido um e-mail (em inglês) de um outro membro da equipe para falar com o CTO (eu havia sido contratado pela CEO).

![Email 2](EmaiDois.png)

![Email 3](EmailTres.png)

Relembrando este acontecimento, eu consegui desconstruir vários pontos interessantes que gostaria de compartilhar com vocês:

**Network não acontece do dia para a noite!**

Eu conheci a pessoa 2 anos antes deste e-mail. Sim, 2 anos! E pasmem, quem me apresentou a ela foi um colega que havia estudado comigo 13 anos antes. Network é um jogo de longo prazo e tem que ser cultivado o tempo todo!

**Quanto você está comprometido com a mudança que quer?**

Eu queria uma mudança na minha carreira. Eu não sabia que ia acontecer no carnaval, mas mesmo assim, eu estava usando esse feriado para, de alguma forma, achar uma solução para a época. E isso me fez estar presente, disponível e apto a responder prontamente a uma oportunidade bastante interessante.

**Quanto você se coloca em risco?**

Uma preocupação da pessoa pelos e-mails sempre foi a comunicação em inglês. E mesmo não estando preparado, eu mantive a clareza de dizer que talvez não conseguiria mas que eu estaria preparado em um prazo determinado. Da última vez que você foi questionado sobre algo que não domina, você respondeu com um prazo para isso acontecer? No meu caso, respondi que em 3-4 meses eu iria conduzir/liderar uma reunião toda em inglês. Na época eu nunca havia feito isso, muito menos tinha conversado com alguém em inglês. Como eu sabia que 3-4 meses era o suficiente? Na verdade, o que eu sabia era que eu FARIA esse período ser o suficiente para alcançar isso. Independente do que acontecesse, eu ia dar o meu jeito. Sem desculpas! Durante o projeto, destravei meu inglês, aprendi a negociar e a resolver muitos problemas em equipes extremamente diversas. Mas o mais importante: descobri que eu era capaz de contribuir em projetos mundiais e o Brasil já não era mais o meu limite. Depois disso veio a Toptal e vários outros projetos de grande impacto no mundo e na minha carreira… Mas é interessante pensar que tudo começou com uma troca de e-mails no carnaval. E a minha reflexão aqui é: será que a mudança que você quer não está onde você menos espera? Será que você não poderia usar seu carnaval para aprender React ou estudar um tema que vai te proporcionar a mudança que você tanto quer para sua vida? Chega de desculpas!

[![DevReactJS](DevReact.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Criando um teclado com WebAudioAPI

Source: blog/teclado-com-webaudioapi/index.md

Hoje quero continuar falando sobre [WebAudioAPI](https://www.devpleno.com/webaudioapi/). Vamos um pouco além do que já fizemos anteriormente. No nosso arquivo HTML, teremos dois scripts com função para ler qual tecla no teclado estamos apertando e outra para quando soltarmos a tecla:

```jsx
<html>
  <body>
    <script>
      function onKeyDown(key){console.log(key)}
      function onKeyUp(key){console.log(key)}
      window.onkeydown = onKeyDown window.onkeyup = onKeyUp
    </script>
  </body>
</html>
```

A partir disso, podemos utilizar o contexto para tocar um áudio, mas não podemos utilizar vários deles, por esse motivo temos que checar se já apertamos a tecla, mas antes disso vamos fazer um check para saber qual tecla estamos pressionando. Para isso, tenho o mapeamento das teclas:

```jsx
<html>
    <body>
        <script>
            const notes = { 'C3': 130.81,
                'C#3': 138.59,
                'D3': 146.83,
                'D#3': 155.56,
                'E3': 164.81,
                'F3': 174.61,
                'F#3': 185.00,
                'G3': 196.00,
                'G#3': 207.65,
                'A3': 220.00,
                'A#3': 233.08,
                'B3': 246.94,
                'C4': 261.63,
                'C#4': 277.18,
                'D4': 293.66,
                'D#4': 311.13,
                'E4': 329.63,
                'F4': 349.23,
                'F#4': 369.99,
                'G4': 392.00,
                'G#4': 415.30,
                'A4': 440.00,
                'A#4': 466.16,
                'B4': 493.88,
                'C5': 523.25,
                'C#5': 554.37,
                'D5': 587.33,
                'D#5': 622.25,
                'E5': 659.25,
                'F5': 698.46,
                'F#5': 739.99,
                'G5': 783.99,
                'G#5': 830.61,
                'A5': 880.00,
                'A#5': 932.33,
                'B5': 987.77
            }
            const map = {
                65 = 'C3',
                83 = 'D3',
                68 = 'E3',
                70 = 'F3',
                71 = 'G3',
                72 = 'A3',
                74 = 'B3'
            }
            const context = new (window.AudioContext || window.webkitAudioContext)()
            function onKeyDown(key){
                if(key.keyCode in map){
                    const osc = constext.createOscillator()
                    osc.type = 'sine'
                    osc.frequency.value = notes[map[key.keyCode]]
                    osc.connect(contexto.destination)
                    osc.start()
                    osc.stop(contexto.currentTime+2)
                }
            }
            function onKeyUp(key){
                console.log(key)
            }
            window.onkeydown = onKeyDown
            window.onkeyup = onKeyUp
        </script>
    </body>
</html>
```

Dessa maneira fica mais interessante, pois conseguimos recapear caso quisermos. Além disso, posso guardar uma lista de osciladores para dar um stop. Dessa maneira, quando apertarmos a tecla, ele se inicia, e quando eu solto, ele para:

```jsx
const mapOsc = {}
function onKeyDown(key) {
  if (map[key.keyCode] && !mapOsc[key.keyCode]) {
    const osc = constext.createOscillator()
    osc.type = 'sine'
    osc.frequency.value = notes[map[key.keyCode]]
    osc.connect(contexto.destination)
    osc.start()
    mapOsc[key.keyCode] = osc
  }
}
function onKeyUp(key) {
  if (key.keyCode in mapOsc) {
    const osc = mapOsc[key.keyCode]
    osc.stop(0)
    mapOsc[key.keyCode] = undefined
  }
}
```

Assim temos um teclado bem interessante. Além disso, utilizando a tabela de notas, podemos colocar, por exemplo, os sustenidos. Caso você queira treinar, pode transformar isso em forma visual utilizando uma imagem de teclas de piano e quando você clicar em cada uma delas, é gerado os áudios.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/lKuFqfkVZy0" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Técnica para eliminar o que não te faz alcançar seus objetivos

Source: blog/tecnica-para-alcancar-seus-objetivos/index.md

Hoje eu gostaria de compartilhar uma dica bem rápida, basicamente de como você pode, de uma maneira bem fácil, evoluir na sua vida, seja ela financeira, organização ou saúde e alcançar seus objetivos.

Eu venho fazendo isso há algum tempo, mas não tinha racionalizado sobre esse processo. É algo muito simples: vamos supor que você trabalha como freelancer e quer melhorar sua parte financeira, então você vai organizar isso como projeto 1, projeto 2, empresa 1, empresa 2, horas gastas e quanto isso vai dar de retorno financeiro. Feito isso, você vai ordenar do que te dá mais lucro para o que dá menos lucro.

O passo primordial é que depois de ordenado, você vai pegar 20% dessas atividades que não te dão o resultado que você quer e vai cortar da lista para abrir espaço na sua agenda para que coisas novas e melhores possam acontecer.

Eu venho fazendo isso de forma irracional há mais ou menos 8 meses, o resultado é muito bom. Além disso, podemos usar como exemplo para complementar essa ideia, a dica sobre falar NÃO quando necessário. Por exemplo, um projeto que pague bem, mas não te dá lucro é puro risco, imagine um projeto que te pague R$10mil por mês e você tem que contratar uma pessoa, pagar gastos e no final esse projeto te gera 500 reais de lucro... Ele te dá prejuízo pelo fato do lucro ser pequeno e o risco ser grande.

Hoje em dia, temos que escolher como queremos viver, escolher o que queremos fazer, o que dá mais resultado, e pessoas que nos agregam coisas boas. Pessoas tóxicas sugam a nossa energia, comece a listar esse tipo de pessoa e corte da sua vida também.

Você vai perceber que isso faz muito sentido. Novamente, eu venho fazendo isso de forma consistente e o resultado é incrível. Coisas que eu não pensava que eu ia fazer agora eu estou fazendo como por exemplo pedir para sair de projeto por estar me dando muito estresse ou financeiramente inviável.

Uma coisa interessante, fazendo isso, ou vai entrar coisas melhores na sua vida ou você foca na lista menor, afinal os projetos que ficaram vão ter mais energia.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/V3-0JCN99ek" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal ](https://www.youtube.com/devplenocom)e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!


---

# ES6 - Template Strings

Source: blog/template-strings/index.md

Como já citei em outros posts, (como em: [ES6 Spread Operator](https://www.devpleno.com/spread-operator/), [Async/await](https://devpleno.com/async-await), [Destructuring Assignment](https://devpleno.com/dica-es6-destructuring-assignament)) o ES6 apresenta algumas novidades, uma delas é o Template Strings, uma forma de declarar uma string em JavaScript.

```javascript
const str1 = `teste`
console.log(str1)
```

Ela será o mesmo que se fizermos uma String convencional, porém podemos fazer algumas coisas extras. Exemplo: Se eu quisesse uma String multilinha, teria que fazer o seguinte:

```javascript
const str1 = `teste`
const strMultiLinha = 'linha1 \n linha2'
console.log(strMultiLinha)
```

Ou seja, teria que utilizar o contra barra (ou scape) em todas as linhas, o que é um tanto chato.

#### O que pode ser feito?

Com o Template String é possível fazer simplesmente isso:

```javascript
const strMultiLinha = `linha1
linha meio
linha2`
console.log(strMultiLinha)
```

Não é mais necessário utilizar o \\n, isso deixa o código mais limpo. Outra coisa do Template String é que podemos criar uma string interpolada, ou seja, misturar uma expressão com a string que vai ser avaliada e depois colocar ela entre pólos, ao invés de concatenar. Fazemos isso apenas abrindo um `\$ {expressão}`, por exemplo:

```javascript
const str = `Ola \$ {1 + 1} !`
console.log(str)
```

Obviamente também podemos colocar variáveis dentro:

```javascript
const a = 10
const str = `Ola \$ {a + 1} !`
console.log(str)
```

Existe ainda uma outra funcionalidade interessante: utilizar algumas tags com o Template String. Exemplo: Vamos criar uma tag e ela vai receber strings e values.

```javascript
function tag(strings, ...values) {
  console.log(strings, values)
  return 'opa'
}
const str = tag`Olá \$ {10} mundo!`
```

Perceba que a strings vai ter olá e mundo e o value terá o 10. Ele está entre as strings, por isso o nome interpolação. Com isso podemos criar uma tag em HTML sem grandes problemas. Uma última coisa que conseguimos fazer é checar o valor raw das variáveis apenas adicionando:

```javascript
console.log(strings.raw[0])
```

Estamos pegando o raw da posição zero neste exemplo. Quando colocamos o raw, ele mostra exatamente como foi definido, então se você colocar um \\n, será mostrado realmente o raw disso, o \\n.

Confira o vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Ooqm6jUCD6E" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Tenha cicatrizes

Source: blog/tenha-cicatrizes/index.md

Na dica de carreira de hoje, eu quero explicar porque é tão bom e útil pra gente ter 'cicatrizes de guerra', obviamente não na forma literal :)

Essa é uma expressão que eu ouvi em um evento e que faz total sentido.

O que significa ter cicatrizes?

É você ter se permitido cometer um erro ou ter ido para o 'campo de batalha', afinal só quem conhece o campo sabe como ele é. Você deve ter percebido que em quase todas as vezes que falo sobre carreira, eu digo que só conheço e sei construir algo com determinada tecnologia quando eu coloco em produção, porque aquilo vai me deixar cicatrizes.

Arrisque colocar em produção, dar um passo a mais além da sua zona de descanso, nem que gere algum probleminha, afinal nada pode ficar 100%. Por exemplo, ao construir um projeto tente colocar 1% a mais do que você está acostumado para que realmente tenha um pouco mais de dificuldade, assim esse projeto te dará uma cicatriz, isso vai te deixar mais calejado.

Quando mais você passa por essas situações, mais você vai se transformar em um profissional melhor, isso é muito importante para nossa carreira. Invente maneiras novas de fazer algo, tanto para te motivar quanto para aprender. Lembrando que é no erro que nós aprendemos. Um desenvolvedor pleno tem que ter essa visão de que percorrer caminhos difíceis é o que vai fazer ele se transformar em um desenvolvedor melhor, mais preparado e mais calejado. Se você conseguir construir um sistema que mil pessoas utilizam, aquilo te da uma força para saber que você pode construir um de dez mil.

Essas cicatrizes que marcam sua carreira é o que vai fazer você crescer cada vez mais. Sempre levar cicatrizes para que você realmente evolua na sua carreira. Eu ouvi isso em um processo seletivo onde disseram que precisam de gente que tem cicatrizes, ou seja, tenham passado por esses problemas, virado madrugada, batido no teto da zona de conforto e teve que se destacar de alguma maneira.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/4BNMXpyKFVg" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Termos de uso

Source: blog/termos-de-uso/index.md

Estes termos de serviço regulam o uso deste site. Ao acessá-lo você concorda com estes termos. Por favor, consulte regularmente os nossos termos de serviço.

O website DevPleno (gerenciado e mantido por We Dev Ideas – Eirelli – ME) é um serviço interativo oferecido em por meio de página eletrônica na internet que oferece informações sobre negócios, cultura, etc, e serviços relacionados a desenvolvedores a partir da integração de diversas fontes de informação. O acesso ao DevPleno representa a aceitação expressa e irrestrita dos termos de uso abaixo descritos. Se você não concorda com os termos, por favor, não acesse nem utilize este website.  
O visitante poderá usar este site apenas para finalidades lícitas. Este espaço não poderá ser utilizado para para publicar, enviar, distribuir ou divulgar conteúdos ou informação de caráter difamatório, obsceno ou ilícito, inclusive informações de propriedade exclusiva pertencentes a outras pessoas ou empresas, bem como marcas registradas ou informações protegidas por direitos autorais, sem a expressa autorização do detentor desses direitos. Ainda, o visitante não poderá usar o site DevPleno para obter ou divulgar informações pessoais, inclusive endereços na Internet, sobre os usuários do site.

O DevPleno empenha-se em manter a qualidade, atualidade e autenticidade das informações do site, mas seus criadores e colaboradores não se responsabilizam por eventuais falhas nos serviços ou inexatidão das informações oferecidas. O usuário não deve ter como pressuposto que tais serviços e informações são isentos de erros ou serão adequados aos seus objetivos particulares. Os criadores e colaboradores tampouco assumem o compromisso de atualizar as informações, e reservam-se o direito de alterar as condições de uso ou preços dos serviços e produtos oferecidos no site a qualquer momento.

O acesso ao site DevPleno é gratuito. O DevPleno poderá criar áreas de acesso exclusivo aos seus clientes ou para terceiros especialmente autorizados.

Os criadores e colaboradores do DevPleno poderão a seu exclusivo critério e em qualquer tempo, modificar ou desativar o site, bem como limitar, cancelar ou suspender seu uso ou o acesso. Também estes Termos de Uso poderão ser alterados a qualquer tempo. Visite regularmente esta página e consulte os Termos então vigentes. Algumas disposições destes Termos podem ser substituídas por termos ou avisos legais expressos localizados em determinadas páginas deste site.

### Erros e falhas

Os documentos, informações, imagens e gráficos publicados neste site podem conter imprecisões técnicas ou erros tipográficos. Em nenhuma hipótese o DevPleno e/ou seus respectivos fornecedores serão responsáveis por qualquer dano direto ou indireto decorrente da impossibilidade de uso, perda de dados ou lucros, resultante do acesso e desempenho do site, dos serviços oferecidos ou de informações disponíveis neste site. O acesso aos serviços, materiais, informações e facilidades contidas neste website não garante a sua qualidade.

### Limitação da responsabilidade

Os materiais são fornecidos neste website sem nenhuma garantia explícita ou implícita de comercialização ou adequação a qualquer objetivo específico. Em nenhum caso o DevPleno ou os seus colaboradores serão responsabilizados por quaisquer danos, incluindo lucros cessantes, interrupção de negócio, ou perda de informação que resultem do uso ou da incapacidade de usar os materiais. O DevPleno não garante a precisão ou integridade das informações, textos, gráficos, links e outros itens dos materiais.  
ODevPleno não se responsabiliza pelo conteúdo dos artigos e informações aqui publicadas, uma vez que os textos são de autoria de terceiros e não traduzem, necessariamente, a opinião do website.  
O DevPleno tampouco é responsável pela violação de direitos autorais decorrente de informações, documentos e materiais publicados neste website, comprometendo-se a retirá-los do ar assim que notificado da infração.

### Informações enviadas pelos usuários e colaboradores

Qualquer material, informação, artigos ou outras comunicações que forem transmitidas, enviadas ou publicadas neste site serão considerados informação não confidencial, e qualquer violação aos direitos dos seus criadores não será de responsabilidade do DevPleno. É terminantemente proibido transmitir, trocar ou publicar, através deste website, qualquer material de cunho obsceno, difamatório ou ilegal, bem como textos ou criações de terceiros sem a autorização do autor. O DevPleno reserva-se o direito de restringir o acesso às informações enviadas por terceiros aos seus usuários.  
O DevPleno poderá, mas não é obrigado, a monitorar, revistar e restringir o acesso a qualquer área no site onde usuários transmitem e trocam informações entre si, incluindo, mas não limitado a, salas de chat, centro de mensagens ou outros fóruns de debates, podendo retirar do ar ou retirar o acesso a qualquer destas informações ou comunicações. Porém, o DevPleno não é responsável pelo conteúdo de qualquer uma das informações trocadas entre os usuários, sejam elas lícitas ou ilícitas.

### Links para sites de terceiros

Os sites apontados não estão sob o controle do DevPleno que não é responsável pelo conteúdo de qualquer outro website indicado ou acessado por meio do DevPleno reserva-se o direito de eliminar qualquer link ou direcionamento a outros sites ou serviços a qualquer momento. O DevPleno não endossa firmas ou produtos indicados, acessados ou divulgados através deste website, tampouco pelos anúncios aqui publicados, reservando-se o direito de publicar este alerta em suas páginas eletrônicas sempre que considerar necessário.

### Direitos autorais e propriedade intelectual

Os documentos, conteúdos e criações contidos neste website pertencem aos seus criadores e colaboradores. A autoria dos conteúdo, material e imagens exibidos no DevPleno é protegida por leis nacionais e internacionais. Não podem ser copiados, reproduzidos, modificados, publicados, atualizados, postados, transmitidos ou distribuídos de qualquer maneira sem autorização prévia e por escrito do DevPleno.  
As imagens contidas neste website são aqui incorporadas apenas para fins de visualização, e, salvo autorização expressa por escrito, não podem ser gravadas ou baixadas via download. A reprodução ou armazenamento de materiais recuperados a partir deste serviço sujeitará os infratores às penas da lei.  
O nome do site DevPleno seu logotipo, o nome de domínio para acesso na Internet, bem como todos os elementos característicos da tecnologia desenvolvida e aqui apresentada, sob a forma da articulação de bases de dados, constituem marcas registradas e propriedades intelectuais privadas e todos os direitos decorrentes de seu registro são assegurados por lei. Alguns direitos de uso podem ser cedidos por DevPleno em contrato ou licença especial, que pode ser cancelada a qualquer momento se não cumpridos os seus termos.  
As marcas registradas do DevPleno só podem ser usadas publicamente com autorização expressa. O uso destas marcas registradas em publicidade e promoção de produtos deve ser adequadamente informado.

### Reclamações sobre violação de direitos autorais

O DevPleno respeita a propriedade intelectual de outras pessoas ou empresas e solicitamos aos nossos membros que façam o mesmo. Toda e qualquer violação de direitos autorais deverá ser notificada ao DevPleno e acompanhada dos documentos e informações que confirmam a autoria. A notificação poderá ser enviada pelos e-mails constantes do site ou via postal para o endereço do site.

### Leis aplicáveis

Este site é controlado e operado pela We Dev Ideas – Eirelli – ME a partir de seu escritório no endereço Rua Maria das Dores, 49 – Esplanada, Pouso Alegre, MG e não garante que o conteúdo ou materiais estejam disponíveis para uso em outras localidades. Seu acesso é proibido em territórios onde o conteúdo seja considerado ilegal. Aqueles que optarem por acessar este site a partir de outras localidades o farão por iniciativa própria e serão responsáveis pelo cumprimento das leis locais aplicáveis. Os materiais não deverão ser usados ou exportados em descumprimento das leis brasileiras sobre exportação. Qualquer pendência com relação aos materiais será dirimida pelas leis brasileiras.  
O acesso ao DevPleno representa a aceitação expressa e irrestrita dos termos de uso acima descritos.


---

# Tomar decisões

Source: blog/tomar-decisoes/index.md

Você costuma tomar decisões necessárias ou espera ter tudo na sua mão?

Independente se você está em um cargo de liderança ou se é liderado, é muito importante tomar algumas decisões, nem que sejam microdecisões.

Se você for um liderado, precisa ajudar o seu líder, mesmo que sejam microdecisões. Estudar as alternativas e explicar o porquê delas serem as melhores para sua equipe facilita para seu líder tomar a decisão correta.

Na minha empresa, somos o braço direito em algumas outras empresas, ajudamos a desenrolar essa parte tecnológica, então elas acham que qualquer decisão que envolvam um software depende da gente, com isso a empresa inteira fica enroscada porque as pessoas não querem tomar decisão, tem medo ou algo do tipo. A postura que eu acredito que funcione mais é se a decisão está no seu ambiente, se você sabe resolver, tem a informação para resolver e consigue fazer, por que não faz?

Às vezes é algo muito simples, mas as pessoas complicam, com isso a produtividade da empresa como um todo vai para baixo.

Para uma empresa mais produtiva, as pessoas têm que assumir mais esses riscos. Quando você é liderado, assuma mais riscos, não precisa ser inconsequente, mas comece a tomar decisões.

Quanto mais decisões você tomar, mais treinado você vai estar para tomar decisões. Já se você é o líder, existe a contrapartida, às vezes você concentra em você e não quer que sua equipe tome decisões porque você tem medo de algo dar errado e você ser o responsável, aí vem a outra dica: você tem que treinar sua equipe a tomar decisões também, ajudar você a organizar isso, porque se concentrar tudo em você, vai ser o cara que vai atrasar a equipe, afinal vai ser tanta decisão para se tomar que as microdecisões, que as pessoas poderiam tomar, não vão ser feitas porque você não deixa.

Um exemplo interessante: prestavamos consultoria para um cliente, e teve um dia em que chegamos lá para conversar sobre outro assunto e uma das sócias estava extremamente estressada, perguntamos o que estava acontecendo e ela respondeu "esses funcionários não resolvem nada. Pra comprar um café eles tem que me pedir dinheiro!" Então perguntamos porque eles tinham que pedir a ela. Ela respondeu que era porque eles não tinham acesso ao dinheiro. Ou seja, ela não deixava os funcionários tomarem decisão, por mais que eles quisessem tomar. A sugestão que demos foi deixar uma caixa com o dinheiro, avisar para quando precisar de dinheiro para comprar algo para a empresa pegue lá e devolva a nota na caixa com o nome da pessoa que comprou. Uma coisa simples que desenrola tudo.

Então, caso você seja subordinado, comece a tomar decisões menores, em que o impacto não atrapalhe e a medida que você vai acostumando com isso, comece a ajudar seu líder a tomar decisões, isso vai gerar uma produtividade muito grande para sua equipe.

Já se você é um líder, dê poder às pessoas da sua equipe para que elas te ajudem, caso a decisão seja um pouco mais de risco deixe claro que você tem que estar envolvido ou peçam para a equipe manter você informado.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/0xSnZSKiAu4" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# O que é a Toptal? | Série Trabalho Remoto

Source: blog/toptal-serietrabalhoremoto/index.md

Você já conhece a Toptal? Entenda o papel desta empresa que é uma das principais referências quando falamos em trabalho remoto.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/xQ-K4MdagmQ" allowfullscreen></iframe>
</div>

Atualmente o ReactJS é uma das tecnologias que mais estão em alta. Os profissionais que dominam essa biblioteca vêm sendo cada vez mais valorizados pelas pequenas e grandes empresas (incluindo a Toptal), porém esses profissionais ainda estão em falta no mercado. Aproveite para surfar a crista da onda e conquistar as melhores vagas de emprego. Conheça o DevReactJS, nosso treinamento premium que vai te fazer entregar aplicações completas e profissionais em ReactJS EM APENAS 45 DIAS. Saiba mais [sobre o DevReactJS aqui.](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)

[![Curso DevReactJS](DevReactCurso.png)](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)


---

# Trabalhar como freelancer: 7 sites para conseguir jobs como programador

Source: blog/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador/index.md

> Conheça 7 plataformas para encontrar trabalho como programador freelancer, incluindo Toptal, Upwork e 99Freelas. Dicas para come��ar.

A demanda por programadores freelancers nunca foi tão alta. Com o crescimento do trabalho remoto nos últimos anos, cada vez mais empresas ao redor do mundo contratam desenvolvedores de qualquer lugar — e o Brasil tem se destacado como um dos maiores exportadores de talento tech.

Trabalhar como freelancer oferece vantagens reais: você monta seus próprios horários, pratica inglês no dia a dia, ganha em moeda forte e constrói uma [carreira](https://www.devpleno.com/carreira-tomar-decisoes) com experiência internacional. E o melhor: você não precisa ser sênior para começar.

> Se você já trabalha ou pretende trabalhar para empresas do exterior, precisa legalizar seus recebimentos no Brasil. A [Conta49](https://www.conta49.com.br) é uma contabilidade especializada em programadores que atuam remotamente para o exterior. Eles entendem as particularidades de receber em dólar, abrir PJ para tech e lidar com a tributação de serviços exportados. Acesse [www.conta49.com.br](https://www.conta49.com.br) e conheça os serviços.

Reuni 7 plataformas onde você pode encontrar trabalhos freelance como programador — desde opções para quem está começando até redes que pagam em dólar para os mais experientes.

### 1. Toptal

A [Toptal](https://www.toptal.com) é uma rede que seleciona apenas os top 3% dos freelancers do mundo por meio de um processo seletivo rigoroso. Eu trabalho por meio da Toptal e posso dizer que, uma vez aprovado, você tem acesso a projetos de grandes empresas e multinacionais, com pagamento em dólar.

Os projetos variam entre tempo integral, meio período e por hora. A grande vantagem é a qualidade dos clientes e a estabilidade — muitos contratos duram meses ou anos. O processo seletivo é puxado (envolve entrevista técnica, live coding e projeto teste), mas compensa pelo nível dos projetos e da remuneração.

**Ideal para:** devs com experiência sólida que querem projetos de alto nível pagos em dólar.

### 2. Upwork

O [Upwork](https://www.upwork.com) é a maior plataforma de freelance do mundo. Você cria um perfil, anexa seu portfólio e se candidata a projetos de clientes internacionais. Há trabalhos pagos por hora e por projeto, em áreas como JavaScript, Python, React, Node.js, mobile e muito mais.

A plataforma funciona com um sistema de propostas — você encontra um projeto, envia sua oferta com preço e prazo, e o cliente escolhe. Conforme você acumula avaliações positivas, fica mais fácil conseguir projetos melhores. O pagamento é em dólar.

**Ideal para:** qualquer nível de experiência, especialmente quem quer começar a trabalhar para o exterior.

### 3. Freelancer.com

O [Freelancer.com](https://www.br.freelancer.com) é um dos maiores marketplaces do mundo, com milhões de usuários. A plataforma oferece projetos em diversas áreas — programação, desenvolvimento de apps, HTML, processamento de dados e mais.

Você se cadastra, participa de testes que certificam suas habilidades e se candidata aos projetos disponíveis. Há também categorias de concursos e programas de freelancer preferencial com comissões menores.

**Ideal para:** quem está começando e quer construir um portfólio com projetos variados.

### 4. Workana

O [Workana](https://www.workana.com/pt) tem foco na América Latina e oferece milhares de projetos, desde desenvolvimento web e mobile até tradução e design. Uma vez cadastrado, você pesquisa projetos que se encaixam nas suas habilidades, compara os que pagam por hora vs. preço fixo, e envia propostas.

A plataforma é bastante usada no Brasil e em toda a América Latina, o que facilita a comunicação — muitos projetos são em português ou espanhol.

**Ideal para:** devs que preferem projetos em português/espanhol e querem começar no mercado freelancer latino-americano.

### 5. 99Freelas

O [99Freelas](https://www.99freelas.com.br) é uma plataforma brasileira com mais de 3 milhões de freelancers cadastrados e mais de 138 mil projetos realizados. Os projetos abrangem TI, design, marketing e mais.

Você se cadastra, completa seu perfil e se candidata aos projetos disponíveis. A cada tarefa concluída, recebe avaliações que aumentam sua visibilidade. O pagamento é intermediado pela plataforma, o que dá mais segurança para ambas as partes.

**Ideal para:** quem quer começar com projetos nacionais em português, sem a barreira do idioma.

### 6. Scalable Path

O [Scalable Path](https://www.scalablepath.com) funciona de forma diferente dos marketplaces tradicionais. A própria equipe da plataforma faz testes e entrevistas com você, e depois conecta com clientes internacionais que procuram habilidades específicas — como desenvolvimento iOS, Android, React, PHP ou Node.js.

Isso significa que você não precisa ficar buscando projetos ativamente. Uma vez aprovado, eles fazem o match com empresas que precisam do seu perfil. Os projetos são internacionais e pagos em dólar.

**Ideal para:** devs com experiência que preferem ser selecionados em vez de competir em leilões.

### 7. Trampos.co

O [Trampos.co](https://trampos.co) é uma plataforma brasileira com mais de 1,2 milhão de profissionais cadastrados. Não é exclusivamente para freelancers — também lista vagas CLT, PJ e estágio — mas tem uma boa oferta de trabalho remoto para desenvolvedores.

Você pesquisa vagas por cidade, área (programação, criação, marketing) e tipo de contrato. O cadastro é gratuito para profissionais, e a plataforma também oferece conteúdo educacional pelo Trampos Academy.

**Ideal para:** quem busca tanto freelance quanto vagas fixas remotas no mercado brasileiro.

### Como escolher a plataforma certa?

Não existe uma resposta única. Minha recomendação:

- **Está começando?** Comece pelo 99Freelas ou Workana para construir reputação sem a barreira do idioma.
- **Tem inglês intermediário?** Crie perfil no Upwork e no Freelancer.com para acessar o mercado internacional.
- **Tem experiência sólida?** Invista no processo seletivo da Toptal ou Scalable Path — os projetos e a remuneração compensam.
- **Quer diversificar?** Mantenha perfis em 2-3 plataformas e veja onde consegue mais tração.

O mais importante é começar. Não espere estar "pronto" — muitos freelancers de sucesso começaram com projetos simples e foram evoluindo conforme ganhavam experiência e avaliações positivas.

Aproveite para [saber mais sobre trabalho remoto](https://www.youtube.com/watch?v=37Jxj1DhSjg) e o que é necessário para trabalhar para empresas nacionais e internacionais!


---

# Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão!

Source: blog/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao/index.md

Todo profissional já deve ter se perguntado as reais vantagens de se trabalhar em uma grande empresa ou de se criar um negócio próprio. E isso não é diferente para os programadores. A possibilidade de fazer seu próprio horário e de não possuir um chefe cobrando prazos se revela bem atrativa. Por outro lado, abrir uma empresa é também correr riscos e ter de assumir responsabilidades compatíveis com essa escolha.

Na verdade, não existe um caminho certo. Ao optar em seguir por um ou por outro, você deve ter em mente, em primeiro lugar, qual é o seu perfil. Não dá pra decidir isso baseado no amigo que fez algo que deu muito certo e por isso vai dar para você também. Quando vemos de fora, o caminho pode parecer mais fácil do que realmente é.

Antes que desperdice tempo, dinheiro e energia, separamos algumas perguntas para ajudar você a pensar melhor em qual tipo de escolha se encaixaria melhor para os seus objetivos. Confira!

**Como você administra suas tarefas?**

No momento de realizar tarefas você prefere fazê-las com antecedência ou espera até o prazo final de entrega? Todo grande empreendedor é um curioso e, principalmente, um realizador. Por isso, no momento de pensar em abrir uma empresa, é importante ter essa postura.

Se você considera que se encaixa mais no perfil de procrastinador, tente analisar se possui [pensamentos limitantes](https://www.devpleno.com/pensamentos-limitantes?utm_source=blog&utm_campaign=rc_blogpost). Existe uma palavra muito comum no mundo do empreendedorismo chamada _mindset_, que significa "modelos mentais".

Desde que nascemos, estamos acostumados com certos modelos mentais, que nos são passados pela família e pela cultura em geral. Apenas uma pessoa "inquieta" consegue ultrapassar os limites desses modelos e realizar uma verdadeira mudança de _mindset_. É por meio dessa consciência que a inovação se torna possível e, consequentemente, os grandes feitos.

Então, você prefere a comodidade de receber e executar tarefas ou o desafio de buscar mudanças de pensamento que podem trazer grandes impactos para as pessoas e para a sociedade?

**Você se sente capaz de definir metas e atingi-las?**

Na vida empreendedora, é muito importante que exista [comprometimento com as metas](https://www.devpleno.com/comprometimento-com-suas-metas?utm_source=blog&utm_campaign=rc_blogpost). Como citado, o ato de realizar é o que diferencia um empreendedor de um criador. De pouco vale ser muito criativo, mas viver cheio de ideias dentro da sua mente. Isso não vai criar algo realmente transformador.

Portanto, saber definir objetivos acaba tendo um papel fundamental. Onde você quer chegar? Como pretende alcançar isso e em quanto tempo? Trabalhando dentro de uma empresa você estará cumprindo metas de outras pessoas, e não as suas.

Se você quer ser o dono de suas metas, deve responder também pelo planejamento, comercialização e fiscalização do andamento de todos os processos de seu negócio. Nesse caso, a medida do sucesso é saber não só criar um plano de ação eficaz, como executá-lo da melhor forma a partir dos recursos disponíveis.

**Você se considera uma pessoa disciplinada?**

Um empreendedor está sempre atarefado com muitas coisas, realizando e gerenciando várias atividades ao mesmo tempo, sem que ninguém peça para que ele faça isso. Ele sabe a verdadeira importância de realizá-las. Diferente de um colaborador que, basicamente, deve cumprir tarefas e uma quantidade de horas de trabalho indicadas por um gerente.

Um grande passo para a auto-disciplina é [aprender a aprender.](https://www.devpleno.com/aprenda-a-aprender?utm_source=blog&utm_campaign=rc_blogpost) Encontre o jeito que você absorve os conhecimentos de forma mais eficaz e se apaixone por isso. Aprender é sempre muito gratificante**.** Portanto, saber o que realmente mobiliza você e desperta o seu interesse pode ser o ponto crucial para uma mudança de comportamento.

Adquirir disciplina é uma questão de prática. Reflita melhor sobre as coisas que fazem você vibrar e aprenda a realizá-las da melhor forma, a partir do seu jeito. Não existem caminhos certos na vida empreendedora: existem ferramentas que auxiliam. O modo como você vai aplicá-las pode ser único e até então impensado, e essa é a maior graça disso tudo.

**Como é a sua relação com o dinheiro?**

Esse é um dos pontos muito importantes nessa história. Muito do que falamos até agora pode ser uma questão apenas de mudança de comportamento. Porém, como diria o velho ditado "é pelo bolso que se pega o sujeito".

Você seria capaz de injetar seu dinheiro em um projeto**,** sem garantias alguma de que dará certo? E mais: sendo você o maior responsável por fazer tudo acontecer? Um funcionário de uma empresa prefere ter o salário dele garantido ao final do mês, a ter que arriscar perder tudo. Por isso, muitas vezes, os empreendedores são chamados de "loucos".

Um ponto importante em se abrir uma empresa é estar preparado para os altos e baixos financeiros, principalmente no início. Se você não se considera apto para isso, também pode buscar ajuda de profissionais ou ir atrás de maior conhecimento sobre gestão de dinheiro e de negócios.

**Como medir o sucesso?**

Um funcionário de uma grande companhia recebe orientações sobre medidas de sucesso e formas de recompensa para os que melhor colaborarem. Por exemplo: prêmios, bonificação salarial, reconhecimentos etc.

Quando se é empresário, essas medidas já são estabelecidas e internalizadas no momento que se escolhe o próprio padrão de excelência. Muitas vezes, a depender do objetivo, não é somente o dinheiro o que importa, mas pode ser fortalecimento da marca, reconhecimento e/ou feedbacks espontâneos.

**Quanto vale o seu trabalho?**

Um conceito muito importante no momento de fazer um negócio decolar é o de [Valuation](https://endeavor.org.br/valuation-como-calcular-o-valor-da-sua-empresa?utm_source=blog&utm_campaign=rc_blogpost) (Valor). A partir dele, é possível calcular quanto vale o seu trabalho, se você for o empreendedor. Se você for o funcionário, esse valor já vem preestabelecido no momento da contratação.

Essa questão é um pouco subjetiva, mas o que deve ter em mente é que quanto mais valoriza o que faz, mais as pessoas veem isso e estão dispostas a pagar pelo preço que você considera justo.

Trabalhar a preços irrisórios só para conseguir clientes é, muitas vezes, um tiro no pé. Você se sente explorado e desmotivado no desempenho de suas funções, pois sabe que vale mais e o cliente pode exigir muito mais por isso. Dessa forma, é muito importante [aprender a dizer não](https://www.devpleno.com/aprenda-a-dizer-nao?utm_source=blog&utm_campaign=rc_blogpost) e buscar as condições que condizem com sua real capacidade.

A partir desses questionamentos, certamente, você vai conseguir entender melhor se a decisão de abrir uma empresa é realmente a melhor para sua vida!

Por falar em empreendedorismo, você pode gostar destes nossos 2 vídeos:

- [3 dicas para empreender em software](https://www.youtube.com/watch?v=A5RgxkpJIrA&utm_source=blog&utm_campaign=rc_blogpost)
- [Como negociar software (ou qualquer outra coisa)](https://www.youtube.com/watch?v=FszhDTUw2E0&utm_source=blog&utm_campaign=rc_blogpost)

Se você gostou do conteúdo e deseja estar sempre atualizado com dicas e cursos para empreender como programador, [curta a nossa página no Facebook](https://www.facebook.com/devpleno?utm_source=blog&utm_campaign=rc_blogpost) e não fique de fora das novidades!


---

# Tudo na vida acontece duas vezes!

Source: blog/tudo-acontece-duas-vezes/index.md

Você sabia que tudo que você pensa acontece duas vezes? Uma vez na sua cabeça e outra vez quando você implementa ou realiza isso de fato. Isso acontece com tudo, desde o código que você está programando até um projeto que está implementando.

O detalhe é que toda vez que você for pensar em projetos ou qualquer outra coisa que queira realizar, pense com um máximo de detalhes, sentimentos e sensações que você puder. Por exemplo, se você sonha em ter sua startup de tecnologia, sonhe com você acordando cedo, trocando de roupa empolgado e entrando nela, sentindo o cheiro do ambiente... Quando mais dessas sensações você conseguir sentir, mais vai estar preparado na hora de implementar.

Os pensamentos limitantes são o contrário de você pensar duas vezes, porque você usa esse poder da mente no modo negativo, ou simplesmente não usa. Quando começamos a visualizar as coisas positivas, estamos realmente usando ela para alcançar coisas novas.

Vamos supor que você quer comprar um carro novo, imagine você dirigindo o carro, sentindo o cheiro dele… Você vai perceber que vai ficar mais próximo de comprar um carro novo do que se você só estivesse vendo uma foto de revista, por exemplo. Então faça isso irá perceber que vai prosperar muito na carreira.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/MUqyTezv0ts" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Descrição das vagas de emprego no Brasil x no exterior

Source: blog/vagas-de-emprego-no-brasil-e-no-exterior/index.md

Hoje quero comentar um e-mail que recebi e achei bastante relevante falar sobre, principalmente quando estamos olhando para o mercado de desenvolvedor web.

A pergunta no e-mail era a seguinte: Em vagas de empregos no exterior para desenvolvedor fullstack, existem informações bem pontuais, ou seja, exatamente o que os profissionais precisam saber.

Em contrapartida, as vagas no Brasil exigem tudo e não pagam nada. Por quê? Eu acredito que no Brasil o pessoal ainda não está acostumado a contratar pessoas de tecnologia, geralmente são empresas de RH que não tem a ideia do perfil que eles vão procurar.

Como eles procuram de forma abrangente, não é filtrado o que a pessoa precisa saber. À medida que começarmos a ter mais empresas de RH conhecendo a área, melhor vai ficar a contratação.

No exterior isso já é muito comum, quem contrata engenheiros ou desenvolvedores de softwares são outros engenheiros ou desenvolvedores, não mais pessoas somente do RH, por esse motivo há essa diferença.

O que eu fiz para contratar meus funcionários?

Um deles aconteceu dele conversar comigo e eu estar precisando, como já o conhecia, acabei contratando. O outro eu coloquei na descrição da vaga que precisava de pessoas que trabalhem com JavaScript e tivessem vontade de desenvolver nessa área, simplesmente isso.

Isso vai muito da preparação da pessoa que está recrutando, muitas vezes a pessoa não sabe o que quer ou esperar de habilidade desse profissional. Para mim não era importante o JavaScript, eu coloquei para eu ter um norte, já que precisava de alguém que tivesse vontade de aprender e foi o que aconteceu.

Na Toptal, por exemplo, todos os testes que fiz, foram feitos por engenheiros de softwares da Toptal.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/3o3bP_VOP9Y" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# Validade de um projeto/ideia/ação

Source: blog/validade/index.md

Na dica de hoje, eu quero mostrar pra você que nem sempre a gente tem que ir até o fim com as coisas, é algo que eu estou passando nesse momento e sempre repenso sobre a minha empresa, sobre as coisas que estamos fazendo e se estamos indo pelo caminho certo.

Quando você cria um projeto novo e está em uma empreitada nova, além do empenho e tudo que você precisa para executar, uma das coisas que a gente esquece de definir é quando parar, qual o prazo de validade do projeto ou do atendimento a um cliente específico.

Por exemplo, coisas que já errei na minha vida: eu já tive empresas que não defini um prazo para acabar. Se ela não conseguiu ter X de faturamento, precisava fechar as portas. Isso é muito importante para que a gente consiga alinhar se estamos indo para um caminho certo ou não.

Quando você for atender um cliente é a mesma coisa, muitas vezes um projeto começa sobre uma perspectiva e, à medida que ele vai evoluindo, você começa a mudar esse rumo. Se você não consegue chegar ao fim e bate na validade do projeto que definiu, pode ser contratual ou uma meta pessoal, principalmente se o resultado é importante para você assim como é para mim e você não está conseguindo entregar resultado, isso é um indício de que a validade com ele acabou.

Outra coisa que pode acontecer quando está atendendo um cliente é ele não ficar lucrativo. Às vezes você está gastando muito mais energia para atender esse cliente do que você está tendo de lucro, então esse projeto que está "empatando", é prejuízo. Eu considero que se você está muito próximo de ter uma margem de lucro, às vezes esse lucro não vale a pena e isso é um indício de que você precisa ou renegociar ou simplesmente expirar e não atender mais esse cliente. São pontos muito importantes que temos que definir para nosso negócio ou carreira.

Muitas pessoas dizem "mas você não quer ganhar dinheiro?, mas esquecem que tem várias contas que você tem que fazer e pensar por fora além disso. Um exemplo interessante: eu já recebi várias propostas de trabalho no exterior, muitas vezes é para receber um salário inferior ao que eu consigo gerar de resultado aqui no Brasil, então temos que ver o custo dessa oportunidade, que é a validade. Quando eu tiver uma estabilidade financeira, posso arriscar mais e ter essa nova experiência. Isso é muito importante, pois quando você chegar nesse ponto não vai ser a dor que vai fazer você tomar a decisão e sim a validade que você colocou quando estava confortável para decidir aquilo.

Quando você está fazendo sua empresa dar certo, por exemplo, se você definir a validade no momento em que você está passando aperto, não é a validade que está fazendo você tomar a decisão e sim a dor, por isso é importante fazer a validade antes que você passe por aquela situação.

Então toda vez que você for começar um projeto novo, uma empreitada nova, atender um cliente novo, qualquer coisa que dependa da sua energia, defina uma validade.

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Yujkc1YpTtE" allowfullscreen></iframe>
</div>

Deixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Vantagens da Injeção de dependência para a testabilidade do código

Source: blog/vantagens-da-injecao-de-depencia/index.md

Já havia falado por aqui sobre [injeção de dependência](https://www.devpleno.com/injecao-de-dependencia/), disse que muitas vezes não temos acesso ao que estamos testando. Desta vez, falo sobre as vantagens da injeção de dependência na testabilidade do código. Vamos criar um alert que é uma arrow function no qual eu passo um alert e uma mensagem. Lembrando que, nesse caso, o alert é a injeção de dependência, então é ele quem eu estou mandando para essa função chamar.

```jsx
const alerts = {
  alerts: (alert, message) => alert(message)
}

module.exports = alerts
```

No exemplo acima, temos um módulo que alerta o usuário. É igual o alert do browser, tanto é que chamamos o alert. Então, qual a diferença? Se eu chamasse realmente o alert do browser, ele não conseguiria rodar este teste no node, então usualmente rodamos os testes sem o browser primeiro e depois rodamos em um browser que ainda não tem tela. A ideia é conseguir testar as funcionalidades do código sem necessariamente startar um browser porque isso é muito pesado. Se fossemos utilizar essa função no browser, faríamos assim:

```jsx
const alerts = {
  alerts: (alert, message) => alert(message)
}
alerts.alert(window.alert, 'message')
module.exports = alerts
```

Mas como vamos testar sem ter um browser, eu sei que tem um window.alert, e quando for utilizar, eu vou passar este valor para ele, mas na hora do meu teste temos que importar o alertUser:

```jsx
const alertUser = require('./alert-user')
test('it calls alert', () => {
    const alertMock = jest.fn()
    alertUser.alert(alertMock, 'message')
    console.log(alertMock.mock.calls)
}
```

Perceba que criei um Mock para o alert. **O que é um Mock?** Uma função que está no nosso controle e que usamos apenas para retornar um valor. Assim é possível testar o nosso código. Temos, então, que garantir que o alert faça o que ele deveria fazer, que é passar a mensagem. Note que se passarmos o alertMock.mock.calls, sabemos exatamente que o alert foi chamado. Se quisermos deixar o código mais organizado, sem aquele aspecto de gambiarra, podemos fazer o seguinte:

```jsx
const alertUser = require('./alert-user')
test('it calls alert', () => {
    const alertMock = jest.fn()
    const msg = 'message'
    alertUser.alert(alertMock, msg)
    expect(alertMock.mock.calls [0][0]).toBe('msg')
}
```

Agora vamos supor que nosso código tem algum erro, então ele não chama o alert, apenas retorna

```jsx
const alerts = {
  alerts: (alert, message) => 1
}
module.exports = alerts
```

Perceba que ele daria um erro, pois o mock não foi chamado. Quando 'mockamos' temos um controle ainda maior dos nossos testes, sem depender de nada externo ou gambiarra de injetar no módulo. O grande detalhe é o seguinte: quando vamos chamar o alertUser no visual studio, ele já mostra o alert e qual message eu quero, assim fica muito mais claro o que precisa para ele rodar. Portanto, a vantagem de injetarmos dependência é ter essa facilidade de testar sem depender desse load dinâmico das dependências. Simplesmente mockamos a dependência que temos e nosso código vai funcionar. Além disso, fica mais fácil de ler. Confira o hands-on em vídeo:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/Yujkc1YpTtE" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!


---

# Verificando o tempo para executar um trecho de código em Javascript

Source: blog/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript/index.md

Uma tarefa que venho executando bastante nos últimos dias, principalmente por participar de alguns processos de seleção para projetos é em relação a performance de um trecho de código. Em muitas destas entrevistas, fui questionado sobre a complexidade de minha solução utilizando a notação big-o (sim, aquela que gera algo como O(n) ou O(n²) para uma dada complexidade - iremos falar mais sobre isso em outros posts). Fora do mundo acadêmico (ou destes testes), eu prefiro checar a complexidade através do tempo de execução de um trecho de código. Então, a ideia é a seguinte:

1.  salvamos a data/hora atual
2.  executamos o trecho de código
3.  pegamos a data/hora atual e subtraímos o valor encontrado no item 1.

Simples né? Vamos fazer agora em Javascritp:

```jsx
const inicio = new Date().getTime()
// trecho de código que queremos mensurar
const total = new Date().getTime() - inicio
console.log('Foi executado em: ', total)
```

O interessante é que em Javascript já temos uma maneira mais específica de fazer isso. Bastando apenas chamar console.time("nome do timer") no início, e console.endTime("nome do timer") no fim da execução. O código ficaria assim:

```jsx
console.time('TempoLoop')
// trecho de código a ser medido
console.endTime('TempoLoop')
```

O tempo de execução será exibido em milisegundos em ambos os casos. Um ponto muito importante quando estamos medindo o tempo de execução de um trecho de código é não executar console.log dentro de laços repetição ou dentro de algorítmo onde ele será executado várias vezes. O node/browser ou até mesmo a saída no console em outras linguagens é muito custosa, e vai atrapalhar seus testes, por deixar de maneira geral seu código rodando mais lentamente. Existem outras formas de fazer isso, com profiling e outras ferramentas. Mas esse será tema para outro post :) Não deixem de comentar e nos seguir em todas as redes sociais, até a próxima!

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastra seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# Você precisa ter DOM para ser um bom profissional?

Source: blog/voce-precisa-ter-dom-para-ser-um-bom-profissional/index.md

Você acredita que as pessoas realmente só aprendem se têm DOM? Neste vídeo, comento a opinião sobre este assunto e explico porque não acredito em dom. Confira!

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/KwdUislTWbA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e cadastra seu e-mail para não perder as novidades. Fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!


---

# WebAudioAPI - Gerando um som no browser

Source: blog/webaudioapi/index.md

Hoje eu quero falar um pouco sobre WebAudioAPI e como podemos gerar sons dinamicamente no browser. Vamos começar fazendo uma função que toca um som e depois vamos fazer uma variação do formato de onda. Todo som que eu quiser reproduzir aqui eu preciso de um contexto de áudio. Eu consigo trazer ele de duas formas: utilizando o áudio contexto ou nos browser de webkit, webkit audiocontext:

```jsx
<html>
  <head>
    <tittle>WebAudioAPI</tittle>
  </head>
  <body>
    <script>
      const contexto = (window.AudioContext || window.webkitAudioContext)
    </script>
  </body>
</html>
```

Agora, com o contexto pronto, precisamos criar um oscilador, que é uma forma de gerar essa onda dinâmica:

```jsx
const osc = contexto.createOscillator()
```

Com isso conseguimos começar a brincar com o oscilador, por exemplo:

```jsx
osc.type = 'sine'

osc.frequency.value = 440
```

No exemplo, colocamos ele em uma frequência de 440 hertz e agora vamos linkar com o destino do contexto e iniciar o oscilador e depois pedimos para ele pausar depois de dois segundos:

```jsx
osc.connect(context.destination)

osc.start()

osc.stop(contexto.currentTime + 2)
```

Ao rodar por dois segundos, ele emitirá um som. Agora vamos criar um select, dentro dele podemos variar o tipo de onda:

```jsx
<select id=”type” onchange=”play()”>
    <option>-</option>
    <option value=”sine”>Sine</option>
    <option value=”square”>Square</option>
    <option value=”sawtooth”> Sawtooth </option>
    <option value=”triangle”> Triangle </option>
</select>
```

Agora, dentro de script, colocaremos uma function play:

```jsx
<script>

    function play(){
        const contexto = (window.AudioContext || window.webkitAudioContex)t
        const osc =  contexto.createOscillator()
        osc.type = document.getElementById('type').value
        osc.frequency.value = 440
        osc.connect(context.destination)
        osc.start()
        osc.stop(contexto.currentTime +2)
    }
</script>
```

Assim já conseguimos criar um sintetizador de áudio, sem precisar de um arquivo de áudio. Podemos, por exemplo, pegar a frequência de cada nota e trabalhar em cima dela.

Confira o video:

<div className="embed-responsive embed-responsive-16by9">
  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/H005spSyxeA" allowfullscreen></iframe>
</div>

Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!


---

# testimonials/david-junior.md

Source: testimonials/david-junior.md



---

# testimonials/lourival-mendes.md

Source: testimonials/lourival-mendes.md



---

# testimonials/marcos-antonio.md

Source: testimonials/marcos-antonio.md



---

## About This Document

This concatenated documentation file is generated automatically by aeo.js
to make it easier for AI systems to understand the complete context of this project.

For a structured index, see: https://devpleno.com/llms.txt
For individual files, see: https://devpleno.com/docs.json

Generated by aeo.js - https://aeojs.org