https://www.webdevdrops.com/pt Artigos e tutoriais de desenvolvimento web em português: Git, React, Node.js, GraphQL, webpack, testes e carreira em programação. pt-BR Tue, 08 Feb 2022 09:00:00 GMT https://www.webdevdrops.com/aprender-programacao-online https://www.webdevdrops.com/aprender-programacao-online Tue, 08 Feb 2022 09:00:00 GMT Os melhores sites de cursos online para aprender programação, com muita opção em português e gratuita: Udemy, Alura, Rocketseat, Coursera e outros. Aprendizado https://www.webdevdrops.com/node-js-enviando-emails-amazon-ses https://www.webdevdrops.com/node-js-enviando-emails-amazon-ses Thu, 14 Jan 2021 09:00:00 GMT Como enviar e-mails em Node.js com Amazon SES: validar domínio e e-mails na AWS, criar a chave de acesso e enviar com o AWS SDK. Node.js https://www.webdevdrops.com/fullstack-nodejs-react-graphql-12-deploy-producao-heroku https://www.webdevdrops.com/fullstack-nodejs-react-graphql-12-deploy-producao-heroku Thu, 07 Jan 2021 09:00:00 GMT Parte 12 da série Fullstack com Node.js, React e GraphQL: deploy da aplicação em produção no Heroku, com backend, frontend e variáveis de ambiente. Full Stack https://www.webdevdrops.com/fullstack-11-testes-frontend-react-testing-library https://www.webdevdrops.com/fullstack-11-testes-frontend-react-testing-library Sun, 20 Dec 2020 09:00:00 GMT Parte 11 da série Fullstack com Node.js, React e GraphQL: testes no frontend com React Testing Library, mock do backend, cobertura e Travis CI. Full Stack https://www.webdevdrops.com/fullstack-node-js-react-graphql-apollo-client https://www.webdevdrops.com/fullstack-node-js-react-graphql-apollo-client Sat, 05 Dec 2020 09:00:00 GMT Parte 10 da série Fullstack com Node.js, React e GraphQL: integração do frontend com o backend usando Apollo Client, login e queries. Full Stack https://www.webdevdrops.com/como-criar-um-pull-request-no-github-passo-a-passo https://www.webdevdrops.com/como-criar-um-pull-request-no-github-passo-a-passo Sat, 26 Sep 2020 09:00:00 GMT Passo a passo para criar um pull request no GitHub: fazer o fork, clonar, criar uma branch, enviar as alterações e acompanhar a revisão. https://www.webdevdrops.com/fullstack-nodejs-react-graphql-9-material-ui-recharts https://www.webdevdrops.com/fullstack-nodejs-react-graphql-9-material-ui-recharts Sat, 22 Aug 2020 09:00:00 GMT Parte 9 da série Fullstack com Node.js, React e GraphQL: interface com Material-UI, gráficos com Recharts e formatação de moeda e data. Full Stack https://www.webdevdrops.com/fullstack-node-react-forest-admin-e3b07c142f9a https://www.webdevdrops.com/fullstack-node-react-forest-admin-e3b07c142f9a Sun, 21 Jun 2020 09:00:00 GMT Parte 4 da série Fullstack com Node.js, React e GraphQL: interface administrativa com Forest Admin para fazer o CRUD dos dados. Full Stack https://www.webdevdrops.com/nodejs-banco-de-dados-orm-query-builder-driver-nativo https://www.webdevdrops.com/nodejs-banco-de-dados-orm-query-builder-driver-nativo Fri, 12 Jun 2020 09:00:00 GMT Driver nativo, query builder ou ORM: as formas de acessar banco de dados em Node.js, com exemplos em PostgreSQL e as diferenças entre elas. Node.js https://www.webdevdrops.com/como-acessar-camera-com-javascript https://www.webdevdrops.com/como-acessar-camera-com-javascript Sat, 30 May 2020 09:00:00 GMT Como acessar a câmera do dispositivo com JavaScript e a API MediaStream: exibir o vídeo, alternar entre câmera frontal e traseira e capturar screenshots. JavaScript https://www.webdevdrops.com/apps-aprender-programacao-celular-android-ios https://www.webdevdrops.com/apps-aprender-programacao-celular-android-ios Wed, 20 May 2020 09:00:00 GMT 8 apps para aprender programação no celular com lições curtas, no Android e no iOS: Grasshopper, Mimo, SoloLearn, Enki, Programming Hero e outros. Aprendizado https://www.webdevdrops.com/upload-arquivos-node-js-multer https://www.webdevdrops.com/upload-arquivos-node-js-multer Sun, 17 May 2020 09:00:00 GMT Como fazer upload de arquivos em Node.js com Express e Multer: receber imagens, renomear arquivos e escolher onde salvar. Node.js https://www.webdevdrops.com/react-forms-validacao-react-hook-form https://www.webdevdrops.com/react-forms-validacao-react-hook-form Sun, 10 May 2020 09:00:00 GMT Como trabalhar com formulários e validação no React usando React Hook Form: registrar campos, receber os dados e exibir mensagens de erro. React https://www.webdevdrops.com/node-js-typescript https://www.webdevdrops.com/node-js-typescript Sun, 03 May 2020 09:00:00 GMT Como desenvolver em Node.js com TypeScript usando ts-node-dev, com setup, um exemplo com Express e o build para produção. Node.js TypeScript https://www.webdevdrops.com/5-ferramentas-produtividade-desenvolvimento-web https://www.webdevdrops.com/5-ferramentas-produtividade-desenvolvimento-web Thu, 02 Apr 2020 09:00:00 GMT Cinco ferramentas para programar mais rápido no desenvolvimento web: Emmet, Prettier, live reload, DevDocs e VS Code, com dicas de uso de cada uma. Ferramentas https://www.webdevdrops.com/instalar-wordpress-local-forma-facil https://www.webdevdrops.com/instalar-wordpress-local-forma-facil Fri, 20 Mar 2020 09:00:00 GMT Como instalar o WordPress no seu computador de forma rápida, sem configurar servidor nem banco de dados, usando o Local. https://www.webdevdrops.com/git-bash-como-instalar-usar https://www.webdevdrops.com/git-bash-como-instalar-usar Thu, 27 Feb 2020 09:00:00 GMT O que é o Git Bash, como instalar no Windows e os principais comandos para usar o terminal do Git no dia a dia. https://www.webdevdrops.com/fullstack-node-js-react-graphql-typescript https://www.webdevdrops.com/fullstack-node-js-react-graphql-typescript Thu, 07 Nov 2019 09:00:00 GMT Parte 8 da série Fullstack com Node.js, React e GraphQL: setup do frontend com React, TypeScript, styled-components e Material-UI. Full Stack https://www.webdevdrops.com/fullstack-node-react-graphql-autenticacao-passport https://www.webdevdrops.com/fullstack-node-react-graphql-autenticacao-passport Thu, 02 May 2019 09:00:00 GMT Parte 7 da série Fullstack com Node.js, React e GraphQL: autenticação com Passport.js e Google OAuth, sessões e rotas protegidas. Full Stack https://www.webdevdrops.com/ensinar-online-renda-extra-tecnologia https://www.webdevdrops.com/ensinar-online-renda-extra-tecnologia Wed, 31 Oct 2018 09:00:00 GMT Como criar um curso online na área de tecnologia e ganhar uma renda extra: planejar o conteúdo, gravar as aulas e montar uma comunidade. https://www.webdevdrops.com/webpack-sem-medo-parte-3-plugins-e-dev-server-86b6e003657c https://www.webdevdrops.com/webpack-sem-medo-parte-3-plugins-e-dev-server-86b6e003657c Sat, 20 Oct 2018 09:00:00 GMT Parte 3 da série Webpack sem Medo: plugins como o ProvidePlugin e a extração de CSS, e o webpack dev server para desenvolvimento. https://www.webdevdrops.com/webpack-sem-medo-parte-2-loaders-1d1239df3945 https://www.webdevdrops.com/webpack-sem-medo-parte-2-loaders-1d1239df3945 Sat, 06 Oct 2018 09:00:00 GMT Parte 2 da série Webpack sem Medo: loaders para carregar outros tipos de arquivo, como ES6+ com babel-loader e CSS com css-loader. https://www.webdevdrops.com/webpack-sem-medo-introducao-af889eb659e7 https://www.webdevdrops.com/webpack-sem-medo-introducao-af889eb659e7 Thu, 04 Oct 2018 09:00:00 GMT Parte 1 da série Webpack sem Medo: o que é o webpack, grafo de dependências, entry e output, com um exemplo de minificação de JS. https://www.webdevdrops.com/fullstack-node-react-graphql-apollo-1a0559e0fc51 https://www.webdevdrops.com/fullstack-node-react-graphql-apollo-1a0559e0fc51 Sat, 21 Apr 2018 09:00:00 GMT Parte 6 da série Fullstack com Node.js, React e GraphQL: servidor GraphQL com Apollo Server, schema, resolvers e endpoint de consultas. Full Stack https://www.webdevdrops.com/fullstack-node-react-travis-ci-2caaee9ccbb5 https://www.webdevdrops.com/fullstack-node-react-travis-ci-2caaee9ccbb5 Mon, 26 Mar 2018 09:00:00 GMT Parte 5 da série Fullstack com Node.js, React e GraphQL: integração contínua com Travis CI, status da build no GitHub e selo no README. Full Stack https://www.webdevdrops.com/fullstack-node-react-graphql-testes-mocha-chai-eb5646e5b929 https://www.webdevdrops.com/fullstack-node-react-graphql-testes-mocha-chai-eb5646e5b929 Fri, 23 Mar 2018 09:00:00 GMT Parte 3.1 da série Fullstack com Node.js, React e GraphQL: testes unitários dos models do Sequelize com Mocha e Chai. Full Stack https://www.webdevdrops.com/fullstack-node-react-graphql-postgresql-sequelize-11e646979b27 https://www.webdevdrops.com/fullstack-node-react-graphql-postgresql-sequelize-11e646979b27 Fri, 16 Mar 2018 09:00:00 GMT Parte 3 da série Fullstack com Node.js, React e GraphQL: banco de dados PostgreSQL e mapeamento com o ORM Sequelize. Full Stack https://www.webdevdrops.com/fullstack-node-react-graphql-express-b551b1a25ef3 https://www.webdevdrops.com/fullstack-node-react-graphql-express-b551b1a25ef3 Wed, 07 Mar 2018 09:00:00 GMT Parte 2 da série Fullstack com Node.js, React e GraphQL: setup inicial do projeto com Prettier e ESLint e o servidor Node.js com Express. Full Stack https://www.webdevdrops.com/fullstack-node-react-graphql-introducao-2c2f18c757c4 https://www.webdevdrops.com/fullstack-node-react-graphql-introducao-2c2f18c757c4 Mon, 05 Mar 2018 09:00:00 GMT Introdução à série Fullstack: uma aplicação web do zero até produção com Node.js, Sequelize, React, GraphQL e Apollo. Full Stack https://www.webdevdrops.com/construindo-gerador-site-estatico-40-linhas-nodejs-f1902dd41adb https://www.webdevdrops.com/construindo-gerador-site-estatico-40-linhas-nodejs-f1902dd41adb Tue, 10 Oct 2017 09:00:00 GMT Construa seu próprio gerador de site estático em cerca de 40 linhas de Node.js: lê as configurações, renderiza templates e gera o HTML. https://www.webdevdrops.com/javascript-this-71dd763aad52 https://www.webdevdrops.com/javascript-this-71dd763aad52 Thu, 07 Sep 2017 09:00:00 GMT Entenda o this no JavaScript com 4 regras: método de objeto, bind/apply/call, new e contexto global, além do comportamento das arrow functions. https://www.webdevdrops.com/criar-um-novo-habito-e53b43a6143a https://www.webdevdrops.com/criar-um-novo-habito-e53b43a6143a Sun, 03 Sep 2017 09:00:00 GMT Tradução de um artigo sobre o efeito dominó: como começar um novo hábito com metas pequenas, que geram impulso para as maiores. https://www.webdevdrops.com/arte-do-impulso-ideias-precisam-velocidade https://www.webdevdrops.com/arte-do-impulso-ideias-precisam-velocidade Sat, 02 Sep 2017 09:00:00 GMT Tradução do artigo de Jocelyn K. Glei sobre como ganhar impulso em projetos pessoais trabalhando neles todos os dias, num horário fixo. https://www.webdevdrops.com/http-desenvolvedores-frontend https://www.webdevdrops.com/http-desenvolvedores-frontend Sat, 02 Sep 2017 09:00:00 GMT O básico de HTTP para desenvolvedores frontend: como funcionam requisição e resposta, métodos, URI, cabeçalhos, corpo e códigos de status. https://www.webdevdrops.com/mito-multitarefa-produtivo https://www.webdevdrops.com/mito-multitarefa-produtivo Sat, 02 Sep 2017 09:00:00 GMT Ser multitarefa não deixa você mais produtivo. Um teste simples, baseado no livro The Myth of Multitasking, mostra o custo de trocar de tarefa. https://www.webdevdrops.com/react-setup-minimo-webpack https://www.webdevdrops.com/react-setup-minimo-webpack Mon, 28 Aug 2017 09:00:00 GMT Um setup mínimo de webpack e Babel para começar um projeto React do zero, sem create-react-app, com um componente de exemplo. https://www.webdevdrops.com/git-no-windows-github https://www.webdevdrops.com/git-no-windows-github Sun, 01 Jan 2017 09:00:00 GMT Tutorial para instalar e configurar o Git no Windows, criar um repositório local, gerar a chave SSH e enviar seu código para o GitHub. https://www.webdevdrops.com/react-tipos-de-componentes-container-e-apresentacao https://www.webdevdrops.com/react-tipos-de-componentes-container-e-apresentacao Thu, 29 Sep 2016 09:00:00 GMT Componentes container e de apresentação no React: como separar a lógica de dados da interface e por que essa divisão ajuda. https://www.webdevdrops.com/performance-imagens-mais-leves-be7e97fec89f https://www.webdevdrops.com/performance-imagens-mais-leves-be7e97fec89f Wed, 22 May 2013 09:00:00 GMT Como deixar seu site mais rápido com imagens mais leves: escolha o formato certo (JPG, PNG ou GIF) e exporte com a compressão ideal. https://www.webdevdrops.com/geradores-de-textos-e-imagens-lorem-ipsum-2f39503f63c1 https://www.webdevdrops.com/geradores-de-textos-e-imagens-lorem-ipsum-2f39503f63c1 Wed, 08 May 2013 09:00:00 GMT Geradores de texto e imagens de exemplo para montar layouts: Lorem Ipsum, Gerador de Lero-Lero, Mussum Ipsum, Dummy Image e Faker.