{
"version": "1.0",
"generated": "2026-04-06T15:33:05.068Z",
"site": {
"title": "DevPleno",
"description": "Ajudando desenvolvedores a construir produtos de classe mundial.",
"url": "https://devpleno.com"
},
"entries": [
{
"id": "0048afc9f96ef17b",
"url": "https://devpleno.com/clt-ou-pj",
"title": "CLT ou PJ em Software - O que vale mais a pena? - DevPleno (Part 1)",
"content": "Carreira\n\n## CLT ou PJ em Software - O que vale mais a pena?\n\nT\nPor Tulio Faria • 30 de agosto de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nA 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.\n\nQual o custo disso para a empresa que está empregando?\n\nO 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%:\n\n10.000,00 x 13 x 1,3 = 169.000,00\nValor para a empresa: R$169.000,00\n\nEntã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 é.\n\nQuanto desses R$169 mil você vai levar efetivamente?\n\nLembrando 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\n\n10.000,00 x 13 x 0,725 = 94.250,00\nValor líquido: R$94.250,00\n\nPerceba 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?\n\n10.000,00 x 12 = 120.000,00\n\nNo 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%:\n\n10.000,00 x 12 x 0,93 = 111.600,00\nValor líquido: R$111.600,00",
"description": "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...",
"keywords": [
"para",
"como",
"empresa",
"custo",
"exemplo",
"https",
"mais",
"valor",
"isso",
"qual"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/clt-ou-pj"
}
},
{
"id": "01286d9ac248a362",
"url": "https://devpleno.com/blog/falsy-e-truthy-values/index",
"title": "Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS (Part 2)",
"content": "Irá retornar False, mas se fizermos isso:\n\n```jsx\nconsole.log(!!42 == true)\n```\n\nEstamos 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.\n\nConfira o video:\n\n
\n \n
\n\nDeixe 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!",
"keywords": [
"valores",
"para",
"true",
"valor",
"exemplo",
"sobre",
"https",
"retornar",
"false",
"comments"
],
"metadata": {
"title": "Falsy e Truthy Values - Valores considerados verdadeiro e falso em JS",
"date": "2017-08-07",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "TRUTHY-VALUES-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/falsy-e-truthy-values/index.md"
}
},
{
"id": "0150ec00071d21bf",
"url": "https://devpleno.com/obesidade-mental",
"title": "Você sofre de Obesidade Mental? - DevPleno (Part 1)",
"content": "Carreira\n\n## Você sofre de Obesidade Mental?\n\nT\nPor Tulio Faria • 17 de outubro de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nEu 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.\n\nEstudei 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.\n\nNesse livro tinha uma citação para o que eu estava fazendo, chamava-se “Obesidade mental”, ela acontece quando sabemos muito, mas executamos pouco.\n\nQuando 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.\n\nDesde que eu coloquei meu primeiro vídeo no ar e compartilhei com todo mundo, eu comecei a executar cada vez mais.\n\nUma 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.\n\nPor hoje é só, apenas queria deixar essa reflexão para vocês. Até a próxima.\n\nConfira o video:\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.",
"description": "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 ...",
"keywords": [
"para",
"https",
"mais",
"carreira",
"mental",
"devpleno",
"queria",
"come",
"comecei",
"pouco"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/obesidade-mental"
}
},
{
"id": "0254efd7d2c15cde",
"url": "https://devpleno.com/blog/hands-on-jest/index",
"title": "Jest - Como utilizar a ferramenta de testes criada pelo Facebook (Part 1)",
"content": "O Jest foi criado pelo Facebook com o objetivo de rodar os testes de uma maneira eficiente e com menos configurações.\n\nAqui eu já tenho um diretório para o nosso teste chamado jest-handson, então vou rodar:\n\n```js\nyarn add jest --dev\n```\n\nVamos 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.\n\nDentro do Package.json tem o código:\n\n```jsx\n{\n \"devDependencies\": {\n \"jest\": \"^19.0.2\"\n }\n}\n```\n\nE vamos adicionar:\n\n```jsx\n{\n \"devDependencies\": {\n \"jest\": \"^19.0.2\"\n },\n \"scripts\":{\n \"test\": \"jest\"\n }\n}\n```\n\nSe rodarmos o yarn test agora, ele já sabe como rodar e retornou que não temos nenhum teste para rodar.\n\nEntão vamos criar um módulo chamado modulo1 para testarmos:\n\n```jsx\nconst modulo1 = {\n func1: (a) => a + 1\n}\nmodule.exports = modulo1\n```\n\nUma 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:\n\n```jsx\nconst modulo1 = require('./modulo1')\ndescribe('basic features', () => {\n it('should return the right value', () => {\n expect(modulo1.func1(10)).toBe(11)\n })\n})\n```\n\nPerceba 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.\n\nAgora imagine que por algum motivo no local de 'a' deve rodar uma função em específico, vamos supor uma função 2:\n\n```jsx\nconst modulo1 = {\n func1: (a) => a + 1,\n func2: (a, cb) => a + cb(a)\n}\nmodule.exports = modulo1\n```",
"keywords": [
"modulo1",
"jest",
"para",
"rodar",
"vamos",
"test",
"const",
"testes",
"teste",
"yarn"
],
"metadata": {
"title": "Jest - Como utilizar a ferramenta de testes criada pelo Facebook",
"date": "2017-07-08",
"tags": "['Javascript']",
"thumbnail": "Jest2.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/hands-on-jest/index.md"
}
},
{
"id": "02807172200516fc",
"url": "https://devpleno.com/blog/processo-seletivo-da-toptal/index",
"title": "Processo Seletivo da Toptal – Série Trabalho Remoto",
"content": "Seu objetivo é trabalhar remotamente por meio da Toptal? Neste vídeo, você vai entender como funciona o processo seletivo.\n\n
\n \n
\n\nAtualmente 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).\n\n[](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)",
"keywords": [
"embed",
"blog",
"responsive",
"https",
"mais",
"profissionais",
"toptal",
"classname",
"iframe",
"reactjs"
],
"metadata": {
"title": "Processo Seletivo da Toptal – Série Trabalho Remoto",
"date": "2018-02-21",
"tags": "['Carreira']",
"thumbnail": "ProcessoSeletivo.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/processo-seletivo-da-toptal/index.md"
}
},
{
"id": "03068fbf46cf6294",
"url": "https://devpleno.com/lista-encadeada-adicionar-no",
"title": "Lista encadeada - Adicionar nó - DevPleno (Part 1)",
"content": "Algoritmos\n\n## Lista encadeada - Adicionar nó\n\nT\nPor Tulio Faria • 12 de julho de 2017\n\n[Algoritmos](/tag/algoritmos)\n\nVamos 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.\n\nHoje 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.\n\nA 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.\n\nEntão eu vou criar algumas variáveis dentro e retornar qual vai ser a interface pública dessa lista:\n\nfunction LinkedList() {\nlet head = null\nlength = 0\nreturn {\nlength: () => length\n}\n}\nPerceba 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.\n\nSe eu fizer:",
"description": "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çã...",
"keywords": [
"length",
"head",
"value",
"list",
"node",
"lista",
"para",
"vamos",
"return",
"const"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 4,
"sourcePath": "/lista-encadeada-adicionar-no"
}
},
{
"id": "033c901d7471f280",
"url": "https://devpleno.com/blog/14",
"title": "Blog - Página 14 - DevPleno",
"content": "## Arquivo de Insights\n\nExplore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Javascript 3 de jul. de 2017 Evite o this em JavaScript](/evite-o-this-em-js)\n\n[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)\n\n[Javascript 30 de jun. de 2017 High-order Function - Reduce](/reduce)\n\n[Javascript 29 de jun. de 2017 Generators Functions - o que acontece por baixo dos panos](/generators-functions)\n\n[Carreira 28 de jun. de 2017 Precificação de softwares: você sabe como fazer?](/precificacao-de-softwares-voce-sabe-como-fazer)\n\n[Javascript 28 de jun. de 2017 ReactJS Recursivo?](/renderizar-estruturas-em-formato-de-arvore)\n\n[Javascript 28 de jun. de 2017 Sleep em Generator](/sleep-em-generator)\n\n[Javascript 27 de jun. de 2017 High-order Function MAP](/map)\n\n[Javascript 27 de jun. de 2017 NodeJS Primeiros Passos - Promises](/promises)\n\n[Javascript 26 de jun. de 2017 Como servir arquivos e expor servidor local com HTTPS](/servir-arquivos-e-expor-servidor)\n\n[Javascript 22 de jun. de 2017 Debug de código JavaScript no Navegador](/debug-no-navegador)\n\n[Carreira 22 de jun. de 2017 Qual é a sua desculpa?](/qual-a-sua-desculpa)\n\n[Anterior](/blog/13)14 / 26[Próxima](/blog/15)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"javascript",
"2017",
"carreira",
"para",
"blog",
"nodejs",
"reactjs",
"como",
"todos",
"algoritmos"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/blog/14"
}
},
{
"id": "0348e7a608dad934",
"url": "https://devpleno.com/beatbox-manipulavel-com-js",
"title": "Construindo um Beatbox Manipulável com JS - DevPleno (Part 2)",
"content": "generateTrack(1)\ngenerateTrack(2)\ngenerateTrack(2)\n</script>\n</body>\n<html>\nO 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.\n\n<script>\n//gera o check-box\nconst numItems = 10\nfunction generationTrack(trackId){\nconst track = document.getElementById('track'+trackId)\n\nfor (let i=0; i<10; i++){\ntrack.innerHTML += '<input type=\"checkbox id=\"i-'+trackId+'-'+i+'\" />'\n}\n}\ngenerateTrack(1)\ngenerateTrack(2)\ngenerateTrack(2)\n//fim gerar check-box\n\nconst bpm = 90\nlet current = 0\nfunction tick(){\nconst currentItem = current++ % numItems\n\nconsole.log(currentItem)\n}\n\nsetInterval(tick, (60*1000)/bpm)\n</script>\nNote 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:\n\n<script>\nconst bpm = 90\nlet current = 0\nlet isPlaying = false\nlet timer = null\nfunction tick(){\nconst currentItem = current++ % numItems\nfor(let i=1; i<=3; i++){\nconst item = document.getElementById('i-'+i+'-'+currentItem)\nconst track = document.getElementById('track' +i)\nif (item.checked){\nconst audio = document.getElementById(track.attributes.rel.value)\naudio.currentTime = 0\naudio.play()\n}\n}\n}\nconst play = document.getElementById('play')\nplay.addEventListener('click', function(){\nif (isPlaying){\nclearInterval(timer)\nplay.innerHTML = 'Play'\n} else {\ntimer = setInterval(tick, (60*1000)/bpm)\nplay.innerHTML = 'Stop'\n}",
"description": "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...",
"keywords": [
"play",
"audio",
"const",
"prato",
"https",
"track",
"script",
"checkbox",
"para",
"trackid"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "/beatbox-manipulavel-com-js"
}
},
{
"id": "03699ab3bb27d752",
"url": "https://devpleno.com/minicurso-socket-io-parte-4",
"title": "Minicurso Socket.IO Parte 4 - Separando notificações por Rooms - DevPleno (Part 3)",
"content": "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.\n\nTambé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:\n\n$function(){\nconst socket = io('', { query: { match: MATCH_INDEX}});\n...\n}\nPerceba que agora no route/index.js, quando o usuário conectar, vamos colocar ele na sala:",
"description": "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....",
"keywords": [
"match",
"supporters",
"team",
"para",
"porcentagem",
"const",
"socket",
"vamos",
"torcida",
"temos"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 5,
"sourcePath": "/minicurso-socket-io-parte-4"
}
},
{
"id": "039073b7ebfd35fc",
"url": "https://devpleno.com/blog/teclado-com-webaudioapi/index",
"title": "Criando um teclado com WebAudioAPI (Part 1)",
"content": "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:\n\n```jsx\n\n \n \n \n\n```\n\nA 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:",
"keywords": [
"keycode",
"para",
"onkeydown",
"onkeyup",
"const",
"function",
"window",
"maposc",
"html",
"tecla"
],
"metadata": {
"title": "Criando um teclado com WebAudioAPI",
"date": "2017-10-18",
"tags": "['Javascript']",
"thumbnail": "TecladoComWebAudi.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "blog/teclado-com-webaudioapi/index.md"
}
},
{
"id": "0409f31b222b53dd",
"url": "https://devpleno.com/handlebars-template-html-simples",
"title": "Template HTML simples - Hands-on Handlebars - DevPleno (Part 2)",
"content": "<script>\n$function(){\n$.get('dados.json't=' +new Date().getTime(), function(data){\n$(\"#people\").append('<div><strong>Name: </strong> '+nome)\n$(\"#people\").append('<div><strong>Last Name: </strong> '+last)\n}\n})\n</script>\nIsso 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}}:\n\n<script type='text/x-handlebars-templete' id='person-templete'>\n<div>\n<strong>Name: </strong>\n{{ nome }}\n<br />\n<strong>Last Name: </strong>\n{{ lastName }}\n<br />\n</div>\n</script>\nTemos, 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:\n\n<script>\n$function(){\n$.get'dados.json't=' +new Date().getTime(), function(data){\nconst templeteString = $(\"#person-templete\").html();\nconst personTemplete = Handlebars.compile(templeteString);\nconst html = personTemplete({\nname: 'Tulio',\nlastName: 'Faria'\n})\n$(\"people\").html(html);\n}\n})\n</script>\nCom 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.\n\nObviamente, 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.",
"description": "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...",
"keywords": [
"script",
"strong",
"html",
"name",
"handlebars",
"people",
"https",
"template",
"lastname",
"function"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 4,
"sourcePath": "/handlebars-template-html-simples"
}
},
{
"id": "042a48c85aabf388",
"url": "https://devpleno.com/blog/toptal-serietrabalhoremoto/index",
"title": "O que é a Toptal? | Série Trabalho Remoto",
"content": "Você já conhece a Toptal? Entenda o papel desta empresa que é uma das principais referências quando falamos em trabalho remoto.\n\n
\n \n
\n\nAtualmente 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)\n\n[](https://go.devpleno.com/fsm?utm_source=blog&utm_campaign=rc_blogpost&sck=blog)",
"keywords": [
"embed",
"blog",
"responsive",
"https",
"mais",
"profissionais",
"devreactjs",
"toptal",
"classname",
"iframe"
],
"metadata": {
"title": "O que é a Toptal? | Série Trabalho Remoto",
"date": "2018-02-09",
"tags": "['Carreira']",
"thumbnail": "OQueEToptal.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/toptal-serietrabalhoremoto/index.md"
}
},
{
"id": "047529cc830a6b9e",
"url": "https://devpleno.com/composicao-de-componentes-em-reactjs",
"title": "Composição de componentes em ReactJS - DevPleno (Part 1)",
"content": "Javascript\n\n## Composição de componentes em ReactJS\n\nT\nPor Tulio Faria • 1 de agosto de 2017\n\n[Javascript](/tag/javascript)[ReactJS](/tag/reactjs)\n\nA 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.\n\nEu 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.\n\nconst Panel = (props) => {\nreturn(\n<div>\n<h1>header</h1>\n</div>\n<p>Footer</p>\n)\n}\nEle 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:\n\nconst Panel = (props) => {\nreturn (\n<div>\n<h1>{props.header}</h1>\n<p>{props.footer}</p>\n</div>\n)\n}\nSe eu pegar esse código e chamar mais abaixo, dentro do nosso app component:\n\n<p className=\"App-intro\">\nTo get started, edit <code>src/App.js</code>\n</p>\n\n<Panel header='Olá mundo!' footer='rodape' />\nEntã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:",
"description": "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 ...",
"keywords": [
"header",
"props",
"para",
"componentes",
"composi",
"podemos",
"reactjs",
"como",
"panel",
"footer"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/composicao-de-componentes-em-reactjs"
}
},
{
"id": "049d69ae29e2b198",
"url": "https://devpleno.com/pensamentos-limitantes",
"title": "Pensamentos limitantes - DevPleno",
"content": "Carreira\n\n## Pensamentos limitantes\n\nT\nPor Tulio Faria • 18 de julho de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nA primeira que precisa pensar quando se quer ser um desenvolvedor pleno é estudar cada vez mais, conseguir coisas novas e não ter pensamento limitante.\n\nQuando 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.\n\nConfira o video:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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. ...",
"keywords": [
"https",
"pensamento",
"carreira",
"limitantes",
"algo",
"isso",
"conseguir",
"corpo",
"pensamentos",
"limitante"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/pensamentos-limitantes"
}
},
{
"id": "04a02f3d46c4e6fb",
"url": "https://devpleno.com/escopos-e-closures",
"title": "Escopos e Closures - NodeJS Primeiros Passos - DevPleno (Part 1)",
"content": "Javascript\n\n## Escopos e Closures - NodeJS Primeiros Passos\n\nT\nPor Tulio Faria • 25 de maio de 2017\n\n[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)\n\nEntender 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:\n\nvar a = 10\n\nconsole.log(a)\nou simplesmente:\n\na = 10\n\nconsole.log(a)\nPerceba 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.\n\nvar a = 10\n\nfunction inc() {\na++\n}\n\ninc()\n\nconsole.log(a)\nEsse 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.\n\nvar a = 10\n\nfunction inc() {\na++\n\nb = 11\n}\n\ninc()\n\nconsole.log(a, b)\nSe 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.\n\n**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.\n\n**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:\n\nfunction inc() {\na++",
"description": "Entender Escopos e Closures do JavaScript é muito importante para conseguir avançar no NodeJS. Primeiramente tenho um diretório criado com nossos exemplos....",
"keywords": [
"escopo",
"function",
"console",
"vari",
"conta",
"dentro",
"javascript",
"fazer",
"podemos",
"contador"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/escopos-e-closures"
}
},
{
"id": "05074579fac091c0",
"url": "https://devpleno.com/modulo-co",
"title": "Módulo Co - Organize o fluxo de seu código assíncrono - DevPleno (Part 3)",
"content": "co(function* () {\nconst file = ['yarn.lock', 'package.json']\nconst filePromises = []\nfor (let i = 0; i < file.length; i++) {\nfilePromises.push(readFile(file[i]))\n}\nconst contents = yield filePromises\nconsole.log(contents)\n})\nAgora 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.\n\nAgora entenda melhor sobre [Generators Functions e tudo que acontece “por baixo dos panos”.](https://www.devpleno.com/generators-functions/)\n\nConfira o Hands-on em vídeo:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"function",
"readfile",
"file",
"digo",
"data",
"fazer",
"const",
"contents",
"https",
"generator"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/modulo-co"
}
},
{
"id": "050b23dbcc347879",
"url": "https://devpleno.com/tag/javascript/13",
"title": "Javascript - Pagina 13 - DevPleno",
"content": "Javascript\n\n## Arquivo de Insights\n\n183 posts encontrados com a tag Javascript\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Javascript 17 de abr. de 2017 Hands-on: Injeção de Dependência é bom mesmo?](/hands-injecao-de-dependencia-e-bom-mesmo)\n\n[Javascript 17 de abr. de 2017 Hands-on: Currying](/hands-on-currying)\n\n[Javascript 10 de abr. de 2017 Hands-on: Json-Server](/hands-json-server)\n\n[Javascript 7 de abr. de 2017 High-order Functions](/high-order-functions)\n\n[Javascript 4 de abr. de 2017 Dica: Debounce](/dica-debounce)\n\n[Javascript 4 de abr. de 2017 Dica: Injeção de Dependência no ReactJS](/dica-injecao-de-dependencia-no-reactjs)\n\n[Javascript 28 de mar. de 2017 Immutability e ImmutableJS](/immutability-e-immutablejs)\n\n[Javascript 23 de mar. de 2017 Dica: Self-Invoked Function (Self-invoking Function)](/dica-self-invoked-function-self-invoking-function)\n\n[Javascript 22 de mar. de 2017 Dica: Debug de NodeJS no VS Code](/dica-debug-de-nodejs-no-vs-code)\n\n[Javascript 9 de mar. de 2017 Apresentação em HTML](/apresentacao-em-html)\n\n[Javascript 9 de mar. de 2017 Hands-on: Creat-React-App](/hands-creat-react-app)\n\n[Javascript 7 de mar. de 2017 Dica: Injeção de dependência com Destructuring Assignament](/dica-injecao-de-dependencia-com-destructuring-assignament)\n\n[Anterior](/tag/javascript/12)13 / 16[Próxima](/tag/javascript/14)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"javascript",
"2017",
"dica",
"hands",
"nodejs",
"reactjs",
"self",
"function",
"inje",
"depend"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/tag/javascript/13"
}
},
{
"id": "050f8b0c2c025549",
"url": "https://devpleno.com/tag/javascript/10",
"title": "Javascript - Pagina 10 - DevPleno",
"content": "Javascript\n\n## Arquivo de Insights\n\n183 posts encontrados com a tag Javascript\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Javascript 19 de mai. de 2017 Postman - Como testar APIs - Hands-on](/postman-como-testar-apis)\n\n[Javascript 18 de mai. de 2017 Ctrl+C / Copy to Clipboard em JS](/copy-to-clipboard-em-js)\n\n[Javascript 18 de mai. de 2017 Criando componente mais simples e eficaz em React](/stateless-functional-component)\n\n[Javascript 17 de mai. de 2017 React-router-dom: como injetar props em rotas em ReactJS](/router-props-2)\n\n[Javascript 16 de mai. de 2017 Faker - Como gerar grandes massas de dados fictícios para testes](/dados-ficticios-para-testes)\n\n[Javascript 16 de mai. de 2017 3 dicas para NPM + 1 dica extra](/dicas-paranpm)\n\n[Javascript 15 de mai. de 2017 Fs-extra - Filesystem com Promises e mais funcionalidades](/fs-extra)\n\n[Javascript 15 de mai. de 2017 Hands-on - Socket.io Parte 3](/hands-on-socket-io-parte-3)\n\n[Javascript 15 de mai. de 2017 Servidor HTTP Básico - NodeJS Primeiros Passos](/servidor-http-basico-2)\n\n[Javascript 12 de mai. de 2017 Hands-on - Socket.io Parte 2](/socket-io-parte2)\n\n[Javascript 11 de mai. de 2017 Low-DB - Banco de dados para NodeJS baseado em JSON](/low-db)\n\n[Javascript 11 de mai. de 2017 Comunicação em tempo-real com Node e Socket.io](/socket-io-parte1)\n\n[Anterior](/tag/javascript/9)10 / 16[Próxima](/tag/javascript/11)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"javascript",
"2017",
"socket",
"nodejs",
"como",
"hands",
"para",
"reactjs",
"dados",
"extra"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/tag/javascript/10"
}
},
{
"id": "05348f75fd352cea",
"url": "https://devpleno.com/arvore-binaria",
"title": "Árvore Binária em JavaScript - DevPleno (Part 1)",
"content": "Algoritmos\n\n## Árvore Binária em JavaScript\n\nT\nPor Tulio Faria • 3 de julho de 2017\n\n[Algoritmos](/tag/algoritmos)\n\nContinuando 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.\n\nEntã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:\n\nlet arvore = {\nleft: undefined,\nright: undefined,\nvalue: 10\n}\nA 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.\n\nfunction preOrder(tree) {\nconsole.log(tree.value)\n\npreOrder(tree.left)\npreOrder(tree.right)\n}\nPerceba que passamos a tree recursivamente para o lado esquerdo e em seguida para o direito.\n\n**Por que ele se chama preOrder?**\n\nPorque 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:\n\nfunction preOrder(tree) {\nconsole.log(tree.value)\n\ntree.left && preOrder(tree.left)\ntree.right && preOrder(tree.right)\n}\n\nconsole.log('preOrder')\n\npreOrder(arvore)\nSe 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.\n\nVamos colocar algum valor do lado esquerdo:",
"description": "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 ...",
"keywords": [
"para",
"tree",
"preorder",
"left",
"right",
"rvore",
"inorder",
"esquerda",
"direita",
"value"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/arvore-binaria"
}
},
{
"id": "053b3b5eb719d236",
"url": "https://devpleno.com/claude-code-otimizacao-arquivos",
"title": "Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente - DevPleno (Part 4)",
"content": "[](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)",
"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.",
"keywords": [
"code",
"claude",
"otimiza",
"para",
"ferramenta",
"como",
"arquivos",
"imagens",
"projeto",
"pngs"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 4,
"sourcePath": "/claude-code-otimizacao-arquivos"
}
},
{
"id": "054066100a266f2f",
"url": "https://devpleno.com/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica",
"title": "Por que fazer um curso de programação voltado para a prática? - DevPleno (Part 4)",
"content": "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.\n\nSaber 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.\n\n## Para saber lidar com as necessidades dos clientes\n\nQuem 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.\n\nHá 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.\n\nAssim, é 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.\n\n## Para aumentar a qualidade do projeto\n\nAlé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.\n\nExistem 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.",
"description": "A área de tecnologia da informação oferece muitas oportunidades e, para aproveitálas, o profissional deve se preparar continuamente. Para tanto, o desenvol...",
"keywords": [
"para",
"como",
"projeto",
"https",
"source",
"blog",
"campaign",
"blogpost",
"mais",
"desenvolvimento"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 5,
"sourcePath": "/por-que-fazer-um-curso-de-programacao-voltado-para-a-pratica"
}
},
{
"id": "05a1b4a83f6fa847",
"url": "https://devpleno.com/fsl-materialdeapoio",
"title": "Redirecting to: /",
"content": "Redirecting to: / [Redirecting from /fsl-materialdeapoio to /](/)",
"keywords": [
"redirecting",
"from",
"materialdeapoio"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/fsl-materialdeapoio"
}
},
{
"id": "05ece2fd50223b7b",
"url": "https://devpleno.com/precificacao-de-softwares-voce-sabe-como-fazer",
"title": "Precificação de softwares: você sabe como fazer? - DevPleno (Part 1)",
"content": "Carreira\n\n## Precificação de softwares: você sabe como fazer?\n\nT\nPor Tulio Faria • 28 de junho de 2017\n\n[Carreira](/tag/carreira)\n\nUm 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.\n\nPara 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).\n\nPortanto, se você quer saber o que considerar nesse processo, continue lendo e veja nossas dicas!\n\n## Como precificar um software?\n\nÉ 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.\n\nÉ 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).",
"description": "Um dos desafios de quem trabalha na área de tecnologia, especificamente em desenvolvimento de programas, é a precificação de softwares. Por envolver ativos...",
"keywords": [
"para",
"como",
"software",
"valor",
"mais",
"ncia",
"hora",
"tamb",
"seus",
"trabalho"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 5,
"sourcePath": "/precificacao-de-softwares-voce-sabe-como-fazer"
}
},
{
"id": "05fa1fa5d9040c34",
"url": "https://devpleno.com/blog/hands-on-readline/index",
"title": "Hands-on: Readline (Part 2)",
"content": "Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se 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!",
"keywords": [
"readline",
"line",
"console",
"fazer",
"podemos",
"isso",
"nome",
"embed",
"algo",
"para"
],
"metadata": {
"title": "Hands-on: Readline",
"date": "2017-05-08",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "Readline2.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/hands-on-readline/index.md"
}
},
{
"id": "0611936b107a5e73",
"url": "https://devpleno.com/blog/seja-o-motorista-da-sua-vida/index",
"title": "Você é passageiro ou motorista da sua vida? (Part 2)",
"content": "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!",
"keywords": [
"para",
"mais",
"motorista",
"vida",
"quer",
"fora",
"embed",
"sentido",
"pelo",
"coisas"
],
"metadata": {
"title": "Você é passageiro ou motorista da sua vida?",
"date": "2017-08-09",
"tags": "['Carreira']",
"thumbnail": "MotoristaDaVida.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/seja-o-motorista-da-sua-vida/index.md"
}
},
{
"id": "06326d824ae65558",
"url": "https://devpleno.com/find",
"title": "High-order Function Find - DevPleno (Part 1)",
"content": "Javascript\n\n## High-order Function Find\n\nT\nPor Tulio Faria • 2 de agosto de 2017\n\n[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)\n\nJá 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:\n\nconst carrinho = [{ id: 1, preco: 2, qtd: 2, estoque: 10 },\n{ id: 1, preco: 3, qtd: 5, estoque: 2 }]\n\nconst subtotal = (item) => item.preço * item.qtd\n\nconst filtroEmEstoque = (item) => item.estoque * item.qtd\n\nconst soma = (soma, subtotal) => subtotal + soma\n\nconst total = carrinho.filter(filtroEmEstoque).map(subtotal).reduce(soma, 0)\n\nconst produtoId1 = (item) => item.id === 1\n\nconst produtoId1Retorno = carrinho.find(produtoId1)\n\nconsole.log(produtoId1Retorno)\nPerceba 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:\n\nconst idEquals = (id, item) => item.id === id\n\nconst idEquals1 = carrinho.find(produtoId1)\n\nconsole.log(produtoId1Retorno)\nPerceba 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.\n\nconst idEquals = (id, item) => item.id === id\n\nconst idEquals1 = idEquals.bind(null, 1)\n\nconst idEquals1 = carrinho.find(produtoId1)\n\nconsole.log(produtoId1Retorno)\nEssa nova função que eu criei sempre terá um do ID fixo, então quando eu fizer:",
"description": "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 ...",
"keywords": [
"item",
"const",
"https",
"find",
"carrinho",
"devpleno",
"mais",
"high",
"order",
"reduce"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/find"
}
},
{
"id": "0644cb97cc597f77",
"url": "https://devpleno.com/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript",
"title": "Verificando o tempo para executar um trecho de código em Javascript - DevPleno (Part 1)",
"content": "Javascript\n\n## Verificando o tempo para executar um trecho de código em Javascript\n\nT\nPor Tulio Faria • 1 de fevereiro de 2017\n\n[Javascript](/tag/javascript)\n\nUma 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:\n\n- salvamos a data/hora atual\n\n- executamos o trecho de código\n\n- pegamos a data/hora atual e subtraímos o valor encontrado no item 1.\n\nSimples né? Vamos fazer agora em Javascritp:\n\nconst inicio = new Date().getTime()\n// trecho de código que queremos mensurar\nconst total = new Date().getTime() - inicio\nconsole.log('Foi executado em: ', total)\nO 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:",
"description": "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...",
"keywords": [
"trecho",
"digo",
"para",
"javascript",
"console",
"tempo",
"https",
"executar",
"execu",
"complexidade"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/verificando-o-tempo-para-executar-um-trecho-de-codigo-em-javascript"
}
},
{
"id": "0647d5e61597e0f9",
"url": "https://devpleno.com/blog/hands-on-readline/index",
"title": "Hands-on: Readline (Part 1)",
"content": "Neste post vamos fazer um hands-on é de um módulo padrão com o core do node: o readline.\n\n**O que temos que fazer?**\n\nVamos importar primeiro o readline e instanciar um novo readline.\n\n```jsx\nconst readline = require('readline')\nconst rl = readline.createInterface({\n input: process.stdin,\n output: process.stout\n})\n```\n\nComo o readline é um modulo que permite que lidemos com entrada e saída, podemos atrelar um readable stream no input e output padrão.\n\n**Pra que serve isso?**\n\nPodemos construir várias 'ferramentinhas' com o readline, a principal delas é a seguinte:\n\n```jsx\nrl.on('line', (line)==>{\n console.log('line >>', line)\n})\n```\n\nE 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:\n\n```jsx\nrl.on('line', (line)==>{\n console.log('line >>', line)\n})\nrl.on('SIGINT', () => {\n console.log('bye'),\n rl.pause()\n})\n```\n\nAo 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.\n\nPodemos criar várias formas de interação, vou dar mais um exemplo prático.\n\n```js\nrl.question('qual o seu nome?', (nome) => {\n console.log('prazer ', nome)\n})\n```\n\nRodando o node, a pergunta irá aparecer e ao escrever o console.log vai ser retorndado: prazer mais o nome que você digitou.\n\nEm Java, temos algo bem semelhante. Conseguimos dar o readline no stream e ele devolve a linha digitada pelo usuário.\n\n**Conclusão**\n\nApenas 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.\n\nConfira o video:\n\n
\n \n
",
"keywords": [
"readline",
"line",
"console",
"fazer",
"podemos",
"isso",
"nome",
"embed",
"algo",
"para"
],
"metadata": {
"title": "Hands-on: Readline",
"date": "2017-05-08",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "Readline2.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/hands-on-readline/index.md"
}
},
{
"id": "0669e3a3aba87a24",
"url": "https://devpleno.com/blog/closure-poo-para-js/index",
"title": "Closure Série - POO para JS (Part 2)",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"function",
"func1",
"const",
"name",
"func1b",
"isso",
"vari",
"esse",
"contador",
"embed"
],
"metadata": {
"title": "Closure Série - POO para JS",
"date": "2017-11-07",
"tags": "['Javascript']",
"thumbnail": "CLOSURE-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/closure-poo-para-js/index.md"
}
},
{
"id": "06d62e3e03529c77",
"url": "https://devpleno.com/blog/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao/index",
"title": "Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão! (Part 4)",
"content": "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.\n\nEssa 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.\n\nTrabalhar 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.\n\nA partir desses questionamentos, certamente, você vai conseguir entender melhor se a decisão de abrir uma empresa é realmente a melhor para sua vida!\n\nPor falar em empreendedorismo, você pode gostar destes nossos 2 vídeos:\n\n- [3 dicas para empreender em software](https://www.youtube.com/watch?v=A5RgxkpJIrA&utm_source=blog&utm_campaign=rc_blogpost)\n- [Como negociar software (ou qualquer outra coisa)](https://www.youtube.com/watch?v=FszhDTUw2E0&utm_source=blog&utm_campaign=rc_blogpost)\n\nSe 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!",
"keywords": [
"para",
"isso",
"como",
"muito",
"empresa",
"pode",
"mais",
"melhor",
"https",
"source"
],
"metadata": {
"title": "Trabalhar em uma grande empresa ou abrir uma empresa? Desvende a questão!",
"date": "2017-08-12",
"tags": "['Carreira']",
"thumbnail": "TrabalharOuEmpreender.jpg",
"author": "Tulio Faria",
"chunkIndex": 3,
"totalChunks": 4,
"sourcePath": "blog/trabalhar-em-uma-grande-empresa-ou-abrir-uma-empresa-desvende-a-questao/index.md"
}
},
{
"id": "0791c313e0177582",
"url": "https://devpleno.com/blog/por-que-todo-dev-usa-mac/index",
"title": "Por que todo Dev usa Mac? (Part 2)",
"content": "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.\n\nMas 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.\n\nCaso 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. :)\n\nDeixe 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!",
"keywords": [
"para",
"muito",
"como",
"poss",
"isso",
"quina",
"aplicativos",
"windows",
"aplicativo",
"algumas"
],
"metadata": {
"title": "Por que todo Dev usa Mac?",
"date": "2017-05-15",
"tags": "['Carreira']",
"thumbnail": "TodoDevMac.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/por-que-todo-dev-usa-mac/index.md"
}
},
{
"id": "07b12c9ba48b6e04",
"url": "https://devpleno.com/confira-4-dicas-de-ux-para-programadores",
"title": "Confira 4 dicas de UX para programadores - DevPleno (Part 1)",
"content": "Carreira\n\n## Confira 4 dicas de UX para programadores\n\nT\nPor Tulio Faria • 6 de outubro de 2017\n\n*\n\n[Carreira](/tag/carreira)\n\nVocê 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\nNã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.\n\nNesse 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.\n\nSe 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.*\n\nÉ 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.\n\nPensando 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á?\n\n## O que é UX?",
"description": "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 ...",
"keywords": [
"para",
"ncia",
"mais",
"experi",
"como",
"https",
"produto",
"dicas",
"informa",
"source"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 5,
"sourcePath": "/confira-4-dicas-de-ux-para-programadores"
}
},
{
"id": "07b29f10f2b8ac10",
"url": "https://devpleno.com/blog/comprometimento-com-suas-metas/index",
"title": "Comprometimento com as suas metas (Part 1)",
"content": "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.\n\nO 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.\n\nComecei 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.",
"keywords": [
"para",
"meta",
"como",
"ponto",
"embed",
"hoje",
"muito",
"importante",
"fazer",
"mais"
],
"metadata": {
"title": "Comprometimento com as suas metas",
"date": "2017-07-19",
"tags": "['Carreira']",
"thumbnail": "COMPROMETIMENTO-COM-SUAS-METAS-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/comprometimento-com-suas-metas/index.md"
}
},
{
"id": "07bb3ec9cda3a091",
"url": "https://devpleno.com/evite-o-this-em-js",
"title": "Evite o this em JavaScript - DevPleno (Part 1)",
"content": "Javascript\n\n## Evite o this em JavaScript\n\nT\nPor Tulio Faria • 3 de julho de 2017\n\n[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)\n\nVenho 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.\n\n**Qual o problema disso?** Se eu estou utilizando o ‘this’, naturalmente esse método já não é mais puro.\n\n**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.\n\nconst Node = (props) => {\nreturn (\n<span>\n{props.node.l && props.node.r && <span>(</span>}\n\n{props.node.l && <Node node={props.node.l} />}\n\n{props.node.v}\n\n{props.node.l && props.node.r && <span>)</span>}\n</span>\n)\n}\nCom 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’.\n\nUma 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.",
"description": "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 é....",
"keywords": [
"this",
"node",
"props",
"https",
"utilizar",
"componente",
"span",
"javascript",
"mais",
"forma"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/evite-o-this-em-js"
}
},
{
"id": "07d9d40d37b46128",
"url": "https://devpleno.com/entrevista-carlos-drury-e-thiago-coelho",
"title": "DevPleno Entrevista - Carlos Drury e Thiago Coelho - DevPleno (Part 4)",
"content": "Compartilhe este artigo com outros devs.\n\n[](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)",
"description": "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, ...",
"keywords": [
"para",
"carlos",
"ingl",
"drury",
"thiago",
"carreira",
"grande",
"muito",
"https",
"coelho"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 4,
"sourcePath": "/entrevista-carlos-drury-e-thiago-coelho"
}
},
{
"id": "0871d0002557c574",
"url": "https://devpleno.com/hands-on-jest",
"title": "Jest - Como utilizar a ferramenta de testes criada pelo Facebook - DevPleno (Part 1)",
"content": "Javascript\n\n## Jest - Como utilizar a ferramenta de testes criada pelo Facebook\n\nT\nPor Tulio Faria • 8 de julho de 2017\n\n[Javascript](/tag/javascript)\n\nO Jest foi criado pelo Facebook com o objetivo de rodar os testes de uma maneira eficiente e com menos configurações.\n\nAqui eu já tenho um diretório para o nosso teste chamado jest-handson, então vou rodar:\n\nyarn add jest --dev\nVamos 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.\n\nDentro do Package.json tem o código:\n\n{\n\"devDependencies\": {\n\"jest\": \"^19.0.2\"\n}\n}\nE vamos adicionar:\n\n{\n\"devDependencies\": {\n\"jest\": \"^19.0.2\"\n},\n\"scripts\":{\n\"test\": \"jest\"\n}\n}\nSe rodarmos o yarn test agora, ele já sabe como rodar e retornou que não temos nenhum teste para rodar.\n\nEntão vamos criar um módulo chamado modulo1 para testarmos:\n\nconst modulo1 = {\nfunc1: (a) => a + 1\n}\nmodule.exports = modulo1\nUma 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:\n\nconst modulo1 = require('./modulo1')\ndescribe('basic features', () => {\nit('should return the right value', () => {\nexpect(modulo1.func1(10)).toBe(11)\n})\n})\nPerceba 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.\n\nAgora imagine que por algum motivo no local de ‘a’ deve rodar uma função em específico, vamos supor uma função 2:",
"description": "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 ...",
"keywords": [
"modulo1",
"jest",
"para",
"rodar",
"vamos",
"test",
"https",
"testes",
"const",
"como"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/hands-on-jest"
}
},
{
"id": "08c84ead292d34d0",
"url": "https://devpleno.com/mundo-de-abundancia",
"title": "Sobreviver em um mundo de abundância - DevPleno (Part 1)",
"content": "Carreira\n\n## Sobreviver em um mundo de abundância\n\nT\nPor Tulio Faria • 7 de novembro de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nEla 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.\n\nEu 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:\n\n“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.”\n\nIsso é 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.\n\nDepois 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.\n\nConfira o video:",
"description": "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 ...",
"keywords": [
"para",
"https",
"mais",
"carreira",
"minha",
"estava",
"oportunidade",
"faculdade",
"como",
"abund"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/mundo-de-abundancia"
}
},
{
"id": "08de445a8be85195",
"url": "https://devpleno.com/blog/claude-code-otimizacao-arquivos/index",
"title": "Como Usar o Claude Code Para Otimizar Seus Arquivos Automaticamente (Part 3)",
"content": "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.\n\n**[Acesse o The Best Stack e comece agora](https://do.devpleno.com/the-best-stack)**\n\n## FAQ\n\n### O Claude Code instala ferramentas sozinho?\n\nSim. 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.\n\n### Funciona com qualquer tipo de arquivo?\n\nO 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.\n\n### Preciso saber usar linha de comando?\n\nNã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.\n\n### É seguro rodar otimizações automáticas no meu projeto?\n\nSim, 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.\n\n### Quanto de redução posso esperar?\n\nDepende 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.",
"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.",
"keywords": [
"claude",
"code",
"otimiza",
"ferramenta",
"type",
"para",
"imagens",
"como",
"arquivos",
"otimizar"
],
"metadata": {
"title": "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.",
"date": "2026-04-05",
"tags": "['Ferramentas']",
"thumbnail": "feature-image.jpg",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 4,
"sourcePath": "blog/claude-code-otimizacao-arquivos/index.md"
}
},
{
"id": "093c548f774b573e",
"url": "https://devpleno.com/blog/minicurso-socket-io-parte-3/index",
"title": "Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol (Part 3)",
"content": "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:\n\n```jsx\n$(function)(){\n const socket = io();\n socket.on('connect', function(){\n console.log('conected');\n })\n socket.on('score', function(score){\n console.log('score', score)\n })\n})\n```\n\nPerceba 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.\n\nVamos copiar esse trecho de código em negrito:\n\n```jsx\n-b\">\n```\n\nAgora vamos voltar para nosso match do client em js/match.js e fazer o seguinte:\n\n```jsx\n$(function)(){\n const socket = io();\n socket.on('connect', function(){\n console.log('conected');\n })\n socket.on('score', function(score){\n console.log('score', score)\n //na lista de jogos\n $(\". match-\"+score.match+\"-a\").html(score.scoreA)\n $(\". match-\"+score.match+\"-b\").html(score.scoreb)\n })\n})\n```\n\nPerceba 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:\n\n```jsx\n\n```",
"keywords": [
"score",
"match",
"para",
"function",
"vamos",
"notify",
"socket",
"jogo",
"console",
"scorea"
],
"metadata": {
"title": "Minicurso Socket.IO - Parte 3 - Recebendo a notificação de Gol",
"date": "2017-07-07",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "socketpart3.png",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 5,
"sourcePath": "blog/minicurso-socket-io-parte-3/index.md"
}
},
{
"id": "099099ad9eea39f2",
"url": "https://devpleno.com/blog/hands-on-socket-io-parte-3/index",
"title": "Hands-on - Socket.io Parte 3 (Part 1)",
"content": "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á?!\n\n```jsx\nconst app = require('express')()\nconst http = require('http').createServer(app)\nconst io = require('socket.io')(http)\napp.get('/', (req, res)=>{\n res.sendFile(__dirname+'/index.html')\n})\nio.on('connection', (socket)=>{\n console.log('New connection', socket.id)\n socket.on('msg', (msg)=>{\n console.log(msg)\n socket.broadcast.emit('msg', msg);\n })\n http.listen(3000, function(){\n console.log('listening on port 3000')\n })\n}\n```\n\nQuando 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.\n\n```jsx\n\nio.on('connection', (socket)=>{\n console.log('New connection', socket.id)\n socket.on('msg', (msg)=>{\n console.log(msg)\n socket.broadcast.emit('msg', msg);\n socket.join('contador');\n })\n```\n\nCom 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.\n\nVamos 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.",
"keywords": [
"socket",
"para",
"vamos",
"sala",
"mensagem",
"console",
"contador",
"como",
"rios",
"http"
],
"metadata": {
"title": "Hands-on - Socket.io Parte 3",
"date": "2017-05-15",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "HandsOnScocketIo3.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/hands-on-socket-io-parte-3/index.md"
}
},
{
"id": "099e4e56edcbd9da",
"url": "https://devpleno.com/blog/request-e-response/index",
"title": "Request e Response (Part 2)",
"content": "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:\n\n```jsx\nvar express = require ('express');\nvar app express();\napp.post('/users', function(req,res){\n res.send(req.headers);\n req.on('data', function(chunk){\n //res.send(chunk);\n });\n});\n```\n\nVamos mandar para https://localhost:3000/users o tipo de requisição, no caso o POST, e um raw, ou seja, um texto puro.\n\n\n\nEm 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.\n\n\n\nNote 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.\n\nAssista ao vídeo da explicação:\n\n
\n \n
\n\nDeixe 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!",
"keywords": [
"requisi",
"exemplo",
"request",
"temos",
"para",
"express",
"send",
"post",
"https",
"como"
],
"metadata": {
"title": "Request e Response",
"date": "2017-05-22",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "RequestResponse.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/request-e-response/index.md"
}
},
{
"id": "09cdd5038e0befa7",
"url": "https://devpleno.com/teclado-com-webaudioapi",
"title": "Criando um teclado com WebAudioAPI - DevPleno (Part 3)",
"content": "const mapOsc = {}\nfunction onKeyDown(key) {\nif (map[key.keyCode] && !mapOsc[key.keyCode]) {\nconst osc = constext.createOscillator()\nosc.type = 'sine'\nosc.frequency.value = notes[map[key.keyCode]]\nosc.connect(contexto.destination)\nosc.start()\nmapOsc[key.keyCode] = osc\n}\n}\nfunction onKeyUp(key) {\nif (key.keyCode in mapOsc) {\nconst osc = mapOsc[key.keyCode]\nosc.stop(0)\nmapOsc[key.keyCode] = undefined\n}\n}\nAssim 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.\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"keycode",
"para",
"https",
"onkeydown",
"onkeyup",
"const",
"function",
"window",
"maposc",
"webaudioapi"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/teclado-com-webaudioapi"
}
},
{
"id": "09e8c83f49c3a810",
"url": "https://devpleno.com/stream-duplex",
"title": "Hands-on: Streams Parte 03 - Duplex - DevPleno (Part 3)",
"content": "Compartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"socket",
"client",
"para",
"server",
"data",
"este",
"porta",
"duplex",
"stream",
"cliente"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/stream-duplex"
}
},
{
"id": "09f849893cccca36",
"url": "https://devpleno.com/blog/promises/index",
"title": "NodeJS Primeiros Passos - Promises (Part 1)",
"content": "Continuando nosso assunto sobre NodeJS, vamos tratar sobre como podemos organizar o fluxo para que o código fique realmente organizado. Olhe esse exemplo:\n\n```jsx\nvar fs = require('fs')\nfs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {\n fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {\n fs.readFile('arquivo3.txt', arquivo1 + '\\\\n' + arquivo2, function (err) {\n console.log('tudo certo')\n })\n })\n})\n```\n\nAqui 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'.\n\n```jsx\nnpm install q\n```\n\nNo 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á:\n\n```jsx\nvar Q = require('q')\nvar fs = require('fs')\nfunction readArquivo1() {\n fs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {})\n}\nfunction readArquivo2() {\n fs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {})\n}\nfunction readArquivo3() {\n fs.readFile('arquivo3.txt', arquivo1 + '\\\\n' + arquivo2, function (err) {})\n}\n```\n\nVamos 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:",
"keywords": [
"function",
"arquivo1",
"deferred",
"arquivo2",
"readfile",
"para",
"arquivo",
"digo",
"then",
"conteudo"
],
"metadata": {
"title": "NodeJS Primeiros Passos - Promises",
"date": "2017-06-27",
"tags": "['Javascript', 'Fundamentos', 'NodeJS']",
"thumbnail": "Promises.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "blog/promises/index.md"
}
},
{
"id": "0ab3cf96c249324f",
"url": "https://devpleno.com/hands-on-threejs",
"title": "Hands-on - Three.JS - DevPleno (Part 2)",
"content": "<html>\n<body>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js\">\n</script>\n<script>\nconst scene = new THREE.Scene()\nconst camera = new THREE.PerspectiveCamera(75, window.in\nnerWidth / window.innerHight, 0.1, 1000)\nconst renderer = new THREE.WebGLRenderer()\nrenderer.setSize(window.innerWidth, window.innerHeight)\ndocumnet.body.appenChild(renderer.domElement)\nconst box = new THREE.BoxGeometry(1,1,1)\nconst material = new THREE.MeshBasicMaterial({ color: 0xff0000 })\nconst cube = new THREE.Mesh( box, material )\nscene.add( cube )\ncamera.position.z = 5\nconst animated = () => {\nrequestAnimationFrame( animate )\nrenderer.render( scene, camera)\n}\nanimate()\n</script>\n</body>\n</html>\nO renderizador pega uma câmera e renderiza a cena na câmera, com isso ele cria a imagem a partir disso.\n\nO 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:\n\nconst animated = () => {\nrequestAnimationFrame(animate)\ncube.rotation.x += 0.01\ncube.rotation.y += 0.01\ncube.rotation.z += 0.01\nrenderer.render(scene, camera)\n}\nFazendo 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.\n\nConfira o video:\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"three",
"const",
"window",
"script",
"scene",
"renderer",
"body",
"vamos",
"isso",
"https"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/hands-on-threejs"
}
},
{
"id": "0b2377e18aa7eaa4",
"url": "https://devpleno.com/blog/webaudioapi/index",
"title": "WebAudioAPI - Gerando um som no browser (Part 2)",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"contexto",
"option",
"value",
"script",
"vamos",
"udio",
"const",
"window",
"agora",
"type"
],
"metadata": {
"title": "WebAudioAPI - Gerando um som no browser",
"date": "2017-10-17",
"tags": "['Javascript']",
"thumbnail": "Webaudi.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/webaudioapi/index.md"
}
},
{
"id": "0b26d3207b46bd05",
"url": "https://devpleno.com/entenda-a-importancia-de-cursos-para-desenvolvedores",
"title": "Entenda a importância de cursos para desenvolvedores - DevPleno (Part 2)",
"content": "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.\n\nO [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.\n\n## Credibilidade\n\nTer 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.\n\n## Planejamento\n\nÉ 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.\n\n## Melhores cursos para desenvolvedores\n\nExistem 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.\n\nAlé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.\n\nVeja algumas tendências atuais de desenvolvimento e programação:\n\n### ReactJS\n\nReactJS é 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.",
"description": "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...",
"keywords": [
"para",
"mais",
"cursos",
"https",
"carreira",
"desenvolvedores",
"pode",
"empresa",
"habilidades",
"poss"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 4,
"sourcePath": "/entenda-a-importancia-de-cursos-para-desenvolvedores"
}
},
{
"id": "0b561c15f5678afc",
"url": "https://devpleno.com/minicurso-socket-io-parte-1",
"title": "Minicurso Socket.IO - Parte 01 - Começando o projeto - DevPleno (Part 3)",
"content": "yarn add lowdb\nEsse lowdb vai criar um banco novo onde iremos puxar os jogos de lá:\n\nvar express = require('express');\nvar router = express.Router();\n//definindo o bd\nconst low = require('lowdb')\nconst db = low(__dirname+'/../data/db.json')\nconst defaultData = require('../data/default-data.json')\ndb.defaults(defaultData).write()\n\n/\\*Get home page. \\*/\nrouter.get('/', function(req, res, next){\nres.render('index', {title: 'Express'});\n});\nmodule.exports = router;\nEstamos 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.\n\nPerceba que o db.json está vazio, mas ao darmos um yarn start ele será preenchido com as informações do defaultData.\n\nNosso 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:\n\n;/\\*Get home page. \\*/\nrouter.get('/', function (req, res, next) {\nconst matches = db.get('matches').value()\nres.render('index', { matches })\n})\nmodule.exports = router\nAgora, dentro de index.js, vamos remover o title de todas as linhas de código e adicionar matches dentro do <p>:\n\n<p>Olá <%= matches %></p>\nPerceba 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:\n\n<p>Olá <%= JSON.stringfy(matches) %></p>\nEntão o jogo está funcionando perfeitamente.\n\nComo 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.",
"description": "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. ...",
"keywords": [
"vamos",
"para",
"dentro",
"matches",
"views",
"express",
"pasta",
"index",
"match",
"temos"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 5,
"sourcePath": "/minicurso-socket-io-parte-1"
}
},
{
"id": "0b5cc8f8d48cc0d8",
"url": "https://devpleno.com/como-invocar-funcoes-dinamicamente-com-js",
"title": "Como invocar funções dinamicas em JavaScript - DevPleno (Part 3)",
"content": "[](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)",
"description": "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 ...",
"keywords": [
"como",
"console",
"para",
"todos",
"valor",
"javascript",
"resultado",
"https",
"vari",
"dinamicamente"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/como-invocar-funcoes-dinamicamente-com-js"
}
},
{
"id": "0bf2af8a4d4c120c",
"url": "https://devpleno.com/blog/estudar-1-hora-por-dia-ou-8-horas-no-sabado/index",
"title": "Estudar 1 hora por dia ou 8 horas no sábado? (Part 1)",
"content": "O que é melhor, estudar 1 hora por dia ou 8 horas no fim de semana?\n\nPrimeiro 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.\n\nEu 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.\n\nNo 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.\n\nÉ 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.",
"description": "Descubra a melhor rotina de estudos para programadores: consistência diária ou maratonas no fim de semana? Dicas para organizar seus estudos.",
"keywords": [
"semana",
"melhor",
"mais",
"estudar",
"dias",
"para",
"horas",
"esse",
"todo",
"bito"
],
"metadata": {
"title": "Estudar 1 hora por dia ou 8 horas no sábado?",
"description": "Descubra a melhor rotina de estudos para programadores: consistência diária ou maratonas no fim de semana? Dicas para organizar seus estudos.",
"date": "2017-07-18",
"tags": "['Carreira']",
"thumbnail": "ROTINA-DE-ESTUDOS-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/estudar-1-hora-por-dia-ou-8-horas-no-sabado/index.md"
}
},
{
"id": "0c324816cc7dc264",
"url": "https://devpleno.com/comprometimento-com-suas-metas",
"title": "Comprometimento com as suas metas - DevPleno (Part 1)",
"content": "Carreira\n\n## Comprometimento com as suas metas\n\nT\nPor Tulio Faria • 19 de julho de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nO 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.\n\nComecei 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.",
"description": "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...",
"keywords": [
"para",
"https",
"carreira",
"suas",
"metas",
"meta",
"como",
"comprometimento",
"ponto",
"hoje"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/comprometimento-com-suas-metas"
}
},
{
"id": "0c618201eec34b47",
"url": "https://devpleno.com/blog/audio-com-js-puro/index",
"title": "Tocando um Áudio com JS puro (Part 1)",
"content": "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.\n\nA 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).\n\n```jsx\n\n \n Audio\n \n\n \n
Audio
\n\n \n \n\n```\n\nNo 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.\n\nEm 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.\n\n```jsx\n\n \n Audio\n \n\n \n
Audio
\n\n \n \n\n \n \n\n```\n\nOutra 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:\n\n```jsx\naudio.currentTime = 0.1\n```\n\nDentro 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.",
"keywords": [
"audio",
"udio",
"para",
"play",
"html",
"button",
"head",
"tittle",
"body",
"embed"
],
"metadata": {
"title": "Tocando um Áudio com JS puro",
"date": "2017-05-24",
"tags": "['Javascript']",
"thumbnail": "AUDIO-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/audio-com-js-puro/index.md"
}
},
{
"id": "0caa99d423100dbe",
"url": "https://devpleno.com/lista-encadeada-retornar-um-item",
"title": "Lista encadeada - Como retornar um item - DevPleno (Part 3)",
"content": "[](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)",
"description": "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çã...",
"keywords": [
"node",
"retornar",
"index",
"return",
"lista",
"length",
"value",
"null",
"ndice",
"encadeada"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/lista-encadeada-retornar-um-item"
}
},
{
"id": "0cf1efb9ab22c1cc",
"url": "https://devpleno.com/blog/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas/index",
"title": "NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!",
"keywords": [
"embed",
"responsive",
"https",
"classname",
"iframe",
"youtube",
"devpleno",
"facebook",
"neste",
"nodejs"
],
"metadata": {
"title": "NodeJS Primeiros Passos: Async - Como Controlar Operações Assíncronas",
"date": "2016-08-12",
"tags": "['Javascript', 'Fundamentos', 'NodeJS']",
"thumbnail": "Async.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/nodejs-primeiros-passos-async-como-controlar-operacoes-assincronas/index.md"
}
},
{
"id": "0d2b560b682687a1",
"url": "https://devpleno.com/sua-carreira-pode-mudar-durante-o-carnaval",
"title": "Sua carreira pode mudar durante o carnaval? - DevPleno (Part 1)",
"content": "Carreira\n\n## Sua carreira pode mudar durante o carnaval?\n\nT\nPor Tulio Faria • 1 de março de 2019\n\n[Carreira](/tag/carreira)\n\nGeralmente, acredita-se que não… Afinal de contas, carnaval, feriado, festas, bebedeira, ninguém quer se preocupar com carreira ou trabalho. Não é verdade?\n\nBom, pelo menos muita coisa mudou em minha carreira a partir de uma terça feira de carnaval. Estranho isso, né?\n\nToda 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. :)\n\nSó 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…\n\nNeste 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. ;)\n\nFoi quando recebi o e-mail desta foto:\n\nSim, uma pessoa que eu havia sido apresentado há 2 anos, lembrou-se de que eu poderia ajudá-la em um projeto.\n\nE 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).\n\nRelembrando este acontecimento, eu consegui desconstruir vários pontos interessantes que gostaria de compartilhar com vocês:\n\n**Network não acontece do dia para a noite!**",
"description": "Geralmente, acreditase que não… Afinal de contas, carnaval, feriado, festas, bebedeira, ninguém quer se preocupar com carreira ou trabalho. Não é verdade? ...",
"keywords": [
"carreira",
"carnaval",
"para",
"minha",
"estava",
"durante",
"mudan",
"feira",
"isso",
"havia"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/sua-carreira-pode-mudar-durante-o-carnaval"
}
},
{
"id": "0d2c6e1876efc939",
"url": "https://devpleno.com/blog/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar/index",
"title": "A habilidade mais importante que um programador deveria ter (e praticar) (Part 3)",
"content": "**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).\n\n# Antes de encerrar, procure por perguntas de outras pessoas / empresas\n\nMuitas 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.",
"keywords": [
"perguntas",
"resultado",
"para",
"rios",
"perguntar",
"processo",
"como",
"solu",
"muito",
"crit"
],
"metadata": {
"title": "A habilidade mais importante que um programador deveria ter (e praticar)",
"date": "2021-05-13",
"tags": "['Carreira']",
"thumbnail": "perguntas-thumb.jpg",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "blog/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar/index.md"
}
},
{
"id": "0d2fa4e81d650ac0",
"url": "https://devpleno.com/blog/como-aumentar-a-produtividade/index",
"title": "Como aumentar a produtividade diminuindo a troca de contexto (Part 2)",
"content": "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!",
"keywords": [
"como",
"projetos",
"tempo",
"mudan",
"forma",
"vscode",
"mais",
"embed",
"sublime",
"isso"
],
"metadata": {
"title": "Como aumentar a produtividade diminuindo a troca de contexto",
"date": "2017-05-23",
"tags": "['Carreira']",
"thumbnail": "PRODUTIVIDADE-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/como-aumentar-a-produtividade/index.md"
}
},
{
"id": "0d5302f739417644",
"url": "https://devpleno.com/listar-arquivos-em-js",
"title": "Listar arquivos em JS (async, await, promise e Promise.all) - DevPleno (Part 4)",
"content": "const stats = paths.map(async (path) => await stat(path))\nconst stats = await Prmise.all(statsPromises)\nOnde 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).\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"stat",
"path",
"paths",
"await",
"const",
"arquivos",
"promise",
"async",
"readdir",
"lista"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 4,
"sourcePath": "/listar-arquivos-em-js"
}
},
{
"id": "0d57ad0941fd42ae",
"url": "https://devpleno.com/apresentacao-em-html",
"title": "Apresentação em HTML - DevPleno",
"content": "Javascript\n\n## Apresentação em HTML\n\nT\nPor Tulio Faria • 9 de março de 2017\n\n[Javascript](/tag/javascript)\n\nNeste vídeo, explico como você pode criar apresentação de slides em HTML, uma alternativa às apresentações tradicionais em Power Point!\n\n## Confira o vídeo:\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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: <...",
"keywords": [
"https",
"apresenta",
"html",
"javascript",
"devpleno",
"facebook",
"youtube",
"2fdevpleno",
"2fapresentacao",
"2017"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/apresentacao-em-html"
}
},
{
"id": "0d8e5c3918cc7156",
"url": "https://devpleno.com/gerenciador-de-series-p1",
"title": "Construindo um App gerenciador de séries com ReactJS - DevPleno (Part 5)",
"content": "[](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)",
"description": "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...",
"keywords": [
"react",
"para",
"componente",
"vamos",
"projeto",
"isso",
"muito",
"mais",
"como",
"esse"
],
"metadata": {
"chunkIndex": 4,
"totalChunks": 5,
"sourcePath": "/gerenciador-de-series-p1"
}
},
{
"id": "0e09f44d67a3d8e5",
"url": "https://devpleno.com/hands-on-nodejs-pm2",
"title": "Hands-on: NodeJS - PM2 - DevPleno",
"content": "Javascript\n\n## Hands-on: NodeJS - PM2\n\nT\nPor Tulio Faria • 24 de fevereiro de 2017\n\n[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)\n\nVocê 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.:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"https",
"nodejs",
"javascript",
"hands",
"para",
"devpleno",
"facebook",
"2fdevpleno",
"2fhands",
"2017"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/hands-on-nodejs-pm2"
}
},
{
"id": "0e36090eebd5d293",
"url": "https://devpleno.com/blog/integridade/index",
"title": "Mantenha sua Integridade - Dica de carreira DevPleno",
"content": "Você sabe o que é integridade?\n\nNa 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.\n\nNesse 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.\n\nQuando 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.\n\nConfira o video:\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!",
"keywords": [
"integridade",
"professor",
"embed",
"parte",
"mail",
"essa",
"momento",
"ntegro",
"responsive",
"https"
],
"metadata": {
"title": "Mantenha sua Integridade - Dica de carreira DevPleno",
"date": "2017-07-26",
"tags": "['Carreira']",
"thumbnail": "Integridade.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/integridade/index.md"
}
},
{
"id": "0e7554b210dbd887",
"url": "https://devpleno.com/azure-cognitive-service",
"title": "Classificação de imagens com Azure - DevPleno (Part 2)",
"content": "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:\n\n<script>\nconst btn = document.getElementById('btn')\nconst imgInput = document.getElementById('imgInput')\nconst img = document.getElementById('img')\nconst key = 'keyDoAzure'\nconst azure = axios.create({\nbaseURL:\n'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze',\nheaders: {\n'Content-type': 'application/json',\n'Ocp-apim-Subscription-Key': key\n}\n})\n\nimgInput.addEventListener('blur', () => {\nimg.src = imgInput.value\n})\n\nbtn.addEventListener('click', () => {\nazure\n.post(\n'?visualFeactures=Categories,Description,Color&details=&language=en',\n{ url: imgInput.value }\n)\n.then((data) => {\nconsole.log(data)\n})\n})\n</script>\nAo 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.\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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ã...",
"keywords": [
"https",
"imagem",
"imginput",
"para",
"axios",
"script",
"azure",
"vamos",
"const",
"type"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/azure-cognitive-service"
}
},
{
"id": "0e7856a25bff18d4",
"url": "https://devpleno.com/arrow-functions",
"title": "Arrow Functions - Construindo funções anônimas de forma mais simplificada - DevPleno (Part 1)",
"content": "Fundamentos\n\n## Arrow Functions - Construindo funções anônimas de forma mais simplificada\n\nT\nPor Tulio Faria • 2 de agosto de 2017\n\n[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)\n\nAs 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:\n\nconst funct1 = function (param1) {}\nSe fossemos construir isso com uma Arrow Function, poderíamos fazer simplesmente isso:\n\nconst funct1 = (param) => {}\n**Por que ela se chama Arrow Function?**\n\nPorque 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:\n\nconst2 = function (valor) {\nreturn valor * 2\n}\nSe quisermos criar uma Arrow Function nesse sentido, precisamos passar também o valor, mas podemos fazer apenas isso:\n\nconst funct2 = (valor) => valor * 2\nChamamos 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:\n\nconst vetor = [1, 2, 3]\n\nvetor.map((valor) => valor * 2)\nA ú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:",
"description": "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...",
"keywords": [
"arrow",
"function",
"dentro",
"this",
"contexto",
"valor",
"isso",
"https",
"mais",
"functions"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/arrow-functions"
}
},
{
"id": "0eab24097fd6b28b",
"url": "https://devpleno.com/chocolatey",
"title": "Chocolatey - Gerenciador de Pacotes para Windows - DevPleno (Part 2)",
"content": "[](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)",
"description": "Essa dica é para você utiliza o windows para desenvolvimento: um package manenger chamado chocolatey, semelhante ao yum. Ele facilita bastante quando vamos...",
"keywords": [
"para",
"https",
"chocolatey",
"instalar",
"install",
"nodejs",
"javascript",
"pacotes",
"vamos",
"depend"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/chocolatey"
}
},
{
"id": "0ec4f91381f3facf",
"url": "https://devpleno.com/hands-on-pkg",
"title": "PKG - Transforme seu aplicativo Node em executável - DevPleno (Part 2)",
"content": "pkg . (pkg ponto)\nCom 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.\n\nLembrando 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.”\n\nAssim, 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.\n\nConfira o video:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "Use o PKG para compilar seu app Node.js em executável para Windows, Mac e Linux. Tutorial passo a passo com exemplos.",
"keywords": [
"para",
"express",
"aplicativo",
"node",
"https",
"podemos",
"este",
"package",
"execut",
"isso"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/hands-on-pkg"
}
},
{
"id": "0f6518d39cce4bab",
"url": "https://devpleno.com/microfone-pelo-navegador",
"title": "Capturando áudio do microfone pelo Navegador - DevPleno (Part 1)",
"content": "Javascript\n\n## Capturando áudio do microfone pelo Navegador\n\nT\nPor Tulio Faria • 13 de novembro de 2017\n\n[Javascript](/tag/javascript)\n\nHoje eu quero mostrar como podemos capturar um áudio do microfone pelo navegador.\n\nDa onde surgiu essa ideia?\n\nNó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.\n\nPrimeiramente vamos acessar o jQuery CDN para conseguirmos copiar o link do jQuery.\n\nVamos criar um arquivo index.html bem rápido, apenas para começarmos o nosso exemplo:\n\n<html>\n<body>\n<script\nsrc='https://code.jquery.com/jquery-3.2.1.slim.js'\nintegrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='\ncrossorigin='anonymous'\n></script>\n</body>\n</html>\nVou criar um script que vai dentro do próprio body, já que o que importa mesmo é o que estamos executando:\n\n<script>\n$(function()\n{navigator.mediaDevices.getUserMedia({ audio: true }).then(\n(stream) => {\nconsole.log(stream)\n},\n(err) => {\nconsole.log(err)\n}\n)})\n</script>\nQuando temos o getUserMedia, temos uma promise e essa promise pode ser resolvida tendo o stream ou tendo um erro.\n\nRepare 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:\n\n}, err =>{\n$('body').append('<p>Você deve permitir o áudio</p>')\n})\n\nEu sempre gosto de definir um mediaRecorder, assim, quando o stream for criado, é criado junto o mediaRecorder:",
"description": "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...",
"keywords": [
"mediarecorder",
"para",
"audio",
"stream",
"reader",
"udio",
"podemos",
"script",
"https",
"isso"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/microfone-pelo-navegador"
}
},
{
"id": "0f8600826f0d0f19",
"url": "https://devpleno.com/azure-cognitive-service",
"title": "Classificação de imagens com Azure - DevPleno (Part 1)",
"content": "Javascript\n\n## Classificação de imagens com Azure\n\nT\nPor Tulio Faria • 30 de novembro de 2017\n\n[Javascript](/tag/javascript)\n\nNa 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.\n\nVamos utilizar a API Azure Computer Vídeo. Como pegamos uma key dessa API?\n\nSe 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.\n\nNovamente no Google, vamos procurar o ‘axios http’ e importá-lo utilizando a CDN:\n\n<script src='https://unpkg.com/axios/dist/axios.min.js'></script>\nAgora, 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:\n\n<html>\n<head>\n<title>Image</title>\n</head>\n\n<body>\n<input\ntype=\"text\"\nid=\"imgInput\"\nvalue=\"https://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png\"\n/>\n<input type=\"button\" id=\"btn\" value=\"Analisar imagem\" />\n<img src=\"\" id=\"img\" />\n\n<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>\n<script>\nconst imgInput = document.getElementById('img')\nconst img = document.getElementById('img')\nimgInput.addEventListener('blur', () => (img.src = imgInput.value))\n</script>\n</body>\n</html>\nAssim 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.",
"description": "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ã...",
"keywords": [
"https",
"imagem",
"imginput",
"para",
"axios",
"script",
"azure",
"vamos",
"const",
"type"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/azure-cognitive-service"
}
},
{
"id": "0f8d83239c56e714",
"url": "https://devpleno.com/promises",
"title": "NodeJS Primeiros Passos - Promises - DevPleno (Part 2)",
"content": "function readArquivo1(){\n... <linha1>\nfs.readFile('arquivo1.txt', 'utf8', function(err, arquivo1){\n});\n...< linha 2>\n}\nNão é muito bem isso que queremos, afinal queremos um atrás do outro, então podemos fazer o seguinte:\n\nfunction readArquivo1() {\nvar deferred = '.defer()'\nfs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {\ndeferred.resolve(arquivo1)\n})\nreturn deferred.promise\n}\nPerceba 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):\n\nfunction readArquivo1() {\nvar deferred = '.defer()'\nfs.readFile('arquivo1.txt', 'utf8', function (err, arquivo1) {\ndeferred.resolve(arquivo1)\n})\nreturn deferred.promise\n}\nfunction readArquivo2() {\nvar deferred = '.defer()'\nfs.readFile('arquivo2.txt', 'utf8', function (err, arquivo2) {\ndeferred.resolve(arquivo2)\n})\nreturn deferred.promise\n}\nfunction readArquivo3() {\nvar deferred = '.defer()'\nfs.readFile('arquivo3.txt', arquivo1 + '\\\\n' + arquivo2, function (err) {\ndeferred.resolve()\n})\nreturn deferred.promise\n}\nreadArquivo1().then(function (arquivo1) {\nconsole.log(arquivo1)\n})\nO 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:\n\nvar conteudo = ''\nreadArquivo1()\n.then(function (arquivo1) {\nconteudo += arquivo1\nreturn readArquivo2()\n})\n.then(function (arquivo2) {\nconteudo += arquivo2\nconsole.log(conteudo)\n})\nEntã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.",
"description": "Continuando nosso assunto sobre NodeJS, vamos tratar sobre como podemos organizar o fluxo para que o código fique realmente organizado. Olhe esse exemplo: ...",
"keywords": [
"function",
"arquivo1",
"deferred",
"arquivo2",
"readfile",
"para",
"arquivo",
"digo",
"then",
"conteudo"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "/promises"
}
},
{
"id": "0f918059334d3ef4",
"url": "https://devpleno.com/blog/modulos/index",
"title": "NodeJS Primeiros Passos: Módulo em NodeJS (Part 1)",
"content": "**O que é Módulo em NodeJS?**\n\nÉ 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.\n\nVamos fazer um teste simples apenas para testar o require, que é a forma de importar esse módulo.\n\nCrie um novo arquivo no Node e coloque um nome qualquer, o meu será modulo01.js, esse arquivo será meu módulo, dentro dele terá:\n\n```jsx\nconsole.log('Dentro do modulo')\n```\n\nSalve e crie um novo arquivo chamado app.js. Nele vamos fazer o seguinte:\n\n```jsx\nrequire('./modulo01')\n```\n\nAo executar o app.js, o require chama o modulo01 e apresenta a frase do nosso arquivo modulo01.js\n\nO 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.\n\nPara fazermos uma funcionalidade um pouco melhor, podemos falar para esse módulo exportar, por exemplo, um contar:\n\n```jsx\nvar contador = 0\nmodule.exports.contar = function () {\n contador++\n console.log(contador)\n}\n```\n\nCom isso estamos expondo um pedaço do nosso módulo para o que está externo, criando uma pequena interface chamada contar.\n\nQuando fizermos o require do módulo no app.js, podemos atribuir ele a uma variável:\n\n```jsx\nvar m1 = require('./modulo01')\nm1.contar()\n```\n\nAssim o m1 recebe uma self invoking e conseguimos ter acesso ao contar que expomos para o que está externo.\n\nUm exemplo que podemos fazer é o seguinte:\n\n```jsx\nvar m1 = require('./modulo01')\nm1.contar()\nvar m2 = require('./modulo01')\nm2.contar()\n```\n\nO 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.",
"keywords": [
"function",
"require",
"dulo",
"contar",
"contador",
"para",
"modulo02",
"modulo01",
"isso",
"vamos"
],
"metadata": {
"title": "NodeJS Primeiros Passos: Módulo em NodeJS",
"date": "2017-05-30",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "Modulos.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "blog/modulos/index.md"
}
},
{
"id": "0fa7046e18d054e4",
"url": "https://devpleno.com/confira-4-dicas-de-ux-para-programadores",
"title": "Confira 4 dicas de UX para programadores - DevPleno (Part 2)",
"content": "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!\n\n### User Experience (UX)\n\nTraduzindo 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.\n\nQuanto melhor a experiência, mais bem avaliado o produto é, aumentando as chances de fidelização de clientes.\n\n### User Interface (UI)\n\nPor 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.\n\nPoré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.\n\nPortanto, 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.\n\n## Por que eu preciso entender de UX?\n\nApesar 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.\n\nMuitos 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.",
"description": "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 ...",
"keywords": [
"para",
"ncia",
"mais",
"experi",
"como",
"https",
"produto",
"dicas",
"informa",
"source"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 5,
"sourcePath": "/confira-4-dicas-de-ux-para-programadores"
}
},
{
"id": "0fa967e39a9d009a",
"url": "https://devpleno.com/blog/registros-do-mysql-no-nodejs/index",
"title": "[SEGREDO] Muitos registros do MySQL no NodeJS (Part 3)",
"content": "Veja o vídeo:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"query",
"para",
"connection",
"console",
"fazer",
"mysql",
"dados",
"muito",
"coisa",
"isso"
],
"metadata": {
"title": "[SEGREDO] Muitos registros do MySQL no NodeJS",
"date": "2017-08-18",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "RegistrosMYSQL.png",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "blog/registros-do-mysql-no-nodejs/index.md"
}
},
{
"id": "0fe846c9194a8392",
"url": "https://devpleno.com/blog/generators-functions/index",
"title": "Generators Functions - o que acontece por baixo dos panos (Part 3)",
"content": "```jsx\nconst gen = generator()\nconst iteration = gen.next()\niteration.value.then((val) => {\n gen.next(val)\n})\n```\n\nAssim 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:\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!",
"keywords": [
"generator",
"console",
"next",
"const",
"iteration",
"function",
"para",
"passo",
"value",
"valor"
],
"metadata": {
"title": "Generators Functions - o que acontece por baixo dos panos",
"date": "2017-06-29",
"tags": "['Javascript']",
"thumbnail": "GENERATORS-FUNCTIONS-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "blog/generators-functions/index.md"
}
},
{
"id": "100898af1e053b31",
"url": "https://devpleno.com/blog/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores/index",
"title": "Metodologia ágil: entenda o que é e como se aplica para programadores! (Part 1)",
"content": "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.\n\nEstamos falando sobre a metodologia ágil!\n\nMuito 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.\n\nPara evitar que isso aconteça com você, separamos neste artigo algumas informações úteis para o seu trabalho. Confira!\n\n## O que é uma metodologia ágil?\n\nAntes de sair gritando aos sete ventos sobre métodos ágeis, precisamos entender o que eles são. Concorda?\n\nMetodologias á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.\n\nEsse 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.\n\nAssim, 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.\n\nQuer um exemplo legal?",
"keywords": [
"mais",
"para",
"geis",
"metodologia",
"como",
"cliente",
"todos",
"assim",
"https",
"trabalho"
],
"metadata": {
"title": "Metodologia ágil: entenda o que é e como se aplica para programadores!",
"date": "2017-07-24",
"tags": "['Carreira']",
"thumbnail": "Metodologia.jpg",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 5,
"sourcePath": "blog/metodologia-agil-entenda-o-que-e-e-como-se-aplica-para-programadores/index.md"
}
},
{
"id": "101b0119a2798333",
"url": "https://devpleno.com/express-generator",
"title": "Gere seu projeto em Express - Hands-on: Express-Generator - DevPleno (Part 2)",
"content": "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:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "Neste handson, vamos falar sobre o ExpressGenerator, um gerador de projetos em expressJS. Com ele conseguimos criar a base da nossa aplicação. Primeirament...",
"keywords": [
"para",
"express",
"generator",
"sass",
"https",
"aplica",
"podemos",
"javascript",
"projeto",
"criar"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/express-generator"
}
},
{
"id": "103a15a0fa0a7864",
"url": "https://devpleno.com/blog/hands-on-pre-commit/index",
"title": "Hands-on: Pre-Commit",
"content": "O módulo testado neste post é o Pre-Commit, que nos permite executar tarefas antes de fazer Commit em seus repositórios Git.\n\nAssista o vídeo para entender como funciona:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"embed",
"responsive",
"https",
"youtube",
"commit",
"para",
"classname",
"iframe",
"devpleno",
"facebook"
],
"metadata": {
"title": "Hands-on: Pre-Commit",
"date": "2017-02-24",
"tags": "['Javascript']",
"thumbnail": "PreCommit.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/hands-on-pre-commit/index.md"
}
},
{
"id": "10633821adfebc62",
"url": "https://devpleno.com/hands-on-socket-io-parte-3",
"title": "Hands-on - Socket.io Parte 3 - DevPleno (Part 2)",
"content": "let.counter = 0\nsetInterval(() => io.to('contador'))\nio.to('contador').emit('msg', counter++)\n}, 1000 )\nEssa é 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á.\n\nExistem 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.\n\nConfira o hands-on desta terceira parte também em vídeo:\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"socket",
"para",
"vamos",
"sala",
"mensagem",
"https",
"parte",
"console",
"contador",
"como"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/hands-on-socket-io-parte-3"
}
},
{
"id": "1066014b71ddc0b6",
"url": "https://devpleno.com/blog/audio-com-js-puro/index",
"title": "Tocando um Áudio com JS puro (Part 2)",
"content": "
\n \n
\n\nGostou 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!",
"keywords": [
"audio",
"udio",
"para",
"play",
"html",
"button",
"head",
"tittle",
"body",
"embed"
],
"metadata": {
"title": "Tocando um Áudio com JS puro",
"date": "2017-05-24",
"tags": "['Javascript']",
"thumbnail": "AUDIO-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/audio-com-js-puro/index.md"
}
},
{
"id": "10781d6d5011feab",
"url": "https://devpleno.com/modulos",
"title": "NodeJS Primeiros Passos: Módulo em NodeJS - DevPleno (Part 3)",
"content": "Curta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"function",
"dulo",
"require",
"contar",
"contador",
"para",
"modulo02",
"modulo01",
"nodejs",
"isso"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/modulos"
}
},
{
"id": "10b2bd8352d7cd09",
"url": "https://devpleno.com/blog/request/index",
"title": "Request - Requisições HTTP de forma rápida e simples (Part 2)",
"content": "
\n \n
\n\nDeixe 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.",
"keywords": [
"request",
"para",
"https",
"http",
"require",
"site",
"embed",
"vamos",
"const",
"body"
],
"metadata": {
"title": "Request - Requisições HTTP de forma rápida e simples",
"date": "2017-08-14",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "Request.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/request/index.md"
}
},
{
"id": "10df236730260a9d",
"url": "https://devpleno.com/blog/qual-seu-maior-desafio/index",
"title": "Qual é o seu maior desafio nesse momento? (Part 1)",
"content": "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.\n\n**O que você precisa fazer**\n\nEscreva 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.\n\nPode ficar tranquilo quanto à privacidade, somente eu tenho acesso a este e-mail\n\n**O projeto**\n\nDepois 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.\n\nEntã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.\n\nPosteriormente, 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.\n\nVenho 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.\n\nAceita entrar nesse desafio? Mande seu e-mail!",
"keywords": [
"isso",
"para",
"como",
"quero",
"ajudar",
"fazer",
"mail",
"devpleno",
"pessoas",
"outras"
],
"metadata": {
"title": "Qual é o seu maior desafio nesse momento?",
"date": "2017-05-24",
"tags": "['Carreira']",
"thumbnail": "MaiorDesafio.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/qual-seu-maior-desafio/index.md"
}
},
{
"id": "1122a8f4a8fb9c57",
"url": "https://devpleno.com/devreactjs-lp1",
"title": "Redirecting to: https://lp.devpleno.com/devreactjs/",
"content": "Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-lp1 to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)",
"keywords": [
"devreactjs",
"https",
"devpleno",
"redirecting",
"from"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/devreactjs-lp1"
}
},
{
"id": "1138191c33128b87",
"url": "https://devpleno.com/blog/termos-de-uso/index",
"title": "Termos de uso (Part 5)",
"content": "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. \nO acesso ao DevPleno representa a aceitação expressa e irrestrita dos termos de uso acima descritos.",
"keywords": [
"devpleno",
"informa",
"site",
"qualquer",
"acesso",
"termos",
"servi",
"website",
"para",
"direitos"
],
"metadata": {
"title": "Termos de uso",
"date": "2017-03-14",
"tags": "[]",
"author": "Tulio Faria",
"internal": "true",
"chunkIndex": 4,
"totalChunks": 5,
"sourcePath": "blog/termos-de-uso/index.md"
}
},
{
"id": "1140580af64f1be8",
"url": "https://devpleno.com/blog/closures-e-escopos/index",
"title": "NodeJS Primeiros Passos: Closures e Escopos",
"content": "Neste vídeo é abordado mais sobre closures e escopos em javascript, conceitos bastante importantes para a criação futura de módulos.\n\n[Código fonte:](https://gist.github.com/tuliofaria/72953c6c4b898561aee5e8d91dd589ab)\n\n## Confira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"https",
"embed",
"responsive",
"youtube",
"para",
"class",
"iframe",
"devpleno",
"facebook",
"neste"
],
"metadata": {
"title": "NodeJS Primeiros Passos: Closures e Escopos",
"date": "2016-07-26",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "ESCOPUS-E-CLOSURES-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/closures-e-escopos/index.md"
}
},
{
"id": "1147c4502dc5fd31",
"url": "https://devpleno.com/blog/termos-de-uso/index",
"title": "Termos de uso (Part 4)",
"content": "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. \nAs 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. \nO 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. \nAs 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.\n\n## Reclamações sobre violação de direitos autorais\n\nO 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.\n\n## Leis aplicáveis",
"keywords": [
"devpleno",
"informa",
"site",
"qualquer",
"acesso",
"termos",
"servi",
"website",
"para",
"direitos"
],
"metadata": {
"title": "Termos de uso",
"date": "2017-03-14",
"tags": "[]",
"author": "Tulio Faria",
"internal": "true",
"chunkIndex": 3,
"totalChunks": 5,
"sourcePath": "blog/termos-de-uso/index.md"
}
},
{
"id": "11d2aef49dacbafa",
"url": "https://devpleno.com/blog/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar/index",
"title": "A habilidade mais importante que um programador deveria ter (e praticar) (Part 2)",
"content": "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.\n\nIsso ainda vai te ajudar a solucionar problemas de uma maneira bastante inteligente, visto que cada nova decisão estará pautada.\n\n# Como exercitar \"perguntar\" na prática?\n\n**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:\n\n- Qual o motivo de fazerem desta maneira?\n- Será que fazem o que estão dizendo?\n\n**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.\n\nA 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.\n\n**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.\n\nFazemos 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.",
"keywords": [
"perguntas",
"resultado",
"para",
"rios",
"perguntar",
"processo",
"como",
"solu",
"muito",
"crit"
],
"metadata": {
"title": "A habilidade mais importante que um programador deveria ter (e praticar)",
"date": "2021-05-13",
"tags": "['Carreira']",
"thumbnail": "perguntas-thumb.jpg",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "blog/a-habilidade-mais-importante-que-um-programador-deveria-ter-e-praticar/index.md"
}
},
{
"id": "1205d7f82fe92aab",
"url": "https://devpleno.com/blog/tenha-cicatrizes/index",
"title": "Tenha cicatrizes (Part 1)",
"content": "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 :)\n\nEssa é uma expressão que eu ouvi em um evento e que faz total sentido.\n\nO que significa ter cicatrizes?\n\nÉ 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.\n\nArrisque 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.\n\nQuando 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.\n\nEssas 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.",
"keywords": [
"mais",
"para",
"cicatrizes",
"carreira",
"construir",
"embed",
"isso",
"fazer",
"responsive",
"https"
],
"metadata": {
"title": "Tenha cicatrizes",
"date": "2017-09-05",
"tags": "['Carreira']",
"thumbnail": "Cicatrizes.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/tenha-cicatrizes/index.md"
}
},
{
"id": "1234956ee5e84569",
"url": "https://devpleno.com/currying",
"title": "Currying - Uma técnica interessante usada em programação funcional - DevPleno (Part 1)",
"content": "Javascript\n\n## Currying - Uma técnica interessante usada em programação funcional\n\nT\nPor Tulio Faria • 26 de maio de 2017\n\n*\n\n[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)\n\nO 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).*\n\nfunction func(valor1, valor2) {\nreturn valor1 + valor2\n}\n\nconsole.log('normal', func1(1, 2))\nA ú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.\n\nEssa 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.\n\nfunction func2(valor1){\nreturn function(valor2){\nreturn valor1+valor2\n}\n}\n\nconst func2Valor1 = func2(10)\n\nconsole.log('curried', func2Valor1(20)\nSuponhamos 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.\n\nVamos 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.\n\nQuando 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:",
"description": "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,...",
"keywords": [
"function",
"valor1",
"valor2",
"curried",
"https",
"currying",
"valores",
"return",
"valor",
"isso"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/currying"
}
},
{
"id": "123ca768cfd8cbd5",
"url": "https://devpleno.com/blog/evite-o-this-em-js/index",
"title": "Evite o this em JavaScript (Part 2)",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"node",
"props",
"this",
"utilizar",
"componente",
"span",
"mais",
"forma",
"para",
"isso"
],
"metadata": {
"title": "Evite o this em JavaScript",
"date": "2017-07-03",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "javascript-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/evite-o-this-em-js/index.md"
}
},
{
"id": "1291c370b4167877",
"url": "https://devpleno.com/2-tipos-de-solucoes-de-software-que-voce-pode-entregar",
"title": "2 Tipos de Soluções de Software que você pode entregar - DevPleno (Part 2)",
"content": "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?\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"cliente",
"entregar",
"software",
"quer",
"para",
"precisa",
"https",
"mais",
"quando",
"solu"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/2-tipos-de-solucoes-de-software-que-voce-pode-entregar"
}
},
{
"id": "12a77d6bd25159df",
"url": "https://devpleno.com/blog/javascript-apply/index",
"title": "JavaScript: Apply (Part 1)",
"content": "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.\n\n```jsx\nfunction funTeste(at1, at2) {\n console.log(this, at1, at2)\n}\nfunTeste(1, 2)\n```\n\nPorém, ao invés defazer funTeste e executar, podemos fazer um apply, e dentro dele podemos fazer, por exemplo:\n\n```jsx\nfunTeste.apply(1, [2, 3])\n```\n\nO 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.\n\nSe 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.\n\nMais alguns testes seguindo essa ideia:\n\n```jsx\nfunction funTeste(at1, at2) {\n console.log(this, at1, at2)\n}\nconsole.log(Math.min(98, 78, 50))\n```\n\nAo executar o número retornado, será 50, pois 50 é o menor valor daquele conjunto de dados.\n\n**O interessante no apply**\n\nNote 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.\n\nExemplo: Vamos passar um vetor em que quero descobrir o menor dos valores. A forma mais fácil é utilizando o apply.\n\n```jsx\nfunction funTeste(at1, at2) {\n console.log(this, at1, at2)\n}\nconst vetor1 = [89, 70, 50, 48]\nconsole.log(Math.min.apply(Math, vetor1))\n```\n\nO Math é o meu this, pois o que estiver dentro dele como contexto está ótimo.\n\nPodemos fazer a mesma coisa com o valor máximo apenas trocando o min por max:\n\n```jsx\nconsole.log(Math.max.apply(Math, vetor1))\n```",
"keywords": [
"apply",
"funteste",
"como",
"podemos",
"para",
"this",
"console",
"math",
"fazer",
"contexto"
],
"metadata": {
"title": "JavaScript: Apply",
"date": "2017-05-24",
"tags": "['Javascript']",
"thumbnail": "Apply.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/javascript-apply/index.md"
}
},
{
"id": "13477f7e872d3161",
"url": "https://devpleno.com/carreira-voce-e-o-passageiro-da-sua-vida",
"title": "Carreira: Você é o passageiro da sua Vida? - DevPleno",
"content": "Carreira\n\n## Carreira: Você é o passageiro da sua Vida?\n\nT\nPor Tulio Faria • 27 de março de 2017\n\n[Carreira](/tag/carreira)\n\nVocê está levando sua vida para alcançar seus objetivos?\n\nVocê está sendo o motorista ou passageiro na sua própria vida?\n\nConfira o vídeo:\n\nNã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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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 const play = constGetElementById('play')\n\n let timer = null\n\n let currentAudio = 0\n\n const bpm = 90\n\n const music = \\[\n \\['bumbo', 'bumbo', 'bumbo', 'bumbo', \\],\n \\['prato', 'prato-fechado', 'boca', 'caixa'\\]\n \\]\n\n function tick(){\n const current = (music\\[(currentAudio++)%music\\[0\\].length\\]\n\n const audioID1 = music\\[0\\]\\[current\\]\n\n const audioID2 = music\\[1\\]\\[current\\]\n\n const audio1 = document.getElementById(audioID1)\n\n audio1.play()\n\n audio1.currentTime = 0\n\n const audio2 = document.getElementById(audioID2)\n\n audio2.play()\n\n audio2.currentTime = 0\n }\n\n play.addEventListener('click', function(){\n timer = setInterval(tick, (60*1000/bpm)\n })\n\n```\n\nVocê pode baixar os arquivos de áudio aqui: [Download](https://goo.gl/zHKuad)\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!",
"keywords": [
"play",
"const",
"audio",
"music",
"para",
"prato",
"bumbo",
"tick",
"currentaudio",
"vamos"
],
"metadata": {
"title": "Como construir um beatbox com JavaScript",
"date": "2017-05-29",
"tags": "['Javascript']",
"thumbnail": "BEATBOX-MANIPULÁVEL-COM-JS-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/beatbox-com-javascript/index.md"
}
},
{
"id": "14035503dd1426a2",
"url": "https://devpleno.com/hr2",
"title": "Redirecting to: https://go.devpleno.com/fsm",
"content": "Redirecting to: https://go.devpleno.com/fsm [Redirecting from /hr2 to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)",
"keywords": [
"https",
"devpleno",
"redirecting",
"from"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/hr2"
}
},
{
"id": "1431601bdfb6ece5",
"url": "https://devpleno.com/hands-injecao-de-dependencia-e-bom-mesmo",
"title": "Hands-on: Injeção de Dependência é bom mesmo? - DevPleno",
"content": "Javascript\n\n## Hands-on: Injeção de Dependência é bom mesmo?\n\nT\nPor Tulio Faria • 17 de abril de 2017\n\n[Javascript](/tag/javascript)\n\nMuitas 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.\n\nConfira o video:\n\nNã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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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 ...",
"keywords": [
"https",
"ncia",
"javascript",
"inje",
"depend",
"mesmo",
"ainda",
"hands",
"sobre",
"para"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/hands-injecao-de-dependencia-e-bom-mesmo"
}
},
{
"id": "145e1e460e10db59",
"url": "https://devpleno.com/handsonreact-wpp",
"title": "Redirecting to: /",
"content": "Redirecting to: / [Redirecting from /handsonreact-wpp to /](/)",
"keywords": [
"redirecting",
"from",
"handsonreact"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/handsonreact-wpp"
}
},
{
"id": "147340c00e21979d",
"url": "https://devpleno.com/nodejs-primeiros-passos-async-map",
"title": "NodeJS Primeiros Passos: Async - Map - DevPleno",
"content": "Javascript\n\n## NodeJS Primeiros Passos: Async - Map\n\nT\nPor Tulio Faria • 17 de agosto de 2016\n\n[Javascript](/tag/javascript)[Fundamentos](/tag/fundamentos)[NodeJS](/tag/nodejs)\n\nNeste 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.\n\nConfira o video:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"https",
"nodejs",
"javascript",
"primeiros",
"passos",
"async",
"fundamentos",
"neste",
"devpleno",
"facebook"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/nodejs-primeiros-passos-async-map"
}
},
{
"id": "147c857382a73432",
"url": "https://devpleno.com/standard-parte-1",
"title": "Standard - Padronize o código fonte JavaScript da sua equipe - DevPleno (Part 1)",
"content": "Javascript\n\n## Standard - Padronize o código fonte JavaScript da sua equipe\n\nT\nPor Tulio Faria • 24 de julho de 2017\n\n[Javascript](/tag/javascript)\n\nO 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:\n\nif (i === 1) {\n}\nCom 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.\n\nNo caso do Standart, ele tem uma ferramente que checa o código. Para usar, primeiramente tem que dar um npm:\n\nnpm install -g standard\nQuando 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:\n\nEntã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:\n\nlet i = 0\nif (i === 1) {\n}\nAo rodar, percebam que já diminuiu um bug:\n\nAgora temos um espaço vazio na linha 3\n\nlet i = 0\nif (i === 1) {\nconsole.log(1)\n}\nE 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.\n\nUma coisa que dá bastante discussão é onde colocar a abertura da chave. Se você colocar na linha de baixo, ele irá dar um erro:\n\nif (i === 1) {\nconsole.log(1)\n}",
"description": "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 ...",
"keywords": [
"digo",
"javascript",
"standard",
"para",
"https",
"temos",
"nosso",
"resolver",
"isso",
"linha"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/standard-parte-1"
}
},
{
"id": "14cee0dcb76fe516",
"url": "https://devpleno.com/renderizar-estruturas-em-formato-de-arvore",
"title": "ReactJS Recursivo? - DevPleno (Part 3)",
"content": "const Node = (props) => {\nreturn (\n<span>\n{props.node.l && props.node.r && <span>(</span>}\n{props.node.l && <Node node={props.node.l} />}\n{props.node.v}\n{props.node.l && props.node.r && <span>)</span>}\n</span>\n)\n}\nUma coisa interessante é que se fizermos um inspect no browser e usar o react dev tools é possível ver toda a estrutura sendo criada.\n\nFizemos 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.\n\nConfira todos os passos no vídeo:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"node",
"props",
"span",
"lado",
"vamos",
"para",
"renderizar",
"fazer",
"isso",
"react"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/renderizar-estruturas-em-formato-de-arvore"
}
},
{
"id": "1512f5b6468a84a5",
"url": "https://devpleno.com/blog/como-gerar-um-array-populado-em-javascript/index",
"title": "Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos (Part 1)",
"content": "É muito comum durante a solução de alguns problems com algorítmos de precisarmos de um array com valores padrão já inseridos.\n\nInclusive para gerar dados de testes. E podemos gerar o array com os mais diversos valores, como números, strings e até mesmo objetos.\n\n## O bom e velho `for`\n\nA forma mais tradicional de fazer esta tarefa é utilizar o bom e velho `for`. Sem muitos segredos, podemos fazer o seguinte:\n\n```javascript\nconst array = []\nconst size = 10\nfor (let i = 0; i < size; i++) {\n array.push(i)\n}\n// array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n```\n\nDesta maneira podemos inclusive criar valores diferentes de inteiros, por exemplo:\n\n```javascript\nconst names = []\nconst size = 7\nfor (let i = 0; i < size; i++) {\n names.push({\n id: i,\n name: `Name ${i}`\n })\n}\n/*\nnames = \n 0: {id: 0, name: \"Name 0\"}\n 1: {id: 1, name: \"Name 1\"}\n 2: {id: 2, name: \"Name 2\"}\n 3: {id: 3, name: \"Name 3\"}\n 4: {id: 4, name: \"Name 4\"}\n 5: {id: 5, name: \"Name 5\"}\n 6: {id: 6, name: \"Name 6\"}\n*/\n```\n\nUma versão alternativa:\n\n```javascript\nconst size = 7\nconst names = new Array(size)\n\nfor (let i = 0; i < size; i++) {\n names[i] = {\n id: i,\n name: `Name ${i}`\n }\n}\n/*\nnames = \n 0: {id: 0, name: \"Name 0\"}\n 1: {id: 1, name: \"Name 1\"}\n 2: {id: 2, name: \"Name 2\"}\n 3: {id: 3, name: \"Name 3\"}\n 4: {id: 4, name: \"Name 4\"}\n 5: {id: 5, name: \"Name 5\"}\n 6: {id: 6, name: \"Name 6\"}\n*/\n```\n\n## Array.fill\n\nOutra 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.\n\n```javascript\nconst array = new Array(15).fill('valor')\n// array = [\"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\", \"valor\"]\n```",
"description": "Aprenda 5 formas de gerar arrays populados em JavaScript: Array.from, fill, spread, map e mais. Exemplos práticos para copiar e usar.",
"keywords": [
"name",
"array",
"valor",
"person",
"const",
"javascript",
"fill",
"people",
"forma",
"size"
],
"metadata": {
"title": "Como Criar e Popular Arrays em JavaScript: 5 Formas com Exemplos",
"description": "Aprenda 5 formas de gerar arrays populados em JavaScript: Array.from, fill, spread, map e mais. Exemplos práticos para copiar e usar.",
"date": "2021-07-25",
"tags": "['Javascript']",
"thumbnail": "array-javascript.jpg",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/como-gerar-um-array-populado-em-javascript/index.md"
}
},
{
"id": "1537b3ddead20344",
"url": "https://devpleno.com/blog/modulos/index",
"title": "NodeJS Primeiros Passos: Módulo em NodeJS (Part 3)",
"content": "Confira a explicação completa em vídeo:\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!",
"keywords": [
"function",
"require",
"dulo",
"contar",
"contador",
"para",
"modulo02",
"modulo01",
"isso",
"vamos"
],
"metadata": {
"title": "NodeJS Primeiros Passos: Módulo em NodeJS",
"date": "2017-05-30",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "Modulos.png",
"author": "Tulio Faria",
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "blog/modulos/index.md"
}
},
{
"id": "153e7cc8794bb84b",
"url": "https://devpleno.com/blog/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador/index",
"title": "Trabalhar como freelancer: 7 sites para conseguir jobs como programador (Part 1)",
"content": "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.\n\nTrabalhar 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.\n\n> 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.\n\nReuni 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.\n\n## 1. Toptal\n\nA [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.\n\nOs 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.\n\n**Ideal para:** devs com experiência sólida que querem projetos de alto nível pagos em dólar.\n\n## 2. Upwork",
"description": "Conheça 7 plataformas para encontrar trabalho como programador freelancer, incluindo Toptal, Upwork e 99Freelas. Dicas para come��ar.",
"keywords": [
"para",
"projetos",
"mais",
"https",
"plataforma",
"come",
"freelancer",
"ideal",
"como",
"experi"
],
"metadata": {
"title": "Trabalhar como freelancer: 7 sites para conseguir jobs como programador",
"description": "Conheça 7 plataformas para encontrar trabalho como programador freelancer, incluindo Toptal, Upwork e 99Freelas. Dicas para come��ar.",
"date": "2026-04-04",
"tags": "['Carreira']",
"thumbnail": "Freelancers.jpg",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 4,
"sourcePath": "blog/trabalhar-como-freelancer-7-sites-para-conseguir-jobs-como-programador/index.md"
}
},
{
"id": "1587a2474fbd0270",
"url": "https://devpleno.com/injecao-de-dependencia",
"title": "Injeção de dependência - Aumente a testabilidade do seu código - DevPleno (Part 2)",
"content": "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:\n\nfunction valina(um) {\nif (num > 100) {\nalert('erro')\nreturn false\n}\nreturn true\n}\nSe 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.\n\nO que podemos fazer?\n\nSe 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.\n\nfunction valina(um) {\nif (num > 100) {\nalert('erro')\nreturn false\n}\nreturn true\n}\n\nconst assert = require('assert')\ndescribe('validations', () => {\nit('should return false and an error if num gt 100', () => {\nconst fakeAlert = (msg) => {\nassert.equal(msg, 'erro')\n}\nconst returnedValue = valida(fakeAlert, 101)\nassert.equal(returnedValue, false)\n})\n})\nPerceba 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.\n\nVamos 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.",
"description": "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...",
"keywords": [
"alert",
"para",
"digo",
"model",
"depend",
"quando",
"ncia",
"vamos",
"temos",
"return"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "/injecao-de-dependencia"
}
},
{
"id": "158b0c16dfac7106",
"url": "https://devpleno.com/blog/aplicacao-web/index",
"title": "Aplicação Web - Entendendo Back-end e Front-end (Part 1)",
"content": "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.\n\n**O que é back-end?**\n\nSão todas as tecnologias que rodam em um \"Servidor\", uma ou mais maquinas.\n\n**E o front-end?**\n\nEle é tudo que roda do lado cliente, ou seja, o que o usuário final vê.\n\nPara 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).\n\nA primeira comunicação sempre é feita do Front-end para o Beck-end. Por exemplo, ao entrar no site [www.devpleno.com]\n(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.\n\n**Quais tecnologias temos para cada tipo?**\n\nAlgumas 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.\n\nJa 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.",
"keywords": [
"front",
"para",
"tecnologias",
"server",
"side",
"back",
"lado",
"temos",
"devpleno",
"https"
],
"metadata": {
"title": "Aplicação Web - Entendendo Back-end e Front-end",
"date": "2017-05-12",
"tags": "['Fundamentos']",
"thumbnail": "APLICAÇÃO-WEB-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/aplicacao-web/index.md"
}
},
{
"id": "15bca93eb38b1474",
"url": "https://devpleno.com/precificacao-de-softwares-voce-sabe-como-fazer",
"title": "Precificação de softwares: você sabe como fazer? - DevPleno (Part 2)",
"content": "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.\n\n## Quais os critérios para precificar um software?\n\nAlé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:\n\n### Tempo\n\nA 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.\n\nPara 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.\n\nAlé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.\n\n### Disponibilidade\n\nA 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.\n\nNesse ponto, há um porém: existem momentos em que há poucos projetos, mas porque são períodos de transição de trabalhos.\n\n### Nível de experiência",
"description": "Um dos desafios de quem trabalha na área de tecnologia, especificamente em desenvolvimento de programas, é a precificação de softwares. Por envolver ativos...",
"keywords": [
"para",
"como",
"software",
"valor",
"mais",
"ncia",
"hora",
"tamb",
"seus",
"trabalho"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 5,
"sourcePath": "/precificacao-de-softwares-voce-sabe-como-fazer"
}
},
{
"id": "1631753c7eb0c674",
"url": "https://devpleno.com/algoritmo-campo-minado-minesweeper",
"title": "Algoritmos: Campo Minado (Minesweeper) - DevPleno (Part 2)",
"content": "do{\nline = lines\\[current++\\]\nlet nums = line.split(' ')\nif(nums.length===2){\nconst numLines = parseInt(nums\\[0\\])\nconst numCols = parseInt(nums\\[1\\])\nif(numLines!==0 && numCols!==0){\nconsole.log('Field #'+currentField+':')\nminesweeper(lines.slice(current, current+numLines), numCols)\ncurrentField++\n}\n}\n}while(line !== '0 0')\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"filledfield",
"numcols",
"minesweeper",
"line",
"algoritmos",
"https",
"campo",
"minado",
"const",
"current"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/algoritmo-campo-minado-minesweeper"
}
},
{
"id": "1682f6d565c026c3",
"url": "https://devpleno.com/devreactjs-espera",
"title": "Redirecting to: https://lp.devpleno.com/devreactjs/",
"content": "Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-espera to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)",
"keywords": [
"devreactjs",
"https",
"devpleno",
"redirecting",
"from",
"espera"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/devreactjs-espera"
}
},
{
"id": "1693eed7fa4972ba",
"url": "https://devpleno.com/participacao-em-eventos-e-comunidades",
"title": "Participação em Eventos e Comunidades - DevPleno (Part 1)",
"content": "Carreira\n\n## Participação em Eventos e Comunidades\n\nT\nPor Tulio Faria • 19 de julho de 2017\n\n[Carreira](/tag/carreira)\n\nHoje 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.\n\nO que eu acho sobre comunidades e participação em eventos?\n\nQualquer 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.\n\nAqui 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.\n\nO 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.",
"description": "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...",
"keywords": [
"isso",
"para",
"eventos",
"pessoas",
"evento",
"comunidades",
"https",
"comunidade",
"sobre",
"importante"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 3,
"sourcePath": "/participacao-em-eventos-e-comunidades"
}
},
{
"id": "16ee44889d40d84c",
"url": "https://devpleno.com/orientacao-objeto",
"title": "Sou contra a orientação-objetos (OO)? - DevPleno (Part 2)",
"content": "[](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)",
"description": "Hoje eu queria responder uma pergunta que sempre me fazem: “Tulio, você é contra orientaçãoobjetos?” Primeiramente, eu não sou contra orientaçãoobjetos. Se...",
"keywords": [
"orienta",
"https",
"javascript",
"objetos",
"contra",
"objeto",
"come",
"dentro",
"funcional",
"temos"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/orientacao-objeto"
}
},
{
"id": "1720928bc9b0b825",
"url": "https://devpleno.com/fullstacklab-whatsapp",
"title": "Redirecting to: https://go.devpleno.com/fsm",
"content": "Redirecting to: https://go.devpleno.com/fsm [Redirecting from /fullstacklab-whatsapp to https://go.devpleno.com/fsm](https://go.devpleno.com/fsm)",
"keywords": [
"https",
"devpleno",
"redirecting",
"from",
"fullstacklab",
"whatsapp"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/fullstacklab-whatsapp"
}
},
{
"id": "172e6cc3995b478f",
"url": "https://devpleno.com/blog/17",
"title": "Blog - Página 17 - DevPleno",
"content": "## Arquivo de Insights\n\nExplore todos os artigos, tutoriais e reflexões. Filtre por categoria para encontrar exatamente o que você precisa.\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Javascript 24 de mai. de 2017 JavaScript: Apply](/javascript-apply)\n\n[Carreira 24 de mai. de 2017 Qual é o seu maior desafio nesse momento?](/qual-seu-maior-desafio)\n\n[Carreira 23 de mai. de 2017 Como aumentar a produtividade diminuindo a troca de contexto](/como-aumentar-a-produtividade)\n\n[Carreira 23 de mai. de 2017 Como fazer Networking corretamente](/networking)\n\n[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)\n\n[Fundamentos 22 de mai. de 2017 Animação basica em CSS3](/animacao-basica-css3)\n\n[Carreira 22 de mai. de 2017 Metas na carreira de desenvolvedor](/metas-na-carreira-de-desenvolvedor)\n\n[Algoritmos 22 de mai. de 2017 Once N vezes](/once-n-vezes)\n\n[Javascript 22 de mai. de 2017 Request e Response](/request-e-response)\n\n[Fundamentos 19 de mai. de 2017 Formatos de troca de dados em Aplicações Web](/formatos-de-troca-de-dados)\n\n[Javascript 19 de mai. de 2017 Postman - Como testar APIs - Hands-on](/postman-como-testar-apis)\n\n[Javascript 18 de mai. de 2017 Ctrl+C / Copy to Clipboard em JS](/copy-to-clipboard-em-js)\n\n[Anterior](/blog/16)17 / 26[Próxima](/blog/18)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"2017",
"javascript",
"carreira",
"como",
"fundamentos",
"blog",
"algoritmos",
"troca",
"todos",
"ferramentas"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/blog/17"
}
},
{
"id": "1742e833b1e68a34",
"url": "https://devpleno.com/lista-encadeada-adicionar-com-o1",
"title": "Lista encadeada - Adicionar com O(1) - DevPleno (Part 2)",
"content": "list.add2(1)\nlist.add2(2)\nlist.add2(3)\nlist.print()\nPerceba 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.\n\nO ú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.\n\nConfira o vídeo:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"head",
"tail",
"adicionar",
"lista",
"vamos",
"https",
"para",
"add2",
"value",
"node"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/lista-encadeada-adicionar-com-o1"
}
},
{
"id": "174f8f553ba43efd",
"url": "https://devpleno.com/blog/async-await/index",
"title": "ES6 - Async/Await (Part 2)",
"content": "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:\n\n```jsx\ntry {\n async function read(){\n const contents = await readFilePromise ('arquivo.js')\n console.log(contents.toString())\n } catch(e){\n console.log('erro', e)\n }\n}\n```\n\n**Conclusão**\nUma 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.\n\nConfira o vídeo:\n\n
\n \n
\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se 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!",
"keywords": [
"await",
"para",
"arquivo",
"async",
"promise",
"function",
"digo",
"const",
"node",
"readfilepromise"
],
"metadata": {
"title": "ES6 - Async/Await",
"date": "2017-05-05",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "Await-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/async-await/index.md"
}
},
{
"id": "17586f76491e96f7",
"url": "https://devpleno.com/tag/javascript/2",
"title": "Javascript - Pagina 2 - DevPleno",
"content": "Javascript\n\n## Arquivo de Insights\n\n183 posts encontrados com a tag Javascript\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Javascript 10 de nov. de 2017 Chainability com Javascript](/chainability-com-javascript)\n\n[Javascript 10 de nov. de 2017 Entenda o que é Patternite](/patternite)\n\n[Javascript 10 de nov. de 2017 Preconceito com JS? Não preparado para corporativo?](/preconceito-com-js-nao-preparado-para-corporativo)\n\n[Javascript 7 de nov. de 2017 Closure Série - POO para JS](/closure-poo-para-js)\n\n[Javascript 7 de nov. de 2017 Pegadinha #1 de entrevistas em JavaScript](/pegadinha-de-entrevistas-de-javascript)\n\n[Javascript 6 de nov. de 2017 Mono ou multi thread - POO para JS](/mono-ou-multi-thread-poo-para-js)\n\n[Javascript 25 de out. de 2017 Pare de pensar em classes! Série - POO para JS](/pare-de-pensar-em-classes)\n\n[Javascript 18 de out. de 2017 Criando um teclado com WebAudioAPI](/teclado-com-webaudioapi)\n\n[Javascript 17 de out. de 2017 FS-Watch - Checando mudanças em um arquivo-diretório](/fs-watch)\n\n[Javascript 17 de out. de 2017 Grandes quantidades de dados com menos recursos](/grandes-quantidades-de-dados-com-menos-recursos)\n\n[Javascript 17 de out. de 2017 WebAudioAPI - Gerando um som no browser](/webaudioapi)\n\n[Javascript 10 de out. de 2017 Javascript - ES6 Default Parameters](/es6-default-parameters)\n\n[Anterior](/tag/javascript)2 / 16[Próxima](/tag/javascript/3)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"javascript",
"2017",
"para",
"webaudioapi",
"arquivo",
"algoritmos",
"carreira",
"ferramentas",
"fundamentos",
"nodejs"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/tag/javascript/2"
}
},
{
"id": "1761fa4557aa7a97",
"url": "https://devpleno.com/es6-default-parameters",
"title": "Javascript - ES6 Default Parameters - DevPleno (Part 2)",
"content": "Imposto = typeof imposto === 'undefined' ? 0.07 : imposto\nAinda podemos fazer de uma outra forma, com o ES6:\n\nfunction aplicarImpostES6(valor, imposto = 0.07) {\nreturn valor + valor * imposto\n}\n\nconsole.log(aplicarImpostoES6(100, 0.1))\n\nconsole.log(aplicarImpostoES6(200))\n\nconsole.log(aplicarImpostoES6(300, 0))\nCom 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:\n\nfunction aplicarImpostES6(\nvalor,\nimposto = 0.07,\nadicional = valor * (imposto + 0.1)\n) {\nreturn valor + valor * imposto + adicional\n}\n\nconsole.log(aplicarImpostoES6(100, 0.1, 0))\n\nconsole.log(aplicarImpostoES6(200))\n\nconsole.log(aplicarImpostoES6(300, 0, 0))\nNo 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.\n\nConfira o video:\n\nDeixe 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"imposto",
"valor",
"console",
"aplicarimposto",
"isso",
"javascript",
"para",
"aplicarimpostoes6",
"https",
"como"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/es6-default-parameters"
}
},
{
"id": "17f26634494d9e26",
"url": "https://devpleno.com/navigator-geolocation",
"title": "Navigator Geolocation API - Sabendo a localização do usuário - DevPleno (Part 1)",
"content": "Javascript\n\n## Navigator Geolocation API - Sabendo a localização do usuário\n\nT\nPor Tulio Faria • 5 de outubro de 2017\n\n[Javascript](/tag/javascript)\n\nHoje 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.\n\nAlguns dos métodos que eles têm:\n\n<html>\n<body>\n<script>\nif('geolocation' in navigator){} else {Alert('ops')}\n</script>\n</body>\n</html>\nA partir disso, conseguiríamos checar a nossa localização. Podemos, por exemplo, fazer:\n\nif ('geolocation' in navigator) {\nnavigator.geolocation.getCurrentPosition(\nfunction (position) {\nconsole.log(position)\n},\nfunction (error) {\nConsole.log(error)\n}\n)\n} else {\nAlert('ops')\n}\nAo rodar o código e inspecionar, perceba que ele retorna a nossa posição.\n\nSe 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.\n\nOutra coisa bem interessante é que podemos checar, de tempos em tempos, a posição do usuário, fazendo um tracker, por exemplo:\n\nwatcher: navigator.geolocation.watchPosition(function (position) {\nconsole.log(position)\n})\nAgora, à medida que essa coordenada ficar mais precisa, vai ser melhor, pois ela vai nos trazendo essas informações.\n\nConseguimos aumentar essa precisão também utilizando o enableHighAccuracy:\n\nwatcher: navigator.geolocation.watchPosition(\nfunction (position) {\nconsole.log(position)\n},\nfunction (error) {\nconsole.log(error)\n},\n{ enableHighAccuracy: true, maximumAge: 30000, timeout: 30000 }\n)\nNo caso do watcher, podemos apagar, equivalente ao que podemos fazer com o clear interval:\n\nGeolocation.clearWatch(watcher)\nEsse é 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.",
"description": "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...",
"keywords": [
"geolocation",
"navigator",
"position",
"https",
"function",
"console",
"checar",
"podemos",
"error",
"essa"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "/navigator-geolocation"
}
},
{
"id": "1859e3467ecc57dd",
"url": "https://devpleno.com/blog/minicurso-socket-io-parte-2/index",
"title": "Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO (Part 1)",
"content": "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:\n\n```jsx\nyarn add socket.io\n```\n\nDepois 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.\n\n```jsx\napp.io = require('socket.io')()\n```\n\nFeito 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\n\n```jsx\nvar server = http.createServer(app)\napp.io.attach(server)\n```\n\nAgora ele vai conseguir responder nesse server. De alguma forma, precisamos conectar as coisas, então vamos no partials que já tem algo pronto:\n\n```jsx\n\n```\n\nPerceba 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:\n\nEsta 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:\n\n```jsx\n$(function)(){\n alert(1)\n})\n```",
"keywords": [
"vamos",
"socket",
"para",
"index",
"admin",
"const",
"criar",
"dentro",
"fazer",
"temos"
],
"metadata": {
"title": "Minicurso Socket.IO - Parte 02 - Adicionando o Socket.IO",
"date": "2017-07-06",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "socketpart2.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 5,
"sourcePath": "blog/minicurso-socket-io-parte-2/index.md"
}
},
{
"id": "18735bf0e69e2b41",
"url": "https://devpleno.com/algoritmos-xor-swap",
"title": "Vídeo sobre Algoritmos: XOR Swap - DevPleno",
"content": "Algoritmos\n\n## Vídeo sobre Algoritmos: XOR Swap\n\nT\nPor Tulio Faria • 31 de março de 2017\n\n[Algoritmos](/tag/algoritmos)\n\nO 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!\n\n## Confira o vídeo:\n\nE 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"https",
"algoritmos",
"swap",
"para",
"confira",
"devpleno",
"facebook",
"2fdevpleno",
"2falgoritmos",
"2017"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/algoritmos-xor-swap"
}
},
{
"id": "187a411926a53514",
"url": "https://devpleno.com/tag/carreira/7",
"title": "Carreira - Pagina 7 - DevPleno",
"content": "Carreira\n\n## Arquivo de Insights\n\n93 posts encontrados com a tag Carreira\n\n[Todos](/blog) [Algoritmos](/tag/algoritmos)[Carreira](/tag/carreira)[Ferramentas](/tag/ferramentas)[Fundamentos](/tag/fundamentos)[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)[ReactJS](/tag/reactjs)\n\n[Carreira 23 de mai. de 2017 Como fazer Networking corretamente](/networking)\n\n[Carreira 22 de mai. de 2017 Metas na carreira de desenvolvedor](/metas-na-carreira-de-desenvolvedor)\n\n[Carreira 17 de mai. de 2017 Como organizar os estudos em tecnologia](/como-organizar-os-estudos-em-tecnologia)\n\n[Carreira 15 de mai. de 2017 Como cobrar por Software](/como-cobrar-por-software)\n\n[Carreira 15 de mai. de 2017 Por que todo Dev usa Mac?](/por-que-todo-dev-usa-mac)\n\n[Carreira 8 de mai. de 2017 Novas Skills: O preço que tem que ser pago](/nova-skills-preco-que-tem-que-ser-pago)\n\n[Carreira 8 de mai. de 2017 Racionalização: Tomando decisões racionais](/racionalizacao)\n\n[Carreira 3 de mai. de 2017 Como ser MUITO mais produtivo?](/como-ser-muito-mais-produtivo)\n\n[Carreira 2 de mai. de 2017 Carreira: Preço que tem que ser pago](/carreira-preco-que-tem-que-ser-pago)\n\n[Carreira 24 de abr. de 2017 Dica: Precificação em Software](/precificacao-em-software)\n\n[Carreira 4 de abr. de 2017 Carreira: Tomar decisões](/carreira-tomar-decisoes)\n\n[Carreira 27 de mar. de 2017 Carreira: Você é o passageiro da sua Vida?](/carreira-voce-e-o-passageiro-da-sua-vida)\n\n[Anterior](/tag/carreira/6)7 / 8[Próxima](/tag/carreira/8)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"carreira",
"2017",
"como",
"software",
"pago",
"algoritmos",
"ferramentas",
"fundamentos",
"javascript",
"nodejs"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/tag/carreira/7"
}
},
{
"id": "18b23d41c91a29d1",
"url": "https://devpleno.com/gerenciador-de-series-p1",
"title": "Construindo um App gerenciador de séries com ReactJS - DevPleno (Part 4)",
"content": "import React, { Component } from 'react'\n\nclass Ola extends Component {\nrender() {\nreturn <span>Olá DevPleno!</span>\n}\n}\n\nexport default Ola\nEsse 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:\n\nimport Ola from './Ola'\nPodemos depois colocar no final:\n\n<Ola></Ola>\ne o resultado é o seguinte:\n\nAcabamos de criar um componente. Outra coisa importante é que conseguimos injetar dados, como por exemplo:\n\n<Ola name='Tulio' />\nE dentro do Ola.js fazer o seguinte:\n\nimport React, { Component } from 'react'\nclass Ola extends Component {\nrender() {\nreturn <span>Olá {this.props.name}!</span>\n}\n}\nexport default Ola\nEssa é uma forma de enviar dados do componente pai para o filho, afinal estamos passando propriedades (ou props) para o componente.\n\nDurante a execução do projeto que vamos fazer, utilizaremos bastante isso.\n\nPor 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.\n\nEsse db.json vai ter o seguinte formato:\n\n{\n\"series\":[{\n\"id\": 1,\n\"name\": \"How I met your mother\"\n},\n{\n\"id\": 2,\n\"name\": \"Friends\"\n}]\n}\nVamos salvar e dentro do diretório colocar\n\njson-server --watch db.json\nCom 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.\n\nConfira o video:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se no canal](https://www.youtube.com/devplenocom) e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.",
"description": "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...",
"keywords": [
"react",
"para",
"componente",
"vamos",
"projeto",
"isso",
"muito",
"mais",
"como",
"esse"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 5,
"sourcePath": "/gerenciador-de-series-p1"
}
},
{
"id": "19019aa5af8c2401",
"url": "https://devpleno.com/blog/aprenda-a-aprender/index",
"title": "Aprenda a aprender (Part 1)",
"content": "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.\n\nMuita 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.\n\nQuando 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.\n\nVamos 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.\n\nUma 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.\n\nA 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!\n\n
\n \n
",
"keywords": [
"para",
"aprender",
"mais",
"quando",
"algo",
"forma",
"isso",
"como",
"aprendendo",
"outra"
],
"metadata": {
"title": "Aprenda a aprender",
"date": "2017-07-12",
"tags": "['Carreira']",
"thumbnail": "APRENDA-A-APRENDER-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/aprenda-a-aprender/index.md"
}
},
{
"id": "1901a94a1297a9d3",
"url": "https://devpleno.com/dica-n-vezes",
"title": "Dica: Once n vezes - DevPleno",
"content": "Javascript\n\n## Dica: Once n vezes\n\nT\nPor Tulio Faria • 17 de abril de 2017\n\n[Javascript](/tag/javascript)[NodeJS](/tag/nodejs)\n\nNeste 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.\n\nDependendo da regra de negócio, poderia ser utilizado para permitir que uma ação seja executada apenas x vezes.\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"https",
"vezes",
"javascript",
"para",
"dica",
"once",
"nodejs",
"executada",
"apenas",
"este"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/dica-n-vezes"
}
},
{
"id": "1910f8eaedfb9213",
"url": "https://devpleno.com/blog/bind/index",
"title": "Bind - Altere comportamento e contexto de execução de suas funções (Part 1)",
"content": "O que é um bind em JavaScript? Para mostrar uma das utilidades do bind, eu criei um pequeno exemplo:\n\n```jsx\n;(function () {\n this.valor = 10\n\n const modulo = {\n valor: 20,\n\n getValor: function () {\n return this.valor\n }\n }\n\n console.log(modulo.getValor())\n\n const getValor = modulo.getValor\n\n console.log(getValor())\n})()\n```\n\nEu 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.\n\nSe 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.\n\nIsso 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.\n\nUma 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:\n\n```jsx\nconst getValor = modulo.getValor.bind(modulo)\n```\n\nisso é 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.\n\nA 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:\n\n```jsx\nfunction func1(param1, param2) {\n console.log(param1, param2)\n}\n\nconst funct2 = func1.bind(null, 'paramfixo')\n\nconsole.log(func2('param2'))\n```",
"keywords": [
"bind",
"getvalor",
"quando",
"para",
"valor",
"this",
"modulo",
"console",
"contexto",
"isso"
],
"metadata": {
"title": "Bind - Altere comportamento e contexto de execução de suas funções",
"date": "2017-07-27",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "BIND-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/bind/index.md"
}
},
{
"id": "19618d849a102f9c",
"url": "https://devpleno.com/blog/split-em-strings/index",
"title": "Dicas utilizando o Split em Strings",
"content": "Na dica de hoje quero mostrar alguns 'macetes' que podemos fazer com o Split, uma função de uma String em JavaScript.\n\nPrimeiramente o que é Split? Ele divide uma String em partes, por exemplo:\n\n```jsx\nconst str = 'Tulio Faria'\nconst parts = str.split(' ')\nconsole.log(parts)\n```\n\nCom 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:\n\n```jsx\nconst parts = str.split(' ').join('====')\n```\n\nAssim o resultado seria Tulio===Faria. Em algumas situações, é possível fazer alguns processamentos mais inteligentes com essa técnica.\n\nAlé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:\n\n```jsx\nconst str = 'Tulio 0 Faria'\nconst parts = str.split(' ').filter((p) => p != '0')\n```\n\nAssim 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.\n\nOutro 'macete' interessante é o seguinte: se eu der um Split em espaço, ele divide letra a letra:\n\n```jsx\n.split(' ')\n```\n\nAssim poderíamos, por exemplo, tirar as vogais:\n\n```jsx\nconst vogais = 'aeiou'\n .plit(' ')\n .split(' ')\n .filter((letra) => vogais.indexOf(letra) < 0)\n```\n\nCom isso retornamos apenas as consoantes do meu nome.\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"split",
"const",
"podemos",
"fazer",
"string",
"exemplo",
"parts",
"letra",
"embed",
"tulio"
],
"metadata": {
"title": "Dicas utilizando o Split em Strings",
"date": "2017-10-05",
"tags": "['Javascript', 'Fundamentos']",
"thumbnail": "SplitString.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/split-em-strings/index.md"
}
},
{
"id": "1964dc3bcb529057",
"url": "https://devpleno.com/projeto-certo-para-estudar-programacao",
"title": "Qual o projeto certo para estudar programação? - DevPleno (Part 3)",
"content": "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.\n\nCurta 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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 ...",
"keywords": [
"para",
"https",
"projeto",
"devpleno",
"estudar",
"programa",
"como",
"mais",
"aplica",
"aprender"
],
"metadata": {
"chunkIndex": 2,
"totalChunks": 3,
"sourcePath": "/projeto-certo-para-estudar-programacao"
}
},
{
"id": "19caddba42a180a6",
"url": "https://devpleno.com/blog/falta-de-tempo/index",
"title": "Falta tempo para realizar aquele projeto? (Part 1)",
"content": "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”…?\n\nSe 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”.\n\nA 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.\n\nSe 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?\n\nÉ 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.\n\nÉ 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.\n\nEssa é 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.",
"keywords": [
"tempo",
"para",
"mais",
"muito",
"devpleno",
"sempre",
"projeto",
"prioridade",
"isso",
"sobre"
],
"metadata": {
"title": "Falta tempo para realizar aquele projeto?",
"date": "2017-09-19",
"tags": "['Carreira']",
"thumbnail": "FALTA-DE-TEMPO-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 2,
"sourcePath": "blog/falta-de-tempo/index.md"
}
},
{
"id": "1a15123212944c9a",
"url": "https://devpleno.com/blog/fetch-hands-on/index",
"title": "Fetch - Uma nova forma de fazer requisições HTTP (Part 2)",
"content": "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.\n\nEu 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\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"fetch",
"para",
"fazer",
"json",
"como",
"http",
"then",
"post",
"interessante",
"muito"
],
"metadata": {
"title": "Fetch - Uma nova forma de fazer requisições HTTP",
"date": "2017-07-27",
"tags": "['Javascript', 'NodeJS']",
"thumbnail": "FETCH-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/fetch-hands-on/index.md"
}
},
{
"id": "1a209ddd1b1f1b2f",
"url": "https://devpleno.com/blog/ferramentas-par-layouts-com-flexbox/index",
"title": "Hands-on: Ferramentas visuais para Flexbox",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nDeixe 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!",
"keywords": [
"embed",
"responsive",
"https",
"classname",
"iframe",
"youtube",
"devpleno",
"facebook",
"flexbox",
"nova"
],
"metadata": {
"title": "Hands-on: Ferramentas visuais para Flexbox",
"date": "2017-05-02",
"tags": "['Javascript']",
"thumbnail": "maxresdefault-11-790x400.jpg",
"author": "Tulio Faria",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/ferramentas-par-layouts-com-flexbox/index.md"
}
},
{
"id": "1a9d0662c931fe3b",
"url": "https://devpleno.com/empreender-na-area-de-software",
"title": "3 dicas para começar a empreender na área de software - DevPleno (Part 2)",
"content": "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.\n\nDeixe 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.\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.\n\n[](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)",
"description": "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...",
"keywords": [
"para",
"vender",
"https",
"come",
"dica",
"carreira",
"software",
"duas",
"empreender",
"ando"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/empreender-na-area-de-software"
}
},
{
"id": "1af555b9a69bb72e",
"url": "https://devpleno.com/streams-parte-1",
"title": "Hands-on: Streams - Parte 1 - DevPleno (Part 2)",
"content": "const fs = require('fs')\nconst readable = sf.crateReadStream('arquivo.txt')\nreadable.on('data', (data) => {\nconsole.log(data.toString())\n})\nQuando 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.\n\nPodemos 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:\n\nconst fs = require('fs')\nconst readable = sf.crateReadStream('arquivo.txt')\nreadable.on('data', (data) => {\nconsole.log(data.toString())\nreadable.pause()\nsetTimeout(() => readable.resume(), 2000)\n})\nNo 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.\n\nconst fs = require('fs')\nconst readable = sf.crateReadStream('arquivo.txt')\nreadable.on('readable', () => {\nwhile ((chunk = readable.read())) {\nconsole.log(chunk.toString())\n}\n})\n**Qual a vantagem do modo paused?**\n\nEu posso ir processando uma pequena quantia de dados de acordo com o que eu quero.\n\n**Conclusão**\n\nEssa 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:\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), [inscreva-se 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!\n\n#### Gostou do conteúdo?\n\nCompartilhe este artigo com outros devs.",
"description": "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...",
"keywords": [
"readable",
"dados",
"arquivo",
"stream",
"data",
"para",
"vamos",
"const",
"https",
"javascript"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "/streams-parte-1"
}
},
{
"id": "1b825fce01016b3e",
"url": "https://devpleno.com/blog/falta-de-tempo/index",
"title": "Falta tempo para realizar aquele projeto? (Part 2)",
"content": "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.\n\nConfira o video:\n\n
\n \n
\n\nCurta 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!",
"keywords": [
"tempo",
"para",
"mais",
"muito",
"devpleno",
"sempre",
"projeto",
"prioridade",
"isso",
"sobre"
],
"metadata": {
"title": "Falta tempo para realizar aquele projeto?",
"date": "2017-09-19",
"tags": "['Carreira']",
"thumbnail": "FALTA-DE-TEMPO-790x400.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "blog/falta-de-tempo/index.md"
}
},
{
"id": "1bb08de4386342de",
"url": "https://devpleno.com/blog",
"title": "Blog - DevPleno (Part 2)",
"content": "[Javascript 19 de fev. de 2018 Como invocar funções dinamicas em JavaScript](/como-invocar-funcoes-dinamicamente-com-js)\n\nAnterior\n1 / 26[Próxima](/blog/2)",
"description": "Artigos sobre desenvolvimento, carreira e tecnologia.",
"keywords": [
"carreira",
"como",
"para",
"javascript",
"programador",
"2018",
"ferramentas",
"claude",
"code",
"sites"
],
"metadata": {
"chunkIndex": 1,
"totalChunks": 2,
"sourcePath": "/blog"
}
},
{
"id": "1bd3ef02164b773a",
"url": "https://devpleno.com/devreactjs-carta",
"title": "Redirecting to: https://lp.devpleno.com/devreactjs/",
"content": "Redirecting to: https://lp.devpleno.com/devreactjs/ [Redirecting from /devreactjs-carta to https://lp.devpleno.com/devreactjs/](https://lp.devpleno.com/devreactjs/)",
"keywords": [
"devreactjs",
"https",
"devpleno",
"redirecting",
"from",
"carta"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/devreactjs-carta"
}
},
{
"id": "1c00910fcc9ca0f8",
"url": "https://devpleno.com/blog/injecao-de-dependencia/index",
"title": "Injeção de dependência - Aumente a testabilidade do seu código (Part 2)",
"content": "```jsx\nfunction valina(um) {\n if (num > 100) {\n alert('erro')\n return false\n }\n return true\n}\n```\n\nSe 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.\n\nO que podemos fazer?\n\nSe 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.\n\n```jsx\nfunction valina(um) {\n if (num > 100) {\n alert('erro')\n return false\n }\n return true\n}\n\nconst assert = require('assert')\ndescribe('validations', () => {\n it('should return false and an error if num gt 100', () => {\n const fakeAlert = (msg) => {\n assert.equal(msg, 'erro')\n }\n const returnedValue = valida(fakeAlert, 101)\n assert.equal(returnedValue, false)\n })\n})\n```\n\nPerceba 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.\n\nVamos 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.",
"keywords": [
"alert",
"para",
"model",
"quando",
"digo",
"depend",
"vamos",
"temos",
"return",
"ncia"
],
"metadata": {
"title": "Injeção de dependência - Aumente a testabilidade do seu código",
"date": "2017-06-01",
"tags": "['Javascript']",
"thumbnail": "InjecaoDependenciaPrin.png",
"author": "Tulio Faria",
"chunkIndex": 1,
"totalChunks": 3,
"sourcePath": "blog/injecao-de-dependencia/index.md"
}
},
{
"id": "1c38370f2266f4e2",
"url": "https://devpleno.com/blog/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira/index",
"title": "Freelancer no exterior: 7 dicas para ter sucesso na carreira (Part 4)",
"content": "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).\n\n## 7. Conheça as especificidades de seu campo de atuação no exterior\n\nUma 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.\n\nAs 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.\n\nSer 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.\n\nPara 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.\n\nGostou das nossas dicas sobre ser freelancer no exterior? Siga compartilhando nossos conteúdos nas redes sociais!\n\nCurta 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!",
"keywords": [
"para",
"trabalho",
"freelancer",
"exterior",
"pode",
"mais",
"isso",
"como",
"brasil",
"pessoas"
],
"metadata": {
"title": "Freelancer no exterior: 7 dicas para ter sucesso na carreira",
"date": "2017-07-03",
"tags": "['Carreira']",
"thumbnail": "101429-freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira-790x400.jpg",
"author": "Tulio Faria",
"chunkIndex": 3,
"totalChunks": 4,
"sourcePath": "blog/freelancer-no-exterior-7-dicas-para-ter-sucesso-na-carreira/index.md"
}
},
{
"id": "1c8410d6bce37c53",
"url": "https://devpleno.com/blog/arrow-functions/index",
"title": "Arrow Functions - Construindo funções anônimas de forma mais simplificada (Part 1)",
"content": "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:\n\n```jsx\nconst funct1 = function (param1) {}\n```\n\nSe fossemos construir isso com uma Arrow Function, poderíamos fazer simplesmente isso:\n\n```jsx\nconst funct1 = (param) => {}\n```\n\n**Por que ela se chama Arrow Function?**\n\nPorque 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:\n\n```jsx\nconst2 = function (valor) {\n return valor * 2\n}\n```\n\nSe quisermos criar uma Arrow Function nesse sentido, precisamos passar também o valor, mas podemos fazer apenas isso:\n\n```jsx\nconst funct2 = (valor) => valor * 2\n```\n\nChamamos 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:\n\n```jsx\nconst vetor = [1, 2, 3]\n\nvetor.map((valor) => valor * 2)\n```\n\nA ú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:\n\n```jsx\nclass Componente extends Component{\n\n loadData(){\n //anything\n }\n\n render(){\n return(\n